ProHoster > Блог > Администриране > Презентация като код, или Защо вече не използвам Powerpoint

Презентация като код, или Защо вече не използвам Powerpoint

Презентация като код, или Защо вече не използвам Powerpoint

Като че ли имам възможността да направя десетки презентации за колеги, клиенти и публични изяви през моята кариера в ИТ. Дълги години PowerPoint бе естественият и надежден избор за мен, когато ставаше дума за изработка на слайдове. Но тази година ситуацията коренно се промени. От февруари до май участвах в пет конференции, и слайдовете за докладите трябваше да се подготвят в кратки срокове, но качествено. Въпроси за делегиране на визуалния дизайн на слайдовете на други хора стана актуален. По едно време опитах да работя с дизайнер, изпращайки .pptx файлове по електронна поща, но работата се превърна в хаос: никой не знаеше коя версия на слайдовете е

Какво искаме

Преди година и половина в компанията се отказахме от използването на Word за създаване на проектна документация, тъй като се сблъскахме с подобни проблеми: макар Word да е добър за писане на малки документи, с увеличаването на обемите, възникват трудности със съвместната работа и получаването на качествено и унифицирано оформление. Изборът ни падна на AsciiDoctor, и все още сме доволни от него, но това е тема за друга статия. Около това време проучихме ефективността на един от принципите на DevOps „всичко като код“, така че изборът на изисквания за новата технология за създаване на презентационни слайдове беше доста ясен:

  1. Презентацията трябва да бъде plain text файл на език за маркиране.
  2. Слайдовете ни са за проекти за разработка, затова маркировката трябва да позволява лесно, без да се използват външни системи, вмъкване на
    • фрагменти от код с подчертаване на синтаксиса,
    • опростени диаграми под формата на геометрични фигури, свързани със стрелки,
    • UML диаграми, блок-схеми и подобно.
  3. Проектът на презентацията трябва да се съхранява в система за контрол на версиите.
  4. Валидацията и събирането на готовите слайдове трябва да се извършват в CI система.

Към днешна дата са възможни два основни варианта за създаване на слайдове на езици за маркиране: пакетът beamer за LaTeX или един от фреймворковете за създаване на слайдове на HTML/CSS (RevealJS, remark, deck.js и много други).

Въпреки че душата ми е насочена към LaTeX, разумът ми подсказава, че изборът на решение, с което не само аз ще работя, трябва да е от страната на решение, познато на по-широка аудитория. LaTeX не е познат на всички, и ако ежедневната ви практика не е свързана с писането на научни статии, едва ли ще имате време да се потопите в огромния и сложен свят на тази система.

Въпреки това, познанията по HTML/CSS не са широко разпространени: например, аз не ги владея напълно. За щастие, помощ идва от вече познатия ни AsciiDoctor: конвертор asciidoctor-revealjs позволяващ създаването на RevealJS слайдове, използвайки AsciiDoctor маркъп. А той е прост за изучаване и достъпен за всеки!

Как да кодираме слайдове

За да разберете същността на кодирането на слайдове на AsciiDoctor, най-добре е да приведем конкретни примери. Всички те са от реални слайдове, които съм създавал за моите конференционни доклади тази година.

Слайд с заглавие и списък с елементи, появяващи се един по един:

== Защо ни е необходимо Streams API?

[%step]
* Обработка на потоци в реално време
* API, подобно на потоци (map / reduce)
* Под капака:
** Автоматичен комит на offset
** Ребалансировка
** Вътрешно състояние на обработчиците
** Лесно мащабиране

Резултат

Презентация като код, или Защо вече не използвам Powerpoint

Заглавие и фрагмент от изходен код с подсветка на синтаксиса:

== Kafka Streams API: обща структура на KStreams приложение

[source,java]
----
StreamsConfig config = ...;
// Тук задаваме различни опции

Topology topology = new StreamsBuilder()
// Тук изграждаме топология
....build();
----

Резултат

Презентация като код, или Защо вече не използвам Powerpoint

По време на подготовката за доклада демонстрационните примери на кода преминават през многократни промени и подобрения, затова е безценна възможността бързо да копирате и поставите "суровия код" директно в слайда, осигурявайки актуалност на демо примера и без да се притеснявате за подсветката на синтаксиса.

