Skip navigation

3.3- Disposición de imágenes y vídeos en columnas

Al diseñar materiales didácticos, se suelen utilizar diferentes combinaciones de texto, imágenes o vídeos. A veces surge la necesidad de maquetar en columnas, sin embargo esta opción se debe minimizar puesto que no es totalmente accesible.

Cuando queramos utilizar varios recursos en columnas, usaremos unas plantillas predefinidas que incluye el programa eXeLearning. Estas plantillas utilizan capas que facilitan un diseño web responsive (adaptado a todos las resoluciones de pantalla).

En el caso de visualización en pequeñas pantallas o de baja resolución, las imágenes situadas en la misma fila se pueden desplazar una debajo de otra.

Estas son nuestras recomendaciones:

Número de imágenes en línea Anchura máxima
1 única imagen 700 píxeles máximo
2 imágenes 350 píxeles máximo
1 imagen y texto 350 píxeles máximo
3 imágenes 200 píxeles máximo

En todo caso, nunca la suma de imágenes en horizontal puede tener más de 700 píxeles (esto garantiza la correcta visualización sin scroll horizontal en monitores pequeños).

Opción plantilla

Seleccionar plantilla para maquetar en columnas
Captura de pantalla de elaboración propia

El procedimiento es el siguiente:

  1. Se inserta la plantilla, te posicionas tras los ... y pulsas la tecla Enter, allí escribes la referencia (en su formato habitual) y alineas al centro.
  2. Posteriormente seleccionas todo el texto Lorem ipsum dolor sit amet... e insertas la imagen que también debes centrar.

Por compatibilidad con materiales anteriores, tenéis a vuestra disposición un documento con el procedimiento de tablas para maquetar.

Dos recursos del mismo tamaño en columnas

Se ha de utilizar la plantilla de dos columnas al 50%.

Luis XVI. Retrato de A. F Callet

Louis XVI. Retrato de A.F. Callet
Imagen en Wikimedia Commons. Dominio Público

Luis XVI. Retrato de A. F Callet

Louis XVI. Retrato de A.F. Callet
Imagen en Wikimedia Commons. Dominio Público

Colocación de imágenes laterales

Esta forma de maquetar no se recomienda para imágenes o textos largos, puesto que varía mucho su visualización dependiendo del ancho del monitor o dispositivo.

Se debe usar la opción de plantillas de 2 columnas a 30% 70% (o al revés). El texto no debe ser de longitud mayor a la imagen para que la maquetación quede correcta.

El vídeo se redimensiona a 450*225 píxeles.

IEDA 8 de marzo
Vídeo de IEDA Vicedirección alojado en Youtube

Este vídeo se ha realizado para conmemorar el día 8 de marzo en el IEDA.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at erat et urna mattis adipiscing. In blandit nibh a purus dictum aliquet malesuada arcu euismod. Morbi lobortis augue id mauris sagittis at malesuada erat sodales. Sed eget odio vitae est faucibus congue. Donec a nisl id nisi viverra elementum vitae et dui. Nunc est urna, sodales ornare mollis eu, aliquam viverra libero. Donec ornare dolor nec diam ultricies feugiat. Vivamus at posuere augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec aliquet tristique nunc, pretium bibendum ipsum faucibus sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at erat et urna mattis adipiscing. In blandit nibh a purus dictum aliquet malesuada arcu euismod. Morbi lobortis augue id mauris sagittis at malesuada erat sodales. Sed eget odio vitae est faucibus congue. Donec a nisl id nisi viverra elementum vitae et dui.


Aquí seguiría el texto normal, que ocupa todo el ancho de visualización, para una correcta visualización la imagen no debe tener más 350 píxeles de ancho. Usamos la plantilla con imagen lateral a la derecha (70%, 30%).

A continuación se incluye el icono de la licencia asignada a todos los materiales dieñados a través de esta guía.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at erat et urna mattis adipiscing. In blandit nibh a purus dictum aliquet malesuada arcu euismod. Morbi lobortis augue id mauris sagittis at malesuada erat sodales. Sed eget odio vitae est faucibus congue. Donec a nisl id nisi viverra elementum vitae et dui. Nunc est urna, sodales ornare mollis eu, aliquam viverra libero. Donec ornare dolor nec diam ultricies feugiat. Vivamus at posuere augue.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec aliquet tristique nunc, pretium bibendum ipsum faucibus sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at erat et urna mattis adipiscing. In blandit nibh a purus dictum aliquet malesuada arcu euismod.

Licencias CC

Icono de cláusula CC
Imagen en Creative Commons. Licencia CC

 

Tres recursos en la misma fila

Se usará la plantilla de 3 columnas. Para no descuadrar el diseño, las imágenes deben tener la misma altura.

iDevice Importante

iDevice Importante
Captura de pantalla de elaboración propia

iDevice Para saber más

iDevice Para saber más
Captura de pantalla de elaboración propia

iDevice Curiosidad

iDevice Curiosidad
Captura de pantalla de elaboración propia

4 recursos en 2 filas y 2 columnas

Se hará utilizando dos veces la plantilla 50%. Se aconseja primero completar una plantilla y después la otra.

Moodle

Icono de moodle
Imagen en wikimedia. Licencia GNU

eXeLearning

Icono de eXeLearning
Imagen en exeLearning.net. Licencia CC

Repositorio CREA de la Junta de Andalucía

Repositorio CREA de la Junta de Andalucía
Captura de pantalla de elaboración propia

Agrega

Proyecto Agrega
Captura de pantalla de elaboración propia