8/8/2019 How to win friends and influence people using html5 n' stuff
1/32
How to win friends & influence
people with HTML5 n stuffNicholas Audo | @naudo
8/8/2019 How to win friends and influence people using html5 n' stuff
2/32
What?
HTML4++ XHTML2 worked in html4? Works in 5!
collection of features
8/8/2019 How to win friends and influence people using html5 n' stuff
3/32
Warning
Working Draft - Stuff might change W3C recommendation late 2010? Candidate Recommendation 2012
Ian Hickson - 2022 or later forW3CR
8/8/2019 How to win friends and influence people using html5 n' stuff
4/32
W3C
Working Draft
Last Call Working Draft Candidate Recommendation
Proposed Recommendation W3C Recommendation
8/8/2019 How to win friends and influence people using html5 n' stuff
5/32
Browsers
Chrome
Safari Opera Firefox
IE 9 IE < 9 (LOL) + Google Chrome Frame?
8/8/2019 How to win friends and influence people using html5 n' stuff
6/32
Obsolete - conform
meta w/ http-equiv img border=0
summary on a table
8/8/2019 How to win friends and influence people using html5 n' stuff
7/32
Obsolete - removed applet / noembed - embed / object
frame / frameset marquee, blink, tt, strike, u, big, center,
font, a bunch more
http://dev.w3.org/html5/spec/obsolete.html
8/8/2019 How to win friends and influence people using html5 n' stuff
8/32
5C
oolest HTML 5 Canvas
Video Web Sockets
W
ebW
orkers Web Storage
8/8/2019 How to win friends and influence people using html5 n' stuff
9/32
Getting Started
8/8/2019 How to win friends and influence people using html5 n' stuff
10/32
Detecting Features
Use modernizr.js
8/8/2019 How to win friends and influence people using html5 n' stuff
11/32
HTML Structure
8/8/2019 How to win friends and influence people using html5 n' stuff
12/32
HTML5 Structure
8/8/2019 How to win friends and influence people using html5 n' stuff
13/32
Video
implemented across the board* choices*
8/8/2019 How to win friends and influence people using html5 n' stuff
14/32
Containers +
Codecs
.flv
.avi , .mp4, .ogv - ogg video (theora) / ogg vorbis
WebM - VP8 Codec / vorbis H.264
8/8/2019 How to win friends and influence people using html5 n' stuff
15/32
Canvas
rectangle to draw on with javascript
multiple on 1 page individual state
2d,3d isnt in the standard
2d grid, top left corner (0,0)
8/8/2019 How to win friends and influence people using html5 n' stuff
16/32
Canvas(cont.)
text gradients images
video (even green screening)
8/8/2019 How to win friends and influence people using html5 n' stuff
17/32
Web Storage cookies
client has storage, why not use that? local storage - per domain, persist after
browser close
session storage - per page per window,lifetime of the window
userData *
8/8/2019 How to win friends and influence people using html5 n' stuff
18/32
Web workers
B
ackground Javascript! threads Cant access DOM - messaging
no access to parent page
8/8/2019 How to win friends and influence people using html5 n' stuff
19/32
Web workers (js)
8/8/2019 How to win friends and influence people using html5 n' stuff
20/32
WebSockets
client / server TCP sockets accounts for proxies / firewalls
simple
8/8/2019 How to win friends and influence people using html5 n' stuff
21/32
WebSockets (js)
8/8/2019 How to win friends and influence people using html5 n' stuff
22/32
WebSockets(Ruby)
8/8/2019 How to win friends and influence people using html5 n' stuff
23/32
Offline Web
Applications
Client Side SQL DB Caching
8/8/2019 How to win friends and influence people using html5 n' stuff
24/32
Client Side SQL
8/8/2019 How to win friends and influence people using html5 n' stuff
25/32
Geolocation not HTML5 Opt-in non-blocking Earth-centric
Cell vs Laptop Legacy (Palm, BB, Nokia, WM) -Geo.JS
8/8/2019 How to win friends and influence people using html5 n' stuff
26/32
Forms
range - number -
date -
8/8/2019 How to win friends and influence people using html5 n' stuff
27/32
Forms ( cont.) email
url tel
datetime color *
8/8/2019 How to win friends and influence people using html5 n' stuff
28/32
Forms (cont.)
Validations* Placeholders
autofocus
8/8/2019 How to win friends and influence people using html5 n' stuff
29/32
Microdata
item value pairs 5 global attributes (itemid, itemprop,itemref, itemscope, itemtype)
better Google results
8/8/2019 How to win friends and influence people using html5 n' stuff
30/32
Microdata(code)
8/8/2019 How to win friends and influence people using html5 n' stuff
31/32
Microdata(google)
8/8/2019 How to win friends and influence people using html5 n' stuff
32/32
More Info
http://w3.org/TR/html5-diff/ http://dev.w3.org/html5/spec/obsolete.html
http://www.modernizr.com/