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.
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. some text all compliant browsers now parse identically => interoperable, compatible document trees
Standardized DOM Parse Tree , , and are optional! “smart” auto-closing tags …, , , , implies , auto-close , and 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
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
Embedding Use for embedding content nested browsing context ing and isolation PlugIns still use and tags look at the standard and supporting 250+ providers
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
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
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
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
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)
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! , & 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
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
shanewholloway
inesmontani
matsujirushi
skrb
yu4u
taka2noda
microcms
iselegant
sakiengineer
takashi1029
mii3king
cyberagentdevelopers
tbshiki
csswizardry
quramy
hannesfritz
tanoku
erikaheidi
danielanewman
lauravandoore
mongodb
cherdarchuk
nonsquared
tenderlove
bermonpainter