Armonía | En definitiva...

Gracias a Rodrigo ahora tengo en casa un ejemplar del libro Diseño de páginas web accesibles, editado por la Consejería de Trabajo, Consumo y Política Social de la Región de Murcia.

El libro, con un diseño muy bonito, es una traducción de las Pautas de accesibilidad al contenido en la Web 1.0, de WAI-W3C. Una forma atractiva de tener a mano en casa un documento importantísimo para todos aquellos que estamos metidos en esto del desarrollo web.

Cerramos el ciclo de Las cuatro estaciones de Vivaldi con una pieza de extraordinaria suavidad y tristeza. La pieza en cuestión es el segundo movimiento, (adagio molto), del concierto de Otoño de Las cuatro estaciones, (OGG, 2939 KB). Interpretado por nuestro amigo John Harrison, con los músicos de cámara de la Wichita State University.

De un tiempo a esta parte se ha puesto de moda el uso de los denominados tags, (etiquetas), para organizar y marcar el contenido en nuestras webs. Aplicaciones de la llamada "Web 2.0" como Flickr o del.icio.us hacen un uso extensivo de esta nueva forma de organización, usándola además no sólo por cada usuario, sino también en global, unificando todos los tags y mostrando información al respecto: nace así la denominada folksonomy.

Al tiempo de que los tags se pusieran de moda, montones y montones de blogs adaptaron esta forma de organización en sus CMS, dándoles un toque moderno y a la última, y también, por qué no, una sencillez y una facilidad pasmosas a la hora de organizar sus nuevos posts.

Yo, desde mi punto de vista, no considero que los tags sean la mejor forma de organizar un blog, al menos no en solitario. Me explico: no considero que los tags sean la panacea para la organización de contenidos en la web, sino más bien son un complemento de la misma, (además de añadir una metainformación de incalculable valor a los contenidos). Pero como forma de organización principal no lo considero adecuado.

A mi modo de ver, en un blog debe existir una "categorización clásica", con ocho o nueve categorías, (o las que se necesiten, sin ser excesivos), y opcionalmente, si se quiere, una serie de tags que añadan más información y organización al respecto de cada post. Así, y por poner un ejemplo rápido, esta entrada está clasificada dentro de la categoría "Web semántica". Si este blog tuviese tags, podría seguir teniendo este post dentro de la misma categoría, y además, como complemento, añadirle los tags: "folksonomias", "etiquetas", "blogs", "pensamientos-de-juan", "opinion", y un largo etcétera que me ayudaría a complementar el post, guardado de manera principal bajo la categoría "Web semántica".

Esta es mi opinión. En los blogs, los tags en solitario no son la mejor manera de organizar la información. Quizá en otras aplicaciones, como Flickr tal vez, sí lo sea, pero esa es otra historia.

El amigo MC, de Accesibilidad Web, ha creado un grupo sobre accesibilidad y usabilidad en eConozco, una potente herramienta de red social, más concretamente una red de contactos profesionales.

Os recomiendo que si no conoceis esta herramienta os deis una vuelta y os apunteis al grupo desde este enlace de invitación. Creo que con esto todos salimos ganando.

Anoche, aprovechando que tenía que mirar unas cosas sobre Atom 1.0, traduje un documento introductorio a esta tecnología de sindicación, y hoy, después de un ratillo de tocar cosas y mucho aprender, ya está listo lo que queria hacer.

El motivo por el que estuve buscando información sobre Atom 1.0 es que quería actualizar mi feed Atom actual a esta nueva versión, ya que la versión que trae DotClear para Atom es la 0.3.

Eso ya está conseguido, el feed valida perfectamente, etc. Así que he pensado en preparar los ficheros que he modificado para poder distribuirlos a todos aquellos usuarios de DotClear que quieran usarlo. Eso todavía no lo he hecho, porque me he entretenido con otra cosa, que es lo que os pienso explicar en este post.

