La situación ha cambiado radicalmente desde que los buscadores más importantes presentaron schema.org, para recomendar y alentar el uso de formatos enriquecidos. Incluso su utilización condiciona la visualización de los resultados de búsqueda sobretodo para búsquedas relacionadas con opiniones, eventos, recetas y otros tantos.

Quizá los microformatos sea considerados por muchos como el método más sencillo para semantizar textos, por ello hemos percibido un aumento de su utilización. Esto hace aún más necesario recordar sus ventajas, sus inconvenientes y dar algunos consejos para que tendrémos que tener en cuenta cuando los utilicemos.

Recordamos que los microformatos son trozos de código HTML que utilizan clases, normalmente en etiquetas div y span, para enriquecer y semantizar contenido. De esta manera mediante un marcado estandarizado, lograremos crear contenidos rico semánticamente para que las máquinas puedan entenderlo. La página oficial de los microformatos es: microformats.org

Ventajas

• Son fáciles de utilizar y tienen una amplia implementación.
• Son una de las mejores soluciones para adoptar de forma completa el desarrollo según estándares y marcado semántico.
• Tienen una gran modularidad, además su simplicidad aumenta la probabilidad de que el software aproveche su presencia en las páginas web.
• Tienen aplicación inmediata y solucionan problemas concretos.
• Permiten la adaptación a XHTML de RDFs existentes.
• Cualquiera puede proponer un microformato y someterlo a la revisión de la comunidad de modo que siempre se impondrán los más útiles.
• Para adoptarlos no es necesario realizar grandes modificaciones a nuestras páginas, tan solo hay que agregar nuevos atributos a las etiquetas ya existentes.
• No es necesario contar con ninguna herramienta especializada para utilizarlos.
• Siguiendo la idea ya introducida por Yahoo! Search Monkey, actualmente Google muestra resultados enriquecidos basados en microformatos, mostrando algunos resultados con información ampliada.

Desventajas

• Microformas.org es una iniciativa “independiente”, adoptada por muchos desarrolladores, pero no forma parte de la propuesta W3C para Web Semántica.
• Tienen un vocabulario reducido.
• Existen muchos microformatos “moribundos” que puedes estar utilizando sin saberlo.
• Al ser un vocabulario aprobado por la comunidad, no puede ser modificado de manera anónima por desarrolladores independientes.
• Su aplicación todavía es muy genérica y acotada a casos muy concretos.
• Quizás algunas nomenclaturas no sean lo suficientemente descriptivas, lo que podría provocar confusiones y errores en algunos programadores no familiarizados con su utilización.

Consejos

• Es importante utilizar los microformatos con sentido común, tenemos que entender que todavía se ajustan a casos muy concretos. Debemos usarlos cuando sean realmente necesarios.
• El contenido oculto mediante hoja de estilo o JavaScript, no será mostrado por el buscador.
• Cuando utilices el microformato de críticas (hReview), las puntuaciones que debemos pasar al microformato deben de ir de 1(Mala) a 5 (Muy Buena). El sistema de puntuación de tu página se deberá ajustar a ese criterio.
• Estate siempre atento a schema.org, porque cada vez se van adoptando más y más convenciones de marcado semántico.
• Google ha puesto a disposición de los desarrolladores la Rich Snippets Testing Tool donde podremos testear nuestros fragmentos enriquecidos y nos mostrarán el aspecto que estos tendrán en los SERPs.
• Algunos de los microformatos más utilizados como el hCard o hproduct, todavía no generan una vista especial en los Resultados de Google.

Actualmente la información semántica puede aparecer en la web de las siguientes formas:

• Ficheros RDF
• Meta etiquetas
• Utilizando vínculos relacionales
• Etiquetas HTML semánticas
• Microformatos
• Microdatos

Dejando de lado algunas etiquetas muy concretas HTML4 y el uso de metadatos en la cabecera de los documentos HTML, el primer paso firme para la adopción de textos enriquecidos fueron los eRDF (estándar para XHTML 1.0) y los RDFa (para XHTML1.1). Estas semánticas las explicaremos con más detalle en este artículo.

Texto enriquecido mediante RDF (Resource Description Framework)

Se trata de es un framework para metadatos recomendado por la W3C en 1999. Bajo una sintaxis XML, está pensado para dar semántica a la información y generar metadatos sobre dicha información. Esto permite que los datos puedan ser integrados y reutilizados.

