Crear una imagen interactiva.

¡Hola de nuevo!

Hoy os traigo una tarea que consiste en cómo crear una imagen interactiva con Genial.ly; una imagen interactiva es aquella que tiene instrucciones de manera que al ser pulsada se inicia algún tipo de acción o de resultado. En una página web, es cualquier imagen que tenga un URL o información incrustado o escondido tras ella. 

Esta entrada contará con el sencillo proceso a seguir en el programa anteriormente dicho, mis propias imagenes, tutoriales de ayuda como siempre y una webgrafía.

Comenzamos...

Proceso seguido:

1.  Como ya es habitual, lo primero de todo es, crearnos una cuenta, o bien, registrarnos. 

2.  Lo siguiente pinchar en "Crear".

3.  Después debemos darle a Imagen interactiva y como se ve en la segunda fotografía pinchar en donde esta el rectángulo rojo para elegir de nuestros dispositivos aquella con la que queremos crear la imagen interactiva. Una vez hecho lo anterior pinchamos en "Crear mi nueva imagen interactiva".

4.  En la barra lateral tenemos distintas opciones como: "Interactividad" (iconos que vamos a necesitar para crear la imagen interactiva), "Texto" (títulos, oraciones y párrafos), "Recursos" (formas, líneas, botones, ilustraciones, GIFs, mapas, etc.), "Fondos" (distintos fondos a elegir y con opción a escoger una del dispositivo), "Animación" (transiciones para los distintos elementos o páginas), "Embeber" (vídeos, audios, gadgets, archivos, gráficas, etc.) e "Imágenes". Como dije antes nosotros necesitamos los botones de "Interactividad", así que pinchamos ahí.

5.  Una vez hayamos pinchado ahí, podemos escoger entre la diversisdad de botones que hay, cuando encontremos el que queremos, pulsamos en él. A continuación, como aparece en la segunda fotografía, pinchamos en el símbolo indicado.

6.  El anterior símbolo sirve para añadir la información, fotografías o URL que queramos, de manera que podemos editar el texto, si queremos que lo ahí añadido aprezca en una ventana o en una etiqueta.

7.  Para añadir más imágenes interactivas debemos pulsar en "Páginas" y en el rectángulo con el símbolo "+". 

 8.  Para acabar, cuando queramos ver como nos está quedando demos pinchar en "Previsualizar" y cuando creamos que hemos acabado, en "Compartir", y después en "Embeber", que es lo que quiero hacer yo, y ya ahí, lo último es copiar el código ofrecido.

Despuésde estas instrucciones os voy a dejar mis propias imágenes interactivas donde además os explico las distintas partes de un ordenador. Sinceramente este programa me gusta mucho, ya que tiene muchas opciones de trabajo y edición para gustos personales y no creo que sea difícil de usar.

¡Espero que os hayan gustado!



Tutorial muy completo:

Webgrafía sobre la información de las imágenes:

• Informática básica - Parte posterior de la torre.
• Definición de entradas y salidas de audio. 
• Definición de puerto USB - Qué es, significado y concepto.
• Fuente de poder.
• Definición PS/2.
• ¿Qué es Puerto Serial?
• Puerto VGA características y usos.
• ¿Qué es puerto Ethernet? Definición.
• Conectores de audio.
• Definición de HDMI.
• ¿Qué es puerto DVI?
• ¿Qué es el gabinete de la computadora?

¡Un saludo!