En este instructable explicaremos como realizar un modelo prototipo de aplicativo web enfocado a la enseñanza de los niños en los animales. El prototipo se desarrollará en p5.js en la plataforma de code sandbox y será muy intuitivo para los usuarios.

Antecedentes

El proyecto nace debido a que los niños citadinos limitan su interacción con solo los animales domésticos y a medida que los infantes van creciendo, aumenta su interés por conocer los demás animales, por lo tanto se realiza un modelo prototipo que le permita a los niños de 3 años en la ciudad de Cali conocer en mayor profundidad a estos seres vivos y su hábitat de una manera realista y didáctica.

Tomamos de referencia varias páginas como “Bosque de las actividades”, “Quiz: Reptiles”, “Los animales vertebrados e invertebrados para niños - Vídeos educativos para niños” y “Seres vivos: Los animales” y de otras guías de programación como las referencias de p5.js para las diferentes funciones que implementaremos en el aplicativo.

Step 1: Crear Una Cuenta En Code Sandbox

Ir a la pagina https://codesandbox.io/index2.
Iniciar sesión en el botón sign in en la parte superior izquierda.
Autoriza el uso a Code Sandbox desde GitHub mediante la ventana emergente.
Selecciona tu nombre de usuario y termina la creación de la cuenta.

Step 2: Crear Un Nuevo Proyecto

Dentro de Code Sandbox crea un nuevo proyecto, presionando en el botón New Sandbox.

Step 3: Buscar La Plantilla De P5.js

Escoge la plantilla de p5.js desde las plantillas oficiales.
Ubicarse al lado izquierdo de la pantalla.
Hacer click en el archivo que se llama sketch.js.

Step 4: Crear Las Variables

Let cumple con la función de crear y nombrar nuevas variables. Una variable es un contenedor de un valor.

Para el desarrollo del proyecto se crean las variables en diferentes apartados para que haya una organización.

Se crean las variables que irán de fondo en la aplicación, como por ejemplo los hábitats y el sonido.
Se crean las variables de cada apartado, un apartado de las variables de selva y otro apartado para la finca.

Step 5: Cargar Recursos De Imágenes Al Proyecto

Cree una nueva carpeta en el explorador de archivos del proyecto que sea para las imágenes. Con ese fin use el icono de carpeta nueva que está en la cabecera del explorador de archivos.
Cargue una imagen a la carpeta de imágenes del proyecto en Code Sandbox. Usando para esto el icono de flecha hacia arriba que está en la cabecera del explorador de archivos.
Abra la administración de almacenamiento de Code Sandbox. Mediante el menú desplegable de la esquina superior derecha.
Presione doble clic sobre la imagen que subió anteriormente. Esta acción abrirá una nueva pestaña con la imagen cargada.
Copie la URL de la imagen presente en la pestaña nueva que se abrió, desde la barra de direcciones de su navegador Web.

Step 6: Cargar Recursos De Sonido Al Proyecto

Cree una nueva carpeta en el explorador de archivos del proyecto que sea para los audios. Con ese fin use el icono de carpeta nueva que está en la cabecera del explorador de archivos.
Cargue los audios carpeta de sonidos del proyecto en Code Sandbox. Usando para esto el icono de flecha hacia arriba que está en la cabecera del explorador de archivos.
Abra la administración de almacenamiento de Code Sandbox. Mediante el menú desplegable de la esquina superior derecha.
Presione doble clic sobre la imagen que subió anteriormente. Esta acción abrirá una nueva pestaña con la imagen cargada.
Copie la URL de la imagen presente en la pestaña nueva que se abrió, desde la barra de direcciones de su navegador Web.

Step 7: Crear La Función Preload() Y Cargar Las Imágenes

La función preload() es ejecutada antes de setup(), es usada para manejar la carga asíncrona de archivos externos. Si se define una función preload(), setup() esperará hasta que las llamadas a funciones load hayan terminado.

Se crea la función Preload() para poder cargar todos nuestros recursos que hemos añadido previamente al Code SandBox.

En este se define el formato en el que recibirá la aplicación las imágenes y los sonidos.

Step 8: Crear La Clase Bubble

Se hace la creación de una clase que contenga la imagen del animal, los métodos para mover y reproducir el sonido.

Para ello se crean los diferentes métodos de mostrar, mover, cuando la imagen es presionada que distancia recorre y si la imagen cumple con dichas condiciones esta reproducirá un audio del animal seleccionado.

Step 9: Crear La Clase BubbleReciv

La clase BubbleReciv cumple el funcionamiento de recibir las imagenes si son posicionadas en su posición, y mantenerlas estáticas, básicamente este será el destino de las imágenes que se están arrastrando.

Para ello por ser el destino de las imágenes hay que especificar visualmente donde es esa posición en la aplicación web, para ello en la clase se crean unos círculos sin relleno que serán de referencia.

Step 10: Modificar La Función Setup()

La función setup() es ejecutada una vez, cuando el programa empieza. Es usada para definir propiedades iniciales como amaño de la pantalla y color de fondo y para cargar medios como imágenes y tipografías cuando el programa empieza.

Se modifica la función Setup() para poder cargar los sonidos con la función loadSound().
Se crean los objetos animales por la clase Bubble.
Se crea el destino de esos animales por la clase BubbleReciv.

Step 11: Crear La Función Draw()

La función draw() es ejecutada después de setup(), y ejecuta continuamente las líneas de código dentro de su bloque hasta que el programa es detenido.