¿Qué es pronto para HTML5?

Recientemente lei una noticia en la que se comentaba que un miembro de la W3C decia que es pronto para empezar a usar HTML5 para desarrollos "reales" de páginas web.

Esta persona justifica este comentario por la falta de compatibilidad entre los distintos navegadores, y sobre todo en los más antiguos.

Pues para nada estoy de acuerdo con esta corriente, y voy a intentar justificar mi posición:

1. En mis primeros post comenté algunas de las formas para hacer compatible HTML5 con los navegadores antiguos que no implementan las nuevas características. Por lo tanto, tan solo hay que ser ordenados, saber utilizar las alternativas que hoy por hoy disponemos para que las funcionalidades que usemos tengan un equivalente que funcione en todos los navagadores. De hecho esto no es nuevo, cuando trabajamos con javascript siempre debemos intentar ofrecer alternativas para aquellos usuarios que no dispongan de javascript. Por lo tanto, donde está el problema??? la verdad que no lo veo por ningún lado. Un ejemplo claro es la reproducción de videos, siempre podemos usar el nuevo tag de video para la reproducción, si el navegador no tiene compatibilidad con el tag video, reproducimos el video tal cual se hacía hasta ahora, con un objeto flash y ya no tendremos problemas de incompatibilidad.
2. En el peor de los casos, encontramos una funcionalidad que no se ve en un navegador en concreto y no hay alternativa, pues en este caso una solución muy válida es poner un mensajito de: "actualice su navegador para poder ver esta página". ¿Qué malo hay en esta solución? Yo no lo veo, por ejemplo, hay software que se pierde la compatibilidad cuando actualizamos nuestro Sistemas Operativos, y simplemente nos vemos forzados a actualizarnos. Si no recuerdo mal, youtube desde hace tiempo ya pone este tipo de mensajes cuando lo abrimos con ie6.
3. El apoyo cada día es mayor, grandes compañias, google, yahoo, facebook, etc ... apoyan este nuevo estandar, y lo apoyan ahora mismo, por lo tanto, no creo que HTML5 sea el futuro, sino ya es presente, por lo que pensar que tenemos que esperar de 2 a 3 años para empezar a usarlo en proyectos reales me parece un gran error.

Es más, yo creo que este es el mejor momento para quitarnos una de las grandes lacras del desarrollo web, los navegadores antiguos, y en especial Internet Explorer 6. Quizás hayamos encontrado la excusa perfecta!!

En resumen, no tengais miedo en comenzar a usar HTML5, ir por delante nunca fue un problema, al revés, siempre es beneficioso, si somos capaces de tomar ventaja tendremos mucho camino recorrido.

Elemento address en HTML5

El elemento <address> lo tenemos disponible desde html3, y lo podemos utilizar para indicar información de contacto de un documento, tales como los nombres de los autores y los enlace a sus correspondientes páginas, e-mail de contacto, dirección postal de los mismos, número de teléfonos y así sucesivamente. Pero hay que tener claro que este elemento no lo debemos usar para todos los enlaces o correos de contacto, o dirección postal que introduzcamos en nuestra página, si no que debemos reservarlo tan solo para la información de contacto del documento

En versiones anteriores este elemento afecta a todo el documento, es decir, que tan solo podemos indicar la información de contacto de un autor por página.

El problema de esta estructura es que es posible que necesitemos en una misma página mostrar más de un articulo, por lo que necesitaremos mostrar información de más de un autor, lo que se hace imposible en versiones anteriores.

En html5, tal y como hemos comentado en post anteriores, podemos crear secciones explícitamente con los elementos <article>. Cada sección <article> podrá tener su elemento address particular, ofreciendo información de cada articulo por separado.

Una ventaja más de las secciones de html5.

Para cerrar este tema os muestro un ejemplo de uso de este elemento:

<ADDRESS>
HTML5 PASO A PASO<BR>
Sergio Raposo Vargas<BR>
Sevilla, España<BR>
Tel: +34 954 XX XX XX
</ADDRESS>