Mientras toqueteaba el feed me he dado cuenta de que el formato con el que se muestra cuando pinchas sobre el desde tu navegador favorito es algo "feo", (al menos para aquellos a los que no le gustan los lenguajes de marcado). Así que pensé en aplicarle algunos estilos CSS para que fuera más amigable y no asustara a aquellos que no saben de qué va la cosa.

Aplicarle estilos a un fichero XML como es un fichero de sindicación Atom es muy simple, tan sólo hay que asociarle a ese fichero XML una hoja de estilos desde la cual apliques todas las modificaciones que quieras, del mismo modo que lo hacemos con nuestros documentos XHTML. Para asociar una hoja de estilos a un documento XML sólo tenemos que añadirle lo siguiente:

<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet href="fichero.css" type="text/css" ?>

Como veis, esa es la forma de asociar una hoja de estilos a un documento XML, junto a la cabecera xml colocamos una cabecera xml-stylesheet apuntando a nuestro fichero con la hoja de estilos.

Una vez hecho esto lo único que nos queda por hacer es aplicar los estilos que queramos. Del mismo modo que aplicamos estilos a nuestros documentos XHTML usando cosas como p {line-height:1.6em;}, podemos aplicarle estilos a las etiquetas de nuestro XML usando el mismo formato de notación, salvo que en este caso no referenciaremos a ningún elemento de XHTML, sino que referenciaremos a los elementos Atom de nuestro feed.

Por ejemplo, mi hoja de estilos para mi feed Atom 1.0 la podeis ver aquí. Tiene muchos estilos poco importantes para lo que estamos hablando, porque necesitaba estilizar todo el texto que contiene el feed, pero lo más importante está situado al comienzo del fichero.

Una cosa que es muy importante recordar es que por defecto, todos los elementos del feed se comportan como elementos en linea, por lo que si queremos que algún elemento se comporte como uno en bloque, vamos a tener que especificarlo explícitamente en la hoja de estilos con display:block;. Además, también hay diversos elementos que probablemente no necesitemos que se le muestren al visitante, por lo que deberemos ocultarlo con, por ejemplo, display:none;.

Una vez que terminé con la hoja de estilos, me propuse ir un poco más allá, y pensé en transformar completamente el feed mediante el uso de la tecnología XSLT. Mediante esta tecnología puedo, como es el caso, transformar el feed en un documento XHTML sin modificar su estructura interna, por lo que seguiría siendo un feed Atom 1.0 totalmente válido.

Gracias a esta transformación, podemos hacer el feed más amigable aún para el visitante "extraviado", además de poder introducir mensajes informativos para el mismo, o adaptar aún más que con las hojas de estilo el look and feel del feed.

Es la primera vez que uso XSLT, así que es probable que lo que he hecho sea muy mejorable, pero para lo que es, por ahora me sirve perfectamente. Pero si teneis cualquier sugerencia sobre el tema, por favor no dudeis en decirmelo, os estaré muy agradecido.

Volviendo al tema, para asociar una hoja XSLT a nuestro feed, (como a cualquier otro documento XML), tan sólo tenemos que colocar algo muy parecido a lo que hicimos para asociar la hoja de estilos:

<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet href="fichero.css" type="text/css" ?>
<?xml-stylesheet href="fichero.xsl" type="text/xsl" ?>

Como podeis ver, esto es muy sencillo. Lo más complicado puede ser crear el XSLT, y para eso yo aún no estoy capacitado para enseñar, pero hay muchos manuales excelentes para ir aprendiendo, como por ejemplo este de w3schools.

De todas formas, desde aquí podeis ver mi archivo .xsl por si quereis echarle un vistazo y ver cómo lo he hecho, (o bien ayudarme a mejorarlo, cosa que os agradecería mucho).

Gracias a XSLT he conseguido crear un aspecto practicamente idéntico al blog para mi feed Atom sin perder ni un ápice de la funcionalidad del mismo. Además, he podido usar el mismo CSS del blog para darle estilos al XHTML generado por el XSLT del feed, con lo que me he ahorrado trabajo.

