Web-Anwendungen für mobileEndgeräte mit HTML5 und CoRené Peinl                   26.06.2012
Anpassen von Web-Anwendungen für mobil     Alternative 1: Nichts anpassen       Website von vornherein möglichst universe...
Mobilstrategie    1. Forget what you think you know        - Das Glas muss erst leer werden, bevor man es neu füllen kann ...
Informationsdesign     Welche Informationen sollen präsentiert werden?       z.B. nur die wichtigsten 20% der Information...
Best Practices Bilder & CSS     Bandbreite sparen        Benutzen der sinnvollsten Bildformate: gif, jpg, png / 8, 24, 3...
Was will ich anpassen?     Mobilgeräte generell       - Einzelne Seite um ältere, kleinere, nicht unterstützte Geräte zu ...
Geräteklassen bilden    Geräteidentifizierung über UserAgent String     Device Databases       - deviceatlas.com       - ...
Vergleich Bildschirmgröße und Punktdichte                                                                              xhd...
HTML5 + CSS3 + JavaScript = Mobile Web-AppMobile Web-Entwicklung               9               © 2012 Prof. Dr. René Peinl
Ausgangsbasis: sauberes XHTML/HTML5     DIV-basierte Layouts, keine Layout-Tabellen     Einsatz semantisch korrekter Con...
HTML5 Übersicht     Mit HTML5 werden einige Programmiermöglichkeiten zur Verfügung gestellt, die      Browserprogramme nä...
HTML5 Unterstützung im Detail                         IE9 IE10 Android 4                 iOS5          Firefox 13 Chrome 1...
Was hilft mir PhoneGap dabei?     PhoneGap ist ein JS-Framework für lokal installierte WebApps auf mobilen Endgeräten    ...
Mobile JavaScript Frameworks for UI     jQuery Mobile (http://jquerymobile.com, v1.1 vom 13.04.12)       - Einige UI Elem...
Cross-Platform Tool Mindshare Index 2012Mobile Web-Entwicklung        15               © 2012 Prof. Dr. René Peinl
Was wird ausprobiert, was wieder gelassenMobile Web-Entwicklung        16                © 2012 Prof. Dr. René Peinl
Werkzeugunterstützung     Derzeit größtes Manko für HTML5-Entwickler     Eclipse, Xcode und Flash Professional / Builder...
CSS Media Queries     19.06.12: das W3C gibt die Media Queries als Recommendation frei.     Eigenschaften die abgeprüft ...
CSS2 und CSS3 Selektoren     Pseudo classes       1. table tr:nth-child(2n+1) td {background: silver; }           (statt ...
CSS kontinuierliche Weiterentwicklung                                        http://html.adobe.com/webstandards/Mobile Web...
Viewport     iPhone bis 3GS       - 320 x 356 Pixel (Landscape) und 480 x 208 Pixel (Portrait).       - <link rel="styles...
Orientation Change     /* Portrait */       @media screen and (orientation:portrait)       {   body { width:320px; }}    ...
Literatur     G.R. Frederick, R. Lal (2009): Beginning Smartphone Web Development     Brian Fling (2009): Mobile Design ...
Nächste SlideShare
Wird geladen in …5
×

Vortrag HTML5, CSS3, PhoneGap

3.570 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Geräte & Hardware
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
3.570
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
5
Aktionen
Geteilt
0
Downloads
37
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Vortrag HTML5, CSS3, PhoneGap

  1. 1. Web-Anwendungen für mobileEndgeräte mit HTML5 und CoRené Peinl 26.06.2012
  2. 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.32ffMobile Web-Entwicklung 2 © 2012 Prof. Dr. René Peinl
  3. 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.59ffMobile Web-Entwicklung 3 © 2012 Prof. Dr. René Peinl
  4. 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. 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. 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-ModusMobile Web-Entwicklung 6 © 2012 Prof. Dr. René Peinl
  7. 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 | notMobile Web-Entwicklung 7 © 2012 Prof. Dr. René Peinl
  8. 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.phpMobile Web-Entwicklung 8 © 2012 Prof. Dr. René Peinl
  9. 9. HTML5 + CSS3 + JavaScript = Mobile Web-AppMobile Web-Entwicklung 9 © 2012 Prof. Dr. René Peinl
  10. 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.htmlMobile Web-Entwicklung 10 © 2012 Prof. Dr. René Peinl
  11. 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. 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.2012Mobile Web-Entwicklung 12 © 2012 Prof. Dr. René Peinl
  13. 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.htmlMobile Web-Entwicklung 13 © 2012 Prof. Dr. René Peinl
  14. 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 deploybarMobile Web-Entwicklung 14 © 2012 Prof. Dr. René Peinl
  15. 15. Cross-Platform Tool Mindshare Index 2012Mobile Web-Entwicklung 15 © 2012 Prof. Dr. René Peinl
  16. 16. Was wird ausprobiert, was wieder gelassenMobile Web-Entwicklung 16 © 2012 Prof. Dr. René Peinl
  17. 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 CanvasMobile Web-Entwicklung 17 © 2012 Prof. Dr. René Peinl
  18. 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. 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.htmlMobile Web-Entwicklung 19 © 2012 Prof. Dr. René Peinl
  20. 20. CSS kontinuierliche Weiterentwicklung http://html.adobe.com/webstandards/Mobile Web-Entwicklung 20 © 2012 Prof. Dr. René Peinl
  21. 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.htmlMobile Web-Entwicklung 21 © 2012 Prof. Dr. René Peinl
  22. 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_MediaQueriesMobile Web-Entwicklung 22 © 2012 Prof. Dr. René Peinl
  23. 23. Literatur  G.R. Frederick, R. Lal (2009): Beginning Smartphone Web Development  Brian Fling (2009): Mobile Design and DevelopmentMobile Web-Entwicklung 23 © 2012 Prof. Dr. René Peinl

×