miércoles, 6 de junio de 2012

Opinión personal


Siguiendo las pautas de cómo hacer una bitácora accesible he intentado realizar este blog.  Personalmente me ha servido como comenta Mark Pilgrim para hacer una “inmersión en la accesibilidad”, campo que desconocía.
Me ha gustado conocer como cualquier persona con independencia de sus limitaciones puede utilizar y comprender contenidos web. No ha sido fácil, y no estoy  seguro que todo funcione al 100% pero ha sido  satisfactorio comprobar tanta versatilidad y posibilidades en diferentes aplicaciones. (texto, imágenes, color, etc)
Este carácter de universal de una web accesible creo que ofrece un sinfín de  aplicaciones  que acercan a las personas. Ahora que conozco alguna que otra, me pregunto ¿cómo se podían hacer muchas cosas antes de internet?
Estas posibilidades dan autonomía a las personas haciendo que no dependan tanto de otras, pero lo que realmente importante es que  cada día más diferentes medios de comunicación publican ya sus contendidos en estos formatos. Otras ventajas son las personas con algún problema motor que usando ciertas ayudas técnicas ya tienen interfaces capaces de facilitarles muchas acciones mediante la red, o personas con discapacidades cognitivas que también pueden beneficiarse de la estructura y contenidos web. Creo, en este aspecto que se ha logrado conseguir más logros que en otros aspectos sociales, aun pendientes como son las barretas arquitectónicas, o la inclusión en el mundo laboral, por comentar alguno.

Estoy seguro que quedan muchas cosas por hacer, pero confío en que desde las Escuelas, Universidades y Administraciones poco a poco se vayan dando pasos para integrar y facilitar esa accesibilidad sea cual sea el medio  <<para todos>>.

Gracias Carlos por tu orientación y paciencia y a mis compañeros que también siempre están ahí para echar una mano.
                             Salvador García

domingo, 20 de mayo de 2012

21 Verificar la accesibilidad

Bueno, para considerar que esta Bitácora esta correcta lo suyo es verificar correctamente el trabajo, así pues comprobaremos una serie de pasos para saber si hemos conseguido hacer una Bitácora accesible.

Para verificar si el código fuente de la bitácora se ajusta a las recomendaciones de W3C en la dirección http://validator.w3 hemos puesto la dirección de la web y el validador nos presenta los siguientes resultados:
Las siguientes notas y advertencias resaltan el conflicto que causa la validación, es recomendable corregir dichos errores y volver a validar el documento.



  1. Error Line 1464, Column 109& did not start a character reference. (& probably should have been escaped as &amp;.)
    …unts.google.com/SignUp?service=blogger&continue=http%3A%2F%2Fwww.blogger.com%2…
  2. Error Line 1464, Column 245& did not start a character reference. (& probably should have been escaped as &amp;.)
    …ptsalvadorgarcia.blogspot.com.es%2F%26zx%3D1p0q0erljgehp&ltmpl=private&hl=en" >
  3. Error Line 1464, Column 259& did not start a character reference. (& probably should have been escaped as &amp;.)
    …ptsalvadorgarcia.blogspot.com.es%2F%26zx%3D1p0q0erljgehp&ltmpl=private&hl=en" >
    
    
    
    
    
    
    Por más que lo he intentado, no llego a saber como corregir estos errores. La validación de esta página web da como resultado 3 errores y una advertencia.
    
    
    
    





20 Encabezados correctos


Una bitácora debe tener un esquema por niveles, estos niveles de encabezado en la codificación HTML (hasta 6) se marcan con las etiquetas <h1> <h2> <h3> <h4>.
Blogger en su hoja de estilo lo usa de la siguiente manera: La etiqueta  <h1> para su cabezera


Header h1 {
  font: $(header.font);
  color: $(header.text.color);}


La etiqueta  <h2> para el ancabezado de los post  


 Headings
----------------------------------------------- */
h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);} 


La etiqueta  <h3> para el título de los post  

h3.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
  text-decoration: none;} 


La etiqueta  <h4> para los comentarios

<h4 id='comment-post-message'> 


19 Tamaño de fuentes relativos

