Guía Completa de Bloques de Contenido
Post de ejemplo que demuestra todos los tipos de bloques disponibles en el nuevo sistema de contenido estructurado.
Sistema Blog
Documentación oficial del sistema
Guía Completa de Bloques de Contenido
Este post es una demostración completa de todos los tipos de bloques disponibles en nuestro nuevo sistema de contenido estructurado. Cada bloque está diseñado para ofrecer una experiencia de usuario excepcional con soporte completo para markdown inline.
Títulos y Texto
Este es un título de nivel 3
Los párrafos soportan negrita, cursiva, subrayado, y enlaces como este link a Google o enlaces externos con atributos. También puedes usar código inline para resaltar términos técnicos.
"El diseño es la inteligencia hecha visible. Un buen diseño de contenido no solo se ve bien, sino que comunica de manera efectiva."
Imágenes - Una Imagen
Imágenes - Dos Imágenes en Grid
Imágenes - Tres Imágenes en Grid
Imagen con Texto - Layout Izquierda
Imagen con Texto - Layout Derecha
Bloques de Código
El sistema soporta bloques de código con syntax highlighting, botón de copiar, y resaltado de líneas específicas:
El sistema ahora soporta resaltado de líneas con colores para mostrar buenas y malas prácticas:
Las líneas marcadas en rojo indican código que debe evitarse, mientras que las verdes muestran la forma correcta de implementarlo.
También funciona con otros lenguajes como HTML:
Tablas Dinámicas
Las tablas son perfectas para mostrar datos estructurados de manera clara:
Comparación de Frameworks de JavaScript
| Framework | Versión | Tamaño (min+gzip) | Performance |
|---|---|---|---|
| React | 19.0.0 | 42.2 KB | Excelente |
| Vue | 3.4.0 | 34.1 KB | Excelente |
| Svelte | 4.2.0 | 1.6 KB | Excepcional |
| Angular | 17.0.0 | 144 KB | Buena |
Videos Embebidos
Integra fácilmente videos de YouTube o Vimeo con aspectos ratios personalizables:
Video de demostración de YouTube
Citas y Testimonios
Las citas son perfectas para destacar ideas importantes o testimonios:
"El contenido estructurado no es solo más fácil de mantener, es exponencialmente más escalable. Cada bloque es independiente, reutilizable, y optimizado para SEO."
Ventajas del Sistema de Bloques
Este sistema ofrece múltiples beneficios sobre el markdown tradicional:
Markdown vs Bloques Estructurados
| Característica | Markdown | Bloques |
|---|---|---|
| Type Safety | ❌ No | ✅ Sí (TypeScript) |
| Componentes Custom | ⚠️ Limitado | ✅ Completo |
| Validación | ❌ No | ✅ En build time |
| Reutilización | ⚠️ Manual | ✅ Automática |
| SEO | ✅ Bueno | ✅ Excelente |
| Performance | ✅ Bueno | ✅ Optimizado |
"La mejor arquitectura es aquella que desaparece. Los bloques estructurados te permiten enfocarte en el contenido, no en la implementación."
Nuevos Bloques de Texto
Este es un párrafo grande (pl) diseñado para destacar información importante o introducciones de secciones. Tiene mayor tamaño y peso visual.
Este es un párrafo pequeño (ps) ideal para notas al pie, disclaimers, o información secundaria. Mantiene la legibilidad pero con menor jerarquía visual.
Separadores y Espaciado
El bloque st (separator) crea una línea horizontal para dividir secciones visualmente:
El bloque sp (spacer) añade espacio vertical personalizado. Útil para crear respiración visual entre secciones sin usar separadores.
Más Ejemplos con Imágenes
Bloques de Advertencias
Los bloques de advertencia permiten destacar información importante con diferentes niveles de urgencia:
eval() en producción. Es un vector de ataque XSS y puede ejecutar código malicioso.strict: true para prevenir bugs en tiempo de compilación y mejorar la experiencia de desarrollo.Bloques Interactivos
Los bloques interactivos permiten ocultar/mostrar contenido dinámicamente:
Spoiler - Contenido Revelable
El bloque spoiler es perfecto para ocultar contenido que el usuario puede revelar haciendo click:
Accordion - Secciones Expandibles
El bloque accordion permite crear secciones que se expanden/contraen, ideal para FAQs o documentación:
ContentRenderer. Esto permite crear contenido estructurado sin escribir HTML.✅ Reutilizable: Componentes consistentes
✅ Performance: Optimizaciones automáticas
✅ SEO: HTML semántico correcto
✅ Accesibilidad: ARIA labels incluidos
Galería de Imágenes (Slider)
El bloque gal (galería) crea un slider automático de imágenes con transiciones suaves y controles intuitivos:
Arquitectura moderna estática con Next.js
Nuevos Bloques Avanzados - Visualización de Datos
El sistema ahora incluye gráficos interactivos y herramientas de comparación visual para presentar datos de forma profesional.
Gráficos de Datos
Tres tipos de gráficos están disponibles: barras horizontales, barras verticales, y línea temporal. Todos con grid visual y colores personalizables.
Comparación de Frameworks (Barras Horizontales)
Crecimiento Mensual de Usuarios (Barras Verticales)
Evolución de Performance Score
Distribución de Tecnologías Usadas
Comparador de Imágenes Interactivo
El bloque imc (image compare) permite comparar dos imágenes con un slider deslizable. Perfecto para mostrar antes/después o comparar versiones.
Callouts Destacados
Los callouts permiten destacar información importante con diferentes variantes de color según el contexto:
código, y links.Modelo 3D Interactivo
El bloque md3 permite incrustar modelos 3D interactivos con rotación, zoom, y control de texturas. Ideal para mostrar productos, prototipos, o visualizaciones arquitectónicas.
Cargando visor 3D...
El visor 3D está construido con Three.js y React Three Fiber, ofreciendo performance óptima incluso con modelos complejos. Los usuarios pueden:
Controles del Visor 3D
| Acción | Control | Descripción |
|---|---|---|
| Rotar | Click + Arrastrar | Gira el modelo en todas direcciones |
| Zoom | Scroll / Pellizco | Acerca o aleja la vista |
| Mover | Click derecho + Arrastrar | Desplaza la cámara |
| Vista | Botones | Alterna entre texturas y geometría |
| Auto-rotate | Automático | Rotación continua suave |
Layout Flexible - Organización Avanzada
El bloque flex permite dividir el espacio en 1 a 4 columnas con bloques independientes en cada sección. Perfecto para crear diseños complejos tipo magazine.
Columna Izquierda
Esta sección puede contener cualquier tipo de bloque: párrafos, imágenes, código, gráficos, etc. Todo funciona de forma independiente.
Performance Metrics
Columna Derecha
El layout es completamente responsive: en mobile se apila en 1 columna, en tablet 2, y en desktop muestra todas las columnas configuradas.
Conclusión
El sistema de bloques estructurados transforma completamente la experiencia de creación de contenido.
Con type safety, componentes reutilizables, y optimización automática, es la solución perfecta para blogs modernos que requieren flexibilidad sin sacrificar performance.
Nota: Todos los posts antiguos con markdown siguen funcionando perfectamente gracias al sistema de compatibilidad.
¿Te gustó este artículo?
¡Compártelo con tu comunidad!
