PS5

En este instructable te mostraremos cómo desarrollar una aplicativo web interactivo, que le permitirá al usuario conocer los componentes de la consola de nueva generación de SONY (PS5), a su vez también tendrá la oportunidad de conocer dicha consola por medio de un diseño en 3D.

Antecedentes

El proyecto nació dado que teníamos una problemática y esta era que "Los estudiantes de Ingeniería Multimedia de la Universidad Autónoma de Occidente - UAO; que cursan la asignatura Arquitectura de Sistemas Multimedia; en el transcurso de la asignatura, se ven inmersos en diferentes temáticas que abarcan el Hardware y el Software, mediante metodologías activas de aprendizaje, las cuales incluyen el aula invertida (estudio del material previo a la sesión sincrónica)"

También consultamos otras fuentes que compartieran la misma interacción en la cual estábamos trabajando, una de estas fuentes fue (eloutput), aunque al contrario de la nuestra esta no genera una experiencia tan inmersiva como la nuestra, si comparte detalles tecnicos muy puntuales.

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

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

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: 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 unas 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 cuatro requerimentos principales para el sitio web. Para esto se grafico un área de trabajo canvas y se le adicionaron botones que direccionan al interior de cada espacio determinado a través del uso de una variable que dibujaba otra área de trabajo. Dentro de cada espacio de trabajo se mantuvo el mismo tipo de navegación para conducir a través de botones a los diferentes componentes que se encontraban ahí. Ya una vez dentro de cada espacio respectivo 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.

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 eloutput, as.com y otros contenidos se obtuvieron de las páginas de playstation, 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).

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: Añadir El Contenido Al Aplicativo ( 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. A continuación te dejaremos un link en el cual podrás consultar las diferentes formas de poner tus imagenes y videos en tu página web.