HTML5 goes Mobile.

Transcript

1. HTML5 goes Mobile.
   1
   Donnerstag, 5. April 2012
   

   View Slide

2. Der Speaker.
   • Boris Fründt
   • Senior Web Developer
   • Jung von Matt/next
   • bondt.me
   • @bondt
   2
   Donnerstag, 5. April 2012
   

   View Slide

3. Die Agenda.
   • Die Abgrenzung.
   • Die Herausforderungen.
   • Der Begriff HTML5.
   • Der Stand der Entwicklung.
   • Die Lösungsansätze.
   • Das Fazit.
   • Der Ausblick.
   3
   Donnerstag, 5. April 2012
   

   View Slide

4. Die Abgrenzung.
   Nativ Hybrid Web
   4
   Donnerstag, 5. April 2012
   

   View Slide

5. Die Abgrenzung.
   Nativ Hybrid Web
   5
   Donnerstag, 5. April 2012
   

   View Slide

6. Die Herausforderungen.
   6
   Donnerstag, 5. April 2012
   

   View Slide

7. • Viele verschiedene Geräte.
   • Unterschiedliche Display-Größen.
   • Variierende Fähigkeiten.
   • „Native-App-Experience“.
   • Geschwindigkeitsdefizite.
   • Schwieriges Testing und Debugging.
   Die Herausforderungen.
   7
   Donnerstag, 5. April 2012
   

   View Slide

8. Der Begriff HTML5.
   Quelle: https://github.com/SirPepe/SpecGraph/raw/master/graph_w.png
   8
   Donnerstag, 5. April 2012
   

   View Slide

9. Der Begriff HTML5 -
   Semantik.
   • , ,
   • ,
   • ,
   • , ,
   9
   Donnerstag, 5. April 2012
   

   View Slide

10. Der Begriff HTML5 -
    Formulare.
    Android
    type=“text“
    Android
    type=“number“
    iOS
    type=“email“
    iOS
    type=“tel“
    10
    Donnerstag, 5. April 2012
    

    View Slide

11. Der Begriff HTML5 -
    Formulare.
    • Attribut „required“
    • Attribut „placeholder“
    • CSS Selector :invalid, :valid
    11
    Donnerstag, 5. April 2012
    

    View Slide

12. Der Begriff HTML5 -
    Audio & Video.
    
    
    
    Alternativer Inhalt.
    
    
    
    
    Alternativer Inhalt.
    
    12
    Donnerstag, 5. April 2012
    

    View Slide

13. Der Begriff HTML5 -
    Styles & Animationen.
    • CSS3!
    • Rounded Corners, Gradients, Drop
    Shadows, etc.
    • Transitions, Transformations, Animations.
    • 3D Transformationen.
    13
    Donnerstag, 5. April 2012
    

    View Slide

14. Der Begriff HTML5 -
    Styles & Animationen.
    #box1 {
    ! margin-left: 0;
    ! -webkit-transition: margin-left .5s ease-in-out;
    }
    #box1.active {
    margin-left: 95%;
    }
    14
    Donnerstag, 5. April 2012
    

    View Slide

15. Der Begriff HTML5 -
    Styles & Animationen.
    #box2 {
    ! -webkit-transition: -webkit-transform 1s ease-in-out;
    }
    #box2.active {
    ! -webkit-transform: scale(.75) rotateX(-52deg) rotateY
    (36deg) translate3d(600px, 389px, 0px);
    }
    15
    Donnerstag, 5. April 2012
    

    View Slide

16. Der Begriff HTML5 -
    Styles & Animationen.
    @-webkit-keyframes blink {
    ! from {
    ! ! opacity: 0.0;
    ! ! font-size: 8px;
    ! }
    ! to {
    !
    ! opacity: 1.0;
    !
    ! font-size: 14px;
    ! }
    }
    #box3.active {
    -webkit-animation-name: blink;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-direction: alternate;
    }
    16
    Donnerstag, 5. April 2012
    

    View Slide

17. Der Begriff HTML5 -
    Geolocation.
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
    var latLng = new google.maps.LatLng(
    position.coords.latitude, position.coords.longitude);
    var marker = new google.maps.Marker({position: latLng, map: map});
    map.setCenter(latLng);
    }, errorHandler);
    }
    17
    Donnerstag, 5. April 2012
    

    View Slide

18. Der Begriff HTML5 -
    Offline.
    • App Cache
    • Local storage, Indexed DB, WebSQL DB
    • History API
    18
    Donnerstag, 5. April 2012
    

    View Slide

19. Der Begriff HTML5 -
    Device Orientation.
    window.addEventListener('deviceorientation', function(event) {
    var a = event.alpha;
    var b = event.beta;
    var g = event.gamma;
    }, false);
    Quelle des Bildes: http://dev.w3.org/geo/api/spec-source-orientation.html
    19
    Donnerstag, 5. April 2012
    

    View Slide

20. Der Begriff HTML5 -
    Canvas.
    • Simple API zum Zeichnen.
    • Zugriff auf Bild- und Video-Informationen.
    • Pixel-Manipulationen.
    • Niedrige Performance auf mobilen Geräten.
    20
    Donnerstag, 5. April 2012
    

    View Slide

21. Der Begriff HTML5 -
    Canvas.
    21
    Donnerstag, 5. April 2012
    

    View Slide

22. Der Begriff HTML5 -
    SVG.
    • Basiert auf XML.
    • Erstellung von simplen Objekten & Pfaden.
    • Einbindung von Bildern & Texten.
    • Möglich sind Styles, Transformationen,
    Animationen und Filter.
    • http://raphaeljs.com/
    22
    Donnerstag, 5. April 2012
    

    View Slide

