how to win friends and influence people using html5 n' stuff

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


2/32

What?

HTML4++ XHTML2 worked in html4? Works in 5!

collection of features


3/32

Warning

Working Draft - Stuff might change W3C recommendation late 2010? Candidate Recommendation 2012

Ian Hickson - 2022 or later forW3CR


4/32

W3C

Working Draft

Last Call Working Draft Candidate Recommendation

Proposed Recommendation W3C Recommendation


5/32

Browsers

Chrome

Safari Opera Firefox

IE 9 IE < 9 (LOL) + Google Chrome Frame?


6/32

Obsolete - conform

meta w/ http-equiv img border=0

summary on a table


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/32

5C

oolest HTML 5 Canvas

Video Web Sockets

W

ebW

orkers Web Storage


9/32

Getting Started


10/32

Detecting Features

Use modernizr.js


11/32

HTML Structure


12/32

HTML5 Structure


13/32

Video

implemented across the board* choices*


14/32

Containers +

Codecs

.flv

.avi , .mp4, .ogv - ogg video (theora) / ogg vorbis

WebM - VP8 Codec / vorbis H.264


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)


16/32

Canvas(cont.)

text gradients images

video (even green screening)


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 *


18/32

Web workers

B

ackground Javascript! threads Cant access DOM - messaging

no access to parent page


19/32

Web workers (js)


20/32

WebSockets

client / server TCP sockets accounts for proxies / firewalls

simple


21/32

WebSockets (js)


22/32

WebSockets(Ruby)


23/32

Offline Web

Applications

Client Side SQL DB Caching


24/32

Client Side SQL


25/32

Geolocation not HTML5 Opt-in non-blocking Earth-centric

Cell vs Laptop Legacy (Palm, BB, Nokia, WM) -Geo.JS


26/32

Forms

range - number -

date -


27/32

Forms ( cont.) email

url tel

datetime color *


28/32

Forms (cont.)

Validations* Placeholders

autofocus


29/32

Microdata

item value pairs 5 global attributes (itemid, itemprop,itemref, itemscope, itemtype)

better Google results


30/32

Microdata(code)


31/32

Microdata(google)


32/32

More Info

http://w3.org/TR/html5-diff/ http://dev.w3.org/html5/spec/obsolete.html

http://www.modernizr.com/

how to win friends and influence people using html5 n' stuff

Documents