Proyecto Final IE 2023 - (Portafolio) / Dominique Carvajal Gonzalez

De Casiopea


TítuloProyecto Final IE 2023 - (Portafolio) / Dominique Carvajal Gonzalez
Tipo de ProyectoProyecto de Curso
Palabras Claveportafolio
Período2023-2023
AsignaturaImagen Escrita
Del CursoImagen Escrita 2023
CarrerasDiseño
Alumno(s)Dominique Carvajal González
URLhttps://dominiquecarvajal.github.io/PORTAFOLIO-DOMINIQUECARVAJAL-IE23/

PROMPTS/INPUTS QUE PERMITIERON GENERAR EL CÓDIGO

1. Se trabajará en p5js desde un código ya creado, al cual se realizarán una serie de cambios, necesito definir el tamaño de los rectángulos, sin cambiar nada más, solo eso, no modificar algo del código y su funcionamiento, solo quiero establecer un tamaño único para los rectángulos, este tamaño puede ser controlado desde el código mediante un número que puede ser modificado a voluntad y en todo momento.

2. Necesito que el rectángulo inicial, no aparezca desde abajo, quiero que se muestre desde la esquina superior izquierda.

3. Necesito que esta franja o extensión del rectángulo inicial se estire lo más posible hasta llegar el otro extremo, una vez termine su recorrido, quiero que mantenga su instancia y no desaparezca, sin cambiar nada más del código.

4. Debo insertar una imagen, con el mismo formato de los demás cuadrados, que se pueda variar su tamaño y ubicación desde el código, puedes insertarla al costado izquierdo y desde ahí yo establezco su ubicación.

5. Necesito que la imagen, no sea cuadrado en sí, que permita desde el código, determinar su ancho y largo para que esta no se deforme.

6. Ahora necesito que al pasar el mouse por los cuadrados, puedan desplegar una extensión hacia el lado, con un cuadro de texto, una función parecido al rectángulo inicial, este cuadrado se ´´abrirá´´ solo si el usuario para el puntero del mouse por encima del cuadrado, solo eso, y esta nueva extensión no debe ser grande, esto debe funcionar así, la fila de cuadrados de la izquierda debe abrir esta extensión hacia la izquierda y la fila de cuadrados de la derecha deben abrir su extensión hacia la derecha, respetando el tamaño original del cuadrado, no quiero que cambies ninguna función más del código.

7. Necesito que la fila de cuadrados de la izquierda abra esta extensión hacia LA IZQUIERDA, además el texto que contiene esta extensión no debe interferir con el texto de la tarea del cuadrado que ya tiene establecido desde antes, no deben interferir entre ellos, corrige esos problemas.

8. Se debe abrir el cuerpo de una extensión definida, ahí se aprecia el texto solo, necesito que este cuadrado pueda alargarse.

9. Me gusta ese movimiento y animación, tienes que conservarlo, sin embargo, hay un problema, en la fila izquierda de cuadrados esta extensión se abre hacia la derecha y no hacia la izquierda como te lo pedí, corrige eso.

1o. Ahora necesito corregir la ubicación del texto, el cuadrado tenía en su centro el numero de la tarea que redirecciona según el link, necesito que esto se mantenga igual, desde el centro, para que se vea visualmente estético, por ello, el texto que se agregó recientemente, debería de estar en el centro de esta nueva extensión que se genera, es decir, que tendríamos inicialmente la interfaz con la vista normal de los cuadrados y su respectiva tarea, y al pasar el mouse por encima, con el estilo de animación que ya se estableció para esta nueva extensión, se muestre uniformemente este nuevo texto.

11. Debo agregar un cuadro de texto, el cual su posición pueda ser controlado por coordenadas desde el código, al igual que los rectángulos desplegados en el canvas, es decir, que agregues un cuadro de texto por cada rectángulo, es decir, 7 cuadros de texto.

12. Con el código con los cambios realizados, necesito fijar el nombre de la tarea, tal como se aprecia Tarea 1, y poder modificar un texto personalizado cuando el rectángulo se despliega completamente al pasar el mouse por encima.

