Myślę, że w mojej karierze IT przeprowadziłem dziesiątki prezentacji dla kolegów, klientów i wystąpień publicznych. Przez wiele lat Powerpoint był dla mnie naturalnym i niezawodnym wyborem jako narzędzie do produkcji slajdów. Ale w tym roku sytuacja zmieniła się jakościowo. Od lutego do maja miałem okazję występować na pięciu konferencjach, a slajdy do raportów trzeba było przygotować w krótkim czasie, ale na wysokim poziomie. Pojawiło się pytanie, czy część prac związanych z oprawą wizualną slajdów przekazać innym osobom. Kiedyś próbowałem współpracować z projektantem, wysyłając pliki .pptx pocztą, ale praca zamieniła się w chaos: nikt nie wiedział, która wersja slajdów jest „najnowsza”, a układ był „ruchomy” ze względu na różnicę w Powerpoincie wersje i czcionki na naszych maszynach. I postanowiłem spróbować czegoś nowego. Spróbowałem i od tego czasu nie myślałem o powrocie do Powerpointa.
Czego chcemy
Około półtora roku temu nasza firma przestała używać programu Word do tworzenia dokumentacji projektowej, napotykając te same problemy: chociaż Word jest dobry do pisania małego dokumentu, wraz ze wzrostem objętości pojawiają się trudności we współpracy i uzyskiwaniu wysokiej jakości i ujednolicony projekt. Nasz wybór padł , i nie przestajemy się cieszyć z tego wyboru, ale to temat na osobny artykuł. Mniej więcej w tym samym czasie poznaliśmy skuteczność jednej z zasad DevOps „wszystko jako kod”, więc wybór wymagań dla nowej technologii tworzenia slajdów prezentacji był dość oczywisty:
- Prezentacja musi mieć postać zwykłego pliku tekstowego w języku znaczników.
- Nasze slajdy dotyczą projektów deweloperskich, dlatego znaczniki powinny ułatwiać wstawianie, bez uciekania się do zewnętrznych systemów
- fragmenty kodu z podświetlaniem składni,
- proste diagramy w postaci kształtów geometrycznych połączonych strzałkami,
- Diagramy UML, schematy blokowe i nie tylko.
- Wersja robocza prezentacji musi być przechowywana w systemie kontroli wersji.
- Walidacja i montaż gotowych preparatów powinny odbywać się w systemie CI.
Obecnie istnieją dwie podstawowe opcje tworzenia slajdów w językach znaczników: pakiet dla LaTeX-a lub jednego z frameworków do tworzenia slajdów z wykorzystaniem HTML/CSS (, , i wiele innych).
Choć moja dusza leży w LaTeX-ie, rozum podpowiadał mi, że wybór rozwiązania, z którego nie będę jedyny korzystał, powinien stanąć po stronie rozwiązania znanego szerszemu kręgowi ludzi. Nie każdy zna LaTeX-a i jeśli Twoja codzienna praktyka nie jest związana z pisaniem artykułów naukowych, to raczej nie będziesz miał czasu na zanurzenie się w ogromnym, skomplikowanym świecie tego systemu.
Jednak opanowanie HTML/CSS nie jest umiejętnością powszechną: ja na przykład nie jestem w tym w pełni biegły. Na szczęście z pomocą przychodzi znany już AsciiDoctor: konwerter umożliwia tworzenie slajdów RevealJS przy użyciu znaczników AsciiDoctor. Jest łatwy do nauczenia i dostępny dla każdego!
Jak kodować slajdy
Aby zrozumieć istotę kodowania slajdów w AsciiDoctorze, najłatwiej jest podać konkretne przykłady. Wszystkie pochodzą ze slajdów, które przygotowałem na potrzeby tegorocznych prezentacji konferencyjnych.
Slajd z tytułem i listą w pozycjach otwierających się jedna po drugiej:
== Зачем нам Streams API?
[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* Под капотом:
** Автоматический offset commit
** Ребалансировка
** Внутреннее состояние обработчиков
** Легкое масштабированиеDoświadcz mocnych i skutecznych rezultatów
Nagłówek i fragment kodu źródłowego z podświetlaniem składni:
== Kafka Streams API: общая структура KStreams-приложения
[source,java]
----
StreamsConfig config = ...;
//Здесь устанавливаем всякие опции
Topology topology = new StreamsBuilder()
//Здесь строим топологию
....build();
----Doświadcz mocnych i skutecznych rezultatów
W ramach przygotowań do wykładu dema kodu poddawane są wielokrotnym rewizjom i udoskonaleniom, dlatego możliwość szybkiego skopiowania i wklejenia „surowego kodu” bezpośrednio do slajdu jest nieoceniona, zapewniając aktualność dema bez martwienia się o podkreślanie składni.
Tytuł, ilustracja i tekst (układ na slajdzie odbywa się w komórkach ):
== Kafka Streams in Action
[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
“Kafka Streams in Action”, November 2018
* Примеры кода для Kafka 1.0
|===Doświadcz mocnych i skutecznych rezultatów
Czasami tytuł nie jest potrzebny i aby zilustrować swoje stanowisko, wystarczy obraz pełnoekranowy:
[%notitle]
== Жить в легаси нелегко
image::swampman.jpg[canvas, size=cover]Doświadcz mocnych i skutecznych rezultatów
Często pomysł trzeba poprzeć prostym diagramem w postaci „kwadratów połączonych strzałkami”. Na szczęście AsciiDoctor jest zintegrowany z systemem — język umożliwiający opisywanie diagramów grafów na podstawie opisu wierzchołków i połączeń między nimi. Graphviz wymaga nauki, ale z podanych przykładów wynika, że jest to całkiem łatwe! Oto jak to wygląda:
== Пишем “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;}
}
-----Doświadcz mocnych i skutecznych rezultatów
W przypadku konieczności edycji podpisu na rysunku, zmiany kierunku strzałki itp. można to zrobić bezpośrednio w kodzie prezentacji, zamiast przerysowywać gdzieś obraz i ponownie wstawiać go do slajdu. Znacząco zwiększa to szybkość pracy na slajdach.
Bardziej skomplikowany przykład:
== Невоспроизводимая сборка
[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;}
}
-----Doświadcz mocnych i skutecznych rezultatów
Nawiasem mówiąc, wygodnie jest eksperymentować z Graphviz i debugować obrazy na stronie .
Wreszcie, jeśli potrzebujesz wstawić do slajdu schemat blokowy, diagram klas lub inny ustandaryzowany diagram, to z pomocą może przyjść inny system zintegrowany z AsciiDoctor, . Mój kolega Nikołaj Potasznikow pisał o rozbudowanych możliwościach PlantUML .
Zamiana projektu prezentacji na kod przechowywany w systemie kontroli wersji pozwala na zorganizowanie wspólnej pracy nad prezentacją, przede wszystkim na oddzielenie zadań związanych z tworzeniem treści i projektowaniem. Projekt slajdów (czcionki, tła, wcięcia) w RevealJS opisano za pomocą CSS. Moje osobiste umiejętności w zakresie CSS najlepiej wyrażają: - ale nie jest to straszne, gdy są ludzie, którzy pracują z CSS znacznie sprawniej i szybciej ode mnie. W rezultacie okazuje się, że mając szybko zbliżający się termin prezentacji, możemy pracować nad różnymi plikami jednocześnie za pośrednictwem Git i wypracować szybkość współpracy, która jest niemożliwa przy przesyłaniu plików .pptx pocztą.
Tworzenie strony HTML ze slajdami
Zwykłe źródła tekstowe są świetne, ale jak je skompilować w samą prezentację?
AsciiDoctor to projekt napisany w języku Ruby i istnieje kilka sposobów jego uruchomienia. Po pierwsze, możesz zainstalować język Ruby i bezpośrednio uruchomić program asciidoctor, co jest prawdopodobnie najbliższą rzeczą programistom Ruby.
Jeśli nie chcesz zadzierać z instalacją Ruby, możesz użyć obrazu okna dokowanego , do którego po uruchomieniu można poprzez VOLUME połączyć folder ze źródłami projektu i uzyskać wynik w podanej lokalizacji.
Opcja, którą wybrałem, może wydawać się nieco nieoczekiwana, ale dla mnie, jako programisty Java, jest najwygodniejsza. Nie wymaga instalacji Ruby ani dockera, ale umożliwia generowanie slajdów za pomocą skryptu Maven.
Rzecz w tym, że projekt - Implementacja języka Ruby w Javie jest tak dobra, że pozwala na uruchomienie niemal wszystkiego, co zostało stworzone dla Ruby, na maszynie Java, a uruchomienie AsciiDoctor jest jednym z najpowszechniejszych zastosowań JRuby.
dostępność pozwala na gromadzenie dokumentacji AsciiDoctor będącej częścią projektu Java (z którego aktywnie korzystamy). Jednocześnie AsciiDoctor i JRuby są pobierane automatycznie przez Mavena, a AsciiDoctor działa w środowisku JRuby: nie ma potrzeby instalowania czegokolwiek na maszynie! (Z wyłączeniem pakietu graphviz, który jest potrzebny, jeśli chcesz używać grafiki GraphViz lub PlantUML.) Po prostu umieść pliki .adoc w folderze src/main/asciidoc/. Tutaj zbieranie slajdów ze schematami.
Konwertuj slajdy do formatu PDF
Chociaż wersja HTML slajdów jest całkiem samowystarczalna, nadal konieczne jest posiadanie wersji slajdów w formacie PDF. Po pierwsze, zdarza się, że na niektórych konferencjach, które nie dają prelegentowi możliwości podłączenia własnego laptopa, wymagają slajdów „ściśle w formacie pptx lub pdf”, nie spodziewając się, że będą one również w formacie HTML. Po drugie, dobrym pomysłem jest przesłanie organizatorom nieedytowanej wersji slajdów w takiej formie, w jakiej zostały pokazane w raporcie, w formacie PDF w celu publikacji pliku w materiałach konferencyjnych.
Na szczęście narzędzie Node.js radzi sobie z tym zadaniem. , zbudowany na bazie — systemy automatyzacji zarządzania przeglądarką Chrome. Za pomocą polecenia możesz przekonwertować prezentację RevealJS na format PDF
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Dwie sztuczki przy uruchamianiu taśmy, które musieliśmy wymyślić metodą prób i błędów:
-
rozdzielczość poprzez parametr
-snależy określić z podwójnym marginesem, w przeciwnym razie mogą wystąpić problemy z wynikami konwersji -
w adresie URL wersji HTML prezentacji należy przekazać parametr
?fragments=true, co spowoduje utworzenie osobnej strony PDF dla każdego stanu pośredniego slajdu (na przykład pięć stron z pięcioma punktorami, jeśli są one wyświetlane jeden po drugim). Umożliwi to samodzielne wykorzystanie takiego pliku PDF jako prezentacji podczas raportu.
Automatyczny montaż i publikacja w sieci
Jest to wygodne, gdy slajdy są kompilowane automatycznie po wprowadzeniu zmian w systemie kontroli wersji, a jeszcze wygodniejsze, gdy automatycznie skompilowane slajdy są publikowane w Internecie do użytku publicznego. Slajdy z Internetu można łatwo „odtworzyć” przed publicznością z dowolnego urządzenia podłączonego do Internetu i projektora.
Ponieważ w naszej pracy korzystamy z GitHuba, naturalnym wyborem jest system CI oraz do hostowania gotowych prezentacji - . Ideą github.io jest to, że każda statyczna zawartość jest publikowana w gałęzi gh-pages Twojego projektu w serwisie GitHub będzie dostępny pod adresem <ваше имя>.gihub.io/<ваш проект>.
Kompletny plik konfiguracyjny TravisCI, obejmujący kompilację wersji HTML strony za pomocą Mavena, konwersję do formatu PDF za pomocą taśmy pokładowej i przesłanie wyników do wątku gh-pages do publikacji na github.io wygląda .
Aby zbudować taki projekt po stronie TravisCI, należy skonfigurować zmienne środowiskowe
GH_REF— wartość taka jak github.com/inponomarev/csa-hbGH_TOKEN— Token dostępu do GitHuba. Możesz go pobrać z GitHub w ustawieniach swojego profilu, Ustawienia programisty -> Tokeny dostępu osobistego. Jeśli przesyłasz prezentację do repozytorium publicznego, to dla tego tokena wystarczy określić jedyny poziom dostępu „Dostęp do repozytoriów publicznych”.GH_USER_EMAIL/GH_USER_NAME— para nazwa/adres e-mail, w imieniu której będzie wykonywany push do wątkugh-pages.
Dlatego każde zatwierdzenie kodu prezentacji w GitHub powoduje automatyczne przebudowanie slajdów w formatach HTML i PDF oraz ponowne przesłanie do github.io. (Oczywiście powinieneś przesyłać do github.io tylko te prezentacje, które ostatecznie chcesz upublicznić.)
Przykłady projektów
Na koniec, oto linki do kilku przykładów projektów prezentacji z dostosowanymi skryptami Maven i konfiguracją CI dla Travis-CI, które można sklonować i wykorzystać podczas tworzenia własnych projektów prezentacji:
-
(moje wystąpienie dla JPoint 2019)
-
(mój raport dla Heisenbug 2019)
Żegnaj PowerPoincie! Chyba nigdy nie będę Cię potrzebować do prezentacji technicznych :)
Źródło: www.habr.com