Your SlideShare is downloading. ×
0
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
HTML5 Who what where when why how
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

HTML5 Who what where when why how

1,880

Published on

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

No Downloads
Views
Total Views
1,880
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
33
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. HTML5Who what where when why howBruce Lawson
  • 2. Archiutect pic
  • 3. XHTML 2<img />
  • 4. Thank you @mamipekohttp://d.hatena.ne.jp/Mamipeko/
  • 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. 2007 W3C HTML group revived
  • 7. Why HTML5 wins● Backwards compatibility, and a clear migration path.● Well-defined error handling.● Users should not be exposed to authoring errors.
  • 8. exciting demo
  • 9. <b><i>Yo!</b></i>
  • 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. HTML5 does not replace HTML 4.01
  • 12. HTML5 has more bling!
  • 13. HTML5 is umbrella term:markup elements and JavaScript APIs
  • 14. 30 new elements
  • 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. 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. Webforms – more powerful form elements
  • 18. standardise commonly-usedrich form elements – without JavaScript
  • 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. <video>
  • 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. <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. <video src=pudding.ogv controls autoplay poster=poster.jpg width=320 height=240> <a href=video.ogv>Download movie</a></video>
  • 24. All things are connected
  • 25. video as native object...why is it important?● “play nice” with rest of the page● keyboard accessibility built-in● API for controls
  • 26. offline support
  • 27. detect if a browsers goes offlinewindow.addEventListener(online, function(){ … }, true);window.addEventListener(offline, function(){ … }, true);
  • 28. storage
  • 29. localStorage/sessionStoragelike cookies...document.cookie = key=value; expires=Thu, 15 Feb 201023:59:59 UTC; path=/…/* convoluted string operations go here … */
  • 30. localStorage/sessionStoragelike cookies...on steroids!localStorage.setItem(key, value);localStorage.getItem(key);localStorage.clear();localStorage.key = value;if (localStorage.key == …) { … }…
  • 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. application cache
  • 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. is it all safe to use, right now?
  • 35. feature-detectionprogressive enhancement, graceful degradation http://diveinto.html5doctor.com/everything.html
  • 36. feature-detection for audio/videoif (!!document.createElement(video).canPlayType;) { … }if (!!document.createElement(audio).canPlayType;) { … }
  • 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. patching older browsersgithub.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  • 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. getUserMedia API(previously known as "HTML5 <device>")
  • 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. my.opera.com/core/blog/2011/03/23/webcam-orientation-preview
  • 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. "We expect to see WebRTC support in Firefox, Opera, and Chrome soon!" http://www.webrtc.org/
  • 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. www.opera.com/developer bruce.lawson@opera.com www.brucelawson.co.uk twitter.com/brucel

×