Ahora el próximo trabajo es hacer lo mismo pero con el feed RSS para transformarlo a RSS 2.0 y aplicarle estilos con CSS y XSLT.

Actualización 29/10/2005 20:47 CET

Después de unos días de inactividad, me he puesto a averiguar por qué fallaba el XSLT que preparé para mi feed Atom 1.0 en navegadores como Internet Explorer.

He usado la directiva xsl:output para solucionarlo, y por las pruebas que he hecho en el PC de mis hermanos, (usan Windows, sí...), parece que todo va correcto.

Podeis ver el atom.xsl con los cambios por si os interesa.

Revisando documentación para una pequeña idea que tengo en mente, me topé con este fantástico documento introductorio sobre la tecnología Atom. Y aprovechando la ocasión, voy a hacer una "traducción libre" para que podais disponer de ella como gusteis, pero recordad que el texto original es de la AtomEnabled Alliance y que esto es sólo una traducción libre.

¿Que es Atom?

Atom es el nombre de un formato de sindicacion para contenidos y metadatos basado en XML, además de un protocolo para la publicación y edición de recursos Web en sitios que se actualizan con frecuencia.

Todos los feeds Atom deben ser documentos XML bien formados, y se han de identificar con el media type application/atom+xml

Consideraciones generales:

• Todos los elementos descritos en este documento deben estar en el namespace http://www.w3.org/2005/Atom
• Todas las fechas en Atom deben corresponderse al RFC 3339
• A no ser que se especifique lo contrario, todos los valores deben estar en texto plano, (p. ej., nada de texto HTML codificado con entidades)
• xml:lang puede usarse para identificar el lenguaje de cualquiero texto legible para las personas
• xml:base puede usarse para controlar cómo se resuelven las URI relativas

Feed Atom de ejemplo

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">

  <title>Example Feed</title>
  <link href="http://example.org/"/>

  <updated>2003-12-13T18:30:02Z</updated>
  <author>
    <name>John Doe</name>
  </author>
  <id>urn:uuid:60a76c80-d399-11d9-b93C-0003939e0af6</id>

  <entry>
    <title>Atom-Powered Robots Run Amok</title>
    <link href="http://example.org/2003/12/13/atom03"/>
    <id>urn:uuid:1225c695-cfb8-4ebb-aaaa-80da344efa6a</id>

    <updated>2003-12-13T18:30:02Z</updated>
    <summary>Some text.</summary>
  </entry>

</feed>

Elementos de <feed>

Un feed está formado por algunos metadatos seguidos por una serie de entradas.

Elementos requeridos en <feed>

Aquí tenemos una lista de los elementos obligatorios en un feed, cada uno con una pequeña explicación y un ejemplo.

id

Identifica al feed usando una única y permantente URI.

<id>http://example.com/</id>

title

Contiene el título del feed, (en un formato legible para las personas). Normalmente es el mismo que el del sitio Web al que está asociado el feed. Esta valor no puede estar en blanco.

<title>Example, Inc.</title>

updated

Indica la última vez que el feed fué modificado de alguna forma significativa.

<updated>2003-12-13T18:30:02Z</updated>

Elementos recomendados dentro de <feed>

Atom tiene una serie de elementos recomendados que deberías tener en cuenta. Estos elementos son:

author

El nombre del autor del feed. Un feed puede tener diversos autores, y por tanto diversos elementos author, pero como mínimo ha de tener uno, a no ser que todos los elementos entry tengan al menos un elemento author.

<author>
  <name>John Doe</name>
  <email>JohnDoe@example.com</email>
  <uri>http://example.com/~johndoe</uri>
</author>

link

Identifica una página Web relativa al feed. El tipo de relación viene definido por el atributo rel. Un feed está limitado a un elemento link con un rel con valor alternate por type y hreflang. Un feed debería tener un enlace referenciandose a si mismo. Ejemplo:

<link rel="self" href="/feed" />

Elementos opcionales dentro de <feed>

Aquí hay una lista de elementos opcionales que pueden estar en <feed>:

category

