Naħseb li tajt għexieren ta' preżentazzjonijiet lil kollegi, klijenti, u taħdit fil-pubbliku fil-karriera tiegħi fl-IT. Għal ħafna snin, Powerpoint kien għażla naturali u affidabbli għalija bħala għodda ta 'produzzjoni ta' slide. Iżda din is-sena s-sitwazzjoni inbidlet kwalitattivament. Minn Frar sa Mejju, kelli l-opportunità li nitkellem f’ħames konferenzi, u s-slajds għar-rapporti kellhom jitħejjew fi żmien qasir, iżda bi kwalità għolja. Qammet il-mistoqsija dwar id-delega ta’ dik il-parti tax-xogħol rigward id-disinn viżwali tas-slajds lil nies oħra. Darba ppruvajt naħdem ma' disinjatur, nibgħat fajls .pptx bil-posta, iżda x-xogħol inbidel f'kaos: ħadd ma kien jaf liema verżjoni tas-slajds kienet "l-aktar ġdida", u t-tqassim kien "jiċċaqlaq" minħabba d-differenza fil-Powerpoint verżjonijiet u fonts fuq il-magni tagħna. U ddeċidejt li nipprova xi ħaġa ġdida. Ippruvajt, u minn dakinhar ma ħsibtx li mmur lura għal Powerpoint.
Xi rridu
Года полтора назад мы в компании отказались от использования Word для создания проектной документации, столкнувшись с теми же проблемами: хотя Word хорош для того, чтобы набрать небольшой документ, по мере роста объёмов, возникают трудности с совместной работой и получением качественного и унифицированного оформления. Наш выбор пал на , и выбору этому мы не перестаём радоваться, но это тема для отдельной статьи. Примерно тогда же мы познали эффективность одного из DevOps-принципов «everything as code», поэтому выбор требований для новой технологии создания презентационных слайдов был довольно очевидным:
- Il-preżentazzjoni għandha tkun fajl b'test sempliċi f'lingwa ta' markup.
- Слайды у нас про проекты разработки, поэтому разметка должна позволять легко, не прибегая к помощи внешних систем, вставлять
- frammenti tal-kodiċi b'enfasi tas-sintassi,
- dijagrammi sempliċi fil-forma ta’ forom ġeometriċi konnessi bi vleġeġ,
- Dijagrammi UML, flowcharts u aktar.
- Проект презентации должен храниться в системе контроля версий.
- Il-validazzjoni u l-assemblaġġ ta' slides lesti għandhom isiru f'sistema CI.
На сегодня возможны два базовых варианта создания слайдов на языках разметки: пакет для LaTeX или один из фреймворков для создания слайдов на HTML/CSS (, , u ħafna oħrajn).
Għalkemm ir-ruħ tiegħi tinsab fil-LaTeX, moħħi ddettat li l-għażla ta 'soluzzjoni li ma nkunx l-uniku wieħed li nuża għandha tkun fuq in-naħa ta' soluzzjoni familjari għal ċirku usa 'ta' nies. Mhux kulħadd jaf lil LaTeX, u jekk il-prattika ta 'kuljum tiegħek mhix relatata mal-kitba ta' artikli xjentifiċi, allura mhux probabbli li jkollok ħin biex tgħaddas ruħek fid-dinja enormi u kkomplikata ta 'din is-sistema.
Впрочем, и владение HTML/CSS — не сказать чтобы повсеместно распространённый навык: я, например, им владею далеко не в полной мере. К счастью, тут на помощь приходит уже знакомый нам AsciiDoctor: конвертер позволяет создавать RevealJS-слайды, используя AsciiDoctor-разметку. А уж она-то проста для изучения и доступна каждому!
Kif tikkodifika slides
Чтобы понять суть кодирования слайдов на AsciiDoctor, проще всего привести конкретные примеры. Все они — из реальных слайдов, которые я делал для своих конференционных докладов в этом году.
Slajd b'titlu u lista f'oġġetti li jinfetħu wieħed wara l-ieħor:
== Зачем нам Streams API?
[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* Под капотом:
** Автоматический offset commit
** Ребалансировка
** Внутреннее состояние обработчиков
** Легкое масштабированиеRiżultat
Header u snippet tal-kodiċi tas-sors b'enfasi tas-sintassi:
== Kafka Streams API: общая структура KStreams-приложения
[source,java]
----
StreamsConfig config = ...;
//Здесь устанавливаем всякие опции
Topology topology = new StreamsBuilder()
//Здесь строим топологию
....build();
----Riżultat
Bi tħejjija għal taħdita, id-demos tal-kodiċi jgħaddu minn reviżjonijiet u titjib ripetuti, għalhekk il-kapaċità li tikkopja u tippejstja malajr il-"kodiċi mhux maħdum" direttament fi slide hija imprezzabbli, u tiżgura li d-demo tkun aġġornata mingħajr ma tinkwieta dwar l-enfasi tas-sintassi.
Titolu, illustrazzjoni u test (it-tqassim fuq il-pjastra jsir fiċ-ċelloli ):
== Kafka Streams in Action
[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
“Kafka Streams in Action”, November 2018
* Примеры кода для Kafka 1.0
|===Riżultat
Иногда заголовок не нужен, а для иллюстрации твоей мысли нужна просто картинка во весь экран:
[%notitle]
== Жить в легаси нелегко
image::swampman.jpg[canvas, size=cover]Riżultat
Часто мысль необходимо подкрепить простой диаграммой, в виде «квадратиков, соединённых стрелочками». К счастью, AsciiDoctor интегрирован с системой — языком, позволяющим описывать графовые диаграммы на основании описания вершин и связей между ними. 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;}
}
-----Riżultat
Fil-każ meta jkun meħtieġ li teditja l-caption fuq il-figura, tibdel id-direzzjoni tal-vleġġa, eċċ., Dan jista 'jsir direttament fil-kodiċi tal-preżentazzjoni, minflok ma terġa' tiġbed l-istampa x'imkien u terġa 'tiddaħħal fis-slajd. Dan iżid b'mod sinifikanti l-veloċità tax-xogħol fuq slides.
Eżempju aktar ikkumplikat:
== Невоспроизводимая сборка
[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;}
}
-----Riżultat
Кстати, экспериментировать с Graphviz и отлаживать картинки удобно на странице .
Наконец, если нужно вставить в слайд блок-схему, диаграмму классов или иную стандартизованную диаграмму, то в этом случае на помощь может прийти ещё одна интегрированная с AsciiDoctor система, . Про обширные возможности PlantUML мой коллега Николай Поташников написал .
It-tidwir tal-proġett tal-preżentazzjoni f'kodiċi maħżun fuq sistema ta 'kontroll tal-verżjoni jagħmilha possibbli li jiġi organizzat xogħol konġunt fuq il-preżentazzjoni, l-ewwelnett, biex jiġu separati l-kompiti tal-ħolqien tal-kontenut u d-disinn. Id-disinn ta 'slajds (fonts, sfondi, inċiżi) f'RevealJS huwa deskritt bl-użu ta' CSS. Il-ħila personali tiegħi ma' CSS titwassal l-aħjar minn — но это не страшно, когда есть люди, работающие с CSS гораздо ловчее и быстрее меня. В итоге получается, что в условиях стремительно приближающегося дедлайна по презентации мы можем работать одновременно над разными файлами через Git и развивать скорость совместной работы, невозможную при пересылке по почте файлов .pptx.
Bini ta 'paġna HTML bi slides
Plain text-исходники — это здорово, но как их скомпилировать в саму презентацию?
AsciiDoctor — это проект, написанный на Ruby, и запустить его можно несколькими способами. Во-первых, вы можете установить язык Ruby и запускать asciidoctor напрямую, что, наверное, будет наиболее близко Ruby-разработчикам.
Если не хочется связываться с установкой Ruby, можно воспользоваться docker-образом , в который при запуске можно через VOLUME подключить папку с исходниками проекта и в заданном месте получить результат.
Вариант, на котором остановился я, может показаться несколько неожиданным, но он наиболее удобен мне как Java-разработчику. Он не требует ни установки Ruby, ни наличия docker, зато позволяет генерировать слайды с помощью Maven-скрипта.
Il-punt huwa li l-proġett — Java-реализация языка Ruby — настолько хорош, что позволяет запускать в Java-машине практически всё, что создано для Ruby, и запуск AsciiDoctor — одно из наиболее частых применений JRuby.
disponibbiltà jippermettilek tiġbor dokumentazzjoni AsciiDoctor li hija parti minn proġett Java (li nużaw b'mod attiv). Fl-istess ħin, AsciiDoctor u JRuby jitniżżlu awtomatikament minn Maven, u AsciiDoctor jaħdem fl-ambjent JRuby: m'hemmx għalfejn tinstalla xejn fuq il-magna! (Eskluż il-pakkett graphviz, который нужен, если вы хотите использовать графику GraphViz или PlantUML.) Достаточно поместить ваши .adoc-файлы в папку src/main/asciidoc/. Hawnhekk ġbir slides bi dijagrammi.
Ikkonverti slides għal PDF
Għalkemm il-verżjoni HTML tal-pjastri hija pjuttost awtosuffiċjenti, xorta huwa meħtieġ li jkun hemm verżjoni PDF tal-pjastri. L-ewwelnett, jiġri li f'xi konferenzi li ma jipprovdux lill-kelliem bl-opportunità li jgħaqqad il-laptop tiegħu stess, jeħtieġu slides "strettament f'format pptx jew pdf," mingħajr ma jistennew li huma wkoll f'HTML. It-tieni, hija tajba li tibgħat lill-organizzaturi verżjoni mhux editjata tas-slajds tiegħek kif intwerew fir-rapport, f'format PDF għall-pubblikazzjoni tal-fajl fil-materjali tal-konferenza.
Fortunatament, l-utilità Node.js tieħu ħsieb dan il-kompitu. , mibnija fuq il-bażi — системы автоматизации управления браузером Chrome. Сконвертировать RevealJS презентацию в PDF можно командой
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Две хитрости при запуске decktape, к которым пришлось прийти методом проб и ошибок:
-
riżoluzzjoni permezz ta' parametru
-sнадо задавать с двухкратным запасом, иначе возможны проблемы с результатами конвертации -
в URL HTML-версии презентации надо передавать параметр
?fragments=true, что позволит создавать отдельную PDF- страницу для каждого промежуточного состояния вашего слайда (например, пять страниц для пяти пунктов списка, если они показываются один за другим). Это позволит использовать такой PDF сам по себе в качестве презентации при докладе.
Assemblaġġ awtomatiku u pubblikazzjoni fuq il-web
Удобно, когда слайды собираются автоматически при попадании изменений в систему контроля версий, и ещё удобнее, когда автоматически скомпилированные слайды выкладываются в интернет для всеобщего использования. Слайды из интернета можно легко «проиграть» перед аудиторией с любой машины, подсоединённой к интернету и проектору.
Т. к. мы используем в работе GitHub, то естественным выбором CI-системы является , u biex tospita preżentazzjonijiet lesti - . L-idea wara github.io hija li kwalunkwe kontenut statiku mibgħut f'fergħa gh-pages tal-proġett tiegħek fuq GitHub, isir disponibbli fuq <ваше имя>.gihub.io/<ваш проект>.
Полный конфигурационный файл TravisCI, включающий в себя компиляцию HTML-версии страницы с помощью Maven, конвертацию в PDF при помощи decktape и выгрузку результатов в ветку gh-pages għall-pubblikazzjoni fuq github.io, qisu .
Для сборки такого проекта на стороне TravisCI необходимо настроить переменные среды
GH_REF— valur bħal github.com/inponomarev/csa-hbGH_TOKEN— токен доступа к GitHub. Можно получить в GitHub-е в настройках своего профиля, Developer Settings -> Personal Access Tokens. Если вы выкладываете презентацию в публичный репозиторий, то для этого токена достаточно указать единственный уровень доступа «Access public repositories».GH_USER_EMAIL/GH_USER_NAME— par isem/email li f'isimha titwettaq l-imbuttar lejn il-ħajtagh-pages.
Għalhekk, kull impenn tal-kodiċi tal-preżentazzjoni fuq GitHub jirriżulta li l-pjastri jinbnew awtomatikament mill-ġdid f'formati HTML u PDF u jerġgħu jittellgħu fuq github.io. (Naturalment, għandek ittella' fuq github.io biss dawk il-preżentazzjonijiet li fl-aħħar mill-aħħar trid tagħmel pubbliċi.)
Eżempji ta' proġetti
Напоследок — ссылки на пару примеров проектов презентаций с настроенными Maven-скриптами и CI-конфигурацией для Travis-CI, которые можно клонировать и использовать при создании собственных проектов презентаций:
-
(it-taħdita tiegħi għal JPoint 2019)
-
(ir-rapport tiegħi għal Heisenbug 2019)
Прощай, Powerpoint! Не думаю, что ты мне когда-нибудь понадобишься для технических презентаций 🙂
Sors: www.habr.com