1 Web-Programmierung HTML5-Apps für's Smartphone 19.12.2017Thomas Perschke
2 Heute Mobile Designprinzipien Design in der PraxisErkennung von Browsern CSS- und Javascript-Frameworks JQueryMobile Aufgabe
3 Mobile DesignprinzipienHerausforderungen 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 Eine Seite, die nur zum Testen dient Heute schon gefreut? 5 Weiter Möglichkeiten:Erkennung von Browsern all aural braille handheld print screen tv ... Besser: User-Agent abfragen Weiter Möglichkeiten: .htaccess PHP { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://slideplayer.org/12310669/73/images/5/Weiter+M%C3%B6glichkeiten%3A.jpg", "name": "Weiter Möglichkeiten:", "description": "Erkennung von Browsern. all. aural. braille. handheld. print. screen. tv. ... Besser: User-Agent abfragen. if(navigator.userAgent.match(/iPhone/)){ window.location = http://m.meineSeite.de ; } Weiter Möglichkeiten: .htaccess. PHP. 19.12.2017.", "width": "1024" } 6 CSS- und JavaScript-FrameworksVorteile: 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 FrameworkOptimierte Layouts und Bedienelemente für die Touch-Bedienung Unterschiedliche Themes Unterstützung der iPhone-spezifischen Animationen Basiert auf jQuery 8 JQueryMobile einbindenUm 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 Testseite
Dies ist eine Testseite
Mustermann Max, Berlin computer.css mobile.css