Заглавие, илюстрация и текст (разположението по слайда се извършва в клетки таблицата на AsciiDoctor):

== Kafka Streams in Action

[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
“Kafka Streams in Action”, ноември 2018
* Примери на код за Kafka 1.0
|===

Резултат

Презентация като код, или Защо вече не използвам Powerpoint

Понякога заглавието не е необходимо, а за илюстрация на мисълта ви просто е нужна картина на цял екран:

[%notitle]
== Животът в легаси не е лесен

image::swampman.jpg[canvas, size=cover]

Резултат

Презентация като код, или Защо вече не използвам Powerpoint

Често е необходимо да подкрепим мисълта с проста диаграма, представена като "квадрати, свързани със стрелки". За щастие, AsciiDoctor е интегриран със системата Graphviz — език за описание на графични диаграми въз основа на описание на върховете и връзките помежду им. Graphviz изисква учене, но на базата на наличните примери е доста лесно да се овладее! Ето как изглежда:

== Пишем “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;}
}
-----

Резултат

Презентация като код, или Защо вече не използвам Powerpoint

В случай, че е необходимо да редактирате надписа на фигурата, да промените посоката на стрелката и т. н. — това може да се направи направо в кода на презентацията, вместо да се прерисува изображение и да се вмъкне отново в слайда. Това значително увеличава скоростта на работа по слайдовете.

Примерът е малко по-сложен:

== Невъзпроизводима сборка
[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=<merge blocked>]
  {rank = same; u; r0; b4;}
}
-----

Резултат

Презентация като код, или Защо вече не използвам Powerpoint

Между другото, удобно е да експериментирате с Graphviz и да отстранявате изображения на страницата Graphviz online.

Накрая, ако е необходимо да вмъкнете блок-схема, диаграма на класове или друга стандартизирана диаграма в слайда, то в този случай на помощ може да дойде друга интегрирана в AsciiDoctor система, PlantUML. За обширните възможности на PlantUML моят колега Николай Паташников написа отделен пост.

Преобразуването на проекта на презентацията в код, съхраняван в система за контрол на версиите, позволява организиране на съвместна работа по презентацията, преди всичко разделяйки задачите по създаването на съдържание и оформлението. Оформлението на слайдовете (шрифтове, фонове, отстояния) в RevealJS се описва с помощта на CSS. Моето лично умение в управлението на CSS най-добре се предава чрез тази гифка — но това не е страшно, когато има хора, които работят с CSS много по-умело и по-бързо от мен. В крайна сметка, при условия на стремително приближаващия се краен срок за презентацията, можем да работим едновременно върху различни файлове чрез Git и да увеличим скоростта на съвместната работа, която е невъзможна при изпращането на файлове .pptx по имейл.

Сборка на HTML страница със слайдове

Обикновен текст - изходниците са страхотни, но как да ги компилираме в самата презентация?

AsciiDoctor е проект, написан на Ruby, и може да бъде стартиран по няколко начина. Първо, можете да инсталирате Ruby и да стартирате asciidoctor директно, което вероятно ще бъде най-близо до разработчиците на Ruby.

Ако не искате да се занимавате с инсталирането на Ruby, можете да използвате docker изображение asciidoctor/docker-asciidoctor, в което при стартиране можете да свържете папка с изходниците на проекта чрез VOLUME и на зададеното място да получите резултата.

Опцията, на която аз се спрях, може да изглежда малко неочаквана, но е най-удобна за мен като разработчик на Java. Тя не изисква нито инсталиране на Ruby, нито наличието на docker, но позволява генерирането на слайдове с помощта на Maven скрипт.

Работата е там, че проектът JRuby — Java реализация на езика Ruby — е толкова добър, че позволява да се стартира почти всичко, създадено за Ruby в Java машина, а стартирането на AsciiDoctor е едно от най-честите приложения на JRuby.

