siRiokun 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 Kolaborasi Snippets di 80tasks http://siriokun.com/blog/kolaborasi-snippets-80tasks/ http://siriokun.com/blog/kolaborasi-snippets-80tasks/#comments Thu, 10 Jun 2010 00:18:04 +0000 Rio http://siriokun.com/?p=260 Setiap kita memulai web project baru pasti menemukan beberapa script yang seringkali digunakan dalam setiap development. Kumpulan script ini dapat berupa elemen visual seperti elemen navigasi, form input, post layout, gallery, dll. Dapat juga berupa berupa elemen fungsional seperti slideshow, tooltip, popup dialog, dll. Kumpulan script yang sering kita gunakan pada setiap project ini dinamakan Snippet.

Para developer web mulai dari designer hingga programmer telah mendokumentasikan snippet-snippet ini dengan sangat antusias. Berikut beberapa diantaranya :

Dan masih banyak snippet-snippet yang dikategorikan berdasarkan bahasa pemograman bahkan berdasarkan CMS.

Begitu banyaknya snippet siap pakai tersebut namun dikarenakan banyaknya jumlah snippet yang ada dan dokumentasi yang kurang lengkap dan tidak adanya dukungan bahasa lokal membuat usaha ekstra untuk mempelajari snippet-snippet tersebut untuk dapat diimplementasikan ke dalam project kita saat ini.

Ada keinginan untuk membuat sebuah website yang berisi snippet berbahasa Indonesia dan mudah untuk dipelajari serta menggunakan konsep best practices coding. Dan sudah ada langkah awal mengenai hal ini dengan membangun sebuah situs bernama 80tasks – http://80tasks.com/.

Langkah selanjutnya diperlukan kerjasama dari developer untuk ikut berkontribusi memonitor kualitas coding di 80tasks agar 80tasks ini dapat menjadi sumber referensi snippet yang handal.

]]> http://siriokun.com/blog/kolaborasi-snippets-80tasks/feed/ 0 Forum Web Anak Bandung (FOWAB) http://siriokun.com/blog/fowab/ http://siriokun.com/blog/fowab/#comments Thu, 18 Feb 2010 06:09:40 +0000 Rio http://siriokun.com/?p=222 Nanti sore para geek mau keluar kandang, ngumpul-ngumpul di Common Room Foundation :D

Ikutan acara FOWAB ngomongin topik Creative IT oleh pembicara-pembicara dari Thinkroom, Ravewarior dan Ruang Freelance.

Yang pasti akan banyak para geek Bandung yang datang termasuk para coder, desainer dan project manager. Manfaatkan kesempatan ini untuk memperluas network, menjalin partnership, bertatap langsung dengan para geek se-Bandung!

Sampai ketemu di Common Room! Monitor perkembangan terbarunya dengan mem-follow @fowab

*Main bolanya batal Bud!

]]> http://siriokun.com/blog/fowab/feed/ 0 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 Cara simpel mengalihkan pengunjung yang menggunakan IE6 http://siriokun.com/blog/block-ie6-trick/ http://siriokun.com/blog/block-ie6-trick/#comments Fri, 16 Oct 2009 18:43:37 +0000 Rio http://siriokun.com/?p=122 Browser Internet Explorer versi 6 sudah sangat tua dan kurang mampu merender halaman website pada umumnya terutama website yang menggunakan teknologi terbaru Web Standard. Teknologi terus berkembang, maka sudah saatnya kita menggunakan teknologi baru yang dapat lebih memudahkan kita dengan menggunakan browser versi terbaru atau browser lain yang lebih baik.

Jika kita mengikuti perkembangan teknologi di dunia web browser maka sudah sepantasnya website yang kita buat menggunakan teknologi terbaru juga sehingga fitur-fitur baru bisa kita manfaatkan dan menciptakan nuansa browsing yang lebih nyaman.

Dahulu ketika IE6 masih diperhitungkan banyak kalangan, para web developer memanfaatkan Conditional Comments untuk memperbaiki keanehan tampilan yang dibuat IE6 dengan membuat CSS khusus.

Lalu yang menjadi permasalahan bagaimana agar pengunjung website kita yang masih menggunakan IE6 bisa kita block atau dialihkan ke halaman berisi link untuk mendownload browser yang lebih baik? Berikut caranya:

<!--[if IE 6]><meta content-type="refresh" content="0;url=http://abetterbrowser.org/" /><![endif]-->

Taruh baris kode ini di antara tag head. Dengan begitu pengunjung yang menggunakan IE6 akan dialihkan ke http://abetterbrowser.org/ :]

]]> http://siriokun.com/blog/block-ie6-trick/feed/ 4 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