siRiokun » konsep http://siriokun.com Some secrets of CSS Ninja new techniques. POFF! Thu, 10 Jun 2010 00:18:04 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 HTML 5 sebagai media styling CSS http://siriokun.com/blog/html-css/ http://siriokun.com/blog/html-css/#comments Thu, 19 Nov 2009 10:03:19 +0000 Rio http://siriokun.com/?p=93 Dengan mempelajari HTML kita dapat dengan mudah menjadi web developer, karena HTML merupakan bahasa dasar yang harus dikuasai oleh setiap orang yang ingin terjun ke dunia web. Dengan mengenali karakteristik HTML kita dapat membedakannya dengan bahasa pemrograman lain sehingga memudahkan kita ketika melakukan integrasi coding.

HTML merupakan bahasa markup/teks yang dikenali browser. Seperti yang kita pahami bersama CSS bertugas mengatur styling konten sebuah HTML. Sebelum kita bisa mengatur style dengan CSS, kita perlu membuat halaman HTML sebagai media styling kita.

1. Mengapa HTML 5

Ada beberapa versi HTML dan versi terbaru saat ini adalah HTML versi 5. HTML 5 ini memiliki doctype yang sangat sederhana dan penamaan tag baru berdasarkan area yang sering kita gunakan dalam melayout halaman web seperti header, nav, menu, article, aside, footer dan lainnya.

Setiap meningkatnya versi maka akan ada penambahan fitur baru yang membuat proses kerja menjadi lebih sederhana. Sehingga untuk mempercepat proses kerja, sudah saatnya kita menggunakan HTML 5 dan dapat dipastikan browser-browser modern saat ini sudah mendukungnya terutama browser-browser yang mendukung Web Standards.

2. Layout Dasar

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>Contoh HTML 5</title>
 </head>
 <body>
<article>
 <p>Paragraf di sini.</p>
</article>
<aside>
<p>Bagian sidebar</p>
</aside>
<footer>
<p>Bagian footer</p>
</footer>
 </body>
</html>

Penentuan doctype yang sangat simpel dan penggunaan tag yang sesuai konteks membuat proses development menjadi kian mudah. Penggunaan tag-tag baru ini mengurangi penggunaan tag <div> dalam men-styling elemen-elemen yang sering ada pada sebuah layout web seperti <header>, <article>, <aside>, <footer> dan tag lainnya sesuai elemen yang ingin di-styling.

3. HTML 5 Validator

Sampai saat ini beberapa HTML editor belum menyediakan validator internal dalam software-nya, termasuk DreamweaverTM CS4 sehingga kita memerlukan bantuan validator online seperti http://validator.w3.org/. Berbeda dengan TopStyleTM 4 yang sudah mendukung validator internal meski prosesnya tetap online, sehingga kita harus terhubung dengan internet jika ingin menggunakan validator internal-nya.

]]> http://siriokun.com/blog/html-css/feed/ 6 Konsep Cascade pada CSS Reset http://siriokun.com/blog/css-reset-cascade/ http://siriokun.com/blog/css-reset-cascade/#comments Tue, 11 Aug 2009 09:04:07 +0000 Rio http://siriokun.com/?p=100 Cascading pada CSS berarti menimpa styling sebelumnya.  Dalam men-styling halaman web, kita sebenarnya menimpa style bawaan browser. Sehingga style yang digunakan oleh halaman web adalah styling yang  menimpa style sebelumnya.

Style bawaan browser → Style bawaan web

Jika kita ingin men-styling (baca: menimpa) style bawaan browser Firefox maka kita perlu tahu style apa yang ingin kita timpa. Style bawaan Firefox dapat dilihat di html.css yang dapat ditemukan di folder instalasinya atau ketik alamat resource://gre/res/html.css pada url bar Firefox kemudian tekan enter untuk menampilkannya. Untuk mengetahui style bawaan pada browser lainnya, silakan mencari sendiri pada folder instalasi browser yang dimaksud :]

Agar tampilan web kita sama di beberapa browser, kita harus tahu styling default browser yang ingin kita timpa sehingga memiliki styling sesuai dengan yang kita inginkan. Menyamakan styling di setiap browser dikenal dengan CSS Reset. Dengan menyamakan styling default untuk tiap browser maka selanjutnya kita dapat menstyling dengan lebih aman sehingga tanpa perlu mengalami mengurangi perbedaan  posisi elemen di beberapa browser.

