¿Qué características de HTML 5 y CSS 3 soporta mi navegador?

El sitio web findmebyIP permite averiguar qué características de las nuevas tecnologías HTML 5 y CSS 3 soporta el navegador con el que te conectas a la página.

Por ejemplo, las siguientes dos imágenes muestran parte del test que se realiza en esta página. En la primera imagen vemos los resultados para Internet Explorer 8:

Y la siguiente imagen muestra los resultados del mismo test para Firefox 3.6:

Como se puede ver, los resultados son muy diferentes.

El documento HTML5 mínimo

¿Cuál es la mínima página escrita con HTML5 que sea válida? En el artículo A Minimal HTML5 Document nos lo explican paso por paso. Y este es el resultado final:

So the minimal valid, secure, screenreader-accessible and stylable-in-IE HTML5 page (not email) that it easily readable and maintainable (subjective, of course) is probably

 <!doctype html> <html lang=en> <head> <meta charset=utf-8> <title>blah</title> </head> <body> <p>I'm the content</p> </body> </html> 

HTML5: The Facts And The Myths

El artículo HTML5: The Facts And The Myths de Bruce Lawson es de “obligada lectura” para cualquiera que quiera empezar a trabajar con HTML5.

Los mitos que desenmascara son:

  • “I Can’t Use HTML5 Until 2012 (or 2022)”
  • “My Browser Supports HTML5, but Yours Doesn’t”
  • HTML5 Legalizes Tag Soup
  • “I Need to Convert My XHTML Website to HTML5”
  • HTML5 Kills XML
  • HTML5 Will Kill Flash and Plug-Ins
  • HTML5 Is Bad for Accessibility
  • “An HTML5 Guru Will Hold My Hand as I Do It the First Time”

Y si quieres saber más, te recomiendo su libro Introducing HTML 5.

HTML5Rocks

HTML5Rocks es un sitio web desarrollado por Google para promover el empleo del nuevo lenguaje HTML5. Por ahora, HTML5 no es una recomendación del W3C, es decir, su especificación no está completada, pero se espera que sea una recomendación en 2011.

En HTML5Rocks podemos encontrar información muy interesante:

  • HTML5 – Web Development to the next level: una presentación en la que se explican las nuevas características de HTML5 y de otras tecnologías adicionales.
  • Code Playground: ofrece numerosos ejemplos de las nuevas características y además incluye un editor que permite “jugar” con el código.
  • Samples Studio: 9 ejemplos completos de diversas aplicaciones que emplean las nuevas características y que podemos copiar y usar en nuestros sitios web.
  • Step by Step – Tutorials: tutoriales sobre HTML, vídeo, geolocalización, etc.

¿Qué ofrece HTML 5?

HTML 5, la próxima versión del lenguaje de marcado HTML va a ser toda una revolución. Por ahora sigue siendo un borrador (el último documento disponible es del 24 de junio de 2010) pero se espera que en 2011 esté terminada la especificación.

A día de hoy, ya son varios los navegadores que incorporan parte de la especificación actual de HTML 5. El sitio web HTML5 & CSS3 Readiness ofrece información de qué implementa cada navegador.

Pero, ¿qué ofrece HTML 5? La principal ventaja es que pretende eliminar (o por lo menos, reducir) el empleo de otras tecnologías que se emplean en las páginas web mediante plug-ins y add-ons como Adobe Flash, Microsoft Silverlight, Oracle Java, etc. Para lograrlo, HTML 5 incorpora una gran cantidad de nuevas características que prometen revolucionar el desarrollo de las páginas web.

Brad Neuberg, programador de Google, publicó el año pasado un interesante vídeo donde explica y muestra algunos ejemplos de las nuevas funciones de HTML 5.

Introduction to HTML 5 from Brad Neuberg on Vimeo.

En el vídeo nos explican que las principales características que incorpora HTML 5 son: canvas/SVG, video, geolocalización, caché de aplicaciones, uso de bases de datos en el propio navegador y “web workers”.

Las transparencias están disponibles en Introduction to HTML 5.

HTML5+CSS3+JS

Acabo de leer en el periódico El Mundo el artículo HTML5 + CSS3 + Javascript: Cada vez más y mejor.

