En el día de hoy.: mayo 2012

sábado, 19 de mayo de 2012

Paso 21: Verificar la accesibilidad

Llegado al punto final de los 21 pasos para la elaboración de un Blog accesible y tras un trabajo verdaderamente laborioso, procedemos a realizar la verificación de todo el proceso y poder realizar la modificación de lo que no sea positivo en el proceso.
Tal y como nos comentó el propio profesor, tras la verificación nos darán un alto número de errores, pero que serán debidos la mayoría al propio sistema de Blogger, por lo que no podremos realizar un Blog totalmente accesible.

Para la validación de W3C, utilizamos la página http://validator.w3.org/, en la cual nos damos cuenta de lo anteriormente indicado. Nos proporciona un altísimo número de errores, que tras su lectura detallada podemos concluir que son errores que ya tiene establecido el propio Blogger.
La validación de la hoja de estilos la llevamos a cabo a través de la página http://jigsaw.w3.org/css-validator/, la cual nos proporciona menos errores que la anterior, pero observando errores ya establecidos por Blogger.
En tercer lugar, realizamos un análisis automático de los criterios de accesibilidad elaboradas por el grupo WAI. El programa nos muestra una alto número de errores automáticos, siguiendo con las perspectivas anteriormente mostradas.
En cuarto y último lugar, utilizaremos la barra de herramientas de accesibilidad desarrollada por el equipo de AIS. Dicha herramienta nos dice que el el contraste y brillo entre los colores utilizados son suficientes para considerarlo accesible. Además, al desactivar la hoja de estilo verificamos que el Blog se comunica sin problemas.

Paso 20: Encabezados correctos

Todos los blogs cuenta con una organización mediante esquema por niveles y que Blogger, en relación a nuestro propio blog, los lleva a cabo de la siguiente forma:

1. El nivel superior será el propio título de la bitácora.

.Header h1 {

font: $(header.font);

color: $(header.text.color);

text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);

2. El segundo nivel sería cada uno de los días en los que colocamos «posts».

/* Headings

----------------------------------------------- */

