Categoría: Accesibilidad

Color Explorer | App web para gestionar el color
Color Explorer [en] es una app web, un proyecto, que iniciaron en 2006 los daneses Port80.biz con el objetivo de aunar todas las necesidades de gestión de color y creación de paletas que tenemos los diseñadores.
Sitios parecidos hay muchos pero gracias a Juan Diego creo que os puedo decir que este es uno de los más completos que he visto hasta el momento, junto a Color Scheme Designer y por supuesto Kuler.
Curioso que a pesar de la tendencia 2.0 ellos prefieren quitar importancia al registro de usuario, Color Explorer es para usarlo desde el primer momento sin necesidad de crear perfiles ni registrarte.
La lista de funcionalidades es bestial, un avance:
Extraer colores de una imagen
(más…)
14 de mayo de 2009
Dicotomía: Estándares web | Accesibilidad vs. Diseño
Términos interrelacionados que no siempre se disponen en el mismo orden a la hora de desarrollar un sitio web:
Estándares web | Experiencia del usuario | Accesibilidad | Usabilidad | Diseño
El posicionamiento de los diseñadores web (o diserrolladores) en este tema está normalmente dicotomizado entre 2 posturas:
1. La promulgación y la defensa del uso de estándares, de hacer sitios accesibles, compatibles y universales.
2. Diseñadores que ponen toda su atención en mejorar la experiencia del usuario, tanto estética como usable.
Esta dicotomía no es del todo excluyente, en primer lugar porque la UX y el diseño no están reñidos necesariamente con el cumplimiento de estándares, como ejemplo sirva el sitio de Andrés Nieto.
Cuando son excluyentes es cuando se postula la defensa de una u otra postura, normalmente es complicado pasar todas las validaciones y esto en principio limita el número de interesados en la defensa de la 1ª postura, se dice «prefiero pensar en mis usuarios que en el W3C» pero es que el W3C precisamente se crea pensando en la defensa de los usuarios.
La postura intermedia para por el uso de AJAX, de código no intrusivo, ayuda a crear ese término medio, los códigos se validan, la experiencia del usuario y el diseño se mejora si se soporta Javascript y todos contentos.
Y luego está el grosso del universo web (profesional), sitios donde casi se cumplen los estándares, casi son accesibles y donde no impera sólo la libertad estética, se piensa en compatibilidad, en SEO, velocidad de carga, en todos esos factores interrelacionados que harán «según el punto de vista» un sitio mejor o peor.
A debate
He creado en pqpq.es esta dicotomía para debatirla, como usuario y/o como diseñador web:
¿Crees que es importante cumplir los estándares web del W3C?
- Sí, los sitios web deberían cumplir los estándares del W3C
- No, no comulgo con el cumplimiento de los estándares del W3C
6 de abril de 2009
Nueva versión genial de Color Scheme Designer
Petr Stanicek es el checo autor del generador online de paletas de colores Color Scheme Designer.
La versión anterior, la versión 2 de 2005, que tenía versión en español ha sido reescrita desde cero con la ayuda de jQuery, de hecho su autor ha desarrollado diversos plugins con esta librería. La V3 además de estrenar interfaz dispone de multitud de funciones que harán las delicias de todos los que nos dedicamos al diseño.
La aplicación online más parecida para generar temas o paletas de color es Adobe Kuler, que necesita de Flash Player y requiere registro para las descargas de las paletas, Color Scheme Designer no desmerece en nada a la creada por el gigante Adobe.
Como os digo no requiere registro, el interfaz es una gozada (no funciona en IE6, ¡actualízate!), y las opciones muchas, veámoslas una por una:
(más…)
10 de febrero de 2009
Plantilla XHTML y CSS válidos y comentarios anidados
Hoy le he dedicado un rato a editar y depurar la plantilla de este blog.
En primer lugar tanto el código XHTML como el CSS pasan los tests de validación de W3C. Básicamente ya estaba. el único cambio que notaréis los que navegáis con Firefox es que ya no tengo esquinas redondeadas, he preferido tener un CSS válido, además muchos plugins hacen que no cumplamos los estándares, es el caso de Sociable que tiene estilos de opacidad no estándar y el plugin cforms que directamente lo he dejado (de momento) en la página del cadáver exquisito 2.0,
En el resto he vuelto a un simple formulario y de paso he utilizado todas las posibilidades de WP 2.7 para crear comentarios anidados que espero den más juego probadlo.

