Conocido como user experience en español ahora es...
Mostrando entradas con la etiqueta validadores. Mostrar todas las entradas
Mostrando entradas con la etiqueta validadores. Mostrar todas las entradas

Validador para Móviles

miércoles, abril 23, 2008

Web Compatibility Test for Mobile Browsers

El Iniciativa Móvil de la W3C ha lanzado un nuevo validador especial para móviles: el Web Compatibility Test for Mobile Browsers (Test de Compatibilidad Web para Navegadores Móviles), el cual combina, en una sola página, un número de tecnologías que creen son las necesarias para una mejor experiencia Web, especialmente en los dispositivos móviles.

Cada una de estas tecnologías, 12 en total y entre las cuales evalúan: las transparencias PNG, soporte paga GZip, AJAX, SVG, Selectores de CSS3..., están representadas en un cuadro que se pondrá verde si el navegador pasa la prueba.

El test, aunque hecho para móviles, también permite evaluar los navegadores tradicionales:

  • Firefox 2.0: Pasa 9 de los test
  • Opera 9.24: Pasa 9
  • Safari 3.1: Pasa 9
  • Internet Explorer 7.0: Pasa 4 (¡Tan raro!)
Gracias a aNieto2k.

Adiós WebXACT - Bobby, Hola Otros Validadores

domingo, marzo 02, 2008

Watchfire

Acabo de enterarme de una noticia triste: Nos quedamos sin el validador de accesibilidad WebXACT de Watchfire, anteriormente conocido como Bobby. Todo debido a que IBM compró a la compañía. En el sitio del validador explican la situación... que dicen es temporal.

Y hablando de validadores te invito a revisar esta buena lista que han recopilado en el blog de Virtual Hosting con 25 herramientas para evaluar la accesibilidad de tu sitio Web: Test Me: 25 Freebie Website Accessibility Checkers, que casualmente comienza con el desaparecido Watchfire WebXACT.

Gracias a WebAIM Newsletter.

TAW MobileOK Basic

martes, febrero 12, 2008

The Webkit Open Source Project

Hace tan sólo 2 días que les mencionada del reciente lanzamiento del Beta del W3C MobileOK Checker cuando me doy cuenta que hay un tercer validador de Estándares para Móviles.

Se trata del TAW MobileOK Basic el cual hace parte de la familia del conocido validador TAW (y por lo tanto está en español).

Este validador TAW OK Basic es un validador de web móvil basado en las Buenas Prácticas para Móvil 1.0 de W3C.

Si no te has dado cuenta la Web Móvil es un hecho a corto plazo, así que ya tienes muy buenas herramientas para prepararte para ella: TAW mobileOK Basic, W3C MobileOK Checker, READY.mobi...

Un agradecimiento a Manrique Lopez quien me dió a conocer este validador.

Validador de Estándares para Móviles

lunes, febrero 11, 2008

W3C MobileOK Checker

¿Tu Web está hecha para un dispositivo móvil? Ya puedes tener una respuesta más acertada, sin tener que probar en la infinidad de dispositivos que hay, gracias al renovado W3C MobileOK Checker (aún Beta), que según la W3C proporciona resultados más precisos y una experiencia de mayor confianza.

Si estás en Barcelona (España) recuerda que hoy comienza el Mobile World Congress, donde puedes pasarte por el stand del W3C (en el Hall 7) y conocer más sobre esta herramienta, que seguro te ayudará a hacer que tus páginas Web sean accesibles desde dispositivos móviles.

Gracias a W3C.

Actualización: Gracias a Utilidades para Webmasters recuerdo otro validador para móviles: READY.mobi. Así que son varias las opciones que tienes para revisar tu Web.

Herramientas para Evaluar la Accesibilidad

domingo, enero 27, 2008



Por el lado de la Accesibilidad me he encontrado con varias novedades. Primero, gracias al blog de WebAIM, me doy cuenta que acaban de publicar una nueva versión del conocido Validador de Accesibilidad WAVE.

La versión 4, ha salido en forma de BETA, así que si encuentras bugs o tienes alguna recomendación, no dudes en escribirles. Dentro de las novedades que trae esta nueva versión tenemos: 28 pruebas nuevas, un nuevo framework de evaluación, ahora usa Gecko (el mismo motor de renderización de Firefox) y una interfaz de reportes más simple y amigable.

Recuerda que este validador permite (como el validador de HTML de la W3C) revisar una página mediante su URL, subiendo un archivo de HTML o copiando y pegando el código.

Por otro lado creía que por aquí les había mencionado sobre el proyecto NVDA, pero no encontré los datos en mi blog así que aquí están: Se trata de un Screen Reader para Windows gratuito y Open Source. Así que como no podemos probar con JAWS, podemos hacerlo con este otro Screen Reader. La versión actual disponible es la v0.5.

Finalmente, gracias a la presentación Testing for Web Accessibility de Jim Thatcher, en la cual presenta gran cantidad de herramientas para evaluar la accesibilidad, encontré dos validadores que no conocía y que según entendí salieron el año pasado:

El Truwex Online 2.0, el cual me pareció realmente excelente por la cantidad de evaluaciones que hace y porque se puede parametrizar para evaluar tu sitio de acuerdo a la Section 508, los niveles A y AA de WCAG 1.0 y/o el contraste de color de acuerdo a la WCAG 1.0 o 2.0.

Y el 508ita Web Page Accessibility Report, otro validador pero realmente sencillo. Evalúa la presencia de tags no recomendados, las etiquetas de las imágenes y la multimedia. Lo único que puede ser interesante es la calificación que da al sitio evaluado, que en un momento dado, puede servir para comparar varios sitios.

Validador de HTML5

miércoles, enero 16, 2008

Validator.nu (X)HTML5 Validator

El HTML 5.0 aún está como borrador y ya tenemos un validador para él: Validador de (X)HTML5 .

Gracias a UITest.com.

TAW es el Validador de Accesibilidad Más Utilizado

miércoles, enero 09, 2008

TAW + Examinator + Hera

¿Recuerdan la pequeña encuesta que hicieron en SoftWAI sobre son los validadores de acccesibilidad más usados?

Ya están los resultados y los ganadores son:

El número de encuestados fue de tan sólo 124 personas, pero nos deja una idea de más o menos cómo es la movida en cuando a Validadores de Accesibilidad en Español.

Igualmente los invito a leer lo que Fran Tarifa, con bastante experiencia con estos validadores, escribió al respecto de estos resultados.

Evaluador de Accesibilidad Funcional

jueves, diciembre 13, 2007

fae: Functional Accesibility Evaluator

Acabo de recordar una herramienta de validación de accesibilidad: el Functional Accessibility Evaluator [en] de la Universidad de Illinois. Todavía está en desarrollo y vamos por la versión 0.9.3.

¿Qué información genera? Después de una evaluación entrega un informe bien completo donde evalúa 5 parámetros: la Navegación y Orientacion, los Textos Equivalentes, el Código en Script, los Estilos y los estándares HTML. Interesante, ¿no?

Ejemplo de un reporte de la evaluación
Ejemplo de un reporte de la evaluación

¿Por qué recordar? Porque este es uno de los validadores que está en nuestra extensa lista de Validadores de Accesibilidad que diseñadores y desarrolladores debemos tener en cuenta para evaluar nuestros sitios Webs.

Los expertos dirán que estos validadores no son muy buenos para validar tu sitio. Y en parte tienen razón. Pero para nosotros (diseñadores y desarrolladores) son herramientas sencillas que nos pueden ayudar mucho en nuestro trabajo diario.

Un ejemplo claro del porqué este tipo de evaluadores no son lo mejor es este: Ellos te recordarán que tus imágenes deben tener un texto alternativo. Y si tus imágenes lo tienen para ellos estará bien. Sin embargo si tus textos alternativos son del estilo "imgLogin.jpg - 10kb", como lo hacía Frontpage, NO están bien definidos. Y aunque el validador diga que si están bien, realmente están muy mal.

Como verás, para una revisión completa de la accesibilidad se necesita mucho más que este tipo de herramientas. Gracias a Joe Dolson: Accessible Web Design.

Más de 47 Excelentes Formularios con CSS y AJAX



Excelente la recopilación de ejemplos, tutoriales y herramientas que hizo Noupe en su post: 47+ Excellent Ajax CSS Forms.

Encontramos ayudas para estilizar los formularios, los elementos dentro de ellos, para procesarlos mediante AJAX, para colocarles ayudas, para validarlos, para hacerlos más accesibles y usables... Es un post de obligatoria lectura, estudio y práctica.

Recomiendo los dos tutoriales que hay sobre usabilidad y accesibilidad: Prettier Accessible Forms y Sensible Forms, los excelentes validadores que están desarrollados mediante JavaScript No Invasivo, los tips, etc.

¿Todavía estás aquí? ¡Largo!

Gracias a anieto2k.

Validador de HTML y CSS para Outlook 2007

miércoles, diciembre 12, 2007



Si lo tuyo es el diseño de correos en HTML he aquí otra opción de validación: Outlook HTML and CSS Validator.

En esta página vienen instrucciones de su utilización en distintos editores.

Vía: Validador de HTML y CSS para Outlook 2007.

¿Tu Sitio es Entendible y Fácil de Leer?

sábado, diciembre 08, 2007

TxReadability: a multi-language readibility tool

Una crítica permanente a las evaluaciones que hago es que no tienen en cuenta el contenido. Para mi, como desarrollador, me interesa es la estructura, la cual considero de igual importancia que el contenido. Se que es una posición que no encuentra muchos adeptos y es especialmente rechazada por quienes no trabajan como desarrolladores Web, pero eso es punto de otra discusión.

