Web-Programmierung. HTML5-Apps für's Smartphone Thomas Perschke

Transkript

1 Web-Programmierung HTML5-Apps für's Smartphone Thomas Perschke

2 Heute Mobile Designprinzipien Design in der Praxis Erkennung von Browsern CSS- und Javascript-Frameworks JQueryMobile Aufgabe

3 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

4 Typisches Design in der Praxis <html> <head> <title>oldtimer Spiering</title> </head> <body> computer.css <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> <div id="inhalt"> <p>heute schon gefreut?</p> <img src="s.jpg" alt="yeah" /> </div> <div id="kontakt"> Mustermann Max, Berlin </div> mobile.css </body> </html>

5 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"> Besser: User-Agent abfragen <script type="text/javascript"> if(navigator.useragent.match(/iphone/)){ } window.location = " </script> Weiter Möglichkeiten:.htaccess PHP all aural braille handheld print screen tv...

6 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

7 JQueryMobile cross-platform, crossdevice Framework Optimierte Layouts und Bedienelemente für die Touch-Bedienung Unterschiedliche Themes Unterstützung der iphone-spezifischen Animationen Basiert auf jquery

8 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:

9 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 )

10 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 )

11 JQueryMobile mehrere Seiten (intern) <body>  <div data-role="page" id="s1"> [ ] <div data-role="content"> <p>hier geht s zur <a href="#s2">seite 2</a> </p> </div> [...] </div> 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  <div data-role="page" id="s2"> [...] </div><!-- Ende der zweiten Seite </body>

12 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 datadirection="reverse" ergänzen. Beispiel: <p> Hier geht's zur <a href="#s2" data-transition="flip">seite 2</a> </p>

13 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-backbtn="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">

14 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>

15 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>

16 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>

17 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>

18 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 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">

20 JQueryMobile Aufgabe 1 1. Erstellen Sie eine mobile Einstiegsseite mit dem Titel Meine erste Seite, dem Inhalt Number one und der Fusszeile Numero uno. 2. 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. 3. 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. 4. Ändern Sie das Farbschema für die einzelnen Seiten.

21 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">

22 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. Textfeld Slider Radio buttons Checkbox (Alternative: Stellen Sie die angeforderte Karte auf der gleichen Seite dar) Hilfreiche Informationen finden Sie auf der Seite Docs und Demos.