Verifiquemos que nuestra página sea accesible

La página http://validator.w3.org/ nos dirá si nuestro HTML se ajusta a las recomendaciones de W3C, solo debemos escribir en ella la URL, (esta página se encuentra en inglés).

Luego de analizar mi blog se encontraron 150 errores y 30 advertencias, cada error es descrito.

Luego haremos lo mismo para revisar el código CSS en la página http://jigsaw.w3.org/css-validator/:

Mi página tuvo 12 errores igualmente descritos.

Repetimos el análisis de color ya trabajado en una anterior entrada.

La última prueba es quitar la hoja de estilo de la página y verificar que siga funcionando, algunos navegadores traen la herramienta para desactivarla a modo de plugin.

Como prueba opcional podemos pasar la página por un lector de pantalla o visualizarla en un equipo con una versión muy antigua de navegador.

En este análisis encontraremos que muchos de los errores que se presentan vienen desde el mismo código que blogger ha generado otros ya los iremos analizando y resolviendo poco a poco, espero los pasos aquí descritos hayan sido claros.

Definición de títulos

Igual que cuando creamos un documento para impresión y manejamos jerarquía en los títulos, por medio de HTML también podemos crearlos, el lenguaje HTML reconoce los estilos H1, H2, H3, H4, H5 y H6 donde podemos decir por ejemplo que H1 es mi título, H2 es mi subtitulo y así sucesivamente, por ejemplo:

<h1>mi título</h1>   

mi título

<h2>mi subtitulo</h2>    

mi subtitulo

Líneas decorativas que no interfieren con la accesibilidad

Cuando queramos incluir imágenes o líneas decorativas que al pasarlas por el lector de pantalla no interfieran con los lectores de pantalla podemos incluirlas en las hojas de estilo y en el HTML la ubicamos dentro de una etiqueta <DIV>, primero creamos nuestra imagen:

Luego creamos un estilo para llamarla por código, este lo ubicamos dentro de HEAD antes de </style>:

.lineamorada{
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXdyJCQMByIlSJ6_MF6ODqy5CQWi6pW51WkgFUx66a6mCKM190X_ZzVUvGtMP7Era3f7dPiD_ZQT5Yo0-9dGtY00KWaIqJx3oc5B-S4SXWQQNRut-3mpY1uJcgQ6hNZYHVaB8wqZ0it-A/s1600/linea_violeta-02.png);
background-repeat:no-repeat;
background-position:center;
margin: 3px;
width:384px;
height:30px;
}

Y dentro del código HTML en el lugar que la queramos ubicar ponemos el siguiente código:

<div class="lineamorada"></div>

Veamos el resultado, ahora la línea se repite antes de la firma al final de cada post.

Multiples vínculos en una sola imagen

Resulta que quiero hacer un enlace a las diferentes páginas de redes sociales por medio de imágenes pero solo tengo una imagen donde aparecen los logos de facebook, tuenti y de twitter, ¿qué hago?

¡Buenas y complicadas noticias! existe un atributo de imagen que permite mapearla para crear múltiples enlaces sobre ésta, se trata de USEMAP con esta propiedad podemos crear varias áreas sensibles en una sola imagen, los pasos son los siguientes:

1. Cargo la imagen como se hace regularmente y agrego el parámetro USEMAP, luego por medio de area shape="rect" defino las posiciones por medio de cuatro coordenadas (x) y (y): el primer valor es la pareja xy de la esquina superior izquierda y la segunda pareja xy es la esquina inferior derecha, en codigo es:

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4A1HVzyvfEjmW2Oau3SobKZ_JmWMGdu7VeP1futoNM1ls-B0ubggcChwoNA_vkE5-cszlLjmDddoyln2J_vCubzOZAPLi1bWnqPwXbq-TYfSsZfDIL5OhGOdJY04F3ul-ihegs3pDq2E/s320/logos-redes-sociales.gif" width="410" height="420" usemap="#mapita"/>

<map name="mapita">

<area shape="rect" coords="0,0,410,109" href="http://www.twitter.com" />

<area shape="rect" coords="0,109,410,262" href="http://www.tuenti.com" />

<area shape="rect" coords="0,262,410,420" href="http://www.facebook.com" />

Las imágenes que no queremos que nos hablen

Como vimos antes, las imágenes nos pueden contar como son gracias al atributo ALT, pero en ocasiones no necesitamos saber lo que son, y si no podemos ver ni siquiera necesitamos saber que existen, ese es el caso de las imágenes decorativas, por ejemplo en el lado izquierdo de este texto he puesto una imagen que son unas líneas curvas con el propósito de darle una apariencia más interesante al artículo. Esta imagen ha sido cargada sin ALT, puede que algunos lectores de pantalla la mencionen.


