Fig 1. langsung ketik query tanpa harus mengklik kotak input (Google)
| Arsip mwmag | [Files] [Up] | © 2002 PT Masterweb Media |
Figures
Bagaimana cara membangun situs first-class tapi skill tak punya? Pengalaman pabrik otomotif Jepang mengatakan: contek desain dari kompetitor, dan buat produk yang mengambil kebaikan dari contekan. Untunglah manusia dan kera punya kesamaan: dikaruniai kemampuan untuk belajar dari nenek moyang mereka. Sehingga untuk makan dengan sendok/garpu, mereka tidak perlu kuliah dulu. Walaupun karir kera tidak lebih dari peran konyol dalam film holywood, manusia lebih beruntung; ia dapat menjadi web developer!
Dengan semangat pabrik Jepang, kita curi ilmu pengembangan situs dengan sedikit meng-reverse engineering pekerjaan web developer kawakan situs raksasa standar seperti Google, dan Yahoo. Seperti yang nanti kita lihat, bahwa situs besar tidak keberatan mengeksploitasi HTML untuk tampilan, byte-size minimal, dan efek samping lain, dan punya pertimbangan tinggi mempertahankan availability server di tengah serbuan jutaan visitor per hari.
Lihat Gambar 1. Begitu halaman pertama Google dimuat, kursor otomatis aktif ke kotak search. Fitur ini walaupun terkesan remeh, tapi bila dikalkulasikan dengan jumlah pengguna Google yang harus meraih mouse, menggerakkan pointer ke kotak search, dan mengkliknya, tiap kali akan melakukan search, akan signifikan penghematan waktunya. Ini dipicu oleh kode JavaScript sederhana:
Fig 1. langsung ketik query tanpa harus mengklik kotak input (Google)
<body onLoad=sf()>
dan fungsi sf() didefinisikan oleh:
function sf() { document.f.q.focus(); }
yang mengatakan bahwa, begitu halaman selesai didownload, fokus kursor ke elemen q (kotak search) di form f (nama form).
Google tidak tanggung-tanggung dalam mencapai ekstrem limit efisiensi bytesize HTML-nya. Contek saja lewat View Source. Nama fungsi JavaScript singkat, seperti sf() dan c(). Penamaan objek form (kotak search, tombol) satu karakter, seperti f dan q. Begitu juga nama class CSS seperti .h dan .q. Karakter newlinenya dihapus, sehingga seluruh bagian utama HTML merupakan satu baris yang panjang sekali. Juga kutip hanya diberikan seperlunya pada atribut tag HTML.
Yahoo! juga tidak kalah irit. Sama seperti Google, atribut tidak pernah dikutip, nama-nama variabel Javascript satu dua huruf, nama subdomain pendek-pendek (rd.yahoo.com, t.yahoo.com, yp.yahoo.com, dsb.). Khusus di halaman depan www.yahoo.com, dibuatkan skrip di URI /r agar link-link ke berbagai area Yahoo! lainnya menjadi superringkas (mis: link ke Auctions adalah r/a2, link ke Travel adalah r/ta). Skrip /r inilah nanti yang akan melakukan redirect ke URL yang sebenarnya, mis: http://auctions.yahoo.com atau http://travel.yahoo.com.
Kecilnya HTML mempunyai pertimbangan ekonomis. Bandwidth tetap salah satu biaya terbesar yang harus dikeluarkan oleh setiap dotcom populer. Dan mengurangi besar HTML adalah cara yang paling manjur untuk mempertahankan biaya bandwidth tidak menjerumuskan perusahaan. Bagi situs yang bukan kelas dunia, barangkali Anda tidak perlu seekstrem Yahoo atau Google dalam mengecilkan ukuran HTML. Tapi bersikap efisien tidaklah merugikan.
Halaman depan Yahoo! mengandung tag meta rating PICS (Platform for Internet Content Selection, www.w3.org/PICS/labels.html) dengan sistem rating ICRA:
<meta http-equiv="PICS-Label" content='(PICS-1.1
"http://www.icra.org/ratingsv02.html" 1 r (cz 1 lz 1 nz 1 oz 1 vz 1)
gen true for "http://www.yahoo.com" r (cz 1 lz 1 nz 1 oz 1 vz 1)
"http://www.rsac.org/ratingsv01.html" 1 r (n 0 s 0 v 0 l 0)
gen true for "http://www.yahoo.com" r (n 0 s 0 v 0 l 0))'>
Tag ini berguna bagi browser-browser yang mendukung PICS (seperti IE dengan setting Content Advisor diaktifkan) agar dapat mengklasifikasikan konten sebuah situs, apakah mengandung materi-materi tertentu yang sebaiknya tidak dilihat. Bila tag PICS Yahoo! ini dibaca, bunyinya adalah “seluruh file di dalam situs ini (gen true) tidak mengandung chatting (cz 1), nudity (nz 1 dan n 0), sexuality (s 0), violence (v 0), promosi alkohol/obat-obatan/rokok/judi yang mengganggu anak (oz 1) dan menggunakan language/bahasa yang netral (l 0).”
Bencikah Anda kalau selesai mengisi kotak input dan menekan Submit lalu di halaman berikutnya kotak input yang sama tersebut sudah menghilangkan isian Anda? Google tahu itu, dan bahkan telah bertindak selangkah lebih jauh: mengingat isian form bahkan ketika Anda hanya menekan link ke halaman lain. Lihat Gambar 2 dan Gambar 3.
Fig 3. Isi kotak input, klink Tab Images...
Fitur yang juga sekilas nampak remeh, tapi menunjukkan sejauh mana usaha Google membantu pengguna. Google mencapai efek ini dengan koding Javascript berikut yang mengintercept klik ke hiperlink:
<td onClick="return c('www.google.com/imghp');" style=kursor:pointer;kursor:
hand;><a id=1a class=q href="/imghp?hl=en&ie=UTF-8&oe=UTF-8" onClick="return
c('www.google.com/imghp');">
onClick diletakkan di <td> dan juga <a> agar user tidak harus mengklik persis di teks link Images, namun bisa di manapun asal masih di dalam kotak tab tersebut. Dan return c akan mengeksekusi fungsi berikut:
function c(p) {
var f=document.f;
if (f.action) {
f.action = 'http://'+p;
f.submit();
return false;
}
return true;
}
Terlihat bahwa fungsi tersebut akan melakukan pengubahan atribut action pada deklarasi form HTML bernama f seperti ini:
<form action="/search" name=f>
menjadi seakan-akan:
<form action="http://www.google.com/imghp" name=f>
lalu sekaligus mensubmit form tersebut. Ini berarti, semua <input> termasuk isian kotak input akan terkirim ke Google dan bisa dikembalikan Google ke kotak input lagi. Tentunya fitur ini hanya efektif pada browser yang menyalakan Javascript. Namun pada browser yang tidak mendukung, link tab-tab tersebut tetap jalan karena terdapat tag <a href=...> biasa.
Programer PHP dan ASP tentu familiar dengan mekanisme cookie dari sistem Session. Yakni tiap kali visitor mengunjungi halaman, webserver akan memberikan cookie dengan nama standar (PHPSESSID pada PHP, dan ASPSESSIONIDxxx pada ASP) dan isi sebuah string yang unique. Webserver akan menyimpan variabel-variabel sesi yang terhubung ke unique string tersebut ke dalam file (default PHP) atau memori (default ASP).
Di Google, setiap user akan diberi cookie sesi juga yang akan persisten sampai tahun 2038:
Set-Cookie: PREF=ID=12fc22dc0a30f17c:TM=1030795809:LM=1030795809:+
S=fVLPaFUIXhs; expires=Sun, 17-Jan-2038 19:14:07 GMT;
Cookie ini utamanya digunakan Google untuk menyimpan preferensi, yang menentukan tampilan dan behaviour interface. Karena tidak ada informasi yang termasuk privasi, maka tidak ada fasilitas log out. Efek samping dari penggunaan cookie di Google adalah Google akan punya history keyword yang digunakan per browser. Dan bila pengguna tersebut membuat account di Google, maka didapatlah missing linknya dengan cara menghubungkan Browser > Cookie > Profil > Account > Email. Informasi ini akan berguna bagi Google dan para pengiklan AdWords-nya (dan mungkin juga pemerintah).
Di Yahoo!, kira-kira ada tiga tingkatan sesi, yaitu tingkat global non-autentikasi, global yahoo-id, dan aplikasi.
Global non-autentikasi. Cookie yang diset ke seluruh browser di seluruh situs tanpa autentikasi apapun. Ini dapat diketahui dengan memperhatikan macam-macam cookie sesi yang dimuntahkan Yahoo. Cookie B adalah satu-satunya yang selalu diset pada hampir setiap halaman tidak peduli apakah pengguna sudah login atau belum. Perhatikan bahwa khusus untuk halaman depan www.yahoo.com tidak ada cookie yang dikirim, sebab halaman depan perlu cacheable demi efisiensi bandwidth. Berikut ini cookie B tersebut:
B=8b5av24un6gl0&b=2; expires=Thu, 15 Apr 2010 20:00:00 GMT; +
path=/; domain=.yahoo.com
Tebakan saya adalah, dari nama (B) dan waktu kadaluarsa (tahun 2010) seperti ingin mengatakan bahwa ini cookie yang merekam sejarah klik sepanjang ‘perjalanan hidup’ browser di situs Yahoo. Kemungkinan besar untuk profiling ‘kelakuan’ browser. Ini diperkuat lagi dengan fine line di setiap footer Yahoo: “NOTICE: We collect personal information on this site.” Untuk apa lagi kalau bukan profil demografi iklan?
Global yahoo-id. Cookie yang diset ke browser pengguna yang sudah Sign In di Yahoo!, entah melalui Yahoo! Mail, Yahoo! Groups, atau generic Sign In dari halaman depan. Ada tiga cookie yang diset: Y, T, dan I.
Y=v=1&n=6vum4446v4v70&l=3e3o/o&p=m2cvvid611000800&ig=0p0qd&iz=12140&+
r=06&lg=us&intl=us&np=1; path=/; domain=.yahoo.com
T=z=iT0c9AiZJd9A...Qw&a=YAE&sk=DAASXYSJativnW&d=c2wBT...XQQ--; path=+
/; domain=.yahoo.com
I=ir=a2&in=33dd456d&i1=AAAlAEBFB....BCc; expires=Mon, 23 Sep 2002 13+
:23:52 GMT; path=/; domain=.yahoo.com
Cookie Y terasa seperti cookie yang sangat penting, mungkin terpesona huruf Y-nya. Tapi memang ada angka yang tidak asing di situ: 12140, yang merupakan kode pos rumah saya. Empat kali dicoba, angkanya tidak berubah, jadi bukan lucky number. Permainan terima cookie yang selektif saat Sign In menunjukkan bahwa hanya cookie Y dan T yang diperlukan untuk Sign In dengan sukses. Jadi itulah cookie sesinya. Sementara cookie I, diset untuk kadaluarsa 3 minggu setelah Sign In. Untuk apa?
Cookie Aplikasi. Cookie yang cakupannya per aplikasi, dan diset di dalam subdomain Yahoo (seperti Yahoo! Mail, Yahoo! Auction, MyYahoo, dll). Cookie ini berbeda-beda bergantung pada aplikasi apa yang dibrowse pengunjung. Misalkan pada Yahoo! Mail, saat Sign In kita akan dijejali dulu cookie Global yahoo-id Y, T, dan I. Baru setelah oke, akan diredirect ke Yahoo! Mail, yang kemudian mengeset cookie aplikasi YM.Gen:
YM.Gen="ym0=*&ymAB=id%2504190389d3%2503date%2504999089829%2503ip%2504202+
.152.27.2%2503mig%2504auth&ym1=*&ymT=1976%252c10%252c26&ymR=*&ymQ=*&ymO=+
1&ym2=p&ym3=55&ymZ=*&ymU=Dody&ym5=dody%2540yahoo.com&ym6=attach&ym7=msg&+
ym8=brief&ymS=*&ym9=200&ymA=*&ymV=Wijaya&ymB=us&ymP=*&ymC=smaller&ymD=72+
&ymE=down&ymN=*&ymY=1&ymF=*&ymM=6291456&ymW=*&ymG=short&ymH=yes&ymX=*&ym+
AD=*&ymI=yahoo&ymJ=*&ymK=ms9803&ymL=fs&ymAC=dody&ymAA=*&ymAE=0"
Hampir dapat dipastikan, ini cookie berisi preference Yahoo! Mail saya. Berbeda dengan di Google atau di ASP/PHP, nampaknya seluruh state disimpan Yahoo ke dalam cookie. Jadi bukan hanya session id-nya saja, melainkan juga seluruh variabel sesinya. Mengapa demikian, mengapa Yahoo! menaruh state ke sisi klien? Jawabannya adalah untuk upscalability. Untuk membuat server mail mampu menghandle banyak pengguna, sesedikit mungkin informasi diingat di “memori” server (baik di RAM maupun file maupun database).
W3C telah menentukan tag-tag yang akan di-phase-out penggunaannya (deprecated) karena alasan-alasan seperti eksploitasi tag untuk visual. Namun situs-situs seperti Google dan Yahoo! rupanya tidak terlalu menghiraukan, dengan terus menggunakan deprecated tag seperti <font>. Namun ini selalu diredundankan dengan penggunaan CSS. Ini semua untuk mencapai satu hal: tampilan yang konsisten.
Karena browser-browser terbaru tidak mengacuhkan <font>, dan browser-browser lama tidak mengacuhkan CSS, maka redundansi ini membuat tampilan Yahoo dan Google tampak konsisten saat diakses oleh segala macam browser. Namun melihat trennya, deprecated tag memang akan benar-benar ditinggalkan suatu saat nanti, sejalan dengan semakin sedikitnya market share browser tua.
Banner gambar memang menarik, tapi entah mengapa kita jarang mengkliknya. Sementara banner teks Google terbukti mempunyai 5 kali tingkat click through. Namun agar banner teks bisa mensimulasikan penuh behaviour banner gambar, ia perlu dapat diklik di mana saja di dalam kotak teks. Lihat Gambar 4.
Fig 4. Klik di mana saja dalam kotak untuk lihat iklan (Google)
Google mendapatkan efek ini dengan coding Javascript berikut ini:
<table bgcolor=#DDB7BA border=0 cellspacing=0 width=100%><tr><td>
<table border=0 cellpadding=3 cellspacing=0 width=100%><tr>
<td id=taw1 class=ch bgcolor=#FFF5F6 nowrap onMouseOver=
"ss('go to www.globalcar.com')" onMouseOut="cs()"
onClick="ga(this,event)"><font size=-1><a id=aw1
href=/url?q=http://www.globalcar.com/gct/index.shtml&sa=l&ai=AHWa+
...ABEA&num=1
onMouseOver="return ss('go to www.globalcar.com')" onMouseOut="cs()">
Global <b>Car</b> Locator</a><br>
<font class=f size=-2><font color=#000000>Car</font> import export. New
/ used BMW,<br>MB, Ford, Honda, Porsche and more<br><font color=green
size=-1>www.globalcar.com</font><br>Interest: <img src=/images/pos_bar.gif
width=40 height=4 align=absmiddle border=0 alt=""></font></font>
</td></tr></table></td></tr></table>
Di mana fungsi ga() adalah berikut ini:
function ga(o,e) {
if (document.getElementById) {
a=o.id.substring(1);
p="";
g=e.target;
if (g) {
t=g.id;
f=g.parentNode;
if (f) p=f.id;
} else {
t=e.srcElement.id;
}
if (t==a||p==a) return;
location.href=document.getElementById(a).href
}
}
Yang sebenarnya ingin mengatakan bila kotak (ID = taw1) diklik, cari objek yang ID-nya aw1, dan buka halaman dengan URL sesuai nilai HREF milik aw1. Kenapa tidak langsung tulis begini? Lebih singkat dan jelas:
<td ... onClick="location.href='/url?q=http://www.global...'">
Barangkali web developer Google menemukan bug pada web browser? Ada kemungkinan seperti itu, dan seperti yang saya katakan, lebih bijaksana turuti mereka.
Kotak input search yang lebar memudahkan mengedit teks query panjang. Demikian nasihat Jakob Nielsen kepada para web developer. Ini tidak saja berlaku untuk kotak input search, tapi juga berlaku buat hampir semua input form (nama, alamat, dll), yang sering sekali terlalu pendek untuk masukan dapat diedit dengan nyaman. Lihat Gambar 5, Gambar 6, dan Gambar 7.
Fig 5. Lebih mudah mengedit query yang panjang (Google)
Fig 6. Input search lebih pendek (Yahoo!)
Fig 7. Input search lebih pendek lagi (Amazon)
Lihat Gambar 1. Tombol search yang besar. Pernah berpikir mengapa mereka menulisnya “Google Search”dan bukan hanya “Go” atau “Search”? Selain untuk memperkuat brand, alasan kegunaan/usability adalah agar tombol menjadi lebih lebar. Sehingga mudah ditekan. Memang benar bahwa cara yang lebih cepat untuk mensubmit query adalah langsung menekan tombol Enter di keyboard, namun banyak pengguna Google yang tidak tahu itu.
Sebagian besar situs raksasa menggunakan kotak-kotak warna dengan outline tipis untuk mengelompokkan bagian informasi. Coba lihat 37signals.com yang box-based dan mudah dibaca. Begitu pula Yahoo! dan Google, mereka masing-masing mengekploitasi tag <table> bersarang untuk mendapatkan efek kotak outline ini. (Gambar 10, Gambar 11, Gambar 12).
Fig 10. Kotak 2 warna dengan outline tipis (Yahoo!)
Fig 11. Kotak 3 warna dengan outline tipis, dengan title (Yahoo!)
Koding HTML untuk menghasilkan ini memanfaatkan penumpukan <table> warna dasar kotak, di atas <table> warna outline, dengan pemberian offset dari cellpadding:
<table cellpadding=1 cellspacing=0 border=0 bgcolor=FDE28E><tr><td>
<table cellpadding=2 cellspacing=0 border=0 bgcolor=FFFFFF><tr><td>
...isi kotak...
</td></tr></table></td></tr></table>
Ubah 1 untuk mengatur lebar garis outline, ubah 2 untuk jarak isi kotak dari outline, ubah FDE28E untuk warna outline, ubah FFFFFF untuk warna dasar kotak.
Google tidak menggunakan halaman yang terpisah untuk stylesheet (file .css), seperti yang disarankan W3C.
<style><!--
body,td,div,.p,a{font-family:arial,sans-serif }
div,td{color:#000}
.f,.fl:link{color:#6f6f6f}
a:link,.w,a.w:link,.w a:link{color:#00c}
a:visited,.fl:visited{color:#551a8b}
a:active,.fl:active{color:#f00}
.t a:link,.t a:active,.t a:visited,.t{color:#ffffff}
.t{background-color:#224499}
.h{color:#224499;font-size:14px}
.i,.i:link{color:#a90a08}
.a,.a:link{color:#008000}
.z{display:none}
div.n {margin-top: 1ex}
.n a{font-size:10pt; color:#000}
.n .i{font-size:10pt; font-weight:bold}
.q a:visited,.q a:link,.q a:active,.q {text-decoration: none; color: #00c;}
.b{font-size: 12pt; color:#00c; font-weight:bold}
.ch{cursor:pointer;cursor:hand}
//-->
</style>
Padahal dengan menggunakan file CSS yang terpisah, file HTML bisa lebih kecil. Satu satu keuntungan yang bisa saya pikirkan dengan penyatuan CSS ke HTML adalah bahwa bila halamannya disimpan, tampilan halamannya tetap konsisten karena semua kode CSS berada di file tersebut.
Google pun tidak pernah melupakan efisiensi. Kode CSS untuk halaman depan berbeda dan lebih ringkas:
<style><!--
body,td,a,p,.h{font-family:arial,sans-serif;} .h{font-size: 20px;}+
.h{color:} .q{text-decoration:none; color:#0000cc;}
//--></style>
Google sebagai search engine makmur bukan karena dapat menahan pengunjung selama mungkin di dalam situsnya, namun karena kemampuannya “mengusir” pengunjung secepat-cepatnya dengan cara memberikan jawaban yang dicari sesegera mungkin. Filosofi dasar inilah yang kadang kurang dipahami kebanyakan webmaster, yang seringkali salah menerjemahkan kesuksesan situs sebagai statistik hit dan pageview, sehingga menghalang-halangi pengunjung untuk melakukan fungsi dasar Web: easy link ke materi yang diinginkan. Banyak situs yang memberi link bertahap dan bukan link langsung ke sasaran, banyak yang bertele-tele dengan tulisan agar semakin lama dibaca, banyak yang tidak efisien mengatur bytesize halaman sehingga lama didownload.
Bagaimana cara Yahoo! Mail dapat bertahan melayani jutaan penggunanya yang setiap hari mengirim, mengkompose, dan memanage email mereka, dengan besar total data dalam skala terabyte? Jawab: tambah jumlah komputer!
Coba login ke mail.yahoo.com, dan perhatikan URL email anda. Punya saya ada di http://us.f98.mail.yahoo.com. Catat punya Anda. Log out, lalu login lagi. URL-nya masih sama? Sekarang coba orang lain yang login, URL-nya berbedakah? Ya. Ini karena Yahoo! Mail menerapkan separasi komputer server email berdasarkan account. Setiap registrasi account email Yahoo, akan diassign ke salah satu server di dalam farm server email, yang hitungan terakhir berdasarkan netcraft.org, ada 200 lebih! Tentunya strategi ini adalah lebih baik daripada strategi load-balancing standar. Karena dengan separasi, seluruh data yang berhubungan dengan account sifatnya lokal.
Selain email, Yahoo juga melakukan separasi web server berdasarkan tipe file. Yakni, file-file image/gambar diletakkan terpisah di server lain (yimg.com), dan terpisah secara geografis. Kemungkinan di high-capacity bandwidth hosting seperti Akamai. Tujuannya tentunya adalah mengurangi beban bandwidth Yahoo. Juga, dengan pemisahan ini dimungkinkan penggunaan software webserver yang berbeda. File-file statik bisa diserve dengan jenis webserver tertentu yang kecil dan minimal misalnya.
Yahoo juga memisahkan komputer server berdasarkan aplikasi. Contoh: 8 server untuk www.yahoo.com, 1 server untuk Yahoo! Auction, 1 server untuk Yahoo! Autos, 1 server untuk Yahoo! Finance, dan seterusnya.
Availability adalah faktor utama bagi situs yang sibuk, sampai-sampai down time sesaat pun adalah sebuah dosa besar. Yahoo! tidak tanggung-tanggung menyediakan 5 dedicated name server hanya untuk tujuan meresolve nama domainnya. Ia juga melakukan round robin 8 webserver hanya untuk halaman depan Yahoo. Nama domainnya pun telah dibeli sampai dengan 2010 (dan mungkin diperpanjang jauh-jauh hari sebelum kadaluarsa, untuk menghindari risiko). Lihat Tabel 1. Begitu pula Google, dengan 4 name server, dan 9 webserver. Redundansi ini menjamin kelangsungan hidup situs mereka—yang mana adalah hidup mati mereka.
Banyak hal teknis yang bisa dipelajari dari dotcom besar, hanya dengan melihat apa yang tampak dan tersedia dengan gratis. Dari source code HTML yang memperlihatkan keterampilan trik-trik browser yang matang. Dari desain web situs yang memperlihatkan pemikiran user experience. Dari interaksi cookie yang memperlihatkan sebagian teknik pemrograman terdistribusi mereka. Dan macam-macam hal lain yang walaupun pada awalnya terkesan aneh, tapi sangat masuk akal bila konteksnya masif—dan kepuasan pengunjung dotcom adalah hidup mati sebuah perusahaan.
Dody Suria Wijaya pendiri failco.com dan usable.web.id. Saat ini tengah sibuk memanage kantornya di bilangan Taman Radio Dalam dan menyusun sebuah naskah buku. Dapat dihubungi di dody.wijaya@usable.web.id.
mw
[Last-Modified: Fri Nov 29 14:46:55 2002]
| Arsip mwmag | [Files] [Up] | www.master.web.id/mwmag |