26 Jul 11 Pangkas Load Time Dengan CSS
Meminimalkan load time akses sebuah website bisa dilakukan dengan penerapan teknik css, yang dikenal dengan nama css sprite. Css sprite adalah sebuah metode pengurangan permintaan akses gambar dari sebuah website dengan mengumpulkan beberapa gambar menjadi satu kesatuan gambar, sehingga user hanya perlu mengakses gambar sekali waktu saja.
Untuk menggabungkan beberapa image menjadi satu kesatuan image cukup mudah, anda bisa menggunakan Aplikasi Design dan bisa juga menggunakan tools online CSS Sprites Generator. Nah setelah mempunyai satu master image dan file “gambar palsu” gif.gif, sekarang masuk ke bagian yang mengasikkan, yakni modifikasi file CSS nya. Pada prinsipnya CSS Sprites ini memanfaatkan satu gambar untuk berbagai macam fungsi background. Gambar besar itu hanya digeser-geser agar memunculkan bagian yang tepat di tempat yang diinginkan. Proser geser-menggeser ini berlangsung di sisi browser client sehingga tidak ada lagi transfer file gambar, begitu gambar masternya sudah di download oleh client. Inilah yang mempercepat waktu loading yang dibutuhkan situs kita.
Sebagai contoh untuk background Header Blog saya, awalnya saya menggunakan
#header{background:#EDEBD6 url(images/header-bg.png) no-repeat scroll 100% 0pt;height:143px;width:930px;padding:0;}
kemudian saya ubah menjadi:
#header{background:transparent url(images/imggatzet.png) top left; background-position: 0px 0px; height: 133px; width: 930px; }
Bagian yang saya tebalkan itu adalah fungsi untuk menggeser gambar ke posisi yang diinginkan. background-position: 0px 0px menunjukkan posisi sudut kiri atas dari bagian gambar yang dimunculkan. Dan kemudian agar gambar lainnya tidak ikutan muncul di header, ukuran kotaknya harus dibatasi dengan parameter height: 133px; width: 930px; dengan demikian bagian gambar yang lainnya akan tersembunyi.
Contoh lainnya adalah untuk background footer. Sebelumnya saya menggunakan :
#footer{color:#FFFFFF;background:#EDEBD6 url(images/nfooter-bg.png) no-repeat scroll 100% 0pt;height:90px;clear:both;padding:25px;}
kemudian saya ubah menjadi
#footer{background:transparent url(images/imggatzet.png) top left; background-position: 0 -240px;height:90px;clear:both;padding:25px;}
Pada parameter ini ada angka -240px, karena posisi gambar untuk footer yang saya butuhkan berada di 240pixel dari sisi atas master image (untuk lebih jelasnya bisa mengacu ke contoh master image yang saya sertakan), dan perintah background position: 0px -240px ini bisa diartikan geser gambar 240 pixel ke bawah.
Contoh ketiga adalah untuk logo blog. Sebelumnya saya menggunakan image link biasa untuk memunculkan logo.
< img src="http://www.komunitaskami.com/WordPress/wp-...es/gatzet.png" alt="gatzet info" style="margin-left:20px;float:left;border:none;" width="338" height="110"/>
kemudian saya ubah menjadi
Disini gambar yang diload saya ganti menjadi gambar kosong berukuran 1×1 pixel untuk tidak menyalahi aturan HTML. Sedangkan gambar aslinya disertakan dalam fungsi
#titlepage{background:transparent url(images/imggatzet.png) top left; background-position: -210px -118px; height: 110px; width: 320px; margin:0 0 0 20px; float:left; border:none; }
Lagi-lagi di sini masih menggunakan gambar master yang sama, dan perhatikan juga nilai background-position yang berarti menggeser gambar 210 pixel ke kiri dan 118 pixel ke bawah.
Prinsip CSS Sprites ini bisa digunakan di semua bagian template situs kita yang membutuhkan gambar. Misalkan icon-icon untuk social network (digg, furl, delicious.. dsb, yang biasanya di load satu per satu) bisa digabungkan menjadi satu gambar saja.
Menurut saya, saat menggunakan CSS Sprites ini, hal yang paling melelahkan adalah menentukan posisi yang tepat untuk memunculkan gambar. Memunculkan alat bantu ruler di Photoshop atau GIMP yang saya gunakan memang sangat membantu, setidaknya untuk pedoman awal penentuan posisi gambar.
Namun tetap saja mesti dilakukan fine adjustment di semua bagian saat CSS Sprites sudah berada di server. Sehingga akan lebih baik jika untuk proses uji cobanya dilakukan di server lokal anda dulu, baru setelah semua sempurna bisa di upload ke server utama.
11 May 11 Teknologi Masa Depan Display
Sebelumnya mari kita lihat bagaimana teknologi masa depan gadget bagi kehidupan kita sehari2…
Tidak lama lagi konsep gadget tersebut bakal terwujud berkat teknologi display super tipis, fleksibel dan anti pecah, berbahan dasar plastik sehingga teknologi display ini tahan dari benturan benda keras.
Teknologi ini dihadirkan oleh sebuah perusahaan besar “Samsung” pada acara CES 2011 di Las Vegas. Keberadaan teknologi ini akan mempengaruhi model gadget dimasa depan, semakin tipis, powerfull dan anti benturan tentunya hehehe…
Teknologi ini disebut OLED Display technology, Super AMOLED Display…
26 Feb 11 Spesifik Date Pada Datepicker jQuery
Jquery adalah sebuah tools berbasis javascript yang powerfull untuk digunakan dalam website. Banyak tools yang disediakan oleh jQuery salah satunya adalah datepicker
Datepicker dalam jQuery terlihat seperti pada gambar berikut.
Cara kerjanya adalah dengan mengintegrasikan sebuah field text dengan datepicker script pada jquery maka ketika field form tersebut diklik akan muncul sebuah tabel kalender yang dapat diklik untuk memasukkan nilai tanggal tersebut pada field form tadi.
Dengan demikian keberadaan datepicker pada jQuery ini sangat membantu sekali. Nah muncul sebuah permasalahan yang signifikan bila kita menginginkan sebuah kalender yang memiliki spesifikasi tanggal yang bisa disesuaikan dengan database? Misalkan disebuah sekolah yang menginginkan tanggal availablenya tanggal 1, 3, 9, dsb.
Karena datepicker defaultnya menampilkan semua tanggal, sehingga apabila digunakan dalam aplikasi yang menginginkan keberadaan tanggal yang spesifik tentunya tidak dapat dilakukan.
Untungnya jQuery sifatnya fleksible dalam artian dapat disetting dengan memasukkan beberapa variable tertentu sehingga permasalahan diatas dapat diselesaikan
Berikut code listingnya:
$('#datepicker').datepicker({
dateFormat: ‘yy-mm-dd’,
beforeShowDay: enableAllTheseDays
});
var enabledDays = ["2-20-2011", "2-24-2011"];
function enableAllTheseDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < enabledDays.length; i++) {
if($.inArray((m+1) + ‘-’ + d + ‘-’ + y,enabledDays) != -1) {
return [true];
}
}
return [false];
}
Demikian semoga bermanfaat.. 
08 Feb 11 WordPress 3.0.5
Eh ngomong-ngomong CMS yang satu ini selalu up to date loh,,, nah giliran fix update kali ini yang udah sampe di versi 3.0.5 banyak terdapat tambal sulam pada security holenya…
Berikut list file yang kena revisi:
wp-includes/default-filters.php
wp-includes/version.php
wp-includes/pluggable.php
wp-includes/kses.php
wp-includes/script-loader.php
readme.html
wp-admin/includes/post.php
wp-admin/includes/update-core.php
wp-admin/includes/template.php
wp-admin/js/post.dev.js
wp-admin/js/post.js
wp-admin/async-upload.php
Berikut paparan langsung dari WordPress Site:
“The release addresses a number of issues and provides two additional enhancements:
Two moderate security issues were fixed that could have allowed a Contributor- or Author-level user to gain further access to the site.
One information disclosure issue was addressed that could have allowed an Author-level user to view contents of posts they should not be able to see, such as draft or private posts.
Two security enhancements were added. One improved the security of any plugins which were not properly leveraging our security API. The other offers additional defense in depth against a vulnerability that was fixed in previous release.
Thanks to Nils Jueneman and Saddy for their private and responsible disclosures to security@wordpress.org for two of the issues. The others were reported or repaired by our security team.”
So segera dech WP Mania, update version WP anda…, oya ngomong2 soal WP ternyata WP bisa juga dikombinasikan dengan Adobe Flash loh, saya menemukan site berikut The Heritage Bali…. Flash+WP…. lumayan buat nambah ilmu saya, pake refrensi kali yak hehehe….
29 Aug 10 Custom Theme WP. 3.0.x
Kali ini bicara pengalaman bro…, klo kemarin waktu WP masih 2.9.x ak coba2 buat theme dan ok berjalan…, nah pas mo coba buat theme dengan WP terbaru yaitu WP 3.0.x yang mana kode terakhir dari seri WP ini sampai saat ini sudah berada di posisi 3.0.1, bro bisa donlod disini
Nah waktu itu ak mencoba membuat custom theme untuk wp, maklum ada orderan hehehe…, jadi ya harus dibuat custom sesuai permintaan customer, bukan gaya-gayaan bro….hehehe secara theme wp yang bagus banyak banget di Internet ya gak… ^^
Nah ceritanya tuch ak dah lese buatnya…, pas aku pasang di wp-content / themes nya wordpress, eh malah muncul error…., lah kok bisa gini…,(bingung bin pusing dah mikirnya)…
Setelah beberapa lama eh akhirnya ketemu masalahnya bro…, ternyata wordpress mulai dari WP. 3.0.x mengharuskan kita membuat tag berikut pada stylesheet-nya…
Community