Secciones en HTML5: El algoritmo de generación de esquemas (outline)

Ver articulo anterior sobre secciones en html4


Definiendo secciones en HTML5

En principio todos los contenidos que se encuentran comprendidos dentro de la etiqueta body forman parte de una sección. Existe la posibilidad de tener secciones anidadas, es decir, de formar una estructura de secciones en arbol. Las secciones se pueden declarar de una forma explicita o implicita. Más adelante veremos que diferencias hay entre unas y otras.
Las secciones explicitas se definen utilizando los elementos de html: body, section, article, aside, footer, header y nav.
Ejemplo

<section>
  <h1>HTML5 Paso a paso</h1> 
  <section>
    <h2>Introducción</h2>
    <p>En este capitulo haremos una introducción ....</p>
  </section>
  <section>
    <h2>Configuración inicial</h2>
    <p>La configuración inicial pasa por ...</p>
  </section>
  <aside>
    <p>Manuales de HTML5 complementarios</p>
  </aside>
</section>
<footer>
  <p>(c) HTML5 paso a paso. Aviso legal ...
</footer>

Este trozo de código html define dos secciones principales, la creada por el tag section y por footer:

<section>
  <h1>HTML5 Paso a paso</h1> 
  <section>
    <h2>Introducción</h2>
    <p>En este capitulo haremos una introducción ....</p>
  </section>
  <section>
    <h2>Configuración inicial</h2>
    <p>La configuración inicial pasa por ...</p>
  </section>
  <aside>
    <p>Manuales de HTML5 complementarios</p>
  </aside>
</section>
<footer>
  <p>(c) HTML5 paso a paso. Aviso legal ...
</footer>

 y la primera sección tiene 3 subsecciones:

<section>
  <h1>HTML5 Paso a paso</h1> 
  <section>
    <h2>Introducción</h2>
    <p>En este capitulo haremos una introducción ....</p>
  </section>
  <section>
    <h2>Configuración inicial</h2>
    <p>La configuración inicial pasa por ...</p>
  </section>
  <aside>
    <p>Manuales de HTML5 complementarios</p>
  </aside>
</section>
<footer>
  <p>(c) HTML5 paso a paso. Aviso legal ...
</footer>

 Esto lleva a la siguiente estructura:

1. Section
   1.1 Section
   1.2 Section
   1.3 Section (aside)
2. Section (footer)
 

Definiendo Encabezados en HTML 5
Mientras que los elementes comentados anteriormente crean una sección, el esquema del documento html requiere también de un título. La regla que define el título de una sección es simple: El primer elemento de encabezado (h1-h6) de la sección será el título de la sección.
Los elementos de encabezado vienen definido por un rango, el cual lo asigna el número que precede a la letra 'h', de forma que h1 es el elemento más alto y h6 es el más bajo. El ranking es solo relativo a la sección donde se encuentra, y no servirá para definir el resumen del documento html. Será la estructura de secciones la que definan el esquema. Por ejemplo, el siguiente trozo de código:

<section>
  <h1>HTML5 Paso a paso</h1>    
  <p>...descripción de la sección...</p>
  <section>
     <h2>Nuevos elementos HTML5</h2>  
     <p>...definición de la subsección...</p>
  </section>
</section>
<section>
  <h3>HTML 5 Avanzado</h3>
  <p>In this section, we discuss the famous mongolian gerbils. 
     ...this section continues...
</section>

llevará a la siguiente estructrua:

1. HTML5 Paso a paso
   1.1 Nuevos elementos HTML5
2. HTML 5 Avanzado

Como se puede observar, el rango establecido por los encabezados (en el ejemplo h1 para la sección principal, h2 para la subsección y h3 para la segunda sección principal) no es relevante a la hora de crear la estructura del documento. Aun así, se recomienda por claridad y legibilidad que los encabezados utilizados vayan acorde con la sección, aunque esto no sea tenido en cuenta posteriormente.

