Armonía | En definitiva...

Después de volver de pasar unos días en Sevilla, me he encontrado con algunos enlaces muy interesantes que me gustaría compartir con vosotros. Probablemente ya los hayais leido, pero nunca viene mal darles algo más de difusión.

El primero de ellos es un artículo escrito por Daniel Torres Burriel en su weblog, y se titula: De cómo el elemento TITLE se convierte en sello de calidad. En el, Daniel hace un profundo análisis/disertación sobre el elemento title de nuestros lenguajes de marcado favoritos, (HTML y XHTML). Muy recomendable leerlo detenidamente.

El segundo enlace de hoy va para nuestro amigo MC de Accesibilidad Web, y su artículo: La Accesibilidad en Ingeniería del Software. En este artículo MC nos plantea la forma en la que se debe enfocar la accesibilidad en los proyectos.

Antes de que lo publicara, MC y yo mantuvimos una interesante conversación al respecto. Como ya le comenté a el, mi punto de vista es igual que el suyo pero un poco más pesimista: ese es el camino a seguir, pero a día de hoy no es más que una utopía, (desgraciadamente).

Otro artículo tremendamente interesante y, (casi casi), recién salido del horno, es: Introducing the CSS3 Multi-Column Module de A List Apart, donde nos explican de forma introductoria el nuevo módulo para multi-columnas en CSS3. Una lectura más que recomendable para aquellos a los que les gusta estar al día en el mundo del desarrollo Web.

Y para terminar, y no por ello menos interesante, el blog MilMazz, un sitio ideal para todos aquellos interesados en Linux, sobre todo Debian y Ubuntu. Sus artículos son tremendamente útiles, con cantidad de tips interesantes.

When you were here before, couldn't look you in the eye
You're just like an angel, your skin makes me cry
You float like a feather
In a beautiful world
I wish I was special
You're so fuckin special

But I'm a creep, I'm a weirdo
What the hell am I doin here?
I don't belong here

I don't care if it hurts, I wanna have control
I want a perfect body, I want a perfect soul
I want you to notice, when I'm not around
You're so fuckin special
I wish I was special

But I'm a creep, I'm a weirdo
What the hell am I doin here?
When I don't belong here, whoaaa whoaaa

She's running out again...
She's running out, she runs, runs, runs, runs... runs...

Whatever makes you happy
Whatever you want
You're so fuckin special
I wish I was special
But I'm a creep, I'm a weirdo
What the hell am I doin here?
I don't belong here
I don't belong here

Continuando con los microformatos, hoy vamos a comentar uno de los que más me gustan: el microformato Vote Links. Gracias a este microformato podemos "votar", (positiva o negativamente), los enlaces que queramos. Gracias a este "voto", se podría, por ejemplo, sacar un listado de los enlaces que consideramos de calidad.

La forma de usar este microformato es muy sencilla. Como en todos de ellos, hay que colocar ciertos valores en un determinado atributo para el elemento que queramos marcar. En este caso, el elemento a marcar será un hipervínculo, y el atributo que usaremos será rev, (en versiones antiguas se usaba rel, pero acabó desechandose ya que no reflejaba correctamente la relación del enlace con el documento enlazado, aunque para mantener la compatibilidad las aplicaciones que vayan a manejar este microformato deben tener en cuenta el atributo rel).

Los valores que puede tomar el atributo rev para este microformato son tres:

rev="vote-for"

Este valor se debe usar cuando queremos dar un "voto" positivo al enlace que marquemos. Cuando damos un "voto" positivo a un enlace estamos indicando que recomendamos, o que estamos de acuerdo con lo que se dice en la página que enlazamos.

rev="vote-abstain"

Cuando marcamos un enlace con este valor en el atributo rev estamos indicando que no votamos ni positiva ni negativamente. Es decir, ni recomendamos, ni indicamos que no estamos de acuerdo con lo dicho en la página enlazada.

rev="vote-against"

Marcando con este valor un enlace estamos indicando que no recomendamos, o que no estamos de acuerdo, con la página enlazada. Le estamos dando un "voto" negativo.

Y para terminar, nada mejor que unos ejemplos de su uso:

<p><a href="http://pviojo.net/posts/microformatos-los-bloques-de-la-web-semantica/" title="Artículo de Pablo Viojo sobre los microformatos" rev="vote-for">Microformatos: Los bloques de la Web semántica</a></p>
<p><a href="http://www.16bits.net/archivos/argentina-cuando-las-cosas-no-funcionan/" title="Artículo de Rodrigo Galindez sobre el estado burocrático en Argentina" rev="vote-abstain">Argentina, cuando las cosas no funcionan</a></p>
<p><a href="http://www.alt1040.com/archivo/2005/09/19/algunos-pensamientos-sobre-comentarios-en-los-blogs/" title="Artículo de Eduardo Arcos sobre su concepción de los comentarios en los blogs" rev="vote-against">Algunos pensamientos sobre los comentarios en los <span xml:lang="en">blogs</span></a></p>

Tal y como podeis ver he marcado tres enlaces, y he usado el atributo rev para marcar mi "voto" a cada uno de ellos. Con el primero, de Pablo Viojo, en el que hace una pequeña introducción a los microformatos, estoy totalmente de acuerdo, y me parece un artículo bueno y digno de recomendación, así que lo he marcado con rev="vote-for"

El segundo, de Rodrigo Galindez, es un artículo del que no puedo opinar realmente, ya que habla sobre el estado de los temas burocráticos en Argentina, cosa de la cual no sé absolutamente nada. Por tanto la marco con rev="vote-abstain".

Y para terminar, he marcado con rev="vote-against" un artículo de Eduardo Arcos, en el que expone su opinión sobre cerrar los comentarios en los blog, opinión con la que no estoy de acuerdo.

Después de unos días retomamos el tema de los microformatos, (rel="license", hCard, rel="nofollow", rel="tag"), esta vez para hablar de un microformato "de los gordos", el microformato hCalendar.

Como el microformato hCard, hCalendar está basado en un estándar, el iCalendar, usado por ejemplo en la aplicación iCal de Mac. Como ya os imaginareis, hCalendar se usa para marcar con XHTML cualquier tipo de evento, con sus fechas, lugar, etc.

Como siempre, como mejor se ven las cosas es con ejemplos, así que vamos a marcar un evento con iCalendar, a ver qué tal queda:

<div class="vevent">
<p>
<a class="url" href="http://www.findelmundo.org/">
<abbr class="dtstart" title="20051001">1 de Octubre</abbr> - <abbr class="dtend" title="20051002">2 de Octubre  </abbr> <span class="summary">Fin del mundo </span> - en <span class="location">el Planeta Tierra </span>
</a>
</p>
<p class="description">Nos vamos todos a tomar por culo.</p>
</div>

Como podeis ver, he englobado todo dentro de un div con class="vevent", para marcar que contiene datos relativos a un evento marcado con hCalendar. Dentro de ese div está la información del evento, que también he marcado aproviadamente.

Para marcar un enlace hacia una página con información relevante sobre el evento he usado el atributo class="url". El texto del enlace puede ser el que queramos, incluso más datos del evento, ya que lo que interesa del enlace es la URL, contenida en el atributo href.

Otro dato importante que hay que marcar convenientemente es el resumen, (summary), del evento. Para no complicarse la vida lo mejor es colocar en este dato el nombre del evento, y marcarlo con su correspondiente class="summary". Normalmente, junto al nombre del evento se suele colocar el lugar donde se celebra. Este dato hemos de marcarlo con class="location". No hay que olvidar que los elementos que usemos para marcar los datos no tienen por qué ser únicamente div o span, de hecho tienen preferencia aquellos elementos con mayor semántica para el documento.

Un punto con el que no estoy muy de acuerdo con la especificación del microformato es el relativo a las fechas, tanto de comienzo como de final. En la especificación se recomienda marcarlas con abbr, cuyo texto sería la fecha en formato "humanizado", y en su title se colocaría la fecha en "formato máquina". Yo para nada usaría abbr, no me parece lógico, pero como así lo dice la especificación, así lo reproduzco yo.

La fecha de comienzo del evento se ha de marcar con el atributo class="dtstart", para la fecha de fin se debe usar class="dtend". Recordar que para la fecha "formato máquina", colocada en el title del abbr se ha de usar el formato: AAAA-MM-DD.

Por último, en mi ejemplo he escrito también una pequeña descripción del evento, la cual hay que marcar con class="description". Por supuesto hay muchos más datos que se pueden colocar, los podeis encontrar todos en el estándar de iCalendar.