10 de febrero de 2009
9 formas de separar por sílabas textos web
A la maquetación web le quedan muchas lagunas que los estándares y navegadores irán implementando. Mientras tanto os voy a mostrar 9 soluciones de yellowgreen si queréis que el texto de vuestro sitio sea separado por sílabas.
Es útil sobre todo en textos justificados para evitar los incómodos ríos que dificultan la lectura. Siempre lo podemos hacer manualmente pero además del pesado trabajo y de que el texto no será indexado correctamente no es una opción a considerar si tienes un sitio con contenido dinámico y constantemente actualizado.
9 soluciones
Las soluciones pasan por un generador online, Ruby, Java De todas ellas hago especial hincapié en la opción javascript (HyÂphenÂator) en la que detallo su uso, un par de plugins interesantes, uno para la librería MoreCSS (AJAX) y otro para WordPress, y un bookmarklet para hacer la separación en nuestros propios navegadores.
(más…)
24 de enero de 2009
Tecnología RWTH-BOSTON-400 | Traductor de lenguaje de signos
Se está investigando un sistema que reconocería mediante visión artificial el lenguaje de signos con los que se comunican las personas con problemas de lenguaje.
Su nombre es RWTH-BOSTON-400 y tienes toda la documentación en este pdf [en]
La idea es que con un ordenador y una cámara web se reconociera el gesto y movimiento para darnos la traducción mediante el software del diccionario, actualmente traduciría 843 frases. No existe hasta la fecha ningún diccionario bilingí¼e de estas características, sí de texto a gestos pero no de gestos a texto.
(más…)
14 de enero de 2009
Esquinas redondeadas en Internet Explorer | border-radius
De momento sólo podemos redondear esquinas con CSS en algunos navegadores (Firefox, Chrome), si estás viendo este blog verás según el navegador en el sidebar y en los subtítulos de este artículo el efecto de border-radius, el problema es que no es una propiedad estándar aún, así que debemos utilizar una propiedad particular para cada navegador que redundará en la validación de nuestro CSS.
Redondear esquinas en navegadores modernos (Firefox, Konqueror, Safari, Chrome)
```
border-radius: 3px; // propiedad CSS3
-ms-border-radius: 3px; // para IE 8 (Actualización: no sirve, fue una especulación
 pero no funciona en IE8)
-moz-border-radius:3px; // Firefox
-webkit-border-radius: 3px; // WebKit y Safari
-khtml-border-radius: 3px;
```
Esperando que los navegadores apliquen la especificación CSS3 correctamente para poder utilizar la propiedad border-radius para redondear esquinas. Concretamente esperamos que uno de los navegadores más utilizados, no el más popular, Internet Explorer, lance su versión 8, en esta página de microsoft puedes ver la comparativa de las diversas propiedades soportadas por las versiones de IE. Otra razón para que elijas al mejor navegador.

3 soluciones para redondear esquinas en Internet Explorer 7 y anteriores:
Javascript
Con este método solucionarás también el problema de los PNG transparentes en IE. Se añade a una clase y funciona en:
- Firefox
- Navegadores Webkit
- Internet Explorer 6 | Internet Explorer 7Descargas el js
(más…)
15 de diciembre de 2008
Igualar el alto de las columnas con CSS | divs de fondo
Para igualar el alto de las columnas con la intención de utilizar un color distinto de fondo independientemente de su altura podemos utilizar el método de Matthew James Taylor. Simplemente metemos el color de fondo en otros div que se colocan detrás.
La ventaja de este método es que es compatible con todos los navegadores, ni hacks ni box-model, sólo CSS en %, float y position relative. Las 3 columnas están contenidas en 3 divs contenedores, en vez de 1 que sería lo normal, cada uno de estos divs es el que se posiciona detrás de cada columna para darle color.
(más…)
13 de noviembre de 2008