|
|
= |
|
|
Minggu, 24 April 2011
Senin, 05 April 2010
Rabu, 31 Maret 2010
Selasa, 30 Maret 2010
Rabu, 07 Oktober 2009
reCAPTCHA : Sebuah kreatifitas memanfaatkan masalah
reCAPTCHA adalah sebuah contoh kreatifitas manusia dalam menyelesaikan suatu masalah.
Dalam dunia internet sekarang ini sudah lazim kita temukan bot (program yang diotomatisasi) untuk melakukan spam dan/atau menghabiskan sumber daya bandwidth suatu situs. Bot ini melakukan comment spam pada blog-blog, membuat beratus akun email pada penyedia email gratis, melakukan kecurangan pada polling online, dan beragam hal lain yang meresahkan. Untuk mencegahnya digunakanlah CAPTCHA.
CAPTCHA (for Completely Automated Turing Test To Tell Computers and Humans Apart) pertama dibangun pada tahun 2000 oleh Luis von Ahn, Manuel Blum, Nicholas Hopper dan John Langford dari Universitas Carnegie Mellon untuk digunakan oleh Yahoo. CAPTCHA bekerja dengan cara membuat tes yang bisa dijawab oleh manusia tetapi tidak bisa dilewati oleh komputer, contohnya dengan membuat gambar teks yang terditorsi. Manusia mampu membaca teks tersebut tetapi (saat ini) komputer belum bisa membacanya dengan tepat.
Sekitar 200 juta CAPTCHA setiap hari berhasil dijawab oleh manusia. Dengan asumsi 1 CAPTCHA membutuhkan 10 detik untuk menjawabnya, maka akumulasi semua waktu tersebut sama dengan sekitar 150 ribu jam kerja. Sebuah hal yang disayangkan bila waktu sebanyak itu terbuang percuma.
reCAPTCHA memanfaatkan usaha manusia membaca tulisan CAPTCHA untuk membaca buku.
Memanfaatkan CAPTCHA untuk membaca buku?
Untuk mengarsipkan pengetahuan manusia dan agar memudahkan informasi tersebut diakses dunia, sekarang ini banyak proyek yang dilakukan untuk mendigitalisasikan buku-buku yang ditulis sebelum jaman komputer. Halaman per halaman buku tersebut di scanning menjadi bentuk gambar dan menggunakan aplikasi OCR (Optical Character Recognition) di rubah menjadi bentuk text. Hal ini dilakukan karena bentuk text lebih kecil ukurannya sehingga lebih mudah disimpan dan di download dan bisa dicari.
Permasalahannya adalah OCR tidaklah sempurna. Lihat gambar dibawah:
reCAPTCHA meningkatkan proses digitasi buku-buku tersebut dengan mengirim kata-kata yang tidak bisa dibaca oleh komputer ke web dalam bentuk CAPTCHA agar bisa diterjemahkan oleh manusia.
Permasalahan yang muncul adalah bagaimana komputer bisa menyatakan user telah memasukkan kata yang benar padahal komputer sendiri tidak bisa membaca CAPTCHA tersebut?
Jawabannya adalah dengan menggunakan dua buah kata.
Satu kata sudah diketahui kebenarannya sedangkan satu kata yang lain adalah kata yang ingin diterjemahkan. Bila user benar pada kata yang sudah diketahui, maka kata yang diterjemahkan diasumsikan benar. Sehingga user dianggap telah mengetikkan CAPTCHA yang benar. Kemudian kata yang diterjemahkan diajukan lagi kebeberapa user lain sehingga cukup keyakinan bahwa terjemahan user pertama tadi adalah benar.
Saat artikel ini ditulis, reCAPTCHA sedang menerjemahkan edisi koran New York Times.
Untuk anda yang tertarik mendapatkan fasilitas CAPTCHA gratis sekaligus membantu proyek reCAPTCHA silahkan menuju ke situs reCAPTCHA.
nb: Saya berharap ada yang mau membuat proyek semacam reCAPTCHA ini dalam mendigitasikan kitab-kitab ulama jaman dahulu agar bisa diwariskan ke anak cucu kita mendatang.
Minggu, 09 Agustus 2009
Membuat list menjadi lebih indah (lanjutan)
Kita telah berhasil membuat list menjadi lebih indah
dengan menambahkan sedikit kode css. Sekarang kita lanjutkan dengan manfaat CSS tersebut untuk menampilkan efek seperti dibawah:
Yang kita lakukan adalah dengan menambah beberapa kode pada listing kita. Perhatikan listing berikut:
<ul id="submenu">
<li>
<a href="http://sexyclimate.blogspot.com/search/label/Tips%20Komputer?&max-results=5">
Tips Komputer<span>
Beberapa catatan dan pengalaman pribadi.
Mudah-mudahan ada yang bisa bermanfaat juga buat anda</span>
</a>
</li>
<li>
<a href="http://sexyclimate.blogspot.com/search/label/Tips%20Handphone?&max-results=5">
Tips Handphone<span>
Beberapa catatan tentang handphone.
Tips pemeliharaan dan semacamnya</span>
</a>
</li>
<li>
<a href="http://sexyclimate.blogspot.com/search/label/Tutorial%20Menggambar?&max-results=5">
Tutorial Menggambar<span>
Beberapa tutorial menggambar.
Sekedar menghilangkan kejenuhan</span>
</a>
</li>
<li>
<a href="http://sexyclimate.blogspot.com/search/label/Tips%20Blogger?&max-results=5">
Tips Blogger<span>
Tips mengutak-atik template Blogger.
Sebenarnya tidak ada rencana membuat tips ini, tapi karena suka mengutak-atik template blogger tapi sering lupa tips-nya jadi dituliskan disini juga. Mudah-mudahan ada yang bermanfaat buat anda</span>
</a>
</li>
<li>
<a href="http://sexyclimate.blogspot.com/search/label/Tips%20Game?&max-results=5">
Tips Game<span>
Refreshing di dunia fantasy.<br />
Beberapa koleksi tips bermain game yang saya punyai</span>
</a>
</li>
</ul>
Perhatikan pada listing diatas kita menambahkan kalimat diapit tag <span> </span> , kalimat itulah yang akan muncul bila kita hover mouse (sorry, belum ketemu kata yang tepat pengganti hover)ke item di listing. Baris pertama akan diperbesar, sehingga perlu kita berikan tag <br /> agar kalimat selanjutnya berada di baris selanjutnya. Misalkan contoh:
<li>
<a href="http://sexyclimate.blogspot.com/search/label/Tips%20Game?&max-results=5">
Tips Game<span>
Refreshing di dunia fantasy.<br />
Beberapa koleksi tips bermain game yang saya punyai</span>
</a>
</li>
</ul>
Rabu, 05 Agustus 2009
Membuat list menjadi lebih indah
Listing dalam HTML didapatkan dengan memakai tag <ul> untuk unordered list. Berikut adalah contoh tampilan listing unordered yang biasa:
Didapatkan dengan menggunakan listing:
<ul>
<li><a href="http://sexyclimate.blogspot.com/search/label/Download%20Theme%20Handphone?&max-results=5">Download Theme Handphone</a></li>
<li><a href="http://sexyclimate.blogspot.com/search/label/Download%20Aplikasi%20Handphone?&max-results=5">Download Aplikasi Handphone</a> </li>
<li><a href="http://sexyclimate.blogspot.com/search/label/download%20ringtone%20handphone?&max-results=5">Download Ringtone Handphone</a> </li>
<li><a href="http://sexyclimate.blogspot.com/search/label/Download%20Game%20Handphone?&max-results=5">Download Game Handphone</a></li>
<li><a href="http://sexyclimate.blogspot.com/search/label/Download%20Aplikasi%20Komputer?&max-results=5">Download Aplikasi Komputer</a> </li>
<li><a href="http://sexyclimate.blogspot.com/search/label/Download%20Game%20Komputer?&max-results=5">Download Game Komputer</a></li>
<li><a href="http://sexyclimate.blogspot.com/search/label/Download%20e-book%20gratis?&max-results=5">Download e-book gratis</a></li>
<li><a href="http://sexyclimate.blogspot.com/search/label/Download%20wallpaper?&max-results=5">Download wallpaper</a></li>
</ul>
Kita akan menggunakan CSS agar listing menjadi seperti dibawah ini
Caranya pada template blogger sebelum </b:skin> kita masukkan CSS berikut ini:
/*ini kasan submenu nya */
#submenu a span {display:none;}
#submenu a:hover span {display:block; position:absolute;left:16em; top:0;
text-align:left; padding:0.5em;width:24em; background-color:#fff;
color:#000; border:1px solid #006699;
}
#submenu a:hover span:first-line {
font-weight:bold;
font-size:1.2em;
background-color:#fff;
color:#069;
}
#submenu {position:relative;padding:0; margin:0;width:0;}
#submenu li {list-style-type:none;margin:0 0 0.25em 0;}
#submenu a, #submenu a:visited {
display:block;
width:15em;
border:1px solid #006699;
font-family:arial, verdana, sans-serif;
font-size:0.8em;
text-align:center;
text-decoration:none;
background:#006699;
color:#fff;
padding:0.25em;
}
/*tuntung submenu nya */
Kemudian pada listing tadi kita tambahkan id="submenu" sehingga listing menjadi:
<ul id="submenu">
Listing kita akan menampilkan:
Hal yang sama juga kita dapatkan pada ordered list dengan cara yang sama, cukup tambahkan id="submenu" setelah tag <ol>
<ol id="submenu">CSS diatas mempunyai kemampuan tambahan yang insya Allah akan kita pelajari bersama pada tips berikutnya.
![Reblog this post [with Zemanta]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_vpQBdWu7l84Ggj_AuuV6IzqEMxbWwtDdh3az26nggHan8UHXet5_YE8XauuczdSofKP7YREhmHZRwCHD6jQSfnGvlUSLbp8TD5SXxddi5LGXhQGFZBx_SizvmckjNgH9uLUmYPNVvKYF3-x_Vw_TNn=s0-d)
Langganan:
Postingan (Atom)