Nueva herramienta de Google para diseñar sitios y avisos en HTML5

Posted on

web-designerA traves de Fayerwayer nos enteramos de que Google ha sacado una nueva herramienta para diseñar sitios y avisos en HTML5  (a parte de Google Swiffy que convierte archivos SWF en HTML5) llamada simplemente Web Designer y apunta al sector profesional ya que se requiere conocimientos previos de HTML y CSS como mínimo.

Esta disponible desde ayer 30 de Septiembre y se encuentra en su versión beta (también en español) para Mac y Windows desde aquí.

La herramienta fue desarrollada pensando inicialmente en los avisadores, de forma que pudieran crear publicidad en HTML5 para móviles y equipos de escritorio. Sin embargo, también es posible crear sitios interactivos y animaciones para otros propósitos. Google afirma que planea expandir las características disponibles para otros contenidos en el futuro.

La herramienta es muy visual, aunque se puede ingresar al código JavaScript y CSS para ajustar diferentes aspectos directamente en un editor integrado. Se puede hacer vista previa de los cambios en cualquier navegador instalado en el equipo. Web Designer también incluye una herramienta de lápiz para dibujar, además de una línea de tiempo para crear animaciones. También permite crear contenido 3D con CSS3 e importar componentes para galerías, mapas e insertar videos de YouTube.

Como es gratis  puede darle ventaja sobre otras alternativas como Adobe Muse o Reflow.

A continuación les dejo un extenso recorrido por las principales características de la aplicación.

¿Qué es Google Web Designer?

Google Web Designer es una aplicación web avanzada creada con HTML5 que le permite diseñar y compilar anuncios HTML5 y otros tipos de contenido web mediante una interfaz visual y de código integrada. Con la vista de diseño de Google Web Designer puede crear contenido con herramientas de dibujo, texto y objetos en 3D, y puede, además, animar objetos en una cronología. Una vez que haya terminado de crear su contenido, Google Web Designer genera archivos HTML5, CSS3 y JavaScript limpios y legibles.

Al crear creatividades publicitarias con Google Web Designer, puede usar una biblioteca de componentes que le permiten añadir galerías de imágenes, vídeos, herramientas de redes de anuncios y más.

La vista de código de Google Web Designer le permite crear archivos CSS, JavaScript y XML, con resaltado de sintaxis y autocompletado de código para que su código sea más fácil de escribir, con menos errores.

La interfaz de Web Designer

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.

1. Panel de herramientas 2. Panel de opciones de herramienta 3. Cronología  4. Color, propiedades, componentes, eventos y paneles CSS

El espacio de trabajo

En el centro de la interfaz de Google Web Designer se encuentra el espacio de trabajo. En el modo Diseño, el área de trabajo muestra sus imágenes, el texto y otros elementos de forma visual, tal como se mostrarán y aparecerán en un navegador. En la vista Código el área de trabajo muestra su código con la codificación por color y el formato adecuados.

Barra de vista

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.

Herramientas

La barra de herramientas contiene herramientas para crear y manipular elementos en la fase y en el espacio de trabajo. Estas incluyen herramientas para crear texto y elementos simples de página, herramientas de selección de color y herramientas 3D.

Herramienta Descripción

Herramienta de selección
Seleccione y mueva objetos en el espacio de trabajo.

Herramienta para rotar objetos en 3D
Rote objetos en tres dimensiones.

Herramienta para trasladar objetos en 3D
Mueva objetos en un espacio tridimensional.

Herramienta de etiqueta
Cree etiquetas HTML de cualquier tipo haciendo clic y arrastrando a la fase.

Herramienta de texto
Añadir texto

Herramienta de forma
Cree formas elementales.

Herramienta de cubo de pintura
Modifique el color de los elementos de su proyecto.

Herramienta de frasco de tinta
Modifique el color de la línea y el trazo de los elementos de su proyecto.

Herramienta de rotación de fase en 3D
Cambie la vista en 3D del proyecto.

Herramienta de mano
Cambie la vista del área de trabajo.

Herramienta de zoom
Acerque y aleje su creatividad.

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 herramienta muestra las opciones de fuente y diseño de texto.

Cronología

Modo Rápido
Modo Avanzado

La cronología le permite crear animaciones con keyframes. En el modo Rápido, la animación se crea escena a escena; en el modo Avanzado puede animar cada elemento por separado.

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.

Cómo crear un nuevo documento

Una vez que haya descargado Google Web Designer, puede empezar a crear nuevos documentos seleccionado Nuevo archivo en el menú Archivo.

En el diálogo de nuevo archivo, seleccione el tipo de anuncio o archivo que desea crear.

Para crear anuncios, haga lo siguiente:

  1. Seleccione el entorno de anuncio donde desea que se ejecute. Google Web Designer admite entornos de AdMob y DoubleClick.
  2. Asigne un título al anuncio (opcional). Este aparece en el elemento de título en su anuncio o en el documento HTML.
  3. Configure las dimensiones para el anuncio. Los tamaños comunes se enumeran en la lista desplegable. Si desea usar un tamaño que no se encuentra en la lista, seleccione Personalizado en el menú desplegable e introduzca el ancho y la altura de forma manual.
  4. Dé un nombre al anuncio (obligatorio). Este nombre también se usará como el nombre del archivo del anuncio.
  5. Elija dónde desea guardar el archivo.  Introduzca la ruta a la ubicación en la que desea guardar el archivo o haga clic en el icono de búsqueda para navegar a una ubicación correcta.
  6. Seleccione el modo de animación que desea usar. El modo Rápido le permite animar su anuncio escena a escena, mientras que con el modo Avanzado puede animar elementos individualmente, cada uno con su propia cronología. Si selecciona el modo Rápido, puede optar por cambiar al modo Avanzado más adelante, pero no puede pasar del modo Avanzado al modo Rápido.

Para HTML, CSS, JavaScript o XML, realice lo siguiente:

  1. Seleccione el tipo de archivo que desea crear. Google Web Designer se puede utilizar para crear archivos HTML, CSS, JavaScript y XML.
  2. Asigne un título al documento (solo HTML). Este aparece en la etiqueta del título en el HTML.
  3. Asigne un nombre al documento (obligatorio). Este nombre también se usará como nombre del archivo del anuncio.
  4. Seleccione dónde desea guardar el archivo. Introduzca la ruta a la ubicación donde desea guardar el archivo o haga clic en el icono de búsqueda para navegar a una ubicación correcta.

Configurar el entorno

Cómo cambiar la vista

El menú Ver de Google Web Designer permite elegir cómo ver la fase y los objetos.

Cómo ver la cuadrícula en 3D

Si selecciona Mostrar cuadrícula en 3D en el menú Ver, la vista en 3D muestra la cuadrícula del plano situado más paralelamente con respecto a su vista. El color de la cuadrícula refleja el color de la brújula 3D. Las líneas de la cuadrícula están a 50 píxeles de distancia y puede encajar su trabajo en ellas.

Cómo ver las reglas

Cuando la opción Mostrar reglas está seleccionada en el menú Ver, se puede ver la regla horizontal y la vertical. Las reglas pueden ayudarle a colocar con precisión elementos en los anuncios y documentos HTML5.

Cómo ver las etiquetas y los contornos de los elementos

Si en el menú Ver, está seleccionado Contornos > Solo contornos, todos los elementos de la fase que no sean el elemento seleccionado tendrán un borde discontinuo visible.  Cuando Ver > Contornos > Contornos con etiquetas está seleccionado, cada elemento tendrá también una etiqueta con su tipo e ID. En diseños complejos, puede ser útil seleccionar Ver > Contornos > desactivados para reducir la confusión visual.

Ajuste

El ajuste permite colocar los elementos a lo largo de las líneas horizontales o verticales. Puede optar por ajustar atendiendo a la cuadrícula, a los límites de otros objetos o a la alineación con otros objetos. Para habilitar el ajuste, en el menú Ver, seleccione Ajustar. A continuación, en el submenú Ajustar a, seleccione los elementos a los que desea ajustar.

Cómo seleccionar y mover elementos

La herramienta de selección  le permite seleccionar elementos al hacer clic en ellos o al colocar una marquesina de selección rectangular alrededor de ellos y arrastrarla. Una vez seleccionados, los elementos se pueden mover o alinear con otros objetos.

Para mover un objeto o varios en la fase:

  1. Haga clic en la herramienta de selección de la barra de herramientas.
  2. Seleccione un objeto haciendo clic en él o dibujando una marquesina de selección a su alrededor.
  3. Opcionalmente, haga clic en otro objeto pulsando la tecla de mayúsculas para añadirlo a la selección.
  4. Haga clic en los objetos seleccionados y arrástrelos.

