Ohne Objective-C und Cocoa zur eigenen App. iphone Apps. mit HTML, CSS & JavaScript. Jonathan Stark. O Reilly. Deutsche Übersetzung von Ingo Dellwig

Transkript

1 Ohne Objective-C und Cocoa zur eigenen App iphone Apps mit HTML, CSS & JavaScript O Reilly Jonathan Stark Deutsche Übersetzung von Ingo Dellwig

2

3 iphone Apps mit HTML, CSS und JavaScript Jonathan Stark Deutsche Übersetzung von Ingo Dellwig Beijing Cambridge Farnham Köln Sebastopol Taipei Tokyo

4 Die Informationen in diesem Buch wurden mit größter Sorgfalt erarbeitet. Dennoch können Fehler nicht vollständig ausgeschlossen werden. Verlag, Autoren und Übersetzer übernehmen keine juristische Verantwortung oder irgendeine Haftung für eventuell verbliebene Fehler und deren Folgen. Alle Warennamen werden ohne Gewährleistung der freien Verwendbarkeit benutzt und sind möglicherweise eingetragene Warenzeichen. Der Verlag richtet sich im Wesentlichen nach den Schreibweisen der Hersteller. Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen. Kommentare und Fragen können Sie gerne an uns richten: O Reilly Verlag Balthasarstr Köln kommentar@oreilly.de Copyright der deutschen Ausgabe: 2010 by O Reilly Verlag GmbH & Co. KG 1. Auflage 2010 Die Originalausgabe erschien 2010 unter dem Titel Building iphone Apps with HTML, CSS, and JavaScript bei O Reilly Media, Inc. Die Darstellung eines Hüttensängers im Zusammenhang mit dem Thema Mobile Webprogrammierung ist ein Warenzeichen von O Reilly Media, Inc. Bibliografische Information der Deutschen Nationalbibliothek Die Deutsche Nationalbibliothek verzeichnet diese Publikation in der Deutschen Nationalbibliografie; detaillierte bibliografische Daten sind im Internet über abrufbar. Übersetzung und deutsche Bearbeitung: Ingo Dellwig, Werne Lektorat: Christine Haite, Köln Fachliche Unterstützung: Michael Gerth, Köln Korrektorat: Sybille Feldmann, Düsseldorf Satz: III-satz, Umschlaggestaltung: Karen Montgomery, Boston Produktion: Andrea Miß, Köln Belichtung, Druck und buchbinderische Verarbeitung: Druckerei Kösel, Krugzell; ISBN Dieses Buch ist auf 100% chlorfrei gebleichtem Papier gedruckt.

5 Für Erica und das kleine hüpfende Böhnchen in ihrem Bauch.

6

7 Inhalt Vorwort IX 1 Los geht s Web-Apps im Vergleich zu nativen Apps Crashkurs in Webprogrammierung Einfaches iphone-styling Erste Schritte Die iphone-css hinzufügen iphone-look-and-feel hinzufügen Elementares Verhalten mit jquery hinzufügen Was Sie gelernt haben Fortgeschrittenes iphone-styling Ein wenig Ajax hinzufügen Verkehrspolizist Ein paar Extras Ihr eigener Zurück-Button Ein Icon für den Home-Bildschirm hinzufügen Vollbildmodus Was Sie gelernt haben Animation Mit ein wenig Hilfe von unserem Freund Zur Hauptseite gleiten Das Daten-Bedienfeld hinzufügen Das Datum-Bedienfeld hinzufügen Das Neuer Eintrag-Bedienfeld hinzufügen VII

8 Das Einstellungen-Bedienfeld Alles zusammenfügen jqtouch anpassen Was Sie gelernt haben Clientseitige Datenspeicherung localstorage und sessionstorage Clientseitige Datenbank Was Sie gelernt haben Der Weg zur Offline-App Die Grundlagen des Offline Application Cache Online-Whitelist und Fallback-Optionen Eine dynamische Manifestdatei erstellen Fehlerbehebung Was Sie gelernt haben Der Weg zur nativen App Einführung in PhoneGap Die App auf dem iphone installieren Das iphone per JavaScript kontrollieren Was Sie gelernt haben Wie Sie Ihre App nach itunes übertragen Ein iphone Distribution Provisioning Profile erstellen Das iphone Distribution Provisioning Profile installieren Das Projekt umbenennen Die Programm-Binärdatei vorbereiten Die App einreichen Während Sie warten Weiterführende Informationsquellen Index VIII Inhalt

9 Vorwort Wie Millionen von Menschen habe auch ich mich sofort in mein iphone verliebt. Anfangs waren Webanwendungen (Web-Apps) die einzige Chance, individuelle Programme auf das Gerät zu bekommen, was für mich in Ordnung ging, da ich ja Webentwickler bin. Als Monate später der App Store angekündigt wurde, war ich total aufgeregt. Ich rannte los und kaufte jedes Buch über Objective-C, das mir in die Finger kam. Da einige meiner Web-Apps schon recht bekannt waren, plante ich, diese als native Anwendungen (Apps) neu zu schreiben, sie in den App Store zu stellen und auf einem riesigen, galoppierenden Geldhaufen in den Sonnenuntergang zu reiten. Die Desillusionierung folgte auf dem Fuße. Ich fand es schwierig, Objective-C zu lernen, und ich wurde durch die Tatsache, dass die Sprache außerhalb der Mac-Programmierung wenig nützlich ist, zusätzlich demotiviert. Xcode und der Interface Builder waren zwar sehr professionell, aber sie waren nicht meine normale Entwicklungsumgebung, und ich fand es schwer, mich an sie zu gewöhnen. Ich war von den ganzen Ringen, durch die ich springen musste, nur um meine App und das iphone für Tests vorzubereiten, extrem genervt. Der Prozess für die Veröffentlichung der Anwendung im App Store war sogar noch komplizierter. Nachdem ich ein oder zwei Wochen mit diesen Variablen gekämpft hatte, fragte ich mich, warum ich mir diesen ganzen Ärger überhaupt antat. Immerhin waren meine Apps bereits weltweit verfügbar warum sollte ich also unbedingt im App Store sein? Darüber hinaus kann Apple Apps ablehnen und macht es auch. Das ist sicherlich ihr gutes Recht, und vielleicht haben sie gute Gründe dafür. Allerdings sieht es von außen betrachtet sehr unberechenbar und willkürlich aus. Versuchen Sie einmal, sich hier hineinzuversetzen (das basiert übrigens auf einer wahren Geschichte): Sie haben etwa 100 Stunden damit verbracht, Objective-C zu lernen. In weiteren 100 Stunden haben Sie eine native iphone App geschrieben. Nehmen wir an, Ihre App ist bereit für die Premiere, und Sie haben erfolgreich die Herausforderungen des Einreichungsprozesses für den App Store gemeistert. Was passiert dann? Sie warten. Und warten. Und warten noch etwas länger. Wir reden über Wochen und manchmal auch Monate. Schließlich bekommen Sie eine Rückantwort. Und Ihre Vorwort IX