Secciones implícitas
Ya que es necesario mantener una compatibilidad con las versiones anteriores de HTML, también es posible crear secciones de una forma implícita tal y como se hacía en las versiones anteriores.
Los elementos de encabezados (H1-H6) crean por si solas una nueva sección implicita en el esquema, siempre y cuando no sean el encabezado principal de una sección explícita. La forma en la que se posiciona la sección implicita en el esquema será definido por el ranking relativo al encabezado anterior.
Vamos a explicar esto mejor, imaginaros el siguiente ejemplo:

<section>
  <h1>html5 paso a paso</h1>  
  <p>...this section continues...</p>
  <h3 class="implicit subsection">Introducción</h3>
    <p>...contenido de la subsección...</p>
</section>

generará un esquema tal que:

1. html5 paso a paso
   1.1 Introducción

Sin embargo si el encabezado de la sección implicita es igual que el encabezado anterior, este cerrará la sección anterior (el cual debe haber sido una sección explícita) y creará una nueva sección implicita al mismo nivel:

<section>
  <h1>HTML5: Introducción</h1>  
  <p>...introducción a html5 ...
  <h1 class="implicit section">Nuevos elementos de html5</h1>
  <p>...definición de los nuevos elementos de html5...
</section>

Este código creará el siguiente esquema:

1. HTML5: Introducción
2. Nuevos elementos de html5 (definido implicitamente por el elemento h1, el cual cerró la sección anterior al mismo tiempo que generó la nueva)

Por otro lado, si el encabezado es de un rango más alto que el encabezado anterior, este cerrará la sección y creará una sección nueva del nivel superior:

<body>
  <h1>Manual de html5</h1>
  <h2>Nuevos Elementos</h2>
  <p>...introducción a los nuevos elementos...
  <section>
    <h3>Elemento header</h3>  
    <p>...definición del elemento header...</p>
    <h3>Elemento footer</h3>
      <p>...definición del elemento footer...</p>
    <h2>Funcionalidad Offline</h2>
      <p>Reptiles are animals with cold blood.
          ...this subsection continues...
  </section>
</body>

en este caso, el esquema creado será:

1. Manual de html5
1.1 Nuevos Elementos
1.1.1 Elemento header
1.1.2 Elemento footer 
1.2 Funcionalidad Offline

Sobreescribiendo secciones implicitas

Algunas veces una sección puede necesitar tener varios encabezados. A continuación veremos algunos casos habituales que se nos pueden presentar:

• Una sección sobre un libro o película en la que es necesario tener un título y subtítulo.

<section>
  <h1>El señor de los anillos</h1>
  <h2>La comunidad del anillo</h2>
</section>

Este código generará la siguiente estructura:

1. El señor de los anillos
   1.1 La comunidad del anillo

• Usar como encabezado de segundo nivel las palabras clave de un articulo, o sección

<section>
  <h1>Nuevo blog sobre html5</h1>
  <h2>HTML, HTML5, Secciones, Outline, Esquemas, Semántica</h2>
</section>

Este código generará la siguiente estructura:

1. Nuevo blog sobre html5
   1.1 HTML, HTML5, Secciones, Outline, Esquemas, Semántica

Debido a la generación de secciones implícitas que hemos comentado anteriormente, esto no es posible sin usar el elemento agrupador de encabezado introducido por HTML5 (<hgroup>). Este elemento esconde en el esquema del documento todos los encabezados excepto el primero, permitiendo así sobrescribir las secciones implícitas que se generan debido al segundo encabezado. El ejemplo anterior quedaría:

<section>
  <hgroup>
    <h1>Blog sobre HTML5</h1>
    <h2>Nuevo blog creado por Sergio Raposo sobre html5</h2>
  </hgroup>
</section>

Este produce el siguiente esquema:

1. Blog sobre HTML5

Sección raíz
La sección raíz es aquella que tiene un esquema (outline) por sí solo, pero las secciones y encabezados dentro de este no influyen en el esquema de su padre. A parte del body, el cual es el elemento raíz por defecto del documento html, los siguientes elementos generan un esquema independiente al esquema principal del documento html: <blockquote>, <details>, <fieldset>, <figure> y <td>.
Por ejemplo:

