코드로 프레젠테이션 또는 더 이상 Powerpoint를 사용하지 않는 이유

저는 IT 경력을 쌓으면서 동료, 고객에게 프레젠테이션을 하고 공개 연설을 수십 번 한 것 같습니다. 수년 동안 Powerpoint는 슬라이드 제작 도구로서 저에게 자연스럽고 안정적인 선택이었습니다. 그러나 올해 상황은 질적으로 바뀌었다. XNUMX월부터 XNUMX월까지 XNUMX번의 컨퍼런스에서 연설할 기회가 있었고, 보고서용 슬라이드는 짧은 시간 내에 준비해야 했지만 높은 품질을 갖춰야 했습니다. 슬라이드의 시각적 디자인에 관한 작업 중 해당 부분을 다른 사람에게 위임하는 것에 대한 의문이 생겼습니다. 한번은 디자이너와 함께 작업하여 .pptx 파일을 메일로 보내려고 했지만 작업이 혼란에 빠졌습니다. 어느 버전의 슬라이드가 "최신"인지 아무도 모르고 Powerpoint의 차이로 인해 레이아웃이 "움직이는" 것이었습니다. 우리 컴퓨터의 버전과 글꼴. 그리고 나는 새로운 것을 시도하기로 결정했습니다. 나는 그것을 시도했고 그 이후로 Powerpoint로 돌아갈 생각은 없었습니다.

우리는 무엇을 원하는가

약 XNUMX년 반 전에 우리 회사는 동일한 문제에 직면하면서 Word를 사용하여 프로젝트 문서를 작성하는 것을 중단했습니다. Word는 작은 문서를 입력하는 데는 좋지만 양이 늘어남에 따라 공동 작업과 고품질 문서 확보에 어려움이 발생합니다. 통일된 디자인. 우리의 선택은 떨어졌다 Ascii의사, 그리고 우리는 이 선택에 대해 결코 기뻐하지 않지만 이것은 별도의 기사에 대한 주제입니다. 비슷한 시기에 우리는 "모든 것을 코드로"라는 DevOps 원칙 중 하나의 효율성을 배웠으므로 프레젠테이션 슬라이드를 만들기 위한 새로운 기술에 대한 요구 사항을 선택하는 것은 매우 분명했습니다.

1. 프레젠테이션은 마크업 언어로 된 일반 텍스트 파일이어야 합니다.
2. 우리 슬라이드는 개발 프로젝트에 관한 것이므로 마크업을 사용하면 외부 시스템에 의존하지 않고도 쉽게 삽입할 수 있어야 합니다.
   • 구문 강조가 포함된 코드 조각,
   • 화살표로 연결된 기하학적 모양의 간단한 다이어그램,
   • UML 다이어그램, 순서도 등.
3. 프레젠테이션 초안은 버전 관리 시스템에 저장되어야 합니다.
4. 완성된 슬라이드의 검증 및 조립은 CI 시스템에서 수행되어야 합니다.

현재 마크업 언어로 슬라이드를 만드는 데는 두 가지 기본 옵션이 있습니다. 비머 LaTeX용 또는 HTML/CSS를 사용하여 슬라이드를 생성하기 위한 프레임워크 중 하나(RevealJS, 비난하다, Deck.js 그리고 많은 다른 사람들).

내 영혼은 LaTeX에 있지만, 나만 사용하는 것이 아닌 솔루션을 선택할 때는 더 많은 사람들에게 친숙한 솔루션을 선택해야 한다고 생각했습니다. 모든 사람이 LaTeX를 아는 것은 아니며 일상 업무가 과학 기사 작성과 관련이 없다면 이 시스템의 거대하고 복잡한 세계에 몰입할 시간이 없을 것입니다.

그러나 HTML/CSS를 숙달하는 것은 널리 보급된 기술은 아닙니다. 예를 들어 저는 HTML/CSS에 완전히 능숙하지 않습니다. 다행스럽게도 이미 친숙한 AsciiDoctor가 구출되었습니다. asciidoctor-revealjs AsciiDoctor 마크업을 사용하여 RevealJS 슬라이드를 만들 수 있습니다. 그리고 배우기 쉽고 누구나 접근할 수 있습니다!

슬라이드 코딩 방법

AsciiDoctor에서 코딩 슬라이드의 본질을 이해하는 가장 쉬운 방법은 구체적인 예를 제시하는 것입니다. 이것들은 모두 제가 올해 컨퍼런스 프레젠테이션을 위해 만든 실제 슬라이드에서 가져온 것입니다.

제목과 항목 목록이 차례로 열리는 슬라이드:

== Зачем нам Streams API?

