Los banner Page Peel comenzaron a aparecer el año pasado y destacan por ser muy poco intrusivos y altamente creativos. La idea se basa en que al pasar el ratón por la esquina superior derecha de una web, donde hay una esquina doblada y meciéndose lentamente, se desplegará el contenido oculto del banner.  De esta forma, la publicidad sólo aparecerá si el usuario desea verla, y como el Page Peel es muy llamativo, la mayoría de usuarios moverán el cursor para ver qué hay debajo de esa esquina doblada que se está moviendo.

Hasta hace no mucho, todos los scripts para generar el efecto Page Peel eran de pago, sin embargo, poco a poco han ido apareciendo alternativas gratuitas basadas en javascript, flash, jquery, etc. A continuación os paso varios enlaces desde donde podréis descargar los scripts e implementarlos en vuestra página web o blog, ya sea como banner publicitario o para promocionar algún evento, artículo, etc.

» Page Peel Effect en jQuery
» Page Peel Effect con JavaScript, imágenes y flash
» Otras alternativas de Page Peel Effect

Fuente | www.weblimite.com

Interesante artículo publicado en Seraccesible que trata sobre el diseño de una página web con medidas fijas (px ó ex) o líquidas (em, %) que determinará su capacidad para ser accesible o no. Según el WAI, una página web debe ofrecer la posibilidad de adaptarse a cualquier interfaz de usuario sin que por ello haya una pérdida de información o legibilidad.

El artículo nos comenta los pros y contras de la utilización de diseños fijos, líquidos, flexibles e híbridos, decantándose el autor por éste último. El WAI no establece qué diseño es el más apropiado para desarrollar una web accesible, si no que lo deja a la elección del diseñador, siempre y cuando el contenido sea transformable sin que por ello se pierda información o dificulte su comprensión.

Finalmente, el autor nos ofrece varias sugerencias para diseñar páginas web accesibles:

• Evitar la utilización del pixel (px) para definir el tamaño del texto. Si se utiliza para determinar el ancho de un elemento (contenedor) se deben hacer pruebas en las diferentes condiciones de navegación.
• Si nuestro diseño en determinadas condiciones no ofrece una buena legibilidad, proporcionar estilos de presentación alternativos.
• Cada dispositivo de navegación (pantalla, PDA, etc.) o simplemente de presentación (impresora), requiere determinadas carácteristicas en el diseño. Si nuestro diseño no está adaptado a un determinado dispositivo, crear la CSS específica.

Más info | Diseño web accesible

Coded Preview es una herramienta online rápida y gratuita que nos permite generar una vista previa en un navegador  de nuestro diseño web en formato HTML. Utilizado la aplicación, podrás ver exactamente cómo queda tu diseño en un browser. Además, podrás almacenar las previews en su servidor y de esta forma enviárselas a quién tu quieras, e incluso podrás crear una estructura que relacione las páginas entre sí, creando un árbol de navegación que facilite la comprensión de todo el diseño. Gracias a Coded Preview podrás ahorrar tiempo, ya que no necesitarás crear la página HTML y subirla vía FTP, si no que a través de un botón podrás tenerla disponible en la red.

Para subir nuestra preview tendremos que rellenar un formulario: título del diseño, página a la que pueda enlazar, alineación en el navegador (izquierda, centrada o derecha), márgenes, color o imagen de fondo, e incluso nos ofrecen la posibilidad de proteger mediante un password nuestra preview. Podremos elegir si subirla a su servidor o bien descargar un fichero comprimido con los HTML y gestionarlos nosotros por nuestra cuenta. Una vez hayamos subida nuestra preview, podremos añadir subpáginas para crear el árbol de navegación de nuestro sitio y añadirle una funcionalidad básica que ayude acercarnos a cómo quedará una vez finalizado.

Aunque aun no está disponible, están desarrollando una aplicación de escritorio que permite subir directamente desde nuestra máquina cualquier preview. Si bien es una aplicación muy sencilla cuya tarea no supone ninguna dificultad, nos ahorrará un tiempo y la posibilidad de tener todos nuestros proyectos almacenados en un mismo lugar.

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

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