ÍNDICE1. Definición: ¿Qué es Google Web Designer?

2. Utilidad: ¿Para qué sirve?

3. Crear un banner: Pasos a seguir.

4. Conclusión

1. Definición

• Aplicación gratuita de Google que permite la creación de contenido animado en HTML5.

• Publicado por Google el 30 de septiembre de 2013.

• Permite la creación de elementos para todos los dispositivos, tanto ordenadores, como móviles y tablets.

GOOGLE WEB DESIGNER

Creación de banners.

Creación de contenido en 3D.

Creación de interstitials.

Creación de desplegables.

Creación de documentos HTML5.

Creación de documentos CSS3.

Creación de documentos JavaScript.

Creación de documentos XML.

2. UtilidadGoogle web Designer tiene las siguientes utilidades:

3. Crear un bannerA continuación procederemos a la creación de un banner sencillo con esta aplicación de Google.

Será un proceso paso a paso en el que aprenderemos a hacer animaciones, introducir textos, imágenes, etc.

También, aprenderemos a como insertar el banner en nuestra web de manera óptima.

3. Crear un banner

• Vamos a Archivo > Nuevo.• Seleccionamos Banner.

3. Crear un banner

• En “Entorno” seleccionamos la opción que queramos según nuestras preferencias. En nuestro caso, utilizaremos la opción AdMob.

3. Crear un banner

• En el apartado Dimensiones seleccionamos el formato deseado. En nuestro caso usaremos 468x60.

BRIEFING

9. Público Potencial: 10. Público Objetivo:

3. Crear un banner

• A continuación elegiremos el nombre y la ubicación donde vamos a guardar el proyecto.

3. Crear un banner

• Por último tendremos que escoger el modo de animación.

3. Crear un banner

• Si elegimos el modo de animación avanzado podremos configurar nuestras animaciones mediante el uso de fotogramas claves en una línea de tiempo.

• Si elegimos el modo de animación rápido, podremos añadir nuestras animaciones mediante diapositivas.

Modo de animación

3. Crear un banner• Lo primero que haremos para configurar el banner será insertar una imagen. Para ello simplemente la arrastramos a la plantilla del programa.

3. Crear un banner

• Para redimensionar un elemento (imagen de la nave) deberemos seleccionarlo, activar la casilla Control de transformación y estirar la imagen. Si mantenemos pulsado el botón “shift” redimensionaremos la imagen de manera proporcional.

3. Crear un banner

• Después hay que insertar un área para tocar (una zona activa que al hacer clic te redirige a alguna URL externa). Para ello vamos a la pestaña Componentes y arrastramos el área para tocar a nuestro proyecto.

3. Crear un banner• Ahora, crearemos el evento para que cuando se haga clic en el área nos redirija. Para ello, nos vamos a Eventos y le damos al símbolo de “+”.

• En la ventana que saldrá seleccionaremos “tapearea_1”(1) >ToqueClic(2) >”Environment(AdMob)”(3)> Salir.(4). Por último, rellenaremos el id y la url a la que se va a redirigir.(5)

1

2

3

4

5

3. Crear un banner

• A continuación configuramos el color de nuestro banner. Para ello, seleccionamos el área para tocar y usamos la herramienta de relleno en donde elegir el color que necesitemos.

• Para poner el logo por encima lo seleccionamos(1, 2) y le damos a la herramienta de poner adelante (3).

1

2

3

3. Crear un banner

• Para introducir un texto le damos a la herramienta de texto(1), lo colocamos en el banner (2) y seleccionamos la fuente y tamaño(3).

1

2

3

3. Crear un banner

• Ahora crearemos nuestra primera transición. Para ello introducimos en nuestro ejemplo una imagen nueva (1) y después pulsaremos en “+”(2) para crearla.

1

2

3. Crear un banner

• En nuestra segunda transición, desplazaremos la imagen dentro del banner(1) hacia un lado para lograr un efecto de movimiento.

• Le daremos a “+” para crear otra transición más (2).• Ya podemos previsualizar el resultado

pulsando en reproducir(3) o pulsamos en vista previa para verla desde el navegador(4).

1

2

3

4

3. Crear un banner

• Cuando ya hayamos finalizado el banner pulsamos a Archivo > Guardar para guardar el proyecto y después haremos clic en Archivo > Publicar.

• Seguidamente rellenamos los datos que nos pide el programa y le daremos finalmente a Publicar.

3. Crear un banner

• Por último incrustaremos el banner en nuestra página HTML.

• Para hacerlo usaremos la etiqueta iframe. Pondremos que no queremos scrolling y escribiremos las dimensiones del banner mediante los atributos width y height.

• Una aplicación con muchas posibilidades dinámicas y opciones variadas a la hora de realizar cualquier tipo de elemento.

• Se pueden crear documentos de varios lenguajes de programación (Javascript, XML, HTML5, CSS3).

• Una aplicación fácil, sencilla y muy asequible para personas sin un conocimiento previo de diseño.

• Una versión que espera muchas mejoras e implentaciones en sus funcionalidades.

• La aplicación nos ofrece muchas características de edición a la hora de crear nuestros elementos.

4. Conclusión

d

Agencia La Nave ¡Los astronautas de tu comunicación!

(+34) 902 002 902 / (+34) 865 64 68 28

> NIKO GONZÁLEZ

668896836@nikoman_1980

marketing@agencialanave.com

www.agencialanave.com