BlogDay 2007

Hoy es el BlogDay 2007. Y he aquí mi aporte. Para encontrar estos 5 blogs, estuve navegando por Google, por los favoritos de Torres Burriel y los de Olga Carreras y creo que he dado con muy buen material para mis lecturas diarias. Material muy interesante sobre estándares web, accesibilidad, usabilidad y similares.

seraccesible
Trazar una Web Universal.

webto-doweb (Migrando a su propio dominio webto-doweb)
Diario de un diseñador web.

{ dosmilmastres }
Aplicación de estándares web, accesibilidad y usabilidad, de vez en cuando.

abc Web
Bitácora con consejos y trucos sobre la creación de sitios y aplicaciones web, programación en PHP y cosillas sobre sistemas operativos.

DUOPIXEL
weblog que trata acerca del diseño de información.

!Espero los disfruten!

Más BlogDay2007...

Revisa todo acerca de tu sitio web

La verdad sea dicha: me encantan los validadores online. Es por esto que no podía dejar de reseñar el excelente Test Everything, el cual conocí gracias a BlogMundi.

“Test Everything agrupa todas las herramientas que conocía para sitios web y blogs, y muchísimas más. La aplicación de Jonas John incluye:

- Utilidades para validar tu código HTML, CSS.

- Herramientas para analizar más de 20 aspectos SEO.

- Ver tu historial en servicios sociales (del.icio.us, technorati, digg…)

- Servicios de red (whois, traceroute, velocidad de la web…)

- Herramientas de texto.

- Utilidades para imágenes.

…y muchas más.”

Premios Colombia en Línea 2007

Gracias a Enter me entero de que nuevamente llegaron los Premios Colombia en Línea 2007.

Este año hay novedades en las categorías:
• Mejor Blog
• Mejor Sitio de Aprendizaje
• Mejor Sitio de Comercio Electrónico
• Mejor Sitio de Empresa PYME
• Mejor Sitio Estatal
• Mejor Sitio de Finanzas
• Mejor Sitio de Gran Empresa
• Mejor Sitio de Noticias
• Mejor Sitio de Política
• Mejor Sitio de Promoción de Colombia
• Mencion Especial Mejor Sitio de Alcaldía en Línea

Como siempre, esperamos que dentro de sus criterios de selección y evaluación tengan en cuenta eso de los Estándares Web, la Accesibilidad y Usabilidad. : )

¿Qué esperas para inscribir tu sitio?. Las inscripciones estarán abiertas hasta el primero de agosto de 2007 y la entrega de los premios se realizará en un evento especial el día 4 de octubre.

Actualización: Ya "se premió" a lo mejor de lo mejor en Colombia. Conoce los ganadores y mi opión al respecto.

63 Recomendaciones que Debes Tener en Cuenta

Hace algunos días leí un interesante post en Daily Blogs Tips titulado 43 Errores en Diseño Web que Debes Evitar. Esta vez no traduciré el artículo completo. Sólo listaré las recomendaciones ya que son muy claras, y aún cuando se supone que son para blogs, aplican perfectamente para cualquier tipo de sitio Web. Todas ellas apuntan a que el usuario tenga una excelente experiencia de usuario y a que tu sitio sea realmente amigable, accesible, encontrable, etc.

Lo interesante es que ya no son 43, sino 63 las recomendaciones a tener en cuenta, gracias a los lectores de ese blog. Y aunque taché las que no considero adecuadas, las dejo por si opinas lo contrario.

