3 Alternatif Membuat Slide Presentasi Dengan JavaScript dan HTML5


Oleh Bramanto (bramanto)



Bramanto

Full-time Dreamer | Part-time Developer | Student

@_bramanto_
http://bramanto.com


Sebagai seorang mahasiswa/i atau pekerja yang sering berurusan dengan dengan pemaparan tugas, materi ataupun kebutuhan meeting tentunya tidak asing dengan kegiatan presentasi. Umumnya kegiatan persentasi tersebut didukung oleh perangkat lunak seperti Microsoft Power Point yang merupakan salah satu produk office dari Microsoft. Dengan perkembangan teknologi informasi yang canggih pembuatan slide presentasi dapat dibuat dengan menggunakan teknologi berbasis web. Salah satunya menggunakan kombinasi JavaScript dan HTML5. Berikut ini alternatif yang dapat teman-teman coder coba sebagai penunjang kegiatan presentasi baru dengan teknologi masa kini.

1. Reveal.js
Reveal.js merupakan sebuah framework presentasi berbasis HTML yang dapat dijalankan pada web browser. Reveal.js dapat mendukung teman-teman coder untuk membuat slide yang interaktif dan cantik. Dengan berbagai fitur diantaranya seperti: 

  • Transisi vertical
  • Transisi horizontal
  • Transisi background
  • Tampilan yang responsive terhadap berbagai device
  • 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 menggunakan Reveal.js sebagai pendukung presentasi, teman-teman setidaknya harus sudah memahami konsep dasar CSS dan HTML. Namun tidak perlu khawatir, bagi teman-teman yang belum paham dapat langsung melakukannya di editor online pada halaman ini. Reveal.js dapat menjadi pilihan terbaik untuk teman-teman coder yang menyukai tampilan sederhana namun informatif. Untuk dokumentasi lengkapnya teman-teman coder dapat mengunjungi langsung di halaman ini.

2. Impress.js
Impress.js merupakan framework berbasis CSS3 dengan mengandalkan transformasi dan transisi pada web browser modern. Impress.js terinspirasi dari sebuah ide di balik prezi.

Fitur-fitur yang tersedia pada Impress.js juga sangat lengkap seperti:

  • Mendukung transisi animasi dan atribut warna yang beragam.
  • Mendukung konsol speaker dengan catatan, preview dan timer.
  • Memiliki progress bar yang dapat memberitahu posisi slide berada.
  • Mendukung versi bahasa arab, seperti tulisan yang dibaca dari kanan.
  • Mendukung 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


3. Deck.js
Deck.js merupakan sebuah library JavaScript yang digunakan untuk membangun presentasi berbasis HTML modern. Deck.js berjalan cukup fleksibel dengan penggunaan CSS dan JavaScript yang dapat di kustomisasi.

Deck.js juga menyediakan template dan tema untuk pemula HTML dalam membangun slideshow yang standar. Beberapa ekstensi, tema dan proyek-proyek presentasi terbaik dapat dilihat di wiki Deck.js. Berbeda dengan Reveal.js dan Impress.js sendiri, Deck.js memerlukan library tambah seperti JQuery dan Modernizr. Untuk dokumentasi lengkapnya teman-teman coder dapat mengunjunginya langsung di halaman ini.

Itulah beberapa alternatif membuat presentasi dengan JavaScript dan HTML5. Buat teman-teman coder yang ingin tampil beda saat membawakan presentasi, tidak ada salahnya mencoba hal baru ini. Selamat Mencoba! Tetap Berkarya! Happy Coding!
 

Level artikel ini adalah advanced.
Dituliskan oleh Bramanto (bramanto) pada 8 Februari 2017 dan telah dibaca sebanyak 12880 kali.
Tag: javascript, html5, presentasi

Beri Jempol · 61 jempol

berlangganan komentar





Komentar:

fromadhana
135
0
· 7 tahun yang lalu · 0 jempol

baru tau kalo bisa bikin materi presentasi selain dari power point. thank you bram. i'll try to learn it. 

Somo
100
1
· 6 tahun, 11 bulan yang lalu · 0 jempol

keren bos, mungkin perlu dibuatkan artikel mengenai tutorialnya.

Darknur
20
6
· 6 tahun, 10 bulan yang lalu · 0 jempol

wuih, mantab artikelnya, thank you :D

NaufalAlHikam
24
0
· 6 tahun, 8 bulan yang lalu · 0 jempol

Wah kirain Impress JS yang no 1 wkwk ternyata disini diduakan :v

NaufalAlHikam
24
0
· 6 tahun, 8 bulan yang lalu · 1 jempol

thanks infonya

DaebeN
300
2
· 6 tahun, 6 bulan yang lalu · 0 jempol

Thanks infonya bang, sangat bermanfaat :).

Luthfi_Azzammi
100
2
· 6 tahun, 6 bulan yang lalu · 0 jempol

Makasih banyak bang, nice info. Baru tau ane 

santriamatir
9
0
· 5 tahun, 8 bulan yang lalu · 0 jempol

mantaplah

fikriroy234
160
0
· 5 tahun, 6 bulan yang lalu · 0 jempol

Keren, baru tahu saya

crystal.tkd
17
0
· 5 tahun, 2 bulan yang lalu · 0 jempol

Ini semacam prezi bukan ya?

mzaini30
33
0
· 5 tahun, 1 bulan yang lalu · 0 jempol

Tapi kayaknya tetap lebih enak pakai Power Point deh.

Bays
0
0
· 4 tahun, 10 bulan yang lalu · 0 jempol

caranya gmn nih apa langsung dipanggil gitu JS nya lalu isinya presentasi di htmlnya?

seorangkucing
118
0
· 3 tahun, 1 bulan yang lalu · 0 jempol

every day we learn something new, kaya ini contohnya. thanks bang!

Silahkan masuk untuk menulis artikel atau komentar.






Artikel Lainnya


Irwansyah

6 Februari 2017

Yuk belajar Kriptografi atau Enkripsi lebih mudah dengan software "CrypTool"

Hallo coder, selamat malam.... 

pada kesempatan kali ini saya ingin membahas tentang bagaimana belajar Kriptografi/Enkripsi lebih mudah dengan program "CrypTool". yukkkk simak artikelnya .... ^.^

Bagi para coders atau praktisi IT ...

Lanjutkan membaca

5 menit bacaan



Musliadi

5 Januari 2017

Bagaimana Saya Belajar Code ?

Pada kali ini saya ingin berbagi tentang bagaimana saya belajar code. Sebenarnya bisa dibilang saya juga masih termasuk programmer pemula, tapi menurut saya hal itu tidak menjadi penghalang bagi saya ...

Lanjutkan membaca

26 menit bacaan · beginner