Bootstrap 4.0

Se acerca la llegada de Bootstrap 4 a nuestros hogares web y es hora de ver algunos elementos a favor y contra de lo que ya conocíamos. Y es que en estos últimos meses he tenido la oportunidad de probar la versión alpha 4, y la alpha 6, y ahora que llega la versión beta estamos cerca del lanzamiento final.

Entre las primeras cosas a tener en cuenta es que se ha añadido un fichero JavaScript más. Así que ahora tendremos que poner una línea de código CSS en la cabecera, y 3 líneas en el pie. Una de ellas sigue siendo jQuery, algo bastante estándar hoy en día en muchos sitios web, pero el hecho de tener que usar muchos ficheros JavaScript es algo que en principio no me acaba de gustar. Si realmente vamos a utilizar los 3 ficheros a lo largo del sitio, quizá sería mejor incluirlo todo en uno único y hacer una petición mayor y cacheárselo al usuario.

Otro elemento que me gusta es la paleta de colores nueva que se ha generado, con una serie de varios colores, los de los botones y alertas y finalmente la escala de grises.

El siguiente elemento importantísimo en este sistema es el del grid, que se ha actualizado bastante, han variado algunos tamaños. Esto hace que el sistema anterior sea incompatible en cuanto a tamaños… y por tanto hay que hacer un replanteamiento bastante importante en cuanto a los tamaños de pantalla sobre los que queremos trabajar. Aún así, también se han hecho muchas mejoras para simplificar su aplicación. Sin duda habrá que dar un repaso en profundidad a la información sobre el nuevo funcionamiento del grid, que valdrá la pena.

Otro detalle importante, siguiendo con la parte del grid es el de la alineación vertical de los distintos bloques. De la misma forma, cuando no completamos todas las columnas, podemos cambiar el comportamiento horizontal, hasta ahora sólo alineado a la izquierda. Y a esto podemos sumar una forma mucho más sencilla de ordenar los elementos como queremos.

El siguiente elemento básico es que han cambiado las fuentes a un sistema mucho más estándar y compatible con todos los dispositivos; se ha seguido una regla publicada sobre fuentes nativas de Smashing Magazine. Además, se han aplicado ligeros cambios en la tipografía, que siempre son de agradecer para dar una mayor flexibilidad a la hora de mostrar contenidos por pantalla; de forma similar se ha hecho con las tablas, que aunque no varía en exceso lleva algunos detalles visuales interesantes.

Algo que me ha gustado bastante es la mejora en las alertas, sobre todo porque se ha planteado un sistema más extendido (que hasta ahora parecía que sólo se pudiera poner una simple línea de texto).

El gran nuevo elemento son las card, que es el sistema de crear contenedores, más parecido al concepto Android Material. Estos elementos dan mucho juego, son bastante ampliables y configurables y van a requerir de una gran cantidad de tiempo para aprenderse todos sus detalles.

Otro de los componentes nativos que es muy importante en determinados sitios es el del carousel, que incluye algunos elementos nuevos para hacerlo más visual, como el de los indicadores y textos. De la misma forma, aunque sin grandes cambios, hay detalles en los sistemas de collapse que permiten multi-target y que ayudarán a facilitar cómo y cuándo mostrar determinados elementos.

Uno de los elementos que quizá se haya quedado corto es el de los dropdowns en el que sigo teniendo en falta la opción de al menos un nivel de sub menú por defecto en el sistema. Seguramente también para algunos los formularios deberían evolucionar algo más, aunque creo que el hecho de que la validación automática (sin necesidad de recargar) haya añadido unas buenas mejoras, va a suplir cualquier otro cambio. En la misma línea de las tablas tenemos las ventanas modales, que tampoco han sufrido grandes cambios aunque sí algunos detalles que ayudarán a mejorar la visualización de sus contenidos.

Otros elementos como la navegación o la barra de navegación tampoco lleva muchas mejoras en sí, pero sí que incluyen algunos detalles que mejoran todo el funcionamiento, al igual que lo hacen los popovers que incluyen mejoras en su contenido.

Entre las utilidades, una de las interesantes es la de los bordes, que hasta ahora había que ponerlos a mano mayormente. Y la siguiente es la de los tamaños, que en general las horizontales no suelen ser muy problemáticas pero sí las verticales cuando trabajas con muchos bloques; ahora te permitirán definir alturas y anchuras de los bloques de forma sencilla.

Y finalmente el cambio quizá más curioso es que la nueva versión no incluye ninguna biblioteca de iconos por defecto, por lo que simplemente te recomiendan una lista de posibilidades.

Como opinión personal, el cambio de la versión 3 a la 4 es a veces un poco traumática, principalmente por la mentalidad de las cards, aunque el resultado es ahora más plano (más Material) y a mucha gente no le acaba de convencer, creo que esta nueva versión aprende de algunos errores del pasado, mejora muchos elementos con pequeños detalles, y sin duda creo que hará la experiencia mucho más agradable para los usuarios, principalmente en aquellos que usen tecnologías móviles. Y si quieres comentar a trastear, sólo has de probar los distintos ejemplos de casi todos los elementos de esta nueva versión.

Recomendaciones de Google cuando se va a programar en HTML

Google genera mucho contenido de código abierto, y entre este se encuentra muchísmo código de programación. Pues existen una serie de guías en las que se recomiendan determinadas formas de trabajar que pueden ser interesantes, principalmente (al menos a mi) las que hacen referencia al HTML. Me gustaría destacar algunas de las recomendaciones… que no significa que yo las use o que esté de acuerdo, pero creo que son mencionables.

Uso del protocolo

No se recomienda indicar el uso del protocolo en cuestión cuandos e llama a un objeto. A mi me gusta ponerlo, y aunque sé que en el RFC se dice que no es necesario…

<!-- No recomendado -->
<script src="http://www.example.com/example.js"></script>
<!-- Sí recomendado -->
<script src="//www.example.com/example.js"></script>

Indentación

Algo que yo suelo hacer… que el código esté bien ordenado. Para ello las “tabulaciones” se indicarán con 2 espacios (se recomienda no usar tabulaciones, aunque yo es lo que uso).

<ul>
  <li>Fantastic</li>
  <li>Great</li>
</ul>

Mayúsculas/Minúsculas

Se recomienda que todo el HTML esté en minúculas:

<!-- No recomendado -->
<A HREF="/">Home</A>
<!-- Sí recomendado -->
<img src="example.png" alt="Google">

Espacios en blanco

Es mejor no dejar espacios en blanco si no son necesarios.

<!-- No recomendado -->
<p>¿Qué? </p>
<!-- Sí recomendado -->
<p>Gracias</p>

Codificación

Esto es muy sencillo… se recomienda el uso de UTF-8 (sin BOM). Además, en las plantillas HTML se debe indicar la meta-etiqueta correspondiente:

<meta charset="utf-8">

HTML5

Se prefiere HTML5 en los documentos, con su cabecera correspondiente:

<!DOCTYPE html>

Esto también incluye el uso del MIME text/html y no de XHTML y, por ello, no hace falta cerrar las etiquetas o sea, es mejor <br> y no <br />.

Código HTML válidado

Algo de lo que siempre hay muchas discusiones… personalmente es lgo que me gusta cumplir, al menos cuando la web no tiene códigos de publicidad u otros elementos externos.

<!-- No recomendado -->
<title>Test</title>
<article>This is only a test.
<!-- Sí recomendado -->
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>

Semántica

Hay que usar el HTML según su valor inicial, esdecir, un P es un párrafo, y un A un enlace.

<!-- No recomendado -->
<div onclick="visitarRecomendados();">Recomendados</div>
<!-- Sí recomendado -->
<a href="/recomendados/">Recomendados</a>

Multimedia

Hay que proveer de contenido alternativo en el caso de uso de elementos multimedia. Por ejemplo, las imágenes deberían llevar un texto alternativo.

<!-- No recomendado -->
<img src="example.png">
<!-- Sí recomendado -->
<img src="example.png" alt="Contenido de ejemplo.">

Inter dependencia

Hay que intentar mantener diferenciado y desvinculado el código de la página, de la estructura (markup) de la presentación (styling) del comportamiento con los mismos (scripting).

Evitar entidades

Gracias al UTF-8, es casi innecesario el uso de entidades HTML (por ejemplo el &eur para representar ). Sólo hay dos excepciones habituales que son el & y el < o >.

<!-- No recomendado -->
El símbolos del Euro es: &ldquo;&eur;&rdquo;.
<!-- Sí recomendado -->
El símbolos del Euro es: “€”.

Etiquetas opcionales

Este es otro de esos puntos en los que no estoy 100% de acuerdo. Si bien es cierto qu una de las grandísimas ventajas del HTML5 es que no es necesario escribir todo el código estructurado como hasta ahora, no tengo muy claro que sea interesante de cara a la compatibilidad con todo.

<!-- No recomendado -->
<!DOCTYPE html>
<html>
  <head>
    <title>gastando bytes</title>
  </head>
  <body>
    <p>Mal.</p>
  </body>
</html>
<!-- Sí recomendado -->
<!DOCTYPE html>
<title>ahorrando bytes</title>
<p>Bien.

Atributo “type”

En cambio, esta sí que la considero del todo útil (ya que antes me arecía completamente inútil). En principio los ficheros externos a los que llamamos (por ejemplo .CC o .JS) no es necesarios indicarles el MIME al que mandamos (al fin y al cabo, los ficheros ya lo indican per sé).