[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* Под капотом:
** Автоматический offset commit
** Ребалансировка
** Внутреннее состояние обработчиков
** Легкое масштабирование

결과

구문 강조가 포함된 헤더 및 소스 코드 조각:

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

[source,java]
----
StreamsConfig config = ...;
//Здесь устанавливаем всякие опции

Topology topology = new StreamsBuilder()
//Здесь строим топологию
....build();
----

결과

강연을 준비하면서 코드 데모는 반복적으로 수정 및 개선되므로 "원시 코드"를 슬라이드에 직접 빠르게 복사하여 붙여넣는 기능은 구문 강조에 대한 걱정 없이 데모를 최신 상태로 유지하는 데 매우 중요합니다.

제목, 그림 및 텍스트(슬라이드의 레이아웃은 셀에서 수행됨) AsciiDoctor 테이블):

== Kafka Streams in Action

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

결과

제목이 필요하지 않은 경우도 있으며 요점을 설명하려면 전체 화면 이미지만 있으면 됩니다.

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

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

결과

종종 아이디어는 "화살표로 연결된 사각형" 형태의 간단한 다이어그램으로 뒷받침되어야 합니다. 다행스럽게도 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;}
}
-----

결과

그림의 캡션 편집, 화살표 방향 변경 등이 필요한 경우 그림을 어딘가에 다시 그려 슬라이드에 다시 삽입하는 대신 프레젠테이션 코드에서 직접 수행할 수 있습니다. 이렇게 하면 슬라이드 작업 속도가 크게 향상됩니다.

더 복잡한 예:

== Невоспроизводимая сборка
[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;}
}
-----

결과

그런데 Graphviz를 실험하고 페이지에서 이미지를 디버그하는 것이 편리합니다. 그래프비즈 온라인.

마지막으로, 순서도, 클래스 다이어그램 또는 기타 표준화된 다이어그램을 슬라이드에 삽입해야 하는 경우 AsciiDoctor와 통합된 다른 시스템이 도움이 될 수 있습니다. 플랜트UML. 내 동료 Nikolai Potashnikov는 PlantUML의 광범위한 기능에 대해 썼습니다. 별도의 게시물.

프레젠테이션 프로젝트를 버전 관리 시스템에 저장된 코드로 전환하면 프레젠테이션에 대한 공동 작업을 구성하고 우선 콘텐츠 생성 작업과 디자인 작업을 분리할 수 있습니다. RevealJS의 슬라이드 디자인(글꼴, 배경, 들여쓰기)은 CSS를 사용하여 설명됩니다. CSS에 대한 나의 개인적인 기술은 다음과 같이 가장 잘 전달됩니다. 이 gif - 하지만 CSS를 저보다 훨씬 능숙하고 빠르게 다루는 분들이 계시다면 무섭지 않습니다. 그 결과, 프레젠테이션 마감일이 빠르게 다가오는 상황에서 Git을 통해 여러 파일을 동시에 작업할 수 있고, .pptx 파일을 메일로 보낼 때 불가능했던 협업 속도를 얻을 수 있다는 사실이 밝혀졌습니다.

슬라이드로 HTML 페이지 만들기

일반 텍스트 소스는 훌륭하지만 프레젠테이션 자체로 어떻게 컴파일합니까?

AsciiDoctor는 Ruby로 작성된 프로젝트이며 이를 실행하는 방법에는 여러 가지가 있습니다. 첫째, Ruby 언어를 설치하고 asciidoctor를 직접 실행할 수 있는데, 이는 아마도 Ruby 개발자에게 가장 가까운 일일 것입니다.

Ruby 설치를 방해하고 싶지 않다면 docker 이미지를 사용할 수 있습니다. Asciidoctor/도커-asciidoctor, 실행 시 VOLUME을 통해 폴더를 프로젝트 소스와 연결하고 지정된 위치에서 결과를 얻을 수 있습니다.

내가 선택한 옵션은 다소 의외인 것처럼 보일 수도 있지만 Java 개발자인 나에게는 가장 편리한 옵션이다. Ruby나 docker를 설치할 필요는 없지만 Maven 스크립트를 사용하여 슬라이드를 생성할 수 있습니다.

요점은 프로젝트가 JRuby - Ruby 언어의 Java 구현은 매우 훌륭하여 Ruby용으로 작성된 거의 모든 것을 Java 시스템에서 실행할 수 있으며 AsciiDoctor를 실행하는 것은 JRuby의 가장 일반적인 용도 중 하나입니다.

가용성 asciidoctor-maven-플러그인 Java 프로젝트(우리가 적극적으로 사용하는)의 일부인 AsciiDoctor 문서를 수집할 수 있습니다. 동시에 AsciiDoctor와 JRuby는 Maven에 의해 자동으로 다운로드되고 AsciiDoctor는 JRuby 환경에서 실행됩니다. 머신에 아무것도 설치할 필요가 없습니다! (패키지 제외 graphviz, GraphViz 또는 PlantUML 그래픽을 사용하려는 경우 필요합니다.) .adoc 파일을 폴더에 넣기만 하면 됩니다. src/main/asciidoc/. 여기에 폼닉의 예다이어그램이 포함된 슬라이드를 수집합니다.