Hoy quiero mostrarles una herramienta que, de cierta manera, permite evaluar los contenidos. Se trata de TxReadability, herramienta que evalúa la facilidad de lectura de tu sitio Web, para textos en español, inglés y japonés, y la cual debemos agradecer al Instituto de Accesibilidad de la Universidad de Texas. Sí, la Facilidad de Lectura, también tiene que ver con la accesibilidad.

El término Facilidad de Lectura (readability) se usa primariamente dentro del rango de investigación sobre habilidad de lectura y escritura. Se refiere a la facilidad con cual un texto es entendido por los lectores. Fórmulas de facilidad de lectura han sido utilizadas desde la década de los 1930 para medir la dificultad de textos en términos cuantitativos...

Ahora, debido a que muchos opinan que mi pequeña evaluación de los sitios Ganadores del Premio Colombia en Línea 2007 es radical y descontextualizada, porque no tengo en cuenta el contenido, aprovechemos y evaluemos el contenido de estos sitios ganadores.

¿Los sitios ganadores de los Premios Colombia en Línea 2007 son fáciles de leer? Veamos las calificaciones de ellos de 0 a 100, donde las notas más bajas son para sitios muy dificiles de leer y las más altas para aquellos que son muy fáciles de leer.
  • Mejor Blog en Línea: Se Nos Cayó El Sistema
        79.37 (Moderadamente fácil de leer)
  • Mejor Sitio de Aprendizaje en Línea: SENA Virtual
        55.33 (Moderadamente difícil)
  • Mejor Sitio de Comercio Electrónico en Línea: TuBoleta.com
        70.25 (Moderadamente fácil)
  • Mejor Sitio de Empresa Pyme en Línea: Rines TYM
         -1 (No se pudo calcular la facilidad de lectura... Sitio hecho en Flash)
  • Mejor Sitio Estatal en Línea: Alcaldía Santiago de Cali
        80.75 (Fácil de leer)
  • Mejor Sitio de Finanzas en Línea: Bancolombia
        -1 (No se pudo calcular la facilidad de lectura... Otro sitio hecho con Flash)
  • Mejor Sitio de Gran Empresa en Línea: Suzuki
        70.82 (Moderadamente fácil)
  • Mejor Sitio de Noticias en Línea: El Tiempo
        62.3 (Normal)
  • Mejor Sitio de Alcaldía en Línea: Municipio de Maní
        70.95 (Moderadamente fácil)

¿Sorpresas? Primero no es sorpresa que los sitios hechos en flash ni siquiera se puedan evaluar. El flash, como sabemos, no es amigo de la accesibilidad.
Segundo sí que es sorpresa que los sitios que considero deberían ser los fáciles de leer, resulten los "más dificiles" (SENA Virtual y El Tiempo).
Pero bueno, en general, vemos que estos sitios sí que son fáciles de leer. Felicitaciones para ellos.

Gracias a Facilidad de lectura = Accesibilidad.

Valida tu (X)HTML y CSS en un Solo Lugar

lunes, diciembre 03, 2007

XHTML-CSS Validator - be valid or die learing*

XHTML-CSS Validator es la nueva herramienta que va para mi colección. Y en realidad no es un nuevo validador. Es simplemente una herramienta que une los dos validadores de la W3C: el de HTML y el de hojas de estilo. Así que de un solo paso podrás validar la validez de tus páginas.

Y como dice Daniel (por quien me enteré de la herramienta), ¡Vaya slogan que utilizan! Validar o morir aprendiendo...

Nueva Herramienta de Validación: Ready.mobi

jueves, noviembre 29, 2007

Logotipo Ready.mobi

Gracias a varios blogs he leido sobre una nueva herramienta de validación: Ready.mobi, con la cual podremos evaluar si nuestro sitio está preparado para ser visitado desde un celular o un dispositivo similar.

Esta herramienta revisa la legibilidad del sitio Web de acuerdo a los estándares y mejoras prácticas para móviles. Y es realmente excelente porque tiene gran cantidad de reportes. Mucho mejor que revisar con Opera Mini sólo la visibilidad y navegabilidad de tu sitio.

Hagamos una prueba con ella y con Opera Mini para evaluar qué información nos entregan. Para esta caso revisaremos a Sena Virtual, el sitio de educación virtual del SENA (Servicio Nacional de Aprendizaje de Colombia) e intentaremos determinar si este sitio puede ser navegable desde un celular.

Home del Sena Virtual

Primero lo visitaremos mediante el navegador Opera, el cual posee una vista para emular la pantalla del Opera Mini.

Visita al Sema Virtual dede Opera Mini

Como podemos ver el sitio es navegable, aunque es claro que no hay una versión especial para móviles ya que las imágenes son muy grandes. El punto negativo obvio es la cantidad de scroll vertical que se genera.

Ahora, ¿qué nos dice Ready.mobi?

Primero lo califica muy mal: 086 sobre 5. Es decir, que este sitio, según ready.mobi, no está preparado para ser navegable desde un móvil. La página inicial es muy pesada y por ende sería “muy costoso” y lento navegarla.

