In this talk Chris Heilmann and Robert Nyman de-mystify some of the rumours around HTML5 and show you just how many tasks of day-to-day app development can be done by the browser for you rather than having to write all the code by yourself. Life as a front-end developer is much easier than you think - if you keep up-to-date and embrace the movement that wants to make the web an easier and faster place for all.
The audio of the talk is available at http://www.archive.org/details/Html5IsHere-ChrisHeilmannAndRobertNymanAtFosdem2011
18. A few things we did with JS are now built-in:
Autofocus:
<input autofocus name="name">
Default content:
<input placeholder="please enter your name" name="name">
Autocomplete:
<input autocomplete name="name">
Limits and steps:
<input min="0" max="360" step="5" name="angle"
type="number">
Multiple:
<input multiple type="file" type="email">
<input multiple type="email" type="file">
Related elements:
<output> <meter> <progress>
20. Or something the browser can do for you...
Required:
<input required name="name">
Pattern:
<input pattern="[0-9]{5}" name="postleitzahl">
Firefox Webkit Opera
input:valid { background:lime }
input:invalid { background:red; color:white }
22. So we have:
Richer form elements with native support
In-built validation
Events and attributes for custom validation
Time and Date functionality
No more need for terrible client side validation
Almost browser support (needs bitching!)
44. HTML5 audio and video make things much simpler:
Video and audio are just like any other HTML
element
Native controls provided by the browser
Better accessibility (keyboard navigation)
Native and simple API (Flash APIs varied from
provider to provider)
Easy interaction with other technologies
(Canvas, CSS)
46. Embedding video for all browsers:
<video controls>
<source src="http://www.archive.org/{...}_512kb.mp4"
type="video/mp4"
media="(min-device-width:800px)"></source>
<source src="http://www.archive.org/{...}_low.mp4"
type="video/mp4"></source>
<source src="http://www.archive.org/{...}.webm"
type="video/webm"></source>
<source src="http://www.archive.org/{...}.ogv"
type="video/ogg"></source>
<p>Watch the movie on <a href="{...}_monsters">
archive.org</a>.</p>
</video>
50. Controls differ from browser to browser...
Firefox
Opera
Safari Full Screen
Chrome
51. HTML5’s Media API gives you control:
load() - load a new media.
canPlayType(type) - returns probably, maybe and
“” (really!)
play() - play the movie
pause() - pause the movie.
addTrack(label,kind,language) -for subtitles
67. if (window.addEventListener) {
/*
Works well in Firefox and Opera with the
Work Offline option in the File menu.
Pulling the ethernet cable doesn't seem to trigger it
*/
window.addEventListener("online", isOnline, false);
window.addEventListener("offline", isOffline, false);
}
else {
/*
Works in IE with the Work Offline option in the
File menu and pulling the ethernet cable
*/
document.body.ononline = isOnline;
document.body.onoffline = isOffline;
}
75. Other great things already working for us
Web Workers - multithreaded JS
Web Sockets - long polling and realtime multi
user interaction
Audio analysis
Face detection in JavaScript
Server side rendering in JavaScript
Image generation
79. Robert Nyman Chris Heilmann
http://robertnyman.com/speaking/ http://www.wait-till-i.com/
http://robertnyman.com/html5/
Twitter: @codepo8
Twitter: @robertnyman
Pictures:
Space: http://blog.silive.com/weather/2008/06/Astronaut-From-Apollo-11-Mission-1-1024x768.jpg
Robert and Chris: http://www.flickr.com/photos/screenorigami/5073291880/sizes/z/
George W Bush fail 1: http://freetraveler.net/pictures/2.09.06/fun/1.jpg
George W Bush fail 2: http://blogs.warwick.ac.uk/images/akyrtzoglou/2005/06/07/g2.jpg
George W Bush fail 3: http://blogs.warwick.ac.uk/images/akyrtzoglou/2005/06/07/gb3.jpg
Head in ground: http://56minus1.com/2009/02/things-well-done-li-wei/
Rocks my socks off: http://www.threestyles.com/tutorials/html5-rocks-my-socks-off/
Web browser icons: http://paulirish.com/2010/high-res-browser-icons/
Go where I've never been: http://musicisart.ws/diane-arbus/
Basketball player: http://www.hemmy.net/2008/03/22/the-fail-collection/
Anything is possible: http://www.elektrodrop.com/2009/12/straight-out-of-china/?quick_view=1
Canvas: http://www.ioffer.com/c/Drawings-1000407
Oriental studies: http://www.swollenpickles.com/2007/01/29/phallic-logo-awards/
Fight club: http://www.unique-screenwriting.com/rules-of-fight-club.html
Storage fail: http://failfun.com/funny-pictures/gangsta-fail/
Cookie monster: http://honestviewsfromhonestman.blogspot.com/2009/09/cookie-monster.html
You suck: http://www.crunchgear.com/2009/04/22/gadgets-sucks/
Internet hole: http://cheezburger.com/View/3194058752
Beer fail: https://witnessthis.wordpress.com/tag/shark-fail/
80. We can’t change history, but we can change the future.
Be nice to each other.