SEITEN

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

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

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

<!doctype html> 
<html lang="de-DE"> 
<head> 

    <meta charset="utf-8">

    <title>Temperaturmessung</title>

</head>
    
<body> 
    
    <div data-role="page" id="page1">
        <div data-role="header" data-position="fixed">
           
        </div>
        <div data-role="main" class="ui-content">          
            
        </div>
        <div data-role="footer" data-position="fixed" class="footer">
           
        </div>
    </div> 

    <div data-role="page" id="page2">
        <div data-role="header" data-position="fixed">
           
        </div>
        <div data-role="main" class="ui-content">
 
        </div>
        <div data-role="footer" data-position="fixed" class="footer">

        </div>
    </div>

    <div data-role="page" id="page3">
        <div data-role="header" data-position="fixed">
           
        </div>
        <div data-role="main" class="ui-content">
 
        </div>
        <div data-role="footer" data-position="fixed" class="footer">

        </div>
    </div>   

</body>
</html>

<!doctype html>

<head>

<title>Temperaturmessung</title>

</head>

<body>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</body>

</html>

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.

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

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.

<link rel="stylesheet" href="jquery.mobile.min.css">
<script src="jquery.min.js"></script>
<script src="jquery.mobile.min.js"></script>

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.

<a href="#page2" data-role="button">Seite2</a>

1	<a href="#page2" data-role="button">Seite2</a>

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

<a href="#page1" data-role="button">Seite1</a>

1	<a href="#page1" data-role="button">Seite1</a>

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

Transparenz-Hinweis:

Die auf dieser Seite verwendeten Produktlinks sind sogenannte Affiliate-Links zu einem Partnerprogramm. Für dich entstehen dadurch keine Mehrkosten, ich erhalte durch deinen Kauf über den Link eine kleine Provision.

Wolfgang Raab – Betreiber von webnist.de

Mein Name ist Wolfgang, ich beschäftige mich nun schon seit 1985 mit der EDV und im Besonderen mit der Software- und Webentwicklung.

Auf diesem Blog schreibe ich über Dinge, die mich begeistern, beschäftigen und ich der Meinung bin, es könnte für andere interessant und hilfreich sein.

Als großer Fan des Raspberry Pi finde ich es spannend, wie man den kleinen Computer in Verbindung mit dem IoT und Smart Home nutzen kann. Deshalb behandeln viele Beiträge auch genau dieses Thema.

Ich bin ein leidenschaftlicher Leser und Fotograf. Wenn ich nicht gerade in einem spannenden Roman versinke, bin ich oft unterwegs, um die Schönheit der Welt mit meiner Kamera einzufangen und zu teilen.

Weitere Infos und Fotos findest du auf einem der folgenden Plattformen.

Mehr erfahren?

Besuche die "About"-Seite meines Blogs und finde heraus, wie du mit mir in den Bereichen Web- und Mobile-Programmierung und Raspberry Pi zusammenarbeiten kannst. Hier beginnt deine digitale Reise.

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.

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.

Antworten

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

Antworten

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.

Antworten

Wolfgang schrieb am 2. April 2018:

Hallo Michael,
der Raspberry Pi misst den Sensor ununterbrochen aus. Du kannst den Wert somit ständig auslesen. Einen direkten Befehl gibt es hierfür nicht. Du kannst die Wertabfrage allerdings in eine Schleife packen, siehe hierzu meine Antwort zu deinem Kommentar in dem Beitrag “Temperatur-Sensor DS1820 am Raspberry Pi mit Python”. Eine andere Möglichkeit vom Aufbau findest du in dem Messprogramm (messprogramm.py) zur WebApp, welche zum Download im Beitrag “Mobile WebApp für die Temperaturmessung am Raspberry Pi” zur Verfügung steht.
Viele Grüße
Wolfgang

Antworten

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

Antworten

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

Antworten

Schreibe einen Kommentar Antworten abbrechen

Kleiner Hinweis, alle Kommentare werden moderiert.

Dies bedeutet, der Kommentar wird vor der Veröffentlichung durchgelesen und von mir geprüft. Auch behalte ich mir vor, jeden Kommentar zu löschen, der nicht direkt auf das Thema abzielt oder nur den Zweck hat, Leser oder Autoren herabzuwürdigen.