PA6 - Cómo hacer un árbol genealógico

🔝To translate this blog post to your language, select it in the top left Google box.

Mi árbol genealógico en Excel

En este artículo os explicaré cómo hacer un árbol genealógico con un único gráfico en Excel, ¡como a mí me gusta!

El árbol genealógico está hecho con un gráfico SmartArt del tipo Jerarquía con imágenes en círculos, como mencioné en el artículo anterior:

• PA5 - Árbol genealógico en un gráfico de Excel | #ExcelPedroWave

Básicamente se siguen estos tres pasos:

• Primero: se diseña el árbol invertido, con los descendientes encima de los descendientes, o sea, mi nieto arriba, de hecho es el jefe de la familia, y abajo mis suegros y mis padres.

• Segundo: se giran 180 grados todos los elementos del gráfico, o sea, el texto y la imagen de cada familiar.

• Tercero: se hace una copia del árbol en una imagen, que se gira 180 grados de nuevo, con lo que se forma el árbol genealógico convencional, ¡con los ascendientes encima y los descendientes debajo!

A continuación explicaré en detalle cómo hacer un árbol genealógico en Excel.

Cómo hacer fácilmente un árbol genealógico en Excel

Si no conoces los gráficos SmartArt, lee esto primero:

• Crear un gráfico SmartArt desde cero | Microsoft Support

Sigue estos pasos para hacer un árbol genealógico en Excel:

1) En la pestaña Insertar,  en el grupo Ilustraciones, selecciona SmartArt.

2) En el cuadro de diálogo Elegir un gráfico SmartArt, selecciona el tipo Jerarquía y el diseño Jerarquía con imágenes en círculos.

3) En el cuadro de nombres escribir: Diagrama Árbol.

4) Escribe un texto e inserta una imagen del primer miembro de la familia. Por ejemplo, mi padre.

5) Añade más miembros de la familia. Por ejemplo, la madre al lado del padre y a uno de sus hijos encima, pues es un árbol genealógico invertido. ¡Ya estoy en mi árbol!

6) Añade a tu pareja actual y a sus padres. Si has tenido parejas anteriores, tendrás que crear árboles genealógicos distintos para cada una de tus parejas.

7) Mueve tu imagen a la derecha. En la cinta de opciones selecciona: Diseño de SmartArt, haz clic en tu foto y en Mover Después.

8) Añade a uno de tus hijos como jefe jerárquico. En mi caso, a mi hijo mediano que falleció sin pareja, por lo que es conveniente ubicarlo en el centro, ya que en un gráfico jerárquico es imposible colocar a más de un hijo en el árbol genealógico. Como anécdota, a mi hijo Sergio sus compañeros de trabajo lo llamaban el jefe infiltrado, lo que resulta muy apropiado en un gráfico de jerarquía que está pensado para la relación entre un jefe y sus subordinados. Aunque en este árbol genealógico los subordinados son siempre los padres...

9) Añade más hijos si los tienes, tanto a la derecha como a la izquierda del hijo anterior. Para ello:

1. En la cinta de opciones, selecciona: Diseño de SmartArt
2. Haz clic en la imagen del jefe hijo.
3. Selecciona: Agregar forma detrás o Agregar forma delante
4. Escribe el texto de cada hijo e inserta su foto.

En mi caso, como tengo dos hijos más, he añadido al hijo mayor a la derecha y a mi hija a la izquierda.

10) Añade un jefe a cada uno de tus hijos, seleccionando: Agregar forma superior

11) Añade las parejas de tus hijos, seleccionando: Agregar forma detrás o Agregar forma delante

Solamente mi hija tiene pareja y la he puesto delante a la izquierda.

12) Y ahora añado a mi nieto, como jefe jerárquico de todos los que están debajo...

13) Para añadir a los hermanos de tu pareja que no tengan hijos, hace falta añadir una rama del árbol con dos jefes superiores sin nombre. Por ejemplo, para añadir una rama a la izquierda del árbol, para mi cuñada sin hijos...

Fíjate que, además de poder añadir nuevos familiares desde la cinta de opciones, se pueden añadir desde el menú contextual, haciendo clic en cualquier imagen con el botón derecho del ratón, y seleccionando: Agregar forma

