Download - HTML5 Magazine
![Page 1: HTML5 Magazine](https://reader034.vdocuments.site/reader034/viewer/2022042510/557213c2497959fc0b92f39a/html5/thumbnails/1.jpg)
HTML 5 Magazine
Pecha Kucha Präsentationvon Enrico Reinsdorf
HTML, Online Magazine, Frameworks & Laker
![Page 2: HTML5 Magazine](https://reader034.vdocuments.site/reader034/viewer/2022042510/557213c2497959fc0b92f39a/html5/thumbnails/2.jpg)
HTML 5 Magazine
Was ist HTML5?h
ttp:
//de
.wik
iped
ia.o
rg/w
iki/
HTM
L5
![Page 3: HTML5 Magazine](https://reader034.vdocuments.site/reader034/viewer/2022042510/557213c2497959fc0b92f39a/html5/thumbnails/3.jpg)
HTML 5 Magazine
HTML5CSS3
JavaScript
![Page 4: HTML5 Magazine](https://reader034.vdocuments.site/reader034/viewer/2022042510/557213c2497959fc0b92f39a/html5/thumbnails/4.jpg)
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“
![Page 5: HTML5 Magazine](https://reader034.vdocuments.site/reader034/viewer/2022042510/557213c2497959fc0b92f39a/html5/thumbnails/5.jpg)
HTML 5 Magazine
Desktop vs. Mobil
http://www.catalystresources.com/cross-device-ui
![Page 6: HTML5 Magazine](https://reader034.vdocuments.site/reader034/viewer/2022042510/557213c2497959fc0b92f39a/html5/thumbnails/6.jpg)
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
![Page 7: HTML5 Magazine](https://reader034.vdocuments.site/reader034/viewer/2022042510/557213c2497959fc0b92f39a/html5/thumbnails/7.jpg)
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/
![Page 8: HTML5 Magazine](https://reader034.vdocuments.site/reader034/viewer/2022042510/557213c2497959fc0b92f39a/html5/thumbnails/8.jpg)
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
![Page 9: HTML5 Magazine](https://reader034.vdocuments.site/reader034/viewer/2022042510/557213c2497959fc0b92f39a/html5/thumbnails/9.jpg)
HTML 5 MagazineMagazin Frameworks
Facebook Apps
Kindle publishing for periodicals
Adobe DPS
Google currents
![Page 10: HTML5 Magazine](https://reader034.vdocuments.site/reader034/viewer/2022042510/557213c2497959fc0b92f39a/html5/thumbnails/10.jpg)
HTML 5 Magazine
Magazin Frameworks
Laker Baker
Treesaver.js Magaka
![Page 11: HTML5 Magazine](https://reader034.vdocuments.site/reader034/viewer/2022042510/557213c2497959fc0b92f39a/html5/thumbnails/11.jpg)
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.
![Page 12: HTML5 Magazine](https://reader034.vdocuments.site/reader034/viewer/2022042510/557213c2497959fc0b92f39a/html5/thumbnails/12.jpg)
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.
![Page 13: HTML5 Magazine](https://reader034.vdocuments.site/reader034/viewer/2022042510/557213c2497959fc0b92f39a/html5/thumbnails/13.jpg)
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.
![Page 14: HTML5 Magazine](https://reader034.vdocuments.site/reader034/viewer/2022042510/557213c2497959fc0b92f39a/html5/thumbnails/14.jpg)
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.
![Page 15: HTML5 Magazine](https://reader034.vdocuments.site/reader034/viewer/2022042510/557213c2497959fc0b92f39a/html5/thumbnails/15.jpg)
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:
![Page 16: HTML5 Magazine](https://reader034.vdocuments.site/reader034/viewer/2022042510/557213c2497959fc0b92f39a/html5/thumbnails/16.jpg)
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.
![Page 17: HTML5 Magazine](https://reader034.vdocuments.site/reader034/viewer/2022042510/557213c2497959fc0b92f39a/html5/thumbnails/17.jpg)
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
![Page 18: HTML5 Magazine](https://reader034.vdocuments.site/reader034/viewer/2022042510/557213c2497959fc0b92f39a/html5/thumbnails/18.jpg)
HTML 5 Magazine
Bilder & Slideshow
![Page 19: HTML5 Magazine](https://reader034.vdocuments.site/reader034/viewer/2022042510/557213c2497959fc0b92f39a/html5/thumbnails/19.jpg)
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
![Page 20: HTML5 Magazine](https://reader034.vdocuments.site/reader034/viewer/2022042510/557213c2497959fc0b92f39a/html5/thumbnails/20.jpg)
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.
![Page 21: HTML5 Magazine](https://reader034.vdocuments.site/reader034/viewer/2022042510/557213c2497959fc0b92f39a/html5/thumbnails/21.jpg)
HTML 5 Magazine
Pecha Kucha Präsentationvon Enrico Reinsdorf
Danke für eure Aufmerksamkeit!