Para los que estoy hablando en chino, la WAI , tal y como manifiesta Olga Carreras, es un grupo de trabajo que se dedica a promover soluciones de accesibilidad en la web para personas con discapacidades, en donde su foco principal recae sobre cinco áreas de trabajo:

• Asegurar que las tecnologías web den soporte a la accesibilidad
• Desarrollar pautas de accesibilidad
• Crear herramientas de evaluación y corrección de la accesibilidad web
• Desarrollar materiales para la educación y difusión
• Coordinar proyectos de investigación y desarrollo

Pues bien, las WCAG 2.0 fue lanzada oficialmente a finales del 2008, con un total de 12 directrices (guidelines), definiendose 60 criterios de comprobación que definen los diferentes tipos de nivel de accesibilidad (A, AA o AAA). Hasta ahora no se contaba con ninguna traducción al español (o al menos yo no la había encontrado), pero gracias a las listas de correos de cadius me vine a topar con el excelente aporte que nos ha dejado José Ramón.

Has click aquí para acceder a la traducción al español de las guidelines  de la WCAG 2.0

© admin for Juan Ortega, 2009. | Permalink | 2 comments | Add to del.icio.us
Post tags: Accesbilidad, buenas prácticas, WCAG 2.0

Feed enhanced by Better Feed from Ozh

El otro día pasando por el sitio de NetTus (lo cual recomiendo que la visiten), me encontré con un artículo que me llamó mucho la atención,  este se titula Are You Making These 10 CSS Mistakes? en el cual listan una serie errores básicos que cometemos muchos diseñadores a la hora de maquetear con CSS, ya sea por falta de conocimientos o simplemente por estar de boludos xD.

A continuación les dejo la lista publicada en ese sitio, con una explicación de mi parte, y por último añadiré algunos errores que he cometido y que he visto que cometen muchos por acá.

Ignorar a los Navegadores (Incompatibilidad)

A como todos saben estamos en las vísperas de una 2 guerra de navegadores (IE, Firefox, Google Chrome, Safari, Opera),  y todos estos renderizan a su propia manera, bueno en algunos la diferencia es casi mínima y a los ojos de un simple mortal es nula, pero en el caso particular del IE (Internet Explorer) son otros 100 pesos, este navegador es el peor que he visto, cada versión de IE renderiza a su manera, y diseñar exclusivamente para él es ponerse la soga al cuello.

El pecado que comenten muchos de aquí, es diseñar exclusivamente para IE,  dejando desamparados a la mayoría de usuarios que utilizan otros navegadores,y para no hacerles tan largo el cuento, tu sitio no será accesible  y perderás muchos visitantes ya que la experiencia al visitar tu sitio será un pain in the ass!!.

Para evitar esto, te aconsejo que verifiques durante toda la etapa del desarrollo la compatibilidad del sitio en diferentes Navegadores , puedes utilizar el servicio de Browsershots para darte una imagen de tu sitio en los diferentes navegadores, de igual forma Firefox tiene una extensión llamada IE tab donde emula la renderización del IE matando 2 pájaros de un tiro, o como casi siempre el problema de todos diseñador es el maldito IE, te podes instalar el IE Tester donde emula las versiones de IE 5.5, 6, 7 y 8 BETA.

No tomar en cuenta las resoluciones pequeñas

El autor del articulo original lo considera como un error garrafal no tomar en consideración las resoluciones mínimas ej: 800×600. Yo no estoy totalmente de acuerdo, ya que esta resolución esta prácticamente muerta,  pero si lo mas aconsejable es que consultes las estadísticas de tus visitantes, y verifiques todas las resoluciones de pantalla que tienen ellos, y si tienes una gran cantidad de visitantes cuya resolución sea de 800×600 es probable que tengas que adaptar un poco tu sitio. Existen varias soluciones de Javascript que te permiten identificar la resolución del navegador y  cargar diferentes archivos css de acuerdo a estos.

No utilizar los Frameworks de CSS

Otro punto que puedo diferir con el autor del artículo, pa los que no saben que son los Frameworks de CSS, son archivos de CSS ya hechos, en otras palabras son pequeños templates, listo para ser utilizados. Entre los fanáticos de los frameworks aclaman que utilizarlos tiene sus ventajas, ya que evitan programar el código de CSS desde cero, te ahorras tiempo, y son reutilizables. Es cierto estas ventajas son factores importantes que te pueden sacar del clavo, pero por ejemplo a mi me gusta estar en control de todo el layout del sitio, y sobre todo aprendo mucho cada vez que programo el css desde cero.

No utilizar nombres de clases genéricas

Les tengo que ser sincero, este es el error #1 que cometía muchas veces y que ahora trato de no cometerlo, hay veces que por el tiempo comenzas a nombrar las clases o ids de los elementos, y colocas unos nombres bien extraños o bien pajistas, que a la larga después de un cierto tiempo andas perdido en el espacio preguntándote donde jodidos ocupaste esa clase.

Lo mejor es nombrar los elementos de css según su funcionalidad en el sitio y no por su diseño, no es lo mismo tener una clase llamada “rojo” que una llamada “enlacesExternos”. Por lo general utilizo algunos nombres genéricos como: menu, sidebar, header, menusec, wrapper, footer.

No validar el código HTML

Antes me quebraba el coco, tratando de que los divs se me acomodaran, y utilizaba una cierta cantidad de propiedades del css para componerlos, y nada!, cual era el problema?? una etiqueta mal cerrada, PUFF!! (Al estilo condorito). Ahora utilizo el plug in de Firefox para debug el css y ver si es el código HTML es el que me  esta dando el problema- Por eso adoro Firefox!!.

No validar el código CSS

Si vamos a validar el código HTML es necesario también validar todo el código del CSS, en el podemos encontrar pequeños errores e inconsistencias en nuestro código. Para validar el css, chequense el validador CSS de la W3C. Este validador es bien riguroso, y hay veces donde los errores que muestra son un poco confuso, bueno al menos para mi .

Utilizar imágenes exageradamente grandes como fondo (Sindrome BN)

Existen ocasiones donde los diseñadores ocupan unas imágenes de fondo bien grandes como parte del layout del sitio, tampoco es pecado usarlos, existen buenos ejemplos por la web. No obstante Existen ocasiones donde el fondo son imágenes degrados, y colocan la gran imagen de fondo, causandola que sea mas pesada, donde se puede perfectamente tener 1px ya sea de widht o height  y darle la propiedad de background: repeat-x o repeat-y dependiendo el caso y listo.

En WebdsignerWall existe un interesante artículo sobre como manipular las css con imágenes de fondo de gran tamaño.

Usar inline CSS

Inline css es cuando insertamos código dentro del código html, ej:

<a href=“holamundo.html” style=“float: right; color: rgb(51, 51, 51);”>Hola Mundo</a>

El chiste de utilizar las CSS, es que separemos el código (XHTML) del diseño (CSS), por lo que utilizar Inline CSS no vamos por buen camino, y se nos haría difícil al momento de querer modificarlo.

El único caso donde recomiendo utilizar CSS es a la hora de enviar boletines de noticias a los correos de los usuarios- Esto tema lo cubriré en un prox. post.

Utilizar muchos archivos CSS

Es de ciencia cierta que la mejor manera de administrar el diseño de un sitio bien grande, es utilizar varios archivos CSS  lo cuales son importados desde un archivo CSS Master. Esta es una forma de optimizar la administración del CSS haciéndolo más manejable. No obstante algunos diseñadores, ocupan esta técnica muy exageradamente, donde importan un archivo de CSS para cada cosa, provocando que el navegador haga demasiados request al servidor, por lo que hace más lento el sitio.

Si vas utilizar esta técnica divide tus archivos CSS, con un orden funcional ej: un css para la tipografia, otro para los hacks, otro para el layout, entre otros. pero ojo!!  no abuses mucho.

Errores que he cometido

Tal y como manifesté al inicio de este post, existen algunos errores que he cometido a lo largo de mi ilustre carrera , y que he observado que se cometen muchos. Aquí les va mi lista

No utilizar los CSS Resets

Para quien no lo sabe, casi prácticamente todas las etiquetas (ej: las etiquetas h), traen valores por defectos en algunas de sus propiedades, causando hay veces que nuestro diseño no se vea deacorde al wireframe que hayamos creado, por tal razón existen reseteadores de CSS que restauran a cero todas las propiedades de las etiquetas.  Es una técnica muy utilizada y útil.

Recomiendo el Eric Meyers CSS Reset, aunque existen algunos otros en la web

No utilizar los Shorthands

Shorthands son como los shortcuts del css, existen algunas propiedades en CSS donde se pueden reducir la forma de declaración de cada una de ellas.