RDF constituye una tecnología fundamental dentro de la Web Semántica, cuyo funcionamiento se resume en una conversión de recursos de la Web en expresiones compuestas que se estructuran en tres partes:

• Lo que se describe.
• La propiedad del recurso que se desea definir.
• El valor de la propiedad con el que se define la relación.

Ejemplo de RDF

La frase: “La semántica y la web 3.0 – Parte 1, está escrito por Jorge López en el blog círculo de maquetadores”, se representa en RDF de esta manera:

<rdf:RDF>
  <rdf:Description about="http://www.circulodemaquetadores.com/semantica-RDF-RDFa">
  <s:Creator>Jorge López</s:Creator>
  <dc:title> La semántica y la web 3.0 - Parte 1</dc:title>
  <dc:publisher>Cículo de maquetadores</dc:publisher>
  </rdf:Description>
</rdf:RDF>

El resto de información y gramáticas formales sobre RDF la podrás encontrar en la correspondiente especificación de la W3C.

RDFa (Resource Description Framework-in-attributes)

Se trata de extensiones específicas de XHTML 1.1, (a la espera de su implementación en HTML 5) propuestas por W3C. Este método enriquece los textos a través de los atributos y anotaciones de las etiquetas XHTML invisibles para el usuario. Se validan mediante la DTD – Document Type Definition- XHTML1.1+RDFa. Aunque todo esto parezca muy complicado, en realidad de lo que se trata de extender el manejo de los atributos “rel”, “content” y “property“.

Para estandarizar su uso utilizaremos diccionarios predefinidos como Dublin Core. Para indicar en RDFa que estamos utilizando un diccionario, lo haremos de la siguiente manera:

<body>
  <div class="articulo">
    <h2> Como semantizar textos - Parte 1 </h2>
    <p>Texto del artículo.</p>
    <p>Autor: <span property="dc:author" content="Jorge lópez"> Jorge lópez </span></p>
    <p>Fecha: <span property="dc:date" content="2011-12-14">14 de diciembre de 2011</span></p>
  </div>
</body>

En el diccionario Dublin Core vienen especificados los términos author y date. Para buscar otros términos solo tendremos que buscarlos en el diccionario.

Como vemos la ventaja de RDFa es que sus reglas son genéricas, lo que facilitará la labor de muchos autores. Las páginas que no contienen RDFa se visualizan igual que las que tienen, ya que de lo que se trata es de aportar riqueza semántica a la información, no de cambiar ni el contenido ni de la disposición de los elementos.

Nuevamente, la mejor manera de completar la información sobre RDFa es hacer referencia al borrador de trabajo sobre RDFa de la W3C. El blog para webmasters de google también recomienda utilizar marcado RDFa para mejorar los resultados y además proporciona algunos ejemplos.

eRDF (Embedded RDF)

El formato eRDF fue creado en 2005 por Ian Davis inspirado por los microformatos. Se trata de una sintaxis para extraer la información del documento ya sea por medio de un Parser o una Hoja de estilos XSLT. eRDF solo está parcialmente apoyado por la W3C.

Para que un documento HTML le sea reconocido la existencia de eRDF se debe declarar la adhesión a un perfil especial. Esto se logra sumando el atributo profile en el head del documento:

<head profile="http://purl.org/NET/erdf/profile">

Toda la información sobre eRDF en el blog de Ian Davis.

Repasemos algunos atributos básicos de los enlaces. Como veremos, algunos de ellos ya aportan información extra sobre el contenido enlazado:

Definiciones de atributos

• href: Especifica la localización de un recurso de la Web. La ruta generada podrá ser absoluta o relativa respecto a la web.
• hreflang: Ester atributo sólo puede utilizarse junto con href, porque especifica el idioma del recurso enlazado.
• title: Añade información sobre un vínculo. Esta información puede ser utilizada de manera opcional por los agentes de usuario o dependiendo de la versión de navegador, puede ser representada mediante un tool-tip.
• name: Asigna un nombre a un enlace de modo que éste pueda actuar como destino de otro vínculo a modo de ancla.
• type: Especifica qué tipo de contenido es el contenido enlazado con href. Por ejemplo, podemos especificar que lo que enlazamos es un documento PDF. Si es un tipo de contenido no soportado por los agentes de usuario, pueden optar por no mostrarlo. En este artículo repasamos algunos de los tipos de contenido registrados.
• charset: Este atributo especifica la codificación de caracteres de la página o recurso enlazado con el atributo href.

