Proyecto universitario para Lenguaje de Marcas y Sistemas de Gestión de Información

Índice

ÍNDICE 2

1. Introducción

3

2. Análisis de alternativas y justificación

3. Objetivos 4

4. Análisis de requisitos

4

4.1. Funcionalidades

4

4.2. Requisitos técnicos

5

5. Proceso de diseño

5

5.1. Bocetos y Wireframes

5

5.2. Paleta de colores y tipografía

5

5.3. Inspiración visual

6

5.4. Componentes destacados

7 7

6. Desarrollo

8 8

6.1. Estructura de carpetas y archivos

8

6.2. Explicación del código

8 8

6.3. Justificación de decisiones

9

7. Pruebas y validación

9

8. Conclusiones y mejoras futuras

9 9 3

Introducción al proyecto

El presente proyecto consiste en el desarrollo de una plataforma colaborativa y social, inspirada en modelos como GitHub y Letterboxd, pero aplicada al mundo de la literatura. un enfoque que responde a la tendencia actual de crear comunidades activas de lectores, donde la interacción, la recomendación y la participación colectiva enriquecen la experiencia de lectura. El objetivo es aplicar los conocimientos adquiridos en la asignatura "Lenguaje de Marcas y sistemas de Gestión de Información", utilizando HTML y CSS para crear una web funcional, visualmente atractiva y responsiva y donde se apliquen buenas prácticas de accesibilidad. La elección de esta temática responde tanto a intereses personales como a la oportunidad de trabajar con un catálogo de productos, buscador, filtros, formulario de contacto ... , cubriendo así una amplia variedad de elementos y estructuras propias del desarrollo web.

Análisis de alternativas y justificación del proyecto

Antes de decidirme por este proyecto, analicé varias opciones:

• Réplica de Netflix: Muy visual, pero limitada en cuanto a funcionalidades interactivas para un proyecto básico de HTML y CSS. Esta opción la contemplé al principio por sugerencia de la profesora de la asignatura, quien ya tuvo la ocasión de valorar un proyecto similar en años anteriores. La descarte por no ser repetitiva (buscaba una opción más personal) y por la mencionada limitación a la hora de desarrollarla.
• Web de eventos (selenievents.com): Interesante, pero menos alineada con la temática de la asignatura y con menor potencial de filtrado y catálogo. Se trata de una web muy básica, creada para la empresa para la que trabajo. Aunque la web está hecha en Wordpress, utilizando el constructor Divi, y es potencialmente replicable en HTML, también la descarte por su excesiva simplicidad y para evitar partidismos.
• Réplica de Wallapop: Compleja y más orientada a aplicaciones con backend y bases de datos. Este caso era el extremo opuesto, una plataforma muy complicada y que sería más difícil de replicar, al menos con las funcionalidades propias de Wallapop, por lo que se descartó igualmente; quería algo que no fuera una simple réplica visual.
• Página de compra-venta de libros: Permite trabajar con catálogos, filtros, formularios y carrito, cubriendo más aspectos de HTML y CSS. La plataforma de todostuslibros.com es una web creada para que los usuarios puedan acceder a un amplio catálogo no sólo de libros, sino también de numerosas librerías con las que contactar para reservar y comprar el libro que buscas, incluyendo la opción de envío a domicilio. Como compradora de libros habitual, me interesaba a nivel personal crear una versión de ella y además resultaba un reto interesante.
• Plataformas colaborativas, como GitHub o Letterboxd: Este modelo de consumo en internet representa la esencia del desarrollo de las redes de comunicación modernas, accesibles y de gran alcance. La mayoría de las industrias de comunicación están siendo transformadas o redefinidas por Internet, lo cual ha permitido el nacimiento de nuevos servicios como correo electrónico (e-mail), telefonía por internet (VoIP), televisión por Internet, música digital, y vídeo digital. Las industrias de publicación de periódicos, libros y otros medios impresos se están adaptando a la tecnología de los sitios web, o están siendo reconvertidos en blogs, web feeds o agregadores de noticias. Internet también ha permitido o acelerado nuevas formas de interacción personal por medio de mensajería instantánea, foros de Internet, y redes sociales. Esto ha beneficiado al comercio, pero también al usuario doméstico, que ha encontrado en el mar de la world wide web una fuente inagotable de intereses y formas de cultivarlos.