<section>
  <h1>HTML5 paso a paso</h1> 
  <section>
    <h2>Introducción</h2>
    <p>...introducción a html5 ...</p>
  </section>
  <section>
    <h2>Elementos de html5</h2>
    <p>Según dice el libro especializado en html5:
    <blockquote cite="Dive Into HTML5">
       <h1>Nuevos elementos
       <p>Los nuevos elementos de html5 son ...</p>
    </blockquote>
  </section>
</section>

generará el siguiente esquema:

1. HTML5 paso a paso
   1.1 Introducción
   1.2 Elementos de html5

Si os fijáis, este esquema no contiene la sección creada por el elemento <blockquote>, el cual, al ser una cita externa, generará una sección raíz y aislará su esquema del esquema principal generado por el body.

Secciones fuera del esquema


HTML 5 introduce cuatro nuevos elementos que permiten definir las secciones que no pertenecen a las grandes líneas de un documento web:

   1. El elemento <aside> define una sección que, aunque relacionado con el elemento principal, no forma parte del mismo directamente, como un cuadro de explicación o un anuncio. Tiene su propio esquema, pero no pertenece al principal.
   2. El código HTML de navegación (elemento <nav>) define una sección que contiene enlaces de navegación. Puede haber varios de ellos en un mismo documento, por ejemplo, una página con enlaces internos, como una tabla de contenido, y otro con los enlaces de navegación del sitio web. Estos enlaces no forman parte del flujo principal  ni del esquema y pueden que los lectores de pantalla o software de ayuda similares los ignore no renderizandolos, ya que no forman parte de la información que se está mostrando, simplemente muestra una lista de enlaces para navegar por nuestro sitio.
   3. La sección de cabecera (<header>) define un encabezado de página, por lo general contiene el logotipo y el nombre del sitio y, posiblemente, un menú horizontal. A pesar de su nombre, no es necesariamente colocarlo al principio de la página. Igualmente puede contener banners publicitarios en posición destacado, iconos de acceso directo como por ejemplo acceso a la página de mapa web o al formulario de contacto.
   4. El elemento <footer> define un pie de página, por lo general contiene los derechos de autor y avisos legales del sitio y en ocasiones algunos links de interés. A pesar de su nombre, no es necesario colocarlo en la parte inferior de la página.


Este articulo está basado en el artículo sections and outlines of an HTML5 document del Mozilla Developer Center.




Ir al primer articulo sobre secciones en html5

Secciones en HTML5: Errores encontrados en html4

Como ya he comentado en este blog varias veces, HTML 5 trae nuevos elementos que nos permiten dar formato a nuestras páginas web con un valor semántico. En este post voy a intentar describir como crear un documento con la estructura más idónea para nuestros contenidos.

¿Qué és el outline de un documento html?
Para comprender bien este post es fundamental saber qué es el outline de un documento html. El outline es lo que se puede llamar el esquema o índice del documento. No es más que la lista de secciones que forma la página web.

Estructura de un documento HTML4
La estructura de un documento, es decir, la estrutura semántica de lo que está entre las etiquetas <body> y </ body>, es fundamental para la presentación de la página al usuario. HTML4 utiliza el concepto de secciones y subsecciones de un documento para describir su estructura. Una sección está definida por una división de HTML (<div>) con elementos de encabezado (<h1>, <h2>, <h3>, <h4>, <h5> o <h6>) dentro de ella, que definen su título. Las relaciones del elemento div junto con un encabezado forman la estructura del documento y forman el outline del documento.
Para ver un ejemplo de como se forma el outline de un documento html veamos el siguiente ejemplo:

<div class="section" id="forest-elephants">
<h1>
Forest elephants</h1>
In this section, we discuss the lesser known forest elephants.
 ...this section continues...
 