Para enriquecer semánticamente los enlaces, los atributos más interesantes y puede que más útiles son rev y rel. Ahora veremos su función y sus valores.

Atributos rev y rel

• rel: Permite definir la relación entre la página actual y la enlazada.
• rev: Define la relación que tendrá la página enlazada con la actual.

Valores de los atributos de rev y rel

• alternate: Indica que es una versión alternativa al documento actual. Cuando se utiliza conjuntamente con el atributo “hreflang”, significa que enlaza a una versión traducida del documento. Si es utilizada con el atributo “media”, implica que esa versión está preparada para un medio diferente (como una impresora)
• stylesheet: Indica que se ha enlazado una hoja de estilos externa. Se puede utilizar junto con “Alternate” para ofrecer hojas de estilo alternativas seleccionables por el usuario.
• start: Indica a los motores de búsqueda que el documento actual es considerado por el autor como el punto de inicio de un conjunto de documentos. Por ejemplo la primera página de una paginación o el primer capítulo de un manual…etc.
• next – prev: Indica que es el documento que enlazados es anterior o siguiente al actual dentro de una secuencia lógica de documentos. En una paginación estos valores pueden sernos muy útiles.
• index: Es el documento que hace la función de índice en una secuencia de documentos.
• copyright: Se refiere al aviso de copyright del documento actual.
• help: Se refiere a un documento que ofrece ayuda (más información, vínculos a otros recursos informativos, etc.)

La especificación oficial de HTML define la lista completa de tipos de relaciones que se pueden utilizar.

Como microformatos

Se han creado varios microformatos para ser utilizados como valor de estos atributos. Algunos de estos microformatos son tan útiles y se han hecho tan populares que incluso han sido recomendados por google para no ser penalizados, a continuación veremos unos pocas aplicaciones:

• nofollow: Sin duda es el más popular de todos. Fue propuesto por algunos buscadores para indicar qué enlace no debe ser considerado por los algoritmos de posicionamiento y de este modo para luchar más eficazmente contra los spammers. Su aplicación más común, es para aplicarlo a respuestas y comentarios en blogs. Enlace a documentación.
• license: Indicar el tipo de licencia que tiene el contenido. Lo podemos utilizar para indicar que el destino del enlace es la licencia del contenido de la página actual. Enlace a documentación
• tag: sirve para agregar etiquetas en los post de los blogs. Así podrá categorizar nuestras webs mediante la adopción de este tipo de etiquetas. Enlace a documentación

Existen dos estrategias para afrontar este reto: la degradación elegante (graceful degradation) y la mejora progresiva (progressive enhancement).

Estas dos filosofías de desarrollo coinciden en varios puntos:

• Un sitio web debe funcionar correctamente ante la multiplicidad de navegadores y dispositivos.
• Hay que separar en varias capas el contenido, la presentación y la funcionalidad de los proyectos.
• Lo más importante es el marcado semántico y la extensión de los estándares web.

En el fondo tienen un enfoque radicalmente distinto. La clave está en el afecto que tienen estos puntos en el flujo de trabajo.

Degradación elegante

La degradación elegante es un concepto importado de la ingeniería desarrollado por el psicólogo David Courtenay Marr. La traslación al diseño web viene a significar que un sitio debe funcionar y visualizarse de forma básicamente parecida independientemente del navegador o dispositivo utilizado. Paliando en la medida de lo posible el empobrecimiento de un diseño que se producirá por las limitaciones técnicas de los navegadores más anticuados.

En la práctica esta técnica se reduce a utilizar sólo aquellas características que sean soportadas correctamente por navegadores obsoletos o muy limitados técnicamente como Internet Explorer 6 o 7. Esto relega a otras tecnologías más avanzadas, como CSS3 a un indefinido futuro en el que serán ampliamente soportadas por la mayoría de los navegadores y dando lugar a anacronismos como que sigan utilizándose navegadores de más de diez años de antigüedad. Al fin y al cabo ¿para que los usuarios se van a actualizar de navegador, si las páginas no van a ofrecer una mejora visual de un navegador a otro?

