HTML5 Platform — a 10K Foot View

HTML5 Platform a 10K Foot View

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

an HTML5 Strategy When, Where & Why How Resources

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!

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

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

(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

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

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

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

to get started… <!DOCTYPE html> <h1>Look, HTML5! yep, that's all
you need Look, HTML5!

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…)

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

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>

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>

Figure Semantics to wrap one or more media items to
describe what's in the figure <figure> <figcaption>

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>

Enhanced Forms behavior placeholder autofocus readonly validation <input type=…> email,
url, tel search number, range warning: fragmented browser support

New Forms Elements <datalist> <output> <progress> <meter> <keygen>

Rich Media a.k.a. visual & audio stimulation <touch>, <taste> &
<smell> would go here, if they existed!

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

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

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

SVG Example D3's Collision Detection

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()

2D Canvas Example D3's Canvas Heatmap

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

3D WebGL Example

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>

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

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

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

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

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

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

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

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

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

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

Powerful APIs History API Geolocation Drag and Drop

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

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

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

Document Communcations postMessage <iframe> window.open() web workers Storage Events

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)

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

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

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

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!

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

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

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

How? Tooling Edit Build JSHint LiveReload Emmet RequireJS Grunt

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

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

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

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

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

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

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

HTML5 Platform — a 10K Foot View

HTML5 Platform — a 10K Foot View

More Decks by Shane Holloway

Other Decks in Technology

Featured

Transcript