HTML5 Who what where when why how

2,219 views
2,093 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

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

No notes for slide

HTML5 Who what where when why how

  1. 1. HTML5Who what where when why howBruce Lawson
  2. 2. Archiutect pic
  3. 3. XHTML 2<img />
  4. 4. Thank you @mamipekohttp://d.hatena.ne.jp/Mamipeko/
  5. 5. © Copyright 2004-2010 Apple Computer, Inc., Mozilla Foundation, and Opera SoftwareASA. You are granted a license to use, reproduce and create derivative works of thisdocument.http://www.whatwg.org/specs/web-apps/current-work/
  6. 6. 2007 W3C HTML group revived
  7. 7. Why HTML5 wins● Backwards compatibility, and a clear migration path.● Well-defined error handling.● Users should not be exposed to authoring errors.
  8. 8. exciting demo
  9. 9. <b><i>Yo!</b></i>
  10. 10. <b><i>Yo!</b></i> IE, Safari Opera, Firefox, Chrome<!DOCTYPE HTML> <!DOCTYPE HTML><html><HEAD></HEAD><BODY> <html><head></head><body><B><I>Yo!</I></B><I></I> <b><i>Yo!</b></i></BODY></html> </body></html> http://software.hixie.ch/utilities/js/live-dom-viewer
  11. 11. HTML5 does not replace HTML 4.01
  12. 12. HTML5 has more bling!
  13. 13. HTML5 is umbrella term:markup elements and JavaScript APIs
  14. 14. 30 new elements
  15. 15. Top 20 class names 1. footer 11. button 2. menu 12. main 3. style1 13. style34. msonormal 14. small 5. text 15. nav 6. content 16. clear 7. title 17. search 8. style2 18. style4 9. header 19. logo10. copyright 20. body http://devfiles.myopera.com/articles/572/classlist-url.htm
  16. 16. Top 20 id names 1. footer 11. search 2. content 12. nav 3. header 13. wrapper 4. logo 14. top 5. container 15. table2 6. main 16. layer2 7. table1 17. sidebar 8. menu 18. image1 9. layer1 19. banner10. autonumber1 20. navigation http://devfiles.myopera.com/articles/572/idlist-url.htm
  17. 17. Webforms – more powerful form elements
  18. 18. standardise commonly-usedrich form elements – without JavaScript
  19. 19. built-in validation (of course you should still validate on the server) <input type=email> <input type=url required> <input type=range min=10 max=100> <input type=date min=2010-01-01 max=2010-12-31><input pattern="[0-9][A-Z]{3}" placeholder="9AAA"> http://people.opera.com/brucel/demo/html5-forms-demo.html
  20. 20. <video>
  21. 21. “...extending the language to better support Webapplications, since that is one of the directions the Web isgoing in and is one of the areas least well served by HTMLso far. This puts HTML in direct competition with othertechnologies intended for applications deployed over theWeb, in particular Flash and Silverlight.”Ian Hickson, Editor of HTML5http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
  22. 22. <object width="425" height="344"> <param name="movie"value="http://www.example.com/v/9sEI1AUFJKw&hl=en&fs=1&"></param> <param name="allowFullScreen"value="true"></param> <param name="allowscriptaccess"value="always"></param> <embedsrc="http://www.example.com/v/9sEI1AUFJKw&hl=en&fs=1&" type="application/x-shockwave-flash"allowscriptaccess="always" allowfullscreen="true"width="425" height="344"></embed></object>
  23. 23. <video src=pudding.ogv controls autoplay poster=poster.jpg width=320 height=240> <a href=video.ogv>Download movie</a></video>
  24. 24. All things are connected
  25. 25. video as native object...why is it important?● “play nice” with rest of the page● keyboard accessibility built-in● API for controls
  26. 26. offline support
  27. 27. detect if a browsers goes offlinewindow.addEventListener(online, function(){ … }, true);window.addEventListener(offline, function(){ … }, true);
  28. 28. storage
  29. 29. localStorage/sessionStoragelike cookies...document.cookie = key=value; expires=Thu, 15 Feb 201023:59:59 UTC; path=/…/* convoluted string operations go here … */
  30. 30. localStorage/sessionStoragelike cookies...on steroids!localStorage.setItem(key, value);localStorage.getItem(key);localStorage.clear();localStorage.key = value;if (localStorage.key == …) { … }…
  31. 31. Web Database – full relational DB / SQLvar db =openDatabase(dbName, version, displayName, expectedSize);db.transaction(function(tx) { tx.executeSql(sqlStatement, [], function (tx, result) { /* do something with the results */ });});
  32. 32. application cache
  33. 33. cache UI/resource files for offline use<html manifest=”blah.manifest”>CACHE MANIFEST# send this with correct text/cache-manifest MIMEimages/sprites.pngscripts/common.jsscripts/jquery.jsstyles/global.css
  34. 34. is it all safe to use, right now?
  35. 35. feature-detectionprogressive enhancement, graceful degradation http://diveinto.html5doctor.com/everything.html
  36. 36. feature-detection for audio/videoif (!!document.createElement(video).canPlayType;) { … }if (!!document.createElement(audio).canPlayType;) { … }
  37. 37. <html class="no-js"><html class="js canvas canvastext no-geolocation rgba hsla multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface"> Modernizr.canvas Modernizr.inputtypes.email
  38. 38. patching older browsersgithub.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  39. 39. yepnope({ test : Modernizr.hashchange &&Modernizr.history, nope : resources/jquery.ba-hashchange.js});http://net.tutsplus.com/tutorials/javascript-ajax/easy-script-loading-with-yepnope-js/
  40. 40. getUserMedia API(previously known as "HTML5 <device>")
  41. 41. <video autoplay></video><script>var video = document.querySelector(video);If (navigator.getUserMedia){navigator.getUserMedia(video,successCallback,errorCallback);function successCallback(stream) { video.src = stream; }...</script>
  42. 42. my.opera.com/core/blog/2011/03/23/webcam-orientation-preview
  43. 43. WebRTC is a free, open project that enables web browsers with Real-Time Communications (RTC) capabilities viasimple Javascript APIs. The WebRTC components have been optimized to best serve this purpose. The WebRTC initiative is a project supported by Google, Mozilla and Opera. http://sites.google.com/site/webrtc/http://www.whatwg.org/specs/web-apps/current-work/complete/video-conferencing- and-peer-to-peer-communication.html
  44. 44. "We expect to see WebRTC support in Firefox, Opera, and Chrome soon!" http://www.webrtc.org/
  45. 45. Photo credits Crowd goes wild http://www.flickr.com/photos/specialk-files/428060061/sizes/m/in/photostream/ Mamipekos nails and face by Mamipeko, @mamipeko http://d.hatena.ne.jp/Mamipeko/ used with permission All 5 Mamipekos nails togetherhttp://www.flickr.com/photos/drzuco/4826509298/sizes/o/in/photostream/ (with permission) Gigapudding video used with kind permission of Takura Tomy HTML5 nazi-killing Bruce on unicorn picture by Marina Lawson. Buy her Dads book. Microsoft clippy belongs to Microsoft. But is loved by the world. All others, me (all rights reserved) or (I believe) public domain.
  46. 46. www.opera.com/developer bruce.lawson@opera.com www.brucelawson.co.uk twitter.com/brucel

×