Cómo estructurar adecuadamente una página web en HTML5 (Parte I)

Como siempre, voy tarde. Ha tenido que pasar más de un año, pero aquí estoy, a vueltas con los fundamentos del HTML5.

Esta nueva versión del código es muy potente, ya se han encargado de demostrarlo todos los que quieren dar carpetazo al Flash, incluso la propia Adobe se ha subido al carro de la animación con HTML5 mediante el lanzamiento de Edge. Pero, como con todo, lo mejor es empezar la casa por los cimientos y, para mí, estos son los elementos que configuran la estructura (cuerpo) de la página web.

Así pues, el cuerpo (body) de una página web bien estructurada en HTML5, consta de las siguientes partes, únicas pero repetibles:

Cabecera <header>
Pie <footer>
Dirección <address>
Navegación <nav>
Sección <section>
Artículo <article>
Apartado <aside>
Grupo de encabezados <hgroup>

Ampliando:

<header>
Etiqueta para encapsular las cabeceras. Lo normal es emplearla para englobar los elementos que componen la cabecera general de la web (logo, lema), pero también puede utilizarse para diferenciar el encabezado de un subapartado de la misma web.

Ejemplo #1: Cabecera general de la página web

<!-- [Cabecera] -->
<header>
<h1>Bienvenidos a mi web</h1> 
</header>

Ejemplo #2: Cabecera de un artículo de la página web (ver <article>)

<!-- [Un artículo] -->
<article>
<!-- [Cabecera del artículo] -->
<header>
<h1>Este sería el título del artículo.</h1>
</header>
.
.
. 
</article>

<footer>
Etiqueta para encapsular el pie de página, que al igual que el <header> puede usarse en como pie de toda la web o bien de los artículos o secciones si conviene.

Ejemplo #1: Pie general de la página web

<!-- [Pie de página] -->
<footer>
<p>Información de pie de página: Derechos de autor, año, atribuciones, agradecimientos...</p> 
</footer>

Ejemplo #2: Pie de un artículo de la página web

<!-- [Un artículo] -->
<article>
.
.
.
<!-- [Pie del artículo] -->
<footer>
<p>Enlace para seguir leyendo...</p> 
</footer>
</article>

<address>
Esta etiqueta viene de la mano del <footer> general de la página web. Sirve para encapsular los datos de dirección y/o contacto.

Ejemplo de uso dentro del pie de página

<!-- [Pie de página] -->
<footer> 
<p>Información de pie de página</p> 
<!-- [Dirección y/o contacto] -->
<address> 
<p>Escríbenos a ejemplo@mail</p>
</address>
</footer>

<nav>
Etiqueta para encapsular el apartado dedicado a la navegación interna de la web (el típico menú).

Ejemplo básico

<!-- [Navegación] -->
<nav>
<a href="#">Enlace Interno #1</a>
<a href="#">Enlace Interno #2</a>
<a href="#">Enlace Interno #3</a>
<a href="#">Enlace Interno #4</a>
</nav>

<section>
Etiqueta para encapsular las diferentes secciones de la web. Digamos que agrupa elementos de igual temática. Por ejemplo, apartado de noticias = sección; apartado de descargas = sección…

Ejemplo

<!-- [Una sección compuesta de dos artículos] -->
<section>
<!-- [Un artículo] -->
<article>
.
.
. 
</article>
<!-- [Otro artículo] -->
<article>
.
.
. 
</article>
</section>

<article>
Etiqueta para encapsular los artículos, temas, tópicos, entradas… Lo conveniente es agrupar los artículos de la misma temática en una sección que los englobe.

Ejemplo

<!-- [Un artículo] -->
<article>
<!-- [Cabecera del artículo] -->
<header>
<h1>Título del artículo</h1>
</header>
<!-- [Contenido del artículo] -->
<p>Cuerpo del artículo con todo lo que se quiera contar.</p>
<p>Y con todos los párrafos y formateos que hagan falta.</p>
<!-- [Pie del artículo] -->
<footer>
<p>Pie del artículo.</p> 
</footer> 
</article>

