Youtube estándar con (X)HTML válido

17 comentarios · 2.876 lecturas · html y css

El código para insertar un video de Youtube (o análogos como metacafe, dailymotion, etc..) en una página que busca cumplir los estándares web es a menudo un quebradero de cabeza para los bloggers y webmasters.

Youtube proporciona un código que copiar y pegar en nuestro blog para reproducir los videos de una forma rápida y sencilla, pero el código no es todo lo correcto que debiera:

youtube code no estándar

Si comprobaramos con el validador W3C este código, veríamos que tiene varios problemas:

  • Se utiliza correctamente el tag object, pero no se especifican ciertos parámetros importantes como data o type.
  • Los tags "unitarios" param en XHTML se deben cerrar en la misma etiqueta de apertura.
  • El uso de la etiqueta no estándar embed puede producir incompatibilidades en navegadores que no la utilicen, así como dispositivos móviles, lectores u otros.
  • No se proporciona un método alternativo en el caso de que no exista soporte para flash.

La solución es bien sencilla. Basta con codificar de la siguiente manera:

youtube code estándar xhtml html

Descargar código youtube

En este código se corrigen varios conceptos, pero sobre todo se elimina el uso del tag embed, puesto que se trata de una etiqueta privada que se ha utilizado mucho e irregularmente, pero no es estándar.

  • Se utiliza un object con la dirección del objeto en el atributo data y el MIME en el atributo type.
  • Los tags param se vuelven "unitarios". Así el código es estándar XHTML, y además es compatible con HTML.
  • Accesibilidad: Se añade como método alternativo una imagen que se mostrará en el caso de no disponer del plugin Flash para el navegador. En el caso de no tener tampoco soporte para imagenes (lectores de voz, navegadores de texto, ...) se mostrará el texto del atributo alt de la imagen.

Un problema también muy común en las validaciones suele ser el tema de no codificar correctamente el ampersand (&) en una URL (en el atributo data de object o en value del param), que debería aparecer como &.

Finalmente, tendremos un código para videos o animaciones flash de youtube (u otra entidad similar) completamente estándar:

Video (Objeto multimedia)

Fotografías sin flash y con flash

16 comentarios · 1.868 lecturas · fotografia

Es todo un clásico, pero no podía volver a dejar pasar la oportunidad de mostrar a todos los que no lo habían visto, las diferencias de una fotografía sin flash a una fotografía con flash.

foto sin flash foto con flash

El ladrón de cursores

17 comentarios · 1.265 lecturas · humor

¡No! ¡Por más que te lo pida, ni se te ocurra darle el puntero del ratón! Mantelo siempre alejado de él.

Video (Objeto multimedia)

Se trata de una original animación de DaSchop. Si lo deseas, también podrás comprobar porque lo hace y las medidas que podemos tomar.


Animaciones de Bruno Bozzetto

9 comentarios · 4.280 lecturas · humor

Uno de mis géneros preferidos, son las animaciones cortas de humor, como las del genial dibujante italiano Bruno Bozzetto.

Uno de los personajes más conocidos de Bruno es Mr. Rossi, aunque, personalmente, sus mejores trabajos son las animaciones cortas en flash que realizó, de las cuales hago una recopilación de mis preferidas.

Olympics (2003)

Parodia a los juegos olímpicos con su famoso y mal afortunado personaje Mr. Otto. La singular mala suerte que le acompaña es sinónimo de momentos desternillantes.

Video (Objeto multimedia)

Europeos e Italianos

La clásica tendencia a diferenciarnos del resto con un "como se debería hacer" y un "como se hace" (pese a todo). Europeos e Italianos muestra las diferencias para un mismo caso, con personas de distintas nacionalidades.

Video (Objeto multimedia)

Como conducir: Si y No

Como deberíamos conducir. Una guía rápida de lo que no debemos hacer saltándonos las normas (y que todo el mundo hace) y lo que sí deberiamos hacer cumpliendo las normas (y nadie hace).

Video (Objeto multimedia)

Adam

La historia de un curioso personaje que refleja como somos actuando, siempre dependiendo de los demás.

Video (Objeto multimedia)

Mr. Otto 17

17 divertidas ocurrencias de nuestro amigo Otto, el personaje con menos suerte del mundo...

Video (Objeto multimedia)

Finalmente, también recomiendo Neuro y Life, dos animaciones más, estas en formato FLASH y con la misma calidad de las anteriores.


Páginas: 1 ... 2 ... 4


Artículo de http://www.emezeta.com/

6 consultas efectuadas / Página generada en 0.035 segundos

Programado íntegramente por José Román (Manz) en XHTML y CSS estándar.

Sindicado bajo Feed RSS. Contenido bajo licencia Creative Commons

Estadísticas de visitas · Términos y condiciones · Contacto · Publicidad · Preguntas frecuentes (FAQ)