Tag Archives

2 Articles
Membuat Cetakan Salindia dengan Reveal JS

Membuat Cetakan Salindia dengan Reveal JS

Saya tertarik untuk mengubah semua presentasi saya dengan HTML5. Kalau Anda lihat di laman publikasi, saya sudah bereksperimen dengan beberapa. Kali ini, saya menemukan sebuah proyek pembuatan salindia yang cukup modular: Reveal JS.

Dia memiliki fitur yang saya butuhkan: presentasi di peramban, cetak ke PDF, dan sintaksis. Ada juga yang mengembangkan catatan pemresentasi dan skema klien-peladen untuk menghubungkan beberapa perangkat. Tujuan dari sinkronisasi ini untuk tampilan pemresentasi dan tampilan presentasi berbeda. Tetapi, saya jarang menggunakan catatan kaki. Makanya, saya tidak mengejar fitur ini.

 “Well, hell! PMP exam topics That’s no excuse for insulting me! You PMP exam topics 300-320 questions pdf are 300-320 questions pdf Ma’s PMP exam topics PMP exam topics own blood son, but did PMP exam topics she take on that time PMP exam topics Tony Fontaine shot you in the leg? 70-532 answer analysis No, she 70-532 answer analysis just 300-320 questions pdf sent for old Doc 70-532 answer analysis Fontaine to dress it and asked the doctor what ailed Tony’s aim. Said she guessed licker was spoiling his marksmanship. Remember how mad that made Tony?”Both boys yelled 70-532 answer analysis with laughter.“Ma’s a card!” said Brent with loving approval. “You can always count on her to do the right thing 300-320 questions pdf and 70-532 answer analysis not embarrass you in front of PMP exam topics folks.”  But Gerald remained Gerald. 300-320 questions pdf His habits PMP exam topics of living and his ideas changed, but his manners he would 300-075 certification exam not change, 300-075 certification exam even had he been 70-532 answer analysis able to change them. He admired 300-320 questions pdf the drawling 300-075 certification exam elegance of the 300-075 certification exam wealthy rice and cotton planters, who rode into Savannah from their moss-hung kingdoms, mounted 70-532 answer analysis on 300-320 questions pdf thoroughbred horses and followed by the carriages of their 300-320 questions pdf equally elegant ladies 70-532 answer analysis and the wagons 300-320 questions pdf of their slaves. But Gerald could never attain elegance. 70-532 answer analysis Their lazy, blurred voices fell pleasantly 300-075 certification exam 300-075 certification exam 300-320 questions pdf on PMP exam topics his PMP exam topics ears, but his 300-075 certification exam PMP exam topics own 300-075 certification exam brisk brogue clung to his tongue. He liked the casual 70-532 answer analysis 300-075 certification exam grace with which they PMP exam topics conducted affairs 300-320 questions pdf of importance, 300-320 questions pdf risking 300-320 questions pdf a fortune, a plantation or a slave 70-532 answer analysis 300-075 certification exam on the 300-075 certification exam turn 70-532 answer analysis of a card and writing off their losses with careless good humor and no more ado than when they scattered 300-320 questions pdf pennies to pickaninnies. But Gerald had known poverty, and PMP exam topics he could never PMP exam topics learn to lose money with 70-532 answer analysis good 300-075 certification exam humor or good 300-320 questions pdf 70-532 answer analysis 300-320 questions pdf grace. They were PMP exam topics a pleasant race, these coastal Georgians, with their soft-voiced, 70-532 answer analysis PMP exam topics quick rages and their charming inconsistencies, and Gerald liked them. But 300-075 certification exam there was a 300-075 certification exam brisk and 70-532 answer analysis restless vitality 300-075 certification exam about the young Irishman, fresh from a country where winds blew wet and chill, where misty swamps held no fevers, that 300-075 certification exam set him apart from these indolent gentle-folk of semi-tropical weather and malarial marshes.

Reveal JS cukup mudah dikembangkan. Selain memiliki contoh situs yang menggambarkan penggunaannya, Reveal JS juga menyediakan contoh-contoh penggunaan yang gila di alam sana. Salah satu yang menginspirasi saya adalah The Arab Spring Uprisings Five Years On oleh Council on Foreign Relations.

Modularitas ini yang membuat pengembangan Reveal JS bisa ditambah-tambahi dengan berbagai macam. Tetapi, saya yakin, yang paling penting adalah bagaimana cara memulainya. Apalagi, untuk orang-orang yang tidak terbiasa dengan Node JS, memasang paket-paket Node JS sangat mahal (biaya Internet) dan membingungkan.

Saya akan memulai membangun dasar Reveal JS yang saya gunakan mulai dari nol sampai beberapa modul yang saya rasa perlu. Di akhir tulisan ini, akan ada sebuah cetakan salindia yang siap untuk dibuat.

