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

Veröffenticht am 23.12.2015    von     in der Kategorie Temperatur WebApp     bisher 7 Reaktionen    Zuletzt überarbeitet am 21.02.2017


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”.

 



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.


Unterstützen

Dieser Beitrag hat dir gefallen und konnte dir bei deinem Projekt oder Problem behilflich sein? Dann würde ich mich sehr freuen, wenn du dich mit einer noch so kleinen Spende erkenntlich zeigen möchtest.


Hinterlasse einen Kommentar

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

7 Reaktionen (6 Kommentare)

  • Michael Schneider schrieb am 5. April 2018:

    Hallo Wolfgang
    ich Hab mal den Quellcode abgeändert auf Time 60 secunden messintervall
    Und den Interfall nicht als Zahl sonder dahinter Open eingesetzt jetzt misst er mir kontinuierlich ohne Unterbrechung jede Minute die Messwerte aus.
    Das mit Datum und Uhrzeit müsste theoretisch auch machbar sein. Bloß die Frage wie der Quellcode heißen muß Time Date und woher er diese variabel bekommt aus dem Web oder system Zeit Uhr. Gerne möchte ich einen dht22 bzw. den AM2302 und den DS18B20 Auf eine Platine löten diese über eine Zuleitung 3,3V Mit dem PI versorgen. Und 2 Wire Ine Bus Leitungen Legen gpio x1 gpio x2 und 2x 4,7k Ohm wiederstände auf die Platine zwischen Pin 1u d3 des DS18B20 u d beim AM2302 zwischen Pin 1 und 2 löten Somit könnte ich über ein 4 oder 8 adriges Vernmelde atelefonkabel das ganze anschließen Gruß Michael.

    • Wolfgang schrieb am 6. April 2018:

      Hallo Michael,
      es freut mich, dass dein Projekt fortschritte macht. 🙂
      Der Befehl zur Auslesung der Systemzeit findest du im messprogramm.py in folgender Funktion:
      def aktuelleSystemZeit():
      zeitpunktMessung = time.localtime()
      jahr, monat, tag = zeitpunktMessung[0:3]
      stunde, minute, sekunde = zeitpunktMessung[3:6]
      systemUhrzeit = str(stunde) + “:” + str(minute) + “:” + str(sekunde)
      systemDatum = str(tag) + “.” + str(monat) + “.” + str(jahr)
      return(systemDatum, systemUhrzeit, zeitpunktMessung)

      Die Zeit kommt vom System, welche Linux mit dem Web abgleicht.

      Das Telefonkabel ist eine gute Lösung zur Verbindung bzw. Auslesung deiner Sensoren gut geeignet.
      Viele Grüße
      Wolfgang

  • Michael Schneider schrieb am 2. April 2018:

    Guten Abend Folgende Frage zur Aufzeichnung mit dem Temperatur Sensor.
    Wie Lauter der befehlt für ein endlos Messung?
    Gruß Michael

    PS ich finde deine Website klasse deine Erklärungen sehr detailliert und sehr verständlich.

  • Adi schrieb am 4. März 2018:

    Guten Tag,
    Ich bin sehr interessiert an ihrem Projekt, es wäre sehr nett, wenn sie mir die dazugehörige style.css Datei zukommen lassen könnten.

    Mfg,
    Adi

    • Wolfgang schrieb am 5. März 2018:

      Hallo,
      eine eigene CSS-Datei habe ich für dieses Projekt nicht angelegt. Es wird die CSS-Bibliothek von jQuery verwendet.
      Diese wird im Quellcode eingebunden über . Um diese offline zu erhalten, öffnest du die Adresse http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css im Browser und kopierst den Inhalt in ein deinen Texteditor und speicherst die Datei entsprechend ab.
      Viele Grüße
      Wolfgang