Asegurar que nuestras webs se vean igual en navegadores de dos, tres y hasta cuatro generaciones de antigüedad, no resuelve el problema de cómo implementar nuevos estándares y tecnologías sin que la experiencia de usuario se vea mermada.

La técnica de la degradación elegante conlleva un tiempo extra de optimización para cada navegador (Cross-browser). Como es de suponer, es necesario albergar un sólido conocimiento de cada navegador y tener todo un catálogo de soluciones para contrarrestar las posibles limitaciones que nos vallamos encontrando. Las enormes dificultades para poder comprobar nuestras páginas en los cada vez más numerosos y variados dispositivos y navegadores están provocando que algunos maquetadores adopten la solución más radical posible, proponer al usuario que simplemente se descargue la última versión del navegador.

Como desarrolladores web no tenemos derecho a decidir por los usuarios que navegador deben utilizar, sobretodo porque muchos de ellos quizá no tengan ni el control, ni las capacidades, ni el software necesario para soportar estas últimas versiones. Lo que sí que podemos hacer es adoptar otras filosofías de desarrollo.

Mejora progresiva

El concepto de mejora progresiva fue acuñado por Steven Champeon, en su conferencia Inclusive Web Design for the Future en 2003.

Esta filosofía implica que los sitios web dispondrán de las características más avanzadas a medida que el navegador que las ejecuta sea más avanzado. Esto permite aprovechar todas las posibilidades CSS sin perjudicar a los navegadores obsoletos o limitados. De este modo se premia al usuario por la utilización de un navegador más moderno, y los usuarios desactualizados no tendrán quebranto alguno al acceder al contenido de una web.

Si suponemos que los navegadores más anticuados tienden a desaparecer a medida que los usuarios los van actualizando, es lógico ir introduciendo tecnologías más modernas para que nuestros desarrollos estén mejor preparados para soportar los estándares del futuro. ¿Tanto daño hace que unos usuarios vean los bordes redondeados y otros los vean cuadrados?

Para encarar la mejora progresiva de un proyecto propongo que la maquetación web se realice siguiendo los siguientes puntos:

• La maquetación debe permitir el correcto acceso a la información de una página, independientemente del tipo de navegador o dispositivo utilizado por el usuario.
• Utiliza aquellas características que aunque sólo los navegadores modernos puedan visualizar, los navegadores antiguos puedan ofrecer una alternativa viable (esta es una manera conservadora de afrontar este paradigma).

Algunos ejemplos de mejora progresiva pueden ser:

• La utilización de una API de tipografías (como Google) para aquellos navegadores que pueden soportarlas.
• Propiedades CSS3 como text-shadow, border-radius o Gradient para los navegadores habilitados.
• Animaciones y fotografías en formato SVG.
• Fotografías en formato PNG con transparencia.

De este modo, los desarrolladores nos dotaremos de una base para la experimentación y la innovación respetando los estándares y el diseño universal sin excluir a ningún usuario. Eso es lo que a mi modo de ver, hace a la mejora progresiva un paradigma más acertado y ajustado al cambiante mundo del desarrollo web. Es por eso que en Yahoo lo adoptaron rápidamente y lo han utilizado para crear su estrategia de soporte de navegador gradual.

Mas información:

• Progressive enhancements or graceful degradation. Which are you?
• On CSS3: “Graceful Degradation” or “Progressive Enhancement”
• Understanding Progressive Enhancement
• On CSS3: ‘Graceful Degradation’ or ‘Progressive Enhancement’

Caracteres especiales y casos problemáticos

• Los caracteres reservados que utiliza HTML para definir sus etiquetas, no se codificarán correctamente.
• Los símbolos acentuados o especiales de una región, (como tildes, la eñe, la ç, signos raros), letras de otros idiomas… etc, les pasará lo mismo.
• Si el servidor web que sirve las páginas y el navegador del usuario no tienen la misma codificación.
• Si por limitaciones técnicas o por decisiones de los programadores, los textos pasan de una codificación a otra.
• Si se produce algunos cambios de codificación sin realizar una conversión correcta.

En todos estos casos, los desarolladores tenemos varias herramientas que podremos utilizar para que se visualicen nuestras páginas correctamente: los Charsets y las entidades.

Los charset

