Galerías para infografías con Google Web Designer (VI)

Panel de propiedades del componente Galería deslizable

Galerías web para infografías con Google Web Designer (VI)

Componentes. Galería deslizable.

Los componentes de Google Web Designer son módulos que añaden funciones específicas a los proyectos HTML. En el panel Componentes se muestran las siguientes carpetas:

• Galerías
• Interacción
• Mapas
• Multimedia
• Varios
• UI
• Beta
• Elementos personalizados.

La carpeta Galerías contiene cuatro componentes:

• Galería 360º: para mostrar un objeto desde todos los ángulos
• Galería deslizable: para deslizar un conjunto de imágenes en vertical u horizontal
• Galería en carrusel: galería deslizable en la que las imágenes adyacentes se muestran en perspectiva para crear la impresión de un expositor giratorio
• Navegación por la galería: añade un panel de navegación para la galería seleccionada.

La incorporación de componentes se realiza mediante arrastre desde el panel Componentes hasta la ventana de trabajo. Una vez insertado, el componente debe dimensionarse, por porcentajes, y alinearse correctamente, con las casillas Alinear al contenedor y Diseño fluido activadas. Las propiedades del componente se controlan mediante el cuadro de diálogo Eventos.

Galería deslizable de imágenes

Para insertar una galería deslizable en el proyecto hay que seguir el siguiente proceso:

• en el panel Componentes, carpeta Galerías, arrastrar Galería deslizable hasta la ventana de trabajo
• en el panel Propiedades, sección Posición y tamaño, activar Utilizar porcentajes
• indicar las dimensiones de la galería, como porcentajes del viewport
• alinear la galería en el viewport, con Alinear con el contenedor y Diseño fluido activados (centro horizontal, borde superior, separaciones…).

Después, en el panel Propiedades, sección Galería deslizable:

• clic en Nombre y asignar uno
• en Imágenes, clic en el icono
• pulsar Elegir imágenes, para seleccionar imágenes en el ordenador, o hacer clic en el campo URL y pegar una lista de direcciones URL de imágenes subidas a la red, separadas por comas
• Aceptar.

La ventana Seleccionar imágenes permite alterar el orden de las imágenes seleccionadas, mediante el arrastre a la posición correcta, y también eliminarlas de la selección. Otras opciones de la sección Galería deslizable, dentro del panel de Propiedades, son:

• Transición: tiempo que tarda la transición entre imágenes cuando se activa la navegación, en milisegundos
• Fotograma de inicio: número de la imagen con la que comienza la reproducción
• Mostrar fotogramas: cantidad de imágenes que se muestran a la vez
• Marcos deslizables: cantidad de imágenes que se avanza en cada transición
• Reproducción automática: si se activa, la reproducción comienza automáticamente cuando se abre la página en la que está la galería
• Incluir navegación: si se activa, la galería muestra debajo una fila de círculos que activan la transición entre las imágenes
• Usar miniaturas: si se activa junto con Incluir navegación, el menú de selección de imágenes se compone con miniaturas de las mismas, en lugar de con círculos
• Color de resaltado: color del marco que rodeará a la miniatura seleccionada, o bien del círculo que corresponde a la imagen seleccionada, cuando no se activa Usar miniaturas
• Escala: permite seleccionar el modo en que las imágenes se ajustarán al tamaño de la galería
• Dirección: permite seleccionar si el deslizamiento es horizontal o vertical.

Daniel Trujillano, Arquitecto
http://www.arquitectotrujillano.com/infografia/home.html
Infografía arquitectónica 3D