3 Alternatif Membuat Slide Presentasi Dengan JavaScript dan HTML5


Oleh Bram (bramanto)



Bram

Code Sayaian

@_bramanto_
https://bramanto.githu...


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 Bram (bramanto) pada 8 Februari 2017 dan telah dibaca sebanyak 4701 kali.
Tag: javascript, html5, presentasi

Beri Jempol · 38 jempol

berlangganan komentar



Komentar:

fromadhana
135
0
· 1 tahun, 7 bulan 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
50
1
· 1 tahun, 6 bulan yang lalu · 0 jempol

keren bos, mungkin perlu dibuatkan artikel mengenai tutorialnya.

Darknur
20
5
· 1 tahun, 5 bulan yang lalu · 0 jempol

wuih, mantab artikelnya, thank you :D

NaufalAlHikam
24
0
· 1 tahun, 3 bulan yang lalu · 0 jempol

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

NaufalAlHikam
24
0
· 1 tahun, 3 bulan yang lalu · 0 jempol

thanks infonya

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

Thanks infonya bang, sangat bermanfaat :).

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

Makasih banyak bang, nice info. Baru tau ane 

santriamatir
9
0
· 3 bulan yang lalu · 0 jempol

mantaplah

fikriroy234
81
0
· 4 minggu yang lalu · 0 jempol

Keren, baru tahu saya

Silahkan masuk untuk menulis artikel atau komentar.




Artikel Lainnya


Bram

10 Maret 2017

15 Tren Data dan Analisis Yang Akan Mendominasi di Tahun 2017

Seiring dengan perkembangan media sosial, teknologi mobile dan cloud computing, analisis dan teknologi data yang terkait, telah mendapatkan sorotan sebagai salah satu hal inti pada era digital ini. Di tahun ...

Lanjutkan membaca

15 menit bacaan



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