Html5 nuevos tags y atributos

Esta entrada es continuación de la entrada: Los nuevos tags de HTML5.

Previamente comente sobre las nuevas tags de Html5 para nuevos elementos estructurales de un documento, hay además dos nuevas tags para contenido inline: <mark> y <time>.

<mark> tiene como función resaltar texto dentro de un contenido (como si se hubiese marcado con marca-textos), la idea es remarcar información o datos importantes hacia los cuales se desea dirigir la atención del lector.

<time> tiene el proposito de hacer el contenido más legible o accesible para los boots o programas al usarse para indicar datos de hora o de fecha y hora, dichos datos han de ser precisos, para los casos de hora hay que usar un formato de 24 horas, ejemplo: <time>14:30</time>; tambien se puede utilizar para mostrar un dato y relacionarlo con una fecha ejemplo: tengo visitas para el proximo viernes (24-feb-2012), en código queda así:

  <p>
  Tengo visitas para el proximo <time datetime="2012-02-24">viernes</time>
  </p>

Si se desea presentar un dato en formato distinto de 24h se puede hacer y dentro del codigo especificar el valor en 24h, así: <time datetime="15:00">3pm</time>. Si es necesario se puede especificar con toda precisión un datetime, incluyendo zona horaria, ejemplo:

  <p>
  Bitacora del capitan. 
2da anotación día <time datetime="2012-02-22T20:54-06:00">miercoles</time>. 
Hoy ha sido una jornada...
  </p>

<time> tiene tres posibles atributos: datetime se usa para especificar fecha, hora o ambas, como en los ejemplos antes mencionados; pubDate, este atributo se coloca como tal sin valor, sirve para indicar que es una fecha de publicación del documento o de un artículo (en elementos article), por ejemplo la publicación de esta entrada se puede codificar de la siguiente forma:

<article>
  <h2>Mi articulo</h2>
  Publicado en <time datetime="2012-02-23" pubdate>Jueves 23</time>
  <section id="contenido">
  Bla, bla, bla ...
  </section>
</article>

valueAsDate es un atributo que igual que pubdate se coloca sin valor y sirve para que el elemento o tag regrese un objeto tipo date con la fecha [y hora] contenidos, ejemplo: <time datetime="2011-12-25" valueasdate>La pasada Navidad</time>.

Como ultima nota relacionada al time en el caso de fechas con detalle exacto para el atributo datetime en el ejemplo use el valor [2012-02-22T20:54-06:00] donde cabe explicar que el -06:00 es el UTC que aplica en mi caso, se puede escribir el valor de UTC o el nombre de la zona horaria. [Nombres y explicacón de husos horarios]

Hay dos nuevos tipos de atributos en Html5: data-X y contenteditable.

data-X donde el X puede ser cualquier token, abreviatura o palabra para identificar un valor, por ejemplo tenemos una imagen y queremos conocer el número de clicks dados a dicha imagen (desde el lado del cliente y en una misma sesión), queremos obtener y actualizar ese valor desde jquery (o javascript simple), inicialmente el valor será cero y se ira incrementadno cada que se haga click sobre la imagen.

Una solución puede ser almacenar ese valor en el atributo alt y obtenerlo y actualizarlo cada que haga falta, es valido y funciona pero el atributo alt no es para eso y de hecho sería un mal uso, entonces para eso podemos usar el data-X, por ejemplo <img src="alguna_imagen.png" alt="imagen" title="hazme click" data-nclicks="0"> y por medio de un script js estar actualizando el valor [data-nclicks] con cada click.

contenteditable, sirve como su nombre indica para indicar que el contenido de un elemento es editable, sí, podemos crear parrafos, divs, listas, secciones, etc editables por el cliente, en la siguiente seccion puedes hacer la prueba y editar el contenido:

Hazme click y comienza a editar mi contenido, pon tu nombre aquí, tu ciudad, tu e-mail, nada de lo que escribas será recordado, guardado o procesado de ninguna forma...

Para hacer lo anterior el código es:

  <div style="background-color: rgb(255,225,215); border: solid 1px black;" contenteditable="true">
  Hazme click y comienza a editar mi contenido, pon tu nombre aquí, tu ciudad, tu e-mail, nada de lo que escribas será
  recordado, guardado o procesado de ninguna forma...
  </div>

contenteditable, sirve para permitir al cliente crear notas en determinadas secciones o incluso se puede utilizar como una forma de obtener informacion o datos directamente desde parrafos o secciones y sin formularios, claro que para procesar o guardar lo escrito hay que utilizar scripts extras.

Fuentes:
* HTML5 & CSS3, autor Brian P. Hogan, editorial Pragmatic Bookshelf.
* http://html5tutorial.info/