Tema 4 Genially Democratización del HTML5: diseño web para todos los públicos Proyecto OpenCourseWare-UNIA (ocw.unia.es)

Autora

Encarni Hinojosa

ÍNDICE

Introducción

Objetivos

Contenidos

4.1

Diseño de una infografía interactiva sencilla.

Tipos de interactividad.

4.2

Elaboración de un currículum animado.

Tipos de animaciones.

4.3

Creación de una presentación.

Uso de páginas.

4.4

Uso avanzado de la herramienta: botones invisibles, títulos, trabajo colaborativo, contenidos enriquecidos (embeber).

Diseño para usar un genially en Twitter.

Ideas clave

Otras referencias

Tareas

INTRODUCCIÓN

'Do it different, do it Genially'. Esta es la frase que recoge a la perfección la visión de Genial.ly, una 'startup' que surgió de la necesidad de EcoAvantis, una consultora y agencia cordobesa de comunicación sobre sostenibilidad, medio ambiente y RSC, de tener una herramienta que hiciera fácil la creación de productos web interactivos.

Las posibilidades de acceso, diseño y personalización del HTML5 fueron claves a la hora de crear la herramienta, que permite dar interactividad y animación a contenidos sin necesidad de teclear código. En tan sólo un año y medio se ha convertido en el mejor ejemplo de la revolución del HTML5 democrático, ha desbancado a Prezi como la herramienta predilecta para realizar presentaciones interactivas e, incluso, ¡ha pisado Silicon Valley!

Genially ya cuenta con más de 100.000 usuarios, funciona online y es gratuita, aunque ofrece muchas prestaciones interesantes a sus cuentas premium. Además, es la única herramienta que ha conseguido ser interactiva desde el propio Twitter, por lo que sus usuarios pueden compartir en la misma red social contenidos animados e interactivos.

OBJETIVOS

Los objetivos de este tema se centrarán en los conocimientos que deberá adquirir el alumno para poder usar la herramienta Genially:

Diseñar una infografía interactiva sencilla.

Elaborar un currículum animado.

Crear una presentación animada.

Usar Genially de forma avanzada.

Contenido genially para Twitter.

Aunque Genially funciona con cualquier navegador de internet, es recomendable usar el navegador de Google, Chrome, para sacarle el mayor partido.

CONTENIDOS | 4.1

1. Diseño de una infografía interactiva sencilla.

Vamos a crear un nuevo genially.

Ponemos un nombre, un ancho (1920 píxeles) y un alto (1000 píxeles).

Lo esencial de la interfaz es...

Pulsamos en Recursos y, después, en Fotos. Genially utiliza la galería de fotografías gratuitas de Pixabay. En el buscador, escribimos 'lince' y pulsamos en el icono de buscar.

Buscamos una fotografía en la que se vea un lince de cuerpo completo y la arrastramos a lienzo.

Pulsamos en una de las esquinas de la foto y arrastramos para aumentar el tamaño. En Genially, casi todos los objetos se agrandan o reducen respetando proporciones y, con la mayúscula pulsada, las proporciones no se respetan. Hacemos que la fotografía ocupe todo el lienzo.

Pulsamos en la herramienta de Texto y arrastramos Añadir Título al lienzo.

Escribimos 'El lince ibérico' y pulsamos en el botón de tamaño de texto.

Ponemos un tamaño mayor de texto en pixeles.

Si el texto no cabe en la caja, la podemos ampliar pulsando y arrastrando una de sus esquinas.

Podemos cambiar también la fuente tipográfica.

Y también podemos cambiar el color de texto. Por ejemplo, blanco.

Por último, pulsaremos en el + de la barra de edición de texto.

Pulsamos en Sombreado para que el texto tenga sombra.

Colocamos el texto en la esquina superior izquierda.

Ahora vamos a agregar unos botones para añadir contenido. Pulsamos en Interactividad y elegimos un botón.

Lo arrastramos al lienzo.

Lo colocamos en la imagen, allí donde queramos añadir información. Copiamos el objeto.