Por ejemplo tenemos la propiedad padding, la podemos declarar en 2 formas diferentes:

margin-top: 1em; margin-right:0; margin-bottom: 2em; margin-left:0;(Notación estándar)

margin: 1em 0 2em 0 (Notación Shorthand)

Ambos ejemplos cumplen con la misma función, lo único que varía, es la forma de declararlas, los shorthands sin duda alguna son de mucha utilidad ya que te ayudan a reducir considerablemente el tamaño del archivo CSS.

Entre las propiedades del css que se puede utilizar shorhands tenemos : background, border, border-color, border-style, border sides (border-top, border-right, border-bottom, border-left), border-width, font, list-style, margin, outline, and padding

No utilizar los comentarios

No muchos podrán coincidir con esta, ya que obviamente dependiendo de la frecuencia con que comentas una propiedad puede causar que tu css crezca de tamaño. No obstante por lo menos en mi caso lo utilizo para hacer algunos comentarios que son de gran importancia y que tienden a incidir considerablemente en el diseño del sitio, de igual forma ocupo los comentarios para realizar la estructura de todos los bloques de css que voy agrupando, algo así como un mapa del sitio para el CSS ej:

ESTRUCTURA

-------------------------------------------------

1. =GLOBAL                5. =FORMS

2. =DIVSLAYOUT 	          6. =TABLES

3. =HEADERS

4. =MENUS

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

No utilizar a Firefox como herramienta de debug

Al momento que tocaba debug grandes cantidades de código, me era imposible hacerlo rápidamente y para que, le soy sincero, hasta canas verdes me sacaron!!. Pero gracias a los maravillosos plug ins de la comu de Mozilla firefox,  se me ha hecho el trabajo más fácil. Los plug ins a los que me estoy refiriendo son:Firebug, y Web Developer con estos babies puedo  ver, analizar y testear todo tu código tanto css como xhtml de forma rápida y eficiente, asi que es un MUST para todos los diseñadores y desarrolladores.

Bueno eso sería todo por el momento, se que para algunos son errores de novatos otros no relevantes, pero venga!!, que en este pais no todos son duchos en esta materia.

© admin for Juan Ortega, 2008. | Permalink | One comment | Add to del.icio.us
Post tags: buenas prácticas, css, diseno

Feed enhanced by Better Feed from Ozh

Hoy en día los móviles- entiéndase por PDA, Celulares, ipod touch, smartphones, etc.  Se han convertido en la herramienta por excelencia para acceder a Internet, estos poseen un sin número de funcionalidades necesarias no solo para comunicarte sino para estar conectado con el mundo entero, y todo esto tan solo en la palma de tu mano, no en vano se les denomina como las herramientas de socialización del futuro.

A nivel nacional, el nivel de penetración de los celulares ha aumentado considerablemente, de igual forma contamos con una buena infraestructura celular con la tecnología GPRS/EDGE  que ya esta bien asentada, o con la nueva coca cola del desierto la Tecnología 3G que se está expandiendo.  Desafortunadamente el factor costo-servicio y costo- equipo, son relativamente altos, para una economía bien apaleada como a nuestras, pero en el momento que estos factores lleguen a reducirse (esperemos), nos encontraremos con una nueva ola de usuarios sedientos por acceder a nuestros sitios web, ocasinonando nuevos servicios móviles (m-services), e inclusive nuevas metodologías de gestión públicas (m-goverment).

Pues bien, esta “nueva” forma de navegación , nos plantean nuevos desafíos para todos los profesionales involucrados en desarrollar sitios Web, metodologías como DCU (diseño centrado al usuario), y la utilización de códigos estándares y validados, se convierten ya en un requisito indispensable, por lo que se se tendrá que tener en mente desarrollar una interfaz accesible, y enfocada exclusivamente al contenido.