Informe 1 de Ready.mobi

El emulador del Motorola v3i no pudo hacer render del sitio. ¿Problema del emulador o del sitio? Adicionalmente nos informa que el sitio pasó 11 de sus pruebas, no pudo con 12 de ellas y generó 3 alertas y 1 comentario.

Informe 2 de Ready.mobi

Positivo que no se utilizan marcos, pero no tiene un html válido y tampoco utiliza un profile especial para XHTML Mobile. Es claro que el Sena Virtual no tiene una versión para móviles.

Informe 3 de Ready.mobi

¿Cuáles evaluaciones salieron positivas y cuáles negativas?
Positivo es que:

  • usa adecuadamente los tipos MIME
  • los mapas de imágenes
  • las medidas
  • el título de la página
  • usa hojas de estilo
  • no depende de ellas
  • no tiene auto-refresh ni redireccionamientos
  • el modo de entrada por defecto está OK
  • tiene definidos los valores input por defecto
  • no usa cajas ni áreas de texto
  • tiene una estructura lógica de encabezados
  • y se ha detectado botones Submit en los formularios.

Negativo es que:
  • no se ha especificado el encoding de los caracteres
  • se detectaron pop-ups
  • hay imágenes sin sus atributos ALT, Height y Width
  • la página es muy pesada
  • hay imágenes muy grandes para las pantallas de los móviles
  • hay tablas anidadas
  • se utilizan tablas para diagramar
  • no se detectaron controles de cache
  • y se cargan muchos recursos externos al sitio.

Los temas (me refiero a las alertas) que se deberían revisar son:
  • los objetos y scripts embebidos
  • las tablas
  • y que no se han definido teclas de acceso (Access keys).

Y por último nos comenta que no se ha definido un SiteMap.

Informe 4 de Ready.mobi

Realmente muy completo este informe, ¿no?

¿Qué podemos concluir? Varias cosas:
  • Definitivamente el sitio del Sena no está concebido para ser visitado desde un móvil.
  • Es navegable, aunque resultará lento y por ende costoso hacerlo desde un móvil.
  • ¿Está el Sena haciendo mal su sitio Web? NO. Simplemente no han trabajado la plataforma móvil para ofrecer sus servicios.

Finalmente, y con base en esta pequeña prueba, recomendaría:
  • Usa OperaMini si NO estás trabajando tu Web para dispositivos móviles, pero quieres verificar que sea navegable en ellos.
  • Usa Ready.mobi si estás trabajando en una versión de tu sitio Web para móviles.
  • Y recuerda trabajar con los Estándares Web para que puedas realizar la versión móvil de tu sitio, fácil y rápidamente.

¿Qué opinas? ¿Estás de acuerdo?

Emezeta Rank: Todo sobre tu Web

sábado, octubre 20, 2007

Logo de Emezeta Rank

Hacía un buen rato que no salían nuevos validadores de sitios Web. Hoy les traigo, gracias a Microsiervos, a Emezeta Rank, un nuevo sistema para estimar el éxito y/o popularidad que tiene tu página web, blog o sitio de Internet.

Como dice Alvy, y por lo cual lo recomiendo, "en realidad no contiene ningún ránking como tal, aunque ciertamente le otorga una «calificación» simbólica a cada web que se prueba, sumando ciertos valores como los enlaces recibidos, el PageRank o los resultados de la validación del código de la página".

"...su verdadera utilidad... es la gran cantidad de información que proporciona de las diversas pruebas, con enlaces verdaderamente útiles... por ejemplo... valora la velocidad de respuesta aparente con WebSiteOptimization, la existencia de un Sitemap XML, la validación del robots.txt, el código XHTML y el CSS, algo tan recomendable técnicamente como escribir sin faltas de ortografía, la accesibilidad...".

Nueva Toolbar: Accesibar

jueves, octubre 11, 2007

Imagen de la Accesibar

Para complementar nuestro grupo de Toolbars he encontrado, gracias a seraccesible, el proyecto Accessibar.

Una extensión para Firefox que “permite alterar aspectos visuales de las páginas ayudando a mejorar su legibilidad aunque también se puede utilizar como herramienta para comprobar la accesibilidad de un sitio”.

Si eres desarrollador y te interesa la accesibilidad, te recomendaría mejor la Web Accessibility Toolbar para Internet Explorer y Opera, que, para nuestra grata sorpresa, ya tiene disponible una versión BETA de la 2.0 y están trabajando en una versión para Firefox.

A la Accessibar le veo más utilidad para usuarios finales. Pero bueno, es otra opción más y no sobra.

Premio Colombia en Línea 2007: Ganadores

domingo, octubre 07, 2007

Logotipo Premio Colombia en Línea 2007

