Jun5

Código válido en XHTML de tus vídeos preferidos

Javi Vicente programación
'; }?>

Desde hace unas semanas llevo buscando la manera de validar el blog con los estándares de la W3C para los diferentes tipos de archivos: XHTML, CSS y RSS. No sirve de nada ponerlo o no, pero el caso es que el icono que podéis ver en el pie de página queda bonito y me gusta, además de ser una manera de evitar que en unos navegadores el diseño sea diferente a otros. Si lo es, como pasa actualmente con IE y las imágenes de bordes redondeados de la barra lateral, es porque NO cumple los estándares.

Una de las mayores dificultades que encontré para la validación fueron los vídeos de Youtube. La verdad es que desconozco el motivo por el que la página muestra un código erróneo para mostrar sus vídeos en cualquier página web, porque el resultado es el mismo. El caso es que decidí ponerme a investigar y llegué hasta Noséqué.net de manera que ya lo tenía casi todo hecho. Una vez que tenía el código:

<object type="application/x-shockwave-flash" style="width
:425px;height:350px" data="http://www.youtube.com/v/XXX">
<param name="movie" value="http://www.youtube.com/v/XXX"
 /></object>

donde XXX es el ID del vídeo, que es una cadena sin significado alguno que sirve para identificar el vídeo. Sólo es necesario reemplazar este identificador por el del vídeo en cuestión y todo perfecto.

youtube_code1.jpgAhora, parte de mi cosecha, es la inclusión de un quicktag en el panel de escritura de «WordPress»:http://www.wordpress.org, que no son más que botones para insertar código HTML de una manera sencilla y práctica.

Antes de nada es necesario comentar que sólo funcionará lo que comentaré a continuación a aquellos usuarios que tengan deshabilitada la opción Utilizar el editor visual para escribir que se encuentra en Opciones personales dentro de Usuarios->Perfil. Son, por lo general, los usuarios más avanzados los que tienen deshabilitada esta opción.

En primer lugar editaremos el fichero wp-includes/js/quicktags.js y localizaremos la línea que contiene la última creación del objeto edButton (en mi caso la 135) con una apariencia parecida a:

edButtons[edButtons.length] =
new edButton('ed_more'
,'more'
,'<!--more-->'
,''
,'t'
,-1
);

Una vez localizado, añadiremos a continuación el código que nos permitirá crear un botón:


edButtons[edButtons.length] =
new edButton('ed_youtube'
,'Youtube'
,''
,''
,'a'
); // special case

Por defecto el botón aparece con el texto Youtube pero si quisieras cambiarlo por el motivo que fuera, sólo tienes que reemplazarlo. Una vez creado el botón en sí, crearemos la aparición de un inputbox para insertar el identificador del vídeo en cuestión. Para ello localizaremos la línea (en mi caso la 176)


else if (button.id == 'ed_youtube') {
document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertYoutube(edCanvas, ' + i + ');" value="' + button.display + '" />');
}

de manera que no sea la última condición del if. Ya no queda más que situarse al final del fichero y añadir la siguiente función para que al pinchar aceptar en el cuadro, se inserte todo el código automáticamente:


function edInsertYoutube(myField) {
var myValue = prompt('Enter the ID of the video', 'npjXEmExcxE');
if (myValue) {
myValue = '<div style="text-align:center"> <object type="application/x-shockwave-flash" style="width:425px; height:350px" data="http://www.youtube.com/v/'
+ myValue
+ '"><param name="movie" value="http://www.youtube.com/v/'
+ myValue
+ '"></param></object></div>';
edInsertContent(myField, myValue);
}
}

A partir de ahora, aparecerá una nueva etiqueta en el panel de escritura de WordPress llamada Youtube y que al pinchar, nos aparecerá un cuadro de diálogo para insertar el identificador del vídeo, presionar aceptar e insertarse automáticamente el código en la posición del cursor.

Actualización: Como bien comenta InKiLiNo la sentencia else if estaba mal, porque había copiado y pegado el bloque siguiente. Ya está arreglado.