Konzeption und Gestaltungsprinzipien - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 110

Entwicklung einer Beispiel-App für zwei Orientierungen
Nun entwickeln Sie eine App für zwei Orientierungen. Überlegen Sie zunächst, wel-
che Inhalte und Elemente in welcher Ansicht angezeigt werden sollen.
Eine kleine Video-App soll im Portrait-Modus neben der Videovorschau auch noch
einen Infokasten anzeigen, in dem eine Beschreibung des Videos steht (Abbildung
3.25). Dreht der Nutzer das Gerät, soll das Video als Vollbild angezeigt werden, Info-
kasten und Titelzeile sollen verschwinden.
Titel
Details
Abbildung 3.25 Wireframe für beide Ausrichtungen
Zunächst legen Sie ein HTML-Dokument an:
<header>
<h1>Video</h1>
</header>
<video src="video.m4v"></video>
<aside class="info">
<h2>Big Buck Bunny</h2>
<p>…</p>
</aside>
Listing 3.3 Das HTML-Grundgerüst
Unser Dokument besteht aus einem Header, der die Titelleiste beinhaltet, einem
aside -Element, in dem zusätzliche Informationen stehen, und dem eigentlichen
Video (Abbildung 3.26). Mehr Details zum Einfügen von Videos und Sounds behan-
deln wir in Kapitel 4, »HTML5 als Designwerkzeug«, bis hierhin reicht uns das einfa-
che video -Element mit einem src -Attribut. Dieses enthält den Pfad zur Videodatei,
welches in unserem Fall schon iPhone-kompatibel encodiert wurde.