Go! Presentasi Pakai Framework HTML, Reveal.js!

Posted by : Ulil Amri Wednesday, September 18, 2013

Salah satu faktor kesuksesan presentasi seseorang adalah presentasi yang menarik. Biasanya kita buat presentasi pakai Ms.Power Point, bahkan sekarang versi 2013 lebih menarik. Tapi tidak salahnya kita coba "something new" untuk presentasi yang lebih baik. Setidaknya be a different lah dari yang lain.

Langsung saja, tidak perlu pusing-pusing, kita tidak perlu untuk membuat sebuah slide presentasi, karena sudah ada tools yang disediakan oleh si developer, dan kita bisa ubah sesuai dengan keinginan kita. Ini dibuat dengan HTML5 plus CSS dan Javascript.

So, kita cuman butuh file html berikut, silahkan edit.

<!doctype html>
<html lang="en"> 
<head>
 <meta charset="utf-8">
 <title>Reveal.js 3 Slide Demo</title>
 <link  rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/reveal.js/2.3/css/reveal.min.css">
 <link  rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/reveal.js/2.3/css/theme/default.css" id="theme"> 
</head>

<body>
<!-- menampilkan slide pakai class reveal -->
 <div class="reveal">
  <!-- Wrap all slides in a single "slides" class -->
  <div class="slides">
   <!-- ALL SLIDES GO HERE -->
   <!-- Each section element contains an individual slide -->
   <section>
    <h1>Presentation By Ulil</h1>
    <p>Laboratorium Pemrograman dan Basis data</p>
   </section>

   <section id="show-a-link">
    <h1>Welcome to tutorial</h1>
    <p>Slide Presentation with HTML CSS Javascript</p>
    <p>See <a href="http://www.htmlcheats.com">HTMLCheats.com</a><p>
   </section>

   <section>
    <h1>Try an internal link</h1>
    <p>Visit internal slide<a href="#/show-a-link"> 2</a></p>
   </section>
   
   <section>
    <h1>Hope you enjoy this</h1>
    <p>Blog Pemrograman dan basis data</p>
   </section>
   
   <section>
    <h1>Thanks</h1>
    <p>LPBD SI Unand<a href="#/show-a-link"> 2</a></p>
   </section>

   </div>
 </div>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.99/head.min.js"></script>
 <script src="http://cdnjs.cloudflare.com/ajax/libs/reveal.js/2.3/js/reveal.min.js"></script>

 <script>
  // Required, even if empty.
  Reveal.initialize({
  });
  
  // Extend Reveal.js to show the next slide when 
  // clicking the background, like web comics.
  Reveal.addEventListener( 'click', function( event ) {
   // Advance to the next slide.
      Reveal.next()
   // Do not consume the event. Send it up to
   // its parent.
  }, false );
  
 </script>
</body>
</html>

Hasilnya bisa dilihat disini : http://ulilamri.net23.net/index.html
Silahkan download CSSnya:

http://cdnjs.cloudflare.com/ajax/libs/reveal.js/2.3/css/reveal.min.css
http://cdnjs.cloudflare.com/ajax/libs/reveal.js/2.3/css/theme/default.css

Ubah dan kreasikan sesuai dengan yang kamu inginkan :)

So easy, if you know that.

silahkan lihat ke situs http://lab.hakim.se/reveal-js/#/ untuk liat demonya seperti apa, dan download source code lebih lengkap di link berikut serta pelajari lebih lengkap lagi di HTML cheat..

Sekian, terimakasih

Referensi :
http://htmlcheats.com/reveal-js/reveal-js-tutorial-reveal-js-for-beginners/
http://lab.hakim.se/reveal-js/#/
http://www.toastmasters-sr.org.au/wordpress/wp-content/uploads/2011/05/VisAidsandPPt.gif
-Ulil Amri-