Presentación de FLACCESS: flash manteniendo la accesibilidad
2004-11-10 13:23:36
Detección de flash: métodos anteriores
He intentado descubrir un método que detecte en el servidor la versión instalada del plugin en el navegador, pero a pesar de que a macromedia no le costaría nada añadir la versión a la variable devuelta por el HTTP_ACCEPT, se empeña en obligarnos a usar lenguajes de cliente para detectarlo. Si tuviesemos esa opción podríamos gestionar el contenido alternativo desde el mismo servidor o añadir el método del flash satay sin temor alguno. El problema principal de esa técnica es que nevegadores con plugins antiguos no cargan el flash ni dejan ver el texto alternativo, y en menor medida, que no hace streaming, aunque para eso podemos usar una película lanzadera, como en mi anterior artículo. Además, algunos lectores me han comentado que el método de añadir flash con lanzadera no es suficientemente flexible (por ejemplo no permite pasar variables al flash) y casca en algunos navegadores (como mi Opera 7.23). Por esa razón he intentado un camino distinto.
Concepto
La idea es básicamente similar al concepto del sIFR: tener el contenio alternativo en algún elemento html, luego tener un script que detecte la versión del plugin en el navegador y si es la necesaria entonces sustituir el contenido alternativo por el objeto flash. La ventaja de este método, es que a diferencia de el 99% de los métodos habituales, si el navegador no tiene javascript o no puede cargar el objeto flash, el contenido alternativo sigue estando en el html, por lo cual la accesibilidad es alta. En cambio, en los otros métodos, el javascript se encarga de escribir en el documento el objeto flash y el contenido alternativo, que evidentemente resulta inaccesible en caso de no tener javascript activado. Así pues manos a la obra...
Cómo usar el script
El script se usa del siguiente modo. Atención, la versión 1.3 ha comportado algunos pequeños cambios (asegúrate de leer qué comportan los cambios) como la introducción de una versión ligera para navegadores actuales. Para empezar, enlazamos el script en el head del documento html:
<script type="text/javascript" src="flaccess.js"></script>
Añadir el contenido alternativo al flash (que puede ser cualquier estructura html, como párrafos, listas de enlaces, etc) en algún elemento html que tenga un id:
<div id="out">
<div id="in">contenido alternativo</div>
</div>
Necesitamos que ese elemento (y cualquier object) tengan por lo menos en la declaración de estilos position:relative o position:absolute para que netscape 4 no casque (lo explicaremos más adelante), así que lo añadimos en una hoja de estilos externa o en un bloque de estilos en el head (yo los he añadido al final de la hoja de estilos principal):
#out {position:absolute; top:50px;left:50px;}
#in {position:absolute; top:0px;left:0px;}
object {position:absolute;}
Como vemos, si el elemento tiene ancestros, debemos añadir posición a todos ellos (sin llegar al elemento body). De otro modo netscape 4 casca. Para evitar tener que usar posiciones absolutas lo ideal es añadir postition:relative (sin necesidad de fijar top ni left) dejando que los elementos se distribuyan según el flujo de la página. Si eso hiciese cascar al netscape 4 y las posiciones relativas fuesen necesarias en el layout de la página, podríamos usar un hack css para añadir posición absoluta para esos elementos solo en ese navegador:
/*/*//*/
#out,#in,object {
position:absolute; /* */
}
/* */
Ahora solamente falta añadir una llamada a la función que añade el objeto flash en lugar del elemento citado. Justo después del elemento con el contenido alternativo:
<script type="text/javascript">
// addFlash(postpone,minversion,path,width,height,node);
addFlash(0,5,"fl5.swf",200,100,"fl1,in,out");
</script>
Argumentos obligatorios de la función addFlash
La función addFlash tiene varios argumentos, que se explican a continuación, por orden:
- postpone
- (0/1) permite que el objeto flash se cargue una vez finalizada la carga de la página. Esto es ideal para banners, puesto que permite que cargue primero el contenido real de la página. Para cualquier otro uso lo normal será usar la opción 0. La excepción será netscape 4, que diga lo que diga este argumento siempre se cargará al final, puesto que no puede escribir contenido a una capa sin haber terminado de cargar (y sin tener una posición establecida en el estilo). Este argumento no se usa en la version ligera del script.
- minversion
- la versión mínima del plugin que debe estar instalada en el navegador
- path
- ruta hacia el archivo swf
- width, height
- ancho y alto de la película flash
- node
- sucesión jerárquica de id's hasta el elemento con el contenido alternativo. En nuestro caso, fl1 será el id que queremos darle al flash, luego tenemos in como hijo de out, y se ponen en ese orden ("fl1,in,out"). Si out, a su vez, estuviese dentro de un elemento llamado big deberiamos poner "fl1,in,out,big". Atención, no usar espacios entre las comas y los nombres. Este parámetro ha sido modificado en la versión 1.3 (ahora requiere el uso de un id para el objeto flash)
Argumentos opcionales de la función addFlash
Luego vienen argumentos opcionales, que se pueden ir añadiendo despues del argumento node, separando el nombre y el valor por dos puntos (:) y los argumentos entre ellos por una coma. El script se encarga de manejar los argumentos como parámetros del object o como atributos del embed, mientras que si no ponemos ninguno se usarán los valores por defecto de flash. Si quereis una explicación más técnica podeis usar esta, creo que están implementados todos los posibles.
- menu
- true/false
- play
- true/false
- devicefont
- true/false
- quality
- low/autolow/autohigh/medium/high/best
- scale
- noborder/exactfit/noscale/showall
- bgcolor
- un color en hex (ej. #ffffff)
- wmode
- window/transparent/opaque
- flashvars
- permite pasar variables/valores (si hay mas de una variable se separan por &)
- base
- directiorio base
- align
- (l, t, r, b) alinea respecto la ventana
- salign
- (l, t, r, b, tl, tr, bl, br) alinea respecto la ventana (desconozco la diferencia con el anterior)
- swliveconnect
- (true/false) para comunicación con java
Por ejemplo podríamos poner
<script type="text/javascript">
addFlash(0,5,"fl5.swf",200,100,"fl1,in","menu:false","flashvars:a=3&b=www");
</script>
El script se automatiza de modo que puede usarse incluso en páginas con eventos onload definidos anteriormente en archivos javascript, haciendo uso de un método de Simon Willison para no sobreescribir eventos onload anteriores. Parece ser que el método no funciona para eventos onload definidos en el body. Por tanto, podemos usar nuestras propias funciones y eventos, y añadir tantos objetos flash como queramos. El script se encarga de mantener los eventos separados
He añadido una variable llamada flaccess_debug por si alguien quiere tener alerts de como va el proceso, solo teneis que ponerla a 1, o bien en el archivo js o en alguno de los bloques script que abrais para llamar al flash.
Ejemplos de uso
Texto accesible aqui en lugar del flash 5
Notas finales
Durante el proceso de búsqueda de información de cómo detectar el plugin usando javascript me encontré con un método muy bueno que se acerca mucho a la filosofía que yo quería (de hecho me he apropiado de una pequeña parte de su rutina para detectar el plugin en explorer), pero que no termina de ser lo que buscaba por dos razones: no permite la delegación de carga y deja de lado un navegador aún tan extendido como el netscape 4. Yo normalemnte en mis scripts ni me preocupo por ese navegador, le suelo proporcionar contenido totalmente sin estilo y sin comportamiento, pero tratándose de encontrar un método lo más universal posible para la inclusión de objetos flash creo que era necesario que funcionase en las versiones 4 y posteriores de netscape y explorer, además de en opera y safari (mac).
Podeis bajaros el archivo comprimido con los ejemplos de aqui (formato rar). Se agradecerán comentarios a esta técnica y sobretodo resultados de compatibilidad.