Estos cursos se realizan on-line a través de la plataforma SUMA y tienen un precio de 100 €.

En el primer curso los temas tratados fueron:

1. Diseño de sitios web (XHTML + CSS)
2. Usabilidad y Accesibilidad
3. Arquitectura de la información

Cada tema consta de un examen tipo test de 10 preguntas y una propuesta de ejercio final. De entre los tres ejercicios propuestos solo será necesario realizar uno. A diferencia de lo que pueda parecer al principio los examenes son muy fáciles de superar, pero el ejercicio final es algo más laborioso y que tendremos que cuidar.

Una vez superado los 3 exámenes y realizado correctamente el ejercicio evaluable se te acredita con un título.

Personalmente he quedado muy satisfecho con los conocimientos asumidos durante el curso obteniendo además un 9,56 de media en los exámenes y un 10 en el ejercicio evaluable. Fue bonito cuando la profesora me dijo que el ejercicio estaba casi perfecto, no obstante no me dijo que estaba mal para ser perfecto. Pero lo cierto es que resbisando el ejercico, una vez entregado, me di cuenta que no puse los longdesc de la imagenes (mecachis en la mar) supongo que se referiria a esto.

El programa para el segundo curso es:

• Trabajando con la Web estructuradamente
  • Usabilidad y Accesibilidad Web.
  • Concepto de modelo de documento.
  • ¿Qué nos enseña la Arquitectura de Información para sitios web?
  • La capa estructural en el diseño Web: El largo viaje desde el HTML al XHTML.
  • CSS con estilo.
  • Una sola meta, muchos caminos: Diseñar para diferentes dispositivos.
  • Herramientas de validación y análisis de la accesibilidad.
• La Web también es programar
  • Lenguajes de scripts en el cliente: ¿El reverso tenebroso de la Web?
  • Lenguajes de servidor.
• Los Sistemas de Gestión de Contenido
  • ¿Sabemos lo que es y lo que implica la gestión de contenidos?
  • Definiendo el modelo de gestión de contenidos.
  • CMS: ¿Por qué? ¿Donde? ¿Cuando? ¿Cómo? ¿Quien? ¿Qué?
  • CMS y la Web 2.0.
  • CMS generales vs CMS especializados.
  • WordPress, Joomla, Drupal…
  • CMS y SEO. Aprendiendo a posicionarnos correctamente.
• Hacia la Web Semántica.
  • ¿Qué es la Web Semántica?
  • XML: El origen de todo.
  • Metadatos, sindicación de contenidos, RDF/RDFS y OWL.
  • ¿Es factible la Web Semántica?

Lo cierto es que los temas tratados se pueden aprender de forma auodidactica pero ralizando estos curso obtienes varias ventajas

• Un certificado de tus conocimientos que simpre van bien para pedir trabajo.
• Todo lo que necesitas aprender en un mismo sitio y con muchos enlaces y recursos para profudizar más.
• Un profesorado de calidad al que puedes pregunar tus dudas.

Además el curso tiene un precio muy asequible, 100€, comparado con otros cursos de mismas o similares caracteritiscas, por lo que no me custa pagarmelo yo solo y no tengo que ir a llorar al jefe para que me lo pagué, cosa que ya podría. Si buscas encontras casi lo mismo pero por 300€ o mucho más, así que mi solo me queda ir al banco para realizar la tranferencia del pago del segundo curso.

Recientemente he realizado un curso sobre usabilidad y accesibilidad con esta plataforma y lo cierto que pese a los buenos, muy buenos, resultados obtenidos  en el curso, todo a sido algo paradójico. Si, muy paradójico, porque se estaban tratando unos temas que para nada eran aplicables a la plataforma.

Bueno, primero hay que entender que la plataforma SUMA es antigua y se desarrolló en la época de los frame’s y los popup’s, no obstante, desde que inicie mis andadas en Internet siempre he tenido una cosa muy clara, Internet es para todos  no solo para freaks. Así que no me explico como se han echo tantas barbaridades con JavaScript y frames a lo largo de todo este tiempo.Nada más empezar encontramos el primer problema:

• La página de acceso de usuarios (login) tiene 3 formularios en 1.

Chicos, esto no es Carrefour, no puedes hacer 3 formularios que en realidad son 1 y que se discriminan los datos con JavaScript. Y para más inri, cuando Firefox te pregunta si quieres recordad la contraseña (y le das a que “SÍ”)  y vuelves a visitar la página para acceder a la plataforma te pone los datos que introdujiste en el formulario que no toca, y vete a saber por que.

• ¿Dónde esta el curso?

Cuando entras a la plataforma por primera vez lo primero que te preguntas es si te han timado, pues lo dificil es ubicarse y encontrar el material de estudio del curso. Son necesarios 5 clicks desde la pagina principal del campus hasta llegar al contenido propiamente dicho de un temario y el penultimo click abre un popup por lo que para leer correctamente el temario deberás copiar la ruta del enlace y volver a la ventana principal.

• Ya encontrado mi asignatura ¿ahora que?

Supongo que la web se pensó para los usuarios de 800×600, normal, hasta hace poco no podíamos olvidarnos de ellos, pero igualmente todo se desordena en la página de las asignaturas. De entrada no sabes que iconos se asocian exactamente a los links, y estos pro si solos confunden más que ayudar.

• Dame un poco más de espacio para escribir ¡Y para leer!

Las cajas para leer los mensajes y o escribirlos son pequeños y los botones de “enviar” son links casi invisibles en la parte !superior izquierda!

