HTML5 Who what where when why how

HTML5
Who what where when why how
Bruce Lawson

Thank you @mamipeko
http://d.hatena.ne.jp/Mamipeko/

© 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/

Why HTML5 wins
●
Backwards compatibility, and a clear migration path.

● Well-defined error handling.

●
Users should not be exposed to authoring errors.

<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

HTML5 does not replace HTML 4.01

HTML5 is umbrella term:
markup elements and JavaScript APIs

Top 20 class names
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

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. banner
10. autonumber1 20. navigation
http://devfiles.myopera.com/articles/572/idlist-url.htm

Webforms – more powerful form elements

standardise commonly-used
rich 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

“...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 HTML5
http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html

<video src=pudding.ogv
controls
autoplay
poster=poster.jpg
width=320 height=240>
<a href=video.ogv>Download movie</a>
</video>

video as native object...why is it important?

● “play nice” with rest of the page
● keyboard accessibility built-in

● API for controls

detect if a browsers goes offline
window.addEventListener('online', function(){ … }, true);
window.addEventListener('offline', function(){ … }, true);

localStorage/sessionStorage
like cookies...
document.cookie = 'key=value; expires=Thu, 15 Feb 2010
23:59:59 UTC; path=/'
…

/* convoluted string operations go here … */

localStorage/sessionStorage
like 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 */
});
});

cache UI/resource files for 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

is it all safe to use, right now?

feature-detection
progressive 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.canvas
Modernizr.inputtypes.email

patching older browsers
github.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 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.

www.opera.com/developer
bruce.lawson@opera.com
www.brucelawson.co.uk
twitter.com/brucel

HTML5 Who what where when why how

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to HTML5 Who what where when why how

Similar to HTML5 Who what where when why how (20)

More from brucelawson

More from brucelawson (13)

Recently uploaded

Recently uploaded (20)

HTML5 Who what where when why how