<div class="subsection" id="forest-habitat">
<h2>
Habitat</h2>
Forest elephants do not live in trees but among them.
 ...this subsection continues...
 </div>
</div> 

El resultado será:
1. Forest elephants
    1.1 Habitat
Un elemento <div> no implica la creación de una nueva sección. La mera presencia de un encabezado implicará la creación de una nueva sección.
De esta forma, el siguiente ejemplo:

<H1>Forest elephants</H1>
<P>In this section, we discuss the lesser known forest elephants.
...this section continues...
<H2>Habitat</H2>
<P>Forest elephants do not live in trees but among them.
...this subsection continues... 
<H2>Diet</H2>
<H1>Mongolian gerbils</H1>

implica el siguiente esquema:
1. Forest elephants
    1.1 Habitat
    1.2 Diet
2. Mongolian gerbils

Problemas resueltos por HTML5
La definición de un documento con HTML4 implica numerosos problemas, a continuación comentamos los problemas que HTML5 ha intentado resolver respecto a los que teníamos en HTML4

1. El uso de <div> para definir secciones semántica, sin definir valores específicos para los atributos class, hace que automatizar un algoritmo para la generación del esquema sea algo imposible ("¿Es ese <div> parte del esquema de la página, define una sección o una subsección?" O "Es sólo un <div> de presentación, sólo utilizado para dar estilo?").En otras palabras, la especificación HTML 4 es muy imprecisa a la hora de definir una nueva sección. La generación automática de esquemas es importante, especialmente para los software especializados en ayudar a personas discapacitadas, que puedan adaptar la forma en que presentan la información a los usuarios de acuerdo a la estructura del documento. HTML5 elimina la necesidad de utilizar elementos <div> para esquematizar nuestras pátinas html, introduciendo un nuevo elemento, <section>, que es el responsable de quedar este tipo de secciones en los nuevos documentos HTML.
2. La fusión de varios documentos es difícil: la inclusión de un sub-documento en un documento principal significa cambiar el nivel del elemento de encabezados para conseguir mantener el esquema correcto. Esto se soluciona en HTML5 con los nuevos elementos de seccionamiento (<article>, <section>, <nav> y <aside>), que son siempre subsecciones de la sección anterior más cercana, independientemente de que las secciones hayan sido creadas por encabezados internos.
3. Porque cada elemento de encabezado es parte de un esquema, no es posible describir un subtitulo o título secundario (Ej: <h1>Título</h1><h2>Subtítulo</h2> creará el esquema: 1. Título 1.1 Subtítulo) de forma que que el subtítulo dependa directamente del título. HTML 5 introduce el elemento <hgroup> que esconde todos los elementos de encabezado dentro de él bajo una misma entrada del esquema formando tan solo una sección (<hgroup><h1>Título</h1><h2>Subtítulo</h2></hgroup> creará un esquema tal que: 1. Título).
4. En HTML 4, cada sección es parte del esquema del documento. Pero hay documentos que a menudo no son lineales. Un documento puede tener secciones especiales que contienen información que no es parte de él, a pesar de que está relacionado con el flujo principal, como un bloque de publicidad o una caja de explicación. HTML 5 introduce el elemento <aside> permitiendo que dichos tramos no sean parte del esquema principal.
5. Una vez más, en HTML4, ya que cada sección es parte del esquema del documento, no hay manera de tener información de la sección que contenga información relacionada con todo el sitio completo y no con el documento actual, así como los logotipos, los menús, tabla de contenidos, o información de derechos de autor y avisos legales . A tal efecto, HTML 5 introduce tres elementos de secciones específicas: <nav> para las colecciones de enlaces, tales como una tabla de contenido o menús, <foot> y <header> para obtener información relacionada con el sitio.

En términos más generales HTML5 aporta precisión a las características de seccionamiento y encabezado, lo que permite crear esquemas de documentos más predecibles y que pueden ser utilizados por el navegador más fácilmente para mejorar la experiencia del usuario.

Este articulo está basado en el artículo sections and outlines of an HTML5 document del Mozilla Developer Center.

