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

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. HTML5 Platform a 10K Foot View

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

    Rich Media Presentation JavaScript APIs Web Applications
  3. an HTML5 Strategy When, Where & Why How Resources

  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!
  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
  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
  7. (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
  8. 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
  9. Web Application APIs DOM, CSSOM, Timers and Events History &

    Navigation Storage & Offline support RESTful & Realtime Communications Focus, Editing, and Drag & Drop
  10. New Markup new tags new attributes … up next &

    rich media, a bit later
  11. to get started… <!DOCTYPE html> <h1>Look, HTML5! yep, that's all

    you need Look, HTML5!
  12. 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…)
  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
  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 <main> <header> <footer> <article> <section> <aside> <nav>
  15. 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>
  16. Figure Semantics to wrap one or more media items to

    describe what's in the figure <figure> <figcaption>
  17. 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>
  18. Enhanced Forms behavior placeholder autofocus readonly validation <input type=…> email,

    url, tel search number, range warning: fragmented browser support
  19. New Forms Elements <datalist> <output> <progress> <meter> <keygen>

  20. Rich Media a.k.a. visual & audio stimulation <touch>, <taste> &

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

    support for data URIs (except < IE8) "data:text/html;base64,…" "….svg" files
  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 <iframe> content security policy sandbox <object> <embed> oembed embed.ly
  23. 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
  24. SVG Example D3's Collision Detection

  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 <canvas> element All major browsers after IE8 2D Rendering Context toDataURL()
  26. 2D Canvas Example D3's Canvas Heatmap

  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
  28. 3D WebGL Example

  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 <video> <audio> <source> <track>
  30. Video Example <video controls> <source src="demo/video/birds.m4v" type="video/mp4" /> <source src="demo/video/birds.ogv"

    type="video/ogg" /> </video> 0:05
  31. 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
  32. Media Queries deliver both desktop & mobile Stylesheets for and

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

    gradients sizing positioning clipping multiple backgrounds
  34. Boxes and and colors opacity box-sizing box-shadow border-radius border-image

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

  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
  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
  38. JavaScript APIs DOM & CSSOM JSON, HTML & XML Parsing

    History & Navigation Storage & Offline Canvas & rendering Communications Security Cross-document RESTful & JSON Realtime
  39. Document Object Model a.k.a. the DOM for HTML, SVG &

    CSS dataset classList events
  40. Powerful APIs History API Geolocation Drag and Drop

  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
  42. Canvas APIs .fill() and .stroke() .beginPath() .lineTo() .arcTo() .closePath() .drawImage()

    .transform() .rotate() .scale() .clip()
  43. Video & Audio methods .load() .pause() .play() .canPlayType() events loaded,

    playing, ended, … progress, timeupdate, … seeking, pause, volumechange, …
  44. Document Communcations postMessage <iframe> window.open() web workers Storage Events

  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)
  46. Realtime Communcations & fallbacks polyfill realtime Server-Sent Events in Action

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

    Where would I need it? How can I get started?
  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
  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!
  50. 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
  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
  52. How? Pay for it time blogs & research learning &

    doing money books courses classes outsource doing reviewing architecting
  53. How? Tooling Edit Build JSHint LiveReload Emmet RequireJS Grunt

  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
  55. How? Testing TDD: test runner Jasmine Mocha Karma PhantomJS Sauce

    Labs BrowserStack TestSwarm
  56. We could go on… But really, take a look at

    Dimi Navrotskyy's great list of . frontend dev links
  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
  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
  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
  60. Shane's 10K Foot HTML5 Platform Overview I'd be happy to

    talk tech with you over coffee. email: phone: skype: shane.holloway@ieee.org (719) 237-0682 shanewholloway