2025-11-20 14:54:59 +01:00
# Portafolio LDM-ASIR: Desarrollo Web
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 ** .
2025-11-20 15:06:58 +01:00
**Ubicación:** [`projecte-final/testing/` ](projecte-final/testing/indexSAD.html )
* **Nota:** La ubicación del proyecto final es [`projecte-final/main/` ](projecte-final/main/indexSAD.html ), pero la carpeta `testing` contiene la versión en desarrollo con comentarios y pruebas.
2025-11-20 14:54:59 +01:00
### 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 ** <br>Mini-web con fichas de actores y películas. | [`/ACT24_sad` ](ACT24_sad/inicial_sad.html ) |
| **ACT 27 ** | 🖌️ **Katsushika Hokusai ** <br>Biografía y galería de arte. | [`/ACT27_sad` ](ACT27_sad/ACT27_sad.html ) |
| **ACT 25 ** | 🐶 **Mascotas ** <br>Estructura básica de blog. | [`/ACT25_sad` ](ACT25_sad/index.html ) |
| **ACT 23 ** | 📝 **Tablas ** <br>Maquetación de datos y listas. | [`/ACT23_sad` ](ACT23_sad/act23_sad.html ) |
| **ACT 21/22 ** | 🌑 **Conceptos Básicos ** <br>Primeros pasos con HTML/CSS (La Lluna). | [`/ACT21_sad` ](ACT21_sad/act21_sad.html ) |
---
## Notas de Aprendizaje (DevLog)
> *"Es buena práctica documentar lo que se aprende."*
### Glassmorphism
2025-11-20 15:03:10 +01:00
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.
2025-11-20 14:54:59 +01:00
* **Nota:** El uso excesivo de `backdrop-filter` puede impactar el rendimiento (batería) en móviles antiguos.
### Etiqueta `<iframe>`
2025-11-20 15:03:10 +01:00
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.
2025-11-20 14:54:59 +01:00
* **Accesibilidad:** Es crucial incluir el atributo `title="..."` para que los lectores de pantalla sepan qué contenido se está mostrando.
---
## Cómo ejecutar el proyecto
1. Clona o descarga este repositorio.
2. Abre la carpeta en **Visual Studio Code ** .
3. Recomendado: Usa la extensión **Live Server ** para visualizar los cambios en tiempo real.
4. Abre `projecte-final/main/indexSAD.html` para ver el resultado final.
---
<p align="center">
<sub>© 2025 Lil_Carpi - LDM ASIR</sub>
</p>
