Tutorial genial.
ly
Ximo Nebot (@XiriXimo)
Como en todas las aplicaciones, el primer paso será crearnos una cuenta. Para ello
entramos en la dirección web: https://www.genial.ly/ y encontraremos una pantalla con
este aspecto:
En la parte superior derecha vemos que tenemos dos opciones:
“Registro” para crear cuentas nuevas:
(Este registro se puede hacer introduciendo datos de correo y contraseña, o podemos
darnos de alta a través de alguna red social o alguna cuenta Google -botones inferiores-
)
E “Iniciar sesión” para entrar una vez que ya estemos dados de alta en la plataforma:
Una vez identificados en genial.ly tenemos las siguientes opciones:
Y quedándonos en la barra lateral izquierda:
Nos quedaremos con las dos primeras opciones, la que nos permiten crear contenidos
nuevos o la que permite acceder a los contenidos que tenemos guardados.
En la parte inferior vemos una opción denominada “Planes”
Y vemos que hay diferentes opciones: desde la cuenta gratuita hasta la cuenta Máster,
con diferentes precios entre ellas.
Empezaremos con la cuenta gratuita, que nos va a permitir construir muchos
documentos diferentes y solamente notaremos algunas limitaciones a la hora de
seleccionar plantillas o de exportar nuestro trabajo acabado.
Si volvemos a la pantalla anterior y tratamos de crear un documento genially nos
muestra todas estas opciones:
Y vamos a aprender a utilizar alguno de ellos.
Pero antes hay que señalar la característica, para mí, más importante de genial.ly, y es
la capacidad de interacción que propone. Cualquier documento en genial.ly nos
permitirá introducir algunos puntos donde, al pulsar sobre ellos, ocurrirá alguna acción:
se abrirá una ventana, aparecerá una etiqueta, nos llevará a otra pate del documento,
nos llevará a una página web externa, nos enseñará un video, etc.
Volviendo a las limitaciones de la versión gratuita, una de ellas era la menor capacidad
de exportación pero, dado que la filosofía de genial.ly es introducir elementos
interactivos, la mejor forma de exportar nuestras creaciones será insertándola en una
página web (blog personal, por ejemplo) o mediante un enlace directo al documento.
En ambos casos vamos a mantener esa característica de la interacción y ambas opciones
están disponibles en la versión gratuita.
PRESENTACIÓN.
Vamos a seleccionar la opción de crear una presentación. Se nos muestran diferentes
plantillas y, en cada una, señala si es una versión premium o gratuita. Para nuestra
cuenta gratuita, lógicamente, solo podremos seleccionar estas últimas (están marcadas
con una estrella en la esquina superior derecha).
Cada cierto tiempo van añadiendo nuevos diseños de plantillas (las etiquetan como
“Nuevo” para que nos resulte más sencillo identificarlas).
Antes de seleccionar alguna de ellas podemos verla en vista previa y navegar por el resto
de diapositivas para conocerlas mejor (muchas veces solo con la portada no será
suficiente para hacernos una idea del resto):
Elegimos una de ellas, por ejemplo, para mostrar nuestro PLE (entorno personal de
aprendizaje) y colocaremos el conjunto de recursos que utilizamos para gestionar
nuestro aprendizaje personal.
Empezamos poniendo un título a nuestra presentación:
Cada uno de los elementos que aparecen en cada diapositiva los podremos editar, de
forma que les podremos cambiar el texto, el color, la fuente, la orientación, y algunos
parámetros más. Empezamos poniendo un título, subtítulo y nuestro nombre en la
portada de la presentación:
Si algún texto no nos cabe en el cuadro que había por defecto podemos ampliar las
dimensiones de este cuadro simplemente haciendo clic en la marca que aparece en el
lateral del cuadro cuando lo tenemos seleccionado:
Si alguno de los cuadros no lo necesitamos podemos eliminarlo:
Para añadir ahora más páginas utilizamos el botón inferior:
Al añadir página nos mostrará todos los tipos de páginas (diapositivas) disponibles en
esta plantilla y, en función de lo que queramos mostrar a continuación debemos elegir
el diseño que nos parece más apropiado:
Marcamos el estilo que queremos y le damos a “Añadir”:
Nos aparece ahora a continuación de la diapositiva anterior. Desde el navegador de
páginas podemos situarnos en la que deseemos. Ahora vamos a editar esta segunda
diapositiva:
Para esta práctica, y si no lo hemos hecho nunca antes, quizás nos irá bien buscar un
poco de información sobre otros PLE que han podido hacer otros compañeros docentes.
El PLE se debe componer de tres elementos:
• Dónde accedo a la información
• Dónde modifico la información
• Cómo la comparto
Nos interesa, sobre todo, tener una primera clasificación de este tipo de actividades,
que podría ser:
• Aprender. Herramientas que utilizo para aprender yo mismo, de dónde obtengo
información, qué sitios suelo visitar para ver cosas nuevas…
• Editar. ¿Puedo modificar esos documentos que he obtenido? ¿De qué forma?
• Publicar. ¿Cómo pongo a disposición del público en general algún trabajo, alguna
investigación, algún artículo… que haya construido yo mismo o mis alumnos?
• Enseñar. ¿Qué herramientas suelo utilizar para interaccionar con mis alumnos?
• Compartir. Si guardo información, de qué forma la puedo compartir con otros
compañeros.
• Conectar. ¿Qué tipo de red social me gusta utilizar para informarme de nuevas
formas de trabajar de otros compañeros, o para mostrar las mías propias?
Este es solo un ejemplo de las categorías que puede contener un PLE.
La siguiente diapositiva (o página) será una que contenga, únicamente, estas categorías
que hayamos seleccionado:
Vamos ahora a colocar algunas imágenes porque toda presentación debe caracterizarse
por transmitir más información visual que textual.
Para buscar imágenes podemos recurrir a cualquier tipo de banco de imágenes siempre
que estén etiquetadas para reutilizar. Ejemplos: Flickr.com o Pixabay.
Una propuesta interesante para descargar imágenes tipo iconos es The Noun Project
(previo registro).
En cualquiera de los tres casos deberemos indicar cuál es el origen de la imagen que
hemos utilizado.
Para modificar las imágenes que aparecen en la plantilla podemos, simplemente, darle
clic a la imagen y nos permitirá reemplazarla por aquella imagen que queramos subir:
Otra forma de introducir imágenes en una presentación, si no tenemos ninguna en la
plantilla para reemplazar, es subiéndolas directamente a genial.ly:
Podemos arrastrar la imagen que tengamos descargada a este cuadro inferior o pinchar
sobre este cuadro para buscarla. En cualquier caso, al cargar la imagen aparecerá aquí:
Y solo tenemos que arrastrar esta imagen hasta nuestra dispositiva y, en la mayoría de
los casos, ajustar su tamaño:
Cuando finalicemos esta fase la diapositiva debe quedar con un aspecto parecido a este:
Al descargar las imágenes de The Noun Project ya han aparecido los créditos de cada
imagen en la parte inferior. Si nuestras imágenes no incluyen estos créditos y queremos
que aparezcan debemos añadirlos como un cuadro de texto:
Una vez que tenemos el diseño de la página con las categorías que hemos seleccionado
para nuestro PLE vamos a diseñar una página ahora para incluir los diferentes recursos
de una misma categoría:
Añadimos otra página con un diseño que nos guste (la presentación resulta más
interesante si vamos cambiado el estilo de las páginas):
Si ninguna de las páginas de esta plantilla parece tener un diseño ajustado a lo que
necesitamos ahora lo que podemos hacer es seleccionar una cualquiera, eliminar los
elemento que contenga y empezar a diseñarla desde cero:
Lo que tenemos que introducir, básicamente, son textos e imágenes, como hemos visto
anteriormente. (Recomendación: buscar imágenes del tipo PNG para los logotipos).
Esta página puede quedar con este aspecto:
En cuestiones de diseño quizás podríamos colocar las imágenes de los servicios que
utilizamos más frecuentemente de un tamaño mayor que aquellos que no los utilizamos
tan a menudo, a elección del usuario.
Para convertir esta página o diapositiva en una página interactiva necesitamos que cada
uno de estos elementos se convierta en un enlace, de forma que cuando alguien quiera
acceder al servicio, por ejemplo, de la Wikipedia, pulsando sobre su icono le lleve
directamente a ella. Para ello seguiremos los siguientes pasos:
1. Abriremos la página de la Wikipedia en otra ventana.
2. Copiaremos la URL de la barra de direcciones
3. Seleccionamos el logotipo de la Wikipedia en la página
4. Le damos al botón de la izquierda de los dos que han aparecido (el que tiene una
mano con un dedo extendido que parece que esté pulsando algo) y nos aparecen
las diferentes opciones de interacción:
5. De las cuatro opciones que nos presenta ahora nos interesa que cuando hagan
clic en esta imagen les lleve a una página externa, la de la Wikipedia, así que
pincharemos sobre la última opción.
6. Nos llevará a otra ventana donde tenemos que introducir la URL que tenemos
copiada desde el paso 2.
7. Así ahora el icono de la Wikipedia, cuando está seleccionado, muestra que tiene
algún elemento interactivo aplicado:
Además de poder introducir enlaces al pinchar sobre un objeto, como hemos visto en la
ventana anterior podemos también hacer que:
• Aparezca una etiqueta cuando pasamos por ese objeto (recomiendan que sea un
texto corto porque, en otro caso, no se va a leer bien)
• Aparezca una ventana cuando pinchamos sobre le objeto 8aquí el texto puede
ser más amplio e, incluso, contener imágenes)
• Nos lleve a otra página de nuestra presentación.
Cuando tengamos acabada esta página, con todos los enlaces introducidos, vamos a
probar esta última opción. Volvemos a la página anterior:
Y ahora vamos a crear un elemento interactivo en la primera imagen: si pinchamos sobre
el icono correspondiente a “Aprender”, entonces nos llevará a la página que acabamos
de crear con todos los iconos relacionados con esta categoría:
Esto lo repetiremos con el resto de categorías:
• Crear una página nueva por cada categoría
• En esa página, cambiar el título y añadir todos los logotipos de los recursos que
consideremos
• Añadir la interactividad a cada logotipo: enlazando a la página web del servicio
• Añadir la interactividad en la primera página de categorías para que al pinchar
sobre cada imagen nos lleve directamente a la página correspondiente.
Además de la interactividad, en cada objeto podemos añadir movimiento. Es el segundo
de los iconos que aparecen cuando hacemos clic en él:
Aquí vemos gran cantidad de opciones: podemos animar la entrada, la salida, que ocurra
siempre o que suceda cuando pase el ratón por encima. Además tenemos trece efectos
que podemos aplicar y también podemos indicarle la dirección, el tiempo que espera a
que se active el efecto y la velocidad del mismo
Aunque en las presentaciones no conviene abusar de estos efectos, llegados a este
punto lo mejor es probar algunos de estos efectos en nuestros elementos.
Una vez que establecemos algún efecto, para probarlo podemos utilizar la vista previa
de la presentación:
INFOGRAFÍA.
Vamos a seleccionar la opción de crear una infografía: una representación visual de
cierta información que queramos trasladar a alguien.
Vamos a crear una infografía para explicar a nuestros alumnos cómo vamos a calificarles
en nuestra asignatura. Para ello elegimos la plantilla que creamos más apropiada para
nuestro trabajo:
Y puede quedar con un aspecto como este:
OTRAS CREACIONES.
Podemos navegar por el menú de las creaciones y encontrar algunas plantillas como
estas:
Mapas
Tableros
Línea temporal
Tarjetas
Calendarios
Rúbricas
Mapas mentales
Juegos
Todavía nos queda algo por hacer…
Ya tenemos nuestras creaciones guardadas. ¿Cómo las podemos compartir?
Tenemos dos opciones (en la versión gratuita):
• Compartir mediante un enlace
• Insertar en un sitio web
Y, aparte, podemos enviarlas por correo electrónico o compartirlas en nuestras redes
sociales.
En todos los casos, excepto la inserción en una web, conseguimos una URL propia del
documento y a la que podemos acceder desde cualquier navegador.
Este documento web tendrá todas las opciones de interacción que hemos creado
anteriormente.
Para usuarios avanzados
¿Quieres tener un teclado digital con una contraseña? El objetivo sería tener todos los
dígitos para desbloquear algún texto.
Tiene unos cuantos pasos pero es sencillo de realizar:
1. Creamos un genially en blanco
2. En la primera página ponemos el nombre del documento, por ejemplo
“Contraseña”
3. Añadimos una segunda página y, en ese momento, aparecerá la opción de
deshabilitar la paginación: “modo de navegación: Microsite”. De esta forma
desaparecen las flechas para pasar de una página a otra. Veremos que esto es
muy importante porque se trata de que, según la acción, les dirigiremos a una
página u otra, no pueden pasar simplemente a la siguiente.
4. En la segunda página pondremos un título y una imagen con un teclado. Por
ejemplo, en Flickr.com he encontrado este teclado de un antiguo teléfono
público.
5. Vamos a suponer que, en nuestro caso, la contraseña correcta es 123. Lo primero
que haremos será añadir un cuadro encima del teclado pero con la transparencia
al 0%. Posteriormente crearemos los enlaces. Como el 1 es el dígito correcto en
la primera posición, sobre el 1 colocaremos también una zona con transparencia
al 0% (más tarde la asociaremos con el camino de éxito)
Con las transparencias adecuadas pero la idea sería algo así:
6. A continuación deben venir 6 copias de esta página: 3 de ellas las etiquetaremos
como “AciertoX” (X=1,2,3) y otras tres como “ErrorX” (X=1,2,3).
7. La página de Acierto1 es a la que nos llevará si en la anterior hemos pulsado el 1
y tendrá este aspecto (con transparencias al 0% siempre):
Además, en esta página, añadimos un símbolo indicando que ya se ha
introducido un dígito (por ejemplo, con un asterisco).
8. Si en la inicial hemos fallado nos llevará a la página de “Error1”: será igual que
esta de Acierto1 pero sin el cuadro pequeño sobre el 2.
El esquema será el siguiente:
El objetivo es llegar hasta la página “Acierto3” que es la que permitirá descubrir
qué se esconde detrás de la contraseña. Para llegar allí tenemos que acertar (A)
tres veces. Si fallamos (F) en algún momento, entonces nos llevará a la página
“Error3”
A Acierto1 A
Acierto2 A
Acierto3
F F
Inicial F
F Error1 Error2 Error3
9. La página “Inicial” tendrá un pequeño cuadro sobre el 1. Si pulsan allí les llevará
a “Acierto1”. Si pulsan en cualquier otro sitio (cuadrado grande) entonces les
llevará a “Error1”.
10. La página “Acierto1” tiene un pequeño cuadrado sobre el 2. Pulsando en él les
lleva a “Acierto2”. En otro caso, el cuadrado grande les lleva a “Error2”.
11. La página “Acierto2” tiene un pequeño cuadrado sobre el 3. Si pulsan aquí
llegarán a “Acierto3” porque habrán acertado la contraseña. Si pulsan fuera del
3, en el cuadrado grande, les llevará a “Error3”.
12. La página “Acierto3” tendrá un cuadrito sobre el botón de la L y al pulsar sobre
él les debe llevar a una última página donde se les felicite por haber encontrado
la contraseña.
13. Y la página de “Error3” al pulsar sobre la L les llevará a otra donde se les indicará
que no han sabido descifrarla.
14. Las páginas “Acierto1” y “Error1” tendrán un asterisco. Las páginas “Acierto2” y
“Error2” tendrán dos asteriscos y las páginas “Acierto3” y “Error3” tendrán tres
asteriscos para indicar, en cada caso, cuál es el dígito que deben introducir en
ese momento. En este caso he mantenido los tres asteriscos, aunque cambiados
de color, en las últimas páginas de enhorabuena y de fallo, pero no sería
necesario.