<aside>
Etiqueta para encapsular anuncios u otro contenido de la página que no está relacionado con el tema central de la misma.

Ejemplo

<!-- [Apartado para anuncios] -->
<aside>
<h3>Anuncios</h3>
<p>Vendo moto en buen estado.</p>
</aside>

Finalmente, una etiqueta que parece de menor importancia, pero que también ayuda a los navegadores a comprender la estructura de la web:

<hgroup>
Etiqueta para encapsular un grupo de encabezados (h1…h6).

Ejemplo de uso: En la cabecera de un artículo

<!-- [Cabecera del artículo] -->
<header>
<!-- [Grupo de encabezados: Titular + Entradilla] -->
<hgroup>
<h1>Accidente en la N-IV</h1>
<h5>Hasta trece coches se vieron implicados en el accidente sin víctimas mortales. </h5>
</hgroup>
</header>

Ahora bien, si nos partimos el lomo estructurando una web así, a palo seco, un navegador web la entendería perfectamente (tema por el cual esta estructura es interesante en la optimización para buscadores, es decir, en el SEO), pero una persona se aburriría como una ostra, con todos los contenidos en blanco sobre negro y seguidos hacia abajo. Podéis ver un ejemplo al respecto aquí (si os interesa el código, botón derecho del ratón + ver código fuente). Para hacer todo esto más atractivo al usuario, sin que pierda ese appeal de cara a los navegadores, obviamente, hace falta un poco de CSS.

Prometo una segunda parte sobre esto, indispensable. Perdonadme hasta entonces > [Actualización 21/09/2011] Ya la podéis ver: Cómo estructurar adecuadamente una página web en HTML5 (incluyendo CSS)

Cómo insertar tweets en tu web artesanalmente

Aviso para navegantes:

Esta entrada del blog es antigua. La información que recoge este artículo está obsoleta. Hay una versión más reciente de cómo insertar tuits o cronologías de Twitter en tu web en este mismo rincón para escribir.

Utilizar el widget que nos propone Twitter para que nuestros tweets se vean en cualquier web está bien y es sencillo para quien no quiera complicarse. Pero cuando queremos que nuestras palabras aparezcan a nuestra manera, tenemos que buscarnos la vida por otra parte.

He ido dando tumbos hasta conseguir las líneas de código, que voy a explicar aquí, para lograr estas 3 cosas:

  1. Poner los tweets con un estilo propio.
  2. Hacer que aparezcan también los retweets.
  3. Que sólo se vean las 2 últimas actualizaciones.

Todo esto es personalizable, por supuesto. Cada estilo es el que uno le quiera dar, los retweets no tienen porqué aparecer y se pueden mostrar todas los mensajes que se quieran (hasta un máximo de 20, por restricciones del propio Twitter). En fin… al meollo: El código -que debéis pegar allí donde queráis que vayan vuestros tweets- dice así:

 
Código

<!--Para mostrar los mensajes de Twitter, retweets incluidos.-->
<div id="twitter_update_list"></div>
<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://api.twitter.com/1/statuses/user_timeline.json?callback=twitterCallback2&screen_name=TuUsuario&count=2&include_rts=true" type="text/javascript"></script>

Ahora os explico lo que es cada cosa y cómo mejorarlo un poco.

1.

<!--Para mostrar los mensajes de Twitter, retweets incluidos.-->

Es un comentario HTML, no necesario para que funcione el invento, pero sí para ayudados a encontrarlo en un futuro si queréis cambiar algo.

2.

<div id="twitter_update_list"></div>

Es el hueco que hacéis en el HTML para que se vean los tweets. Cuidado con cambiarle el nombre, que dejará de funcionar. Usad el mismo «twitter_update_list» en vuestra hoja de estilo (CSS) para las propiedades que queráis darle a la apariencia visual.

3.

<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>

Esto es una llamada a un archivo colgado en los servidores de Twitter que es el que hace que funcione la cosa. Y ésta es, también, la parte mejorable, porque, aunque tal cual lo vemos es correcto, el archivo al que llama está en inglés y eso quiere decir que, cuando nuestros tweets aparezcan, a su lado veremos que fueron escritos «a long, long time ago» en inglés. Si os apetece que aparezca en español, es tan sencillo como utilizar el siguiente código en su lugar:

