Dada la importancia que a día de hoy tiene el desarrollo de páginas Web utilizando los estándares marcados por la W3C se hace extraño que Google nos ofrezca insertar videos de YouTube en nuestras páginas Web y para ello nos facilite un fragmento que código que curiosamente no valida. Después de ver en el siguiente ejemplo lo sencillo que es hacer que pase la validación de código del W3C se nos antoja más increible.

Vamos a ver un ejemplo con un video de Mutt Cutts, ingeniero de Google. Esta es la url del video: http://www.youtube.com/watch?v=4VduSHma–E y este es el código que Google nos ofrece para insertar este video en nuestra página Web:

<object width="560" height="340"> <param name="movie" value="http://www.youtube.com/v/4VduSHma--E&hl=es&fs=1&"></param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param><embed xsrc="http://www.youtube.com/v/4VduSHma--E&hl=es&fs=1&" mce_src="http://www.youtube.com/v/4VduSHma--E&hl=es&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed></object>

Entre otras perlas este fragmento de código utiliza etiquetas embed que nunca han formado parte del estandar. Para publicar este mismo video con código estandar simplemente tendremos que hacerlo de la siguiente manera:

<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/4VduSHma--E&hl=es&fs=1&" width="560" height="340"> <param name="movie" value="http://www.youtube.com/v/4VduSHma--E&hl=es&fs=1&"></param> <param name="quality" value="high"></param></object>

Si estás utilizando para el desarrollo de tu página Web código XHTML tienes que eliminar la etiqueta de cierre param y finalizar la primera con “/>”

Fíjate como hemos modificado el caracter ampersand (&) en nuestro ejemplo para que valide el código.

Como veis es muy fácil publicar videos de youtube en nuestras páginas Web respetando los estándares Web marcados por el W3C.

El inconveniente de insertar el video de youtube cumpliendo los estándares Web es que el usuario no podrá ampliar el video a pantalla completa.

Asi se ve el video con nuestro codigo

Hasta hace poco tiempo la mejor forma de crear un enlace que se abriera en una nueva ventana era utilizar el atributo target=”_blank” ,esta instrucción en HTML hacía que la página de destino del enlace que incorporaba este atributo se abría en una nueva ventana del navegador.

Como la mayoría de nuestros lectores saben la especificación XHTML 1.0 strict ya no permite el uso de la etiqueta target por lo que para conseguir el mismo efecto nos vemos obligados a utilizar javascript. Pero hay que tener cuidado con este código, ya que mal aplicado nos podría traer problemas.

Uno de los problemas sería que la página podría no cumplir con los criterios de accesibilidad Web y otro poblema sería la pérdida de indexabilidad de la página Web o pérdida del valor del enlace de cara a los buscadores, dependiendo del uso que le queramos dar.

Es muy habitual en este tipo de enlaces encotrarnos con el siguiente código: a xhref=javascript:void(0)” onClick=”m = window.open(’paginadestino.htm’ … este código hace que la página de destino se abra en una nueva ventana del navegador, pero se trata de javascript intrusivo lo cual probocará que si un usuario entra sin tener activado el javascript no funcionará el enlace. Además el robot de Google no podrá seguir el enlaces.

Una buena opción sería cambiar este código por el siguiente: a xhref=”paginadestino.htm” onclick=”window.open(this.href); return false;
Con esto conseguimos que el código de nuestra página Web sea válido y cumpla con el estandar, que la páginas Web sea accesible, ya que si un usuario entra sin el javascript activado omitirá la instrucción onclick pero funcionará el enlace al estar la página de destino dentro del atributo href. Y también conseguiremos que la araña de Google pueda seguir el rastro al enlace.

Es muy habitual encontrarnos con páginas Web que omiten el atributo alt del código fuente de sus páginas Web. La etiqueta alt es un atributo que se aplica sobre la etiqueta HTML img, la encargada de insertar imágenes en la página. Este atributo sirve para poner una breve descripción de la imagen que estamos publicando y su uso es muy importante.

Es importante primeramente si queremos que nuestras páginas Web validen su código en base a los estándares HTML y XHTML de la W3C.

Es importante para que nuestras páginas Web sean accesibles, ya que los usuarios que por cualquier circunstancia no puedan ver la imagen (bien porque tengan algún tipo de ceguera o porque estén utilizando un navegador de texto) se les mostrará el texto que hayamos incluido en el atributo alt. Este es uno de los requisitos más básicos de la accesibilidad.

Es importante también desde el punto de vista SEO, ya que Google tiene en cuenta el contenido del atributo alt, esto es aprovechado por muchos SEO para incluir palabras clave dentro de este atributo, aunque como decíamos anteriormente el uso correcto es el de ofrecer una descripción breve de la imagen publicada.

Por último es importante para el fenómeno Google Images. El buscador de imágenes de Google cada vez es más utilizado y un porcentaje de las visitas a nuestras Webs puede venir por ahí, Google toma el alt como uno de los parámatros a considerar para devolver los resultados. En otro post hablaremos como posicionar imágenes en Google Images.