html5
DESCRIPTION
TRANSCRIPT
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
• Questions?• www.twitter.com/matth
ewadavid• HTML5: Designing
Rich Internet Applications (Visualizing the Web)
• InsideRIA.com – jQuery Blog