Proyecto Web destacado: «The New Old Gallery», arte en tu mano

Por /

A continuación presentamos uno de los proyectos presentado por los alumnos de NEOLAND. Las autoras son Sara Pinilla y Ana Sánchez-Fresneda, alumnas del Full Stack Bootcamp te estamos hablando de The New Old Gallery.

The New Old Gallery es una galería digital. Pero, ¡ojo!, no se trata de una galería al uso. Sino de un concepto revolucionario que conecta los entornos urbanos y el mundo virtual. No se trata simplemente de una web en la que poder ver obras de arte. En The New Old Gallery el arte cobra vida. Esto quiere decir que las obras que ya están en la calle adquieren una nueva dimensión gracias a un smartphone y la Realidad Aumentada.

Este proyecto tiene dos fases. En primer lugar, el archivo de obras digitales dentro de la web. A través del cual se busca acercar el arte a más gente. Por otro lado, los artistas emergentes. The New Old Gallery es el altavoz perfecto para todos aquellos que quieran difundir su obra.

The New Old Gallery nació como Trabajo Final de Grado de Diseño Gráfico creado por Anilla Studio. Cuando comenzaron el Bootcamp de Full Stack en NEOLAND decidieron seguir desarrollandolo aplicando los conocimientos adquiridos durante 12 semanas. Gracias a ellos han logrado confeccionar un gran producto, tanto en el parte del Back-End como en la de Front-End.

The New Old Gallery va dirigido a un target joven. Fundamentalmente nativos digitales. Para ellos, el uso de apps es algo cotidiano. Sin embargo, están menos familiarizados con los museos tradicionales. Esto también se debe a que consumen una mayor cantidad de arte urbano.

Por tanto, el objetivo de The New Old Gallery es acercar el arte urbano a un gran número de personas. Pero no solo eso, sino también darle un valor añadido a cada una de las obras. Hasta ahora hemos hablado de los usuarios potenciales de The New Old Gallery, pero no podemos olvidar a los artistas emergentes. Para ellos, The New Old Gallery es un escaparate que les permite difundir su obra.

JavaScript ha sido el lenguaje de programación elegido para estructurar The New Old Gallery. En concreto se eligió la versión ES6 (estándar que sigue JavaScript desde Junio de 2015) junto con TypeScript. A través de ellos, se han generado las funcionalidades del proyecto. Esto ha permitido que los usuarios puedan interactuar con las diferentes vistas de la página web.

Estructura Front-End

Uno de los primeros pasos fue diseñar la parte visual y desarrollar sus funcionalidades. No podemos olvidar que la razón de ser de The New Old Gallery es el arte. Por lo que la parte visual del producto es de vital importancia. Era necesario crear una web llamativa, pero al mismo tiempo intuitiva para artistas y visitantes.

Se abarcaron dos partes fundamentales. Por un lado, en el Front-end se diseñó la parte visual y se desarrollaron las funcionalidades. Es decir, las interacciones entre el usuario y la web.

Los lenguajes usados para la maquetación de las vistas fueron HTML5 y CSS3. Bootstrap, librería CSS, sirvió de ayuda para adaptar la web a múltiples dispositivos. Por otra parte, jQuery, librería de JavaScript, sirvió de apoyo para la realización de las animaciones de la página.

El framework o entorno de trabajo utilizado para desarrollar la parte front-end fue Angular 7.

Estructura Back-End

En el Back-end lo primero que se hizo fue generar la base de datos y definir las peticiones (querys) a ésta. Según el tipo de petición, se filtran y/o muestra diferente información de la base de datos. Además, a través de estas peticiones se habita el componente «formulario» para que los usuarios puedan introducir colaborar en la ampliación de la base de datos.

Las consultas a base de datos, se han gestionado desde MySQL. Esto se debe a que se ha apostado por un modelo de base de datos relacional, Para ello se optó por Sequel Pro (aplicación de administración para MySQL).

El framework utilizado para esta parte fue Node.JS, junto con la infraestructura para aplicaciones web Express.JS. Esto permite crear las APIs conectadas con el Front-End. Se utilizó la app Postman para la gestión de APIs, de manera que se pudiese comprobar que las peticiones a la base de datos funcionaban correctamente.

  • Diseño del proyecto. El primer paso fue diseñar la interfaz gráfica. El objetivo era crear una página web llamativa, con mucha fuerza visual tipográfica. The New Old Gallery cuenta con una línea estética mínimal. Se sustenta en dos colores básicos: blanco y negro. Con estos colores se busca destacar el contenido. A esto le combinamos una paleta no muy extensa de colores flúor con el que realzar botones y otros elementos clicables o interactivos. Además esquematizamos las funcionalidades de los elementos, para su posterior desarrollo.
  • Maquetación general de las vistas. Para ello se utilizó el framework Angular 7, generando componentes individuales con sus respectivos HTML, CSS y TypeScript.
  • Generación de rutas. Una vez que todos los componentes estuvieron creados, los conectamos a través de rutas, de manera que el usuario pudiese navegar con facilidad.
  • Generación de la funcionalidad. El primer paso fue la funcionalidad individual de cada uno de los componentes. Todos ellos generados en sus respectivos TypeScripts, y al mismo tiempo se crearon los servicios. Se trata de los componentes que se encargan de tareas específicas dentro del proyecto así como la conexión a aplicaciones externas. De esta manera se aporta interacción y complejidad a la web.
  • Generación de la base de datos. La base de datos está dividida en tres tablas principales (autores, piezas, categorías). Todas ellas están conectadas entre sí de manera relacional (con tablas de índices). A través de Node.JS y Express.JS se conectan con la aplicación. Se generan todas las querys o consultas/peticiones, así como las rutas de la API a las que acceden los servicios de la app de Angular 7

Si quieres saber más de The New Old Gallery, ¡dale al play!

Abrir chat