Fotos de Manuel Pérez Báñez.
En este taller nuestro compañero Alfonso Toscano García de FP comparte con nosotros un código que nos resultará muy útil para mejorar la maquetación de nuestros materiales en exelearning.
Este código nos va a permitir alinear horizontalmente varios vídeos o imágenes sin tener los problemas de scroll, que se nos producían cuando los insertábamos usando tablas.
El método es muy sencillo, mediante este código, creamos una ¿especie de caja¿ que va a contener las imágenes o los vídeos, que quedarán centrados en ella.
Esta caja tiene asignada por defecto un valor de un 80% de ancho y en ella vamos a ir colocando los vídeos o las imágenes que queramos, adjudicándoles a cada uno un porcentaje que en conjunto no supere el 100%, esto es muy importante para que la maquetación sea correcta.
Caja común:
Dos imágenes o vídeos:
Tres imágenes o vídeos:
Pero no tenemos que preocuparnos por los porcentajes, los códigos ya los tienen incluidos, lo único que tenemos es que insertarlo en nuestro exelearning y hacer alguna pequeña modificación, por ejemplo el código viene preparado para que incluya un título y una referencia, que podemos dejar o quitar, borrando esa parte del código.
Aquí están los códigos:
1. Código para maquetar 3 imágenes o vídeos horizontalmente.
En este caso se recomienda que las imágenes no superen una resolución de 400px y los vídeos modificarlos a width="400 " height= 200 .
==============================================================
<div style="width: 80% ; margin: auto; text-align: center;">
<div style="display: inline-block; width: 33% ;">
Vídeo o Imagen
<p style="font-size: 0.8em; font-style: italic;">Título </p>
<p style="font-size: 0.7em; margin-top:-10px">Referencia </p>
</div>
<div style="display: inline-block; width: 33% ;">
Vídeo o Imagen
<p style="font-size: 0.8em; font-style: italic;">Título </p>
<p style="font-size: 0.7em; margin-top:-10px">Referencia </p>
</div>
<div style="display: inline-block; width: 33% ;">
Vídeo o Imagen
<p style="font-size: 0.8em; font-style: italic;">Título </p>
<p style="font-size: 0.7em; margin-top:-10px">Referencia </p>
</div>
</div>
==============================================================
2. Código para maquetar 2 imágenes o vídeos horizontalmente
En este caso se recomienda que las imágenes no superen una resolución de 800 px y los vídeos no hay que modificarlos.
==============================================================
<div style="width: 80% ; margin: auto; text-align: center;">
<div style="display: inline-block; width: 48% ;">
Vídeo o Imagen
<p style="font-size: 0.8em; font-style: italic;">Título </p>
<p style="font-size: 0.7em; margin-top:-10px">Referencia </p>
</div>
<div style="display: inline-block; width: 48% ; ">
Vídeo o Imagen
<p style="font-size: 0.8em; font-style: italic;">Título </p>
<p style="font-size: 0.7em; margin-top:-10px">Referencia </p>
</div>
</div>
==============================================================
El procedimiento de inserción del código lo tenéis explicado perfectamente en el siguiente vídeo que ha realizado nuestro compañero Alfonso.
VIDEO
Y aquí tenéis un resumen de los pasos:
1. Copiamos el código y en exelearning utilizamos por ejemplo el iDevices texto libre, abrimos el htlm, lo pegamos y actualizamos.
2. Seleccionamos el texto de vídeo o imagen y los vamos insertando.
3. Si son imágenes les ponemos una resolución máxima de 400 o 800 px según el caso.
4. En el caso de que sea un vídeo, en youtube, le damos a compartir, elegimos insertar texto embebido (< > ) y copiamos el código del vídeo, en exelearning, pulsamos texto embebido (< > ), copiamos el código del vídeo y si es necesario modificamos el ancho y alto a 400 y 200 y actualizamos.
<iframe width="560 " height="315 " src="https://www.youtube.com/embed/EvQ9MB3lOOY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Blog 
Miembros 