<!-- No recomendado -->
<link rel="stylesheet" href="//www.google.com/css/maia.css" type="text/css">
<!-- Sí recomendado -->
<link rel="stylesheet" href="//www.google.com/css/maia.css">
<!-- No recomendado -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js" type="text/javascript"></script>
<!-- Sí recomendado -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

Formateado general

Hay que usar un salto de línea para aquellos bloques, listas o tablas e indentar cada elemento hijo. Esta es otra de las recomendaciones que agradezco, porque veo programadores que han hecho mucho daño al HTML.

<blockquote>
  <p><em>prueba</em> de un texto cualquiera.</p>
</blockquote>
<ul>
  <li>José
  <li>María
  <li>Juan
</ul>
<table>
  <thead>
    <tr>
      <th scope="col">Ingresos
      <th scope="col">Gastos
  <tbody>
    <tr>
      <td>5,00 €
      <td>4,50 €
</table>

Uso de comillas

Se recomienda el uso de comillas dobles en vez de comilla simple para los atributos.

<!-- No recomendado -->
<a class='boton boton-alternativo'>Acceder</a>
<!-- Sí recomendado -->
<a class="boton boton-alternativo">Acceder</a>

También hay una serie de recomendaciones para las hojas de estilo CSS. A parte de que el CSS debería validar (algo lógico). Además, se recomeinda que el nombre de las clases sea corto y genérico. Por ejemplo, es más recomendable usar #nav que #navegacion o usar .aux que no .boton-verde.

Selectores

Además, por un tema de rendimiento (muy importante de cara al WPO) hay que intentar ir al elemento más concreto que incliur los generales. Yo principalmente lo veo claro con los ID, pero no siempre con las clases.

/* No recomendado */
ul#ejemplo {...}
div.error {...}
/* Sí recomendado */
#ejemplo {...}
.error {...}

Propiedades cortas

Algunos elementos permiten propiedades agregadas…

/* No recomendado */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
/* Sí recomendado */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

Valores 0

Los datos que son de valor 0 no requieren de unidades para acompañarlo. De la misma forma, si un vaor va entre -1 y 1, no es necesario indicar el 0.

margin: 0;
padding: 0;
font-size: .8em;

Hexadecimal

Hay que intentar usar los colores cuanto más cortos mejor. De esta forma, si hay colores que se pueden reducir a 3 caracteres, mejor.

/* No recomendado */
color: #eebbcc;
/* Sí recomendado */
color: #ebc;

Ordenar los elementos

Se recomienda ordenar los elementos de forma alfabética. Claro está dentro de cada elemento.

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

Finalizar las declaraciones

Al final de cada uno de los elementos se recomienda finalizar con un punto y coma.

/* No recomendado */
.test {
  display: block;
  height: 100px
}
/* Sí recomendado */
.test {
  display: block;
  height: 100px;
}

Separar propiedades y valores

Siempre utilizar un espacio entre las distintas propiedades y sus valores, pero no entre el valor y el punto y coma final.

/* No recomendado */
h3 {
  font-weight:bold;
}
/* Sí recomendado */
h3 {
  font-weight: bold;
}

Selectores y declaraciones

Siempre separar cada selector en una línea distinta de otro selector. Además separara con un salto de línea cada regla.

/* No recomendado */
a:focus, a:active {
  position: relative; top: 1px;
}
/* Sí recomendado */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}
html {
  background: #fff;
}

body {
  margin: auto;
  width: 50%;
}

Comillas

A diferencia del HTML, en los CSS es mejor evitar las comillas, y en caso necesario (como en los nombres de tipos de letra) usar la comilla simple .

/* No recomendado */
@import url("//www.example.com/css/estilo.css");

html {
  font-family: "open sans", arial, sans-serif;
}
/* Sí recomendado */
@import url(//www.example.com/css/estilo.css);

html {
  font-family: 'open sans', arial, sans-serif;
}

En fin, son simples sugerencias de reglas, unas más aceptables que otras… pero las que Google utiliza internamente cuando tiene que liberar código al mundo mundial. Así que, si quieres ser un buen googler ya sabes lo que te toca hacer.

HTML5 download

En estas dos últimas semanas llevo revisando y revisando elementos del HTML5 que, como ya dije, me apasionan, porque básicamente han hecho mejoras muy impresionantes. Y por eso hoy os voy a hablar de una que me ha gustado muchísimo: el html5 download.

Voy a hacerlo sencillo… imaginad que tengo un fichero que se llama ejemplo123454321.txt. Si pulsáis veréis que es un texto normal y corriente que se abre (en principio) dentro del propio navegador al tratarse de un fichero de texto plano. El código fuente es sencillo:

<a href="ejemplo123454321.txt">ejemplo123454321.txt</a>

ejemplo123454321.txt

Pero, ¿por qué no forzar la descarga y además aprovechar el camino en cambiarle el nombre del fichero? Para ello ha aparecido un atributo en HTML5 que es el download que permite esto mismo… sin necesidad de cambiar nada en el servidor… El código sería algo tal que así:

<a href="ejemplo123454322.txt" download="cambiodenombre">ejemplo123454322</a>
(descárgalo como cambiodenombre.txt)

ejemplo123454322.txt (descárgalo como cambiodenombre.txt)

Un detalle importante es que este sistema únicamente funciona si el fichero está en el mismo hostname desde donde se hace la petición.

¿Cómo se te queda el cuerpo?

Rel-Canonical, duplicados y versiones móviles

Desde que apareció en escena el rel-canonical me he encontrado en una decena de situaciones distintas de las que, a base de palos, he ido aprendiendo. Hoy me gustaría compair algunas de estas casuísticas en las que me he visto.

Por norma general

Lo ideal del rel-canonical es ponerlo en todas las páginas de un sitio web. Al menos en las páginas públicas (las que los robot son capaces de encontrar). Si tu robots.txt tiene un Disallow de alguna sección, no está de más que estas páginas también lo incluyan. Repito, en general, siempre utilizar el rel-canonical.

El rel-canonical se puede usar de dos formas: vía HTML o vía Header. En el caso del HTML simplemente hemos de colocar la meta-etiqueta en la cabecera de la página:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Javier Casares</title>
  <link rel="canonical" href="http://javiercasares.com/">
</head>

La otra posibilidad es la de la cabecera, en cuyo caso hemos de indicar algo tal que así (por ejemplo en PHP):

header("Link: <http://javiercasares.com/> rel=\"canonical\"");

Páginas noindex-ables

Cuando tenemos un meta-noindex y un rel-canonical comienzan algunos problemas. Las opciones son dos posibles; la primera de ellas es simplemente indicar el meta-noindex y no indicar el rel-canonical.

URL actual: http://javiercasares.com/?prueba=si

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Javier Casares</title>
  <meta name="robots" value="noindex">
</head>

Con esto simplemente esa dirección no se indexaría… porque aunque existe no queremos que se muestre… el problema de esto es que, aunque la dirección exista y no queremos que se indexe porque es exactamente igual que la página principal, se puede generar un ataque. Bing y Google aunque se les indica el “noindex” rastrean y almacenan la página, aunque no la muestran en los resultados de búsqueda, pero se tiene en cuenta, y si es mala, no mola nada.

La otra solución es la de simplemente indicar el rel-canonical…

URL actual: http://javiercasares.com/?prueba=si

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Javier Casares</title>
  <link rel="canonical" href="http://javiercasares.com/">
</head>

En este caso, esta página también se indexa pero cualquier enlace, fuerza o como se le quiera llamar pasa automáticamente a integrarse con la página principal. En principio la URL “maligna” no debería aparecer en los resultados de búsqueda.

Y os podéis preguntar: Javi, ¿y no sería mejor poner las dos cosas? ¡Miiic!, ¡error!. Si hacemos esto se produce un agujero negro en el espacio infinito que desindexa muchas cosas. Vosotros pensáis en algo tal que así:

URL actual: http://javiercasares.com/?prueba=si

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Javier Casares</title>
  <link rel="canonical" href="http://javiercasares.com/">
  <meta name="robots" value="noindex">
</head>

Si hacemos esto, se produce una paradoja extraña. Lo que ocurre es que el rel-canonical se prioriza sobre el meta-noindex. Esto significa que:

  1. El buscador toma la URL http://javiercasares.com/?prueba=si y la almacena como http://javiercasares.com/
  2. El buscador toma la URL http://javiercasares.com/ y le aplica el noindex.

¡Bien! Acabamos de desindexar de Google y Bing nuestra página principal. Sí, esto pasa… así que, niños, no pongáis nunca un rel-canonical con un meta-noindex… pero… ¿qué corre si el rel-canonical apunta a la URL correcta que ya tenía un meta-noindex anteriormente? Os explico la situación.

Imaginad que tenéis una página que, antes de pensar en ponerles el rel-canonical ya tenía puesto el meta-noindex. Es una URL correcta (o sea, la URL del navegador y la del rel-canonical coinciden) por lo que… ¿por qué no podemos aplicar el rel-canonical si Javi ha dicho al principio que recomienda ponerlo siempre? Pues, en este caso sí que tendría sentido ponerse.

URL actual: http://javiercasares.com/?pagina=5

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Javier Casares</title>
  <meta name="robots" value="noindex">
</head>

Imaginemos que la paginación de mi sitio funciona por parámetros, y que yo ya tenía el código anterior… esta página, tal y como está no se indexa, lo que es correcto porque yo lo he decidido así… ¿por qué no poner algo como esto?

URL actual: http://javiercasares.com/?pagina=5

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Javier Casares</title>
  <link rel="canonical" href="http://javiercasares.com/?pagina=5">
  <meta name="robots" value="noindex">
</head>

Pues, en este caso en principio el código sí que sería correcto.

Versiones móviles

Versiones, hoy en día, para dispositivos hay 3: escritorio (versión normal), móviles (los zapatófonos) y smartphones (los que soportan HTML5). También hay varias formas de afrontar este tipo de páginas… lo que se recomienda (aunque a mi hay detalles que no me convencen, aunque se pueden llegar a corregir con un poco de ingeniería) es que se utilice responsive web design. Esto significa que dependiendo de ciertas especificaciones se carga un CSS u otro. Pero hay otras opciones como que se carguen CSS distintos según el tipo de “navegador” o directamente que haya URLs separadas según el tipo de web.

El caso que voy a tratar es concretamente el tercero, o sea, el caso en el que las versiones de los distintos dispositivos tienen URL distintas. Por ejemplo, podemos tener estas 3 versiones:

URL versión escritorio: http://www.example.com/page-one/

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-one/">
  <link rel="alternate" media="handheld" href="http://phone.example.com/page-one/">
  <link rel="canonical" href="http://www.example.com/page-one/">
</head>

En este caso indicamos una URL alternativa para dispositivos móviles http://m.example.com/page-one/ y otra URL para dispositivos inteligentes http://phone.example.com/page-one/. ¿Qué habría que indicar en cada una de estas versiones?

URL versión móvil: http://m.example.com/page-one/

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <link rel="canonical" href="http://www.example.com/page-one/">
</head>
URL versión smartphone: http://phone.example.com/page-one/

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Example</title>
  <link rel="canonical" href="http://www.example.com/page-one/">
</head>

Y en principio hasta aquí todo lo que hay que saber sobre los rel-canonical… pero antes de acabar, un detalle sobre esto último que tiene que ver con los Sitemaps… y es que en los Sitemaps XML también se le puede indicar las direcciones URL alternativas para las versiones móviles…

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <url>
    <loc>http://www.example.com/page-one/</loc>
    <xhtml:link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-one/" />
    <xhtml:link rel="alternate" media="handheld" href="http://phone.example.com/page-one/" />
  </url>
</urlset>

¡Ala, ahí queda eso!

Sitios web más accesibles

Aunque no es la primera vez que hablo del HTML semántico he decidido darle un repaso a todo lo que ARIA implica en el desarrollo de un sitio web. WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) son unas mejoras del HTML para mejorar la accesibilidad de los sitios web. Como ya dije en su momento, básicamente le da algo más de inteligencia semántica a los sitios.

