HTML 5 Magazine

HTML, Online Magazine, Frameworks & Laker

Pecha Kucha Prsentation von Enrico Reinsdorf

Was ist HTML5?

HTML 5 Magazine
http://de.wikipedia.org/wiki/HTML5

HTML 5

HTML5 CSS3 JavaScript Magazine

Im Internet knnten Inhalte aktualisiert werden, in der gedruckten Ausgabe hingegen wrden sie interpretiert.
Felix Bellinger Redaktionskoordinator des Hamburger Abendblattes

Print vs. Online

HTML 5 Magazine

Desktop vs. Mobil

http://www.catalystresources.com/cross-device-ui

HTML 5 Magazine

Web vs. Native

Gertezugriff Geschwindigkeit Entwicklungskosten App Store Genehmigung Native voll sehr schnell teuer verfgbar verpflichtend

Hybrid

voll

schnell

zumutbar

verfgbar

geringer Mehraufwand

Web

teilweise

schnell

zumutbar

nicht vorhanden

keine

HTML 5 Magazine

Frameworks

Das Less Framework ist ein HTML5-powered CSS Framework zur Erstellung flexibler multicolumn Website-Layouts. http://lessframework.com Das 52framework ist ein ziemlich neues CSS-Framework, das mit den viel sauberer HTML5 gebaut wurde und CSS3 nutzt. http://52framework.com/

Das G5 Framework verfgt ber alles, was Sie fr die schnelle Web-Entwicklung und die Wiederverwendung fr ihre Website, Theme oder App-Projekt brauchen. http://framework.gregbabula.info

HTML 5 Magazine

HTML5 Boilerplate ist ein professionelles HTML/CSS/ JS-Template als Basis fr eine schnelle, robuste und zukunftssichere Website. http://de.html5boilerplate.com

PhoneGap

http://phonegap.com Build your app once with web-standards

Based on HTML5, PhoneGap leverages web technologies developers already know best... HTML and JavaScript.

Wrap it with PhoneGap

native APIs.

Using the free open source framework or PhoneGap build you can get access to

HTML 5 Magazine
PhoneGap uses standards-based web technologies to bridge web applications and mobile devices.

Deploy to multiple platforms!

Facebook Apps

Google currents

Adobe DPS

Kindle publishing for periodicals

Magazin Frameworks HTML 5 Magazine

Magazin Frameworks
Treesaver.js Magaka

HTML 5 Magazine
Laker Baker

www.lakercompendium.com
Laker ist ein Kompendium von Dateien, Frameworks, Styles und Tipps fr die Gestaltung digitaler Publikationen in HTML5.

American Presidents - Enhanced Touchbook

Automotive Agenda

HTML 5 Magazine
World War I for iPad

Apps erstellen mit Laker

Sein Name ist Florian Franke, 26 Jahre alt. Ich bin in Frankfurt / Deutschland und Laker leben ist ein Teil meiner abschlieenden 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) fr 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

Dateibersicht
Hier ist eine bersicht ber die Dateien und Ordner, die Teil der Laker sind: Im Inneren des book-Ordner (wo man 99% der Zeit arbeiten wird): MyDossierNumber.html /fonts /images /inc /js /sounds /styles

HTML 5 Magazine

Dossiers, Grid & Style

Dossiers sind eine Art Artikel, die Inhalte wie Texte enthalten, sondern auch Rich Media wie Video oder Audio.

Screen width Lager than 955px Between 954px and 768px Between 767px and 480px

Column(s) 10 8 1

Target Large desktop, iPad landscape Small desktop, iPad portrait Mobil phone, iPhone landscape Mobile phone, iPhone portrait

HTML 5 Magazine
Between 479px and 320px 1

Text

Der Text-Modul enthlt eine Art von formatierten Text. Text kann in jeder Spalte platziert werden. Das folgende Beispiel zeigt einen Text in einer groen Spalte, die links umflossen wird:

HTML 5 Magazine

Bilder & Slideshow

HTML 5 Magazine

Audio
2 Schritte zum Einbinden eines Audio-Players.
1. Gib

den Path zur Audio-Datei und die Player-ID in JavaScript an. einen DIV-Container mit der Player-Id ein.

2. Fge

HTML 5 Magazine

Video

YouTube bietet zwei Mglichkeiten zum Einbetten von Videos. Die neue Art und Weise entsteht ein iFrame auf der Seite. Weil iFrames nicht in der Laker iOS App arbeiten, knnen Sie YouTubeVideos via dem alten Code einbetten.

Card-Flip Effekt
3 Schritte zum Einbinden eines Audio-Players.
1. Aktivieren

Sie die erforderlichen JavaScriptBibliotheken in der Sektion. Sie Ihre Karten Sie die Card-Flip Effekt

2. Bauen

3. Initiieren

HTML 5 Magazine

Goolge Maps

Nur um Google Maps zu gehen, drcken Sie die Embed-Link und Vergangenheit der Code in Ihre Laker-Projekt.

HTML 5 Magazine
Danke fr eure Aufmerksamkeit!

Pecha Kucha Prsentation von Enrico Reinsdorf