Anzeige
Tutorialbeschreibung

Web-Apps erstellen (Teil 06): iWebKit für den speziellen iOS-Look (2)

Web-Apps erstellen (Teil 06): iWebKit für den speziellen iOS-Look (2)

Wenn ihr euch die "index.html" der App anseht, werden euch darin drei Bereiche auffallen:

• Titelleiste
• Inhalt
• Fußbereich

Im Browser sieht das so aus:

Bilder



 
Deutlich wird das dann übrigens auch im Quellcode.
<div id="topbar">
...
</div>
<div id="content">
...
</div>
<div id="footer">
...
</div>

Das ist eine typische Aufteilung für eine App. Und daran solltet ihr prinzipiell auch nichts ändern.

Der Kopfbereich wird durch ein div-Element mit der ID topbar gekennzeichnet.
<div id="topbar">
PSD-Tutorials.de
</div>

In dieses Element könnt ihr also beispielsweise den Titel der App bzw. eurer Webseite eintragen.

Bilder



 
Wie die Titelleiste letztendlich aussehen soll, lässt sich über eine vordefinierte Klasse bestimmen. Zur Auswahl stehen zwei Varianten.

transparent
black

Wenn ihr transparent verwendet, scheint die Titelleiste durch.

Bilder



 
Wird hingegen black eingesetzt, ist die Titelleiste schwarz.

Bilder



 
Die gewünschte Variante wird einfach als Klasse dem div-Element mit der ID topbar zugewiesen.
<div id="topbar" class="black">
…
</div>

Damit in der Titelleiste auch tatsächlich etwas zu sehen ist, müsst ihr natürlich noch die entsprechenden Inhalte definieren. Am wichtigsten dürfte dabei zweifellos der Titel der App sein. Diesen definiert man, indem man ein div-Element mit der ID title anlegt.
<div id="topbar">   
<div id="title">PSD-Tutorials.de</div>
</div>

Ein anschließender Blick auf das Ergebnis liefert schon mal ein recht ansprechendes Ergebnis.

Bilder



 
In die Titelleiste gehört normalerweise nicht nur der Titel. Ebenso packt man hier eine Navigation mit hinein. Von iWebKit – und das ist eben das Geniale an Frameworks – werden dafür einige vordefinierte Varianten angeboten. Denn für die Navigation können

• Textlinks,
• Pfeile und
• Schaltflächen

verwendet werden. Wie sich Pfeiltasten umsetzen lassen, zeigt das folgende Beispiel:
<div id="topbar">
   <div id="leftnav">
     <a href="1.html">Zurück</a>
   </div>
   <div id="rightnav">
      <a href="2.html">Weiter</a>
   </div>
   <div id="title">PSD-Tutorials.de</div>
</div>

Wie ihr seht, wurden hier keine Grafiken im HTML-Code definiert. Sieht man sich das Ergebnis dieser Syntax jedoch im Browser an, sind da sehr wohl Pfeile zu sehen.

Bilder



 
Es gibt nun also Vor- und Zurück-Schaltflächen. Und das wirkt doch nun tatsächlich schon mal wie eine echte App.

Unterhalb der Topleiste könnt ihr einen Navigationsbereich einfügen. In diesem Bereich sind dann üblicherweise Links auf wichtige Seiten enthalten. Das könnten die Startseite, Kontakt, Impressum usw. sein.
<div id="tributton">
<div class="links">
<a id="pressed" href="#">Home</a><a href="kontakt.html">Kontakt</a><a href="impressum.html">Impressum</a></div>
</div>

Auf diese Weise habt ihr eine ansprechende permanente Navigation im oberen Fensterbereich der App.

Bilder



 
So könnt ihr also den Kopfbereich nach euren eigenen Vorstellungen gestalten. Was jetzt allerdings noch fehlt, sind die eigentlichen Inhalte. Definiert werden diese innerhalb des div-Elements mit der ID content.
<div id="topbar"> ...
</div>
<div id="content">
...Hier steht der Seiteninhalt...
</div>
<div id="footer">
<a class="noeffect" href="http://snippetspace.com">
iPhone site powered by iWebKit
</a>
</div>

Das Hauptelement sollte – zumindest aus struktureller Sicht – eine Überschrift sein. Auch dafür gibt es eine entsprechende Klasse, nämlich graytitle. Das folgende Beispiel zeigt, wie sich eine Überschrift mit dieser Klasse umsetzen lässt.
<div id="content">
   <h1 class="graytitle">
     Herzlich willkommen
   </h1>
</div>

 
Und auch hier soll natürlich wieder ein Blick auf das Ergebnis zeigen, welche Auswirkungen die gezeigte Syntax letztendlich hat.

Bilder



Bei genauerer Betrachtung der Überschrift fällt auf, dass diese einen typischen Schattenwurf aufweist. Auch das hat wieder durchaus etwas von einer normalen App.


 

Seitenbereiche definieren

Eine der Besonderheiten von iWebKit ist die Möglichkeit zur Definition von Seitenbereichen. Jede App-Seite kann in einzelne Bereiche unterteilt werden. iWebKit sorgt dabei automatisch für eine optische Unterteilung dieser Bereiche. Innerhalb der kleinen iWebKit-Dokumentation wird die pageitem-Klasse jeweils einem ul-Element zugewiesen.
<ul class="pageitem">
<li>…</li>
<li>…</li>
<li>…</li>
</ul>
<ul class="pageitem">
<li>…</li>
<li>…</li>
<li>…</li>
</ul>

 
Das ist praktisch, wenn man tatsächlich eine Liste verwenden will. Dem ist aber natürlich nicht immer so. In solchen Fällen könnt ihr pageitem aber auch ganz normalen span-Elementen zuweisen.
<div id="content">
  <h1 class="graytitle">Herzlich 
  willkommen</h1>
  <span class="pageitem">Bereich 1</span >
  <span class="pageitem">Bereich 2</span >
