siRiokun

Sebelum kita bermain lebih seru dengan CSS, ada baiknya kita samakan persepsi tentang pengertian CSS Design. CSS Design merupakan bagian dari Web Design. Seperti yang kita pahami selama ini, Web Designer memiliki kriteria keahlian antara lain:

1. Memahami konsep Graphic Design
2. Memahami perbedaan antara Web Design dengan Print Design
3. Mampu mengkonversi desain dari media desktop ke media web

Nah! CSS Designer memiliki kriteria keahlian spesifik ke poin 3 saja dengan terlebih dulu harus memahami konsep 1 dan 2. Konversi yang dimaksud dalam poin 3 adalah membuat desain yang dapat kita akses di desktop menjadi dapat diakses di web. Karena media desktop dan media web berbeda maka diperlukan konversi sehingga media desktop dapat berjalan di media web.

Media Desktop VS Media Web

Seperti yang kita ketahui bersama, media desktop dapat berjalan melalui Operating System seperti Windows, Mac, atau Linux sedangkan media web dapat berjalan melalui Browser seperti Firefox, Safari, Internet Explorer atau Opera. Sehingga jika kita ingin mengakses media desktop seperti teks, gambar, audio, animasi, dll. melalui browser maka kita perlu mengkonversi atau lebih tepatnya membungkus media desktop tersebut menjadi sebuah halaman web yang dapat diakses melalui browser.

Jadi halaman web yang sedang kita lihat ini merupakan media desktop yang dibungkus oleh HTML dan diatur styling-nya oleh CSS. Dengan kata lain kita memerlukan bantuan HTML dan CSS dalam menampilkan media desktop sehingga dapat diakses melalui media web dengan alat bantu browser untuk dapat dilihat oleh seluruh dunia melalui internet.

Proses Kerja CSS Designer

Dalam mengkonversi desain dari media desktop ke media web, seorang CSS Designer harus menjalani dua proses kerja yang harus dilalui agar sebuah halaman web dapat diakses. Proses kerja tersebut melibatkan dua pekerjaan yang berbeda yaitu designing dan programming. Sehingga jika dijabarkan maka proses kerja seorang CSS Designer terdiri dari:

1. Menerima design media desktop dari designer berupa mockup
2. Mengoptimasi mockup dengan cara men-slicing-nya sehingga memenuhi standar untuk ditampilkan di web
3. Menata kembali sliced images, teks dan media desktop lainnya sesuai tampilan mockup dengan bantuan CSS melalui HTML

bersambung…

Tidak selamanya slicing dengan ukuran kecil bisa membuat halaman web lebih cepat diakses, kita juga perlu memperhatikan banyaknya image yg di-slice dalam satu halaman. Jadi meski slice image-nya kecil namun jika banyak jumlah image-nya maka jumlah request ke server otomatis menjadi lebih banyak sehingga mempengaruhi performa juga.

Load fewer external objects. Due to request overhead, one bigger file just loads faster than two smaller ones half its size. Figure out how to globally reference the same one or two javascript files and one or two external stylesheets instead of many; if you have more, try preprocessing them when you publish them. If your UI uses dozens of tiny GIFs all over the place, consider switching to a much cleaner CSS-based design which probably won’t need so many images. Or load all of your common UI images in one request using a technique called “CSS sprites“.

Sumber: http://www.die.net/musings/page_load_time/

Ada banyak cara menampilkan widget di Facebook seperti halnya widget di Wordpress. Untuk menampilkan widget di Facebook, salah satu caranya adalah dengan menggunakan aplikasi Facebook bernama More Extended Info. Berikut caranya,

1. Login ke Facebook dan buka http://apps.facebook.com/more_ei/ (halaman apllikasi More Extended Info)
2. Klik Insert New Field dan pilih Lightweight Markup
3. Kemudian paste kode html kamu, dan klik Save Changes