$30 off During Our Annual Pro Sale. View Details »

HTML5 goes Mobile.

HTML5 goes Mobile.

Boris Fründt

April 05, 2012
Tweet

More Decks by Boris Fründt

Other Decks in Technology

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