Y pulsamos en pegar para duplicar el objeto.

Duplicamos el objeto varias veces y vamos situando los botones en las diferentes zonas de la imagen donde queramos añadir contenido.

Pulsamos en Recursos y, después en Formas.

Pulsamos en el cuadrado y lo arrastramos al lienzo.

Cambiamos el color del objeto a negro.

Pulsamos en el botón de opacidad.

Por ejemplo, lo podemos dejar en 80%.

Pulsamos y arrastramos una de las esquinas para agrandar la caja.

Pulsamos en la caja del texto del titular y la copiamos.

Pegamos para duplicar la caja de texto y nos la llevamos a la caja negra.

Bajamos el tamaño del texto.

Escribimos 'Poblaciones protegidas'

Ahora, pulsamos en Recursos y Mapas. Seleccionamos el mapa de España y lo arrastramos al lienzo.

Seleccionamos el objeto y le cambiamos el color a blanco.

Le cambiamos el tamaño al mapa.

Pulsamos en Interactividad y, después, en Localización. Elegimos un icono.

Lo arrastramos al mapa y lo colocamos, más o menos, sobre Doñana.

Copiamos y pegamos el icono y colocamos la copia.

2. Tipos de interactividad.

Pulsamos en uno de los iconos que están encima de la foto y, después, en el botón de interactividad de ese objeto.

En Genially, existen 4 tipos de interactividades: que aparezca una etiqueta con texto y señalando el objeto, que aparezca una ventana flotante con información más completa, ir a otra página del proyecto o ir a un enlace externo. Esta vez, elegiremos Etiqueta.

Escribimos un texto breve y pulsamos en Guardar.

Ahora, pulsamos en uno de los iconos sobre el mapa y, después, en su botón de interactividad.

Seleccionamos, esta vez, Ventana. Escribimos Doñana y ponemos el tamaño del texto en 18. Seleccionamos el texto y lo hacemos negrita. Añadimos una línea, después un retorno para dejar una línea libre y, después, escribimos '94' en negrita y 'linces registrados' en redonda. Por último, pulsamos en el botón de añadir foto.

Pulsamos Elegir archivos. Escogemos la fotografía de nuestro ordenador. También podemos indicar la url del enlace de la imagen en el caso de que la cojamos directamente de internet.

En las opciones de la imagen, seleccionamos 50%.

Pulsamos en guardar.

Seleccionamos toda la ventana, copiamos y cerramos.

Pulsamos en el otro icono y, después, en el botón de interactividad.

Seleccionamos Ventana y pegamos.

Pulsamos en la imagen y, después, en Eliminar imagen.

Y seleccionamos otra imagen. Después, cambiamos los textos. Guardamos.

Pulsamos en el texto Poblaciones protegidas y, después, en el botón de interactividad.

Ahora escogemos Enlace, pegamos una url de una web y guardamos.

Una vez terminada la edición, podemos ver cómo queda pulsando en Previsualizar.

La opción de Etiqueta hace que, cuando pongamos el cursor encima del icono, aparezca una etiqueta con el breve texto introducido.

Si pulsamos en uno de los iconos del mapa, se abre una Ventana emergente con los contenidos que hemos introducido.

Y si pulsamos en Poblaciones protegidas...

Se abrirá la web que hemos introducido en la opción de Enlace.

CONTENIDOS | 4.2

1. Elaboración de un currículum animado.

Creamos un nuevo genially.

Seleccionamos Imágenes.

Y arrastramos una imagen que tengamos en el ordenador.

La arrastramos al lienzo y pulsamos en Máscaras de imagen.

Y escogemos una opción de máscara.

Añadimos un texto.

Y modificamos su estilo.

Pulsamos en Recursos, después en Formas y seleccionamos el círculo.

Modificamos el color de la figura.

Podemos modificar, también, la opacidad.

Si queremos que el círculo sea perfecto, pulsamos en Menú y, después, en Modo Diseño.

En ancho y en alto deberemos poner los mismos píxeles. Después, hay que pulsar en Aplicar cambios.

