Ketika menjalankan sidang tesis kemarin, saya mencoba mencari alternatif perangkat lunak presentasi selain Power Point, karena ingin mempelajari hal baru. Yang pertama kali terlintas ialah menggunakan HTML5 untuk membuat presentasi, karena sebelumnya saya telah pernah melihat beberapa pustaka yang sangat baik untuk hal ini. Setelah melihat-lihat, pilihan akhirnya jatuh ke reveal.js, yang menyediakan pustaka sederhana dan mudah digunakan untuk pembuatan presentasi. Presentasi sidang tesis saya dapat dilihat di sini, dan tulisan ini akan membahas bagaimana cara membuat presentasi sejenis.

Catatan: Seluruh kode yang digunakan dapat diakses pada repositori GitHub berikut.

Persiapan

Sebelum membahas lebih jauh, terdapat dua hal utama yang harus dipersiapkan sebelum membuat presentasi menggunakan reveal.js:

  1. Pengertian akan HTML dan CSS. Tidak perlu pengertian yang mendalam, cukup mengerti bagaimana HTML bekerja saja sudah cukup. Kemampuan CSS sendiri tidak begitu penting kalau tidak ingin mengubah desain dari komponen-komponen standar reveal.js. Komponen standar reveal.js sendiri sudah sangat bagus, jadi pengertian akan HTML saja sudah lebih dari cukup. Jika belum mengerti HTML, silahkan baca tulisan singkat mengenai hal ini di sini.
  2. Reveal.js. Untuk membuat presentasi menggunakan reveal.js, tentunya kita harus memiliki pustakanya terlebih dahulu (doh!). Download reveal.js di sini.

Setelah mendapatkan berkas zip dari reveal.js, lakukan ekstraksi ke dalam sebuah direktori. Pembuatan presentasi akan langsung dilakukan melalui berkas hasil ekstraksi ini. Berikut adalah hasil ekstraksi dari berkas yang di-download.

Berkas pada reveal.js

Hasil ekstraksi ini juga dapat langsung dijalankan untuk melihat hal-hal yang sanggup dilakukan oleh reveal.js:

Presentasi Standar Reveal.js

Tetapi apa menariknya melihat hasil pekerjaan orang? Mari kita mulai buat presentasi kita.

Dasar Pembuatan Presentasi

Untuk memulai pembuatan presentasi, buka berkas index.html dengan teks editor, dan kosongkan seluruh isi dari <body>. Isi dari index.html sampai titik ini adalah seperti berikut:

<!doctype html>
<html lang="en">

    <head>
        <meta charset="utf-8">

        <title>reveal.js - The HTML Presentation Framework</title>

        <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
        <meta name="author" content="Hakim El Hattab">

        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <link rel="stylesheet" href="css/reveal.min.css">
        <link rel="stylesheet" href="css/theme/default.css" id="theme">

        <!-- For syntax highlighting -->
        <link rel="stylesheet" href="lib/css/zenburn.css">

        <!-- If the query includes 'print-pdf', use the PDF print sheet -->
        <script>
            document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
        </script>

        <!--[if lt IE 9]>
        <script src="lib/js/html5shiv.js"></script>
        <![endif]-->
    </head>

    <body>
    </body>
</html>

Sebelum mulai mengisikan membuat presentasi lengkap, mari isikan terlebih dahulu informasi mengenai presentasi, yang disimpan di dalam <head> dan <meta>, dalam potongan kode berikut:

<title>Contoh Presentasi Reveal.Js</title>

<meta name="description" content="Contoh presentasi yang dibuat menggunakan reveal.js">
<meta name="author" content="Alex Xandra Albert Sim">

Tentunya isi dari setiap tag atau atribut content di atas harus diubah sesuai dengan kebutuhan. Selesai mengisikan data di atas, kita harus membuat komponen penampung seluruh elemen presentasi. Adapun komponen-komponen yang dimiliki oleh sebuah presentasi reveal.js dapat dilihat pada gambar berikut:

Komponen reveal.js

Tiga komponen utama pada reveal.js yaitu:

  1. Slide Presentasi. Namanya juga pustaka untuk presentasi, ya pasti ada komponen ini :D
  2. Navigasi. Komponen utama bagi pengguna untuk bergerak di dalam slide. Seperti yang tampak pada gambar, bisa bergerak ke empat arah utama.
  3. Progress Bar. Menunjukkan seberapa jauh kita telah berjalan dari awal presentasi.

Ketiga komponen ini akan secara otomatis dibuat oleh reveal.js, tanpa harus kita perintahkan. Tentunya kita juga dapat menon-aktifkan komponen-komponen tersebut. Pembahasan bagiamana cara menghilangkan komponen tersebut akan dilakukan pada bagian akhir.

Untuk menyederhanakan pembuatan presentasi, reveal.js mengharuskan pembuatan komponen yang menampung ketiga komponen utama reveal.js tersebut. Komponen penampung ini merupakan sebuah <div> dengan class “reveal”. Masukkan komponen tersebut ke dalam <body>:

<body>
    <div id="reveal">
    </div>
</body>

Membuat Slide Presentasi

Sampai di sini kita sudah langsung dapat menambahkan slide presentasi ke dalam penampung. Setiap slide presentasi merupakan komponen <section> yang berada di dalam sebuah <div> (lagi). <div> penampung seluruh slide presentasi harus memiliki class “slides”, seperti berikut:

<body>
    <div class="reveal">
        <div class="slides">
        </div>
    </div>
</body>