Un charset es una regla o un método para convertir una secuencia de bytes en una secuencia de caracteres. Existen varios charset :

• UTF-8: Es el más extendido y el adoptado por defecto en XHTML y XML. Tiene la ventaja de que es capaz de codificar casi cualquier carácter, ya que usa el estándar unicode. La codificación Unicode, es una gran tabla, que asigna un código a la mayoría de los símbolos de los alfabetos y más de un millar de símbolos especiales. Por lo que utilizar está codificación, puede favorecer la internacionalización de tu página.
• ISO-8859-1. Es una norma de la ISO. Usa la codificación ASCII más 128 caracteres. Tiene codificado todo el alfabeto latino, por lo que puede tratarse de la codificación que más se acomoda para los hispanoparlantes.

El Charset de codificación de una página se especifica en una etiqueta meta en el área de encabezado del documento.

.

• El atributo content define este documento como un archivo basado en texto que se debe mostrar en el explorador como HTML.
• El valor charset declara la codificación de caracteres. En el ejemplo anterior, el valor charset es iso-8859-1

La W3C recomienda que todas las páginas HTML y XHTML incluyan una etiqueta meta content-type

Las entidades de codificación

Otra solución para asegurar que todos estos caracteres problemáticos se visualicen correctamente es utilizar entidades. Las entidades son unas expresiones HTML, que representan y sustituyen cada carácter. Estos son los más comunes:

Pongamos como ejemplo el siguiente texto:

El  carácter ñ puede dar problemas en los documentos HTML

Para mostrar correctamente el texto anterior en una página HTML, se debe sustituir cada carácter especial por su entidad HTML:

El  carácter ñ puede dar problemas en los documentos HTML

En la Wikipedia se puede consultar la lista completa de entidades HTML.

Algunos ejemplos

Imagínate que te encuentras con el siguiente código:

.f18 {
        background: #fff;
        border: 1px solid #ff0;
        font-weight: bold;
        padding: 10px;
}
.izquierda {
        border: 1px solid #ff0;
        float:left
}

Si nos encontramos con un código como este, seguramente perderemos mucho tiempo tratando de localizar estas clases e intentando averiguar cual es su función. Cuando nos enfrentemos a un rediseño, es muy posible que un elemento como class=”izquierda” termine arriba, abajo o a la derecha y por tanto ese nombre de clase no tenga ninguna relación con el nuevo diseño.

Por lo tanto si por class=”izquierda” nos referimos a un menú situado a la izquierda, usemos mejor class=”menu-navegacion”. En cuanto a la clase f18, no tenemos ni la más remota idea de a que hace referencia, por lo que es mejor que el desarrollador nombre a esa clase según la función que cumpla. De este modo esta nomenclatura sería mucho más inteligible:

.MensajeAlerta {
        background: #fff;
        border: 1px solid #ff0;
        font-weight: bold;
        padding: 10px;
}
.menu-navegacion {
        border: 1px solid #ff0;
        float:left
}

Pero más allá del contexto, las convenciones de nomenclatura semántica son útiles para ahorrar tiempo. Por ejemplo, si asigno la clase “Caja-azul” a un cuadro de ayuda en un sitio cuyo color corporativo es azul y la empresa cambia su color corporativo a rojo. Caja-azul no significará nada en este nuevo contexto.

En ese caso no sólo tendrás que actualizar el valor hexadecimal de ese estilo, sino que tendrás que cambiar todas las referencias a ese color. Si hubieras usado en su lugar la clase “llamada” (o algo igualmente significativo), te podrías haber ahorrado mucho trabajo.

Consejos para mejorar la nomenclatura de nuestros css

• El nombre de nuestras clases e identificadores no debe describir una característica visual, como color, tamaño o posición. Tampoco debe describir una función o comportamiento.
• El nombre debe ser específico y claro, para que otras personas puedan entender su significado.
• Si después de todo, crees que es imprescindible definir una clase única y exclusivamente para alinear una imagen o un párrafo y llamarla con esa acción, documentalo apropiadamente, para que los otros desarrolladores tengan problemas en el futuro. 
• Separa las palabras mediante guiones o mayúsculas. Por ejemplo menu-superior o menuSuperior.
• En todo caso, es mejor no hacer uso excesivo de clases, porque a menudo es más sencillo utilizar selectores contextuales o una combinación de selectores que no alteren el HTML.

