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:
.
├── css
│ ├── reveal.css
│ └── theme
│ └── beige.css
├── index.html
└── js
└── reveal.js
Sesuai dengan contoh dari Reveal JS, hal yang paling dasar cukup menyediakan 4 berkas:
- Berkas CSS Reveal JS.
- Berkas CSS tematik yang digunakan. Untuk contoh kali ini saya menggunakan tematik Beige.
- Berkas Javascript Reveal JS sebagai skrip penjalan.
- Berkas HTML sebagai berkas salindia.
Anggap sudah ada di sebuah direktori, mari buat struktur yang cukup:
mkdir -p js css/theme
Unduh tiga berkas dari situs Reveal JS.
wget https://raw.githubusercontent.com/hakimel/reveal.js/master/css/reveal.css -O css/reveal.css wget https://raw.githubusercontent.com/hakimel/reveal.js/master/css/theme/beige.css -O css/theme/beige.css wget https://raw.githubusercontent.com/hakimel/reveal.js/master/js/reveal.js -O js/reveal.js
Lalu, buat sebuah berkas HTML biasa sebagai kerangka kerja:
cat > index.html << EOF
<html>
<head>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/beige.css">
</head>
<body>
<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>Slide 2</section>
</div>
</div>
<script src="js/reveal.js"></script>
<script>
Reveal.initialize();
</script>
</body>
</html>
EOF
Sampai sini, sudah ada presentasi sederhana yang bisa digunakan dengan contoh dua halaman.
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:
mkdir -p css/print wget https://raw.githubusercontent.com/hakimel/reveal.js/master/css/print/pdf.css -O css/print/pdf.css wget https://raw.githubusercontent.com/hakimel/reveal.js/master/css/print/paper.css -O css/print/paper.css
Setelah itu, ubah HTML salindia pada elemen HEAD untuk membuat skrip yang sesuai:
<html>
<head>
<!-- ... -->
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
<!-- ... -->
</head>
<body>
<!-- ... -->
</body>
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.
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.
mkdir -p lib/js wget https://raw.githubusercontent.com/hakimel/reveal.js/master/lib/js/head.min.js -O lib/js/head.min.js
Tambahkan skrip pembantu sebelum skrip Reveal JS.
<html>
<head>
<!-- ... -->
</head>
<body>
<!-- ... -->
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<!-- ... -->
</body>
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
mkdir -p plugin/prism
Tambahkan secara manual dua berkas Prism JS (CSS + Javascript) sehingga direktori tersebut berisi:
plugin/prism/ ├── prism.css └── prism.js
Ada dua tempat yang harus ditambahkan.
CSS
CSS diperlukan untuk tematik kode. Ditambahkan di elemen HEAD sehabis berkas CSS tematik.
<html>
<head>
<!-- ... -->
<link rel="stylesheet" href="css/theme/beige.css">
<link rel="stylesheet" href="plugin/prism/prism.css">
<!-- ... -->
</head>
<body>
<!-- ... -->
</body>
Setelah ini Javascript.
Javascript
Ubah konfigurasi di perintah:
Reveal.initialize();
Tambahkan berkas Javascript tersebut:
Reveal.initialize({
dependencies: [
{ src: 'plugin/prism/prism.js' },
]
});
Contoh Penggunaan
Kode di HTML:
<section>
<h2>Slide 3</h2>
<pre><code class="language-html" data-trim data-noescape>
<pre><code class="language-bash">$ echo Test </code></pre>
</code></pre>
</section>
Hasilnya:
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.
mkdir -p plugin/markdown wget https://raw.githubusercontent.com/hakimel/reveal.js/master/plugin/markdown/markdown.js -O plugin/markdown/markdown.js wget https://raw.githubusercontent.com/markedjs/marked/master/marked.min.js -O plugin/markdown/marked.js
Javascript
Ubah konfigurasi di perintah:
Reveal.initialize();
Tambahkan kedua berkas tersebut:
Reveal.initialize({
dependencies: [
{ src: 'plugin/prism/prism.js' },
{ src: 'plugin/markdown/marked.js' },
{ src: 'plugin/markdown/markdown.js' },
]
});
Contoh Penggunaan
<section data-markdown><script type="text/template"> ## Slide 4: Markdown ```bash echo "Hello World!" ``` </script></section>
Hasilnya:
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.
