hAppYpUkIng — Lab
Ix(A+H) = Expanded heart and brain!
Recursos educativos interactivos, abiertos y gratuitos para mentes que aprenden diferente.
¿Qué es esto?
hAppYpUkIng nació de una necesidad real: crear materiales que funcionaran de verdad para estudiantes que piensan distinto o simplemente con dificultad para conectar con los formatos convencionales.
Empezó en casa, para mis hijos. Lo que funcionó, lo comparto con todos.
Aquí no hay PDFs estáticos ni libros de texto digitalizados.
Aquí hay recursos interactivos que el alumno puede explorar a su ritmo, desde distintos puntos de entrada, con retroalimentación visual inmediata.
Todo el contenido está alineado con el currículo oficial de la ESO (España).
🚪 ¿Qué necesitas hoy?
La portada no empieza por el catálogo. Empieza por el problema.
Nadie llega a un laboratorio solo a explorar. Se llega un martes con algo
concreto: no se saben las tablas, la formulación parece magia negra,
confunden CD, CI y atributo. Catorce entradas escritas así, cada una
apuntando a la herramienta que sirve para eso.
El catálogo por materias sigue estando, justo debajo. Pero primero se
pregunta qué duele.
📁 Estructura del repo
Las carpetas usan un prefijo de tres letras por materia, y cada archivo
repite ese prefijo. Así se sabe de dónde viene un fichero solo con verlo.
happypuking-lab/
├── index.html # Portada — catálogo de todas las herramientas
├── about.html # De dónde viene esto y por qué
├── bio/ # Biología
│ ├── bio-5reinos.html # Los 5 Reinos — explorador de conexiones
│ ├── bio-invertebrados-mapa.html # Invertebrados — mapa de los 6 grupos
│ ├── bio-invertebrados-tarjetas.html # Invertebrados — tarjetas
│ └── bio-reino-plantas.html # Reino de las Plantas — explorador e historia
├── inf/ # Computación
│ └── inf-pseudocoder.html # PseudoCoder — fundamentos de programación
├── ing/ # Inglés
│ ├── ing-verbos-irregulares.html # Familias fonológicas de verbos irregulares
│ ├── ing-verbos-quiz.html # Quiz de verbos — con banco de frases en YAML
│ ├── ing-grammar-builder.html # Construir oraciones pieza a pieza
│ ├── ing-timeline.html # Mapa de metro de los tiempos verbales
│ └── ing-sing-and-learn.html # Patrones de verbos cantando
├── len/ # Lengua
│ └── len-morfosintaxis.html # Morfosintaxis — explorador y analizador
├── mat/ # Matemáticas
│ └── mat-tabla-pitagorica.html # Tabla pitagórica — patrones y simetría
├── qui/ # Química
│ ├── qui-tabla-periodica.html # Tabla periódica — 3 modos de lectura
│ ├── qui-elementos-tarjetas.html # Quiz de elementos — práctica
│ ├── qui-formulador.html # Formulación — óxidos, hidruros, hidrácidos y sales
│ ├── qui-lab.html # Lab — compuestos con átomos y electrones
│ └── qui-pasteleria.html # Pastelería de Mendeleyev — juego de la tabla periódica
├── assets/
│ ├── crt/ # CRT, el monitor de tubo de PseudoCoder, y su tarjeta (PNG)
│ ├── qui/ # Tarjetas para compartir de la Tabla periódica, la Formulación y el Lab (PNG)
│ └── macarons/ # Chef Minou, macarons y sabores (PNG) de Macarons
├── nd/ # Neurodivergencia
│ ├── nd-carga-sensorial.html # Modelo de Carga Sensorial (ES)
│ └── nd-carga-sensorial-en.html # Sensory Load Model (EN)
└── trn/ # Transversal
└── trn-reloj.html # El Reloj · The Clock — bilingüe
Una carpeta, una materia, un prefijo. La referencia siempre es lo que enlaza
index.html: aquí no hay copias de seguridad ni versiones paralelas — para
eso está el historial de git.
🧪 Recursos disponibles
✅ Publicados
| Recurso | Materia | Nivel | Archivo |
|---|
| Los 5 Reinos | Ciencias Naturales | 1º ESO | bio/bio-5reinos.html |
| Invertebrados | Ciencias Naturales | 1º ESO | bio/bio-invertebrados-mapa.html |
| Reino de las Plantas | Ciencias Naturales | 1º ESO | bio/bio-reino-plantas.html |
| Invertebrados — tarjetas | Ciencias Naturales | 1º ESO | bio/bio-invertebrados-tarjetas.html |
| Verbos Irregulares | Inglés | ESO | ing/ing-verbos-irregulares.html |
| Quiz de Verbos | Inglés | ESO | ing/ing-verbos-quiz.html |
| Grammar Builder | Inglés | ESO | ing/ing-grammar-builder.html |
| Timeline de Tiempos | Inglés | ESO | ing/ing-timeline.html |
| Sing & Learn | Inglés | ESO | ing/ing-sing-and-learn.html |
| PseudoCoder | Computación | Primaria / ESO / Bach | inf/inf-pseudocoder.html |
| Morfosintaxis | Lengua Castellana | ESO | len/len-morfosintaxis.html |
| Tabla Pitagórica | Matemáticas | Primaria / ESO | mat/mat-tabla-pitagorica.html |
| Tabla Periódica | Química | ESO | qui/qui-tabla-periodica.html |
| Quiz de Elementos | Química | ESO | qui/qui-elementos-tarjetas.html |
| Formulación | Química | ESO | qui/qui-formulador.html |
| Lab de Química | Química | ESO | qui/qui-lab.html |
| Pastelería de Mendeleyev | Química · Juego | ESO | qui/qui-pasteleria.html |
|
⚗️ Química — el viaje hacia la formulación
Las cuatro herramientas de Química están pensadas como una secuencia, no como
piezas sueltas. La idea es que formular deje de ser memorizar.
La Tabla Periódica se lee en tres capas, con el mismo tablero:
- Familias — reconocer el territorio: quién es quién y de qué familia.
- Valencia — cuántos electrones tiene cada átomo en la última capa, que
es lo único que cuenta al unirse. Se ve que cada columna comparte valencia.
- Electronegatividad — con cuánta fuerza los agarra. La diagonal que
explica la forma de la tabla.
El Quiz de Elementos ancla esas tres capas: practicar símbolos, nombres,
familias y electrones de valencia, con filtro por familia y lista de fallos
para repasar.
La Formulación enseña el mecanismo. Eliges una familia (óxidos, hidruros
metálicos, hidrácidos o sales binarias) y un elemento, y aparece el compuesto
equilibrado con sus tres nomenclaturas (tradicional, Stock y sistemática) y
una tira paso a paso de cómo cuadran las valencias.
El Lab cierra el ciclo. Es un laboratorio manipulable: eliges ingredientes
en la despensa, los llevas a la mesa, mueves electrones por paquetes y formas
enlaces. Cubre las cuatro familias binarias (óxidos, hidruros metálicos,
hidrácidos y sales), con nivel de dificultad y de apoyo seleccionables para
que el feedback acompañe sin resolver.
🧁 Pastelería de Mendeleyev — el patio de recreo
Fuera de la secuencia, y para quien aún no se atreve con la química seria:
los 118 elementos de la tabla periódica convertidos en pequeñas piezas de
repostería. Cada elemento es un macaron de su familia (fresa para los
alcalinos, menta para los metaloides, mora para los gases nobles…) y se
desbloquea demostrando que se conoce.
- Cuatro niveles de cocina — Pinche pide solo el nombre; Cocinero añade la
familia; 1er Oficial, el número atómico; Chef, también el periodo.
- Una ayudita en Pinche — tras tres intentos fallidos con el mismo
ingrediente, o en cuanto se toca a Minou, el chef pregunta si se necesita
una ayudita y, si se acepta, enseña el nombre. El ingrediente se colecciona igual, pero con borde
discontinuo azul y la nota «con ayudita», para ver qué falta por afianzar.
Un botón en la vitrina («Reintentar ayuditas») devuelve esos ingredientes a
«?», previa confirmación, para volver a ganárselos sin ayuda.
- Empezar de cero — al pie de la vitrina, «Vaciar vitrina» borra toda la
colección, previo aviso de cuántos ingredientes se pierden. No se puede
deshacer.
- Chef Minou MiauMiau, el gato pastelero, reacciona a cada acierto y a
cada fallo, y se duerme si te quedas pensando demasiado.
- La vitrina se rellena sola — el progreso y el nivel se guardan en el
propio navegador, así que recargar no pierde la colección.
- Se juega con el ratón o con el teclado, y las animaciones respetan el ajuste
del sistema de reducir movimiento.
El interior del juego lleva su propia paleta pixel, fija: el tema claro u
oscuro solo cambia el marco.
💻 Computación — PseudoCoder
Fundamentos de programación (variables, constantes, tipos de datos, entrada de datos,
condicionales, «según», bucles y «repetir … hasta») sin escribir una línea de código y
sin atarse a un lenguaje: un pseudocódigo propio, con su intérprete dentro de la
página. Lo que lo distingue: cuando la respuesta es incorrecta, no se queda en señalar
el error. El intérprete vuelve a ejecutar el programa con los malentendidos típicos
(una caja que guarda una foto y no un atajo, un «mientras» que funciona como un «si»,
un «según» que sigue por los casos de después…) y busca cuál reproduce lo que
respondió quien lo intenta. Así puede señalar qué regla equivocada explicaría la
respuesta, sin dar por hecho qué pensaba la persona y sin dejarle con la pregunta.
- Tres modos — Construir (arrastra las piezas hasta formar el programa;
se comprueba por comportamiento, no por orden exacto), Predecir (qué
mostrará este programa) y Mirar (ver cómo lo ejecuta la máquina, paso a paso,
con las cajas y sus valores).
- Ver qué hace tu programa incompleto — en Construir, aunque falten líneas,
el programa que has montado se ejecuta: dice qué muestra y se puede ver paso a
paso. Los errores típicos (intercambiar sin una caja auxiliar, contar al
revés…) traen una pista propia.
- Entrada de datos —
leer pide un dato a quien usa el programa; el
ejercicio indica qué escribe esa persona y se ve que siempre llega como texto
hasta que se convierte en número.
- Por bloques — los temas se agrupan en cuatro pestañas (cajas; decidir;
repetir; datos) y los bloques de cajas y de repetir se cierran con un repaso
que mezcla lo anterior.
- Tres niveles de lenguaje —
?nivel=primaria, eso o bach: mismos
ejercicios, con las frases adaptadas. Todos los textos viven en un solo sitio
del fichero, para poder reescribirlos sin tocar el motor.
- Ayuditas con reserva — una ayudita enseña un paso, resta XP y gasta una
de las cinco casillas de la reserva. Se recargan con XP, con el tiempo o
contestando una pregunta (sin poder consultar las ayudas mientras se
responde).
- CRT, el monitor de tubo que acompaña, reacciona a cada acierto, fallo o
toque. Todo el juego es un monitor de fósforo (verde, ámbar o cian); si
prefieres la apariencia del laboratorio hay un interruptor.
- Se juega con el ratón, el dedo o el teclado. El progreso se guarda solo en el
propio navegador, y las animaciones respetan el ajuste del sistema de
reducir movimiento.
🔢 Matemáticas — la tabla pitagórica no es una lista
Tres modos sobre el mismo tablero, porque son tres cosas distintas:
- Explorar — ver el patrón. No son 100 resultados, son 55: la diagonal
es un espejo. Eso se ve antes de repetir nada.
- Minas gemelas — practicar la multiplicación. Cada resultado aparece
dos veces, y descubrir uno descubre su gemelo.
- Caza topos — factorización al revés: te damos el 12 y buscas 3×4, 2×6.
Es lo que hace falta después para dividir.
⏱ Ritmos — parar a pensar no es fallar
Las herramientas de práctica tienen dos ritmos, y se elige antes de empezar:
- No me estreses — sin cuenta atrás. El reloj cuenta hacia arriba y no
pasa nada.
- Contra reloj — con cuenta atrás, pero con un botón «Estoy pensando»
que la congela sin penalizar. Pensar no descuenta.
Además, tras tres fallos seguidos aparece un respiro automático, y hay una
salida explícita —«Me aburro»— para dejarlo sin sensación de abandono.
Ninguna herramienta envía nada a ningún servidor ni pide una cuenta. Lo poco que
recuerdan (el tema, el ritmo y, en la Pastelería, tu colección) vive en tu propio
navegador.
🔗 Enlaces directos a un modo
Los modos se pueden enlazar. Sirve para mandarle a alguien exactamente lo que
necesita, no la portada:
mat/mat-tabla-pitagorica.html?modo=minas # practicar multiplicación
mat/mat-tabla-pitagorica.html?modo=caza # factorizar
qui/qui-elementos-tarjetas.html?modo=sym2name # símbolo → nombre
qui/qui-elementos-tarjetas.html?modo=family # ¿de qué familia?
qui/qui-elementos-tarjetas.html?modo=valence # electrones de valencia
🔧 En desarrollo
| Recurso | Materia | Nivel |
|---|
| Verbos irregulares español | Lengua Castellana | ESO |
| Chuletarios interactivos | Todas | VARIOS |
⭐ Si te sirve, deja una estrella
No cuesta nada, no me da tu correo y no te suscribe a nada. Es la única señal
que me llega de que al otro lado hay alguien: una manera muy estúpida de decir
"te he visto, y me gusta lo que estás haciendo".
Si te has llevado algo de aquí, déjala. Se tarda un segundo.
🧠 Sección ND — Neurodivergencia
Recursos explicativos sobre neurodivergencia — no clínicos, no diagnósticos.
Pensados para entender, comunicar y reducir la brecha entre quien lo vive y quien no.
Modelo de Carga Sensorial — herramienta interactiva sobre prefiltrado sensorial y sobrecarga en perfiles DPS / TEA.
Explica el desajuste entre el input disponible y la capacidad de atenuación automática.
Incluye amortiguadores naturales y conductuales, factores de coste adicional (masking, sobrecarga ejecutiva, falta de previsibilidad) y comparativa NT / DPS en tiempo real.
No es un test. No es un diagnóstico. Es para entender y explicar.
🎮 ¿Cómo funcionan los recursos?
Los recursos son archivos HTML autocontenidos — sin instalación, sin login, sin servidor.
Se abren directamente en el navegador. También funcionan sin conexión — descarga el archivo y úsalo donde quieras.
Cada recurso incluye múltiples modos de navegación cuando el contenido lo justifica:
- Modo explorador — navegación libre por secciones
- Modo historia — recorrido guiado paso a paso con narración
🗂 Contenido extensible con YAML
Algunas herramientas separan el contenido del código mediante archivos YAML. Esto permite:
- Añadir o modificar contenido sin tocar el HTML
- Generar nuevas oraciones o ejercicios con un chatbot desde la propia herramienta
- Adaptar los recursos a cualquier nivel o contexto sin conocimientos técnicos avanzados
Generador guiado dentro del propio "Cargar mis..." en len-morfosintaxis y
ing-verbos-quiz: eliges cuántas frases quieres por nivel (y por familia, o
pegas tu propio listado de verbos y se te detectan las familias). La herramienta
prepara el prompt completo con un ejemplo real como plantilla, tú lo pegas en
un chatbot y devuelves el YAML. El cargador tolera los tropiezos habituales
del modelo (envolturas markdown, * en vez de -, valores sin cotizar).
🎨 Identidad visual
Dos temas: oscuro por defecto (papel casi negro) y claro (papel cálido
#e7e0d6, no blanco puro — un blanco sobre pantalla brillante es fuente de
carga sensorial). El conmutador está en la esquina inferior derecha; la
elección se recuerda y respeta la preferencia del sistema si no la fijas.
Tipografía Unbounded · Diseño pensado para reducir fatiga visual y maximizar
contraste en los dos temas (paletas didácticas reelegidas para papel sin
perder la distinguibilidad entre familias).
El color significa algo y siempre lo mismo, en las 17 herramientas:
| Color | Qué dice |
|---|
| Magenta | Identidad del laboratorio · navegación |
| Cian | El control activo · el foco del teclado |
| Ámbar | Apoyo: pausar, pensar, pedir pista, dejarlo |
| Verde | Correcto · confirmar |
| Rojo | Error |
Dos reglas que lo sostienen: los colores de dato viven en el tablero y los de
control en los bordes; y el color nunca es lo único que dice el estado,
siempre hay texto que lo acompaña. Verde y ámbar son el par peor distinguido
en deuteranopia y son dos de nuestros significados opuestos.
Weird, pero funcional. Así somos.
Otros recursos
Simulador de física interactivo para Bachillerato.
🐀 Glitch
La mascota del laboratorio. Es una rata, porque las ratas saben encontrar
caminos incluso cuando el sitio está lleno de piezas que no encajan.
No dice si has acertado. Aparece en dos momentos y nada más: cuando paras a
pensar y cuando termina una ronda. No reacciona pregunta a pregunta —se probó
así y cansaba.
Se puede esconder. El interruptor está en la portada y vale para todo el
laboratorio de una vez.
📺 Canal de YouTube
@h4ppypuk1ng — vídeos y contando.
📬 Contacto
¿Preguntas, colaboraciones o simplemente quieres decir algo?
✉️ [email protected]
☕ Invitar a un café
Todo esto es gratis y va a seguir siéndolo. Detrás no hay una startup: hay una
madre robando horas de sueño y pagando suscripciones.
Si algo de aquí te ha servido, te ha ahorrado tiempo o te ha salvado un examen,
puedes invitarme a un café.
ko-fi.com/v0raonline
Una cosa importante: las propinas no te suscriben a nada. No uso, exporto ni
almaceno los emails de quien apoya el proyecto. Solo quiero café, no que seamos
amigos para siempre.
📄 Licencia
CC BY-NC-SA 4.0
Puedes usar, adaptar y compartir — siempre que sea sin fines comerciales y mantengas esta misma licencia.
Cita la fuente. Es lo mínimo.
Las ilustraciones de la Pastelería de Mendeleyev (Chef Minou y Mikan, macarons,
mochis y sabores) se generaron con inteligencia artificial y se seleccionaron y
prepararon para el proyecto. Los detalles están en
assets/macarons/CREDITOS.md.
El modo Mochis está abierto a revisión cultural: si ves algo que corregir, escribe a [email protected].
Igual con CRT, la mascota de PseudoCoder: sus ilustraciones se generaron con
inteligencia artificial y se seleccionaron y prepararon para el proyecto
(assets/crt/CREDITOS.md).
🤝 Contribuciones
¿Tienes una idea o encontraste un error?
Abre un issue o un PR. Esto es un taller abierto, no un producto terminado.
Issues · V0raOnline/happypuking-lab
🦄 Sobre el proyecto
Lee el about.html para entender de dónde viene esto, por qué se llama así y quién hay detrás.
Spoiler: una persona, un cerebro lokito y una IA bien entrenada.
Built with AI, with intention, and with lived experience.
For those who've heard "you're just not trying hard enough" one too many times.