En conclusión

Las clases e identificadores deberían llamarse según la función o contenido que describen y de manera independiente respecto a factores de presentación. De este modo, cuando actualicemos un sitio, no tendremos que preocuparemos en cambiar todos los nombres cada vez que modifiquemos el diseño, sino simplemente cambiar las propiedades que nos hagan falta.

Para seguir investigando

• El blog woorkup.com nos ofrece un muy buen artículo (en ingles), que nos enseña la mejor mejor manera de nombrar las diferentes secciones de nuestros sites.
• stuffandnonsense nos propone una lista (en ingles), con las nomenclaturas más populares.

La intención de este artículo es introducir varias técnicas y metodología que optimizarón la calidad y legibilidad los textos de nuestras webs.

En primer lugar vamos a explicar la diferencia entre un lector de material impreso y un usuario web. Hay que tener en cuenta varias consideraciones:

• La lectura en un monitor es más incómoda que en un texto impreso.
• El usuario es impaciente y voraz , porque tiene a su disposición millones de alternativas a la tuya.

¿Por qué debo adaptar la redacción de mis textos para la web?

• En la web el contenido es lo más importante: recuerda que lo usuarios se mueven buscando información. Si no presentas tu contenido de forma legible y agradable no será leída por mucha gente, por muy buena y útil que esta información sea.
• Atraerás visitas: si tienes buenos contenidos, bien estructurados y fáciles de leer, será más probable que otros usuarios quieran compartirlos mediante enlaces a tu web o en redes sociales.
• Ayudará a mejorar tu posicionamiento: será más fácil para los robots de búsqueda rastrear tu contenido mejorando tu posicionamiento.
• Tu página será más accesible: esta manera de jerarquizar y escribir contenidos, hará que tu página sea más accesible para personas con discapacidad, aumentando tu número potencial de usuarios.

Técnicas y estrategias

Debemos entender que la forma de estructurar los textos en Internet está determinada más por razones funcionales que por simples razones estéticas, literarias o artísticas. Teniendo en cuenta esto, vamos a ver varias técnicas que pueden ayudar a los usuarios a retener mejor nuestros textos

• Estilo de escritura en pirámide invertida : una manera de organizar nuestro contenido es jerarquizándolo de mayor a menor interés, esto es comenzar con las conclusiones. Este estilo es muy eficaz porque nos asegurará que el usuario lea la información más importante cuando abandone nuestro sitio.
• Mensajes clave: siguiendo la filosofía del punto anterior, el mensaje principal que quieras dar debe ser evidente desde el primer párrafo. La claridad y la concisión son fundamentales para redactar nuestros contenidos.
• Separación en trozos: los textos muy largos se deben dividir y agrupar el contenido en partes significativas, con su respectivos títulos descriptivos para mostrarlo en distintas páginas. Cada página se enlazará con el índice principal del artículo.

Como mejorar la legibilidad

En cuanto a la redacción:

• Utiliza frases cortas que expresen una sola idea.
• Lenguaje simple e informal: es más adecuado que el elegante o formal, ya que la lectura es más rápida en el primero.
• Contenidos escaneables: para que puedan ser mejor visualizados, es necesario maquetar nuestros textos con distintos niveles de encabezados que describan el contenido de cada página, usa listas siempre que puedas.
• Jerga: Lo más probable es que el usuario no sepa nada del tema del que habla su web por ello elimine la jerga específica de su contenido, recuerde segundo primer punto de esta lista.
• Texto Abreviado: omite palabras y frases que no aporten contenido relevante.
• Propaganda: los usurarios detestan la publicidad y aprenden pronto a ignorar los mensajes publicitarios, incluso cuando intentan aparecer como información objetiva camuflada en el texto. Además, esta forma de redacción impone a los lectores una carga mental extra, que les obliga a filtrar las exageraciones para llegar a las cuestiones concretas. Esto hace lenta su lectura y finalmente los hace huir del Sitio. El usuario viene a tu sitio en busca de información útil, no de publicidad.
• Verbos expresivos: El uso de un verbo preciso comunica con mayor fuerza lo que usted desea expresar. También elimina redundancias y reduce la longitud del texto. Por ejemplo:
  • Tomar una decisión / decidir
  • Proporcionar apoyo / apoyar
  • Hacer uso de / usar
  • Sirve para explicar / explica
  • Efectuar un examen / examinar
