Primeros pasos con Google Web Designer

A finales del pasado año Google lanzó una nueva herramienta con código abierto y de manera gratuita para sitios desarrollados con HTML 5, «Google Web Designer«.

Esta herramienta proporciona una apariencia más dinámica a las webs gracias a la fuerza visual que se consigue mediante animaciones, de una manera bastante sencilla, y a la vez compatible con cualquier dispositivo actual.

La aplicación en su versión Beta está disponible para descarga en este enlace: www.google.com/webdesigner

Un breve ejemplo para comprobar su sencillez

Desde el menú «Archivo/Nuevo archivo» podemos seleccionar el tipo de trabajo que queremos, un «Archivo en blanco» y trabajar con una hoja de html, css, javascript, xml para desarrolladores más avanzados o trabajar con las posibilidades más visuales y accesibles que ofrece este programa desde la opción «Anuncios de Google«.

captura02
Aquí nos ofrecen tres tipos de anuncio:

1. Banner: anuncio sencillo que se ajusta a unas medidas.
2. Desplegable: anuncios que se depliegan cuando se hace clic sobre ellos.
– Evento AdMob: se ajustan a toda la pantalla.
– Evento DoubleClick: se fijan en la zona superior y requieren desplazamiento.
3. Intersticial: anuncios que se presentan en determinadas transiciones de página, carga de aplicaciones o eventos.

Escogemos por ejemplo el «banner» y fijamos las medidas que queremos.

Una vez fijadas las medidas el espacio de trabajo, se podrá añadir elementos o imágenes, arrastrándolas directamente desde el escritorio sobre el área de trabajo, creando etiquetas individuales sobre las que editar sus propiedades.

El modo de animación nos dejará trabajar añadiendo escena «Modo Rápido» y cambiando elementos (rotar, mover…) o «Modo Avanzado» modificando elementos individuales añadiendo fotogramas clave y editando sus propiedades (tiempo y velocidad).

Tenemos las opciones de «vista previa» en diferentes exploradores y «publicar» donde nos exportará los archivos en un zip comprimido para ubicarlos en nuestro código o página correspondiente.

Haz clic en este enlace para ver nuestro ejemplo.

Componentes

De particular interés, en el panel lateral aparecen los «componentes» que son módulos con funciones específicas para los anuncio. Para usar un componente deberás crear un anuncio intersticial y seleccionar en el menú desplegable de entorno: «Genérico».

captura05

captura03

Una breve descripción de los componentes:

  • Galería de 360°: conjunto de varias imágenes para mostrar un objeto la sensación de rotación.
  • Galería giratoria: galería de imágenes que giran como un carrusel creaando una sensación de 3D.
  • Galería de imágenes deslizables: galería de imágenes sencilla depslazable hacia los lados.
  • iframe(marco flotante): para cargar elementos de URL externas, incluidas páginas HTML.
  • Mapa: permite añadir un mapa configurable y realizar búsquedas.
  • Área para presionar: capa superpuesta sobre cualquier elemento de la pantalla que lleva a una acción.
  • Vídeo: para colocar un vídeo en un anuncio.
  • YouTube: colocar un vídeo alojado en youtube en un anuncio.

 

Os recomendamos el soporte de GOOGLE que nos ofrece un excelente y detallado tutorial online en este enlace. (disponible en español)

Esperamos que esta información haya sido de tu interés.

5 comentarios
  • avatar
    Max Santana

    22/07/2014, 00:33

    Hola un cordial saludo, me encanta su post y de echo ya cree muchos anuncios pero, no se comu subirlos a la red
    me podrian ayudar, donde pudeo verlos o como le hago para que lo pueda subir

    gracias!