Círculo de Maquetadores » Semántica Web

Como semantizar textos – Parte 1 – (Los formatos RDF)

Jorge López — Tue, 03 Jan 2012 12:53:48 +0000

Cada vez se hace más evidente que aportar textos enriquecidos a nuestras web trae muchas ventajas. Actualmente los robots intentar deducir un dato basándose en el contenido que lo rodea, pero con semántica seremos nosotros quien le digamos a los robots que tipo de información es. Obtendremos así búsquedas más precisas y mejoradas aumentando también la experiencia de usuario, porque las búsquedas en Yahoo y Google mejoran su apariencia con contenidos semantizados.

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:


  
  Jorge López
   La semántica y la web 3.0 - Parte 1
  Cículo de maquetadores

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:


  
     Como semantizar textos - Parte 1 
    Texto del artículo.
    Autor:  Jorge lópez 
    Fecha: 14 de diciembre de 2011

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:

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

La semántica de los enlaces: definiciones de atributo rev y rel

Jorge López — Fri, 09 Dec 2011 13:10:25 +0000

Con la aparición de los microformatos y más recientemente de los microdatos de HTML5, se ha desatado un enorme interés por la semántica. Hay muchas maneras de enriquecer texto para ayudar a los buscadoras a entender e indexar mejor la información que generamos. Un método clásico, pero no muy extendido, para generar metadados es a través de los enlaces.

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

Una mirada sobre la mejora progresiva y la degradación elegante

Jorge López — Tue, 16 Aug 2011 15:00:35 +0000

Si asumimos que una misma página web se puede mostrar de diferentes maneras, se hace evidente un problema: ¿de qué modo podemos mostrar la información de una manera atractiva al margen de los condicionamientos técnicos y los ajustes de preferencias de usuario?

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:

Breve guía de codificación de documentos y caracteres en HTML

Jorge López — Mon, 13 Sep 2010 15:48:56 +0000

Una consideración muy a tener en cuenta respecto a los textos de nuestras páginas, es la codificación de los caracteres.Tenemos que saber que dependiendo del lenguaje en que escribamos, algunos de los caracteres que utilicemos no se podrán visualizar correctamente una vez renderizada la página. A continuacion veremos algunos ejemplos y sus soluciones:

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:

Entidad	Carácter	Descripción
ñ	ñ	latin letter n with tilde
á	á	A acute
é	é	E acute
í	í	I acute
<	<	less than
>	>	More than
&euro	€	euro

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.

Depuración de CSS (parte II) – Convenciones de nomenclatura semántica

Jorge López — Sun, 04 Jul 2010 18:15:28 +0000

Una de las cosas más frustrantes de heredar un proyecto de otra persona, es cuando las convenciones de nomenclatura para clases e identificadores no tienen ningún sentido. Esto puede dificultar una actualización o un rediseño y puede hacernos perder mucho tiempo. En este artículo te daremos algunos consejos sobre como nombrar a las clases e identificadores de tus proyectos, de manera que sean fácilmente entendibles por otros desarrolladores.

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.

Como escribir para la web

Jorge López — Sun, 07 Mar 2010 19:47:21 +0000

La Web tiene características propias que determinan como se estructura cualquier texto y el modo en que el usuario accede a la información. No hay duda alguna que el modo en que está escrito un texto afecta de manera dramática la experiencia de los usuarios. Hace tiempo hablamos precisamente de esto cuando analizando el patrón de lectura de los usuarios de la web. La conclusión fue que es un error escribir en la web de la misma manera que para un soporte impreso, puesto que los usuarios se comportaban de manera diferente.

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.

Citando textos:
vs. vs.

Jorge López — Fri, 18 Dec 2009 19:32:36 +0000

Cuando marcamos el contenido de nuestras páginas, muchas veces tenemos que hacer referencia a textos que pueden ser tanto ajenos como propios. En ambos casos, haremos uso de las citas.

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

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:



El contenido de un blockquote elemento debe incluir elementos de bloque como encabezados, listas, párrafos o div's.

Este elemento también puede tener un atributo opcional citar que especifica la ubicación (en la forma de una URI), donde la cotización ha venido.

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

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 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

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 como a

:

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
para citas grandes o destacado de texto propio, para citas pequeñas utilizaremos la etiqueta y para referenciar a otras fuentes la etiqueta es lo más adecuado.

Fuente Smashing magazine

Mejorar fácilmente tu sitio Web

Álvaro Brito — Fri, 09 Oct 2009 22:14:57 +0000

Tanto si eres un administrador, un desarrollador Web, un miembro de un equipo de Marketing o de Comunicaciones, o quizá un Web Master Freelance, habrás leído de diversas fuentes sobre el interés en los estándares Web. Habrás comprendido que los estándares son beneficiosos para tu sitio Web en términos de ahorro de costes, facilidad de gestión y aprovechamiento, y por lo tanto has decidido cambiar y emplear estándares en tu sitio Web. Y así validar y mejorar tu sitio Web.

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

Como usar el longdesc

Álvaro Brito — Sat, 12 Sep 2009 14:54:14 +0000

En algunos casos, una imagen es demasiado compleja para describirla en pocas palabras. Cuadros, organigramas y gráficos son ejemplos principales de este tipo de imágenes. Aunque no parece haber ningún límite en la longitud del texto en un atributo alt, está destinado a ser relativamente corto, por lo que sería un abuso de este atributo escribir más que unas pocas palabras, o como máximo, unas cuantas frases cortas. La respuesta entonces, es proporcionar una breve descripción de texto alternativo de la imagen y luego proporcionar una descripción más larga con el atributo longdesc.

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:

El gráfico de arriba muestra el porcentaje de edad de la población total de EE.UU. 16-64 años declaran una o más discapacidades. El valor porcentual para cada categoría es el siguiente:

Total de declarar una o más discapacidades: un 18,6 por ciento.
Sensorial (visual y auditiva): 2,3 por ciento.
Física: un 6,2 por ciento.
Mental: un 3,8 por ciento.
Auto-cuidado: el 1,8 por ciento.
Dificultad fuera del hogar: 6,4 por ciento.
Discapacidad de empleo: un 11,9 por ciento.

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:

Descripción de texto de este gráfico está disponible en una página aparte.

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 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

Microformatos ¿Qué es esto?

Álvaro Brito — Thu, 10 Sep 2009 11:39:25 +0000

Un Microformato es una forma simple de agregar significado semántico a un contenido. Están ideados para ser usadas en páginas web que usen HTML o XHTML, de manera que la información pueda ser indexada, guardada, referenciada o reusada.

Más técnicamente, son elementos de lenguaje de marcado, usando XHTML usando nombres de clase específicos. Cualquiera puede hacer uso de ellos y explotar sus características.

Las especificaciones actuales de microformatos permiten la representación de eventos, información de contacto, relaciones sociales, direcciones, ubicaciones (coordenadas gps), etc.

Características de los Microformatos

Son convenciones simples: Diseñados para integrar semántica en etiquetas
Se pueden usar para problemas específicos: Formatos diseñados para humanos: (X)HTML/XML,Atom/RSS feeds etc.
Implementacion sencilla: Usan nombres de clases cortos y descriptivos
Estándares: Se basan en estándares que ya funcionan.
Permiten un desarrollo descentralizado: De recursos, herramientas y servicios.

EL principal significado que nos aclara ¿qué es un microformato? es, construir minibloques con significado dentro de una página Web de manera que puedan ser reutilizados por otros sitios web o aplicaciones. Es decir, con tan solo cambiar la forma de marcar nuestro HTML y usando las clases de microformatos que nos interesan, podemos proporcionar servicios e información fuera de nuestro navegador.

Los microformatos más usados

hAtom: Marcar feeds Atom dentro del HTML.
hCalendar: Eventos.
hCard: Información de contacto, incluye:
- adr: Direcciones postales.
- geo: Coordenadas geográficas (latitud, longitud).
hReview: Críticas de artículos, servicios.
hResume: Curriculums.
rel-directory: Apunta enlaces a una página de un directorio.
rel-nofollow: Aadvierte a los buscadores web que no deben dar importancia a la página a la que apunta el enlace.
rel-tag: Indica que la página que contiene el enlace está relacionada con la etiqueta especificada.
xFolk: Especifica enlaces guardados en un Marcador social (FaceBook, Digg, etc.).
XFN: Relaciones sociales mediante enlaces.
XOXO: Crea esquemas con listas.

Ejemplo de un microformato

Formato vCard (versión resumida)

BEGIN:VCARD
VERSION:3.0
N:Brito;Alvaro
FN:Alvaro Brito
URL:http://www.circulodemaquetadores.com/
ORG:circulodemaquetadores.com
END:VCARD

Microformato hCard (versión equivalente)


Alvaro Brito
circulodemaquetadores.com

Esto es un ejemplo sencillo y práctico para proporcionar tu información de contacto, os dejo con una chuleta microformatos o microformats cheatsheet:

Descargar Chuleta Microformatos

Conclusión

Los microformatos, no dejan de ser un brillante apaño experimental para solucionar de manera creativa pequeños problemas de la Web con beneficios inmediatos. Para los portales Web 2.0, como Technorati o Yahoo grandes generadores y consumidores de Microformatos. Les interesa, porque convierten a los usuarios en colaboradores directos, proveedores de contenido y una fuente de futuros servicios, clave en la web social. Porque de manera sencillísima y a un coste mínimo, a los usuarios se les facilita participar de manera más activa en el crecimiento futuro de la web dándoles visibilidad y mejores servicios.

Círculo de Maquetadores » Semántica Web

Como semantizar textos – Parte 1 – (Los formatos RDF)

Texto enriquecido mediante RDF (Resource Description Framework)

Ejemplo de RDF

RDFa (Resource Description Framework-in-attributes)

Como semantizar textos - Parte 1

eRDF (Embedded RDF)

La semántica de los enlaces: definiciones de atributo rev y rel

Definiciones de atributos

Atributos rev y rel

Valores de los atributos de rev y rel

Como microformatos

Una mirada sobre la mejora progresiva y la degradación elegante

Degradación elegante

Mejora progresiva

Breve guía de codificación de documentos y caracteres en HTML

Caracteres especiales y casos problemáticos

Los charset

Las entidades de codificación

Depuración de CSS (parte II) – Convenciones de nomenclatura semántica

Algunos ejemplos

Consejos para mejorar la nomenclatura de nuestros css

En conclusión

Para seguir investigando

Como escribir para la web

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

Técnicas y estrategias

Como mejorar la legibilidad

En cuanto a la redacción:

En cuanto al diseño:

Citando textos: vs. vs.

Etiqueta

Ejemplo:

Problemas con los blockquote

Etiqueta

Ejemplo:

Etiqueta

Ejemplo:

Atributos de las etiquetas

En resumen

Mejorar fácilmente tu sitio Web

Como usar el longdesc

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

EN EL CONTEXTO DEL PROPIO DOCUMENTO

UN VÍNCULO DE TEXTO NORMAL

EL ATRIBUTO LONGDESC

Microformatos ¿Qué es esto?

Características de los Microformatos

Los microformatos más usados

Ejemplo de un microformato

Formato vCard (versión resumida)

Microformato hCard (versión equivalente)

Conclusión

Citando textos:
vs. vs.