Pero no hemos de olvidar que el propio HTML5 a diferencia de sus versiones anteriores ha incorporado que prácticamente todas sus etiquetas ya llevan incorporados ciertos elementos semánticos. Por poner un ejemplo, la etiqueta H1 ya implica un header. La cuestión es… ¿cuándo y cómo hay que usar ARIA en HTML?

La primera de las normas es bastante sencilla. Si un elemento HTML ya incluye semántica ARIA integrada, no hace falta indicarla, a menos que la queramos cambiar.

La segunda de las normas también es sencilla, aunque a mi personalmente no me gusta mucho. Es recomendable no sobre escribir las reglas ARIA de los elementos. Por poner un ejemplo:

No se debe hacer así:

<h1 role="button">botón en la cabecera</h1>

Sería mejor hacerlo así:

<h1><span role="button">botón en la cabecera</span></h1>

Aunque si lo queremos hacer óptimo, podemos usar:

<h1><button>botón en la cabecera</button></h1>

¿Qué significa esto? Pues que si por ejemplo hacemos algo de este estilo:

<h1 role=button>texto</h1>

Realmente lo que tendríamos a nivel significado es esto:

<button>texto</button>

Otro ejemplo sería el siguiente:

<button role="heading" aria-level="1">texto</button>

Que nos dejaría con algo tan simple como esto:

<h1>texto</h1>

Vale, hasta aquí nos queda claro que es importante usar el significado que viene por defecto en los diferentes elementos o la oportunidad de sobre escribir el significado de los mismos, pero… ¿qué ocurre con todo ese código “de mierda” que metemos en las páginas que en principio llevan significado de por sí, pero que realmente sólo usamos para “dar formato” a lo que queremos? Pues para este tipo de código podemos utilizar un sistema que elimina cualquier significado: el role="presentation".

Un detalle de este parámetro es que se come el significado también de cualquier etiqueta hija que incluya. Para poner un ejemplo algo “complejo” os dejo este:

<table role="presentation">
  <tr>
    <td>
      <table>
        <tr>
          <td><abbr title="Application Programming Interface">API</abbr></td>
        <tr>
      </table>
    </td>
  </tr>
</table>

Realmente, su significado “real” quedaría mucho más reducido, a esto:

<>
  <>
    <>
      <table>
        <tr>
          <td><abbr title="Application Programming Interface">API</abbr></td>
        <tr>
      </table>
    </>
  </>
</>

Personalmente, desde el punto de vista SEO este último elemento debería tener todo el sentido del mundo ya que implicaría quitarle significado a toda la basura de código que muchas veces se genera en determinados sitios web. Aún así, Bing y Google tratan ARIA de formas muy distintas y dispersas y no queda claro su funcionamiento. Después de esto, mi pensamiento es que si se hace bien y se pone el código como se debe, mal no debe hacer.

¿Cómo se oculta información? Habitualmente usamos a través de CSS el display:none o el visibility:hidden, pero esto simplemente lo que hace es no mostrarlo, pero sigue siendo “visible” desde el punto de vista de la accesibilidad. ¿Cómo eliminarlo? Pues añadiendo el aria-hidden. Hay que tener tener en cuenta que una de las novedades en HTML5 es que todos los elementos del DOM incluyen el nuevo atributo hidden, lo que significa que otra forma de ocultar contenidos se puede aplicar con un pequeño JavaScript tal que así:

<script>
  function ocultar() {
    document.getElementById('prueba').hidden = true;
  }
</script>

Existen muchos roles en el sistema, y como ya he comentado al principio la mayoría de etiquetas del HTML ya incluyen su significado semántico… pero no todos los elementos disponen de sus propios roles.

  • Cualquier elemento: como ya he comentado antes, cualquier elemento podría usar el role="presentation".
  • address: podría incorporar en caso necesario el role="contentinfo" que amplia la información del documento actual.
  • article: los navegadores aún no indican su rol por defecto, así que habría que indicarlo expresamente con role="article".
  • details: como el anterior, aún no va de serie, así que hay que indicarle el role="group".
  • dialog: otro que debería y no lo lleva de serie, con el role="dialog".
  • div, p, pre y blockquote: no tienen un rol definido por defecto, así que les podemos asignar el que nos venga en gana según necesitemos.
  • footer: es curioso que este elemento no lleve un significado implícito, por lo que si en la página hay un pie “general”, a ese en concreto se le puede asignar el role="contentinfo".
  • header: al igual que el pie, este tampoco lleva implícito nada, por lo que podríamos utilizar por ejemplo el role="banner" si es la cabecera principal.
  • main: este elemento que se está planteando par el HTML5.1 debería ir acompañado siempre del role="main".
  • nav: indica una navegación por lo que debería ir acompañado del role="navigation".
  • span: el “tag inútil” tiene una gran ventaja… al igual que el div se le puede incorporar cualquier rol.
  • table: aunque no incopora ningún significado por defecto hay dos opciones que sí que se podrían utilizar; la primera es cuando se le da uso de “diseño”, por lo que es inútil y se debería eliminar cualquier significado con el role="presentation"; en el caso de que se le de un uso de tabla pura, se le podría dar el role="grid".

A parte de estos elementos que son principalmente contenedores tenemos otros como em, strong, small, s, cite, q, dfn, abbr, time, code, var, samp, kbd, sub, sup, i, b, u, mark, ruby, rt, rp, bdi, bdo, br, wbr… que como son utilizables para dar formato no incorporan ningún tipo de significado semántico. Se les puede dar el rol que se quiera, pero personalmente no creo que sea recomendable.

