Nov 11
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.
21 Diciembre 2008, a las 13:52
[...] Via AlejandroArco [...]
13 Enero 2009, a las 15:51
Una excelente solución al problema, gracias!
26 Enero 2009, a las 2:08
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
28 Enero 2009, a las 1:11
@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
28 Enero 2009, a las 2:09
no pude agregar el codigo, bueno, voy a tratar de resolverlo
06 Febrero 2009, a las 14:04
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
06 Febrero 2009, a las 19:37
Muchas gracias!! Me sirvio de mucho tu aporte.
17 Febrero 2009, a las 13:03
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.
24 Febrero 2009, a las 1:01
@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
24 Febrero 2009, a las 1:10
@DaNyEl: Enviame por email como Antonie el código HTML, ya que filtro los comentarios para evitar posible spam.
Un saludo,
Alejandro Arco
12 Marzo 2010, a las 21:28
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.
06 Mayo 2010, a las 18:12
Perfecto… 10 puntos mas iva!!!
Gracias
10 Mayo 2010, a las 14:57
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
25 Mayo 2010, a las 20:28
@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