Category 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.

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:

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:

Unduh tiga berkas dari situs Reveal JS.

Lalu, buat sebuah berkas HTML biasa sebagai kerangka kerja:

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:

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

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.

Tambahkan skrip pembantu sebelum skrip Reveal JS.

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

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

Ada dua tempat yang harus ditambahkan.

CSS

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

 

Setelah ini Javascript.

Javascript

Ubah konfigurasi di perintah:

Tambahkan berkas Javascript tersebut:

Contoh Penggunaan

Kode di HTML:

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.

Javascript

Ubah konfigurasi di perintah:

Tambahkan kedua berkas tersebut:

Contoh Penggunaan

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

Meetup Bulanan ID Python Feburari 2014
ID Python

Meetup Bulanan ID Python Feburari 2014

Halo teman-teman semua,

Akan dilaksanakan Meetup Bulanan ID Python Feburari 2014. ID Python adalah Grup Penggiat Python Programming Language di Indonesia.

Untuk bulan ini kebetulan rekan – rekan admin Kambing UI (POSS) menjadi host, yakni rekan Adin, Tonny Adhi Sabastian, dan JP. Acaranya sendiri akan dilangsungkan pada tanggal 22 Februari 2013 di ITTC UI.

Acara ini terbuka untuk umum dan mengingat pembicaranya sakti-sakti, sayang kalau tidak banyak yang tahu. Ya, memang, sih, ruangan terbatas cuma muat 30.

Rundown selengkapnya dapat diakses di : http://www.python.or.id/2014/02/kopi-darat-python-indonesia-februari.html

Abstrak Materi dan Profil Pembicara

Raspberry Pi dan alat parkir UI oleh Gladhi Guarddin, M.Kom

Penggunaan Raspberry Pi sebagai pengendali proses pengambilan data kendaraan pada gerbatama UI.

Gladhi Guarddin, M.Kom, adalah dosen Fakultas Ilmu Komputer UI, mengajar mata kuliah pemrograman sistem, sistem terdistribusi, dan mata kuliah yang berhubungan dengan infrastruktur TI. Dan juga admin Kambing-UI.

Analisis Data di Python dengan Pandas oleh Sigit Nurseto

Analisis data dapat memberi kita informasi yang berguna tentang pattern, relationship atau tren dari suatu kumpulan data. Python yang saat ini sudah memiliki operasi data yang mudah, menjadi lebih powerful dengan adanya library Pandas. Dengan menggunakan Pandas kita dapat melakukan data analisis dari suatu database atau bentuk data lainnya dengan fleksibel, cepat, dan ekspresif.

Pada kopdar kali ini, saya akan memperkenalkan Pandas dan memperlihatkan bagaimana library ini dapat dipakai secara mudah dan menyenangkan untuk menganalisa data. Supaya mudah dipahami, saya akan menampilkan langsung bagaimana Pandas membuat kumpulan raw data menjadi Graph yang menarik dan berguna.

Sigit Nurseto. Sejak melihat source code Python pertama kali beberapa tahun lalu, saya langsung tertarik dengan Python karena kecantikan sintaknya. Sampai saat ini saya adalah Freelance Programmer yang selalu menggunakan Python selama client tidak terlalu peduli dengan bahasa yang dipakai

OpenStreetMap Resources for Developers by Kate Chapman

OpenStreetMap is an Internet project with the goal of creating a free map of the entire world. The reason OpenStreetMap exists is most maps you think of as free actually have legal or technical restrictions. The OpenStreetMap community creates many tools of use to developers. This includes a variety of web and mobile APIs, custom maps, and a variety of data formats. As a developer what resources should you use to develop your app? How can you get help if you get suck? What ways can you contribute to existing projects? This talk will help get developers started with OpenStreetMap.

