Para no utilizar Adobe Flash en el diseño de una web, se puede utilizar la biblioteca JQuery de Javascript que cuenta con un extenso repositorio de plugins para acciones, efectos y animaciones.
Por ejemplo, una secuencia de imágenes usando el plugin Cycle. Y para que el diseño no se trunque en caso de que el usuario navegue con Javascript desactivado, se puede mostrar contenido alternativo usando CSS. Este caso simple es una modesta exploración del concepto progressive enhancement (mejora progresiva) aplicado al diseño web.
La mejora progresiva propone desarrollar primero un diseño accesible a todos los navegadores y a esa base agregarle otras funcionalidades.
Entonces, para el ejemplo, el diseño primero incluye el contenido básico, así que usamos una imagen representativa de la secuencia y nos aseguramos de usar el atributo alt en el elemento img, para considerar a los navegadores de sólo texto.
Enseguida agregamos el contenido de la secuencia. Usamos el elemento div para identificar el contenido, tanto de la imagen representativa como de la secuencia. Por ejemplo, para el caso de usar Cycle:
<head>
...
<link src="foo/style.css" rel="stylesheet" type="text/css" />
<script src="foo/cycle.js" type="text/javasript"></script>
</head>
...
<!-- Contenido original sin Javascript-->
<div id="basico" class="pics">
<img src="foo-a" alt="foo-a" />
</div>
<!-- Secuencia -->
<div id="secuencia" class="pics">
<img src="foo-a" alt="foo-a" />
<img src="foo-b" alt="foo-b" />
</div>
<!-- Script para la secuencia -->
<script src="foo/secuencia.js" type="text/javasript"></script>
...Para que ambos bloques tomen la misma posición, en el archivo css, agregamos:
.pics {position:absolute} #basico {z-index: 1} #secuencia {z-index: 2}
Con esto, si el navegador tiene Javascript desactivado sólo se muestra el primer bloque y si está activado muestra el segundo superpuesto al primero, por los valores de z-index. Para que sea perfecto los margenes de las imágenes y los bloques han de ser iguales en ambos bloques.
Con esto el contenido permanece accesible siempre, el diseño del sitio no se altera y no se molesta al usuario con mensajes sobre las cualidades o preferencias de su navegador.
Enlaces relacionados
- Mejora progresiva, CSS avanzado
- Javascrip no-molesto
- Como usar y no abusar, Flash en la web
- Formato Ogg (alternativa libre audiovisual)
- API para reproducir audio y video en la web con Javascript
2010 Siete Coyote +