El pasado jueves 4 de octubre fue la entrega de los Premios Colombia en Línea 2007. Los ganadores fueron:

  • Premio Especial: Mejor Desarrollo Móvil Celular – Comcel: Hubo un premio para Categoría Estudiantes y otro para Avanzados. Pero no hay URLs disponibles.
  • Mejor Blog en Línea: Se Nos Cayó El Sistema.
  • Mejor Sitio de Aprendizaje en Línea: SENA Virtual.
  • Mejor Sitio de Comercio Electrónico en Línea: TuBoleta.com.
  • Mejor Sitio de Empresa Pyme en Línea: Rines TYM.
  • Mejor Sitio Estatal en Línea: Alcaldía Santiago de Cali.
  • Mejor Sitio de Finanzas en Línea: Bancolombia.
  • Mejor Sitio de Gran Empresa en Línea: Suzuki.
  • Mejor Sitio de Noticias en Línea: El Tiempo.
  • Mejor Sitio de Alcaldía en Línea: Municipio de Maní.
  • Mejor Sitio de Política en Línea: Desierta.
  • Mejor Sitio de Promoción de Colombia: Desierta.

Veamos qué tan bien hechos están estos sitios, que representan supuestamente, lo mejor de Internet en Colombia.

Para este pequeño análisis recurrí a los validadores que más me gustan:

Como podemos ver en la siguiente tabla en cuanto a Estándares Web no están como bien. Ningún sitio validó, aunque se puede destacar el sitio de El Tiempo que sólo tuvo 4 errores. Por otra parte, el sitio de Rines TYM ni siquiera se dejó validar (¡Oh Sorpresa! Está hecho en Flash).

En cuanto a Accesibilidad, parece que NO es un criterio que los jurados hayan evaluado para la selección de los ganadores. De acuerdo al Examinator, cuya calificación va de a 1 (muy mal) a 10 (muy bien), estos sitios no son para nada accesibles.

Tabla de Resultados de la Evaluación con el Validador de la W3C y el Examinator

Adicionalmente quise revisar estos sitios con el emulador de Opera Mini y para mi sorpresa todos los sitios (excepto el de Rines TYM – hecho en Flash) cargaron bien. Aquí el punto se lo lleva Opera que adapta excepcionalmente los sitios tradicionales al diminuto tamaño de los celulares.

En las pantallas siguientes se puede ver cómo todos los sitios “parecen navegables” (no lo comprobé), destacándose positivamente el blog Se Nos cayó El Sistema y El tiempo, y negativamente Rines TYM, el SENA Virtual y TuBoleta (estos dos últimos por sus grandes imágenes que ocupan toda la pantalla del móvil en el Home).

Se Nos Cayó El Sistema:
Pantalla de Se Nos Cayó El Sistema

SENA Virtual:
Pantalla de SENA Virtual

TuBoleta.com:
Pantalla de TuBoleta.com

Rines TYM:
Pantalla de Rines TYM

Alcaldía Santiago de Cali:
Pantalla de Alcaldía Santiago de Cali

Bancolombia:
Pantalla de Bancolombia

Suzuki:
Pantalla de Suzuki

El Tiempo:
Pantalla de El Tiempo

Municipio de Maní:
Pantalla de Municipio de Maní

Esta evaluación ha sido muy ligera, pero creo que muestra la calidad de los ganadores. Considero que aquí no está representado lo mejor de la Web en Colombia y me gustaría saber bajo qué criterios se han seleccionado estos ganadores. El año pasado hice una propuesta de cómo consideraba que debería ser una selección de este tipo y creo que, como en años anteriores el criterio pareciera ser “el gusto” de los jurados (no expertos en Web). Es decir que no parecería existir un método concreto de selección.

Ahora, tampoco me mal interpreten y crean que estoy diciendo que esto es de lo peorcito que hay. El contenido y función de varios de estos sitios es excepcional (Ej: Se nos cayó el sistema, SENA Virtual y TuBoleta.com). Igualmente El Tiempo me parece excelente. Sin lugar a dudas es el mejor sitio de Noticias en Colombia (aunque con escasa competencia). Sin embargo no creo que esté bien visto que gane un organizador del evento (Sí, El Tiempo es uno de los organizadores), al igual que tampoco me parece que un sitio hecho en Flash sea un ganador.

Los sitios pueden tener el mejor contenido, pero para que sean lo mejor de Colombia deberían ser también los mejor construidos. ¿O qué opinas? ¿Consideras que estos sitios representan lo mejor de la Web de nuestro país?

Revisa todo acerca de tu sitio web

martes, junio 26, 2007



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.”

Este Blog no tiene un HTML Válido

domingo, diciembre 17, 2006



Una crítica que siempre recibo anónimamente es que mi Blog no tiene un HTML válido. Frases como "Resulta irónico que este sitio no pase la validación XHTML" han llegado a mi correo varias veces y quienes las escriben tienen mucha razón en su crítica: ¿Cómo puede Gabriel hablar en su blog de Estándares Web cuando éste no tiene un HTML válido?

