mysyam dot net

Twenty things i learned about browsers and the web (20thingsilearned.com), merupakan sebuah guidebook yang diterbitkan oleh Google. Buku online ini berisi tentang pengetahuan dasar mengenai teknologi web dan internet, khususnya tentang bagaimana cara kerja dari browser dan jugaweb.  Christoph Niemann [1] adalah illustrator
guidebook ini.  Buku online ini ditulis dengan bahasa yang mudah dipahami, sehingga pengguna internet biasa (awam) pun dapat dengan mudah mencerna isi dari buku ini. Disamping bahasa yang mudah dicerna, juga terdapat ilustrasi (gambar) yang merupakan analogi dari topik yang sedang dibahas, sehingga pembaca semakin mudah dalam memahami isinya.

Yang juga menarik selain dari content-nya adalah tampilan (design) yang sangat interaktif untuk sebuah online book. Tidak heran, buku online ini dibangun dengan perpaduan dari HTML5, JavaScript, dan CSS3, great . Berikut pembahasannya:

Loading Halaman
Ketika 20thingsilearned.com di load pertama kita akan disuguhi dengan tampilan loading, sebuah progress bar dengan ikon buku yang terbolak-balik halamannya (menunjukkan yang sedang kita load adalah sebuah buku). Proses load ini tergantung dari kecepatan koneksi kita, akan tetapi secara umum tidak terlalu lama.  FYI, loading buku ini hanya dilakukan sekali saja, jika setelah itu kita go offline pun tetap dapat membaca isi buku ini. Well, HTML5 lah yang mendukung teknologi  -offline web- ini, great .

Halaman Depan
Setelah progress bar ”penuh” (100% loaded) kita disuguhi tampilan yang seakan-akan  kita sedang menghadapi sebuah buku nyata. Sebuah buku dengan sampul (dengan kesan hard cover) berwarna biru berbentuk memanjang yang bertuliskan “20 things i learned about browsers and the web”. Di sekeliling buku terdapat menu-menu standar buku online yang sangat interaktif untuk memudahkan pembacanya. Diantaraanya adalah: Table of things, foreword, search, print book, share book (socmed), dll. Ketika kita membuka halaman pertama, kita disuguhi transisi (efek flip) yang halus, JavaScript yang digambar di atas Canvas HTML5 yang beperan di baliknya.

Menu-menu
Table of Things. Berisi seperti halnya daftar isi sebuah buku, hanya saja disajikan dalam bentuk tabel dengan tulisan dan ikon yang interaktif. Sangat memudahkan proses pencarian judul/topik. Cukup dengan klik topik yang kita cari, dengan cepat kita disuguhi halaman yang kita cari, tanpa loading yang melelahkan.

Search. Menu pencarian yang cepat dalam menampilkan hasil pencarian. Hasil akan langsung tampil di bawah kotak search, dimana tampilan dari hasil pencarian dapat kita klik untuk menuju halaman yang dicari. Mudah dan interaktif.

Navigasi. Menu yang paling penting dari sebuah buku elektronik adalah navigasi . Buku online ini menyediakan 2 buah navigasi, yaitu navigasi topik per topik dan navigasi halaman per halaman. Navigasi topik per topik dapat diakses di bawah halaman web, cukup dengan meng-klik saja.

Untuk membuka halaman-halaman yang ada dalam buku ini. Untuk membuka halaman per halaman, kita dapat meng-klik ikon tanda panah di sebelah kanan buku, atau klik di tepian buku sebelah kanan (seperti membalik halaman buku nyata). Dalam poin ini, pengguna komputer tablet merasakan nyamannya membaca buku. Sebagai pengguna laptop (bukan komputer tablet), ternyata saya pun merasakan kenyamanan dalam membaca buku online ini. Secara tidak sengaja ketika saya membaca buku online ini dengan posisi laptop on my lap (di atas pangkuan), saya berpikir alangkah nyamannya jika saya  dapat membalik halaman buku tanpa harus klik (dengan touchpad yang kurang nyaman) tapi cukup dengan menggunakan kontrol keyboard (tombol panah misalnya). Ya, ketika menggunakan laptop di atas pangkuan  maka posisi jari paling nyaman  adalah di atas keyboard (terutama tombol panah). Rupanya designer buku online ini telah memperhitungkan hal tersebut,  great .

Share book. Facebook dan Twitter merupakan situs jejaring sosial yang banyak  penggunanya, dan aktifitas berbagi (share) content web dalam situs jejaring sosial juga banyak dilakukan. Untuk memudahkan penyebaran buku ini, maka dibuatlah menu ini. Menu ini dapat diakses dari menu bawah maupun di samping buku. Content yang di share pun tidak hanya keseluruhan isi buku, namun topik tertentu dalam buku pun bisa di share  (seperti misalnya: topik Cloud Computing  saja , topik lain tidak).

Print book. Jika menginginkan  buku online ini untuk dijadikan hard copy, maka menu print book solusinya. Terdapat dua pilihan, apakah akan mencetak di kertas dengan printer, atau mencetak (baca: menyimpan) dalam format pdf.

Zoom. Jika tidak menginginkan animasi flip ketika membalik halaman, menu zoom dapat digunakan. Dimana menu ini akan menghilangkan bentuk (tampillan) buku, dan fokus pada isi (tulisan) dari bukut tersebut. Tampilan tulisanpun menjadi lebih besar.
Hightlight. Teknologi yang juga paduan dari JavaScript dan Canvas HTML5, menu highlight akan memfokuskan tampilan hanya pada buku, sementara menu lain digelapkan, cool.

Resume Reading
Hal terakhir yang paling menarik adalah: apabila kita sengaja maupun tidak menutup browser ketika tengah membaca buku online ini, kemudian kita buka kembali maka muncul menu Resume Reading, apakah kita akan me-resume atau mulai dari halaman awal. Menu yang sangat bermanfaat ketika kita membaca buku yang jumlah halamannya banyak. Menu ini memanfaatkan Local API Storage.

Penutup
Teknologi web semakin hari semakin berkembang, dan yang pasti semakin interaktif. Penggunaan HTML5, JavaScript, dan CSS3 berujung pada satu tujuan: Interactive Web. Termasuk buku online ini (yang dibuat dengan paduan 3 teknologi tersebut), feel membaca buku nyata (hard copy) sangat terasa, sangat interaktif.  Makin maraknya penggunaan komputer tablet, makin merebaknya smart phone yang memiliki layar besar, merupakan lahan yang subur bagi para pengembang baik pengembang browser (untuk selalu menciptakan browser yang mendukung teknologi terkini) maupun pengembang aplikasi berbasis web (untuk selalu menciptakan aplikasi-aplikasi berbasis web yang interaktif). Go cloud

Referensi
1. Google Code (googlecode.blogspot.com)
2. W3C (dev.w3.org/html5)
3. HTML5 ROCKs (html5rocks.com)
4. HTML5 DEMOs (html5demos.com)

—–

[1] Christoph Niemann merupakan illustrator  dan juga penulis buku yang terkenal. Beberapa karya ilustrasi yang dibuatnya bisa dijumpai di beberapa cover majalah, diantaranya: The New Yorker, Newsweek, Wired, The New York Times Magazine dan American Illustration.