Too Cool for Internet Explorer

Saturday, May 8, 2010

Diving into HTML5



I have chosen XHTML since I will apply some effort on Web development stuff.

Last Year W3C have decided to stop the XHTML development.

So, it is time to give XHTML a break, and start learning HTML 5 and CSS 3.

Of course we have many other HTML5 references on web; here is my first attempt into HTML5.

First things first: the Doc Type declaration.

Compared with my previous one:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

It couldn’t be more appropriate, simple and easy:
<!DOCTYPE html>

What we have been doing using the div tag, could now be done more semantically with, article, section, header, footer, nav and aside tags.

A few phrasing elements can help when including complementary information like: time meter and progress tags.

And a lot of new resources to be explored in the near future, like: video, audio, data attributes, microdata, native drag and drop, canvas, DOM storage, Client side SQL, new form controls, and some more.

At this point I need to do something practical, so, why not turning my own personal page into HTML5. Good chance to change its outdated design and a few concepts.

Hands on!

Here are the steps I have followed:

First, take the former page and a few ideas on what to change.



And here is the altered page:



It was an intermediary version, a cleaner one, but still using XHTML.

The tool I have used most in this phase was the ColorZilla Firefox Plug-in.

Since I was trying to keep the color scheme close to the one I have used in the previous version, this plug-in really helps.

Now, the big change!

I was looking for a different approach. My web page would show a more intimist profile, giving me a chance to explore HTML5 basics.

And here it is:



I have made a self-explaining layout from this new version of my page, where each new tag could be easily found.

I have also provided a full HTML5 page wireframe, so anyone could start working on it right now.

What to do next? I think a little work using the canvas tag will be.