14) A continuación añado una rama a la derecha del árbol con mi hermano, mi cuñada viuda y mis dos sobrinos, de momento sin hijos.

Con lo que ya tengo los familiares directos en el árbol, pero todavía faltan las relaciones con algunos hijos, en caso de que sus padres hayan tenido más de uno.

15) Cambia el estilo de SmartArt:

1. Seleccionando en la cinta de opciones: Diseño de SmartArt.
2. Dentro de Estilos SmartArt seleccionando: Efecto intenso

ATENCIÓN: Es importante seleccionar un estilo antes de ocultar textos, fotos y líneas, pues vuelven a aparecer cuando cambia el estilo SmartArt.

16) Se ocultan los textos sin texto, las imágenes sin foto y las líneas sin imágenes:

1. Seleccionando todas las formas con [Texto]
2. En Opciones de texto, cambiando la Transparencia al 100 % en Relleno de texto.
3. Seleccionando las imágenes sin foto.
4. En Formato de forma, cambiando la Transparencia al 100 % en Relleno sólido.
5. Seleccionando las líneas sin imágenes.
6. En Opciones de forma, cambiando la Transparencia al 100 % en Línea sólida.

Con lo que queda un árbol limpio, pero con algunos hermanos en ramas separadas...

17) Se giran horizontalmente algunas fotos para que las parejas se miren a la cara...

18) Para que los hijos que aún no tienen relación con sus padres la tengan, se insertan formas de línea con conectores angulares:

1. En la cinta de opciones selecciona: Insertar > Ilustraciones > Formas > Líneas > Conector: angular
2. Se copia el conector angular tantas veces como hijos falten por relacionar con sus padres.
3. Se dimensiona cada conector angular para relacionar un hijo con sus padres.

AVISO: Estos conectores son las únicas formas extras necesarias para relacionar a todos los hijos con sus padres. Estas formas se deben insertar manualmente, dándole al gráfico SmartArt el toque visual que le faltaba para parecer un árbol genealógico.

19) Este paso es obligatorio ya que, para que los ascendientes estén por encima de los descendientes, es necesario girar todos los textos y las imágenes:

1. Selecciona todos los textos.
2. En la cinta de opciones selecciona: Formato > Organizar > Girar > Voltear verticalmente
3. Selecciona: Inicio > Alinear a la derecha
4. Selecciona: Negrita del texto.
5. Selecciona todas las imágenes.
6. En la cinta de opciones selecciona: Formato de imagen > Voltear verticalmente

¡Ya tengo un árbol genealógico de la familia! ¡Pero invertido!

20) Como un plus extra, inserta un título para el árbol genealógico de la familia:

1. En la cinta de opciones selecciona: Insertar > Ilustraciones > Formas > Cuadro de texto
2. Edita el cuadro de texto. En mi caso: ÁRBOL GENEALÓGICO · FAMILIA WAVE-MONSOON
3. Posiciona el cuadro de texto, redimensiónalo y ponlo en negrita.
4. Dale un color de fondo verde claro.
5. En la cinta de opciones selecciona: Formato de forma > Voltear verticalmente

21) Inserta un cuadro de texto con el año y la fórmula: =$A$1 (se puede cambiar en cualquier momento la celda con el valor del año).

22) Agrupa el gráfico SmartArt con los cuadros de texto y los conectores angulares:

1. Selecciona el gráfico SmartArt.
2. En la cinta de opciones selecciona: Formato de forma > Panel de selección
3. Seleccionar los conectores y los cuadros de texto.
4. Seleccionar: Agrupar objetos.
5. Cambiar el nombre: Grupo Árbol

¡Ya tenemos el árbol genealógico completo! ¡Pero aún sigue invertido!

¡Y es imposible voltear el Grupo Árbol, pues contiene el gráfico SmartArt!

¡Los gráficos SmartArt tienen prohibido voltear o girar, por construcción de Excel!

¿Cómo solucionamos el problema sin tener que darle la vuelta a la pantalla del ordenador?

23) Crea un nombre definido con un rango de celdas que abarque el Grupo Árbol, con el nombre:

miÁrbol: ='Genealógico '!$A$2:$P$22

24) Para girar 180 grados el árbol genealógico:

1. Copia el rango del nombre definido: miÁrbol 
2. En la hoja 'Árbol' pégalo como Imagen.
3. En el cuadro de nombres, cambia el nombre de la imagen: Imagen Árbol
4. En la cinta de opciones selecciona: Formato de imagen > Organizar > Girar objetos > Más opciones de rotación...
5. En Formato de imagen, Tamaño, Cambiar Giro: 180º

¡Bien hecho! ¡Ya está girado el árbol genealógico!

¿Queda algo por hacer?

¡Es necesario investigar la accesibilidad!

Haz clic en Accesibilidad: es necesario investigar

Aparece el Asistente de accesibilidad, indicando los problemas detectados para que los corrijas.

Si no sabes de qué trata la accesibilidad en las hojas de cálculo de Excel, te sugiero que leas esta página:

• Procedimientos recomendados de accesibilidad con hojas de cálculo de Excel | Microsoft Support

Aprenderás a hacer que Excel sea accesible para todos los usuarios, incluidas las personas con alguna discapacidad.

La accesibilidad está integrada a partir de las versiones de escritorio de Excel 2016, en Excel para Android y en Excel para iPad e iPhone.

25) Para que este libro de Excel sea accesible a todos los usuarios falta añadir:

1. Texto alternativo en la imagen girada 180º del árbol genealógico de la hoja 'Árbol'.
2. Texto alternativo en el árbol genealógico con el gráfico SmartArt invertido de la hoja 'Genealógico'.

¡¡¡ Ya hemos creado el árbol genealógico accesible a todos los usuarios de Excel !!!

Árbol genealógico hecho en Excel

Este es el árbol genealógico hecho con un gráfico SmartArt.

ANÉCDOTA:

¿A qué no sabes cuántas imágenes, tanto animadas como estáticas, he capturado para explicar cómo hacer un árbol genealógico en Excel?

¡96 imágenes!

Tantas como los años que tenía mi padre, al que va dedicado este árbol genealógico. Lee la dedicatoria a la memoria de mi padre aquí:

• PA5 - Árbol genealógico en un gráfico de Excel | #ExcelPedroWave

¡Qué casualidad para alguien como yo que le gustan tanto los números!

Vídeo para aprender a hacer el árbol genealógico en Excel

En este vídeo te explico cómo hacer manualmente el árbol genealógico con un gráfico SmartArt.

🚧 EN CONSTRUCCIÓN 🚧

Descarga el árbol genealógico

Si quieres probar y modificar el Árbol genealógico, descárgalo desde este enlace:

• Árbol Genealógico - PW1.xlsx

Abre el archivo y presiona el botón: Habilitar edición cuando aparezca el aviso de VISTA PROTEGIDA.

ATENCIÓN: Se puede modificar este libro de Excel respetando esta licencia:

Creative Commons — Atribución-NoComercial-CompartirIgual-No portada — CC BY-NC-SA 4.0

AVISO: En el próximo artículo automatizaré algunos de los pasos explicados aquí, con lo que será más fácil crear y compartir este árbol genealógico.

Mis artículos sobre Programación Asistida

Sigue lo que escribo sobre Programación Asistida por la IA desde aquí:

• PAxIA | #ExcelPedroWave

Me alegrará saber si este proyecto te parece interesante.

Deja un comentario y te lo agradeceré.

PA5 - Árbol genealógico en un gráfico de Excel

🔝To translate this blog post to your language, select it in the top left Google box.

Ejemplo de árbol genealógico en un único gráfico

En este artículo os diré con qué tipo de gráfico de Excel he hecho el árbol genealógico de mi familia, ¡como a mí me gusta!

Sirva como ejemplo esta versión inicial simplificada, con mis padres y mis suegros en primer lugar, y mi nieto como colofón, en el que he cambiado los apellidos de la familia por razones obvias y, por confidencialidad, he sustituido las fotos de los familiares por sus caricaturas generadas con IA.

Dedicado a la memoria de mi padre

Mi padre se llamaba Guillermo y nació en el año 1930 en Cedrillas, un pueblo de la provincia de Teruel, donde hace 100 años nevaba cada invierno y la escuela quedaba demasiado lejos para ir andando.