10 Anwendung wurde abgelehnt. Was nun? Sie haben trotz des ganzen Aufwands nichts in der Hand. Aber warten Sie, es kann noch schlimmer kommen. Angenommen, Sie bekommen Ihre App genehmigt. Hunderte oder vielleicht sogar Tausende von Menschen laden die Anwendung herunter. Sie haben zwar noch kein Geld bekommen, sind aber auf Wolke sieben. Dann trudeln die ersten Fehlermeldungen ein. Sie finden und beheben den Fehler binnen Minuten, reichen die App erneut bei itunes ein und warten auf Apples Prüfung der Änderung. Und warten. Und warten noch etwas länger. Verärgerte Kunden geben Ihnen haarsträubende Bewertungen im App Store. Die Verkäufe brechen ein. Und Sie warten immer noch. Sie denken darüber nach, den verärgerten Kunden das Geld zurückzuerstatten, aber die Möglichkeit gibt es im App Store nicht. Sie sind also dazu verdammt, herumzusitzen und Ihre Bewertung abstürzen zu sehen, obwohl der Fehler bereits vor Tagen oder Wochen behoben wurde. Sicher. Diese Geschichte beruht auf den Erfahrungen eines einzelnen Entwicklers. Vielleicht ist es ein Extrem, und die aktuellen Zahlen widerlegen meine These. Das Problem bleibt allerdings bestehen: Wir Entwickler haben keinen Zugriff auf Apples Daten oder die Details des Überprüfungsprozesses im App Store. Bis sich das ändert, ist das Erstellen einer nativen App mit Objective-C ein riskanter Plan. Glücklicherweise gibt es eine Alternative. Sie können Webanwendungen bauen, indem Sie frei verfügbare, standardisierte Webtechnologien einsetzen, sie als Web-App veröffentlichen und von echten Anwendern unter Volllast testen lassen. Wenn Sie absolut startklar sind, können Sie die Software PhoneGap verwenden, um Ihre Webanwendung in eine native iphone App zu konvertieren und sie an den App Store zu senden. Sollte sie ultimativ abgelehnt werden, ist das Projekt nicht tot, denn Sie können immer noch die Web-App anbieten. Wenn sie genehmigt wird, umso besser! Sie können dann anfangen, die App mit Funktionen zu erweitern, die die grandiosen Hardwarefunktionen des Geräts nutzen. Das klingt wie das Beste aus beiden Welten, oder? Wer sollte dieses Buch lesen? Ich gehe davon aus, dass Sie grundlegende Erfahrungen im Lesen und Schreiben von HTML, CSS und JavaScript (insbesondere jquery) haben. In den Kapiteln 5 und 6 werde ich einige grundlegende SQL-Quelltexte verwenden, eine flüchtige Kenntnis von SQL wäre also hilfreich, ist aber nicht zwingend erforderlich. Was brauchen Sie, um mit diesem Buch zu arbeiten? Dieses Buch wird das iphone SDK vermeiden, wo immer es geht. Alles was Sie brauchen, um bei der großen Mehrheit der Beispiele mitzukommen, ist ein Texteditor und die aktuellste Version von Safari (oder noch besser WebKit, das eine innovativere Version von X Vorwort

11 Safari ist und sowohl für Mac OS als auch für Windows unter zur Verfügung steht). In Kapitel 7 brauchen Sie dann einen Mac für PhoneGap. Dort erkläre ich, wie man Ihre Webanwendung in eine native App konvertiert, die Sie dann im App Store veröffentlichen können. Konventionen in diesem Buch Die folgenden drucktechnischen Konventionen werden in diesem Buch verwendet: Kursiv Kennzeichnet neue Ausdrücke, URLs, -Adressen, Dateinamen und Dateiendungen. Konstante Breite Wird für Programmlistings und innerhalb von Absätzen für den Verweis auf Programmelemente, wie Variablen- oder Funktionsnamen, Datenbanken, Datentypen, Umgebungsvariablen, Ausdrücke und Schlüsselwörter, verwendet. Konstante Breite, fett Zeigt Befehle oder sonstigen Text an, der vom Anwender wörtlich eingegeben werden soll, und wird für Hervorhebungen innerhalb von Programmlistings verwendet. Konstante Breite, kursiv Markiert Text, der durch anwenderbezogene Werte ersetzt werden soll, die sich aus dem Kontext ergeben. Dieses Symbol kennzeichnet Tipps, Hinweise oder generelle Anmerkungen. Dieses Symbol zeigt eine Warnung an. Codebeispiele verwenden Dieses Buch ist dazu da, Sie darin zu unterstützen, Ihre Arbeit zu tun. Im Allgemeinen dürfen Sie die Quelltexte aus diesem Buch in Ihren Programmen und Dokumentationen nutzen. Sie brauchen uns nicht um Erlaubnis fragen, solange Sie keine erhebliche Menge an Code reproduzieren. Wenn Sie beispielsweise ein Programm schreiben, das Teile der Beispiele aus diesem Buch verwendet, brauchen Sie keine Genehmigung. Sollten Sie allerdings eine CD-ROM mit Beispielen aus O Reilly-Büchern verkaufen oder verteilen, wird eine Erlaubnis benötigt. Das Beantworten von Fragen durch das Zitieren von Texten oder Listings aus diesem Buch ist ohne Genehmigung möglich. Sie brauchen aber eine Vorwort XI

12 Erlaubnis, wenn Sie große Teile dieses Buchs in die Dokumentation Ihres Produkts einfließen lassen. Wir begrüßen Quellenangaben, setzen sie aber nicht voraus. Quellenangaben beinhalten üblicherweise den Titel sowie Autor, Verlag und die ISBN, zum Beispiel: iphone Apps mit HTML, CSS und JavaScript von Jonathan Stark. Copyright 2010 O Reilly Verlag, Wenn Sie denken, Ihr Gebrauch der Programmbeispiele fiele nicht in die oben abgegebene Genehmigung, können Sie uns gern unter permissions@oreilly.com kontaktieren. Danksagung Ein Buch zu schreiben, ist Teamarbeit. Mein herzlicher Dank für ihren großzügigen Beitrag geht an die folgenden Personen: Tim O Reilly, Brian Jepson und den Rest der ORM-Truppe, die meine Buchschreibeerfahrungen so lohnend und lehrreich machten. Jack Templin, Providence Geeks und RI Nexus, die mich in die blühende Technologieszene meiner Heimatstadt einführten. Dieses Buch würde nicht existieren, wenn es Providence Geeks nicht gäbe. David Kandeda für sein zwanghaftes Streben nach Schönheit. Egal ob es sich um ein Stück Code oder eine Benutzeroberflächenanimation handelt, er kann nicht schlafen, bis es perfekt ist. Ich finde das toll. Brian LeRoux, Brock Whitten, Rob Ellis und den Rest der Nitobi-Truppe für das Schreiben und die weiterführende Betreuung von PhoneGap. Brian Fling für die Erweiterung meines Horizonts in Sachen Mobilgeräte über die neueste und beste Hardware hinaus. Brian kennt sich seit Beginn damit aus; er ist ein wunderbarer Autor und darüber hinaus ein sehr großherziger Kerl. PPK, John Gruber, John Allsopp und John Resig für ihren Beitrag zu und ihre Unterstützung bei den zugrunde liegenden Technologien, die dieses Buch möglich machten. Garrett Murray, Brian LeRoux und den Schwarm von Menschen, die freigiebig Kommentare und Fragen auf der OFPS-Seite zu diesem Buch geschrieben haben. Eure Rückmeldungen waren sehr hilfreich und sehr willkommen. Kazu, Chuckie, Janice, Chris und den Rest der Haruki-Truppe, die so nachsichtig waren, als ich endlos in voller Lautstärke vor mich hin getippt habe. Meine wunderbare Familie, Freunde und Kunden, weil sie so verständnisvoll und hilfsbereit waren, während ich an die Tastatur gefesselt war. Und schließlich Erica. Du machst alles möglich. Ich liebe dich! XII Vorwort

