HTML5 Matthew David
What We Will Cover <ul><ul><li>Brief History of HTML5 </li></ul></ul><ul><ul><li>What is HTML5 </li></ul></ul><ul><ul><li>...
Brief History of HTML5 <ul><ul><li>Once upon a time… </li></ul></ul><ul><ul><ul><li>Tim Berners Lee – 1989 </li></ul></ul>...
What is HTML5 <ul><ul><li>It is not one big “thing” </li></ul></ul><ul><ul><ul><li>Developed by WASP – Web Standards Proje...
HTML5 Elements <ul><ul><li>Header </li></ul></ul><ul><ul><li>Footer </li></ul></ul><ul><ul><li>Section </li></ul></ul><ul>...
CSS3 <ul><ul><li>Color Control -  http://css3generator.com/ </li></ul></ul><ul><ul><li>Gradient Colors -  http://gradients...
Media – Video/Audio <ul><ul><li>Bit of a Mess </li></ul></ul><ul><ul><li>Video </li></ul></ul><ul><ul><ul><li>MPEG-4 </li>...
SVG/Canvas <ul><ul><li>Proposed in 1999 </li></ul></ul><ul><ul><li>SVG 1.1 </li></ul></ul><ul><ul><li>Vector </li></ul></u...
ECMAScript5/Web API <ul><ul><li>No support for E4X </li></ul></ul><ul><ul><li>GeoLocation </li></ul></ul><ul><ul><li>Drag ...
Browser Support <ul><ul><li>Desktop </li></ul></ul><ul><ul><ul><li>Chrome </li></ul></ul></ul><ul><ul><ul><li>Safari </li>...
Beyond HTML5 <ul><ul><li>Complete HTML5 Standard </li></ul></ul><ul><ul><li>CSS4 </li></ul></ul><ul><ul><li>SVG 2.0 </li><...
Questions [email_address] <ul><ul><li>Questions? </li></ul></ul><ul><ul><li>www.twitter.com/matthewadavid </li></ul></ul><...
Upcoming SlideShare
Loading in …5
×

HTML5

1,502 views
1,440 views

Published on