Y, en Profundidad, enviamos al fondo el círculo.

Añadimos un nuevo texto.

Le ponemos alineación centrada.

Y le ponemos color blanco.

Volvemos a arrastrar un círculo.

Le cambiamos el color al círculo y traemos al frente la caja de texto, para situarla encima del círculo.

Para seleccionar varios objetos a la vez, debemos hacerlo con la tecla Control pulsada. Así podemos mover los dos objetos a la vez.

Y también podemos copiarlos y pegarlos a la vez.

Duplicamos el conjunto de texto y círculo y cambiamos los textos.

2. Tipos de animaciones.

Vamos a comenzar a usar las animaciones de Genially. Para empezar, pulsamos en el titular y, después, en Animación. En Corportamiento del elemento tenemos 4 opciones: Entrada, cuando se abra la página de Genially, el objeto tendrá una animación concreta; Salida, cuando se pase a otra página de Genially; Continuo, el objeto tendrá una animación continua; Ratón encima, el objeto sólo se animará cuando el cursor del ratón esté encima. En Dirección del Efecto, podemos escoger sin dirección concreta, de izquierda a derecha, de derecha a izquierda, de abajo a arriba y de arriba a abajo.

Pulsamos en Entrada.

Seleccionamos la dirección de arriba a abajo y, después, la opción de Aparecer Abajo. Si ponemos el cursor encima de cada Tipo de efecto, veremos un preview en el lienzo.

Pulsamos en uno de los círculos naranjas, Continuo, Pulso.

Después, pulsamos en el texto que está encima, Ratón encima, Parpadeo. Pulsamos en Copy animation values.

Con la tecla de Control pulsada, seleccionamos el resto de textos que están encima de los círculos naranjas.

Pulsamos en Animación y, después, en Paste animation values. De esta manera, estamos aplicando a varios objetos a la vez las mismas preferencias de animación.

Ahora, pulsamos en uno de los círculos naranjas. Animación, Entrada, Ninguna dirección, Aparecer.

Seleccionamos el siguiente círculo naranja y aplicamos la misma animación pero, en Inicio del efecto, ponemos 1.0s

Seleccionamos el siguiente círculo y ponemos el inicio en 2.0s.

Y el siguiente, 3.0s.

Por último, pulsamos en Recursos, Ilustraciones y, en el buscador, ponemos gafas. Arrastramos y posicionamos en el lienzo.

En Animación: Entrada, de abajo a arriba, Bote Arriba y 5.0s.

Y en Ratón encima ponemos Ocultar, para que desaparezcan las gafas al poner el cursor encima de ellas.

CONTENIDOS | 4.3

1. Creación de una presentación.

Creamos un nuevo genially.

Seleccionamos un fondo.

Desbloqueamos el fondo para poder editarlo.

Y ampliamos el fondo para que ocupe todo el lienzo.

Añadimos un texto.

Y lo editamos (tamaño, fuente, color...)

Lo copiamos.

Y lo pegamos. Editamos el estilo de este nuevo texto.

Seleccionamos el primer texto y le aplicamos una animación que comience en el segundo 0.5.

Y otra animación al otro texto, pero que se inicie en el 1.5s.

Abrimos el panel de páginas y duplicamos la página.

Seleccionamos la página 2 para editarla.

Editamos los textos para colocarlos en la parte superior.

Añadimos un nuevo texto escogiendo Añadir lista de puntos.

Y editamos.

Pulsamos en Imágenes y subimos una de nuestro ordenador.

La añadimos al lienzo. Si el formato de la imagen no se adapta a lo que necesitamos para el diseño (mejor una foto cuadrada, tirando a vertical), podemos Recortar la imagen.

Editamos el recorte y pulsamos en guardar los cambios.

Y reducimos el tamaño de la imagen proporcionalmente.

Le añadimos una animación a la imagen.

2. Uso de páginas.

Abrimos la ventana de Páginas y duplicamos la página 2.

Como el resto de páginas tendrá el mismo estilo que la página 2, duplicamos esta página tantas veces como páginas necesitemos. Después, iremos página por página editándolas.

