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

Componente Galería deslizable en Google Web Designer

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

Propiedades avanzadas de la Galería deslizable. Galería de grupos. Vista previa. Publicación y validación.

La sección Galería deslizable tiene también una serie de Propiedades avanzadas, entre las que se encuentran las siguientes:

• Distancia del marco: distancia entre imágenes
• Ancho y altura de marco: anchura y altura de las imágenes, en píxeles
• Duración de reproducción automática: duración de la reproducción en milisegundos
• Intervalo de paso de reproducción automática: tiempo que se muestra cada imagen en Reproducción automática, en milisegundos
• Direcciones URL de salida: lista de direcciones que se corresponden con las imágenes.

Si el Intervalo de paso de reproducción automática es excesivo, es posible que las últimas imágenes no se muestren, porque se agotará la Duración de reproducción automática antes de completar la secuencia. Si el Intervalo es demasiado breve, la secuencia se completará antes de que se agote la Duración de reproducción, con lo que la reproducción comenzará otra vez desde el principio.

Galería deslizable de grupos

También es posible hacer galerías con grupos, utilizando para ello el campo Grupos del panel Galería deslizable. Los grupos permiten realizar galerías con vídeos o con agrupaciones de imágenes con texto. Las galerías deslizables deben ser sólo de imágenes o sólo de grupos, no es posible mezclar ambos tipos de elementos, aunque siempre será posible convertir imágenes en grupos.

Vista previa

El desplegable Vista previa, en la parte superior derecha de la interfaz, permite seleccionar el navegador para revisar el proyecto que se está componiendo. Una vez abierto, el navegador elegido muestra una página web local con una barra superior que incluye tres secciones:

• Modo de vista previa: Móvil u Ordenador
• Dispositivo: para móviles, muestra una lista de 13 dispositivos comerciales, que pueden orientarse en horizontal o vertical
• Tamaño del viewport: dependiendo del dispositivo elegido, muestra las dimensiones del viewport.

Dispositivo y Tamaño del viewport no se muestran si el Modo de vista previa es Ordenador.

Publicación

Cuando la Vista previa nos informa de que el proyecto está correcto, llega la hora de publicarlo. La publicación genera el conjunto final de archivos que el proyecto necesita. El triángulo junto al botón Publicar, en la esquina superior derecha, muestra un desplegable con las opciones siguientes:

• De forma local: genera los archivos en una carpeta del ordenador
• Google Drive: sube los archivos a Google Drive
• Studio y Display & Video 360: para anuncios Display & Video 360.

Cuando se opta por publicar el proyecto de forma local, aparece un cuadro de diálogo en el que hay que indicar:

• Nombre: nombre de la carpeta en la que se almacenarán los archivos que componen el proyecto
• Ubicación: para la carpeta del proyecto
• Combinar archivos: activarla para que todos los archivos del proyecto estén en una sola carpeta
• Crear Zip: inútil en proyectos HTML
• Archivos locales insertados (js. y css.): inserta el código JavaScript y CSS dentro del código HTML, en lugar de generar archivos independientes
• Comprimir: comprime el código fuente y así reduce el tamaño del archivo
• Desempaquetado de grupos: si se activa, la carga de la página es más rápida
• Prefijo de CSS: permite activar la compatibilidad con los navegadores Webkit y Mozilla.

Completada la selección de opciones, el botón Publicar generará la carpeta del proyecto, que luego se podrá subir a un sitio web. El proyecto contendrá un archivo index.html y varios archivos JavaScript y CSS.

Comprobaciones de validación

El panel de publicación informa acerca de los Errores de validación. En proyectos HTML, Google Web Designer puede informar de los siguientes errores de validación:

• El formato del código HTML no es válido: etiquetas HTML incorrectas o en el orden incorrecto
• Falta la fuente de imágenes local: error en la localización de los archivos de imagen
• Evento de área de pulsación no válido: evento que no funciona en dispositivos móviles
• La URL no es válida: formato incorrecto o con caracteres no admitidos.

Si no hay errores, Google Web Designer informará de que “Se han superado todas las comprobaciones”.

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.