WebApps mit Frameworks entwickeln - Apps mit HTML5 und CSS3: Fur iPad, iPhone und Android - page 302

hen Ihnen noch folgende Effekte zur Verfügung: fade , pop , flip , turn , flow , slide ,
slideup , slidedown , none . Beachten Sie, dass manche Effekte nicht in allen Brow-
sern unterstützt werden und teilweise performanceintensiv sind. Am besten Sie
experimentieren mit den Effekten auf dem jeweiligen Endgerät. Nur so können Sie
sicher sein, dass die WebApp gut benutzbar ist. Ein Effekt, der in einem Desktop-
browser flüssig abläuft, kann auf einem Smartphone zur Ruckelpartie werden.
Herzlichen Glückwunsch, Sie haben mit minimalem Aufwand eine Fuß- und Naviga-
tionsleiste erstellt! Allerdings sind Sie Perfektionist und stören sich etwas an dem
Stern-Icon bei den einzelnen Links der Navigation (Abbildung 8.5). Ein Stern? Warum
denn ein Stern? Hier geht's um ein Restaurant, nicht um eine Sternenwarte. Andere
Icons müssen her. Das Problem: Im Standard-Icon-Set von jQuery Mobile sind keine
passenden Symbole enthalten. Sie brauchen etwas, das Menü, Anfahrt und Kon-
takt kommuniziert, mit anderen Worten Messer und Gabel , einen Karten-Marker
und einen Briefumschlag .
jQuery Mobile bietet die Möglichkeit, eigene Icons zu verwenden. Zunächst müssen
Sie, für ein optimales Ergebnis, die Icons in Weiß und im PNG-Format mit transpa-
rentem Hintergrund in der Größe 36 × 36 Pixel anlegen. Der Kreis- und Schattenef-
fekt wird automatisch von jQuery Mobile hinzugefügt. Obwohl die Icons im
Endeffekt nur in einer Größe von 18 × 18 Pixel dargestellt werden, empfehlen wir
Ihnen, die Icons in der doppelten Größe anzulegen. So erscheinen diese auf hochauf-
gelösten Bildschirmen, wie das des iPhones oder des iPads mit Retina-Bildschirm,
wesentlich schärfer. Für eine große Anzahl an Icons, die Sie unter Nennung des
Autors auch kommerziell einsetzen dürfen, lohnt ein Blick auf die Website www.the-
nounproject.com . Alle Icons können Sie hier kostenlos im Vektorformat herunterla-
den und somit einfach in Weiß umfärben. Um Ihnen die Arbeit etwas leichter zu
machen, haben wir Ihnen bereits die benötigten Icons erstellt. Sie finden diese auf
der beiliegenden DVD.
Damit Sie die Icons nun verwenden können, bedarf es noch drei kleiner Schritte: Als
Erstes benennen Sie die Icon-Dateien um. Der Dateiname des Icons besteht immer
aus dem Anfangsteil app-icon- . Daran schließt sich eine Bezeichnung an, die Sie
selbst wählen können und über welche Sie später das Icon einbinden. In Ihrem Fall
z. B. anfahrt . Danach folgt noch der Zusatz highres , da es sich um ein hochaufgelöstes
Icon handelt. Die kompletten Dateinamen sehen damit wie folgt aus:
app-icon-menue-highres.png
app-icon-anfahrt-highres.png
app-icon-kontakt-highres.png