Sitio Web IE - Beatriz Castro Vega
| Título | Sitio Web IE |
|---|---|
| Tipo de Proyecto | Proyecto de Curso |
| Palabras Clave | sitioweb |
| Período | 2025-2025 |
| Asignatura | Imagen Escrita |
| Del Curso | Imagen Escrita 2025 |
| Carreras | Diseño |
| Alumno(s) | Beatriz Castro Vega |
| Profesor | Javiera Ruiz |
| URL | https://beacastrov.github.io/beacastrov/ |
Sitio Web
Introducción
Este sitio presenta mis trabajos de Imagen Escrita 2025 y fue desarrollado desde una base mínima, modificando estructura HTML, estilos CSS y contenido para lograr una identidad limpia y funcional. La página organiza los encargos de p5.js en tarjetas con portada, incorpora un fondo animado sutil y prioriza la lectura en dispositivos de escritorio y móviles.
Descripción del código
El sitio está construido con HTML + CSS y un pequeño script de JavaScript para el fondo animado. La navegación es simple (navbar fija), los contenidos están agrupados en bloques reutilizables (tarjetas, botones, acordeón) y los encargos se enlazan a la Wiki institucional.
Wireframe
El sitio se organiza en bloques verticales y apilados en una sola columna:
1. Encabezado superior (Navbar):
• Barra horizontal fija en la parte superior, con los enlaces principales: Inicio y Encargos.
• Fondo translúcido con desenfoque que diferencia la navegación del resto de la página.
2. Título principal:
• Texto grande y centrado con un degradado en tonos pastel (rosa, naranjo, verde, celeste y violeta).
• Representa el título del portafolio: “Portafolio IE 2025”.
3. Sección de Introducción:
• Caja blanca con sombra y bordes redondeados.
• Contiene un texto explicativo sobre la asignatura Imagen Escrita y un botón destacado hacia la Wiki del proyecto.
4. Acordeón “Sobre la autora”:
• Bloque desplegable con información personal y botones a su perfil en la Wiki y al correo institucional.
5. Galería de Encargos p5.js (una sola columna):
• Título intermedio: “Mis proyectos p5.js”.
• Debajo se listan los cuatro encargos en una columna, uno bajo otro.
• Cada encargo es una tarjeta rectangular compuesta por:
• Una imagen de portada (miniatura del sketch).
• Un botón pastel vibrante con el título Encargo 1 / 2 / 3 / 4.
• Al hacer clic, se abre el enlace del encargo en la Wiki.
6. Pie de página:
• Texto centrado, pequeño y gris, con la autoría: © 2025 Beatriz Castro Vega – Publicado en GitHub Pages.
7. Fondo interactivo:
• Lienzo dinámico en canvas con formas pastel en movimiento.
• Se mantiene fijo en el fondo, aportando dinamismo sin dificultar la lectura.
Descripción del código
El sitio combina HTML y CSS, y un pequeño script en JavaScript (p5.js) para el fondo animado. La estructura está pensada como una sola columna, de manera que la experiencia sea simple y directa en cualquier pantalla.
HTML
• <nav>: navegación superior fija con enlaces internos.
• <header>: título principal en gradiente pastel.
• <section> (introducción): explica el curso y contiene el botón hacia la Wiki del proyecto.
• <details> (acordeón): datos de la autora y contactos.
• <section id="encargos">: lista de tarjetas en una sola columna, cada una con imagen y botón enlazado.
• <footer>: créditos finales.
• <canvas>: fondo animado, fijo detrás del contenido.
CSS
• Variables CSS en :root para colores pastel, sombras y radios.
• Diseño lineal en una columna, con display:flex o grid-template-columns: 1fr.
• Botones pastel vibrantes con hover (sombra + saturación).
• Tarjetas con imagen superior (object-fit: cover) y botón al pie.
• Navbar sticky con desenfoque de fondo.
• Responsividad: en pantallas pequeñas o en modo vertical, los encargos se muestran en una sola columna, logrando una visualización limpia y legible sin necesidad de reacomodo complejo. En pantallas grandes o en modo horizontal, los encargos se distribuyen en dos columnas cuadriculadas, aprovechando mejor el ancho de la pantalla.
JavaScript (p5.js)
• Se genera un fondo interactivo con burbujas de colores pastel.
• El lienzo se actualiza con requestAnimationFrame() y se mantiene fijo detrás del contenido.
• Las partículas reaccionan suavemente al movimiento del cursor.
Enlace repositorio
https://github.com/Beacastrov/beacastrov.git
Enlace sitio web
https://beacastrov.github.io/beacastrov/
Reflexión final
El desarrollo del sitio web me permitió aplicar conceptos de programación creativa junto con diseño visual. El mayor desafío fue organizar los encargos en un formato limpio y claro: finalmente opté por una columna única, que refuerza la lectura secuencial y evita confusiones de jerarquía.
Con este trabajo aprendí a:
• Integrar HTML, CSS y p5.js en un mismo proyecto.
• Usar variables CSS y propiedades modernas como object-fit, clamp() y grid.
• Diseñar un fondo interactivo en canvas.
• Publicar y versionar un sitio mediante GitHub Pages.
El resultado es un portafolio simple, ordenado y estéticamente coherente con la identidad de la asignatura.