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.

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

Creación de puntos de interrupción en Google Web Designer

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

Reglas de orientación y puntos de interrupción

Cuando, en el panel Capacidad de respuesta, se pulsa en Media queries > Media rules > icono “Crear reglas de orientación horizontal y vertical independientes”, aparecen secciones diferenciadas para Reglas de orientación horizontal y para Reglas de orientación vertical.

Puntos de interrupción

Supongamos que consideramos suficiente la utilización de un juego de imágenes pequeñas para la mitad de los viewports del listado de Google Web Designer y otro de imágenes grandes para la otra mitad. Si se considera sólo la configuración horizontal de los viewports, habría que preparar un juego de imágenes con 480 píxeles de anchura, que se mostraría hasta el viewport 411x731, y otro con imágenes de 736 píxeles de anchura, que se mostraría a partir del viewport 414x736. El cambio se produciría en este último viewport, de modo que habría que definir puntos de interrupción en las dimensiones que lo definen. Para ello habría que seguir el siguiente proceso:

1. Activar la Herramienta de modificación del tamaño del viewport y seleccionar el tamaño predeterminado 414x736 en la barra de opciones
2. En el panel Capacidad de respuesta, activar Media queries > Media rules
3. Clic en +, en el borde inferior del panel
4. Seleccionar Punto de interrupción de anchura
5. Clic de nuevo en + > Punto de interrupción de altura.

De ese modo se crea un intervalo horizontal que permite que el diseño cambie cuando la anchura del viewport supera los 736 píxeles o cuando la altura supera los 414 píxeles. Los intervalos creados se identifican mediante franjas coloreadas sobre las reglas de la ventana de trabajo, y mediante filas independientes en el panel Capacidad de respuesta. Una vez creado, cada intervalo puede eliminarse mediante el siguiente proceso:

1. Clic en la fila correspondiente, en el panel Capacidad de respuesta
2. Clic en el icono de la esquina inferior derecha del panel (“Eliminar los intervalos de anchura y altura seleccionados”).

También es posible eliminar los intervalos haciendo clic con el botón derecho del ratón sobre la parte correspondiente de la banda coloreada y eligiendo Eliminar selección.

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

Tamaños predefinidos de viewport en Google Web Designer

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

Viewport y Capacidad de respuesta

Los “viewports” son los distintos tamaños de pantalla. Para que la galería publicada tenga la máxima audiencia, su visualización tendrá que ser correcta con independencia del dispositivo utilizado para visitar la página web en la que se encuentra. Así pues, no tendrá sentido utilizar tamaños arbitrarios de viewport, será preferible considerar sólo aquellos tamaños que respondan a dimensiones reales de pantallas, en orientación horizontal o vertical. Google Web Designer tiene una lista de dimensiones de viewports por dispositivos. Para verla, hay que activar la “Herramienta de modificación del tamaño del viewport”, con lo que la barra de opciones de herramientas mostrará el desplegable “Tamaños de viewport predeterminados”, que contiene las opciones:

• Tamaños recientes de viewport
• Tamaños de anuncios
• Tamaños de dispositivos: desde 320x480 hasta 800x1280
• Tamaños personalizados.

Un viewport de 320x480 píxeles en posición vertical podrá mostrar una imagen de 320 píxeles de ancho como máximo, y uno de 800x1280 en posición horizontal podrá llegar a mostrar una imagen de 1280 píxeles de ancho. Así pues, una anchura correcta para las imágenes a mostrar en la galería podrá estar comprendida entre 320 y 1280 píxeles, y esos mismos límites pueden aplicarse a la altura. Hay que tener en cuenta que la lista de Google Web Designer contiene 10 viewports, y que todos ellos pueden considerarse en posición horizontal o vertical. Son demasiados escenarios a los que responder, así que será preferible aplicar criterios razonables que permitan utilizar las mismas imágenes en varios viewports distintos y cambiar de tamaño solamente al superar ciertos intervalos. La utilización del Diseño fluido preservará el decoro en la composición de los elementos dentro de cada intervalo.

Capacidad de respuesta

El panel Capacidad de respuesta muestra los Media queries y los Tamaños admitidos. Entre los Media queries, las opciones son:

• Reglas maestras: se aplican al documento completo
• Media rules: muestra los intervalos verticales y horizontales definidos mediante puntos de interrupción, para cada una de las orientaciones.

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

Selección de Diseño fluido

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

Diseño adaptable y fluido. Breakpoints. Tamaño de las imágenes. 

El diseño adaptable en función del tamaño y la orientación de la pantalla no está disponible en AMPHTML, de modo que ese tipo de proyecto no resultará útil a la hora de componer la galería web. Habrá que optar por un proyecto HTML, y si no se conoce de entrada el tamaño de pantalla en que se visualizará la galería, lo adecuado será utilizar una página HTML con diseño adaptable. Google Web Designer proporciona varios métodos para crear páginas HTML que se adaptan a la ventana gráfica. El diseño adaptable se basa en el uso de “media queries”, capaces de reconocer el tamaño de cada ventana gráfica y modificar el estilo del documento para conseguir su adaptación. Las media queries utilizan “breakpoints” (puntos de interrupción), que son las dimensiones límite de la ventana gráfica que determinan el momento en que hay que cambiar la configuración del diseño.

Diseño fluido

La disposición adaptable de los elementos en una página requiere activar el Diseño fluido, lo cual permite especificar su ubicación mediante porcentajes, en lugar de dimensiones fijas. El Diseño fluido debe activarse en la barra de opciones de herramientas cuando está activa la herramienta de selección y la opción Alinear con el contenedor, antes de utilizar cualquiera de las herramientas de alineación.

