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!

    • avatar
      splink

      22/07/2014, 09:21

      Hola, si quieres ver tu anuncio en la red, todo depende del tipo seleccionado, si es una página completa, debes coger el html y carpetas que te genera y subirlo donde tengas alojada tu web. Si es un banner o una animación individual, deberás insertar ese código en la página donde quieras publicarlo, previamente habrás dado el tamaño correspondiente y las acciones que deseas. Es conveniente algunos conocimientos de código. En el caso de ser un anuncio intersticial (y querer monetizarlo) para publicarlo debes seguir los pasos y usar la plataforma de DoubleClick Studio en el caso de DoubleClick, también puedes escoger AdMob o Genérico. Revisa este enlace: https://support.google.com/webdesigner/answer/3250387?hl=es&ref_topic=3178447
      Espero haberte ayudado. ¡Un saludo!

  • avatar
    Isidora

    18/12/2014, 14:37

    Hola,
    te queria consultar si tú sabes cómo se configura una navegación por galería de google web designer.
    Muchas gracias y eres genial!

  • avatar
    Graham @abeari

    11/04/2015, 15:16

    Buenas! pues muy buena reseña, aún hay poca información al respecto deberían ya armarse el curso web porque el tutorial de google es un poco frío y no muy práctico.

    Saludos!

  • avatar
    Miguel Alvarez

    06/11/2017, 03:25

    genial tu aporte :), gracias por compartir.