Sitio Web IE - Benjamin Ramirez
| Título | Sitio Web IE - Benjamin |
|---|---|
| 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) | Benjamin Ramirez Herrera |
| Profesor | Javiera Ruiz |
| URL | https://benjaminr30.github.io/Sitiobenjamin/ |
SITIO WEB IE
Introducción
El portafolio “Imagen Escrita 2025” reúne los trabajos semanales del curso de forma ordenada y precisa, utilizando HTML, CSS y p5.js para articular diseño visual, interactividad y programación creativa. La propuesta apunta a lograr un balance entre utilidad y un diseño psicodelico, con una composición clara, estructurada y llamativa, que además se ajusta de manera adecuada a distintos formatos y dimensiones de pantalla gracias a su diseño responsivo.
Wireframe
Código
HTML
El código HTML establece la estructura fundamental del sitio web. En él se define un encabezado principal que introduce el portafolio con el título Repositorio Benjamin Ramirez IE 2025, acompañado de un contenedor general que organiza las distintas secciones de manera jerárquica. Se incluye una introducción que explica los objetivos de la asignatura Imagen Escrita y su relación con el diseño, la programación creativa y el uso de p5.js. Además, se disponen enlaces que dirigen a cada una de las tareas desarrolladas, permitiendo acceder de forma directa a los proyectos interactivos. Finalmente, se incorpora un apartado de contacto que presenta el nombre y el correo electrónico del autor. De este modo, el HTML cumple la función de ordenar y presentar los contenidos de manera clara y accesible.
STYLE.CSS
El código CSS se encarga de dotar a la estructura de un diseño visual coherente y atractivo. A través de la definición de tipografías y paletas de color, se establece una identidad gráfica distintiva que facilita la jerarquía de la información. El fondo animado mediante gradientes en movimiento aporta dinamismo y transmite una atmósfera creativa. Los estilos aplicados a títulos, subtítulos y párrafos permiten mantener uniformidad y claridad en la lectura, mientras que las animaciones de aparición durante el desplazamiento generan transiciones suaves que enriquecen la experiencia de navegación. El uso de reglas de diseño responsivo asegura, además, que el sitio se adapte correctamente a diferentes tamaños de pantalla, manteniendo siempre su legibilidad y orden visual.
SCRIPT.JS
El código JavaScript incorpora la interactividad del sitio. Una de sus funciones principales es detectar cuándo los elementos con la clase animate entran en el área visible de la ventana del navegador, activando efectos de transición que permiten la aparición gradual de los contenidos. Esto refuerza la sensación de fluidez en la navegación. A su vez, la integración de p5.js posibilita la visualización de los proyectos del curso en forma de sketches interactivos, en los que se experimenta con gráficos, patrones y animaciones programadas. Gracias a ello, el portafolio no se limita a mostrar información estática, sino que también exhibe resultados dinámicos que reflejan el carácter creativo y experimental de la asignatura.
Propuesta General
La elección de esta diagramación responde a la intención de crear un portafolio claro, funcional y atractivo, que muestre de manera ordenada el progreso del curso y facilite la navegación. La estructura lineal busca que cualquier usuario pueda recorrer el sitio sin dificultad, siguiendo una secuencia lógica que va desde la presentación general hasta la exploración detallada de los proyectos. El diseño jerarquizado permite destacar la información esencial el título, la descripción del curso y los proyectos mientras que los recursos visuales y animados aportan dinamismo sin saturar la experiencia.
Enlace Repositorio
Github:https://github.com/BenjaminR30/Sitiobenjamin
El repositorio Imagen Escrita 2025 es un portafolio digital que reúne y organiza los trabajos realizados durante la asignatura, funcionando como una plataforma de presentación y consulta. Su finalidad es mostrar de manera clara y accesible el desarrollo de los encargos semanales, reflejando tanto los resultados obtenidos como el proceso creativo que los sustenta.
La diagramación del sitio está pensada para guiar al visitante a través de una secuencia lógica: primero se introduce el proyecto y se explica el contexto de la asignatura, luego se presentan los diferentes encargos en orden progresivo y finalmente se entrega un espacio de contacto. Esta estructura permite que la navegación sea sencilla, ordenada y comprensible, destacando los contenidos más relevantes y mostrando la evolución del trabajo a lo largo del curso.
El repositorio cumple la función de ser un archivo académico y al mismo tiempo una vitrina creativa, mostrando la capacidad de integrar diseño, experimentación y expresión visual en un mismo espacio digital.