Breakpoints

Google Web Designer permite definir breakpoints horizontales y verticales, utilizando media queries CSS3 para cambiar las reglas de estilo de la página. También permite crear varias versiones verticales y horizontales de una misma página, cada una con sus breakpoints. Los breakpoints horizontales y verticales conforman una cuadrícula. Con solo dos breakpoints, uno horizontal y otro vertical, se crea cuatro estilos distintos.

Tamaño de las imágenes

Un tamaño de imagen lo suficientemente grande como para permitir una visualización de calidad en pantallas grandes puede producir un funcionamiento lento en dispositivos con pantallas más pequeñas. Las media queries no permiten cambiar de imagen cuando se rebasa un breakpoint, pero permiten ocultar las imágenes grandes en pantallas pequeñas (código CSS “visibility:hidden”) y las pequeñas en pantallas grandes.

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

Opciones del menú Ventana

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

Vistas, herramientas y opciones. Línea de tiempo, paneles y pestañas.

La barra de vistas permite seleccionar si el área de trabajo se muestra en Vista de diseño o en Vista de código. Ambas vistas pueden ser configuradas mediante Editar > Preferencias… La barra de vistas permite también generar una Vista previa y Publicar el proyecto.

Herramientas

La barra de herramientas contiene botones que activan los comandos siguientes:

• Selección (V): seleccionar y mover objetos
• Trazado de movimiento: rutas para el movimiento de objetos animados (no disponible en AMPHTML)
• Girar objetos 3D (W)
• Traslación de objetos 3D (G)
• Elemento (D): crea etiquetas HTML
• Lápiz (P)
• Texto (T)
• Relleno (F)
• Rotar escena 3D (M)
• Mano (H)
• Zoom (Z)
• Modificación del tamaño del viewport (no disponible en AMPHTML).

La herramienta Lápiz contiene un submenú:

• Lápiz (P): curvas de Bézier
• Rectángulo (R)
• Óvalo (O)
• Línea (L).

La herramienta Relleno también tiene submenú:

• Relleno (F)
• Trazo (K)
• Degradado (A).

Opciones de herramientas

La mayor parte de las herramientas tiene asociadas ciertas opciones que determinan el modo en que actúa el comando. La barra de opciones de herramientas permite el ajuste de dichas opciones.

Línea de tiempo

La sección de Línea de tiempo permite definir animaciones, en modo rápido (por escenas) o en modo avanzado (por elementos). Un botón a la derecha de la sección permite alternar entre ambos modos.

Paneles

En principio, Google Web Designer mostrará una columna de paneles a la izquierda, con los siguientes:

• Validador de anuncios
• Eventos / CSS / Dinámico / Capacidad de respuesta.

Y otra columna a la derecha, con los paneles siguientes:

• Color / Texto
• Esquema
• Biblioteca / Propiedades / Componentes.

Cada uno de los paneles puede desplegarse, contraerse o cerrarse mediante el botón situado a la derecha de su encabezado. Cuando el área de trabajo está en Vista de diseño, en el menú superior aparece la opción Ventana, que permite ocultar todos los paneles a la vez o seleccionarlos individualmente para que se muestren u oculten.

Pestañas de documentos

Google Web Designer permite tener varios proyectos abiertos al mismo tiempo. Cuando hay más de un proyecto abierto, el nombre de cada archivo aparece en pestañas que pueden seleccionarse de manera independiente.

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

Captura de la interfaz de Google Web Designer

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

Inicio. Crear archivo. Interfaz.

Tras la generación de infografías arquitectónicas 3D llega el momento de presentarlas. La presentación mediante una galería web presenta ventajas evidentes: la audiencia puede incrementarse hasta ser global, el acto de presentación no tiene por qué ser presencial y, debido al empleo generalizado de smartphones, la visualización puede realizarse en cualquier lugar. La herramienta Google Web Designer permite crear galerías web adaptables en HTML 5, y puede descargarse gratuitamente desde el enlace https://www.google.com/webdesigner/.

Pantalla de inicio

Tras la instalación, la aplicación muestra una pantalla de inicio y procede a actualizar sus plantillas. Las opciones que ofrece la pantalla de inicio son:

• Crear archivo: crear un documento desde cero
• Abrir archivo
• Usar plantilla: usar plantilla de anuncio prediseñada
• Obtener ayuda: ir al centro de ayuda de Google Web Designer.

Crear archivo

Al pulsar en Crear archivo, la aplicación muestra una pantalla que permite seleccionar si se desea crear un anuncio u otro tipo de proyecto. Entre los anuncios, las opciones son:

• Banner
• Banner AMP HTML: Accelerated Mobile Pages, para dispositivos móviles
• Expandible
• Intersticial.

Y entre los otros tipos, las opciones son:

• HTML
• HTML con páginas
• CSS
• Javascript
• XML.

En todas las opciones se debe indicar un nombre para el proyecto y una ubicación para el archivo. Además, dependiendo del tipo de proyecto, habrá que cumplimentar datos adicionales. Una vez consignados los datos requeridos, el botón Aceptar hará que se muestre la interfaz.

Interfaz

La interfaz de Google Web Designer presenta un área central de trabajo rodeada de una serie de elementos:

• la barra vertical de herramientas, en el borde izquierdo de la pantalla
• la barra horizontal de opciones de herramientas, en la parte superior, justo encima del área de trabajo
• la línea de tiempo, en la parte inferior, debajo del área de trabajo
• la columna de paneles, en el borde derecho de la pantalla
• la barra horizontal de vistas, en la esquina superior derecha.