#1 - HTML5 Overview

897 views

Published on

- How "internet" works
- HTML5 overview
- Browser support
- Tools
- Shims and Polyfills
- Semantic tags

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
897
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

#1 - HTML5 Overview

  1. 1. Tecniche di animazione digitale I
  2. 2. Michele BertoliFounder / Lead Software Engineer at Igloo igloolab.com michele.bertoli@accademiasantagiulia.it
  3. 3. Basic 1 November 21, 2012
  4. 4. Agenda How "internet" works 5 HTML5 overview 7 Browser support 23 Tools 30 Shims and Polyfills 35 Semantic tags 42 4 Basic / Agenda
  5. 5. How "internet" works
  6. 6. How "internet" works 6 Basic / HTML5 overview
  7. 7. HTML5 overview
  8. 8. IntroductionHyperText 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. 9. Introduction • Web applications oriented. • Improves interoperability. • Adds syntactic and semantic features. 9 Basic / HTML5 overview
  10. 10. History 10Basic / HTML5 overview
  11. 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. 12. Future • 2012 Candidate recommendation. • 2013 Last call for review. • 2014 Recommendation. 12 Basic / HTML5 overview
  13. 13. FeaturesDoctypeHTML 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. 14. Features Semantic tags <header> <nav><section> <aside><article> <footer> 14 Basic / HTML5 overview
  15. 15. FeaturesMedia elements <audio> <video> 15 Basic / HTML5 overview
  16. 16. FeaturesGeolocation jobberone.com 16Basic / HTML5 overview
  17. 17. Features CanvasA world of HyperlinkTweets 17 Basic / HTML5 overview
  18. 18. FeaturesInput types Form validation • color • date • datetime • datetime-local • email • month • number • range • search • tel • time • url • week 3 18 Basic / HTML5 overview
  19. 19. FeaturesDraggable & FileReader jQuery HTML5 Uploader 19 Basic / HTML5 overview
  20. 20. FeaturesOffline applications • LocalStorage • Appcache 20 Basic / HTML5 overview
  21. 21. FeaturesWeb Sockets var exampleSocket = new WebSocket("ws://www.example.com/socketserver", "protocolOne"); exampleSocket.onopen = function (event) { exampleSocket.send("Heres some text that the server is urgently awaiting!"); }; 21 Basic / HTML5 overview
  22. 22. Samples • http://www.apple.com/html5 • http://www.youtube.com/html5 • https://developers.facebook.com/html5 22 Basic / HTML5 overview
  23. 23. Browser support
  24. 24. Introduction Browser compatibility The ability of a Web browser to effectivelydisplay the HTML code and execute the scripts on Web pages. 24 Basic / Browser support
  25. 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. 26. Today StatCounter 26Basic / Browser support
  27. 27. HTML5 Support HTML5 & CSS3 Support 27 Basic / Browser support
  28. 28. Samples • http://browsershots.org • https://browserlab.adobe.com • http://www.browserstack.com 28 Basic / Browser support
  29. 29. 15 MINUTI DI PAUSA
  30. 30. Tools
  31. 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. 32. Sampleshttp://caniuse.com/#feat=offline-apps 32 Basic / Tools
  33. 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. 34. SamplesUsage 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
  35. 35. Shims and polyfills
  36. 36. Shims A shim is a library that brings a new API to anolder environment, using only the means of that environment. 36 Basic / Shims and polyfills
  37. 37. SamplesHTML5Shiv <!--[if lt IE 9]> <script src="dist/html5shiv.js"></script> <![endif]--> 37 Basic / Shims and polyfills
  38. 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. 39. Samples • http://lea.verou.me/polyfills/progress/ 39 Basic / Tools
  40. 40. Yeponope Yepnope is an asynchronous conditional resource loader thats super-fast, and allows you to load only the scripts that your users need. 40 Basic / Tools
  41. 41. Samplesyepnope({ test : Modernizr.geolocation, yep : normal.js, nope : [polyfill.js, wrapper.js]}); 41 Basic / Shims and polyfills
  42. 42. Semantic tags
  43. 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 ornewspaper article, a blog entry, a usersubmitted comment, an interactive widget or gadget, or any other independent item of content. 43 Basic / Semantic tags
  44. 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. 45. <nav> The nav element represents a section of apage that links to other pages or to parts within the page: a section with navigation links. 45 Basic / Semantic tags
  46. 46. <aside> The aside element represents a section of apage 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. 47. <header>The header element represents a group of introductory or navigational aids. 47 Basic / Semantic tags
  48. 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. 49. Thank you igloolab.commichele.bertoli@accademiasantagiulia.it

×