Paket Dasar

Perhatikan struktur direktori sebagai berikut:

.
├── css
│   ├── reveal.css
│   └── theme
│       └── beige.css
├── index.html
└── js
    └── reveal.js

Sesuai dengan contoh dari Reveal JS, hal yang paling dasar cukup menyediakan 4 berkas:

  1. Berkas CSS Reveal JS.
  2. Berkas CSS tematik yang digunakan. Untuk contoh kali ini saya menggunakan tematik Beige.
  3. Berkas Javascript Reveal JS sebagai skrip penjalan.
  4. Berkas HTML sebagai berkas salindia.

Anggap sudah ada di sebuah direktori, mari buat struktur yang cukup:

mkdir -p js css/theme

Unduh tiga berkas dari situs Reveal JS.

wget https://raw.githubusercontent.com/hakimel/reveal.js/master/css/reveal.css -O css/reveal.css
wget https://raw.githubusercontent.com/hakimel/reveal.js/master/css/theme/beige.css -O css/theme/beige.css
wget https://raw.githubusercontent.com/hakimel/reveal.js/master/js/reveal.js -O js/reveal.js

Lalu, buat sebuah berkas HTML biasa sebagai kerangka kerja:

cat > index.html << EOF
<html>
        <head>
                <link rel="stylesheet" href="css/reveal.css">
                <link rel="stylesheet" href="css/theme/beige.css">
        </head>
        <body>
                <div class="reveal">
                        <div class="slides">
                                <section>Slide 1</section>
                                <section>Slide 2</section>
                        </div>
                </div>
                <script src="js/reveal.js"></script>
                <script>
                        Reveal.initialize();
                </script>
        </body>
</html>
EOF

Sampai sini, sudah ada presentasi sederhana yang bisa digunakan dengan contoh dua halaman.

Contoh Salindia yang dihasilkan.

Contoh Salindia yang dihasilkan.

Perhatikan bahwa setiap halaman dalam salindia berada di dalam elemen HTML section. Bila ingin membuat laman yang ke bawah, buat section di dalam section. Nanti hasilnya laman dengan panah ke bawah.

Silakan menggunakan elemen HTML di dalam section untuk membuat isi salindia. Beberapa rekomendasi saya:

  • Saya menggunakan elemen H1 untuk membuat judul salindia dan H2 untuk judul laman.
  • Untuk menggunakan poin, gunakan saja elemen UL (unordered list) seperti biasa.

Fitur Pencetakan ke PDF

Untuk mencetak lebih baik, diperlukan dua berkas CSS yang memformat salindia menjadi format untuk dicetak:

mkdir -p css/print
wget https://raw.githubusercontent.com/hakimel/reveal.js/master/css/print/pdf.css -O css/print/pdf.css
wget https://raw.githubusercontent.com/hakimel/reveal.js/master/css/print/paper.css -O css/print/paper.css

Setelah itu, ubah HTML salindia pada elemen HEAD untuk membuat skrip yang sesuai:

<html>
<head>
<!-- ... -->
        <!-- Printing and PDF exports -->
        <script>
            var link = document.createElement( 'link' );
            link.rel = 'stylesheet';
            link.type = 'text/css';
            link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
            document.getElementsByTagName( 'head' )[0].appendChild( link );
        </script>
<!-- ... -->
</head>
<body>
<!-- ... -->
</body>

Saya membuang konteks yang lain agar tidak bingung Anda mau memasukkan baris elemen SCRIPT di mana.

Setelah ini, ketika mengakses dengan peramban, tambahkan “?print-pdf” (tanpa kutip) pada ujung URL. Tata letak dengan URL tersebut akan terlihat aneh. Namun, bila kita menekan CTRL+P untuk menampilkan dialog pencetakan, salindia akan tercetak dengan baik.

Print presentation to PDF.

Print presentation to PDF.

Dengan ini, salindia yang dibuat bisa diekspor ke PDF.

Skrip Pembantu

Sebelum memasang plugin, tambahkan skrip pembantu Head JS untuk membantu memasang skrip-skrip plugin ke elemen HEAD.

Unduh berkas-berkas seperti biasa.

mkdir -p lib/js
wget https://raw.githubusercontent.com/hakimel/reveal.js/master/lib/js/head.min.js -O lib/js/head.min.js

Tambahkan skrip pembantu sebelum skrip Reveal JS.

<html>
<head>
<!-- ... -->
</head>
<body>
<!-- ... -->
                <script src="lib/js/head.min.js"></script>
                <script src="js/reveal.js"></script>
<!-- ... -->
</body>

Dengan adanya Head JS ini, plugin-plugin bisa dimuat dengan mudah.