Según el artículo, Google, Microsoft y Apple están apostando fuerte por la combinación HTML5 + CSS3 + JavaScript para que se convierta en la tecnología estándar de la Web y desplace totalmente a otras tecnologías competidoras como Flash:

Google, Microsoft y Apple ya han hecho su apuesta: HTML5 + CSS3 + Javascript. ¿Qué significan estas siglas? Páginas web mucho más ricas, completas, interactivas e interesantes que las que se hacen hoy en día. Infinitas posibilidades con gráficos e imágenes vectoriales, fotos, vídeos y otros elementos.

[…] Las grandes compañías de la Red quieren que HTML5 + CSS3 + Javascript sea la tecnología predominante para el desarrollo de sitios web. Primero porque, frente a otras como Flash o Silverlight, es código abierto y por tanto común a todo el mundo. Segundo, porque es una evolución lógica del modelo actual. Tercero, porque es muy potente.

[…] Si Google, Microsoft y Apple quieren que la apuesta sea HTML5 + CSS3 + Javascript deberían ponerse de acuerdo en cómo llevar esta tecnología a sus navegadores. El resto, simplemente, seguiría su camino para sobrevivir.

Por cierto, en este artículo aparece la siguiente imagen que se puede encontrar en la página HTML5 & CSS3 Readiness.

 

Internet Explorer 9 soportará el estándar HTML5

En El País aparece la noticia Internet Explorer 9 soportará el estándar HTML5, que reproduzco a continuación por lo interesante e importante que es para el desarrollo web:

Microsoft ha presentado los primeros esbozos de su nuevo navegador Internet Explorer 9. La mayor novedad es que soporta el estándar HTML5 que hace más fácil la tarea con archivos audiovisuales y es una competencia clara al programa Flash. También presenta un motor de JavaScript más rápido. La nueva versión ocupa menos recursos del ordenador. Microsoft ofrece la descarga de una plataforma de Internet Explorer 9 que no es el navegador completo. Se trata de versiones preliminares y parciales para que los desarrolladores puedan analizarlo y aportar mejoras. Periódicamente irá presentando los cambios que introduzca en esta nueva versión de su navegador.

La propia Microsoft ha sometido el navegador al test Acid3 que mide el grado de aplicación de los estándares en el mismo. De momento, obtiene un 55 sobre 100, pero es un paso significativo en la voluntad de la compañía para ajustarse a los citados estándares.

La versión beta del navegador se lanzará cuando la empresa considere que ha llegado al umbral de exigencias que se plantea.

Microsoft ganó la batalla de los navegadores frente a Netscape, gracias a ofrecerlo embebido gratuitamente en Windows. Su Internet Explorer 6 todavía está instalado en muchos ordenadores, a pesar de las insistentes recomendaciones de la compañía para que el internauta emigre a versiones más actualizadas porque el citado navegador presenta notables flaquezas en la seguridad y no puede soportar adecuadamente los nuevos recursos que se emplean en la web. Microsoft lanzó la versión definitiva de Internet Explorer 8 hace un año. La aparición de otros navegadores como Firefox o Chrome, que van logrando progresivas cuotas de mercado, ha mermado su dominio en este sector.

¿Por qué escribir HTML válido es importante?

Escribir HTML válido es muy importante y evita muchos problemas, como por ejemplo, que una página no se vea igual en diferentes navegadores. ¿Por qué? Porque cuando una página contiene errores, cada navegador intenta corregir ese error de diferente forma. ¿Por qué de diferente forma? Porque el estándar dice cómo se tienen que hacer bien las cosas, pero no dice nada para cuando se hace mal.

Acabo de encontrar la página Same DOM Errors, Different Browser Interpretations, que explica que cuando se escribe HTML no válido, los navegadores construyen el árbol DOM equivalente al documento de distinta forma. El artículo es un poco largo, pero es muy interesante y además compara cómo se comportan varios navegadores ante un mismo error.

(Actualización 25/05/2012)

He realizado unos vídeos en los que explico por qué es importante escribir código HTML correcto:

Parte 1:

[kml_flashembed movie=”http://www.youtube.com/v/RnzKl8OA5gQ” width=”560″ height=”315″ wmode=”transparent” /]

Parte 2:

[kml_flashembed movie=”http://www.youtube.com/v/_NHarDRZimw” width=”560″ height=”315″ wmode=”transparent” /]

Parte 3:

[kml_flashembed movie=”http://www.youtube.com/v/fBQ8wE5Ffxs” width=”560″ height=”315″ wmode=”transparent” /]

Is The Web Ready For HTML 5?

Fuente: internetnews.com April 16, 2007

If Mozilla, Opera and Apple’s Safari browser have their way, the HTML specification (define) could be getting its first major point update in a decade.

The three vendors have banded together in a proposal to the W3C for the HTML 5 specification, which includes Web Apps 1.0 and Web Forms 2.0 specifications and that it’s also backwards compatible with HTML 4.

“HTML5 is about preserving the information people have accumulated over the years,” Opera spokesperson Anne van Kesteren told internetnews.com. “By remaining backward and forwards compatible, we hope to ensure that people will be able to interpret HTML for decades if not centuries to come.”

HTML is the foundation markup language on which the Web was and is built and was originally created by Tim Berners-Lee. The last major upgrade to HTML was in 1997 with the release of version 4.0. The HTML 4.0.1 recommendation was published in 1999.

The W3C, the standard body responsible for HTML, has been focused for the most part with working on the XHTML (define) specification with version one issued as a formal specification in 2000. XHTML 2.0 is now a working draft; XHTML is a hybrid of both XML (define) and HTML for Web markup.

According to Charles McCathieNevile, Chief Standards Officer at Opera, the W3C has effectively abandoned any effort to develop the HTML that has been used on the Web since HTML 4.01.

“That specification is still poorly implemented, in part because it is not very clear in a lot of cases how to implement it,” McCathieNevile told internetnews.com. “We along with Apple and Mozilla felt that it was important to do something about this.”

It is unclear whether Microsoft will support the HTML 5 effort with its Internet Explorer browser.The company did not respond to requests for comment.

If adopted, HTML 5 promises some tangible benefits for both Web users and developers.

“HTML 5 will enable better cross-browser compatibility and better support for “Web 2.0″-style Web applications in addition to documents,” Brendan Eich, CTO for Mozilla, told internetnews.com. “HTML 5 also allows for better support for multimedia.”

The Web Apps 1.0 specification, which would form a core part of the HTML 5 standard, is intended to provide features that make it easier to author Web-based applications.

Some of those additions include context menus, a direct-mode graphics canvas, in-line popup windows, and server-sent events.

The other core new element is from the Web Forms 2.0 specification, which extends the way that forms are defined. The proposed specification includes new attributes, DOM (define) interfaces and events for validation and dependency tracking as well as XML form submission and initialization. The specification also aims to document existing practices in the forms area that have not yet been officially standardized.

The Web Forms 2.0 specification has been in play since at least 2004. That’s when Ian Hickson, then a developer at Opera, first helped to author the effort. Hickson now works for Google.

In their proposal to the W3C, Apple, Mozilla and Opera ask that Hickson be named as editor for the W3C’s HTML 5 specification as a means to preserve continuity with the work that he’s already done.

Continuity and standards are key to the message of why HTML 5 is important and why the three partners want to see it adopted as a formal W3C standard. “Having more Web applications based on open standards gives users more choice between Web browsers and between operating systems,” Eich said.

Though HTML 5 is not yet a formal standard, HTML 5 technologies are already in both the Opera and Mozilla Firefox Web browsers.

Mozilla’s Eich noted that Firefox 2 already provides support for client-side storage and has supported the “CANVAS” tag element since Firefox 1.5. Going forward, Mozilla is adding offline Web application support for Firefox 3.

Opera’s McCathieNevile noted that Web Forms 2, an enhancement to the original HTML forms, are implemented in Opera, and are in use, for example, at my.Opera.com. The canvas element and API, which enables graphics to be rendered more quickly, is already implemented in Opera and can be seen in a large number of opera widgets such asArtist’s Sketchbook (http://widgets.opera.com/widget/4647) and Circular Tetris (http://widgets.opera.com/widget/4196).

By working on the HTML 5 standard and implementing some of the items in it, the Web could well end up with an HTML standard that is actually effective.

“Active involvement helps us clarify implementation questions and ensure that the standards are implementable,” McCathieNevile said. “If HTML 4 had gone through a “Candidate Recommendation” where it had to be implemented completely before it was published as a final version, it might be a much clearer and better specification.”