1. El usuario debe saber de que se trata el sitio en segundos.
2. Haz el contenido fácilmente consultable ("escaneable").
3. No uses tipologías decorativas que sean ilegibles.
4. No uses tipologías diminutas.
5. No abras ventanas nuevas del navegador.
6. No cambies el tamaño del navegador.
7. No exijas a tu visitante registrarte a menos de que sea absolutamente necesario.
8. Nunca suscribas a tu visitante a algo sin su consentimiento.
9. No uses en exceso películas en Flash.
10. No pongas música de fondo.
11. Si debes poner un archivo de audio deja que el usuario sea quien lo inicie.
12. No desordenes tu sitio con insignias, emblemas o escudos de otras comunidades.
13. No uses una página inicial que sólo lance el sitio real.
14. Asegúrate de incluir los detalles de contacto.
15. No dañes la funcionalidad del botón “Back” (Atrás).
16. No uses texto parpadeante.
17. Evita URLs complejos y enredados.
18. Usa CSS en lugar de tablas en HTML.
19. Asegúrate de que los usuarios puedan hacer búsquedas en todo el sitio.
20. Evita los menús con “drop down”.
21. Para tu navegación usa texto.
22. Si vinculas archivos PDF infórmale al usuario.
23. No confundas a tu visitante con varias versiones de tu mismo sitio (que HTML, Flash, 56Kbps, 128Kbps…).
24. No mezcles la publicidad con tu contenido.
25. Usa una estructura de navegación sencilla.
26. Evita las “intros”.
27. No uses Microsoft FrontPage para crear tu sitio.
28. Asegúrate que el sitio sea compatible con varios navegadores.
29. Asegúrate que los vínculos incluyan un texto claro. Evita el “Clic aquí” Asegúrate que los vínculos incluyan un texto claro y descriptivo. Si utilizas la frase “Clic aquí” para mejorar tu tasa de clics no la incluyas en el vínculo.
30. No ocultes tus vínculos.
31. Haz tus vínculos visibles. El usuario debe diferenciar claramente qué es un vínculo y qué no.
32. No subrayes o colorees el texto normal.
33. Haz que los vínculos visitados cambien de color.
34. No uses GIFs animados.
35. Asegúrate de usar los atributos ALT y TITLE en tus imágenes.
36. No uses colores fuertes.
37. No uses pop ups.
38. Evita los vínculos en Javascript.
39. Incluye vínculos funcionales en tus pies de página.
40. Evita las páginas demasiado extensas.
41. No generes “scroll” horizontal.
42. No permitas errores de ortografía o gramática.
43. Si usas CAPTCHAs asegúrate de que sean realmente legibles.
44. No uses texto escondido.
45. No vincules sitios prohibidos o penalizados por los buscadores.
46. Coloca tu publicidad arriba.
47. Adiciónate a dmoz y yahoo.com. El mismo Google lo recomienda.
48. Ingresa a adwords.
49. Usa las herramientas de seomoz.org.
50. Usa un diseño o tema específico para tu sitio y se coherente con él.
51. Publica un blog.
52. Revisa tu ortografía y gramática. (Ya está en el punto 42.)
53. Evita los plugings para Wordpress innecesarios.
54. Diferencia entre tus comentarios y los de tus lectores.
55. En tu CSS haz lo posible por usar como medida los “em” en lugar de “px” o “%”.
56. Usa los estándares para la estructura del mapa del sitio.
57. Usa los estándares para la accesibilidad Web.
58. Usa técnicas de diseño centrado en el usuario.
59. Publica un glosario.
60. Usa palabras claves a través de todo el sitio.
61. No uses una página tradicional para tus FAQ.
62. Diseña teniendo en cuenta el acceso móvil.
63. Usa las tablas en HTML para tabular datos.

Seminario Internacional de Usabilidad y Accesibilidad para la Web

En México ya hay dos jugadores fuertes en nuestros temas favoritos: La Usabilidad y la Accesibilidad. Se tratan del Gobierno del Estado de Nuevo León y la Universidad de Monterrey y los menciono porque ambos están organizando el Seminario Internacional de Usabilidad y Accesibilidad para la Web.

El seminario se llevará a cabo los días 26 y 27 de julio del 2007 y dentro de los conferencistas está nada menos que Louis Rosenfeld, autor de uno de los libros referencia del área: Information Architecture. Además habrán otros conferencistas de Estados Unidos, Chile, Brasil y obviamente México.

¿Tienes la posibilidad de viajar? No dudes en ojear este Seminario que está muy interesante.

Escoge tu CSS Inicial: Eric Meyer vs. Faruk Ateş

Desde hace algún tiempo he recomendado el uso del CSS inicial de Faruk Ateş. Básicamente lo que hace esta hoja de estilos inicial es amortiguar las diferencias que hay entre todos los navegadores para mostrar el HTML.

¿No has visto que si colocas un H1 sin ningún estilo los navegadores lo muestran en texto negro con una letra grande en Times New Roman? Además de las fuentes, todos los navegadores tienen definidos sus estilos por defecto para todos los elementos de HTML.

El problema es que Internet Explorer, Firefox, Safari, Opera, etc. tienen diferencias en sus estilos predefinidos. Hasta de una versión a otra de un mismo navegador podrían cambiar los valores. De IE5 a IE6, por ejemplo, los textos de una misma página podían verse diferentes.

Ahora, si eres uno de los que procura que todos los navegadores muestren de igual manera el diseño, es difícil lograrlo debido a estas diferencias. A menos que utilices una hoja de estilos inicial como esta.

