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.

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