Nov112008
accesibilidad // w3c
Validar flash en XHTML y HTML
A todos los puristas de la validación web y el seo nos agrada cumplir con los estándares web de la W3C, por este motivo la inserción de contenidos flash dentro de nuestro código XHTML y HTML siempre nos había supuesto un quebradero de cabeza, ya que la etiqueta embed no se encuentra incluida dentro de los estándares web de la W3C.
Por este motivo, voy a aportar una manera de validar flash de forma accesible ya que validación flash no cumple con las pautas de accesibilidad web de prioridad 1 a menos que incluyamos una etiqueta noembed.
Características validar flash, validar swf, validar embed
- No se hace uso de javascript.
- No se hace uso de la etiqueta embed y noembed.
- No hay redundancia de información en la inicialización del contenido flash.
- Cumple los estándares web de la W3C y las pautas de accesibilidad web.
- Se visualiza contenido alternativo en caso de que el usuario no tenga el flash player instalado.
Ejemplo validar flash, validar swf, validar embed
<object type="application/x-shockwave-flash" data="/play-audio.swf"> <param name="movie" value="/play-audio.swf" /> <param name="flashvars" value="file=/audio.mp3" /> <img src="/flash-no-disponible.jpg" alt="Flash Player no disponible" /> </object>
Espero que este nuevo artículo sobre la validación web y mas concretamente sobre la validación flash os sea de utilidad para vuestros proyectos web.
Etiquetas: accesibilidad, accesibilidad web, flash player, seo, validación, validar embed, validar flash, validar swf, w3c, x shockwave flash, XHTML
[…] Via AlejandroArco […]
Una excelente solución al problema, gracias!
Tengo un problema con el codigo para mostrar un archivo de flash el html, he reemplazado por el codigo como indicas, pero ahora no se puede ver el archivo flash.
Podrias decirme cual es mi error. Gracias
@Ariel: comprueba que el valor «data» sea el correto al igual el asignado al «movie» ya que con el copy & paste uno se suele olvidar.
De igual forma, adjuntame el código y te comento.
Un saludo,
Alejandro Arco
no pude agregar el codigo, bueno, voy a tratar de resolverlo
Estoy probando tu codigo, pero la animacion flash no me aparece. Las rutas son correctas porque pruebo la animacion con XXX y funciona, pero quito el XXX y uso el data y el resto de tu codigo y no me aparece la animacion.
Uso rutas relativas, en vez de absolutas, no se si eso tendra algo que ver.
Asi es como queda mi codigo:
XXX
Muchas gracias!! Me sirvio de mucho tu aporte.
Hola Alejandro muchas gracias por tu aporte, al verdad espero qu eme pueda ayudar porque la mezcla de Flash y accesibilidad me resulta bastante complicada.
A ver si me puedes ayudar un poco. Tengo este codigo y me gustaria saber si lo puedo hacer accesible para w3c:
<html> <head> <title>e-publicaciones</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="JavaScript" type="text/JavaScript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d .forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_displayStatusMsg(msgStr) { //v1.0 status=msgStr; document.MM_returnValue = true; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } function MM_openBrWindow(theURL,winName,features) { //v2.0 window.open(theURL,winName,features); } //--> </d></script> </meta></head> <body bgcolor="#cccccc" background="imagenes/fondo.jpg" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MM_preloadImages('imagenes/marco_r1_c7_f2.jpg','imagenes/marco_r4_c3_f2.jpg')"> <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td align="center" valign="middle"><table border="0" cellpadding="0" cellspacing="0" width="760"> <tr> <td><img src="imagenes/spacer.gif" width="257" height="1" border="0" alt=""/></td> <td><img src="imagenes/spacer.gif" width="28" height="1" border="0" alt=""/></td> <td><img src="imagenes/spacer.gif" width="58" height="1" border="0" alt=""/></td> <td><img src="imagenes/spacer.gif" width="107" height="1" border="0" alt=""/></td> <td><img src="imagenes/spacer.gif" width="27" height="1" border="0" alt=""/></td> <td><img src="imagenes/spacer.gif" width="238" height="1" border="0" alt=""/></td> <td><img src="imagenes/spacer.gif" width="45" height="1" border="0" alt=""/></td> <td><img src="imagenes/spacer.gif" width="1" height="1" border="0" alt=""/></td> </tr> <tr> <td rowspan="7" align="left" valign="top"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="257" height="420" align="top"> <param name="movie" value="anima.swf"> </param><param name="quality" value="high"> <embed src="anima.swf" width="257" height="420" align="top" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed></param></object></td> <td rowspan="2" colspan="5"><img name="marco_r1_c2" src="imagenes/marco_r1_c2.jpg" width="458" height="90" border="0" alt=""/></td> <td><a href="javascript:self.close();" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('marco_r1_c7','','imagenes/marco_r1_c7_f2.jpg',1);MM_displayStatusMsg('Salir');return document.MM_returnValue" rel="nofollow"><img name="marco_r1_c7" src="imagenes/marco_r1_c7.jpg" width="45" height="14" border="0" alt="Salir"/></a></td> <td><img src="imagenes/spacer.gif" width="1" height="14" border="0" alt=""/></td> </tr> <tr> <td><img name="marco_r2_c7" src="imagenes/marco_r2_c7.jpg" width="45" height="76" border="0" alt=""/></td> <td><img src="imagenes/spacer.gif" width="1" height="76" border="0" alt=""/></td> </tr> <tr> <td colspan="4"><img name="marco_r3_c2" src="imagenes/marco_r3_c2.jpg" width="220" height="104" border="0" alt=""/></td> <td colspan="2" rowspan="3" align="left" valign="top"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="283" height="270" align="top"> <param name="movie" value="titulo.swf"> </param><param name="quality" value="high"> <embed src="titulo.swf" width="283" height="270" align="top" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed></param></object></td> <td><img src="imagenes/spacer.gif" width="1" height="104" border="0" alt=""/></td> </tr> <tr> <td rowspan="3"><img name="marco_r4_c2" src="imagenes/marco_r4_c2.jpg" width="28" height="212" border="0" alt=""/></td> <td colspan="2"><a href="marco_2007_2013.pdf" target="_blank" onMouseOver="MM_swapImage('marco_r4_c3','','imagenes/marco_r4_c3_f2.jpg',1);MM_displayStatusMsg('Marco estratégico nacional de referencia. 2007 - 2013');return document.MM_returnValue" onMouseOut="MM_swapImgRestore()" rel="nofollow"><img name="marco_r4_c3" src="imagenes/marco_r4_c3.jpg" width="165" height="63" border="0" alt="Marco estratégico nacional de referencia. 2007 - 2013"/></a></td> <td rowspan="4"><img name="marco_r4_c5" src="imagenes/marco_r4_c5.jpg" width="27" height="226" border="0" alt=""/></td> <td><img src="imagenes/spacer.gif" width="1" height="63" border="0" alt=""/></td> </tr> <tr> <td rowspan="2" colspan="2"><img name="marco_r5_c3" src="imagenes/marco_r5_c3.jpg" width="165" height="149" border="0" alt=""/></td> <td><img src="imagenes/spacer.gif" width="1" height="103" border="0" alt=""/></td> </tr> <tr> <td rowspan="2" colspan="2"><img name="marco_r6_c6" src="imagenes/marco_r6_c6.jpg" width="283" height="60" border="0" alt=""/></td> <td><img src="imagenes/spacer.gif" width="1" height="46" border="0" alt=""/></td> </tr> <tr> <td colspan="2"><a href="javascript:;" onClick="MM_openBrWindow('creditos.html','','width=480,height=305')" onMouseOver="MM_displayStatusMsg('Créditos');return document.MM_returnValue" rel="nofollow"><img src="imagenes/marco_r7_c2.jpg" alt="Créditos" name="marco_r7_c2" width="86" height="14" border="0"/></a></td> <td><img name="marco_r7_c4" src="imagenes/marco_r7_c4.jpg" width="107" height="14" border="0" alt=""/></td> <td><img src="imagenes/spacer.gif" width="1" height="14" border="0" alt=""/></td> </tr> </table> </td> </tr> </table> </body> </html>Muchas gracias de antemano por tu ayuda.
Un saludo.
@Antonie: Te adjunto el código modificado levemente para que cumpla los estándares web de la W3C, de igual forma, te recomiendo separarar el código javascript y el css en ficheros independientes:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" dir="ltr" lang="es"> <head> <title>e-publicaciones</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script language="JavaScript" type="text/JavaScript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d .forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_displayStatusMsg(msgStr) { //v1.0 status=msgStr; document.MM_returnValue = true; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } function MM_openBrWindow(theURL,winName,features) { //v2.0 window.open(theURL,winName,features); } //--> </d></script> <style type="text/css"> body { margin:0; padding:0; } </style> </head> <body bgcolor="#cccccc" background="imagenes/fondo.jpg" onload="MM_preloadImages('imagenes/marco_r1_c7_f2.jpg','imagenes/marco_r4_c3_f2.jpg')"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="100%" align="center" valign="middle"><table border="0" cellpadding="0" cellspacing="0" width="760"> <tr> <td><img src="imagenes/spacer.gif" width="257" height="1" border="0" alt=""/></td> <td><img src="imagenes/spacer.gif" width="28" height="1" border="0" alt=""/></td> <td><img src="imagenes/spacer.gif" width="58" height="1" border="0" alt=""/></td> <td><img src="imagenes/spacer.gif" width="107" height="1" border="0" alt=""/></td> <td><img src="imagenes/spacer.gif" width="27" height="1" border="0" alt=""/></td> <td><img src="imagenes/spacer.gif" width="238" height="1" border="0" alt=""/></td> <td><img src="imagenes/spacer.gif" width="45" height="1" border="0" alt=""/></td> <td><img src="imagenes/spacer.gif" width="1" height="1" border="0" alt=""/></td> </tr> <tr> <td rowspan="7" align="left" valign="top"> <object type="application/x-shockwave-flash" data="anima.swf" width="257" height="420"> <param name="movie" value="anima.swf" /> <param name="quality" value="high" /> </object> </td> <td rowspan="2" colspan="5"><img name="marco_r1_c2" src="imagenes/marco_r1_c2.jpg" width="458" height="90" border="0" alt=""/></td> <td><a href="javascript:self.close();" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('marco_r1_c7','','imagenes/marco_r1_c7_f2.jpg',1);MM_displayStatusMsg('Salir');return document.MM_returnValue" rel="nofollow"><img name="marco_r1_c7" src="imagenes/marco_r1_c7.jpg" width="45" height="14" border="0" alt="Salir"/></a></td> <td><img src="imagenes/spacer.gif" width="1" height="14" border="0" alt=""/></td> </tr> <tr> <td><img name="marco_r2_c7" src="imagenes/marco_r2_c7.jpg" width="45" height="76" border="0" alt=""/></td> <td><img src="imagenes/spacer.gif" width="1" height="76" border="0" alt=""/></td> </tr> <tr> <td colspan="4"><img name="marco_r3_c2" src="imagenes/marco_r3_c2.jpg" width="220" height="104" border="0" alt=""/></td> <td colspan="2" rowspan="3" align="left" valign="top"> <object type="application/x-shockwave-flash" data="titulo.swf" width="283" height="270"> <param name="movie" value="titulo.swf" /> <param name="quality" value="high" /> </object> </td> <td><img src="imagenes/spacer.gif" width="1" height="104" border="0" alt=""/></td> </tr> <tr> <td rowspan="3"><img name="marco_r4_c2" src="imagenes/marco_r4_c2.jpg" width="28" height="212" border="0" alt=""/></td> <td colspan="2"><a href="marco_2007_2013.pdf" target="_blank" onmouseover="MM_swapImage('marco_r4_c3','','imagenes/marco_r4_c3_f2.jpg',1);MM_displayStatusMsg('Marco estratégico nacional de referencia. 2007 - 2013');return document.MM_returnValue" onmouseout="MM_swapImgRestore()" rel="nofollow"><img name="marco_r4_c3" src="imagenes/marco_r4_c3.jpg" width="165" height="63" border="0" alt="Marco estratégico nacional de referencia. 2007 - 2013"/></a></td> <td rowspan="4"><img name="marco_r4_c5" src="imagenes/marco_r4_c5.jpg" width="27" height="226" border="0" alt=""/></td> <td><img src="imagenes/spacer.gif" width="1" height="63" border="0" alt=""/></td> </tr> <tr> <td rowspan="2" colspan="2"><img name="marco_r5_c3" src="imagenes/marco_r5_c3.jpg" width="165" height="149" border="0" alt=""/></td> <td><img src="imagenes/spacer.gif" width="1" height="103" border="0" alt=""/></td> </tr> <tr> <td rowspan="2" colspan="2"><img name="marco_r6_c6" src="imagenes/marco_r6_c6.jpg" width="283" height="60" border="0" alt=""/></td> <td><img src="imagenes/spacer.gif" width="1" height="46" border="0" alt=""/></td> </tr> <tr> <td colspan="2"><a href="javascript:;" onclick="MM_openBrWindow('creditos.html','','width=480,height=305')" onmouseover="MM_displayStatusMsg('Créditos');return document.MM_returnValue" rel="nofollow"><img src="imagenes/marco_r7_c2.jpg" alt="Créditos" name="marco_r7_c2" width="86" height="14" border="0"/></a></td> <td><img name="marco_r7_c4" src="imagenes/marco_r7_c4.jpg" width="107" height="14" border="0" alt=""/></td> <td><img src="imagenes/spacer.gif" width="1" height="14" border="0" alt=""/></td> </tr> </table> </td> </tr> </table> </body> </html>Te adjunto el siguiente artículo «Validar XHTML y CSS» que te facilitará la comprobación de errores de tu código fuente.
Un saludo,
Alejandro Arco
@DaNyEl: Enviame por email como Antonie el código HTML, ya que filtro los comentarios para evitar posible spam.
Un saludo,
Alejandro Arco
para que se vea el archivo flash debe estar definido los atributos width y height del tag object todo lo demas del snippet esta correcto.
Perfecto… 10 puntos mas iva!!!
Gracias
He estado días y días intentando descubrír porqué no me funcionaba (y a vosotros sí) el código para insertar objetos de flash en html válido …creo que he descubierto el problema pero no la solución ¿será por la versión de windows, que es un poco antigua? (WindowsXP SP1)
Saludos
@Tin: no tiene nada que ver, pruebalo añadiendo un «height» y un «width» en la etiqueta «object», ya que si lo que quieres añadir es una animación flash, es necesario.
Un saludo,
Alejandro Arco