Menjelang pertengahan Februari kemarin, Facebook mengumumkan bahwa Facebook chat sekarang bisa diakses melalui XMPP/Jabber client. Dengan protokol yang lebih terbuka ini, maka kita bisa mengakses Facebook Chat dari berbagai aplikasi IM client tanpa harus login dari web Facebook.

XMPP/Jabber adalah protokol terbuka untuk instant messaging (IM). Aplikasi populer yang menggunakan protokol ini adalah Gtalk, kemudian sekarang disusul oleh Facebook. Pengaplikasiannya sangat luas, bahkan bisa juga digunakan dilingkungan internal dengan menggunakan domain sendiri.

Kembali ke Facebook Chat, untuk mengetahui bagaimana pengaturan IM client agar bisa mengakses Facebook Chat, bisa dilihat disini. Pada halaman tersebut disebutkan konfigurasi untuk macam-macam IM client seperti Pidgin, Adium, iChat, dll. secara umum, konfigurasi account-nya seperti ini:

1
2
3
4
5

Protocol: XMPP or Jabber
Username: username
Domain: chat.facebook.com
Jabber ID: username@chat.facebook.com
Password:<password anda>

Ganti username dan password dengan username dan password yang anda gunakan. Apabila belum membuat username untuk account Facebook anda, silakan membuatnya dulu dengan mengakses halaman berikut.Sedangkan untuk server info-nya dengan konfigurasi sebagai berikut:

1
2
3
4

Port: 5222
Server: chat.facebook.com
Use SSL/TLS: no
Allow Plaintext Authentication: no

Silakan sesuaikan pengaturan diatas dengan IM client yang anda gunakan. apabila mengalami kesulitan atau pertanyaan, anda bisa mengakses Facebook Help Center untuk chat disini.

Dengan menggunakan protokol  terbuka seperti XMPP ini, sekarang kita lebih bebas memilih aplikasi yang digunakan untuk chat di Facebook, tidak terpatok harus dari web (yang menurut saya sangat tidak nyaman).  Selamat Mencoba.

Tulisan lain yang mungkin berkaitan:

• Membalas komentar Facebook melalui Email
• Mengamankan Username
• Facebook Photo Tagging Abuser
• Facebook "Likes"

Saat ini mesin blog WordPress telah tersedia dalam berbagai bahasa, termasuk Bahasa Indonesia, namun secara umum instalasi WordPress biasanya menggunakan Bahasa Inggris, termasuk apabila anda menginstallnya melalui aplikasi autoinstaller yang ada pada fasilitas web hosting. Nah bagaimana caranya menambahkan/merubah instalasi WordPress agar menjadi berbahasa Indonesia? berikut akan saya jelaskan langkah-langkahnya.

Ada dua cara untuk menjadikan WordPress berbahasa Indonesia, yang pertama adalah dengan menginstall ulang WordPress dengan instalasi baru yang berbahasa Indonesia, berkasnya bisa diunduh disini. untuk cara instalasinya bisa ditemukan pula pada web yang sama.

Cara kedua adalah menambahkan paket (berkas) bahasa Indonesia pada instalasi WordPress yang sudah ada (berbahasa Inggris), cara ini terhitung lebih aman dan mudah dibanding dengan menginstall kembali aplikasi WordPress yang baru.

Langkah pertama adalah mengunduh berkas id_ID.mo (paket bahasa) untuk bahasa Indonesia disini. Kemudian buat sebuah direktori baru bernama /languages dalam direktori /wp-contents pada instalasi WordPress anda, unggah berkas id_ID.mo tadi ke dalam direktori /wp-contents/languages yang telah anda buat sebelumnya. Untuk mengatur berkas dan direktori pada server bisa melakukannya melalui klien FTP seperti FileZilla maupun melalui pengelola berkas berbasis web.

Setelah berkas selesai diunggah, langkah berikutnya adalah membuka dan mengedit berkas wp-config.php yang ada di root instalasi WordPress, kemudian cari baris berikut:

1

define ('WPLANG', '');

Setelah itu, rubah baris tadi menjadi:

1

define ('WPLANG', 'id_ID');

nama id_ID adalah identifikasi untuk Bahasa Indonesia, bagian ini bisa diganti sesuai kebutuhan dengan bahasa lain, tentu saja dengan menyertakan berkas .mo sesuai bahasa yang akan digunakan.

