Asignar colores personalizados a los títulos y subtítulos en slides Markdown

[taicoding]

Se debe configurar un esquema de colores para los encabezados en las slides generadas desde Markdown, con el objetivo de mejorar la jerarquía visual y la legibilidad de las presentaciones.

En particular, los títulos con H1, H2, H3 y H4.

Esto permitirá distinguir fácilmente los diferentes niveles de encabezados dentro de las slides.

Paleta de colores del proyecto
Se debe utilizar variables CSS (--var) para que los colores puedan modificarse fácilmente en el futuro:

• Verde: #057985
• Bordo: #9e0059
• Amarillo: #ffec9b
• Celeste: #c0d6e1
• Crema: #ecece2
• Verde Turquesa: #2ec4b6
• Naranja Pastel: #f8d682
• Naranja Cremoso: #f6d7c5
• Magenta Cremoso: #f1dbe7

[arcamoon]

Para la asignación será suficiente con modificar el archivo css y asignar un color respectivo a cada encabezado(colores llamativos a los encabezados de mayor relevancia y así gradualmente).
Antes de ello revisaré que la jerarquía de encabezados en cada sesión se esté cumpliendo, pues en una issue anterior advertí algunos detalles en los encabezados, informaré si hay algún detalle por sesión antes de aplicar alguna corrección. Así, con una jerarquía de encabezados en orden, se cumplirá el objetivo de la issue que es orden visual y legibilidad en las presentaciones

[arcamoon]

Al revisar la sesión 1 noté que la jerarquía de encabezados puede mejorarse en base a las siguientes observaciones:

• Hay encabezados que comparten la misma jerarquía con sus subencabezados.
• Aveces se usan encabezados h3 que solo deberían encontrarse en el slide 1 que corresponde al título de la sesión.
  La solución que propongo es hacer un análisis por sesión para documentar la estructura ideal de encabezados que debe tener la sesión junto con los tipos de encabezado que actualmente se están usando, la estructura sea validada y observada por los contribuidores del repositorio y así posteriormente yo pueda realizar las correcciones necesarias para establecer la jerarquía de encabezados

[arcamoon]

A continuación detallo una propuesta de la estructura de encabezados de la sesión 1, mencionando el tipo y nombre de encabezado actual:

Sesion 1

• h4: Qué es un editor de código

  • p: Características de Visual Studio Code
  • h4: Instalación de VS code
    • h5: windows
    • h5: Linux (Debian & Ubuntu)
    • h5: Linux (RHEL, Fedora & CentOS)
    • h5: Otros sistemas operativos
    • p: Mediante package manager o adminitrador de paquetes
    • h5: Mac OS 1/2-2/2
  • h5: Creación de proyecto
  • h5: Abriendo el proyecto con vs code desde terminal

• h3: ¿Qué es un control de versiones?

  • h3: Ventajas
  • h5: Conceptos básicos de GIT
    • h5: Repositorio
    • h5: Commit
    • h5: Branch
  • h5: Ventajas de usar Git en desarrollo de software
  • h5: Instalación de Git
    • h5: Configuración de git usuario y correo
  • h5: Creación de un repositorio local
    • h5: Crear un archivo
    • h5: Mi primer commit
    • h5: Github como plataforma remota

• h5: Resumen

*Una vez se me comunique la estructura correcta, podría documentar que cambios se harán por sesión,
*Si ya se cuenta con algún documento referente a la estructura de cada sesión se me facilitaría la tarea.

Pros de la solución
Una buena jerarquía de encabezados mejorará la legibilidad de las sesiones, a la vez que la aplicación de color será rápida y muy personalizable con la modificación del styles.css
Contras
Se tendrá que realizar este procedimiento en las 16 sesiones, por lo que demandará inversión de tiempo.

[jevillanueva]

@anibalCApaza Creo que podríamos estandarizarlo de forma correcta utilizando Desde el H1, revisando ya más a detalle el Outline de GitHub no tenemos coherencia:

y podemos mejorarlo ahora Tener una estructura clara y modificar solo las variables de los tamaños de título ya que usa las siguientes clase en black.css:

.reveal h1 {
    font-size: var(--r-heading1-size);
}
.reveal h2 {
    font-size: var(--r-heading2-size);
}
.reveal h3 {
    font-size: var(--r-heading3-size);
}
.reveal h4 {
    font-size: var(--r-heading4-size);
}

Y esas variables existen para 4 niveles:

--r-heading1-size: 2.5em;
--r-heading2-size: 1.6em;
--r-heading3-size: 1.3em;
--r-heading4-size: 1em;

Entonces podemos modificar los tamaños en el custom.css, con los siguientes posibles tamaños:

--r-heading1-size: 1.3em;
--r-heading2-size: 1.1em;
--r-heading3-size: 1em;
--r-heading4-size: 0.9em;