hgroup element: Un agrupador de encabezados (h1-h6)

En este post vamos a tratar uno de los nuevos elementos de html5, el hgroup. Para empezar, siempre viene bien irse a la definición del estándar:

The hgroup element is typically used to group a set of one or more h1-h6 elements — to group, for example, a section title and an accompanying subtitle.

W3C Specification

Vale, pasemos a describir para que sirve este elemento. Como su definición indica, sirve para agrupar un conjunto de uno o más elementos de encabezado (h1-h6). Es decir, este nuevo elemento nos va a permitir agrupar en un mismo bloque un título y un subtitulo, o eslogan. Dentro de un elemento hgroup tan solo podemos introducir etiquetas de encabezado tales como h1, h2 o h3, de forma que no permite ningún otro tipo de tag en su interior.

Pero ..., porque es interesante este elemento: La respuesta está en la semantica que esta agrupación nos da. Es cierto que hasta ahora, nosotros podríamos usar sin problemas las etiquetas h1-h6, por ejemplo, a la hora de hacer una página en el que se muestra una noticia o articulo (diarios o blog por ejemplo) podríamos tener los siguientes encabezados:

• El título de nuestro sitio web
• El slogan utilizado en la cabecera que describe nuestro sitio web
• El título de la noticia
• El subtitulo de la noticia
• El título de una sección con información adicional en la columna de la derecha.

En este momento, en versiones anteriores teníamos un problema, no eramos capaces de poder agrupar los encabezados, pero podríamos empezar a asignar encabezados de la siguiente forma:

• H1: El título de nuestro sitio web
• H2: El slogan utilizado en la cabecera que describe nuestro sitio web
• H3: El título de la noticia
• H4: El subtitulo de la noticia
• H5: El título de una sección con información adicional en la columna de la derecha.

 Realmente esta asignación de prioridades de encabezado no es del todo correcta, principalmente porque se establece una prioridad de elementos que no es cierta ya que, según este orden, el slogan de la página es más importante que el titular de la noticia mostrada, por lo tanto, una estructura más correcta podría ser:

• H1: El título de nuestro sitio web
• <div>: El slogan utilizado en la cabecera que describe nuestro sitio web
• H2: El título de la noticia
• H3: El subtitulo de la noticia
• H3: El título de una sección con información adicional en la columna de la derecha.

Que pasa en este momento, lo primero es que hemos cambiado el slogan, ya no es un elemento de encabezado, y el titular de la noticia ha pasado a ser el h2 de esta forma elevamos la importancia del titular de la noticia. En nuestro caso hemos cambiado también el titular de nuestra sección de la derecha pasando a ser h3 y estando al mismo nivel que el subtitulo. Otra alternativa sería directamente quitar el título de la sección de la derecha de los encabezados, pasando a ser un elemento más de la web. 

Podemos seguír buscando posibles estructuras de nuestros encabezados, pero habrá una cosa que nunca llegaremos a conseguir, el relacionar los encabezados entre ellos, es decir, un sistema externo como un rastreador no será capaz de establecer asociaciones entre estos elementos, por lo que nunca sabrá que el slogan va asociado el título de nuestro sitio web, o que el subtitulo de la noticia va ligado con el titular.
Para estos casos usaremos hgroups, pudiendo agrupar bloques nuestros encabezados:

<header>

   <hgroup><h1>Título sitio web</h1><h2>Slogan</h2></hgroup>

</header>

<header>

   <hgroup><h1>Titular de la noticia</h1><h2>Subtitulo de la noticia</h2></hgroup>

</header>

<header>

   <hgroup><h1>Titular sección secundaria</h1></hgroup>

</header>

En este caso si estamos ofreciendo información adicional, no solo que elemento es el titular principal y cual secundario, sino que además estamos diciendo que están estrechamente relacionados.
En el ejemplo he usado el elemento header del cual no he comentado nada, pero esto lo dejaremos para otro post en el que explique mejor como usar dicho elemento.

Introducción al objeto CANVAS de HTML5

