Tampaknya saya memiliki kesempatan untuk melakukan lusinan presentasi untuk kolega, pelanggan, dan penampilan publik untuk karier saya di bidang TI. Selama bertahun-tahun, Powerpoint, sebagai sarana membuat slide, tetap merupakan pilihan yang alami dan andal. Tetapi tahun ini situasinya telah berubah secara kualitatif. Dari Februari hingga Mei saya berkesempatan untuk berbicara di lima konferensi, dan slide untuk laporan harus disiapkan dalam waktu singkat, tetapi dengan kualitas tinggi. Timbul pertanyaan tentang pendelegasian bagian pekerjaan itu, seperti untuk desain visual slide, kepada orang lain. Suatu kali saya mencoba bekerja dengan seorang desainer dengan mengirimkan file .pptx melalui surat, tetapi pekerjaan itu berubah menjadi kekacauan: tidak ada yang tahu versi slide mana yang "terbaru", dan tata letak "pergi" karena perbedaan dalam versi Powerpoint dan font pada 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, kami di perusahaan menolak untuk menggunakan Word untuk membuat dokumentasi proyek, dihadapkan dengan masalah yang sama: meskipun Word baik untuk mengetik dokumen kecil, ketika volume bertambah, ada kesulitan dengan bekerja bersama dan mendapatkan desain yang berkualitas tinggi dan terpadu. Pilihan kami jatuh pada AsciiDoctor , dan kami tidak berhenti bersukacita pada pilihan ini, tetapi ini adalah topik untuk artikel terpisah. Sekitar waktu yang sama, kami mempelajari efektivitas salah satu prinsip DevOps dari "semuanya sebagai kode", jadi pilihan persyaratan untuk teknologi baru untuk membuat slide presentasi cukup jelas:
- Presentasi harus berupa file teks biasa dalam bahasa markup.
- Kami memiliki slide tentang proyek pengembangan, jadi markup harus memungkinkan Anda untuk dengan mudah memasukkan tanpa menggunakan sistem eksternal
- sintaks yang disorot fragmen kode,
- diagram sederhana dalam bentuk bentuk geometris dihubungkan oleh panah,
- Diagram UML, diagram alur, dan banyak lagi.
- Proyek presentasi harus disimpan dalam sistem kontrol versi.
- Validasi dan perakitan slide jadi harus dilakukan dalam sistem CI.
Saat ini ada dua opsi dasar untuk membuat slide dalam bahasa markup: paket beamer untuk LaTeX atau salah satu kerangka kerja untuk membuat slide HTML / CSS ( RevealJS , komentar , deck.js dan banyak lainnya).
Meskipun jiwaku terletak pada LaTeX, pikiran saya menyarankan bahwa pilihan solusi yang tidak akan saya gunakan sendiri harus berada di sisi solusi, akrab dengan lingkaran orang yang lebih luas. Tidak semua orang tahu LaTeX, dan jika praktik sehari-hari Anda tidak terkait dengan menulis artikel ilmiah, maka Anda tidak mungkin punya waktu untuk membenamkan diri dalam dunia yang luas dan rumit dari sistem ini.
Namun, penguasaan HTML / CSS bukan untuk mengatakan bahwa keterampilan di mana-mana adalah: Saya, misalnya, tidak sepenuhnya memilikinya. Untungnya, AsciiDoctor yang familier datang untuk menyelamatkan: konverter asciidoctor-revejs memungkinkan Anda membuat slide RevealJS menggunakan markup AsciiDoctor. Dan sangat mudah dipelajari dan diakses oleh semua orang!
Cara menyandikan slide
Untuk memahami inti dari pengodean slide pada AsciiDoctor, akan lebih mudah untuk memberikan contoh spesifik. Semuanya berasal dari slide nyata yang saya buat untuk pembicaraan konferensi saya tahun ini.
Slide dengan tajuk dan daftar satu per satu paragraf pembuka lainnya:
== Streams API? [%step] * Real-time stream processing * Stream-like API (map / reduce) * : ** offset commit ** ** **
Header dan snipet kode sumber dengan penyorotan sintaks:
== Kafka Streams API: KStreams- [source,java] ---- StreamsConfig config = ...; // Topology topology = new StreamsBuilder() // ....build(); ----
Dalam proses mempersiapkan laporan, contoh kode demo mengalami perubahan dan peningkatan berulang, oleh karena itu, kesempatan untuk dengan cepat menyalin dan menempelkan "kode mentah" langsung ke slide sangat berharga, memastikan relevansi contoh demo dan tidak khawatir tentang penyorotan sintaksis.
Judul, ilustrasi, dan teks (tata letak pada slide dilakukan di sel-sel tabel AsciiDoctor ):
== Kafka Streams in Action [.custom-style] [cols="30a,70a"] |=== |image::KSIA.jpg[] | * **William Bejeck**, + “Kafka Streams in Action”, November 2018 * Kafka 1.0 |===
Kadang-kadang judul tidak diperlukan, tetapi untuk menggambarkan pemikiran Anda, Anda hanya perlu gambar layar penuh:
[%notitle] == image::swampman.jpg[canvas, size=cover]
Seringkali idenya perlu didukung oleh diagram sederhana, dalam bentuk "kotak yang dihubungkan dengan panah." Untungnya, AsciiDoctor terintegrasi dengan sistem Graphviz , sebuah bahasa yang memungkinkan Anda untuk menggambarkan grafik grafik berdasarkan deskripsi dari simpul dan hubungan di antara mereka. Graphviz perlu dikuasai, tetapi berdasarkan contoh yang ada, ini cukup mudah! Begini 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;} } -----
Jika perlu mengedit tanda tangan pada gambar, mengubah arah panah, dll., Ini dapat dilakukan secara langsung dalam kode presentasi, alih-alih menggambar ulang gambar di suatu tempat dan memasukkannya kembali ke slide. Ini sangat meningkatkan kecepatan kerja pada slide.
Contoh lebih rumit:
== [graphviz, "unstable-update.png"] ----- digraph G { rankdir="LR"; graph [ dpi = 150 ]; u -> r0; u[shape=plaintext; label="linter update\n+ 13 warnings"] r0[shape=point, width = 0] r1 -> r0[ arrowhead = none, label="master branch" ]; r0-> r2 []; b1 -> b4; r1->b1 r1[label="150\nwarnings"] b1[label="± 0\nwarnings"] b4[label="± 0\nwarnings"] b4->r2 r2[label="163\nwarnings", color="red", xlabel=<<font color="red">merge blocked</font>>] {rank = same; u; r0; b4;} } -----
Ngomong-ngomong, bereksperimen dengan Graphviz dan men-debug gambar tidak masalah di halaman online Graphviz .
Akhirnya, jika Anda perlu memasukkan diagram blok, diagram kelas, atau diagram standar lainnya ke slide, maka sistem lain yang terintegrasi dengan AsciiDoctor, PlantUML , dapat datang untuk menyelamatkan . Kolega saya Nikolai Potashnikov menulis posting terpisah tentang kemampuan PlantUML yang sangat luas.
Transformasi proyek presentasi menjadi kode yang disimpan pada sistem kontrol versi memungkinkan untuk mengatur kerja bersama pada presentasi, pertama-tama, untuk memisahkan tugas-tugas membuat konten dan desain. Desain slide (font, latar belakang, indentasi) di RevealJS dijelaskan menggunakan CSS. Keterampilan CSS pribadi saya paling baik disampaikan oleh GIF ini - tetapi tidak menakutkan ketika ada orang yang bekerja dengan CSS jauh lebih gesit dan lebih cepat daripada saya. Hasilnya, ternyata dalam konteks tenggat waktu presentasi yang semakin dekat, kita dapat secara bersamaan bekerja pada file yang berbeda melalui Git dan mengembangkan kecepatan kolaborasi yang tidak mungkin ketika mengirim file .pptx melalui surat.
Buat halaman HTML dengan slide
Sumber teks biasa bagus, tetapi bagaimana Anda mengompilasinya ke dalam presentasi itu sendiri?
AsciiDoctor adalah proyek Ruby dan Anda dapat menjalankannya dengan beberapa cara. Pertama, Anda dapat menginstal bahasa Ruby dan menjalankan asciidoctor secara langsung, yang mungkin paling dekat dengan pengembang Ruby.
Jika Anda tidak ingin terlibat dengan pemasangan Ruby, Anda dapat menggunakan gambar docker asciidoctor / docker-asciidoctor , di mana Anda dapat menghubungkan folder sumber proyek melalui VOLUME dan mendapatkan hasilnya di lokasi yang ditentukan.
Opsi yang saya pilih mungkin terlihat agak tidak terduga, tetapi ini paling nyaman bagi saya sebagai pengembang Java. Itu tidak memerlukan instalasi Ruby atau buruh pelabuhan, tetapi memungkinkan Anda untuk menghasilkan slide menggunakan skrip Maven.
Faktanya adalah bahwa proyek JRuby - implementasi Java dari bahasa Ruby - sangat bagus sehingga memungkinkan Anda untuk menjalankan hampir semua yang dibuat untuk Ruby di mesin Java, dan menjalankan AsciiDoctor adalah salah satu aplikasi JRuby yang paling umum.
Kehadiran asciidoctor-maven-plugin memungkinkan Anda mengumpulkan dokumentasi AsciiDoctor, yang merupakan bagian dari proyek Java (yang kami gunakan secara aktif). Pada saat yang sama, AsciiDoctor dan JRuby diunduh oleh Maven secara otomatis, dan AsciiDoctor dieksekusi di lingkungan JRuby: tidak ada yang perlu diinstal pada mesin! (Kecuali untuk paket graphviz , yang diperlukan jika Anda ingin menggunakan grafik GraphViz atau PlantUML.) Masukkan saja file .adoc Anda ke dalam folder src/main/asciidoc/ . Berikut ini adalah contoh dari slide diagram pengumpulan rumah tangga .
Konversi Slide ke PDF
Meskipun versi HTML dari slide sepenuhnya swasembada, masih diperlukan untuk memiliki versi PDF dari slide. Pertama, itu terjadi bahwa pada beberapa konferensi yang tidak memberikan pembicara dengan kemampuan untuk menghubungkan laptop mereka sendiri, mereka memerlukan slide "ketat dalam format pptx atau pdf", tidak berharap bahwa mereka juga datang dalam HTML. Kedua, ini adalah bentuk yang baik untuk mengirim panitia versi yang tidak berubah dari slide Anda dalam bentuk seperti yang ditunjukkan pada laporan, dalam format PDF untuk publikasi file dalam materi konferensi.
Untungnya, Node.js adalah utilitas decktape yang dibangun atas dasar Puppeteer , sistem otomasi browser Chrome, yang menangani tugas ini. 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 untuk memulai decktape, yang harus datang dengan coba-coba:
resolusi melalui parameter -s harus ditetapkan dengan margin ganda, jika tidak mungkin ada masalah dengan hasil konversi
di URL versi HTML dari presentasi Anda perlu melewati parameter ?fragments=true , yang akan memungkinkan Anda untuk membuat halaman PDF terpisah untuk setiap keadaan antara slide Anda (misalnya, lima halaman untuk lima item daftar, jika mereka ditampilkan satu demi satu). Ini akan memungkinkan penggunaan PDF seperti itu sendiri sebagai presentasi dalam laporan.
Bangun dan terbitkan otomatis di web
Lebih nyaman ketika slide dikumpulkan secara otomatis ketika perubahan masuk ke dalam sistem kontrol versi, dan bahkan lebih nyaman ketika slide yang dikompilasi secara otomatis diposting di Internet untuk penggunaan umum. Slide dari Internet dapat dengan mudah "dimainkan" di depan audiens dari mesin apa pun yang terhubung ke Internet dan proyektor.
Karena kami menggunakan GitHub dalam pekerjaan kami, pilihan alami untuk sistem CI adalah TravisCI , dan untuk hosting presentasi yang sudah jadi - imtqy.com . Gagasan imtqy.com adalah bahwa setiap konten statis yang ditempatkan di cabang gh-pages proyek Anda di GitHub tersedia di < >.gihub.io/< > .
File konfigurasi TravisCI lengkap, yang mencakup kompilasi versi HTML halaman menggunakan Maven, mengonversi ke PDF menggunakan decktape dan mengunggah hasilnya ke cabang gh-pages untuk publikasi di imtqy.com, terlihat seperti ini .
Untuk membangun proyek semacam itu di sisi TravisCI, Anda perlu mengonfigurasi variabel lingkungan
GH_REF - nilai formulir github.com/inponomarev/csa-hbGH_TOKEN - Token akses GitHub. Anda bisa mendapatkannya di GitHub di pengaturan profil Anda, Pengaturan Pengembang -> Token Akses Pribadi. Jika Anda mengunggah presentasi ke repositori publik, maka untuk token ini cukup untuk menentukan satu-satunya tingkat akses "Akses repositori publik".GH_USER_EMAIL / GH_USER_NAME - pasangan nama / surat, atas nama mana dorongan untuk cabang gh-pages akan dilaksanakan.
Dengan demikian, setiap komit dari kode presentasi pada GitHub akan secara otomatis membangun kembali slide dalam format HTML dan PDF dan memuatnya kembali di imtqy.com. (Tentu saja, hanya presentasi yang ingin Anda publikasikan pada akhirnya yang harus diunggah ke imtqy.com.)
Contoh Proyek
Terakhir, ada tautan ke beberapa contoh proyek presentasi dengan skrip Maven khusus dan konfigurasi CI untuk Travis-CI, yang dapat Anda tiru dan gunakan ketika membuat proyek presentasi Anda sendiri:
Selamat tinggal Powerpoint! Saya tidak berpikir saya akan membutuhkan Anda untuk presentasi teknis :-)