HTML and CSS Reference
In-Depth Information
1.1.2 Interface Builder und andere Programme
Falls Sie einen Mac Ihr Eigen nennen, können Sie auch das offizielle iPhone SDK herunter-
laden (mehr dazu am Ende des Buchs) und die Software Interface Builder benutzen.
Besitzen Sie weder Photoshop noch einen Mac, gibt es immer noch zahlreiche Möglich-
keiten, Flows visuell zu erstellen. Diese werden keine so detaillierte Darstellung der
Benutzeroberfläche bieten, können aber immer noch jede Menge Probleme beim
Userflow aufzeigen. Persönlich verwende ich auf dem Mac die Apple-Software Keynote
sehr gern, auf dem PC greife ich auf PowerPoint oder Microsoft Visio zurück.
Mit jedem iOS SDK kommt auch das Programm Dashcode, das sogar aus der gestalteten
Oberfläche HTML, CSS und JavaScript generiert. Obwohl sich mit Dashcode komfor-
tabel UI-Elemente platzieren und ausprobieren lassen, haben wir auf eine nähere Vor-
stellung verzichtet, da wir glauben, dass der beste Code immer noch der ist, den man
selbst geschrieben hat. Auch nutzt Dashcode viele der mit HTML5 gegebenen Möglich-
keiten nicht aus und generiert Code, der zu Problemen mit den erhältlichen mobilen
Frameworks führen kann. Ist das der Fall, lassen sich daraus keine nativen Apps
erstellen. Trotzdem sollten Sie sich das Programm, wenn Sie einen Mac haben, einmal
ansehen. Im hinteren Teil des Buchs beschreiben wir die Installation des iOS SDK.
1.2
iPhone-typisches Design in der Praxis
Um das Design einer Web App wirklich zu verstehen, werden wir in diesem Abschnitt
eine normale Webseite, die für die Darstellung auf einem Desktopbildschirm optimiert
ist, in eine mobile Webseite umwandeln. Ziel ist es, die HTML-Struktur der Seite unan-
getastet zu lassen, da, wie bereits gelernt, der HTML-Code idealerweise den Inhalt einer
Seite, aber nicht deren Aussehen bestimmt. Das Look & Feel einer Seite wird durch CSS
definiert, und dieses kann sich in der Darstellung auf einem PC drastisch von der auf
einem mobilen Gerät unterscheiden.
Im folgenden Beispiel wird eine Seite für einen Autohändler erstellt. Im Kopfbereich des
HTML-Codes wird auf drei verschiedene CSS-Dateien verwiesen. Die erste CSS-Datei
computer.css
bestimmt die Darstellung auf allen Geräten, die eine Bildschirmgröße von
mehr als 961 Pixeln aufweisen. Die zweite Datei ist die für unsere Umgestaltung rele-
vante Datei und nennt sich
mobile.css
. Die dort befindlichen CSS-Definitionen werden
bei allen Geräten verwendet, die nur aus einem Bildschirm bestehen und eine maximale
Bildschirmbreite von 960 Bildpunkten besitzen. Der dritte CSS-Verweis ist für die
Druckausgabe gedacht, und der darunterliegende Eintrag ist die bereits vorher im Buch
beschriebene Sonderlösung für Microsofts Internet Explorer.
Warum 960 Bildpunkte?
Während man früher nur eine maximale Bildschirmgröße von 480 Bildpunkten
angeben musste, hat sich das mit den neuen Android-Geräten und auch dem iPhone 4
geändert. Würden Sie im unteren Beispiel nur den Wert 480 angeben, erhielten Sie
theoretisch eine mobile Seite auf einem älteren iPhone 3G und die volle Desktopseite
auf einem iPhone 4. Eine User-Experience, die Sie mit Sicherheit nicht möchten.