Para mover uno o varios objetos sobre la fase, realice lo siguiente:

  1. Haga clic en la herramienta de selección de la barra de herramientas.
  2. Seleccione uno o más objetos haciendo clic en ellos o dibujando una marquesina de selección a su alrededor.
  3. Opcionalmente, haga clic en otro objeto pulsando la tecla de mayúsculas para añadirlo a la selección.
  4. Mueva el objeto seleccionado con las teclas de flecha. Cada vez que pulsa la tecla, el objeto se mueve un píxel. Use la tecla de mayúsculas con las teclas de flecha para mover la selección 10 píxeles.
Los objetos que están bloqueados en la sección de capas de la cronología de la animación no se pueden seleccionar.

Cuando la casilla de verificación Control de transformación del panel de opciones de herramientas está seleccionada, la herramienta de selección también le permite cambiar el tamaño y la rotación de sus selecciones.

También puede alinear y distribuir varios objetos en la fase con los controles opcionales del panel de opciones de herramientas.

Controles Descripción

Alinear arriba
Alinea los elementos de su selección con el elemento ubicado en la parte más superior.Cuando se selecciona Alinear con la fase, se alinean los elementos con la parte superior de la fase.

Alinear centro vertical
Alinea los centros verticales de los elementos de su selección con el centro vertical de la selección.Cuando se selecciona Alinear con la fase, se alinean los elementos con el centro vertical de la fase.

Alinear abajo
Alinea los elementos de su selección con el elemento ubicado en la parte más inferior.Cuando se selecciona Alinear con la fase, se alinean los elementos con la parte inferior de la fase.

Alinear a la izquierda
Alinea los elementos de su selección con el elemento ubicado más a la izquierda.Cuando se selecciona Alinear con la fase, se alinean los elementos con el borde izquierdo de la fase.

Alinear centro horizontal
Alinea los centros horizontales de los elementos de su selección con el centro horizontal de la selección.Cuando se selecciona Alinear con la fase, se alinean los elementos con el centro horizontal de la fase.

Alinear a la derecha
Alinea los elementos de su selección con el elemento ubicado más a la derecha.Cuando se selecciona Alinear con la fase, se alinean los elementos con el borde derecho de la fase.

Distribuir parte superior
Separa los bordes superiores de los elementos seleccionados de manera uniforme dentro del rectángulo de selección.Cuando se selecciona Alinear con la fase, se separan los bordes superiores de los elementos de manera uniforme dentro de los bordes de la fase.

Distribuir centro vertical
Separa los centros verticales de los elementos seleccionados de manera uniforme dentro del rectángulo de selección.Cuando se selecciona Alinear con la fase, se separan los centros verticales de los elementos de manera uniforme dentro de los bordes de la fase.

Distribuir parte inferior
Separa los bordes inferiores de los elementos seleccionados de manera uniforme dentro del rectángulo de selección.Cuando se selecciona Alinear con la fase, se separan los bordes inferiores de los elementos de manera uniforme dentro de los bordes de la fase.

Distribuir a la izquierda
Separa los bordes izquierdos de los elementos seleccionados de manera uniforme dentro del rectángulo de selección.Cuando se selecciona Alinear con la fase, se separan los bordes izquierdos de los elementos de manera uniforme dentro de los bordes de la fase.

Distribuir centro horizontal
Separa los centros horizontales de los elementos seleccionados de manera uniforme dentro del rectángulo de selección.Cuando se selecciona Alinear con la fase, se separan los centros horizontales de los elementos de manera uniforme dentro de los bordes de la fase.

Distribuir a la derecha
Separa los bordes derechos de los elementos seleccionados de manera uniforme dentro del rectángulo de selección.Cuando se selecciona Alinear con la fase, se separan los bordes derechos de los elementos de manera uniforme dentro de los bordes de la fase.

Separación uniforme vertical
Mueve los elementos seleccionados para que el espacio vertical entre ellos sea igual.Cuando se selecciona Alinear con la fase, se mueven los elementos seleccionados para que el espacio entre ellos sea el mismo y encajen en toda la fase.

Usa una separación negativa si el total de los tamaños de los elementos seleccionados es mayor que el tamaño vertical de la selección.