Seteleah selesai mengubah berkas wp-config.php tadi, simpanlah perubahannya, selesai! sekarang instalasi WordPress anda telah berubah menjadi Bahasa Indonesia, perubahan bahasa ini berpengaruh pula pada penamaan hari, tanggal dan bulan pada blog, juga untuk beberapa komponen lain menjadi tersesuaikan menjadi berbahasa Indonesia. cukup mudah bukan? selamat mencoba.

Tulisan lain yang mungkin berkaitan:

• Pindahan
• Lifestream
• Google Chrome Terdeteksi Sebagai Safari
• Blog Stats Tidak Berfungsi

Pada tulisan sebelumnya beberapa waktu lalu, saya sempat mengeluhkan mengenai plugin Browser Sniff yang tidak bisa mendeteksi peramban (browser) Google Chrome saya, setiap kali menggunakan Google Chrome, plugin tersebut mendeteksinya sebagai Safari yang berjalan pada sistem operasi Mac OS X, padahal kadang saya menggunakan Google Chrome versi Linux atau Windows. Hal ini terjadi karena sang pembuat plugin yaitu om Priyadi tidak memperbaharui plugin buatannya itu, sehingga belum bisa mendeteksi peramban Google Chrome yang terhitung baru, dia mendeteksi sebagai Safari karena masih menggunakan render engine yang sama yaitu WebKit. Selain itu, sistem operasi terbaru dari Microsoft yaitu Windows 7 belum terdeteksi oleh plugin ini.

Barusan saya iseng-iseng buka berkas plugin Browser Sniff yang hanya terdiri dari satu buah berkas PHP, ceritanya pengen nyobain otak-atik, siapa tahu bisa  memperbaiki ‘bug’ tersebut, setelah beberapa menit melototin kode PHP (yang sama sekali tidak saya mengerti), bermodal logika kecil-kecilan saya simpulkan saja kalau ingin mendeteksi suatu sistem operasi maupun peramban baru, tinggal menambahkan saja entri baru ke barisan kode tersebut, bedanya tinggal bedakan saja “identifier” dari entri tersebut. Setiap peramban memiliki user agent yang bisa memberitahukan jenis peramban, versi maupun sistem operasi yang digunakan, dari data user agent inilah plugin Browser Sniff mengambil data untuk ditampilkan di bagian komentar pada suatu blog berbasis WordPress. nah jika kita ingin menambahkan entri baru, tinggal masukan saja identifier peramban dan sistem operasi yang baru ke entri tersebut, sehingga peramban dan sistem operasi baru bisa dikenali oleh plugin ini.

Langsung saja ke langkah editing, untuk menambahkan fungsi agar bisa mendeteksi peramban Google Chrome, cukup menambahkan baris kode berikut ke berkas:

1
2
3
4
5
6
7
8
9

} elseif (preg_match('#Chrome/([a-zA-Z0-9.]+)#i', $ua, $matches)) {
		$browser_name = 'Google Chrome';
		$browser_code = 'chrome';
		$browser_ver = $matches[1];
		if (preg_match('/Windows/i', $ua)) {
			list($os_name, $os_code, $os_ver) = pri_windows_detect_os($ua);
		} else {
			list($os_name, $os_code, $os_ver) = pri_unix_detect_os($ua);
		}

Nah sekarang tinggal memasukan kode agar plugin tersebut juga bisa mendeteksi sistem operasi Windows 7, kodenya sebagai berikut:

1
2
3
4

} elseif (preg_match('/Windows NT 6.1/i', $ua)) {
		$os_name = "Windows";
		$os_code = "windows";
		$os_ver = "7";

Perhatikan identifier kernel untuk Windows 7 adalah Windows NT 6.1, sehingga apabila user agent peramban memberikan data kernel tersebut, maka akan dikenali sebagai Windows 7. sekarang mari kita lihat hasilnya, setelah di otak atik kodenya, ternyata Browser Sniff berhasil mendeteksi peramban Google Chrome dan sistem operasi Windows 7 seperti terlihat di gambar berikut:

Browser Sniff bisa mendeteksi Google Chrome dan Windows 7

Cukup mudah bukan? anda bisa memasukan/mengetikan kode-tersebut di berkas plugin Browser Sniff dengan menggunakan plugin editor yang ada di WordPress maupun editor teks lainnya, atau jika masih bingung dan takut salah mau menyisipkannya dimana? silakan unduh berkasnya yang telah saya perbaharui disini. selamat mencoba.

Tulisan lain yang mungkin berkaitan:

• HTML5 Video Player
• Google Chrome Terdeteksi Sebagai Safari
• Lifestream
• Google Chrome For Mac & Linux Dirilis

Facebook sekarang telah menjadi layanan jejaring terbesar di dunia, sudah ratusan juta orang telah terdaftar sebagai anggotanya dari seantero bumi. ‘main’ Facebook memang mengasyikan, kita bisa saling terhubung dengan teman-teman, salah satu bentuk interaksinya adalah komentar pada post yang kita kirim, misall wall, foto, video, dll.

Ketika kita mengomentari suatu post atau post yang kita kirimkan ada yang mengomentari, biasanya Facebook memberikan notifikasi berupa email kepada kita, hal ini sebenarnya cukup berguna sekaligus juga menganggu. berguna karena kita diberi tahu bahwa post kita ada yang menanggapi sehingga kita bisa dengan segera mengeceknya, namun disisi lain notifikasi ini cukup menganggu, apalagi jika post kita dikomentari oleh banyak orang, bisa-bisa inbox di email kita penuh oleh notifikasi ini dan akhirnya kita merasa kalau email notifikasi ini tidak lebih dari sampah (spam), lagipula kita masih bisa melihat notifikasi dari statusbar di bagian kanan bawah halaman situs Facebook. Namun jika anda sekarang masih menganggap email tersebut sampah dan tidak berguna, coba pikirkan lagi, karena facebook punya fitur baru yang akan membuat email notifikasi tersebut lebih “berguna”.

Kemarin (13/01/2010) Facebook mengumumkan suatu fitur baru dari layanan jejaring sosial ini, yaitu membalas komentar melalui email. bagaimana caranya? cukup mudah, setiap notifikasi pasti dikirim berupa satu email tunggal, untuk membalas komentar dari notifikasi itu cukup tekan tombol “reply” pada aplikasi pengelola email anda layaknya membalas email biasa, setelah itu anda tinggal menuliskan balasan anda disitu dan kirim “send”. yah… memang semudah itu, semudah membalas email biasa saja, tidak ada format khusus untuk membalasnya, Facebook akan otomatis memasukannya ke post yang sedang dikomentari. untuk gambarannya bisa dilihat pada ilustrasi dibawah ini:

Nah, dengan adanya fitur baru ini, setidaknya email yang kita terima dari Facebook akan sedikit lebih berguna, kita bisa menggunakannya untuk membalas komentar tanpa harus masuk ke situs facebooknya sendiri, apalagi jika situs facebook di blokir di tempat anda namun masih bisa berinteraksi dengan teman-teman melalui email ini, fitur ini juga sangat terasa gunanya bagi anda pengguna layanan push mail, karena lebih mudah membalasnya melalui email. Jika anda sebelumnya mematikan fasilitas notifikasi email, tidak ada salahnya mengaktifkannya kembali dan mencoba fitur ini. selamat mencoba.

Tulisan lain yang mungkin berkaitan:

• Chat Facebook dengan XMPP/Jabber Client
• Mengamankan Username
• Facebook Photo Tagging Abuser
• Facebook "Likes"

Mumpung lagi semangat bikin tutorial nih, sekalian saja sekarang saya lanjutkan tutorial singkat CSS-nya. kali ini kita akan belajar membuat text effect sederhana dengan CSS. text effect yang akan kita coba adalah text shadow, dengan menambahkan properti text-shadow pada selector, maka text yang terpilih akan ditambahkan efek berupa bayang2 di bagian belakangnya.

Simple Shadow Effect

Untuk tutorial pertama kita akan membuat efek bayangan sederhana, anggap saja text yang ingin kita beri bayangan adalah text “Hielmy Zaenun Nafsi” dengan format h1, bayangan yang diinginkan berupa bayangan sebesar 2 pixel ke kanan bawah berwarna abu-abu. caranya cukup menambahkan kode CSS sebagai berikut:

1
2
3

h1 {
text-shadow: 2px 2px grey;
}

Angka 2px pertama merupakan pergeseran bayangan sebanyak 2 pixel ke kanan, jika ingin bergeser ke kiri anda tinggal memasukan angka negatif, misal -2px. sedangkan 2px kedua menunjukan pergeseran 2 pixel kebawah, jika ingin merubah arahnya tinggal tambahkan angka negatif juga. grey sendiri adalah keterangan warna bayangan, warna bayangan bisa ditulis dengan nama warna seperti grey, blue, red, dll. atau dengan kode hex misal #a3a3a3. Intinya format penulisannya seperti ini {text-shadow: (koordinat-X) (koordinat-Y) (radius blur) (warna)}. Ketika dirender di browser maka hasilnya akan seperti berikut:

Neon Light Effect

Dengan sedikit variasi, shadow effect bisa dikreasikan menjadi efek lain, misal efek lampu neon pada text. contohnya seperti berikut:

Untuk membuat efek seperti itu, cukup membuat kode CSS sebagai berikut:

1
2
3

h1 {
text-shadow: 0px 0px 7px #FF0000;
}

untuk membuat efek lampu neon, bayangan harus berada sejajar dengan text utama, oleh karena itu kedua angka pertama biarkan dalam posisi 0px, kemudian untuk angka ketiga yaitu 7px merupakan angka tingkat kekaburan bayangan (blur radius). kode #FF0000 adalah kode hex untuk warna merah.

Emboss Effect

Efek ketiga yang akan kita coba adalah efek emboss atau seperti huruf timbul. namun untuk menerapkan efek ini, kita harus bermain dengan 3 unsur yaitu warna huruf, bayangan dan latar belakang. ketiga bagian tersebut harus disesuaikan warnanya agar tercipta efek emboss yang diinginkan. contoh efek emboss pada huruf sebagai berikut:

Untuk membuat efek seperti diatas, buatlah kode CSS seperti berikut:

1
2
3
4
5
6
7

body {
background: #ccc;
}
h1 {
color:#ccc;
text-shadow: -1px -1px #fffff, 1px 1px #333;
}

karena harus menyesuaikan dengan warna background juga maka warna pada body ataupun bagian lain yang menjadi tempat text itu berada harus ditentukan pula warnanya, pada contoh ini warna background pada body adalah #ccc, kemudian warna text h1 pun harus disamakan yaitu #ccc, nah sekarang agar efek timbul itu bisa tercipta dibutuhkan dua buah bayangan, oleh karena itu pada properties text-shadow diatas, value untuk shadow dibuat dua buah yang dipisahkan dengan tanda koma, keduanya mengarah ke arah yang berbeda, yang satu di set -1px -1px dengan warna #ffffff (putih), sedangkan yang satu 1px 1px dengan warna #333, dengan kombinasi tersebut maka akan tercipta efek emboss atau text timbul.

Shadow effect ini mulai diimplementasikan pada CSS3, oleh karena itu, efek ini hanya akan bisa ditampilkan dengan baik oleh browser yang mendukung CSS3 secara penuh, apabila anda membukanya dengan browser yang sudah “uzur” kemungkinan besar tampilannya akan berantakan.

Akhir kata, semoga tutorial ini bisa bermanfaat bagi anda, mohon maaf kalau banyak kekurangan, namanya juga masih belajar

Selamat Mencoba…

Tulisan lain yang mungkin berkaitan:

• Chat Facebook dengan XMPP/Jabber Client
• Membalas komentar Facebook melalui Email
• Membuat Rounded Box dengan CSS
• Facebook Photo Tagging Abuser

Jika anda menggunakan browser Mozilla Firefox, Safari, atau Google Chrome, ketika anda melewatkan kursor pada salahsatu menu navigasi yang ada diatas (home, about, dll) pasti tombol pada menu tersebut akan menampilkan background kotak merah dengan sudut yang agak membulat. kotak warna merah tersebut bukanlah sebuah image, melainkan hasil render dari style yang sudah ditentukan dari stylesheet theme blog ini. untuk membuatnya cukup dengan menuliskan beberapa baris kode pada stylesheet (CSS) dari halaman web.

Saya bukan web designer dan pengetahuan saya tentang HTML+CSS masih sangat minim, tp saya hanya ingin berbagi sedikit tips untuk membuat hover button dengan rounded box (kotak dengan pinggiran membulat). kita asumsikan kita akan membuat sebuah link yang ketika dilewati kursor (hover) akan berubah menjadi bentuk tombol dengan rounded corner. kode HTML untuk linknya misal sebagai berikut:

<a href="http://blog.hielmy.web.id">Mie's Notes</a>

Nah sekarang mari kita buat stylesheet untuk hover button-nya, dalam syntax HTML tag untuk link adalah antara <a> maka kita harus membuat selektor untuk tag <a> ini, kemudian diberi properties untuk jenis huruf dan warna text. secara default, sebuah link akan diberi garis bawah, untuk menghilangkannya bisa ditambahkan properties text-decoration:none;, berikut kode lengkapnya:

a {
color: black;
font-family: georgia;
text-decoration:none;
}

Nah sekarang kita buat stylesheet untuk hover button-nya dengan membuat lagi selektor a:hover. kita asumsikan ketika kursor lewat, tombol tersebut akan berwarna merah dan text akan berubah warna menjadi putih, agar kotak tersebut tidak terlalu mepet ke text, maka perlu diberi jarak misal 5 pixel dengan menambahkan properties padding:5px;. berikut kode CSS-nya:

a:hover {
color:white;
background-color: red;
padding: 5px;
}

Sebenarnya sampai sini anda sudah bisa membuat sebuah hover button untuk link, namun jika anda ingin tampilan yang lebih artistik dengan sudut kotak yang membulat, maka kita bisa tambahkan properties pada selektor a:hover sebagai berikut:

-moz-border-radius: 5px;
-webkit-border-radius: 5px:

Penambahan properties border-radius akan membuat browser merender kotak tersebut menjadi membulat (rounded), angka 5px adalah ukuran bulatan dalam satuan pixel. namun yang perlu diingat, agar rounded box ini bisa dirender dengan benar oleh browser, maka kita harus menuliskan secara spesifik browser engine untuk properties ini yaitu -moz untuk keluarga Mozilla (yang menggunakan engine Gecko), dan -webkit untuk browser yang menggunakan engine WebKit seperti Safari dan Chrome.

Opera sendiri secara native belum mendukung properties border-radius ini, jadi jika kita membukanya dengan Opera kotak tersebut akan tetap bersudut lancip. untuk mengatasinya, kita bisa menggunakan SVG sebagai alternatif background box. SVG adalah gambar vector yang dihasilkan dengan menggunakan kode XML, untuk membuatnya tidak perlu bersusah payah mempelajari bahasa XML, cukup dengan menggunakan Rounded corner SVG Generator yang bisa diakses disini. setelah jadi copy kode yang ada di bagian CSS with SVG output ke selector a:hover pada stylesheet kita, seperti berikut:

a:hover {
color:white;
background-color: red;
padding: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px:
background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IGZpbGw9IiNGRkYiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48cmVjdCBmaWxsPSJyZWQiIHJ4PSI2IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIi8+PC9zdmc+);
}

