JMiur [E]

Como ya son varias las veces que me prguntan la forma en que están colocado los videos en la sidebar en Infinitos Mundos, voy a ver si puedo explicarlo; no es que sea difícil de hacer sino que hay ciertos datos dependen de donde se va a colocar, especialmente del ancho y el margen.


En realidad, como la idea es dividir un bloque en partes iguales, puede aplicarse a cualquier otra cosa pero, tratándose de videos, lo primero que necesitamos es algún script que los abra en una ventana modal; cualquiera de ellas es lo mismo y como uso LightWindow, voy a basarme en esa.

Pero empecemos con las imágenes para no complicar las cosas. Necesitamos las imágenes de los videos, miniaturas que podemos hacer nosotros mismos o si se trata de videos de YouTube, usar las que ellos mismos nos proveen. Por ejemplo, queremos poner estos cuatro videos:

http://www.youtube.com/watch?v=Ur4KW83CviQ
http://www.youtube.com/watch?v=jkTNe85y0UI
http://www.youtube.com/watch?v=0k2pYlcxogU
http://www.youtube.com/watch?v=mw1_BQpHSpo

Lo único que varía entre ellos es el ID, un conjunto de once caracteres que identifican cada video y que es un dato único e irrepetible.

Cuando los agregamos, antes de ser ejecutados, vemos que nos muestra una imagen estática. Esa imagen es accesible porque siempre está en el mismo lugar. Y no solo hay una, hay tres por cada video:

http://img.youtube.com/vi/jEOkxRLzBf0/1.jpg
http://img.youtube.com/vi/jEOkxRLzBf0/2.jpg
http://img.youtube.com/vi/jEOkxRLzBf0/3.jpg

Como ya tenemos todos los datos, vamos a agregar un elemento HTM en la sidebar y allí, colocaremos el código:
<div id="minivideos">
<a class="lightwindow" href="http://www.youtube.com/v/Ur4KW83CviQ" params="lightwindow_width=425,lightwindow_height=350,lightwindow_loading_animation=true" title="" rel="">
<img src="http://img.youtube.com/vi/Ur4KW83CviQ/3.jpg"/>
</a>
<a class="lightwindow" href="http://www.youtube.com/v/jkTNe85y0UI" params="lightwindow_width=425,lightwindow_height=350,lightwindow_loading_animation=true" title="" rel="">
<img src="http://img.youtube.com/vi/jkTNe85y0UI/3.jpg"/>
</a>
<a class="lightwindow" href="http://www.youtube.com/v/0k2pYlcxogU" params="lightwindow_width=425,lightwindow_height=350,lightwindow_loading_animation=true" title="" rel="">
<img src="http://img.youtube.com/vi/0k2pYlcxogU/3.jpg"/>
</a>
<a class="lightwindow" href="http://www.youtube.com/v/mw1_BQpHSpo" params="lightwindow_width=425,lightwindow_height=350,lightwindow_loading_animation=true" title="" rel="">
<img src="http://img.youtube.com/vi/mw1_BQpHSpo/3.jpg"/>
</a>
</div>
Hemos creado un rectángulo al que llamamos minivideos y allí colocamos los enlaces de los cuatro videos, usando las miniaturas del mismo YouTube. Guardamos y veremos ... vaya uno a sabe lo que veremos porque allí comienzan las diferencias entre una plantilla y otra. Pero, para eso le dimos un nombre así que agregaremos definiciones CSS antes de </b:skin>:
#minivideos {text-align: center;}
#minivideos a img {
height: 95px;
margin: 3px 3px 0 3px;
width: 130px;
}
Con esto, centraremos las imágenes y las separaremos un poco entre si. además, como esas miniaturas no son todas del mismo tamaño, las dimesionamos:


Ahora, vamos a decorarlo un poco, agregándole un borde a las imágenes y dándoles un padding (relleno) de tal manera de separar ese borde de la imagen en si misma:
#minivideos a img {
border: 2px solid #567;
height: 95px;
margin: 3px 3px 0 3px;
padding:3px;
width: 130px;
}

Claro que, estamos partiendo de una idea que tal vez es errónea, suponemos que tenemos una sidebar lo suficientemente ancha para que entren dos miniaturas pero, tal vez, eso no es cierto, ¿qué pasaría si es demasiado angosta?


