Sitio Web IE - Gloria García

Título	Sitio Web IE - Gloria García
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)	Gloria García
Profesor	Javiera Ruiz
URL	https://gloria-garcia.github.io/Sitio-web-IE-Gloria-Garcia/

Sitio web IE 2025

Link repositorio GitHub

https://github.com/gloria-garcia/Sitio-web-IE-Gloria-Garcia

Captura de pantalla Inicio del sitio web

Wireframe

Descripción de la propuesta El portafolio se diseñó con una estructura clara y jerárquica, organizada en secciones (Inicio, Encargos, Sobre mí, Repositorio y Contacto) que guían al usuario de manera intuitiva. Se optó por una paleta cromática fresca en tonos azules y verdes, tipografías contrastantes (Montserrat y Open Sans) para dar jerarquía y ondas animadas en canvas que aportan dinamismo. Las tarjetas con sombras e interacciones sutiles refuerzan la usabilidad, mientras que la integración de imágenes e iframes permite mostrar proyectos de p5.js de forma atractiva e interactiva. Wireframe idea inicial Wireframe final Encargos p5.js Encargo 1 Encargo 2 Encargo 3 Encargo 4 Propuesta del código Html (Hypertext Markup Language) El HTML constituye la estructura esencial del portafolio, distribuyendo los contenidos en bloques semánticos y jerárquicos. Cada sección cumple un rol definido dentro de la navegación, lo que facilita aplicar estilos mediante CSS y añadir dinamismo con JavaScript, asegurando claridad y accesibilidad en la experiencia de usuario. Barra de navegación fija (<nav class="topbar"> + <a>) El documento comienza con una barra de navegación fija ubicada en la parte superior. Estructura: <nav> agrupa enlaces <a> que dirigen a las secciones internas del sitio mediante anclas (#inicio, #encargos, #sobre-mi, #repositorio). Función semántica: organiza el acceso principal a los apartados. Función interactiva: permite desplazarse rápidamente sin recargar la página. Experiencia de usuario: siempre visible, mantiene coherencia en la navegación y orientación constante. Sección de inicio Este bloque introduce el portafolio y presenta la asignatura.Contenido: título < h1 >, un <canvas> reservado para gráficos generativos, un botón y un párrafo < p > oculto inicialmente. Función: el botón “Leer más” despliega el texto oculto mediante JavaScript. Experiencia de usuario: combina presentación clara, estética visual y control de la información mostrada. Sección encargos p5.js (<section id="encargos"> + < h2 > + < div > + < img > + < iframe > + < a >) Bloque donde se muestran los proyectos desarrollados en p5.js. Estructura: encabezado < h2 >, un área central con botones de flechas (< button >) para recorrer encargos, y un visor dinámico que alterna entre img y iframe. Miniaturas: organizadas en cuadrícula < div >, cada tarjeta integra < img >, < iframe > y < a > con atributos personalizados data-img y data-link. Función: el script alterna entre imagen estática o proyecto según la interacción. Experiencia de usuario: permite navegar por encargos y abrirlos directamente desde la misma página. Sección sobre mí (<section id="sobre-mi"> + < h2 > + < p > + < canvas > + < a >) Espacio dedicado a la presentación personal y vínculo académico. Contenido: título, párrafo < p > con la descripción de la autora, un < canvas > decorativo y un enlace < a > hacia la wiki institucional. Función: el botón abre la wiki en una pestaña nueva. Experiencia de usuario: refuerza el contexto personal y facilita acceder a más información externa. Sección de repositorio (<section id="repositorio">) Bloque que concentra accesos a materiales y recursos relacionados. Estructura: encabezado < h2 > y una cuadrícula < div > con varios elementos enlazados < a >. Contenido: cada enlace contiene un ícono decorativo y un texto < span > que identifica el recurso. Función: centraliza repositorios y páginas vinculadas al curso. Experiencia de usuario: ofrece navegación clara hacia colecciones de proyectos y wikis relevantes. Sección de contacto (<section class="contact-rect">) El sitio finaliza con un bloque de contacto directo. Contenido: nombre y correo electrónico presentados en un < p >, con enlace < a > que utiliza mailto. Función semántica: actúa como cierre identificativo del portafolio. Función interactiva: el clic abre el cliente de correo configurado en el dispositivo. CSS (Cascading Style Sheets) El CSS define la apariencia visual del portafolio, creando coherencia estética y una experiencia clara y atractiva. Se apoya en variables globales para colores y sombras, tipografías de Google Fonts y gradientes de fondo que dan identidad visual al sitio. Variables y ajustes generales Se establecen colores, sombras y brillos en :root, lo que permite mantener una paleta consistente. También se definen tipografías(Montserrat) y se activa el scroll suave para mejorar la navegación. Navegación La barra superior (.topbar) se mantiene fija y semitransparente con efecto de desenfoque de fondo. Los botones (.pill) son redondeados, con sombra y animaciones al pasar el cursor o hacer clic, reforzando la interactividad. Secciones principales Cada bloque (.section) tiene un ancho máximo, márgenes y paddings equilibrados. Los títulos (.title) usan una tipografía de la misma familia pero distintos grosores distintos, resaltando la jerarquía. En el inicio, el hero combina un canvas, fondo degradado y un botón con microanimaciones, lo que introduce dinamismo al entrar al sitio. Sección encargos La sección de encargos utiliza Grid para dividir el área en un visor principal y una cuadrícula de miniaturas. El visor adapta imágenes e iframes, mientras que las mini-cards tienen colores de marca, sombras y botones internos. El diseño mantiene equilibrio visual y permite que el JavaScript controle qué se muestra. Sección sobre mí Un bloque con texto y una franja animada (canvas) que aporta dinamismo visual. Incluye un botón cuadrado que resalta el acceso a la wiki personal. Sección repositorio Los enlaces están organizados en grid de tres columnas, cada tarjeta con icono, sombra y un fondo adaptable. Al pasar el cursor, los elementos crecen ligeramente y brillan, manteniendo un estilo uniforme de interacción. Sección contacto El bloque final combina transparencia, sombra y animaciones de escala en hover o al presionar. Refuerza la sensación de “botón táctil” para la interacción del usuario. JavaScript El JavaScript del portafolio se utiliza para conectar la estructura HTML con los estilos CSS, añadiendo interactividad, animaciones y control dinámico de elementos. Botón “Leer más” + paleta de color Evento click en #toggle-text: alterna el atributo hidden en el párrafo de introducción. Decisión: combinar texto desplegable con feedback visual coherente. Encargos p5.js: visor y miniaturas Mapeo de mini-card: crea un objeto con link, imagen y descripción. Condicional: si hay data-img, muestra imagen/ si no, un iframe con p5.js. Controles (prev, next) y clic en tarjetas: permiten recorrer o elegir directamente un encargo. Decisión: navegación flexible y presentación adaptable. Animaciones en Canvas Hero (#hero-canvas): ondas horizontales que responden al mouse. Se usan requestAnimationFrame y senos para animación fluida. Resize listener: mantiene proporciones y nitidez con devicePixelRatio. Sección sobre mí: ondas verticales independientes, con ciclo propio de animación. Decisión: aportar dinamismo gráfico sin depender de librerías externas. Repositorio dinámico setInterval cada 10s: rota colores de .repo-item usando una paleta definida que seria parte de la página web. Decisión: añadir un cambio sutil y rítmico al diseño. Control y módulos Funciones específicas (setEncargo, showOnly, sizeHero, sizeBand): cada tarea aislada y clara. Variables de control (i, mix, palFrom/palTo): gestionan estados de animación y contenido. Decisión: mantener un código ordenado y fácil de ampliar. Reflexión del trabajo El desarrollo de esta página fue una experiencia de aprendizaje integral, donde se cruzaron aspectos técnicos, estéticos y conceptuales. En lo técnico, pude aplicar HTML para estructurar contenido semántico, CSS para dar estilo coherente y responsivo, y JavaScript para sumar interactividad y animaciones. Entendí mejor cómo cada lenguaje cumple un rol específico y cómo se integran para formar un proyecto completo. En lo gráfico, aprendí a valorar la importancia de la consistencia visual, la elección de una paleta adecuada y la aplicación de microi-nteracciones que no solo embellecen, sino que guían al usuario. A nivel personal, este trabajo me hizo reflexionar sobre el diseño digital como un espacio interdisciplinario, donde no basta con lo visual: se necesita pensar en la experiencia, la usabilidad y la interacción. En conclusión, la creación del portafolio fue un proceso de exploración y descubrimiento que me permitió unir desiciones gráficas y códigos.