Separación uniforme horizontal
Mueve los elementos seleccionados para que el espacio horizontal entre ellos sea el mismo.

Cuando se selecciona Alinear con la fase, se mueven los elementos seleccionados para que el espacio entre ellos sea el mismo y encajen en toda la fase.

Usa una separación negativa si el total de los tamaños de los elementos seleccionados es mayor que el tamaño horizontal de la selección.

Cómo cambiar las capas

Cada elemento de Google Web Designer tiene su propio nivel dentro de la pila formada por todos los elementos. Los elementos más cercanos a la parte superior de la pila cubren los siguientes elementos. Para cambiar la capa de cada elemento, puede seleccionar el elemento con la herramienta de selección y utilizar los siguientes botones de capa:

Botón de capa Descripción

Mover hacia adelante
Mueve el elemento seleccionado hacia adelante una posición.

Mover hacia atrás
Mueve el elemento seleccionado hacia atrás una posición.

Mover al frente
Mueve el elemento seleccionado hacia el frente.

Mover hacia la parte posterior
Mueve el elemento seleccionado hacia la parte posterior. 

Fundamentos básicos de las páginas

En Google Web Designer, los anuncios se crean usando “páginas”. Las páginas representan una vista en una sola pantalla del anuncio. Un anuncio puede contener muchas páginas, pero solo se pueden ver de una en una. En el caso más simple, como un anuncio de banner, el anuncio tiene una sola página. En un anuncio desplegable sencillo, se usa una página para el banner y otra para la vista desplegada.

Un anuncio más complejo puede constar de muchas más páginas. Por ejemplo, un anuncio puede tener una primera página con varios botones que permiten al usuario navegar por diferentes experiencias (una página de vídeo, una página de cupones, etc.).

Las páginas se pueden añadir, duplicar, eliminar y establecerse como página principal en el menú emergente de páginas que se encuentra en la parte inferior de la fase.

Para añadir una nueva página a su anuncio, haga lo siguiente:

  1. Haga clic en el indicador de página  en la parte inferior de la fase.
  2. Si hay varios tamaños de página en su anuncio, seleccione una página que tenga el mismo tamaño que la que usted desea crear.
  3. En el menú emergente de páginas, haga clic en el botón para añadir páginas .
  4. Dé un nombre a su nueva página en el panel de propiedades.

Para duplicar una página en su anuncio, haga lo siguiente:

  1. Haga clic en el indicador de página  en la parte inferior de la fase.
  2. Seleccione la página que desea duplicar.
  3. En el menú emergente de páginas, haga clic en el botón para duplicar páginas . De esta forma, se creará una copia de la página actual, incluidos los elementos, los componentes y las animaciones.
  4. Dé un nombre a su nueva página en el panel de propiedades.

Para eliminar una página de su anuncio, realice lo siguiente:

  1. Haga clic en el indicador de página en la parte inferior de la fase.
  2. Seleccione la página que desea eliminar.
  3. En el menú emergente de páginas, haga clic en botón para eliminar páginas . De esta manera, se elimina la página actual.

Para establecer una página como la página principal, haga lo siguiente:

  1. Haga clic en el indicador de página en la parte inferior de la fase.
  2. En el menú emergente de páginas, haga clic con el botón secundario en la página que desea establecer como página principal.
  3. Seleccione Página principal en el menú emergente. La página principal está marcada con el icono de página principal .

Páginas y eventos

Puede controlar el modo en el que los usuarios navegan por las páginas mediante eventos.  Por ejemplo, puede usar un componente  Área para presionar para enviar una acción Ir a la página a una página objetivo o puede utilizar un cambio de orientación entre el modo de paisaje y el modo de retrato para cambiar a un formato apropiado.

Las páginas también pueden enviar los siguientes eventos a otras páginas o a entornos de anuncio:

Evento Descripción
Girar a orientación de retrato Envía un evento cuando un dispositivo móvil gira de la orientación de paisaje a la de retrato.
Girar a orientación de paisaje Envía un evento cuando un dispositivo móvil gira de una orientación de retrato a una de paisaje.
Agitar Envía un evento cuando el dispositivo móvil detecta que se le está agitando.
Carga completa Envía un evento cuando el anuncio se carga por completo.

Cómo añadir etiquetas

