Html5 Primer
Download as KEY, PDF•0 likes•770 views
This document provides an overview of HTML5 including its history and development. It discusses the key organizations involved like the W3C. It outlines new HTML5 features like new semantic tags, forms improvements, canvas, video, geolocation, local storage, and cache manifest. It also discusses related technologies like XHTML5 and differences from HTML4. Finally, it recommends resources for learning more about HTML5.
![window.localStorage
function supports_html5_storage() {
return ('localStorage' in window) &&
window['localStorage'] !== null;
}
var foo = localStorage.getItem("bar");
// ...
localStorage.setItem("bar", foo);](https://image.slidesharecdn.com/html5-110419080706-phpapp02/85/Html5-Primer-19-320.jpg)
Html5 Primer
- 1. Primer for PHP Devs by Graeme Bryan
- 2. HTML • Tim Berners-Lee • 1989 • W3C World Wide Web Consortium • Actually developed document sharing system in 1980
- 3. Journey to HTML5 1989 1980 1995 1997 Internet ENQUIRE HTML 2.0 HTML 3.2 proposed
- 4. Journey to HTML5 1989 1980 1995 1997 Internet ENQUIRE HTML 2.0 HTML 3.2 proposed 1998 2000 HTML 4.01 XHTML 1.0
- 5. Journey to HTML5 1989 1980 1995 1997 Internet ENQUIRE HTML 2.0 HTML 3.2 proposed 1998 2000 HTML 4.01 XHTML 1.0 2008 XHTML?
- 6. XHTML5? • Yes • Part of the HTML5 spec • XML-based serialisation of HTML5
- 7. WHATWG? • Web Hypertext Application Technology Working Group • competing vision • Web browser manufacturers and interested parties • based on HTML and related technologies • interoperable Web Applications • submit the results to a standards organisation
- 8. New Tags & Attributes • <!DOCTYPE html> • <aside> • rel="archives" etc. • <hgroup> • <section> • <header> • <nav> • <footer> • <article> • <time>
- 9. APIs • <canvas> • <video> • navigator.geolocation • window.localStorage • text/cache-manifest
- 10. Forms • autofocus • placeholder="Your Email" • type="email" • type="date" • type="search" • Etc.
- 11. Canvas • a resolution- dependent bitmap canvas • Graphs, charts • Game graphics • visual images on the fly
- 12. Canvas compatibility caniuse.com
- 13. Video <video src="pr6.webm" width="320" height="240"></video> <video width="320" height="240" controls> <source src="pr6.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"'> </video>
- 14. Video compatibility Also may need different resolutions / sizes for slow connections and small screens
- 15. Video for everybody • Camen Design UK • <camendesign.com/code/video_for_everybody> • Fallback to Flash Video • However, browser controls look • MediaElement.js <mediaelementjs.com> • VideoJS <videojs.com>
- 16. Geo-location function get_location() { if (Modernizr.geolocation) { navigator.geolocation.getCurrentPosition(show_map); } else { // no native support; maybe try Gears? } }
- 18. Local Storage • Cookies are limited to about 4 KB of data • Web apps need a lot of storage space... • on the client... • that persists beyond a page refresh... • and isn't transmitted to the server.
- 19. window.localStorage function supports_html5_storage() { return ('localStorage' in window) && window['localStorage'] !== null; } var foo = localStorage.getItem("bar"); // ... localStorage.setItem("bar", foo);
- 21. text/cache-manifest • Offline web application • will read the list of URLs from the manifest file • download the resources • cache them locally • and automatically keep the local copies up to date as they change
- 22. text/cache-manifest CACHE MANIFEST NETWORK: /tracking.cgi CACHE: /clock.css /clock.js /clock-face.jpg
- 24. Just one more thing...
- 25. Boilerplate: Why it is awesome • Cross-browser compatible (IE6) • HTML5 ready. Use the new tags with certainty • Optimal caching and compression • Best practice site configuration defaults • Mobile browser optimisations • Progressive enhancement graceful degradation • IE specific classes for maximum cross-browser control • Handy .no-js and .js classes to style based on capability • A full, hooked up test suite
- 26. Boilerplate: Why it is awesom-er • Javascript profiling…in IE6 and IE7? • Console.log nerfing so you won't break anyone by mistake • Never go wrong with your doctype or markup! • An optimal print stylesheet, performance optimized • iOS, Android, Opera Mobile-adaptable markup and CSS skeleton • IE6 pngfix baked in • .clearfix, .visuallyhidden classes to style things wisely and accessibly • .htaccess file that allows proper use of HTML5 features and faster page load • CDN hosted jQuery with local fallback failsafe • Think there's too much? The HTML5 Boilerplate is delete-key friendly. :)
- 27. HTML5 Reset v2 • Similar to boilerplate but different in scope • html5reset.org
- 28. Resources • Dive Into HTML5 by Mark Pilgrim <diveintohtml5.org> • HTML5: Up & Running (printed version) O'Reilly • dev.w3.org/html5/html4-differences/ • en.wikipedia.org/wiki/HTML5
- 29. Thank you My name is Graeme Bryan Mobile: 0425 724 169 Email: [email protected] URL: avinago.com/webbinago