Arsip Kategori ‘Article’

Introducing Gmail Priority Inbox

2 September 2010

Gmail Priority InboxBagi mereka yang banyak berinteraksi melalui internet, email tentu menjadi hal yang tidak bisa lepas dari aktivitas sehari-hari. Terkadang ketika jumlah email yang masuk mencapai puluhan atau bahkan ratusan per harinya bisa membuat kita melewatkan satu atau beberapa email penting (saya pribadi sih paling gatel kalo ada unread message di inbox saya :p)

Hal ini tidak luput dari perhatian tim pengembang Google yang merilis Gmail Priority Inbox beta. Ini adalah fitur baru dari gmail/google apps,

Fitur ini mengklasifikasikan message menjadi “Important and Unread”, “Starred” dan “Everything Else” secara berurutan. Tentu jika kita tidak berkenan dengan perlakuan tersebut, kita bisa kembali ke urutan semula dengan mengklik “Inbox”

Bagaimana Gmail melakukannya?

Gmail Priority InboxServer Gmail akan mengidentifikasi pesan email mana yang dikategorikan penting, bisa dari history alamat email yang pernah kita kirim, chat yang paling sering dan seberapa sering kita berkomunikasi via email dan juga beberapa kata kunci yang sering disebut dalam email yang kita baca.

Baca selengkapnya di sini


Bermain dengan Style Message Box

18 August 2010

Di era web 2.0 sekarang, memunculkan pesan kepada pengguna setelah melakukan satu eksekusi adalah satu hal yang diperlukan. Para developer wordpress plugin juga semestinya melakukan hal ini terhadap plugin yang dikembangkannya.

Di dasbor wordpress sering kita jumpai informasi yang muncul di atas halaman (contohnya: informasi mengenai adanya wordpress versi terbaru). Bagi para developer, hal ini berguna untuk meng-generate error atau pesan lainnya tanpa perlu membuat style tambahan.

Output untuk message box pada wordpress di-generate sebagai berikut:

<div id="message" class="updated">
  <p>
    Output
  </p>
</div>

Message yang di-generate untuk keperluan (misalnya) plugin, tentu memuat informasi yang berbeda. Untuk itu, wordpress sendiri memiliki beberapa class stylesheet untuk message box tersebut. Berikut adalah beberapa class yang bisa digunakan…

<div id="message" class="updated">...</div>

Class Updated

<div id="message" class="error">...</div>

Class Error

<div id="message" class="updated highlight">...</div>

Class Highlight

<div id="message" class="updated below-h2">...</div>

Class Below

Catatan:
Sebaiknya tidak menggunakan format sendiri, karena secara psikologis, dengan menggunakan format yang terintegarsi dengan wordpress akan membuat plugin yang dikembangkan menjadi lebih “terpercaya”.

Sumber: wpengineer


Mencegah Klien Mengubah Theme WordPress

4 August 2010

Ketika kita menggunakan wordpress untuk proyek-proyek pembangunan website, terkadang kita menjumpai klien (yang notabene “awam”) yang begitu “kreatif” mengeksplorasi halaman wordpress admin, sehingga tanpa sengaja mengganti/switch theme menjadi theme default tanpa dia sadari.

Untuk mencegah kasus seperti itu, sedikit tips dari soulsizzle.com bisa menjadi alternatif pemecahannya.

Tambahkan kode berikut pada file functions.php anda:

add_action('admin_init', 'remove_theme_menus');
function remove_theme_menus() {
	global $submenu;	

	unset($submenu['themes.php'][5]);
	unset($submenu['themes.php'][15]);
}

Unit PNG Fix: Alternatif Siasat untuk Mengatasi Masalah PNG Transparan pada IE 6

3 August 2010

Tempo hari, saya pernah membahas mengenai PNG Transparan untuk Windows IE 5.5 dan 6. Di situ saya menggunakan jquery.pngFix.js untuk mengatasi permasalahan transparansi file PNG untuk IE 6 ke bawah. Namun ternyata, siasat tersebut terbentur ketika kita menggunakan file png untuk background repeat.
Setelah saya coba cari lagi, saya menemukan solusi yang terbaik (saat ini) untuk mengatasi permasalahan png transparan pada IE 6 ke bawah ini, yaitu unitpngfix.
Berikut adalah beberapa fakta, mengapa saya merekomendasikan unitpngfix ini:

  • Javascript yang dipakai terbilang ringan (kurang dari 2kb!).
  • Menyelesaikan masalah yang diakibatkan oleh atribut filter IE.
  • Bisa diimplementasikan untuk objek img dan background-
  • image.
  • Berjalan secara otomatis sebelum halaman di-load untuk semua elemen atau elemen tertentu.
  • Bisa dipakai untuk elemen auto width dan auto height.
  • Mudah dalam hal deployment atau teknis pemakaiannya.