berikut adalah kode lengkap untuk HTML dan CSS dari contoh diatas:

 
<!--
a {
color:black;
font-family:georgia;
text-decoration:none;
padding:5px;
}
 
a:hover {
color:white;
background-color: red;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-image: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IGZpbGw9IiNGRkYiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48cmVjdCBmaWxsPSJyZWQiIHJ4PSI2IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIi8+PC9zdmc+);
}
-->
 
<a href="http://blog.hielmy.web.id">Mie's Notes</a>

Nah jika anda ingin tahu seperti apa hasilnya, silakan klik DISINI.

Dengan demikian, hampir semua browser populer bisa membuka desain kita dengan benar, kecuali Internet Explorer 6, saya sudah mencobanya dan properties SVG pun tidak bisa di render dengan baik, makanya saya tidak menyarankan membukanya dengan menggunakan IE 6.

Itulah tutorial singkat dan tidak jelas dari saya, mohon maaf kalau banyak kesalahan, saya masih sangat awam dalam HTML+CSS, saya hanya ingin berbagi, semoga bermanfaat

Tulisan lain yang mungkin berkaitan:

• Membuat Text Effect Dengan CSS
• Chat Facebook dengan XMPP/Jabber Client
• WordPress Berbahasa Indonesia
• Membalas komentar Facebook melalui Email