new UI option menu

Jika sebelumnya menu “option” tampil di window yang terpisah dari browser (pop up), maka kali ini menu tersebut tampil di “halaman” browser. Yang dengan tampilan seperti ini, pengguna resolusi terbatas seperti saya lebih mudah untuk mengatur opsi-opsi setting di browser saya. Dengan mudah saya dapat mengakses seluruh opsi setting. Sebelumnya tidak semudah ini. Dan yang paling menarik dari new UI ini adalah tambahan menu “search” setting. Saya tidak perlu lagi mencari dimana menu untuk mengubah setting proxy ataupun mengatur saved password saya, cukup dengan mengetik kata kunci (misal: password, proxy) maka setting terkait pun muncul. What a great UI.

menu search yang memudahkan

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.

Bagi yang memiliki google mail (GMAIL) kini ada cara mudah untuk membaca email dengan cara offline, selain dengan email client (thunderbird, outlook, dll) tentunya. Bahkan menurut hemat saya, offline gmail ini lebih nyaman dibandingkan dengan menggunakan email client. Dengan offline gmail ini serasa membaca secara online, karena yang kita gunakan adalah browser. Fasilitas ini “lulus” dari lab nya google kurang lebih bulan desember tahun lalu setelah selama setahun google me-launch di labnya.

Selain membaca secara offline, kita pun dapat menulis email secara offline pula, yang ketika kita klik tombol send maka akan tersimpan di outbox. Ketika kita online, gmail akan melakukan sinkronisasi layaknya email client, yang akan mendownload pesan baru dan juga mengirim pesan yang ada di outbox kita.

Berikut adalah cara mengaktifkan offline gmail:

1. Klik “settings” pada pojok kanan atas gmail
2. Klik tab “offline”
3. Pilih “enable offline mail for this computer”
4. Terdapat pilihan untuk kita, akan mendownload email berapa bulan sebelumnya (jadi tidak semuanya, lebih meringankan).
5. Klik “save changes” kemudian ikuti instruksi selanjutnya

Kemudian google akan meminta kita untuk menginstall addon google gears

Setelah selesai, restart firefox (bagi pengguna firefox). Ketika masuk ke halaman gmail, di pojok kanan akan muncul keterangan mengenai status sinkronisasi. Kemudian ketika offline, kita bisa mengakses offline gmail melalui shortcut bergambar logo GMAIL yang ada di desktop kita.

Fasilitas ini sangat bermanfaat bagi yang tidak memiliki koneksi internet 24jam, atau bagi yang punya koneksi internet time based, atau bagi yang mengikuti banyak milis dan tidak ada waktu membaca secara online di kantor  (sehingga bisa dibaca di rumah ketika offline), dll.

And.. welcome to google cloud

Nampaknya netbook akan semakin populer ditahun-tahun mendatang. Sesuai dengan namanya netbook, adalah perangkat komputer jinjing yang fungsi utamanya digunakan untuk ngenet dan ngetik. Jika hanya untuk ngenet, nampaknya tidak diperlukan Operating System yang “berat”. Lebih-lebih sekarang telah ada word processor berbasis web seperti googledoc. Tak salah google hendak merils google chrome operating system, yang dalam benak saya sudah terbayang akan ke-simpel-annya, kemudahannya, dan kecepatannya seperti produk-proxuk google sekarang. Ah teknologi memang menyenangkan..

More Article about google chrome os, here.

Tanggal 2 september kemarin google meluncurkan browser (perambah) terbarunya yang diberi nama Google Chrome. Sebuah browser open source yang berlisensi BSD licence. Project nya diberi nama chromium.

Komentar saya: it’s faster and lighter than others, with simple interface. Hanya saja baru tersedia untuk windows. Iam still waiting for deb version. Penjelasan teknis lengkapnya ada di googlebooks

Bisa di download di http://google.com/chrome/

note: image from google.com