Hasta los 9 años sufrió la guerra civil. A los 21 años hizo el servicio militar obligatorio de dos años en Boltaña, en el Pirineo aragonés, donde vio cómo amputaban muchos dedos congelados a los reclutas venidos de las Islas Canarias, que llegaban por primera vez a la península sin imaginar lo que era el frío helador, que mi padre había experimentado en su pueblo natal. Durante la mili aprendió a leer y a escribir cartas, que no enviaba a nadie y que guardó como un tesoro.

Recién cumplidos los 24 años trasladó a sus padres, hermanos y todos los muebles a Alloza, llegando el 10 de abril de 1954 a las 12 de la noche, según escribió mi padre en sus cartas. Era uno de los pocos pueblos de Teruel que prácticamente no sufrió los estragos de la posguerra, gracias a un acuerdo vecinal entre bandos de izquierdas y de derechas para reducir la represión franquista, que si sufrió mi abuelo paterno en Cedrillas y, por ende, mi abuela y sus 4 hijos. Fue el motivo principal por el que nunca quiso regresar a su pueblo natal.

A los dos días de llegar a Alloza, su padre, sus dos hermanos y él mismo se pusieron a trabajar en las minas de carbón Barrabasa. En su penúltima nómina de agosto de 1959 recibió 2.227 pesetas, equivalentes a unos 14 euros. Hoy en día, el SMI es 100 veces más alto.

Foto de mis padres bailando el 14 de septiembre de 1954.

Pronto conoció a mi madre, natural de Alloza. Se enamoró y se casaron en 1956, comenzando su propio calvario, que da para escribir un libro...

En 1957 nací yo y el 30 de septiembre de 1959 se vino él solo a Zaragoza a trabajar en una floristería, donde más tarde trabajaron sus dos hermanos hasta que se jubilaron.

En 1960 nos trajo a Zaragoza, a mi madre, a mi hermano recién nacido y a mi mismo, buscando la subsistencia de la familia, como cualquier español que participó en el éxodo rural de los años 60, migrando del campo a la ciudad y dejando tantos pueblos despoblados en la España vaciada.

Su idea era que sus hijos comenzaran a trabajar lo antes posible para ayudar a la economía familiar y evitar seguir pluriempleado, ya que trabajaba de lunes a sábado en el taller más grande de la capital aragonesa, y en una floristería por las tardes, los fines de semana y los días festivos. Aun así, nos dio estudios y nos llamaba “señoritos”, porque mi hermano y yo decidimos estudiar para no tener que trabajar tan duro como él, y finalmente conseguí ser ingeniero.

Haber trabajado como minero le permitió jubilarse anticipadamente a los 62 años, habiendo sido tornero especialista en Talleres Mercier, empresa a la que dedicó sus mejores años. Como anécdota, desde los años 70 mi familia mas cercana vive en una urbanización junto a los Talleres Mercier, pues mi padre fue de los primeros propietarios de un piso enfrente del taller, de modo que para ir al trabajo solamente tenía que cruzar la calle.

Mi hija le hizo bisabuelo en época de pandemia.

Su bisnieto Iker, recién nacido en la foto, fue la mayor alegría de sus últimos años.

Mi padre, q. e. p. d., falleció este verano a los 96 años, tras haber vivido demasiadas guerras internas y externas. Murió en Zaragoza, la ciudad donde vio crecer a sus descendientes, y donde al final tuvo que enterrar a un hijo, mi único hermano, y a un nieto, mi hijo mediano.

Este artículo está dedicado a la memoria de mi querido padre, para que su familia no olvide nunca lo que le tocó trabajar con tanto esfuerzo y sacrificio, pensando siempre en el bienestar de su familia, para que sus hijos y nietos no tuvieran que pasar ni un solo día por nada de lo que él sufrió durante tantos años.

¡Que así sea!

NOTA: Todo el mundo debería ser consciente de que, sin nuestros antepasados, no habría sido posible nuestra vida en la Tierra. Un árbol genealógico es una gran manera de recordarlos. ¡Siempre que haya descendencia!

Cuál es el tipo de gráfico del árbol genealógico en Excel

Como nadie ha acertado la pregunta: ¿Cuál es el tipo de gráfico del árbol genealógico en Excel?

Os digo la respuesta: Es un gráfico SmartArt del tipo Jerarquía con imágenes en círculos

¿Por qué elegir este tipo de gráfico?

VENTAJAS:

1) La estructura jerárquica encaja con el árbol genealógico:

• Pero con los descendientes en los niveles superiores.
• Y los ascendientes en los niveles inferiores.
• Las relaciones familiares entre los ascendientes y un descendiente quedan claramente organizadas.

2) Las fotografías facilitan la identificación:

• Para reconocer rápidamente a cada familiar.
• Para distinguir personas con nombres similares.
• Y aporta un componente emocional e histórico.

3) Los círculos generan uniformidad:

• Pues recortan todas las fotos al mismo formato.
• Ya que evitan diferencias visuales entre imágenes verticales y horizontales.
• Y dan un aspecto más moderno y elegante.

4) Se aprovecha el máximo espacio del árbol:

• Con fotos circulares de cada miembro de la familia.
• Y con nombres y fechas al lado.

5) El gráfico SmartArt es fácil de mantener:

• Añadiendo padres, hijos o hermanos desde el panel de texto.
• Reorganizando automáticamente el diseño.
• Cambiando colores y estilos sin redibujar todo el árbol.
• Para árboles familiares en continua evolución esto supone una gran ventaja.

6) Integración con Office:

• Se puede copiar el gráfico SmartArt entre aplicaciones: Excel, Word, PowerPoint.
• Se exporta fácilmente a PDF o imagen.
• Permite aplicar temas corporativos o personales.

7) Más adelante se puede intentar automatizar el gráfico SmartArt con macros:

• Para generar y exportar los árboles genealógicos.
• Para guardar en una tabla: fotos, nombres y fechas.
• Para cargar automáticamente los datos de la tabla en el gráfico SmartArt.
• Para crear una línea de vida de la familia.
• Para importar y exportar los datos genealógicos a otras aplicaciones de genealogía.

8) Los gráficos SmartArt son compatibles con todas las versiones de Excel de escritorio, desde Excel 2010 hasta Excel para Microsoft 365.

INCONVENIENTES:

1) Los gráficos de jerarquía del tipo SmartArt no están diseñados específicamente para genealogía.

2) Obliga a invertir el gráfico jerárquico para poder visualizar el árbol genealógico.

3) Para relacionar a los hermanos se deben añadir formas del tipo conector.

4) No gestiona bien matrimonios múltiples.

5) Las conexiones familiares complejas pueden resultar difíciles de representar.

6) Es un diseño muy comprimido para más de 100 personas.

7) Para automatizarlo, es preferible convertir el gráfico SmartArt en formas

8) Excel para la Web no admite gráficos SmartArt, que solo funcionan en Excel de escritorio.

Comparativas entre gráficos en Excel

En la siguiente tabla se explican las ventajas e inconvenientes de diseñar un árbol genealógico mediante 3 tipos de gráficos de Excel:

1) Gráfico SmartArt del tipo Jerarquía con imágenes en círculos.

2) Gráfico de Dispersión (XY).

3) Diagrama Personalizado con formas (shapes) y con macros programadas en lenguaje VBA.

¿Por qué no usar un gráfico de dispersión?

SmartArt ya entiende el concepto de jerarquía y las relaciones entre padres e hijos; un gráfico de dispersión solo entiende números y hay que enseñarle todo lo demás mediante programación.

¿Por qué no usar un diagrama personalizado?

Con un diagrama personalizado con formas, conectores y macros VBA, hacen falta conocimientos de programación avanzada para diseñar un árbol genealógico, que no están al alcance de cualquier usuario de Excel.

En resumen: el gráfico de Jerarquía con imágenes en círculos ofrece probablemente la mejor combinación de claridad, estética, facilidad de edición e integración en Excel para un árbol genealógico familiar visual. Es una solución especialmente adecuada cuando las fotografías son tan importantes como los nombres y fechas.

Además los gráficos SmartArt son compatibles con todas las versiones de Excel de escritorio, desde Excel 2010 hasta Excel para Microsoft 365.

Y, sobre todo, son gráficos fáciles de hacer y de mantener por usuarios no técnicos.

