Jump to content

[HTTP]: iPhone/iPod touch Webdevelopment (Achtung lang!)

monoblock

By monoblock,
in Anleitungen

 Share
3 posts in this topic

Recommended Posts

monoblock
monoblock
Posted
Posted

Hallo!

 

Das ist mein erstes Tutorial also seid bitte nicht zu gemein :P Und f�r eventuelle

Rechtschreibfehler entschuldige ich mich :P

 

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 :D

 

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 :P

 

Gru�

mono

Link to comment
Share on other sites
  • 1 month later...
 Share
Go to topic listing
×
×
  • Create New...