lunes, 6 de febrero de 2012
Introduction to HTML 5.0
There are many sites where explain how HTML5 looks like and I will contribute a bit here including my personal experience on this topic.
First, what is HTML 5? Many people think that just it is a set of new tags but this thinking is far away of what really is. There are some new APIs in order to take advantage of what a new multimedia web application should be. So, is HTML 5 a new programming language? Not, at all, it keeps being a markup metalenguage. Just it provides all the markup with the api and so on in order to be processed by the browser.
Starting with the new tags
Before, you must specify doctype "<!DOCTYPE HTML>" (if not, you won't be using html 5!). Well, there are many new tags in order to specify how your page looks like and almost all of them should replace to something like: "<div id='header'>". Here, we have a summarize:
- Header: To specify the header of a section or to help in the navigation of your page.
- Nav: To define that links on your site and the user may browse to any of them.
- Section: Generic group of elements that are related to each other.
- Article: A document that can be copied from any other site, it means that has its own entity.
- Aside: Extra information of an article or section.
- Types of input: for email, datetime, ...
There are many others like figure, figcaption, time, string, ... but I think the previous ones were the most important and, of course, there are many other considerations to undestand them in a proper way.
Then, depending on the tag, will browser draw them in a different way? No, these just are tags, meta-lenguage that the browser (in CSS side) or an human-reader, both, can understand.
Having a look in Canvas element
How can we design animations like flash or silverlight? Using the Canvas element and Javascript. A plugin to run complex animations won't be necessary anymore. I suggest to use some tools to draw these animations (doing directly by javascript can be hard). There is a plugin to export your design in Adobe Fireworks into a canvas element. Microsoft also offers some tools, so don't be affraid about this.
Finally, the amazing APIs
I really like what ease is to include video or audio with HTML 5, just to include the video and audio tags and configuring them properly with attributes like controls, autostart, ... Moreover, drag and drop feature is another api very important in the web sites nowadays and just suscribing in some events it is possible to implement it.
Final considerations
The matter here is how the browser compatibility will be with HTML 5. Currently, the most important browsers support almost all the standard but not everything and they recommend just using it with testing purposes. About backward compatibility, there is a javascript library (modernizr.js) that if you link it in your website, the old browsers (even IE 6) will see the content in a proper way (hopefully).
Regarding my experiences on this topic, I really like HTML 5 and I am using it on an end career project where I am already having amazing results. But there are a lot of work pending on the browser side, not just supporting HTML 5, but CSS 3 (currently the most compatibility browser of CSS 3 is Chrome with 62%), so many changes will come...
No hay comentarios:
Publicar un comentario