Presentasi yang unik dan menarik boleh dibilang akan menambah faktor percaya diri dan suksesnya acara yang dibawakan oleh si pembawa presentasi tersebut. Karena dengan kita membuat presentasi yang unik maka akan menambah kesan jika kita memang serius terhadap materi atau esnsi yang akan kita bawakan alias tidak asal - asalan.
Kalau pada umumnya kita mengenal aplikasi presentasi seperti Microsoft Power Point, kali ini saya akan coba ulas mengenai presentasi berbasis web menggunakan Library Reveal.js. Presentasi ini juga saya terapkan ketika saya menghadapi Sidang Tugas Akhir / Skripsi pada Agustus 2014 yang lalu. Penasaran seperti apa presentasi menggunakan web langsung intip aja ke TKP gan :)
Resource Original of Reveal.js
Kalau pada umumnya kita mengenal aplikasi presentasi seperti Microsoft Power Point, kali ini saya akan coba ulas mengenai presentasi berbasis web menggunakan Library Reveal.js. Presentasi ini juga saya terapkan ketika saya menghadapi Sidang Tugas Akhir / Skripsi pada Agustus 2014 yang lalu. Penasaran seperti apa presentasi menggunakan web langsung intip aja ke TKP gan :)
Resource Original of Reveal.js
Berkenalan dengan Reveal.js
Reveal.js merupakan salah satu library open source yang dibuat dan dikembangkan menggunakan bahasa pemrograman HTML5, CSS3 dan Javascript. Sebagai user atau pengguna, nantinya kita tidak perlu mengotak - atik atau membongkar source code HTML atau CSS nya.
Untuk cara penggunanannya sendiri cukup mengikuti prosedur yg sudah distandarkan dalam penulisan dan memanggil selector yang sudah disediakan untuk mendapatkan hasil sesuai kebutuhan. Namun untuk hasil yang lebih maksimal agar hasilnya tidak terlihat standar setidaknya kita tahu konsep dari HTML maupun CSS seperti pemilhan theme, warna background, jenis font, penempatan dan pemanggilan gambar, penempatan slide dan berbagai elemen lainnya.
Persiapan dan Installasi Reveal.js
Sebelum menjalankan file presentasi ini di web browser yang rekan gunakan Install dan aktifkan terlebih dahulu aplikasi Xampp yang di dalamnya terdapat Apache Server guna menjalankan aplikasi web.
Jika belum silahkan bisa anda download untuk versi terbaru nya melalui link berikut ini. Kebetulan ketika saya membuat tulisan ini saya menggunakan XAMPP versi 1.8.3. Pastikan sebelum anda menegelola dan membuat database anda sudah mengaktifkan 2 fungsi utama dari aplikasi XAMPP yakni Module Apache Server dan Mysql dengan cara mengklik tombol start.
Jika belum silahkan bisa anda download untuk versi terbaru nya melalui link berikut ini. Kebetulan ketika saya membuat tulisan ini saya menggunakan XAMPP versi 1.8.3. Pastikan sebelum anda menegelola dan membuat database anda sudah mengaktifkan 2 fungsi utama dari aplikasi XAMPP yakni Module Apache Server dan Mysql dengan cara mengklik tombol start.
Jika sudah, download satu berkas .zip library Reveal.js melaui Link Github Berikut. Extract dan letakkan file tersebut ke direktori file tempat aplikasi xampp berada pada umumnya berada di C://xampp/htdocs/ Bagi yang sudah sering otak atik atau bikin aplikasi web pasti udah ga asing lagi dengan alamat tersebut. Saya asumsikan disini anda juga sudah paham mengenai bahasa pemrograman html maupun css walaupun sedikit sama kaya saya :D
Baik pertama buka editor yang anda gunakan untuk ngoding. Kalau saya pribadi lebih prefer menggunakan Netbeans atau Sublime Text. Buka pada file index.html, karena dalam pembuatan presentasi berbasis web ini kita hanya menggunakan satu file tersebut. Sebelum saya menjelaskan lebih jauh mungkin anda bisa melihat - lihat bagaimana susunan struktur source code nya. Tapi jika masih belum paham mungkin bisa saya pandu melalui beberapa potongan source code di bawah ini.
Pembuatan Slide
Langkah pertama perhatikan letak kode <body>....</body>. Karena jika kita meletak kode berikut diluar <body> maka kode yg kita ketikkan tidak akan dijalankan. Kemudian untuk menambahkan sebuah slide cukup dengan menambahkan kode <section>....</section> di dalam sebuah <div> dengan class reveal dan class slides. Sebagai contoh :
</body>
<div class="reveal">
<div class="slides">
// Slide Pertama
<section>
<h1>Reveal.js</h1>
<h3>HTML Presentations Made Easy</h3>
<p>
<small>Created by <a href="http://hakim.se">Hakim
El Hattab</a> / <a href="http://twitter.com/hakimel">
@hakimel</a></small>
</p>
</section>
// Slide Kedua
<section>
<h2>Heads Up</h2>
<p>
reveal.js is a framework for easily creating beautiful
presentations using HTML. You'll need a browser with
support for CSS 3D transforms to see it in its full
glory.
</p>
</section>
</div>
</div>
</body>
Pembuatan Slide Transisi Vertikal
Jika kode diatas dijalankan maka slide yg dibuat arahnya ke samping yakni ke kanan atau ke kiri (horizontal), lalu bagaimana jika kita menginginkan slide yang arahnya ke bawah atau vertikal? Transisi vertikal ini dapat dibentuk dengan cara memasukkan tag <section>.... </section> di dalam tag <section>.
Pada umumnya jika ada konten presentasi yang sejenis atau setipe maka kita bisa menggunakan cara ini. Selain itu slide dengan transisi vertikal ini juga bisa digunakan untuk mendukung slide utama. Untuk lebih jelasnya silahkan lihat penggalan source code berikut :
Pada umumnya jika ada konten presentasi yang sejenis atau setipe maka kita bisa menggunakan cara ini. Selain itu slide dengan transisi vertikal ini juga bisa digunakan untuk mendukung slide utama. Untuk lebih jelasnya silahkan lihat penggalan source code berikut :
// Slide Ketiga
<section>
// Slide Ketiga Utama
<section>
<h2>Vertical Slides</h2>
<p> Slides can be nested inside of other slides,
<a href="#" class="navigate-down">down</a>. </p>
</section>
// Slide Ketiga Ke Bawah
<section>
<h2>Basement Level 1</h2>
<p>Press down or up to navigate.</p>
</section>
</section>
Mengganti Background Slide
Jika anda bosan dengan tampilan background yang itu-itu saja anda bisa mengganti dengan warna maupun dalam bentuk gambar. Anda bisa menambahkan tag section dengan class data-background. Contohnya :
// Background Warna
<section data-background="#kodehtmlwarna">
</section>
// Background Gambar
<section data-background="http://alamatgambar.png">
</section>
Mengganti Tema Slide
Selain background, tema dalam reveal.js ini pun bisa kita sesuaikan. Untuk jenis tema yang tersedia silahkan anda cek pada folder /css/theme/ masih di dalam file reveal.js yang anda download di awal tadi. Isinya kurang lebih sebagai berikut.
Penerapannya ialah pada kode yg terletak di file index.html perhatikan kode diantara tag <head>....</head>. Di dalamnya terdapat kode pemanggilan css eksternal.
Penerapannya ialah pada kode yg terletak di file index.html perhatikan kode diantara tag <head>....</head>. Di dalamnya terdapat kode pemanggilan css eksternal.
<link rel="stylesheet" href="css/theme/default.css" id="theme">
Zoom dan Full Screen Mode
Sebagai tambahan apabila ingin melihat keseluruhan slide yang dibuat, rekan bisa menekan tombol ESC pada keyboard. Untuk full screen mode pada web browser yang anda gunakan silahkan tekan tombol F11 pada keyboard.
Pada dasarnya apa yang saya tulis diatas ialah beberapa hal dasar untuk pembuatan presentasi menggunakan library Reveal.js. Jika dijabarkan masih banyak lagi yang perlu dituliskan namun disini saya menyerahkan kepada rekan - rekan semua untuk bereksperimen sendiri.
Karena secara garis besar cara penggunaan alias panduannya sudah tertuang di dalam index.html bawaan. Jika anda ingin melihat referensi presentasi dengan Reveal.js yang sudah dibuat, mungkin bisa melihat melalui link sumber asli atau yang sudah saya modif. Ada yang belum jelas? Mari kita diskusikan melalui kotak komentar dibawah ini. Selamat Mencoba.
