Presentasi Bagus dengan Reveal JS

Pada mulanya, saya akan membuat presentasi dengan PowerPoint-nya Microsoft. Namun, saya mempertimbangkan bahwa presentasi nanti akan disaksikan oleh para mahasiswa. Jadi, selain ingin menunjukkan bahwa kita tidak tergantung kepada Microsoft, saya juga bermaksud agar alternatif-alternatif untuk melakukan presentasi bisa dikenal oleh mahasiswa. Dan alhamdulillah, tadi ketika mempresentasikannya, ada yang bertanya dengan apa membuatnya. “Reveal Je-Es,” jawab saya. Apa itu?

Reveal JS merupakan framework HTML untuk membuat bahan tayang (baca: slide presentasi)  online. Sebenarnya tidak online pun tidak mengapa, karena yang dibutuhkan hanya web browser untuk menampilkan slide yang kita buat. Hanya, ada beberapa fitur yang tidak bisa dijalankan, salah satunya adalah fitur catatan penyaji atau speaker notes.

Penasaran? Silakan simak demo-nya pada halaman berikut: Live demo with Reveal. Nah, sementara saya, mencoba membuatnya di halaman ini: Pemrograman terstruktur.

Bagaimana, bagus bukan?

Kalau begitu, langsung saja kita praktikkan ya…

  1. Download master-nya di laman github milik Hakim El Hattab, seorang Swedia, di laman berikut: https://github.com/hakimel/reveal.js
  2. Ekstrak master tersebut, dan selanjutnya buat file HTML sebagai cikal bakal slide presentasi kita. Kalau saya, biasanya cukup menyalin file index.html dengan nama file yang lain, sesuai kebutuhan dan kepatutan.
  3. Buat slide presentasinya dengan cara mengutak-atik kode HTML dari file yang sudah kita buat tersebut. Harus diingat, untuk membuat slide-slide tersebut harus mengikuti aturan-aturan yang ada.

Aturan-aturan Membuat Slide

  1. Menambah halaman baru
    <section>
       <p>Ini halaman baru</p>
    </section>
  2. Menambahkan sub halaman baru, navigasinya dengan tombol panah ke atas atau bawah
    <section>
       <section>
          <h2>Ini halaman atas</h2>
       </section>
       <section>
          <h3>Ini sub halamannya</h3>
       </section>
  3. Mengatur background slide
    Gambar: <section data-background="image.png">
    Tiled background: <section data-background="image.png" data-background-repeat="repeat" data-background-size="100px">
    Background video: <section data-background-video="video.mp4,video.webm">
  4. Transisi background, contoh
    <section data-background-transition="zoom">
  5. Membuat catatan
    <section>
       <aside class="notes">
         Catatan di sini
       </aside>
    </section>
  6. Membuat item tampil satu per satu pada satu halaman
    <section>
       <h2>Yang ini langsung terlihat ketika halaman tampil</h2>
       <h3 class="fragment">Yang ini tampil setelah panah ke kiri atau ke bawah di tekan</h3>
    </section>
  7. Memodifikasi style gambar default
    <section>
     <h2>Penilaian</h2>
     <img style="border:0;box-shadow:none;background:none;" src="images/penilaian.png">
    </section>
  8. Membuat quotation atau kutipan aka sitasi
    <blockquote cite="" style="font-size:48px;line-height:2">
     &ldquo; kutipan Anda di sini &rdquo;
    </blockquote>
  9. Selebihnya, silakan memodifikasi kode HTML maupun CSS-nya sesuai kebutuhan.

Shortcut Berguna

  • Tekan “S” untuk menampilkan catatan penyaji (speaker notes). Fitur ini hanya bisa berjalan dengan baik jika Anda menggunakan webserver, meskipun hanya lokal (localhost).
    catatan
  • Page down, page up, panah atas, panah bawah, panah kiri, dan panah kanan digunakan untuk navigasi
  • Tombol “O” atau Escape (Esc) untuk menampilkan keseluruhan slide
  • Tombol Backspace untuk kembali ke slide yang ditampilkan sebelumnya
  • Tombol Home untuk menampilkan slide pertama
  • Tombol End untuk menampilkan slide terakhir
  • Tekan dan tahan tombol Alt kemudian klik kiri pada slide untuk melakukan zoom-in atau zoom-out
  • Tekan “B” atau titik (.) untuk membuat layar menjadi hitam. Biasanya teknik ini dipakai agar audiens fokus pada pembicara, bukan pada slidenya.
  • Tombol “F” untuk fullscreen dan tekan Escape untuk mengembalikannya menjadi tidak fullscreen.

Nah, selanjutnya untuk memperkaya slide kita, silakan dipelajari contoh-contoh yang sudah ada di laman ini: https://github.com/hakimel/reveal.js/wiki/Example-Presentations.

Selamat mencoba, selamat berkarya!

Pos ini dipublikasikan di Akademik, Developer dan tag , , , . Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s