<script type="text/javascript">
function twitterCallback2(twitters) {
  var statusHTML = [];
  for (var i=0; i<twitters.length; i++){
    var username = twitters[i].user.screen_name;
    var status = twitters[i].text.replace(/((https?|s?ftp|ssh)://[^"s<>]*[^.,;'">:s<>)]!])/g, function(url) {
      return '<a href="'+url+'">'+url+'</a>';
    }).replace(/B@([_a-z0-9]+)/ig, function(reply) {
      return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
    });
    statusHTML.push('<li><span>'+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters[i].id_str+'">'+relative_time(twitters[i].created_at)+'</a></li>');
  }
  document.getElementById('twitter_update_list').innerHTML = statusHTML.join('');
}

function relative_time(time_value) {
  var values = time_value.split(" ");
  time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
  var parsed_date = Date.parse(time_value);
  var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
  var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
  delta = delta + (relative_to.getTimezoneOffset() * 60);

  if (delta < 60) {
    return 'Ahora mismo';
  } else if(delta < 120) {
    return 'Hace un rato';
  } else if(delta < (60*60)) {
    return (parseInt(delta / 60)).toString() + ' minutos atr&aacute;s';
  } else if(delta < (120*60)) {
    return 'Hace una hora';
  } else if(delta < (24*60*60)) {
    return 'Hace ' + (parseInt(delta / 3600)).toString() + ' horas';
  } else if(delta < (48*60*60)) {
    return 'Ayer';
  } else {
    return (parseInt(delta / 86400)).toString() + ' d&iacute;as atr&aacute;s';
  }
}
</script>

Lo que hay en español es lo que se puede modificar, el resto, mejor no tocarlo, y con «utilizar en su lugar» he querido decir: «quitar la línea de antes y poner esto a capón. Si bien, al igual que está el archivo de Twitter alojado en sus servidores, podéis meter este código (sin la primera ni la última línea) en un .js, colgarlo en vuestro host -en caso de tener uno- y enlazarlo.

Para rematar, os explico la última de las cuatro líneas. ¡Atentos a la explicación! Hay cosas que modificar para que funcione.

4.

<script  src="http://api.twitter.com/1/statuses/user_timeline.json?callback=twitterCallback2&screen_name=TuUsuario&count=2&include_rts=true"  type="text/javascript"></script>

Aquí es donde le indicamos a Twitter los tweets de quién queremos que aparezcan -cambiad TuUsuario, por el vuestro de verdad-; el número de tweets que queremos que aparezcan -cambiad el 2 de &count=2 por el número que sea entre 1 y 20- y, por último, le indicamos si queremos retweets –&include_rts=true-. Si no queréis retweets, poned false en lugar de true o borrad todo eso ya que por defecto están desactivados.

 
¿Se pueden hacer más filigranas aún? 

De nuevo, por supuesto. Acudid a la ayuda de Twitter y veréis cómo (link actualizado el 20/06/11, parece que el anterior dejó de funcionar).

 
EXTRA: Apuntes varios para Blogger

Para meter este código en Blogger, lo podéis hacer en Diseño > Añadir un Gadget > HTML/Javascript. En el cuadro que se abre, pegáis el código con vuestras modificaciones y listo.

Si necesitáis usar imágenes para adornar el estilo CSS, podéis recurrir Picasa para almacenarlas, ya que suele ser también ahí donde se guardan por defecto las fotos que se emplean para las entradas del blog.

Por otra parte, según afirman en la ayuda de Blogger -copio y pego…- “en el blog publicado, todos los códigos <b:section> y <b:widget> se sustituirán por códigos <div>, que tendrán un ID especificado. De modo que, por ejemplo, puedes hacer referencia a div.header o div.myList en tu CSS si lo deseas”, por lo que para hacer referencia al estilo de Twitter en el CSS, cuando lo modifiquéis en Blogger, acordaros de renombrarlo como div#twitter_update_list.