</div>

iWebKit sorgt dank der verwendeten Klasse dann automatisch für die optische Unterteilung der einzelnen Seitenbereiche.

Bilder



 

Listen definieren

Eines der Hauptstilmittel bei der Aufteilung von Inhalten innerhalb von Web-Apps sind nach wie vor Listen. Das ist bei iWebKit nicht anders. Und natürlich ist das Framework für solche Zwecke bereits von Hause aus bestens gerüstet.

Denn dank der Listen lässt sich die App dann auch via Smartphone elegant steuern. Üblicherweise werden den einzelnen Seitenbereichen Überschriftenblöcke zugewiesen. Das folgende Beispiel zeigt, wie das aussehen kann.
<li class="textbox"><span class="header">Unsere Tutorials</span><p>
Hier seht ihr eine Übersicht der Themen, die wir mit unseren Tutorials abdecken.</p></li>

Diesen Block platziert ihr am besten am Anfang des betreffenden Seitenbereichs. So wissen die Besucher gleich, was es mit den jeweiligen Bereichen auf sich hat.

Die einzelnen Listeneinträge könnt ihr dann zum Beispiel so aufbauen:
<li class="menu"><a href="technology.html">
<img alt="list" src="thumbs/plugin.png" /><span class="name">The 
Technologies</span><span class="arrow"></span></a></li>

Dem li-Element wird jeweils die Klasse menu zugewiesen. Daran schließt sich das Verweisziel an. Hinter dem Verweisziel taucht dann oftmals ein Icon auf.

 
Das ist zwar kein Muss, macht die Liste aber doch deutlich attraktiver. Der Verweistext wird innerhalb des span-Elements mit der Klasse name definiert. Und damit die Nutzer der App auch wissen, dass sich hinter dem Link tatsächlich Inhalte verbergen, könnt ihr auch noch einen Pfeil einfügen. Verwendet wird dafür ein leerer span-Bereich, dem die Klasse arrow zugewiesen wird.

Bilder



 
Das folgende Beispiel zeigt, wie eine solche Anwendung aussehen könnte.
<ul class="pageitem">
   <li class="textbox"><span class="header">Unsere Tutorials</span><p>
   <li class="menu"><a href="22.html">
   <img alt="list" src="thumbs/plugin.png" /><span class="name">2D</span>
  <span class="arrow"></span></a></li>
   <li class="menu"><a href="3d.html">
   <img alt="wordpress" src="thumbs/start.png" /><span class="name">3D</span>
  <span class="arrow"></span></a></li>
   <li class="menu"><a href="audio.html">
   <img alt="music" src="thumbs/other.png" /><span class="name">Audio</span>
  <span class="arrow"></span></a></li>
   <li class="menu"><a href="fotografie.html">
   <img alt="store" src="thumbs/accessibility.png" /><span class="name">Fotografie </span>
  <span class="arrow"></span></a></li>
   <li class="menu"><a href="web.php">
   <img alt="wordpress" src="thumbs/voice.png" /><span class="name">Web</span></a></li>
</ul>

Auf diese Weise könnt ihr also beliebige Listen aufbauen, die dann tatsächlich wie echte App-Menüs wirken. Im nächsten Tutorial wird die App dann übrigens weiter mit Inhalten gefüllt.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 16.10.2016 - 15:15

Herzlichen Dank für das Video.

Portrait von hierkarl
  • 16.06.2014 - 20:55

hört sich ziemlich spannend an, werds vlt. bald verwenden können :)
thx

Portrait von Domingo
  • 14.06.2014 - 23:45

Herzlichen Dank für das Tutorial.

Portrait von Caesarion2004
  • 14.06.2014 - 17:59

Vielen Dank für das informative Tutorial und die Datei.

Portrait von Kundentest
  • 14.06.2014 - 17:43

Herzlichen Dank für das Video.

Portrait von Kundentest
  • 14.06.2014 - 17:35

Herzlichen Dank für das Tutorial.

Portrait von Steve007
  • 14.06.2014 - 17:13

Vielen Dank für diesen weiteren Teil Deiner interessanten Reihe.

Portrait von BOPsWelt
  • 14.06.2014 - 17:05

Danke für das Tutorial.

Portrait von johen
  • 14.06.2014 - 16:57

Danke für die Textversion der Reihe.

Portrait von Steve007
  • 18.05.2014 - 13:47

Vielen Dank für den weiteren Teil Deiner interessanten Reihe.

Portrait von manno22
  • 17.05.2014 - 12:10

Besten Dank für das interessante Tutorial und die Datei.

Portrait von kopfam
  • 17.05.2014 - 10:31

Besten Dank für das interessante Tutorial und die Datei.

Portrait von Caesarion2004
  • 17.05.2014 - 10:27

Vielen Dank für das informative Tutorial.

Portrait von MicroSmurf
  • 17.05.2014 - 10:13

Ich habe mir das Video noch nicht angesehen, sondern nur herunter geladen. Was sind das für Arbeitsmaterialien? Sind die neu oder die gleichen aus Teil 4? Ich würde ungern 2mal bezahlen ;-)

Portrait von Figib
  • 17.05.2014 - 08:31

Vielen Dank für das Tutorial!

Portrait von rocking_sid
  • 17.05.2014 - 07:31

Vielen Dank für das interessante Video-Training!

x
×
×