13 Kapitel 1 KAPITEL 1 Los geht s Bevor wir eintauchen und damit beginnen, Anwendungen für das iphone zu entwickeln, würde ich gern das Spielfeld definieren. In diesem Kapitel werde ich die grundsätzlichen Bedingungen festlegen, die Vor- und Nachteile der beiden gebräuchlichsten Herangehensweisen an die Entwicklung vergleichen und einen Crashkurs für die drei grundlegenden Webtechniken, die in diesem Buch verwendet werden, präsentieren. Web-Apps im Vergleich zu nativen Apps Zuerst einmal definiere ich, was ich mit einer»web-app«und einer»nativen App«meine. Anschließend werde ich jeweils die Vor- und Nachteile abwägen. Was ist eine Web-App? Für mich ist eine Web-App im Wesentlichen eine Website, die speziell für das iphone optimiert wurde. Diese Website kann alles sein, von einer Standardbroschüre eines kleinen Unternehmens über einen Zinsrechner bis hin zu einem täglichen Kalorienzähler der Inhalt spielt keine Rolle. Die entscheidenden Merkmale einer Web-App sind, dass die Benutzeroberfläche mit Standard-Webtechnologien erstellt wurde, dass sie über eine URL ansprechbar ist (öffentlich, privat oder versteckt hinter einem Log-in) und dass sie speziell auf die Besonderheiten des iphone optimiert wurde. Eine Web-App wird weder auf dem iphone installiert, noch ist sie im App Store verfügbar, und sie ist auch nicht in Objective-C geschrieben. Was ist eine native App? Im Gegensatz dazu werden native Anwendungen auf dem iphone installiert, haben Zugriff auf die Hardware (Lautsprecher, Beschleunigungssensoren, Kamera usw.), und sie sind in Objective-C programmiert. Allerdings ist das sie auszeichnende Merkmal, dass 1

14 sie im itunes App Store verfügbar ist eine Besonderheit, die die Fantasie von Horden von Softwareunternehmern, mich eingeschlossen, angeregt hat. Vor- und Nachteile Unterschiedliche Apps haben unterschiedliche Anforderungen. Manche Apps passen besser zu Webtechnologien als andere. Wenn Sie die Vor- und Nachteile der verschiedenen Ansätze kennen, fällt es Ihnen leichter, für Ihre Situation den richtigen Weg auszuwählen. Dies sind die Vorteile der Entwicklung von nativen Apps: Millionen von registrierten Kreditkartenbesitzern sind nur einen Klick entfernt. Xcode, Interface Builder und das Cocoa Touch Framework bilden zusammen eine schicke Entwicklungsumgebung. Sie können die ganzen coolen Hardwarefunktionen des Geräts nutzen. Und hier sind die Nachteile der Entwicklung von nativen Apps: Sie müssen bezahlen, um ein Apple-Entwickler zu werden. Sie müssen sich der Gnade des Überprüfungsprozesses von Apple unterwerfen. Sie müssen in Objective-C programmieren. Sie müssen auf einem Mac entwickeln. Sie können Fehlerbehebungen nicht zügig veröffentlichen. Der Entwicklungszyklus ist langsam, und der Testzyklus ist durch den App Store beschränkt. Dies sind die Vorteile der Entwicklung von Web-Apps: Webentwickler können ihre bisherigen Entwicklerprogramme nutzen. Sie können ihre aktuellen Webdesign- und Programmierfähigkeiten nutzen. Sie sind bei der Entwicklung nicht auf Mac OS angewiesen. Ihre App läuft auf jedem Gerät mit einem Webbrowser. Sie können Fehler sofort beheben. Der Entwicklungszyklus ist schnell. Das sind die Nachteile der Entwicklung von Web-Apps: Sie können die coolen iphone-hardwarefunktionen nicht nutzen. Sie müssen sich selbst um ein Abrechnungssystem kümmern, wenn Sie mit der App Geld verdienen möchten. Es kann schwierig werden, anspruchsvolle Effekte für die Benutzeroberfläche zu erstellen. 2 Kapitel 1: Los geht s

15 Welcher Ansatz ist für Sie der richtige? Ab hier wird es nun spannend. Dadurch dass das iphone ständig online ist, schafft es eine Umgebung, in der die Grenzen zwischen Web-Apps und nativen Apps verschwimmen. Es gibt ein paar weniger bekannte Funktionen im iphone, die es Ihnen ermöglichen, Web-Apps auch offline zu nutzen (siehe Kapitel 6). Darüber hinaus entwickeln einige Fremdanbieter Software von denen PhoneGap die bemerkenswerteste ist, mit denen Webentwickler eine Web-App nehmen und sie als native App für das iphone und andere mobile Plattformen verpacken können. Für mich ist das die perfekte Mischung. Ich kann in meiner»mutterprogrammiersprache«schreiben, das Produkt als reine Web-App veröffentlichen (für das iphone und andere Geräte, die einen mobilen Browser haben), ohne mich durch Apples Überprüfungsprozess zu quälen. Außerdem kann ich denselben Quelltext als Grundlage dazu verwenden, um eine erweiterte native Version zu erstellen, die dann die Hardwarefunktionen des Geräts nutzt und möglicherweise auch im App Store verkauft werden kann. Und wenn Apple die App ablehnt? Kein Thema, weil ich immer noch meine Onlineversion habe. Ich kann weiter an der nativen Version arbeiten, während die Kunden die Web-App nutzen. Crashkurs in Webprogrammierung Die drei Technologien, die wir hauptsächlich für die Entwicklung von Web-Apps nutzen werden, sind HTML, CSS und JavaScript. Ich möchte gern jede von ihnen kurz abhandeln, um sicherzugehen, dass wir auf dem gleichen Stand sind, wenn wir uns auf die ausgefallenen Sachen stürzen. Einführung in HTML Wenn Sie im Internet surfen, sind die Seiten, die Sie sehen, einfache Textdokumente auf einem fremden Computer. Der Text einer typischen Webseite wird in HTML-Tags gesteckt, die Ihrem Browser etwas über die Struktur der Seite verraten. Mit diesen Informationen kann der Browser entscheiden, wie er den Seiteninhalt am sinnvollsten anzeigen kann. Betrachten wir einmal den HTML-Schnipsel in Beispiel 1-1. In der ersten Zeile wird die Zeichenfolge Hallo! von einem Paar h1-tags umschlossen. (Beachten Sie, dass das öffnende Tag und das schließende Tag etwas unterschiedlich sind: Das schließende Tag hat als zweites Zeichen einen Schrägstrich, während das öffnende Tag ohne auskommt.) Indem man einen Text mit h1-tags umgibt, sagt man dem Browser, dass die eingeschlossenen Wörter eine Überschrift (engl. headline) sind. Der Browser wird sie dann in großer, fetter Schrift in einer eigenen Zeile anzeigen. Es gibt auch h2-, h3-, h4-, h5- und h6-tags. Je Crashkurs in Webprogrammierung 3

