View Full Version : Learning Resources for HTML5 Developers
08-03-2011, 05:10 PM
In almost two weeks of searching and reading, I'm practically exhausted and have only scratched the surface. Partly from spending so much time reading, but also from spending so much time jumping right into the code and dashing off something new and exciting.
The ideal place to start would be with W3C (http://dev.w3.org/html5/spec/Overview.html), and then onto the web standards sites like WSG (http://webstandardsgroup.org/) and Westciv (http://www.westciv.com/).
I found Mark Pilgrim's book to be an invaluable read. He would rather I had purchased it, but I instead took advantage of his online version: Dive Into HTML5 (http://diveintohtml5.org/).
Estelle Weyl's site, Standardista (http://www.standardista.com/), is chalk full of all the nitty gritty details. She is the co-author of HTML5 & CSS3 For The Real World.
Into this mix there is a whole range of tools for creating HTML5 and CSS3 effects and code. Look for them in my next post.
08-03-2011, 06:50 PM
This is indispensable for checking which features are supported by the actual browsers y0ou are using: http://html5test.com/
Two part tutorial for html5<canvas> http://www.techieoncloud.com/2011/04/html5-part1-introduction.html and http://shekhar-pro.blogspot.com/2011/07/introduction-to-html5-part-2-example.html
These are excellent step by step with lots of links including for IE10 beta.
And good news for you, there is a polyfill for nearly every HTML5 feature that Modernizr detects. Yup. So in most cases, you can use a HTML5 or CSS3 feature and be able to replicate it in non-supporting browsers. Yes, not only can you use HTML5 today, but you can use it in the past, too!
http://www.modernizr.com/docs/ - with excellent tutorials and links to libraries to implement all html5 features in most browsers like this:
HTML5 Cross Browser Polyfills
So here we're collecting all the shims, fallbacks, and polyfills in order to implant html5 functionality in browsers that don't natively support them.
The general idea is that: we, as developers, should be able to develop with the HTML5 apis, and scripts can create the methods and objects that should exist. Developing in this future-proof way means as users upgrade, your code doesn't have to change but users will move to the better, native experience cleanly.
Looking for a way to conditionally load these scripts client-side based on feature detects? See yepnope.js
I've got more, I'll post later also, with better descriptions of all these resources and tutorials ;)
08-03-2011, 09:47 PM
HTML5 Demos and Examples (http://html5demos.com/), is a book by Bruce Laweson and Remy Sharp, co-creator of the HTML5 shim (http://www.webproworld.com/webmaster-forum/threads/111004-Is-it-too-soon-to-jump-into-HTML5?p=578165&viewfull=1#post578165) for IE 8 and older.
The site HTML5 Rocks (http://www.html5rocks.com/en/) is made up largely of Google Authors, but a solid mix of independent developers is there as well. As an Open Community, we are all free to join in and contribute.
Still putting a tools list together...
08-03-2011, 09:54 PM
Tutorials and resources for specific html5 features:(Canvas)
Review of HTML5 Canvas Libraries (http://www.suburban-glory.com/blog?page=141):
This is really an excellent page. There are links to all sorts of tutorials for the libraries covered
Using Html5 Canvas (http://www.suburban-glory.com/blog?page=135):
Unless you have been in a coma for the last couple of years you would have noticed the upturn in interest in HTML5 and the canvas tag.
Due to all the euphoria around HTML5 you may have come across list articles such as 48 Potential Flash-Killing Demos (http://www.hongkiat.com/blog/48-excellent-html5-demos/) and 10 HTML5 Demos to Make You Forget About Flash (http://webdesignledger.com/inspiration/10-html5-demos-to-make-you-forget-about-flash), and which in their screaming hyperbole give the impression that all the cool kids hang out with HTML5 while Flash is the preferred technology for your senile, incontinent granddad.
At the time of writing there is no one comprehensive book on the subject although a number are due to be released in 2011 including HTML5 Canvas (http://oreilly.com/catalog/0636920013327/) by Steve and Jeff Fulton on the O'Reilly imprint (Send me a copy to review please!!).
Nevertheless despite these handicaps below are some ways that it can be used.
Create a rectangle with HTML5 canvas...
One of the links from above article is a library for animations on the canvas with basic set up to advanced animation instructions and code MooTools Canvas Library (http://forvar.de/js/mcl/examples.html)
HTML5ROCKS (http://www.html5rocks.com/en/) is a complete, overall site, and this one is wicked good: You can Learn by Major HTML5 Feature Groups; and, it has sections on the site for seeing, using, trying, and getting everything Html5.
08-03-2011, 10:13 PM
Back to basics, the HTML5 Tag Reference (http://www.w3schools.com/html5/html5_reference.asp) posted at W3Schools (http://www.w3schools.com/) is something to memorize.
For highly polished examples of HTML5, <html> 5 Gallery | A showcase of sites using HTML5 markup
Still hovering around spec development and standards, there is, the Web Hypertext Application Technology Working Group (WHATWG) (http://www.whatwg.org/),
... a growing community of people interested in evolving the Web. It focuses primarily on the development of HTML and APIs needed for Web applications. and one of the earliest groups, html5.org (http://html5.org/). Their HTML5 Tracker is a way to monitor changes in browser support and the spec, in general.
08-04-2011, 01:57 PM
Just digging into the wordpress SERPS, one thread from a couple of years ago contained this link, New Elements in HTML5 (http://www.ibm.com/developerworks/library/x-html5/), and article from 2007 written by Elliote Rusty Harold. I know I've read this article before, and even though it is nearly 5 years old, it is still a good read, today.
Compared to two years ago, when there was practically nothing on the wordpress/HTML5 landscape, the web is swimming in new templates.