Hasta ahora he comentado varios de los posibles roles que se pueden utilizar, pero la lista de roles es bastante grande…

  • alert: Un mensaje importante y con una duración en el tiempo limitada.
  • alertdialog: Un bloque que incluye un mensaje de alerta.
  • application: Todo lo contrario a un “documento”. O sea, que no es una web.
  • article: Parte de un documento que se puede tratar como un elemento independiente.
  • banner: Bloque que suele contener contenido para todo el sitio.
  • button: Sistema que reacciona tras un clic o presión.
  • checkbox: Entrada que tiene 3 posibles estados: verdadero, falso o mixto.
  • columnheader: Celda que contiene la información de una columna.
  • combobox: Un listado en el que además se pueden añadir opciones.
  • complementary: Contenido complementario al contenido principal pero que a su vez tiene significado propio.
  • contentinfo: Información relacionada al contenido principal.
  • definition: Definición de un concepto.
  • dialog: Ventana que detiene el proceso actual a la espera de que el usuario introduzca información para continuar.
  • directory: Referencia a un grupo de elementos (como si fuera un índice).
  • document: Todo el contenido de una página web.
  • form: Un formulario (y todo lo que lo acompaña).
  • grid: Como una tabla, tiene filas y columnas con celdas.
  • gridcell: Una celda.
  • group: Una lista de objetos pero que no es un directorio.
  • heading: La cabecera del contenido de una página.
  • img: Colección de elementos que forma una imagen.
  • link: Referencia que, cuando se pulsa, hace que el navegador vaya a ese recurso.
  • list: Lista de elementos no interactivos.
  • listbox: Lista de elementos interactivos con el usuario.
  • listitem: Elemento de una lista o directorio.
  • log: Zona en la que se va añadiendo información nueva dejando paso de la anterior.
  • main: Contenido principal del documento.
  • marquee: Zona en la que la información (no esencial) va cambiando.
  • math: Expresión matemática.
  • menu: Lista de opciones para un usuario.
  • menubar: Menú habitualmente siempre visible y en horizontal.
  • menuitem: Opción dentro de un menú.
  • menuitemcheckbox: Opción de un menú que tiene 3 posibles estados: verdadero, falso o mixto.
  • menuitemradio: Opción de menú que sólo permite una posibilidad a la vez.
  • navigation: Elementos que permiten la navegación por páginas externas o internas.
  • note: Bloque que añade información puntual al documento principal.
  • option: Elemento seleccionable de una lista.
  • presentation: Elemento que no debe ser accesible.
  • progressbar: Barra de progreso.
  • radio: Elementos que sólo pueden ser seleccionables una vez.
  • radiogroup: Grupo de elementos que sólo pueden ser seleccionables una vez.
  • region: Agrupación de contenidos que podrían estar en un directorio.
  • row: Fila de celdas.
  • rowgroup: Grupo de filas de celdas.
  • rowheader: Celda que contiene la información de una fila de celdas.
  • scrollbar: Barra de navegación que controla el scroll de una zona.
  • search: Bloque que agrupa elementos que permiten realizar búsquedas.
  • separator: Separador de secciones en un contenido o grupos de menús.
  • slider: Lugar de selección entre valores de un determinado rango.
  • spinbutton: Rango de opciones en los que el usuario ha de elegir.
  • status: Bloque de información para el usuario no tan importante como una alerta.
  • tab: Etiquetas que permiten al usuario una ayuda sobre el contenido.
  • tablist: Lista de “tabs”.
  • tabpanel: Contenedor de “tablist”.
  • textbox: Texto libre.
  • timer: Contador de tiempo.
  • toolbar: Colección de botones.
  • tooltip: Contenido contextual de información de un elemento.
  • tree: Lista que permite extender o contraer sus elementos.
  • treegrid: Listas por filas que permiten expandir o contraer sus elementos.
  • treeitem: Elemento de un árbol.

Ahora que tenemos todo esto sobre la mesa… Cuando hablan de la Web 3.0 ¿se refieren a esto?

Adiós cookies, Hola localStorage

Sin duda las cookies han sido grandes aliadas a lo largo de la historia de la programación, y ya ni te cuento las bases de datos. Pero esto desde el lanzamiento semi oficial de HTML5 ha cambiado bastante ya que si queremos almacenar datos tenemos un nuevo aliado: el navegador.

Y es que entre las mejoras que incorporan las nuevas versiones de los navegadores nos encontramos con la posibilidad de almacenar datos en el navegador del usuario y poder recogerlos de nuevo mediante unos sencillos JavaScript.

Existen dos formas de almacenar información: la temporal y la permanente. La primera de ellas la encontramos con las funciones de sessionStorage, sólo se mantiene mientras está la misma sesión del navegador, o sea, podemos cerrar y abrir ventanas, pero no cerrar “el programa”; y la segunda con las de localStorage que, a diferencia del caso anterior, los datos se mantienen aunque el navegado se cierre, ya que la información se almacena en local siempre y cuando el usuario no la elimine.

Esto da pie a muchas mejoras sobretodo en lo que a Web Performance se refiere, ya que a diferencia de las cookies esta información no se transmite por HTTP. De todas formas, esto también tiene un inconveniente, y es que trabajar con los sistemas de cookies de los lenguajes de programación como ASP o PHP se complica.

¿Quieres ver un pequeño ejemplo del funcionamiento de esto? Pues te dejo con un par de pruebas de ambos sistemas en los que se puede ver en el código fuente el funcionamiento. El ejemplo que siempre se me viene a la cabeza es el del carrito de la compra

Cursos de Verano: HTML 5

Otra semana que empieza y otra semana con más cursos de formación… hoy ha tocado una pequeña introducción a algunos elementos interesantes de HTML 5 para hacer abrir boca a desarrolladores y parte de la gente de contenidos.

Básicamente me he centrado en comentar los nuevos elementos (los que he considerado más interesantes), en comentar los que desaparecen y otras cosas bastante estándar como son los meta-tags, los enlaces o las relaciones entre elementos.

En fin, como siempre, mejor dejo la descarga de la presentación y cualquier cosa comentáis.

HTML 5 en todos los navegadores

Hace ya un tiempo que no comento cosas de HTML 5, y ahora que se va acercando la fecha de su puesta en marcha ya muchos proyectos nuevos se plantean, al menos la estructura base, comenzarse en esta nueva versión del idioma de Internet. En su día comenté cómo conseguir que, mediante un pequeño script, funcionase HTML5 en Internet Explorer 8. El tema es ¿cómo hacer que funciona siempre?

La solución es bastante sencilla y a la vez también algo compleja, aunque en su día permitirá hacer una actualización bastante rápida del código con un simple “replace”. Como ya sabéis, HTML 5 es un markup, al igual que lo son el HTML, los XML, el RDFa, etc… de forma que, lo mismo que podemos cargar XML en el código HTML… ¿por qué no cargar HTML 5 de la misma manera?

La idea es que, aquellos nuevos elementos que pueden no funcionar en todos los navegadores de forma correcta podemos cargarlos de la siguiente manera:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:html5="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8"/>
  <title>Demo HTML5</title>
  <style>
    html5\:section {
      display: block;
    }
  </style>
</head>
<body>
  <h1>Demo HTML5</h1>
  <html5:section>Este <strong>&lt;html5:section&gt;</strong> funciona incluso en Internet Explorer.</html5:section>
</body>
</html>

El día en que se vea que todos los usuarios usan un navegador “compatible”, se hace un simple “reemplazar” de <html5: por < y de </html5: por </ y ya está… ¡prueba superada!

Un buen punto de partida para aquellos que quieran comenzar a hacer sus primeros códigos y ver que cualquier usuario lo ve correctamente.

HTML5 Prefetch

Hace un tiempo, cuando comencé a hablar del HTML 5, hice una breve referencia a los distinto “rel-algo” que podemos encontrar en la nueva codificación. Entre estos hay uno que puede ser muy interesante si sabes cómo navegan los usuarios de tu sitio web y, aun no sabiéndolo, crees que puedes acelerar la velocidad de carga de la misma.

El link prefetching básicamente lo que permite es descargar las URL indicadas antes de que se vayan a visitar… y el HTML 5 incluye un sistema para avisarlo, ya de forma estándar (hasta ahora sólo Firefox le daba soporte).

El sistema es tan sencillo como poner en el <head> algo como:

<link rel="prefetch" href="http://sitio.web/url-siguiente/">

o algo como:

<link rel="prefetch" href="http://sitio.web/imagen-siguiente.png">

Otra posibilidad es la de acelerar la carga pero en URL concretas que se vayan cargando dentro del sitio… de forma que cualquier enlace interno quedaría de la siguiente forma:

<a rel="prefetch" href="http://sitio.web/url-siguiente/">

Un ejemplo de uso interesante es el que hace Yahoo! con su página principal. Cuando se carga, a priori no hace nada, pero una vez escribes la primera letra en el cajetín de búsqueda, comienza un proceso para precargar imágenes y CSS de la página de resultados de búsqueda, ya que se plantea que va a ser la siguiente en visitarse.

Reproductor HTML 5 para vídeo

Estamos muy mal acostumbrados a que nuestros vídeos se alojen en FLV en sitios como Youtube o Vimeo. Hoy en día teniendo en cuenta que el ancho de banda está tirado de precio, no entiendo porqué no se tiende a la calidad y a alojar la propia información si que otros decidan.

Con HTML 5 y su nuevo elemento <video> tenemos la posibilidad de incluir muchos formatos de vídeo con muchas opciones… y para hacerlo ya todo más sencillo, además de hacerlo compatible con versiones anteriores que no soportan los nuevos formatos, están apareciendo algunos sistemas que permiten estos reproductores de una forma “chula” y fácil.

Algunos de los que he encontrado son estos:

  • FlareVideo: Necesita de jQuery y el soporte es, a mi gusto, un poco reducido… hay que programar expresamente para ello.
  • MediaElementsJS: También necesita de jQuery, soporta todos los navegadores e incluso terminales móviles. Hay que incluir el nuevo tag <video> y unas pocas líneas más… Esto significa que cuando todos los navegadores den soporte, se quita y todo seguirá funcionando.
  • JW Player: La nueva versión de este tan utilizado reproductor ya es compatible con HTML 5. Necesita de jQuery y aun está en βeta.
  • VideoJS: No necesita de librerías externas y funciona gracias al elemento <video>, lo que, en principio, a mi me da mucha seguridad. Funciona con todos los navegadores y soporta los nuevos formatos.
  • SublimeVideo: Aunque aun no ha salido oficialmente, lo que se puede ver es parecido al VideoJS, es decir, que no necesita de librerías externas y funciona gracias al elemento <video>. En principio funciona con todos los navegadores, soporta la mayoría de formatos.

Presentaciones Tenerife Lan Party 2010

Hoy estoy en la Tenerife Lan Party haciendo un par de presentaciones, una de ellas sobre penalizaciones (principalmente de Google) y otra sobre HTML 5 (relacionada con temas más bien de SEO).

Y, aunque va a ser una entrada breve, os dejo con la descarga en PDF de ambas para quien quiera darles una ojeada:

Lástima estos días que Tenerife Norte está teniendo unos nubarrones bastante importantes y no he podido ni ir a la piscina ni a la playita, y ya mañana me vuelvo para Barcelona.

