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!