Parece que tuve la oportunidad de hacer docenas de presentaciones para colegas, clientes y oradores durante mi carrera en TI. Durante muchos años, Powerpoint, como un medio para hacer diapositivas, ha sido para mí una opción natural y confiable. Pero este año la situación ha cambiado cualitativamente. De febrero a mayo tuve la oportunidad de hablar en cinco conferencias, y las diapositivas de los informes tuvieron que prepararse en poco tiempo, pero con alta calidad. Se planteó la cuestión de delegar esa parte del trabajo, en cuanto al diseño visual de diapositivas, a otras personas. Una vez intenté trabajar con un diseñador enviando archivos .pptx por correo, pero el trabajo se convirtió en un caos: nadie sabía qué versión de las diapositivas era "más nueva", y el diseño "desapareció" debido a la diferencia en las versiones y fuentes de Powerpoint en nuestras máquinas. . Y decidí probar algo nuevo. Lo intenté y desde entonces no pienso volver a Powerpoint.
Que queremos
Hace aproximadamente un año y medio, en la empresa nos negamos a usar Word para crear la documentación del proyecto, enfrentamos los mismos problemas: aunque Word es bueno para escribir un documento pequeño, a medida que crecen los volúmenes, existen dificultades para trabajar juntos y obtener un diseño unificado y de alta calidad. Nuestra elección recayó en AsciiDoctor , y no dejamos de alegrarnos por esta elección, pero este es un tema para un artículo separado. Al mismo tiempo, reconocimos la efectividad de uno de los principios de DevOps de "todo como código", por lo que la elección de los requisitos para la nueva tecnología para crear diapositivas de presentación fue bastante obvia:
- La presentación debe ser un archivo de texto sin formato en un lenguaje de marcado.
- Tenemos diapositivas sobre proyectos de desarrollo, por lo que el marcado debería permitirle insertar fácilmente sin recurrir a sistemas externos
- sintaxis destacó fragmentos de código,
- diagramas simples en forma de formas geométricas conectadas por flechas,
- Diagramas UML, diagramas de flujo y más.
- El proyecto de presentación debe almacenarse en un sistema de control de versiones.
- La validación y el ensamblaje de las diapositivas terminadas deben realizarse en el sistema CI.
Hoy en día hay dos opciones básicas para crear diapositivas en lenguajes de marcado: el paquete beamer para LaTeX o uno de los marcos para crear diapositivas HTML / CSS ( RevealJS , comentario , deck.js y muchos otros).
Aunque mi alma está con LaTeX, mi mente sugirió que la elección de una solución que no usaré solo debería estar del lado de la solución, familiar para un círculo más amplio de personas. No todos conocen LaTeX, y si su práctica diaria no está relacionada con la redacción de artículos científicos, es poco probable que tenga tiempo para sumergirse en el vasto e intrincado mundo de este sistema.
Sin embargo, el dominio de HTML / CSS no quiere decir que la habilidad omnipresente sea: Yo, por ejemplo, no lo poseo completamente. Afortunadamente, el familiar AsciiDoctor viene al rescate: el convertidor asciidoctor-reveljs le permite crear diapositivas RevealJS utilizando el marcado AsciiDoctor. ¡Y es tan fácil de aprender y accesible para todos!
Cómo codificar diapositivas
Para comprender la esencia de la codificación de diapositivas en AsciiDoctor, es más fácil dar ejemplos específicos. Todos ellos son de diapositivas reales que hice para mis conferencias este año.
Una diapositiva con un encabezado y una lista en uno después de los otros párrafos iniciales:
== Streams API? [%step] * Real-time stream processing * Stream-like API (map / reduce) * : ** offset commit ** ** **
Encabezado y fragmento de código fuente con resaltado de sintaxis:
== Kafka Streams API: KStreams- [source,java] ---- StreamsConfig config = ...; // Topology topology = new StreamsBuilder() // ....build(); ----
En el proceso de preparación para el informe, los ejemplos de código de demostración sufren alteraciones y mejoras repetidas, por lo tanto, la oportunidad de copiar y pegar rápidamente el "código sin procesar" directamente en la diapositiva es invaluable, asegurando la relevancia del ejemplo de demostración y sin preocuparse por el resaltado de sintaxis.
El título, la ilustración y el texto (el diseño de la diapositiva se realiza en las celdas de la tabla AsciiDoctor ):
== Kafka Streams in Action [.custom-style] [cols="30a,70a"] |=== |image::KSIA.jpg[] | * **William Bejeck**, + “Kafka Streams in Action”, November 2018 * Kafka 1.0 |===
A veces el título no es necesario, pero para ilustrar tus pensamientos solo necesitas una imagen de pantalla completa:
[%notitle] == image::swampman.jpg[canvas, size=cover]
A menudo, la idea debe ser apoyada por un diagrama simple, en forma de "cuadrados conectados por flechas". Afortunadamente, AsciiDoctor está integrado con el sistema Graphviz , un lenguaje que le permite describir cuadros gráficos basados en descripciones de vértices y las relaciones entre ellos. Graphviz necesita ser dominado, pero basado en ejemplos existentes, ¡esto es bastante fácil! Así es como se ve:
== “Bet Totalling App” , ? [graphviz, "counting-topology.png"] ----- digraph G { graph [ dpi = 150 ]; rankdir="LR"; node [fontsize=18; shape="circle"; fixedsize="true"; width="1.1"]; Store [shape="cylinder"; label="Local Store"; fixedsize="true"; width="1.5"] Source -> MapVal -> Sum -> Sink Sum -> Store [dir=both; label=" \n "] {rank = same; Store; Sum;} } -----
En el caso de que sea necesario editar la firma en la figura, cambiar la dirección de la flecha, etc., esto se puede hacer directamente en el código de presentación, en lugar de volver a dibujar la imagen en algún lugar y volver a insertarla en la diapositiva. Esto aumenta enormemente la velocidad de trabajo en diapositivas.
Un ejemplo es más complicado:
== [graphviz, "unstable-update.png"] ----- digraph G { rankdir="LR"; graph [ dpi = 150 ]; u -> r0; u[shape=plaintext; label="linter update\n+ 13 warnings"] r0[shape=point, width = 0] r1 -> r0[ arrowhead = none, label="master branch" ]; r0-> r2 []; b1 -> b4; r1->b1 r1[label="150\nwarnings"] b1[label="± 0\nwarnings"] b4[label="± 0\nwarnings"] b4->r2 r2[label="163\nwarnings", color="red", xlabel=<<font color="red">merge blocked</font>>] {rank = same; u; r0; b4;} } -----
Por cierto, experimentar con Graphviz y depurar imágenes es conveniente en la página en línea de Graphviz .
Finalmente, si necesita insertar un diagrama de bloques, un diagrama de clase u otro diagrama estandarizado en la diapositiva, entonces otro sistema integrado con AsciiDoctor, PlantUML , puede venir al rescate . Mi colega Nikolai Potashnikov escribió una publicación separada sobre las vastas capacidades de PlantUML.
La transformación del proyecto de presentación en código almacenado en el sistema de control de versiones permite organizar el trabajo conjunto en la presentación, en primer lugar, para separar las tareas de creación de contenido y diseño. El diseño de diapositivas (fuentes, fondos, sangrías) en RevealJS se describe mediante CSS. Mi habilidad CSS personal se transmite mejor con este GIF , pero no da miedo cuando hay personas que trabajan con CSS mucho más ágil y rápido que yo. Como resultado, resulta que en el contexto de una fecha límite de presentación que se acerca rápidamente, podemos trabajar simultáneamente en diferentes archivos a través de Git y desarrollar la velocidad de colaboración que es imposible al enviar archivos .pptx por correo.
Crea una página HTML con diapositivas
Las fuentes de texto sin formato son geniales, pero ¿cómo las compila en la presentación misma?
AsciiDoctor es un proyecto Ruby y puedes ejecutarlo de varias maneras. En primer lugar, puede instalar el lenguaje Ruby y ejecutar un asciidoctor directamente, que probablemente será el más cercano a los desarrolladores de Ruby.
Si no desea involucrarse con la instalación de Ruby, puede usar el asciidoctor / docker-asciidoctor de la imagen acoplable , en el que puede conectar la carpeta de origen del proyecto a través de VOLUME y obtener el resultado en la ubicación especificada.
La opción que elegí puede parecer algo inesperada, pero es más conveniente para mí como desarrollador de Java. No requiere la instalación de Ruby o Docker, pero le permite generar diapositivas utilizando un script Maven.
El hecho es que el proyecto JRuby , la implementación de Java del lenguaje Ruby, es tan bueno que le permite ejecutar casi todo lo que se crea para Ruby en la máquina Java, y ejecutar AsciiDoctor es una de las aplicaciones JRuby más comunes.
La presencia de asciidoctor-maven-plugin le permite recopilar documentación de AsciiDoctor, que forma parte del proyecto Java (que utilizamos activamente). Al mismo tiempo, Maci descarga AsciiDoctor y JRuby automáticamente, y AsciiDoctor se ejecuta en el entorno JRuby: ¡no es necesario instalar nada en la máquina! (Excepto por el paquete graphviz , que es necesario si desea usar gráficos GraphViz o PlantUML). Simplemente coloque sus archivos .adoc en la src/main/asciidoc/ . Aquí hay un ejemplo de una diapositiva que recoge diapositivas de diagramas.
Convertir diapositivas a PDF
Aunque la versión HTML de las diapositivas es completamente autosuficiente, aún es necesario tener una versión PDF de las diapositivas. En primer lugar, sucede que en algunas conferencias que no brindan al hablante la capacidad de conectar su propia computadora portátil, requieren diapositivas "estrictamente en formato pptx o pdf", sin esperar que también vengan en HTML. En segundo lugar, es una buena forma de enviar a los organizadores una versión sin cambios de sus diapositivas en el formulario tal como se muestran en el informe, en formato PDF para la publicación del archivo en los materiales de la conferencia.
Afortunadamente, Node.js es una utilidad de decktape construida sobre la base de Puppeteer , el sistema de automatización del navegador Chrome, que maneja esta tarea. Puede convertir la presentación de RevealJS a PDF con el comando
node decktape.js -s 3200x1800 --slides 1-500 \ reveal "file:///index.html?fragments=true" slides.pdf
Dos trucos para iniciar el decktape, que tuvieron que venir por prueba y error:
la resolución a través del parámetro -s debe establecerse con un doble margen, de lo contrario puede haber problemas con los resultados de conversión
debe pasar el parámetro ?fragments=true en la URL de la versión HTML de la presentación, lo que le permitirá crear una página PDF separada para cada estado intermedio de su diapositiva (por ejemplo, cinco páginas para cinco elementos de la lista, si se muestran uno tras otro). Esto permitirá el uso de dicho PDF en sí mismo como una presentación en un informe.
Auto compilación y publicación en la web
Es conveniente cuando las diapositivas se recopilan automáticamente cuando los cambios entran en el sistema de control de versiones, y aún más conveniente cuando las diapositivas compiladas automáticamente se publican en Internet para uso general. Las diapositivas de Internet se pueden "reproducir" fácilmente frente a una audiencia desde cualquier máquina conectada a Internet y al proyector.
Dado que usamos GitHub en nuestro trabajo, la opción natural para el sistema CI es TravisCI , y para alojar presentaciones listas para usar : imtqy.com . La idea de imtqy.com es que cualquier contenido estático colocado en la rama gh-pages de su proyecto en GitHub esté disponible en < >.gihub.io/< > .
El archivo completo de configuración de TravisCI, que incluye compilar la versión HTML de la página usando Maven, convertirlo a PDF usando decktape y subir los resultados a la rama gh-pages para su publicación en imtqy.com, se ve así.
Para construir un proyecto de este tipo en el lado de TravisCI, debe configurar variables de entorno
GH_REF : valor del formulario github.com/inponomarev/csa-hbGH_TOKEN : token de acceso de GitHub. Puede obtenerlo en GitHub en la configuración de su perfil, Configuración del desarrollador -> Tokens de acceso personal. Si carga la presentación en un repositorio público, entonces para este token es suficiente especificar el único nivel de acceso "Acceder a repositorios públicos".GH_USER_EMAIL / GH_USER_NAME : par nombre / correo, en cuyo nombre se implementará la inserción a la rama gh-pages .
Por lo tanto, cada confirmación del código de presentación en GitHub reconstruirá automáticamente las diapositivas en formatos HTML y PDF y las volverá a cargar en imtqy.com. (Por supuesto, solo las presentaciones que desea hacer públicas al final deben cargarse en imtqy.com).
Ejemplos de proyectos
Finalmente, hay enlaces a un par de ejemplos de proyectos de presentación con scripts Maven personalizados y configuración de CI para Travis-CI, que puede clonar y usar al crear sus propios proyectos de presentación:
Adios Powerpoint! No creo que alguna vez te necesite para presentaciones técnicas :-)