Puede añadir etiquetas de cualquier tipo de documento con la herramienta de etiqueta. La herramienta de etiqueta le permite hacer clic y arrastrar para ubicar la etiqueta donde desee. También puede editar la ubicación de las etiquetas en la vista Código. Las etiquetas de división son las etiquetas predeterminadas de la herramienta de etiqueta y pueden usarse como etiquetas superiores para otros elementos.

Para crear una etiqueta, haga lo siguiente:

  1. Haga clic en la herramienta de etiqueta  del panel de herramientas.
  2. Seleccione el tipo de etiqueta que desea en el panel de opciones de herramienta.
    • Para elegir una etiqueta de división, haga clic en el icono de elemento de división.
    • Para elegir una etiqueta de imagen, haga clic en el icono de elemento de imagen.
    • Para elegir una etiqueta de vídeo, haga clic en el icono de elemento de vídeo.
    • Para elegir cualquier otra etiqueta, haga clic en el icono de etiqueta personalizada y escriba el nombre del elemento que desea crear en el campo de la etiqueta. El campo autocompleta las etiquetas HTML5.
  3. Arrastre la herramienta al área de trabajo para crear la etiqueta. Mientras la arrastra, puede ver el tamaño y las dimensiones del área de división.

Para anidar una etiqueta dentro de otra etiqueta, haga lo siguiente:

  1. Cree una etiqueta que desee que funcione como una etiqueta superior, tal como una etiqueta de división.
  2. Seleccione la herramienta Selección  en el panel de herramientas.
  3. Haga doble clic en la etiqueta superior deseada. La etiqueta superior tendrá un contorno rojo y ya no podrá seleccionarse.
  4. Cree una nueva etiqueta. La nueva etiqueta será una etiqueta secundaria de la etiqueta superior que ha creado. A continuación, puede hacer doble clic en la nueva etiqueta si desea anidar más sus elementos.
  5. Para regresar al nivel de página, haga doble clic en la fase.  Utilice la ruta de navegación que se encuentra sobre la cronología  para moverse a un nivel específico de divisiones anidadas múltiples.

Cómo dibujar con la herramienta de lápiz

La herramienta de lápiz  permite dibujar líneas y curvas creando puntos de anclaje que se conectan mediante líneas rectas o curvas. También se pueden crear rutas cerradas para crear formas de gran complejidad. Junto con la Dibujar líneas rectas

Para dibujar líneas rectas, siga estos pasos:

  1. Seleccione la herramienta de lápiz en la barra de herramientas.
  2. Haga clic en la fase, en la parte que desee que comience el primer segmento de línea.
  3. Vuelva a hacer clic donde desee que finalice el segmento.
  4. Continúe haciendo clic para establecer los puntos de anclaje para formar segmentos rectos adicionales. El punto de anclaje activo se muestra más grande, lo que indica que está seleccionado. La selección de los puntos de anclaje anteriores se anula a medida que continúa añadiendo puntos nuevos.

Puede añadir o eliminar puntos de anclaje de sus rutas usando las opciones de la herramienta de lápiz  de la barra de opciones.

Para añadir puntos a su ruta, seleccione la opción para añadir puntos o desplácese sobre la línea hasta que el cursor de lápiz se convierta en un cursor para añadir puntos. A continuación, haga clic en la ruta para añadir otro punto de anclaje.

Para eliminar puntos de su ruta, seleccione el cursor para eliminar puntos y, a continuación, haga clic en el punto que desea eliminar. La ruta cambia para adaptarse a los puntos restantes.

Cómo añadir texto

La herramienta de texto  le permite crear áreas de texto en su anuncio o página HTML. También puede hacer clic en un elemento de etiqueta existente con la herramienta de texto para introducir texto en la etiqueta. Además, puede modificar su texto con las herramientas de edición habituales y cambiar la fuente, el tamaño, el formato, el diseño y el tipo de elemento HTML.

Para añadir texto a su documento HTML o anuncio, haga lo siguiente:

  1. Seleccione la herramienta de texto de la barra de herramientas.
  2. Haga clic y arrastre en la fase para crear un contenedor de texto de tamaño fijo o haga clic en la fase para crear un contenedor de texto de tamaño automático.
  3. Introduzca el texto.
Para seleccionar texto en un contenedor de texto, haga lo siguiente:
  1. Seleccione la herramienta de texto de la barra de herramientas.
  2. Haga clic en el contenedor que tiene el texto que desea seleccionar.
  3. Haga clic en él y arrástrelo sobre el texto que desea modificar.

