XML-Ecke

Struktur in den Content!

Web-Design fürs Gyroskop

Ein kleines jQuery-Plugin bringt das Web zum Tanzen: Mit Parallax.js können Bildebenen auf einer Webseite platziert werden, die auf den Lage- und Beschleunigungssensor (Gyroskop) mobiler Geräte reagieren:

Auf dem iPad folgen die Ebenen sehr geschmeidig den Bewegungen des Nutzers. Auf dem Desktop oder Notebook kann der Cursor des Browsers den Effekt simulieren – am besten funktioniert das mit Safari, der Firefox unterstützt das nicht. Das von Matt Wagerfield und Claudio Guglieri entwickelte Open-Source-Tool kann hier heruntergeladen werden.

Die aus der zip-Datei entpackten Ordner werden auf den Server geschickt, die Beispieldatei simple.html im Ordner examples lässt sich dann mit eigenen Bilddaten und Konfigurationen anpassen. Am schnellsten geht das, indem man Motive eines Fotos in unterschiedlichen Ebenen isoliert und dann einzeln speichert.

Die Bilddateien werden in eine HTML-Liste aufgenommen:

<ul class="scene" id="scene" data-calibrate-x="false">
	<li class="layer" data-depth="0.00"><img alt="" src="images/background.jpg" /></li>
	<li class="layer" data-depth="1.00"><img alt="" src="images/orchid_1.png" /></li>
	<li class="layer" data-depth="0.80"><img alt="" src="images/orchid_2.png" /></li>
	<li class="layer" data-depth="0.60"><img alt="" src="images/orchid_3.png" /></li>
	<li class="layer" data-depth="2.40"><img alt="" src="images/orchid_4.png" /></li>
	<li class="layer" data-depth="1.80"><img alt="" src="images/orchid_5.png" /></li>
	<li class="layer" data-depth="0.80"><img alt="" src="images/orchid_6.png" /></li>
</ul>

Das Attribut data-depth gibt die Geschwindigkeit an, mit der das Bild auf die Bewegungen des Nutzers reagieren soll. Der Wert 0.00 lässt ein Bild unbeweglich verharren, je höher der Wert, desto sensibler reagiert ein Bild auf die Bewegung des mobilen Geräts. Zusätzlich kann man in der CSS-Datei die Transparenz der Einzelbilder einstellen:

.layer:nth-child(1) {
opacity: 0.45;
}
.layer:nth-child(2) {
opacity: 0.60;
}
.layer:nth-child(3) {
opacity: 0.90;

Was auf den ersten Blick eine nette Spielerei ist, lässt sich auch für die Steuerung von Web-Anwendungen nutzen. Im iOS 7 will Apple seine Gyroskop-Sensoren für 3D-Effekte einsetzen: Der räumliche Eindruck entsteht, indem Web-Inhalte in Ebenen platziert werden, die dann mit JavaScript unabhängig voneinander gesteuert werden.

Posted in Im Lauf der Zeit | Tagged , | Leave a comment

Die Website zur Web App schrumpfen

Anwendungen fürs mobile Web lassen sich immer einfacher entwickeln. Was vor ein paar Jahren noch mit aufwendiger Programmierarbeit verbunden war, lässt sich inzwischen mit wenigen Standard-Zutaten wie HTML, JavaScript und CSS erledigen. Noch einfacher wird die Entwicklung von Web Apps mit Hilfe von “Frameworks” – das sind Sammlungen von vorgefertigten Code-Bausteinen, die sich zu eigenen Anwendungen zusammenstellen lassen.

So verspricht das iWebkit, dass man damit in wenigen Minuten eine eigene Web App für iPhone und iPod Touch erstellen kann: “Simplicity is the key”. Das Framework – inzwischen bereits in der Version 5.2 angekommen – besteht im Wesentlichen nur aus einer HTML-Datei für die Startseite, einer kleinen JavaScript-Datei und einer Datei mit CSS-Anweisungen, die das Layout der HTML-Daten an Display-Größe und Stilbesonderheiten des iPhones anpassen. Außerdem werden grundlegende Icons bereitgestellt, die in das eigene Projekt integriert werden können.

Die HTML-Datei mit dem im Header eingebundenen CSS und JavaScript ist in drei Hauptbereiche unterteilt:

1) Die “Topbar” bietet Platz für die grundlegende Navigation innerhalb der Web App. Die Navigationselemente wie etwa ein “Home”-Icon können rechts oder links angeordnet werden. Auch die Hauptüberschrift des Apps wird hier untergebracht.

