Html5 Primer

1,775 views

Published on

HTML5 Primer presented to PHP developers

Published in: Technology
1 Comment
0 Likes
Statistics
Notes
  • Very nice Graem I may not be in Australia any more but I still like phpmelb! Cheers, Colleen
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
1,775
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
11
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • \n\n
  • Html5 Primer

    1. 1. Primer for PHP Devs by Graeme Bryan
    2. 2. HTML• Tim Berners-Lee• 1989• W3C World Wide Web Consortium• Actually developed document sharing system in 1980
    3. 3. Journey to HTML5 1989 1980 1995 1997 InternetENQUIRE HTML 2.0 HTML 3.2 proposed
    4. 4. Journey to HTML5 1989 1980 1995 1997 InternetENQUIRE HTML 2.0 HTML 3.2 proposed 1998 2000 HTML 4.01 XHTML 1.0
    5. 5. Journey to HTML5 1989 1980 1995 1997 InternetENQUIRE HTML 2.0 HTML 3.2 proposed 1998 2000 HTML 4.01 XHTML 1.0 2008 XHTML?
    6. 6. XHTML5?• Yes• Part of the HTML5 spec• XML-based serialisation of HTML5
    7. 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. 8. New Tags & Attributes• <!DOCTYPE html> • <aside>• rel="archives" etc. • <hgroup>• <section> • <header>• <nav> • <footer>• <article> • <time>
    9. 9. APIs• <canvas>• <video>• navigator.geolocation• window.localStorage• text/cache-manifest
    10. 10. Forms• autofocus• placeholder="Your Email"• type="email"• type="date"• type="search"• Etc.
    11. 11. Canvas• a resolution- dependent bitmap canvas• Graphs, charts• Game graphics• visual images on the fly
    12. 12. Canvas compatibility caniuse.com
    13. 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. 14. Video compatibilityAlso may need different resolutions / sizes for slowconnections and small screens
    15. 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. 16. Geo-locationfunction get_location() { if (Modernizr.geolocation) { navigator.geolocation.getCurrentPosition(show_map); } else { // no native support; maybe try Gears? } }
    17. 17. Geolocation support
    18. 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 isnt transmitted to the server.
    19. 19. window.localStorage function supports_html5_storage() { return (localStorage in window) && window[localStorage] !== null; } var foo = localStorage.getItem("bar"); // ... localStorage.setItem("bar", foo);
    20. 20. window.localStorage
    21. 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. 22. text/cache-manifest CACHE MANIFEST NETWORK: /tracking.cgi CACHE: /clock.css /clock.js /clock-face.jpg
    23. 23. text/cache-manifest
    24. 24. Just one more thing...
    25. 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. 26. Boilerplate: Why it is awesom-er• Javascript profiling…in IE6 and IE7?• Console.log nerfing so you wont 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 theres too much? The HTML5 Boilerplate is delete-key friendly. :)
    27. 27. HTML5 Reset v2• Similar to boilerplate but different in scope• html5reset.org
    28. 28. Resources• Dive Into HTML5 by Mark Pilgrim <diveintohtml5.org>• HTML5: Up & Running (printed version) OReilly• dev.w3.org/html5/html4-differences/• en.wikipedia.org/wiki/HTML5
    29. 29. Thank youMy name is Graeme BryanMobile: 0425 724 169Email: grae@avinago.comURL: avinago.com/webbinago

    ×