슬라이드를 PDF로 변환

슬라이드의 HTML 버전은 매우 자급자족 가능하지만 여전히 슬라이드의 PDF 버전이 필요합니다. 첫째, 발표자에게 자신의 노트북을 연결할 수 있는 기회를 제공하지 않는 일부 회의에서는 슬라이드가 HTML로도 될 것이라고 기대하지 않고 "엄격히 pptx 또는 pdf 형식"의 슬라이드를 요구하는 경우가 있습니다. 둘째, 회의 자료에 파일을 게시하기 위해 보고서에 표시된 슬라이드의 편집되지 않은 버전을 PDF 형식으로 주최자에게 보내는 것이 좋은 방법입니다.

다행히 Node.js 유틸리티가 이 작업을 처리합니다. 데크테이프, 기반으로 구축 인형극 — Chrome 브라우저 관리를 위한 자동화 시스템. 다음 명령을 사용하여 RevealJS 프레젠테이션을 PDF로 변환할 수 있습니다.

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

데크테이프를 출시할 때 시행착오를 거쳐 고안해야 했던 두 가지 트릭은 다음과 같습니다.

• 매개변수를 통한 분해능 -s 두 배의 여백을 지정해야 합니다. 그렇지 않으면 변환 결과에 문제가 있을 수 있습니다.

• 프레젠테이션의 HTML 버전 URL에서 매개변수를 전달해야 합니다. ?fragments=true를 사용하면 슬라이드의 각 중간 상태에 대해 별도의 PDF 페이지가 생성됩니다(예를 들어 차례대로 표시되는 경우 글머리 기호 XNUMX개에 대해 XNUMX페이지). 이렇게 하면 보고서 중에 해당 PDF를 프리젠테이션으로 자체적으로 사용할 수 있습니다.

웹에 자동 조립 및 게시

버전 관리 시스템이 변경될 때 슬라이드가 자동으로 컴파일되면 편리하고, 자동으로 컴파일된 슬라이드를 인터넷에 올려 공개하면 더욱 편리합니다. 인터넷의 슬라이드는 인터넷과 프로젝터에 연결된 모든 기계에서 청중 앞에서 쉽게 "재생"될 수 있습니다.

우리는 작업에 GitHub를 사용하기 때문에 CI 시스템의 자연스러운 선택은 다음과 같습니다. 트래비스 CI및 기성 프레젠테이션을 호스팅하기 위해 - github.io. github.io의 기본 아이디어는 모든 정적 콘텐츠가 브랜치에 게시된다는 것입니다. gh-pages GitHub의 프로젝트는 다음에서 사용할 수 있습니다. <ваше имя>.gihub.io/<ваш проект>.

Maven을 사용하여 페이지의 HTML 버전을 컴파일하고, Decktape를 사용하여 PDF로 변환하고, 결과를 스레드에 업로드하는 것을 포함하여 완전한 TravisCI 구성 파일 gh-pages github.io에 게시하려면 다음과 같습니다. 그래서.

TravisCI 측에서 이러한 프로젝트를 빌드하려면 환경 변수를 구성해야 합니다.

• GH_REF — github.com/inponomarev/csa-hb와 같은 값
• GH_TOKEN — GitHub 액세스 토큰. 프로필 설정, 개발자 설정 -> 개인 액세스 토큰의 GitHub에서 얻을 수 있습니다. 프레젠테이션을 공개 저장소에 업로드하는 경우 이 토큰에 대해 "공용 저장소 액세스" 액세스 수준만 지정하면 충분합니다.
• GH_USER_EMAIL / GH_USER_NAME — 스레드에 대한 푸시가 수행될 이름/이메일 쌍 gh-pages.

따라서 GitHub에서 프레젠테이션 코드를 커밋할 때마다 슬라이드가 HTML 및 PDF 형식으로 자동으로 다시 작성되고 github.io에 다시 업로드됩니다. (물론, 궁극적으로 공개하고 싶은 프레젠테이션만 github.io에 업로드해야 합니다.)

프로젝트의 예

마지막으로 다음은 사용자 정의 Maven 스크립트와 Travis-CI용 CI 구성이 포함된 프레젠테이션 프로젝트의 몇 가지 예에 대한 링크입니다. 이 링크는 자신만의 프레젠테이션 프로젝트를 만들 때 복제하여 사용할 수 있습니다.

• https://github.com/inponomarev/kstreams-examples (JPoint 2019에 대한 내 강연)

• https://github.com/inponomarev/csa-hb (Heisenbug 2019에 대한 내 보고서)

파워포인트 안녕! 기술 프레젠테이션에 당신이 필요하지 않을 것 같아요 :)

출처 : habr.com