Upload
eltuctuc
View
127
Download
1
Embed Size (px)
DESCRIPTION
Pecha Kucha Präsentation
Citation preview
HTML 5 Magazine
Pecha Kucha Präsentationvon Enrico Reinsdorf
HTML, Online Magazine, Frameworks & Laker
HTML 5 Magazine
Was ist HTML5?h
ttp:
//de
.wik
iped
ia.o
rg/w
iki/
HTM
L5
HTML 5 Magazine
HTML5CSS3
JavaScript
HTML 5 Magazine
Print vs. Online
„Im Internet könnten Inhalte aktualisiert werden, in der gedruckten Ausgabe hingegen würden sie interpretiert.“
Felix Bellinger – Redaktionskoordinator des „Hamburger Abendblattes“
HTML 5 Magazine
Desktop vs. Mobil
http://www.catalystresources.com/cross-device-ui
HTML 5 Magazine
Web vs. NativeGerätezugriff Geschwindigkeit Entwicklungskosten App Store Genehmigung
Native
Hybrid
Web
voll
voll
teilweise
sehr schnell
schnell
schnell
teuer
zumutbar
zumutbar
verfügbar
verfügbar
nicht vorhanden
verpflichtend
geringer Mehraufwand
keine
HTML 5 Magazine
Fram
ewor
ks
HTML5 Boilerplate ist ein professionelles HTML/CSS/JS-Template als Basis für eine schnelle, robuste und zu-kunftssichere Website.http://de.html5boilerplate.com
Das Less Framework ist ein HTML5-powered CSSFramework zur Erstellung flexibler multicolumn Website-Layouts.
http://lessframework.com
Das G5 Framework verfügt über alles, was Sie für die schnelle Web-Entwicklung und die Wiederverwendung für ihre Website, Theme oder App-Projekt brauchen.
http://framework.gregbabula.info
Das 52framework ist ein ziemlich neues CSS-Frame-work, das mit den viel sauberer HTML5 gebaut wurde und CSS3 nutzt.
http://52framework.com/
HTML 5 Magazine
PhoneGap
Build your app once with web-standardsBased on HTML5, PhoneGap leverages web technologies developers already know best... HTML and JavaScript.
Wrap it with PhoneGapUsing the free open source framework or PhoneGap build you can get access to
native APIs.
Deploy to multiple platforms!PhoneGap uses standards-based web technologies to bridge web applications
and mobile devices.
http://phonegap.com
HTML 5 MagazineMagazin Frameworks
Facebook Apps
Kindle publishing for periodicals
Adobe DPS
Google currents
HTML 5 Magazine
Magazin Frameworks
Laker Baker
Treesaver.js Magaka
HTML 5 Magazine
www.lakercompendium.com
Automotive Agenda
American Presidents - Enhanced Touchbook
World War I for iPad
Laker ist ein Kompendium von Dateien, Frameworks, Styles und Tipps für die Gestaltung digitaler Publikationen in HTML5.
HTML 5 Magazine
Apps erstellen mit Laker
Sein Name ist Florian Franke, 26 Jahre alt.
Ich bin in Frankfurt / Deutschland und Laker leben ist ein Teil meiner abschließenden Diplomarbeit von Prof. Robert Paulmann betreut.
Ich studierte Visuelle Kommunikation an der Fachhochschule in Mainz / Deutschland.
HTML 5 Magazine
Was brauchen wir?
• Grundkenntisse in HTML, CSS und JavaScript.
• Einen Mac und Xcode (keine Programmierkenntnisse erforderlich) für den Export der App.
HTML 5 Magazine
Wie zu benutzen?
Laker ist auf dem „Baker eBook Framework“ aufgebaut.
HTML-Dateien und Styles, die mit dem „Less Framework“ gebaut werden.
HTML 5 Magazine
DateiübersichtIm Inneren des „book“-Ordner(wo man 99% der Zeit arbeiten wird):
• MyDossierNumber.html• /fonts• /images• /inc• /js• /sounds• /styles
Hier ist eine Übersicht über die Dateien und Ordner, die Teil der La-ker sind:
HTML 5 Magazine
Dossiers, Grid & Style
Screen width Column(s) Target
Lager than 955px 10 Large desktop, iPad landscape
Between 954px and 768px 8 Small desktop, iPad portrait
Between 767px and 480px 1 Mobil phone, iPhone landscape
Between 479px and 320px 1 Mobile phone, iPhone portrait
Dossiers sind eine Art „Artikel“, die Inhalte wie Texte enthalten, sondern auch Rich Media wie Video oder Audio.
HTML 5 Magazine
Der Text-Modul enthält eine Art von formatierten Text. Text kann in jeder Spalte platziert werden. Das folgen-de Beispiel zeigt einen Text in einer „großen Spalte“, die links umflossen wird:
Text
HTML 5 Magazine
Bilder & Slideshow
HTML 5 MagazineVideo
2 Schritte zum Einbinden eines Audio-Players.
1. Gib den Path zur Audio-Datei und die Player-ID in JavaScript an.
2. Füge einen DIV-Container mit der Player-Id ein.
YouTube bietet zwei Möglichkeiten zum Einbetten von Videos.
Die „neue“ Art und Weise entsteht ein iFrame auf der Seite. Weil iFrames nicht in der Laker iOS App arbeiten, können Sie YouTube-Videos via dem „alten“ Code einbetten.
Audi
o
HTML 5 Magazine
Card-Flip Effekt3 Schritte zum Einbinden eines Audio-Players.
1. Aktivieren Sie die erforderlichen JavaScript- Bibliotheken in der Sektion.
2. Bauen Sie Ihre Karten
3. Initiieren Sie die Card-Flip Effekt
Goolge Maps
Nur um Google Maps zu gehen, drücken Sie die Embed-Link und Vergangenheit der Code in Ihre Laker-Projekt.
HTML 5 Magazine
Pecha Kucha Präsentationvon Enrico Reinsdorf
Danke für eure Aufmerksamkeit!