Prueba el árbol genealógico

Prueba el árbol genealógico descargándolo de la nube de Microsoft OneDrive, pues Excel para la Web no admite la interacción con gráficos SmartArt, que solamente funcionan en Excel de escritorio.

Para ajustar el zoom en la nube:

• En el móvil o celular usa dos dedos en la pantalla, como haces para ampliar o reducir una foto.
• En el PC sitúa el cursor dentro del buscador y presiona la tecla <Control> girando la ruleta del ratón.

Descarga el archivo haciendo clic en el botón: Descargar

AVISO: Como este artículo ya es bastante extenso, en el próximo artículo explicaré cómo hacer fácilmente este árbol genealógico en un gráfico de Excel.

Mis artículos sobre Programación Asistida

Sigue lo que escribo sobre Programación Asistida por la IA desde aquí:

• PAxIA | #ExcelPedroWave

Me alegrará saber si este proyecto te parece interesante.

Deja un comentario y te lo agradeceré.

PA4 - Grados de parentesco familiar

🔝To translate this blog post to your language, select it in the top left Google box.

Mis grados de parentesco

He creado este artículo a partir de una duda que me surgió sobre si se puede tener permiso laboral por hospitalización de un sobrino.

Es el cuarto artículo creado gracias a la Programación Asistida por la IA, pues yo solo no hubiera sabido programar el código HTML, CSS y JavaScript con el que he diseñado este árbol animado con Grados de parentesco familiar, que se puede ver a la derecha de estas líneas.

Encima y debajo del árbol, hay un botón que cambia su texto:

• Mostrar grados de parentesco

• Ocultar grados de parentesco

Todo lo que le solicité a la IA, y toda su asistencia para conseguir programar esta página Web, está resumido en el siguiente enlace:

• Reconstrucción completa del hilo | Microsoft Copilot

Como le hice muchas preguntas a la IA, si necesitas una respuesta concreta, pídemela en un comentario.

También puedes pedirme el código HTML, CSS y JavaScript.

CONCLUSIÓN: He llegado a la conclusión de que, si eres funcionario, tienes permiso por hospitalización de un sobrino, pero si en tu convenio colectivo no se menciona al sobrino, no tendrás ese derecho. ¡Por mucho que sea de segundo grado de parentesco familiar!

Mi parentesco familiar

🟦 COMPORTAMIENTO DEL BOTÓN

✔ Al pulsar Ocultar grados de parentesco:

• Se ocultan filas y grados

• Solo las filas vuelven a aparecer gradualmente

✔ Al pulsar Mostrar grados de parentesco:

• Las filas NO se ocultan

• Solo los grados aparecen gradualmente

ATENCIÓN: Pasa el ratón por encima de cualquier familiar y lo verás resaltado.

Mis grados animados de parentesco

¿Alguna vez has visto un árbol familiar tan animado como éste?

¡Yo no!

Grado de parentesco familiar

3er GRADO

Bisabuelos paternos

Bisabuelos maternos

Bisabuelos paternos

Bisabuelos maternos

2º GRADO

Abuelos paternos

Abuelos maternos

Abuelos paternos

Abuelos maternos

1er GRADO

Padre

Madre

Suegro

Suegra

YO

Pareja / Esposo(a)

Yerno

Hija

Hijo

Nuera

2º GRADO

Nieto/a

Nieto/a

Nieto/a

Nieto/a

3er GRADO

Bisnieto/a

Bisnieto/a

Bisnieto/a

Bisnieto/a

2º GRADO

Cuñado

Hermana

Hermano

Cuñada

Sobrino/a

Sobrino/a

Sobrino/a

Sobrino/a

3er GRADO

Sobrino/a nieto

Sobrino/a nieto

Sobrino/a nieto

Sobrino/a nieto

2º GRADO

Tío

Tía

Tío político

Tía política

4º GRADO

Primo/a

Primo/a político/a

¿Has pensado en cuántos antepasados fueron necesarios para que nacieras?  

¿Y qué ocurrirá si no dejas descendencia? 

¡Que tu árbol familiar se truncará y no tendrás futuro!

Mis artículos sobre Programación Asistida

Sigue lo que escribo sobre Programación Asistida por la IA desde aquí:

• PAxIA | #ExcelPedroWave

Me alegrará saber si este proyecto te parece interesante.

Deja un comentario y te lo agradeceré.

PA3 - Cómo programé la comparativa animada

🔝To translate this blog post to your language, select it in the top left Google box.

Mi comparativa animada

En este artículo explicaré lo que he aprendido en dos días para conseguir programar una comparativa animada, gracias a la Programación Asistida por IA, que te animo a que la uses para mejorar como programador.

En este artículo puedes probar la Comparativa animada y los botones de Repetir animación:

• PA2 - Programación por Pares vs Programación Asistida | #ExcelPedroWave

Por supuesto que publicaré las PROMPTS (SOLICITUDES en español) con las que he guiado a la IA de Microsoft Copilot para obtener este aspecto de la comparativa animada.

Vídeo de la comparativa animada

En este vídeo verás la comparativa animada.

Cómo programé la comparativa animada

Hace dos semanas le hice varias preguntas a la IA, y la contestación de Microsoft Copilot está en estos enlaces:

• ¿Qué sabes de la programación por pares?

• ¿Eso no es lo que hacemos tú y yo últimamente?

• Explícame la programación asistida, historia, ventajas e inconvenientes.

• Guía de riesgos de la Programación Asistida

• Tarjeta en formato imagen A4 de la comparativa entre programación por pares y programación asistida.

Con estas cinco preguntas, la IA me ofreció una explicación bastante clara sobre la Programación por Pares y la Programación Asistida, además de proporcionarme una imagen comparativa que se muestra a la derecha de este texto.

El problema es que se colaron bastantes errores en el texto de la imagen: "Dos deansolladores humans", "Entorno comparrido", "Ejecución y y depuración en cónjusitó", "Sugerencias y correcciónes", "Transferencia de conveinnento".

Aquí no voy a poner las preguntas que le hice a la IA para que corrigiera los textos de la imagen, cosa imposible, o para que generara los textos correctos en archivos tipo .docx o .xlsx o .pptx. Me indicaba los pasos manuales a seguir, que eran muchos, pero no generaba automáticamente los archivos Word ni Excel ni PowerPoint, lo que era muy frustrante...

Como son gratuitas, le hice unas cuantas preguntas más a la IA:

• Año de comienzo del uso generalizado de la IA

• La Programación por Pares, ¿no se denomina también: Programación en Pareja?

• ¿Existe la Programación Remota en Pareja?

• Busca "Programación Asistida con IA" y pásame enlaces, por ejemplo de Wikipedia.

Programación Asistida de código HTML + CSS + JavaScript

No conseguí los textos correctos en la comparativa hasta que le pedí:

• Versión animada para Blogger

La imagen resultante está a la derecha, y no se parece a la imagen generada previamente por la IA, aunque se puede integrar en el blog porque está diseñada con HTML + CSS.

Le falta añadir los iconos y que también sean animadas la cabecera y el pie de la comparativa y la última fila que es estática.

En los siguientes enlaces comienza la Programación Asistida por la IA para mejorar el código HTML + CSS + JavaScript de la comparativa animada.

Le hice varias preguntas sobre esta versión animada a la IA, pues yo no he usado prácticamente CSS y necesitaba aprender a programar si quería incrustar la comparativa animada en mi blog:

• ¿Cómo crear una columna central muy estrecha con HTML en Blogger?

• ¿Cómo quito los bordes de los iconos?

• Cómo puedo insertar los [ICONO] en Blogger

• Los iconos de la imagen que generaste.

• Genera el icono azul ahora

Después de varias consultas conseguí que generara el primer icono.

El procedimiento no me pareció efectivo, por lo que extraje los 18 iconos desde la imagen de la comparativa con la aplicación Fotos de Windows 11:

Le hice varias preguntas más:

• Generar infografía completa para Blogger

• Significado de: animation: fadeIn 2s ease forwards;...

Además necesitaba asistencia para repetir la animación:

• Añade un botón para que Blogger vuelva a generar la animación.

• Y para que el botón vuelva a animar el pie

• Cómo colocar dos botones para repetir la animación, uno antes y otro después de la animación.

• El botón de abajo no reinicia la animación.

