🔝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:
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 todo lo que escribo sobre
Programación Asistida para mejorar el Mapamundi con relojes desde
aquí:
🔝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:
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:
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:
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:
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;
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í:
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:
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:
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:
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 todo lo que escribo sobre
Programación Asistida para mejorar el Mapamundi con relojes desde
aquí:
🔝To translate this blog post to your language, select it in the top left
Google box.
Programación por Pares
Con la
Programación por Pares o Programación en Pareja
(Pair Programming en inglés), no se puede aprender a programar,
porque se trata de emparejar a dos expertos en un determinado lenguaje de
programación para mejorar el código escrito por ambos.
Programación Asistida
Con la
Programación Asistida por IA
(Vibe coding)
si se puede aprender a programar un nuevo lenguaje de programación, que es
lo que acabo de hacer en dos días.
He pasado de usar el lenguaje
HTML
como un aficionado a programarlo como un profesional, aunque sigo sin ser un
experto en HTML,
CSS y
JavaScript.
Con lo que he conseguido diseñar el código que muestro más abajo, y he
podido incrustar la comparativa entre los dos métodos de programación dentro
del artículo de
Blogger
que estás leyendo ahora mismo, justo debajo de estas líneas.
Comparativa animada
Con una pizca de HTML, otro poco de CSS y el resto de JavaScript
he conseguido programar la siguiente comparativa animada, con botones
para repetir la animación.
Pero no la habría sabido programar sin la inestimable ayuda de la
Programación Asistida con la IA de
Microsoft Copilot.
ATENCIÓN: Gira el móvil o celular en posición horizontal y ajusta el zoom con
dos dedos para ver claramente la siguiente comparativa.
Comparativa: Programación por Pares vs
Programación Asistida
Programación por Pares
Programación Asistida
Dos desarrolladores humanos
Humano + IA (Asistente)
Simétricos, cambio de roles
Asimétricos, humano conduce, IA asiste
Debate y negociación
Sugerencias y correcciones
Turnos de 15–30 minutos
Asistencia rápida y continua
Entorno compartido
Limitación del contexto
Ejecución y depuración en conjunto
La IA no ejecuta el código
Detectados entre ambos
Riesgo de fallos sutiles
Experiencia compartida
Transferencia de conocimiento
Colaboración con la Inteligencia Natural
↔ Asistencia de la Inteligencia
Artificial
Ventajas e inconvenientes de la comparativa animada
Esta tabla la creó la IA mediante estas tres solicitudes:
Mejoran la comprensión:
guían la mirada y ordenan la información.
Pueden distraer:
si se usan en exceso o sin un propósito claro.
Aumentan la atención:
el movimiento atrae la vista de forma natural.
Requieren control de estados:
si el estado final no está bien definido, el elemento puede quedar
oculto.
Dan sensación de profesionalidad:
una entrada suave o un glow sutil elevan la calidad visual.
Reiniciarlas no es trivial:
a veces hay que usar trucos como forzar reflow para reiniciar la
animación.
Son ligeras:
las animaciones CSS consumen pocos recursos y funcionan bien en
móviles.
Pueden afectar a la accesibilidad:
usuarios sensibles al movimiento pueden necesitar animaciones más
suaves o desactivadas.
No requieren librerías externas:
todo se hace con CSS y el propio navegador.
Dependencia del orden de carga:
en entornos como Blogger, si el script se carga antes que los
elementos, los eventos pueden fallar.
Fáciles de mantener:
cambiar duración, suavidad o estilo no rompe la estructura.
Compatibilidad variable:
algunos efectos avanzados (como ciertos filtros) pueden verse distinto
según el navegador.
Escalables:
se pueden añadir más elementos animados sin reescribir la base.
Riesgo de saturación visual:
si todo se mueve, nada destaca y el mensaje se diluye.
Cómo programé la comparativa animada
En el próximo artículo explicaré cómo he conseguido hacer la
comparativa animada en dos días, para lo que necesito bastantes más
días, pues tengo que recoger todas las ideas que he aprendido durante el
proceso de aprendizaje con la Programación Asistida por IA.
Por supuesto que publicaré las PROMPTS (SOLICITUDES en español) con
las que he guiado a la IA de Microsoft Copilot
para obtener la comparativa animada.
Vídeo de la comparativa animada
En este vídeo verás la comparativa animada.
Cómo programé el índice automático desplegable
Al principio de este artículo aparece un
índice automático desplegable, que acabo de programar asistido por la
IA en dos horas.
También lo pienso explicar en el próximo artículo, además de explicar cómo
hacer los botones: Volver al índice, como el de aquí abajo, que al
pulsarlo 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 todo lo que escribo sobre
Programación Asistida para mejorar el Mapamundi con relojes desde
aquí:
🔝To translate this blog post to your language, select it in the top left
Google box.
DEDICATORIA
Dedico este y los próximos artículos a mi amigo Fernando, el mejor programador que he conocido en
mi vida profesional, con quien he compartido muchas sobremesas y que, recién jubilado, se mudó
a vivir a
Pareja(pueblo de Guadalajara), escapando de
los madriles.
Cambios en el Mapamundi con relojes
Para no perderte en el laberinto de los cambios de horario de invierno y de
verano, lee estas páginas:
O mejor aún,
descarga la nueva versión del Mapamundi con relojes en Excel, que he
diseñado a partir de las versiones anteriores que publiqué en mi blog:
La nueva versión tiene este aspecto y permite saber la hora en cualquier
ciudad del mundo:
La nueva versión del Mapamundi con relojes la he diseñado con la
inestimable ayuda de
Microsoft Copilot, una IA generativa que permite la Programación Asistida (Vibe coding), de la que hablaré más adelante.
Descarga el nuevo Mapamundi con relojes
Descarga la última versión del Mapamundi con relojes, en continua
evolución, desde este enlace:
Las macros del archivo descargado están bloqueadas por defecto. Para
desbloquear las macros debes modificar las Propiedades del archivo
siguiendo estas instrucciones:
Abre el archivo y presiona el botón: Habilitar edición cuando
aparezca el aviso de VISTA PROTEGIDA.
Presiona el botón: Habilitar contenido cuando aparezca la ADVERTENCIA
DE SEGURIDAD Las macros se han deshabilitado o se deshabilitó parte del
contenido activo.
Las macros no están protegidas para poder analizar fácilmente el código VBA.
Las hojas están protegidas sin contraseña, para poder analizarlas y para
evitar que los usuarios alteren las fórmulas.
ATENCIÓN:
Se puede modificar este libro de Excel respetando esta licencia:
En este vídeo explico cómo usar el Mapamundi con relojes.
Te agradecería que me comentaras cualquier sugerencia de mejora o los
errores que deban corregirse en una próxima versión.
Programación en Pareja
Mi carrera profesional acabó en 2020 (año de la pandemia) sin haber
usado la
Inteligencia Artificial - IA, pues el uso generalizado de la IA comenzó en el año 2022, coincidiendo
con la aparición y expansión de los modelos de IA generativa como
ChatGPT.
Lo que si conocí fue la
Programación en Pareja o Programación por Pares
(Pair Programming), que es una técnica de desarrollo ágil,
especialmente con la
Programación Extrema(Extreme Programming - XP), donde
dos desarrolladores trabajan juntos en el mismo código al mismo tiempo, compartiendo pantalla, teclado y ratón. Uno escribe y el otro revisa, y
ambos intercambian roles con frecuencia. Esto mejora la calidad del código,
acelera el aprendizaje y reduce errores.
La Programación en Pareja o Programación por Pares se denomina así
porque siempre hay dos programadores, que intercambian sus roles
regularmente:
Conductor/Piloto: es el que escribe el código.
Navegador/Copiloto: es el que revisa el código, detecta errores,
propone mejoras y piensa en el diseño general.
Siempre he creído que este tipo de programación es el mejor para generar
código, aunque pocas veces la he practicado, pues hacen falta dos
programadores para generar un único código, y los gestores de proyectos aún
piensan que cada programador haga su tarea y se responsabilice de ella, sin
contar con una pareja de programadores, cuando es más rápido y eficaz que
dos programadores codifiquen juntos aprendiendo el uno del otro.
Con el teletrabajo se creó la variante de Programación Remota en Pareja(Remote Pair Programming), donde ambos desarrolladores trabajan desde
lugares separados usando herramientas de colaboración remota en tiempo real.
Yo no la he probado, pues suelo programar habitualmente solo...
¡Hasta hace poco!
Programación Asistida
Este es el primer artículo sobre Programación Asistida por IA, que me
ha servido para diseñar la última versión del
Mapamundi con relojes en Excel, y para compartir mis experiencias de
programación con los lectores de mi blog.
Los títulos de cada uno de los artículos de esta serie comenzarán con
PA y un número de artículo, para indicar que se refieren a la
Programación Asistida (PA).
La
Programación Asistida por IA
(Vibe coding)
permite a programadores solitarios desarrollar software que antes requería
un equipo de ingeniería.
"La nueva relación entre los programadores y la inteligencia artificial
será de colaboración, en la que las herramientas automatizadas
incrementarán la productividad y la eficiencia, mientras que el
conocimiento y la experiencia humana seguirán siendo esenciales para
incrementar la
calidad del software."
Programación por Pares vs Programación Asistida
¿Cómo he programado el nuevo Mapamundi con relojes?
Con la inestimable ayuda de
Microsoft Copilot, una IA que permite codificar mediante Programación Asistida.
Gracias a MS Copilot he podido encontrar bugs, mejorar y comentar el código
VBA de la última versión del Mapamundi con relojes, que puedes
descargar más arriba y que está en continua evolución, pues no me resisto a
seguir consultando a la IA, que está activa 24x7 y deseando ayudarme.
De momento, quédate con esta comparativa:
Mis artículos sobre Programación Asistida
En los próximos artículos de esta serie sobre Programación Asistida,
os contaré cómo la IA me ha ayudado y sigue ayudándome a realizar cambios en
el código VBA e incluso en las hojas de Excel.
🔝To translate this blog post to your language, select it in the top left
Google box.
Cómo aprender a usar relojes de 24 horas
He visto que quienes vienen de países con relojes que marcan la hora en
formato de 12 horas con AM/PM tienen dificultad para aprender a usar relojes
de 24 horas.
En países como Colombia se dice: la una de la tarde en lugar de las 13
horas, pues no están acostumbrados a relojes de 24 horas.
Con estos dos relojes se aprende a distinguir el formato de 12 horas
AM/PM del formato de 24 horas.
El reloj de la izquierda marca la una y 18 minutos en formato PM (después
del mediodía).
El reloj de la derecha marca las 13:18 horas en formato de 24 horas.
TRUCO:
Para convertir cualquier hora PM en 24 horas, se suman 12 horas. Por
ejemplo, 01:18 PM se convierte en 13:18 horas. Si es 01:18 AM no se suma
nada, por lo que es 01:18 horas.
Vídeo para saber la hora
En este vídeo de unos dos minutos explico cómo saber la hora en los relojes
de 12 horas y de 24 horas.
Pruébalo ahora mismo en tu teléfono
Prueba en tu teléfono estos dos relojes analógicos, de 24 horas y de 12
horas con AM/PM, desde esta ventana en la nube de Microsoft OneDrive:
ATENCIÓN:
Para hacer zoom, coloca dos dedos sobre la pantalla del teléfono y muévelos,
igual que cuando amplías o reduces una foto.
En la barra de abajo hay varios iconos:
Botón para actualizar los relojes:
Actualizar todas las conexiones de datos
Botón para descargar el archivo: Descargar
Botón para: Información acerca de este libro. Aparece un
Código para insertar que no funciona desde hace meses. Está
denunciado a Microsoft, pero no da solución.
Ayúdame a compartir los relojes, insertando el siguiente código en tu
blog o página web:
Pruébalo ahora mismo en tu PC
Prueba en tu PC estos dos relojes analógicos, de 24 horas y de 12 horas con
AM/PM, sin necesidad de descargar nada, incluso sin tener instalado Excel,
desde esta ventana en la nube de Microsoft OneDrive:
Para ajustar el zoom en la nube:
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
Si quieres ayudarme puedes compartir el nuevo reloj analógico,
insertándolo en tu blog o página web con este código:
ATENCIÓN:
Se puede modificar este libro de Excel respetando esta licencia:
Dynamic array update and the @ operator
-
Many of the user defined functions (UDF’s) presented in this blog return an
array rather than a single value. Options for displaying arrays in Excel
have c...
Coeficientes trinomiales
-
Los coeficientes trinomiales son una extensión de los binomiales, definidos
estos como
Y que son los coeficientes del binomio de Newton:
De forma análog...
Automatiza tareas con Power Automate de Microsoft
-
Automatiza tareas con Power Automate es facil usando esta herramienta de
Microsoft (dentro de Power Platform) puedes automatizar tareas repetitivas
para ...
Build a Daily Events Calendar in Excel
-
Use my Excel events calendar to track meetings and events inside a
workbook. Add your upcoming events to a list, set a start date, and then
see those items...
Cómo hacer gráficos en Excel
-
Excel es una de las herramientas más potentes y versátiles para el análisis
y la presentación de datos. Los gráficos en Excel no solo ayudan a
visualizar...
Análisis DAFO (FODA, DOFA) las decisiones con Excel
-
Para conocer la situación de una empresa, proyecto o persona, recurrimos al
análisis DAFO (FODA, DOFA) en la toma de decisiones con Excel. El los años
sese...
How To Predict Bearing Life With Excel
-
When you work in mechanical engineering, understanding the reliability and
performance of bearings under various conditions is crucial. Bearings are
the co...
TikTok’s search evolution
-
2 in 5 Americans use TikTok as a search engine. Nearly 1 in 10 Gen Zers are
more likely to rely on TikTok than Google as a search engine. More than
half of...
Unblocking and Enabling Macros
-
When Windows detects that a file has come from a computer other than the
one you're using, it marks the file as coming from the web, and blocks the
file....
La importancia de saber mecanografía en 2022
-
[image: Resultado de imagen de mecanografía viñeta escribiendo a máquina]
Según la RAE, la mecanografía es el arte de escribir a máquina. Hace unos
cuantos...
London Excel Meetup Workbooks
-
The workbooks used in my presentation on “Analytical and Interactive
Dashboards in Excel” at the London Excel Meetup, September 3, 2020
International Keyboard Shortcut Day 2019
-
The first Wednesday of every November is International Keyboard Shortcut
Day. This Wednesday, people from all over the world will become far less
efficient...
Welcome, Prashanth!
-
Last March, I shared that we were starting to look for a new CEO for Stack
Overflow. We were looking for that rare combination of someone who… Read
more "W...
Salvador Sostres, analfabeto profesional
-
Los nuevos tiempos traen nuevas profesiones. Internet, además, ha
revolucionado el mundo del periodismo y la palabra escrita. Adaptarse o
morir, ese es el ...
Planificación de compras
-
Realizar una lista con los productos que necesitamos y que formarán parte
de nuestra cesta de la compra nos ayuda a *encontrar la combinación de
bienes p...
Mis metas son seguir superando nuevos retos en Excel y compartirlos en mi blog, para sacarle todo el poder a esta excelente herramienta multiusos, tan usada y a la vez tan incomprendida, para así poder mejorar nuestros conocimientos de Excel.