16 kleiner die Zahl ist, umso wichtiger ist die Überschrift. Eine h6-überschrift wird also kleiner (weniger wichtig aussehend) dargestellt als eine h3-überschrift. Hinter den h1-tags in Beispiel 1-1 kommen zwei Zeilen, die von p-tags umschlossen sind. Das sind sogenannte Absatz-Tags (engl. paragraph). Browser stellen jeden Absatz in einer eigenen Zeile dar. Wenn der Absatz lang genug ist, um das Ende des Browserfensters zu erreichen, wird er automatisch umbrochen und in der nächsten Zeile fortgesetzt. In jedem Fall wird aber eine Leerzeile hinter dem Absatz eingefügt, um ihn vom nächsten Element auf der Seite zu trennen. Beispiel 1-1: HTML-Schnipsel <h1>hallo!</h1> <p>danke, dass du meine Homepage besuchst.</p> <p>ich hoffe, du magst sie.</p> Sie können HTML-Tags auch innerhalb anderer HTML-Tags verwenden. Beispiel 1-2 zeigt eine ungeordnete Liste (ul-tag, vom engl.»unordered list«), die drei Listenelemente (li-tags, vom engl.»list item«) enthält. In einem Browser würde die Liste mit Aufzählungspunkten vor jedem Listeneintrag erscheinen. Wenn man Tags innerhalb von anderen Tags betrachtet, spricht man von Kinder-Tags bzw. Kindern des Eltern-Tags. In diesem Beispiel sind die li-tags also Kinder des Eltern-Tags ul. Beispiel 1-2: Ungeordnete Liste <ul> <li>pizza</li> <li>bier</li> <li>hotdogs</li> </ul> Die Tags, die ich bisher gezeigt habe, sind allesamt Block-Tags. Ein Block-Tag zeichnet sich dadurch aus, dass es in einer eigenen Zeile, ohne Elemente links oder rechts daneben, angezeigt wird. Deshalb erweitern Überschriften, Absätze und Listenelemente die Seite immer nach unten und nicht nach rechts. Das Gegenteil eines Block-Tags ist ein Inline-Tag, das, wie der Name schon sagt, innerhalb einer Zeile auftauchen kann. Das Betonungs-Tag (em-tag, vom engl.»emphasis«) ist ein Beispiel für so ein Inline-Tag und sieht folgendermaßen aus: <p>ich hoffe <em>wirklich</em>, dass Sie es mögen.</p> Der Großvater der Inline-Tags und wohl die coolste Funktion in HTML ist das a-tag. Es steht für Anker (engl.»anchor«), aber ich werde dieses Tag auch als Link oder Hyperlink bezeichnen. Der Text, der in a-tags eingebettet ist, wird anklickbar, so dass ein Klick darauf den Browser dazu bringt, eine neue HTML-Seite zu laden. Um dem Browser zu sagen, welche neue Seite geladen werden soll, müssen wir dem Tag etwas hinzufügen, das man Attribut (oder Eigenschaft) nennt. Attribute sind benannte Werte, die in ein öffnendes Tag eingefügt werden. In einem Anker-Tag verwendet man 4 Kapitel 1: Los geht s

17 Umlaute in HTML Die deutschen Umlaute und das ß werden in HTML besonders behandelt. Man ersetzt sie durch diese Zeichenfolgen: Sonderzeichen Ersetzung Sonderzeichen Ersetzung ä ä Ü Ü ö ö ß ß ü ü > > Ä Ä < < Ö Ö & & Wie Sie sehen, müssen auch < und >, die ja für HTML-Tags reserviert sind, und das &- Zeichen, das von den Ersetzungen selbst verwendet wird, ersetzt werden. das Attribut href, um die Adresse der Zielseite anzugeben. Hier folgt ein Link auf die Google-Homepage: <a href=" Das mag ein wenig durcheinander erscheinen, wenn Sie noch nicht mit dem Lesen von HTML vertraut sind, aber Sie können sicher die Google-URL darin erkennen. Sie werden in diesem Buch eine Menge a-tags finden. Nehmen Sie sich also ruhig einen Moment Zeit, um das im Kopf zu verarbeiten, sollte es Sie auf den ersten Blick noch etwas verwirren. Es gibt einige Dinge, die man zu Attributen im Hinterkopf behalten sollte. Verschiedene HTML-Tags erlauben unterschiedliche Attribute. Man kann in einem öffnenden Tag mehrere Eigenschaften definieren, indem man sie durch Leerzeichen voneinander trennt. Ein schließendes Tag kann keine Attribute enthalten. Es gibt Hunderte von möglichen Tag-Attribut-Kombinationen, aber keine Panik, wir werden uns in diesem Buch nur mit etwa einem Dutzend beschäftigen. Der HTML-Schnipsel, den wir betrachtet haben, würde normalerweise im body-bereich eines kompletten HTML-Dokuments vorkommen. Ein HTML-Dokument besteht aus zwei Bereichen: dem Kopf (engl.»head«) und dem Körper bzw. Rumpf (engl.»body«). Im Körper legen Sie alle Informationen ab, die der Anwender später sehen soll. Der Kopf enthält dagegen Informationen über die Seite, von denen die meisten für den Betrachter unsichtbar sind. Kopf und Körper werden immer zusammen von html-tags umschlossen. Beispiel 1-3 zeigt den Schnipsel im Kontext eines ordentlichen HTML-Dokuments. Der head-bereich umfasst hier nur ein title-element, das dem Browser verrät, welcher Text in der Titelleiste des Fensters angezeigt werden soll. Crashkurs in Webprogrammierung 5

