A Brief Interlude into HTML5
Download as PPTX, PDF1 like727 views
This document provides an overview of HTML5, focusing on new tags for embedding media like <canvas>, <audio>, and <video>. It discusses browser support for HTML5, with Internet Explorer lacking support. The Modernizr library can detect HTML5 and CSS3 support. <canvas> allows drawing with JavaScript but is limited to 2D. <video> and <audio> work like other elements but browser support depends on codec support, with disputes around H.264 licensing. The document encourages progressive enhancement and ignoring Internet Explorer for now due to limited HTML5 support.
A Brief Interlude into HTML5
- 1. A Brief Interlude intoHTML5The future problems with the web, today!
- 2. What in the world is HTML5? HTML5 is the successor to XHTML1Has officially superseded the proposed XHTML2It gives us a few standardized JavaScript APIs we can do cool stuff withAdds new tags that will give us the ability to embed media and create interactive web elements with easeWe can use it to create web applications that can take physical location into accountAdds new tags we can use to create new semantically-sound content elements, such as navigation and template headings/footersRun JavaScript in threads and store data locallyThe ability to create offline web applicationsHTML5 is literally, the foundation to the next-generation of web applications
- 3. Say hello to my little friendsThis presentation will focus on three new HTML5 tags exclusively<canvas><audio><video>Future presentations will focus on Geolocation, DOM Storage, semantics, and other topics
- 4. Should I even ask about IE?Nearly every modern browser supports some HTML5Support varies from browser to browserInternet Explorer does notGood HTML5 must encompass one of two techniquesWe must design it so it "progressively enhances" content and feature sets on web appsIf you run IE, some features should be implemented in JS/Flash or not be supported at allOr we can ignore IE altogetherAnd nothing of value was lostSo for the time being HTML5 support is fragmented but it can be used for many things
- 5. Detecting HTML5We can use the Modernizr JS library to detect HTML5 supportWe can also use it to determine codec support for audio and videoAlso good for detecting CSS3 features
- 6. <canvas>As defined in the WHATWG standard, it’s a bitmap element we can draw in using JavaScriptThis rendering is done in immediate modeNot an alternative to technologies like SVG, but can be seen as a complimentRight now its limited to 2D graphicsThere are proposals to introduce a 3D canvas contextAbsolutely is not supported by IEexcanvas.js can implement partial support
- 7. <video>Do video in a flash without that other thingImplementation dependant on a browser with codecs compiledThis continues to be a sore point with developers and the HTML5 committeesWe can treat video like any other HTML element, and manipulate it with JS and even the <canvas>Where is your god now, Adobe?Two codecs are being used for HTML5 videoOggTheoraMPEG-4 H.264W3C, WHATWG have not specified what codec to useOriginally, WHATWG said to use Ogg
- 8. <audio>Like video, only without the videoOggVorbis is generally the sole accepted codecand WAVMP3 support is set to become the norm in 2011Patents will expireIf you can’t wait, Chrome and Safari support it
- 9. The Apprehension of the H.246 LicenseUsing H.264 is not free at all – it costs money to use the codecAnd in 2011, you will be required to pay up to 30 cents per view for content provided with H.264OR up to $20,000 per yearThe licensing issue continues to be a sore point in the W3C and WHATWG steering committeesOggTheora not the ‘sawzall’ solution we need because its protection to submarine patents can’t be guaranteedAnd as such, it is no longer part of the HTML5 standardLicensing future for H.264 and AVC not yet certainFirefox does not support H.264 due to this very issue (Chrome, Safari do)But Chrome also supports OggTheoraYou see where this is heading, don’t you?
- 10. Any Questions?
- 11. Know the scoreGet the codehttp://bit.ly/62AH3AGet this slideshowhttp://bit.ly/7PkuxmExplore more HTML5diveintohtml5.orghttp://bit.ly/6U2tLThtml5doctor.com
Editor's Notes
- #2: This presentation © 2010 Cameron Kilgore. Redistribution permitted under terms of the Creative Commons 3.0 BY-ND License
- #4: Explain that this is a part of a series of discussions on HTML5
- #6: Switch out to modernizr_demo.html
- #7: Switch out to canvas_demo.html
- #8: Switch out to video_demo.html
- #9: Switch out to audio_demo.html
- #12: There were plans for a git repo but those were axed when DreamHost complicated things. Explain that the gzip lacks the Moon trailer due to redistribution rights.