Demo

Contoh PNG

Petunjuk Pemakaian

  1. Unduh file unigpngfix.zip di sini.
  2. Sisipkan tag berikut pada header (antara tag <head> dan </head>)
    <!--[if lt IE 7]>
            <script type="text/javascript" src="unitpngfix.js"></script>
    <![endif]-->
    
  3. Unggah file clear.gif ke folder images Anda. Bukalah unitpngfix.js lalu sesuaikan path dengan directory tempat file clear.gif diunggah.
  4. Secara default, unigpngfix akan bekerja pada semua gambar PNG di halaman situs Anda, namun jika dibutuhkan untuk beberapa elemen tertentu, Anda cukup menambahkan class="unitPng" pada elemen yang dibutuhkan. Penambahan class tersebut akan membuat unigpngfix hanya bekerja pada elemen yang memiliki class tersebut.

That’s it! Mulai sekarang Anda tidak akan menganggap Internet Explorer “hanya” sebagai tool untuk mengunduh Mozilla Firefox saja :p

Note:
Bagi pengguna wordpress, Unit PNG Fix ini sudah bisa digunakan dalam bentuk plugin (Unduh di sini).


Memodifikasi Tampilan Plugin WP-PageNavi pada WordPress

15 July 2010

Bagi mereka yang bosan sama tampilan navigasi default wordpress yang hanya menampilkan Older Entries dan Newer Entries, sudah tentu mereka bakal menambahkan plugin WP-PageNavi yang membuat tampilan navigasi paging menjadi lebih variatif dan user-friendly.

Page Navi Default

Tampilan PageNavi default tersebut bisa dimodifikasi agar lebih atraktif dengan cara mengedit file pagenavi-css.css sesuai keinginan kita. Saya pun mencoba memodifikasinya, terinspirasi oleh navigasi paging yang ada di halaman eRepublik (game online berbasis web yang aktif saya mainkan 2 tahun terakhir).

Pertama-tama, Anda membutuhkan 4 file gambar untuk first, last, previous dan next link-nya.

Unggahlah keempat gambar tadi ke server hosting Anda.

Selanjutnya, ubahlah setting plugin PageNavi yang bisa diakses dari Settings > PageNavi. Ubahlah value yang ada pada Text For First Page, Text For Last Page, Text For Previous Page dan Text For Next Page dengan kode html untuk memanggil gambar. Misalnya, untuk mengganti value yang ada pada Text For First Page, gunakan tag berikut:

<img src="http://domainanda.com/images/first.png" />

PageNavi Setting

Note: Sesuaikan url gambar dengan tempat directory kemana kita mengunggah gambar-gambar tadi.

Terakhir, Sesuaikan tampilan dengan sedikit memodifikasi file pagenavi-css.css dan jadilah tampilan navigasi paging yang kita inginkan.

PageNavi


Membuat Modul Pencarian WordPress Berlaku untuk Postingan Saja

14 July 2010

Ketika pengunjung blog melakukan pencarian melalui search form, kemungkinan besar apa yang mereka cari adalah postingan blog, bukan content static page. Modul pencarian WordPress secara otomatis akan meng-query keduanya, baik postingan maupun static page.

Untuk membuat hasil pencarian hanya berlaku terhadap postingan saja, Anda bisa menambahkan sedikit code pada file functions.php Anda.

function SearchFilter($query) {
    if ($query->is_search) {
        $query->set('post_type', 'post');
    }
    return $query;
}

add_filter('pre_get_posts','SearchFilter');

Dengan tambahan code di atas, maka engine akan melakukan pencarian untuk postingan (post_type) saja. Jika Anda membutuhkan hal yang sebaliknya, Anda hanya perlu mengubah post_type menjadi page.

Sumber:
bavotasan


Mengimplementasikan @font-face

12 July 2010

FontsSaya sering mendapatkan klien yang menyodorkan draft desain website mereka (dari paling sederhana dalam bentuk .ppt sampai dengan format .psd). Rata-rata mereka sangat “kreatif” dalam hal penggunaan font sebagai typografi mereka. Ketika saya jelaskan kaidah penggunaan font di website, rata-rata mereka cukup bisa untuk berkompromi dan akhirnya mengembalikan jenis font ke jenis yang “diizinkan”.

Tapi sebenarnya, saya bisa memenuhi permintaan mereka dengan memanfaatkan @font-face. Relatif bukan hal yang baru memang, karena @font-face sudah diajukan untuk standarisasi CSS2 dan bahkan sudah diimpelementasikan di Internet Explorer versi 5, meskipun implementasinya menggunakan format Embedded Open Type (.eot) yang notabene tidak semua browser menggunakan format tersebut.

OK, sekarang bagaimana cara kita memasang kaidah @font-face dalam blog/website kita?

Pertama, perlu diingat format font apa saja yang di-support oleh browser-browser yang ada.

  • Internet Explorer (semua versi): EOT
  • Safari (3.2+): TTF/OTF
  • iPhone (3.1) SVG
  • Chrome (semua versi): SVG (TTF/OTF supported sejak 25 Januari 2010)
  • Firefox (3.5+): TTF/OTF (.WOFF sejak versi 3.6)
  • Opera (10+) TTF/OTF

So, .eot + .ttf /.otf + svg + woff adalah format-format yang banyak di-support oleh browser. Artinya, ketika kita hendak menggunakan kaidah @font-face, sangat disarankan agar kita menyertakan format-format tersebut. Anda bisa memanfaatkan @font-face generator untuk meng-generate font pilihan dari komputer Anda (harap diperhatikan juga mengenai lisensi font yang akan Anda gunakan). Unggahlah file font yang akan Anda gunakan.

Kedua, syntax yang digunakan untuk implementasi @font-face:

@font-face {
  font-family: NamaFont; /* required */
  src: source;	/* required */
  font-weight: weight;	/* optional */
  font-style: style;  /* optional */
}

NamaFont
Nama font yang akan dipanggil untuk properti CSS kita.
source
URL tempat font tersebut kita simpan, bisa juga ditambahkan dengan local("NamaFontLokal"), dengan NamaFontLokal adalah nama yang terbaca oleh komputer lokal kita.
weight
Font weight value, misalnya bold atau normal.
style
Font style value, misalnya italic atau normal.

Note: Syntax CSS ini bisa digunakan berulang, jika kita menggunakan lebih dari 1 jenis font.

Ketiga, panggillah nama font tadi sesuai kebutuhan, misalnya:

h1{
   font-family: 'NamaFont', arial, serif;
}

Note: Tetap disarankan untuk menyertakan jenis font standar lain sebagai alternatif.

Untuk lebih jelasnya, Anda bisa membaca juga artikel-artikel berikut ini:


Membuat Halaman Maintenance untuk Blog WordPress

24 February 2010

Selain update blog, terkadang kita harus sedikit terjun membenahi masalah “teknis” misalnya pasang theme baru, upgrade wordpress (secara manual, bukan via fantastico) atau mungkin sedikit hard coding. Ketika kita melakukan hal teknis tersebut tentunya halaman depan sebaiknya kita “tutup”, bisa dengan membuat file index.html dengan tulisan “Under Maintenance”. Tapi tentu hal ini sedikit banyak akan membuat ribet karena kita harus mengarahkan url ke index.php.

Ada satu trik agar kita bisa dengan tenang “mengobrak-abrik” blog kita sementara halaman depan tetap manteng di halaman maintenance, yaitu dengan memanfaatkan konfigurasi halaman .httaccess.

  1. Buatlah satu halaman maintenance, dan namai, let’s say, dengan maintenance.html
  2. Cari file .htaccess, biasanya terletak di halaman root. Buat file backup-nya.
  3. Buka file .htaccess untuk diedit.
  4. Gantilah dengan code seperti di bawah ini:
    RewriteEngine on
    RewriteCond %{REQUEST_URI} !/maintenance.html$
    RewriteCond %{REMOTE_ADDR} !^123\.123\.123\.123
    RewriteRule $ /maintenance.html [R=302,L]
  5. Gantilah 123\.123\.123\.123 di line 3 dengan IP address anda (Masa gak tau? :P). Pastikanlah anda memakai syntax yang sama lalu Save
  6. Sekarang, pengunjung blog anda akan di-redirect ke halaman maintenance anda.
  7. Ketika “pekerjaan” anda kelar, anda bisa mengembalikan file .httaccess seperti semula.