Bueno, pues ahora tengo una buena noticia. El Home de este Blog ya tiene un HTML válido. Hace unos días me puse en la tarea de arreglar esto. Y aunque pensé que no era posible, sí lo fue.

Tuve que sacrificar la edición de posts en línea y el contador de StatCounter. Ah! Y cambiar mi Doctype de XHTML 1.1 (mi preferido y recomendado) por el XHTML 1.0 Transitional.

¿Esto es bueno? ¡Nooo! Si revisas cualquiera de los 26 post que he escrito NINGUNO valida. Mira el de Estándares Web por ejemplo.

¿Y entonces? Blogger es el culpable y no puedo hacer nada al respecto.

Cuando promuevo e invito a cumplir con los Estándares Web y hacer un HTML válido estoy asumiendo que, como yo, eres un diseñador/desarrollador web, por lo tanto: tú generas el HTML. Estoy hablando para quienes codifican el HTML de sus páginas, ya sea con Dreamweaver, Visual Studio o cualquier otra herramienta para hacer sitios Web. Visto desde este punto de vista, como tú generas tu propio HTML, puedes hacerlo válido.

No se si afortunada o desafortunadamente, desde que soy conciente de los Estándares, nunca había trabajado con un Manejador de Contenidos o CMS, hasta que creé mi Blog. En este caso yo no produzco todo el HTML. Lo producimos entre Blogger y yo. Y como la gente de Blogger no ha tenido en cuenta completamente las Pautas de Accesibilidad para las Herramientas de Autor (ATAG - Authoring Tool Accessibility Guidelines) de la W3C, sucede que el HTML de este Blog no es válido. Punto.

¿Esta es una excusa para no trabajar con los Estándares Web? De ninguna manera. Por el contrario es una invitación a que:

  • Si produces el HTML de tus sitios, tienes el poder de hacerlo válido y trabajar con los Estándares.
  • Si tienes que trabajar con un manejador de contenidos (como yo con este Blog), simplemente haz lo que puede hacer: genera tu contenido con un HTML válido.
  • Si necesitas un manejador de contenido: escoge uno que cumpla con los estándares.
Eso si. Ten en cuenta algo muy importante. ¿Recuerdas que para que este blog validara tuve que quitar el contador de visitas de StatCounter? Pude hacerlo porque desde hace meses estoy trabajando con otro contador de visitas, el de Performancing y el código que ellos generan es válido. De no ser así, hubiera preferido tener un contador de visitas y uno o dos errores de validación, que un sitio que validara y no tener estadísticas de mi Blog.

Así que: ¡Los Estándares Web son un medio, no un fin! ¡Y si: Mi blog no válida!

Actualización Sep. 2007:
Este post lo escribí cuando el blog era : user experience en español. Ahora que somos estándares y accecibilidad nuevamente quedó el HOME inválido. Trataré en algún tiempo que me quede libre de trabajarle a ello.

Recursos sobre Estándares Web y Accesibilidad

lunes, noviembre 27, 2006



Si estuviste en una de las charlas que dicté sobre Estándares Web y Accesibilidad recordarás muchos recursos muy interesantes. Aquí te los recuerdo y agrego unos nuevos. ¿No estuviste? No importa. Seguramente también serán de tu interés.

¿Eres diseñador/desarrollador web y comenzarás a trabajar con los estándares y en pro de la accesibilidad web? Entonces....

Utiliza uno de estos navegadores (además de IE):
- Firefox
- Opera
- Flock

Instala estas toolbars:
- Internet Explorer Developer Toolbar
- Web Accessibility Toolbar para IE
- Web Accessibility Toolbar para Opera
- Web Developer Toolbar para Firefox o Flock

Aplica los estándares:
- Inicia con el Doctype adecuado
- Además utiliza este CSS inicial
- ¿No has trabajado con CSS? Building your first CSS site new!
- Y diagrama con CSS (Más layouts)…
- Recuerda siempre el HTML malo, el feo y el bueno
- Haz tu navegación con listas (el buen HTML) new!
- Mejor aún: un excelente manual de XHTML + CSS con todo esto! new!
- Y finalmente revisa tu sitio con esta Lista de Chequeo

Valida los Estándares Web de tu sitio:
- Validador de HTML de la W3C
- Validador de CSS de la W3C
- Otros validadores de HTML
- Otros validadores de CSS

Valida la Accesibilidad de tus páginas:
- Examinador
- TAW Online
- Hera
- Otros validadores de accesibilidad

Valida tu página con otros navegadores:
- BrowserShots
- iCapture
- html2txt
- Otros más

Y no olvides validar otros factores como color (VisCheck), peso y velocidad de carga (Web Page Analizar) y más

Sitios de Referencia:
- W3C en Español
- Grupo WAI de la W3C
- Introducción a las Pautas de Accesibilidad al Contenido WCAG (Aquí encuentras los vínculos a las Pautas al igual que a las listas de Chequeo).
- CSS Zen GardenOtras galerías de CSS
- El Metro de Medellín: Usable y Accesible
- Estándares Web y Accesibilidad en Colombia
- Comparación contra Google de dos sitios con igual contenido y diferente HTML

