Disruptive code

The Zen of HTML5
Bruce Lawson, Opera Software

Disruptive Code / Stockholm / 21 September 2010

การรแจงของ HTML5

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

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

Styling HTML5 elements

article, nav, header, footer
{display:block;}

document.createElement ('article');

http://html5shim.googlecode.com/svn/trunk/html5.js

In HTML5, these are all equivalent
<h1>Today's top stories</h1>

<article>
<h3>Dog bites man</h3>
...

<article>

“Sections may contain headings of any rank, but authors
are strongly encouraged to either use only h1 elements, or
to use elements of the appropriate rank for the section's
nesting level.” http://www.w3.org/TR/html5/sections.html#headings-and-sections


<article>
...

<article>

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=video.ogv
controls
autoplay
poster=poster.jpg
width=320 height=240>
<a href=video.ogv>Download movie</a>
</video>

video format debates – Free formats vs MP4
<video controls autoplay poster=… width=… height=…>
<source src=movie.webm type=video/webm>
<source src=movie.mp4 type=video/mp4>
<source src=movie.ogv type=video/ogg>

</video>

still include fallback for old browsers
http://camendesign.com/code/video_for_everybody

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

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

● API for controls

controlling video with JavaScript
<script>
/* grab the first video element */
var video = document.getElementsByTagName('video')[0];
/* remove the browser-supplied controls, cos we're
scripting our own */
video.removeAttribute('controls');
</script>

<video controls>
</video>

<input type=button value="play / pause"
onclick="if (video.paused) video.play(); else
video.pause()">

video accessibility
<video controls autoplay poster=… width=… height=…>
<source src=movie.mp4 type=video/mp4>
<source src=movie.ogv type=video/ogg>

<track src=subtitles.srt kind=subtitles srclang=en>


</video>

http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#the-track-element
http://www.delphiki.com/html5/playr/

video media queries
<video controls>
<source src=hi-res.ogv media=”(min-device-width:800px)”>
<source src=lo-res.ogv>
</video>

http://dev.w3.org/html5/spec/video.html#the-source-element

canvas = “scriptable images”

canvas has standard API methods for drawing
ctx = canvas.getContext("2d");

ctx.fillStyle = 'blue';
ctx.fillRect(x, y, width, height);
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, y);
ctx.bezierCurveTo(x1, y1, x2, y2, c1, c2);

canvas text
ctxt.fillStyle = '#00f';
ctx.font = 'italic 30px sans-serif';
ctx.textBaseline = 'top';
ctx.fillText('Hello world!', 0, 0);
ctx.font = 'bold 30px sans-serif';
ctx.strokeText('Hello world!', 0, 50)

Scalable Vector Graphics:

● Supported in 4 modern browsers, and IE9
● Vector graphics, therefore infinitely scalable

● XML so text-based - can be made accessible

● Keeps a DOM

● Can author with Adobe Illustrator or Inkscape

canvas > “scriptable images”

canvas can mix with external graphics / video
var ctx =
document.querySelector('canvas').getContext('2d'),
img = document.createElement('img');

img.onload = function ()
{
ctx.drawImage(img, 0, 0);
var pixels = ctx.getImageData(0, 0, img.width,
img.height);
...
};
img.src = 'authors.jpg';

canvas can access every pixel
img.onload = function () {
...
var pixels = ctx.getImageData(0, 0, img.width,
img.height);

for (var i = 0, n = pixels.data.length; i < n;
i += 4) {
pixels.data[i+0] = 255 - pixels.data[i+0]; // red
pixels.data[i+1] = 255 - pixels.data[i+2]; // green
pixels.data[i+2] = 255 - pixels.data[i+1]; // blue
// i + 3 is the alpha channel which we don’t need
}
ctx.putImageData(pixels, 0, 0);
};
img.src = 'authors.jpg';

canvas and video, sitting in a tree!
var video = document.querySelector('video');
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

addEvent(video, 'timeupdate', function () {

// ctx.restore();

ctx.drawImage(video, 0, 0, video.width,
video.height, 0, 0, canvas.width, canvas.height);
});

http://html5demos.com/video-canvas

http://www.craftymind.com/factory/html5video/CanvasVideo.html

Photo credits

Swinging London
http://www.flickr.com/photos/nationalarchives/3008584298/

Cute NEWT by Rob Winters @Robwinters

Sharks with lasers:
http://www.flickr.com/photos/starstreak007/3416655056/

HTML5 rocks by Alex Sexton
Used with permission

All others, me

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

Disruptive code

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to Disruptive code

Similar to Disruptive code (20)

More from brucelawson

More from brucelawson (12)

Disruptive code