Opciones de la herramienta de texto

Las opciones de la barra de herramientas de texto se pueden configurar para nuevas áreas de texto o pueden usarse para modificar el texto existente.  Para modificar el texto existente, puede seleccionar el texto con la herramienta de texto, o bien seleccionar el contenedor de texto con la herramienta de selección. Una vez que se ha seleccionado el texto o contenedor, haga lo siguiente:

  • Para cambiar la etiqueta HTML para su texto, seleccione la etiqueta que desee en el menú de etiqueta o introduzca su propia etiqueta en el campo de etiqueta.
  • Para cambiar la fuente, seleccione el nombre de la fuente en el menú de fuente o comience a escribir el nombre de la fuente que desea elegir de entre las posibles opciones.
  • Para añadir una fuente de Google, haga clic en el botón  para añadir fuentes. En el diálogo Añadir fuentes de Google, seleccione las fuentes que desee añadir. Cuando esté satisfecho con su selección, haga clic en Aceptar. En ese momento, las fuentes estarán disponibles en el menú de fuentes.
  • Para cambiar el tamaño de la fuente, haga clic en el campo de tamaño de fuente  y arrastre hacia la derecha para aumentar el tamaño o a la izquierda para disminuirlo. También puede introducir un tamaño específico en el campo.
  • Para cambiar el color de la fuente, haga clic en la muestra de colores y seleccione el color en la rueda de colores o en la paleta de colores.
  • Para cambiar el estilo del texto, haga clic en cualquier combinación de los  estilos negrita, cursiva, subrayado o tachado.
  • Para cambiar la alineación del texto, haga clic en los botones de alineación izquierda, derecha, central o justificada.
  • Para crear listas ordenadas o listas con viñetas, haga clic en los botones de lista ordenada o lista con viñetas.
  • Para cambiar los niveles de sangrado, haga clic en el botón de más sangría o en el de menos sangría. 
  • Para añadir un enlace, seleccione el texto que desea tener activo y, a continuación, haga clic en el  botón de enlace. En el diálogo Editar enlace, elija si desea crear un enlace de correo electrónico o una dirección web e introduzca el enlace previsto en el campo Enlace a; a continuación, haga clic en Aceptar.

Cómo añadir color a un objeto

Puede ajustar el trazo y el color de relleno de los elementos HTML y de los elementos de lienzo con el frasco de tinta  o con el cubo de pintura  de la barra de herramientas. o bien ajustando los colores en el panel de colores o en el panel de propiedades del elemento que desea modificar.

La rueda de color

El selector de color predeterminado para las muestras es la rueda de color. Para cambiar el color de un objeto, haga doble clic en la muestra de color de la línea o en el color de relleno que desee cambiar. A continuación, realice una de las siguientes opciones:

  • Seleccione un color de la rueda de color. Haga clic en el anillo externo para seleccionar el color y, a continuación, en el centro para seleccionar la tonalidad o el tono deseados. Use el deslizador alfa para cambiar la transparencia del color que ha elegido.
  • Elija las opciones de paleta de colores  o gradiente  ubicadas en la parte superior de la ventana de la rueda de color.

El panel de color

El panel de color le permite cambiar los colores del objeto seleccionado.

Para configurar los colores en el panel de color, realice lo siguiente:

  • Haga clic en la muestra de color junto a la línea o al icono de relleno y seleccione un color de la rueda de color.
  • Escriba el valor hexadecimal de un color en el cuadro.
  • Ajuste el color y el valor de canal alfa con los deslizadores o introduciendo valores directamente en los campos de valores de color.
  • Seleccione un color de la barra de color en la parte inferior del panel.
  • Para volver al color que usó por última vez, haga clic en la muestra de color anterior.
  • Para volver a la configuración de colores predeterminada (relleno blanco y trazo negro), haga clic en el botón Colores predeterminados
  • Para eliminar un trazo o color de relleno, haga clic en el botón Ningún color  .
  • Para cambiar colores entre el relleno y el trazo, haga clic en el botón Cambiar colores.

Gradientes

Un gradiente es un relleno multicolor donde cada color cambia al siguiente de forma gradual. Google Web Designer puede crear dos tipos de gradientes:
  • Gradientes lineales: cambian de color de izquierda a derecha.
  • Gradientes radiales: cambian de color de manera concéntrica desde el centro.