Abajo de este otro texto he puesto de nuevo la imagen decorativa, esta vez con ALT vacío, llamando la imagen de la siguiente forma:

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3paD2ql-eabONiqaHojj_KOvdetbcqaqM0Y6bhOmZrQAFtzpPizJUIZvU1hWIQhwJyQvc2iQ8K-tECqDQPwwEJjwkpcnmEo9cbQGUG0keyOJx-mIK4RZ953U1ic4fCe1hs2Jb0cox3Xc/s1600/decorativa-01.png" alt=""/>

La intensión es que los lectores de pantalla las omitan para no arrojarnos información innecesaria.

Las imágenes también pueden hablar aunque no las veas

En este paso vamos a aprender a insertar imágenes por HTML:

Voy a insertar la pintura "La Monalisa" de Leonardo Davinci, para insertar imágenes se utiliza el paarámetro IMG , a éste se le pueden añadir otras características como borde, ancho, alto, título y descripción mediante el atributo ALT

un ejemplo de código para insertar imagen es el siguiente:

<img src="http://www.artespain.com/wp-content/uploads/mona-lisa.jpg" width="320" height="235" />

Si quisiera que además está imagen fuera vínculo se vería así el código:

<a href="http://www.artespain.com/wp-content/uploads/mona-lisa.jpg" ><img src="http://www.artespain.com/wp-content/uploads/mona-lisa.jpg" width="320" height="235"/></a>

Ahora voy a agregarle un título:

<a href="http://www.artespain.com/wp-content/uploads/mona-lisa.jpg" ><img  src="http://www.artespain.com/wp-content/uploads/mona-lisa.jpg" width="320" height="235" title="la monalisa"/></a>

Y por último le agrego una descripción con el atributo ALT:

<a href="http://www.artespain.com/wp-content/uploads/mona-lisa.jpg" ><img  src="http://www.artespain.com/wp-content/uploads/mona-lisa.jpg" width="320" height="235" title="la monalisa" alt="la pintura más famosa de leonardo Davinci representa a una mujer de intrigadora belleza, de cabello largo negro y mirada profunda que parece sonreirle con picardía al espectador"/></a>

Cuando pases el ratón sobre la imagen aparecerá el título y si no puedes ver la imagen ya sea porque el navegador no la carga o por un problema visual el texto de la descripción aparecerá o el lector de pantalla te lo leerá.

Listemos y enumeremos

Crear listas es muy sencillo, para crear una lista con viñetas encerramos las palabras u oraciones en la etiqueta <ul> y para listas numeradas usamos <ol> y a cada item le ponemos la etiqueta <li>

Ejemplo de <ul>:

• Perro
• gato
• vaca
• pollo
• zorro

El código es:

<ul>
<li>Perro</li>
<li>gato</li>
<li>vaca</li>
<li>pollo</li>
<li>zorro</li>
</ul>

La misma lista ahora numerada:

1. Perro
2. gato
3. vaca
4. pollo
5. zorro

Y su respectivo código:

<ol>
<li>Perro</li>
<li>gato</li>
<li>vaca</li>
<li>pollo</li>
<li>zorro</li>
</ol>

Para personalizar nuestras listas y darles características gráficas como cambiar la viñeta trabajamos desde la hoja de estilos, en el caso que no exista creamos uno, por ejemplo quiero que no se vean las viñetas y que los textos se justifiquen a la derecha:

ul.menu{
list-style:none;
text-align: right;
}

y en el html le damos la clase menu:

<ul class="menu">

<li>Perro</li>

<li>gato</li>

<li>vaca</li>

<li>pollo</li>

<li>zorro</li>

</ul>

Vamos a aplicarlo al menú del blog:

Actualmente mi menú tiene el texto a la izquierda y viñetas de bolita de color verde, así lo muestrra la siguiente imagen:

Voy a quitar las bolitas y alinearlo a la derecha, así que busco el estilo de listado que tiene mi plantilla dentro de la hoja de estilos del HTML:


#sidebar ul li {
background:url("http://www.blogblog.com/dots/bullet.gif") no-repeat 3px .45em;
margin:0;
padding:0 0 5px 15px;
  }

Según este estilo, las bolitas verdes son una imagen llamada bullet.gif, voy a cambiar todo y veamos si funciona:


#sidebar ul li {
list-style:none;

text-align: right;

  }

A continuación una imagen con el resultado: el menú se ha justificado a la derecha y ya no hay viñetas: