Web-Programmierung HTML5-Apps für's Smartphone 19.12.2017 Thomas Perschke
Heute Mobile Designprinzipien Design in der Praxis Erkennung von Browsern CSS- und Javascript-Frameworks JQueryMobile Aufgabe 19.12.2017
Mobile Designprinzipien Herausforderungen Bildschirm ist wesentlich kleiner Bedienung erfolgt mit dem Finger Texteingabe teils mühsam Internetzugang nicht beständig schnell Daher: Nicht alle Inhalte eigenen sich für eine mobile Nutzung: große Grafiken, extrem lange Texte → angepasste Inhalte Minimierung der Texteingabe, sinnvolle Vorbelegung Vermeidung von komplexen Formularen Schaltflächen großzügig bemessen 19.12.2017
Typisches Design in der Praxis <html> <head> <title>Oldtimer Spiering</title> </head> <body> <div id="kopfbereich"> <h1>Testseite</h1> <h2>Dies ist eine Testseite</h2> <p>Eine Seite, die nur zum Testen dient</p> </div> <div id="navigation"> <ul> <li>Menüpunkt 1</li> <li>Menüpunkt 2</li> <li>Menüpunkt 3</li> <li>Menüpunkt 4</li> <li>Menüpunkt 5</li> </ul> <div id="inhalt"> <p>Heute schon gefreut?</p> <img src="s.jpg" alt="Yeah" /> <div id="kontakt"> Mustermann Max, Berlin </body> </html> computer.css mobile.css 19.12.2017
Weiter Möglichkeiten: Erkennung von Browsern <link rel="stylesheet" type="text/css" media="screen and (min-width: 481px)" href="computer.css"> <link rel="stylesheet" type="text/css" media="screen and (max-width: 480px)" href="mobile.css"> all aural braille handheld print screen tv ... Besser: User-Agent abfragen <script type="text/javascript"> if(navigator.userAgent.match(/iPhone/)){ window.location = "http://m.meineSeite.de"; } </script> Weiter Möglichkeiten: .htaccess PHP 19.12.2017
CSS- und JavaScript-Frameworks Vorteile: Die sogenannten Frameworks nehmen in der Regel viel Arbeit ab. Sie brauchen nicht wie im vorangegangenen Beispiel jede Zeile CSS neu erfinden, sondern verwenden einfach die CSS-Datei und die Bilddateien, die mit dem Framework geliefert werden. Das Aussehen einer Titelzeile, eines iPhone-Buttons oder der iPhone-Schieberegler wird komplett vom Framework bestimmt. Unterschiede zwischen den Browsern werden vom Framework vereinheitlicht Nachteile: Höhere Ladezeit für die Seite, da mehr Code hinterlegt ist Namen der Selektoren und CSS-Klassen sind teilweise vorbestimmt 19.12.2017
JQueryMobile cross-platform, cross- device Framework Optimierte Layouts und Bedienelemente für die Touch-Bedienung Unterschiedliche Themes Unterstützung der iPhone-spezifischen Animationen Basiert auf jQuery 19.12.2017
JQueryMobile einbinden Um jQueryMobile zu benutzen müssen die zugehörigen Javascript-Bibliotheken und die CSS-Definitionen eingebunden werden. Diese stehen zum Download bereit unter: http://docs.jquery.com/Downloading_jQuery http://jquerymobile.com/download/ 19.12.2017
JQueryMobile - Seitenaufbau Über das Attribut „data-role“ werden die „Rollen“ der einzelnen Bereich festgelegt. Eine Seite besteht aus den Bereichen: Titel (data-role=“header“) Inhalt (data-role=“content“) Fusszeile (data-role=“footer“) 19.12.2017
JQueryMobile - Seitenaufbau Über das Attribut „data-role“ werden die „Rollen“ der einzelnen Bereich festgelegt. Eine Seite besteht aus den Bereichen: Titel (data-role=“header“) Inhalt (data-role=“content“) Fusszeile (data-role=“footer“) 19.12.2017
JQueryMobile – mehrere Seiten (intern) In einem HTML-Dokument können mehrere Seiten definiert werden. Jede Seite muss dabei über eine eindeutige ID verfügen. Der aufrufenden URL muss dann die ID der anzuzeigenden Seite als Marker mitgegeben werden: .../index.html#s1 <body> <!-- Start der ersten Seite --> <div data-role="page" id="s1"> […] <div data-role="content"> <p>Hier geht’s zur <a href="#s2">Seite 2</a> </p> </div> [...] </div><!-- Ende der ersten Seite --> <!-- Start der zweiten Seite --> <div data-role="page" id="s2"> </div><!-- Ende der zweiten Seite → </body> 19.12.2017
JQueryMobile – Seitenübergänge JQueryMobile stellt sechs Animationen für Seitenübergänge bereit: slide, slideup, slidedown, pop, fade, flip. Durch das Hinzufügen eines „data-transition"-Attributs bei einem Verweis, wird die Art des Übergangs festgelegt. Möchte man die Animation in entgegengesetzter Richtung ausführen, muss man den Verweis um das Attribut data- direction="reverse" ergänzen. Beispiel: <p> Hier geht's zur <a href="#s2" data-transition="flip">Seite 2</a> </p> 19.12.2017
JQueryMobile – Back-Button JQueryMobile hat eine Funktion, die den Zurück-Knopf automatisch im Header-Bereich hinzufügen kann. Ergänzen Sie dazu das page- div um das Attribut data-add-back-btn="true" Jeder Verweis, der über das Attribut data-rel="back" verfügt, verhält sich wie ein Zurück-Knopf Beispiel: <div data-role="page" id="s2" data-add-back-btn="true"> 19.12.2017
JQueryMobile – Seite als Dialog Jede Seite kann auch als modaler Dialog dargestellt werden. Hierzu ist dem Verweis lediglich das Attribut data-rel="dialog" hinzuzufügen. Dialoge werden mit einem zusätzlichen Rand, einem dunklen Hintergrund und einem Schließe-Knopf dargestellt. Dialoge können auch animiert eingeblendet werden. Folgende Animationen bieten sich üblicherweise an: pop, slideup, flip. Beispiel: <a href="achtung.html" data-rel="dialog">Dialog öffnen</a> 19.12.2017
JQueryMobile – Seite als Dialog Jede Seite kann auch als modaler Dialog dargestellt werden. Hierzu ist dem Verweis lediglich das Attribut data-rel="dialog" hinzuzufügen. Dialoge werden mit einem zusätzlichen Rand, einem dunklen Hintergrund und einem Schließe-Knopf dargestellt. Dialoge können auch animiert eingeblendet werden. Folgende Animationen bieten sich üblicherweise an: pop, slideup, flip. Beispiel: <a href="achtung.html" data-rel="dialog">Dialog öffnen</a> 19.12.2017
JQueryMobile – Verweise als Liste Verweise zur Navigation werden auf Smartphone-Anwendungen oft als Liste dargestellt. JQueryMobil bietet eine große Zahl unterschiedlicher Listen an. Listen werden über die Tags <ul> (unordered list) und <ol> (ordered list) eingeleitet. Jeder Listeneintrag wird durch das Tag <li> angezeigt. Um das typische Smartphone-Aussehen zu erreichen, muss der <ul>-Tag um ein Attribut „data-role“ mit dem Wert „listview“ ergänzt werden. Beispiel: <ul data-role="listview"> <li><a href="seite2.html">Zur Seite 2</a></li> <li><a href="seite3.html">Zur Seite 1</a></li> </ul> 19.12.2017
JQueryMobile – Verweise als Liste Verweise zur Navigation werden auf Smartphone-Anwendungen oft als Liste dargestellt. JQueryMobil bietet eine große Zahl unterschiedlicher Listen an. Listen werden über die Tags <ul> (unordered list) und <ol> (ordered list) eingeleitet. Jeder Listeneintrag wird durch das Tag <li> angezeigt. Um das typische Smartphone-Aussehen zu erreichen, muss der <ul>-Tag um ein Attribut „data-role“ mit dem Wert „listview“ ergänzt werden. Beispiel: <ul data-role="listview"> <li><a href="seite2.html">Zur Seite 2</a></li> <li><a href="seite3.html">Zur Seite 1</a></li> </ul> 19.12.2017
JQueryMobile – Themen JQueryMobile stellt mehrere Themen zur Verfügung, die sich in der Grundfarbe unterschieden: Um ein neues Farbschema auf die ganze Seiten anzuwenden, muss der Definition der Seite ein Attribut "data-theme" hinzugefügt werden. Das Attribut kann die Werte „a“, „b“, „c“, „d“ oder „e“ annehmen. Prinzipiell kann dieses Attribut auch allen anderen Seitenbereichen zugeordnet werden. Beispiel: <div data-role="page" id="s1" data-theme="e"> 19.12.2017
JQueryMobile – Themen JQueryMobile stellt mehrere Themen zur Verfügung, die sich in der Grundfarbe unterschieden: Um ein neues Farbschema auf die ganze Seiten anzuwenden, muss der Definition der Seite ein Attribut "data-theme" hinzugefügt werden. Das Attribut kann die Werte „A“, „B“, „C“, „D“ oder „E“ annehmen. Prinzipiell kann dieses Attribut auch allen anderen Seitenbereichen zugeordnet werden. Beispiel: <div data-role="page" id="s1" data-theme="e"> 19.12.2017
JQueryMobile – Aufgabe 1 Erstellen Sie eine mobile Einstiegsseite mit dem Titel „Meine erste Seite“, dem Inhalt „Number one“ und der Fusszeile „Numero uno“. Erstellen Sie innerhalb der Einstiegsseite eine zweite und eine dritte Seite mit den Seitentitel „Meine zweite Seite“ bzw. „Meine dritte Seite“, den Inhalten „Number two“ bzw. „Number three“ und den Fusszeilen „Numero due“ bzw. „Numero tre“. Ergänzen Sie die Einstiegsseite um Verweise auf die beiden neuen Seiten. Nutzen Sie eine „unordered list“. Die dritte Seite soll dabei als Dialog dargestellt werden. Auch von der Seite zwei soll die Seite drei erreichbar sein. Nutzen Sie geeignete Animationen für die Seitenübergänge. Ändern Sie das Farbschema für die einzelnen Seiten. 19.12.2017
JQueryMobile – Positionierung von Kopf- und Fußzeile Normalerweise werden die Kopf- und Fußzeile „inline“ angezeigt, d.h. sie fügen sich, wie jedes andere HTML-Element, in den Dokumentenfluss. Dies hat beispielsweise zur Folge, dass die Fußzeile nicht am unteren Rand des sichtbaren Bereichs, sondern am Ende des Dokuments dargestellt wird. Durch das Hinzufügen des Attributs data-position=“fixed“ kann dieses Verhalten geändert werden. Die Fußzeile wird dann am Ende des sichtbaren Bereichs positioniert, unabhängig der Länge des Dokumentes. <div data-role="footer" data-position="fixed"> 19.12.2017
Aufgabe: GoogleMaps für's Handy Modifizieren Sie die Seite 2 so, dass ein Formular zur Anzeige einer GoogleMaps-Karte erscheint. Der Anwender kann die Adresse, die Vergrößerungsstufe und den Kartentyp auswählen. Über eine Option „Fullscreen“ kann der Anwender entscheiden, ob die Karte ohne Steuerkomponenten und bildschirmfüllend dargestellt werden soll (Parameter output=svembed). Orientieren Sie sich beim Entwurf der Seite an nebenstehender Abbildung. (Alternative: Stellen Sie die angeforderte Karte auf der gleichen Seite dar) Hilfreiche Informationen finden Sie auf der Seite „http://www.jquerymobile.com“ → „Docs und Demos“. Textfeld Slider Radio buttons Checkbox 19.12.2017