En definitiva no nos vamos a paranos a hablar de accesibilidad dado que la usabilidad es nula, y menos cuando se usa frames y popup’s, y tras usar la plataforma con Firfox no quiero pensar la experiencia que habría sufrido de usar IE6

Al lanzar el plugin nos mostrará una página html con la comprobación de  todos los colores de nuestros textos con sus respectivos fondos donde nos marcara en amrillo las combinaciones que no sean corectas y no superen el test de accesibilidad.

Los mejores consejos que se pueden dar para hacer una web accesible tal vez se puedan resumir en dos:

• Usar el sentido común
• Validar el código XHTML y las hojas de estilo CSS según los estándares del W3C

Lo difícil es seguir estos dos consejos pero esta claro que no todo queda aquí y probablemente no tengamos ni medios ni dinero para hacer pruebas de usabilidad y accesibilidad satisfactorias.

Voy a evitar lo obvio, como separar el código de los aspectos visuales no usar contenido dinámico ni efectos JavaScript, etc. Todo esto ya lo sabemos. Por eso os propongo una serie de claves para lograr una web accesible.

Tipografía

1. Usar tamaños de fuentes legibles. Algunos dicen mínimo 11px. Yo te diría 12 o incluso 13px.
2. Usar tamaños relativos (em) y nuca pixeles (px).
3. Mejor no usar el elemento small. Remplazalos por un span y usa CSS

Maquetación

1. Usa tablas solo para mostra datos tabulares. Y no uses tablas dentro de tablas.
2. No te olvides de poner un sumario a la tablas, usa pare ello el atributo summary en el elemento table.
3. Pon un titulo a las tablas, usa el elemento caption dentro de la tabla antes de la cabeceras.
4. Usa correctamente los títulos h1, h2, h3, etc. Y con sentido lógico, no pongas un h3 si antes no has puesto un h2. Encontrarás quien te diga que solo puede haber un h1, yo creo que eso depende del formato de la web. Si se trata de un documento tiene sentido, pero no si se trata de un blog, que cada entrada tiene un titulo.
5. No anides elementos de bloque (p, noframes, table, blockquote, ul, ol, dl, h1-h6, etc.) dentro de elementos que no lo son (strong, em, a, etc.)
6. Evita los elementos vacíos como divs o p. Sin embargo, no te aparecerán warnings cuando usas un div con una clase, típico caso cuando usas la clase clearfix: <div class=”clearfix”></div>.
7. No te olvides delos alt en las imágenes y usa también el atributo title.
8. Tampoco te olvides del title en los links.
9. No uses el atributo target en los elementos a.
10. En los links, no uses el mismo texto para el titulo que para el propio texto.
11. No te inventes atributos, si hay gente que lo hace.
12. No uses popups ni efectos de Javascript. Si lo usas asegúrate que la página funciona bien con el Javascript deshabilitado.
13. Proporciona contenido alternativos a los objetos multimedia, object.

Formularios

1. Pon los campos dentro de los elementos label. Y usa el atributo for del elemento label para relacionarlo con el campo, usando como referencia el id del elemento.
2. Siempre que puedas pon valores por defecto a los campos de entrada.
3. Valida los campos del formulario simpre desde el lado del servidor. Los scripts son un añadido para dar más usabilidad, el formulario debe funcionar correctamente sin ellos.
4. No pidas datos inecesarios.
5. Captchas y accesibilidad hoy por hoy son dos cosas incompatibles. El W3C es conciente de los problemas de accesibilidad generados por los captchas.

A todo esto seguro que te preuntarás que si no podemos usar poups, JavaScript, ni el atributo target con el valor  _blank para abrir un link en otra ventana ¿como lo hacemos para poner el link de “Acepto los condiciones legales…”, “He leido..”, etc. sin que el usuario pierda todo lo que ha introducido? Yo mismo me lo he preguntado muchas veces, pero eso lo vermos más adeletante.

Por ahora el blog pasa sin problemas el test de accesibilidad de HERA de nivel A. Para el nivel AA, tan solo queda por omitir esos estilos no soportados por el CSS 2.1 (opacity, border-radius, etc) y los no propietarios (-webkit-border-radius, -moz-border-radius) lo cual afectará sensiblemente en algunas tareas de maquetación y diseño. Por ahora diseño y accesibilidad estan un poco reñidos.Para pasar el test de la tripe AAA la cosa se complica un poco más. Fallo en 2 puntos. El más complicado de solucionar es el que se refiere a:

Hasta que las aplicaciones de usuario (incluidas las ayudas técnicas) representen de forma diferenciada los enlaces adyacentes, incluya caracteres imprimibles no enlazados (rodeados de espacios) entre los enlaces adyacentes. (Prioridad 3)

Esto sucede al poner los link un al lado del otro sin algún elemento que los separe. La solución parece fácil poner una barra horizontal (|) entre cada link, pero para la nube de tags no queda visualmente bien, así que entonces la solución pasa por usar listas, no obstante, el resultado visual no me convence.

El otro punto a arreglar es el que se refiere a:

Hasta que las aplicaciones de usuario manejen correctamente los controles vacíos, incluya caracteres por omisión en los campos de edición y áreas de texto. (Prioridad 3)

Es decir que no se pueden dejar inputs vacíos. Siempre he considerado que no es para nada usable un input text con un valor por defecto, más tratándose de campos que no puedes inventarte como nombre, email o un comentario. No tiene sentido ofrecerle al usuario un valor por defecto.

No obstante, quizás sea mejor optar por lograr la AA.