Saya tertarik untuk mengubah semua presentasi saya dengan HTML5. Kalau Anda lihat di laman publikasi, saya sudah bereksperimen dengan beberapa. Kali ini, saya menemukan sebuah proyek pembuatan salindia yang cukup modular: Reveal JS.

Dia memiliki fitur yang saya butuhkan: presentasi di peramban, cetak ke PDF, dan sintaksis. Ada juga yang mengembangkan catatan pemresentasi dan skema klien-peladen untuk menghubungkan beberapa perangkat. Tujuan dari sinkronisasi ini untuk tampilan pemresentasi dan tampilan presentasi berbeda. Tetapi, saya jarang menggunakan catatan kaki. Makanya, saya tidak mengejar fitur ini.

Reveal JS cukup mudah dikembangkan. Selain memiliki contoh situs yang menggambarkan penggunaannya, Reveal JS juga menyediakan contoh-contoh penggunaan yang gila di alam sana. Salah satu yang menginspirasi saya adalah The Arab Spring Uprisings Five Years On oleh Council on Foreign Relations.

Modularitas ini yang membuat pengembangan Reveal JS bisa ditambah-tambahi dengan berbagai macam. Tetapi, saya yakin, yang paling penting adalah bagaimana cara memulainya. Apalagi, untuk orang-orang yang tidak terbiasa dengan Node JS, memasang paket-paket Node JS sangat mahal (biaya Internet) dan membingungkan.

Saya akan memulai membangun dasar Reveal JS yang saya gunakan mulai dari nol sampai beberapa modul yang saya rasa perlu. Di akhir tulisan ini, akan ada sebuah cetakan salindia yang siap untuk dibuat.

Paket Dasar

Perhatikan struktur direktori sebagai berikut:

Sesuai dengan contoh dari Reveal JS, hal yang paling dasar cukup menyediakan 4 berkas:

  1. Berkas CSS Reveal JS.
  2. Berkas CSS tematik yang digunakan. Untuk contoh kali ini saya menggunakan tematik Beige.
  3. Berkas Javascript Reveal JS sebagai skrip penjalan.
  4. Berkas HTML sebagai berkas salindia.

Anggap sudah ada di sebuah direktori, mari buat struktur yang cukup:

Unduh tiga berkas dari situs Reveal JS.

Lalu, buat sebuah berkas HTML biasa sebagai kerangka kerja:

Sampai sini, sudah ada presentasi sederhana yang bisa digunakan dengan contoh dua halaman.

Contoh Salindia yang dihasilkan.

Contoh Salindia yang dihasilkan.

Perhatikan bahwa setiap halaman dalam salindia berada di dalam elemen HTML section. Bila ingin membuat laman yang ke bawah, buat section di dalam section. Nanti hasilnya laman dengan panah ke bawah.

Silakan menggunakan elemen HTML di dalam section untuk membuat isi salindia. Beberapa rekomendasi saya:

  • Saya menggunakan elemen H1 untuk membuat judul salindia dan H2 untuk judul laman.
  • Untuk menggunakan poin, gunakan saja elemen UL (unordered list) seperti biasa.

Fitur Pencetakan ke PDF

Untuk mencetak lebih baik, diperlukan dua berkas CSS yang memformat salindia menjadi format untuk dicetak:

Setelah itu, ubah HTML salindia pada elemen HEAD untuk membuat skrip yang sesuai:

Saya membuang konteks yang lain agar tidak bingung Anda mau memasukkan baris elemen SCRIPT di mana.

Setelah ini, ketika mengakses dengan peramban, tambahkan “?print-pdf” (tanpa kutip) pada ujung URL. Tata letak dengan URL tersebut akan terlihat aneh. Namun, bila kita menekan CTRL+P untuk menampilkan dialog pencetakan, salindia akan tercetak dengan baik.

Print presentation to PDF.

Print presentation to PDF.

Dengan ini, salindia yang dibuat bisa diekspor ke PDF.

Skrip Pembantu

Sebelum memasang plugin, tambahkan skrip pembantu Head JS untuk membantu memasang skrip-skrip plugin ke elemen HEAD.

Unduh berkas-berkas seperti biasa.

Tambahkan skrip pembantu sebelum skrip Reveal JS.

Dengan adanya Head JS ini, plugin-plugin bisa dimuat dengan mudah.

Fitur Kode

Saya tahu pasti kebanyakan yang membaca tulisan saya adalah seorang yang biasa mempresentasikan kode. Reveal JS menggunakan Highlight JS, tetapi saya lebih suka Prism JS.

Untuk Prism JS, harus mengunduh secara manual dan menaruhnya di direktori plugin/prism

Tambahkan secara manual dua berkas Prism JS (CSS + Javascript) sehingga direktori tersebut berisi:

Ada dua tempat yang harus ditambahkan.

CSS

CSS diperlukan untuk tematik kode. Ditambahkan di elemen HEAD sehabis berkas CSS tematik.

 

Setelah ini Javascript.

Javascript

Ubah konfigurasi di perintah:

Tambahkan berkas Javascript tersebut:

Contoh Penggunaan

Kode di HTML:

Hasilnya:

Highlight

Highlight

Fitur Markdown

Buat orang-orang yang terbiasa mengisi WIKI, Github Pages, dan sejenisnya, bahasa Markdown lebih sederhana daripada harus mengetik elemen HTML.

Unduh berkas-berkas seperti biasa.

Javascript

Ubah konfigurasi di perintah:

Tambahkan kedua berkas tersebut:

Contoh Penggunaan

Hasilnya:

Created with Markdown

Created with Markdown

Terakhir

Saya lelah. Nanti lanjut (kalau tidak malas). Setidaknya saya sudah memberikan gambaran bagaimana cara menggunakan Reveal JS dan menambahkan plugin tambahan.

Bacaan Lebih Lanjut