PT. Jerbee Indonesia

Membuat Ribbon Menggunakan CSS Tanpa Image

cecep — Tue, 12 Apr 2011 05:49:55 +0000

Dalam seni desain web, kita sering menjumpai style web yang menggunakan pita (Ribbon. dan kebanyakan dari desain tersebut menggunakan image. kali ini saya akan coba share, bagaimana membuat pita (Ribbon) dengan hanya menggunakan teknik CSS. Struktur Awal anggap saja sekarang kita mempunyai div class wrapper dengan padding:20px. padding pada CSS berfungsi memberi jarak antar [...]

6 Useful MySQL Command

cecep — Mon, 25 Oct 2010 07:00:46 +0000

Sejujurnya saya sering mengalami kebingungan ketika harus berhadapan dengan proses instalasi aplikasi di server yang tidak menyediakan tool MySQL (seperti PhpMyadmin dan sejenisnya), sehingga mengharuskan Saya menggunakan command MySQL dan mengetikannya di Terminal / Console. Berikut Saya Rangkum 6 Query yang sering saya gunakan,. Dump SQL. Export MySQL Database kedalam File. mysqldump -u username -p [...]

Introducing Gmail Priority Inbox

Aban Nesta — Thu, 02 Sep 2010 23:03:03 +0000

Bagi 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?

Server 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

Aban Nesta — Wed, 18 Aug 2010 14:43:53 +0000

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:


  
    Output

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…

...

...

...

...

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

Aban Nesta — Wed, 04 Aug 2010 02:07:55 +0000

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

Aban Nesta — Tue, 03 Aug 2010 05:14:29 +0000

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

Petunjuk Pemakaian

Unduh file unigpngfix.zip di sini.
Sisipkan tag berikut pada header (antara tag dan )
Unggah file clear.gif ke folder images Anda. Bukalah unitpngfix.js lalu sesuaikan path dengan directory tempat file clear.gif diunggah.
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

Aban Nesta — Thu, 15 Jul 2010 20:33:35 +0000

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.

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:

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.

Membuat Modul Pencarian WordPress Berlaku untuk Postingan Saja

Aban Nesta — Wed, 14 Jul 2010 21:06:16 +0000

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

Aban Nesta — Mon, 12 Jul 2010 17:44:13 +0000

Saya 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:

Dari SOHO hinggal Enterprise

Administrator — Tue, 06 Jul 2010 13:15:59 +0000

Pengalaman dan keahlian kami telah memungkinkan untuk mengimplementasikan berbagai solusi teknologi agar dapat memenuhi platform yang dibutuhkan oleh para klien kami.

Diawali dengan berbagai skala proyek teknologi informasi (web, desktop, network, telecommunication), Jerbee fokus dalam pengembangan web dengan teknologi jaringan terkini sebagai pendukung. Dengan kemampuan teknologi open source, meliputi berbagai macam model arsitektur komputer yang berbeda (web-based & mobile), bahasa pemrograman PHP & Ruby on Rails, juga multi-platform (Unix, Linux, Mobile OS) serta database platform mulai skala SOHO (Small Office Home Office) hingga enterprise.