• Juegos de palabras y localismos: no aludas a referencias culturales o bromas de ámbito geográfico limitado. Lo que tu entiendes que puede ser gracioso para alguien de tu región, puede que no sea entendido por los usuarios de otra región distinta o en el peor de los casos, puede que sea ofensivo para ellos.
• Eufemismos: huye de ellos, muchas veces lo políticamente correcto no es más que una forma de esconder la verdad.

En cuanto al diseño:

• Deja espacio alrededor de sus textos.
• Minimiza la anchura de sus párrafos
• Usa colores de alto contraste que diferencien bien el texto del fondo.
• Usa fuentes grandes (preferiblemente 12 puntos) y si es posible sans-serif . Las fuentes pequeñas se deben dejar para el texto que poca gente lee. Por ejemplo, descargo de responsabilidad.
• Utiliza negritas para resaltar las partes más importantes de sus textos. Además será un buen recurso de color para romper la uniformidad del texto. Utilizar la negrita en exceso puede ser contraproducente.
• Es mejor evitar marcar párrafos enteros con cursivas o mayúsculas. No estamos acostumbrados a leer la letra impresa de esa manera.

La mayoría de las veces, se tiende a encerrar el texto de la cita en un párrafo y separarlo con comillas del resto del texto. Esto tiene la desventaja de que los buscadores no interpretarán correctamente nuestro contenido. Sin embargo, HTML nos ofrece varias etiquetas con las que podemos enriquecer semánticamente a nuestro código. ¿Que etiquetas son y cuándo haremos uso de cada una de ellas?

Etiqueta <blockquote>

Sirve para englobar una cita de gran tamaño. El contenido de un blockquote puede incluir elementos de bloque tales como encabezados, listas, párrafos…etc. Puede resaltar la parte más interesante de nuestros textos y de esta manera fijar la atención de los usuarios donde más nos interese que lean.

También puede citar contenido externo. En este caso existe un atributo opcional cite que especifica la procedencia de la cita.

Ejemplo:

<blockquote title="Abre en nueva ventana" lang="en"
cite="http://www.smashingmagazine.com">Smashin magazine</blockquote>

Problemas con los blockquote

Si vas a utilizar blockquote para resaltar contenido de tu texto, va a ver un pequeño problema de accesibilidad. Para nosotros se trata de un texto visualmente destacado, pero para un lector de pantalla simplemente, es un texto duplicado. Por ello es conveniente proporcionar una información extra para los usuarios que se tropiecen con este problema.

Una solución puede ser ofrecer un mensaje oculto por CSS que diga algo así como “Inicio de texto destacado” antes de la cita y “Fin del texto destacado” al finalizar la misma.

Etiqueta <Q>

Se trata de un elemento de línea que sirve para citaciones pequeñas. Los navegadores interpretan esta etiqueta como un entrecomillado.

Ejemplo:

Pablo dijoHola Pero Laura dijo Adiós

Aunque la etiqueta <q> cada vez se utiliza menos, tiene algunas propiedades muy útiles. Por ejemplo, puedes especificar el aspecto de las comillas a través de CSS de la siguiente manera:

/*CSS*/
Q {}
Q { quotes: '»' '«'   }
Q { quotes: '„' '“' }

Debido a algunos problemas con la codificación (sobre todo en Internet Explorer), puede ser útil dar a las comillas valores numéricos. De acuerdo a el web standard puedes incluso especificar el aspecto de las comillas, dependiendo del idioma del navegador del usuario. Este es el ejemplo del W3C:

/*CSS*/
:lang(fr) > Q { quotes: '« ' ' »' }
:lang(de) > Q { quotes: '»'   '«' '\2039' '\203A' }

Etiqueta <cite>

Sirve para marcar al autor de una cita.

Ejemplo:

Y dijo Bob pienso luego existo.

Atributos de las etiquetas

A parte de los atributos ya conocidos como id, class o title recalcaría los dos siguientes que son opcionales y se aplican tanto a <q> como a <blockquote>:

• cite: Contiene la URL origen de la que se ha extraído la cita (En el caso que se trate de un documento online).
• lang: Contiene el código del idioma en el que se encuentra la cita. Por ejemplo: ‘en’, ‘es’, ‘de’,…

