Html5 Primer
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Html5 Primer

  • 1,965 views
Uploaded on

HTML5 Primer presented to PHP developers

HTML5 Primer presented to PHP developers

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Very nice Graem I may not be in Australia any more but I still like phpmelb! Cheers, Colleen
    Are you sure you want to
    Your message goes here
    Be the first to like this
No Downloads

Views

Total Views
1,965
On Slideshare
1,963
From Embeds
2
Number of Embeds
1

Actions

Shares
Downloads
10
Comments
1
Likes
0

Embeds 2

http://localhost 2

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
  • \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

Transcript

  • 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 InternetENQUIRE HTML 2.0 HTML 3.2 proposed
  • 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. 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. 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 compatibilityAlso may need different resolutions / sizes for slowconnections 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-locationfunction get_location() { if (Modernizr.geolocation) { navigator.geolocation.getCurrentPosition(show_map); } else { // no native support; maybe try Gears? } }
  • 17. Geolocation support
  • 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. window.localStorage function supports_html5_storage() { return (localStorage in window) && window[localStorage] !== null; } var foo = localStorage.getItem("bar"); // ... localStorage.setItem("bar", foo);
  • 20. window.localStorage
  • 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
  • 23. text/cache-manifest
  • 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 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. 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) OReilly• dev.w3.org/html5/html4-differences/• en.wikipedia.org/wiki/HTML5
  • 29. Thank youMy name is Graeme BryanMobile: 0425 724 169Email: grae@avinago.comURL: avinago.com/webbinago