Mobile Websites mit jQuery Mobile und TYPO3
Bis dato gab es einige User-Interface-Frameworks, die – oftmals auf eine Plattform begrenzt – mit kleinem Aufwand ordentlich aussehende mobile Websites darstellen konnten. Hier ist beispielsweise iUI (iPhone User Interface) [2] oder WebApp.net [3] zu nennen, die die iOS-Plattform bedienen. Mit jQTouch [4] wurde versucht, dies auch auf andere Plattformen auszuweiten – allerdings führte man dies nicht in allen Aspekten konsequent durch.
Eine identische Darstellung von herkömmlichen Websites auf dem iPhone scheitert oft schon an dem zur Verfügung stehenden Platz.
Auch wenn viele Website-Betreiber seit dem iPhone versuchen, herkömmliche Webseiten auf mobilen Endgeräten genau so wie auf dem Desktop darzustellen, funktioniert dies nur bedingt – die Displays sind hierfür schlicht zu klein. Davon abgesehen ist eine identische Darstellung auch selten sinnvoll, da sich die mobile Nutzung weitestgehend vom Surfen am Desktop unterscheidet. Man will schnell die wichtigsten Informationen über eine Firma, ein Produkt oder eine Dienstleistung, ohne sich die Finger zu brechen oder sich eine neue Brille kaufen zu müssen.
So kam das jQuery-Team im August 2010 auf die Idee, ihr sehr erfolgreiches JavaScript-Framework speziell für die mobile Welt anzupassen und dabei sämtliche relevanten Endgeräte so zu adressieren, dass ein sinnvolles und ansprechendes User-Interface gewährleistet ist und dieses vor allem auf allen unterstützten Endgeräten identisch aussieht. Der Name für diese Framework-Erweiterung war schnell gefunden – jQuery Mobile.
Am 16.10.2010 erschien die erste voll einsatzfähige Version (zunächst noch als Alpha). Besonders zukunftsweisend ist bei diesem Projekt, dass es mit der Unterstützung von nahezu jedem Hersteller mobiler Endgeräte gestartet ist. Dieser Aspekt ist für eine identische Lauffähigkeit auf allen Geräten von großer Bedeutung.
Erste Schritte mit jQuery Mobile
Im ersten Schritt gilt es, das jQuery-Mobile-Framework herunterzuladen und zu entpacken. Die Dateien gehören in einen Ordner unterhalb des Verzeichnisses „fileadmin/“ der TYPO3-Instanz (für das Beispiel kommt das Verzeichnis „fileadmin/site/mobile/“ zum Einsatz). Das Archiv enthält neben den JavaScript-Dateien auch die benötigten Stylesheets und Bilder im Unterordner „images/“.
<!DOCTYPE html> <html> <head> <title>Seitentitel</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> <script xsrc="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script xsrc="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Seitentitel</h1> </div><!-- /header --> <div data-role="content"> <p>Hier wird der Inhalt erscheinen.</p> </div><!-- /content --> <div data-role="footer"> <h4>Footer</h4> </div><!-- /header --> </div><!-- /page --> </body> </html>
Listing 1
Das exemplarische Seiten-Template in Listing 1 greift im Header auf die Möglichkeit zurück, die benötigten JavaScript- und CSS-Dateien über das CDN zu laden. Ob man dies nutzt, bleibt jedem selbst überlassen. Für das Beispiel werden die Dateien später lokal verlinkt.
Im Template wird auch der grundsätzliche Aufbau von jQuery Mobile sichtbar. Die Organisationseinheit einer „Seite“ legt man mit dem HTML5-Attribut „data-role=“page““ fest. Dort enthalten sind zunächst drei Elemente: ein Header (data-role=“header“), ein Inhaltsbereich (data-role=“content“) und ein Footer (data-role=“footer“).
Letztlich sind mehrere Seiten innerhalb eines Dokuments möglich, die über einen Anker-Link angesprungen werden. Das bedeutet allerdings, dass es (zumindest momentan) keine normalen Anker-Links gibt. Normale Seiten kann man mit einem klassischen Link anspringen – lediglich den Inhalt lädt man vorab per AJAX, um eine Animation der Seite einerseits und eine Ladegrafik während des Ladens andererseits anzuzeigen.