Seguramente debido a que muchos de nosotros, los que trabajamos en la web, somos autodidactas o a que es un medio en constante movimiento, donde quedarse desfasado es cuestión de meses, la principal fuente de aprendizaje e inspiración a la que todos recurrimos es la observación. Esto hace que, en ocasiones, nos pasemos de unos a otros ciertas malas costumbres. Algunas incluso consideradas comúnmente como buenas soluciones cuando no lo son.
Andy Rutledge desmonta un par de layouts muy comunes (el de tres columnas con el contenido en el centro y el típico de los periódicos online) demostrándonos por qué son erróneos y ofreciéndonos algunas soluciones. No os lo perdáis, seguro que os sorprendéis mucho.
A veces, cuando vemos esos sitios y aplicaciones web que amasan millones pensamos ¿por qué ellos y no yo?.
En la mayoría de ocasiones no valoramos cuanto trabajo lleva conseguir un sitio de éxito, pensamos que es todo sencillo y que la mayoría viene dado.
Pero, claro, un desarrollo exitoso depende de tantos factores que no se ven, que se asemeja a un iceberg.
La parte visible la forman el contenido y su imagen, por debajo viene lo importante: buena programación, una planificación consciente, usabilidad, accesibilidad, optimización…
Todo ello conforma un sitio de éxito, un buen diseño con grandes contenidos a los que nadie puede acceder, que son difíciles de comprender o que no funcionan correctamente, no sirve de nada.
Via iGeek
Hace ya mucho tiempo traduje un artículo que hablaba de las ventajas de utilizar “texto oculto” específico para usuarios de lectores de pantalla. Sin duda, cuando traducía aquello podía verle uso para ocultar los labels de los formularios, sustituir texto por imágenes y poco más. Pero hoy, gracias a la pequeña selección de enlaces de CSS Tricks he descubierto una forma inteligente de añadir una capa más de atención para los usuarios discapacitados.
David Walsh comparte con nosotros una gran idea. Incluye un párrafo de texto oculto con css al principio de la página, que contiene un mensaje para usuarios de lectores de pantalla, algo así (obviamente, traducción libre libre):
<p class="oculto">Bienvenido a mi sitio.
Este sitio ha sido creado para todo tipo de usuarios.
Por favor contacta conmigo en xx@xx.xx si encuentras alguna
dificultad al navegar por él.</p>Por supuesto no sirve de nada si nuestra página es un infierno de tablas y código inaccesible pero es un pequeño detalle agradable y práctico al llamar la atención de todos aquellos usuarios que hayan encontrado dificultades para navegar el sitio, con lo que podremos mejorarlo.
Eso si, no abuséis del texto oculto. Puede llegar a ser molesto, en los comentarios del artículo de David alguien apunta a colocarlo tras un enlace de “saltar al contenido” para no forzar a nuestros usuarios a escuchar una y otra vez el “utilísimo aviso accesible” y me parece la solución ideal.
Ademas, aún albergo dudas sobre si Google podría penalizarte al ofrecer una versión “distinta” de la página para usuarios y arañas. Mi opinión es que no debería si no lo usamos para meter con calzador oncemil palabras clave pero visto lo puntilloso que se nos está volviendo…
Lo que lamento es que no cuento con el testimonio de ningún usuario de lectores de pantalla para saber de primera mano lo útil o molesto de un aviso de este tipo. Si conocéis alguien que pueda probar, por favor, compartid la experiencia.
Hace un mes aproximadamente conocíamos el nuevo API de Google para insertar gráficos en nuestros sitios web de forma sencilla. Con la euforia de la novedad creo que pocos reparamos en lo completamente “inaccesible” que era.
Chris Heilman miembro del grupo de Accesibilidad de Yahoo!, dio a conocer una técnica con la que generar gráficos de tarta a partir de una tabla y de esta forma permitir que los usuarios de navegadores convencionales vean la imagen y el resto accedan a una tabla de datos. Para ello simplemente tendremos que añadir un javascript al final del cuerpo de la página con lo que, de un tiro, mejoramos la accesibilidad de nuestros datos y conseguimos gráficos rápidos sin todo el lío del API.
Sin duda es un gran ejemplo de como todo puede ser más accesible con sólo proponérnoslo y sin implicar páginas especiales o molestias para los usuarios convencionales.
Supongo que jugando con los parámetros del API, las celdas de la tabla y el javascript podríamos basarnos en este ejemplo para crear otro tipo de gráficos. Si os animáis a hacer pruebas ¡no os olvidéis de contárnoslo!
Via Ajaxian
Sin duda, un aspecto fundamental para que nuestros sitios sean verdaderamente accesibles es el color. A pesar de que, salvo en aquel anuncio del Golf, las personas con ceguera al color han pasado bastante desapercidas, se trata de un trastorno bastante común.
A pesar de que estoy segura de que todos sabemos lo que es el daltonismo y procuramos no hacer juegos con el rojo y el verde, existen muchos otros tipos de ceguera al color, tanto parciales como totales.
Por eso esta herramienta que descubro a través de Xyberneticos puede resultarnos tremendamente útil. GrayBit nos propone una forma diferente de ver nuestro sitio web, en escala de grises, para que podamos comprobar si los contrastes de nuestros colores son suficientes aún para personas que no son capaces de verlos.
Aquí os dejo una captura de este sitio, sale bastante bien parado aun que, como en todo, siempre se puede mejorar.
Webmaster Libre en escala de grises
GrayBit: http://graybit.com/
La ceguera al color, en sus múltiples formas, es una enfermedad relativamente común (afecta a un 8% de los hombres)
Color Oracle te permitirá comprobar los esquemas de color de tus diseños, filtrando la pantalla para simular ceguera al color.
Color Oracle es freeware y existen versiones para Windows, Linux y Mac OS
Color Oracle: http://colororacle.cartography.ch
Seguro que si habéis creado alguna aplicación o sitio web sabréis la cantidad de horas que se pueden echar planificando y pensando cómo hacerlo más sencillo, usable y cómodo para nuestros usuarios.
A pesar de todo, los usuarios no son previsibles y no hay nada como observar su comportamiento ante el sitio para descubrir sus flaquezas y fortalezas. Con RobotReplay podrás grabar las sesiones de tus usuarios y visualizar su interacción con tus webs. Podrás registrar los movimientos de su ratón, cómo rellenan los formularios…
De momento es un servicio gratuito, a ver si dura…
RobotReplay: http://www.robotreplay.com/
Existen múltiples test y validadores para tu código que puedes emplear online, no obstante, si necesitas ir validando múltiples sitios puede ser laborioso ir acudiendo al sitio de cada herramienta.
Si hay una ventaja que hace destacar a Firefox sobre los demás navegadores (sin ánimo de polemizar, otros navegadores también tienen sus herramientas pero se salen de la perspectiva de este blog al no ser software libre) son sus extensiones.
Para todos los desarrolladores web, existen numerosas extensiones que nos ayudarán a validar y verificar nuestro código:
Con Offline Page Validation podrás enviar cualquier página que estés visitando al servicio de validación del W3C incluso si son páginas locales, que requieran registro, etc.
Valida tus hojas de estilo mediante el servicio del W3C
La “HERA-Extension” es una extensión para los navegadores de la familia Mozilla (Netscape, Firefox, Flock, Safari, etc.), que permite revisar online, en un solo clic, la página web que estemos visitando e incluso un marco de esa página (si los tiene), facilitando el uso y acceso a HERA.
TAW3 en un click te permite comprobar la accesibilidad de las páginas que visites, utilizando el servicio TAW3 Online y las reglas WCAG 1.0
Con ella podrás comprobar que el contraste de los colores que has escogido para tu sitio web es adecuado para todos tus posibles visitantes
Te mostrará tus páginas de forma similar a como las interpreta un lector de pantalla
Esta extensión está pensada para ser una ayuda en la navegación de personas discapacitadas pero los desarrolladors podemos utilizarla para comprobar si su desempeño es correcto
Entre sus múltiples posibilidades (de las que hablaremos en unos días en profundidad) está la de validar tus sitios locales y los sitios que visites, tanto su html y css, como su accesibilidad…
La extensión Total Validator, de la que ya hablamos por aquí, te permite realizar múltiples validaciones en un solo click
Valida HTML, XHTML, CSS, RDF, RSS, XML, WAI, Section 508, P3P, Hypervínculos, Metadata y más
Los siguientes consejos, extraídos de la web de la WAI, resumen los puntos clave de las directrices de accesibilidad web: WCAG 1.0
Como me señalaba Rodolfo Pilas en los comentarios de 9 razones para no usar frames pueden existir proyectos en los que el uso de frames pueda resultar adecuado. Si no tienes más remedio que usar frames, al menos que sean accesibles y usables.
Por ejemplo:
…
En el caso de los iframes deberás encerrar el contenido adicional entre las etiquetas <iframe> y éste sólo se mostrará a los usuarios cuyos navegadores no soporten frames.
Por ejemplo:
name y da información sobre su contenido o función con el atributo titlelongdesc de, al menos, uno de los marcos del framesetAdemás, como recompensa adicional, los buscadores podrán indexar tu sitio correctamente y mejorará tu posicionamiento.
Alojado en RedCoruna Hosting
¿Quieres hasta 6 meses de hosting gratis? Utiliza el cupón RCwebmasterlibre al contratar cualquier plan con RedCoruna - más información
El principal motivo por el que no recomiendo utilizar Smarty es porque el propio PHP tiene una sintaxis embebida, lo que permite utilizarlo sin más para escribir plantillas web.
Guerra Creativa es una comunidad para Creativos. Nosotros te proporcionamos el campo de batalla y el armamento para conquistar el mundo creativo. A través de concursos de diseño web y de logos, l…
Con este Ebook puedes tener un sitio web con hospedaje y domino gratis, ademas de un CMS gratis, no debes registrarte en nada, lo unico que debes hacer es luego de leerlo compartirlo, regalarlo, si…
Lista de 32 sitios para descargar imagenes gratis, es una recopilacion de no uno ni dos sino 32 Bancos de Imagenes
Post para aprender a descargar las conocidas librerías de Evermotion para diseñadores que trabajan con 3Ds Max.
¿Qué medidas de seguridad se tienen en cuenta en el momento de implementar una subida de archivos en PHP?
¡Hola!
El componente Auth del framework CakePHP guarda las páginas en la memoria cache de IE7 (o eso es lo que creo haber entendido).
Para que no lo haga, he añadido los campos Ca…
Theresa Neil realizó un extraordinario análisis de 12 diseños estándar de interfases web como parte de su libro Diseñando Interfases Web: Principios y pautas para la interacción
50 herramientas extremadamente útiles para PHP
Tendencias de diseño de botones de ”llamada a la acción”
Ver más noticias de los usuarios