-
Hola, me llamo Maciek
y soy ingeniero de Google Web Designer.
-
Hoy explicaré cómo usar el sistema
de eventos de Google Web Designer.
-
Después de ver este vídeo
-
sabrás cómo configurar
gestores de eventos en tus documentos.
-
He preparado un documento sencillo
-
que contiene una galería
en carrusel y un elemento div azul.
-
Para añadir un gestor
de eventos a tu documento
-
busca el panel Eventos
en la parte derecha de la pantalla.
-
En él, se muestra una lista
de todos los gestores instalados.
-
Como aún no tenemos
ninguno, la lista está vacía
-
pero si tienes muchos,
puedes ordenarlos y filtrarlos.
-
Para añadir gestores de eventos, hay que
abrir el cuadro de diálogo Eventos.
-
Hay dos formas de hacerlo.
-
Si ya sabes qué objetivo elegir
-
haz clic con el botón derecho
en el elemento
-
y selecciona Añadir evento.
-
Así, el elemento se convierte en tu objetivo.
-
En vez de eso, vamos a deseleccionarlo
-
y abrir el cuadro de diálogo Eventos
con el signo de suma de la esquina.
-
Al hacerlo, el cuadro se abre
sin ninguna preferencia seleccionada.
-
En primer lugar,
seleccionaremos el objetivo:
-
es decir, el elemento que
activará el gestor de eventos.
-
En este ejemplo, usaremos el carrusel.
-
Después, elegimos el evento
que activará el gestor de eventos.
-
Casi siempre se admiten
eventos de tipo Ratón y Tocar.
-
Como usamos un carrusel, también
se admiten otros eventos especiales.
-
Seleccionaré el evento Clic
-
y ahora elegiré una acción...
-
que es lo que queremos
que suceda cuando se produzca el evento.
-
En casi todos los elementos
se pueden definir estilos CSS
-
y añadir acciones personalizadas,
como veremos enseguida.
-
Si tu documento incluye
otros elementos personalizados
-
aquí podrás seleccionar otros eventos.
-
En este ejemplo,
usaré la opción Establecer estilos.
-
Ahora elegimos un receptor:
-
es decir, el elemento
cuyo CSS queremos cambiar.
-
En este caso, elegiré el elemento div azul
-
y le asignaré alguna propiedad CSS.
-
Le cambiaré
el color de fondo para que sea rojo.
-
Puedes elegir
opciones de easing o añadir una duración.
-
Haz clic en Aceptar para guardar.
-
Ya está. Hemos añadido
un gestor de eventos al documento.
-
Ahora podemos obtener
una vista previa para ver cómo ha quedado.
-
Al hacer clic en el carrusel
-
podemos ver
que el div cambia lentamente a rojo.
-
Fácil, ¿verdad?
-
Supongamos que nos hemos equivocado
y queremos cambiar el gestor de eventos.
-
No hace falta
que hagamos otro gestor:
-
podemos editar
el que acabamos de crear.
-
Si haces doble clic en él
-
se abrirá el cuadro de diálogo
Eventos en modo de edición.
-
Volvemos a la pantalla de acciones
y seleccionamos una acción personalizada.
-
Aquí puedes introducir
cualquier código JavaScript válido.
-
Voy a darle al código
un nombre de función.
-
Para este ejemplo,
crearemos una llamada de alerta.
-
Así está bien.
-
Hacemos clic en Aceptar para guardar.
-
Podemos ver como
el gestor de eventos se ha actualizado
-
y ahora muestra la función.
-
Vamos a verlo en acción.
-
Al hacer clic en el carrusel
-
aparece el texto de la alerta.
-
"I love Google Web Designer!"
[Me encanta Google Web Designer]
-
Y así termina el vídeo.
-
Si tienes alguna duda
sobre los eventos o Google Web Designer
-
escríbela en la sección de comentarios.
-
Gracias.