HTML MicroDatos: Personas y Empresas

Tras ver el otro día qué son los MicroDatos, hoy voy a explicaros lo que antiguamente eran los hCard. Este microformato es de los más extendidos y extensibles, y ahora se ha convertido, usando la misma base, en un MicroDato bastante interesante, sobretodo porque ya viene documentado en el HTML 5.

En la actualidad conozco 3 formatos en los que se habla de cómo dar formato a las fichas de personas y/o empresas… que son:

Teniendo en cuenta que de los 3, el primero es el más completo, y que tal como dice Google en los otros 2, es capaz de interpretar similitudes entre unos y otros, voy a enfocarme en el más completo de todos.

  • fn: Es el nombre completo (u organización), el campo principal.
  • n: Es un contenedor para indicar el nombre (u organización) de forma más específica… puede incorporar los siguientes sub-elementos:
    • family-name: Da el apellido(s) familiar de la persona o el nombre completo de la organización.
    • given-name: El nombre (de pila) que habitualmente se usa con la persona.
    • additional-name: Si tiene un nombre adicional.
    • honorific-prefix: Si tiene un prefijo honorífico.
    • honorific-suffix: Si tiene un sufijo honorífico.
  • nickname: El nick o sobrenombre de la persona u organización.
  • photo: Será una URL con la fotografía de la persona u organización.
  • bday: Fecha de cumpleaños de la persona o de creación de la organización.
  • adr: indica la dirección postal de la persona u organización. Es un contenedor formado por:
    • type: Indica el tipo de dirección, que puede ser uno de los siguientes:
      • dom: Doméstico.
      • intl: Internacional.
      • postal: Entrega postal.
      • parcel: Entrega de paquetería.
      • home: Residencial.
      • work: Trabajo.
      • pref: De todas las opciones, la preferida.
    • post-office-box: Apartado de correos.
    • extended-address: Dirección extendida.
    • street-address : La calle.
    • locality: Población.
    • region: Provincia.
    • postal-code: Código postal.
    • country-name: País.
  • label: Dirección de entregas de la persona u organización (viene a ser el nombre del sitio de entrega). Puede contener:
    • type: Son los mismos que los anteriores de direcciones.
    • value: La información, con formato.
  • tel: El teléfono (esta era muy obvia)… Puede incorporar un par de elementos:
    • type: Indica el tipo de teléfono, que puede ser uno de los siguientes:
      • home: El de casa.
      • msg: Envío de SMS.
      • work: Trabajo.
      • voice: De voz.
      • fax: Fax.
      • cell: Móvil / Celular.
      • video: Vídeo conferencia.
      • pager: Buscapersonas.
      • bbs: BBS.
      • modem: Módem.
      • car: Teléfono en el coche.
      • isdn: Línea RDSI.
      • pcs: Servicio de comunicación personal.
      • pref: De todas las opciones, la preferida.
    • value: La información, con el formato correspondiente.
  • email: La dirección de correo electrónico. También es un contenedor y puede llevar lo siguiente:
    • type: Indica el tipo de correo electrónico, que puede ser uno de los siguientes:
      • internet: La mayoría de cuentas de correo.
      • x400: cuenta de tipo x.400.
      • pref: De todas las opciones, la preferida.
    • value: La información, con el formato correspondiente.
  • mailer: Indica el software de correo que usa la persona.
  • tz: Indica el desfase horario de la persona (la Zona horaria con respecto al UTC). Por ejemplo: +06:30.
  • geo: Indica la la latitud y longitud. Por ejemplo: +41.383333;+2.183333.
  • title: El puesto de trabajo o función de la persona.
  • role: El rol, departamento o categoría profesional.
  • logo: El logotipo de la persona u organización, que será una dirección URL.
  • agent: Persona que actúa de intermediario de contacto (secretaria, etc…).
  • org: Nombre detallado de la organización. Puede incorporar algunos elementos:
    • organization-name: Nombre de la organización / empresa.
    • organization-unit: Unidad o Subsector de la empresa u organización.
  • categories: Categorías, palabras clave o lugar donde categorizar esa persona u organización.
  • note: Añade algunos comentarios a la ficha de la persona u organización.
  • rev: Última fecha de revisión de la información que se ofrece.
  • sort-string: Forma de ordenar la información de la persona u organización.
  • sound: Sonido relacionado con la persona u organización. Ha de corresponder con una dirección URL.
  • url: La dirección URL de la persona u organización.
  • class: Cómo ha de tratarse la información que se ofrece. Puede tener estos valores:
    • public: Pública.
    • private: Privada.
    • confidential: Confidencial.
  • impp: Ofrece el sistema de comunicación instantánea con la persona u organización.
    • type: Indica el tipo de sistema, que puede ser uno de los siguientes:
      • personal o business: Si es personal o de negocios.
      • home o work o mobile: Si está en casa, en el trabajo o es móvil.
      • pref: De todas las opciones, la preferida.
    • value: La dirección URL, con el formato correspondiente.

Y ahora el ejemplo:

<section id="jack" itemscope itemtype="http://microformats.org/profile/hcard">
  <h1 itemprop="fn">Jack Bauer</h1>
  <div itemprop="n">
    <meta itemprop="given-name" content="Jack">
    <meta itemprop="family-name" content="Bauer">
  </div>
  <img itemprop="photo" alt="" src="jack-bauer.jpg">
  <p itemprop="org" itemscope>
    <span itemprop="organization-name">Counter-Terrorist Unit</span>
    (<span itemprop="organization-unit">Los Angeles Division</span>)
  </p>
  <p>
    <span itemprop="adr" itemscope>
      <span itemprop="street-address">10201 W. Pico Blvd.</span><br>
      <span itemprop="locality">Los Angeles</span>,
      <span itemprop="region">CA</span>
      <span itemprop="postal-code">90064</span><br>
      <span itemprop="country-name">United States</span><br>
    </span>
    <span itemprop="geo">34.052339;-118.410623</span>
  </p>
  <h2>Assorted Contact Methods</h2>
  <ul>
    <li itemprop="tel" itemscope>
      <span itemprop="value">+1 (310) 597 3781</span> <span itemprop="type">work</span>
      <meta itemprop="type" content="pref">
    </li>
    <li><a itemprop="url" href="http://en.wikipedia.org/wiki/Jack_Bauer">I'm on Wikipedia</a>
    so you can leave a message on my user talk page.</li>
    <li><a itemprop="url" href="http://www.jackbauerfacts.com/">Jack Bauer Facts</a></li>
    <li itemprop="email"><a href="mailto:j.bauer@la.ctu.gov.invalid">j.bauer@la.ctu.gov.invalid</a></li>
    <li itemprop="tel" itemscope>
      <span itemprop="value">+1 (310) 555 3781</span> <span>
      <meta itemprop="type" content="cell">mobile phone</span>
    </li>
  </ul>
  <p itemprop="note">If I'm out in the field, you may be better off contacting <span
  itemprop="agent" itemscope itemtype="http://microformats.org/profile/hcard"><a
  itemprop="email" href="mailto:c.obrian@la.ctu.gov.invalid"><span
  itemprop="fn"><span itemprop="n" itemscope><span
  itemprop="given-name">Chloe</span> <span
  itemprop="family=name">O'Brian</span></span></span></a></span>
  if it's about work, or ask <span itemprop="agent">Tony Almeida</span>
  if you're interested in the CTU five-a-side football team we're trying to get going.</p>
  <ins datetime="2008-07-20T21:00:00+01:00">
    <span itemprop="rev" itemscope>
      <meta itemprop="type" content="date-time">
      <meta itemprop="value" content="2008-07-20T21:00:00+01:00">
    </span>
    <p itemprop="tel" itemscope><strong>Update!</strong>
    My new <span itemprop="type">home</span> phone number is
    <span itemprop="value">01632 960 123</span>.</p>
  </ins>
</section>

Si queremos comprobar si este fragmento sería válido de cara a Google, podemos usar su herramienta para comprobarlo…

http://javiercasares.net/jack-bauer.html

Que en los resultados de Google quedaría similar a esto:

HTML MicroDatos (antes MicroFormatos, antes RDFa)

Los que me conocéis sabéis que desde hace tiempo he sido un seguidos de los microformatos, y una de las mejoras que descubrí al hacer la serie de artículos de HTML 5 fue la incorporación “oficial” de lo que antiguamente se denominaba microformatos en lo que actualmente pasan a ser los midrodatos (microdata en inglés) y que vienen de la antigua implementación denominada RDFa.

Pero ¿qué son los microdatos? Pues básicamente son pequeñas mejoras del HTML que, en apariencia no han de modificar nada, pero que hacen que las máquinas (buscadores, navegadores, aplicaciones…) sean capaces de interpretar y mejorar semánticamente el significado de parte de la información que se muestra por pantalla.

Hasta ahora los microformatos eran bastante complejos de integrar ya que no existía un sistema estándar, algo que con los microdatos se acaba consiguiendo. Algunos ejemplos muy básicos podrían ser estos:

<div itemscope>
  <p>My name is <span itemprop="name">Elizabeth</span>.</p>
</div>

o este:

<div itemscope>
  <p>My name is <span itemprop="name">Neil</span>.</p>
  <p>My band is called <span itemprop="band">Four Parts Water</span>.</p>
  <p>I am <span itemprop="nationality">British</span>.</p>
</div>

o este:

<div itemscope>
  <img itemprop="image" src="google-logo.png" alt="Google">
</div>

Hasta aquí no hay mucho que decir… aunque estos ejemplos son tan sencillos como, casi, me atrevería a decir que inútiles, ya que no se especifica ningún sistema identificativo para que se pudieran interpretar de forma semántica.