Nuestros hermanos chilenos, ya están empezando a cuestionarse sobre el desarrollo de sitios web en dispositivos móviles, por lo que durante el IV Seminario de Arquitectura de la Información, el cual no pude verlo por internet >=(, mi gran amiga Darcy Vergara, realizó una presentación sobre la arquitectura de la información en la navegación móvil, que vale la pena chequearlo, se los recomiendo.

Quieres más

Para mas información sobre este tema, darcy puso a disposición el paper de esta presentación, con muchísima mas información al respecto:

• Descargar paper : AI aplicada a móviles (pfd y 676 KB)

© admin for Juan Ortega, 2008. | Permalink | No comment | Add to del.icio.us
Post tags: AI, arquitectura de información, buenas prácticas, evangelización, móviles

Feed enhanced by Better Feed from Ozh

Pues bien, tras realizar un breve análisis de los errores de diseños de los sitios web gubernamentales (esperen un análisis mas detallado prox.) , llegué a la terrible conclusión de que existe un cierto desconocimiento de como crear un sitio web usable, y por usable no me refiero a la típica frase “user-friendly” la cual todo mundo tiene la concepción de que se trata solamente del aspecto visual de un sitio, sino me refiero a un Diseño “DCU” , que quiere decir diseño centrado al usuario. A lo largo, de este artículo, estaré dando algunos consejos, de como diseñar sitios web usables, al menos desde una perspectiva funcional, la parte estética visual es algo empírico, no es una receta de cocina, es algo que requiere un proceso mas complejo que requiere tiempo pero sobre todo dedicación.

La frase trata a los demás como quieres que te traten a ti, se aplica perfectamente en este medio, a la hora de navegar por Internet.

Una vez alguien me cuestionó seriamente del porque deberíamos de desarrollar sitios web estándares ya que le parecía una perdida de tiempo, lo cual me pareció totalmente absurdo de preguntar, pues bien, es necesario hacerlo porque hay que comenzar aprender hacer las cosas de la manera correcta, porque los buscadores nos querrán indexar un poco más, pero sobretodo, por mejorar el nivel de satisfacción del aquel usuario que llega a tu sitio web en busca de un producto, servicio o simplemente por algún tipo de información y que podrá convertirse o no, en un potencial Cliente.

Para comenzar debemos de tener en cuenta ciertas cosas :

• El tiempo en Internet es tu mayor enemigo, los usuarios son impacientes.
• Los usuarios no leen, escanean.
• No todos navegan de la misma forma.
• No todos usan los mismos navegadores.

Dicho esto tenemos que tener en cuenta  que existen una infinidad de consejos, trucos o técnicas para mejorar tu sitio web, las que muestro a continuación son apenas una pequeña muestra, pero que sirven como directrices durante la el ciclo de vida de un proyecto web.

Diseña un sitio fácil de Navegar

Me he encontrado con sitios cuyos menús son poco intuitivo y que llegan a tener hasta 7 u 8 opciones, así como también extensos párrafos de bienvenida que nadie lee o banners publicitarios causando que tu sitio se vea como un lindo árbol de navidad.

Para evitar eso, la mejor estrategia es ponerte en los zapatos del usuario, diseña tu sitio a como piensan ellos, para esto puedes:

1. Revisar las estadísticas de tu sitio
   En ella encontrarás valiosa retroalimentación que te permitirá identificar cuales son las secciones más visitadas.
2. Aplicar técnicas de card sorting
   Card Sorting es una técnica de agrupación de la información en base al modelo mental de los usuarios, muy útil a la hora de estructurar la navegación del sitio.
3. Realizar un Benchmarking
   Visita otros sitios de tu mismo mercado para identificar ciertos aspectos estructurales que pudieran ser provechosos.
4. Pon a prueba tu sitio
   Realiza test de usabilidad con los usuarios target del sitio, ya por último pídele a algún familiar o colega tuyo que navegue por el sitio, asignale algunas tareas como encontrar cierta información, y verás que en tiempo record siempre encontrarán algún error e inconsistencias que tu no viste, si es posible hay que involucrarlos desde las primeras etapas del desarrollo de tu sitio, de igual forma hay que realizar test heuristicos, para verificar que tu sitio cumple con los criterios necesarios de usabilidad.

Usa CSS

Antiguamente las css se ocupaban para el estilo de las fuentes, y las tablas para la maquetación, pues ya no, ahora con las css tenemos la facilidad de maquetear todo el sitio, el tamaño de la página se reduce considerablemente, de igual forma, lograremos separar el diseño del contenido por lo que tendremos un código más limpio y un diseño fácil de administrar.

Escribe para la Web

Ve al grano, elimina aquellas introducciones todas pomposas que nadie lee, de hecho, existen estudios que indican que el usuario promedio solo lee el 20% de lo que aparecen en la pantalla, ellos escanean en busca de palabras claves que les interesan, por lo que una lectura extensa es muy poco probable que la lean.

Los dos primeros párrafos deben contener la información más importante (efecto pirámide invertida) y haz uso de viñetas, negritas para destacar el contenido para mejorar la encontrabilidad (Findability) de la información, por último emplea el uso de los enlaces para no interrumpir el flujo de la lectura, no es lo mismo tener un enlace asi www.elnuevodiario.com.ni, que el nuevo diario, de igual forma hay que saberlos destacar de los otros elementos.

Utiliza código semántico

Utiliza las tags de manera correcta, bajo el contexto en que ellas fueron creadas, ejemplo:

• La tag <table> fue creada para exibir datos tabulares y no para maquetear los sitios.
• Usar las tags como h1, h2, h3, etc, para declarar los títulos.
• Todo lo que sea enumeración utilizar las tags <ul> (lista sin orden) o <ol> (lista ordenada).
• En los formularios utilizar la tag <label> (rótulo) para declarar el nombre de los campos.
• Utiliza la tag <p> para los párrafos.

Emplea técnicas de SEO

SEO significa Search engine optimization, son las técnicas necesarias que nos permitirán ganar posicionamiento en los buscadores, una gran parte de los visitas nuevas de un sitio provienen de alguna búsqueda. Comencemos por utilizar las etiquetas keywords, title y description como técnica básica para mejorar el posicionamiento de tu sitio.

No abuses de Flash

No recomiendo diseñar un sitio web completamente en flash, ya que tu sitio se convierte en un producto enlatado, difícil de indexar para los navegadores, y muy pesado para cargar.

Evita colocar fastidiosos intros, que desespera estar esperando casi una eternidad, para una animación de 20 segundos, pero sobre todo, repitan conmigo: NO colocar música en tu sitio, y peor si no se coloca algún mecanismo para detener la música.  Pónganse la mano en la conciencia, el usuario no la ha pedido, interrumpe la navegación y disminuye el grado de satisfacción. Imagínense si un usuario está navegando en un cyber, en una biblioteca, o simplemente está escuchando su propia música en su compu, y se topa con en este tipo de sitios, es algo realmente fastidioso .

Usa colores amigables, se amable con los ojos

El color es un arma de doble filo debemos asignar los colores correspondientes y unirlos de una forma equilibrada y homogénea

Es un hecho, los colores nos afectan psicológicamente y nos producen ciertas sensaciones desde primer momento, por lo tanto en la web tenemos que emplear colores armoniosos que faciliten la lectura por pantalla. Para esto debemos de conocer nuestro target, y crear una paleta de colores de acorde al contexto, existen por la red varios generadores de colores que nos serán de mucha ayuda.

De igual forma hay que emplear un fondo adecuado que haga un buen contraste con la tipografía empleada en el sitio, y desde ya se los aseguro, el visitante se sentirá muy agradecido.

Conclusiones

Espero que estos pequeños consejos, sean de gran ayuda al momento de desarrollar un sitio, por mi parte solo le resta por decirle que nadie nace aprendido, crear un sitio web es un arte, y que los errores cometidos en los diseños, yo los he cometido también, pero es responsabilidad nuestra mejorar nuestro trabajo, y aprender nuevas metodologías que nos permitan crear sitios Web usables y accesibles.

© admin for Juan Ortega, 2008. | Permalink | 5 comments | Add to del.icio.us
Post tags: Accesibilidad, buenas prácticas, Reflexiones, usabilidad

Feed enhanced by Better Feed from Ozh

Via el blog masqueaccesibilidad (muy bueno por cierto) me encuentro con esta maravillosa iniciativa fomentada por el Ministerio de Educación, Política Social y Deporte del gobierno de Español, denominado ”
Ayuda para Accesibilidad Web”, es básicamente es una guía online, en donde se explica de manera clara, los aspectos básicos sobre la accesibilidad de los sitios Web y los elementos necesarios para desarrollar dichos sitios.

Vale la pena que visiten el sitio, es una guía didáctica muy buena que sirve como material introductorio en este campo, que no muchos comprenden de que se trata.

Creo que con este pequeña guía, y con la guía web que les comentaba en un post anterior , tenemos los elementos necesarios para comenzar a desarrollar un sitio web. Solo faltará una pizca de creatividad y listo, tendremos nuestro sitio web limpio, bonito y fácil de usar.

Qué piensan ustedes?

© admin for Juan Ortega, 2008. | Permalink | One comment | Add to del.icio.us
Post tags: accesiblidad, buenas prácticas, evangelización

Feed enhanced by Better Feed from Ozh