Herramientas para Diseñadores y Desarrolladores

martes, diciembre 27, 2005


Definitivamente si deseas tener un sitio usable, accesible, encontrable, etc. necesitas hacer pruebas una vez tengas tus páginas listas. Por ejemplo unas pruebas de usabilidad (las cuales no son para proyectos Web inmensos ni tampoco necesitan ser pruebas dispendiosas y complejas como lo muestra Nielsen: Con tan sólo 5 usuarios puedes hacer tus pruebas de usabilidad).

Pero si crees que tienes que esperar estas pruebas para revisar tu sitio estás muy equivocado. Existen herramientas que te ayudarán desde la etapa de diseño y programación a montar y revisar una variedad de aspectos que ni te alcanzas a imaginar. Herramientas que te servirán a montar tu sitio o mejorar el que ya tienes montado.

Por ejemplo puedes hacer cosas tan triviales como deshabilitar el JavaScript, las hojas de estilos o los colores para revisar cómo carga tu sitio sin ellos. Puedes revisar tu página contra validadores de CSS, (X)HTML o contra las recomendaciones de accesibilidad WAI o Section 508. Puedes crear automáticamente un menú usable y accesible basado en estilos. Puedes llegar hasta simulaciones tan complejas como ver tu página como la vería una persona con daltonismo.

¿Te suena interesante? Lo mejor es que no te he mencionado que todo esto es gratuito.

A continuación encontraras un gran listado de herramientas clasificadas por:

  1. Add-ons para tu Navegador (Browser Add-ons)

  2. Herramientas para Descargar (Tools)

  3. Herramientas Online (Online Tools)

  4. Validadores (Validators)

  5. Otros recursos (Other resources)

  6. Actualizaciones a este Post (Updates to this post)

Si consideras que falta alguna herramienta o si hay un vínculo muerto o desactualizado por favor escríbeme. Mi interés es mantener este post como una referencia actualizada y de obligatoria visita para quienes trabajamos montando Sitios Web.


1. Add-ons para tu Navegador
Estos add-ons son la mejor compañía para todo desarrollador y diseñador Web. Básicamente facilitan el acceso a muchas herramientas y validadores desde el navegador (IE o Firefox).

  • Toolbars:

    • Internet Explorer Developer Toolbar (Internet Explorer)
      Esta toolbar es la homóloga a la Web Developer Toolbar para Firefox pero con menos funciones. Trae una gran variedad de características para explorar y, sobretodo, entender cualquier página Web. Por ejemplo puedes:
      • Localizar, seleccionar y mostrar información de los diferentes elementos de la página.
      • Bordear tablas, celdas, imágenes, etc.
      • Validar la página.
      • Cambiar el tamaño de tu navegador (800x600, 1024x768, etc.).

    • Web Accessibility Toolbar (Internet Explorer y Opera )
      De obligatoria instalación, esta toolbar ha sido desarrollada para ayudar en las pruebas manuales de páginas Web en una variedad de aspectos de accesibilidad. Te permite:
      • Identificar los componentes de una página.
      • Usar otras aplicaciones online (como validadores).
      • Simular experiencias de usuario.
      • Tener acceso a referencias y otro tipo de recursos.

    • Web Developer Toolbar (Firefox, Flock y Mozilla)
      Otro excelente complemento para Firefox y similares. Tiene una variedad impresionante de funciones para revisar tus páginas, tus CSS, formularios e imágenes. Permite bordear elementos, cambiar el tamaño de tu navegador, deshabilitar funciones del navegador, etc. Si utilizas Firefox es de obligatoria instalación.

  • Add-Ons:

    • Aardvark Extension (Firefox, Flock y Mozilla)
      Esta práctica extensión te permitirá revisar cómo están diseñados los sitios que visitas bordeando e identificando cada parte de la página con un color rojo. Te permite identificar divs, p, etc.

    • Accessibility Extensions (Firefox y Mozilla)
      Revisa tu sitio cómo lo navegarian personas con discapacidades.

    • CheckIE Plug-in (Internet Explorer)
      CheckIE es un plug-in para Microsoft Internet Explorer que reune diversos servicios de evaluación y reparación disponibles en línea, a los que permite acceder a través del menú contextual del navegador (botón derecho). Es posible revisar cualquier página mediante alguno de los 17 servicios de validación y análisis en línea disponibles. Nació como contra-propuesta al Checky que sólo funciona para Firefox.

    • Checky Extension (Firefox, Flock y Mozilla)
      Esta extensión está especializada en la validación y análisis de páginas web. Víncula gran cantidad de validadores y servicios de análisis online. Valida, analiza, revisa e inspecciona todo documento que contenga HTML, XHTML, CSS, RDF, RSS, XML, P3P, vínculos, metadata y mucho más. De obligatoria instalación.

    • Fangs Extension (Firefox y Mozilla)
      Esta excelente extensión crea una representación textual de tu página de manera similar a cómo sería leeída en un lector de pantalla.

    • Firebug Extension (Firefox)
      Un explorador del DOM. Te permite revisar tu JavaScript, CSS, HTML y Ajax.

    • HTML Validator Extension (Firefox y Mozilla)
      Esta es una extensión que válida el HTML directamente en tu navegador aprovechando el progama HTML Tidy (el cual reseño más adelante en las 2. Herramientas para Descargar : HTML & CSS) y que viene embebido en los navegadores Firefox y Mozilla.

    • LiveHTTPHeaders Extension (Firefox)
      Revisa al vuelo los headers que envía tu servidor.

    • MozBraille Extension (Mozilla y Firefox)
      Esta extensión te tranforma el navegador en un navegador accesible para ciegos o personas con ceguera parcial. Te ofrece tres salidas: mediante una terminal braille, auditiva o por aumento del tamaño de los textos.

    • SIDAR and HERA Extension (Netscape, Firefox, Flock y Safari)
      Por un lado la Extensión Sidar te facilita el acceso a las distintas secciones y recursos en web del Sidar. Por el otro lado, la HERA-Extension te permite revisar la página web que visitas mediante HERA (validador disponible en los Validadores de Accesibilidad).

    • TAW3 with a Click (Firefox)
      Otra excelente extensión para verificar la accesibilidad de tu sitio. Esta vez mediante el servicio del TAW3.

    • View Source Chart Extension (Firefox)
      Esta extensión crea un gráfico a colores con la estructura del sitio. Una versión muy mejorada de la X-Ray Extension. Totalmente recomendada.

    • X-Ray Extension (Firefox)
      Esta sencilla extensión te permite ver los tags de la página sin tener que ver su código fuente. Excelente para evaluar la semántica de tu página.

