Práctica 1

Práctica 1

Esta es la documentación técnica y manual de usuario de mi práctica 1.

Índice de Contenidos

1. Documentación Técnica
2. Manual de Usuario
3. Mejoras Implementadas
4. Autor

Documentación Técnica

Descripción del Proyecto

Este proyecto es una tienda online de vinilos que consta de un servidor web (back-end) y una interfaz de usuario (front-end). El servidor está implementado con Node.js y sirve archivos estáticos (HTML, CSS, imágenes) para la presentación de la tienda. La aplicación permite a los usuarios ver los productos disponibles y acceder a detalles específicos de cada vinilo.

Estructura del Proyecto

• index.html: Página principal de la tienda, que muestra los productos disponibles.
• style.css: Archivo CSS para estilizar la interfaz de usuario.
• MEDIA/: Directorio que contiene las imágenes de los productos y el logo.
• tienda.js: Archivo principal del servidor Node.js.
• carrito.js: Archivo js para el botón del carrito.
• 404.html: Página de error personalizada para rutas no encontradas.
• ProductoN.html : Página del producto N,

$$ N \in \mathbb{Z}, \quad 1 \leq N \leq 9 $$

Tecnologías Utilizadas

• Front-end:
  • HTML5
  • CSS3
• Back-end:
  • Node.js
  • Módulos nativos de Node.js (http, fs, path)

Funcionalidades del Servidor

• Servidor HTTP: Maneja solicitudes y respuestas HTTP.
• Servicio de Archivos Estáticos: Sirve archivos HTML, CSS, imágenes y otros recursos.
• Manejo de Errores 404: Si un archivo no existe, se sirve una página de error personalizada (404.html).
• Listado de Archivos: Accediendo a la ruta /ls, se muestra un listado de los archivos en el directorio público.

Manual de Usuario

1. Requisitos:

   • Node.js instalado en el sistema.
   • Navegador web moderno.

2. Pasos para ejecutar el proyecto:

   • Clona el repositorio o descarga los archivos del proyecto.

   • Abre una terminal en el directorio del proyecto.

   • Ejecuta el siguiente comando para iniciar el servidor:

     node tienda.js

   • Abre un navegador y visita http://localhost:8001 para acceder a la tienda.

   • Al ingresar a la tienda, se podrá acceder a la página de la cesta donde únicamente se puede volver a la tienda (es una cesta sin utilidad, meramente decorativa) y a su vez, visualizar una selección de productos disponibles:

     • El Madrileño - C. Tangana
     • A New Star (1993) - Rels B
     • La Espalda del Sol - Diego 900
     • Magua con Miel - Choclock
     • Moonlight 992 - Cruz Cafuné
     • SAYONARA - Álvaro Díaz
     • RR - Rosalía, Rauw Alejandro
     • Bodhiria - Judeline
     • Bolasie - Sokren 07

Para ver más detalles sobre un vinilo en particular, se debe hacer clic sobre su imagen o en "Ver más". Esto redirigirá a la página del producto seleccionado.

• Dentro de la Página de un Producto:

  En la página de cada producto, el usuario podrá:

  • Ver la portada del vinilo en un tamaño ampliado.
  • Leer la descripción del álbum y detalles como el artista y el precio.
  • Consultar el listado de canciones (tracklist) del disco.
  • Añadir simbólicamente al carrito (cesta no funcional, meramente decorativa).
  • Regresar a la página principal presionando el botón "Inicio" o el logo de la página.

Características Adicionales

• Navegación Fácil: La tienda cuenta con una interfaz intuitiva para que los usuarios puedan desplazarse fácilmente entre productos y volver a la página principal.
• Enlace a Spotify: Desde la página de cada producto, se incluye un enlace directo al perfil del artista en Spotify para escuchar su música.
• Compatibilidad Total: La tienda es accesible desde distintos dispositivos, tanto ordenadores como móviles y tablets.

Notas

Si se intenta acceder a un recurso inexistente, el sistema mostrará una página de error indicando que el archivo solicitado no está disponible.

Mejoras Implementadas

1. Página de Error 404 Personalizada: Se ha añadido una página de error 404 personalizada para mejorar la experiencia del usuario, con un diseño amigable y enlaces de navegación que ayudan a redirigir al usuario a otras secciones de la página.

2. Listado Dinámico de Archivos: La ruta /ls ahora muestra un listado dinámico de los archivos en el directorio público, lo cual es útil para debugging y monitoreo del sistema.

3. Favicon Implementado: Se ha añadido un favicon para personalizar la pestaña del navegador, mejorando la identidad visual del sitio.

4. 9 Productos Agregados: Se han añadido 9 productos al catálogo, con imágenes, descripciones y precios para mejorar la oferta disponible a los usuarios.

5. Cesta de Compra: Se ha incorporado una página de cesta de la compra sin funcionalidad.

Autor

Daniel Pérez