2) In einem weiteren Div-Bereich mit der Bezeichnung Content finden erweiterte Menüs, Listen, Textboxen oder Bilder ihren Platz. Dabei macht das iWebkit ausgiebig von den Möglichkeiten der HTML-Listen Gebrauch, denen mit CSS verschiedene Kleider übergezogen werden. So gibt es etwa eine CSS-Klasse für eine Liste, die verschiedene Menü-Einträge mit Links zu den entsprechenden Daten auf die gleiche Weise darstellt wie etwa die Liste der Musiktitel oder Interpreten in der iPod-Anwendung von Apple. Der Code für den im Bild gezeigten Inhalt der Anwendung lautet:

<div id="content">
<ul class="pageitem">
	<li class="textbox">Orchideen sind anders. ...</li>
</ul>
<span class="graytitle">bitte eine Gattung wählen</span>
<ul class="pageitem">
	<li class="menu"><a href="URL"><img src="Bild-URL" alt="description" /><span class="name">Anacamptis</span></a></li>
	<li class="menu">... Dactylorhiza ...</li>
</ul>
</div>

3) Schließlich gibt es noch einen Footer, der etwa den Hinweis auf den Autor der App enthalten kann. Die iWebkit-Entwickler bitten darum, den Hinweis auf ihr eigenes Projekt nicht zu löschen.

Mit den Mitteln des Frameworks ist es nicht schwer, eine bestehende Website zur Web App zu schrumpfen – als Beispiel habe ich meine Orchideen-Website miramis.de in eine iPhone-Anwendung Orchis web app transformiert. Die Daten der Anwendung werden zusammen mit den iWebkit-Daten auf einen Server hochgeladen. Ruft man die Adresse mit der index.html der Web-Anwendung im Safari-Browser auf, bringt sie das Look and Feel einer typischen iPhone-Anwendung aufs Display. Mit dem Befehl “Zum Home-Bildschirm” (über den mit einem + gekennzeichneten Button am unteren Browser-Rand) kann man die Anwendung auch auf dem iPhone-Desktop speichern und danach direkt von dort ohne die Browser-Oberfläche starten. Die App-Erscheinung wird noch überzeugender, wenn man im Header der index.html ein Icon für die Anwendung (Bildgröße: 58 mal 58 Pixel) sowie einen Startbildschirm (Bild im Format 320 mal 460 Pixel) hinzufügt, der zuerst angezeigt wird, wenn die anderen Daten bereits geladen werden.

Eine Web App hat den Nachteil, dass sie stets auf eine Internet-Verbindung angewiesen ist. Dafür umgeht man aber die Hürde der Apple-Prüfung für den App Store. Wer etwas für die Verbreitung der eigenen App tun will, kann sie aber auch als Web App bei Apple anmelden.

Das iWebkit bietet auch eine Reihe von HTML-Formularen an, etwa Eingabefelder für die Anmeldung mit Passwort, Checkboxen und Dropdown-Karussels, die man mit dem Finger durchblättern kann. Was fehlt, sind die JavaScript-Eventhandler, um etwa bei der Auswahl eines Listeneintrags eine bestimmte Aktion auszuführen.

Bei der JavaScript-Unterstützung zeigen andere Frameworks für die Entwicklung mobiler Anwendungen ihre Stärken, etwa Cappuccino, das bereits Anwendungen mit der Leistungsstärke von Desktop-Programmen ermöglicht. Als vergleichbare Alternativen zum iWebKit bieten sich das iPhone User Interface Framework, kurz iui, und das auf jQuery beruhende JQTouch an.

Posted in Im Lauf der Zeit | Tagged | Leave a comment