Hace algunos días (el 14 de abril del 2007 para ser exactos) Eric Meyer sacó su propia hoja de estilos inicial (“Reset Styles”) basada en la hoja de estilos inicial de Yahoo… Ya sumamos tres hojas de estilos iniciales, sino es que hay más. ¿Cuál escoger?

• Inicial CSS de Faruk Ateş.
• YUI Reset CSS de Yahoo.
• Reset Styles de Eric Meyer.
• Resetting Again de Eric Meyer (Actualizada el 15 de enero de 2008).

Como no soy el más experto en el tema acudiré a quienes lo son para compararlas.

Traduzco inicialmente las palabras de Eric Meyer:

…Yo recomiendo usar un grupo de estilos de “reseteo” o “de base”, pero no uno basado en el selector universal. Más bien que los estilos deberían listar todos los elementos a ser reseteados y exactamente cómo deberían serlo. …Alguien me preguntó si yo podía crear esta hoja de estilos para compartirla con el mundo, a lo cual accedí.

…Alguien más me recordó que el grupo Yahoo! UI ya lo había hecho así que no me tocaría hacerlo. Maravilloso!… Excepto que encontré que su CSS va más lejos de lo que debería en algunas áreas y se queda corto en otras. Así que presenté mi propia versión de Reset CSS, basada en los estilos de Yahoo…

El mismo Eric ya desfavorece a Yahoo, y bueno, Eric Meyer tiene el conocimiento, experiencia y fama como para creerle, ¿no?

Adicionalmente Eric complementa mi introducción:

…¿Por qué?!? ¿Por qué todo esto?

La razón principal es que todos los navegadores tienen presentaciones preestablecidas y todas ellas diferentes. (Ok, esto no aplica para las familias de navegadores—la mayoría de los navegadores basados en Gecko tienen los mismos valores por defecto). Por ejemplo, algunos navegadores sangran las listas con un margen izquierdo, mientras otros usan el padding…

Pero hay todo tipo de inconsistencias, unas más sutiles que otras. Los títulos tienen márgenes superiores e inferiores ligeramente diferentes, las distancias de sangría son diferentes, y así sucesivamente. Aún algo tan básico como la altura de las líneas varía de un navegador a otro—lo cual puede tener efectos en la altura de los elementos, las alineaciones verticales y en general todo el aspecto.

Esto no es algo que consideremos muy a menudo. Pensamos en nuestro CSS para modificar el aspecto por defecto de un documento —pero con una hoja de estilos “reset”, podemos hacer este aspecto más consistente entre los diferentes navegadores, y así disponer menos tiempo peleando con estas diferencias…

Hay otra razón por la que quiero resetear muchos estilos en muchos elementos. No sólo reiniciar las márgenes y el padding. También quiero que todos los elementos tengan un tamaño de fuente, un peso, un estilo y una familia consistentes. Si, quiero remover la negrilla de los títulos y los elementos strong; quiero quitarle la itálica a los elementos em y cite.

Quiero todo esto porque no quiero dar por hecho los efectos de los estilos… Lo cual me hará pensar un poco más a cerca de la semántica de mi documento. Con el reseteo montado, no podré escoger el elemento strong si el diseño necesita una negrilla. En lugar de ello, me tocará escoger el elemento adecuado—ya sea si es un strong o un em o un b o un h3 o lo que sea—y luego le doy el estilo que necesito…”

Creo que muy claro nos queda. ¿Qué podemos decir acerca de los estilos de Faruk Ateş, los cuales siempre he utilizado? Les traduzco sus palabras, las cuales me escribió para aclarar las dudas:

Revisando la hoja de estilos reset de Eric, siento que ambas (la de él y la mía) son soluciones viables al mismo problema general. La diferencia real es que su reseteo apunta realmente a anular cada bit de estilo, mientras que mi solución sólo apunta a neutralizar los estilos comunes entre los navegadores.

Con la mía, muchos estilos por defecto permanecen intactos (como los estilos de los elementos sup y sub, etc.) y en la mayoría de los casos, eso es lo adecuado porque todos los navegadores ya tratan estos elementos adecuadamente. Obviamente, tu opinión puede variar.

El reseteo de Eric simplemente aborda cada elemento de la especificación y le remueve toda su base de estilos. Su regla font-* inheritence parece una adición inteligente que puedo considerar adicionar a la mía, pero aparte de eso siento que está un poco del lado de lo excesivamente innecesario.

Creo que la mejor solución entre la de Eric y la mía depende de la complejidad de los sitios que crees. Para un sitio gigante donde no tienes idea qué tipo de contenido se publicará, la de Eric es una apuesta segura pero requerirá que re escribas un montón de estilos nuevamente. Para proyectos pequeños y medianos, creo que mi CSS inicial será más que suficiente, y te salvará de re-aplicar muchos estilos. :-)

Con esto nos queda todo claro, ¿no?

Recuerda entonces tomar una de estas hojas de estilos iniciales de acuerdo a tus necesidades, copiarla dentro de tus archivos y utilizarla en cada HTML que generes. Algo como esto te caería muy bien:

‹link rel="stylesheet" type="text/css" href="/css/inicial.css"›
‹link rel="stylesheet" type="text/css" href="/css/misestilos1.css"›
‹link rel="stylesheet" type="text/css" href="/css/misestilos2.css"›

Actualización:
Gracias a 70 Expert Ideas for Better CSS Coding encuentro otras hojas de estilo iniciales que sería bueno revisar:

• Global white space reset.
• Initial CSS de Christian Montoya.
• Initial CSS de Mike Rundle.
• Initial CSS de Ping Mag.
• Initial CSS de Rudeworks (Este gracias a WebIntenta).
• Reset CSS de aNieto2K (Este gracias a él mismo).
• Tripoli Generic CSS de David Hellsing (Gracias a aNieto2K).
• CSS Reseter de CSS Lab.
• Base.css de Alberto Forbes (In love with CSS).

Actualización 2:
He encontrado una buena colección de Reseteadores: A Killer Collection of Global CSS Reset Styles. Me gustó porque, aunque menciona varios conocidos, explica cada uno (desde el más básico). ¡Puede resultarte interesante!

The Web Design Survey 2007, la encuesta anual de A List Apart

The Web Design Survey 2007, la encuesta anual de A List Apart.

Una encuesta para profesionales de la web: diseñadores, desarrolladores, gerentes de proyectos, escritores y editores, arquitectos de la información y especialistas en usabilidad.

¿Te cuentas entre ellos? Entonces no puedes dejar de llenarla...

Manifiesto ATF

Artículo original: ATF Manifesto
Autor: Accessibility Task Force del WaSP
Traducido por: Gabriel Porras

Accessibility Task Force
Reuniendo especialistas de la accesibilidad de todo el mundo, este grupo trabaja con organizaciones de accesibilidad, proveedores de tecnología y otras personas y empresas para ayudar a promover la accesibilidad Web.
Juega un papel importante ayudando a los desarrolladores y fabricantes de productos a mejorar el soporte de los estándares Web dentro de sus propios productos.
También trabaja promocionando un mejor entendimiento de la accesibilidad Web tanto en diseñadores como en desarrolladores, en empresas y entidades del gobierno.

Manifiesto ATF

El Potencial
La Web puede ser un medio democrático que de verdad les permita a las personas con discapacidades cambiar su vida. Usuarios ciegos y con problemas de la visión pueden comprar en línea. Aquellos con problemas cognitivos pueden aprender en línea a su propia velocidad. Usuarios con deficiencias auditivas pueden tener acceso a contenido multimedia. La gente se puede conocer en línea, participar y socializar sin prejuicios y, potencialmente, sin barreras de ningún tipo.

En muchos lugares esto ya es una realidad. Pero no en todas partes. Creemos que cualquiera tiene el derecho de aprovechar las ventajas y posibilidades que ofrece la Web.

El Problema
El crear páginas Web que apliquen un HTML basado en estándares y buenas prácticas de diseño es un paso esencial para asegurar que el contenido pueda ser accedido por un amplio rango de agentes, dispositivos y sistemas operativos.

Los estándares Web ofrecen muchos elementos y atributos específicos de HTML que pueden ayudar la accesibilidad, ya que estos claramente definen relaciones, proveen contenido alternativo y dan un significado más rico de lo que normalmente daría un contenido sin estructurar.

Desde sus comienzos en 1998, el Web Standards Project (WaSP) ha hecho una gran promoción por la adopción real de los estándares Web. Aunque se ha logrado un gran progreso con los desarrolladores de los navegadores, los diseñadores Web y aún algunos desarrolladores de herramientas de autor para que entiendan las ventajas y hagan uso de los estándares, aún faltan partes cruciales de la “ecuación de la Web” por ser superadas.