h2 {

margin: 0 0 1em 0;

font: $(widget.title.font);

color: $(widget.title.text.color);

text-transform: uppercase;

3. El tercer nivel lo ocuparía el título de cada uno de los «post» de cada día y el cuarto nivel estaría la sección de «comentarios» para cada «post», que aparecen de forma conjunta en la plantilla:

<Variable name="post.title.font" description="Font" type="font"

default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

Paso 19: Tamaños de fuente relativos

Como tantas veces hemos comentado a lo largo de la elaboración del blog, la principal función es realizar un Blog accesible para aquellas personas con dificultades sensoriales, por tanto, uno de los términos principales que debemos considerar es la propia letra.
La letra debe proporcionar todas cualidades necesaria para que pueda beneficiar a todos nuestros usuarios. De esta forma, Blogger, para ser más accesible, diseña sus blogs a partir de fuentes relativas (en unidades em).
Realizando una búsqueda por el propio código de Blogger, hemos observado que para nuestra plantilla utiliza los siguientes unidades em:

padding: .6em 1em;

h3.post-title, .comments h4 {

font: $(post.title.font);

margin: .75em 0 0;

.mobile .date-header span {

padding: 0.1em 10px;

margin: 0 -10px;

Paso 18: Líneas horizontales

Tras realizar una multitud de cambios y lecturas, he llegado a dar con el código para inserción de las líneas horizontales en la plantilla del Blog.

El propósito principal de este paso es dar un toque de color y diseño atractivo a nuestras propias entradas, para ello, utilizaremos la siguiente línea horizontal:

De esta forma, hemos tenido que realizar todos los cambios en la hoja de destilo, mediante el siguiente código:

.post-footer {clear:left; line-height:60px; height:5 px; margin-bottom:12px; _margin-top:-4px; /* IE Windows target */ background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmVcpPtroeQH49MQipUZu5gI8xEsd1fbySg-p7IgEiI_5LkK46JnIqaRNF6FXUn4S87ZW_bLl_XC3vULoQakEex70b4EOLnli_pla1pVCDfagjMYo59TA8MFfYPNLSAnSmGaOp3K0AV9g/s1600/orangebar1.gif") no-repeat bottom left;}
margin: 20px -2px 0;
padding: 5px 10px;

Paso 17: Mapas de imagen accesibles

En este paso número 17 vamos a llevar a cabo el establecimiento de un mapa de imágenes accesibles, es decir, una imagen que nos portará la información necesaria para poder seguir informándonos a partir de ella.
En la siguiente imagen, hemos querido llevar a cabo las distintas partes de un árbol, por tanto, si queremos sabes cuáles son sus partes bastará con pasar el ratón por encima de ellas, teniendo la posibilidad de ampliar la información a partir de diversos portales a los que te redirecciona. Además, está hecho de tal forma que beneficie a todos los usuarios con dificultades que utilicen lectores de pantalla, etc...

Sin duda alguna, ha sido el paso que más me ha dificultado la tarea del blog, ya que, hasta el último momento, no me aparecía la imagen, dándome error en todos los casos. Finalmente he conseguido su establecimiento de la siguiente forma:

Paso 16: Atributo «alt» vacío

En éste paso, nos vamos a centrar en el atributo vacío en "alt", es decir, vamos a llevar a cabo un paso contrario al del post del Paso 15.

Hay veces que ponemos ciertas imágenes con el único fin de decorar la entrada. Este hecho puede dificultar el entendimiento del contenido principal para aquellos usuarios que utilicen lectores de pantallas u otros mecanismos si no realizamos una modificación anterior del atributo "alt".

Por tanto, vamos a insertar la misma imagen del niño utilizando las TIC, pero en éste caso, se va a insertar con una función decorativa.

La modificación que hemos realizado, en este caso, para el atributo "alt" es el siguiente:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ojnVrUZRZkK58UiBOPEmX0d6cDzU8w4ofg8xQ4hYsbWNl7odZ1QO6u7_gOgoHsvwp2s-IAIKj1cYyY7VCD-sJroRpiwNJQo-5Cyp0MdFyX6bwaLQ_XDNteLTdUJgdVyQLCL2KorEdzM/s1600/nino-y-ordenador.jpg" alt="" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="186" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ojnVrUZRZkK58UiBOPEmX0d6cDzU8w4ofg8xQ4hYsbWNl7odZ1QO6u7_gOgoHsvwp2s-IAIKj1cYyY7VCD-sJroRpiwNJQo-5Cyp0MdFyX6bwaLQ_XDNteLTdUJgdVyQLCL2KorEdzM/s200/nino-y-ordenador.jpg" width="200" /></a></div>
<div>

Paso 15: Equivalente textual para imágenes

En el paso número 15, llega el momento de poner en práctica el conocimiento adquirido sobre el atributo "Alt", considerado como uno de los elementos principales para la accesibilidad en la web.
La función principal que vamos a conseguir, en este caso, con el atribulo "alt" es beneficiar a todos aquellos usuarios con problemas visuales en el momento de interpretar una imagen que aparezcan en un post. Es decir, vamos a realizar una equivalencia textual para imágenes.
Para ello, vamos a insertar una imagen de un niño con un ordenador portátil, habiendo modificado el atributo "alt" para la accesibilidad de los usuarios anteriormente indicados. ¡Fíjate en lo que pasa al pasar el ratón por encima de la imagen!:

De esta forma, hemos realizado una modificación de código de la siguiente forma:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZXEjDIX2CNNWdhH-TUBpzoPgHracQzUmWiyFgvX49mf3kfw-z_3C9IQ252bRWyzWcdpxJqsI7a_tv8Tuk0O_AEQ3WIpWwoQljs9u04hiOXzQNxOP92MPcxBqop3OV3ps-TF_bTrv2Y1I/s1600/nino-y-ordenador.jpg" alt="Foto de un niño empezando a utilizar un ordenador portátil" title="Niño utilizando las TIC" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="299" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZXEjDIX2CNNWdhH-TUBpzoPgHracQzUmWiyFgvX49mf3kfw-z_3C9IQ252bRWyzWcdpxJqsI7a_tv8Tuk0O_AEQ3WIpWwoQljs9u04hiOXzQNxOP92MPcxBqop3OV3ps-TF_bTrv2Y1I/s320/nino-y-ordenador.jpg" width="320" /></a></div>
<br />

viernes, 18 de mayo de 2012

Paso 14: Usar listas reales

En algunos post podemos ver una serie de listas que pueden pertenecer a distinto ámbito, pero en el paso número 14 vamos a intentar cambiar el tradicional punto negro por un icono que, al menos, nos de un colorido especial a nuestro propio Blog.

Para ello, hemos seleccionado la siguiente viñeta:

De esta forma, vamos a ver como la lista de los diferentes periféricos de un ordenador aparece con la viñeta anteriormente seleccionada:

Para ello, hemos debido realizar los siguientes cambios:

<ul id="mylista">
<li><a href='#'>Impresora</a></li>
<li><a href='#'>Altavoces</a></li>
<li><a href='#'>Micrófonos</a></li>
<li><a href='#'>Escaner</a></li>
</ul>
</div>

Además, hemos tenido que incorporar el siguiente código a la plantillas general, de la siguiente forma:

#mylista{
list-style-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFg4qxAKssEt97kwGVxl9hdz-mT1DLdzqEYyul2PaLM7asESKGb5yJm2XSUuWqxAOkdW15ZUp3dqR792ADn_hf3GCOlTy7T4BxxrQVdDAuh-oIkvJpUyUWqprmqCkT8T3Be29NzLLlyMU/s1600/BD14790_.GIF");
list-style-type:none;

Paso 13: Tablas accesibles

En este paso, vamos a hacer referencia a la aplicación de las tablas de datos en los Blogs. Como nos muestra el manual, la inserción de tablas no es una tarea muy frecuente, limitándose este hecho para acoplar calendarios a nuestras entradas.
Para esta entrada, nos vamos a basar en la realización de una tabla de dos columnas y cinco filas, que nos mostrarán el horario indicado por una empresa para la realización de actividades de cuentacuentos.

Horario de Cuentacuentos de Cuenca
DÍA	HORA	LUGAR
LUNES	18.00- 19.00	Parque San Julián
MARTES	17.00-18.00	Parque San Julián
MIÉRCOLES	18.00- 19.00	Parque San Julián
JUEVES	17.00-18.00	Parque San Julián
VIERNES	20.00-21.00	Parque San Julián

Para la realización de la tabla, hemos llevado a cabo el establecimiento del siguiente código:

<table "horario="" border="1" ciudad="" cuenca="" cuentacuentos="" de"="" de="" summary="" y="">
<caption style="font-size: 120%; font-style: bold;">Horario de Cuentacuentos de Cuenca</caption><caption style="font-size: 120%; font-style: bold;"><br /></caption>

<tbody>

<tbody>

<tr>

<th scope="col">LUGAR</th>

</tr>

<tr>

<td>LUNES</td>

<td>Parque San Julián</td>

</tr>

<tr>

<td>MARTES</td>

<td>Parque San Julián</td>

</tr>

<tr>

<td>MIÉRCOLES</td>

<td>Parque San Julián</td>

</tr>

<tr>

<td>JUEVES</td>

<td>Parque San Julián</td>

</tr>

<tr>

<td>VIERNES</td>

<td>Parque San Julián</td>

</tr>

</tbody>

</table>

Paso 12: Acrónimos

Cada vez con más frecuencia podemos observar un mayor número de acrónimos en los artículos y, sobre todo, si éstos escritos tratan temas específicos con un vocabulario más técnico.

De esta forma, en la asignatura que estamos cursando, podemos observar diversos acrónimos, como por ejemplo HTML , CSS o W3C , que pueden ir especificado, entre paréntesis, su significado o, por el contrario, podemos realizar una modificación del código HTML mediante cuadros emergente (tooltip), como hemos realizado en los acrónimos anteriores.

Para ello, lo hemos desarrollado de la siguiente forma:

Paso 11: No abrir nuevas ventanas

Como usuarios frecuentes de Internet, nos damos cuenta de la problemática que reside en las aperturas de nuevas ventanas para redirigirse a un contenido que estás buscando.
Este asunto cobra mayor relevancia si son personas con dificultades sensoriales o intelectuales los usuarios de éstos contenidos, llevando a convertirse en un asunto, además de molesto, muy perjudicial para el aprendizaje y uso cotidiano de las Nuevas Tecnologías.
En relación a nuestro Blog hemos realizado diversas acciones para eliminar la apertura de las ventanas de los iconos de Twitter, Facebook, Blog y del correo electrónico. Por tanto, hemos eliminado o modificado, en su caso, ciertos códigos como los siguientes:

target='_blank'

"_blank

_blank

Paso 10: Atajos de teclado

Un usuario de la web, una vez controlado a un nivel básico aquellas herramientas que nos proporcionan las Nuevas Tecnologías, se empiezan a buscar una serie de "atajos", es decir, hacer su uso lo más cómodo posible, economizando en tiempos y, a veces, largos procesos que pueden dificultar nuestro trabajo.

De tal modo, en este paso se quiere resalta la importancia de diversos atajos que llevamos a cabo de forma diaria cuando, por ejemplo, utilizamos diversos procesadores textos e incluimos en nuestro proceso las "famosas" teclas de "Ctrl+c o Ctrl+v".

En nuestro Blog, también queremos indicar ciertos atajos, que, además de beneficiar a todo los usuarios, darán un uso accesible a nuestro Blog para aquellas personas que utilice un lector o el propio teclado para su navegación. Por tanto, hemos modificado nuestra plantilla de la siguiente forma:

</body>

Tal como hemos indicado, los atajos que podemos llevar a cabo son los siguientes (utilizando Google Chrome):

Alt+1-> Página principal del Blog.

Alt+2-> Salta la barra de navegación.

Alt+9-> Contacto

Paso 9: Vínculos correctos y con títulos

Como podemos ir viendo a lo largo de nuestro manual, la importancia de los vínculos se considera de forma esencial para la propia construcción, accesibilidad y utilidad de una página. Por tanto, todo ellos deberán estar organizados y establecidos de forma totalmente correcta.
Cuando navegamos por Internet, nos damos cuentas de todos aquellos vínculos que, a veces, quedan descontextualizados o, por algún motivo, no se da la mínima información de cuál va a ser el contenido al que te va a redireccionar dicho vínculo.
De esta forma, debemos establecer nuestro diseño atendiendo a esta perspectiva, ya que así ganaremos en el manejo y utilización de nuestra web y, sobre todo, para beneficiar aquellos usuarios con problemas de aprendizaje que no puedan acceder a diversos conocimientos y relaciones de vínculos sin indicaciones directas.

Paso 8: Vínculos reales

En este paso nos centramos en el uso de "javascript", considerándolo como una técnica que puede complicar el uso accesible y el uso ordinario del propio Blog.
Para ello, el manual nos propone una idea principal, que es anular siempre que podamos esta opción, para ampliar el desarrollo y funcionalidad de nuestra página.
Por su parte, Blogger no desarrolla el uso de JavaScript, por lo que no realizaremos ninguna modificación expresa para tal fin.

martes, 15 de mayo de 2012

Paso 7: El uso de los colores

En el paso número siete, nos hemos centrado en la aplicación y uso de los vínculos para que sean percibidos por aquellos usuarios con dificultad visual.
De esta forma, también debemos centrarnos en los propios colores de nuestra plantilla, estableciendo que los contrastes entre fondo y letra puedan ser visto sin problemas. De esta forma, considero que el contraste de blanco (fondo) y azul (letra) encaja con los criterios de imagen y accesibilidad.
En relación a los vínculos, estos deben estar diseñados para proporcionar la información que se requiera, en relación a: información ya visitada, la desaparición de una información o la propia visualización e indicación de dónde está.
De esta forma, hemos establecido una modificación en la plantilla, indicando los caracteres de la siguiente forma:

a {

color:#3333FF;

text-decoration:underline;

font-weight:bold;

}

Paso 6: Colocar primero el contenido principal

Como se nos comenta en el manual de la asignatura, debemos tener muy en cuenta cómo va a estar distribuido todo el espacio de nuestro Blog, para poder beneficiar la accesibilidad del contenido principal.
Los lectores de pantalla, que utilizan los usuarios con alguna dificulta audiovisual, realizan una lectura de todo el contenido que aparece en la pantalla. Por tanto, si hemos diseñado nuestra pantalla con el menú de los diversos post en la parte derecha, cada vez que pase de pantalla, volverá a ser leída la misma información en cada una de las páginas, estableciendo una pérdida de tiempo y distracción del contenido al que se quiere acceder.

En nuestro caso, al haber seleccionado una plantilla con el menú de los post en la parte derecha de la pantalla, no deberemos realizar modificación alguna en relación al paso número seis.

lunes, 7 de mayo de 2012

Paso 5: Ayudas adicionales a la navegación

Cuando navegamos por Internet, resulta muy interesante encontrarse con una serie de páginas que tengan una conexión total entre los contenidos que el propio usuario está buscando.
Ello hace referencia a técnicas de navegación, como pueden ser el reconocimiento de enlaces, la coherencia de la propia navegación, la guía estructural o la aparición de páginas huérfanas, el seguimiento por elemento de guía o el propio tipo de navegación.
Como ya sabemos, Blogger es una herramienta queda bastante limitada en éstos aspectos, pudiendo establecer, como único elemento, el acceso rápido a la página principal.
Por tanto, y estableciendo la modificación del código indicado, lo hemos establecido de la siguiente forma:

<head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<link href='$http://jesusargudodiseno.blogspot.com.es/$' rel='Principal' title='Página principal'/>

Paso 4: Elegir un título significativo

La elección del título de todas las partes de un blog o un bitácora es una ardua tarea, pero que su buena utilización pueden ayudar a la comprensión y la accesibilidad de todo el contenido que se establezca en la Web.
De esta forma, tal como nos indica los manuales de la asignatura, la elección de un título claro y conciso planteará una ayuda esencial para todas aquellas personas que, por sus limitación físicas, psíquicas o sensoriales puedan tener dificultades en su acceso y comprensión.
La utilización de Blogger, beneficia éste recurso, ya que su estructura y planteamiento permite la identificación de todos los títulos con su contenidos de forma automática, por lo que este proceso no variará de lo establecido por la propia plantilla escogida.

Paso 3: Identificar el idioma

La identificación del idioma principal que vamos a utilizar en nuestro Blog es uno de aspectos más importantes que debemos establecer para una buena accesibilidad web.
Las personas con dificultades visuales, pueden acceder a la red a través de distintos lectores de pantalla, para que les sea transmitido, de forma oral, todo el contenidos que pueda aparecer.
Por tanto, es uno de los pasos más importantes que debemos tener en cuenta a la hora de realizar un Blog accesible.
De esta forma, para el blog que estamos construyendo vamos a establecer el castellano de forma preferente, modificando el código que hace referencia al lenguaje de la forma que sigue:

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' lang='es' xml:lang='es' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Paso 2: Elegir un DOCTYPE

Un DOCTYPE es una declaración de tipo de documento, cuyo objetivo esencial es la propia identificación del propio tipo de documento.
Su elección contribuye, especialmente, al propio funcionamiento de la Web que el usuario quiera visitar, ya que su propia codificación va a depender de las características que se elijan en él.
Como nos comenta los documentos de la propia asignatura, Blogger beneficia todo su desarrollo en cuanto a la codificación de DOCTYPE ya que viene desarrollada de forma automática, por lo que este paso lo consideramos de propia observación y ampliación de conocimientos.

domingo, 6 de mayo de 2012

Paso 1: ¿Para quién es la accesibilidad web?

Nos encontramos en un Blog dedicado al desarrollo de la accesibilidad Web, que se injerta en la asignatura de "DISEÑO PARA TODOS" del Máster Universitario En Comunicación Y Educación En La Red: De la Sociedad de la Información a la Sociedad del Conocimiento, de la UNED.

En el día de hoy, me dispongo a desarrollar la primera entrada de lo que, en un futuro, vamos a intentar que sea un blog accesible. Pero para ello debemos saber ¿qué es la accesibilidad?

La accesibilidad hace referencia a todas aquellas técnicas, herramientas y procesos que nos van a ayudar, a toda la ciudadanía, a acceder a la Web y a los contenidos de ésta independientemente de sus condiciones y características personales, siempre en condiciones de igualdad de acceso al contenido.

De esta forma, llevaremos a cabo 21 pasos, que nos darán las características propias de una Web lo más accesible posible.