Aquí tienes mis artículos más recientes y uno aleatorio de regalo
Descubre cómo dar charlas técnicas puede transformar tu carrera como desarrollador, mejorando tus habilidades de comunicación, ampliando tu red profesional y posicionándote como líder de opinión en la comunidad tech.
Ver más →Reddit, Yahoo y Medium se suman a RSL (Really Simple Licensing), el nuevo estándar que busca que las empresas de IA paguen por entrenar con el contenido de creadores y medios.
Ver más →Mejora tu SEO marcando enlaces de afiliados como patrocinados. Google te lo agradecerá.
Ver más →Aquí irían las fotos...\n\n```\n\n```css\nsummary::marker {\n content: \"📸\" / \"Ver\";\n}\n```\n\n**Resultado visual:** 📸 Galería de fotos \n**Lo que lee el screen reader:** _\"Ver Galería de fotos\"_\n\nDe esta forma puedes decorar visualmente el summary sin añadir ruido innecesario a usuarios de tecnologías asistivas.\n\n## Compatibilidad de navegadores\n\nLa sintaxis con texto alternativo (content: \"icono\" / \"texto\";) todavía no tiene un soporte uniforme en todos los entornos.\n\n- ✅ Chrome, Firefox y Edge (Windows + NVDA/JAWS): soportan tanto el icono como el texto alternativo.\n- ⚠️ Chrome y Firefox en macOS con VoiceOver: muestran el emoji visual, pero el lector de pantalla ignora el texto alternativo.\n- ❌ Safari + VoiceOver en macOS: directamente roto → no se ve ni el emoji ni se lee el texto.\n\nTraducido para la gen Z: úsalo para decoración, pero no confíes en `::marker` como única fuente de información importante.\n\n## Casos de uso comunes\n\n- **Iconos decorativos**:\n\n ```css\n summary::marker {\n content: \"✨\" / \"\";\n }\n ```\n\n- **Iconos informativos**:\n\n ```css\n summary::marker {\n content: \"⚠️\" / \"Advertencia\";\n }\n ```\n\n- **Estados**:\n\n ```css\n summary::marker {\n content: \"🔽\" / \"Expandir\"; /* o \"🔼\" / \"Contraer\" */\n }\n ```\n\n## Conclusión\n\nUn detalle minúsculo, pero que marca la diferencia entre un acordeón bonito y uno realmente inclusivo.\nAsí que ya sabes: si juegas con `::marker`, no olvides también jugar con la accesibilidad.\n\n## ℹ️ Extra: lectores de pantalla en Windows\n\n**NVDA** (_NonVisual Desktop Access_) → Lector de pantalla gratuito y open source, muy popular en Windows.\nLo usan tanto personas con discapacidad visual como desarrolladores para testear accesibilidad.\n\n**JAWS** (_Job Access With Speech_) → Lector de pantalla comercial (de pago, bastante caro).\nEs muy potente y está muy extendido en entornos corporativos.\n","collection":"blog","data":{"title":"Haz accesible el contenido de los pseudo-elementos ::marker en CSS","description":"Cómo personalizar ::marker en Es el lenguaje de marcado base para cualquier página web.\n\n \n Sirve para dar estilo a los elementos, desde colores hasta layouts\n complejos.\n \n\n Permite añadir interactividad, lógica y manipulación del DOM.\n\n```\n\nEste código genera un acordeón con tres secciones y cada una se despliga de forma independiente, sin afectar a las demás.\n\n Haz clic en “olvidé mi contraseña” como todo el mundo.\n\n\n Sí, aunque tu gato probablemente también lo está usando sin que sepas.\n\n\n Pasas al siguiente plano existencial digital. No hay vuelta atrás.\n\n```\n\n` y `` de HTML son una joya oculta para crear interfaces tipo acordeón o \"ver más / ver menos\", de forma nativa, accesible y sin dependencias externas.\n\nNada de instalar otro paquete de npm que te rompa el proyecto en dos meses.\n\n## Uso básico\n\nPor defecto, cada `
` se puede abrir de forma independiente. Esto es genial si quieres permitir que se expandan múltiples secciones a la vez:\n\n```html\n\n HTML\n
\n CSS\n
\n JavaScript\n
` cuando uno se abre.\n2. **Usar HTML** (opción nativa): Puedes usar un atributo HTML para controlar el estado de los acordeones. 🏆\n\n### Opción JavaScript\n\nSi necesitas un control más granular (animaciones, persistencia en `localStorage`, etc.), puedes usar JavaScript. Aquí tienes un ejemplo sencillo:\n\n```js\ndocument.querySelectorAll(\"details\").forEach((targetDetail) => {\n targetDetail.addEventListener(\"click\", () => {\n document.querySelectorAll(\"details\").forEach((detail) => {\n if (detail !== targetDetail) detail.removeAttribute(\"open\");\n });\n });\n});\n```\n\n### Opción HTML\n\nLa solución nativa (y poco conocida) es usar el atributo `name`. Si todos los `` tienen el mismo `name`, solo uno puede estar abierto a la vez.\n\nEste comportamiento recuerda al de los ``, que solo uno puede estar activo a la vez.\n\nEl ejemplo anterior se puede reescribir así:\n\n```html\n\n ¿Cómo reinicio mi contraseña?\n
\n ¿Puedo usar mi cuenta en varios dispositivos?\n
\n ¿Qué pasa si borro mi cuenta?\n
`\n\nAhora que tus `
` se comportan como tu quieres, puedes ir un paso más allá y darles un toque visual simpático.\n\nCSS te permite modificar los íconos que aparecen al lado de `` usando el pseudo-elemento `::marker`.\n\nPor defecto, el ícono es un triángulo (⏵), pero puedes cambiarlo a cualquier cosa que te guste.\n\n```css\nsummary::marker {\n content: \"🙈\";\n}\n\n[open] summary::marker {\n content: \"🙉\";\n}\n```\n\n¿No te parece gracioso? Mira este ejemplo:\n\n
` y `` son semánticamente accesibles por defecto. No necesitas hacer nada especial con JavaScript.\n\nEl elemento `
` es focusable y se puede activar con `Enter` o `Space`.\n\nComo siempre: **testea**. Con teclado, con lectores de pantalla, y si tienes amigos, con alguien que no tenga tus mismos privilegios visuales o de motricidad. El HTML hace mucho por ti, pero tú tienes que poner algo también.\n\n## Conclusión\n\nLos elementos `
` y `` son herramientas potentes, accesibles y que muchas veces pasamos por alto. Para acordeones simples, no necesitas JavaScript, ni React, ni MUI, ni librerías de 20 KB. Solo HTML y un poco de CSS.\n\nY si quieres limitar su comportamiento a uno abierto a la vez, puedes usar el atributo name para conseguirlo de forma elegante.\n\nNo subestimes el poder de lo nativo. La próxima vez que necesites un acordeón o un panel desplegable, ya sabes: empieza por lo simple. Lo demás, si hace falta, ya vendrá.\n\n**P.D.**: Si acabas usando esto en producción, mándame un pantallazo o un enlace. Me hace ilusión ver estos detallitos sueltos por la web salvaje.\n","collection":"blog","data":{"title":"Acordeones nativos en HTML sin una línea de JavaScript","description":"Aprende a crear acordeones accesibles y funcionales utilizando solo HTML, sin necesidad de JavaScript","pubDate":"2025-05-09T00:00:00.000Z","updatedDate":"2025-06-03T00:00:00.000Z","published":true,"tags":["HTML","a11y"],"author":"Jorge Baumann","type":"blog","ogImage":"https://baumannzone-dev-og.vercel.app/api/og?title=Acordeones%20nativos%20en%20HTML%20sin%20una%20línea%20de%20JavaScript&tags=HTML,A11y","relatedPosts":["haz-accesible-el-contenido-de-los-pseudo-elementos-marker-en-css"]}},{"id":"personaliza-marker-en-css-sin-romper-la-accesibilidad.md","slug":"personaliza-marker-en-css-sin-romper-la-accesibilidad","body":"\nAñadir un emoji o un icono a una lista puede parecer una mejora visual menor, hasta que se prueba con un lector de pantalla. ¿Sabías que el contenido definido en `::marker` también se lee en voz alta?\n\nUn elemento decorativo puede convertirse en ruido para personas que navegan con tecnologías de asistencia.\n\nEjemplo básico:\n\n```css\nsummary::marker {\n content: \"🎵\";\n}\n```\n\n```html\n
Playlist\n```\n\nVisualmente, el resultado puede parecer correcto. Sin embargo, un lector de pantalla podría anunciar \"_Nota musical Playlist_\", algo que no siempre coincide con la intención del contenido.\n\nPor suerte, CSS permite separar el contenido visual del texto que se expone a tecnologías de asistencia mediante un segundo valor en `content`.\n\n## Opción 1: Definir el texto anunciado\n\n```css\nsummary::marker {\n content: \"🎵\" / \"Música\";\n}\n```\n\nCon esta configuración, el lector anunciará \"_Música Playlist_\" en lugar de intentar interpretar el emoji.\n\n## Opción 2: Omitir el anuncio del marcador\n\n```css\nsummary::marker {\n content: \"🎵\" / \"\";\n}\n```\n\nEn este caso, el lector de pantalla anunciará únicamente \"_Playlist_\", ignorando el emoji. El cambio visual es nulo y la experiencia auditiva resulta más limpia.\n\n> Nota: el comportamiento puede variar según la combinación de navegador y lector de pantalla, así que conviene validar en tu entorno objetivo. Así que haz pruebas cross-browser y con diferentes tecnologías de asistencia para asegurarte de que la experiencia es óptima para todos los usuarios.\n\n---\n\n\n\nSi usas macOS, puedes validarlo rápidamente con **VoiceOver**.\n","collection":"blog","data":{"title":"Personaliza ::marker en CSS sin romper la accesibilidad","description":"Aprende a personalizar ::marker en CSS sin romper la accesibilidad, separando el contenido visual de lo que leen los lectores de pantalla.","pubDate":"2025-05-08T00:00:00.000Z","published":true,"tags":["CSS","a11y"],"author":"Jorge Baumann","type":"blog","ogImage":"https://baumannzone-dev-og.vercel.app/api/og?title=Personaliza%20%3A%3Amarker%20en%20CSS%20sin%20romper%20la%20accesibilidad&tags=CSS,a11y"}},{"id":"la-sintaxis-secreta-de-of-s-en-nth-child-que-probablemente-estas-ignorando.mdx","slug":"la-sintaxis-secreta-de-of-s-en-nth-child-que-probablemente-estas-ignorando","body":"\nimport Demo1 from \"../../components/demos-blog/la-sintaxis-secreta-de-of-s-en-nth-child-que-probablemente-estas-ignorando/1.astro\";\nimport Demo2 from \"../../components/demos-blog/la-sintaxis-secreta-de-of-s-en-nth-child-que-probablemente-estas-ignorando/2.astro\";\n\nUna de las joyas escondidas en la caja de herramientas de CSS es la sintaxis matemática de `:nth-child()`. Mucha gente la usa con números simples como `:nth-child(2n)` y se queda ahí, sin saber que la fórmula acepta mucho más.\n\nHoy vamos a diseccionar la famosa fórmula `An+B` de CSS. Hoy vas a aprender a usar el selector `:nth-child()` con su nueva y mejorada sintaxis `of S`.\n\n## TL;DR (para ir al grano)\n\n```css\n:nth-child(2 of .active) {\n color: red;\n}\n```\n\n## Lo básico: `:nth-child(An+B)`\n\nYa conoces la sintaxis clásica de `:nth-child()`:\n\n- `:nth-child(2)`: Selecciona el segundo elemento.\n- `:nth-child(2n)`: Selecciona todos los elementos pares (2º, 4º, 6º, 8º, ...).\n- `:nth-child(2n+1)`: Selecciona todos los elementos impares (1º, 3º, 5º, 7º, ...).\n\nPero, ¿sabías que también puedes usar la sintaxis `of S` para hacer un prefiltro?\n\n## ¿Qué es `of S`?\n\nCuando se especifica `of S`, la lógica `An+B` se aplica solo a los elementos que coinciden con la lista de selectores `S`.\nBásicamente, esto significa que puedes prefiltrar los elementos hijos antes de que `An+B` entre en acción.\n\n```css\ntr:nth-child(2 of .active) {\n /* ... */\n}\n```\n\nEn este ejemplo, selecciona el segundo elemento que tenga la clase `.active`.\nDicho de otro modo, de entre todos los hijos con la clase `.active`, selecciona el segundo.\n\n## Caso práctico: lista con elementos ocultos\n\nImagina que tienes seis elementos en una lista, pero dos están ocultos con el atributo `hidden`.\n\n```html\n