Simplemente pregunta: Integración de la accesibilidad en el diseño es un libro escrito por Shawn Henry, cuyas actividades se centran en la Accesibilidad en entornos web, ayudando y colaborando con el W3C. Henry pone a nuestra disposición de forma gratuita el libro en formato digital (no es un PDF, si no que es un website con enlaces a los distintos capítulos). Sin embargo, también podremos adquirir el libro en formato impreso por 39$ a través de Lulu (servicio similar al ofrecido por Bubok). El libro, originalmente escrito en inglés, podemos encontrarlo además en español y japonés, aunque la versión impresa sólamente está disponible en inglés.

A través del libro, conoceremos los conceptos básicos para mejorar la accesibilidad de nuestra página web e incluso de cualquier otro producto, de forma que sean más útiles tanto para personas con alguna deficiencia como para cuaqluier tipo de situación. Aprende a desarrollar de forma adecuada soluciones de accesibilidad efectivas.

La accesibilidad consiste en diseñar productos para que las personas con alguna discapacidad (física, psíquica, cognitiva o técnica) puedan utilizarlos y hacer que las interfaces de usuario sean perceptibles, operables y comprensibles para personas con distintos tipos de capacidades y en circunstancias, entornos y condiciones diferentes. De esta forma, la accesibilidad también beneficia a personas sin discapacidad y a las organizaciones que desarrollan productos accesibles.

Más info | http://www.uiaccess.com/accessucd/index.html

A través de un pequeño fichero Javascript podremos personalizar el aspecto de los enlaces de nuestra página web o blog  añadiendo un pequeño icono que los identifique como enlaces externos, internos, e-mail, punto de ancla, fichero de audio o video, flash, etc. Los iconos son imágenes .PNG sin fondo, de forma que podremos usarlos en cualquier sitio sin importar el color o background.

Para utilizarlo, podremos importar el javascript directamente desde la web del autor, por lo que siempre lo tendremos actualizado, aunque yo prefiero descargarlo y subirlo a mi FTP (por motivos de seguridad). Basta con asignar la clase class=”dlink” a cualquier contenedor (div, p, table, etc) de nuestra web donde queremos que los enlaces se vean afectados por los nuevos estilos. En caso de que no deseemos aplicar el estilo a algún enlace, tendremos que asignarle  la clase class=”no_dlink”.

Automáticamente, el script detectará qué tipo de enlace es: externo, interno, dirección de correo, punto de ancla, un tipo de archivo determinado, etc., y seleccionará el icono que le corresponda. Por ejemplo, si es un enlace interno, aprovechará el favicon de nuestra web en caso de que lo tengamos, si no, utilizará un icono de la Tierra; para los enlaces de punto de ancla, obviamente, el icono es un ancla.

En caso de que decidamos descargar el javascript y subirlo a nuestro FTP, tendremos que bajarnos también los iconos y subirlos a una carpeta llamda ../gfx o bien modificar el código y cambiar las rutas relativas a absolutas que apunten a la web del autor.

Esta utilidad podríamos desarrollarla fácilmente con jQuery, sin embargo, el script Dlink ocupa menos de 1kb y no necesita importar ninguna libreria javascript.

Más info | http://oopstudios.com/dlink/index.html
Fuente | http://www.visual-blast.com

Sitonomy es un servicio gratuito que permite a desarrolladores y diseñadores web encontrar las tecnologías con las que está construida una determinada página web o blog. Gracias a una base de datos de las tecnologías más populares en distintos ámbitos (análisis de estadísticas, medios promocionales y publicitarios, lenguaje de programación, tipo de servidor, etc.), el servicio te facilitará la decisión de qué tecnologías utilizar en tu propio proyecto web o bien qué herramientas alternativas existen a las que usas actualmente.

Por otro lado, gracias a este servicio, podremos espiar las páginas web de la competencia o aquellas en las que estemos interesado conocer cómo están construidas y a través de que tecnologías.

Más info | http://www.sitonomy.com
Fuente | http://wwwhatsnew.com

Como ya comenté en una entrada del blog, la tecnología sIFR (Scalable Inman Flash Replacement) nos permite reemplazar el texto en una página web por una imagen u objeto flash. El uso que podemos darle a este tipo de recurso es para la utilización de tipografías no convencionales en páginas web o por ejemplo, si queremos mostrar nuestro e-mail en formato imagen para que ningún spammer pueda encontrarlo (AboutUs.org lo utiliza para su wiki).

Para lograr reemplazar el texto por una imagen o un objeto flash en tiempo de ejecución se utilizan una serie de lenguajes de programación (JS, DOM, AS, etc.). Por suerte, en la red disponemos de diversos scripts y plugins que nos facilitan la tarea y basta con unas pocas instrucciones para poder utilizarlos.

El plugin jQuery sIFR es un addon para el framework de JavaScript jQuery que facilita reemplazar el texto en una página web a través de la tecnología sIFR y su implementación mediante el plugin jQuery Flash. A través de una función JavaScript buscará los elementos de texto que deseas reemplazar siguiendo el método DOM de jQuery. Para cada elemento encontrado, generará automáticamente un flash con la configuración que hayamos establecido (tamaño, color, tipografía, etc.), que gracias al plugin jQuery Flash, se embeberá correctamente en la página web.

Su uso es muy sencillo, basta con añadir la función al Framework de jQuery e invocarla cuando deseemos reemplazar el texto. Por ejemplo:

<div id=”oldtype”>Texto de ejemplo

<input onclick=”$(‘#oldtype’).sifr({font: ‘fonts/Medici Text’, color:’#f00′}); ” type=”button” value=”sIFR this…” />

<input onclick=”$(‘#oldtype’).sifr(false); ” type=”button” value=”UnsIFR this…” />

Más info | http://jquery.thewikies.com/sifr

Joel Laumans pone a nuestra disposición, a través de su web personal, varias plantillas para photoshop de la interfaz de los principales navegadores: internet explorer 7, firefox 3 y Safari. El objetivo de este recurso es su utilización en la presentación  a un cliente del diseño de una página web. Añadir el marco de la interfaz de un navegador alrededor del diseño ayudará al cliente a captar una idea de cómo quedará finalmente la página web. Si acostumbras a realizar los diseños web con el photoshop, estas plantillas te ahorrarán mucho tiempo.

Todas las plantillas están incluidas en un fichero .PSD divididas en varios paquetes. Cada uno corresponde a un navegador distinto, del que disponemos de hasta tres resoluciones: 1280×1024, 1024×768 y 800×600. Además, podremos cambiar los títulos, barra de direcciones, barras de scroll y el favicon.

Más info | http://piksels.com/photoshop-browser-templates

Interesante recopilación de recursos para mejorar la Accesibilidad web de una página web o blog en Maestrosdelweb.com. Entre los recursos podemos encontrar extensiones para Firefox, validadores online como T.A.W. o Examinator, herramientas para visualizar el contenido simulando alguna carencia física o técnica de un usuario, y varias guías y manuales que nos acercarán al concepto de la Accesibilidad web y su aplicación en entornos web.

Más info | http://www.maestrosdelweb.com