Lo que pasa siempre que no hay lugar suficiente; lo que no entra se va para abajo así que, lo que debemos hacer es reducir el ancho de las imágenes.

En este ejemplo, la supuesta sidebar tiene 250 pixeles de ancho y como las imágenes tienen 130 pixeles cada una, no entran pero no basta reducirlas a 125 porque hay un detalle que debe tenerse muy en cuenta, el ancho necesario no es el ancho indicado por width sino ese valor más los bordes (border), rellenos (padding) y márgenes (margin). Quiere decir que podemos calcular el ancho máximo de la imagen con un poco de aritmética.


No podemos usar más de 125 pixeles; y tenemos 3 pixeles de margen, 2 pixeles de borde y 3 pixeles de relleno, o sea 8 pixeles a cada lado. Debemos entonces restar:
125 - 8 - 8 = 109
ese, será el ancho máximo de la imagen que podemos usar:
#minivideos a img {
border: 2px solid #567;
height: 80px;
margin: 3px 3px 0 3px;
padding: 3px;
width: 109px;
}

Y si quisiéramos poner 3 imágenes, haríamos lo mismo:
250 / 3 = 83
83 - 8 - 8 = 67
así que:
#minivideos a img {
border: 2px solid #567;
height: 49px;
margin: 3px 3px 0 3px;
padding: 3px;
width: 67px;
}

Seguimos con dos por fila achicando aún más la imagen para que se separe de los bordes y agregándole más detalles a gusto:
#minivideos a img {
-moz-border-radius: 5px;
background-color: #345;
border: 2px solid #567;
height: 75px;
margin:3px 3px 0 3px;
padding: 3px;
width: 100px;
}

Y un último ejemplo, ya funcionando y con un efecto hover:
#minivideos a img {
-moz-border-radius: 5px;
background-color: #345;
border: 2px solid #567;
height: 75px;
margin: 3px 3px 0 3px;
opacity: 0.8;
filter:alpha(opacity=80);
padding: 3px;
width: 100px;
}
#minivideos a img:hover {
border: 1px solid #CDE;
height: 83px;
opacity:1;
filter:alpha(opacity=100);
padding:0;
width: 108px;
-moz-border-radius:0px;
}

29 comentarios:

La Blogueria  

Éste debe de ser el comentario más repetido en este blog: ¡Genial post! :D

Responder
JMiur  

Me alegro que te gustara, Vane :D

Responder
GOCASE  

Eramos muchos los que te preguntabamos esa es la verdad !!!

Genial que nos des los secretos que guardas en tu reserva del sumario :D

Responder
jesgo  

Y no por repetido, menos genial.

Responder
Graciela  

guau guau JMIUR!!!, esto sí lo entendí :) genial, genial...mis besos!!!

Responder
Romer Riera  

!Fantástico! Voy a intentar colocarlo en mi blog. Gracias Jorge.
Apoyo todos los elogios anteriores.

Responder
Claudio  

Muy buena explicación, gracias!

Responder
JMiur  

Me alegro que sirviera, costó trabajo :D

Responder
Gem@  

Ya te lo dije pero no podía irme sin repetirlo...
MAGISTRAL :)

Responder
JMiur  

Gracias, Gem@ :D

Responder
Marc  

Está muy bien, de maravilla!
Cómo podría insertar un texto debajo de cada video?

Responder
JMiur  

Habría que agregar el texto y establecer propeidades CSS para ese texto, no tengo detalles para eso.

Responder
Juan Pedro  

Hola Jorge:

Para colocar estos minivideos en los post: (no en la sidebar)
¿Cómo hago para agregarle al código inicial, los parámetros completos, que están magistralmente explicados paso a paso, para ser colocados en la sidebar?

Importante sería que quedasen como la imagen estática que tenés en este post donde están las imágenes de Eduardo Galeano, de quien tengo una buena colección de videos.

Gracias!!!

Responder
JMiur  

Para colocarlo en un post hay que hacer exactamente lo mismo. La única diferencia es que deberás escribir todo en una sola línea para evitar los salos de línea automáticos.

El estilo también se lo puede poner en el mismo post, entre etiquetas <style> y </style> con la misma condición, todo seguido en una sola línea.

De echo, lo que ves en los ejemplos de esta entrada, es exactamente eso.

Responder
Juan Pedro  