Kate Chapman is the Executive Director of the Humanitarian OpenStreetMap Team (HOT), a non-governmental organization dedicated to helping support communities, governments and humanitarian responders in their utilization of OpenStreetMap in crisis response and contingency planning. As the Executive Director, Kate both oversees the overall goals of the organization, and participates in its programs. Currently, Kate is based in Jakarta, Indonesia, leading a multiyear program to collect critical infrastructure information, which proved especially useful to the municipal government in the aftermath of the 2013 and 2014 Jakarta floods. Additionally, the Indonesia project inspired an OpenStreetMap mapping competition and assisted community facilitators in upgrading from hand-drawn to more accurate digital maps. Kate is also active in the wider OpenStreetMap community, including serving on the board of the OpenStreetMap Foundation. Prior to her work at HOT, Kate was involved in web-mapping applications engineering, including GeoCommons and iMapData.

Diskusi Panel: Python di Startup

Burufly

Burufly aims to help travelers find great places to visit whether it be for a long journey or short holiday and even random nights out in their own city. We are currently the only platform that has every destination in Indonesia covered (and soon South East Asia), with a diverse array of photos, videos, reviews, articles and local experts from every corner of Indonesia, meaning you will have your own personal guide, no matter where you choose to go.

Burufly.com was developed using Django. During our releases, we try to figure out which areas of the platform can be bottlenecks. During our 14 months of being released we have made a lot of adjustments to our codes to provide better access for our users. Hopefully some of the tricks and tips we use can be beneficial to other people who develop using Django as well.

Reza Muhammad is a sysadmin turned developer as well as an open source enthusiast. He Went to school to learn about Unix and came out as a developer instead. Having experiences in multiple startups and clients in Indonesia and abroad, Reza joined Burufly in 2012 to lead the engineering team to build a scalable platform for travelers.

Stamps

Zocko

Zocko is a web tool to help social influencer people to monetize its social networks audience by promoting cool & trendy products from an all-in-one platform. The company has recently been funded to launch the product in Indonesia (as the main market) and the USA (as secondary).

We are a young, talented and motivated team of two founders from Barcelona, Spain, have the support of top-level advisors/mentors and have been incubated/accelerated of Creative HotHouse Barcelona during 8 months.

Daniel Clemente Laboreo, Zocko CTO. My working material is knowledge. My goals are to promote usability and excellence and to avoid technical or ethical barriers in computing. I value doing things well. I like anything which has theory on it, as well as the technical inner workings. I want to work in challenging and useful projects, learn from others and teach what I learnt.

Jadwal Acara

09.00 – 09.25 Perkenalan
09.25 – 09.30 Pembukaan oleh Zaki Akhmad
09.30 – 09.45 Sambutan dari Universitas Indonesia
09.45 – 10.30 Penggunaan Raspberry Pi sebagai Pengendali Proses Pengambilan Data Kendaraan pada Gerbatama UI oleh Gladhi Guarddin, M.Kom
10.30 – 11.15 Analisis Data di Python dengan Pandas oleh Sigit Nurseto
11.15 – 12.00 OpenStreetMap Resources for Developers by Kate Chapman
12.00 – 13.00 Diskusi Panel: Python di Startup: Burufly, Stamps, Zocko.
13.00 – 13.15 Foto Bersama dan Penutupan

Tempat

Gedung ITTC Universitas Indonesia – Depok
Gedung ITTC menempati Gedung Perpustakaan Lama UI
(setelah FIB UI dan setelah perpustakaan baru)

Koordinat gmaps

View Larger Map

Transportasi

Transportasi Umum

Kereta Commuter Line. Turun di Stasiun UI atau di Pondok Cina. Lalu dilanjutkan jalan kaki atau bisa juga naik ojek (jarak dari kedua stasiun ini ke lokasi, kurang-lebih sama).

Rute jalan kaki dari Stasiun Pondok Cina

View Larger Map

Transportasi Pribadi

Tersedia area parkir untuk mobil dan motor di dalam kampus UI.

Registrasi

Sama dengan kopdar sebelum-sebelumnya, untuk menghadiri ini tidak diperlukan registrasi dan tidak dipungut biaya. Acara ini bersifat publik. Kapasitas ruangan terbatas untuk 30 orang.