Aprovechando el blog de mi compañero Sergio, me gustaria contaros mi experiencia con el objeto CANVAS de html5.

¿Que es canvas?

Para que os hagais una idea de que es CANVAS es lo mas parecido a tener un trozo de papel en blanco encima de la mesa para poder dibujar, pintar, escribir y borrar lo que nos de la gana de forma no estructurada.

¿Por qué nace el objeto canvas?

Hasta ahora cuando un programador queria mostrar alguna animación en la pantalla una de las posibilidades que tenia era usar el plugin flash o cualquier otro plugin del estilo. Si queria crear una grafica estadistica podia llamar a alguna libreria de php que le creara la imagen en el servidor.
En cualquier caso siempre se dependia de algo externo al navegador. Asi pues era necesario que el propio navegador pudiese hacer este tipo de cosas, la solucion: CANVAS.

Basta de tanto rollos queremos verlo.

Para ver algo necesitamos poner un objeto CANVAS en nuestro html y cogerlo en javascript por ejemplo:

<html>
<head>
<script>
   function cargado(){
      var objetoCanvas = document.getElementById("html5pasoapaso");
      if(objetoCanvas.getContext){
         var contextoCanvas = objetoCanvas.getContext('2d');
         contextoCanvas.font = "20px Times New Roman";
         contextoCanvas.textAlign="center";
         contextoCanvas.fillText("Hola Mundo. HTML5 paso a paso" ,300, 150);
      }
   }
</script>
</head>
<body onLoad="cargado();">
<canvas id="html5pasoapaso" width="600" height="300"><b>Este navegador no soporta canvas.</b></canvas>
</body>
</html>

Si vuestro navegador no soporta el objeto canvas aparecera lo que pongamos dentro de la etiqueta canvas (podemos aprovechar para enlazarlo a descargar otro navegador).

Si lo soporta podremos ver el texto "Hola Mundo..."

¿Muy bien, que hemos hecho?

Pues muy simple hemos creado un objeto canvas y hemos dibujado dentro de él un texto. Si os fijais hemos esperado a que este cargado el html, ya que si hubiesemos intentado dibujar antes da un error al no existir el objeto.

¿Solo sirve para dibujar textos?

No, sirve para dibujar puntos, lineas, poligonos, circulos, curvas, textos, imagenes previamente cargadas, etc... y en un futuro (no muy lejano) poligonos en 3d con texturas.

¿Funciona en todos los navegadores?

Casi, hasta el momento funciona en todas las versiones actuales menos IE8, aunque esta confirmado que funcionará en la version 9. Esta dentro de la especificación standard de HTML5 y por lo tanto no debemos preocuparnos porque todos los navegadores lo implementaran.

¿Que se puede hacer con esto?

Practicamente todo lo que se podia hacer con flash y más, graficas, juegos, mapas y todo dinamico con javascript.

¿Por qué es mejor elegir canvas que cualquier otra opción?

Porque el trabajo duro lo hace el cliente, dejando libre al servidor, canvas usa aceleraccion por hardware lo cual lo hace muy rapido. No necesita instalar nada en el navegador. Se maneja de forma sencilla con javascript. Y un sinfin de ventajas.

Esto solo ha sido una introducción, en el proximo tutorial nos adentraremos más en el dibujo estatico con canvas.

Nuevo colaborador para este blog

Este blog amplia su lista de autores con la incorporación al mismo de Israel Román el cual va a compartir con nosotros su experiencia en HTML5, principalmente con el uso del elemento canvas.

Israel, "Isra para los amigos", ha sido compañero mio durante varios años y espero que pueda aportar mucha información a este blog para todos vosotros.
Muy pronto tendremos un primer tutorial básico sobre canvas el cual irá ampliando con el tiempo.
Aprovecho este post para invitar a todo aquel que tenga ganas de compartir sus conocimientos sobre HTML5 a unirse a este proyecto, para ello podéis contactar conmigo a través del correo: sergio.raposo (AT) opencmshispano.com