Otro día más vamos a comentar a modo de introducción un microformato, en esta ocasión el microformato rel="tag", destinado a marcar enlaces a páginas de un tag en concreto.

Con todo esto de la, (mal llamada a mi parecer), Web 2.0, y la moda de las folksonomies, los tags se han convertido en una forma "buena, bonita y barata" de catalogar contenido. Por este motivo surge el microformato rel="tag".

Para poder usar este microformato se deben seguir una serie de reglas básicas:

• El texto del enlace ha de ser el tag en cuestión
• La página a la que enlacemos debe ser la página que muestre la información catalogada bajo ese tag
• La URL del enlace debe tener, en el último segmento de la ruta, el tag que estemos marcando, (si contiene espacios se traducen a su entidad para URL)

Siguiendo estas directrices, podemos marcar los tags que mostremos en nuestras páginas con el microformato rel="tag". Por ejemplo, para marcar un enlace al tag "miventana", (donde guardo una serie de fotos hechas desde la ventana de mi habitación en Los Barrios):

<a href="http://flickr.com/photos/spiral-static/tags/miventana/" hreflang="en" title="Página con mis fotos marcadas con el tag: miventana" rel="tag">miventana</a>

Hay que recordar que los enlaces marcados con el microformato rel="tag" han de ser enlaces visibles, por tanto no podríamos marcar un elemento link del head con este microformato.

A raíz del último podcast de Rodrigo Galíndez y Sergio Aramayo he descubierto Pandora, un servicio Web increíble gracias al cual puedes encontrar nueva música de acuerdo a tus gustos.

El funcionamiento de Pandora es muy simple, creas lo que ellos laman una station, específicando uno o varios grupos que te gusten, y el sistema va reproduciendo música con carácteristicas parecidas a esos grupos.

Puedes ayudar al sistema a afinar más en sus sugerencias marcando las canciones según si te gustan, o si no te gustan, así en futuras canciones concordará mejor con tus gustos.

La suscripción anual cuesta 36$, pero las 10 primeras horas son gratis, (yo llevo usándolo más de 10 horas y aún no me han prohibido nada). Si os gusta la música, seguramente Pandora os parezca fascinante. Lastima que no tengan música clásica.

Hace ya algunos meses salto a la palestra de los blogs una iniciativa de Google para evitar el spam en los comentarios: se dió a conocer el microformato rel="nofollow".

Desde ese momento, infinidad de blogs dieron su opinión al respecto, algunas favorables y otras desfavorables, pero desde luego no pasó desapercibido. Es por esto que lo más probable sea que a estas alturas todos conozcamos qué es y cómo se usa este microformato, pero de todas formas voy a comentarlo por si queda algún rezagado.

El microformato rel="nofollow" está pensado para especificar que un hipervínculo con este atributo no debe intervenir en el análisis por parte de los robots de búsqueda. Siguiendo un ejemplo simple:

<a href="http://www.yonkis.com/" title="Página principal de Yonkis.com" rel="nofollow">Yonkis</a>

Como podéis ver en el código anterior, el elemento a tiene el atributo rel="nofollow". Esto viene a significar que cualquier motor de búsqueda, (tipo Google, etc.), no debería tomar este enlace en cuenta a la hora de realizar sus cálculos para el resultado de las búsquedas y la generación de sus rankings. Es decir, Yonkis, a ojos de los motores de búsqueda, no recibiría ningún enlace de nuestra parte si nosotros hemos marcado ese enlace con rel="nofollow".

Siguiendo el hilo de la anterior recomendación musical, hoy voy a volver a recomendaros algo de Vivaldi, también de Las Cuatro Estaciones, esta vez de La Primavera, el segundo movimiento, (Largo) (OGG, 3212 KB).

Es una pieza exquisitamente suave y delicada. Al igual que la anterior, esta versión está interpretada por John Harrison con los músicos de cámara de la Wichita State University.

Retomando el tema de los microformatos, hoy me gustaría comentar un poco algunos aspectos del microformato destinado a marcar los datos de cualquier persona: hCard.

Tal y como se puede leer en la especificación, el microformato hCard está basado en el estándar vCard, y permite, usando las mismas propiedades que vCard, marcar con XHTML todos los datos de una persona de manera semántica. Gracias a este microformato, los autores de documentos Web podrán incluir datos vCard directamente en sus documentos con XHTML, sin necesidad de utilizar documentos vCard externos. Además, aplicaciones específicas podrán recopilar datos vCard directamente de los documentos.

