El atributo rel describe la relación del presente documento al link (href) o ancla (name) especificado en el atributo href="". El valor de este atributo puede ser más de uno y al igual que las clases, separados por espacio.
Tiempo de una pausa para un pequeño detalle.
Este atributo dentro de un link <a></a> no es utilizado ni reconocido por ningún browser actualmente (por eso seguramente ha sido menospreciado y olvidado por tanto tiempo).
Entonces, ¿para qué seguir gastando nuestro tiempo? Pues rel="" sí es considerado por los buscadores para obtener más información sobre los enlaces, y es muy difundido mediante microformatos.
Los valores de este atributo para HTML 4.01 son (o eran, como quieras verlo):
Para HTML 5 y a través de los microformatos (prácticamente XFN), se ha privilegiado la relación de enlaces a personas más que a documentos o partes de él. Los siguientes son los -hasta ahora- aprobados para HTML 5:
A partir de necesidades específicas de fabricantes de browsers y de tecnologías, se han creado algunos valores que son específicos, como:
Pues como leen, este malhogrado atributo está resucitando y nos permite vincular objetos y documentos con una semántica nunca antes vista. Queda en nosotros utilizarla correctamente y sacarle provecho en nuestros proyectos.
Bien eso era lo primero que quería dejar claro; he visto demasiados <li>, <h1>, incluso <p> clickeables. Ahora, a lo que va este artículo es cómo la semántica se está dejando atrás por la comodidad de escribir eventos mediante JS. Me culpo también por caer en lo mismo, pero me interesa ahora mostrarles la mejor solución que he encontrado al respecto.
Pongámonos en un caso de ejemplo. Supongamos que se agrega una función para ejecutar un slideToggle a un enlace; por lo que he visto generalmente esto se hace de 2 maneras:
<a href="#" id="ejecuta_toggle">Ejecutar slideToggle</a>
Cumples con tener un href funcional (no vacío) pero puede hacer que al hacer click la página haga scroll hasta el inicio dado que tienes un ancla vacío en el href y quizás tengas que dar un return false al final de la función del slideToggle, ó
<a href="javascript:void(0)" id="ejecuta_toggle">Ejecutar slideToggle</a>
Que hace que el browser no ejecute el enlace y no se salga de la misma página.
Enfin, son 2 métodos similares y que cumplen con el objetivo primario de ejecutar algun comportamiento mediante Javascript a través de un hyperlink. Pero nuevamente mi pregunta: ¿Qué sucede con la semántica? ¿Cómo le digo al buscador, indexador, robot que ese <a> no es un enlace realmente? ¿Que lo estoy disfrazando para cumplir con mis objetivos?
Complicada pregunta y simple respuesta. Con esta inquitud espero que puedan ir más allá en sus desarrollos; recuerden que un simple click puede desencadenar muchos más eventos que los que tienen planificado para él, eventos que benefician a sus usuarios mediante indexaciones más precisas.
Entreguen una ancla semántica al hyperlink, pero una ancla sobre sí mismo. Ejemplifico con lo mismo que he estado utilizando:
<a href="#ejecuta_toggle" name="ejecuta_toggle" id="ejecuta_toggle">Ejecutar slideToggle</a>
Con este método conservan la semántica indicando a través del atributo name qué hará ese mismo enlace y al mismo tiempo evitan el movimiento de scroll de la página.
]]>Recapitulando, los microformatos nacieron bajo el alero de ampliar estándares semánticos aplicados a la www. La idea es que los indexadores y buscadores sean más inteligentes y entreguen datos más precisos en cuanto nosotros desarrolladores y profesionales dedicados a la web entreguemos mejor esos datos.
¿Y eso en concreto? Ya estaremos viendo resultados, con el anuncio de Yahoo! de incluir soporte a estándares web semánticos, incluyendo los microformatos en sus búsquedas. Excelente iniciativa.
Comencemos la diversión. Estos son los principales formatos disponibles:
Se usa para representar personas, compañías, organizaciones y lugares, utilizando propiedades vCard y valores en semántico HTML ó XHTML. Ha sido ya implementado en software, por ejemplo, AddressBook de Apple. Es muy común incluir sus vCards en los emails enviados, para tener constante actualización de los datos del destinatario.
En el siguiente ejemplo, verán cómo se construye un hCard, básicamente a base de id‘s y class‘es ya definidas por el estándar:
<div id="hcard-Jorge-Luis-Epuñan-Hernández" class="vcard">
<a class="url fn n" href="http://www.be-studios.com">
<span class="given-name">Jorge</span>
<span class="additional-name">Luis</span>
<span class="family-name">Epuñan Hernández</span>
</a>
<div class="org">Be Studios</div>
<div class="adr">
<span class="locality">Santiago</span>
<span class="country-name">Chile</span>
</div>
</div>
Definido para formatos de eventos calendarizados, basado en el estándar iCalendar y adaptado para su uso en HTML o XHTML, RSS y cualquier XML. Muy útil para tu blog, si quieres publicar algún evento, como un cumpleaños. Así, los spiders de búsqueda u otros agregadores pueden leer ese evento marcado como microformato, convertirlos automáticamente a formato iCalendar y utilizarlo en iCal, software de Apple que ya utiliza este estándar, para dar un ejemplo.
Ejemplo:
<div class="vevent" id="hcalendar-Mi-Cumpleaños">
<a class="url" href="http://www.csslab.cl">
<abbr class="dtstart" title="20080218">February 18th</abbr>,
<abbr class="dtend" title="20080219"> 2008</abbr>
<span class="summary">Mi Cumpleaños</span>
</a>
<div class="description">
Mi cumpleaños número 27. Oh sí, anque tengo muchas canas no soy anciano.
</div>
</div>
Se usa para reseñas de productos, servicios, empresas, eventos, lugares, etc.
Ejemplo en que un ficticio CCazorla hace un review sobre mi persona:
<div class="hreview">
<span class="reviewer">
<span class="fn">CCazorla</span>,
<abbr class="dtreviewed" title="20080325">25 de Marzo de 2008</abbr>
</span>
<a class="person url" href="http://www.csslab.cl"><span class="fn">Jorge Epuñan</span></a>
<div>Rating: <span class="rating">2</span> de 5</div>
<blockquote class="description">
<p>Perfeccionista por naturaleza, siempre busca superarse profesionalmente. Por dentro muy buena persona. Por fuera de personalidad extraña, un tanto psicopata.</p>
</blockquote>
</div>
Se basa en la propiedad ‘geo’ del estándar vCard, y agrega nuevas sub-propiedades para completar. Se tratan de id‘s específicos para coordenadas de latitud y longitud, las que se pueden agregar directamente en la página o XML mediante RSS o Atom, y ser indexadas para luego, por ejemplo, mostrar la ubicación directamente en GMaps.
Ejemplo:
<div class="geo">Araxá:
<span class="latitude">37.0625</span>,
<span class="longitude">-95.677068</span>
</div>
Existen algunos más, como Dublin Core, XFN, FOAF, pero están aún en etapas de definiciones y aprobaciones, lo que hace ver lejana su estandarización. Pero no dejan de ser buenas intenciones para necesidades reales, en contínuo desarrollo.
¿Mi opinión? Son un gran aporte a la web semántica y la catalogación de la información que componen las páginas porque, sobre todo, Internet se compone prioritariamente de información. Sólo faltan ser lanzados definitivamente y dados a conocer, además de ser integrados en los software de desarrollo y gestores de contenido web (CMS). Finalmente ahí podremos ver su real potencial, con la llamada Web 3.0.
Los Microformatos son abiertos para que cualquiera pueda utilizarlos, y permiten información de contacto, relaciones sociales, direcciones, coordenadas, etc.
Un ejemplo práctico. Imagínese que tienes un blog y escribes un artículo sobre un restaurant que visitaste recientemente y te encantó el lugar y la comida. Lo quieres recomendar y escribes tu reseña, para finalmente entregar el nombre del lugar, la dirección y si tiene sitio web probablemente la enlaces. Súper, pero: ¿Qué pasa si además, entregas las coordenadas? Así, a través de geo puede ser integrado con Google Maps y poder mostrar gráficamente el camino de cómo llegar al lugar. Así, un lector de tu blog puede leer tu artículo desde su dispositivo móvil favorito, y llegar al restaurant cómodamente siguiendo el mapa directo desde Google, o guardándolo como favorito para consultarlo después.
Su uso sería de la siguiente forma:
<span class="geo"><span class="latitude">-33.42</span>, <span class="longitude">-70.61</span></span>
Se utilizan class que son leídos y entendidos por otras aplicaciones, ya que son estándares por medio de las especificaciones de hCard de Microformats.
Microformatos permiten que las personas tengan control sobre sus propios datos e informaciones, a través de la estandarización en el marcado HTML. Esto ayuda a que los buscadores indexen y entreguen información cada vez más precisa y correcta, siempre y cuando ésta haya sido bien formatada . Si creías que ya hacías un buen trabajo aplicando semánticamente las etiquetas HTML a tu contenido, con Microformatos te estarías elevando a lo que se especula será la Web 3.0. Es una iniciativa que aún está en desarrollo, pero que ha dado mucho que hablar y que tiene un futuro promisorio.
Como he escrito muchas veces ya a lo largo de este sitio, las tablas son para contener datos tabulados. Sólo para eso, esa información desagradable que suelen acompañar a los gráficos, esos nombres y números que a nadie le gusta. Para eso está <table>, para ordenar esos datos y nada más. Y bueno, ahora que ya tiene su función, aprendamos a utilizarlo bien.
<table>
<tr>
<td>Nombre</td>
<td>Edad</td>
</tr>
<tr>
<td>Tulio</td>
<td>36</td>
</tr>
<tr>
<td>Patana</td>
<td>15</td>
</tr>
</table>
Una simple tabla que contiene valores cualesquiera. Ahora, le daremos sentido a sus etiquetas.
Table Header Cell, una celda de título de una tabla. La utilizamos cuando tenemos el título de una fila o columna, y tiene propiedades por defecto, por ejemplo, su contenido se despliega en bold.
Si la aplicamos a nuestra tabla básica de ejemplo, sería de la siguiente manera:
<table>
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
<tr>
<td>Tulio</td>
<td>36</td>
</tr>
<tr>
<td>Patana</td>
<td>15</td>
</tr>
</table>
Esta etiqueta le da un título a la tabla, como un <legend> lo es para su <fieldset>.
<table>
<caption>Tabla de edades</caption>
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
<tr>
<td>Tulio</td>
<td>36</td>
</tr>
<tr>
<td>Patana</td>
<td>15</td>
</tr>
</table>
Atributo de la etiqueta <table>, especial para lectores de pantalla (no-videntes). Aquí, nos explayamos un poco más que en <caption>, explicando extensamente de qué se trata nuestra tabla.
<table summary="Tabla donde se muestran nombres de personajes de un programa infantil junto con sus edades hipotéticas">
<caption>Tabla de edades</caption>
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
<tr>
<td>Tulio</td>
<td>36</td>
</tr>
<tr>
<td>Patana</td>
<td>15</td>
</tr>
</table>
Filas se pueden agrupar en un encabezado (<thead>), un cuerpo de contenido (<tbody>) y un pie (<tfoot>), pudiendo cada grupo contener una o más filas. Con esto se hace más fácil darle estilos a las secciones de nuestra tabla, así nos ahorramos classes en cada celda. Otra ventaja es en la impresión, si ésta es muy larga en Firefox por ejemplo se imprimirán el encabezado y el pie en cada hoja (independiente si el cuerpo es muy extenso y no cabe en la impresión).
<table summary="Tabla donde se muestras nombres de personajes de un programa infantil junto con sus edades hipotéticas">
<caption>Tabla de edades</caption>
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Bajada</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tulio</td>
<td>36</td>
</tr>
<tr>
<td>Patana</td>
<td>15</td>
</tr>
</tbody>
</table>
Un detalle es que si usan <thead> y <tfoot>, deben ir juntas y consecutivas, antes de <tbody>. Aún así, <tfoot> se mostrará debajo del contenido de <tbody>. Si no lo necesitan, ocúltenlo con su método favorito.
Está de más escribir que bgcolor, height, width, align y nowrap están obsoletos y no son soportados en HTML 4.01. Además, no se recomienda el uso de background dentro del HTML, para esto se utlizan hojas de estilos CSS.