HTML5 - Pete Freitag · • Also defines new JavaScript API’s Monday, January 10, 2011. HTML5...
25
HTML5 Pete Freitag, Foundeo Inc. www.petefreitag.com Monday, January 10, 2011
Transcript of HTML5 - Pete Freitag · • Also defines new JavaScript API’s Monday, January 10, 2011. HTML5...
HTML5Pete Freitag, Foundeo Inc.
www.petefreitag.com
Monday, January 10, 2011
HTML5
• Work Started in 2004
• Gaining adoption as browsers support it
Monday, January 10, 2011
HTML5 Support
0
22.5
45
67.5
90
IE8 FF3.6 Saf5.0 O10.6 Chr5
HTML5 % of Features Supported
source: caniuse.com
Monday, January 10, 2011
What’s New • Layout / Semantic Tags
• Form Controls
• Multimedia Support
• Drawing API’s
• Storage API’s
Monday, January 10, 2011
HTML5 Not Just Tags
• HTML Consists of much more than new tags and attributes
• Also defines new JavaScript API’s
Monday, January 10, 2011
HTML5 DocType
Monday, January 10, 2011
HTML5 DocType
• <!doctype html>
• Puts Older browsers into standards mode.
• So you can use it now
Monday, January 10, 2011
Semantic Tags• Researchers found that some of the most
common classes or id’s placed on div are:
• header
• footer
• nav
• article
• section
Monday, January 10, 2011
HTML5 Semantic Tags
• <header> ... </header>
• <nav> ... </nav>
• <article> ... </article>
• <section> ... </section>
• <footer> ... </footer>
Monday, January 10, 2011
HTML5 Semantic Tags
• Can be styled with CSS on older browsers, with one exception...
• Can you guess which browser?
Monday, January 10, 2011
<!--[if IE]>
• <!--[if IE]> to the rescue once again:
• http://remysharp.com/2009/01/07/html5-enabling-script/
Monday, January 10, 2011
Additional New Tags
• aside
• hgroup
• figure
• figcaption
Monday, January 10, 2011
Form Controls
• HTML5 Defines new input type=values
Monday, January 10, 2011
New Input Types
• Search
• Telephone
• URL
• Date / Time
Monday, January 10, 2011
New Input Attributes• min
• max
• multiple (upload multiple files)
• step
• placeholder
• autocomplete
• pattern
Monday, January 10, 2011
Video
<video><source src=”video.mp4” /><source src=”video.ogv” />Browser Does not support video tag.
</video>
<video src=”video.mp4” />
OR
Monday, January 10, 2011
Audio
<audio><source src=”tunes.mp3” /><source src=”tunes.ogg” />Browser Doesn’t Support Audio Tag
</audio>
<audio src=”tunes.mp3” />
OR
Monday, January 10, 2011
Common Media Attributes
• controls
• autoplay
• preload
• loop
Monday, January 10, 2011
Drawing API’s
• <canvas> tag is used to mark a drawing area on the page.
• You can then draw 2d or 3d using JavaScript.
• Demo
Monday, January 10, 2011
Storage API’s
• sessionStorage
• Store data for a Single Window
• sessionStorage.setItem(‘key’, ‘value’);
Monday, January 10, 2011
Storage API’s
• globalStorage - Store across sessions
• globalStorage[“example.com”].key = val;
Monday, January 10, 2011
Storage API’s
• SQL Databases
• Transactional SQL Database
• Current implementations use sqlite
Monday, January 10, 2011
There’s even more
• Geo Location API
• Cross Document Messaging
• Web Sockets
• Web Workers
• Much More
Monday, January 10, 2011
Links
• Browser Support
• http://caniuse.com/
• HTML5 Presentations
• http://www.addyosmani.com/html5/
• http://slides.html5rocks.com/
• http://slidesix.com/view/html5
Monday, January 10, 2011
Questions?Thanks.
Monday, January 10, 2011
