brave new world of html5 - webtech 2010 milano 09.11.2010
TRANSCRIPT
Brave new world of HTML5
Patrick H. Lauke / WebTech 2010 / Milano / 9 Novembre 2010
CONTEXTUALISING THE NEW TECHNOLOGIES
"there is already a lot of excitement for HTML5, but it’s a little too early to deploy it because we’re running into interoperability issues."
Philippe Le Hegaret, W3C interaction domain leader
blogs.techrepublic.com.com/hiner/?p=6369
http://www.flickr.com/photos/24374884@N08/4603715307/
2004 W3C focus on XHTML 2.0…the future is XML-based!
http://www.flickr.com/photos/craiga/17071467/
“...extending the language to better support Web applications [...] This puts HTML in direct competition with other technologies[...] , in particular Flash and Silverlight.”
Ian Hickson, Editor of HTML5http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
HTML5 specification forbrowser developers
(how to interpret markup/code – no more reverse engineering)
for authors: HTML5 differences from HTML4http://www.w3.org/TR/html5-diff/
XHTML 1.0<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
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
new and old browsers “support” these(although some need a little extra help)
header, footer, … { display: block; }
Internet Explorer <9 needs extra training wheels
document.createElement('header');document.createElement('footer');…
http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2
rich form elements – without faking them in JS
<input type=”date”><input type=”time”><input type=”month”><input type=”week”><input type=”datetime” … ><input type=”range”><input type=”number”>
<input type=”file” multiple>
<input … autofocus><input … autocomplete>
types und attributes withbuilt-in validation<input … required><input type=”tel”><input type=”email”><input type=”url”><input … pattern="[a-z]{3}[0-9]{3}">
<object width="425" height="344"><param name="movie"
value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/9sEI1AUFJKw&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
<video src="video.webm" controls autoplay loop preload poster="poster.jpg" width="320" height="240"> <a href="video.webm">Download movie</a></video>
controlling <video> with JavaScript
var v = document.getElementById('player');
v.play();v.pause();v.volume = … ;v.currentTime = … ;…
events fired by <video>
var v = document.getElementById('player');
v.addEventListener('loadeddata', function() { … }, true)v.addEventListener('play', function() { … }, true)v.addEventListener('pause', function() { … }, true)v.addEventListener('timeupdate', function() { … }, true)v.addEventListener('ended', function() { … }, true)…
providing multiple sources<video controls autoplay poster="…" width="…" height="…">
<source src="movie.mp4" type="video/mp4" /><source src="movie.webm" type="video/webm" /><source src="movie.ogv" type="video/ogg" /><!-- fallback content -->
</video>
flash fallback for older browsershttp://camendesign.com/code/video_for_everybody
<video controls autoplay poster="…" width="…" height="…"><source src="movie.mp4" type="video/mp4" /><source src="movie.webm" type="video/webm" /><source src="movie.ogv" type="video/ogg" />
<object width="…" height="…" type="application/x-shockwave-flash" data="player.swf">
<param name="movie" value="player.swf" /><param name="flashvars" value=" … file=movie.mp4" /><!-- fallback content -->
</object>
</video>
audio...exactly the same as video
<audio src=”music.mp3” controls autoplay … ></audio>
<audio controls autoplay><source src="music.mp3" type="audio/mpeg" /><source src="music.oga" type="audio/ogg" /><!-- fallback content -->
</audio>
formats: MP3 vs Ogg Vorbis (vs WAV)
canvas has standard API methods for drawing
ctx = canvas.getContext("2d");
ctx.fillRect(x, y, width, height);ctx.beginPath();ctx.moveTo(x, y);ctx.lineTo(x, y);ctx.bezierCurveTo(x1, y1, x2, y2, c1, c2);
ctx.drawImage(…);
geolocationnavigator.geolocation.getCurrentPosition(success, error);navigator.geolocation.watchCurrentPosition(success, error);
function success(position) {/* where's Wally? */var lat = position.coords.latitude;var long = position.coords.longitude;...
}
offline detection...
window.addEventListener('online', function(){ … }, true);window.addEventListener('offline', function(){ … }, true);
and application cache<html manifest=”blah.manifest”>
CACHE MANIFEST# send this with correct text/cache-manifest MIMEimages/sprites.pngscripts/common.jsscripts/jquery.jsstyles/global.cssdata.xml
and much more...
don't do browser sniffing
http://www.flickr.com/photos/timdorr/2096272747/
feature-detectionprogressive enhancement, graceful degradation
http://diveintohtml5.org/everything.html
feature-detection for audio/video
if (!!document.createElement('video').canPlayType;) { … }
if (!!document.createElement('audio').canPlayType;) { … }
patching older browsersgithub.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
www.opera.com/developerpeople.opera.com/patrickl/presentations/webtech_09.11.2010/webtech_09.11.2010.pdf