Los microdatos pueden anidarse entre sí, lo que los convierte en una herramienta escalable, además de poderse agrupar por distintos elementos:

<div itemscope id="amanda" itemref="a b"></div>
<p id="a">Name: <span itemprop="name">Amanda</span></p>
<div id="b" itemprop="band" itemscope itemref="c"></div>
<div id="c">
  <p>Band: <span itemprop="name">Jazz Band</span></p>
  <p>Size: <span itemprop="size">12</span> players</p>
</div>

Como decía, hasta ahora los ejemplos son “inútiles” ya que no siguen un estándar… para ello se integra la posibilidad de informar de un “tipo”. Los tipo se darán en referencia a una dirección URL en la que se informa de la estructura de cada elemento.

<section itemscope itemtype="http://example.org/animals#cat">
  <h1 itemprop="name">Hedral</h1>
  <p itemprop="desc">Hedral is a male american domestic shorthair, with a fluffy black fur with white paws and belly.</p>
  <img itemprop="img" src="hedral.jpeg" alt="" title="Hedral, age 18 months">
</section>

¿Y qué elementos son los que han de incorporar los microdatos?

  • itemscope
  • itemtype
  • itemid
  • itemref
  • itemprop

itemscope

Este será el indicador de que el bloque, ese elemento, será el contenedor de información importante. Es un elemento booleano, es decir, se pone o no se pone… y ya está.

itemtype

Al indicar un itemscope podemos querer indicar qué tipo de información vamos a encontrar, que diccionario, que vocabulario vamos a utilizar. Para ello indicaremos este atributo que contendrá una dirección URL donde encontrar la información correspondiente.

itemid

Este atributo puede dar información sobre un elemento común que encontremos en el resto de Internet. Viene a ser como crear una ficha única (o no) que contenga la información que queremos dar.

itemref

Si dentro del contenido queremos hacer referencia a varios elementos, podemos asignarles como un nombre a cada uno de ellos. Para eso usaremos el itemref, que será el que haga referencia a los distintos elementos.

itemprop

Es la propiedad y el valor en sí que queremos indicar. Simple y llanamente.

Y, como último ejemplo:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Photo gallery</title>
  </head>
  <body>
    <h1>My photos</h1>
    <figure itemscope itemtype="http://n.whatwg.org/work" itemref="licenses">
      <img itemprop="work" src="images/house.jpeg" alt="A white house, boarded up, sits in a forest.">
      <figcaption itemprop="title">The house I found.</figcaption>
    </figure>
    <figure itemscope itemtype="http://n.whatwg.org/work" itemref="licenses">
      <img itemprop="work" src="images/mailbox.jpeg" alt="Outside the house is a mailbox. It has a leaflet inside.">
      <figcaption itemprop="title">The mailbox.</figcaption>
    </figure>
    <footer>
      <p id="licenses">All images licensed under the <a itemprop="license" href="http://www.opensource.org/licenses/mit-license.php">MIT license</a>.</p>
    </footer>
  </body>
</html>

El resultado de este ejemplo es que, según la información que encontremos en esta URL: http://n.whatwg.org/work tenemos que:

  • work: images/house.jpeg
  • title: The house I found.
  • license: http://www.opensource.org/licenses/mit-license.php

y

  • work: images/mailbox.jpeg
  • title: The mailbox.
  • license: http://www.opensource.org/licenses/mit-license.php

Y esto es todo… y a lo largo de los próximos días os pondré ejemplos de elementos que ya han sido creados para un objetivo claro, y que los buscadores podrían ya utilizar para extraer información.

HTML 5: el gran hermano te geolocaliza

Aunque se asocia el lanzamiento de las funciones de geolocalización al HTML 5, lo cierto es que la Geolocation API son unas funciones en JavaScript independientes de esta forma de mostrar las páginas web.

Básicamente el navegador, dependiendo de la conexión a Internet, será capaz de saber qué latitud, longitud y otros datos tienes en ese momento. Os dejo con un par de ejemplos de código que, dependiendo del navegador, deberían funcionar. El primero de ellos es simplemente textual, el segundo muestra un mapa.

El código más sencillo tiene una pinta tal que esta:

<script type="text/javascript">
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(successFunction, errorFunction);
  } else {
    alert('Tu navegador no soporta la geolocalizacion.');
  }
  function successFunction(position) {
    var lat = position.coords.latitude;
    var long = position.coords.longitude;
    alert('Tu localizacion es -- latitud : '+lat+' longitud : '+long);
  }
  function errorFunction(position) {
    alert('No se ha podido recuperar la geolocalizacion.');
  }
</script>

HTML 5: el “rich media” está de moda

Poco a poco se acaban los temas a tratar referentes al código que podemos desarrollar sobre HTML 5, aunque eso no significa que las entradas sobre el tema se acaben.

En esta ocasión toca ya cerrar los elementos, y lo haré con los multimedia. No voy a entrar en muchísima profundidad en cada uno de ellos, ya que algunos darían para documentación muy extensa (sobre todo su actividad externa y el funcionamiento), pero aquí os comento un poco sobre cada uno de ellos.

embed

El elemento embed normalmente se utiliza para integrar elementos multimedia no-HTML, como aplicaciones o elementos interactivos. El bastante sencillo de configurar ya que tiene pocos atributos.

El primero de ellos es el src para indicar la dirección URL del elemento en cuestión, y también el type, que indicará el MIME del elemento, para que el navegador sepa interpretarlo. para acabar, sólo queda indicar el width y height, y así ocupar el espacio que debe.

<embed src="ejemplo.swf" quality="high">

object

El elemento object representa un recurso externo que se podría tratar de forma similar a una imagen, y que puede necesitar un plugin para ser procesado.

El atributo data hace referencia a la dirección URL del contenido a mostrar, el type, al igual que en otros elementos, es el MIME de dicho contenido

A parte del width y height, también se pueden incluir otros atributos como el name, para poder interactuar con el elemento, el usemap si lo queremos relacionar con un mapa, o el form, si está relacionado con un formulario.

param

El elemento param, que depende siempre del object, se utiliza para enviar información de los parámetros que ha de utilizar el plugin en cuestión.

Únicamente tiene dos atributos, que son el name, que sería el nombre de la variable y el value, que sería el valor en sí mismo.

<object data="ejemplo.swf">
  <param name="quality" value="high">
</object>

video

Si hay un elemento que está generando mucha controversia es el elemento video. Básicamente todo viene por el uso del estándar de vídeo que debe funcionar en todos los navegadores y que, en este momento, no existe… pero, dejando de eso a un lado, el sistema de funcionamiento del elemento ya está decidido…

El atributo src sería la dirección URL del vídeo, y el poster, la dirección URL de la imagen que aparecería representando al vídeo. Si queremos conseguir algo de información del vídeo, podemos usar el atributo preload que permite 3 posibles valores: “none” si no queremos que se lea nada del vídeo), “metadata”, si queremos que lea el primero de los frames y saque cierta información (tamaño del vídeo, duración, etc…) o “auto” si queremos que sea el navegador el que decida qué hacer.

En el caso en que queramos que el vídeo comienza a funcionar de forma automática, podemos añadir el atributo booleano autoplay que hará que se cargue sólo, y de una forma similar, el atributo loop permitirá que el vídeo se reproduzca de forma indefinida.

A parte del width y height, también tenemos el booleano controls, que nos permite decidir si el reproductor ha de mostrar o no los sistemas de control para poder interactuar con los vídeos.

<video src="video.mpg" autoplay controls></video>

audio

El elemento audio es bastante similar al video, con la diferencia de que es un formato más establecido, pero que tiene básicamente los mismos parámetros.

Tendremos los mismo parámetros, que son src para indicar el audio, preload para sacar la información, autoplay para que empiece sólo, loop si queremos que se repita y controls si queremos que se muestren los controles del reproductor.

<audio src="audio.mp3" autoplay loop></audio>

source

Como antes comentaba, puede que los distintos navegadores den soporte a distintos formatos de vídeo y audio… por lo que una sola dirección URL no sería útil. Es por esto que existe el elemento source, con el que este problemilla se soluciona, permitiendo incorporar distintos medios como fuentes de muestra de los vídeos o audios.

Este elemento tiene tres atributos, que son src, que indicará la dirección URL, el type que indicará el MIME y que debería incluir el codecs= que indicarán el sistema de codificación del vídeo. También puede llevar el atributo media, que habitualmente tendrá el valor “all”.

<video controls>
  <source src="video.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'">
  <source src="video.3gp" type="video/3gpp; codecs='mp4v.20.8, samr'">
  <source src="video.ogv" type="video/ogg; codecs='theora, vorbis'">
</video>

map

Otro de los elementos que hace años se utilizaba bastante era el de los map. Gracias a estos se podría hacer una selección de zonas de una imagen, y convertir esas zonas en enlaces, por ejemplo.

El único atributo que soporta es el name, que hace referencia a la imagen por la cual se generará el mapa.

area

Para que un map tenga zonas, se necesitan indicar las area que van a tener. Este elemento siempre irá contenido dentro de un mapa.

Los atributos que soporta son bastantes y variados. El primero de ellos es el href, que indica la dirección a la que se dirigirá al hacer clic en la zona indicada. Al igual que en las imágenes, el alt informará sobre ese enlace.

Para indicar la forma y lugar de la zona tenemos los elementos coords y shape. las coordenadas serán número enteros que indicarán los puntos de la imagen, y la forma puede tener los valores “circle”, “default”, “poly” o “rect”.

