Membuat Presentasi Indah menggunakan HTML5 dan Reveal.js


Assalamualaikum, semoga dalam keadaan sehat selalu pengunjung setia blog sandal jepit mas pram. Sebelumnya sudah dibahas apa itu html5 dan mengapa harus menggunakan html5, kali ini saya akan mengkombinasikan html5 dengan reveal.js. Apa itu reveal.js? Reveal.js adalah sebuah library atau pustaka yang menyediakan dan mudah digunakan untuk pembuatan presentasi. Reveal.js ini sudah saya gunakan sewaktu saya seminar hasil dan sidang komprehensif skripsi beberapa waktu kemarin. Bagaimana menggunakan reveal.js? Untuk menggunakan reveal.js cukuplah mudah jika anda sudah mengetahui dasar html5 dan css. Berikut ini untuk lebih jelasnya cara menggunakannya atau membuat presentasi menggunakan reveal.js.

  • Download library Reveal.js disitus resminya | disini
  • Jika sudah anda download, ekstrak file yang anda download tadi.reveal
  • Silahkan buka file index.html menggunakan notepad, notepad++, dreamweaver, visual studio atau media lain yang biasa anda gunakan. Jika anda ingin melihat tampilan default reveal.js maka anda buka file index.html di web browser.
  • Dasar pembuatan presentasi di reveal.jsreveal1
  • Sebelum anda menggunakannya, mari isikan terlebih dahulu informasi mengenai presentasi, yang disimpan di dalamdan, dalam potongan kode berikut:
    reveal2
  • 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.
    1. Slide Presentasi. Namanya juga pustaka untuk presentasi, ya pasti ada komponen ini 😀
    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.
  • Selanjutnya jika ingin menambahkan slide, kita hanya tinggal menambahkan elemen
    lagi di dalam

    , seperti ini:reveal4
  • Nah, untuk pembuatan presentasi sederhana lebih lanjut silahkan edit file index.html yang sudah saya buat [disini]. Anda bisa mengembangkannya sesuai kreatifitas dan kemauan anda.

Download tutorial | PDF : Download

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s