Bienvenido a mi colección de prácticas y proyectos. Este repositorio documenta mi progresión en el aprendizaje de tecnologías web, desde estructuras básicas HTML hasta diseños modernos con efectos visuales avanzados.

Tecnologías Utilizadas

Lenguajes:
Fuentes e Iconos: Google Fonts (Manjari) & Font Awesome.
Estilos: Flexbox, CSS Grid, Posicionamiento Absoluto/Relativo.
Diseño UI: Glassmorphism (Efecto cristal), Diseño Responsivo.

Proyecto Destacado: JocsMania

El trabajo principal de este repositorio. Una web moderna sobre videojuegos con estética Glassmorphism.

Ubicación: projecte-final/testing/

Nota: La ubicación del proyecto final es projecte-final/main/, pero la carpeta testing contiene la versión en desarrollo con comentarios y pruebas.

Características Clave

Diseño Glassmorphism: Uso intensivo de backdrop-filter: blur para crear paneles de cristal semitransparentes.
Navegación Móvil: Menú hamburguesa totalmente responsive creado con CSS puro (Checkbox Hack).
Tarjetas Interactivas: Efectos de hover y transiciones suaves en la lista de juegos.

Archivo Principal	Descripción
`indexSAD.html`	Página de inicio con las "Top Ventas".
`videojocsSAD.html`	Catálogo completo de juegos.
`style.css`	Hoja de estilos principal con variables y media queries.

Colección de Prácticas (Ejercicios)

Evolución de ejercicios realizados durante el curso:

Actividad	Temática	Ruta
ACT 24	🎬 El Cinema Mini-web con fichas de actores y películas.	`/ACT24_sad`
ACT 27	🖌️ Katsushika Hokusai Biografía y galería de arte.	`/ACT27_sad`
ACT 25	🐶 Mascotas Estructura básica de blog.	`/ACT25_sad`
ACT 23	📝 Tablas Maquetación de datos y listas.	`/ACT23_sad`
ACT 21/22	🌑 Conceptos Básicos Primeros pasos con HTML/CSS (La Lluna).	`/ACT21_sad`

Notas de Aprendizaje (DevLog)

"Es buena práctica documentar lo que se aprende."

Glassmorphism

Efecto de tipo cristal opaco. Popularizado por Apple con su entorno gráfico "Liquid Glass", un efecto que drena la batería del teléfono a velocidad insana, y que ya estaba presente desde Windows 7 con Windows Aero. Este efecto utiliza backdrop-filter: blur para crear una apariencia de vidrio esmerilado.

Nota: El uso excesivo de backdrop-filter puede impactar el rendimiento (batería) en móviles antiguos.

Etiqueta `<iframe>`

Se utiliza para incrustar documentos externos (mapas, vídeos). Es un efecto que ya utilicé una vez en otro proyecto personal que ahora es lost media, lastimosamente.

Accesibilidad: Es crucial incluir el atributo title="..." para que los lectores de pantalla sepan qué contenido se está mostrando.

Cómo ejecutar el proyecto

Clona o descarga este repositorio.
Abre la carpeta en Visual Studio Code.
Recomendado: Usa la extensión Live Server para visualizar los cambios en tiempo real.
Abre projecte-final/main/indexSAD.html para ver el resultado final.

README.md

Portafolio LDM-ASIR: Desarrollo Web