13. Este texto personalizado se pueda editar por cada rectángulo, debido a que los texto son diferentes entre sí, agrega un espacio de edición por cada rectángulo, es decir, 7 cuadros de texto personalizables. Esto debe realizarse desde el código, y que sea ordenado, es decir que aun lado del rectángulo bajo el nombre y número de la tarea, se pueda editar el texto personalizado único que le pertenece, y así con los 6 restantes, entonces deberían aparecer en el código 7 de estos textos personalizables.

14. Cada texto personalizado debe repetirse por cada rectángulo, porque son diferentes, es decir que por cada rectángulo se repita ese cuadro de texto, para poder editarlos desde el código de manera independiente.

15. Necesito 7 de estos textos personalizables, crea un texto personalizable 1, texto personalizable 2, texto personalizable 3, texto personalizable 4, texto personalizable 5, texto personalizable 6, texto personalizable 7. Y que estos coincidan con el numero de la tarea, es decir, que el rectángulo de la Tarea 1 debe estar junto al Texto Personalizable 1.

16. Se supone que estos textos son independientes, el texto personalizable y el nombre de la tarea, necesito que el nombre de la tarea se pueda visualizar desde que la pagina se inicie y no cuando el mouse pase por encima, es decir, que funcione de la siguiente manera, el usuario pueda apreciar cada numero de la tarea para verificar cada rectángulo, y que al pasar el puntero del mouse por encima de este, aparezca este texto personalizable, sin estorbar en la posición del nombre de la tarea, por que esta se encontrará arriba del texto, en la zona superior del rectángulo centrado, y este texto estará centrado pero por debajo. No deberían de tocarse tampoco, porque estos son independientes, y aparecen en distintos momentos.

17. El nombre de la tarea se muestra siempre, y esta se encuentra dentro del rectángulo en su zona superior centrado, dentro, no por fuera y se puede apreciar desde que se inicia la página, no al pasar al mouse como aparece el texto personalizable.

18. Necesito agregar un nuevo cuadro de texto con forma cuadrada, este nuevo cuadro de texto se posicionará a un lado de la imagen, y se podrá controlar su posición por coordenadas desde el código, de preferencia necesito que el color de este rectangulo sea el mismo que el de los demás que ya se encuentran instalados en el lienzo.

19. Este cuadro de texto, las palabras no deberían de seguir una línea horizontal recta, necesito que este texto sea en formato justificado y manteniendo el margen de su forma.

20. Por último, el código dejo de funcionar al hacer clic en los link de los rectángulos, antes estos redireccionaban hacia los links adjuntos en el código, debo corregir solo eso, sin cambiar nada del código, necesito que al hacer clic en los rectángulos estos me lleven al link de cada tarea.

REGISTRO DEL AVANCE DE PORTAFOLIO

La captura de pantalla muestra lo que sería inicialmente el portafolio, siendo de una paleta de colores pasteles claros y con las tareas adjuntas en cuadrados.
Posteriormente, se exploró en las formas de los anteriores cuadrados de las tareas, indagando en cual podría ser la clave visualmente, donde también se estableció la decisión de insertar una animación al pasar el puntero del mouse por encima de las tareas.
Al no ser una óptima opción el anterior portafolio, se decidió comenzar con un nuevo borrador de la página web, este comenzó a tomar forma, y ser visualmente atractivo, posteriormente se instalaron las funciones técnicas como la redirección de links, y los respectivos cuadros de textos.
El código fue modificado para conseguir una estructura más ordenada, se jerarquizaron las tareas y corregieron ubicaciones de los elementos en pantalla, además de la incorporación de fuentes tipográficas para un acabado más estético. El diseño y tema de la página web todavía se encuentra en duda, probablemente hayan cambios de color.
Se incorporó una nueva función a los cuadrados que exponen las tareas, esta función debería funcionar de manera que al pasar el puntero del mouse por sobre ello, se extienda un texto el cual explique el objetivo de la tarea, una guía de exploración. Además se logró ordenar los cuadrados, esto debido a la ubicación controlada por coordenadas que se modifica desde el código.

ENTREGA FINAL DEL PORTAFOLIO

PORTAFOLIO Entrelazando Hilos Digitales

Captura de pantalla del sitio web, que expone el resultado final, se pueden apreciar el cambio de posición de los elementos, como la fotografía que aporta visualmente al portafolio, y se agregó un cuadro de texto con mi presentación.