Membuat Slide Presentasi dengan HTML

Membuat Slide Presentasi dengan HTML

Inovasi teknologi membuat web menjadi platform yang makin banyak digunakan. Tidak hanya portabilitas saja, dengan bahasa HTML yang sudah menjadi standar, pengembangan tampilan aplikasi…

Inovasi teknologi membuat web menjadi platform yang makin banyak digunakan. Tidak hanya portabilitas saja, dengan bahasa HTML yang sudah menjadi standar, pengembangan tampilan aplikasi pun menjadi semakin mudah karena tidak memerlukan pembelajaran yang terlalu banyak macamnya. Dengan sedikit trik, kombinasi HTML dengan JavaScript dapat Anda gunakan untuk membuat slide presentasi.

Berbekal satu halaman HTML saja, ditambah dengan sebuah plugin jQuery buatan Caleb Troughton, Anda sudah bisa membuat sebuah slide lengkap. Jelas, fitur teknik presentasi ini memang masih kurang daripada Microsoft Power Point. Namun dengan teknik ini, Anda akan terlihat beda dan menunjukkan bahwa Anda adalah seorang web developer.

Karena hanya menggunakan HTML dan jQuery yang mana dapat dijalankan tanpa koneksi Internet, di mana pun Anda tetap bisa menjalankan presentasi tersebut. Untuk lebih jelasnya tentang teknik pembuatan presentasi ini, ikuti langkah berikut.

  1. Download terlebih dahulu library yang diperlukan, yaitu jQuery di alamat http://jquery.com. Versi terbaru saat artikel ini ditulis adalah 1.7.1.

    Download jQuery

  2. Setelah itu, download plugin bernama Deck.js yang beralamat di http://imakewebthings.github.com/deck.jske dalam komputer Anda. Secara otomatis, Anda akan mendownload versi stable dari Deck.js ini.

    Download deck.js

  3. Buat sebuah folder di local web server Anda untuk memudahkan pengembangan. Di dalamnya, buat sebuah folder lagi untuk manajemen assets. Copy library jquery ke dalam folder “js”. Buat folder “deck” di dalam folder assets tersebut, kemudian copy folder “core”, “extensions”, dan “themes” dari dalam hasil download plugin deck.js ke dalam folder “deck” tersebut. Masukkan pula file modernizr.custom.js yang berfungsi untuk modernisasi browser menjadi support HTML5. Jangan lupa untuk membuat file index.html kosong sedemikian hingga struktur folder akan tampak seperti gambar.

    Susunan folder percobaan pembuatan slide

  4. Sebagai langkah awal, isilah file index.html dengan standar elemen HTML. Beberapa file yang wajib dimasukkan dalam pembuatan slide adalah jQuery, deck.core.css, salah satu style tampilan dan transisi, library modernizr, dan deck.core.js. Elemen html yang akan menjadi kotak slide presentasi harus diberikan class “deck-container”. Dalam contoh ini, seluruh elemen body menjadi container-nya. Kode javascript dimasukkan di bagian akhir, untuk masalah performa. Setelah itu, lakukan pemanggilan fungsi deck() untuk menjalankan presentasi.
    <!DOCTYPE html>
    <!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
    <!--[if IE 7]>    <html class="no-js ie7" lang="en"> <![endif]-->
    <!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
    <!--[if gt IE 8]><!-->  <html class="no-js" lang="en"> <!--<![endif]-->
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    
        <title>Slide Presentasi dengan HTML</title>
    
        <meta name="description" content="Demo pembuatan slide presentasi HTML">
        <meta name="author" content="Muhammad Fauzil Haqqi">
        <meta name="viewport" content="width=1024">
    
        <!-- Core and extension CSS files -->
        <link rel="stylesheet" href="assets/deck/core/deck.core.css"> 
    
        <!-- Theme CSS files -->
        <link rel="stylesheet" id="style-theme-link" href="assets/deck/themes/style/swiss.css">
        <link rel="stylesheet" id="transition-theme-link" href="assets/deck/themes/transition/horizontal-slide.css">
    
        <script src="assets/js/modernizr.custom.js"></script>
      </head>
      <body class="deck-container">
    
        <!-- jQuery file -->
        <script src="assets/js/jquery-1.7.1.min.js"></script>
        <!-- deck core file -->
        <script src="assets/deck/core/deck.core.js"></script>
        <script>
          $(function() {
            // Deck initialization
            $.deck('.slide');
          });
        </script>
      </body>
    </html>
  5. Slide Anda belum bisa dilihat, karena Anda belum membuat konten untuk presentasi tersebut. Slide sendiri bisa dibuat di dalam “deck-container”, yaitu dengan cara membuat elemen yang memiliki class “slide”. Untuk itu, buatlah beberapa div dengan class “slide” di dalamnya seperti berikut ini. Setelah itu, jalankan slide Anda dengan menggunakan web browser. Untuk berpindah slide, gunakan tombol keyboard panah kanan dan kiri.
        <div class="slide">
          <h1>Demo BisaKomputer.com: Pembuatan Slide Presentasi dengan HTML</h1>
          <small style="position: absolute; right: 20px; bottom: 20px;">Muhammad Fauzil Haqqi</small>
        </div>
    
        <div class="slide">
          <h2>Style</h2>
          <p>Tersedia 3 style untuk tampilan, dan 3 style untuk transisi</p>
          <ul>
            <li><h3>Style tampilan</h3>
              <ul><li>Neon</li><li>Swiss</li><li>Web-2.0</li></ul>
            </li>
            <li><h3>Style transisi</h3>
              <ul><li>Fade</li><li>Vertical</li><li>Horizontal</li>
              </ul>
            </li>
          </ul>
        </div>

    Halaman judul presentasi

  6. Anda bisa membuat animasi penampilan poin-poin, dengan cara memberikan class “slide” pula di dalam sebuah slide. Selain itu, Anda juga bisa mengubah style tampilan dengan cara meng-include-kan themes yang berbeda sesuai kode di baris css.
        <div class="slide">
          <h2>Slide dalam slide</h2>
          <p>Slide adalah elemen HTML yang memiliki class <code>slide</code></p>
          <ol>
            <li class="slide">Jika ingin membuat animasi</li>
            <li class="slide">Cukup deklarasikan <code>slide</code> di dalam <code>slide</code></li>
            <li class="slide">Tanpa harus mengatur animasi secara manual</li>
          </ol>
        </div>

    Animasi poin-poin dalam slide

  7. Beberapa extension juga disediakan oleh pembuatnya, yaitu “goto”, “hash”, “menu”, “navigation”, dan “status”. Anda bisa menambahkan file extension ke dalam proyek bila ingin memakai salah satunya. Misalkan, Anda ingin menambahkan extension navigation untuk memudahkan perpindahan slide. Di dalam file html setiap extension, Anda dapat menemukan elemen apa yang harus dimasukkan dalam proyek. Setelah mendeklarasikan kode css dan js yang di-include-kan, Anda dapat melihat tombol navigasi yang muncul di samping kiri dan kanan slide.
    <!-- dalam head -->
    <link rel="stylesheet" href="assets/deck/extensions/navigation/deck.navigation.css">
    
    <!-- dalam deck-container paling bawah -->
    <a href="#" class="deck-prev-link" title="Previous">←</a>
    <a href="#" class="deck-next-link" title="Next">→</a>
    <script src="assets/deck/extensions/navigation/deck.navigation.js"></script>

    Salah satu ekstensi untuk navigasi

  8. Slide ini tidak terbatas pada elemen yang dideklarasikan oleh library. Sekali lagi, Anda bisa menambahkan elemen maupun style lain, bahkan dapat membuat theme tersendiri. Cukup copy dan edit theme yang sudah ada sebagai template. Selain itu, Anda juga bisa menambahkan gambar dan video HTML5 dalam slide. Untuk lebih jelasnya, Anda bisa melihat di dokumentasi proyek di alamat resminya http://imakewebthings.github.com/deck.js/docs. Selamat mencoba.
Artikel ini dengan versi sebelumnya telah dipublikasikan Penulis di PC Mild edisi 17/2011.
Tag: , , , , , ,

4 Comments

Leave Comment
  1. normansyah says:

    Koq J query nya gk bisa sy download y..kira2 kenapa y?

  2. terima kasih atas ilmunya,,,sabgat membantu…

  3. zahra says:

    Awalnya gimna, harus apa duluu?? Download softwarenya apa

Write Comment

Your email will not be published. The marked label is required.