Flash, Accesibilidad y SEO
Por Yëco en Javascript, SEO, Usabilidad, Web Dev5 de Marzo, 2008 | 6:09 pm | CompartirCuando vemos un site creado en flash, de inmediato cuestionamos su efectividad en asuntos de accesibilidad, nos preocupa si un usuario no tiene el flash player, y sí, ya sé que el 98% de las personas con un computador con internet lo tienen, pero… qué pasa con los navegadores mobiles?… y no me refiero a los antiguos navegadores WAP, tomemos por ejemplo el iPhone, no existe flash para iPhone.
Otra preocupación fuerte es en asuntos de SEO, porque, podemos incluir toda la información y contenidos desde archivos externos o bien, hacer alguno que otro truco de deep linking, pero siempre, a la larga, el usuario no está viendo más que un cascarón, y eso… a google no le hace mucha gracia.
Pues bien, gracias al cielo le metieron una demanda más a Microsoft… y qué tiene que ver esto con el tema?…
Mucho. Cuando los propietarios del tag object – que es la etiqueta que internet explorer usa para incrustar los swf – ganaron la demanda, Microsoft quedó obligado a reconocer autoría de un tercero, y para esto, no activaba el recurso hasta que el usuario diera clic en él. Algo muy incómodo si lo vemos de un modo funcional. Esto provocó reacciones en diseñadores y programadores de todo el mundo (me incluyo en la pelota), y fruto de esto salieron muchas alternativas para agregar flash a un html sin que se colocara ese horrendo marquito gris que aparecía.
De todas las alternativas que aparecieron, surgió una… SWFObject, que actúa reemplazando el contenido de un div “X” por el swf…
DING!!!! ya vas captando la idea ¿?
Basando todo en esa simple función es que te propongo esta solución (nótese el versito irónico):
Primero que nada… te propongo que te des una vuelta por DeConcept, los creadores de SWFObject, para conocer un poco de sus parámetros y posibilidades.
Manos a la Obra
Básicamente, lo que hacemos es incrustar el contenido original, formateado en HTML dentro del DIV con el ID “flashcontent” que será reemplazado por SWFObject.
Observá el ejemplo… no hay mucho que explicar.
<head>
<script type="text/javascript" src="/jscript/flashobject.js"></script>
</head>
<body>
<div id="flashcontent">
<h1>Titulo importante</h1>
<p>Parrafo de contenido</p>
<ul>
<li>Item de lista 1 </li>
<li>Item de lista 2 </li>
<li>Item de lista 3 </li>
<li>Item de lista 4 </li>
</ul>
<p><a title="Services" href="/services.shtml">Services</a> |
<a title="About Us" href="/about.shtml">About Us</a> |
<a title="Contact " href="/contact.shtml">Contact</a> |
<a title="Partners" href="/partners.shtml">Partners</a></p>
</div>
<script type="text/javascript">
var fo = new FlashObject("/flash/sitio.swf", "miFlash", "800", "105", "6", "#ffffff");
fo.write("flashcontent");
</script>
Solo debo agregar, que no importa lo que se inserte en el div, el usuario no lo verá si dispone de flash player, pero google si… ya este método lo he utilizado en varios sitios con alto tráfico y no me ha dado señas de algún problema aún.
De esta forma, los usuarios con un handheld o bien, el otro 2% verán tus contenidos sin necesidad de instalar flash player… eso si… no olvidés formatearlo con css para que sea agradable también.
Come frutas y verduras.
Quién?
