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.

Homestyler (I)

Easyhome Homestyler (I)

Floor Planner. Construcción de la planta.

Easyhome Homestyler es una aplicación web que permite el diseño tridimensional de viviendas on-line. Para acceder al servicio hay que visitar https://www.homestyler.com/. La página ofrece también una aplicación para dispositivos móviles Apple y se prevé la incorporación de una app para Google Play.

Floor Planner

El botón Launch Floor Planner da acceso a una página desde la que se puede optar por:

• crear un nuevo diseño
• ver ejemplos de proyectos
• acceder a plantillas de diseño (inactivo por el momento)
• acceder a la carpeta de diseños creados (requiere el registro del usuario)
• acceder a la página de instrucciones, que contiene videotutoriales destinados a describir la interfaz de usuario y mostrar cómo se crea una planta, cómo se añaden piezas de mobiliario, cómo se decoran los paramentos y cómo se obtiene una lista de los productos empleados en el diseño.

Construcción de la planta de la vivienda

El botón Create New Design permite el acceso a la pantalla de composición. En el menú superior, el botón Draw Room permitirá crear habitaciones con diversas formas. Una vez seleccionada una forma, habrá que desplazar el cursor hasta la posición adecuada y hacer clic para crear la habitación. Para dejar de crear habitaciones similares habrá que pulsar la tecla Esc. Cuando se crea una habitación se muestran sus dimensiones interiores y su superficie útil. Cuando se pulsa una de las paredes, el relleno gris pasa a mostrarse de color azul celeste y entonces es posible modificar su posición, adjudicando un nuevo valor para la dimensión que se muestra editable, y su espesor, consignando un nuevo valor en el campo Thickness, en el borde inferior de la pantalla. Todas las dimensiones deben ser introducidas en unidades coherentes con lo que se indica en la esquina inferior izquierda de la pantalla (m, cm, mm ó ft).

Guardar el diseño

Sólo se permite guardar diseños a usuarios registrados. Cuando se pulsa el botón Save, aparece la ventana Save Design, en la que se puede asignar un título, una descripción y decidir si el proyecto va a ser público o privado. Después, el botón Save guardará el modelo.