HTML5

Matthew David

What We Will Cover

• Brief History of HTML5• What is HTML5• HTML5 Elements• CSS3• Media – Video and Audio• SVG• Canvas• ECMAScript5• Web API• Viewing HTML5• Beyond HTML5

Brief History of HTML5

• Once upon a time…o Tim Berners Lee – 1989o Web Browser/Server – 1992o Mosaic – 1993o HTML 3.2/Netscape – 1995o HTML 4 – 1997o WASP/HTML5 - 2006

What is HTML5

• It is not one big “thing”o Developed by WASP – Web Standards Projecto Ian Hickson – Original Authoro Managed by W3C – Microsoft is co-chair

• HTML5 Pieceso New Elements/API’so CSS3o Video/Audioo SVG/Canvaso ECMAScript5

HTML5 Elements

• Header• Footer• Section• Articles• Aside• Nav

• Mark• Meter• Time• Summary• Source• Figure• Figcaption

CSS3

• Color Control - http://css3generator.com/• Gradient Colors - http://gradients.glrzad.com/• Rounded Corners -

http://www.cssportal.com/css3-rounded-corner/• Embedded Fonts – FontSquirrel.com• Animation -

http://westciv.com/tools/transforms/index.html• Details – www.CSS3.info

Media – Video/Audio

• Bit of a Mess• Video

o MPEG-4o Theorao WebMo http://videojs.com/

• Audioo MP3o AACo Vorbiso http://www.happyworm.com/jquery/jplayer/

• Flash Already Supports these

SVG/Canvas

• Proposed in 1999• SVG 1.1• Vector• Adobe Illustrator• Any Image in Google

Docs

• Developed by Apple• JavaScript driven

Vector/Bitmap drawings• Could compete with Flash

CS5• canvasdemos.com 

ECMAScript5/Web API

• No support for E4X • GeoLocation• Drag and Drop• Local Data / SQLite

Browser Support

• Desktopo Chromeo Safario Firefoxo Operao IE9

• Mobileo Mobile Safario Feneco Operao Android Browser (V8)

• http://html5readiness.com• Html5test.com• http://www.modernizr.com• Death to IE6

Beyond HTML5

• Complete HTML5 Standard• CSS4• SVG 2.0• MathML• GPU Acceleration• WebGL

QuestionsMatthewadavid@gmail.com

• Questions?• www.twitter.com/matth

ewadavid• HTML5: Designing

Rich Internet Applications (Visualizing the Web)

• InsideRIA.com – jQuery Blog