Download as PDF, PPTX
![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](https://image.slidesharecdn.com/html5-live-111028131121-phpapp01/85/HTML5-Who-what-where-when-why-how-34-320.jpg)
![Web Database – full relational DB / SQL
var db =
openDatabase(dbName, version, displayName, expectedSize);
db.transaction(function(tx) {
tx.executeSql(sqlStatement, [], function (tx, result) {
/* do something with the results */
});
});](https://image.slidesharecdn.com/html5-live-111028131121-phpapp01/85/HTML5-Who-what-where-when-why-how-49-320.jpg)
More Related Content
![[jqconatx] Adaptive Images for Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-imagesv14-130911193737-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to HTML5 Who what where when why how
![Web Standards: Fueling Innovation [Web Builder 2.0 - 2008]](https://cdn.slidesharecdn.com/ss_thumbnails/web-standards-fueling-innovation-wb20-1226797439864695-9-thumbnail.jpg?width=640&height=640&fit=bounds)
![5G Explained! A High Level Overview [Introduction]](https://cdn.slidesharecdn.com/ss_thumbnails/5gexplainedahighleveloverview-260119165306-cc137a3e-thumbnail.jpg?width=640&height=640&fit=bounds)
HTML5 Who what where when why how
- 1. HTML5 Who what wherewhen why how Bruce Lawson
- 3.
- 10.
- 11.
- 13. © Copyright 2004-2010Apple Computer, Inc., Mozilla Foundation, and Opera Software ASA. You are granted a license to use, reproduce and create derivative works of this document. http://www.whatwg.org/specs/web-apps/current-work/
- 15. 2007 W3C HTMLgroup revived
- 19. Why HTML5 wins ● Backwards compatibility, and a clear migration path. ● Well-defined error handling. ● Users should not be exposed to authoring errors.
- 20.
- 21.
- 22. <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
- 23. HTML5 does notreplace HTML 4.01
- 24. HTML5 has morebling!
- 25. HTML5 is umbrellaterm: markup elements and JavaScript APIs
- 26.
- 28. Top 20 classnames 1. footer 11. button 2. menu 12. main 3. style1 13. style3 4. msonormal 14. small 5. text 15. nav 6. content 16. clear 7. title 17. search 8. style2 18. style4 9. header 19. logo 10. copyright 20. body http://devfiles.myopera.com/articles/572/classlist-url.htm
- 29. Top 20 idnames 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. banner 10. autonumber1 20. navigation http://devfiles.myopera.com/articles/572/idlist-url.htm
- 31. Webforms – morepowerful form elements
- 33. standardise commonly-used rich formelements – without JavaScript
- 34. 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
- 38.
- 39. “...extending the languageto better support Web applications, since that is one of the directions the Web is going in and is one of the areas least well served by HTML so far. This puts HTML in direct competition with other technologies intended for applications deployed over the Web, in particular Flash and Silverlight.” Ian Hickson, Editor of HTML5 http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
- 40. <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> <embed src="http://www.example.com/v/9sEI1AUFJKw&hl=en&f s=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed> </object>
- 41. <video src=pudding.ogv controls autoplay poster=poster.jpg width=320 height=240> <a href=video.ogv>Download movie</a> </video>
- 42. All things areconnected
- 43. video as nativeobject...why is it important? ● “play nice” with rest of the page ● keyboard accessibility built-in ● API for controls
- 44.
- 45. detect if abrowsers goes offline window.addEventListener('online', function(){ … }, true); window.addEventListener('offline', function(){ … }, true);
- 46.
- 47. localStorage/sessionStorage like cookies... document.cookie ='key=value; expires=Thu, 15 Feb 2010 23:59:59 UTC; path=/' … /* convoluted string operations go here … */
- 48. localStorage/sessionStorage like cookies...on steroids! localStorage.setItem(key,value); localStorage.getItem(key); localStorage.clear(); localStorage.key = value; if (localStorage.key == '…') { … } …
- 49. Web Database –full relational DB / SQL var db = openDatabase(dbName, version, displayName, expectedSize); db.transaction(function(tx) { tx.executeSql(sqlStatement, [], function (tx, result) { /* do something with the results */ }); });
- 50.
- 51. cache UI/resource filesfor offline use <html manifest=”blah.manifest”> CACHE MANIFEST # send this with correct text/cache-manifest MIME images/sprites.png scripts/common.js scripts/jquery.js styles/global.css
- 52. is it allsafe to use, right now?
- 54. feature-detection progressive enhancement, gracefuldegradation http://diveinto.html5doctor.com/everything.html
- 55. feature-detection for audio/video if(!!document.createElement('video').canPlayType;) { … } if (!!document.createElement('audio').canPlayType;) { … }
- 56. <html class="no-js"> <html class="jscanvas 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
- 60.
- 61. 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/
- 62. getUserMedia API (previously knownas "HTML5 <device>")
- 63. <video autoplay></video> <script> var video= document.querySelector(video); If (navigator.getUserMedia) {navigator.getUserMedia('video',successCallback, errorCallback); function successCallback(stream) { video.src = stream; } ... </script>
- 64.
- 65. WebRTC is afree, open project that enables web browsers with Real-Time Communications (RTC) capabilities via simple 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
- 66. "We expect tosee WebRTC support in Firefox, Opera, and Chrome soon!" http://www.webrtc.org/
- 68. Photo credits Crowd goes wild http://www.flickr.com/photos/specialk-files/428060061/sizes/m/in/photostream/ Mamipeko's nails and face by Mamipeko, @mamipeko http://d.hatena.ne.jp/Mamipeko/ used with permission All 5 Mamipeko's nails together http://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 Dad's book. Microsoft clippy belongs to Microsoft. But is loved by the world. All others, me (all rights reserved) or (I believe) public domain.
- 70. www.opera.com/developer bruce.lawson@opera.com www.brucelawson.co.uk twitter.com/brucel