Las páginas web cada vez tienen más imágenes, animaciones u otros contenidos, aunque el contenido principal sigue siendo el texto, osea las palabras (noticias, artículos, opiniones, etc). Al parecer se ha escrito mucho sobre reglas que explicancomo hacer un texto con tamaño y fuente que trabaje correctamente con todos los navegadores.


Recomendable en este punto una lectura de Mark Pilgrim <<Dive into accessibity>> como <<usar tamaños de fuente relativos>>.


Blogger utiliza una curiosa mezcla entre palabras clave (que puede tomar los valores la más pequeña, pequeña, normal, grande y la más grande) y porcentajes que dan un buen resultado como lo aplicado en este Blog. En este caso <normal>


Tamaño de texto el más grande
Tamaño de texto el más pequeño


En cuanto a la variación de los tamaños en este Blog se han modificado de la siguiente manera:El texto de página con fuente Arial (la mas fácil de leer) en un tamaño 20Px y en negro [#000000]. Creo que es  legible para personas con dificultad visual.
Para los enlaces han sido modificados también con una fuente tipo Arial, y color azul oscuro [#10435d].
Es importante que los enlaces sean visibles

Con el fin de diferenciar el título de entrada de los artículos he seleccionado como fuente un tipo de letra Verdana (muy legible) y en 24 Px, para diferenciar del resto de texto de página.
Para la descripción del Blog, me he decidido por la misma fuente Arial y un color verde oscuro [#0f5d29].

La Cabecera de la fecha también ha sido modificada, ya que no se leía fácilmente dado los colores tan claros. He seleccionado como color de texto el blanco #ffffff con un color oscuro de fondo, resaltado mediante un marco del mismo color rectangular, color de fondo #08558c.

jueves, 17 de mayo de 2012

18 Líneas horizontales

Generalmente las líneas horizontales marcadas con la etiqueta
pueden ser muy sencillas, algunas veces para ser diferentes se suele introducir imágenes. A mi personalmente, no es muy de mi agrado. Prefiero algo más sencillo que indique la separación entre temas. Ejemplo de una linea sencilla, mediante <hr size="5" width="65%" />






Ejemplo de una linea gruesa al 85% con un color #00FF00 , puede ser muy , útil en algunas situaciones.


<br />
<br /><br /><hr color="#00FF00" size="20" width="85%" />



17 mapas de imagen accesibles

Imagen con tres círculos que enlazan a tres apartados de este blogMapas de imagen Ir a la página principal Ir a mis datos personales Ir al primer post del blog
Ejemplo de mapa de imagen

Los mapas de imágenes son una manera creativa de incorporar imágenes a nuestra página con la posibilidad de incorporar alternativas a estas imágenes. En este caso se trata de un mapa de imagenes mediante tres circulos que situando el cursor encima nos indican la posibilidad de ir a diferentes secciones del Blog.
En este caso a la página principal, a mis datos personales o al primer post del Blog.
Estos mapas de imágenes se definen con la etiqueta <map> determinando las áreas de imagen mediante un enlace.
Se ha creado mediante el atributo <usemap>.


<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidFANlfy0xjF9mlWaWp2BnqYnfmO0u2QfDIuoM6PeIH0sE_lye0E-NHZRx70gsWW43MZcQmbgsmcRoLK4A1wtYqDOK8WdKynuaTh5B54RfgaEEXkmesZex5dXOUzzikFx-Hb7uMTYbwuE/s1600/circulos.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="Imagen con tres círculos que enlazan a tres apartados de este blog" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidFANlfy0xjF9mlWaWp2BnqYnfmO0u2QfDIuoM6PeIH0sE_lye0E-NHZRx70gsWW43MZcQmbgsmcRoLK4A1wtYqDOK8WdKynuaTh5B54RfgaEEXkmesZex5dXOUzzikFx-Hb7uMTYbwuE/s320/circulos.jpg" title="Enlaces a tres zonas de este blog de Salva" usemap="#MAP32263126" width="320" /></a>Mapas de imagen

<map name="MAP32263126">
<area alt="Ir a la página principal" coords="47,17, 68,17, 96,35, 105,62, 104,89, 94,111, 67,131, 45,126, 26,109, 15,82, 17,56, 26,34, 42,21, 47,17" href="http://dptsalvadorgarcia.blogspot.com.es//" shape="POLY" title=" acceder a la página principal"></area>
<area alt="Ir a mis datos personales" coords="131,97, 111,120, 102,156, 115,188, 134,206, 168,203, 187,181, 197,148, 194,127, 179,107, 161,96, 131,97" href="http://www.blogger.com/profile/06483945255158286568" shape="POLY" title="acceder a mis datos personales"></area>
<area alt="Ir al primer post del blog" coords="218,179, 199,206, 195,244, 209,270, 235,287, 266,275, 284,251, 285,221, 273,191, 248,173, 218,179" href="http://dptsalvadorgarcia.blogspot.com.es/search/label/1%20%C2%BFPara%20qui%C3%A9n%20es%20la%20accesibilidad%20web%3F" shape="POLY" title="acceder al primer post"></area>
</map>



Otra forma es la que incorpora Blogger mediante  enlaces de imágenes a otras páginas.
Ejemplo



16 Atributo alt vacío

A menudo utililizamos imágenes como recursos estéticos.

La utilidad del atributo "alt" vacío En el conjunto de un contenido, conviene identificar las imágenes puramente ornamentales y que queden distinguidas de las imágenes significativas. Ello puede conseguirse mediante un atributo "alt" vacío de descripción, o sea, sin texto (ni espacio) entre las comillas: . Los navegadores no visuales interpretarán que la imagen no aporta información relevante. Aplicación del atributo "alt" vacío en esta bitácora Implementamos una imagen ornamental en cuya etiqueta introducimos el atributo "ALT" vacío, quedando de este modo:



<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBK0O8poADdBOWCuPo0dUlSvgqZVrML1okwVp2TbvMaCbP__bky5HQ_19OF1NeUGPBoVPZUB1ayNItxHYyrZ5UfbUrZmVPQ4_cbX5YfLhJl4535Zs6P2UqNYxokL4_Ok5M_v1tO2jeY94e/s1600/accesibilidad.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBK0O8poADdBOWCuPo0dUlSvgqZVrML1okwVp2TbvMaCbP__bky5HQ_19OF1NeUGPBoVPZUB1ayNItxHYyrZ5UfbUrZmVPQ4_cbX5YfLhJl4535Zs6P2UqNYxokL4_Ok5M_v1tO2jeY94e/s1600/accesibilidad.jpeg" /></a></div>
<span style="font-family: Verdana, sans-serif; font-size: x-small;"><span style="line-height: 28px;"><br /></span></span>

15 Equivalente textual para imágenes

El atributo <alt> es posible que sea el más conocido cuando se habla de accesibilidad web. Este atributo permite conocer a las personar que utilicen lectores de pantalla o navegadores por voz el contenido de las imágenes que se exponen. Sin este atributo muchos navegadores se quedarían sin conocer el contenido de las imágenes.




El procedimiento más adecuado es insertar en la etiqueta <IMG> los atributos que aporten, lo más sucintamente posible, metainformación equivalente al valor informativo de la imagen utilizada: - el atributo <alt> , para informar qué representa la imagen y si tiene alguna funcionalidad, especialmente cuando actúa como vínculo a otra información, - el atributo <title> para informar sobre la finalidad de la imagen en su contexto.



Imagen del logotipo de Technosite
que enlaza con la web de Technosite, para informar sobre la finalidad de la imagen en su contexto. Como ejemplo de una imágen que, además, actúa como vínculo a otra página:

La imagen que se ha insertado es la del logotipo de Technosite, además, actuará como vínculo a la web correspondiente. Para conseguir que ningún usuario se vea privado de esa información, ésta es la etiqueta que le aplicamos:


<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtYPf6f_jqhfjc2agMOTceb4YURtOY3fk1ouuceKg4a_rkmRTYh_vNEMKEZaAZgVaZZ_6EKvdw-uuomvIcW7TdXgKB1fTCZltn9tr_GZ_nSPQpKFumF9IX5La6D75EIaJSQARAsRgijIoV/s104/logo_technosite.gif"alt="Imagen del logotipo de Technosite
que enlaza con la web de Technosite" title="Acceso a la web de Technosite" />
</a>