Alejandro Arco Alejandro Arco

Validar flash con JavaScript y SWFObject

accesibilidad, javascript, w3c 1 Comentario »

swfobject - Validar flash con JavaScript y SWFObjectTras escribir mi anterior artículo Validar flash en XHTML y HTML sin hacer uso de javascript para maximizar la compatibilidad, os traigo un nuevo artículo para validar flash. Esta vez mediante el uso de javascript con la librería swfobject, que se ofrece bajo licencia MIT License.

De este modo, os sugiero otra forma de cumplir los estándares web de la W3C y las pautas de accesibilidad web respecto a la validación flash que tantos problemas nos ha dado a los desarrolladores web puristas de la validación web y el SEO.

Características validar flash con JavaScript y SWFObject

SWFObject es una pequeña librería en javascript que nos permite incluir contenido flash de forma práctica y sencilla, permitiendo agregar contenido alternativo en caso de que el navegador no tenga habilitado javascript o el flash player.

  • 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.
  • Permite visualizar contenido alternativo a los usuarios que no tengan el flash player o naveguen con javascript deshabilitado.
  • El código fuente de nuestro desarollo web queda más limpio y legible.

Parámetros constructor SWFObject, validar flash, validar swf

  • SWFObject(swf, id, width, height, version);
  • swf - La ruta y el nombre de su archivo flash.
  • id - La id de su objeto flash.
  • width - El ancho de su objeto flash.
  • height - El alto de su objeto flash.
  • version - La versión requerida del flash player.

Ejemplo validar flash con JavaScript y SWFObject

Lo primero que debemos de hacer es incluir nuestra librería swfobject entre la etiqueta <head></head> de nuestro documento.

<!-- Flash SWFobject -->
<script src="/js/swfobject.js" type="text/javascript"></script>

Posteriormente, crearemos nuestra contenedor flash con id única donde irá insertado nuestro flash y  le agregaremos el contenido alternativo, todo ello irá ubicado entre la etiqueta <body></body> de nuestro documento.

<div id="reproductor">
<img src="/flash-no-disponible.jpg" alt="Flash Player no disponible" />
</div><br />

Después, llamaremos al constructor SWFObject de la librería en javascript agregada anteriormente.


<script type="text/javascript">
var flash = new SWFObject('/play-audio.swf', 'stream', '100%', '20', '7');
flash.addVariable('type', 'mp3');
flash.addVariable('file', '/audio.mp3');
flash.write('div_reproductor');
</script><noscript>Flash SWFobject</noscript>

Finalmente, nuestro código HTML completo usando la librería SWFObject quedaría de la siguiente forma:


<html>
<head>
<title>Validar flash con JavaScript y SWFObject</title>
<!-- Flash SWFobject -->
<script src="/js/swfobject.js" type="text/javascript"></script>
</head>

<body>
<div id="reproductor">
<img src="/flash-no-disponible.jpg" alt="Flash Player no disponible" />
</div>
<script type="text/javascript">
var flash = new SWFObject('/play-audio.swf', 'stream', '100%', '20', '7');
flash.addVariable('type', 'mp3');
flash.addVariable('file', '/audio.mp3');
flash.write('div_reproductor');
</script><noscript>Flash SWFobject</noscript>
</body>
</html>

Como podéis observar la librería SWFObject es una herramienta muy potente y fiable en el desarrollo web de aplicaciones siempre y cuando el navegador del usuario tenga javascript habilitado.

Validar flash en XHTML y HTML

accesibilidad, w3c 10 Comentarios »

flash - Validar flash en XHTML y HTMLA 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.

Validar Accesibilidad Web Online

accesibilidad, seo 2 Comentarios »

A continuación muestro algunas de las herramientas online más usadas para validar la accesibilidad web, estos validadores de la accesibilidad web evalúan todos y cada uno de los elementos y páginas que las componen de forma automátizada e informan de si se encuentran errores y qué puntos de verificación de las pautas deben ser revisados manualmente.

Validar Accesibilidad Web Online

  • Validador eXaminator
    eXaminator (revisa y evalúa la accesibilidad en la web)
  • Validador Hera
    Hera (revisando la accesibilidad con estilo)
  • Validador TAW
    TAW (test de accesibilidad web)
  • Validador WAVE
    WAVE (validador accesibilidad web - en inglés)

La accesibilidad web se encuentra estrechamente ligada con el cumplimiento de los estándares web de la W3C, de este modo recomiendo validar en un primer momento el cumplimiento de estos estándares (ver artículo Validar XHTML y CSS) y una vez cumplidos pasar a la validación de la accesibilidad web de nuestros sitios.

Fuente: Alejandro Arco

Validar XHTML y CSS

seo, w3c 13 Comentarios »

Todos los profesionales seo solemos hacer especial incapié en cumplir los estándares web de la W3C, para ello, usamos distintas herramientas disponibles tanto por la W3C como por otros medios. A continuación detallo algunas de las herramientas actualmente disponibles para la validación XHTML y CSS.

Validar XHTML y CSS

  • Validador XHTML
    W3C XHTML (validador de la W3C)
  • Validador CSS
    W3C CSS (validador de la W3C)
  • Validador XHTML y CSS
    Validador XHTML y CSS (herramienta que usa los validadores de la W3C)
    Multipage Validator (herramienta que usa los validadores de la W3C pero permite validar URLs de forma múltiple)
  • Validador para Firefox XHTML y CSS
    HTML Validator - Tidy (extensión Tidy para Firefox que valida en tiempo real el documento actual)

Este artículo está especialmente enfocado a la validación XHTML y CSS y no a la accesibilidad web (se publicarán artículos proximamente), aunque en gran medida esté estrechamente relacionado. Espero que el artículo os sea de utilidad a los profesionales seo y a los iniciados.

Fuente: Alejandro Arco

Publicado por Alejandro Arco.Gracias WordPress & N.Design Studio.