19 octubre 2009

Cómo incrustrar un reproductor en la barra lateral

¿Has intentado alguna vez insertar un reproductor de música/vídeo/slideshow en la barra lateral de tu blog y luego lo has descartado porque no quedaba bien? Seguro que sí. Pero eso te volverá a ocurrir si lees este post, ya que con él vas a aprender a modificar el código HTML de esos malditos reproductores que no encajan en ninguna parte.
···
Como ya sabes, la inmensa mayoría de las plataformas fotográficas, musicales y de vídeo permiten ya insertar reproductores y slideshows en nuestros blogs gracias al código HTML (Si no sabías nada del tema, te aconsejo la previa lectura del post "Cómo insertar un reproductor"). Sin embargo, dichas plataformas muchas veces no ofrecen la posibilidad de insertar reproductores lo suficientemente reducidos como para incrustrarlos en la barra lateral, por lo que, al insertarlos, acabamos deformando el reproductor o incluso el propio blog.
···
Como he avanzado, la solución está en modificar algunas cifras del código HTML de forma que no deformemos el aspecto del reproductor. Y para ellos vamos a usar algo que ya nos explicara, en un pasado más o menos lejano, nuestro profesor de matemáticas: la regla de tres... Vale, ya sé que suena muy técnico y que alguno de ustedes ya habrá empezado a sentir vértigo nada más pensar en lo que les voy a explicar a continuación. ¡Calma! ¡Es súmamente sencillo! ¡Y súmamente gratificante! Si no, piensen que por fin hallarán una utilidad práctica a la maldita clase de mates que tanto les mortificó en su infancia ;)
···
Pero veamos primero el aspecto de un código HTML. Este es el código para insertar un vídeo de YouTube; es uno de los más sencillos que he visto, por lo que resulta perfecto para familiarizarnos con este tipo de modificaciones. Nos interesa aquellas partes en las que se cifra el tamaño del reproductor, es decir su ancho (width) y su altura (height); pueden apreciarlas con facilidad porque aquí aparecen resaltadas y, como ven, siempre aparecen juntitas, una detrás de la otra.
···

···
Por supuesto, un ancho de 425 píxeles es excesivo para nuestra barra lateral, sobre todo si nuestro blog no es muy amplio y, consecuentemente, tiene una barra pequeña. Por lo tanto, hay que estrechar el reproductor aminorando ese ancho; creo que un ancho entre 150 y 180 píxeles os quedará bien; sin embargo, disminuir el ancho nos obliga también a reducir la altura, lo cual debemos hacer en la misma proporción, para que el reproductor no quede desfigurado.
···
Es ahora, para averiguar la altura que buscamos para nuestro futuro reproductor, cuando hemos usar la regla de tres, que en este caso se resuelve multiplicando en ancho que queremos dar al reproductor y el alto original y dividiendo el resultado de esa multiplicación entre el ancho original.
···
Image Hosted by ImageShack.us
···
Siguiendo con nuestro ejemplo con el reproductor de YouTube, si lo que queremos es un reproductor de 150 píxeles de ancho, la operación será 150x344/425, donde los 344 y 425 píxleses son el alto y el ancho del reproductor original respectivamente. El cálculo de la operación da como resultado una altura de 121 píxeles, que será la altura de nuestro futuro reproductor. Ya lo que queda es tomar el código HTML y hacer las oportunas modificaciones, sustiyendo las viejas medidas por las medidas nuevas.
···

···
A continuación, podéis apreciar el aspecto del coqueto reproductor de YouTube ya insertado... Eso sí, os recuerdo que los vídeos de YouTube no se ponen en marcha automáticamente; tendrán que ser vuestros visitantes los que lo pongan en marcha.
···

···
Ahora que hemos entrado ya en materia, podemos pasar a palabras mayores. Y es que este sistema funciona igualmente con códigos más complicados, dotados de diferentes elementos con diferentes dimensiones, cuya única dificultad radica en que que nos obligará a poner en práctica la fórmula en más de una ocasión, para cambiar cambiar los píxeles de todos los elementos que encontremos. Sirva de ejemplo el que aparece a continuación: el código HTML de un reproductor Soundclick (tipo "Premium MP3 player"), con 3 elementos con diferentes medidas...
···

···
O sea, que en este caso tendremos que aplicar 3 veces nuestra fórmula para calcular la altura de los 3 elementos distintos: 150x450/300=225 para el primero, 150x430/300=215 para el segundo y 150x250/300=125 para el tercero, de nuevo para un reproductor de 150 píxeles. Abajo, los cambios sobre el HTML original.
···

···
Y el resultado, perfecto.
···

···
Así que ahora no teneis excusa para poner vuestro propio hilo musical a vuestro blog. Ya sólo os queda encontrar esa web y esa música con la que os sentís indentificado y que mejor se ajuste al espíritu de vuestra página. ···

4 comentarios:

  1. Odio, odio, odio profundamente las matemáticas... pero con lo bien que lo explicas, seguro que me entero y me sale perfecto. Estoy dudando si ponerle o no música a mi blog. Pero si lo hago finalmente, que sepas que me va a quedar un reproductor chulísimo gracias a ti.

    Besazos, Auxi,

    Belén.

    ResponderEliminar
  2. XD He de admitir que la regla de tres ha sido lo último del temario de matemáticas que le he podido hallar una utilidad práctica. Para mi las matemáticas empezaron a perder sus sentido práctico a partir de las ecuaciones y las derivadas ;)

    Me alegra que te pueda servir de guía para poner música en tu blog. Yo estoy pensando en dejar que sean los visitantes quienes la pongan en marcha; es otra posibilidad.

    Besotes!!

    ResponderEliminar
  3. Lo primero, quiero darte las gracias por el artículo. Lo prometiste y lo cumpliste. Lo segundo, me gustaría que me comentaras algo de creative commons. ¿Mandas tus textos antes de publicarlos aquí? ¿Es una forma de registro? He estado buscando por tus blogs un correo electrónico para escribirte y no lo encuentro. No estaría mal que tuvieras uno para ellos. He encontrado una forma de ponerlo con no Spam. Al final hice un portal nuevo en el blog, tengo que decir que eres mi inspiración. En http://www.alejandromagno.tk , si te fijas a la derecha está mi correo para webs , en realidad es una imagen png para que no lo detecten y me hagan spam. Bueno, ya me me comentarás lo de creative. Mi correo es hidaspes@gmail.com .
    Saludos

    ResponderEliminar
  4. Hola, José Luis. Me apunto esa dirección y el nuevo blog, por el que me pasaré en cuanto tenga un ratito.

    Tengo un correo para webs incrustado como una imagen. Está en el blog CUARTO DE DERROTA. Lo eliminé de los demás blogs porque, aunque era una imagen, seguía recibiendo spams a ese correo.

    Un día echaré un vistazo por la web a ver si encuentro un sistema para que los visitantes me envien correos rellenando un formulario. Eso sí que te libera de los malditos spams.

    De todas formas, ahora que tengo tu correo, te lo comunicaré por esa vía ;)

    También es una buena idea dedicar un post a las licencias cc. Aunque eso lo incluiría en el blog ARCÓN DE SASTRE, que es donde incluyo los artículos de ese tipo.

    Saludos.

    ResponderEliminar

Te doy la bienvenida a mis mares.
Muchas gracias por verter en ellos tus palabras.