The Future of the Web: HTML5

the FUTURE of the WEB: HTML 5

Work started in 2004 Collaborative eﬀort between the W3C HTML Working Group & the WHATWG the FUTURE of the WEB: HTML 5

The WHATWG Web Hypertext Application Technology Working Group and many other individuals... the FUTURE of the WEB: HTML 5

The W3C World Wide Web Consortium An international community that develops standards to ensure the long-term growth of the Web. the FUTURE of the WEB: HTML 5

the NEW stuﬀ ﬁnally! the FUTURE of the WEB: HTML 5

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict// EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE html> the FUTURE of the WEB: HTML 5

new ELEMENTS structural elements: • header • nav • section • article • aside • footer the FUTURE of the WEB: HTML 5

new ELEMENTS the FUTURE of the WEB: HTML 5

<video> & <audio> <video src=”video.mp4”>back up content here</video> <audio src=”audio.mp3”>back up content here</audio> controls fully stylable with CSS autobuﬀer boolean attribute specifying whether to buﬀer in advance loop repeated play, duh autoplay play from page load, duh the FUTURE of the WEB: HTML 5

more NEW elements • hgroup • details • summary • mark • output • progress • menu • nsfw? the FUTURE of the WEB: HTML 5

canvas <canvas width=”150” height=”150”> fallback content here </canvas> the FUTURE of the WEB: HTML 5

APIs • drag & drop • document editing • oﬄine app caching • simple client storage • structured client storage • cross-document messaging • getElementByClassName the FUTURE of the WEB: HTML 5

block-level LINKS <a href=”#” class=”story”> <img src=”img.png” /> <h4>Title here</h4> <p>Text here</p> </a> the FUTURE of the WEB: HTML 5

webforms 2.0 new input types • color • url • number • range • time • email • month • search • date • tel • datetime • week • datetime-local <input type=”color” required=”required” /> the FUTURE of the WEB: HTML 5

webforms 2.0 new attributes • required • autocomplete • autofocus • pattern (formatting) • and more! <input type=”color” required=”required” /> the FUTURE of the WEB: HTML 5

deprecated ELEMENTS drop it like its hot • center • font • frameset (ﬁnally!!!!) • strike you’re safe for now <blink> and <marquee> the FUTURE of the WEB: HTML 5

HTML5 is awesome! I know, stay calm the FUTURE of the WEB: HTML 5

But what about support? Glad you asked... the FUTURE of the WEB: HTML 5

The future is already here. It’s just not very evenly distributed. William Gibson the FUTURE of the WEB: HTML 5

the BROWSERS but what about... the FUTURE of the WEB: HTML 5

the BROWSERS 2011 the FUTURE of the WEB: HTML 5

Should I start using HTML 5 now? Sure. the FUTURE of the WEB: HTML 5

beneﬁts of HTML5 • cleaner markup • additional semantics for new elements • new form elements take out hassle of scripting forms • staying ahead of the curve • makes you feel really smart the FUTURE of the WEB: HTML 5

downsides of HTML5 • spec not ﬁnished and likely to change • not everything works in every browser • you look like a pretentious jerk when you brag to your friends the FUTURE of the WEB: HTML 5

Evolution, not revolution. the FUTURE of the WEB: HTML 5

As of Feb 2010 HTML5 is still at Working Draft stage in the W3C. HTML5 has been at Last Call in the WHATWG since October 2009. the FUTURE of the WEB: HTML 5

TAKEAWAYS • started in 2004 • starting to see widespread browser support • more semantic • I Webforms 2.0! • IE9 in 2011 the FUTURE of the WEB: HTML 5

Resources & links W3C Working Draft http://dev.w3.org/html5/spec/Overview.html HTML5 Doctor http://html5doctor.com/ ALA article http://www.alistapart.com/articles/previewo tml5 Web Forms 2.0 spec http://www.whatwg.org/specs/web-forms/current-work/ HTML5 site gallery http://www.1stwebdesigner.com/inspiration/ultra-modern-websites-html5/ O’Reilly article http://radar.oreilly.com/2010/03/why-html5-is-worth-your-time.html Modernizr http://www.modernizr.com the FUTURE of the WEB: HTML 5

I’m derekbender @derekbender derekbender.com & mymoustacheand.me slideshare.net/derekbender nﬁstudios.com memberfuse.com Thanks the FUTURE of the WEB: HTML 5

http://ayudawordpress.com	1248
http://techtastico.com	1093
http://mindymcadams.com	463
http://www.linuxhispano.net	377
http://www.programacionazteca.com	349
http://www.slideshare.net	245
http://bosqueviejo.net	222
http://elblogdesol.com.ar	191
http://multimedia.maimonides.edu	97
http://blog.jeanbaptistedumont.com	95
http://www.iesgrancapitan.org	56
http://planetawordpress.org	51
http://www.elmandarina.net	42
http://www.next-dna.com	38
http://pibesdemultimedia.com.ar	33
http://www.techlook.in	28
http://www.jornalices.com	23
http://static.slideshare.net	18
http://www.bluelinerny.com	16
http://angrejee.blogspot.com	14
http://static.slidesharecdn.com	11
http://localhost	10
http://www.funbeat.se	9
http://www.redbrick.de	9
http://lab.pentahost.com.ar	9
http://artedesexprimir.blogspot.com	8
http://dumont.typepad.com	7
http://www.maxisosa.com.ar	7
http://www.lasclases.com.ar	7
http://integratedmediateam.wordpress.com	6
http://blog.alejandromohamad.com.ar	5
http://www.minnix.info	5
http://sam-sg.com	5
http://alebenson.tumblr.com	5
http://sanjaysurani.blogspot.com	4
http://www.daleclick.com.do	4
http://webcache.googleusercontent.com	3
http://beta.openapp.org	2
http://tellado.tumblr.com	2
http://nobal-tech.blogspot.com	2
http://www.tumblr.com	2
http://www.multimediapedia.com	2
http://programacionazteca.com	2
http://translate.googleusercontent.com	2
http://mashmetv.appspot.com	2
http://minnix.info	2
http://www.computervideohelp.com	1
http://my.opera.com	1
http://127.0.0.1:8795	1
http://blog.naver.com	1
http://www.hanrss.com	1

The Future of the Web: HTML5

by Derek Bender

Accessibility

Categories

Upload Details

Usage Rights

60 Embeds 4,845

Statistics