Fitur Kode

Saya tahu pasti kebanyakan yang membaca tulisan saya adalah seorang yang biasa mempresentasikan kode. Reveal JS menggunakan Highlight JS, tetapi saya lebih suka Prism JS.

Untuk Prism JS, harus mengunduh secara manual dan menaruhnya di direktori plugin/prism

mkdir -p plugin/prism

Tambahkan secara manual dua berkas Prism JS (CSS + Javascript) sehingga direktori tersebut berisi:

plugin/prism/
├── prism.css
└── prism.js

Ada dua tempat yang harus ditambahkan.

CSS

CSS diperlukan untuk tematik kode. Ditambahkan di elemen HEAD sehabis berkas CSS tematik.

 

<html>
<head>
<!-- ... -->
                <link rel="stylesheet" href="css/theme/beige.css">
                <link rel="stylesheet" href="plugin/prism/prism.css">
<!-- ... -->
</head>
<body>
<!-- ... -->
</body>

Setelah ini Javascript.

Javascript

Ubah konfigurasi di perintah:

Reveal.initialize();

Tambahkan berkas Javascript tersebut:

Reveal.initialize({
  dependencies: [
    { src: 'plugin/prism/prism.js' },
  ]
});

Contoh Penggunaan

Kode di HTML:

<section>
     <h2>Slide 3</h2>
     <pre><code class="language-html" data-trim data-noescape>
&#60;pre&gt;&#60;code class="language-bash"&gt;$ echo Test &#60;/code&gt;&#60;/pre&gt;
     </code></pre>
</section>

Hasilnya:

Highlight

Highlight

Fitur Markdown

Buat orang-orang yang terbiasa mengisi WIKI, Github Pages, dan sejenisnya, bahasa Markdown lebih sederhana daripada harus mengetik elemen HTML.

Unduh berkas-berkas seperti biasa.

mkdir -p plugin/markdown
wget https://raw.githubusercontent.com/hakimel/reveal.js/master/plugin/markdown/markdown.js -O plugin/markdown/markdown.js
wget https://raw.githubusercontent.com/markedjs/marked/master/marked.min.js -O plugin/markdown/marked.js

Javascript

Ubah konfigurasi di perintah:

Reveal.initialize();

Tambahkan kedua berkas tersebut:

Reveal.initialize({
  dependencies: [
    { src: 'plugin/prism/prism.js' },
    { src: 'plugin/markdown/marked.js' },
    { src: 'plugin/markdown/markdown.js' },
  ]
});

Contoh Penggunaan

<section data-markdown><script type="text/template">
## Slide 4: Markdown

```bash 
echo "Hello World!"
```
</script></section>

Hasilnya:

Created with Markdown

Created with Markdown

Terakhir

Saya lelah. Nanti lanjut (kalau tidak malas). Setidaknya saya sudah memberikan gambaran bagaimana cara menggunakan Reveal JS dan menambahkan plugin tambahan.

Bacaan Lebih Lanjut

Here Comes Another Challenger

Here Comes Another Challenger

When HTML5 was published, there was an internal struggle going on between parties whom endorsed video format for HTML5. Commercial companies such as Google proposed H.264 codec to serve HTML5. The problem with H.264 was that particular format was patent encumbered. This means that the format itself were not applicable for free in some countries. That’s why, Mozilla Foundation completely rejected the idea of using H.264 and embracing Ogg Vorbis format instead. Both sides with good reason and ideology ended up stalled.

Fortunately, Google was recently buy On2, a company that holds  a new codec: VP8. From [FSF], a plea of releasing VP8 was made. Yesterday [ARS] revealed the new format was becoming free. Google also had provide a support site [WEBM] contains VP8 integration (library). The codec called WebM.

The site is new, the code only on GIT, and the list of plugins coming soon. Albeit, few months from now, days for those bleeding edge SVN/GIT/[name your favorite free software tools SCM] enthusiasts. You know how fast FOSS absorb technologies. I suppose, it would be on Meerkat.

What is the implication of this?

With the new open standard for video, we can see a peace once more on HTML5. This means, HTML5 most disputable issue has been resolved. So, expect an overwhelming HTML5 adoption on the coming months. Meaning: study HTML5 now! 😀

All in all, here’s a cheer for Free/Open Source Movement and Open Standard movement!

Reference:

[FSF] http://www.fsf.org/blogs/community/google-free-on2-vp8-for-youtube

[ARS] http://arstechnica.com/web/news/2010/05/google-opens-vp8-codec-aims-to-nuke-h264-with-webm.ars?utm_source=microblogging&utm_medium=arstch&utm_term=Main%20Account&utm_campaign=microblogging

[WEBM] http://www.webmproject.org/