enflujo / imagina-vacs

https://imagina.uniandes.edu.co/especiales/vacs/

Imagina VACS

imagina-vacs's Issues

📉 Graficar puntos porcentuales

En el relato 2 diseñar e implementar gráfica de puntos porcentuales de actitudes de riesgo (Tabla 3)

🐞 El índice se superpone con el título de la historia

Definir tamaño máximo de los textos del índice para que no se superponga con el título de la historia.

🐛 Fuente alterna a Nohemi no se parece

Cuando la fuente Nohemi (títulos) no a cargado, usa fuentes alternas que siguen en la lista, pero Brush Script MT es muy diferente:

Hay que revisar esta serie:

--fuenteTitulos: 'Nohemi', 'Brush Script MT', sans-serif;

:fried_egg: Fondo de relato no cambia cuando se cambia posición muy rápido

El color oscuro del fondo se queda pegado cuando se mueve la posición de la página muy rápido. Por ejemplo, cuando se usa la barra lateral para desplazarse rápido.

🕳 Gesto *dejar huella/marca*

Modificar gesto de dejar huella para que funcione no con el hover sino con scroll:
https://hyp.is/btVAJhdYEe6teZ8BKHbubg/imagina.uniandes.edu.co/especiales/vacs/proyecto1/

👽 Agregar un componente para graficar personitas

Agregar un componente para graficar personitas cuando los textos son del tipo: "X de cada Y personas"...

Crear componente Glosario

Crear el glosario como componente individual.

⌛ [VACS-3] Robustecer Are.na ambages

Dentro de la revisión de referentes, dejarlos marcados en el Are.na

🪵 Determinar qué graficamos de cada tabla

Revisar tablar por tabla y verificar qué vamos a usar para graficar en cada caso:
https://uniandes-my.sharepoint.com/:x:/r/personal/j_gonzalezj_uniandes_edu_co/_layouts/15/Doc.aspx?sourcedoc=%7B11A113CE-93D0-4293-9FB7-20B3F53CDADA%7D&file=Tablas.xlsx&action=default&mobileredirect=true

Crear componente "Creditos" y hacer que el contenido funcione igual a glosario

La misma lógica de lo que ahora es Glosario para créditos.

🚩 diario.enflujo.com

Dentro de las estrategias para organizarnos y comunicarnos como equipo, diario.enflujo.com se propone como una forma de organizar y visualizar fácilmente la cadena de issues, milestones y proyectos en proceso.

😮‍💨 Diseñar íconos para gráfica de personitas