2. Herramientas para Descargar

Accesabilidad

  • A-Prompt
    Esta aplicación examina tus páginas en busca de barreras para la accesibilidad. Frente a los errores que encuentra hace las reparaciones automáticamente (cuando es posible) o te permite que tu las corrijas mediante un asistente.

  • MAGpie
    Esta herramienta te facilita la adición de notas, títulos y descripciones audibles a tu multimedia en Web. Hecha especialmente para facilitar el acceso a personas con discapacidades.

  • TAW3 Standalone
    En este sitio se ofrecen excelentes herramientas para análisis de accesbilidad. Esta es una de ellas. Una herramietnas que puedes descargar en tu computador. Igualmente tienen una extensión para Firefox y un validador Online
HTML & CSS
  • Bullet-Proof Rounded Corners
    ¿Deseas bordes redondeados en tus diseños sólo con CSS? Aquí está el código que te lo hará y compatiblemente con "todos" los navegadores. Además he aquí un listado completo con todas(?) las técnicas conocidas. Mucho ojo: "Los bordes redondeados en CSS no incrementan la accesibilidad". Lo dijo Christian Heilmann y yo le creó. ;)

  • CSE HTML Validator Lite
    Esta aplicación para Windows te permite revisar y arreglar el HTML que generas. Además trae un completísimo Editor de HTML.

  • CSS Starter
    Faruk Ates te facilita un CSS inicial para tu sitio. Con el arrancarás más fácilmente tus sitios diagramados con CSS. Ya tiene el truco para que las fuentes de tu sitio sean escalables y que se vean de igual tamaño en todos los navegadores, incluidos en IE4 e IE5 (Recuerda trabajar el tamaño de las fuentes en em).

  • CSS Vista
    Esta magnífica herramienta te permite editar tus hojas de estilo en vivo, así que cada cambio que vas haciendo lo ves reflejado simultáneamente en dos paneles que muestran el Internet Explorer y Firefox.

  • Evrsoft First Page 2006
    Este es básicamente un editor que fácilmente reemplaza a Dreamweaver. Trabaja con los estándares Web e incorpora a HTML Tidy. Más de 3 millones de descargas deben significar algo. ;)

  • HTML Tidy
    Esta es una pequeña aplicación que permite limpiar el HTML que generas en tus páginas. Corrige errores sintácticos al igual que hace recomendaciones para hacer las páginas más accesibles. Trabaja bajo la línea de comandos y hay una versión para cada sistema operativo. No te recomendaría descargarla ya que hay versiones online en la sección de 4. Validadores : HTML, además de una extensión para Firefox y Mozilla llamada HTML Validator en la sección de 1. Add-ons para tu navegador y el editor Evrsoft First Page 2006 que acabo de reseñar.

  • Nice Forms
    Mejora el diseño tradicional de tus formularios HTML con este excelente código de BadBoy.

  • Simple Tricks for More Usable Forms
    En este artículo Simon Willison nos regala unos excelentes códigos para hacer nuestros formularios más usables. Totalmente recomendable.

  • sIFR 2.0: Rich Accessible Typography for the Masses