2 Heute Mobile Designprinzipien Design in der PraxisErkennung von BrowsernCSS- und Javascript-FrameworksJQueryMobileAufgabe
3 Mobile DesignprinzipienHerausforderungenBildschirm ist wesentlich kleinerBedienung erfolgt mit dem FingerTexteingabe teils mühsamInternetzugang nicht beständig schnellDaher:Nicht alle Inhalte eigenen sich für eine mobile Nutzung: große Grafiken, extrem lange Texte → angepasste InhalteMinimierung der Texteingabe, sinnvolle VorbelegungVermeidung von komplexen FormularenSchaltflächen großzügig bemessen
4 Typisches Design in der Praxis Oldtimer Spiering
Testseite
Dies ist eine Testseite
Eine Seite, die nur zum Testen dient
Menüpunkt 1
Menüpunkt 2
Menüpunkt 3
Menüpunkt 4
Menüpunkt 5
Heute schon gefreut?
Mustermann Max, Berlincomputer.cssmobile.css
5 Weiter Möglichkeiten:Erkennung von Browsernallauralbraillehandheldprintscreentv...Besser: User-Agent abfragenif(navigator.userAgent.match(/iPhone/)){window.location = "http://m.meineSeite.de";}Weiter Möglichkeiten:.htaccessPHP { "@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 vereinheitlichtNachteile:Höhere Ladezeit für die Seite, da mehr Code hinterlegt istNamen der Selektoren und CSS-Klassen sind teilweise vorbestimmt
7 JQueryMobile cross-platform, cross- device FrameworkOptimierte Layouts und Bedienelemente für die Touch-BedienungUnterschiedliche ThemesUnterstützung der iPhone-spezifischen AnimationenBasiert 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