Diseñar los íconos para las gráficas de ("X de cada Y personas)..

📌 Diseñar menú lateral para subtítulos en los proyectos

https://github.com/enflujo/imagina-vacs/blob/841a50970c7ce699343c80c4d5f9f29055be4459/src/pages/proyecto1.astro#L71C7-L71C54

Qué tal si a ese tipo de elementos le ponemos un menú para que lo lleve a los distintoa elementos como los capítulos en este ejemplo:
https://www.sbs.com.au/theboat/

A esto me refiero:

📌 Programar menú lateral para subtítulos en los proyectos

https://github.com/enflujo/imagina-vacs/blob/841a50970c7ce699343c80c4d5f9f29055be4459/src/pages/proyecto1.astro#L71C7-L71C54

Qué tal si a ese tipo de elementos le ponemos un menú vertical que se despliegue y se esconda para que lo lleve a los distintoa elementos como los capítulos en este ejemplo:
https://www.sbs.com.au/theboat/

Algo como esto me refiero: (en este caso no se repliega, pero algo así con las palabras de los subtítulos).

Yo lo puedo ir diseñando para aplicarle el estilo (#47 ) pero por si quieren/pueden progamarlo mientras

☁️ Animar nubecitas al comienzo del index

Animar las nubecitas de izquierda a derecha para que se vean sobre el cielo azul al comienzo.
#detalledefinacoquetería

Las nubecitas están exportadas como recursos acá:
https://uniandes-my.sharepoint.com/:f:/r/personal/j_gonzalezj_uniandes_edu_co/Documents/EnFlujo/Laboratorio%20EnFlujo/Proyectos/2023/Imagina%20-%20Fellows%20VACS/dise%C3%B1o/recursos/SVG?csf=1&web=1&e=wgTHw0

✏️ Definir diagramación general

:bug: Desliza hacia abajo, visible en recarga

Cuando se recarga una página más abajo del inicio, el "desliza hacia abajo" permanece visible.

🏚 Pensar elementos modulares para el *punto final* casa (animación)

Pensar los elementos modulares de un primer punto final, la animación de casa en el proyecto 3.
De aquí sale la idea: https://hyp.is/fluQfhd-Ee6MFRutYJLAHA/imagina.uniandes.edu.co/especiales/vacs/proyecto3/
Este es uno de los referentes por la forma como se superponen los planos arquitectónicos: https://bast0.com/unbuilt
Otro referente es esta animación: https://animacionexperimental.com/Items/3ef38ead1a7ccac19ff510e74a4f7397/Download?api_key=a6bc2831d01e44ae95b8389351170387

📖 Diseñar el componente Glosario

Diseñar elementos modulares para:

• Solo texto
• Texto gráfico
• Texto largo

Contexto iría dentro de Glosario

🏚 Diseñar elementos modulares para la animación del *punto final* casa

🏚 Diseñar elementos modulares para la animación del punto final casa

✏️ Definir tipografía general

☂️ Que la corniza quede fija pero tape los elementos a medida que se hace scroll

Con corniza me refiero a la barra de arriba que tiene las palabras "Menú" e "Historias" y los botones.

🔧 [VACS-2] Agregar clase a cada elemento de las historias

Los tipos de elementos son:

• .narracion: Texto general de la narración.
• .grafica: Visualización o imagen relacionada con datos. Puede contener datos en texto que se transforman a visualizaciones o algo así.
• .destacado: Frases resaltadas tipo artículo periodístico.
• .escribiendo: Textos conectores animados (quizás como si se fueran escribiendo).
• .relato: Citas, relatos en primera persona.

🤓 1era reunión de revisión

Cotejar apuntes sobre el diseño, el texto, las tablas y los pasos a seguir.

:lady_beetle: La caja con información al hacer `hover` en mapa desapareció

Al pasar el mapa al glosario, ya no tiene caja con información al mover el ratón encima de los municipios.

⤴️ Título fijo y transparente a media que se hace scroll

Fijar el tìtulo para que al hacer scroll no suba y que la sección inmediatamente siguiente, pase por encima mientras se desvance:

😵‍💫 Arreglar estilos de historias en teléfonos

Los estilos de las historias en teléfono se desconfiguran.

✏️ Diseño encuesta

Discussed in #71

^{Originally posted by Juliansintilde July 21, 2023}
Pensè en que tan pronto se abra la encuesta, se muestren las preguntas a modo de bloques (cada bloque o parte como està en el documento de word, separado por las lìneas horizontales)





Cada vez que se terminan de responder las preguntas de un bloque, se arroja una primera conclusiòn sobre esa parte (emocional, fìsica, sexual, etc)





El consentimiento informado lo dejé como un ícono de información que se despliega hacia abajo (me lo imaginé con una pequeña animación de cortina) con una transparencia del 95% en el color --azulCielo

✏️ Definir paleta de color general

🐛 Corregir ancho que está creando un scroll horizontal

Corregir el ancho de algún elemento que está creando en algunas pantallas un scroll horizontal que antes no existía y que no es neccesario.

✏️ Definir diseño general y de elementos

Definir diseño visual de la página general y los elementos.

🦚Crear descripciones e imágenes para metadatos

Para cada página hay que crear una descripción corta y una imagen que pasamos como parámetros a la plantilla:

<Plantilla titulo="VACS" descripcion="..." imagen={{url: `${rutaBase}algo.webp`, titulo: 'texto alternativo a imagen'}}>

📑 Crear página recursos/bibliografía

Crear página de recursos o bibliografía.

🖼️ Diseño de gráfica-tabla

Diseñar la gráfica para la primera tala que vimos con @anattolia

🖌️ Diseñar elementos de clase "destacado"

Diseñar cómo se ven los elementos de clase "destacado", que resaltan una parte del texto que nos parece importante.

Pasar modo de lectura a una sola columna

Pasar modo lectura a una sola columna

Agregar información de créditos

Agregar nombres y roles a créditos.
¿Logos también?

📌 Los enlaces de glosario no van siempre al punto preciso

Cuando se le da clic a un elemento morado de glosario dentro de las historias, no siempre lleva al punto preciso de esa definición. Pasa con PDeT y con ASI

📖 Diseñar el componente Glosario

Discussed in #49

^{Originally posted by Juliansintilde June 28, 2023}
Diseñar elementos modulares para:

• Solo texto
• Texto gráfico
• Texto largo

Contexto iría dentro de Glosario

🌟 Agregar historia 4

Agregar página y contenido de la última historia.

🧐 Revisar esta definición de presenciar violencia

@Juliansintilde propone:

"Haber visto u oído al padre o padrastro ser golpeado por la madre o madrastra; haber visto a los padres golpear a los hermanos o hermanas, o golpearse entre sí."

¿Padres por cuidadores? ¿poner un aparte para cuidadores?

En el código:
https://github.com/enflujo/imagina-vacs/blob/254e5f29e0c3e2d27b526a6932ad113432d998b2/src/pages/index.astro#L141C1-L145C15

En la página desplegada:
https://hyp.is/GXaf6BqSEe6kzq_Qw2szrQ/imagina.uniandes.edu.co/especiales/vacs/

🥸 lectura index y sugerencias editoriales

Dejo este docuemnto que según como lo pensemos pueden ser varios Issues independientes, Pull Requests o discusiones en la junta.
VACS _ Imagina + EnFlujo_index.pdf

📤 Aplicar clase `ampliar` y la definición a cada aparición de siglas

Ponerle las definiciones a las tipo ampliar a cada sigla:

Por ejemplo:
EVCNNA:

• Ubicación en el código:
  https://github.com/enflujo/imagina-vacs/blob/254e5f29e0c3e2d27b526a6932ad113432d998b2/src/pages/index.astro#L60C99-L60C105 Encuesta Nacional de Violencia contra Niños, Niñas y Adolescentes

ACES

• ubicación en el código:
  https://github.com/enflujo/imagina-vacs/blob/254e5f29e0c3e2d27b526a6932ad113432d998b2/src/pages/index.astro#L88C30-L88C57 : Adverse Childhood Experiences / Experiencias adversas en la infancia.
• ubicación en la página:
  https://hyp.is/18W6mBdiEe6kaasAHecOcQ/imagina.uniandes.edu.co/especiales/vacs/proyecto2/

🎨 Cambiar el color azul de mapa y enlaces por algo con más contraste

No se ve casi 🥲

🛞 Mover sección "EVCNNA" y las definiciones de Violencias del index al glosario

La Evcnna va a ser un elemento en el glosairo, ya no en la introcucción/index.

Así mismo, las definiciones de las violencias quedarán consignadas en el glosario.

🖼️ Arreglar las márgenes en los diferentes cortes

Arreglar las márgenes para que se vea cuco

🗣 Gesto *testimonio*

Implementar gesto de testimonios.
Hacer que el texto escrito esté solo en la pantalla al hacer scroll.
Sale del eje z: se agranda y pasa de invisible a completa visibilidad.
Al entrar en ese aparte de lectura, el fondo de color de la página cambia de color.

En este punto:
https://hyp.is/JvXgIBdeEe6V57M959MkbA/imagina.uniandes.edu.co/especiales/vacs/proyecto1/

Diseñar menú de navegación

Diseñar el menú o los elementos que nos llevan de una historia a otra.

📃 Diseño de componente Encuesta

Diseñar componente Encuesta (podemos basarnos en esta: https://github.com/1cgonza/buen-partido.git)

🔴 Crear componente para graficar/ilustrar datos sencillos dentro del texto

Crear componente para graficar/ilustrar datos sencillos dentro del texto para darle dinamismo a la página.