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

More Decks by Shane Holloway

Other Decks in Technology


  1. the HTML5 Platform aka "Open Web Platform" HTML5 Spec Markup

    Rich Media Presentation JavaScript APIs Web Applications
  2. 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!
  3. 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
  4. 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
  5. (Forgiving) Parsing Algorithm inline support for SVG and MathML specified

    parse error handling e.g. <b><i>some text</b></i> all compliant browsers now parse identically => interoperable, compatible document trees
  6. Standardized DOM Parse Tree <html>, <head>, and <body> are optional!

    “smart” auto-closing tags <h1>…, <p>, <li>, <dt>, <dd> <table> implies <tbody> <thead>, <tfoot> auto-close <tr>, <th> and <td> auto-close use with caution — like operator precidence
  7. Web Application APIs DOM, CSSOM, Timers and Events History &

    Navigation Storage & Offline support RESTful & Realtime Communications Focus, Editing, and Drag & Drop
  8. to get started… in practice <!DOCTYPE html> <head> <meta charset='utf-8'>

    <title>HTML5 in Practice <body> <h1>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…)
  9. 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
  10. 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 <main> <header> <footer> <article> <section> <aside> <nav>
  11. Structured Document <!DOCTYPE html> <head> <meta charset='utf-8'> <title>HTML5 Strutured <body>

    <header> … <nav> … </nav> … </header> <aside>…</aside> <main> <section> … <aside> … </aside> … </section> <article> … </article> <section> <article> … <aside> … </aside> </article> </section> </main> <footer> … <nav> … </nav> … </footer>
  12. Figure Semantics to wrap one or more media items to

    describe what's in the figure <figure> <figcaption>
  13. Other Elements <time>, <wbr> behavior: <details>, <summary> media: <canvas> <audio>,

    <video>, <track>, <source> language: <bdi>, <ruby>, <rt>, <rp> redefined: <b>, <s>, <u>, <i>, <cite>, <dl>, <hr> redefined: <address>, <script>, <small>, <strong>
  14. Enhanced Forms behavior placeholder autofocus readonly validation <input type=…> email,

    url, tel search number, range warning: fragmented browser support
  15. Rich Media a.k.a. visual & audio stimulation <touch>, <taste> &

    <smell> would go here, if they existed!
  16. Graphics: Images the standard ("….gif", "….jpg", - "….png") <img src=…>

    support for data URIs (except < IE8) "data:text/html;base64,…" "….svg" files
  17. Embedding Use for embedding content nested browsing context ing and

    isolation PlugIns still use and tags look at the standard and supporting 250+ providers <iframe> content security policy sandbox <object> <embed> oembed embed.ly
  18. Graphics: Vectors W3C Recommendation in 2001, 2003, 2008, 2011 All

    major browsers after IE8 in elements in HTML5 in SVG Spec <img src=…> inline <svg> CSS backgrounds
  19. 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 <canvas> element All major browsers after IE8 2D Rendering Context toDataURL()
  20. 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
  21. 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 <video> <audio> <source> <track>
  22. Presentation CSS 1, 2.1, 3 (and 4?) for both HTML

    & SVG inline style="…" attributes inline <style> tags linked stylesheets media queries, inside and out
  23. Media Queries deliver both desktop & mobile Stylesheets for and

    Responsive Web Design Progressive enhancement is still important printing page-breaks
  24. Backgrounds , images, , , layering colors linear & radial

    gradients sizing positioning clipping multiple backgrounds
  25. 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
  26. 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
  27. JavaScript APIs DOM & CSSOM JSON, HTML & XML Parsing

    History & Navigation Storage & Offline Canvas & rendering Communications Security Cross-document RESTful & JSON Realtime
  28. 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
  29. Video & Audio methods .load() .pause() .play() .canPlayType() events loaded,

    playing, ended, … progress, timeupdate, … seeking, pause, volumechange, …
  30. 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)
  31. Realtime Communcations & fallbacks polyfill realtime Server-Sent Events in Action

    Web Sockets SockJS Socket.io (More in our hands-on session)
  32. Strategy for HTML5? Why & When would I use it?

    Where would I need it? How can I get started?
  33. 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
  34. 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!
  35. Where? For Markup? and use everywhere! <section>, <article> & <nav>

    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
  36. 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
  37. How? Pay for it time blogs & research learning &

    doing money books courses classes outsource doing reviewing architecting
  38. 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
  39. We could go on… But really, take a look at

    Dimi Navrotskyy's great list of . frontend dev links
  40. 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
  41. 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
  42. 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
  43. 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