Наличието на asciidoctor-maven-plugin позволява събиране на AsciiDoctor документация, която е част от Java проект (което активно използваме). При това AsciiDoctor и JRuby се свалят автоматично от Maven, и AsciiDoctor работи в среда JRuby: нищо не трябва да се инсталира на машината! (С изключение на пакета graphviz, който е необходим, ако искате да използвате графика GraphViz или PlantUML.) Достатъчно е да поставите вашите .adoc файлове в папката src/main/asciidoc/. Ето пример за паметник, който събира слайдове с диаграми.

Конвертиране на слайдове в PDF

Въпреки че HTML версията на слайдовете е напълно самодостатъчна, понякога е необходимо да имате PDF вариант на слайдовете. Първо, случва се на някои конференции, които не предоставят на лектора възможност за свързване на собствен лаптоп, да изискват слайдове "строго в формат pptx или pdf", без да очакват, че те могат да бъдат и в HTML. Второ, добър тон е да изпратите на организаторите неизменяем вариант на вашите слайдове в онзи вид, в който са били показани на лекцията, в формат PDF за публикуване на файла в материалите на конференцията.

За щастие, с тази задача се справя Node.js утилита decktape, изграден на базата на Puppeteer — система за автоматизация на управлението на браузъра Chrome. Презентацията RevealJS може да бъде конвертирана в PDF с команда

node decktape.js -s 3200x1800 --slides 1-500 
  reveal "file:///index.html?fragments=true" slides.pdf

Две хитрости при стартиране на decktape, до които стигнах чрез проби и грешки:

  • разрешение чрез параметър -s трябва да се зададе с двоен резерв, в противен случай могат да възникнат проблеми с резултатите от конверсията

  • в URL HTML версията на презентацията трябва да се предава параметър ?fragments=true, което ще позволи създаването на отделна PDF страница за всяко междинно състояние на слайда ви (например, пет страници за петте точки от списък, ако те се показват една след друга). Това ще позволи да се използва този PDF самостоятелно като презентация при доклад.

Автоматично събиране и публикуване в интернет

Удобно е, когато слайдовете се събират автоматично, когато се съобщават промени в системата за контрол на версиите, и още по-удобно, когато автоматично скомпилираните слайдове се публикуват в интернет за общо ползване. Слайдовете от интернет могат лесно да се 'представят' пред аудиторията от всяка машина, свързана с интернет и проектор.

Тъй като използваме GitHub в работата си, естественият избор за CI система е TravisCI, а за хостинг на готовите презентации — github.io. Идеята на github.io е, че всеки статичен контент, поставен в клон gh-pages на проекта ви в GitHub, става достъпен на адрес .gihub.io/.

Пълният конфигурационен файл на TravisCI, включващ в себе си компилирането на HTML версията на страницата с помощта на Maven, преобразуването в PDF с decktape и качването на резултатите в клона gh-pages за публикуване на github.io, изглежда така.

За изграждането на такъв проект на страната на TravisCI е необходимо да се настроят променливите на средата

  • GH_REF — стойност от вида github.com/inponomarev/csa-hb
  • GH_TOKEN — токен за достъп до GitHub. Може да се получи в GitHub в настройките на профила ви, Developer Settings -> Personal Access Tokens. Ако публикувате презентация в публичен репозитори, то за този токен е достатъчно да посочите единственото ниво на достъп 'Access public repositories'.
  • GH_USER_EMAIL / GH_USER_NAME — двойка име/имейл, от името на която ще се извърши push в клона gh-pages.

Така всеки комит на код за презентацията в GitHub води до автоматично реконструиране на слайдовете в форматите HTML и PDF и тяхното подновяване на github.io. (Разбира се, на github.io трябва да се качват само онези презентации, които искате в крайна сметка да направите публични.)

Примери за проекти

Накрая - линкове към няколко примера на проекти с презентации, с конфигурирани Maven скриптове и CI конфигурации за Travis-CI, които можете да клонирате и използвате при създаването на свои собствени проекти с презентации:

Сбогом, Powerpoint! Не мисля, че ще ми потрябваш някога за технически презентации 🙂

Източник: habr.com

Купете надежден хостинг за сайтове със защита от DDoS, VPS и VDS сървъри 🔥 Купете надежден хостинг за сайтове със защита от DDoS, VPS и VDS сървъри | ProHoster