De este modo, finalmente, opte por una web inspirada en las plataformas colaborativas de libre acceso, como github.com o letterboxd.com, porque pueden ser fáciles de diseñar (en cuanto a interfaz), escalables y permiten demostrar competencias en maquetación, diseño y estructuración de contenidos, además de ser perfecta para mí como usuaria.

Objetivos del proyecto

• Crear una web responsiva, visualmente atractiva y accesible para usuarios con discapacidad (en la medida que lo permita HTML y CSS, sin Javascript).
• Incluir un buscador de libros con filtros por categorías.
• Añadir un formulario de contacto funcional.
• Permitir añadir enlaces de descarga.
• Documentar el proceso de diseño y desarrollo, justificando cada decisión.

Análisis de requisitos del proyecto

Funcionalidades del proyecto

• Catálogo de libros: Presentación de libros con imagen, título, autor y editorial.
• Buscador y filtros: Permite buscar libros por título y autor.
• Apartado para subir y descargar archivos de libros en PDF.
• Formulario de contacto: Para que los usuarios puedan enviar consultas.
• Navegación clara: Menú principal accesible desde todas las páginas(o apartados).

Requisitos técnicos del proyecto

• Uso exclusivo de HTML y CSS.
• Adaptación para usuarios minusválidos en la medida de los posible (uso de "alt" para el lector de pantallas).
• Diseño responsivo (adaptado a móviles y tablets).
• Código validado y comentado.

Proceso de diseño del proyecto

Bocetos y Wireframes del diseño

Antes de comenzar la maquetación, realicé bocetos a mano de la estructura principal de la web, definiendo la ubicación del menú, buscador, catálogo y pie de página. (Adjuntar imágenes de los bocetos). La web sigue una estructura clásica y funcional: cabecera con menú de navegación, una sección visual destacada, bloques de contenido diferenciados (recomendaciones, buscador, PDFs, reseñas) y un pie de página. El contenido principal se centra en un contenedor de ancho máximo (1100px), lo que asegura buena legibilidad y evita líneas de texto demasiado largas. La cabecera utiliza un degradado lineal en tonos tierra y dorado ( -- primary y -- secondary), transmitiendo calidez y profesionalidad. El menú de navegación es horizontal, centrado y con enlaces destacados en blanco, que cambian a azul oscuro casi negro ( -- accent) al pasar el ratón (hover), mejorando la accesibilidad y la interacción. El logo tiene un tamaño fijo, asegurando coherencia visual. La sección .cabecera destaca con una imagen de fondo a toda anchura y 400px de alto, con una superposición oscura semitransparente para mejorar el contraste y la legibilidad del texto principal sin tocar el HTML, aplicado con el pseudoelemento cabecera :: before. El texto central es blanco y está perfectamente centrado tanto vertical como horizontalmente.

Paleta de colores y tipografía del diseño

Colores principales:

• Fondo principal en tonos neutros (#f7f6f1).
• Tarjetas y formularios en blanco puro.
• Elementos destacados en marrón rojizo ( -- primary), dorado ( -- secondary) y azul oscuro casi negro ( -- accent).
• Textos en negro suave y blanco para contraste.

Tipografía: Uso de 'Segoe UI', Arial, sans-serif para máxima legibilidad y compatibilidad.

Inspiración visual del diseño

La estructura y funcionalidades están inspiradas en letterboxd.com, pero adaptando el diseño para simplificarlo. Dicha estructura está pensada para mostrar de forma clara y ordenada tanto el catálogo de libros como las puntuaciones dadas por los usuarios, recomendaciones y secciones especiales. A continuación, analizo la web y desgloso cómo está organizada: La página principal de Letterboxd está diseñada para ser una red social visual y atractiva, centrada en la experiencia del usuario y en la interacción con películas. Su estructura HTML es semántica y modular, siguiendo las buenas prácticas de accesibilidad y diseño responsivo. La cabecera (

) contiene el logotipo, el menú de navegación principal y los botones de acceso o registro. Este menú suele estar implementado con una lista

dentro de un