HTML5 Who what where when why how
70
HTML5 Who what where when why how Bruce Lawson
-
Upload
brucelawson -
Category
Technology
-
view
1.871 -
download
4
Transcript of HTML5 Who what where when why how
HTML5Who what where when why how
Bruce Lawson
Archiutect pic
XHTML 2<img />
© Copyright 2004-2010 Apple 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/
2007 W3C HTML group revived
Why HTML5 wins
● Backwards compatibility, and a clear migration path.
● Well-defined error handling.
● Users should not be exposed to authoring errors.
exciting demo
<b><i>Yo!</b></i>
<b><i>Yo!</b></i>IE, Safari
<!DOCTYPE HTML><html><HEAD></HEAD><BODY><B><I>Yo!</I></B><I></I></BODY></html>
Opera, Firefox, Chrome
<!DOCTYPE HTML><html><head></head><body><b><i>Yo!</b></i></body></html>
http://software.hixie.ch/utilities/js/live-dom-viewer
HTML5 does not replace HTML 4.01
HTML5 has more bling!
HTML5 is umbrella term:markup elements and JavaScript APIs
30 new elements 30 new elements
Top 20 class names1. 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
Top 20 id names1. 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
Webforms – more powerful form elements
standardise commonly-usedrich form elements – without JavaScript
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
<video>
“...extending the language to 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 HTML5http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
<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&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
<video src=pudding.ogv controls autoplay poster=poster.jpg width=320 height=240> <a href=video.ogv>Download movie</a></video>
All things are connectedAll things are connected
video as native object...why is it important?
● “play nice” with rest of the page● keyboard accessibility built-in● API for controls
offline support
detect if a browsers goes offline
window.addEventListener('online', function(){ … }, true);window.addEventListener('offline', function(){ … }, true);
storage
localStorage/sessionStoragelike cookies...
document.cookie = 'key=value; expires=Thu, 15 Feb 2010 23:59:59 UTC; path=/'…/* convoluted string operations go here … */
localStorage/sessionStoragelike cookies...on steroids!
localStorage.setItem(key, value);localStorage.getItem(key);localStorage.clear();localStorage.key = value;if (localStorage.key == '…') { … }…
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 */
});});
application cache
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
is it all safe to use, right now?
feature-detectionprogressive enhancement, graceful degradation
http://diveinto.html5doctor.com/everything.html
feature-detection for audio/video
if (!!document.createElement('video').canPlayType;) { … }if (!!document.createElement('audio').canPlayType;) { … }
<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.canvasModernizr.inputtypes.email
patching older browsersgithub.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
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/
getUserMedia API(previously known as "HTML5 <device>")
<video autoplay></video><script>var video = document.querySelector(video);
If (navigator.getUserMedia) {navigator.getUserMedia('video',successCallback, errorCallback);
function successCallback(stream) { video.src = stream; }...</script>
my.opera.com/core/blog/2011/03/23/webcam-orientation-preview
WebRTC is a free, 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
"We expect to see WebRTC support in Firefox, Opera, and Chrome soon!"
http://www.webrtc.org/
Photo creditsCrowd goes wild
http://www.flickr.com/photos/specialk-files/428060061/sizes/m/in/photostream/
Mamipeko's nails and face by Mamipeko, @mamipekohttp://d.hatena.ne.jp/Mamipeko/ used with permission
All 5 Mamipeko's 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 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.