En resumen

Por lo tanto, utilizaremos la etiqueta <blockquote> para citas grandes o destacado de texto propio, para citas pequeñas utilizaremos la etiqueta <q> y para referenciar a otras fuentes la etiqueta <cite> es lo más adecuado.

Fuente Smashing magazine

Desde Grupo de Trabajo de Aseguramiento de la Calidad del W3C. Dónde nos enseña un método que es válido para sitios Web de cualquier dimensión; satisfará tus necesidades tanto si gestionas un sitio Web personal, de un pequeño negocio o de una gran corporación.

Este documento nos guíará a través de pasos individuales, cada uno de los cuales serás capaz de completar individualmente, desde el análisis de tu sitio Web actual hasta la organización de tu nuevo sitio Web. Cada uno de estos pasos ha sido diseñado de forma separada, y puede ser emprendido en diferentes ocasiones, diferentes niveles o por diferentes personas, con independencia de su nivel de conocimientos, pero de acuerdo a un flujo de trabajo Ordenados en los siguientes pasos:

• Decide qué es lo que probarás
• Analiza tu sitio Web
• Organiza el trabajo
• ¿Cómo puedes mejorar tu sitio?
• Revisa
• Mantén el nivel de calidad

Este documento o artículo seguramente muchos sepan de estas cosas, pero aquí también nos explica como hacerlo de forma organizada y con detalle, os dejo con un enlace para leer el artículo completo:

Leer artículo completo W3C

Métodos para proporcionar una descripción más larga

Hay varias maneras de proporcionar una descripción más larga para las imágenes. Estas opciones se listan a continuación, en orden de mayor a menor preferencia:

• Proporcionar la descripción larga en el contexto del propio documento.
• Proporcionar un enlace a una descripción más larga a través de un enlace de texto normal.
• Proporcionar un enlace a una descripción más larga a través de la atributo longdesc.

Aquellos que están familiarizados con las técnicas de la accesibilidad puede sorprenderse al encontrar que el atributo longdesc está en la parte final de preferencia de la lista. La razón de esto es que es un método “invisible”. El atributo longdesc es invisible (e inaccesible en algunos navegadores) a personas que no utilizan lectores de pantalla. La forma más sencilla de hacer accesibles las descripciones largas es que sean obvias y al alcance de todos, independientemente si tienen una discapacidad o no.

EN EL CONTEXTO DEL PROPIO DOCUMENTO

Al poner la descripción larga en el contexto del documento donde se encuentra el gráfico se produce, que está siendo visible a todo el mundo, no sólo las personas con discapacidad. Todo el mundo podrá leer la descripción larga y beneficiarse de ella. Aquí os dejo un ejemplo de cómo podría llevarse a cabo con una imagen de un gráfico:

En el ejemplo anterior, los datos aparecen después de la imagen, y es accesible para todos.

UN VÍNCULO DE TEXTO NORMAL

La segunda mejor manera de proporcionar una descripción más larga es simplemente un enlace. Sólo sería añadir un enlace a una página con una descripción más larga, como en el ejemplo siguiente:

La información está disponible a todo el mundo a través de este método, a pesar de que tiene que hacer clic en un vínculo para acceder a ella. El vínculo es evidente para todos. Pueden optar por seguir el enlace o no.

EL ATRIBUTO LONGDESC

El atributo longdesc que se puede añadir a un <img> no hace más que proporcionar un vínculo a una página aparte con una descripción más larga. Funciona de la misma manera que el ejemplo anterior, excepto que el enlace es invisible a los lectores videntes. El siguiente ejemplo vemos la misma gráfica con el atributo longdesc añadido:

Marcado para el atributo longdesc

Seguro que os habéis dado cuenta de que no vemos ningun tipo de texto o indicación cuando usamos el atributo longdesc. Las únicas personas que pueden acceder al atributo longdesc fácilmente son los que utilizan lectores de pantalla modernos. Los lectores de pantalla antiguos no apoyan este atributo. Incluso entre aquellos que utilizan la última versión del lector de pantalla, hay muchos que no están familiarizados con el atributo longdesc (ya que se utiliza con poca frecuencia), y no saben cómo acceder a la descripción a pesar de que su lector de pantalla lo soporta.

Veamos tambíen el longdesc según las pautas de la WCAG 2.0: Ver referencia