Guía para desarrollar Javascript accesible

Interesante tutorial que nos enseña que problemas pueden encontrarse las personas con alguna discapacidad que le obligue a prescindir de Javascript (o usuarios con dispositivos móviles), y cómo solucionarlo.

Los mayores problemas con el que se encuentran las personas que no ejecutan javascript en sus navegadores son en la navegación (menús dinámicos), contenido oculto (accesible mediante Ajax), controles dinámicos (eventos de ratón, drag&drop, …) y confusión (la web está pensada para el uso de Javascript y no usarlo conlleva un contenido inicial deficiente).

Como resumen diría que hay que ofrecer los contenidos sin necesidad de javascript, éste sólo debe ser un apoyo, y que para comprobar si tu web es accesible lo mejor es probarlo inhabilitando el javascript en tu navegador.

Creating Accessible JavaScript

Vía / @maxkuri

Fuente: http://sentidoweb.com/2009/06/04/guia-para-desarrollar-javascript-accesible.php

Precargar Imagenes con JS

Luego del post Precargar imágenes con CSS en el cual comentábamos como colocar una imagen de fondo para indicar que se esta cargando una imagen, esta vez les presentamos una solución mas completa el cual incluye javascript.

Creando los estilos
Lo primero es crear dos estilos, un estilo que contiene una imagen de precarga y otro que elimina la imagen de fondo.

1. .loading {
2. background: url(loading.gif) no-repeat center center;
3. }
4. .loaded {
5. background: none;
6. }

Cargando la Imagen de Precarga
Lo siguiente es cargar al inicio la imagen del precargador, esto para que se pueda mostrar como fondo de las imágenes a precargar. Esto lo colocamos en el header de nuestro html.

1. <script type=“text/javascript”>
2. loadImage = new Image();
3. loadImage.src = “loading.gif”;
4. </script>

Incluyendo las Imagenes
Lo que sigue es incluir las imágenes que deseamos mostrar, esto lo hacemos de la forma normal, pero le aplicamos el estilo .loading para mostrar la imagen de precarga.

1. <img src=“img1.png” width=“512″ height=“387″ class=“loading” />
2. <img src=“img2.png” width=“512″ height=“387″ class=“loading” />

Finalmente completamos el proceso creando un javascript que recorra todas las imágenes que contiene nuestro HTML, esto lo hacemos con la función getElementsByTagName, luego detectamos el evento onload de cada imagen para aplicarle el estilo que elimina la imagen de fondo.

1. <script type=“text/javascript”>
2. var imgs = document.getElementsByTagName(‘img’);
3. for(i in imgs) {
4. imgs[i].onload = function() {
5. this.className = “loaded”;
6. }
7. }
8. </script>

Este script lo colocamos al final del HTML antes del tag </body> y listo ya tenemos nuestro script de precarga de imágenes completo que lo podemos incluir en cualquier en cualquier página html. Pueden ver el ejemplo funcionando en jspreload.

Fuente: http://blog.unijimpe.net/precargar-imagenes-con-js/

qTip: tooltips con jQuery

qTip es un plugin jQuery que nos permite crear y personalizar tooltips en nuestra página web. Se trata de un plugin muy completo que tiene las siguientes características:

• Compatible con IE6+, Firefox 2+, Opera 9+, Safari 3+, Chrome 1+, Konqueror 3.5+
• Esquinas redondeadas sin necesidad de imágenes
• Posibilidad de indicar la esquina donde se quiere situar el tip (elemento del bocadillo que enlaza con el elemento)
• Posibilidad de meterle efectos y Ajax
• Configurable

qTip

Vía / crishnakh

La Trampa JavaScript

Y así como antes lo hizo con La Trampa Java, Richard Stallman esta vez la arremete contra JavaScript en su nuevo documento La Trampa JavaScript donde nos advierte que bien podríamos estar usando programas No-Libres en nuestras computadoras todos los días sin saberlo, a través de nuestro navegador web:

“Los navegadores normalmente no te dicen cuando cargan programas JavaScript. La mayoría tiene alguna forma de desactivar JavaScript completamente, pero ninguno puede verificar si esos programas son No-Libres. Aún si uno está conciente de esto, tomaría un considerable esfuerzo identificar y bloquear esos programas. Sin embargo, aún en la comunidad del Software Libre la mayoría de los usuarios no son concientes de ello, y el silencio de los navegadores tiende a esconderlo”.

Stallman sí propone una solución en su artículo, que sugiere modificar los actuales navegadores libres para que permitan especificar un código JavaScript alternativo que usar en lugar del programa JavaScript original de una página. También menciona el plugin de Firefox Greasefire como un ejemplo de su implementación.

Fuente:vivalinux.com.ar

Coverflow: visualización de imágenes estilo iPhone

Muy buena librería javascript que nos permite visualizar imágenes como la galería de carátulas que ofrece el iPhone. La transición entre imágenes será mediante una rotación en 3D (un lado es más alto que otro mientras se va colocando en la posición correcta).

Muestra etiquetas y efecto de reflejo, y su uso es muy sencillo: tan solo habría que ejecutar un script similar a este:

code lang="javascript">Coverflow.init(
[
	{src: 'img/img-0-lo.jpg', label: {album: 'All That I Am', artist: 'Santana'}},
	{src: 'img/img-1-lo.jpg', label: {album: 'August & Everything After', artist: 'Counting Crows'}},
  /* ... */
	{src: 'img/img-10-lo.jpg', label: {album: 'Viva la Vida', artist: 'Coldplay'}},
	{src: 'img/img-11-lo.jpg', label: {album: 'We Were Here', artist: 'Joshua Radin'}}
], 
{
	createLabel: function(item)
	{
		return item.label.album +'
'+ item.label.artist;
	},

	onSelectCenter: function(item, id)
	{
		var img = new Image();
		img.onload = function()
		{
			Lightbox.show(this.src, id);
		};
		img.src = item.src.replace('-lo.jpg', '-hi.jpg');
	}
});

JS Coverflow

Fuente: sentidoweb.