Saat ini, ketika helm VR telah menjadi bagian dari realitas kami dan mobil Tesla terbang di luar angkasa, Anda dapat menggunakan semua kekuatan mesin peramban untuk membuat presentasi yang benar-benar interaktif, lintas platform dan penuh gaya, daripada membuat satu set halaman PPTX atau, bahkan lebih buruk lagi, dokumen PDF dengan gaya "bahan ilustrasi untuk penjelasan dan laporan perhitungan".
Sejak 2015, saya telah berusaha menemukan format presentasi yang optimal untuk saya sendiri (selain dari proyek kelulusan). Dan sekarang saya pikir saya hampir berhasil. Semuanya dimulai dengan PowerPoint, dan berakhir dengan kerangka kerja berbasis JavaScript.
Ada beberapa mesin JavaScript yang dapat digunakan untuk membuat presentasi keren: Marp , Reveal , longsor , slide-hacker , slidify , dan lainnya. Di beberapa mesin, Anda dapat menggunakan Markdown, beberapa tertanam dalam IDE, dan beberapa memiliki editor sendiri. Saya sudah mencoba dua mesin pertama.
Sebagai demonstrasi, contoh slide dan video tersedia.
Kedua mesin yang disebutkan di atas mendukung Markdown format teks biasa. Yang pertama, Marp , memungkinkan Anda membuat presentasi dalam IDE-nya sendiri, yang sangat nyaman, tetapi hasilnya masih berupa PDF statis. Yang kedua, Reveal , lebih menarik: dapat digunakan untuk membuat seluruh situs web presentasi - Anda dapat menggunakan kekuatan penuh JavaScript, HTML, dan CSS selain Markdown. Saya sebagian besar akan berbicara tentang Mengungkapkan dalam artikel ini.
Anda dapat melihat evolusi dari presentasi saya di repositori https://github.com/KvanTTT/Presentations .
Sejumlah kecil teks
Audiens Anda tidak akan membaca teks presentasi dari slide, jadi jangan letakkan seluruh paragraf di slide. Bicara dengan audiens. Jika Anda ragu apakah akan meletakkan selembar teks pada slide atau tidak, maka buanglah. Jika perlu, tulis artikel di mana perinciannya akan dijelaskan. Lebih baik menggunakan lebih banyak informasi visual.
Menggunakan metafora itu bagus. Penonton harus dilibatkan sejak awal presentasi dan tetap terjaga. Ini dapat dilakukan dengan bantuan gambar-gambar lucu. Tapi ketahuilah batasannya: kelimpahan lelucon bisa menjengkelkan dan mengganggu.
Desain minimalis dan datar
Salah satu prinsip yang saya pinjam. Sekarang sedang tren, dan saya juga menyukainya. Karenanya, disarankan untuk menggunakan sejumlah kecil warna dasar (tiga hingga lima) saat membuat presentasi.
Akses online
Presentasi harus tersedia dari browser. Dengan demikian, Anda tidak akan takut kehilangan flash drive, menabrak laptop Anda dan kesulitan lain selama presentasi.
Pekerjaan offline
Slide dalam bahasa Inggris
Akses dengan tautan
Tautan yang dapat dibaca
Dari tautan ke presentasi https://kvanttt.imtqy.com/Presentations/2018-05-15-Source-code-analyzers-how-generalizable-are-they/English/index.html berikut ini segera jelas:
- Penulis: kvanttt
- Tanggal publikasi: 2018-05-15
- Format: Presentasi (misalnya, Artikel , Sampel )
- Bahasa: Bahasa Inggris
- Judul: Sumber-kode-analisis-bagaimana-digeneralisasikan-adalah-mereka
- Anda juga dapat merujuk ke halaman mana saja dari presentasi menggunakan tanda nomor
#/5 .
Tema gelap dan terang
Untuk adaptasi terbaik untuk pencahayaan atau suasana hati. Anda juga dapat membuat sendiri.
Anda juga dapat mengubah gaya transisi antar slide.
Integrasi dengan sistem kontrol versi (Git)
GitHub dapat dikonfigurasi sehingga ketika Anda mendorong ke halaman gh-pages atau cabang master , situs tersebut segera diterbitkan pada hosting statis di domain imtqy.com — ini sangat nyaman.
Inilah folder sumbernya: https://github.com/KvanTTT/Presentations/tree/master/2018-05-15-Source-code-analyzers-how-generalizable-are-they
Menggunakan format teks biasa (Penurunan harga)
Penurunan harga membuatnya mudah untuk dijelaskan:
- gaya teks yang berbeda ( miring , tebal ,
dicoret , tautan , kutipan, code snippet ), - heading
- daftar, dipesan dan tidak disusun,
- meja
- spoiler,
- elemen tambahan yang dapat bervariasi tergantung pada implementasinya. Jika perlu, Anda dapat menggunakan tag HTML juga.
Contoh sumber slide # ️ Text fingerprinting with zero-length characters Be careful what you copy <span class="fragment">️ [https://diffchecker.com](https://www.diffchecker.com/M2PvqSXw)</span> <span class="fragment"> Be c•aref•ul wh•at yo•u copy• </span> <aside class="fragment" align="middle">Detail: [habr.com](https://habr.com/post/352950/) | [Medium](https://medium.com/@umpox/be-careful-what-you-copy-invisibly-inserting-usernames-into-text-with-zero-width-characters-18b4e6f17b66) </span> <br> <aside class="notes"> There is another similar funny story with zero-width characters. For example, I have inserted 5 such characters into this string, can you tell? You can check it using the service <https://www.diffchecker.com>. These characters can be used as unique text fingerprints to identify users. Using this method, for example, you can play detective: encode the name of the user in a copied message to understand who leaks some confidential information :) You can find more information about such characters on Habr and Medium. </aside> ---
Catatan slide
Selama presentasi, Anda dapat menekan S dan melihat catatan yang disiapkan dan slide berikutnya. Anda juga dapat mengontrol durasi bicara Anda menggunakan timer. Catatan dapat ditampilkan pada monitor kedua.
Menggunakan emoji
Emoji dapat digunakan untuk mengaitkan slide dengan gambar visual. Sayangnya, mereka masih belum didukung di Habr, jadi Anda tidak akan melihat emoji di judul di atas paragraf ini.
Jpg
Format kompresi lossy, cocok untuk foto dan gambar kompleks dengan gradien dan palet kaya. Buruk untuk gambar dan gambar dengan teks dan tanda. Bagus untuk latar belakang.
PNG
Format kompresi lossless, cocok untuk gambar dengan area homogen besar dan palet warna terbatas. Tidak perlu menggunakannya untuk foto, karena ukuran file akan jauh lebih besar. Bagus untuk tangkapan layar.
Svg
Untuk beberapa alasan, banyak orang lupa tentang SVG, yang memiliki keunggulan sebagai berikut:
- menskalakan gambar ke ukuran berapa pun tanpa kehilangan kualitas;
- integrasi dengan Git (format teks);
- Anda dapat mengubah warna, font dan elemen lain dalam file secara langsung;
- ukuran file kecil.
Didukung oleh semua browser modern - dan bahkan Habr! Sayangnya, itu dapat diunggah ke Habr hanya secara tidak langsung .
Perhatikan bahwa sebagian besar gambar dalam artikel ini dalam format SVG.
Ini adalah bagian dari kode sumber untuk gambar latar belakang SVG dari slide ini <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="478pt" height="601pt" viewBox="0.00 0.00 478.13 601.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 597)"> <title>cfg</title> <polygon fill="white" stroke="none" points="-4,4 -4,-597 474.131,-597 474.131,4 -4,4"/> <g id="node1" class="node"> <title>27</title> <ellipse fill="none" stroke="black" cx="310.039" cy="-575" rx="75.2868" ry="18"/> <text text-anchor="middle" x="310.039" y="-571.3" font-family="Times New Roman,serif" font-size="14.00">name == "admin"</text> </g> <g id="node2" class="node"> <title>33</title> <ellipse fill="none" stroke="black" cx="229.039" cy="-488" rx="81.4863" ry="18"/> <text text-anchor="middle" x="229.039" y="-484.3" font-family="Times New Roman,serif" font-size="14.00">key1 == "validkey"</text> </g>
Menggunakan IDE yang mudah dan sederhana
Misalnya, Visual Studio Code dengan plugins. Pratinjau di sebelah kiri, versi final (render) di kanan atau di browser. Ada plugin pemeriksa ejaan, plugin untuk menghasilkan konten (TOC), tabel format, dan lainnya.
Mudah untuk mencetak teks presentasi
Gratis untuk digunakan
Fitur tambahan
- Slide vertikal: Anda dapat menggulir tidak hanya ke samping, tetapi juga secara vertikal.
- Kemampuan untuk membuat presentasi tanpa menulis kode menggunakan slides.com .
- Kemampuan untuk melihat banyak slide sekaligus untuk navigasi yang mudah.
- Menggunakan berbagai jenis ubin latar belakang, menggunakan video sebagai latar belakang.
- Tampilan slide otomatis.
- Dan beberapa fitur lainnya .
Anda juga dapat bereksperimen dengan versi interaktif.
Presentasi terlihat sederhana dan keren
Kekurangannya
Tentu saja, semuanya memiliki kelemahan, dan pendekatan ini tidak terkecuali:
- Ekspor canggung ke PDF , Anda harus mengedit output. Namun, juga tersedia .
- Tidak ada ekspor ke PPTX .
- Tidak mudah untuk dikuasai, terutama untuk non-programmer dan pengembang non-frontend (idealnya, Anda harus tahu HTML dan CSS ).
- Tidak mudah mengedit. Tetapi Anda dapat beradaptasi dan mengotomatiskannya.
- Emoji tidak ditampilkan sama di mana-mana (misalnya, Anda tidak akan melihat emoji dalam kalimat ini).
- Mesinnya masih mentah.
Kesimpulan
Sepertinya bagi saya bahwa presentasi di masa depan akan seperti ini: interaktif, dalam format situs web yang mudah diedit untuk programmer dan desainer. Mari kita coba mendekatkan masa depan ini!
Omong-omong, artikel juga dapat ditulis menggunakan Git dan Markdown dan di-host di GitHub atau GitLab. Saya akan menulis tentang ini nanti.
Jika Anda memiliki koreksi atau penambahan, silakan tulis komentar Anda di bawah ini. Saya akan mempertimbangkannya dan mungkin memasukkannya dalam artikel.
Sumber artikel tersedia di GitHub - silakan kirim Permintaan Tarik jika Anda menemukan kesalahan. Untuk mengkonversi ke format habr.com, saya menggunakan perpustakaan MarkConv .