Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Vortrag HTML5, CSS3, PhoneGap

3,944 views

Published on

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

Published in: Devices & Hardware
  • Be the first to comment

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

×