Gracias, Jorge!!!

Estuve probando publicar como un post, y resulta muy bueno, solo que, cargando estos parámetros bien antes de :

#minivideos a img { -moz-border-radius: 5px; background-color: #778899; border: 3px solid #ffffff; height: 75px; margin: 3px 3px 3px 3px; opacity: 0.8; filter:alpha(opacity=80); padding: 2px; width: 100px;}#minivideos a img:hover { border: 1px solid #CDE; height: 83px; opacity:1; filter:alpha(opacity=100); padding:0; width: 108px; -moz-border-radius:0px;}

Porque no se en que parte del código (que a continuación te dejo), debo definir los mismos dentro del post entre las etiquetas que me mencionas en tu comentario...

Código de pruebas:

Como este formulario de comentarios no me permite dejarte el código ejemplo, te lo mando por email...

Otra cosa, ¿Cómo se logran esos bordes internos con esquinas redondeadas de color verde oliva, como los que se pueden apreciar en la imagen estática que publicaste en primer término en el presente post?

Como siempre, muchas gracias por tu atención!!!

Responder
JMiur  

OK, acabo de recibir tu mail y te respondo alli.

Responder
Juan Pedro  

Ok., espero por ese medio tu siempre valiosa respuesta.

Nuevamente, mil gracias!!!

Responder
Juan pedro  

A veces pensamos que la resolución de algunos temas como este, son complejos, hasta que podemos aprender de una mano maestra, que nos demuestra que es más sencilla de lo que teníamos in mente...

Imposible mejor explicación didáctica que la que recibí por mail, pero no me asombra para nada, sabiendo de tus virtudes pedagógicas y buena predisposición para llevarlas acabo.

Realmente, EXCELENTE!!!

Muchísimas gracias por todo!!!

Responder
JMiur  

Oh, gracias, Juan :D Muy amable de tu parte, como siempre :D

Responder
Saul Sanchez Toro  

JMiur, como hago para ponerle titulitos a cada pequeña ventana? Por ejemplo: parte1, Parte2, Parte3, etc.

Este es mi blog de prueba y deseo ponerle a mis videitos una identificacion:

http://pruebasantoro.blogspot.com/

Responder
JMiur  

No sé que resultado final quieres pero, podrías agregarlo debajo de cada enlace, por ejemplo, despiues de cada etiqueta </a>

<span>parte 1</span>

y luego propiedades para eso:

#minivideos span {
display:block;
/* cualquier propiedad que quieras */
}

Responder
Saul Sanchez Toro  

JMiur, gracias por responderme a pesar de ser Semana Santa y la gente esta en otros compromisos. Me funcionó a las mil maravillas. Me quito el sombrero ante ti. Eres un colaborador genail. Con razón Rosa y Gema te aprecian tanto.

Responder
JMiur  

Perfecto, Saul, me alegro que todo funcionara bien :D
De Gem@ y Rosa ¿que puedo decir? : son maestras en serio :$

Responder
Gem@  

Saul Sanchez Toro lo que dices es verdad de la buena pero chochea de vez en cuando y no reconoce las cosas, nadie es perfecto :S

Responder
JMiur  

¿Chochear? ¿Yo? Ahhhhh !!!! sí, yo. Claro, obvio ¿de que hablábamos?

Responder
GABRIEL  

Bendiciones hermano, me a sido de mucha ayuda y se que muchos opinan lo mismo, en este caso estoy usando su ejemplo y no meda el efecto deseado, se que puedo contar con su colaboración y para saber que estoy haciendo mal, tengo el ejemplo en mi blog, gracias hermano cuento con su ayuda. gabygabilan.blogspot.com

Responder
JMiur  

Si quieres que se habran en una ventana modal, debes tener un scrit que lo haga; tal como dice el post, en este caso, uso LightWindow prero, si no tienes esa librería agregada, el video, simplemente se abrirá en una nueva ventana.

Responder
GABRIEL  

Gracias y bendiciones, después de tener la librería donde la puedo colocar, perdona mi ignorancia, gracias.

Responder
JMiur  

Para eso, tendría que instalar ese script que está explicado en estas dos entradas [ 1 2 ]

Aunque, creo yo, que si sólo se va a usar para esto, no tiene mucho sentido porque aumentará sustancialmente el peso de la páginas

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR