Learning Resources for HTML5 Developers

[weegillis]

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.

[mikmik]

This is indispensable for checking which features are supported by the actual browsers y0ou are using: http://html5test.com/

http://html5labs.interoperabilitybridges.com/
http://html5doctor.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.

http://www.techrepublic.com/blog/webmaster/html5-the-next-generation-of-web-design/484?tag=nl.e099 and,
http://www.techrepublic.com/blog/webmaster/html5-attributes-semantic-markup-redefined-elements/511?tag=nl.e055

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!
Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites.
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
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

I've got more, I'll post later also, with better descriptions of all these resources and tutorials ;)

[weegillis]

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...

[mikmik]

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.

The Canvas API is a means of creating shapes, graphs and even animation using just JavaScript and which, unlike Flash, doesn't require a plug-in and, unlike Flash again, is not proprietary but open
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.

[weegillis]

This utility is similar to Modernizr, above, but geared only to IE 6-8: Select[ivizr] (http://selectivizr.com/) It is designed to work in harmony with other Javascript libraries and frameworks, and has received excellent reviews.

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
(http://html5gallery.com/)
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.

[kgun]

like:

html5 wordpress

html5 drupal

[weegillis]

like:

html5 wordpress

html5 drupal

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.