jueves, 11 de agosto de 2011

Validar Flash

Utilizar Flash para diseño web, en primera instancia, puede ser muy seductor, por la experiencia de usuario que se puede lograr para el sitio web en cuestión. Pero, en una segunda instancia, analizando el costo-beneficio, es posible que lleguemos a darnos cuenta que el uso de Flash, genera más inconvenientes que los que deberíamos estar dispuestos a tolerar.
Uno de esos problemas es que el código generado para incrustar un archivo .SWF en una página web hace que el código html no sea válido al chequearlo con el servicio de validación de código de la W3C.
Seguramente estemos de acuerdo con que escribir código válido es el camino correcto, aunque todavía algunos se pregunten ¿por qué validar Flash?.
Entonces, cuando a pesar de todo, por la razón que sea, tenemos que usar Flash: ¿cómo hacemos para obtener un código válido?
Personalmente me he visto en esta situación varias veces al utilizar el fantástico servicio de issuu.com, que nos permite subir un archivo pdf y con él genera una visualización animada en Flash como la que, a modo de ejemplo, se ve a continuación:


En este caso en particular, el código generado por el servicio de issuu.com es el siguiente:

<object style="width:420px;height:297px" ><param name="movie" value="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf?mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&showFlipBtn=true&documentId=110617192737-81fd1e69c4c74b68be3b5d52e264bd43&docName=revistaesperanza-nro00&username=safaesperanza&loadingInfoText=Revista%20de%20la%20Provincia%20Ntra.%20Sra.%20de%20la%20Esperanza%20-%20%2300%20-%20junio%20de%202011&et=1313029826268&er=51" /><param name="allowfullscreen" value="true"/><param name="menu" value="false"/><embed src="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf" type="application/x-shockwave-flash" allowfullscreen="true" menu="false" style="width:420px;height:297px" flashvars="mode=embed&layout=http%3A%2F%2Fskin.issuu.com%2Fv%2Flight%2Flayout.xml&showFlipBtn=true&documentId=110617192737-81fd1e69c4c74b68be3b5d52e264bd43&docName=revistaesperanza-nro00&username=safaesperanza&loadingInfoText=Revista%20de%20la%20Provincia%20Ntra.%20Sra.%20de%20la%20Esperanza%20-%20%2300%20-%20junio%20de%202011&et=1313029826268&er=51" /></object>

Si se intenta validar este código, dará más de 20 errores.
Para convertir este código en código válido, seguí los pasos sugeridos en yoast.com, que a continuación resumo:

Pero antes, a los efectos de esta explicación y para simplificar, voy a reescribir el código obtenido en issuu.com, sustituyendo las cadenas largas por los textos valor1 y valor2:

<object style="width:420px;height:297px" >
<param name="movie" value="valor1" />
<param name="allowfullscreen" value="true"/>
<param name="menu" value="false"/>
<embed src="http://static.issuu.com/webembed/viewers/style1/v1/IssuuViewer.swf" type="application/x-shockwave-flash" allowfullscreen="true" menu="false" style="width:420px;height:297px" flashvars="valor2" />
</object>


Los pasos para convertir esto en un código válido son:
  1. A la etiqueta <object> hay que quitarle style="width:420px;height:297px" y sustituirlo por dos nuevos atributos con esos mismos valores:
    • width="420"
    • height="297"
    además hay que agregarle el siguiente par atributo-valor: type="application/x-shockwave-flash".
  2. También en la etiqueta <object> agregamos un nuevo atributo data cuyo valor será el que hemos llamado valor1. Y nos aseguramos de eliminar la barra inclinada al final de la etiqueta de apertura de <object>.
  3. La etiqueta <embed> se elimina. En su lugar va una etiqueta <param> con el atributo name="movie" y el atributo value con el mismo valor1 utilizado en la etiqueta anterior.
  4. Las dos restantes etiquetas <param> se conservan igual, aunque eliminando la barra inclinada del final.
  5. Para terminar, dentro de la cadena que hemos llamado valor1 hay que sustituir los & por &amp;

Por lo que, el código (resumido) quedaría así:

<object type="application/x-shockwave-flash" width="420" height="297" data="valor1">

<param name="movie" value="valor1">
<param name="allowfullscreen" value="true">
<param name="menu" value="false">
</object>


Y este código si es válido y también funciona.

No hay comentarios:

Publicar un comentario

Lo que escriba a continuación será revisado antes de publicarse.
Gracias por tus comentarios.