monoblock Posted July 6, 2008 Share Posted July 6, 2008 Hallo! Das ist mein erstes Tutorial also seid bitte nicht zu gemein Und f�r eventuelle Rechtschreibfehler entschuldige ich mich Wie die �berschrift schon verr�t geht es hier um eine Anleitung bzw. Einf�hrung ins Webdevelopment speziell f�r das iPhone/den iPod touch. Hier geht es nicht etwa um das Optimieren von schon bestehenden Seiten, sondern um das Entwickeln von ganz neuen Seiten in Anlehnung an die im iPhone OS X genutzten Interfaces. So los geht's: Part I - WebApp Basics Am Anfang stand die Wahl des Frameworks, zur Auswahl hatte ich WebApp und iUI. Beide sind meiner Meinung nach relativ sp�rlich dokumentiert und man muss sich viel durch die Demos arbeiten um einen gewissen Einblick in die Funktionsweise zu bekommen, meine Wahl ist dann schlie�lich auf WebApp gefallen, da es dann doch noch etwas besser dokumentiert war und in meinem iPod wesentlich fl�ssiger lief. Ladet euch einfach die aktuelle Version von der Seite (Link oben) und entpackt sie in einen Ordner eurer Wahl... Zum weiterarbeiten braucht ihr noch einen sch�nen Texteditor, ich empfehle Textmate, es geht aber auch jeder andere Nun fangen wir mit unserem kleinen Projekt zum warm werden an Wir wollen einfach eine Seite auf der ein Infotext (zu euch, oder irgendetwas) steht und eine zum Kontakt aufnehmen. In eurem Projektordner solltet ihr diese Struktur schaffen: index.html css (Ordner) - master.css img (Ordner) - sp�ter eventuell Bilder js (Ordner) - sp�ter eventuell JavaScripte WebApp (Ordner) - Framework Die index.html sollte so aussehen: <html> <head> <title>iPhone Testseite</title> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <link rel="stylesheet" href="css/master.css" type="text/css" charset="utf-8" /> <link rel="stylesheet" href="WebApp/Design/Render.css" type="text/css" charset="utf-8" /> <script type="text/javascript" src="WebApp/Action/Logic.js"></script> </head> <body> </body> </html> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> Der Viewport ist der sichtbare Bereich in dem die Seite dargestellt wird. Erl�uterung unserer Einstellungen: initial-scale - Beim ersten Laden der Seite wird der ganze Inhalt (1=100%) dargestellt maximum-scale - Da wir unterbinden wollen, dass der User zoomt setzten wir hier den Wert = 1 user-scalable - Gibt an ob dem User das Zoomen erlaubt ist, in unserem Fall = 0, also nicht. <link rel="stylesheet" href="WebApp/Design/Render.css" type="text/css" charset="utf-8" /> <script type="text/javascript" src="WebApp/Action/Logic.js"></script> Damit bindet ihr das Framework ein Nun m�ssen wir den Hauptcontainer f�r unsere Webanwendung schaffen, dieser ist ein einfaches div-Element mit der ID "WebApp" in welchem sich der ganze Restcode befinden wird. <div id="WebApp"></div> Die Webanwendung ist in zwei Bereiche unterteilt, einmal den Header und einmal einen Container, der die einzelnen Layer (Seiten) beinhaltet, optional gibt es auch noch einen dritten Bereich, den Footer, diesen werden wir aber nicht verwenden. Der Header wird wie folgt eigebunden: <div id="iHeader"> <a href="#" id="waBackButton">Back</a> <span id="waHeadTitle"></span> </div> Er enth�lt einen Titel, der den Namen der aktiven Seite (Layers) anzeigt und einen Zur�cknopf, mit dem man wieder auf die Hauptseite navigieren kann. Optional kann man auch noch einen Home Button hinzuf�gen, der aktiv wird, wenn mehr als zwei Ebenen die die Tiefe navigiert wird. In unserem Beispielt ist das aber noch nicht n�tig. Der Code f�r unseren Container, der die Layer lagern soll, sieht so aus: <div id="iGroup"></div> Nun zu den eigentlichen Seiten, dieser werden in s.g iLayer gekapselt: <div class="iLayer" id="waNAME" title=""></div> Die ID ist zum sp�teren navigieren wichtig, also immer sorgf�lltig ausw�hlen und das "wa" vorm eigentlichen Namen nicht vergessen Der Title ist wichtig damit der Header etwas zum anzeigen hat. Zu beachten ist, dass grunds�tzlich alle iLayer vom Framework versteckt werden, bis auf den ersten, der somit den Indexlayer darstellt. F�r unser Projekt brauchen wir erstmal drei iLayer, also legt die bitte jetzt an Meine sehen so aus: <div class="iLayer" id="waHome" title="Home"></div> <div class="iLayer" id="waAbout" title="�ber mich"></div> <div class="iLayer" id="waContact" title="Kontakt"></div> Unsere Projekt sollte komplett nun so aussehen: <html> <head> <title>iPhone Testseite</title> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <link rel="stylesheet" href="css/master.css" type="text/css" charset="utf-8" /> <link rel="stylesheet" href="WebApp/Design/Render.css" type="text/css" charset="utf-8" /> <script type="text/javascript" src="WebApp/Action/Logic.js"></script> </head> <body> <div id="WebApp"> <div id="iHeader"> <a href="#" id="waBackButton">Back</a> <span id="waHeadTitle"></span> </div> <div id="iGroup"> <div class="iLayer" id="waHome" title="Home"></div> <div class="iLayer" id="waAbout" title="�ber mich"></div> <div class="iLayer" id="waContact" title="Kontakt"></div> </div> </div> </body> </html> Nun zu unserer Indexseite (iLayer mit der ID "waHome"), sie soll nur als Navigation dienen und im Edge-to-Edge Design gehalten sein, was uns das Framework sch�n einfacher erm�glicht, indem wir einen div-Container mit der Class "iList" anlegen und darin eine unsortierte Liste mit der Class "iArrow": <div class="iList"> <ul class="iArrow"> <li><a href="#_About">�ber mich</a></li> <li><a href="#_Contact">Kontakt</a></li> </ul> </div> Links zu anderen Layern funktionieren sehr simpel, wie ihr vielleicht schon bemerkt habt: Ihr nehmt den Namen des Layers lasst das "wa" weg und setzt ein "#_" davor - fertig Weiter geht's zur Infoseite, diese soll im Rounded Rectangle Design gehalten sein, was wiederum das Framework f�r uns �bernimmt: <div class="iBlock"> <h1>Neque porro quisquam</h1> <p> Praesent vitae mauris. Integer gravida hendrerit sem.<br/> Nunc a est et lacus convallis varius.<br/> Phasellus enim est, suscipit id, </p> </div> Im "iBlock" k�nnt ihr einfach f�r �berschriften den h1-Tag nutzen und f�r Textabs�tze halt den p-Tag. Andere Tags f�r �berschriften als h1 sind nicht zu empfehlen, da sie f�r z.B listen vorgesehen sind, dazu vll. in folgenden Tuts mehr Hier der Code f�r die Kontaktseite: <div class="iMenu"> <h3>Elektronisch</h3> <ul class="iList contact_infos"> <li> E-Mail: <small>a@b.com</small> </li> <li> Telefon: <small>+123456</small> </li> <li> Fax: <small>+123456</small> </li> </ul> <ul><li class="center_link"><a href="tel:123456">Call</a></li></ul> </div> <div class="iBlock"> <h1>Postalisch</h1> <p> <b>Name Nachname</b><br/> Strasse<br/> PLZ Ort </p> </div> Der "iMenu" Container in Kombination mit der "iList" Liste erm�glicht das Benutzen vom Rounded Rectangle Design in List, sprich, dass die Ecken unten und oben sch�n gerundet sind. Au�erdem wird hier eine h3-�berschrift benutzt, da die h1-�berschrift im iMenu nicht so aussieht wie wir es wollen Die zus�tzliche Class "contact_infos" werden wir mit unserer master.css noch definieren: .contact_infos li { font-size: 16px; color: #000; float: none ! important; } .contact_infos li small { margin: 1px 0 0 0; font-size: 15px; display: inline; float: right; } Wir benutzen dieses CSS-File, da wir nichts am Framework CSS �ndern sollten, da dieses unter Umst�nden mit einem Update ausgetauscht wird und man auch schnell den �berblick verliert. Mit diesen Zeilen Code haben wir die Informationen im small-Tag in die selbe Zeil wie die �berschriften ger�ckt und rechtsb�ndig ausgerichtet, au�erdem die Schrift- gr��e angepasst und mit dem Margin daf�r gesorgt, dass es alles sch�n ordentlich aus- sieht. Einfach mal ohne das master.css anschauen und dann Unterscheide finden, falls ihr noch nicht so fit seid, was CSS angeht Au�erdem m�ssen wir noch unseren "Call" Link welche f�r die iPhoneuser interessant ist, zentrieren: .center_link { text-align: center; } Das war es eigentlich auch schon, der fertige Code sollte so aussehen: index.html <html> <head> <title>iPhone Testseite</title> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <link rel="stylesheet" href="WebApp/Design/Render.css" type="text/css" charset="utf-8" /> <link rel="stylesheet" href="css/master.css" type="text/css" charset="utf-8" /> <script type="text/javascript" src="WebApp/Action/Logic.js"></script> </head> <body> <div id="WebApp"> <div id="iHeader"> <a href="#" id="waBackButton">Back</a> <span id="waHeadTitle">Home</span> </div> <div id="iGroup"> <div class="iLayer" id="waHome" title="Home"> <div class="iList"> <ul class="iArrow"> <li><a href="#_About">�ber mich</a></li> <li><a href="#_Contact">Kontakt</a></li> </ul> </div> </div> <div class="iLayer" id="waAbout" title="�ber mich"> <div class="iBlock"> <h1>Neque porro quisquam</h1> <p> Praesent vitae mauris. Integer gravida hendrerit sem.<br/> Nunc a est et lacus convallis varius.<br/> Phasellus enim est, suscipit id, </p> </div> </div> <div class="iLayer" id="waContact" title="Kontakt"> <div class="iMenu"> <h3>Elektronisch</h3> <ul class="iList contact_infos"> <li> E-Mail: <small>a@b.com</small> </li> <li> Telefon: <small>+123456</small> </li> <li> Fax: <small>+123456</small> </li> </ul> <ul><li class="center_link"><a href="tel:123456">Call</a></li></ul> </div> <div class="iBlock"> <h1>Postalisch</h1> <p> <b>Name Nachname</b><br/> Strasse<br/> PLZ Ort </p> </div> </div> </div> </div> </body> </html> master.css .center_link { text-align: center; } .contact_infos li { font-size: 16px; color: #000; float: none ! important; } .contact_infos li small { margin: 1px 0 0 0; font-size: 15px; display: inline; float: right; } Wenn alles geklappt hat sollte die Seite jetzt funktionieren und wir sind hier fertig Danke f�rs Lesen und ich hoffe ich konnte euch ein bisschen helfen, wenn ich Zeit habe schreibe ich noch einen Teil zum nachladen von dynamischen Daten via AJAX, das wird f�r viele wohl interessanter sein Gru� mono Link to comment https://www.insanelymac.com/forum/topic/114308-http-iphoneipod-touch-webdevelopment-achtung-lang/ Share on other sites More sharing options...
monoblock Posted July 7, 2008 Author Share Posted July 7, 2008 *pushpush* Keiner der Interesse hat? Ein bisschen Feedback wäre cool Link to comment https://www.insanelymac.com/forum/topic/114308-http-iphoneipod-touch-webdevelopment-achtung-lang/#findComment-810595 Share on other sites More sharing options...
loop66 Posted August 22, 2008 Share Posted August 22, 2008 doch .. ich!!!! danke für die erklärung,w erde damit nämlich ein paar Logins etc vereinfachen und mir ne WebApp als middleMan für andere seiten bauen.. wnen ichs schaff :-) lg Urs Link to comment https://www.insanelymac.com/forum/topic/114308-http-iphoneipod-touch-webdevelopment-achtung-lang/#findComment-865250 Share on other sites More sharing options...
Recommended Posts