Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML5 Platform — a 10K Foot View

HTML5 Platform — a 10K Foot View

Presents an overview of the HTML5 Platform as it stands in mid-2013. Intended to give someone new to the open web platform a leg up with relevant links.

Shane Holloway

July 25, 2013
Tweet

More Decks by Shane Holloway

Other Decks in Technology

Transcript

  1. HTML5 Platform
    a 10K Foot View

    View full-size slide

  2. the HTML5 Platform
    aka "Open Web Platform"
    HTML5 Spec
    Markup
    Rich Media
    Presentation
    JavaScript APIs
    Web Applications

    View full-size slide

  3. an HTML5 Strategy
    When, Where & Why
    How
    Resources

    View full-size slide

  4. Our Survey
    23 reponses. goo.gl/YfiaV
    Q1: The Overview
    Graphics (70%), APIs (48%), Realtime (48%)
    Q2: In-Depth
    RESTful (43%), new elements (43%), WebSockets (39%)
    Q3: Dead Horse
    new elements (30%), video & audio (22%)
    Q4: Applied (65%) vs Overview (30%)
    I got both slots, so you get both!

    View full-size slide

  5. Q5: HTML5 platform is…
    (70%) what I need to learn for tomorrow
    (48%) steadily becoming the present reality
    (35%) the platform of the future
    View all at goo.gl/YfiaV

    View full-size slide

  6. What is HTML5?
    a and specification
    a follow-on to HTML4 and XHTML1
    a markup syntax
    current behaviors, documented
    a standardized JavaScript API
    a simple DOCTYPE
    a backlash against…
    XML & SGML?
    Flash and Plugins?
    W3C WHATWG

    View full-size slide

  7. (Forgiving) Parsing Algorithm
    inline support for SVG and MathML
    specified parse error handling
    e.g. some text
    all compliant browsers now parse identically
    => interoperable, compatible document trees

    View full-size slide

  8. Standardized DOM Parse Tree
    , , and are optional!
    “smart” auto-closing tags
    …, , , ,
    implies
    , auto-close
    , and auto-close
    use with caution — like operator precidence

    View full-size slide

  9. Web Application APIs
    DOM, CSSOM, Timers and Events
    History & Navigation
    Storage & Offline support
    RESTful & Realtime Communications
    Focus, Editing, and Drag & Drop

    View full-size slide

  10. New Markup
    new tags
    new attributes
    … up next
    & rich media, a bit later

    View full-size slide

  11. to get started…

    Look, HTML5!
    yep, that's all you need
    Look, HTML5!

    View full-size slide

  12. to get started… in practice



    HTML5 in Practice

    Look, HTML5!
    because charset and title are important.
    And yes, you may close your tags if you want.
    (You can even write so it parses as HTML5
    and
    XHTML2…)

    View full-size slide

  13. HTML5 Markup
    summary of HTML5 differences
    New & Changed Elements & Attributes
    sectioning & structural
    improved semantics
    enhanced forms
    Obsolete Elements and Attributes
    CSS instead of presentational markup
    eliminate redundant & harmful elements

    View full-size slide

  14. Structure & Sectioning
    to indicate the “real” content
    for introducting sections
    for wrapping up sections
    for stand alone units of content
    for grouping of articles
    for tangents and sidetracks
    for collecting links







    View full-size slide

  15. Structured Document



    HTML5 Strutured

    … … …


    … … …


    … …


    … … …

    View full-size slide

  16. Figure Semantics
    to wrap one or more media items
    to describe what's in the figure


    View full-size slide

  17. Other Elements
    ,
    behavior: ,
    media: , , ,
    language: , , ,
    redefined: , , , , , ,
    redefined: , , <small>, <strong><br/>

    View full-size slide

  18. Enhanced Forms
    behavior
    placeholder
    autofocus
    readonly
    validation

    email, url, tel
    search
    number, range
    warning: fragmented browser support

    View full-size slide

  19. New Forms Elements





    View full-size slide

  20. Rich Media
    a.k.a. visual & audio stimulation
    , & would go here, if they existed!

    View full-size slide

  21. Graphics: Images
    the standard ("….gif", "….jpg", - "….png")
    support for
    data URIs
    (except < IE8)
    "data:text/html;base64,…"
    "….svg" files

    View full-size slide

  22. Embedding
    Use for embedding content
    nested browsing context
    ing and isolation
    PlugIns still use and tags
    look at the standard
    and supporting 250+ providers

    content security policy
    sandbox

    oembed
    embed.ly

    View full-size slide

  23. Graphics: Vectors
    W3C Recommendation in 2001, 2003, 2008, 2011
    All major browsers after IE8
    in elements
    in HTML5
    in
    SVG Spec

    inline
    CSS backgrounds

    View full-size slide

  24. SVG Example
    D3's Collision Detection

    View full-size slide

  25. Graphics: 2D Canvas
    provides a fixed size drawing surface
    rendering APIs
    stateful context
    paths, rectangles, images and text
    strokes & fills: colors, gradients, images, patterns
    transforms: translate, scale, rotate, matrix
    image generation with
    element
    All major browsers after IE8
    2D Rendering Context
    toDataURL()

    View full-size slide

  26. 2D Canvas Example
    D3's Canvas Heatmap

    View full-size slide

  27. Graphics: 3D WebGL
    is based on
    support : 72% on desktop, 9% on mobile
    buffers — generic, render, frame, depth and stencil
    typed arrays, variables & textures
    Vertex Shaders
    Fragment Shaders
    linking variables, textures and shader programs
    WebGL OpenGL ES 2.0
    stats
    3D WebGL Rendering Context

    View full-size slide

  28. 3D WebGL Example

    View full-size slide

  29. Video and Audio
    a nightmare of politics, formats & proprietary codecs
    MP4:
    IE, Chrome, Safari, iOS, Android
    WebM:
    Chrome, Firefox, Opera
    AAC:
    IE, Chrome, Safari, iOS, Android
    MP3:
    IE, Chrome, Safari, iOS, Android
    Vorbis:
    Chrome, Firefox, Opera
    for alternate formats
    use with media queries
    for timed text or data feeds




    View full-size slide

  30. Video Example




    0:05

    View full-size slide

  31. Presentation
    CSS 1, 2.1, 3
    (and 4?)
    for both HTML & SVG
    inline style="…" attributes
    inline tags<br/>linked stylesheets<br/>media queries, inside and out<br/>

    View full-size slide

  32. Media Queries
    deliver both desktop & mobile
    Stylesheets for and
    Responsive Web Design
    Progressive enhancement is still important
    printing page-breaks

    View full-size slide

  33. Backgrounds
    , images,
    , ,
    layering
    colors linear & radial gradients
    sizing positioning clipping
    multiple backgrounds

    View full-size slide

  34. Boxes
    and
    and
    colors opacity
    box-sizing
    box-shadow
    border-radius border-image

    View full-size slide

  35. Text
    &
    @font-face {…}
    overflow word-wrap
    text-shadow

    View full-size slide

  36. Transformations
    , translateX(), translateY()
    , scaleX(), scaleY()
    , rotateX(), rotateY()
    , skewX(), skewY()
    perspective(), matrix3d()
    translate3d(), scale3d(), rotate3d()
    translateZ(), scaleZ(), rotateZ()
    transform-origin
    translate
    scale()
    rotate()
    skew()
    matrix()
    3D Transformations

    View full-size slide

  37. Animations
    property
    e.g. fade out by changing opacity over time
    &
    basically
    and a little JavaScript
    manipulation
    libraries
    transitions
    timing functions
    animation keyframes
    keyframable transitions
    elem.classList
    window.requestAnimationFrame()
    tweening

    View full-size slide

  38. JavaScript APIs
    DOM & CSSOM
    JSON, HTML & XML Parsing
    History & Navigation
    Storage & Offline
    Canvas & rendering
    Communications
    Security
    Cross-document
    RESTful & JSON
    Realtime

    View full-size slide

  39. Document Object Model
    a.k.a. the DOM
    for HTML, SVG & CSS
    dataset
    classList
    events

    View full-size slide

  40. Powerful APIs
    History API
    Geolocation
    Drag and Drop

    View full-size slide

  41. Storage, client-side
    old: cookies
    : local & session
    simple and
    and based
    more complex
    API
    not well supported
    Web Storage
    well supported
    IndexedDB
    WebSQL polyfill
    FileSystem

    View full-size slide

  42. Canvas APIs
    .fill() and .stroke()
    .beginPath()
    .lineTo() .arcTo()
    .closePath()
    .drawImage()
    .transform() .rotate() .scale()
    .clip()

    View full-size slide

  43. Video & Audio
    methods
    .load()
    .pause()
    .play()
    .canPlayType()
    events
    loaded, playing, ended, …
    progress, timeupdate, …
    seeking, pause, volumechange, …

    View full-size slide

  44. Document Communcations
    postMessage

    window.open()
    web workers
    Storage Events

    View full-size slide

  45. RESTful Communcations
    (REST: Representational State Transfer) - AJAX, , JSON and
    - Security, and - for
    parsing XML or HTML - to convert back to XHTML -
    for selections and filtering
    XHR2
    JSONP same-origin policy CORS DOMParser
    XMLSerializer
    XPath
    (More in our hands-on session)

    View full-size slide

  46. Realtime Communcations
    & fallbacks
    polyfill
    realtime
    Server-Sent Events in Action
    Web Sockets
    SockJS
    Socket.io
    (More in our hands-on session)

    View full-size slide

  47. Strategy for
    HTML5?
    Why & When would I use it?
    Where would I need it?
    How can I get started?

    View full-size slide

  48. When and Why?
    Right now!
    it's easier
    great support
    mobile!
    What about IE8?
    polyfills?
    Google doesn't
    YouTube doesn't
    Gmail doesn't
    QuickBooks doesn't
    BaseCamp / 37Signals doesn't
    jQuery2 doesn't

    View full-size slide

  49. When and Why?
    No, for reals!
    Incrementally
    the “Open Web Platform” is in 100 pieces
    many features are well supported
    some are experimental
    know what you're using
    and
    Balance
    CanIUse.com
    HTML5Please.com
    detect POLYFILL!

    View full-size slide

  50. Where?
    For Markup?
    and use everywhere!
    , & away!
    For Web App?
    if mission critical, go incremental
    & use
    fallbacks (or not)
    if less critical, live on the edge!
    & error
    html5shiv
    test
    test
    your browser does not support
    AWESOMENESS

    View full-size slide

  51. How?
    Start small & expand
    Don't bite off too much!
    It'll get better over time
    Connect & Collaborate
    great to learn from others
    share what you learn

    View full-size slide

  52. How?
    Pay for it
    time
    blogs & research
    learning & doing
    money
    books
    courses
    classes
    outsource
    doing
    reviewing
    architecting

    View full-size slide

  53. How?
    Tooling
    Edit
    Build
    JSHint
    LiveReload
    Emmet
    RequireJS
    Grunt

    View full-size slide

  54. How?
    Languages as Tools
    JavaScript
    CSS:
    Templating
    or
    or
    … doT.js, Hogan.js, T.js, Dust.js, EJS …
    CoffeeScript
    LiveScript
    TypeScript
    Dart
    Sass
    Less
    Stylus
    Mustache Handlebars
    HAML Jade

    View full-size slide

  55. How?
    Testing
    TDD:
    test runner
    Jasmine
    Mocha
    Karma
    PhantomJS
    Sauce Labs
    BrowserStack
    TestSwarm

    View full-size slide

  56. We could go on…
    But really, take a look at Dimi Navrotskyy's
    great list of .
    frontend dev links

    View full-size slide

  57. Essential
    Resources
    at WHATWG
    (it's readable. really!)
    up-to-date browser support
    advice and
    community compilation of tools
    HTML: The Living Standard
    CanIUse.com
    HTML5Please.com
    polyfills
    HTML5 Rocks resources

    View full-size slide

  58. Demos & the Edge
    for the cutting-edge
    to see how it should work
    for smart feature detection
    to see how your browser stacks up
    HTML5 Rocks Slides with Demos
    HTML5 Rocks
    HTML5 Demos
    Modernizr
    HTML5Test

    View full-size slide

  59. Books, Courses & Collections
    Books:
    — a bit dated, but still great
    by Bruce Lawson and Remy Sharp
    by Mark Pilgrim
    Courses:
    @ free
    @ free
    @ $49-$99+
    @ $25/month
    Dive Into HTML5
    Introducing HTML5
    HTML5: Up and Running
    Frontend Dev Bookmarks
    Web Development Teaching Materials
    Udemy web development courses
    Lynda's video courses

    View full-size slide

  60. Shane's 10K Foot
    HTML5 Platform
    Overview
    I'd be happy to talk tech with you over coffee.
    email:
    phone:
    skype:
    [email protected]
    (719) 237-0682
    shanewholloway

    View full-size slide