Especifica una categoría a la que el feed pertenece. Un feed puede pertenecer a diversas categorías, por lo que puede tener diversos elementos category.

<category term="sports"/>

contributor

Especifica un colaborador en la creción del feed. Un feed puede tener más de un elemento contributor.

<contributor>
  <name>Jane Doe</name>
</contributor>

generator

Identifica el software usado para generar el feed. Esta información se usa para operaciones de debugging por ejemplo. Tanto el atributo uri como el atributo version son opcionales.

<generator uri="/myblog.php" version="1.0">
  Example Toolkit
</generator>

icon

Identifica una imagen pequeña que da una información visual icónica del feed. Los iconos han de ser cuadrados.

<icon>/icon.jpg</icon>

logo

Identifica una imagen mayor que ofrece una identificación visual para el feed. Las imágenes deberían ser el doble de anchas que de largas.

<logo>/logo.jpg</logo>

rights

Especifica información sobre los derechos del feed, como por ejemplo el copyright.

<rights> © 2005 John Doe </rights>

subtitle

Contiene una descripción o un subtítulo para el feed. Debe estar escrita en un formato entendible por personas.

<subtitle>all your examples are belong to us</subtitle>

Elementos en <entry>

Un ejemplo de "entrada" sería un post en un weblog.

Elementos requeridos en <entry>

Aquí hay una lista de los elementos requeridos dentro del elemento entry, junto con una breve descripción y un ejemplo.

id

Identifica la entrada usando una URI permanente y universal. Dos entradas pueden tener el mismo id si ambas representan a la misma entrada en diferentes momentos.

<id>http://example.com/blog/1234</id>

title

Contiene un título para la entrada en formato legible por personas. Este valor no puede quedar en blanco.

<title>Atom-Powered Robots Run Amok</title>

updated

Indica la última vez que la entrada fué modificada de manera significativa. Este valor no necesita ser cambiado después de una modificación pequeña, como por ejemplo una corrección ortográfica. Como norma general, cada entrada tendrá un valor distinto en este elemento.

<updated>2003-12-13T18:30:02-05:00</updated>

Elementos recomendados en <entry>

Atom tiene una serie de recomendaciones para el elemento entry que deberías tener en cuenta:

author

Nombra un autor de la entrada. Una entrada puede tener diversos autores, y debe contener al menos un elemento author a no ser que exista, como mínimo, un elemento author para el elemento feed.

<author>
  <name>John Doe</name>
</author>

content

Contiene o enlaza al contenido de la entrada. El elemento content es obligatorio si no hay un elemento link alternativo, y debería ofrecerse si no hay un elemento summary.

<content>complete story here</content>

link

Especifica una página Web relacionada con la entrada. El tipo de la relación viene definida por el atributo rel. Una entrada sólo puede tener un enlace con el atributo rel con valor alternate por type y hreflang. Además, una entrada debe contener un link con un rel con valor alternate si no contiene un elemento content.

<link rel="alternate" href="/blog/1234"/>

summary

Contiene un pequeño resumen o parte del comienzo de una entrada. El elemento summary debería ofrecerse si no hay un elemento content para la entrada, o si el contenido de content está especificado en linea, (p. ej., a través del atributo src), o si el contenido está codificado como base64.

<summary>Some text.</summary>

Elementos opcionales en <entry>

Aquí hay una lista de elementos opcionales dentro del elemento <entry>

category

Especifica una categoría a la que pertenece la entrada. Una entrada puede tener más de una categoría, por lo que el elemento entry puede contener más de un elemento category

<category term="technology"/>

contributor

Nombra un colaborador que haya participado en la creación de la entrada. Una entrada puede tener más de un colaborador.

<contributor>
  <name>Jane Doe</name>
</contributor>

published

Contiene la fecha de publicación de la entrada

<published>2003-12-13T09:17:51-08:00</published>

source

Si una entrada se ha copiado de un feed a otro, entonces los metadatos del feed original, (todos los elementos hijos del elemento feed que no sean elementos entry), deberían conservarse si el feed de origen contiene alguno de los elementos author, contributors, rights o category y esos elementos no están presentes en el elemento entry de orígen.

<source>
  <id>http://example.org/</id>
  <title>Fourty-Two</title>
  <updated>2003-12-13T18:30:02Z</updated>
  <rights>© 2005 Example, Inc.</rights>
</source>

rights

Contiene información sobre los derechos sobre la entrada, (p. ej., el copyright).

<rights type="html"> © 2005 John Doe </rights>

Construcciones comunes

Categoría

El elemento category tiene un atributo obligatorio, term, y dos atributos opcionales, scheme y label.

• term identifica la categoría
• scheme identifica el esquema de categorización mediante una URI
• label da a la categoría un nombre legible por personas

Contenido

El elemento content contiene o bien un enlace al contenido de la entrada, o bien el contenido en si mismo.

En la mayoría de los casos, el atributo type tiene como valor text, html o xhtml, e indica el formato del texto que contiene.

Por otro lado, si el atributo src está presente, éste identifica una URI donde se puede encontrar el contenido. En este casi, si el atributo type está presente, indica el media type del contenido.

Si el atributo type termina con +xml o /xml, entonces un documento xml del tipo definido está contenido en linea.

Si el atributo type empieza con text, entonces significa que un documento en linea sin marcar está contenido en el elemento.

Enlace

El elemento link tiene un atributo requerido, href, y cinco atributos opcionales: rel, type, hreflang, title y length.

href contiene una URI para el recurso especificado, (normalmente una página Web).

rel contiene el tipo de relación del enlace. Puede ser una URI completa o uno de los siguientes valores predefinidos, (el valor por defecto es alternate):

• alternate: especifica que el enlace es una representación alternativa de la entrada o del feed, por ejemplo un permalink o una versión HTML de la entrada, o bien la página principal de un blog.
• enclosure: un recurso asociado que es demasiado grande en tamaño y que puede requerir un tratamiento especial, como por ejemplo una grabación de audio o de video.
• related: un documento relacionado con la entrada o el feed
• self: el feed en si mismo
• via: la fuente de información que ha propiciado la entrada

type indica el media type del recurso.

hreflang indica el lenguaje del recurso referenciado.

title indica un texto informativo en formato legible por personas sobre el enlace, normalmente se usa como nombre para el enlace.

length indica el tamaño del recurso, en bytes.

Persona

author y contributor describen una persona, corporación o entidad similar. Tiene un elemento obligatorio, name, y dos opcionales, uri y email.

name especifica un nombre para la persona en formato legible para usuarios no-máquinas.

uri contiene la página principal de la persona, (normalmente su página personal, blog o similar).

email contiene la dirección de correo electrónico de la persona.

Texto

title, summary, content y rights contienen texto legible por personas, normalmente en pequeñas cantidades. El atributo type determina la forma en la que esta información está codificada, (el valor por defecto es text):

Si type="text", entonces el elemento contiene texto plano sin código HTML escapado.

<title type="text">AT&amp;T bought by SBC!</title>

Si type="html", entonces el elemento contiene caracteres HTML escapados.

<title type="html">
  AT&amp;amp;T bought &lt;b&gt;by SBC&lt;/b&gt;!
</title>

Si type="xhtml", entonces el elemento contiene XHTML en linea, englobado en un elemento div.

<title type="xhtml">
  <div xmlns="http://www.w3.org/1999/xhtml">
    AT&amp;T bought <b>by SBC</b>!
  </div>
</title>

Volvemos a recomendar algo de Vivaldi, y de nuevo de Las Cuatro Estaciones, salvo que esta vez la pieza es del Verano, el tercer movimiento, (Presto) (OGG, 2939 KB).

Como todas las demás esta versión está interpretada por John Harrison con los músicos de cámara de la Wichita State University.

Como ya ha hecho otra mucha gente, voy a dar mi opinión sobre Google Reader, el nuevo agregador de archivos de sindicación que sacaron ayer a la luz los chicos de Google.

