HTML Grundgerüst mit jQuery für mobile Web Anwendung

Veröffenticht am 23.12.2015    von     in der Kategorie Temperatur WebApp     bisher 1 Reaktion


HTML Gerüst für mobile AnwendungDas für eine mobile WebApp notwendige HTML Grundgerüst und die Einbindung des jQuery Frameworks möchte ich dir anhand dieses Beitrags zeigen. Dieser baut auf den Beitrag “Mobile WebApp für die Temperaturmessung am Raspberry Pi” auf. Bei dieser Web Anwendung handelt es sich nicht um eine Website in spezieller mobiler Ansicht, sondern um eine mobile Webanwendung.


Für die Beitragsreihe, deren Einleitung du im Beitrag “Mobile WebApp für die Temperaturmessung am Raspberry Pi” findest, habe ich folgendes Video mit ca. 57 Minuten erstellt. In diesem erkläre ich das Zusammenspiel und die Funktionen der beiden Programme.

 

 

Das HTML Grundgerüst

Die Grundlage der WebApp bildet ein einfaches und gewöhnliches HTML-Dokument. Diese wird in den gewünschten Pfad deines Webservers auf dem Raspberry Pi abgelegt. In meinem Beispiel habe ich diese messung.html genannt um im Hauptverzeichnis /var/www abgelegt.

Seit HTML5 hat sich die Deklaration des Dokumenttyps vereinfacht und es reicht nun ein <!doctype html> aus. Mit <html lang=”de-DE”> teilen wir dem Browser den Anfang einer HTML-Codierten-Seite mit. Das lang Attribute teilt mit, dass es sich dabei um eine deutschsprachige Webseite handelt. Danach folgt der Dokumentenkopf <head></head> und der Dokumentenkörper <body></body>. Das Seitenende wird mit </html> beschrieben.

 

Der Dokumentenkopf

In den Dokumentenkopf, also in den Head-Bereich gehören die <meta> Angaben für die Webseite.  In diesem Fall findest du dort im Moment nur die Angabe der Zeichencodierung. Des Weiteren gehören neben dem Webseiten Titel noch die im späteren Verlauf der Beitragsreihe und diesem Beitrag erklärten CSS- und JS-Scripte. Der Webseiten Titel hat nichts mit dem Dateinamen oder der in anderen Fällen vorkommenden Domain zu tun. Der Titel bzw. das <title> Tag ist die Bezeichnung oder evtl. inhaltliche Überschrift der Seite. Diese wird im Browser-Reiter angezeigt. In diesem Fall Temperaturmessung.

 

Der Dokumentenkörper

In den Dokumentenkörper, also in den Body-Bereich gehört die Beschreibung des Seiteninhaltes. Und nun kommen wir zu einer Besonderheit. Normalerweise soll der Seiteninhalt im HTML5 Standard in thematische Bereiche <section></section> gruppiert werden. Neben der Navigation findet man dort dann den Kopf, den Inhalt und den Fussbereich. Da wir allerdings nicht eine Webseite anzeigen lassen wollen, sondern eine mobile Web-Anwendung erstellen, greifen wir auf das jQuery Framework zurück. Dieses ermöglicht die Erstellung mehrerer Webseiten in einer Datei. Im Programmcode findest du daher die einzelnen DIV-Container mit der Bezeichnung (ID) page1, page2 und page3.

 

Die einzelnen Seiten

Die einzelnen Seiten, im DIV-Container mit der entsprechenden ID, sind mit drei weiteren DIV-Containern unterteilt. Diese werden mit dem Attribute data-role gekennzeichnet und bestimmen die Rolle des Bereiches für das Framework. Das Attribute data-position=”fixed” gibt an, dass die Bereiche auf dem Display fest fixiert sind und nicht gescrollt werden. Solltest du zum Beispiel den footer-Bereich am Ende des main-Bereiches angezeigt haben wollen, kannst du die data-position entfernen.

 

jQuery Einbindung

Damit deine Anwendung mit dem Framework ausgestattet ist, musst du diese zuerst einmal einbinden. Hierzu fügst du folgende Zeilen in deinen head-Bereich ein.

Wenn du deinen Raspberry Pi nicht im Netz hängen hast, bzw. keinen Zugriff auf das Internet willst, kannst du dir die Daten auch herunterladen und in deinem Verzeichnis speichern und mit folgenden Zeilen im head-Bereich einbinden.

 

mobile Web Anwendung

Damit du die Funktionsweise der Web Anwendung in diesem Stadium überprüfen kannst, ergänze doch einfach den main-Bereich der page1 und page2 mit einem beliebigen Text. Im footer-Bereich von page1 fügst du folgende Verlinkung ein.

In den footer-Bereich von page2 fügst du folgende Verlinkung ein.

Nun kannst du die Datei über deinen Browser aufrufen und zwischen den Seiten wechseln.

Wichtige Anmerkung! Diese Seite funktioniert nur über einen Webserver!  

Es wird dir gleich auffallen, die Seite ist noch nicht an dein Browserfenster bzw. an dein Smartphone angepasst. Diese Anpassung beschreibe ich in dem folgenden Beitrag “Die Viewport Angabe, unerlässlich für die mobile WebApp”.

 

Share on Facebook0Share on Google+0Tweet about this on Twitter0Pin on Pinterest0Share on LinkedIn0



Servus, ich bin Wolfgang.

Blogger – Maker – web & mobile Developer – Dobermann Besitzer.

Mit meinem über die Jahre gesammelten Wissen als Webworker möchte ich dir Hilfestellungen und Anregungen zur Nutzung der sich aus dem digital Lifestyle ergebenden Möglichkeiten und Notwendigkeiten geben.

Einen aktuellen Schwerpunkt auf meinem Blog bildet das Thema IoT im Zusammenspiel mit dem Raspberry Pi.


Hinterlasse einen Kommentar

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

Eine Reaktion (0 Kommentare)