En este instructable te mostraremos cómo desarrollar una aplicativo web interactivo, que le permitirá al usuario conocer a los animales que habitan la selva amazónica y una finca agropecuaria, a su vez de aprender datos curiosos acerca del animal, tales como su sonido y aspecto.

Antecedentes

El proyecto nació dado que teníamos una problemática y esta era que “Los niños entre 2 y 5 años, sienten una gran atracción por conocer las diferentes formas de vida que pueblan el planeta; en especial, el interés hacia los animales se va acrecentando conforme van creciendo”.

La primera referencia que recibimos fue mediante una encuesta dirigida a los profesores de instituciones de Cali, Colombia que se encargan de la formación de niños que se encuentran en la edad de 2 a 5 años.

También consultamos otras fuentes que compartieran la misma interacción en la cual estábamos trabajando, una de estas fuentes fue (animals de national geographic), esta genera una experiencia inmersiva mediante sonidos, rasgos físicos del animal, entre otros datos que hacen de esta una de las mejores paginas para aprender a grandes rasgos los datos que se requieren para conocer a estos majestuosos animales.

Step 1: Materiales

Al ser un software de desarrollo, las herramientas que vamos a necesitar son principalmente herramientas digitales, y aunque se utilizaran programas específicos (ej: codesandbox.io, adobe premiere pro…) estos pueden ser completamente reemplazables por otros de objetivos similares según preferencia del desarrollador.

Dichos materiales a utilizar son:

Generales:

-Computador

-Conexión a internet

Herramientas digitales:

-codesandbox.io

-Google documents

-Buscador google

-Adobe premiere pro

-Adobe illustrator

Contenidos Multmedia Utilizados:

-Carpeta en Google Drive

Step 2: Step 2: Diseñar Bocetos De La Interfaz En Illustrator

Para este paso se requieren conocimientos basicos en adobe illustrator, los cuales ayudarán para el desarrollo óptimo de un boceto, el cual deberá generar una conexión legible entre lo que se desea alcanzar en cuanto a diseño y el programador, para este paso podrás orientarte por videos tutoriales en herramientas básicas de illustrator, también tendrás que realizar una investigación exhaustiva de otros diseños de aplicativos web, sin embargo por el momento se le recomienda al diseñador que cree este boceto a partir de su creatividad, de lo contrario si se desea apoyar de alguna fuente de aplicativo interactivo se aconseja conservar la fidelidad del diseño.
Una vez haya decidido tomar o no referencia de algún aplicativo web, se deberá realizar una consulta de diseño acerca de: la paleta de colores y sus diferentes propósitos, de igual manera se deberá indagar en el concepto de minimalismo para aplicativos web esto ayudará a la fácil conexión del usuario con el entorno.

Step 3: Step 3: Programar El Aplicativo En Codesandbox.io

Para la programación recomendamos un conocimiento básico en desarrollo web a través de javascript y manejo basico de la plataforma codesandbox.io, que igualmente se pueden adquirir a través de diferentes tutoriales (te dejamos unos de nuestra preferencia).

Programacion javascript desde cero

Guia basica para aprender a utilizar codesandbox.io

La estructura se basó en una navegación jerárquica partiendo de los dos tipos de hábitat en los que se encuentran los animales a plasmar. Para esto se grafico un área de trabajo canvas y se le adicionaron botones que direccionan al interior de cada hábitat a través del uso de una variable que dibujaba otra área de trabajo.

Dentro de cada hábitat se mantuvo el mismo tipo de navegación para conducir a través de botones a los diferentes animales que se encontraban ahí. Ya una vez dentro de cada espacio respectivo para cada animal se predispone un área de trabajo con los espacios requeridos para agregar posteriormente la información necesaria en forma de texto, imagen y/o video.

Adicional al flujo anteriormente mencionado, cabe destacar la implementación de unos botónes fijos en todos los apartados del aplicativo para la navegación principal que contienen la funcionalidad de regresar al menú anterior.

Dejamos el código de nuestra aplicativo como una ayuda de referencia para la implementación del proyecto a tu manera, solo debes copiar y pegar los archivos en el espacio sketch.js e index.html de acuerdo al nombre del archivo, intercambiar los campos de signo "" que tienen direcciones URL y agregar en ellos tu contenido a mostrar subiendo los archivos a la plataforma, pero eso lo veremos más adelante.

Step 4: Step 4: Implementar Detalles Gráficos Y Decorativos a La Aplicación.

Para este paso tomarás referencias de diferentes sitios web que distribuyen contenido similar al cual tu deseas generar, en nuestro caso escogimos como referencia páginas tales como animales de National Geographic, animales de Discovery Latino y otros contenidos se obtuvieron de las páginas de pixabay y pexels, despues de indagar un poco deberás empezar a realizar la implementación en tu código, te dejaremos como referencia este portal web el cual te ayudará en tu creación inicial de diseño , en este se te mostrará lo más básico desde creación de un canvas hasta la creación de una figura geométrica, sin embargo te invitamos a indagar en esta página (p5.js).

A continuación lo que hicimos, fue generar una margen y un color a nuestro página en blanco, tambien debiamos darle color de relleno a nuestros círculos los cuales se utilizaron para referenciar nuestros animales, este tipo de funciones fueron realizadas mediante conceptos aprendidos en la referencia anteriormente mencionada . Una vez hayas aprendido estos conceptos básicos será más fácil encaminar tu proyecto hacia una experiencia interactiva más agradable visualmente.

Step 5: Step 5: Añadir El Contenido Al Aplicativo (Textos, Imágenes, Videos)

Incluir el contenido a mostrar será nuestra última tarea, la tarea que le da una razón a nuestro aplicativo y por tanto podemos comunicar una idea o información a través de ella.

Para esto vamos a recurrir a la plataforma code sandbox y acceder a su código.

Primero ingresamos a la plataforma, en la parte izquierda encontraremos el menú principal de la plataforma, dentro de la cual observaremos unas carpetas llamadas "Files", de las cuales seleccionaremos o crearemos una dependiendo del tipo de archivo (video, sonido, imagen) y orden que se le vaya a dar al aplicativo. El punto principal es que estas carpetas funcionan como contenedores de dichos archivos.

Para contenerlos en dichas carpetas debemos importarlos a esa ubicación, para lo cual seleccionaremos dicha carpeta haciendo click sobre ella; posteriormente aparecerán 5 items al lado de ella, seleccionaremos la flecha que va hacia arriba y la plataforma nos permitirá escoger el archivo que deseamos importar.

Una vez el archivo se encuentra en la carpeta, es hora de ponerlo en el código para que sea visible en el aplicativo. Para esto iremos a la parte superior derecha de la plataforma donde se encuentra un menú en forma de tres puntos; seleccionaremos esa opción y se desplegaran un conjunto de opciones, seleccionaremos "store management" y se abrirá una ventana emergente, seleccionaremos el archivo que deseamos subir y daremos repetidamente click sobre él hasta que se abra una nueva pestaña en el navegador con dicho archivo; de esa pestaña copiamos su URL.

Posteriormente nos dirigimos a la plataforma y sobre el código pegaremos la URL del archivo en el lugar donde, de acuerdo a la lógica del aplicativo, deseemos que este sea visible. Todo esto mediante la correcta declaración del archivo, la cual presenta la siguiente fórmula: const + Nombre de una variable que queramos darle a la imagen + = + " + URL + " + ;