18 Beispiel 1-3: Ein ordentliches HTML-Dokument <html> <head> <title>meine tolle Seite</title> </head> <body> <h1>hallo!</h1> <p>danke, dass du meine Homepage besuchst.</p> <p>ich hoffe, du magst sie.</p> <ul> <li>pizza</li> <li>bier</li> <li>hotdogs</li> </ul> </body> </html> Wenn Sie Ihren Browser verwenden, betrachten Sie normalerweise Seiten, die im Internet abgelegt sind. Browser sind aber genauso gut dazu geeignet, HTML-Dokumente zu betrachten, die auf Ihrem lokalen Computer liegen. Um zu sehen, was ich meine, öffnen Sie einen Texteditor und tippen Beispiel 1-3 ab. Speichern Sie es anschließend als test. html auf dem Schreibtisch ab. Öffnen Sie die Datei dann mit Safari, indem Sie sie entweder auf das Safari-Programmsymbol ziehen oder Safari öffnen und dann ABLAGE DATEI ÖFFNEN auswählen. Ein Doppelklick auf test.html könnte auch funktionieren, aber es könnte sich auch ein Texteditor oder ein anderer Browser öffnen, wenn Sie das vorher eingestellt haben. Selbst wenn Sie nicht unter Mac OS X arbeiten, sollten Sie Ihre iphone- Web-Apps in Safari testen, denn Safari ist der Desktop-Browser, der dem mobilen Safari auf dem iphone am nächsten kommt. Safari für Windows steht unter zum Download bereit. Einige Texteditoren sind nicht wirklich gut zum Schreiben von HTML geeignet. Sie sollten insbesondere Editoren meiden, die Rich-Text bearbeiten können, wie zum Beispiel Microsoft Word oder TextEdit. Solche Editoren können ihre Dateien in anderen Formaten als reinem Text abspeichern, was Ihr HTML zerstören wird. Wenn Sie auf der Suche nach einem guten Texteditor sind, verrate ich Ihnen meinen mit Abstand liebsten Editor für den Mac: TextMate ( Ich habe gehört, dass es einen Windows-Klon gibt, der»e Text Editor«heißt ( Wenn Sie es lieber kostenlos mögen, können Sie Text Wrangler für den Mac herunterladen ( Wrangler/) oder unter Windows den mitgelieferten Editor Notepad nutzen. 6 Kapitel 1: Los geht s

19 Einführung in CSS Wie Sie gesehen haben, stellen Browser bestimmte HTML-Elemente mit individuellen Formatierungen dar (Überschriften sind groß und fett, auf Absätzen folgt eine Leerzeile und so weiter). Diese Formatierungen sind sehr einfach und in erster Linie dazu gedacht, dem Leser zu helfen, die Struktur und die Aussage des Dokuments zu verstehen. Um über diese auf einer sehr einfachen Struktur basierende Darstellung hinauszugehen, können Sie Cascading Style Sheets (CSS) verwenden. CSS ist eine Layoutsprache, die genutzt wird, um die visuelle Darstellung eines Dokuments zu definieren. Sie können CSS verwenden, um einfache Dinge, wie Textfarbe, Schriftgröße und Schriftstil (fett, kursiv usw.), oder komplexe Sachen, wie Seitenlayout, Farbverläufe, Deckkraft und vieles mehr, zu definieren. Beispiel 1-4 zeigt eine CSS-Regel, die den Browser anweist, jeden Text im body-element in Rot anzuzeigen. In diesem Beispiel ist body der Selektor (engl. selector; gibt an, was von der Regel verändert werden soll), und die geschweiften Klammern umschließen die Deklaration (die Regel selbst). Die Deklaration beinhaltet einen Satz von Eigenschaften mit ihren Werten. In diesem Beispiel ist color die Eigenschaft und red der Wert der Eigenschaft. Beispiel 1-4: Eine einfache CSS-Regel body { color: red; Die Namen der Eigenschaften sind in den CSS-Spezifikationen vordefiniert, das heißt, dass Sie diese nicht einfach selbst erfinden können. Jede Eigenschaft erwartet einen passenden Wert, und es kann tatsächlich viele passende Werte oder Wertformate für eine bestimmte Eigenschaft geben. Sie können zum Beispiel eine Farbe durch ein vordefiniertes Schlüsselwort (red) oder durch die Verwendung der HTML-Farbcodenotation (#FF0000) angeben. Dabei wird die hexadezimale Notation verwendet: Drei Paare von hexadezimalen Ziffern (0 F) repräsentieren (von links nach rechts) die Werte für Rot, Grün und Blau. Eigenschaften, die Maße erwarten, akzeptieren Werte, wie 10px, 75% und 1em. Beispiel 1-5 zeigt einige typische Deklarationen. (Der verwendete Farbcode für background-color entspricht dem CSS-Wert für Grau: gray.) Beispiel 1-5: Einige übliche CSS-Deklarationen body { color: red; background-color: #808080; font-size: 12px; font-style: italic; font-weight: bold; font-family: Arial; Crashkurs in Webprogrammierung 7

20 Es gibt viele verschiedene Arten von Selektoren. Wenn Sie alle Hyperlinks (a-elemente) kursiv darstellen wollten, würden Sie die folgende Zeile in Ihre CSS einfügen: a { font-style: italic; Möchten Sie speziell nur die Links kursiv darstellen, die sich innerhalb eines h1-tags befinden, würden Sie diese Zeile Ihrer CSS hinzufügen: h1 a { font-style: italic; Sie können auch eigene Selektoren definieren, indem Sie die Attribute id und/oder class Ihren HTML-Tags hinzufügen: <h1 class="loud">hallo!</h1> <p id="highlight">danke, dass du meine Homepage besuchst.</p> <p>ich hoffe, du magst sie.</p> <ul> <li class="loud">pizza</li> <li>bier</li> <li>hotdogs</li> </ul> Hätte ich nun.loud { font-style: italic; der CSS-Datei dieser HTML-Datei hinzugefügt, wären Hallo! und Pizza kursiv dargestellt worden, da sie beide die Klasse loud besitzen. Der Punkt vor der.loud-klasse ist wichtig. Dadurch weiß CSS, dass es nach Tags mit der Klasse loud Ausschau halten muss. Wenn Sie den Punkt vergessen, würde CSS nach loud-tags suchen, die in diesem Schnipsel nicht existieren (bzw. in HTML überhaupt, nebenbei bemerkt). CSS-IDs verhalten sich ähnlich. Um dem highlight-absatz einen gelben Hintergrund hinzuzufügen, würden Sie diese Regel verwenden: #highlight { background-color: yellow; Hier steht das #-Symbol dafür, dass CSS nach einem HTML-Tag mit der ID highlight suchen muss. Fassen wir noch einmal zusammen: Sie können Elemente entweder über den Tag-Namen (zum Beispiel body, h1, p), über den Klassennamen (zum Beispiel.loud,.subtle,.error) oder über die ID (zum Beispiel #highlight, #login, #promo) auswählen. Außerdem können Sie spezifischer werden, indem Sie Selektoren verketten (zum Beispiel h1 a, body ul.loud). Es gibt Unterschiede zwischen class und id. Die class-eigenschaft sollte verwendet werden, wenn Sie mehrere Elemente auf der Seite haben, die den gleichen class-wert haben. Umgekehrt gilt, dass id-werte für die Seite einmalig sein müssen. Aufgrund dieser Tatsache entschloss ich mich, einfach immer class-eigenschaften zu verwenden, damit ich mir keine Sorgen darüber machen muss, ob ich vielleicht einen id-wert doppelt vergeben habe. Allerdings ist die Auswahl von id-elementen deutlich schneller als die über class. Deshalb kann die Performance deutlich leiden, wenn Sie zu viele class-selektoren verwenden. 8 Kapitel 1: Los geht s

21 Nun verstehen Sie die Grundlagen von CSS. Aber wie verknüpft man eine CSS-Datei mit einer HTML-Datei? Das ist eigentlich ganz einfach. Man verlinkt die CSS-Datei im head- Bereich des HTML-Dokuments, wie in Beispiel 1-6 gezeigt. Die href-eigenschaft in diesem Beispiel ist ein relativer Pfad, was bedeutet, dass sie auf eine Textdatei namens screen.css im selben Verzeichnis verweist, in dem auch die HTML-Datei liegt. Sie können aber ebenfalls absolute Links angeben, zum Beispiel: Beispiel 1-6: Eine CSS-Datei einbinden <html> <head> <title>meine tolle Seite</title> <link rel="stylesheet" href="screen.css" type="text/css" /> </head> <body> <h1 class="loud">hallo!</h1> <p id="highlight">danke, dass du meine Homepage besuchst.</p> <p>ich hoffe, du magst sie.</p> <ul> <li class="loud">pizza</li> <li>bier</li> <li>hotdogs</li> </ul> </body> </html> Beispiel 1-7 zeigt den Inhalt der Datei screen.css. Sie sollten die Datei im selben Ordner abspeichern, in dem auch die HTML-Datei liegt. Beispiel 1-7: Eine einfache CSS-Datei body { font-size: 12px; font-weight: bold; font-family: Arial; a { font-style: italic; h1 a { font-style: italic;.loud { font-style: italic; #highlight { background-color: yellow; Der Vollständigkeit halber sei gesagt, dass man theoretisch auch auf CSS- Dateien verweisen kann, die auf anderen Servern abgelegt sind. Allerdings könnte es als sehr unhöflich aufgefasst werden, wenn Sie ohne Erlaubnis auf eine fremde CSS-Datei verweisen, also binden Sie bitte nur Ihre eigenen Dateien ein. Crashkurs in Webprogrammierung 9

22 Für einen schnellen und gründlichen CSS-Crashkurs empfehle ich wärmstens CSS kurz & gut von Eric Meyer (O Reilly). Wenn es um CSS geht, hat Eric das letzte Wort, und dieses besondere Buch ist kurz genug, um es während des morgendlichen Wegs zur Arbeit mit Ihrer Fahrgemeinschaft zu lesen... solange Sie nicht der Fahrer sind, in diesem Fall könnte es etwas länger dauern (sagte ich»crash«-kurs?). Einführung in JavaScript An diesem Punkt sollten Sie wissen, wie man ein Dokument mit HTML strukturiert und wie man seine visuelle Darstellung per CSS verändert. Nun werden wir etwas JavaScript hinzufügen, damit es auch etwas ausführen kann. JavaScript ist eine Skriptsprache, die einer HTML-Datei hinzugefügt werden kann, um sie interaktiver und benutzerfreundlicher zu machen. So können Sie zum Beispiel Java- Script nutzen, um während der Eingabe in ein Formular zu prüfen, ob die eingegebenen Daten gültig sind. Oder Sie können JavaScript Elemente zeigen oder verstecken lassen, je nachdem, wohin der Anwender klickt. Außerdem kann JavaScript den Webserver ansprechen, um Datenbankänderungen auszuführen, ohne dass die Seite neu geladen werden muss. Wie jede moderne Skriptsprache hat JavaScript Variablen, Felder (Arrays), Objekte und all die typischen Kontrollstrukturen (if, while, for usw.). Beispiel 1-8 zeigt einen Java- Script-Schnipsel, der einige Kernkonzepte der Sprache verdeutlicht. Beispiel 1-8: Grundlegende JavaScript-Syntax var foods = ['Äpfel', 'Bananen', 'Orangen']; 1 for (var i in foods) { 2 if (foods[i] == 'Äpfel') { 3 alert(foods[i] + ' sind meine Lieblingsfrüchte!'); 4 else { alert(foods[i] + ' sind ganz in Ordnung.'); 5 Hier ist Folgendes passiert: 1 Ein Array namens food wird definiert, das drei Elemente besitzt. 2 Hier wird eine Schleife gestartet, die die Variable i definiert, die während der Schleife den Index für jedes Element beinhaltet. 3 Eine gewöhnliche if-abfrage prüft, ob das aktuelle Element gleich Äpfel ist. 4 Das wird ausgegeben, wenn das aktuelle Element des Arrays gleich Äpfel ist. 5 Das wird ausgegeben, wenn das aktuelle Element des Arrays nicht gleich Äpfel ist. 10 Kapitel 1: Los geht s

23 Und dies sind einige erwähnenswerte Punkte zur JavaScript-Syntax: Ausdrücke werden mit einem Semikolon beendet. Codeblöcke werden mit geschweiften Klammern umschlossen. Variablen werden mit dem Schlüsselwort var definiert. Array-Elemente werden über die Eckige-Klammern-Notation angesprochen. Array-Schlüssel werden beginnend mit 0 zugeordnet. Das einfache Gleichheitszeichen ist der Zuweisungsoperator. Das doppelte Gleichheitszeichen ist der logische Gleichheitsoperator. Das Pluszeichen ist der String-Verknüpfungsoperator. Für unsere Zwecke ist der wichtigste Aspekt von JavaScript, dass es mit den Elementen einer HTML-Seite interagieren kann (coole Kids nennen es»das DOM manipulieren«). Beispiel 1-9 zeigt ein einfaches Stück JavaScript, das einen Text auf der Seite ändert, wenn der Anwender auf die h1-überschrift klickt. DOM steht für Document Object Model und repräsentiert in diesem Zusammenhang, wie der Browser eine HTML-Seite versteht. Hier können Sie mehr über das DOM erfahren: Object_Model. Beispiel 1-9: Ein einfacher OnClick-Handler <html> <head> <title>meine tolle Seite</title> <script type="text/javascript" charset="utf-8"> 1 function sayhello() { 2 document.getelementbyid('foo').innerhtml = 'Hallo!'; 3 4 </script> 5 </head> <body> <h1 id="foo" onclick6="sayhello()">klick mich!</h1> </body> </html> Folgendes ist passiert: 1 Ich habe dem Kopf des HTML-Dokuments einen script-block hinzugefügt. 2 In dem script-block habe ich eine einfache JavaScript-Funktion namens say- Hello() definiert. 3 Die Funktion sayhello() beinhaltet einen einzigen Ausdruck, der dem Browser sagt:»suche im Dokument nach einem Element mit der ID foo und setze dessen innerhtml-wert auf Hallo!.«Der Effekt im Browser ist, dass der Text»Klick mich!«durch»hallo!«ersetzt wird, sobald der Anwender auf das h1-element klickt. Crashkurs in Webprogrammierung 11

24 4 Hier endet die Funktion sayhello(). 5 Der script-block endet hier. 6 Das Attribut onclick des h1-elements sagt dem Browser, dass er etwas tun soll, falls der Anwender auf die Überschrift klickt, nämlich die Funktion sayhello() auszuführen. Damals, in der schlechten alten Zeit der Webentwicklung, hatten unterschiedliche Browser verschiedene JavaScript-Unterstützungen. Das bedeutete, dass Ihr Programm zwar in Safari 2, aber nicht im Internet Explorer 6 laufen würde. Sie mussten also ganz schön leiden und das Programm in jedem Browser (und auch in verschiedenen Versionen des gleichen Browsers) testen, um sicherzustellen, dass es überall läuft. Als dann die Zahl der Browser und der Browserversionen wuchs, wurde es schlicht unmöglich, ein Programm für alle Umgebungen zu testen. In jener Zeit war es echt die Hölle, Webprogrammierung mit JavaScript durchzuführen. Kommen wir zu jquery. jquery ist eine relativ kleine JavaScript-Bibliothek, die es Ihnen erlaubt, Ihren JavaScript-Quelltext so zu schreiben, dass er in einer großen Vielfalt von Browsern auf die gleiche Weise funktioniert. Hinzu kommt, dass es einige typische Webentwickleraufgaben wunderbar vereinfacht. Aus diesem Grund nutze ich jquery für den Großteil meiner Entwicklungsarbeit, und ich werde es für die JavaScript-Beispiele in diesem Buch verwenden. Beispiel 1-10 ist die jquery-version von Beispiel 1-9. Beispiel 1-10: Der onclick-handler in der jquery-version <html> <head> <title>meine tolle Seite</title> <script type="text/javascript" src="jquery.js"></script> 1 <script type="text/javascript" charset="utf-8"> function sayhello() { $('#foo').text('hallo!'); 2 </script> </head> <body> <h1 id="foo" onclick="sayhello()">klick mich!</h1> </body> </html> 1 Hier füge ich die Bibliothek jquery.js ein. Ich habe einen relativen Pfad verwendet, was bedeutet, dass die Datei im selben Ordner liegt wie die HTML-Datei. Ich hätte sie aber genauso gut von diversen anderen Orten einbinden können, an denen sie verfügbar ist. 2 Beachten Sie, wie viel weniger Code wir brauchen, um den Austausch des Texts im h1-element vorzunehmen. Das mag in so einem trivialen Beispiel nicht nach einer großen Sache aussehen, aber ich kann Ihnen versichern, dass es in komplexen Lösungen eine Art Lebensretter bedeutet. 12 Kapitel 1: Los geht s

25 Wir werden noch jede Menge jquery-code im echten Einsatz sehen. Deshalb lasse ich das hier erst einmal so stehen. jquery-download, -Dokumentationen und -Einführungen sind unter jquery.com erhältlich. Um jquery nutzen zu können, müssen Sie es von der Website herunterladen, die Datei (so etwas wie jquery min.js) in jquery.js umbenennen und eine Kopie in das Verzeichnis der HTML-Datei legen. Crashkurs in Webprogrammierung 13

26

27 Kapitel 2 KAPITEL 2 Einfaches iphone-styling Letztendlich wollen wir eine native iphone-app mit HTML, CSS und JavaScript entwickeln. Der erste Schritt auf diesem Weg ist, sich damit vertraut zu machen, wie man HTML-Seiten so aufbessert, dass sie wie eine iphone-app aussehen. In diesem Kapitel werde ich Ihnen zeigen, wie man CSS einem Bündel von existierenden HTML-Seiten hinzufügt, damit man sie einfach auf einem iphone bedienen kann. Sie werden damit nicht nur ihrem Ziel näher kommen, eine eigene native App zu bauen, sondern auch eine praktische (und wertvolle) Fähigkeit erlernen, die Sie sofort einsetzen können. Sie haben keine Website? Wenn Sie Ihre Webseiten bisher immer lokal auf Ihrem Computer getestet haben, werden Sie sie so nicht auf dem iphone testen können. Dazu müssen Sie einen Server aufsetzen. Sie haben die Wahl: Legen Sie Ihre Webseiten auf einem Webserver ab (Ihr Internetdienstanbieter unterhält eventuell einen Web-Hosting-Service) und verbinden Sie sich mit dem iphone mit diesem Server. Legen Sie Ihre Webseiten auf einem Webserver ab, der auf Ihrem Computer läuft, und verbinden Sie sich mit Ihrem iphone mit dem Server. Das funktioniert nur, wenn Ihr iphone das gleiche WLAN-Netzwerk wie der Computer nutzt. Wenn Sie kein iphone besitzen, können Sie eines in Safari simulieren. Aktivieren Sie dazu einfach in den erweiterten Einstellungen das ENTWICKLER-Menü, wählen Sie dann ENTWICKLER BENUTZER-AGENT und suchen Sie dort die gewünschte Version des mobilen Safari aus, die simuliert werden soll. Dieses Kapitel ist so aufgebaut, dass Sie die Beispiele beim Lesen direkt ausprobieren können. Egal, welche Möglichkeit Sie gewählt haben, um Ihre Webseiten zu betrachten: laden Sie sie einfach im Browser (vorzugsweise im iphone-browser) neu, wenn Sie etwas Neues den Beispieldateien hinzugefügt und diese abgespeichert haben. 15

28 Erste Schritte Theorie ist großartig, aber ich bin eher der»zeig s mir, rede nicht nur drüber«-typ. Los geht s! Stellen Sie sich vor, Sie haben eine Webseite, die Sie iphone-isieren wollen (Abbildung 2-1). In diesem Szenario gibt es einige einfache Dinge, mit denen Sie die Site für das iphone optimieren können. Diese Möglichkeiten werde ich Ihnen in diesem Kapitel vorstellen. Abbildung 2-1: Die Desktop-Version einer typischen Webseite sieht im Safari auf einem Computer gut aus. Abbildung 2-2 zeigt, wie dieselbe Webseite auf einem iphone aussieht. Im Normalfall ist sie weit davon entfernt, optimal zu sein. Abbildung 2-2: Dieselbe Seite sieht auf dem iphone ganz okay aus, aber wir können das Aussehen deutlich verbessern. 16 Kapitel 2: Einfaches iphone-styling

29 Beispiel 2-1 zeigt eine verkürzte (und übersetzte) Version der HTML-Seite aus Abbildung 2-1. Das ist die HTML-Datei, mit der Sie in diesem Kapitel arbeiten werden. Sie können sie auf der Webseite zum Buch herunterladen, wenn Sie das Styling selbst ausprobieren möchten, während Sie sich durch das Kapitel arbeiten. Die Desktop-Stylesheet-Datei (screen.css) ist nicht abgedruckt, da sie nicht wichtig ist, aber Sie können die CSS-Datei aus dem letzten Kapitel verwenden, wenn Sie ein wenig damit herumspielen möchten. Beispiel 2-1: Das HTML-Dokument, das wir stylen werden <html> <head> <link rel="stylesheet" href="screen.css" type="text/css" /> <title>jonathan Stark</title> </head> <body> <div id="container"> <div id="header"> <h1><a href="./">jonathan Stark</a></h1> <div id="utility"> <ul> <li><a href="about.html">über mich</a></li> <li><a href="blog.html">blog</a></li> </ul> </div> <div id="nav"> <ul> <li><a href="consulting-clinic.html">ambulante Beratung</a></li> <li><a href="on-call.html">bereitschaft</a></li> <li><a href="development.html">entwicklung</a></li> </ul> </div> </div> <div id="content"> <h2>über mich</h2> <p>jonathan Stark ist ein Webentwickler, Redner und Autor. Seine Beratungsfirma, Jonathan Stark Consulting, Inc., hat Kunden wie Staples, Turner Broadcasting und die PGA Tour gewonnen.... </p> </div> <div id="sidebar"> <img alt="manga-porträt von Jonathan Stark" src="images/manga.png" <p>jonathan Stark ist ein Entwickler für mobile und Webapplikationen, den das Wall Street Journal einen Experten in der Veröffentlichung von Desktop-Daten im Web genannt hat.</p> </div> <div id="footer"> <ul> <li><a href="services.html">service</a></li> <li><a href="about.html">über mich</a></li> <li><a href="blog.html">blog</a></li> Erste Schritte 17

30 Beispiel 2-1: Das HTML-Dokument, das wir stylen werden (Fortsetzung) </ul> <p class="subtle">jonathan Stark Consulting, Inc.</p> </div> </div> </body> </html> Über Jahre hinweg haben Entwickler Tabellen verwendet, um Elemente an einem Gitter auszurichten. Die Weiterentwicklungen von CSS und HTML haben dieses Verfahren nicht nur überflüssig, sondern sogar unerwünscht werden lassen. Heute nutzt man hauptsächlich das div-element (im Zusammenspiel mit einer Vielzahl an Attributen), um die gleiche Aufgabe zu bewältigen, allerdings mit mehr Kontrolle. Obwohl eine umfassende Behandlung von div-basierten Layouts den Umfang dieses Buchs deutlich sprengen würde, werden Sie viele Beispiele dazu sehen, während Sie die Kapitel lesen. Wenn Sie mehr lernen möchten, empfehle ich Ihnen Webdesign mit Webstandards von Jeffrey Zeldman (Addison-Wesley), das sich diesem Thema intensiv widmet. Vorbereitung eines separaten iphone-layouts Ich bin ein großer Verfechter des DRY-Konzepts (siehe den folgenden Hinweis), aber im echten Leben ist man besser dran, wenn man einen klaren Schnitt zwischen dem Desktop-Browser-Layout und dem iphone-layout macht. Vertrauen Sie auf mein Wort und legen Sie zwei komplett unterschiedliche CSS-Dateien an Sie werden besser schlafen. Die Alternative wäre, alle CSS-Regeln in ein einziges Layout zu zwängen, was sich aus mehreren Gründen als eine ganz schlechte Idee herausstellen würde; der offensichtlichste ist, dass Sie eine Menge unnützer Desktop-Layout-Regeln an das iphone senden und damit wertvolle Bandbreite und Speicher verschwenden würden. DRY steht für»wiederhole dich nicht«(engl.: Don t Repeat Yourself) und ist ein Prinzip aus der Softwareentwicklung, das aussagt:»jedes Stück Wissen muss eine einzige, eindeutige, verbindliche Verköperung innerhalb eines Systems haben.«dieser Begriff wurde von Andrew Hunt und David Thomas in ihrem Buch Der Pragmatische Programmierer (Hanser Fachbuch) geprägt. Um das Layout für das iphone zu definieren, ersetzen Sie das link-tag im Beispiel- HTML-Dokument mit den beiden folgenden Ausdrücken: <link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-width: 480px)" /> <link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" /> 18 Kapitel 2: Einfaches iphone-styling

31 Hier verweist desktop.css auf Ihr bestehendes Desktop-Layout, und iphone.css ist eine neue Datei, die wir gleich im Detail besprechen werden. Wenn Sie dieses Beispiel mit dem früher gezeigten HTML-Dokument nachvollziehen, müssen Sie die Datei screen.css in desktop.css umbenennen; da wir uns aber auf das iphone-layout konzentrieren werden, können Sie das Desktop-Layout auch einfach ignorieren. Sollte es nicht geladen werden können, wird sich der Browser schon nicht zu sehr aufregen. Bedauerlicherweise wird der Internet Explorer die obigen Anweisungen nicht verstehen. Deshalb müssen wir einen Bedingungskommentar (hier fett gedruckt) einfügen, der auf eine spezielle IE-Version der CSS verweist: <link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-width: 480px)" /> <link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-width: 481px)" /> <!--[if IE]> <link rel="stylesheet" type="text/css" href="explorer.css" media="all" /> <![endif]--> Gut, nun ist es an der Zeit, das HTML-Dokument zu bearbeiten: Löschen Sie den existierenden Link auf die Datei screen.css und ersetzen Sie sie durch die gerade gezeigten Zeilen. Auf diese Weise können Sie mit der iphone-spezifischen CSS-Datei, die ich in diesem Kapitel zeigen werde, noch einmal frisch anfangen. Die Seitengröße einstellen Solange Sie ihm nichts anderes sagen, geht Safari davon aus, dass Ihre Seite 980px breit ist (Abbildung 2-3). Im Großteil der Fälle funktioniert das gut. Allerdings wollen Sie unsere Inhalte speziell für das kleinere Display des iphone formatieren. Deshalb müssen Sie Safari das wissen lassen, indem Sie ein meta-tag mit dem Namen viewport (engl. für Darstellungsfeld) in das head-element des HTML-Dokuments einfügen: <meta name="viewport" content="user-scalable=no, width=device-width" /> Wenn Sie die Breite nicht setzen, wird die Seite beim ersten Laden sehr weit herausgezoomt sein. Das meta-tag viewport wird von allen anderen Browsern mit Ausnahme des mobilen Safari ignoriert. Deshalb können Sie es einfügen, ohne sich über die Desktop-Version Ihrer Seite Sorgen zu machen. Allein durch das Unterdrücken des Desktop-Layouts und durch das Einstellen des Darstellungsfelds haben Sie den iphone-anwendern zu einer besseren Sicht auf Ihre Seite verholfen (Abbildung 2-4). Um sie nun wirklich zu beeindrucken, lassen Sie uns mit dem Aufbau des iphone.css-stylesheets beginnen. Erste Schritte 19

32 Abbildung 2-3: Das iphone unterstellt einer normalen Webseite eine Breite von 980px. Abbildung 2-4: Durch das Festlegen des Darstellungsbereichs auf die Breite des Geräts wird Ihre Seite deutlich lesbarer. Die iphone-css hinzufügen Es gibt einige Richtlinien für die Benutzeroberfläche (auch»ui«genannt vom engl.»user interface«), die eine iphone-app wie eine iphone-app aussehen lassen. Im nächsten Abschnitt werde ich die markante Titelleiste, Listen mit abgerundeten Ecken, fingerfreundliche Links, die wie glänzende Buttons aussehen, und Weiteres hinzufügen. Verwenden Sie Ihren Texteditor, um eine Datei namens iphone.css zu erstellen und den Code aus Beispiel 2-2 einzufügen. Speichern Sie diese Datei im selben Ordner ab, in dem auch das HTML-Dokument liegt. 20 Kapitel 2: Einfaches iphone-styling