Jump to content

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


  • Please log in to reply
2 replies to this topic

#1
monoblock

monoblock

    InsanelyMac Protégé

  • Members
  • PipPip
  • 53 posts
  • Gender:Male
  • Location:Krefeld, NRW, Germany
  • Interests:Computer, DSLR Photography, Friends, Mediadesign
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:

<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:
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
master.css

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

#2
monoblock

monoblock

    InsanelyMac Protégé

  • Members
  • PipPip
  • 53 posts
  • Gender:Male
  • Location:Krefeld, NRW, Germany
  • Interests:Computer, DSLR Photography, Friends, Mediadesign
*pushpush* Keiner der Interesse hat? :P
Ein bisschen Feedback wre cool :D

#3
loop66

loop66

    InsanelyMac Protégé

  • Just Joined
  • Pip
  • 1 posts
doch .. ich!!!! danke fr die erklrung,w erde damit nmlich ein paar Logins etc vereinfachen und mir ne WebApp als middleMan fr andere seiten bauen.. wnen ichs schaff :-)


lg

Urs





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

© 2014 InsanelyMac  |   News  |   Forum  |   Downloads  |   OSx86 Wiki  |   Mac Netbook  |   PHP hosting by CatN  |   Designed by Ed Gain  |   Logo by irfan  |   Privacy Policy