Vortrag für die Open Web User Group - Web-Entwicklung für mobile Endgeräte mit HTML5, CSS3 und PhoneGap

1. Web-Anwendungen für mobile
Endgeräte mit HTML5 und Co
René Peinl 26.06.2012

2. 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 2 © 2012 Prof. Dr. René Peinl

3. 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 3 © 2012 Prof. Dr. René Peinl

4. 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 4 © 2012 Prof. Dr. René Peinl

5. 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 5 © 2012 Prof. Dr. René Peinl

6. 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 6 © 2012 Prof. Dr. René Peinl

7. 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 7 © 2012 Prof. Dr. René Peinl

8. Vergleich Bildschirmgröße und Punktdichte
xhdpi / Retina
hdpi
small < 3.5 Zoll
normal 3.5 - 4.5 Zoll
large 4.7 - 7.0 Zoll
mdpi xlarge > 7.0 Zoll
ldpi < 130 dpi
mdpi 130 - 180 dpi
hdpi 220 - 270 dpi
xhdpi > 300 dpi
siehe auch http://developer.android.com/resources/dashboard/screens.html
http://opensignalmaps.com/reports/fragmentation.php
Mobile Web-Entwicklung 8 © 2012 Prof. Dr. René Peinl

9. HTML5 + CSS3 + JavaScript = Mobile Web-App
Mobile Web-Entwicklung 9 © 2012 Prof. Dr. René Peinl

10. 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 10 © 2012 Prof. Dr. René Peinl

11. 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 11 © 2012 Prof. Dr. René Peinl

12. 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
Android 2.3.3: 189 Punkte, Safari 5.1.5 Win: 319 Punkte Stand: 14.6.2012
Mobile Web-Entwicklung 12 © 2012 Prof. Dr. René Peinl

13. 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 13 © 2012 Prof. Dr. René Peinl

14. 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
Jo
 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
Mobile Web-Entwicklung 14 © 2012 Prof. Dr. René Peinl

15. Cross-Platform Tool Mindshare Index 2012
Mobile Web-Entwicklung 15 © 2012 Prof. Dr. René Peinl

16. Was wird ausprobiert, was wieder gelassen
Mobile Web-Entwicklung 16 © 2012 Prof. Dr. René Peinl

17. 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 17 © 2012 Prof. Dr. René Peinl

18. 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) { ... } Demo
- 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)
http://www.heise.de/ix/artikel/Allen-recht-1058764.html https://developer.mozilla.org/En/CSS/Media_queries
http://www.heise.de/newsticker/meldung/CSS3-Media-Queries-freigegeben-1622054.html http://www.w3.org/TR/css3-mediaqueries/
Mobile Web-Entwicklung 18 © 2012 Prof. Dr. René Peinl

19. 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; }
http://www.yourhtmlsource.com/stylesheets/advancedselectors.html
http://www.larskasper.de/webdesign/temp/initial.html
CSS3 Transform & Transitions
 transform: rotate(15deg) scale(1.1); (-moz, -webkit, -o Prefix)
 transition: all 1.5s ease-in;
http://media.24ways.org/2009/14/5/index.html
Mobile Web-Entwicklung 19 © 2012 Prof. Dr. René Peinl

20. CSS kontinuierliche Weiterentwicklung
http://html.adobe.com/webstandards/
Mobile Web-Entwicklung 20 © 2012 Prof. Dr. René Peinl

21. 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 21 © 2012 Prof. Dr. René Peinl

22. 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 22 © 2012 Prof. Dr. René Peinl

23. Literatur
 G.R. Frederick, R. Lal (2009): Beginning Smartphone Web Development
 Brian Fling (2009): Mobile Design and Development
Mobile Web-Entwicklung 23 © 2012 Prof. Dr. René Peinl