Your SlideShare is downloading. ×
#1 - HTML5 Overview
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

#1 - HTML5 Overview

535
views

Published on

- How "internet" works …

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

Published in: Technology

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
535
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Tecniche di animazione digitale I
  • 2. Michele BertoliFounder / Lead Software Engineer at Igloo igloolab.com michele.bertoli@accademiasantagiulia.it
  • 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
  • 5. How "internet" works
  • 6. How "internet" works 6 Basic / HTML5 overview
  • 7. HTML5 overview
  • 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. Introduction • Web applications oriented. • Improves interoperability. • Adds syntactic and semantic features. 9 Basic / HTML5 overview
  • 10. History 10Basic / 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. 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. Features Semantic tags <header> <nav><section> <aside><article> <footer> 14 Basic / HTML5 overview
  • 15. FeaturesMedia elements <audio> <video> 15 Basic / HTML5 overview
  • 16. FeaturesGeolocation jobberone.com 16Basic / HTML5 overview
  • 17. Features CanvasA world of HyperlinkTweets 17 Basic / HTML5 overview
  • 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. FeaturesDraggable & FileReader jQuery HTML5 Uploader 19 Basic / HTML5 overview
  • 20. FeaturesOffline applications • LocalStorage • Appcache 20 Basic / HTML5 overview
  • 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. 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 effectivelydisplay 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 26Basic / 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. Sampleshttp://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. 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. Shims and polyfills
  • 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. SamplesHTML5Shiv <!--[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 thats super-fast, and allows you to load only the scripts that your users need. 40 Basic / Tools
  • 41. Samplesyepnope({ 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 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. <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 apage 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 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. <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.commichele.bertoli@accademiasantagiulia.it

×