Tôi nghĩ rằng tôi đã thực hiện hàng chục bài thuyết trình cho đồng nghiệp, khách hàng và diễn thuyết trước công chúng trong sự nghiệp CNTT của mình. Trong nhiều năm, Powerpoint là sự lựa chọn đương nhiên và đáng tin cậy đối với tôi như một công cụ sản xuất slide. Nhưng năm nay tình hình đã thay đổi về chất. Từ tháng XNUMX đến tháng XNUMX, tôi có cơ hội phát biểu tại XNUMX hội nghị và các slide báo cáo phải được chuẩn bị trong thời gian ngắn nhưng chất lượng cao. Câu hỏi nảy sinh về việc giao phần công việc liên quan đến thiết kế hình ảnh của các slide cho người khác. Tôi từng thử làm việc với một nhà thiết kế, gửi file .pptx qua mail nhưng công việc trở nên hỗn loạn: không ai biết phiên bản slide nào là “mới nhất” và bố cục “chuyển động” do sự khác biệt trong Powerpoint. phiên bản và phông chữ trên máy của chúng tôi. Và tôi quyết định thử một cái gì đó mới. Tôi đã thử và kể từ đó tôi không nghĩ đến việc quay lại Powerpoint.
Chúng ta muốn gì
Khoảng một năm rưỡi trước, công ty chúng tôi đã ngừng sử dụng Word để tạo tài liệu dự án, gặp phải vấn đề tương tự: mặc dù Word rất tốt để gõ một tài liệu nhỏ, nhưng khi khối lượng tăng lên, khó khăn sẽ nảy sinh khi cộng tác và đạt được chất lượng cao và thiết kế thống nhất. Sự lựa chọn của chúng tôi rơi vào , và chúng tôi không bao giờ hết vui mừng trước sự lựa chọn này, nhưng đây là chủ đề cho một bài viết riêng. Cùng lúc đó, chúng tôi đã biết được tính hiệu quả của một trong những nguyên tắc DevOps là “mọi thứ đều dưới dạng mã”, vì vậy việc lựa chọn các yêu cầu đối với công nghệ mới để tạo slide thuyết trình là khá rõ ràng:
- Bản trình bày phải là một tệp văn bản thuần túy bằng ngôn ngữ đánh dấu.
- Các slide của chúng tôi nói về các dự án phát triển, do đó, phần đánh dấu sẽ giúp bạn dễ dàng chèn mà không cần dùng đến hệ thống bên ngoài
- các đoạn mã có tô sáng cú pháp,
- sơ đồ đơn giản ở dạng hình học được kết nối bằng mũi tên,
- Sơ đồ UML, sơ đồ và hơn thế nữa.
- Bản thảo trình bày phải được lưu trữ trong hệ thống kiểm soát phiên bản.
- Việc xác nhận và lắp ráp các slide đã hoàn thiện phải được thực hiện trong hệ thống CI.
Ngày nay, có hai tùy chọn cơ bản để tạo trang trình bày bằng ngôn ngữ đánh dấu: gói dành cho LaTeX hoặc một trong các khung tạo trang trình bày bằng HTML/CSS (, , và nhiều người khác).
Mặc dù tâm hồn tôi nằm ở LaTeX, nhưng tâm trí tôi quyết định rằng việc lựa chọn một giải pháp mà tôi không phải là người duy nhất sử dụng phải đứng về phía một giải pháp quen thuộc với nhiều người hơn. Không phải ai cũng biết đến LaTeX và nếu công việc hàng ngày của bạn không liên quan đến việc viết các bài báo khoa học, thì bạn khó có thể có thời gian để đắm mình trong thế giới rộng lớn và phức tạp của hệ thống này.
Tuy nhiên, việc thành thạo HTML/CSS không hẳn là một kỹ năng phổ biến: chẳng hạn như tôi vẫn chưa hoàn toàn thành thạo về nó. May mắn thay, AsciiDoctor vốn đã quen thuộc đã ra tay giải cứu: một công cụ chuyển đổi cho phép bạn tạo các slide RevealJS bằng cách sử dụng đánh dấu AsciiDoctor. Và nó rất dễ học và dễ tiếp cận với mọi người!
Cách viết mã slide
Để hiểu được bản chất của việc code slide trên AsciiDoctor, cách dễ nhất là đưa ra ví dụ cụ thể. Đây đều là những slide thực tế mà tôi đã thực hiện cho các bài thuyết trình tại hội nghị năm nay.
Một slide có tiêu đề và danh sách các mục mở lần lượt:
== Зачем нам Streams API?
[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* Под капотом:
** Автоматический offset commit
** Ребалансировка
** Внутреннее состояние обработчиков
** Легкое масштабированиеKết quả
Đoạn mã tiêu đề và mã nguồn có tô sáng cú pháp:
== Kafka Streams API: общая структура KStreams-приложения
[source,java]
----
StreamsConfig config = ...;
//Здесь устанавливаем всякие опции
Topology topology = new StreamsBuilder()
//Здесь строим топологию
....build();
----Kết quả
Để chuẩn bị cho buổi nói chuyện, các bản trình diễn mã phải trải qua nhiều lần sửa đổi và cải tiến, do đó, khả năng sao chép và dán nhanh chóng “mã thô” trực tiếp vào trang chiếu là vô giá, đảm bảo rằng bản trình diễn được cập nhật mà không cần lo lắng về việc đánh dấu cú pháp.
Tiêu đề, hình minh họa và văn bản (bố cục trên slide được thực hiện theo ô ):
== Kafka Streams in Action
[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
“Kafka Streams in Action”, November 2018
* Примеры кода для Kafka 1.0
|===Kết quả
Đôi khi không cần tiêu đề và để minh họa quan điểm của mình, bạn chỉ cần một hình ảnh toàn màn hình:
[%notitle]
== Жить в легаси нелегко
image::swampman.jpg[canvas, size=cover]Kết quả
Thông thường, một ý tưởng cần được hỗ trợ bằng một sơ đồ đơn giản, dưới dạng “các hình vuông được nối với nhau bằng các mũi tên”. May mắn thay, AsciiDoctor được tích hợp với hệ thống — một ngôn ngữ cho phép bạn mô tả sơ đồ đồ thị dựa trên mô tả các đỉnh và kết nối giữa chúng. Graphviz cần một lộ trình học tập, nhưng dựa trên các ví dụ được cung cấp, việc này khá dễ thực hiện! Đây là những gì nó trông giống như:
== Пишем “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;}
}
-----Kết quả
Trong trường hợp cần chỉnh sửa chú thích trên hình, thay đổi hướng mũi tên, v.v., việc này có thể được thực hiện trực tiếp trong mã trình bày, thay vì phải vẽ lại hình ảnh ở đâu đó và chèn lại vào slide. Điều này làm tăng đáng kể tốc độ làm việc trên các slide.
Một ví dụ phức tạp hơn:
== Невоспроизводимая сборка
[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;}
}
-----Kết quả
Nhân tiện, thật thuận tiện khi thử nghiệm Graphviz và gỡ lỗi hình ảnh trên trang .
Cuối cùng, nếu bạn cần chèn sơ đồ, sơ đồ lớp hoặc sơ đồ tiêu chuẩn hóa khác vào slide thì một hệ thống khác được tích hợp với AsciiDoctor có thể giải quyết, . Đồng nghiệp của tôi Nikolai Potashnikov đã viết về khả năng mở rộng của PlantUML .
Việc biến dự án trình bày thành mã được lưu trữ trên hệ thống kiểm soát phiên bản giúp tổ chức công việc chung trên bản trình bày, trước hết là tách biệt các nhiệm vụ tạo nội dung và thiết kế. Thiết kế của các slide (phông chữ, hình nền, vết lõm) trong RevealJS được mô tả bằng CSS. Kỹ năng cá nhân của tôi với CSS được truyền đạt tốt nhất bởi - nhưng cũng chẳng có gì đáng sợ khi có những người làm việc với CSS khéo léo và nhanh nhẹn hơn tôi rất nhiều. Kết quả là, với thời hạn thuyết trình đang đến gần, chúng tôi có thể làm việc đồng thời trên các tệp khác nhau thông qua Git và phát triển tốc độ cộng tác không thể có khi gửi tệp .pptx qua thư.
Xây dựng trang HTML có trang trình bày
Các nguồn văn bản thuần túy rất tuyệt vời, nhưng làm cách nào để bạn biên dịch chúng thành bản trình bày?
AsciiDoctor là một dự án được viết bằng Ruby và có một số cách để chạy nó. Đầu tiên, bạn có thể cài đặt ngôn ngữ Ruby và chạy trực tiếp asciidoctor, đây có lẽ là thứ gần gũi nhất với các nhà phát triển Ruby.
Nếu bạn không muốn gặp rắc rối với việc cài đặt Ruby, bạn có thể sử dụng hình ảnh docker , khi khởi chạy, bạn có thể kết nối thư mục với các nguồn dự án thông qua VOLUME và nhận kết quả ở một vị trí nhất định.
Tùy chọn tôi chọn có vẻ hơi bất ngờ nhưng nó thuận tiện nhất đối với tôi với tư cách là nhà phát triển Java. Nó không yêu cầu cài đặt Ruby hoặc docker, nhưng cho phép bạn tạo các slide bằng tập lệnh Maven.
Vấn đề là dự án - Việc triển khai ngôn ngữ Ruby bằng Java tốt đến mức nó cho phép bạn chạy hầu hết mọi thứ được tạo cho Ruby trên máy Java và chạy AsciiDoctor là một trong những cách sử dụng phổ biến nhất của JRuby.
tính sẵn sàng cho phép bạn thu thập tài liệu AsciiDoctor là một phần của dự án Java (mà chúng tôi tích cực sử dụng). Đồng thời, AsciiDoctor và JRuby được Maven tải xuống tự động và AsciiDoctor chạy trong môi trường JRuby: không cần cài đặt bất cứ thứ gì trên máy! (Không bao gồm gói graphviz, điều này cần thiết nếu bạn muốn sử dụng đồ họa GraphViz hoặc PlantUML.) Chỉ cần đặt các tệp .adoc của bạn vào một thư mục src/main/asciidoc/. Ở đây thu thập các slide có sơ đồ.
Chuyển đổi slide sang PDF
Mặc dù phiên bản HTML của các slide khá tự cung cấp nhưng vẫn cần phải có phiên bản PDF của các slide. Đầu tiên, điều xảy ra là tại một số hội nghị không cung cấp cho diễn giả cơ hội kết nối máy tính xách tay của mình, họ yêu cầu các trang trình bày “hoàn toàn ở định dạng pptx hoặc pdf” mà không mong đợi rằng chúng cũng ở dạng HTML. Thứ hai, tốt nhất là gửi cho ban tổ chức một phiên bản chưa chỉnh sửa của các slide của bạn như chúng được trình chiếu trong báo cáo, ở định dạng PDF để xuất bản tệp trong tài liệu hội nghị.
May mắn thay, tiện ích Node.js xử lý được nhiệm vụ này. , được xây dựng trên cơ sở — hệ thống tự động hóa để quản lý trình duyệt Chrome. Bạn có thể chuyển đổi bản trình bày RevealJS sang PDF bằng lệnh
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Hai thủ thuật khi khởi chạy decktape mà chúng tôi đã phải nghĩ ra qua quá trình thử và sai:
-
độ phân giải thông qua tham số
-sphải được chỉ định với lề gấp đôi, nếu không có thể có vấn đề với kết quả chuyển đổi -
trong URL của phiên bản HTML của bản trình bày, bạn cần truyền một tham số
?fragments=true, thao tác này sẽ tạo một trang PDF riêng cho từng trạng thái trung gian của trang chiếu của bạn (ví dụ: năm trang cho năm dấu đầu dòng nếu chúng được hiển thị lần lượt). Điều này sẽ cho phép bạn sử dụng bản PDF đó làm bản trình bày trong báo cáo.
Tự động lắp ráp và xuất bản trên web
Thật thuận tiện khi các slide được biên dịch tự động khi có thay đổi đối với hệ thống kiểm soát phiên bản và càng thuận tiện hơn khi các slide được biên dịch tự động được đăng lên Internet để công chúng sử dụng. Các slide từ Internet có thể dễ dàng được “phát” trước khán giả từ bất kỳ máy nào được kết nối với Internet và máy chiếu.
Vì chúng tôi sử dụng GitHub trong công việc của mình nên sự lựa chọn tự nhiên của hệ thống CI là và để lưu trữ các bài thuyết trình được tạo sẵn - . Ý tưởng đằng sau github.io là mọi nội dung tĩnh được đăng lên một nhánh gh-pages dự án của bạn trên GitHub, sẽ có sẵn tại <ваше имя>.gihub.io/<ваш проект>.
Hoàn thành tệp cấu hình TravisCI, bao gồm biên dịch phiên bản HTML của trang bằng Maven, chuyển đổi sang PDF bằng băng từ và tải kết quả lên một chuỗi gh-pages để xuất bản trên github.io, có vẻ như .
Để xây dựng một dự án như vậy về phía TravisCI, bạn cần định cấu hình các biến môi trường
GH_REF- giá trị như github.com/inponomarev/csa-hbGH_TOKEN- Mã thông báo truy cập GitHub. Bạn có thể lấy nó từ GitHub trong cài đặt hồ sơ của mình, Cài đặt dành cho nhà phát triển -> Mã thông báo truy cập cá nhân. Nếu bạn tải bản trình bày lên kho lưu trữ công cộng, thì đối với mã thông báo này, chỉ cần chỉ định cấp truy cập duy nhất “Truy cập kho lưu trữ công khai” là đủ.GH_USER_EMAIL/GH_USER_NAME— cặp tên/email thay mặt cho việc đẩy tới chuỗi sẽ được thực hiệngh-pages.
Do đó, mỗi cam kết của mã trình bày trên GitHub đều dẫn đến việc các slide được tự động xây dựng lại ở định dạng HTML và PDF và được tải lại lên github.io. (Tất nhiên, bạn chỉ nên tải lên github.io những bản trình bày mà cuối cùng bạn muốn công khai.)
Ví dụ về các dự án
Cuối cùng, đây là các liên kết đến một số ví dụ về dự án thuyết trình với tập lệnh Maven và cấu hình CI tùy chỉnh cho Travis-CI, có thể được sao chép và sử dụng khi tạo dự án thuyết trình của riêng bạn:
-
(bài nói chuyện của tôi cho JPoint 2019)
-
(báo cáo của tôi cho Heisenbug 2019)
Tạm biệt Powerpoint! Tôi không nghĩ tôi sẽ cần bạn để thuyết trình kỹ thuật :)
Nguồn: www.habr.com