Mobile Designprinzipien - HTML5-Apps fur iPhone und Android - page 22

Das nächste Beispiel zeigt Ihnen einen ähnlichen HTML-Code wie den in unserem
letzten Beispiel, in dem wir alle iPhone-CSS-Definitionen noch selbst gebaut hatten,
allerdings werden div -Bereiche definiert. Anhand dieser div -Zuweisungen gestalten Sie
die mobile Seite, da jeder div -Name für ein bestimmtes Element aus dem Framework
steht. Um mit dem Framework zu arbeiten, müssen Sie es herunterladen, die ZIP-Datei
entpacken und die Dateien und Ordner aus dem Verzeichnis Framework in das Ver-
zeichnis Ihrer Webseite kopieren. Die CSS-Definitionen des iWebKit-Frameworks sind
in den beiden Dateien style.css und developer-style.css definiert. Beide Dateien haben den
gleichen Inhalt, allerdings wurden in der Datei style.css alle Leerzeichen und
Zeilenumbrüche entfernt und somit einige KByte an Daten eingespart. Durch die
fehlende Formatierung kann diese Datei aber nur von einem Browser verlässlich gelesen
werden. Falls Sie wissen möchten, welche CSS-Selektoren definiert wurden, sollten Sie
die Datei developer-style.css verwenden.
Da wir bei der aktuellen Seite nur von einem mobilen Design ausgehen, wird auch nur
auf die eine CSS-Datei mit link rel "stylesheet" type "text/css" href
"style.css" verwiesen. Zwar enthält iWebKit die meisten iPhone-typischen Elemente,
allerdings keine vordefinierte CSS-Klasse, mit der man die Abrundungen an Bildecken
hervorrufen kann. Diese Funktion wird im HTML-Code mithilfe des style -Elements
und der darin befindlichen CSS-Definition bestimmt: Jedes img -Tag im div -Bereich
textimg erhält runde Ecken mit einem Radius von fünf Bildpunkten und einen
dunkelgrauen Rand.
Schon bei der Gestaltung der Titelzeile bemerken Sie den Komfort eines CSS-Frameworks.
Sie müssen im Code einfach div id "topbar" und innerhalb dieser div -Definition den ge-
wünschten Titel mit div id "title" einfügen, und schon haben Sie die Standardtitelzeile
eines iPhones. In diesem Beispielcode haben wir die Kopfzeile noch weiter angepasst:
Die Zeile div id "topbar" class "transparent" bewirkt eine leicht dunkle, trans-
parente Titelzeile. Alternativ können Sie mit div id "topbar" class "black" auch
eine komplett schwarze Titelzeile erstellen. Da beim iPhone diese Titelzeile auch zur
Navigation verwendet wird, lassen sich mit iWebKit ganz einfach Navigationselemente
in den Titel einbauen. Das Beispiel besitzt dazu einen blauen Button, den man oft in
iPhone-Anwendungen als Anmeldebutton findet.
Für unsere Beispielseite wollen wir dieses Navigationselement verwenden, um auf unsere
Kontaktseite zu verweisen. Der blaue Button wird ebenfalls innerhalb des div
id "topbar" -Bereichs mit folgender Zeile eingesetzt:
<div id "bluerightbutton"><a href "kontakt.html">Kontakt</a></div>.
Insbesondere auf Unterseiten einer iPhone-Anwendung befinden sich auf der linken
Seite der Titelzeile ein oder mehrere Pfeile, die es dem Benutzer erlauben, auf den
vorangegangenen Bildschirm zurückzugehen. Diese Navigationspfeile lassen sich inner-
halb der Titelzeilendefinition mit
<div id "leftnav"><a href "seite.html">Zurück</a></div>
für den Pfeil nach links und mit
<div id "rightnav"><a href "seite.html">Weiter</a></div>
für den Pfeil nach rechts definieren.