¿Qué es Google Web Designer?
Google Web Designer es una aplicación web avanzada que permite diseñar y crear anuncios HTML5 y otro contenido web mediante una interfaz de código y visual integrada. Gracias a la vista de diseño de Google Web Designer, se puede crear contenido mediante herramientas de dibujo, texto y objetos en 3D. También se puede animar los objetos y los eventos en un cronograma. Una vez creado el contenido, Google Web Designer produce elementos claros y legibles por los usuarios en HTML5, CSS3 y JavaScript. Su principal objetivo es crear Ads: anuncios web que pueden ser banners, audio, video y animación.
Proporciona una biblioteca de componentes que permiten añadir galerías de imágenes, vídeos, mapas y otros tipos de funciones en los sitios web y anuncios.
El código de Google Web Designer permite crear archivos CSS, JavaScript y XML, y utiliza las funciones de destacar la sintaxis y autocompletar el código para que resulte más fácil escribirlo y reducir el número de errores.
¿En qué sistemas operativos se puede instalar?
-Windows 7 y 8
-Mac OS X 10.7. x o posterior
-Linux: (Ubuntu 12.04+, Debian 7++, OpenSuSE 12.2++, Fedora, Linux 17)
¿Como universitarios qué podemos hacer con esta herramienta?
Hasta el momento, y como comunicóloga, he encontrado las siguientes posibilidades:
-Animaciones 2D: ya sea para montar en tu página web o para crear.
-Banners publicitarios del tamaño que sea: para tu página web personal o para alguna corporativa.
-Insertar modelos 3D: Se pueden importar modelos en 3D y acomodarlo utilizando las diferentes vistas que tiene.
-Interactivos: Aunque la creación de GWD está enfocada en ads, se pueden crear interactivos, botones que te llevan a páginas, utilizando la líneas de tiempo.
Pero, ¿cómo funciona?
Conocimientos básicos:
Una vez descargado el programa, abrimos el programa y damos clic en Archivo → Archivo Nuevo y ajustamos las propiedades del proyecto de acuerdo a lo que necesitemos.
Conociendo la interfaz:
Google Web Designer tiene una gran área central para la compilación de sus proyectos y la edición de código. El área central está rodeada por una barra de herramientas, una barra de opciones de herramienta, una cronología y un conjunto de paneles que le permiten realizar varias tareas, como modificar los elementos y añadir componentes o eventos.
En el centro de la interfaz de Google Web Designer se encuentra el espacio de trabajo. En el modo de diseño, el área de trabajo muestra las imágenes, el texto y otros elementos visualmente, de la misma forma que se mostrarán en el navegador. En la vista de código, el área de trabajo muestra su código con la codificación por color y el formato adecuados.
La barra de vista le permite elegir entre el modo Diseño y el modo Código, así como obtener una vista previa de su HTML y publicar su anuncio. Además, puede cambiar el nivel de zoom y la página en la que está trabajando.
Barra de herramientas:
Opciones de herramientas
La barra de opciones de herramienta muestra las opciones de la herramienta seleccionada. Por ejemplo, cuando se selecciona la herramienta de texto, la barra de opciones de herramientas muestra las opciones de fuente y diseño de texto.
Cronograma:
La cronología le permite crear animaciones con fotogramas. En el modo Rápido, la animación se crea escena a escena; en el modo Avanzado puede animar cada elemento por separado.
Modo rápido:
Modo avanzado:
Paneles:
La sección de paneles de la interfaz contiene el color, las propiedades, los componentes, los eventos y los paneles CSS. Los paneles pueden minimizarse o arrastrarse a una posición diferente en la sección de paneles.
¿Qué son los eventos y las etiquetas? ¿Cómo funcionan?
La pista de eventos es el lugar donde puede conectar las animaciones del cronograma a los eventos. Puede tanto activar eventos en fotogramas específicos del cronograma como controlar la animación mediante eventos.
Marcadores de evento
Los marcadores de evento activan los eventos en la pista de eventos. Cuando la marca de reproducción pasa por el fotograma del evento, este se activa. Al igual que los fotogramas de animaciones, los eventos pueden moverse arrastrándolos a una nueva ubicación.
-Añadir un marcador de eventos a la pista de eventos, seleccionar fotograma → insertar evento.
-Añadir un evento a un marcador de eventos específico: Se abrirá el cuadro de diálogo de eventos en la sección Acción → Eventos.
-Suprimir un evento de la pista de eventos: clic derecho eliminar.
Cambiar el nombre de un evento en la pista de eventos. Clic derecho → editar nombre de evento
Etiquetas de evento
Las etiquetas de evento se denominan “ubicaciones” en el cronograma. Si desea utilizar un evento para enviar la marca de reproducción a un fotograma específico, deberá proporcionar una etiqueta a dicho fotograma.
-Añadir una etiqueta de evento a la pista de eventos, haga clic en el punto del cronograma en el que desee añadir la etiqueta y después en el icono Añadir etiqueta de la capa Eventos.
-Para suprimir una etiqueta de la pista de eventos, haga clic con el botón secundario en la etiqueta que desee suprimir y seleccione Suprimir etiqueta en el menú emergente.
-Para cambiar el nombre de una etiqueta en la pista de eventos, haga clic con el botón secundario en la etiqueta cuyo nombre desea cambiar y seleccione Editar etiqueta… en el menú emergente.
Componentes:
Los componentes son módulos compilados previamente que permiten añadir funciones específicas a sus anuncios.
Los componentes solo están disponibles como parte de un anuncio. Para crear un archivo HTML que pueda utilizar componentes, cree un anuncio intersticial y seleccione “Genérico” en el menú desplegable Entorno del cuadro de diálogo de nuevo archivo.
Para añadir un componente a su proyecto, abra el panel de componentes y arrastre el componente a la fase, donde puede ubicarlo como cualquier otro elemento. Cada componente tiene propiedades específicas y puede controlarse mediante eventos en el cuadro de diálogo Eventos.
Páginas
Las páginas son una construcción que Google Web Designer utiliza para mostrar varias escenas en un documento HTML. Se usan habitualmente en anuncios HTML, donde representan una vista de una sola pantalla del anuncio. Para los anuncios de banner simples, solo hace falta una página. En el caso de los anuncios expandibles, una página se utiliza para el banner y otra para la vista desplegada.
Fuentes: