#1 - HTML5 Overview
2 likes762 views
The document provides an overview of HTML5, including its history, features, browser support, and development tools. It highlights the evolution of web technologies and offers insights into the semantic markup introduced in HTML5. Additionally, it discusses shims, polyfills, and various resources for testing browser compatibility and implementing HTML5 features.
![Samples
HTML5Shiv
<!--[if lt IE 9]>
<script src="dist/html5shiv.js"></script>
<![endif]-->
37
Basic / Shims and polyfills](https://image.slidesharecdn.com/20121121-basic1-121125004752-phpapp01/85/1-HTML5-Overview-37-320.jpg)
![Samples
yepnope({
test : Modernizr.geolocation,
yep : 'normal.js',
nope : ['polyfill.js', 'wrapper.js']
});
41
Basic / Shims and polyfills](https://image.slidesharecdn.com/20121121-basic1-121125004752-phpapp01/85/1-HTML5-Overview-41-320.jpg)
#1 - HTML5 Overview
- 1. Tecniche di animazione digitale I
- 2. Michele Bertoli Founder / Lead Software Engineer at Igloo igloolab.com [email protected]
- 3. Basic 1 November 21, 2012
- 4. Agenda How "internet" works 5 HTML5 overview 7 Browser support 23 Tools 30 Shims and Polyfills 35 Semantic tags 42 4 Basic / Agenda
- 6. How "internet" works 6 Basic / HTML5 overview
- 8. Introduction HyperText Markup Language is the core technology of the World Wide Web. With HTML, authors describe the structure of Web pages using markup tags. 8 Basic / HTML5 overview
- 9. Introduction • Web applications oriented. • Improves interoperability. • Adds syntactic and semantic features. 9 Basic / HTML5 overview
- 10. History 10 Basic / HTML5 overview
- 11. History • 2004 WHATWG is born (with members fro Apple, the Mozilla Foundation and Opera Software). • 2007 W3C announces it will work with WHATWG. • 2008 First version of HTML5 is published. • 2008 Firefox 3 becomes HTML5 compatible. • 2010 Youtube offers HTML5 video player. • 2010 Steve Jobs "trashes" Flash in an open letter. 11 Basic / HTML5 overview
- 12. Future • 2012 Candidate recommendation. • 2013 Last call for review. • 2014 Recommendation. 12 Basic / HTML5 overview
- 13. Features Doctype HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 5 <!DOCTYPE html> 13 Basic / HTML5 overview
- 14. Features Semantic tags <header> <nav> <section> <aside> <article> <footer> 14 Basic / HTML5 overview
- 15. Features Media elements <audio> <video> 15 Basic / HTML5 overview
- 16. Features Geolocation jobberone.com 16 Basic / HTML5 overview
- 17. Features Canvas A world of HyperlinkTweets 17 Basic / HTML5 overview
- 18. Features Input types Form validation • color • date • datetime • datetime-local • email • month • number • range • search • tel • time • url • week 3 18 Basic / HTML5 overview
- 19. Features Draggable & FileReader jQuery HTML5 Uploader 19 Basic / HTML5 overview
- 20. Features Offline applications • LocalStorage • Appcache 20 Basic / HTML5 overview
- 21. Features Web Sockets var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne"); exampleSocket.onopen = function (event) { exampleSocket.send("Here's some text that the server is urgently awaiting!"); }; 21 Basic / HTML5 overview
- 22. Samples • http://www.apple.com/html5 • http://www.youtube.com/html5 • https://developers.facebook.com/html5 22 Basic / HTML5 overview
- 23. Browser support
- 24. Introduction Browser compatibility The ability of a Web browser to effectively display the HTML code and execute the scripts on Web pages. 24 Basic / Browser support
- 25. History The Evolution of Web Browsers • 1992 Mosaic. • 1994 NetScape and Opera. • 1995 Internet Explorer. • 2002 Safari. • 2004 Firefox. • 2008 Chrome. 25 Basic / Browser support
- 26. Today StatCounter 26 Basic / Browser support
- 27. HTML5 Support HTML5 & CSS3 Support 27 Basic / Browser support
- 28. Samples • http://browsershots.org • https://browserlab.adobe.com • http://www.browserstack.com 28 Basic / Browser support
- 29. 15 MINUTI DI PAUSA
- 30. Tools
- 31. Can I Use Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers. http://caniuse.com 31 Basic / Tools
- 32. Samples http://caniuse.com/#feat=offline-apps 32 Basic / Tools
- 33. Modernizr Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. http://modernizr.com/ 33 Basic / Tools
- 34. Samples Usage Implementation if (Modernizr.localstorage) { Modernizr.addTest('localstorage', function() { // window.localStorage is available! var mod = 'modernizr'; } else { try { // no native support for local storage :( localStorage.setItem(mod, mod); // maybe try Gears or another third-party localStorage.removeItem(mod); solution return true; } } catch(e) { return false; } }); 34 Basic / Tools
- 36. Shims A shim is a library that brings a new API to an older environment, using only the means of that environment. 36 Basic / Shims and polyfills
- 37. Samples HTML5Shiv <!--[if lt IE 9]> <script src="dist/html5shiv.js"></script> <![endif]--> 37 Basic / Shims and polyfills
- 38. Polyfills A polyfill is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will. 38 Basic / Tools
- 39. Samples • http://lea.verou.me/polyfills/progress/ 39 Basic / Tools
- 40. Yeponope Yepnope is an asynchronous conditional resource loader that's super-fast, and allows you to load only the scripts that your users need. 40 Basic / Tools
- 41. Samples yepnope({ test : Modernizr.geolocation, yep : 'normal.js', nope : ['polyfill.js', 'wrapper.js'] }); 41 Basic / Shims and polyfills
- 42. Semantic tags
- 43. <article> The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a usersubmitted comment, an interactive widget or gadget, or any other independent item of content. 43 Basic / Semantic tags
- 44. <section> The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading. 44 Basic / Semantic tags
- 45. <nav> The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links. 45 Basic / Semantic tags
- 46. <aside> The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. 46 Basic / Semantic tags
- 47. <header> The header element represents a group of introductory or navigational aids. 47 Basic / Semantic tags
- 48. <footer> The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. 48 Basic / Semantic tags
- 49. Thank you igloolab.com [email protected]