Terdapat beberapa jenis CSS Reset yang melingkupi Tipografi, Whitespace, Margin dan Padding. Namun perlu dipahami juga, kita tidak perlu menggunakan CSS Reset buatan orang lain karena setiap website yang kita styling memiliki karakteristik unik sehingga penggunaan Reset pun dapat disesuikan dengan style website yang sedang kita tangani. Untuk lebih memahami cara kerja CSS Reset dan elemen apa saja yang harus direset kita harus membahasnya pada postingan khusus yang akan dibahas pada kesempatan lain :P

]]> http://siriokun.com/blog/css-reset-cascade/feed/ 1 Proses Kerja CSS Design http://siriokun.com/blog/proses-kerja-css-design/ http://siriokun.com/blog/proses-kerja-css-design/#comments Mon, 27 Jul 2009 18:29:04 +0000 Rio http://siriokun.com/?p=82 Setelah memahami ruang lingkup pekerjaan CSS Design, maka kali ini kita akan menelusuri proses development sebuah website yang dimulai dari Menslicing dan Optimalisasi image, Menginspeksi Struktur Layout dan Snippets, Membuat Style untuk Layout dan Struktur Konten, Spesifik Styling, Usability Testing, SEO, Cross Browsing hingga Templating.

Slicing dan Optimalisasi Image

Desain mockup dari sang Desainer Grafis akan kita potong-potong sesuai kebutuhan dan mengkompresinya menjadi 72-85 dpi dengan format (png, jpg atau gif) disesuaikan dengan kebutuhan. Apabila memungkinkan diterapkan Image Sprite maka penentuan ukuran serta positioning menjadi satu buah image diperlukan sehingga memudahkan pengaturan posisi melalui CSS.

Struktur Layout dan Snippets

Dalam membuat struktur layout kita dapat dibantu dengan Wireframe yang sebelumnya dibuat oleh sang Desainer Grafis dalam pembuatan mockup desain. Melalui wireframe ini kita dapat menentukan layout yang akan kita buat dan menentukan elemen-elemen apa saja yang memiliki kesamaan bentuk di setiap halaman yang kemudian akan kita jadikan Snippet.

Styling Layout dan Konten

Layout merupakan struktur yang membungkus konten. Dalam menstyling struktur layout sangat disarankan untuk tidak mempengaruhi styling konten sehingga tidak terjadi overiding style. Dengan demikian styling konten hanya mempengaruhi formatting konten dan tidak mempengaruhi styling layout, begitu juga sebaliknya.

Spesifik Styling

Di sini kita akan mengatur styling Snippet dan menambahkan styling sesuai penempatannya dalam layout. Sehingga ketika terjadi perubahan posisi snippet maka penambahan styling menjadi lebih minimal.

Usability Testing

Sebuah website dapat diakses melalui browser, handphone, PSP,  TV dan media lainnya sehingga dibutuhkan sebuah fitur yang dapat mempermudah akses ke website yang kita buat.

SEO

Untuk dapat mudah terindex oleh mesin pencari seperti Google, Yahoo, Bing dan mesin pencari lainnya maka dibutuhkan trik Search Engine Optimization sehingga website yang telah kita buat dapat dicari dengan mudah.

Crossbrowsing

Istilah Cross Browser sebenarnya tidak diperlukan karena adanya perbedaan layout engine di tiap browser bahkan sistem operasi sehingga istilah yang lebih tepat adalah Multi-Browser. Seperti yang kita pahami bersama, dalam fase ini kita akan memastikan tampilan website yang telah kita buat memiliki kesamaan tampilan. Dengan memahami kekurangan yang dimiliki browser-browser versi lama maka kita paham browser tersebut akan mengalami degradasi fitur. Sehingga pada awal styling kita harus menerapkan styling yang mensupport browser lama terlebih dulu baru kemudian menambahkan fitur yang didukung oleh browser terbaru, maka user tidak harus mengupgrade browsernya terlebih dulu untuk dapat melihat website kita.

Templating

Dengan menguasai fase-fase sebelumnya maka kita akan dengan mudah menerapkan sistem templating yang didukung oleh berbagai macam CMS yang ada seperti Wordpress, Joomla, FrogCMS, WHMCS, bahkan PHP Framework seperti Code Igniter, CakePHP, Smarty, Zend Framework, dll.

Dalam lain kesempatan, Rio akan membahas masing-masing bagian di atas secara lebih detail. Buat teman-teman yang belum paham dengan istilah-istilah yang terdapat dalam tulisan ini bisa bertanya langsung.

]]> http://siriokun.com/blog/proses-kerja-css-design/feed/ 2 Pengertian CSS Design dan kaitannya dengan Web Design http://siriokun.com/blog/css-web-design/ http://siriokun.com/blog/css-web-design/#comments Wed, 08 Jul 2009 18:50:03 +0000 Rio http://siriokun.com/?p=47 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… :D

]]> http://siriokun.com/blog/css-web-design/feed/ 12