Membuat Slide Presentasi Dengan HTML, CSS dan JavaScript


Membuat slide presentasi tidak melulu harus menggunakan Power Point! Perkembangan teknologi yang begitu pesat membuat kita bisa membuat slide presentasi dengan banyak tools. Ada Google Slide, bahkan kita bisa Membuat Slide Presentasi Dengan HTML, CSS dan JavaScript.

.

Sejak bekerja di Kampung Marketer yang merupakan lembaga pendidikan dan pemberdayaan, saya kadang harus melakukan presentasi tentang materi-materi website. Ya, di Kampung Marketer kami memang rutin melakukan sharing knowledge bareng. Masalahnya, saya tidak terlalu familiar menggunakan power point. Itulah kenapa kemudian saya membuat artikel cara membuat slide presentasi menggunakan HTML, CSS dan JavaScript ini.

Mungkin jika Anda adalah seorang mahasiswa/i atau pekerja yang sering berurusan dengan dengan pemaparan tugas, materi ataupun kebutuhan meeting tentunya tidak asing dengan kegiatan presentasi? Cara membuat slide presentasi menggunakan HTML, CSS dan JavaScript ini bisa menjadi alternatif buat Anda. Anda mungkin bisa tampil beda dari yang lain yang menggunakan Microsoft Office Power Point.

Ya, dengan perkembangan teknologi informasi yang canggih pembuatan slide presentasi dapat dibuat dengan menggunakan teknologi berbasis web. Salah satunya menggunakan kombinasi HTML, CSS dan JavaScript.

Meskipun judulnya adalah membuat slide presentasi menggunakan HTML, CSS dan JavaScript, tapi disini saya tidak akan membahas kode-kode baik itu HTML apalagi JavaScript. Tapi disini saya mau menunjukkan beberapa tools yang akan mempermudah kita untuk membuat slide presentasi menggunakan HTML, CSS dan JavaScript. Tapi,, tentu kalau Anda ingin menggunakannya Anda perlu memahami tentang HTML, CSS dan JavaScripts. Atau lebih tepatnya HTML saja tidak masalah. Dan berikut ini alternatif yang dapat Anda coba sebagai pengganti Power Point.

 

Reveal.js

Reveal.js adalah sebuah framework presentasi berbasis HTML yang dapat dijalankan pada web browser. Reveal.js bisa menjadi alternatif untuk Anda dalam membuat slide yang interaktif dan cantik. Beberapa fitur yang ada di Reveal.js:

  • Transisi vertical
  • Transisi horizontal
  • Transisi background
  • Tampilan responsive
  • Mendukung markdown
  • Fragment styles
  • Berbagai tema menarik
  • Penulisan code yang cantik
  • Marvelous list
  • Fantastic ordered list
  • Tabel tabular
  • Pembuatan kutipan
  • Speaker notes
  • Export ke format pdf

Untuk bisa menggunakan Reveal.js ini, Anda setidaknya harus memahami konsep dasar dari HTML dan CSS. Tapi jangan khawatir, buat Anda yang belum paham dapat langsung menggunakan editor online pada halaman ini.

Reveal.js bisa menjadi pilihan terbaik buat Anda yang menyukai tampilan yang sederhana namun informatif. Untuk dokumentasi lengkapnya teman-teman coder dapat mengunjungi langsung di halaman ini.

 

Deck.js

Deck.js adalah sebuah library JavaScript yang bisa Anda gunakan untuk membangun presentasi berbasis HTML modern. Deck.js berjalan cukup fleksibel dengan penggunaan CSS dan JavaScript yang dapat disesuaikan dengan keinginan kita.

Selain itu Deck.js juga menyediakan template dan tema untuk Anda yang belum familiar dengan HTML dalam membangun slideshow. Beberapa ekstensi, tema dan proyek-proyek presentasi terbaik dapat dilihat di wiki Deck.js. Deck.js memerlukan library tambah seperti JQuery dan Modernizr. Untuk dokumentasi lengkapnya Anda dapat mengunjunginya langsung di halaman ini.

 

Impress.js

Next, ada Impress.js. Impress.js merupakan framework berbasis CSS3 dengan mengandalkan transformasi dan transisi pada web browser modern. Fitur-fitur yang tersedia pada Impress.js juga sangat lengkap seperti:

  • Transisi animasi dan atribut warna yang beragam.
  • Konsol speaker dengan catatan, preview dan timer.
  • Progress bar yang dapat memberitahu posisi slide berada.
  • Versi bahasa arab, seperti tulisan yang dibaca dari kanan.
  • Penggunaan format audio dalam HTML5 yang dapat disisipkan pada slide.
  • Mengkonversi ke dalam format pdf.
  • Membuat slideshow sederhana dengan slide diatur pada tepi poligon yang beraturan.
  • Mendukung format markdown untuk pembuatan slide yang cepat.

Untuk dokumentasi lengkapnya teman-teman coder dapat mengunjungi langsung di halaman ini.

 

Kesimpulan

Nah, itu dia cara Membuat Slide Presentasi Dengan HTML, CSS dan JavaScript. Jadi disini saya tidak memberikan tutorial bagaimana Membuat Slide Presentasi Dengan HTML, CSS dan JavaScript dari nol. Tapi kita menggunakan framework yang sudah tersedia. Jadi kita tinggal mengedit sesuai dengan kebutuhan kita saja.

Dan sebagai penutup, saya mengajak Anda yang suka nulis atau punya blog, silakan bisa menulis juga di Globhy.com. Tinggal buat akun dan mulai nulis artikel Anda. Akhirnya, semoga bermanfaat dan sampai jumpa di artikel selanjutnya...