jQuery Mobile – write less, do more – Teil 1

Bild_Artikel_2

Die Blogreihe jQuery Mobile – write less, do more stellt das Framework jQuery Mobile vor – ein Framework, das sich zur Erstellung von technischer Dokumentation für mobile Endgeräte eignet. Der erste Teil der Blogreihe informiert allgemein über das Framework und dessen Eigenschaften.

Grundlagen

Wenn du bisher noch keine Erfahrung mit jQuery Mobile sammeln konntest, ist dieser Artikel ein guter Einstieg. Er zeigt den grundsätzlichen Aufbau des Frameworks und nennt einige Eigenschaften, die für die Arbeit mit jQuery Mobile wichtig sind.

Was ist jQuery Mobile?

jQuery Mobile ist ein Framework, das eine relativ einfache Erstellung einer Web-App ermöglicht. Das Framework kann als Baukasten verstanden werden, der alle nötigen Werkzeuge enthält, um schnell die Grundstruktur einer Web-App aufzubauen. Die Grundstruktur setzt sich zusammen aus:

  • Header (Kopfzeile)
  • Content (Inhaltsbereich)
  • Footer (Fußzeile)

 

JQM Standardaufbau

 

Neben der Grundstruktur lassen sich mit jQuery Mobile typische Funktionen und Elemente einer Web-App umsetzen, dazu zählen bspw.:

  • Transitions (animierte Seitenübergänge)
  • Buttons (Schaltflächen)
  • Navbars (Navigationsleisten)
  • Toolbars (Symbolleisten)

Die Abbildung zeigt Buttons sowie eine Navbar im Header-Bereich.

 

JQM Navbar und Buttons

 

Alle Elemente und Funktionen, also das gesamte Layout, ist durch jQuery Mobile für mobile Endgeräte optimiert und passt sich entsprechend der Größe und der Ausrichtung des mobilen Endgeräts an (Stichwort responsive). Die nachfolgende Abbildung zeigt die Anpassung. Der Header und Footer sowie der Content-Bereich mit den Buttons passen sich beim Drehen des mobilen Endgeräts an die neue Breite an.

JQM_whipped_WP

Wie werden Web-Apps mit jQuery Mobile erstellt?

jQuery Mobile basiert auf HTML5, CSS3 und JavaScript – die Erstellung einer Web-App erfolgt also in einem HTML-Editor. Wer die Grundlagen in HTML, CSS und JavaScript beherrscht, erzielt nach kurzer Einarbeitung in jQuery Mobile sehr schnell ansehnliche Ergebnisse. Von großem Vorteil ist die vereinfachte JavaScript-Programmierung, die jQuery Mobile ermöglicht.

Was bedeutet vereinfacht? jQuery Mobile stellt eine umfangreiche JavaScript-Bibliothek zur Verfügung, in der sämtliche Funktionen bereits programmiert sind. Zu Funktionen zählen bspw. Elemente wie Texte oder Grafiken ein- und ausblenden oder animieren. Über eine sehr simple JavaScript-Syntax werden die Funktionen, die in der JavaScript-Bibliothek hinterlegt sind, aufgerufen.

Wo liegen die Stärken von jQuery Mobile?

  • Typische Elemente und Funktionen einer Web-App sind bereits vorhanden und können schnell programmiert werden.
  • Vereinfachte JavaScript-Syntax ist leicht verständlich und umsetzbar.
  • Basiert auf HTML5, CSS3 und JavaScript und kann dadurch auf jedem mobilen Endgerät dargestellt werden.
  • Keine native Programmierung für verschiedene Betriebssystem notwendig.
  • Kurzer Entwicklungszeitraum für die Erstellung einer Web-App.

Warum sich jQuery Mobile speziell für die Erstellung mobiler technischer Dokumentation eignet, erfahrt Ihr bald.

Quelle: jQuery Mobile | w3schools

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.