Saya rasa saya telah memberikan lusinan presentasi kepada kolega, klien, dan berbicara di depan umum dalam karir TI saya. Selama bertahun-tahun, Powerpoint telah menjadi pilihan yang alami dan dapat diandalkan bagi saya sebagai alat produksi slide. Namun tahun ini situasinya telah berubah secara kualitatif. Dari bulan Februari hingga Mei, saya mendapat kesempatan untuk berbicara di lima konferensi, dan slide laporan harus disiapkan dalam waktu singkat, namun dengan kualitas yang tinggi. Timbul pertanyaan tentang mendelegasikan bagian pekerjaan mengenai desain visual slide tersebut kepada orang lain. Saya pernah mencoba bekerja dengan seorang desainer, mengirim file .pptx melalui surat, tetapi pekerjaan berubah menjadi kekacauan: tidak ada yang tahu versi slide mana yang "terbaru", dan tata letaknya "bergerak" karena perbedaan dalam Powerpoint versi dan font di mesin kami. Dan saya memutuskan untuk mencoba sesuatu yang baru. Saya mencobanya, dan sejak itu saya tidak berpikir untuk kembali ke Powerpoint.
Apa yang kita inginkan
Sekitar satu setengah tahun yang lalu, perusahaan kami berhenti menggunakan Word untuk membuat dokumentasi proyek, karena mengalami masalah yang sama: meskipun Word bagus untuk mengetik dokumen kecil, seiring bertambahnya volume, kesulitan muncul dengan kolaborasi dan mendapatkan dokumen berkualitas tinggi dan desain terpadu. Pilihan kami jatuh , dan kami tidak pernah berhenti bersukacita atas pilihan ini, tetapi ini adalah topik untuk artikel terpisah. Sekitar waktu yang sama, kami mempelajari keefektifan salah satu prinsip DevOps “semuanya sebagai kode”, sehingga pilihan persyaratan untuk teknologi baru untuk membuat slide presentasi cukup jelas:
- Presentasi harus berupa file teks biasa dalam bahasa markup.
- Slide kami berisi tentang proyek pengembangan, jadi markupnya harus memudahkan penyisipan, tanpa menggunakan sistem eksternal
- fragmen kode dengan penyorotan sintaksis,
- diagram sederhana berupa bangun-bangun geometris yang dihubungkan dengan tanda panah,
- Diagram UML, diagram alur, dan lainnya.
- Draf presentasi harus disimpan dalam sistem kontrol versi.
- Validasi dan perakitan slide yang telah selesai harus dilakukan dalam sistem CI.
Saat ini, ada dua opsi dasar untuk membuat slide dalam bahasa markup: paket untuk LaTeX atau salah satu kerangka kerja untuk membuat slide menggunakan HTML/CSS (, , dan banyak lagi).
Meskipun jiwa saya terletak pada LaTeX, pikiran saya menentukan bahwa pilihan solusi yang bukan satu-satunya yang saya gunakan harus berada di sisi solusi yang akrab bagi banyak orang. Tidak semua orang mengetahui LaTeX, dan jika praktik sehari-hari Anda tidak terkait dengan menulis artikel ilmiah, kemungkinan besar Anda tidak akan punya waktu untuk membenamkan diri dalam dunia sistem yang besar dan rumit ini.
Namun, penguasaan HTML/CSS bukanlah keterampilan yang tersebar luas: Saya, misalnya, masih jauh dari mahir dalam hal itu. Untungnya, AsciiDoctor yang sudah familiar datang untuk menyelamatkan: sebuah konverter memungkinkan Anda membuat slide RevealJS menggunakan markup AsciiDoctor. Dan mudah dipelajari serta dapat diakses oleh semua orang!
Cara membuat kode slide
Untuk memahami inti coding slide di AsciiDoctor, cara termudah adalah dengan memberikan contoh spesifik. Ini semua berasal dari slide sebenarnya yang saya buat untuk presentasi konferensi saya tahun ini.
Slide dengan judul dan daftar item yang dibuka satu demi satu:
== Зачем нам Streams API?
[%step]
* Real-time stream processing
* Stream-like API (map / reduce)
* Под капотом:
** Автоматический offset commit
** Ребалансировка
** Внутреннее состояние обработчиков
** Легкое масштабированиеHasil
Cuplikan header dan kode sumber dengan penyorotan sintaksis:
== Kafka Streams API: общая структура KStreams-приложения
[source,java]
----
StreamsConfig config = ...;
//Здесь устанавливаем всякие опции
Topology topology = new StreamsBuilder()
//Здесь строим топологию
....build();
----Hasil
Dalam persiapan untuk pembicaraan, demo kode mengalami revisi dan peningkatan berulang kali, sehingga kemampuan untuk dengan cepat menyalin dan menempelkan “kode mentah” langsung ke slide sangat berharga, memastikan bahwa demo tersebut mutakhir tanpa mengkhawatirkan penyorotan sintaksis.
Judul, ilustrasi dan teks (tata letak pada slide dilakukan dalam sel ):
== Kafka Streams in Action
[.custom-style]
[cols="30a,70a"]
|===
|image::KSIA.jpg[]
|
* **William Bejeck**, +
“Kafka Streams in Action”, November 2018
* Примеры кода для Kafka 1.0
|===Hasil
Terkadang judul tidak diperlukan, dan untuk mengilustrasikan maksud Anda, Anda hanya memerlukan gambar layar penuh:
[%notitle]
== Жить в легаси нелегко
image::swampman.jpg[canvas, size=cover]Hasil
Seringkali suatu gagasan perlu didukung oleh diagram sederhana, dalam bentuk “kotak yang dihubungkan oleh panah”. Untungnya, AsciiDoctor terintegrasi dengan sistem — bahasa yang memungkinkan Anda mendeskripsikan diagram graf berdasarkan deskripsi simpul dan hubungan di antara simpul tersebut. Graphviz mengambil kurva pembelajaran, namun berdasarkan contoh yang diberikan, ini cukup mudah dilakukan! Ini adalah tampilannya:
== Пишем “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;}
}
-----Hasil
Jika perlu mengedit keterangan pada gambar, mengubah arah panah, dll., ini dapat dilakukan langsung di kode presentasi, daripada menggambar ulang gambar di suatu tempat dan memasukkannya kembali ke dalam slide. Ini secara signifikan meningkatkan kecepatan pengerjaan slide.
Contoh yang lebih rumit:
== Невоспроизводимая сборка
[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;}
}
-----Hasil
Omong-omong, lebih mudah untuk bereksperimen dengan Graphviz dan men-debug gambar di halaman .
Terakhir, jika Anda perlu memasukkan diagram alur, diagram kelas, atau diagram standar lainnya ke dalam slide, maka sistem lain yang terintegrasi dengan AsciiDoctor dapat membantu, . Rekan saya Nikolai Potashnikov menulis tentang kemampuan PlantUML yang luas .
Mengubah proyek presentasi menjadi kode yang disimpan pada sistem kontrol versi memungkinkan pengorganisasian kerja bersama pada presentasi, pertama-tama, untuk memisahkan tugas pembuatan konten dan desain. Desain slide (font, latar belakang, indentasi) di RevealJS dijelaskan menggunakan CSS. Keahlian pribadi saya dengan CSS paling baik disampaikan oleh - tapi tidak menakutkan bila ada orang yang bekerja dengan CSS jauh lebih cekatan dan lebih cepat dari saya. Hasilnya, ternyata dengan semakin dekatnya tenggat waktu presentasi, kita dapat mengerjakan file yang berbeda secara bersamaan melalui Git dan mengembangkan kecepatan kolaborasi yang tidak mungkin dilakukan saat mengirim file .pptx melalui surat.
Membangun halaman HTML dengan slide
Sumber teks biasa memang bagus, tapi bagaimana Anda mengkompilasinya ke dalam presentasi itu sendiri?
AsciiDoctor adalah proyek yang ditulis di Ruby, dan ada beberapa cara untuk menjalankannya. Pertama, Anda dapat menginstal bahasa Ruby dan menjalankan asciidoctor secara langsung, yang mungkin merupakan hal yang paling dekat dengan pengembang Ruby.
Jika Anda tidak ingin dipusingkan dengan instalasi Ruby, Anda bisa menggunakan image docker , di mana, ketika diluncurkan, Anda dapat menghubungkan folder dengan sumber proyek melalui VOLUME dan mendapatkan hasilnya di lokasi tertentu.
Opsi yang saya pilih mungkin tampak agak tidak terduga, tetapi ini adalah yang paling nyaman bagi saya sebagai pengembang Java. Itu tidak memerlukan instalasi Ruby atau buruh pelabuhan, tetapi memungkinkan Anda membuat slide menggunakan skrip Maven.
Intinya proyek itu - Implementasi Java pada bahasa Ruby sangat baik sehingga memungkinkan Anda menjalankan hampir semua hal yang dibuat untuk Ruby di mesin Java, dan menjalankan AsciiDoctor adalah salah satu penggunaan JRuby yang paling umum.
tersedianya memungkinkan Anda mengumpulkan dokumentasi AsciiDoctor yang merupakan bagian dari proyek Java (yang kami gunakan secara aktif). Pada saat yang sama, AsciiDoctor dan JRuby diunduh secara otomatis oleh Maven, dan AsciiDoctor berjalan di lingkungan JRuby: tidak perlu menginstal apa pun di mesin! (Tidak termasuk paket graphviz, yang diperlukan jika Anda ingin menggunakan grafik GraphViz atau PlantUML.) Cukup letakkan file .adoc Anda di dalam folder src/main/asciidoc/. Di sini mengumpulkan slide dengan diagram.
Konversi slide ke PDF
Meskipun slide versi HTML cukup mandiri, slide versi PDF tetap diperlukan. Pertama, pada beberapa konferensi yang tidak memberikan kesempatan kepada pembicara untuk menghubungkan laptopnya sendiri, mereka memerlukan slide “hanya dalam format pptx atau pdf”, tanpa mengharapkan bahwa slide tersebut juga dalam HTML. Kedua, merupakan cara yang baik untuk mengirimkan kepada penyelenggara versi slide Anda yang belum diedit seperti yang ditampilkan di laporan, dalam format PDF untuk publikasi file dalam materi konferensi.
Untungnya, utilitas Node.js menangani tugas ini. , dibangun atas dasar — sistem otomasi untuk mengelola browser Chrome. Anda dapat mengonversi presentasi RevealJS ke PDF dengan perintah
node decktape.js -s 3200x1800 --slides 1-500
reveal "file:///index.html?fragments=true" slides.pdf Dua trik saat meluncurkan decktape, yang harus kami hasilkan melalui trial and error:
-
resolusi melalui parameter
-sharus ditentukan dengan margin dua kali lipat, jika tidak, mungkin ada masalah dengan hasil konversi -
di URL presentasi versi HTML Anda harus memasukkan parameter
?fragments=true, yang akan membuat halaman PDF terpisah untuk setiap status perantara slide Anda (misalnya, lima halaman untuk lima poin-poin jika ditampilkan satu demi satu). Ini akan memungkinkan Anda untuk menggunakan PDF itu sendiri sebagai presentasi selama laporan.
Perakitan dan penerbitan otomatis di web
Akan lebih mudah jika slide dikompilasi secara otomatis ketika perubahan dilakukan pada sistem kontrol versi, dan bahkan lebih nyaman lagi ketika slide yang dikompilasi secara otomatis diposting di Internet untuk kepentingan umum. Slide dari Internet dapat dengan mudah “dimainkan” di depan penonton dari mesin mana pun yang terhubung ke Internet dan proyektor.
Karena kami menggunakan GitHub dalam pekerjaan kami, pilihan alami dari sistem CI adalah , dan untuk mengadakan presentasi yang sudah jadi - . Ide di balik github.io adalah konten statis apa pun yang diposting ke cabang gh-pages proyek Anda di GitHub, tersedia di <ваше имя>.gihub.io/<ваш проект>.
Selesaikan file konfigurasi TravisCI, termasuk kompilasi halaman versi HTML menggunakan Maven, konversi ke PDF menggunakan decktape, dan unggah hasilnya ke thread gh-pages untuk publikasi di github.io, sepertinya .
Untuk membangun proyek seperti itu di sisi TravisCI, Anda perlu mengonfigurasi variabel lingkungan
GH_REF— nilai seperti github.com/inponomarev/csa-hbGH_TOKEN— Token akses GitHub. Anda bisa mendapatkannya dari GitHub di pengaturan profil Anda, Pengaturan Pengembang -> Token Akses Pribadi. Jika Anda mengunggah presentasi ke repositori publik, maka untuk token ini cukup menentukan satu-satunya tingkat akses “Akses repositori publik”.GH_USER_EMAIL/GH_USER_NAME— pasangan nama/email atas nama siapa push ke thread akan dilakukangh-pages.
Dengan demikian, setiap penerapan kode presentasi di GitHub menghasilkan slide yang secara otomatis dibuat ulang dalam format HTML dan PDF dan diunggah ulang ke github.io. (Tentu saja, Anda hanya boleh mengunggah ke github.io presentasi yang pada akhirnya ingin Anda publikasikan.)
Contoh proyek
Terakhir, berikut ini tautan ke beberapa contoh proyek presentasi dengan skrip Maven yang disesuaikan dan konfigurasi CI untuk Travis-CI, yang dapat dikloning dan digunakan saat membuat proyek presentasi Anda sendiri:
-
(pembicaraan saya untuk JPoint 2019)
-
(laporan saya untuk Heisenbug 2019)
Selamat tinggal Powerpoint! Saya rasa saya tidak akan membutuhkan Anda untuk presentasi teknis :)
Sumber: www.habr.com