Cosa que visualmente en diapos se vea bien el heading y no gigantesco y podemos restructurarlo así:

• H1: Sesión 01
• H1: Iniciando nuestro Setup
• H1: Introducción a VS Code y Git
  • H2: Qué es un editor de código
    • H3: Características de Visual Studio Code
    • H3: Instalación de VS code
      • H4: windows
      • H4: Linux (Debian & Ubuntu)
      • H4: Linux (RHEL, Fedora & CentOS)
      • H4: Otros sistemas operativos
        • H5: Mediante package manager o administrador de paquetes
      • H4: Mac OS 1/2-2/2
    • H3: Creación de proyecto
      • H4: Abriendo el proyecto con vs code desde terminal
  • H2: ¿Qué es un control de versiones?
    • H3: Ventajas
    • H3: Conceptos básicos de GIT
      • H4: Repositorio
      • H4: Commit
      • H4: Branch
    • H3: Ventajas de usar Git en desarrollo de software
    • H3: Instalación de Git
      • H4: Configuración de git usuario y correo
    • H3: Creación de un repositorio local
      • H4: Crear un archivo
      • H4: Mi primer commit
    • H3: GitHub como plataforma remota
  • H2: Resumen
  • H2: Retos
  • H2: Bibliografía

Y así tendriamos coherencia visual en las diapos y tambien en el outline de navegacion de GitHub y se ve como un arbol ya mejor estructurado

Y todo lo demás que no sea esos titulos cambia a ser solo Parrafo

[arcamoon]

Lo que sugieres me parece lo mejor para estandarizarlo y tener una jerarquía de encabezados correcta, revisaré si no hay ningún detalle visual con los nuevos tamaños de encabezados que utilizaremos, también el tiempo aproximado que tomaría aplicar esta corrección en las 16 sesiones, les informo en más detalle mañana en la reunión.

[arcamoon]

Ya he validado los nuevos tamaños de encabezados y no existe ningún detalle por lo que puedo empezar la restructuración de encabezados, los siguiente cambios ocurrirían:

• En custom.css irá la definición de los nuevos tamaños de encabezado.

• La importación de custom.css del index de cada sesión que antes era la primera en declararse ahora debe ir al final para que los nuevos tamaños de encabezados se apliquen.

[arcamoon]

Adicionalmente, hay una corrección adicional que quisiera proponer y es que me he percatado que hay encabezados con alguno de estos comportamientos(identificados en la sesión 1):

• Se repite en todos los slides del tema en cuestión(ej: 18-19).
• Se repite de 2/3 veces y no vuelve a aparecer en los restantes slides(ej: 20-24)
• Se repite un par de veces, no aparece en un slide y al siguiente slide vuelve a aparecer(ej: 50-54)
  Este patrón podría estar presente en las demás sesiones y junto a los encabezados que se enuncian una sola vez puede llegar a ir en contra de la organización y legibilidad que estamos tratando de implementar en el issue, por lo que quisiera que se evalue y se me de el visto bueno para aplicar el criterio de que un encabezado solo se enuncie una vez.
  Veo necesaria esta corrección a la par que corrijo la jerarquía por lo siguiente:
• Con la aplicación de colores, esta repetición variable de encabezados se hará más evidente y en consecuencia implicará en la legibilidad.
• Si se la plantea como una tarea futura, el colaborador tendrá que volver a revisar los .md e identificar nuevamente los encabezados con estos patrones, por lo que la inversión de tiempo se extenderá.

[jevillanueva]

@arcamoon Tienes razon tal vez podríamos utilizar lo que es el titulo

• Mac OS, por ejemplo
  Y en formato de párrafo poner "Parte 1/2" y en el otro slide otro párrafo "Parte 2/2" para que se mantenga un único Title

Adicionalmente, hay una corrección adicional que quisiera proponer y es que me he percatado que hay encabezados con alguno de estos comportamientos(identificados en la sesión 1):

• Se repite en todos los slides del tema en cuestión(ej: 18-19).
• Se repite de 2/3 veces y no vuelve a aparecer en los restantes slides(ej: 20-24)
• Se repite un par de veces, no aparece en un slide y al siguiente slide vuelve a aparecer(ej: 50-54)
  Este patrón podría estar presente en las demás sesiones y junto a los encabezados que se enuncian una sola vez puede llegar a ir en contra de la organización y legibilidad que estamos tratando de implementar en el issue, por lo que quisiera que se evalue y se me de el visto bueno para aplicar el criterio de que un encabezado solo se enuncie una vez.
  Veo necesaria esta corrección a la par que corrijo la jerarquía por lo siguiente:
• Con la aplicación de colores, esta repetición variable de encabezados se hará más evidente y en consecuencia implicará en la legibilidad.
• Si se la plantea como una tarea futura, el colaborador tendrá que volver a revisar los .md e identificar nuevamente los encabezados con estos patrones, por lo que la inversión de tiempo se extenderá.