El uso del microformato hCard es relativamente sencillo, tan sólo hay que seguir unas determinadas reglas, incluidas todas en la especificación del microformato.

Lo primordial es encerrar todas las etiquetas que vayan a englobar los datos personales en una etiqueta de nivel superior con un atributo class cuyo valor sea "vCard". Comunmente este elemento sera un div, pero conviene recordar que si podemos usar un elemento más adecuado, ya sea porque aporta más sentido semántico o por cualquier otro motivo, lo usaremos.

<div class="vcard">
<p>Juan Hurtado</p>
<p>Los Barrios, (Cádiz)</p>
<p><a href="mailto:juan.g.hurtado@gmail.com" title="e-Mail del autor del blog">juan.g.hurtado@gmail.com</a></p>
<p><a href="http://armonia.spiral-static.org/" title="Armonía | En definitiva...">http://armonia.spiral-static.org/</a></p>
</div>

Como podeis ver en el ejemplo anterior, he encerrado algunos de mis datos personales en un elemento div cuyo atributo class tiene como valor la cadena "vcard". Eso, según el microformato, indicará que los datos contenidos dentro del div van a corresponder a una serie de datos personales.

El siguiente paso sería marcar cada uno de los datos personales que contiene la etiqueta <div class="vcard">. Para marcar estos datos se sigue un proceso parecido al anterior, se marcan con el atributo class los elementos que contengan el dato al que deseemos dar un valor específico. Los valores que se deben poner en el atributo class vienen determinados por la especificación del estándar vCard.

Cada dato de la ficha vCard viene identificado por un identificador específico, así, en hCard, marcaremos cada dato con su identificador concreto en su atributo class. Siguiendo con el ejemplo anterior, marcaremos cada dato de forma correcta usando el microformato hCard:

<div class="vcard">
<p class="fn">Juan Hurtado</p>
<p class="adr"><span class="locality">Los Barrios</span>, (<span class="region">Cádiz</span>)</p>
<p><a class="email" href="mailto:juan.g.hurtado@gmail.com" title="e-Mail del autor del blog">juan.g.hurtado@gmail.com</a></p>
<p><a class="url" href="http://armonia.spiral-static.org/" title="Armonía | En definitiva...">http://armonia.spiral-static.org/</a></p>
</div>

Como podeis observar, he marcado cada dato de mi ficha hCard con su atributo class con el valor correspondiente al dato en cuestión. Esta ficha no está completa, existen infinidad de datos posibles. Los podeis encontrar todos en el perfil XMDP del microformato hCard, o bien en la especificación del estándar vCard

Los que yo he usado son:

class="fn"

Representa el friendly name de la persona a la que representa la vCard. La primera palabra contenida en la etiqueta marcada con este atributo corresponde al nombre del individuo, (class="n"), y la segunda al Family Name, o apellido familiar, (class="family-name")

class="adr"

Indica que todos los datos contenidos dentro de la etiqueta marcada con este atributo forman parte de la dirección del individuo.

class="locality"

Indica la localidad o ciudad donde vive el individuo. La etiqueta marcada con este atributo ha de estar englobada por otra etiqueta con class="adr".

class="region"

Indica la región, provincia, estado, etc. donde vive el individuo. La etiqueta marcada con este atributo ha de estar englobada por otra etiqueta con class="adr".

class="email"

Normalmente se usa en un elemento a. Indica la dirección de correo electrónico del individuo.

class="url"

Normalmente se usa en un elemento a. Indica la URL de la página personal del individuo.

Llevo desde que se anunció su salida oficial siguiendole la pista a Mint, una aplicación de seguimiento de estadísticas cuyo principal punto fuerte es su diseño y que está creado con AJAX.

Desgraciadamente aún no he podido verlo en acción, ya que han deshabilitado la demo que tenian disponible debido al alto número de peticiones que estaba sufriendo. Y eso es un problema, porque estoy pensando comprar una licencia de la aplicación, pero gastarse los 30$ que vale sin haberla visto siquiere me parece un poco excesivo, y más aún sabiendo que no es algo que necesite puesto que ya tengo AWStats.

Gente como Manu o Fran ya la han comprado. Por algo será...