Präsentation herunterladen
Die Präsentation wird geladen. Bitte warten
1
Web-Programmierung HTML5-Apps für's Smartphone 19.12.2017
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> <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
5
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 = " } </script> Weiter Möglichkeiten: .htaccess PHP
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, cross- device 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)
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>
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 data- direction="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-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">
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
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.
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. (Alternative: Stellen Sie die angeforderte Karte auf der gleichen Seite dar) Hilfreiche Informationen finden Sie auf der Seite „ → „Docs und Demos“. Textfeld Slider Radio buttons Checkbox
Ähnliche Präsentationen