Se especuló mucho con el hecho de que cuando Google sacara un lector de feeds, herramientas como Bloglines, (o incluso Feedness), se verían barridas del mapa. Pero lo cierto es que si los de Google no mejoran mucho su Google Reader, no se van a llevar el gato al agua.

Me parece una aplicación muy pobre, poco probada, con una interfaz muy pesada, (sí, es AJAX, muy bonita y todo lo que querais, pero no me gusta nada). Anoche, para empezar a probarlo intenté importar mi fichero OPML, y hasta la cuarta no lo conseguí. En la primera media hora vi el cuadrito con el mensaje de error al menos tres veces, me costó aclararme con al manejo, etc.

Entiendo que todavía es una versión de prueba, y que cuando corrijan los fallos y añadan más y mejores funcionalidades, la cosa cambiará un poco. Pero creo que por ahora voy a seguir con mi lector de feeds habitual, Google Reader no me da lo que necesito.

Hace unas semanas estrenaron en Estados Unidos la segunda temporada de la serie Perdidos, (Lost), que tuvo un éxito tremendo en su primera temporada, llevandose el Emmy a la mejor serie dramática de 2005.

Yo, por mi parte, he podido ver los tres primeros capítulos de esta nueva temporada, (todos los que han estrenado hasta la fecha), y no puedo más que quitarme el sombrero ante los guionistas. Durante todos los capítulos que he visto, tanto de la primera como de la segunda temporada, me han tenido literalmente pegado al sillón, mordiendome las uñas por saber qué iba a pasar.

Aprovecho también la ocasión para recomendaros dos páginas muy buenas en español sobre todo lo relacionado con la serie:

• Lost Foro
• Lostzilla.net

Por cierto, no escribais spoilers en los comentarios, ¡gracias!

Inauguro una nueva sección en este blog: Cocina. En esta categoría voy a ir escribiendo más que nada recetas, aunque también escribiré algún artículo sobre algun producto, por ejemplo sobre el té, del que soy un gran aficionado. También quiero aprovechar la ocasión para pedir que vuelvan a emitir en Canal Cocina el genial programa Maestro en Vivo, donde Ariel Rodríguez Palacios nos hacia pasar unos momentos realmente divertidos mientras nos enseñaba a cocinar.

Pasta carbonara

Ingredientes:

• Pasta: en este caso spaghetti
• Cebolla
• Panceta de cerdo
• Nata para cocinar
• Sal, pimienta negra molida, laurel, aceite y agua.
• Opcional: Queso parmesano en polvo, champiñones.

Preparación:

1. Ponemos a cocer los spaghetti en abundante agua con sal, un chorrito de aceite y una hoja de laurel, (la cantidad de spaghetti depende de la persona, yo suelo usar el siguiente método: pongo mis dedos pulgar e índice haciendo el signo de "ok", y los spaghetti que quepan en ese agujero es la ración para una persona).
2. Mientras cuecen los spaghetti, preparamos la salsa. Ponemos un poco de aceite de oliva en una sartén, (o manteca, según el gusto), y echamos la cebolla picada, a fuego medio para que se vaya ablandando poco a poco.
3. Cuando la cebolla está blandita, echamos la panceta cortada en trocitos y subimos el fuego para freirla bien.
4. Si se le quiere añadir champiñones al plato, ahora es el momento. Se echan en la sartén para que se cocinen junto con la cebolla y la panceta.
5. Cuando todo esté casi cocinado, añadimos a la sartén la nata y bajamos el fuego, removiendo bien para mezclar todos los ingredientes. Le podemos echar ahora una pizca de sal y la pimienta, (a mí me gusta echarle una buena cantidad de pimienta). También podemos echar ahora un poco de queso parmesano en polvo si queremos.
6. Si mientras preparamos esto los spaghetti están cocinados, los sacamos y los escurrimos muy bien.
7. Para montar el plato sólo tenemos que servir la cantidad de spaghetti que queramos, y cubrirlos con la salsa. Podemos echarle un poco más de queso por encima y adornarlo con una ramita de algo verde, para que quede bonito.