Otros atributos habituales, de los que ya he hablado en muchas ocasiones son target, rel, media, hreflang y type.

Un ejemplo sobre esta imagen, podría ser este:

<img src="sample-usemap.png" lt="Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star." width="600" height="150" usemap="#shapes">
<map name="shapes">
  <area shape=rect coords="50,50,100,100">
  <area shape=rect coords="25,25,125,125" href="rojo.html" alt="Red box.">
  <area shape=circle coords="200,75,50" href="verde.html" alt="Green circle.">
  <area shape=poly coords="325,25,262,125,388,125" href="azul.html" alt="Blue triangle.">
  <area shape=poly coords="450,25,435,60,400,75,435,90,450,125,465,90,500,75,465,60" href="amarillo.html" alt="Yellow star.">
</map>

details

Aunque no se podría llegar a considerar un elemento multimedia en sí, es cierto que el bloque details es muy probable que se utilice junto a elementos multimedia, ya que representa un bloque de contenido que muestra información adicional o controles de otro bloque.

El único atributo que se le permite es el de open que haría que, si está activo, los detalles estén expandidos, ya que, sino, este bloque quedaría oculto por defecto. Otro detalle es que obligatoriamente ha de contener un summary.

summary

Esta es fácil; el summary simplemente es el resumen o título de un details.

<details open>
  <summary>Name & Extension:</summary>
  <p><input type=text name=fn value="Pillar Magazine.pdf"></p>
  <p><label><input type=checkbox name=ext checked>Hide extension</label></p>
</details>

menu

El elemento menu representa un conjunto de comandos… básicamente es un simple contenedor de elementos command. Hay dos atributos posibles. El primero de ellos es el label, que será el atributo que dará nombre al menú.

El segundo de ellos es el type. En este caso tiene tres posibles opciones; si no se indica nada, será un “list” (listado). En caso de incluir el valor “context” se tratará como un menú contextual, y si es el valor “toolbar” se tratará como una barra de herramientas.

command

El elemento command es eso, un comando, una especie de botón que cuando se pulse, el sistema ejecutará alguna acción (como si de una opción de un menú de las ventanas de la mayoría de sistemas operativos se tratase).

Puede tener varios atributos. El primero de ellos es el type, que en este caso incida el tipo de comando. Puede ser un “command” (que ejecuta algo), un “checkbox” (para indicar si está activo o no) o un “radio” (si es una opción de entre varias). Además, cada una de las opciones puede llevar un label que daría la explicación de qué hace.

El atributo icon indicaría la URL del icono que ha de mostrar esa opción. Cada una de ellas puede estar checked y/o disabled según sea necesario. Los “radio” incorporarán un radiogroup que llevará un valor común para varias opciones.

<menu type="toolbar">
  <command type="radio" radiogroup="alignment" checked="checked" label="Left" icon="left.png" onclick="setAlign('left')">
  <command type="radio" radiogroup="alignment" label="Center" icon="center.png" onclick="setAlign('center')">
  <command type="radio" radiogroup="alignment" label="Right" icon="right.png" onclick="setAlign('right')">
  <hr>
  <command type="command" disabled label="Publish" icon="pub.png" onclick="publish()">
</menu>

Otro ejemplo podría quedar algo así:

<menu type="toolbar">
  <li>
    <menu label="File">
      <button type="button" onclick="fnew()">New...</button>
      <button type="button" onclick="fopen()">Open...</button>
      <button type="button" onclick="fsave()">Save</button>
      <button type="button" onclick="fsaveas()">Save as...</button>
    </menu>
  </li>
  <li>
    <menu label="Edit">
      <button type="button" onclick="ecopy()">Copy</button>
      <button type="button" onclick="ecut()">Cut</button>
      <button type="button" onclick="epaste()">Paste</button>
    </menu>
  </li>
  <li>
    <menu label="Help">
      <li><a href="help.html">Help</a></li>
      <li><a href="about.html">About</a></li>
    </menu>
  </li>
</menu>

HTML 5: las pseudo-clases para mayor interactividad

Está claro que hoy en día el HTML no es nada sin los CSS, y hay algunos elementos que tienen algunas pseudo-clases que permiten algunas mejoras a la hora de interactuar con los estilos o diseños.

Con la nueva versión, el HTML 5 tiene algunas clases que en las versiones anteriores no existían… aquí la lista de clases:

  • : link: Son enlaces (o elementos) que no hayan sido visitados.
  • : visited: Son enlaces (o elementos) que sí han sido visitados.
  • : active: Son enlaces (o elementos) que están activados (por ejemplo, en el momento en el que hace clic en ellos).
  • : enabled: Son elementos que están activos, como enlaces, botones, formularios…
  • : disabled: Para los elementos contrarios al anterior, aquellos que en ese momento están desactivados.
  • : checked: Para los formularios que tengan activada alguna opción.
  • : indeterminate: Para los input con el estado indeterminate.
  • : default: Cuando el formulario es por defecto.
  • : valid: Si la validación del formulario es correcta.
  • : invalid: Todo lo contrario, si falla al validar.
  • : in-range: si los valores del formulario están en el rango correcto.
  • : out-of-range: Como antes, pero al revés, si los valores se salen del rango.
  • : required: Si el valor es obligatorio en el formulario.
  • : optional: Cuando los valores son opcionales en el formulario.
  • : read-only: Si los valores del formulario (aunque casi todos los elementos del HTML lo permiten) son sólo lectura.
  • : read-write: Para aquellos elementos que se pueden editar.

A parte de estos, también esta el : target, aunque si he de decir la verdad, no queda muy claro exactamente su funcionamiento. Y, claro está, luego está todo el sistema de selectores que tiene específicamente el CSS 3 que permite hacer cosas muy interesantes incluidos los valores de los elementos y atributos.

HTML 5: los “malditos” iframes

Aunque es uno de los elementos que se utilizan todavía, la verdad es que el consumo que provoca en los navegadores es tan alto que si nos paramos a pensar fríamente, no es nada recomendable su uso… aún así, el HTML 5 todavía lo mantiene ya que para algunas cosas sigue siento un elemento valioso (aunque, como digo, yo no lo recomiendo, ni yo ni Google ni Yahoo!…)

iframe

El elemento iframe básicamente permite integrar lo que se podría decir como una ventana de navegador dentro de otra, o sea, una página dentro de otra, en un espacio definido. De esta forma podemos abrir el contenido de una página propia o externa dentro de una parte de la que actualmente visualizamos.

El principal atributo que lo acompaña es el src que como en muchos otros elementos, hace referencia a una dirección URL, que será la página que abrirá dentro. También se le puede indicar el srcdoc que hace referencia al nivel de profundidad que tendrá el elemento. El atributo name hará referencia al nombre del elemento (por si hay que acceder a él a través del DOM).

Uno de los mayores problemas que tienen los iframes es la seguridad que puede comportar abrir “cualquier” elemento externo a nuestro sitio. Es por esto que existe el atributo sandbox (al que por ejemplo ya da soporte Google Chrome) y que restringe algunas acciones. Algunos de los valores que puede generar excepciones son:

  • allow-same-origin
  • allow-top-navigation
  • allow-forms
  • allow-scripts

<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://www.example.com/incrustado.html"></iframe>

Otro atributo que parece muy interesante es seamless. Con este atributo le decimos al navegador que “renderice” el contenido del iframe como si fuera parte del sitio. Esto implicará que haya algunas restricciones y ampliaciones, como que el contenido ha de estar en el mismo dominio, que los CSS que haya en el iframe pasarán a formar parte del CSS principal…

Para acabar, y como es lógico, hemos de indicar el tamaño de la ventana, y para ello utilizaremos los atributos width y height, que indicarán el ancho y alto de la ventana.

Sin duda el elemento iframe va a ser uno de los más criticados por los buscadores y optimizadores de la red, pero parece que va a seguir aquí durante bastante tiempo.

Open Standard Media (OSM) Player

Uno de los poyos que siempre me he encontrado a la hora de poner un reproductor de vídeo en la web es que en la mayoría de casos sólo aceptaba vídeos flash (.flv). La cosa es que con el HTML 5 y con jQuery se han montado un reproductor llamado Open Standard Media que tiene muy buena pinta, es código abierto y gratuito.

Entre otras cosas, permite el uso de HTML 5, soporta los nuevos elementos audio y video del HTML 5 con los formatos estándar, para el resto de formatos monta un reproductor Flash, se le puede cambiar el diseño de una forma sencilla gracias al uso de ThemeRoller, permite la integraciónd e vídeos de Vimeo y Youtube (simplemente indicando la URL), tiene la opción de listados de vídeos.

La instalación es muy sencilla, ya que sólo hay que añadir un par de JavaScript en la cabecera, poner el código básico del reproductor, y al final de la página, puedes incorporar un listado de los vídeos o una llamada a un XML que los tenga. Aun así, creo que la opción más sencilla es la de usar la librería en PHP, que con unas pocas líneas funcionaría:

<?php
include("OSMPlayer.php");
$player = new OSMPlayer(array(
  'file' => 'http://www.mysite.com/files/myvideo.flv',
  'image' => 'http://www.mysite.com/files/myimage.jpg',
  'disablePlaylist' => true
));
?>
<html>
  <head>
    <title>Open Standard Media (OSM) Player: PHP Demo</title>
    <script type="text/javascript" src="jquery-ui/js/jquery.js"></script>
<?php
print $player->getHeader();
?>
  </head>
  <body>
    <h2>Open Standard Media (OSM) Player</h2><br/>
<?php
print $player->getPlayer();
?>
  </body>
</html>

