jQuery Mobile

jQuery Mobile

jQuery Mobile zeichnet sich durch die Unterstützung für eine breit gefächerte Auswahl an Geräten, für die es touch-optimierte mobile Web-Apps auf Basis von HTML5, CSS und Javascript mit einer plattformübergreifend einheitlichen UI erzeugen kann.

jQuery Mobile basiert auf der beliebten Javascript-Bibliothek jQuery und der zugehörigen UI-Bibliothek jQuery UI. Zwar lässt sich bereits auch reines jQuery in gewissen Grenzen für bestimmte mobile Aufgaben einspannen, doch jQuery Mobile bietet einen weitaus umfassenderen Funktionsumfang für die Entwicklung mobiler Webapplikationen. jQuery Mobile gilt derzeit als der Goldstandard in diesem Bereich.Mit jQuery Mobile lassen sich Webapplikationen unabhängig vom verwendeten Endgerät mit einemr einheitlichen UI erzeugen. Der Entwickler braucht sich so nicht mit den Besonderheiten der einzelnen Geräte und deren jeweiligen Spezifikationen zu befassen. Einen detaillierten Überblick über die aktuelle Plattformkompatibilität von jQuery Mobile können Sie sich jederzeit verschaffen, indem Sie die sogenannten Graded Browser Matrix zu Rate ziehen: www.jquerymobile.com/gbs/ Die Bewertung der Kompatibilität erfolgt anhand des US-Schulnotensystems. "A-grade" entspricht hier der deutschen Note "Sehr gut". Plattformen, für die jQuery Mobile die umfassendste Unterstützung bietet, also einschließlich der Ajax-animierten Seitenübergänge, tragen die Bezeichnung "A-grade". Sowohl iOS 5 als auch Android 2.3 gehören in diese Kategorie.Für die Gestaltung von Web-Apps mit jQuery UI greift man auf Themes zurück, um spezielle CSS3-Eigenschaften wie abgerundete Ecken, Textschatten und Farbverläufe sowie Symbolbibliotheken einfach nutzen zu können. Entscheidend für den effektiven Einsatz der Themes ist die strikte Trennung von Inhalt und Layout. Jedes Theme umfasst bei jQuery Mobile mehrere globale Einstellungen für Schriftart, Schatteneffekte und Eigenschaften der Schaltflächen. Das Aktivieren der einzelnen Themes gelingt durch die Zuweisung des zugehörigen Buchstabens (a bis e) zum data-theme-Attribut des betreffenden Elementes, zum Beispiel:

Symbole bindet man über die Attribute data-icon und data-role mit den passenden Werten ein, zum Beispiel:

jQuery Mobile unterstützt auch die Erstellung von Webformularen, die für Mobilgeräte optimiert wurden, von simplen Suchfeldern über spezielle Radiobuttons, Ein- und Ausschalter, Schieberegler - das mit HTML5 eingeführte range-Eingabefeld macht es möglich - bis hin zu komplexen Auswahlmenüs. So lässt sich beispielsweise ein simples Zustandsfeld realisieren:

jQuery Mobile zeigt zusätzlich zum Schieberegler ein Feld an, in dem der aktuell eingestellte Wert zu sehen ist:

Die Attribute min und max geben jeweils den niedrigsten und den höchsten Wert aus dem zulässigen Bereich vor.Mit jQuery Mobile können Sie im Übrigen Funktionen wie das E-Mail-Programm und die Telefonanwendung auf dem Endgerät ansprechen, indem Sie etwa E-Mail-Adressen und Telefonnummern korrekt auszeichnen. Das betreffende OS sollte dann die passende Funktionalität bereitstellen und beispielsweise das Standard- E-Mail-Standard-Programm starten oder die betreffende Telefonnummer wählen.Die breite Akzeptanz der klassischen jQuery-Bibliothek in der Gemeinde der Webentwickler und nicht zuletzt die starke Verbreitung von jQuery-Programmierkenntnissen haben den Weg für den Erfolg von jQTouch und jQuery Mobile geebnet.Als Benutzer von Dreamweaver CS5.5 können können Sie Websites und Web-Apps auf Basis von jQuery Mobile im Übrigen direkt in ihrem Webeditor bearbeiten.Hierzu wählen Sie einfach beim Erstellen einer neuen Website die Option "Mobile Starters" und legen fest, ob Sie mit lokalen Dokumenten arbeiten möchten, ein CDN einsetzen oder Phonegap-Unterstützung benötigen. In all diesen Fällen stehen Ihnen anschließend sowohl codebasierte als auch grafische Werkzeuge von Dreamweaver zur Verfügung.

Phonegap

Phonegap ist ein quelloffenes Framework für die mobile Webentwicklung auf Basis von HTML5, CSS und Javascript. Mit Hilfe von Phonegap können Sie Ihr Know-how dieser Websprachen nutzen, um mobile Apps zu entwickeln, die auf native Features der jeweiligen Zielplattform zugreifen.

Phonegap beinhaltet eine plattformunabhängige Weblaufzeitumgebung, in der sich Webcode unabhängig von der darunterliegenden Hardwareplattform ausführen lässt, und einen API-Stack, mit dem der Code auf hardwarespezifische Funktionen des jeweiligen Geräts zugreifen und native Ereignisse auswerten kann. So bietet Phonegap beispielsweise die Unterstützung für das Accelerometer, den Vibrationsalarm, einen Zugriff auf die Kamera für die Aufnahme von Audio und Video, Geolocation und das Adressbuch mit Kontakten des Benutzers unter dem jeweiligen OS.Auf der Max 2011 hat Adobe Systems überraschenderweise die Übernahme von Nitobi, des Herstellers von Phonegap, bekannt gegeben. Nachdem sich Adobe im Laufe der letzten Jahre an zwei Webkit-Projekten aktiv beteiligt und unter anderem auch die Entwicklung von Phonegap maßgeblich beeinflusst hatte, war es zur Übernahme des Anbieters und der vollen Integration von Phonegap in die Creative Suite-Produktfamilie offenbar nur noch ein kleiner Schritt.