Published in: Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,502
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
53
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • http://www.w3schools.com/html5/html5_reference.asp
  • HTML5

    1. 1. HTML5 Matthew David
    2. 2. What We Will Cover <ul><ul><li>Brief History of HTML5 </li></ul></ul><ul><ul><li>What is HTML5 </li></ul></ul><ul><ul><li>HTML5 Elements </li></ul></ul><ul><ul><li>CSS3 </li></ul></ul><ul><ul><li>Media – Video and Audio </li></ul></ul><ul><ul><li>SVG </li></ul></ul><ul><ul><li>Canvas </li></ul></ul><ul><ul><li>ECMAScript5 </li></ul></ul><ul><ul><li>Web API </li></ul></ul><ul><ul><li>Viewing HTML5 </li></ul></ul><ul><ul><li>Beyond HTML5 </li></ul></ul>
    3. 3. Brief History of HTML5 <ul><ul><li>Once upon a time… </li></ul></ul><ul><ul><ul><li>Tim Berners Lee – 1989 </li></ul></ul></ul><ul><ul><ul><li>Web Browser/Server – 1992 </li></ul></ul></ul><ul><ul><ul><li>Mosaic – 1993 </li></ul></ul></ul><ul><ul><ul><li>HTML 3.2/Netscape – 1995 </li></ul></ul></ul><ul><ul><ul><li>HTML 4 – 1997 </li></ul></ul></ul><ul><ul><ul><li>WASP/HTML5 - 2006 </li></ul></ul></ul>
    4. 4. What is HTML5 <ul><ul><li>It is not one big “thing” </li></ul></ul><ul><ul><ul><li>Developed by WASP – Web Standards Project </li></ul></ul></ul><ul><ul><ul><li>Ian Hickson – Original Author </li></ul></ul></ul><ul><ul><ul><li>Managed by W3C – Microsoft is co-chair </li></ul></ul></ul><ul><ul><li>HTML5 Pieces </li></ul></ul><ul><ul><ul><li>New Elements/API’s </li></ul></ul></ul><ul><ul><ul><li>CSS3 </li></ul></ul></ul><ul><ul><ul><li>Video/Audio </li></ul></ul></ul><ul><ul><ul><li>SVG/Canvas </li></ul></ul></ul><ul><ul><ul><li>ECMAScript5 </li></ul></ul></ul>
    5. 5. HTML5 Elements <ul><ul><li>Header </li></ul></ul><ul><ul><li>Footer </li></ul></ul><ul><ul><li>Section </li></ul></ul><ul><ul><li>Articles </li></ul></ul><ul><ul><li>Aside </li></ul></ul><ul><ul><li>Nav </li></ul></ul><ul><ul><li>Mark </li></ul></ul><ul><ul><li>Meter </li></ul></ul><ul><ul><li>Time </li></ul></ul><ul><ul><li>Summary </li></ul></ul><ul><ul><li>Source </li></ul></ul><ul><ul><li>Figure </li></ul></ul><ul><ul><li>Figcaption </li></ul></ul>
    6. 6. CSS3 <ul><ul><li>Color Control - http://css3generator.com/ </li></ul></ul><ul><ul><li>Gradient Colors - http://gradients.glrzad.com/ </li></ul></ul><ul><ul><li>Rounded Corners - http://www.cssportal.com/css3-rounded-corner/ </li></ul></ul><ul><ul><li>Embedded Fonts – FontSquirrel.com </li></ul></ul><ul><ul><li>Animation - http://westciv.com/tools/transforms/index.html </li></ul></ul><ul><ul><li>Details – www.CSS3.info </li></ul></ul>
    7. 7. Media – Video/Audio <ul><ul><li>Bit of a Mess </li></ul></ul><ul><ul><li>Video </li></ul></ul><ul><ul><ul><li>MPEG-4 </li></ul></ul></ul><ul><ul><ul><li>Theora </li></ul></ul></ul><ul><ul><ul><li>WebM </li></ul></ul></ul><ul><ul><ul><li>http://videojs.com/ </li></ul></ul></ul><ul><ul><li>Audio </li></ul></ul><ul><ul><ul><li>MP3 </li></ul></ul></ul><ul><ul><ul><li>AAC </li></ul></ul></ul><ul><ul><ul><li>Vorbis </li></ul></ul></ul><ul><ul><ul><li>http://www.happyworm.com/jquery/jplayer/ </li></ul></ul></ul><ul><ul><li>Flash Already Supports these </li></ul></ul>
    8. 8. SVG/Canvas <ul><ul><li>Proposed in 1999 </li></ul></ul><ul><ul><li>SVG 1.1 </li></ul></ul><ul><ul><li>Vector </li></ul></ul><ul><ul><li>Adobe Illustrator </li></ul></ul><ul><ul><li>Any Image in Google Docs </li></ul></ul><ul><ul><li>Developed by Apple </li></ul></ul><ul><ul><li>JavaScript driven Vector/Bitmap drawings </li></ul></ul><ul><ul><li>Could compete with Flash CS5 </li></ul></ul><ul><ul><li>canvasdemos.com  </li></ul></ul>
    9. 9. ECMAScript5/Web API <ul><ul><li>No support for E4X </li></ul></ul><ul><ul><li>GeoLocation </li></ul></ul><ul><ul><li>Drag and Drop </li></ul></ul><ul><ul><li>Local Data / SQLite </li></ul></ul>
    10. 10. Browser Support <ul><ul><li>Desktop </li></ul></ul><ul><ul><ul><li>Chrome </li></ul></ul></ul><ul><ul><ul><li>Safari </li></ul></ul></ul><ul><ul><ul><li>Firefox </li></ul></ul></ul><ul><ul><ul><li>Opera </li></ul></ul></ul><ul><ul><ul><li>IE9 </li></ul></ul></ul><ul><ul><li>Mobile </li></ul></ul><ul><ul><ul><li>Mobile Safari </li></ul></ul></ul><ul><ul><ul><li>Fenec </li></ul></ul></ul><ul><ul><ul><li>Opera </li></ul></ul></ul><ul><ul><ul><li>Android Browser (V8) </li></ul></ul></ul><ul><ul><li>http://html5readiness.com </li></ul></ul><ul><ul><li>Html5test.com </li></ul></ul><ul><ul><li>http://www.modernizr.com </li></ul></ul><ul><ul><li>Death to IE6 </li></ul></ul>
    11. 11. Beyond HTML5 <ul><ul><li>Complete HTML5 Standard </li></ul></ul><ul><ul><li>CSS4 </li></ul></ul><ul><ul><li>SVG 2.0 </li></ul></ul><ul><ul><li>MathML </li></ul></ul><ul><ul><li>GPU Acceleration </li></ul></ul><ul><ul><li>WebGL </li></ul></ul>
    12. 12. Questions [email_address] <ul><ul><li>Questions? </li></ul></ul><ul><ul><li>www.twitter.com/matthewadavid </li></ul></ul><ul><ul><li>HTML5: Designing Rich Internet Applications (Visualizing the Web) </li></ul></ul><ul><ul><li>InsideRIA.com – jQuery Blog </li></ul></ul>

    ×