Kita kemudian dapat menambahkan sebuah slide baru dengan menambahkan komponen <section>:

<div class="reveal">
    <div class="slides">
        <section>
            <h1>Presentasi Indah</h1>
            <h2>Menggunakan reveal.js</h2>
        </section>
    </div>
</div>

Isi dari <section> yang menampung slide, seperti yang dapat dilihat pada kode di atas, adalah HTML standar. Menggunakan HTML, kita dapat membuat isi slide dalam bentuk apapun secara fleksibel.

Setelah membuat slide, untuk mengaktifkan keseluruhan presentasi, kita perlu menambahkan sedikit kode javascript sebelum penutup dari <body>. Untuk sementara, tidak akan diberikan penjelasan detil mengenai kode yang ditambahkan terlebih dahulu. Penjelasan detil akan diberikan pada tulisan selanjutnya. Berikut adalah kode yang harus ditambahkan:

<script src="lib/js/head.min.js"></script>
<script src="js/reveal.min.js"></script>

<script>

    // Full list of configuration options available here:
    // https://github.com/hakimel/reveal.js#configuration
    Reveal.initialize({
        controls: true,
        progress: true,
        history: true,
        center: true,

        theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
        transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
        // Optional libraries used to extend on reveal.js
        dependencies: [
            { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
            { src: 'plugin/markdown/showdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
            { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
            { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
            { src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
            { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
            // { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
        ]
    });

 </script>

Hasil akhir kode pada bagian ini dapat dilihat di sini. Sampai tahap ini, kita sudah dapat menjalankan index.htl untuk melihat slide pertama dari presentasi yang dibuat. Berikut adalah hasil yang didapatkan sejauh ini:

Slide Pertama

Jika ingin menambahkan slide, kita hanya tinggal menambahkan elemen <section> lagi di dalam <div class="slide">, seperti ini:

<div class="slides">
    <section>
        <h1>Presentasi Indah</h1>
        <h2>Menggunakan reveal.js</h2>
    </section>

    <section>
        <h2>Ini adalah Slide Kedua</h2>
        <p>Slide juga dapat dilengkapi dengan teks!</p>
    </section>

    <section>
        <h2>Teks Panjang</h2>
        <p>
            Membuat presentasi dengan reveal.js ternyata sangat mudah.
            Cukup menambahkan kode HTML sesuai dengan aturan yang telah 
            diberikan, maka segalanya akan dilakukan secara otomatis oleh
            reveal.js. 
        </p>
        <p>
            Tidak sesulit yang dibayangkan, eh?
        </p>
    </section>
</div>

dan kita akan mendapatkan dua slide tambahan. Simpan file dan jalankan untuk melihat tiga slide awal. Jika gagal membuatnya, ambil kode lengkap sampai tahap ini di sini.

Transisi Vertikal

Membuat slide presentasi ternyata sangat mudah. Sejauh ini kita telah berhasil membuat tiga slide, yang ketiga-tiganya saling bersisian (berada di samping slide lain). Bagaimana jika kita ingin bergerak ke bawah dari sebuah slide?

Transisi secara vertikal dapat dilakukan dengan memasukkan <section> di dalam <section>. Untuk lebih jelasnya, misalkan jika kita ingin slide kedua memiliki slide pendukung yang berada di bawah slide tersebut, kita dapat menambahkan kode berikut pada slide kedua:

<section>
    <section>
        <h2>Ini adalah Slide Kedua</h2>
        <p>Slide juga dapat dilengkapi dengan teks!</p>
    </section>
    <section>
        <h3>Anak dari Slide Kedua</h3>
        <p>Slide ini berada di bawah slide kedua.</p>
    </section>
</section>

Hasil yang didapatkan dari penambahan kode seperti di atas adalah urutan slide seperti berikut:

Daftar Slide

Catatan: Anda dapat melihat keseluruhan slide yang telah dibuat seperti pada gambar di atas dengan menekan tombol Esc pada keyboard anda ketika di dalam presentasi.

Pembaca yang jeli akan menyadari bahwa transisi vertikal ini pada dasarnya merupakan slide pendukung dari slide utama, karena ketika berada pada slide di bawsah kita dapat langsung bergerak ke slide selanjutnya dengan menekan panah kanan. Tujuan utama pembuatan transisi vertikal memang hal ini: slide pada baris kedua dan seterusnya merupakan slide yang biasanya digunakan untuk menjelaskan slide yang bersangkutan pada baris pertama. Karena hal ini juga maka kode yang dibutuhkan ialah <section> di dalam <section>, untuk menunjukkan bahwa kedua slide tersebut berada di bawah satu slide keseluruhan yang sama.

Kode sampai di titik ini dapat diakses di sini.

Penutup

Dasar-dasar pembuatan presentasi menggunakan reveal.js telah dijelaskan pada tulisan ini, meskipun berbagai fitur lanjutan seperti animasi, pemilihan dan pembuatan tema, penggantian font / warna, serta menghubungkan satu slide ke slide lainnya belum kita bahas.

Pembahasan memang sengaja disederhanakan, agar pembaca dapat langsung melakukan praktek dan bermain-main dengan reveal.js. Tulisan-tulisan selanjutnya akan memberikan tambahan informasi mengenai reveal.js, agar pembaca dapat membuat presentasi yang lebih indah lagi.

PS. Jika sama sekali tidak ingin menuliskan kode, anda juga dapat menggunakan website berikut (rvl.io) untuk membuat presentasi reveal.js.

comments powered by Disqus

Daftar Isi