vortrag html5, css3, phonegap
DESCRIPTION
Vortrag für die Open Web User Group - Web-Entwicklung für mobile Endgeräte mit HTML5, CSS3 und PhoneGapTRANSCRIPT
Web-Anwendungen für mobile Endgeräte mit HTML5 und Co
René Peinl
26.06.2012
Mobile Web-Entwicklung 2 © 2012 Prof. Dr. René Peinl
Anpassen von Web-Anwendungen für mobil
Alternative 1: Nichts anpassen
Website von vornherein möglichst universell zugreifbar gestalten (z.B. keine Optimierung
auf bestimmte Auflösung, Standardkonformität, kein Flash o.ä., JavaScript nur sparsam)
Alternative 2: Bilder und Styling für Mobilvariante entfernen
Keine Bilder und minimales CSS Styling durch Einsatz eines Proxies
Alternative 3: Handheld CSS einsetzen
CSS Eigenschaft media="handheld" (alt) bzw. media queries einsetzen
Alternative 4: Für Mobilgeräte optimierte Variante entwickeln
Konsequent die Vorteile von Mobilgeräten in die Entwicklung der Webanwendung
einbeziehen
Moll 2007, S.32ff
Mobile Web-Entwicklung 3 © 2012 Prof. Dr. René Peinl
Mobilstrategie
1. Forget what you think you know - Das Glas muss erst leer werden, bevor man es neu füllen kann
2. Believe what you see, not what you read - Glaube keiner Statistik, die Du nicht selbst gefälscht hast
3. Constraints never come first - Nichts ist unmöglich
4. Focus on context, goals and needs - Was will der Benutzer tun? Lass es die App herausfinden!
5. You can‘t support everything - Nicht die verbreitetsten, sondern die Geräte der Zielgruppe
6. Don‘t convert, create - Kein schlechter Abklatsch, sondern eine geniale Neuerfindung
7. Keep it simple - Kein Platz für komplexe Apps auf kleinen Geräten
vgl. Fling 2009, S.59ff
Mobile Web-Entwicklung 4 © 2012 Prof. Dr. René Peinl
Informationsdesign
Welche Informationen sollen präsentiert werden?
z.B. nur die wichtigsten 20% der Information von der normalen Website
Um welche Art von Inhalten handelt es sich?
- Sollen neben den Texten auch Grafiken oder Videos präsentiert werden?
- Wie groß müssen die Grafiken angezeigt werden, damit das wesentliche noch zu
erkennen ist?
Wie viele verschiedene Arten von Informationen sind das?
Ist das für den mobilen Benutzer sinnvoll?
Mobile Web-Entwicklung 5 © 2012 Prof. Dr. René Peinl
Best Practices Bilder & CSS
Bandbreite sparen
Benutzen der sinnvollsten Bildformate: gif, jpg, png / 8, 24, 32 Bit
Vermeiden vieler Roundtrips
- Verschiedene Bilder in eine Datei packen und nur Teile davon darstellen => CSS Sprite
Schrift
- font-family: nur allgemein serif, sans-serif und monospace
- font-size: relative Werte statt absoluter angeben
- Webfonts aber unterstützt seit iOS 4.2 / Android 4
Media Selector vs. Screen Size Selelctor
- media= "handheld"
- media= "screen and min-resolution: 140dpi"
Mobile Web-Entwicklung 6 © 2012 Prof. Dr. René Peinl
Was will ich anpassen?
Mobilgeräte generell
- Einzelne Seite um ältere, kleinere, nicht unterstützte Geräte zu informieren
- Größe der Bilder an Größe des Bildschirms anpassen
(220, 300, 440 Pixel)
- Länge der textuellen Inhalte anpassen (500, 750, 1000 Zeichen)
- AJAX einsetzen, wenn möglich um dynamischere Inhalte zu erlauben
Smartphones speziell
- WebKit CSS Erweiterungen einsetzen
- Größe von Links für Touch-Bedienung anpassen (20px Abstand)
- Zwei Stylesheets für Portrait- und Landscape-Modus
Mobile Web-Entwicklung 7 © 2012 Prof. Dr. René Peinl
Geräteklassen bilden
Geräteidentifizierung über UserAgent String
Device Databases
- deviceatlas.com
- wurfl.sourceforge.net | wurflpro.com
Geräte in Klassen einteilen
- screen size < 320x480
- screen size = 320x480
- screen size > 320x480 && < 1024x600 && resolution > 140dpi
- screen size > 1023
- AJAX enabled | not
Mobile Web-Entwicklung 8 © 2012 Prof. Dr. René Peinl
Vergleich Bildschirmgröße und Punktdichte
siehe auch http://developer.android.com/resources/dashboard/screens.html http://opensignalmaps.com/reports/fragmentation.php
xhdpi / Retina
hdpi
mdpi
small < 3.5 Zoll
normal 3.5 - 4.5 Zoll
large 4.7 - 7.0 Zoll
xlarge > 7.0 Zoll
ldpi < 130 dpi
mdpi 130 - 180 dpi
hdpi 220 - 270 dpi
xhdpi > 300 dpi
Mobile Web-Entwicklung 9 © 2012 Prof. Dr. René Peinl
HTML5 + CSS3 + JavaScript = Mobile Web-App
Mobile Web-Entwicklung 10 © 2012 Prof. Dr. René Peinl
Ausgangsbasis: sauberes XHTML/HTML5
DIV-basierte Layouts, keine Layout-Tabellen
Einsatz semantisch korrekter Container-Elemente (z.B. ul, li, p, h1)
Vermeiden "physischer" HTML Formatierungen (z.B. font, b, i, u)
statt dessen Verwenden der logischen Auszeichnungen
em, strong, cite, code, samp, kbd, dfn, abbr, acronym
Validatoren einsetzen, um syntaktisch korrekten Code sicherzustellen
CSS Formatierungen einsetzen
- Nicht auf Browser-Defaults verlassen, sondern selbst alle Werte explizit setzen
- Balance zwischen Anzahl notwendiger Klassen und Komplexität der CSS Selektoren
Neue HTML5 Elemente verwenden
- header, footer, nav, article, section, aside, summary, figure, progress, meter
siehe auch http://joshduck.com/periodic-table.html
Mobile Web-Entwicklung 11 © 2012 Prof. Dr. René Peinl
HTML5 Übersicht
Mit HTML5 werden einige Programmiermöglichkeiten zur Verfügung gestellt, die
Browserprogramme näher an die Möglichkeiten von Desktop-Apps rücken.
- Offline Lauffähigkeit (offline Web applications)
- Multi-threading mit WebWorkers
- Effiziente Kommunikation mit WebSockets
- Persistente Datenspeicherung
In Datenbanken (Indexed DB, SQL DB)
oder Dateien (local storage, FileReader)
- Zugriff auf lokale Geräte (getUserMedia(), z.B. Kamera, Webcam)
- Geolokalisierung (GPS)
- 3D Fähigkeiten (WebGL)
- Direkte Video und Audio-Ausgabe (video und audio tag)
- Zeichnen von 2D Bitmaps/Sprites (canvas)
Mobile Web-Entwicklung 12 © 2012 Prof. Dr. René Peinl
HTML5 Unterstützung im Detail
IE9 IE10 Android 4 iOS5 Firefox 13 Chrome 19 Maximum
Parsing Rules 1 11 11+2 11+2 11+2 11+2 11
Canvas 20 20 20 20 20 20 20
Video 21+2 31 21 21+4 21+4 21+6 31
Audio 20+2 20 20+1 20+3 20+3 20+5 20
Elements 15 15 24 23 21 25 30
Forms 7 56 65 85 56 74 108
User Interaction 17 35 18 18 35 37 37
Microdata+History 0 5 5 5 5 5 20
Web applications 1 16 15 15 20 18 20
Security 0 5 5 5 0 5 15
Geolocation + D.O. 15 15 20 15 20 20 20
Web GL 0 10 9 9 24 25 25
Communications 5 27 13 33 37 37 37
Files 0 10 10 0 10 20 20
Storage 10 20 15 (SQL) 15 (SQL) 20 20 20
Workers 0 10 0 15 10 15 15
Other 6 11 11 14 11 21 43
Gesamt 138 319 280 324 345 402 500
Stand: 14.6.2012 Android 2.3.3: 189 Punkte, Safari 5.1.5 Win: 319 Punkte
Mobile Web-Entwicklung 13 © 2012 Prof. Dr. René Peinl
Was hilft mir PhoneGap dabei?
PhoneGap ist ein JS-Framework für lokal installierte WebApps auf mobilen Endgeräten
Cross-plattform: iOS 3+, Android, WP7 voll, Blackberry, WebOS, Symbian, Bada großteils
Features
- Zugriff auf Sensoren: Accelerometer, Kompass
- System notifications: alert, sound, vibration
- Bilder mit der Kamera machen und weiterverarbeiten
- Zugriff auf Dateien und local storage
- Zugriff auf Gerätemedien (Bilder, MP3s, Videos, …)
- Zugriff auf Kontakte
PhoneGap bietet kein Framework für UI-Elemente, Touch-Events und ähnliches
PhoneGap => Apache Cordova und wird von Adobe/Nitobe unterstützt
http://www.adobe.com/devnet/html5/articles/extending-phonegap-with-native-plugins-for-android.html
Mobile Web-Entwicklung 14 © 2012 Prof. Dr. René Peinl
Mobile JavaScript Frameworks for UI
jQuery Mobile (http://jquerymobile.com, v1.1 vom 13.04.12)
- Einige UI Elemente, Touch-Events, Animationen, Theming,
arbeitet mit jQuery core zusammen
Wink (winktoolkit.org, v1.4.1 vom 01.02.12)
- Eher für grafische Spielereien und Effekte,
aber zusammen mit DojoX Mobile und Embed JS ein gutes Team
JO (joapp.com, v0.4.1 vom 23.02.11)
- UI Widgets, wirbt explizit mit PhoneGap Bundle
Sencha Touch 2 (www.sencha.com/products/touch, v2.0.1 vom 06.03.12)
- Umfangreiche User Controls, Animationen, Touch Events, mit SDK auch deploybar
Jo
Mobile Web-Entwicklung 15 © 2012 Prof. Dr. René Peinl
Cross-Platform Tool Mindshare Index 2012
Mobile Web-Entwicklung 16 © 2012 Prof. Dr. René Peinl
Was wird ausprobiert, was wieder gelassen
Mobile Web-Entwicklung 17 © 2012 Prof. Dr. René Peinl
Werkzeugunterstützung
Derzeit größtes Manko für HTML5-Entwickler
Eclipse, Xcode und Flash Professional / Builder bieten hervorragende Unterstützung bei
der Erstellung von Anwendungen für mobile Endgeräte und Desktop
Für JavaScript, HTML5 und CSS3 gibt es derzeit kein umfassendes Tool
Erste Ansätze
- Sencha Animator (v.1.2 vom März 2012)
Grafisches Erstellen von Animationen
- Adobe Edge (mehrere Previews, derzeit P6 vom 11.05.12)
Orientiert sich an Flash Professional, bietet aber viel weniger Funktionen
Timeline wird arrangiert und über JavaScript pausiert, abgespielt, wiederholt, etc.
Übergänge und Animationen sind CSS3-basiert, nicht Canvas
Mobile Web-Entwicklung 18 © 2012 Prof. Dr. René Peinl
CSS Media Queries
19.06.12: das W3C gibt die Media Queries als Recommendation frei.
Eigenschaften die abgeprüft werden können
- color | min-color | max-color:15
z.B. @media all and (color) { ... }
- monochrome | min- | max-:8
- orientation:portrait | landscape
- resolution | min-resolution | max-resolution: 100dpi
- width | min-width | max-width: 320px (auch mit device- Prefix)
- height | min-height | max-height: 480px (auch mit device- Prefix)
- aspect-ratio | min- | max- (auch mit device- Prefix)
z.B. @media screen and (device-aspect-ratio: 16/9)
https://developer.mozilla.org/En/CSS/Media_queries
http://www.w3.org/TR/css3-mediaqueries/
http://www.heise.de/ix/artikel/Allen-recht-1058764.html
http://www.heise.de/newsticker/meldung/CSS3-Media-Queries-freigegeben-1622054.html
Demo
Mobile Web-Entwicklung 19 © 2012 Prof. Dr. René Peinl
CSS2 und CSS3 Selektoren
Pseudo classes
1. table tr:nth-child(2n+1) td {background: silver; }
(statt 2n+1 auch odd oder alternativ even für 2n)
Pseudo elements
2. div#content p:first-child::first-line {text-transform: uppercase; }
3. p::first-letter {font-size: 200%; padding: 3px; }
CSS3 Transform & Transitions
transform: rotate(15deg) scale(1.1); (-moz, -webkit, -o Prefix)
transition: all 1.5s ease-in;
http://www.yourhtmlsource.com/stylesheets/advancedselectors.html
http://www.larskasper.de/webdesign/temp/initial.html
http://media.24ways.org/2009/14/5/index.html
Mobile Web-Entwicklung 20 © 2012 Prof. Dr. René Peinl
CSS kontinuierliche Weiterentwicklung
http://html.adobe.com/webstandards/
Mobile Web-Entwicklung 21 © 2012 Prof. Dr. René Peinl
Viewport
iPhone bis 3GS
- 320 x 356 Pixel (Landscape) und 480 x 208 Pixel (Portrait).
- <link rel="stylesheet" href="iphone.css" type="text/css"
media="only screen and (max-device-width: 480px)" />
- <meta name="viewport" content="width=320, initial-scale=1.0,
maximum-scale=1.0, user-scalable=yes" />
Generell
- <meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=4.0, user-scalable=yes" />
http://learnthemobileweb.com/2009/07/mobile-meta-tags/
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
Mobile Web-Entwicklung 22 © 2012 Prof. Dr. René Peinl
Orientation Change
/* Portrait */
@media screen and (orientation:portrait)
{ body { width:320px; }}
/* Landscape */
@media screen and (orientation:landscape)
{ body {width:480px; -webkit-transition: width 1s ease; }}
javascript:onresize()
javascript:onorientationchange()
http://matthewjamestaylor.com/demos/ipad-css-layout/index.html
http://www.1stwebdesigner.com/tutorials/how-to-use-css3-orientation-media-queries/
http://www.thecssninja.com/demo/css_chameleon/
http://ie.microsoft.com/testdrive/HTML5/85CSS3_MediaQueries
Mobile Web-Entwicklung 23 © 2012 Prof. Dr. René Peinl
Literatur
G.R. Frederick, R. Lal (2009): Beginning Smartphone Web Development
Brian Fling (2009): Mobile Design and Development