Bitácora web de G.M.B.

Consejos del W3C.

Cuando comprobamos la gramática de una página en el validador el W3C y es correcta, nos aparecen unos consejos para mejorar nuestras páginas. Aquí los veremos detalladamente.

Validador del W3C.

El W3C (Consorcio Mundial de la Web), entre otras importantes labores para el desarrollo y divulgación de la web, tiene un servicio de validación de documentos para que podamos comprobar si son formalmente correctos: el el Validador del W3C.

Puede hacer un análisis bastante completo sobre los documentos que queramos, bien sea mediante la introducción de una dirección web, ó analizando ficheros de nuestro disco duro.

Tip Of The Day.

Cuando conseguimos que un documento sea válido (a veces es muy complicado, pero es una buena manera de aprender), aparte de mostrarnos un código que podemos colocar en nuestras páginas "certificando" que es una página correcta. Nos aparece una serie de consejos rotativos. En total son siete, breves, pero importantes. Los mostramos a continuación.

• <title>: el elemento más importante de una página web de calidad.
• No use "pulse aquí" como texto en un vínculo.
• Utiliza redireccionamientos estándar: no rompas la funcionalidad del botón "Volver"
• Utiliza H1 para los títulos.
• Utiliza el atributo "alt".
• No olvides añadir el tipo de documento (doctype).
• Las buenas URI's no cambian.

<title>: el elemento más importante de una página web de calidad.

Lo primero que vemos cuando cargamos una página en el navegador, es el título de la misma. Es la primera información que obtenemos de esa página, y tiene que ser lo más significativo posible. Queda muy poco elegante que veamos "Sin título", untitled, una secuencia de caractéres incomprensible o directamente un título no representativo y que esté ahí por error.

Tener un buen título nos beneficia como desarrolladores, ya que es un elemento importante para los buscadores, por lo que será más fácil de localizar, y demuestra preocupación por hacer las cosas bien hechas. Con respecto a los usuarios, aparte de mala imágen que se puedan llevar, ese elemento es lo primero que oímos a través de un lector de pantalla.

Como podéis ver, unas pocas palabras, que son muy importantes.

No use "pulse aquí" como texto en un vínculo.

Los vínculos son uno de los elementos más importantes de un documento web. Además, a través del tabulador podemos navegar entre ellos, y no ofrece ninguna información de interés un vínculo con el texto "pulse aquí". Hay que procurar que el texto incluido en ese vínculo sea lo suficientemente representativo de la dirección de destino como para no tener que ojear nisiquiera las palabras que le preceden. Hagamos un sencillo experimento, ¿Cuál de estos dos vínculos es más útil?

• Si quiere más información sobre el grupo "Despistaos" puede visitar su página pinchando aquí.
• Puede obtener más información del grupo 'Despitaos' visitando su página oficial.

Desde luego la respuesta es evidente, el segundo vínculo es más útil, porque ofrece más información ojeando el texto del vínculo, sin necesidad de leer toda la frase.

Utiliza redireccionamientos estándar: no rompas la funcionalidad del botón "Volver".

Hay que evitar en todo momento que el botón "Volver" quede inabilitado. A veces los vínculos abren una nueva página, y en el momento en el que entramos en ella, no hay manera de regresar a la página anterior, si no es cerrando o cambiando la ventana Además no siempre es fácil saber si la ventana en la que estamos ahora, es en la que estábamos hace cuatro o cinco "clicks". ¿Que ocurre entonces si queremos volver a la décima página navegando hacia atrás?

Utiliza H1 para los títulos.

Una página web, es mucho más que el aspecto que percibimos en un navegador. Tiene unas etiquetas que estructuran el documento muy útiles y que conviene respetar. No debemos utilizar un título solamente para lograr el aspecto visual de un texto con un tamaño mayor. Para eso tenemos las hojas de estilo.

Un título tiene que servir para introducir el texto que viene a continuación de tal manera que sea breve y representativo. Algunos navegadores permiten ir saltando de un título a otro para permitir a los usuarios ojear el contenido. Si están interesados por un título, leeran el párrafo, y sino, irán saltando de titular, en titular.

También son importantes para los buscadores, ya que aquella información que aparece entre etiquetas de títulos, son "guardadas" con más importancia que si aparece en mitad de un párrafo.

Utiliar los titulos correctamente se basa en:

• Utilizar un texto apropiado, breve y representativo.
• Mantener la estructura implícita: el título 1 más importante que el 2, que a su vez es más importante que el 3, etcétera.
• No saltarse títulos intermedios entre uno y otro. Es decir, después del titulo de primer nivel, debe de ir un título de segundo nivel, y no uno de sexto o séptimo.

Utiliza el atributo "alt".

El atributo "alt", sirve para mostrar una alternativa textual a un elemento que no lo es, como puede ser una imágen o una animación. Sirve para que los lectores que no pueden ver imágenes (ya sea porque son ciegos, utilizan un navegador de texto, como linx, o desactivan la opción de cargar imágenes para ir más rápido)

El texto que debemos emplear como alternativa textual a una imágen debe ser descriptivo de la imágen en el contexto de esa página.

No tiene el mismo significado la foto de un jugador de fútbol en una página sobre deportes en general, cuando el motivo de esa imágen es ver un ejemplo de ese deporte, que en una página de un diario deportivo para ilustrar un partido. En el primer caso un buen texto para el atributo "alt" sería por ejemplo "Jugador de fútbol", mientras que en el segundo caso debería ser algo así como "Aquí vemos a Capi regateando a un contrario poco antes de marcar el gol de la victoria".

No es recomendable usar un texto demasiado grande (más de cien caracteres puede resultar excesivo). No siempre se ve el texto (por ejemplo cuando la imágen es pequeña y tenemos desactivada la opción de descargar imágenes veremos el texto en el espacio que ocupa la imágen, y no siempre es suficiente). En el caso de que ese texto sea insuficiente, deberemos de tomar otra alternativa, como es el atributo "longdesc". El problema es que a día de hoy, no lo soportan los navegadores, por eso se suele emplear el vínculo "D".

Un vínculo "D" se coloca a la derecha de una imágen, y pulsando sobre él, nos lleva a una página donde existe una descripción más amplia de la imágen que describe, sin límites de espacio. Puedes ver un ejemplo de este tipo de vínculos en la parte inferior de cada página de esta web.