Puede ajustar los gradientes cambiando la cantidad de colores que tienen y la proximidad entre los colores.

Para crear o modificar un gradiente, seleccione la opción de gradiente de la ventana emergente de la rueda de color y elija una de las siguientes opciones:

  • Haga clic en un marcador de color para cambiar el color.
  • Arrastre un marcador de color para cambiar la distancia de transición.
  • Haga clic en la barra de gradiente para añadir un nuevo marcador de color.
  • Arrastre un marcador de color del panel de gradiente para eliminarlo.

Cómo crear animaciones

 

Puede crear animaciones en Google Web Designer de dos modos, modo Rápido y modo Avanzado.

En el modo Rápido, las animaciones se compilan escena a escena, se añade una nueva vista de la página entera, se cambian los elementos que desea animar y, opcionalmente, podrá modificar las velocidades y tiempos de transición.

Para conseguir animaciones más complejas, use el, modo Avanzado, que le permite animar cada uno de los elementos individualmente y modificar también las velocidades y los tiempos de transición (opcional). El modo Avanzado también muestra las capas, que permiten cambiar la ubicación de los elementos en la pila.

 

Cómo usar componentes

 

Los componentes son módulos compilados previamente que permiten añadir funciones específicas a sus anuncios.

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 diálogo Eventos.

 

Cómo editar el código

La vista de código le permite ver y editar su código con la herramienta de edición de código integrada de Google Web Designer. También puede crear archivos XML, CSS y JavaScript usando el autocompletado de código para que resulte más fácil introducir el código y se den menos errores.

Para los anuncios y archivos HTML, puede cambiar entre la vista Código y la vista Diseño (los cambios que realice en el código en la vista Código se reflejarán en la vista Diseño). Esto le permite comprobar de inmediato cómo afectan a sus diseños los cambios que realice en el código.

También puede seleccionar objetos con la herramienta de selección y cambiar el estilo CSS de esos objetos en el panel de CSS.

El panel CSS le permite editar los estilos actuales, así como añadir nuevas reglas CSS.

Cómo usar herramientas 3D

Cómo añadir eventos

Los eventos representan el modo en que conecta un gesto físico del usuario con una acción en su anuncio. Por ejemplo, podría usar el cambio de orientación (del modo de retrato al modo de paisaje) para cambiar de una página de su anuncio a otra. O bien puede usar un toque para desencadenar una salida a una URL a través de un entorno de anuncio, como AdMob o DoubleClick Studio. Actualmente, solo pueden recibir o enviar eventos las páginas y los componentes. pueden enviar o recibir eventos.

En el diálogo eventos, conecte componentes (y las acciones que registran) con eventos. El diálogo Eventos es un diálogo interactivo que le permite elegir un componente, la acción del usuario que ese componente puede registrar, un elemento objetivo y la acción que ese elemento objetivo puede ejecutar.

Para añadir un evento a su proyecto, haga lo siguiente:

  1. Haga clic en el botón Añadir evento en el panel Eventos. Se abrirá el diálogo Eventos.
  2. En la columna Fuente del diálogo Eventos, seleccione la página o el componente que recibe la acción del usuario. Cada elemento registra diferentes acciones del usuario. Por ejemplo, un área para presionar registra el toque o el clic del usuario, mientras que la página puede registrar cambios en su dispositivo de visualización, como cambios de orientación o sacudidas.
  3. En la columna Evento, seleccione el evento que desee usar como desencadenante. La lista de eventos cambia en función de la fuente que haya seleccionado.
  4. En la columna Objetivo, seleccione el objetivo al que desea enviar el evento. Este puede ser un elemento en pantalla, como un componente, o un entorno, como DoubleClick Studio.
  5. En la columna Acción, seleccione la acción seleccionada. La lista de acciones cambia en función del objetivo que haya seleccionado.

Cómo cambiar estilos usando el panel de CSS

El panel de CSS muestra el estilo de cualquier elemento que seleccione. También puede editar el estilo de la clase, añadir estilo intercalado y crear nuevos estilos con el panel de CSS.

Para agregar una nueva hoja de estilo a su documento, haga lo siguiente:

  1. Haga clic en el botón de añadir en la parte inferior de la sección de hoja de estilo.
  2. El tipo de medios de los nuevos archivos es screen. Si prefiere un tipo diferente, introduzca el tipo que desea en el campo de tipo de medios.

