Creo que he realizado docenas de presentaciones ante colegas, clientes y oradores en público durante mi carrera en TI. Durante muchos años, Powerpoint ha sido para mí una elección natural y confiable como herramienta de producción de diapositivas. 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 mucha calidad. Surgió la duda de delegar esa parte del trabajo referente al diseño visual de las diapositivas a otras personas. Una vez intenté trabajar con un diseñador, enviándole archivos .pptx por correo, pero el trabajo se convirtió en un caos: nadie sabía qué versión de las diapositivas era la "más nueva" y el diseño se "movía" debido a la diferencia en PowerPoint. Versiones y fuentes en nuestras máquinas. Y decidí probar algo nuevo. Lo probé y desde entonces no he pensado en volver a Powerpoint.
Qué queremos
Hace aproximadamente un año y medio, nuestra empresa dejó de utilizar Word para crear documentación de proyectos, encontrándose con los mismos problemas: aunque Word es bueno para escribir un documento pequeño, a medida que crece el volumen, surgen dificultades con la colaboración y la obtención de alta calidad y diseño unificado. Nuestra elección recayó en , y nunca dejamos de alegrarnos por esta elección, pero este es un tema para un artículo aparte. Casi al mismo tiempo, aprendimos 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 plano en un lenguaje de marcado.
- Nuestras diapositivas tratan sobre proyectos de desarrollo, por lo que el marcado debe facilitar su inserción, sin recurrir a sistemas externos.
- fragmentos de código con resaltado de sintaxis,
- diagramas simples en forma de formas geométricas conectadas por flechas,
- Diagramas UML, diagramas de flujo y más.
- El borrador de la presentación debe almacenarse en un sistema de control de versiones.
- La validación y el montaje de portaobjetos terminados deben realizarse en un sistema CI.
Hoy en día, existen dos opciones básicas para crear diapositivas en lenguajes de marcado: paquete para LaTeX o uno de los marcos para crear diapositivas usando HTML/CSS (, , y muchos otros).
Aunque mi alma está en LaTeX, mi mente me dictaba que la elección de una solución que no sería el único que usaría debería estar del lado de una solución familiar para un círculo más amplio de personas. No todo el mundo conoce 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 de sumergirse en el enorme e intrincado mundo de este sistema.
Sin embargo, el dominio de HTML/CSS no es exactamente una habilidad muy extendida: yo, por ejemplo, estoy lejos de dominarlo por completo. Afortunadamente, el ya conocido AsciiDoctor viene al rescate: un convertidor le permite crear diapositivas RevealJS utilizando el marcado AsciiDoctor. ¡Y es fácil de aprender y accesible para todos!
Cómo codificar diapositivas
Para comprender la esencia de codificar diapositivas en AsciiDoctor, la forma más sencilla es dar ejemplos específicos. Todas estas son diapositivas reales que hice para mis presentaciones en la conferencia de este año.
Una diapositiva con un título y una lista de elementos que se abren uno tras otro:
== Зачем нам Streams API?
[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* Под капотом:
** Автоматический offset commit
** Ребалансировка
** Внутреннее состояние обработчиков
** Легкое масштабированиеresultado
Encabezado y fragmento de código fuente con resaltado de sintaxis:
== Kafka Streams API: общая структура KStreams-приложения
[source,java]
----
StreamsConfig config = ...;
//Здесь устанавливаем всякие опции
Topology topology = new StreamsBuilder()
//Здесь строим топологию
....build();
----resultado
En preparación para una charla, las demostraciones de código se someten a repetidas revisiones y mejoras, por lo que la capacidad de copiar y pegar rápidamente el "código sin formato" directamente en una diapositiva es invaluable, lo que garantiza que la demostración esté actualizada sin preocuparse por el resaltado de sintaxis.
Título, ilustración y texto (el diseño de la diapositiva se realiza en celdas ):
== Kafka Streams in Action
[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
“Kafka Streams in Action”, November 2018
* Примеры кода для Kafka 1.0
|===resultado
A veces no es necesario un título y, para ilustrar su punto, solo necesita una imagen en pantalla completa:
[%notitle]
== Жить в легаси нелегко
image::swampman.jpg[canvas, size=cover]resultado
A menudo, una idea necesita estar respaldada por un diagrama simple, en forma de "cuadrados conectados por flechas". Afortunadamente, AsciiDoctor está integrado con el sistema. — un lenguaje que permite describir diagramas de gráficos basándose en la descripción de vértices y conexiones entre ellos. Graphviz requiere una curva de aprendizaje, pero según los ejemplos proporcionados, ¡es bastante fácil de hacer! Esto es lo que parece:
== Пишем “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;}
}
-----resultado
En el caso de que sea necesario editar el título de 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 significativamente la velocidad de trabajo en diapositivas.
Un ejemplo más complicado:
== Невоспроизводимая сборка
[graphviz, "unstable-update.png"]
-----
digraph G {
rankdir="LR";
graph [ dpi = 150 ];
u -> r0;
u[shape=plaintext; label="linter updaten+ 13 warnings"]
r0[shape=point, width = 0]
r1 -> r0[ arrowhead = none, label="master branch" ];
r0-> r2 []; b1 -> b4; r1->b1
r1[label="150nwarnings"]
b1[label="± 0nwarnings"]
b4[label="± 0nwarnings"]
b4->r2
r2[label="163nwarnings", color="red", xlabel=<<font color="red">merge blocked</font>>]
{rank = same; u; r0; b4;}
}
-----resultado
Por cierto, es conveniente experimentar con Graphviz y depurar imágenes en la página. .
Finalmente, si necesita insertar un diagrama de flujo, un diagrama de clases u otro diagrama estandarizado en una diapositiva, entonces otro sistema integrado con AsciiDoctor puede acudir al rescate. . Mi colega Nikolai Potashnikov escribió sobre las amplias capacidades de PlantUML .
Convertir el proyecto de presentación en código almacenado en un sistema de control de versiones permite organizar el trabajo conjunto en la presentación, en primer lugar, 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 personal con CSS se transmite mejor mediante - pero no da miedo cuando hay personas que trabajan con CSS con mucha más destreza y rapidez que yo. Como resultado, resulta que con una fecha límite para una presentación que se acerca rápidamente, podemos trabajar en diferentes archivos simultáneamente a través de Git y desarrollar una velocidad de colaboración que es imposible cuando se envían archivos .pptx por correo.
Construyendo una página HTML con diapositivas
Las fuentes de texto sin formato son excelentes, pero ¿cómo se compilan en la presentación misma?
AsciiDoctor es un proyecto escrito en Ruby y hay varias formas de ejecutarlo. Primero, puede instalar el lenguaje Ruby y ejecutar asciidoctor directamente, que probablemente sea lo más parecido a los desarrolladores de Ruby.
Si no quieres complicarte con la instalación de Ruby, puedes usar la imagen de la ventana acoplable. , en el cual, cuando se inicia, puede conectar la carpeta con las fuentes del proyecto a través de VOLUMEN y obtener el resultado en una ubicación determinada.
La opción que elegí puede parecer algo inesperada, pero es la más conveniente para mí como desarrollador de Java. No requiere instalación de Ruby o Docker, pero le permite generar diapositivas usando un script Maven.
La cuestión es que el proyecto - La implementación Java del lenguaje Ruby es tan buena que te permite ejecutar casi cualquier cosa creada para Ruby en una máquina Java, y ejecutar AsciiDoctor es uno de los usos más comunes de JRuby.
disponibilidad le permite recopilar documentación de AsciiDoctor que forma parte de un proyecto Java (que utilizamos activamente). Al mismo tiempo, Maven descarga automáticamente AsciiDoctor y JRuby, y AsciiDoctor se ejecuta en el entorno JRuby: ¡no es necesario instalar nada en la máquina! (Excluyendo el paquete graphviz, que es necesario si desea utilizar gráficos GraphViz o PlantUML). Simplemente coloque sus archivos .adoc en una carpeta src/main/asciidoc/. Aquí Recopilación de diapositivas con diagramas.
Convertir diapositivas a PDF
Aunque la versión HTML de las diapositivas es bastante autosuficiente, aún es necesario tener una versión PDF de las diapositivas. En primer lugar, sucede que en algunas conferencias que no ofrecen al ponente la posibilidad de conectar su propio portátil, exigen diapositivas “estrictamente en formato pptx o pdf”, sin esperar que también estén en HTML. En segundo lugar, es una buena forma de enviar a los organizadores una versión sin editar de sus diapositivas tal como se mostraron en el informe, en formato PDF para su publicación en los materiales de la conferencia.
Afortunadamente, la utilidad Node.js se encarga de esta tarea. construido sobre la base — sistemas de automatización para la gestión del navegador Chrome. Puede convertir la presentación RevealJS a PDF con el comando
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Dos trucos a la hora de lanzar decktape, que tuvimos que idear mediante prueba y error:
-
resolución mediante parámetro
-sdebe especificarse con un margen doble, de lo contrario puede haber problemas con los resultados de la conversión -
en la URL de la versión HTML de la presentación necesitas pasar un parámetro
?fragments=true, que creará una página PDF separada para cada estado intermedio de su diapositiva (por ejemplo, cinco páginas para cinco viñetas si se muestran una después de la otra). Esto le permitirá utilizar dicho PDF por sí solo como presentación durante un informe.
Montaje y publicación automática en la web.
Es conveniente cuando las diapositivas se compilan automáticamente cuando se realizan cambios 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 público. Las diapositivas de Internet se pueden "reproducir" fácilmente frente a una audiencia desde cualquier máquina conectada a Internet y un proyector.
Dado que utilizamos GitHub en nuestro trabajo, la elección natural de un sistema de CI es y para albergar presentaciones ya preparadas - . La idea detrás de github.io es que cualquier contenido estático publicado en una rama gh-pages de su proyecto en GitHub, estará disponible en <ваше имя>.gihub.io/<ваш проект>.
Complete el archivo de configuración de TravisCI, incluida la compilación de la versión HTML de la página usando Maven, la conversión a PDF usando decktape y la carga de los resultados en un hilo. gh-pages para publicación en github.io, parece .
Para construir un proyecto de este tipo en el lado de TravisCI, necesita configurar variables de entorno
GH_REF- valor como github.com/inponomarev/csa-hbGH_TOKEN– Token de acceso a GitHub. Puede obtenerlo en GitHub en la configuración de su perfil, Configuración de desarrollador -> Tokens de acceso personal. Si carga una presentación en un repositorio público, 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 electrónico en nombre del cual se llevará a cabo el envío al hilogh-pages.
Por lo tanto, cada confirmación del código de presentación en GitHub da como resultado que las diapositivas se reconstruyan automáticamente en formatos HTML y PDF y se vuelvan a cargar en github.io. (Por supuesto, sólo debes subir a github.io aquellas presentaciones que finalmente quieras hacer públicas).
Ejemplos de proyectos
Finalmente, aquí 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 pueden clonarse y usarse al crear sus propios proyectos de presentación:
-
(mi charla para JPoint 2019)
-
(mi informe para Heisenbug 2019)
¡Adiós PowerPoint! No creo que nunca te necesite para presentaciones técnicas :)
Fuente: habr.com