Con esto tendríamos un reproductor sencillo, aunque también se puede complicar un poco si le añadimos una lista de reproducción que nos permita visualizar decenas de vídeos… o si queremos modificar algunos parámetros, aquí está la lista de todos los disponibles…

font dragr: prueba tus fuentes sólo arrastrándolas

Aunque hago un parón en cuanto a publicar de HTML 5, he encontrado esta herramienta, web o como queramos llamarlo que tiene su gracia, sobretodo si te dedicas a maquetar o eres diseñador.

El sitio se llama font dragr y básicamente es una página en la que arrastrando un fichero de tipo de letra -truetype (ttf), opentype (otf), scalable vector graphics (svg) o Web Open Font Format (WOFF)- te actualizará los textos de la página con esa fuente. Además, el contenido original de la página es editable, por lo que puedes poner un texto de ejemplo y así ver cómo quedaría directamente en el navegador web.

Otro detalle que ya avisan es que lo de arrastrar sólo funciona con in Firefox 3.6, que es, en estos momentos, el único que soporta esas funcionalidades de HTML5. Entre las cosas que se usan encontramos el uso del sitio en modo offline, la API de arrastrar y soltar, la de gestión de ficheros, la de editar contenidos, la del uso del @font-face, gradientes, bordes redondeados, sombras…

HTML 5: formularios, el elemento 2.0 (parte 2)

Hace unos días explicaba principalmente el elemento input de los formularios en HTML 5 y hoy toca el resto de elementos. Y es que no es moco de pavo todo lo que hay.

fieldset

Este elemento se utiliza para agrupar varios elementos de un formulario… si un formulario tiene varios “bloques” o contenidos distintos, se deberían agrupar con este elemento. Si se le indica el atributo disabled entonces los elementos contenidos en él también lo están. También se le puede indicar el atributo form que hace referencia al formulario padre, y el atributo name, para acceder externamente con un nombre único.

legend

Si se le quiere poner una cabecera descriptiva a cada uno de los fieldset, el legend es el elemento que debemos utilizar. Con este texto podremos poner una cabecera a cada uno de los bloques que pueden formar un formulario compuesto de muchos contenidos.

label

Los label son los textos que acompañan a un elemento, como puede ser un input y que vienen a decir qué es de lo que se habla (que no una ayuda sobe el campo en sí). Este elemento puede tener el atributo for que se usaría para hacer referencia al name del elemento.

<label><input type="checkbox" name="lost"> Lost</label<

button

Es simplemente un botón, y es que los button son los elementos que permiten acabar de interactuar con el formulario. Botones hay de 3 tipos que se indican con el atributo type:

  • submit: que permite que la información del formulario se envíe.
  • reset: que deja el formulario en su estado inicial.
  • button: que simplemente, no hace nada.

El atributo form indica el nombre del formulario al que hace referencia, y el name es el nombre que le asignamos al propio botón. Además de estos, también está disponible el atributo disabled que básicamente hace que el botón no pueda ejecutarse, y de esta forma queda limitado a una serie de verificaciones previas. Con el atributo autofocus el sistema automáticamente mandará el foco al botón.

select

Los select hacen referencia a un listado de opciones. Esta selección por defecto es simple (sólo un elemento) aunque si se le añade el atributo booleano multiple podremos seleccionar más de una opción. De la selección se elegirá uno o más option que son los elementos que se usan para indicar cada una de las opciones.

El atributo size permite definir la cantidad de opciones visibles por defecto, que puede ser una o más. En el caso de que haya el atributo multiple activo, por defecto habrá 4.

<select name="allowedunits" multiple size="3">
  <option value="1" selected>Miner</option>
  <option value="2" selected>Puffer</option>
  <option value="3">Snipey</option>
  <option value="4">Max</option>
  <option value="5" selected>Firebot</option>
</select>

optgroup

Como ya el nombre deja ver, optgroup representa una agrupación de elementos option que tienen una agrupación común. Aunque en sí no tiene mucho significado, básicamente es eso, una agrupación de elementos de una misma temática, tipo o como se le quiera llamar, pero poco más.

Puede llevar varios atributos, como el disabled si queremos desactivar todas las opciones contenidas, o el label, que será el nombre que tenga ese grupo de cara a los usuarios.

option

El elemento option puede formar parte de un select, de un optgroup o de un datalist y básicamente es una de las opciones a elegir de entre unas cuantas. Al igual que muchos otros elementos, puede estar disabled y por tanto no ser utilizada en la selección.

Por norma general suele ir acompañado de un valor value que será lo que realmente se mande como información a la hora de enviar o trabajar con el formulario. Como información añadida podemos usar el label, que podría tratarse como el título o mini-descripción de esa opción. Por supuesto, otro de los atributos importantes es el selected que se usa en aquellos momentos en que queremos tener elementos seleccionados por defecto.

datalist

El elemento datalist está pensado para ser un sistema de “sugerencias”. Básicamente es un contenedor en el que se incluyen distintas opciones que corresponderían a un campo. De esta forma, si alguien empeiza a escribir en un input y coindice de alguna manera con alguno de los contenidos, le aparecerá como una sugerencia.

<input type="text" name="favcharacter" list="characters">
  <datalist id="characters">
    <option value="Homer Simpson">
    <option value="Bart">
    <option value="Fred Flinstone">
  </datalist>

textarea

Un textarea es un elemento de entrada de datos libre y multilínea, es decir, un sitio donde escribir “lo que te da la gana”. Este elemento tiene bastantes atributos que le permiten hacer algunas cosas.

Para empezar podemos aplicarle el elemento readonly que básicamente impide que los usuarios puedan cambiar el contenido del elemento. Para indicar el tamaño del elemento podremos usar los atributos cols y rows que indican la cantidad de caracteres por columna y filas que se permiten; por defecto hay 20 caracteres por columna y 2 filas. Además, para que no se corten, o sí, las palabras que se puedan incluir en este elemento, podemos usar el wrap indicando el valor soft (por defecto) o hard con el qe controlamos saltos de línea y similares. En el caso de indicar un valor de maxlength le estamos diciendo al textarea que hay un límite máximo de caracteres, y que a partir del límite no ha de dejar continuar. SI queremos que el usuario tenga que rellenar obligatoriamente el campo, hay que indicarle el valor booleano required; también es posible deshabilitarlo con un disabled.

Un detalle interesante, es que, al igual que el input, este elemento también permite el atributo placeholder, que es una pequeña ayuda (de unas pocas palabras) que explique qué ha de contener el elemento.

keygen

Sin duda uno de los elementos más enigmáticos del HTML 5 es el elemento keygen. Este elemento básicamente lo que hace es generar una clave privada y una pública para que el navegador y el servidor puedan comunicarse. La clave la genera automáticamente el navegador, y supongo que mediante AJAX o algún otro sistema se podrá mantener una “conversación” entre el navegador y servidor… A ver si encuentro algún ejemplo de uso, porque no he visto nada todavía.

Permite algunos atributos como challenge o el keytype que es el tipo de codificación de la clave, que por ahora sólo acepta un valor que es rsa.

output

Otro de los nuevos elementos es el output… y es que si hay input, ¿por que no output? Y básicamente es eso… los inputs son los “cajetines” para escribir cosas, y en alguna ocasión, los propios inputs han servidor como “cajetín” de cálculo o similar… pues esto es un “cajetín” que se usa como resultado de algo.

<form onsubmit="return false">
  <input name=a type=number step=any> +
  <input name=b type=number step=any> =
  <output onforminput="value = a.valueAsNumber + b.valueAsNumber"></output>
</form>

progress

Este es uno de los elementos que todavía no queda claro si estará en la versión final de HTML 5 o se quedará por el camino, como ya ha ocurrido con algún otro en versiones anteriores. Y es que progress viene a indicar el proceso que lleva una tarea, como si de una barra de progreso se tratase… y está pendiente de aprobación porque no existe nada que haga referencia la tarea en sí.

El elemento tiene dos posibles parámetros que son value y max que indicarían el valor a mostrar y el valor máximo que puede tener, partiendo de la base de que va entre 0 y max.

meter

Y el elemento que mataría el progress es el meter, que hace lo mismo pero diferente… básicamente es un sistema que permite crear “escalas” de cosas, independientemente de lo que sea. Un ejemplo podría ser el tamaño ocupado o libre de un disco duro.

Este elemento tiene bastantes atributos, y casi diría que hay que ponerlos todos:

  • value: Es el valor actual de todos los posibles.
  • min: El valor mínimo posible para el rango. Por defecto es 0.0
  • max: El valor máximo posible para el rango. Por defecto es 1.0
  • low: Es el valor por el que, por debajo, sería “un problema”. Por defecto es el mismo que min.
  • high: Es el valor por el que, por encima, sería “un problema”. Por defecto es el mismo que max.
  • optimum: Es el valor óptimo para la medidicón. Por defecto es la media entre min y max, o 0.5

Algunos ejemplos:

Storage space usage: <meter value=6 max=8>6 blocks used (out of 8 total)</meter>

Voter turnout: <meter value=0.75><img alt="75%" src="graph75.png"></meter>

Tickets sold: <meter min="0" max="100" value="75"></meter>

<dl>
<dt>Radius: <dd><meter min=0 max=20 value=12>12cm</meter>
<dt>Height: <dd><meter min=0 max=10 value=2>2cm</meter>
</dl>

Y hasta aquí lo que corresponde a los formularios del HTML 5. Algunas novedades interesantes sobretodo pensadas para lo que en el futuro puede traernos “la web 2.0” e incluso, si hace falta la 2.5 o la 3, quién sabe…