Para crear un nuevo estilo en su documento, realice lo siguiente:

  1. Haga clic en el botón Añadir en la parte inferior del panel de CSS.
  2. Haga clic en el botónnbsp;Añadir para añadir nuevos pares propiedad/valor.

Para añadir un estilo intercalado a un elemento de su documento, haga lo siguiente:

  1. Seleccione un elemento en su documento.
  2. Haga clic en el botón Añadir en la sección de estilo intercalado.
  3. Añada pares propiedad/valor para modificar el elemento.

Para modificar un estilo, haga lo siguiente:

  1. Seleccione un elemento en su documento. La sección de etiqueta de estilo mostrará los estilos asociados al elemento.
  2. Haga clic en una propiedad o en un valor para modificarlo.
  3. Haga clic en el botónnbsp;Añadir para añadir nuevos pares propiedad/valor.

Cómo crear un nuevo anuncio de banner

Los anuncios de banner son anuncios sencillos que se ajustan a una ranura de un tamaño específico en una página web o una aplicación.

Para crear un nuevo anuncio de banner, seleccione Nuevo archivo en el menú Archivo. Se abrirá el diálogo “Crear nuevo archivo”.

En el diálogo “Crear nuevo archivo”, haga lo siguiente:

  1. Seleccione Banner como el tipo de anuncio.
  2. Seleccione el entorno de anuncio donde desea que se ejecute. Google Web Designer admite entornos de AdMob y DoubleClick.
  3. Establezca las dimensiones del anuncio. En la lista desplegable se enumeran los tamaños de banner más comunes. Si desea usar un tamaño que no se encuentra en la lista, seleccione Personalizado en el menú desplegable e introduzca el ancho y la altura de forma manual.
  4. Dé un nombre al anuncio (obligatorio). Es el nombre del archivo HTML.
  5. Elija dónde desea guardar el archivo.  Introduzca la ruta a dicha ubicación o haga clic en el icono de búsqueda para navegar a la ubicación que desee.
  6. Seleccione el modo de animación que desea usar. El modoRápido le permite animar su anuncio escena a escena, mientras que el modo Avanzado le permite animar elementos individuales en su propia cronología.
  7. Haga clic en Aceptar.

Cómo obtener una vista previa de su anuncio o página HTML

A medida que compila su anuncio o página HTML, puede obtener una vista previa en el navegador que prefiera para ver cómo funcionará y el aspecto que tendrá cuando se publiquen.

Para obtener una vista previa de su trabajo, haga clic en el botón de vista previa  situado en la parte inferior de la pantalla.

Google Web Designer reconoce los navegadores compatibles en su sistema y le permite elegir cuál desea usar.

Para elegir el navegador en el que desea obtener la vista previa de su trabajo, haga clic en la flecha de selección situada a la derecha del botón de vista previa y seleccione el navegador de la lista emergente.

Cómo publicar el anuncio o página HTML

Cuando esté satisfecho con su anuncio o página HTML, puede publicarlos haciendo clic en el botón para publicar situado en la parte inferior de la fase.

En el diálogo de publicación, haga lo siguiente:

  1. Establezca el nombre del archivo o carpeta zip del documento y los archivos de soporte. De forma predeterminada, Google Web Designer usa el mismo nombre que especificó para el archivo HTML cuando se creó.
  2. Elija la ubicación donde desea guardar el archivo.  Introduzca la ruta hacia la ubicación donde desea guardar el archivo o haga clic en el icono de búsqueda para navegar a una ubicación adecuada.
  3. Elija entre las siguientes opciones:
    • Combinar archivos: une todos los archivos en una sola carpeta (seleccionada automáticamente para los anuncios).
    • Crear zip: comprime los archivos en un archivo .zip para descargar.
    • Reducir: comprime el marcado HTML.
  4. Elija qué prefijos CSS desea incluir en el archivo. Todos están seleccionados de forma predeterminada para ofrecer compatibilidad con el mayor número de navegadores.
  5. Haga clic en Publicar.
Anuncios

Un comentario sobre “Nueva herramienta de Google para diseñar sitios y avisos en HTML5

    Ruthok escribió:
    11/10/2013 en 13:46

    Después de lograr guardar el banner de html5, como hago para subir lo en Google AdWords?
    Gracias

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s