23. Der Begriff HTML5 -
    WebGL.
    • OpenGL für Browser.
    • 3D-Objekte im Browser.
    • Zukunftsmusik für mobile Geräte.
    23
    Donnerstag, 5. April 2012
    

    View Slide

24. Der Stand der Entwicklung -
    Desktop vs. Mobile.
    Quelle: Morgan Stanley Research, 2010
    24
    Donnerstag, 5. April 2012
    

    View Slide

25. Der Stand der Entwicklung -
    Features vs. Devices.
    Quelle: http://mobilehtml5.org/
    25
    Donnerstag, 5. April 2012
    

    View Slide

26. Die Lösungsansätze -
    Polyfills.
    „A polyfill, or polyfiller, is a piece of code (or plugin) that
    provides the technology that you, the developer, expect the
    browser to provide natively. Flattening the API landscape if
    you will.“
    Remy Sharp
    26
    Donnerstag, 5. April 2012
    

    View Slide

27. Die Lösungsansätze -
    Polyfills.
    • https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
    27
    Donnerstag, 5. April 2012
    

    View Slide

28. Die Lösungsansätze -
    Polyfills.
    • http://html5please.com/
    28
    Donnerstag, 5. April 2012
    

    View Slide

29. Die Lösungsansätze -
    CSS Media Queries.
    • @media (min-device-width: 640px) { ... }
    • @media screen and (device-aspect-ratio: 16/9) { ... }
    • @media (orientation:portrait) { ... }
    •
    Quelle der Grafik: http://www.adobe.com/devnet/html5/articles/css3-basics.html
    29
    Donnerstag, 5. April 2012
    

    View Slide

30. Die Lösungsansätze -
    Mobile Meta Tags.
    •
    • content="yes">
    •
    •
    30
    Donnerstag, 5. April 2012
    

    View Slide

31. Die Lösungsansätze -
    Performance Optimierungen.
    • Keine iFrames verwenden (Share widgets).
    • Application Cache nutzen.
    • CSS/JS-Komprimierung (YUI Compressor, Closure Compiler).
    • CSS-Sprites verwenden.
    • Bilder komprimieren.
    • Skripte vor

    View Slide

32. Die Lösungsansätze -
    Tools & Helfer.
    • HTML5 Boilerplate
    • modernizr
    • jQuery + jQuery Mobile
    • iScroll
    32
    Donnerstag, 5. April 2012
    

    View Slide

33. Die Lösungsansätze -
    Tools & Helfer: HTML5 Boilerplate.
    • Sammlung von Best Practices
    • professionelles HTML/CSS/JS-Template
    • http://de.html5boilerplate.com/
    • http://html5boilerplate.com/mobile
    33
    Donnerstag, 5. April 2012
    

    View Slide

34. Die Lösungsansätze -
    Tools & Helfer: modernizr.
    • Open-Source JS Library
    • Feature Detection
    • Hilft bei Progressive Enhancement
    • http://www.modernizr.com/
    34
    Donnerstag, 5. April 2012
    

    View Slide

35. Die Lösungsansätze -
    Tools & Helfer: jQuery Mobile.
    • Web Framework - optimiert für viele mobilen Geräte.
    • Basiert auf jQuery.
    • Bietet viele nützliche Features.
    • Einfacher Start in die mobile Entwicklung-
    • Sehr gut dokumentiert.
    • http://jquerymobile.com/
    • http://jquerymobile.com/themeroller/
    35
    Donnerstag, 5. April 2012
    

    View Slide

36. Die Lösungsansätze -
    Tools & Helfer: iScroll.
    • JS Bibliothek für Cross Browser
    „Scroll-Inside-Verhalten“
    • http://cubiq.org/iscroll-4
    36
    Donnerstag, 5. April 2012
    

    View Slide

37. Die Lösungsansätze -
    Testing & Debugging.
    • Remote Debugging mit Weinre / Adobe Shadow.
    37
    Donnerstag, 5. April 2012
    

    View Slide

38. Das Fazit.
    • Mobile Web Apps haben Nachteile.
    • ABER - sie bieten auch viele Vorteile.
    • Entwicklung hat große Reichweite.
    • geringere Entwicklungskosten.
    • keine Updates notwendig.
    • „Native-App-Experience“ kann (nahezu)
    erreicht werden.
    38
    Donnerstag, 5. April 2012
    

    View Slide

39. • Viele verschiedene Geräte.
    • Unterschiedliche Display-Größen.
    • Variierende Fähigkeiten.
    • „Native-App-Experience“.
    • Geschwindigkeitsdefizite.
    • Schwieriges Testing und Debugging.
    Die Herausforderungen.
    39
    Donnerstag, 5. April 2012
    

    View Slide

40. Das Fazit.
    • Mobile Web Apps haben Nachteile.
    • ABER - sie bieten auch viele Vorteile.
    • Entwicklung hat große Reichweite.
    • Geringere Entwicklungskosten.
    • Keine Updates notwendig.
    • „Native-App-Experience“ kann (nahezu)
    erreicht werden.
    40
    Donnerstag, 5. April 2012
    

    View Slide

41. Der Ausblick.
    • Höhere Geräte-Performance.
    • Schnellere Verbindungen.
    • Bessere Tools.
    • Mobile Device APIs: Camera, Battery
    Status, Contacts, Messaging, Network
    Information API, etc.
    41
    Donnerstag, 5. April 2012
    

    View Slide

42. Vielen Dank!
    • Fragen?
    42
    Donnerstag, 5. April 2012
    

    View Slide