File .httaccess adalah file yang berisi perintah-perintah untuk webserver Apache. Dalam kasus ini, .httaccess mengontrol agar pengunjung yang berasal dari IP address yang berbeda dengan 123.123.123.123 akan di-redirect ke file maintenance.html.

Dengan mengganti 123.123.123.123 dengan IP address anda membuat anda bisa tetap mem-browse halaman blog anda secara normal ketika yang lain di-redirect ke halaman maintenance.html.


Menambah (Gr)Avatar Default pada WordPress

9 December 2009

Gravatar adalah satu servis yang memungkinkan munculnya avatar kita ketika memberikan komentar di blog orang lain (yang menggunakan servis gravatar juga tentunya). Sejak wordpress 2.7 diluncurkan, servis ini pun sudah terintegrasi dengan engine wordpress, sehingga kita tidak perlu meng-install plugin gravatar ataupun menambah tag gravatar secara manual. Lantas, bagaimana “nasib” para pengunjung yang tidak terdaftar di gravatar? WordPress menyediakan beberapa alternatif yang bisa dipilih untuk digunakan para pengunjung yang belum terdaftar.

gravatar

Namun, dengan pilihan gambar yang itu-itu saja, tentu akan membosankan. Seringkali kita menginginkan adanya gambar unik untuk gravatar default tersebut. Well, berikut saya paparkan hack untuk menambah gravatar default pada wordpress.

Yang harus anda lakukan adalah menambah function pada function.php dan unggahlah file gambar yang akan dijadikan gravatar default (sebaiknya dimensi gambarnya tidak lebih dari 60 x 60 pixel).

/**
 * add a default-gravatar to options
 */
if ( !function_exists('fb_addgravatar') ) {
	function fb_addgravatar( $avatar_defaults ) {
		$myavatar = get_bloginfo('template_directory') . '/images/glassess.gif';
		$avatar_defaults[$myavatar] = 'Kacamata';

		return $avatar_defaults;
	}

	add_filter( 'avatar_defaults', 'fb_addgravatar' );
}

Ketika theme anda aktif, maka anda akan melihat gravatar default bertambah.

addgravatar


Konsep Normalisasi Database

4 July 2008

Kebergantungan Fungsi

Diberikan sebuah relasi R, atribut Y dari R adalah tergantung fungsi dari atribut X dari R jika dan hanya jika setiap nilai X dalam R punya hubungan dengan tepat satu nilai Y dalam R.

Bentuk Normalisasi.

  1. Bentuk tidak normal (unnormalized form) . Bentuk ini merupakan kumpulan data yang akan direkam, tidak ada keharusan mengikuti suatu format tertentu, dapat saja data tidak lengkap atau terduplikasi.
  2. Bentuk Normalisasi Ke Satu (First Normal Form/1NF). Mempunyai ciri yaitu setiap data dibentuk dalam flat file data dibentuk dalam satu record demi satu record dan nilai field berupa “Atomic Value”. tidak ada set atribut yang berulang atau atribut bernilai ganda (Multi Value)
  3. Bentuk Normal Ke Dua (Second Normal Form/2NF) . Mempunyai Syara, yaitu : bentuk data telah memenuhi kriteria satu atribut bukan kunci harus tergantung secara fungsi pada kunci utama/primary key.
  4. Bentuk Normal Ke Tiga (Third Normal Form/3NF). Untuk menjadi normal ketiga haruslah dalam bentuk normal kedua dan semua atribut bukan primer tidak punya hubungan yang trasitif.
  5. Boyce Codd Normal Form (BCNF). Mempunyai paksaan yang lebih kuat dari bentuk normal ketiga untuk menjadi BCNF, relasi harus dalam bentuk normal kesatu dan setiap atribut harus bergantung fungsi pada atribut Superkey.