Las tecnologías de ayuda para usuarios con necesidades especiales (Assistive Technologies), como los lectores de pantalla, que algunas personas con discapacidades usan, aún no aprovechan al máximo las posibilidades ofrecidas por el HTML compatible con los estándares.

Las costosas y sofisticadas herramientas de administración de contenido (CMS) producen un HTML de pobre calidad, sin semántica e inaccesible.

Muchos programas de creación (incluyendo los CMS y las herramientas para blogs) no pueden ser usadas fácilmente por personas con discapacidades, porque éstas no cumplen con las Guías para las Herramientas de Autor (Authoring Tool Accessibility Guidelines -ATAG), la recomendación de la W3C para este tipo de herramientas.

Las empresas y sus desarrolladores equivocadamente creen que el desarrollo Web accesible es incompatible con la marca y lo visualmente agradable.

Y a quienes les importa les venden malas soluciones, además de costosas, gracias al nuevo fenómeno: el vendedor de la “poción mágica” de la accesibilidad – empresas que aseguran un completo entendimiento de los problemas de la accesibilidad Web y que prometen sistemas que funcionan como “cura milagrosa”, que automáticamente se encargarán de los problemas, entregando en realidad soluciones que son cualquier cosa menos accesibles.

La rápida adopción de la programación DOM y Ajax introduce nuevos problemas a considerar en el soporte de las tecnologías de ayuda (Assistive Technologies).

El Accessibility Task Force cree que ahora es el tiempo para enfrentar estos problemas. Queremos destacar aquellos con que se encuentran diariamente los diseñadores y desarrolladores quienes perpetúan los procesos y salidas inaccesibles, e intentan conseguir la rápida erradicación de los mismos. Y queremos cambiar el foco de la accesibilidad de simplemente silenciar una herramienta automática hacia las barreras reales encontradas por usuarios reales.

La Propuesta

• Que todas las tecnologías de ayuda (Assistive Technologies) usadas para asistir la navegación en Internet entiendan todas las recomendaciones del HTML, XHTML, DOM y CSS.


• Que los fabricantes de estas tecnologías transparentemente documenten sus productos, funciones y comportamientos en términos del soporte y la programación estándar.


• Que todos los Sistemas de Administración de Contenido (CMSs) produzcan código semántico, accesible, válido y limpio directamente desde la caja.


• Que los vendedores de estos sistemas CMS se aseguren que las personas con discapacidades puedan usar fácilmente sus herramientas para producir contenido Web.


• Que los desarrolladores Web usen los estándares para producir sus sitios y, hasta donde sea posible, los prueben con las tecnologías de ayuda (Assistive Technologies) y con personas discapacitadas para asegurarse que son, tanto accesibles como usables.


• Que la comunidad recuerde que las Guías de Contenido Accesible (Web Content Accessibility Guidelines -WCAG) son sólo una parte del rompecabezas – las Guías de Herramientas de Autor (Authoring Tool Accessibility Guidelines -ATAG), las Guías para Agentes de Usuario (User Agent Accessibility Guidelines -UAAG) y de hecho el Document Object Model (DOM) son estándares Web también.

La Promesa

• Trabajaremos continuamente para demostrar que la accesibilidad y el HTML bien formado pueden ir de la mano con una cooperación efectiva, trabajo de marca y estética.


• Demandaremos más de nuestras herramientas. De todas ellas. Lucharemos porque los navegadores, programas de multimedia y las tecnologías de ayuda soporten las UAAG, y porque los editores WYSIWYG, los manejadores de contenido (CMS), las herramientas para blogs, los convertidores y herramientas de multimedia soporte las ATAG.


• Imparcialmente intentaremos conducir a todos los proveedores hacia un diálogo constructivo para ayudarles a que soporten los estándares web y así mejoren la accesibilidad.


• Nos esforzaremos por educar a las empresas y sus desarrolladores Web, para que puedan tomar decisiones bien fundamentadas sin ser presa fácil de los vendedores de la “poción mágica” de la accesibilidad.


• Trabajaremos en conjunto con otras Fuerzas de Trabajo (Task Forces) del WaSP y con otros grupos de trabajo relevantes como el WCAG WG para realizar patrones confiables y metodologías de tal manera que los desarrollos Web cumplan los estándares, y los sitios Web sean interactivos y accesibles y así lograr que trabajen consistentemente para los usuarios con discapacidades.


• Finalmente, cuando un proveedor no esté dispuesto a usar e intencionalmente persiste en sus prácticas discriminatorias, usaremos los recursos que tengamos disponibles para forzar la situación.