Si previsualizamos, veremos que, automáticamente, se han creado unos botones a izquierda y derecha para pasar las páginas y, también, unos botones de carrusel en la parte inferior del genially.

Volvemos al editor. Si pulsamos en Animación y, después, en Animar página...

Podemos editar la transición entre páginas.

Para aplicar la misma transición a todas las páginas, debemos pulsar en Aplicar esta transición a todas las páginas.

CONTENIDOS | 4.4

1. Uso avanzado de la herramienta.

Botones invisibles:

Pulsamos en Interactividad y, después, en Invisible. Arrastramos la caja roja al lienzo.

Modificamos el tamaño de esta caja roja y la colocamos donde queremos que actúe.

Títulos:

Pulsamos en un objeto y, después, en el botón de Título del área.

Escribimos lo que queremos que aparezca y damos a Intro.

Hay que comprobar en ajustes que tenemos habilitados los títulos.

De esta manera, podemos hacer que un objeto tenga a la vez una etiqueta (que sería el título del objeto) y una ventana.

Al poner el cursor sobre el objeto (que es invisible en este caso) nos aparecería una etiqueta (que sería el Título del área).

Y si pulsamos en ese objeto invisible, nos aparecería una ventana emergente con un contenido más extenso.

Trabajo colaborativo:

En nuestra galería de proyectos, podemos pulsar en el menú de uno de nuestros genially y pulsar en Trabajo colaborativo (beta).

Pulsaremos en el botón de añadir colaboradores.

Pondremos el email de otro usuario de Genially. De esta manera, el genially podrá ser editado también por este usuario.

Embeber contenidos enriquecidos:

Abrimos un 'fusion table' que hayamos hecho y pulsamos en Tools, Publish.

Ampliamos el tamaño en el width y en el height y copiamos el iframe.

En Genially, pulsamos en Embeber. En la barra de Pon aquí tu URL... pegamos el código iframe y pulsamos en el botón de insertar.

Y nos aparecerá el gráfico de Fusion Tables en nuestro lienzo.

Arrastrando una de las esquinas del objeto, podemos agrandar su caja.

Lo genial de Genially es que permite todas las funcionalidades de los contenidos enriquecidos embebidos, es decir, visualizando el genially podemos interactuar con el gráfico de Google Fusion Tables.

Podemos hacer lo mismo con un mapa de Fusion Tables.

Modificamos tamaño y copiamos el iframe.

Pegamos el iframe en Genially e insertamos.

Aunque esté insertado en un genially, el mapa es interactivo, se le puede hacer zoom y se puede mover.

También podemos insertar un vídeo realizado en Animatron. Iremos a nuestra cuenta y pulsaremos en el botón de Editar de nuestro vídeo.

Pulsamos en Compartir y, en la opción Embed, en Continuar.

Seleccionamos el código iframe y lo copiamos.

Lo pegamos en Genially y lo insertamos.

Si modificamos el tamaño del vídeo de Animatron en el editor de esta herramienta, nos saldrá el vídeo más grande en genially.

2. Diseño para usar un genially en Twitter.

En Genially, duplicamos la infografía que hicimos del lince.

Editamos esta copia. Primero, modificamos el nombre del genially.

En los ajustes, modificamos el tamaño a 800 píxeles de ancho y de alto.

Para poder ver el lienzo, podemos quitarle opacidad a la imagen. Ajustamos la imagen al nuevo tamaño de lienzo.

Ajustamos la animación del titular de la infografía.

Recolocamos los botones.

Y le añadimos una animación a estos botones. La imagen del lince le podemos volver a poner 100% de opacidad.

Arrastramos una forma de círculo.Le ponemos color negro y opacidad.

Copiamos el texto del titular.

Lo pegamos, lo modificamos, le reducimos el tamaño y lo colocamos.

A los botones con información sobre las partes del lince, le aumentamos el tamaño de texto de las etiquetas.

Cuando hacemos un genially para Twitter es muy importante contar con el espacio reducido del tuit. Por eso, los tamaños de los textos del genially deben ser grandes.