• Revisa este código: <style>...

• Revisa esto: <div class="pie">...

• ¿Puedes mejorar esto? .col {...

• Qué otras animaciones hay además de fadeIn

Como no sabía nada de la cantidad de animaciones que se pueden generar en CSS, estuvo platicando con la IA sobre algunas de ellas, pero es tan extenso el tema que aquí no voy a enlazar la animada charla que tuve con la IA y las pruebas que hice con algunos de los tipos de animación que ofrece CSS.

Destaco aquí las animaciones que decidí usar:

• Para la cabecera: animation: bounceWave 3s ease-out forwards;
• Para las filas: animation: fadeIn 0.8s ease forwards;
• Para el pie animation: bounceWave 5s ease-out forwards;

Lo que me faltaba por resolver era:

• Que las filas salgan más despacio

Y con todas esas SOLICITUDES (PROMPTS en inglés) conseguí respuesta a todas mis preguntas y conseguí resolver algo que no sabía programar hasta hace unos días: una comparativa animada con código HTML + CSS + JavaScript, que puedes probar aquí:

• PA2 - Programación por Pares vs Programación Asistida | #ExcelPedroWave

Si necesitas ayuda en algún paso concreto de cómo programé la comparativa animada, puedes consultarme a mí y te contestaré en modo Programación Remota por Pares o en Pareja.

¡¡¡ O mejor aún, puedes preguntar directamente a la IA en modo Programación Asistida !!!

Mis métodos de programación

Le he pedido a la IA una tabla con los métodos de programación usados en la comparativa animada:

• Qué métodos de programación se usan en el código que me has ido enviando en este hilo?

En el siguiente enlace está la respuesta de la IA de Microsoft Copilot en formato tabla HTML + CSS, y un poco más abajo la tabla creada con algunos ajustes adicionales:

• Infografía con los métodos de programación usados | Microsoft Copilot

Métodos de Programación Usados en la Comparativa

Programación Declarativa

Uso de CSS para definir estilos, animaciones y estados sin indicar pasos imperativos. (Ej.: @keyframes, animation, flexbox).

Programación Imperativa

JavaScript ejecutando instrucciones paso a paso para reiniciar animaciones y manipular elementos.

Manipulación del DOM

Selección y modificación de elementos HTML mediante querySelectorAll y style.

Programación Basada en Eventos

El botón “Repetir animación” usa un evento onclick para ejecutar código cuando el usuario interactúa.

Reflow Forzado

Técnica avanzada usando offsetWidth para reiniciar animaciones CSS sin recargar la página.

Diseño Modular

Separación clara entre HTML, CSS y JavaScript para mantener el código limpio, escalable y fácil de mantener.

Cómo programé el índice automático desplegable

Al principio de este artículo aparece un índice automático desplegable, que conseguí programar asistido por la IA, mediante las siguientes SOLICITUDES:

• Cómo crear un índice con enlaces dentro de un artículo de Blogger

• Indice plegable acordeon

• Índice plegable automático que detecta H4

• Dónde coloco el CSS

• No quiero que en el índice aparezcan los dos últimos H4

• Incluir por clase

• Botón para volver al índice

• No funciona el índice en el móvil con Android

Para que funcione en teléfonos ¿inteligentes? he tenido que mostrar siempre mi blog en modo escritorio:

• Desactivar plantilla movil

• Probar indice en Android

• El indice aparece

• El <Style> del índice ¿se puede llevar antes del <Script>?

Con esto consigo crear un índice automático desplegable en cualquier artículo de mi blog y usarlo tanto en el escritorio de Windows como en el teléfono con Android.

El índice se puede plegar y desplegar manualmente, y reconoce automáticamente las etiquetas h4 con class="indice" como partes integrantes del índice automático.

Al pulsar los botones: Volver al índice se hace scroll hacia arriba hasta llegar al índice.

¿Quieres que este índice automático desplegable aparezca en los próximos artículos?

Mis artículos sobre Programación Asistida

Sigue lo que escribo sobre Programación Asistida por la IA desde aquí:

• PAxIA | #ExcelPedroWave

Me alegrará saber si este proyecto te parece interesante.

Deja un comentario y te lo agradeceré.