Bienvenida a Mi Blog - Grafico
Bienvenida a Mi Blog con Emacs y Esteroides
Bienvenidos a mi blog estático generado con Org Mode y publicado en GitHub Pages. Este es un ejemplo de cómo integrar gráficos en nuestros posts.
Creación del gráfico de bienvenida
A continuación, crearemos un gráfico usando Org Babel con Gnuplot:
# Configuración general set terminal png size 800,500 enhanced font "Helvetica,14" set output "~/myblog/images/welcome-graph.png" set title "Bienvenida a Mi Blog con Emacs y Org Static" font "Helvetica,18" set style fill solid 0.5 set style data histogram set style histogram cluster gap 1 set boxwidth 0.9 set grid ytics set xtics rotate by -45 set xlabel "Tecnologías" font "Helvetica,14" set ylabel "Nivel de Potencia" font "Helvetica,14" set yrange [0:10] set palette defined (0 "skyblue", 1 "royalblue", 2 "dark-blue") # Datos para el gráfico $DATA << EOD Tecnología Potencia Flexibilidad Productividad "Emacs" 9.2 9.5 8.7 "Org Mode" 9.0 9.8 9.2 "GitHub" 8.5 8.0 8.8 "Markdown" 7.0 6.5 7.5 "HTML" 8.0 7.2 7.0 EOD # Generación del gráfico plot $DATA using 2:xtic(1) title "Potencia" linecolor rgb "#3498db", \ $DATA using 3 title "Flexibilidad" linecolor rgb "#2980b9", \ $DATA using 4 title "Productividad" linecolor rgb "#1f618d"
Análisis del gráfico
El gráfico anterior muestra una comparativa entre diferentes tecnologías utilizadas para blogging, destacando tres dimensiones clave:
- Potencia: Capacidad para realizar tareas complejas
- Flexibilidad: Adaptabilidad a diferentes necesidades
- Productividad: Eficiencia en el flujo de trabajo
Como podemos observar, Emacs y Org Mode destacan en todas las dimensiones, lo que los convierte en herramientas ideales para la creación y gestión de blogs estáticos.
Configuración para mostrar imágenes correctamente
Para asegurar que las imágenes se muestran correctamente en nuestro blog:
- Las imágenes deben estar en el directorio
~/myblog/images/ - Al referenciarlas en el HTML generado, usamos la ruta
/images/nombre-imagen.png - Nuestra configuración se encarga de copiarlas al directorio público durante la exportación
;; Ejemplo de la configuración para imágenes ("blog-images" :base-directory "~/myblog/images/" :base-extension "png\\|jpg\\|jpeg\\|gif\\|svg\\|webp" :publishing-directory "~/myblog/public/images/" :publishing-function org-publish-attachment :recursive t)
Próximos pasos
En futuros posts exploraremos:
- Creación de visualizaciones avanzadas con Org Babel
- Integración de gráficos interactivos con JavaScript
- Optimización de imágenes para rendimiento web
- Consejos para mejorar la experiencia visual del blog
Notas técnicas
Para generar este gráfico he utilizado Gnuplot a través de Org Babel. Si quieres reproducirlo, necesitas:
# Requisitos: # 1. Gnuplot instalado en tu sistema # 2. Configuración de Org Babel para Gnuplot (require 'ob-gnuplot) (org-babel-do-load-languages 'org-babel-load-languages '((gnuplot . t)))
Para publicar este post, simplemente guárdalo en tu directorio ~/myblog/posts/ con un nombre como bienvenida-con-grafico.org y ejecuta org-static-blog-publish-to-github.