Le podemos añadir una animación al círculo negro.

Y aplicamos la misma animación al texto de 'Mapa'.

Vamos a la barra de páginas y duplicamos página.

En la página 2, eliminamos todo menos el círculo negro y 'Mapa'.

Cambiamos el texto de 'Mapa' por 'Volver'.

Copiamos el iframe de un mapa de Google Fusion Tables. Ponemos el tamaño de 800 x 800, como el lienzo del genially para Twitter.

Y lo embebemos en esta página 2.

Lo ajustamos al lienzo y enviamos al fondo.

Pulsamos en Animación y, después, en Animar página.

Seleccionamos Sin efecto y aplicamos a todas las páginas.

Pulsamos en la Interactividad del texto 'Volver'.

E indicamos que vaya a la página 1. Guardamos.

Aplicamos la misma interactividad al círculo negro.

Vamos a la página 1. Pulsamos en la interactividad del texto 'Mapa'.

Le decimos que vaya a la página 2.

Y le aplicamos lo mismo a la interactividad del círculo negro.

Por último, en Ajustes, quitamos Habilitar paginación para que no aparezcan los botones de los lados para pasar página y los inferiores de pase de diapositivas. Así, para pasar de una página a otra, sólo se podrá hacer pulsando en 'Mapa' y en 'Volver'.

Pulsamos en Compartir y, después, en el icono de Twitter.

Se nos abrirá Twitter en el navegador con un tuit donde ya estará insertado el enlace a nuestro genially. Añadimos un texto sin modificar este enlace y tuiteamos.

Cuando nuestro tuit ya esté publicado, si pulsamos en el preview del enlace...

¡Se abrirá el genially en la propia ventana del tuit! En vez de abrirse el genially en una ventana nueva del navegador. Además, el genially, a pesar de estar 'reproduciéndose' en el propio Twitter, es 100% animado e interactivo.

Y el mapa de Google Fusion Tables embebido en el genially también permite la interactividad propia de Fusion Tables.

Genially es la única herramienta del mercado internacional cuyos archivos se pueden abrir en el propio Twitter, siendo funcionales todas sus animaciones e interactividades. Por ejemplo, un mapa de CartoDB o Google Maps no puede funcionar directamente en Twitter, sino que se puede compartir el enlace para que éste se abra en una nueva ventana del navegador. Sin embargo, como Genially permite embeber contenido enriquecido y éste sigue siendo funcional desde Genially, se puede embeber en Genially un mapa de CartoDB o Google Maps y, al compartir este genially en Twitter, poder visualizar e interactuar con el mapa de CartoDB o Google Maps.

IDEAS CLAVE

Genially es una 'startup' andaluza (Córdoba) que ha revolucionado el diseño web al permitir crear cualquier producto interactivo de una manera muy fácil.

Genially es una herramienta ideal para realizar infografía web interactiva.

En Genially, existen cuatro tipos de interactividad: etiqueta, ventana, ir a página e ir a enlace.

También se pueden hacer, de una manera muy sencilla, currículums y presentaciones animados e interactivos.

En Genially, existen cuatro tipos de animación: de entrada, de salida, continua y ratón encima.

Genially funciona con diferentes páginas.

Se pueden usar botones invisibles, títulos de área para objetos y hacer que los proyectos sean colaborativos entre varias cuentas.

Permite embeber casi cualquier contenido enriquecido de otros servicios y herramientas.

Genially es la única herramienta que permite que sus contenidos propios y embebidos se previsualicen de manera totalmente funcional en Twitter.

ENLACES DIRECTOS:

Genially

Doitgenially (blog de Genially)

SOPORTE:

Trucos, consejos

Videotutoriales

ALGUNOS EJEMPLOS:

Galería de Genially

Visualiza la guía de primeros pasos de Genially.

Visualiza el vídeo Videotutorial de Genially.

Practica con la herramienta. Puedes seguir, paso por paso, las indicaciones de este documento o del videotutorial o, si lo prefieres, probar libremente Genially.