Keuntungan penggunaan CSS3 dapat dilihat dalam pembuatan sebuah button. Sebelum adanya CSS3 untuk membentuk suatu button yang bagus kita perlu menggunakan gambar tambahan, namun dengan CSS3 kita dapat membentuknya dengan hanya menggunakan kode CSS. Dengan attribute seperti border-radius, linear-gradient dan box-shadow kita dapat membuat sebuah button yang bagus tanpa menggunakan gambar tambahan. Bagi pengguna hal ini menjadi cukup menyenangkan karena akses website menjadi cepat karena tidak perlu lagi meload gambar tambahan.

Pada artikel ini kita akan belajar membuat sebuah button dengan menggunakan feature baru CSS3 dan berikut adalah hasil akhir dari button yang akan kita buat :

Send Message

Basic Style

Sebelum menggunakan CSS3 hal paling penting yang harus diperhatikan adalah bahwa belum semua browser pada hari ini support terhadap seluruh attribute CSS3 dan juga tidak semua pengguna bersedia melakukan update browser. Dengan fakta tersebut dapat kita asumsikan bahwa tidak semua pengguna akan dapat melihat efek dari attribute CSS3 yang digunakan. Untuk mengatasinya kita perlu membuat desain dasar yang tetap terlihat bagus meski browser yang digunakan oleh pengguna tidak support terhadap CSS3.

Berikut kode CSS yang membentuk tampilan dasar dari button :

Kode CSS tersebut akan menghasilkan tampilan button sebagai berikut :

Send Message

Kunci penting dari suatu button adalah bahwa dia mempunyai perbedaan tampilan pada setiap tindakan menggunakan mouse. Kita dapat mengaturnya menggunakan Pseudo-classes Selector sebagai berikut :

Kode CSS diatas akan menghasilkan sebagai berikut :

Send Message

Untuk memahami lebih lanjut tentang Pseudo-classes Selector dapat dilihat pada artikel saya, Mengenal Web Links : Style.

Tampilan button tersebut adalah apa yang kan dilihat ketika browser tidak support terhadap CSS3. Tidak buruk bukan ?.

CSS3 Style

Nah setelah kita bisa membuat desain dasar diatas, kita sekarang dapat menambahkan attribute CSS3 pada button tanpa harus takut desain akan rusak pada browser lama.

Rounded Corner

Pertama kita akan menambahkan efek Rounded Corner pada button kita. Untuk melakukannya kita dapat menggunakan attribute border-radius. Untuk informasi lebih lengkap tentang penggunaan attribute ini silahkan baca pada create rounded corners with CSS.

Kita akan menambahkan Rounded Corner untuk semua sudut dengan kode sebagai berikut :

Meski pada versi terbaru dari beberapa browser telah support attribute ini, tapi mungkin user belum mengupgrade browsernya sehingga kita perlu menambahkan vendor extension, sebagai berikut :

Sekarang button kita akan berbentuk sebagai berikut :

Send Message

Gradient

Efek gradient akan digunakan agar button kita benar-benar terlihat seperti button yang seharusnya. Untuk melakukannya kita dapat menggunakan attribute linear-gradient. Untuk informasi lebih lengkap tentang penggunaan attribute ini silahkan baca pada Speed Up with CSS3 Gradients.

Kode yang menambahkan efek gradient tersebut adalah sebagai berikut :

Kode diatas telah menyertakan vendor extension, yang membuat desain kita semakin kompatibel terhadap semua versi browse. Pada kode tersebut kita juga memberikan efek yang sama ketika button ditekan dengan warna gradient terbalik. Sekarang button kita akan berbentuk sebagai berikut :

Send Message

Box Shadow

Terakhir kita akan menambahkan sedikit efek shadow pada button dan kita melakukannya dengan attribute box-shadow, sebagai berikut :

Untuk informasi lebih lanjut tentang penggunaan attribute box-shadow silahkan baca pada CSS Box Shadow.

Berikut seluruh kode CSS yang dibutuhkan untuk membentuk button :

Dan berikut adalah hasil akhirnya :

Send Message

Demikian tutorial pembuatan button dengan CSS3, semoga bermanfaat.

Dan pada awal tahun ini kami memiliki banyak waktu luang untuk kembali "merias" website ini sehingga membuatnya makin cantik dan bermanfaat bagi banyak pihak. Perubahan yang berhasil kami kerjakan diantaranya :

Sistem Baru

Sistem website atau CMS akan menjadi hal sangat penting dalam pengelolaan website, tidak hanya tentang kemudahan mengelola konten website tapi juga bagaimana fleksibilitas CMS tersebut ketika kita ingin memperluas fungsi baru. Hal inilah yang ingin kami capai selama satu tahun ini.

Pada dasarnya iznyn.com masih menggunakan WordPress sebagai sistem dasar dengan mengembangkan theme sendiri. Namun berbeda dengan sebelumnya theme yang digunakan saat ini cukup independent dalam arti tidak tergantung pada fungsi-fungsi dari Plugin tambahan. Walaupun proses pengembangan menjadi lebih rumit namun kita bisa mendapatkan fleksibilitas maksimal dalam mempengaruhi website ini.

Semoga dalam beberapa bulan ke depan kami bisa membagi sistem website ini secara publik dalam bentuk WordPress Theme. Amin...

Tampilan Baru

Dalam perubahan iznyn.com kali ini kita juga melakukan perubahan tampilan website yaitu pada bagian :

Homepage

Dalam halaman depan kita menampilkan konten Works dan Blog Post secara berimbang dan saling bersebelahan. Selain itu kita juga menghilangkan Contact Form karena bagian tersebut justru menjadi sasaran spamer untuk mengirimkan email spam dan sebagai gantinya kita menambahkan link social network yang kami miliki.

Works

Kita melakukan perubahan besar terhadap bagian yang menampilkan hasil perkerjaan ini. Dengan desain baru serta ditambah beberapa fungsi Javascript membuat user dalam menjelajahi hasil karya kami menjadi semakin nyaman dan mudah. Selain itu kita juga menambah beberapa hasil karya yang telah berhasil kami buat selama satu tahun terakhir ini.

Hal Yang Hilang

Selain beberapa perubahan yang kami lakukan di iznyn.com kami juga menghilangkan beberapa hal yang kami nilai tidak efektif lagi jika dipertahankan, beberapa hal yang kami hilangkan antara lain :

Contact Form di Homepage

Kami memutuskan untuk menghilangkan fasilitas ini karena ternyata menjadi sasaran empuk bagi spamer untuk mengirimkan email spam. Jadi jika anda ingin menghubungi kami bisa langsung dilakukan di halaman Contact.

WordPress Theme

Beberapa waktu lalu saya telah membuat dan mempublikasikan dua WordPress Theme yang bernama Opor Ayam dan PurityOfSoul. Namun karena terdapat kesulitan dalam pengembangan kedua theme ini maka kami memutuskan untuk menghentikan support dan pengembangannya.

Semoga dalam waktu dekat kami bisa mempublikasikan theme baru yang lebih professional.

Comment Notification

Sebelumnya ketika anda memberikan komentar pada blog iznyn.com maka anda akan mendapatkan penawaran untuk mengikuti setiap komentar baru pada post yang sama. Fasilitas ini pada dasarnya kami kembangkan sendiri dan kami mendapati beberapa masalah terhadap sistem yang menanganinya sehingga untuk sementara waktu fasilitas ini tidak dapat digunakan hingga kami berhasil memperbaiki fasilitas ini.

Dan akhir kata, kami hanya berharap bahwa semua perubahan ini dapat menjadikan website iznyn.com semakin bermanfaat bagi semua pihak. Amin..

Zebra table merupakan istilah yang diberikan untuk suatu penyajian content table, dimana setiap row table secara berseling ditampilkan dengan background warna yang berbeda. Penyajian table seperti ini dimaksudkan untuk mempermudah user dalam membaca content di dalam table. Berikut salah satu contoh dari Zebra Table :

Sebelumnya untuk membentuk desain table seperti diatas dilakukan dengan menggunakan Javascript atau menambahkan class pada setiap baris table (tag tr). Penggunaan Javascript akan sedikit lebih rumit sedangkan penambahan class akan cukup merepotkan terutama ketika data yang ditampilkan cukup besar. Dengan CSS3 kita cukup menggunakan sedikit code untuk dapat membuat Zebra Table tersebut.

Struktur HTML

Pertama-tama kita terlebih dahulu membuat struktur HTML, sebagai berikut :

CSS Dasar

Setelah menyusun struktur HTML table kita akan mulai menggunakan CSS untuk menyusun tampilan dari table. Namun untuk sementara kita jangan memikirkan bentuk dari Zebra Table, dari pada itu kita akan menyusun tampilan dasar dari table. Berikut kode CSS yang membentuk tampilan table :

Kode CSS diatas akan menghasilkan tampilan table sebagai berikut :

Disini kita tidak perlu menjelaskan maksud dari masing-masing kode CSS karena kita anggap anda sudah memahaminya secara mendalam. Jika anda belum memahami tentang CSS, W3School dapat menjadi pijakan pertama anda untuk mempelajarinya.

Untuk membentuk Zebra Table dengan CSS3 cukup dilakukan dengan menggunakan CSS3 Pseudo-classes :nth-child. Pseudo-class ini berfungsi untuk menyamakan element berdasarkan posisinya di dalam element induk yang memiliki beberapa element turunan. Pseudo-class ini menerima satu argument yang dapat berupa keyword, number atau number expression.

Untuk membentuk Zebra Table kita dapat menggunakan :nth-child dan keyword odd sebagai argument. Pseudo-class tersebut kemudian akan menyamakan element secara berseling. Berikut kode CSS nya,

Browser Support

Satu kelemahan penggunaan CSS3 untuk saat ini adalah dukungan browser. Hanya browser modern saja yang telah mendukung CSS3, sehingga untuk user yang masih menggunakan browser lama tidak akan dapat melihat efek dari CSS3 tersebut. Untuk pseudo-class :nth-child telah didukung oleh Firefox 3.5+, Safari 3.1+, Opera 9.0+ dan Chrome 2.0+.

Namun masalah kecil ini jangan sampai mencegah anda untuk mencoba menggunakannya. Hal ini dikarenakan sifat CSS yang akan mengabaikan attribute yang tidak tersedia. Jadi ketika user menggunakan browser lama maka dia akan mendapatkan tampilan table biasa. Sedangkan bagi user yang menggunakan browser modern akan mendapatkan tambahan pengalaman melalui tampilan Zebra Table.

Namun pada perkembangannya, fungsi-fungsi di dalam WordPress justru diperluas oleh beberapa pengembang website untuk dapat menyelesaikan berbagai kebutuhan website yang lebih komplek, seperti Website gallery, E-Commerce, dan sebagainya. Dengan kata lain sekarang ini WordPress telah berkembang menjadi sebuah CMS (Content Management System).

Melihat perkembangan tersebut, pengembang WordPress mulai berpikir untuk menambahkan beberapa fasilitas yang dapat mendukung kebutuhan suatu Content Management System. Dan salah satu fasilitas tersebut adalah Post Type.

Pengertian Post Type

Untuk mempermudah pembahasan tentang Post Type, kita dapat mengartikan Post Type sebagai tipe content di dalam suatu website. Sebelumnya kita telah mengenal tiga jenis konten yang disediakan oleh WordPress, yaitu Post, Page dan Attachment. Ketiga jenis konten ini memiliki karakteristik dan cara penyajian yang berbeda-beda.

Dengan tiga jenis konten tersebut akan sangat sulit untuk memenuhi kebutuhan website yang lebih komplek. Tanpa adanya kesempatan untuk menambahkan tipe konten baru, membutuhkan kerja extra untuk dapat memenuhinya. Sehingga dengan adanya penambahan fasilitas yang memungkinkan untuk membentuk tipe konten baru jelas merupakan kabar gembira bagi pengguna WordPress.

Cara Penambahan Post Type

Secara teknis setiap konten (post, page atau attachment) oleh WordPress akan disimpan di dalam database didalam table wp_post, dan dibedakan dengan nilai dari field post_type (diisi sesuai dengan nama tipe post). Dengan nilai field post_type inilah kita kemudian akan membedakan konten yang akan ditampilkan.

Menambahkan Post Type berarti kita menyimpan konten WordPress dengan nilai field post_type baru. Namun untuk melakukannya tidak semudah yang dikatakan. Pertama kita perlu membuat fungsi yang menyimpan data post dengan post_type berbeda. Kemudian kita juga perlu membuat halaman administration yang akan berfungsi sebagai input data. Terakhir kita perlu membuat fungsi-fungsi yang menampilkan content post_type tersebut.

Kabar baiknya, sekarang kita dapat memenuhi kebutuhan penambahan post type baru tanpa harus membuat fungsi-fungsi itu sendiri, karena WordPress telah menyediakannya untuk kita. Untuk menambahkan post type baru dapat dilakukan cukup dengan satu fungsi, yaitu register_post_type. Selain berfungsi untuk mendaftarkan post type baru ke dalam sistem WordPress, function ini juga berfungsi untuk mengatur karakteristik dari post type tersebut. Function ini membutuhkan dua parameter, yaitu :

$name

Parameter yang akan menentukan nama dari post type. Nama ini akan berfungsi untuk membedakan konten di dalam database serta untuk menampilkan tipe konten tersebut.

$arguments

Parameter opsional yang digunakan untuk mengatur karakteristik post type. Argument kita masukkan ke dalam function dalam bentuk Array, dengan array key sebagai kata kunci argument dan array value sebagai nilai argument. Untuk penjelasan lebih lengkap tentang arguments pengaturan post type dapat dibaca pada "Pengaturan Post Type pada WordPress".

Setiap kita melakukan pendaftaran terhadap suatu post type baru maka akan ditambahkan bagian baru di dalam bagian administrator sesuai dengan pengaturan yang kita tentukan. Berikut contoh penambahan post type baru :

Contoh diatas akan mendaftarkan suatu post type bernama "work". Untuk memahami detail tentang pengaturan post type diatas dapat dilihat pada "Pengaturan Post Type pada WordPress".

Satu hal yang paling penting dalam pendaftaran post type baru adalah dimana kode pendaftaran diletakkan dan dipanggil. Ketika request datang ke sistem WordPress maka post type yang telah kita buat harus sudah dapat dikenali oleh WordPress sehingga halaman pengaturan post type tersebut dapat dibuat (di dalam administration) atau konten dengan tipe post tersebut dapat ditampilkan.

Agar hal tersebut dapat di penuhi kita harus meletakkan kode pendaftar post type (function register_post_type) di bagian awal dari proses penanganan request WordPress. Disini kita dapat memanfaatkan hook action init yang telah disediakan oleh WordPress. Untuk melakukannya pertama kita perlu menggabungkan kode pendaftaran post type ke dalam suatu function, kemudian function tersebut kita daftarkan ke action init, berikut kodenya.

Setelah kita mendaftarkan post type tersebut, kita langsung dapat menggunakannya. Dalam artikel ini hanya sekedar pengenalan terhadap post type WordPress, untuk pembahasan lebih detail termasuk pengenalan pengaturan post type dan contoh implementasi post type akan dijelaskan pada beberapa artikel kami berikutnya.

Penerapan konsep Encapsulation dilakukan dengan memperjelas visibility dari setiap property di dalam class. Visibility akan menentukan dimana property dan method dapat diakses. Di dalam PHP kita mengenal 3 jenis visibility, yaitu :

Public

Setiap property dan method dengan hak akses ini akan dapat diakses secara bebas baik dari luar maupun dari dalam class.

Private

Dengan hak akses ini akan membuat property dan method hanya dapat diakses di dalam class.

Protected

Dengan hak akses ini, property dan method tidak dapat diakses dari luar class namun dapat diakses di dalam class turunan.

Kita menggunakan visibility ini dengan menambahkan kata kunci visibility di depan property atau method, seperti :

Penggunaan visibility akan sangat tergantung dari desain dan kebutuhan applikasi.

Penggunaan Setter dan Getter

Penerapan konsep encapsulation yang paling aman adalah dengan menutup seluruh akses property class baik dengan menggunakan visibility private maupun protected. Kemudian untuk property yang didesain untuk dapat diakses dari luar class, kita dapat membuat method yang berfungsi untuk merubah (setter) dan mendapatkan (getter) nilai property. Berikut contoh dari method getter dan setter ini :

Untuk method setter kemudian kita dapat menambahkan beberapa kode untuk memperketat nilai yang dapat dimasukkan ke dalam property.

Mendesain Method Getter yang Efektif

Ketika kita membuat suatu method getter, kita mungkin hanya akan secara langsung mengembalikan nilai di dalam property seperti yang ada dalam contoh diatas. Tentu saja tidak ada yang salah dengan hal ini, namun kita dapat mendesain method getter agar dapat digunakan secara lebih efektif.

Memeriksa Nilai Property

Ketika menggunakan method getter terkadang kita tidak mengetahui secara pasti nilai di dalam property sehingga dengan desain method getter sebelumnya kita perlu memeriksa nilai yang dihasilkan.

Berikut ini contoh pemeriksaan agar nilai yang dihasilkan oleh method getter selalu berbentuk string,

Jika kita mempunyai kebutuhan kode diatas di beberapa tempat di dalam applikasi tentu saja akan sangat merepotkan, karena kita harus mengulang kode yang sama disetiap tempat yang membutuhkannya.

Solusi terbaik dalam masalah ini adalah dengan melakukan pemeriksaan di dalam method getter. Berikut contoh untuk penyelesaian dari method getName.

Sekarang untuk menggunakan method getName cukup dengan kode berikut :

Menambahkan Nilai Default

Dalam method getter di atas akan mengembalikan nilai false jika tidak sesuai dengan pemeriksaan. Namun terkadang kita menginginkan adanya nilai default jika pemeriksaan tidak sesuai. Berikut contohnya :

Kita bisa menyederhanakan kode di atas dengan memungkinkan method getter untuk mengembalikan nilai default ketika tidak sesuai dengan pemeriksaan nilai yang di dapatkan. Berikut contohnya :

Penggunaan method getName sekarang menjadi lebih sederhana, yaitu :

Menyusun suatu method getter akan sangat tergantung pada desain applikasi yang dikerjakan, namun dengan membuat desain method getter yang disesuaikan dengan penggunaannya akan memberikan keuntungan lebih bagi kita.

Walaupun fasilitas ini telah ditambahkan di dalam WordPress namun ketersediaan dan penggunaannya sangat tergantung pada theme yang digunakan. Jika dalam theme yang digunakan tidak mendukung penambahan post thumbnail maka kita tidak dapat menggunakannya. Penerapan post thumbnail dari setiap theme pun akan berbeda-beda. Sebagai contoh pada default theme 3.0, twentyteen, setiap post thubmnail akan ditempatkan pada bagian header website.

Berikut contoh dari post thumbnail :

[wptf act="InsertImg" src="post-thumbnail/post-thumbnail-example.jpg" alt="Gambar contoh post thumbnail"][/wptf]

Dengan kenyataan seperti itu, maka terlalu merepotkan jika kita terlalu mengandalkan theme dan plugin hanya untuk menambahkan post thumbnail. Pada tutorial ini akan menjelaskan bagaimana menambahkan post thumbnail ke dalam sistem WordPress dengan sangat mudah dan cepat.

Untuk menambahkan post thumbnail kita perlu memberitahukan kepada WordPress bahwa theme yang kita gunakan mendukung fasilitas post thumbnail. Untuk melakukannya buka file function.php di folder theme yang digunakan dan tambahkan kode berikut :

Kode diatas akan menambahkan sebuah panel di halaman administrator "Add New Post" dan "Add New Page" berlabel Featured Image. Panel ini akan berfungsi untuk menyertakan sebuah image ke dalam post. Setelah menyertakan image ke dalam post maka anda tinggal menggunakannya di dalam theme.

[wptf act="InsertImg" src="post-thumbnail/featured-image-panel.jpg" alt="Gambar contoh post thumbnail"][/wptf]

Disini kita hanya akan memberikan contoh untuk penambahan image di bagian atas setiap post. Caranya cukup sederhana, anda cukup menambahkan kode singkat berikut pada file function.php :

' . get_the_post_thumbnail() . '

Dengan kode diatas maka setiap image yang disertakan pada setiap post akan ditambahkan pada bagian atas dari setiap post. Berikut contohnya :

[wptf act="InsertImg" src="post-thumbnail/post-thumbnail-insert.jpg" alt="Gambar contoh post thumbnail"][/wptf]

Image Size

Pada kode di atas hanya akan menampilkan gambar post thumbnail dengan ukuran sesuai dengan ukuran default dari function get_the_post_thumbnail. Untuk merubahnya kita dapat menentukan ukuran gambar melalui parameter function tersebut. Berikut contohnya :

' . get_the_post_thumbnail() . '

Selain secara langsung menentukan ukuran gambar dengan nilai yang anda inginkan, anda juga dapat menentukan ukuran gambar dengan kata kunci yang telah disediakan oleh WordPress, yaitu :

1. thumbnail - Ukuran 150px x 150px
2. medium - Ukuran 300px x 300px
3. large - Ukuran 640px x 640px

Apabila ada ukuran yang sesuai anda tinggal mengganti parameter $imageSize dengan kata kunci tersebut, yaitu :

Image Style

Untuk mempercantik tampilan post thumbnail tersebut masukkan kode CSS dibawah ini, ke dalam file style.css di dalam folder theme anda :

Berikut hasil akhir dari post thumbnail :

[wptf act="InsertImg" src="post-thumbnail/post-thumbnail-finish.jpg" alt="Gambar contoh post thumbnail"][/wptf]

Demikianlah tutorial tentang penambahan gambar post thumbnail di dalam suatu post, semoga bermanfaat. Dan selamat mencoba.

Link akan menjadi sebuah hal yang paling penting di dalam suatu website. Tanpa adanya link tidak akan terbentuk jaringan internet yang kuat. Link akan menghubungkan satu halaman web dengan halaman web lainnya sehingga memungkinkan halaman-halaman web saling berkomunikasi. Di dalam sisi SEO link menjadi unsur terpenting di dalam pengukuran peringkat website.

Link Style

Di dalam menghias suatu link dapat dilakukan dengan berbagai cara dan dengan berbagai attribute CSS. Namun kita harus tetap memperhatikan anatomi suatu link, dimana link merupakan suatu bagian di dalam halaman web yang dapat diklik dan akan membawa user ke halaman lain.

Selain itu kita perlu memperhatikan kebiasaan penyusunan link secara umum pada website lain karena sebagian besar waktu akan dihabiskan di website lain sehingga secara pasti user akan terbiasa dengan bentuk link di dalam website-website tersebut.

CSS Selector

Selector di dalam CSS berfungsi untuk menargetkan element di dalam dokumen yang akan diubah tampilannya. Untuk mengubah tampilan dari suatu link kita dapat menggunakan element selector a. Lihatlah contoh di bawah ini untuk lebih jelasnya.

Kode CSS diatas akan merubah warna teks link menjadi biru seperti : Blue Link.

Selain element selector a, CSS menyediakan beberapa pseudo-classes selector yang secara khusus digunakan untuk link. Dengan menggunakan selector ini kita dapat mengubah style link untuk berbagai kondisi. Beberapa pseudo-classes selector ini antara lain :

:link

Pseudo-classes selector yang digunakan untuk menargetkan element link pada kondisi biasa atau belum adanya interaksi dari user ke link. Efek dari selector ini hampir sama seperti di dalam element selector.

:visited

Pseudo-classes selector yang digunakan untuk menargetkan element link, dimana link tersebut telah diklik sebelumnya.

:hover

Pseudo-classes selector yang digunakan untuk menargetkan element link ketika mouse sedang berada di atasnya.

:active

Pseudo-classes selector yang digunakan untuk menargetkan element link ketika link sedang diklik.

Satu hal yang perlu anda ingat tentang selector pseudo-class diatas adalah urutan di dalam file css harus seperti urutan diatas, jika tidak mungkin efek code css tidak akan terlihat. Selain itu untuk element selector a jika di deklerasikan setelah pseudo-classes ini akan menggantikan seluruh style dari kondisi link diatas.

Contoh Tampilan Link

Dalam menghias element link dapat dilakukan dengan berbagai gaya seperti mengubah warna teks, mempertebal teks, menambah garis bawah, dan sebagainya. Selain itu dengan memberikan gaya yang berbeda pada setiap kodisi link (hover, active, visited) akan semakin memperkuat link tersebut.

Sebelum anda mengatur style element link, sebaiknya anda melakukan pembersihan terhadap default style dari browser sehingga dapat mempermudah dalam mengatur tampilan link. Satu yang disediakan oleh Yahoo (YUI) adalah contoh yang cukup bagus untuk melakukannya.

Berikut beberapa contoh dari pengaturan tampilan link :

Simple Link Style

Penyusunan tampilan link yang paling sederhana adalah mengubah warna dan menambahkan garis bawah. Style ini sangat sesuai untuk link yang berada di dalam suatu paragraph. Berikut beberapa contohnya :

Kode CSS ini akan menghasilkan link seperti ini.

Kita coba menambahkan style dengan Pseudo-classes, sebagai berikut :

Kode CSS ini akan menghasilkan link seperti ini.

Underline With Border

Keuntungan penggunaan border daripada attribute CSS text-decoration adalah garis yang ditambahkan menjadi lebih bervariasi. Berikut contohnya :

Kode CSS ini akan menghasilkan link seperti ini.

Text Background

Menambahkan warna background ke teks link akan memberikan keunikan tersendiri bagi element link. Berikut contohnya :

Kode CSS ini akan menghasilkan link seperti ini.

Style seperti ini akan sesuai untuk kondisi hover sedangkan untuk kondisi biasa kita hias secara lebih sederhana. Berikut contohnya :

Kode CSS ini akan menghasilkan link seperti ini.

Block Link

Pada contoh sebelumnya kita hanya menghias link yang tampak di dalam paragraph (inline). Namun kita bisa saja merubah link menjadi element block. Hal ini sering terlihat pada bagian sidebar website.

Dengan style seperti ini area klik dari link menjadi lebih luas dan cukup sesuai untuk diterapkan pada suatu list link. Berikut contohnya :

Kode CSS ini akan menghasilkan :

• List Link 1
• List Link 1
• List Link 2

Kita perlu memberikan attribute width pada element link atau element kontainer dari link agar tidak terlalu lebar (jika tidak ditentukan maka lebar akan seluas halaman atau kontainernya).

Button Link

Html mempunyai tag button yang digunakan di dalam form untuk membentuk suatu button. Namun ketika kita ingin membentuk suatu button tetapi tidak sebagai bagian dari form maka kita dapat menggunakan link dengan beberapa manipulasi CSS.

Untuk langkah-langkah lengkap bagaimana membentuk button link dapat dibaca pada artikel "[link_inserter name="membuat-button-link" type="post" title="Lihat tutorial Membuat Button Link" text="Membuat Button Link"]"

Membedakan Link Dalam dan Link Luar

Dengan membedakan link ke halaman di luar website dengan link ke halaman di dalam website yang sama akan membuat user dapat mengetahui ke mana tujuan dari link sebelum mengkliknya.

Untuk tutorial lengkap berkatian dengan masalah ini dapat dibaca pada artikel "[link_inserter name="membedakan-link-luar-dan-link-dalam" type="post" title="Lihat tutorial Membedakan Link Dalam dan Link Luar" text="Membedakan Link Dalam dan Link Luar"]"

Itulah beberapa contoh dari penyusunan tampilan link. Walaupun penulis yakin bahwa di dalam artikel ini masih banyak kekurangan namun semoga dapat bermanfaat bagi semua pembaca. Selanjutnya kita akan bermain-main dengan Javascript untuk membentuk perilaku link.

Pembahasan tentang link akan dibagi ke dalam tiga seri artikel yang akan membahas secara mendalam tentang link dalam tiga aspek yaitu struktur, style dan script. Untuk artikel yang pertama ini kita akan berbicara tentang struktur HTML yang membentuk link.

Struktur Link

Ketika kita bicara struktur HTML yang membentuk link, maka kita berbicara tag a. Pada tag ini ada beberapa attribute yang cukup penting dalam membentuk link, anatara lain :

href

Attibute wajib yang harus selalu hadir di dalam tag a. Attribute ini digunakan untuk menentukan lokasi tujuan dari link.

[xml autolinks="false"] Iznyn Blog [/xml]

Kode diatas akan menghasilkan :

Iznyn Blog

title

Attribute yang walaupun bersifat pilihan, namun cukup penting. Attribute ini dapat digunakan untuk memberikan informasi kepada user tentang lokasi tujuan dari link tersebut. Text yang dimasukkan di dalam attribute ini dapat dilihat melalui tooltip yang muncul ketika kita meletakkan mouse diatas sebuah link.

Hal ini sangat bermanfaat, karena kita dapat menampilkan teks singkat sebagai label dari link yang secara langsung dilihat oleh user, kemudian kita dapat menggunakan attribute title untuk memperjelas tentang lokasi tujuan link. Untuk lebih jelasnya perhatikan contoh dibawah ini.

[xml autolinks="false"] Link [/xml]

Kode diatas akan menghasilkan :

Link

accesskey

Attribute yang menyediakan suatu key shortcut untuk user dalam mengakses link di dalam suatu halaman. User sendiri dapat menggunakan accesskey yang disediakan dalam link berbeda untuk setiap jenis browser dan platform. Sebagai contoh pada firefox/window kita dapat mengunakan accesskey dengan menekan kombinasi shift+ctrl+key.

Walapun sangat berguna namun kita harus menyediakan suatu metode khusus untuk menampilkan accesskey dari suatu link agar dapat diketahui oleh user. Tanpa dilakukan hal ini, maka user tidak akan pernah menyadari bahwa accesskey itu hadir. Beberapa cara dapat dilakukan dan yang paling sering digunakan adalah dengan menyertakannya di dalam attribute title. Namun cara ini pun terdapat masalah karena user perlu meletakkan mouse diatas link terlebih dahulu untuk dapat mengetahui adanya accesskey.

Cara lain yang dapat digunakan adalah dengan menyertakan informasi accesskey di dalam teks link, seperti contoh di bawah ini :

[xml autolinks="false"] Link [Access key = a] [/xml]

Kode diatas akan menghasilkan :

Link [Access key = a]

tabindex

Di dalam suatu halaman web ketika seorang user mengklik tombol tab pada keyboard maka akan menelurusi setiap link yang ada di dalamnya. Dan attribute ini digunakan untuk menentukan urutan penelusuran link tersebut. Secara normal penelusuran akan dimulai dari link yang muncul pertama kali di kode html. Sebagai contoh,

[xml autolinks="false"] Link [/xml]

Kode diatas akan menghasilkan :

Link

rel

Attribute yang digunakan untuk menggambarkan hubungan antara halaman yang menjadi tujuan link (yang disertakan di dalam attribute href) dengan halaman yang mereferensikan. Nilai yang dapat dimasukkan dalam attribute ini sangat bervariasi, berikut beberapa link yang mencantumkan beberapa nilai attribute rel.

• HTML 4 Link Type
• HTML5 rel values
• Microformat rel Value
• XFN relationships meta data profile

Attribute ini sebenarnya tidak disupport oleh seluruh browser, atau browser akan mengabaikan attribute ini dan tidak akan memberikan perilaku yang berbeda untuk setiap tipe relationship. Namun Attribute rel dapat membantu search engine untuk mendapatkan diskripsi tentang suatu link. Walaupun demikian kita dapat membedakan sendiri setiap attribute rel dengan bantuan css dan javascript. Kita akan menjelaskannya pada dua seri artikel berikutnya.

Berikut beberapa contoh penggunaan attribute rel dapat dilihat dibawah ini.

[xml autolinks="false"] Home [/xml] [xml autolinks="false"] Tentang link [/xml]

Tips

Berikut beberapa tips yang berhubungan dengan penyusunan struktur Html Link sehingga dapat menghasilkan struktur yang baik.

Teks Link

Di dalam menentukan teks link sebaiknya digunakan kata-kata singkat namun deskriptif. Hindari penggunaan kata-kata yang kurang deskriptif seperti disini, berikut ini, link ini etc.

Sebagai contoh daripada menggunakan kalimat berikut :

Link disusun dengan menggunakan tag HTML a. Untuk lebih jelasnya klik disini.

Lebih baik menggunakan,

Link disusun dengan menggunakan tag HTML a. Pada artikel "Memahamai Web Link" akan memberikan penjelasan yang sangat bagus tentang link.

href value

Hal penting dalam menentukan url dari link tujuan adalah bahwa dia tidak boleh menyertakan karakter khusus HTML seperti &, <, >, etc. Jika karakter tersebut tetap disertakan akan menghasilkan kode HTML yang tidak valid. Untuk mengatasinya kita harus mengubah karakter tersebut menjadi HTML entities. Sebagai contoh untuk karakter & dapat dirubah menjadi & atau &.

Artikel ini akan berisi tentang penjelasan tentang seluruh setting yang secara default disediakan oleh Wordpress. Sehingga kita dapat memiliki pemahaman yang lebih baik tentang fungsi opsi-opsi tersebut.

Secara default WordPress menyediakan kepada kita 7 halaman settings, yaitu General Settings, Writting Settings, Reading Settings, Discussion Settings, Media Settings, Privacy Settings dan Permalink Settings. Dengan setiap halamannya mengandung berbagai pengaturan terhadap perilaku WordPress. Berikut penjelasan dari masing-masing halaman settings.

Note : Hal yang perlu diingat bahwa pengaruh dari sebagian besar settings WordPress sangat dipengaruhi oleh theme yang digunakan. Namun demikian secara umum dia mempunyai basic yang sama. Perlu dicatat, bahwa penulis menggunakan theme Twenty Ten 1.0, theme terbaru WordPress yang disertakan bersama versi 3.0.

General Settings

[wptf act="InsertImg" src="wordpress-settings/general-setting-thumb.jpg" alt=""][/wptf]

Halaman settings yang berisi segala pengaturan yang bersifat umum, seperti zona waktu, membership dsb. Berikut beberapa pengaturan yang dapat dibuat pada halaman ini.

Site Title

Menentukan title dari website. Biasanya oleh sebagian besar theme, opsi ini akan diletakkan di dua tempat, yaitu :

• Di dalam tag <title> di dalam html head, yang kemudian oleh browser akan di tampilkan pada browser bar.

  [wptf act="InsertImg" src="wordpress-settings/browser-title-bar.jpg" alt=""][/wptf]

• Pada bagian teratas dari halaman web sebagai website header.

  [wptf act="InsertImg" src="wordpress-settings/title.jpg" alt=""][/wptf]

Tagline

Digunakan untuk menentukan penjelasan singkat tentang website. Oleh sebagian besar WordPress theme akan diletakkan dibagian atas dari halaman web dan lebih khusus dibawah site header yang diatur oleh Site Title. Namun di dalam theme default kita akan melihat tag line diletakkan disebelah kanan dari header :).

WordPress Address

Menentukan letak seluruh file dasar WordPress ditempatkan. Setelah dilakukan penginstalan, WordPress akan menentukan nilai ini secara otomatis. Dan sebaiknya jangan berurusan dengan opsi ini jika tidak ingin terjadi suatu bencana besar.

Site Address

Secara default, opsi ini akan mempunyai nilai yang sama seperti opsi WordPress Address. Secara khusus opsi ini digunakan jika kita menginginkan halaman depan web kita berbeda dengan alamat tempat file dasar WordPress di letakkan. Sebagai contoh misalkan kita ingin menggunakan WordPress hanya pada bagian http://example.com/blog. Maka kita meletakkan file Wordpress pada bagian tersebut, kemudian kita menentukan opsi ini sebagai http://example.com/.

Untuk lebih jelasnya tentang masalah ini dapat dilihat pada dokumentasi WordPress.

E-mail Address

Digunakan untuk menentukan alamat e-mail administrator. Secara umum, alamat e-mail ini akan digunakan oleh WordPress untuk beberapa pemberitahuan, seperti pemberitahuan adanya komentar baru, pemberitahuan adanya user baru, dsb. Selain itu alamat e-mail mungkin juga akan digunakan oleh beberapa plugin.

Membership

Mengatur keanggotaan blog/website. Jika dihidupkan (checked) maka pada halaman login akan ditampilkan link register sehingga setiap orang dapat melakukan pendaftaran keanggotaan.

New User Default Role

Setiap user yang melakukan proses registration maka secara otomatis akan diberikan suatu role. Setiap role akan menentukan kemampuan user dalam mengakses setiap fasilitas administrator. Secara default ada 5 jenis role yang disediakan oleh WordPress, yaitu :

• Subcriber - Role dengan tingkatan paling rendah paling rendah. User dengan jabatan ini hanya mampu melihat dan mengedit profile di halaman administrator. Kecuali untuk alasan yang cukup jelas, anda seharusnya memilih opsi ini.
• Contributor - Dapat diartikan sebagai penulis. User dengan tipe role ini dapat membuat post baru serta dapat membuat perubahan terhadap post yang dia publikasikan.
• Author - Hampir sama seperti user Author hanya saja dia juga dapat berinteraksi dengan menu media. Menu ini digunakan untuk mengupload media seperti gambar, video, file html sehingga kemudian dapat ditambahkan ke dalam suatu post.
• Editor - Semua kegiatan manipulasi content web dapat dilakukan oleh user ini, seperti menambahkan post dan page, pengubahan setiap post atau page, penambahan media, dsb.
• Administrator - Role paling tinggi derajatnya, semua fasilitas di dalam halaman admin dapat diakses oleh user dengan role ini.

Penjelasan tentang kemampuan role diatas hanya sebatas fasilitas administrator yang secara default disediakan oleh WordPress. Untuk fasilitas yang disediakan oleh plugin akan tergantung pada pengaturan dari plugin itu sendiri.

Sebaiknya dalam menentukan default role dari member anda tetap memilih Subscriber. Jika kemudian menginginkan adanya user dengan role lain dapat dilakukan perubahan secara manual di halaman admin.

Time Zone

Menentukan zona waktu tempat tinggal anda.

Date Format

Menentukan format tanggal. Opsi ini sering digunakan oleh theme untuk menentukan bagaimana tanggal post ditampilkan.

[wptf act="InsertImg" src="wordpress-settings/post-date.jpg" alt=""][/wptf]

Secara default wordpress telah menyediakan beberapa format tanggal, namun jika tidak sesuai dengan keinginan, anda dapat menyusunnya sendiri. Format tanggal diatur sesuai dengan PHP Date Format. Di dalam WordPress Docs telah dijelaskan secara rinci bagaimana cara menyusun format tanggal ini.

Time Format

Hampir sama seperti opsi Date Format, hanya opsi ini digunakan untuk mengatur format waktu.

Week Starts On

Masih ada hubungannya dengan penanggalan, opsi ini berfungsi untuk menentukan nama hari dari awal dalam perhitungan mingguan.

Writing Settings

[wptf act="InsertImg" src="wordpress-settings/writting-settings.jpg" alt=""][/wptf]

Pada bagian ini berisi segala sesuatu yang berhubungan dengan penulisan di dalam blog.

Size of the post box

Menentukan ukuran box dari field tempat kita menuliskan konten, baik post maupun page. Sebagai contoh, jika kita menentukan ukuran post box menjadi 16 baris, maka post box akan menjadi lebih besar seperti terlihat pada gambar dibawah ini.

[wptf act="InsertImg" src="wordpress-settings/post-box.jpg" alt=""][/wptf]

Formatting

Disini ada dua check options, yaitu :

• Pada baris pertama digunakan untuk menentukan apakah didalam konten post, emoticons akan di-convert ke suatu gambar icon. Sebagai contoh karakter emoticons :) akan dirubah menjadi :) jika opsi ini dihidupkan.

• Baris kedua sedikit lebih rumit, disini akan menentukan apakah WordPress akan secara otomatis memperbaiki kesalahan penulisan tag XHTML Sebagai contoh kesalahan penulisan <br> akan diperbaiki menjadi <br /> jika opsi ini dihidupkan.

  Jika anda tidak memahami tentang HTML, sebaiknya anda menghidupkan opsi ini ketika doctype dari halaman web ditentukan sebagai XHTML 1.0 Strict. Untuk memeriksa doctype dapat dilakukan dengan melihat pada page source halaman web anda ( Dengan menekan ctrl+U ). Lihat pada bagian teratas jika terdapat text seperti dalam gambar dapat dipastikan halaman menggunakan XHTML.

  [wptf act="InsertImg" src="wordpress-settings/doctype.jpg" alt=""][/wptf]

Default Post Category

Menentukan default category post ketika mempublikasikan post anda tidak menentukan category.

Default Link Category

Menentukan default category link ketika menambahkan link baru anda tidak menentukan category.

Press This

Fasilitas ini sedikit unik karena akan berhubungan dengan browser secara langsung. Dengan menggunakan fasilitas Press This memungkinkan kita untuk mendapatkan link dari suatu halaman web yang sedang di lihat di dalam browser untuk disisipkan dalam suatu post.

Ada beberapa langkah yang perlu dilakukan untuk dapat memanfaatkan fasilitas ini, antara lain :

• Untuk menggunakan Press This pertama kita harus membuat bookmark dari link press this di dalam browser. Hal ini dilakukan dengan sangat mudah, yaitu hanya dengan menggeser link press this yang ada pada bagian setting ini ke bagian boomark toolbar dari browser.

  [wptf act="InsertImg" src="wordpress-settings/drag-pressthis.jpg" alt=""][/wptf]

• Kemudian dari sebuah halaman web yang kita lihat, klik bookmark press this yang telah dibuat sebelumnya.

• Aksi tersebut kemudian akan menghasilkan sebuah jendela baru yang berisi post box dan telah tersisipi link dari halaman web yang kita lihat tadi. Dari sini anda kemudian dapat menambahkan konten tambahan sebelum mempublikasi post.

  [wptf act="InsertImg" src="wordpress-settings/add-pressthis.jpg" alt=""][/wptf]

Post via e-mail

Sebuah fasilitas yang dapat digunakan untuk mempublikasikan suatu post melalui email. Saya tidak akan menjelaskan bagaimana cara untuk menggunakan fasilitas ini, namun anda dapat membaca langkah-langkahnya pada dokumentasi WordPress, Post to your blog using email.

Update Services

Opsi yang digunakan untuk menentukan alamat web services yang menangani pencatatan update post. Untuk lebih jelasnya dapat dilihat pada dokumentasi WordPress, Update Services.

Reading Settings

[wptf act="InsertImg" src="wordpress-settings/reading-settings-thumb.jpg" alt=""][/wptf]

Halaman opsi yang berhubungan dengan penyajian konten blog. Opsi/settings yang disediakan halaman ini antara lain :

Front page displays

Digunakan untuk mengatur kontent pada halaman depan blog. Disini ada dua pilihan, yaitu :

• Your latest posts - Menampilkan beberapa post terbaru di halaman depan blog.
• A static page - Menampilkan suatu static page di halaman depan blog.

Blog pages show at most

Menentukan jumlah maksimum dari post yang akan ditampilkan didalam setiap posts list.

Syndication feeds show the most recent

Menentukan jumlah maksimum dari daftar post ketika ditampilkan didalam suatu syndication feeds.

For each article in a feed, show

Mengatur konten dari post di dalam suatu feed, apakah akan ditampilkan secara keseluruhan (Full text) atau hanya sekedar ringkasan saja (Summary).

Encoding for pages and feeds

Mengatur character encoding untuk konten di dalam website maupun untuk syndication feeds.

Discussion Settings

[wptf act="InsertImg" src="wordpress-settings/discussion-settings-thumb.jpg" alt=""][/wptf]

Sebagian besar settings yang ada di dalam bagian ini berhubungan dengan kegiatan diskusi di dalam blog, baik dalam bentuk comment, pingback maupun trackback. Kami tidak akan menjelaskan seluruh opsi yang ada dibagian ini karena sebagian besar hanyalah opsi checkbox, yang hanya membutuhkan anda untuk meng-on/off opsi tersebut. Selain itu didalam setiap opsi juga telah diberikan keterangan yang cukup jelas dan mudah dipahami.

Namun demikian ada tiga pengaturan yang sedikit rumit dan perlu dijelaskan disini, yaitu :

Comment Moderation

Bisa dikatakan opsi ini merupakan benteng pertahanan pertama dari serangan comment spam. Ada dua hal yang dapat kita atur di dalam opsi ini untuk melakukan pencegahan terhadap spam, yaitu :

Jumlah maksimum link di dalam konten comment

Ciri khas dari suatu comment spam adalah mengandung banyak link. Dengan opsi ini anda dapat mengatur toleransi link di dalam konten komentar.

Word Blaklist

Selain jumlah link, anda dapat melarang kehadiran suatu string/word baik di dalam konten, email, URL atau IP dari komentar yang masuk. Anda harus memasukkan daftar kata perbaris didalam textarea yang disediakan.

Setiap komentar yang masuk namun mengandung perketatan yang kita buat melalui opsi ini, status komentar akan selalu pending dan harus mendapatkan persetujuan (moderation) dari anda sebelum diterima bahkan ketika default setting publikasi dari komentar diatur tanpa melalui proses persetujuan.

Comment Blacklist

Seperti setting Word Blacklist pada bagian Comment Moderation hanya saja setiap komentar yang mengadung kata blacklist akan ditandai sebagai spam.

Avatars

Avatars merupakan suatu gambar kecil sebagai identitas suatu commenter yang biasanya ditampilkan dalam setiap komentar. Opsi ini digunakan untuk mengatur penyedian avatar di dalam post comment, berikut beberapa opsi yang disediakan.

Avatar Display

Menentukan apakah akan menampilkan avatar di dalam setiap komentar.

Maximum Rating

Disini berhubungan dengan kedewasaan konten dari artikel dimana komentar berada. Ada empat tingkat kedewasaan konten, yaitu :

1. G - Apabila isi dari artikel sesuai untuk semua umur
2. PG - Apabila artikel mengandung konten kekerasan dan hanya sesuai untuk umur diatas 13 tahun
3. R - Apabila artikel mengadung konten pornografi dan hanya sesuai untuk umur diatas 17 tahun
4. X - Apabila artikel mengadung sesuatu yang lebih buruk dari tingkat diatas

Secara khusus ini berhubungan dengan setting avatar di dalam gravatar. Di dalam gravatar kita dapat menentukan content rating dari avatar. Dengan kata lain opsi ini akan menentukan avatar mana yang akan ditampilkan dari suatu email commenter berdasarkan tingkat kedewasaan konten.

Default Avatar

Secara umum, WordPress menggunakan services dari gravatar. Dan avatar akan ditampilkan jika email yang dimasukkan oleh commenter terdaftar dan mempunyai avatar di gravatar. Opsi ini akan mengatur avatar yang akan ditampilkan jika commenter tidak mempunyai avatar terdaftar di gravatar

Media Settings

[wptf act="InsertImg" src="wordpress-settings/media-settings-thumb.jpg" alt=""][/wptf]

Bagian yang mengatur penyertaan media (image, video dan material web lainnya) ke dalam blog. Berikut beberapa setting yang secara default disediakan :

Image sizes

Ketika kita menyertakan gambar/image ke dalam suatu post maka kita akan diberikan 4 pilihan ukuran gambar, yaitu thumbnail, medium, large dan original. Kita dapat menentukan ukuran dimensi dari pilihan ukuran gambar tersebut (dengan satuan pixel).

[wptf act="InsertImg" src="wordpress-settings/media-size.jpg" alt=""][/wptf]

Untuk ukuran thumbnail kita juga diberikan pilihan apakah akan melakukan pemotongan (croping) image atau hanya mengubah ukuran sesuai dengan proposi gambar.

Embeds

Embeds merupakan kegiatan penyertaan suatu media dari web services seperti youtube, < a href="http://vimeo.com/">vimeo, dailymotion atau flickr ke dalam halaman web. Ada beberapa pengaturan yang dapat kita lakukan terhadap proses embeds ini, yaitu :

Auto-embeds

Jika opsi ini diaktifkan maka setiap link text yang disertakan dalam post akan secara otomatis diproses oleh WordPress, sebagai contoh menyertakan teks link berikut :

New video music form Trivium (Throes Of Perdition):

http://www.youtube.com/watch?v=7Eukj4AHwa0

That was a cool video.

Akan menghasilkan konten post berikut :

[wptf act="InsertImg" src="wordpress-settings/embed-youtube.jpg" alt=""][/wptf]

Maximum embed size

Menentukan ukuran embed di dalam konten post.

Uploading Files

Mengatur pengelolaan penyimpanan file media. Disini ada tiga pengaturan, yaitu :

Store uploads in this folder

Menentukan lokasi tempat file media disimpan. Lokasi harus relatif terhadap URL root WordPress, sebagai contoh jika lokasi ada di dalam http://yourwordpress.com/blog/media/ maka anda cukup mengisikannya dengan blog/media. Secara default lokasi penyimpanan file ada di dalam folder wp-content/upload.

Full URL path to files

Merupakan opsi optional. Jika ditentukan maka harus berisi Full URL dari tempat penyimpanan file media, sebagai contoh http://yourwordpress.com/blog/media/. Dari hasil pengamatan kami, kita tidak perlu menentukan opsi ini, karena WordPress sudah dapat menentukan sendiri URL path dari opsi Store uploads in this folder.

Organize my uploads into month- and year-based folders

Suatu opsi checkbox yang digunakan untuk menentukan apakah file media disimpan dengan melakukan pengelompokkan berdasarkan tanggal peng-upload-an. Misalkan anda meng-upload suatu image "myImage.jpg" pada tanggal 17 Agustus 2010, maka file tersebut akan disimpan dengan susunan berikut :

-- wp-content
  -- uploads
    -- 2010
      -- 08
        -- myImage.jpg   

Privacy Settings

[wptf act="InsertImg" src="wordpress-settings/privacy-settings-thumb.jpg" alt=""][/wptf]

Disini mengatur apakah anda akan membuat blog anda terlihat di dalam search engine atau tidak. Kecuali blog anda benar-benar rahasia dan hanya mengijinkan pihak tertentu yang mengunjungi blog anda maka yakinkan anda memilih opsi "I would like my site to be visible to everyone, including search engines (like Google, Bing, Technorati) and archivers" jika tidak maka blog anda tidak akan pernah di-index oleh search engine dan orang lain tidak akan pernah tahu bahwa blog anda hadir.

Permalink Settings

[wptf act="InsertImg" src="wordpress-settings/permalink-settings-thumb.jpg" alt=""][/wptf]

Digunakan untuk mengatur permalinks dari artikel post. Saya akan menjelaskan secara detail tentang bagian ini pada artikel saya berikutnya.

Setelah membaca artikel tersebut, saya menyadari betapa bahayanya masalah ini. Pada sebagian besar file library tersebut akan menghasilkan sebuah php error jika diakses secara langsung dari browser. Php error ini seharusnya tidak ditampilkan pada tahap produksi karena dapat menampilkan data sensitif yang akan menjadi jalan bagi seorang hacker untuk mengeksplorasi website kita.

Masalah di dalam File Library WordPress

Satu hal yang membuat masalah ini terjadi adalah cara WordPress dibangun. Dibalik kemudahan yang diberikan, WordPress adalah barang lama jika dilihat dari bagaimana WordPress disusun. WordPress disusun menggunakan PHP, namun masih menggunakan tehnik lama yang jauh dari konsep OOP (Object Oriented Programming).

Dengan menggunakan konsep OOP, kita dapat memusatkan eksekusi fungsi pada satu tempat dan file library (di dalam WordPress adalah folder wp_includes) hanya akan berisi deklarasi class. Disinilah masalah yang terdapat di dalam WordPress dimana file library juga mengandung kode eksekusi fungsi, sehingga bila dijalankan langsung akan menghasilkan php error.

Sayangnya WordPress tidak menggunakan suatu tehnik tertentu untuk mencegah akses langsung ke file library-nya. Didalam Joomla, pada setiap file library-nya selalu diawali dengan pemeriksaan definisi constant, apabila constant tidak didefinisikan atau berarti adalah akses langsung ke file library tersebut akan menghentikan proses dan menampilkan pesan error karena kita tidak mengeksekusi proses secara utuh. Pemeriksaan definisi constant tersebut seperti dibawah ini.

Constant _JEXEC sendiri dideklarasikan di file root, index.php, seperti berikut :

Solusi dengan .htaccess

Tehnik dari joomla inilah yang kemudian sempat saya rekomendasikan di dalam komentar saya pada artikel diatas. Walapun setelah dilakukan percobaan cara tersebut tidak dapat digunakan di dalam WordPress karena tidak adanya pemusatan penanganan request, contohnya untuk halaman administrator kita perlu secara langsung mengakses file wp-admin/index.php.

Mengetahui bahaya tersebut, saya yang juga pengguna WordPress merasa harus bekerja cepat untuk menutup celah keamanan tersebut. Dan setelah melakukan beberapa percobaan akhirnya saya menemukan sebuah solusi untuk menyelesaikan masalah tersebut.

Pada dasarnya solusi yang saya temukan ini masih dengan memodifikasi file .htaccess untuk mencegah request langsung ke file library WordPress. Namun berbeda dengan solusi yang diberikan pada artikel mas satrya diatas yang ternyata sudah terbukti menimbulkan masalah, solusi ini lebih sederhana dengan hanya merubah file .htaccess WordPress dan terbukti tidak menimbulkan masalah berarti.

File .htaccess WordPress

Sebelum kita memberikan solusi tersebut kita lihat dahulu struktur dasar dari .htaccess yang direkomendasikan oleh WordPress. Sebagai berikut :

Untuk pembahasan tentang masing-masing kode diatas diluar jangkauan artikel ini. Namun pada intinya kode diatas akan memerintahkan kepada server agar semua request yang secara fisik (baik folder atau file) tidak terdapat dalam server akan dilarikan ke file index.php. Kita tidak dapat merubah aturan dasar ini karena akan menyebabkan WordPress tidak berfungsi secara normal.

Mencegah Akses Langsung Ke File php Wordpress

OK, sekarang kita sampai pada inti dari artikel ini. Inti dari solusi dalam permasalahan pada artikel ini adalah mencegah akses langsung ke file php WordPress agar tidak menimbulkan celah keamanan. Namun kita tidak dapat memblokir seluruh file php karena ada beberapa file php yang dibutuhkan oleh WordPress untuk diakses secara langsung seperti file wp-login.php. Untuk itu berarti kita harus mengetahui secara pasti file-file mana sajakah yang perlu diakses secara langsung dan mana yang tidak.

Berikut ini gambaran tentang struktur direktori dari file php.

--root
  --wp-includes
  --wp-content
  --wp-admin
    --includes
    --import
    --maint

Dari struktur directory tersebut, hanya pada folder wp-includes dan wp-content yang akses ke file php akan kita tutup sepenuhnya. Selebihnya kita perlu memilah-milah terlebih dahulu.

Untuk menutup akses terhadap suatu file php dapat dilakukan dengan kode RewriteRule sebagai berikut :

Kode diatas akan melarikan request file wp-config.php ke file readme.html. Untuk mencobanya tempatkan kode ini diatas bagian RewriteCond, sebagai berikut :

Sekarang ketika anda mengakses http://yourhost.com/wp-config.php, daripada mendapatkan suatu pesan php error anda akan melihat halaman WordPress Read Me.

Kemudian jika kita ingin menutup akses ke file php untuk keseluruh direktori maka dapat menggunakan kode berikut :

Kode diatas akan melarikan request ke semua file php ke file readme.html. Untuk mencobanya buat file .htaccess pada folder wp-includes dan isi dengan kode berikut :

Sekarang ketika anda mengakses http://yourhost.com/wp-includes/wp-db.php, anda justru mendapati suatu error 404 (file not found). Loh adakah yang salah ?

Tidak, hal ini justru lebih menguntungkan. Ketika akses diatas tiba, server mencoba mengalihkan ke file readme.html. Namun karena file readme.html tidak ada di dalam folder wp-includes maka server menggunakan aturan dari WordPress yang mengatakan bahwa Semua request ke file/direktori fisik yang tidak hadir dilarikan ke file root index.php.

Selanjutnya request tersebut diserahkan kepada WordPress dan karena WordPress tidak dapat memenuhinya maka request tersebut direspon sebagai error 404 - File Not Found.

Dengan cara ini selain kita dapat mencegah request langsung ke file php, kita juga dapat menyamarkan request tersebut menjadi suatu error 404 - File Not Found. Dengan kata lain seseorang yang mencoba mengakses file php secara langsung akan mengira bahwa request yang dia minta tidak tersedia.

Langkah-langkah Pengamanan

Setelah mengetahui prinsip dasar tentang solusi saya ini tentang pencegahan langsung ke file php. Saatnya kita melakukan proses pengamanan. Berikut langkah-langkahnya

1. Pertama kita akan mengamankan direktori root. Di dalam direktori ini tidak dapat kita tutup semua akses ke file php karena sebagian besar file php diperlukan oleh WordPress untuk diakses langsung. Namun disini ada dua file penting yang seharusnya tidak diakses secara langsung yaitu wp-config.php dan wp-settings.php dan kita akan menutup akses langsung ke kedua file tersebut.

   Caranya adalah dengan menambahkan kode didalam file .htaccess di direktori root sebagai berikut :

   [sourcecode language="php"] RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteRule ^wp-config\.php$ raono.html [L] RewriteRule ^wp-settings\.php$ raono.html [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] [/sourcecode]

   Sebagai catatan bahwa string raono.html merujuk pada file yang tidak hadir di dalam direktori root.

2. Selanjutnya kita akan mengamankan direktori wp-includes dan wp-content. Buat file .htaccess baru ke dalam direktori tersebut dan mengisikannya dengan kode berikut :

   [sourcecode language="php"] RewriteEngine On RewriteBase / RewriteRule .*\.php$ raono.html [L] [/sourcecode]

3. Terakhir kita mengamankan direktori wp-admin. Untuk semua file php yang tersimpan di dalam direktori ini (bukan subdirectory) akan digunakan oleh WordPress dalam menangani semua request ke bagian administrator sehingga tidak perlu kita tutup aksesnya. Namun untuk subdirectory wp-admin/includes dan wp-admin/import akan mengandung file php yang bila diakses secara langsung dapat menimbulkan error php yang dapat memperlemah keamanan website kita. Sehingga perlu kita amankan. Untuk mengamankan subdirectory tersebut gunakan cara kedua diatas.

Penutup

Sebagai tambahan untuk mengamankan website WordPress kita kita dapat menambahkan suatu file kosong bernama index.php pada setiap direktori/folder dari system WordPress. Hal ini dapat mencegah browser untuk menampilkan isi direktori/folder ketika seseorang mencoba untuk mengaksesnya.

Demikian tadi solusi yang berhasil kami temukan untuk mengatasi masalah celah keamanan di dalam WordPress yang terjadi sebagai akibat adanya request langsung ke suatu file php yang didesain sebagai file library. Apabila anda menemukan suatu masalah sebagai akibat penggunaan solusi ini silahkan beritahukan kepada kami sehingga kami dapat memikirkan solusi yang lain.

Anda dapat membuktikan solusi ini pada website kami, dengan mengklik link berikut :

• Mencoba mengakses file /wp-config.php
• Mencoba mengakses file /wp-includes/wp-db.php
• Mencoba mengakses file /wp-admin/includes/wp-admin.php

Di dalam artikel ini kami akan mencoba untuk memperkenalkan beberapa tag baru HTML 5 sehingga dapat membantu bagi anda yang mengalami kesulitan dalam memulai memasuki dunia HTML 5. Walaupun dari setiap tag akan dijelaskan secara singkat, namun semoga tetap dapat memberikan pencerahan bagi kita semua.

header

Kita mulai saja perkenalan kita terhadap HTML 5 dengan mempelajari elemen header. Elemen header digunakan untuk menggambarkan header suatu halaman web atau bagian halaman web. Header dapat berupa konten pendahuluan atau daftar isi/navigasi.

Untuk ukuran halaman web secara keseluruhan elemen header dapat berupa Judul situs, pendahuluan atau navigasi situs web. Seperti contoh di bawah ini,

Elemen header dapat juga digunakan di dalam suatu bagian dari halaman web, berikut adalah contoh penggunaan pada suatu blog post.

footer

Elemen footer digunakan untuk menggambarkan footer dari suatu bab atau keseluruhan dokumen. Footer biasanya berisi tentang info penulis, tanggal ditulis, link yang berhubungan dengan dokumen, copyright, dsb.

Berikut ini adalah dua contoh penggunaan elemen footer di dalam suatu situs dan di bagian blog post.

Di dalam situs

Di dalam blog post

Contoh diatas juga menunjukkan bahwa suatu footer tidak selalu harus dibagian akhir dari bagian konten.

section

Elemen section digunakan untuk menggambarkan section dari dokumen. Dalam pengertian yang lebih sederhana section merupakan kumpulan konten atau tulisan dengan sebuah judul. Untuk mempermudah pemahaman, section dapat dibayangkan sebagai bab di dalam suatu karya tulis.

Di dalam halaman depan suatu website, dapat dibagi menjadi beberapa section seperti konten pembuka, beberapa blog post, informasi kontak.

Berikut ini contoh penggunaan elemen section,

Adanya elemen section memberikan keleluasaan dalam menentukan elemen header ( h1 - h6 ). Ketika kita menentukan suatu header maka elemen tersebut akan membentuk suatu rangkaian kedalaman header baru. Jadi pada contoh sebelumnya, <h1>Elemen Header</h1> dan <h1>Berkenalan Dengan HTML 5</h1> walaupun menggunakan elemen header sama (h1) tetap memiliki kedalaman yang berbeda.

article

Berikut penjelasan tentang elemen article di dalam W3C spesification.

The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

Html5doctor memperjelas penggunaan elemen article ini untuk menggambarkan suatu konten yang tidak berhubungan dengan konten lain (independent) dan sesuai untuk diletakkan pada suatu feed reader.

Berikut contoh penggunaan elemen article pada suatu blog post.

hgroup

Elemen hgroup digunakan untuk mengelompokkan elemen hn (h1 - h6) ketika heading mempunyai beberapa kedalaman, seperti subheadings, alternative titles, atau taglines.

Berikut contoh penggunaan elemen hgroup

nav

Elemen nav digunakan untuk menggambarkan suatu konten yang menghubungkan ke halaman lain atau bagian lain dalam halaman yang sama. Elemen ini paling sesuai untuk membentuk semantic navigation seperti menu situs web atau daftar isi suatu konten.

Berikut contoh penggunaan elemen nav,

aside

Elemen aside digunakan untuk menggambarkan suatu bagian dari dokumen yang berhubungan dengan konten didekatnya namun dapat dipertimbangkan terpisah dari konten tersebut. Contoh penggunaan elemen aside di dalam halaman web adalah sidebar. Suatu sidebar mengandung konten yang berhubungan dengan halaman web, seperti profil, kontak, favorite links dsb. Namun demikian dia dapat terpisah dari konten lainnya di dalam halaman web yang sama.

Berikut contoh penggunaan elemen aside,

Lihat hasil kode html.

Dari kode tersebut jika terlihat background warna merah, berarti web browser anda telah support terhadap elemen baru HTML 5. Jika tidak maka anda perlu menggunakan sedikit hack sehingga elemen-elemen tersebut dapat dimanipulasi dengan CSS. Sebenarnya solusinya cukup sederhana, anda cukup menentukan attribute display dari setiap elemen HTML 5 yang akan digunakan, seperti :

Untuk IE disini ada kondisi khusus, dimana solusi diatas tetap tidak bekerja. Salah satu solusi yang dapat digunakan untuk memungkinkan penggunaan elemen HTML 5 di IE adalah menggunakan javascript seperti yang diperkenalkan oleh remy sharp's.

Penutup

Itu tadi hanyalah beberapa elemen HTML 5 dasar yang dapat kami jelaskan disini, walaupun tidak semua elemen baru HTML 5 kami jelaskan termasuk elemen time dan video, namun kami harapkan dapat sedikit menambah pengetahuan tentang teknologi baru ini.

Opsi Installasi

Sesuatu yang baru sudah anda temukan ketika melakukan instalasi WordPress 3.0. Sebelum melakukan instalasi, kali ini kita dapat menentukan username dan password secara langsung. Pada versi sebelumnya, WordPress menentukan sendiri username dan password, sehingga kita perlu menggantinya jika ingin menambah keamanan untuk akses ke bagian administrator. Berikut gambaran tentang opsi pada proses installasi.

[wptf act="InsertImg" src="menyambut-wordpress/installation-option.jpg" alt="Gambar opsi instalasi wordpress"][/wptf]

WordPress Updates

Pada versi terbaru ini, WordPress mengumpulkan info tentang update terbaru, baik versi WordPress ataupun plugins dan themes, di dalam satu halaman. Halaman ini dapat diakses melalui menu Dashboard > Updates. Hal ini menjadikan proses pengawasan terhadap updates dari WordPress, plugins dan themes ada di dalam satu tempat. Berikut gambaran tentang halaman updates.

[wptf act="InsertImg" src="menyambut-wordpress/updates.jpg" alt="Gambar halaman updates wordpress"][/wptf]

Theme Default Baru

Bersamaan dengan versi terbarunya, WordPress juga memperkenalkan theme default barunya yang bernama Tweenty Ten. Pada situs resminya WordPress menyatakan akan mengeluarkan theme default baru untuk setiap tahunnya. Untuk itulah nama dari theme baru ini adalah Tweenty Ten yang menandakan tahun 2010. Pada Theme ini telah support beberapa feature baru seperti Custom Header, Custom Background, dan Pengaturan Menu. Untuk itu kita dapat menciptakan desain blog yang aktraktif hanya dari sebuah theme default. Berikut gambaran tentang theme Tweenty Ten.

[wptf act="InsertImg" src="menyambut-wordpress/twenty-ten.jpg" alt="Gambar theme Tweenty Ten"][/wptf]

WPMU and WordPress

WordPress MU merupakan versi WordPress yang secara khusus digunakan untuk membangun beberapa blog dengan hanya satu instalasi WordPress. Kini fasilitas pembuatan multi-site ini secara langsung disertakan di dalam Wordpress 3.0, walaupun secara default tidak dinyalakan. Untuk menggunakan fasilitas ini anda perlu menyalakannya dengan langkah berikut :

1. Definisikan constant ’WP_ALLOW_MULTISITE’ di dalam file config.php, sebagai berikut : [php]define ( "WP_ALLOW_MULTISITE", true );[/php]
2. Setiap pernyataan ini disertakan dalam config.php, maka pada menu tools akan ditambahkan sub menu network. Melalui halaman ini kita dapat melakukan instalasi terhadap feature multi-site. Anda cukup mengikuti instruksi yang telah disediakan dengan sangat jelas oleh WordPress.
3. Setelah proses installasi selesai anda dapat mengelola seluruh site di dalam menu baru "Super Admin" Berikut gambaran tentang menu ini :

   [wptf act="InsertImg" src="menyambut-wordpress/wpmu-settings.jpg" alt="Gambar setting wpmu"][/wptf]

Note : Walaupun penyertaan fasilitas multi-site membuat WordPress semakin powerfull, namun karena tidak adanya sistem uninstall dari fasilitas ini membuat kita tidak bisa membatalkan tindakan kita. Jadi berhati-hatilah dalam menggunakan fasilitas ini.

Pengaturan Menu

Feature baru yang disediakan oleh WordPress untuk mengatur susunan menu di dalam website. Namun ketersediaan feature ini sangat tergantung dari theme yang digunakan. Fasilitas pengaturan menu dapat diakses melalui Appearance > Menus. Jika anda ingin mencoba fasilitas ini anda dapat menggunakan theme default WordPress 3.0 yang telah mendukung fasilitas ini. Halaman pengaturan menu akan terlihat sebagai berikut :

Dari gambar terlihat ada 5 bagian dalam halaman pengaturan menu, berikut penjelasannya :

1. Bagian Pembuatan dan Pengaturan Menu

Bagian ini digunakan untuk membuat menu baru dan mengatur isi menu. Perlu dipahami bahwa menu disini bukan sebuah link namun koleksi link-link yang akan ditampilkan dalam halaman web. Pertama kita membuat semacam kontainer dari menu kita dengan menentukan nama dari kontainer menu tersebut. Kemudian kita mengisi kontainer tersebut dengan menu-menu yang kita inginkan. Menu yang ditambahkan dapat bersumber dari tiga hal, yaitu link, page dan category. Penambahan dilakukan melalui tiga bagian terakhir dari penjelasan ini. Setiap penambahan menu dilakukan akan ditambahakan box untuk mengatur setting menu tersebut.

[wptf act="InsertImg" src="menyambut-wordpress/menus.jpg" alt="Gambar pengaturan menu"][/wptf]

2. Bagian Penentuan Lokasi Menu

Bagian ini sangat tergantung pada theme yang digunakan. Untuk theme default Twenty Teen disediakan satu lokasi penambahan menu, yaitu di bagian bawah image header.

[wptf act="InsertImg" src="menyambut-wordpress/twenty-ten-menu.jpg" alt="Gambar opsi instalasi wordpress"][/wptf]

Dari lokasi yang didefinisikan kita menentukan menu yang akan disertakan pada lokasi tersebut.

3. Penambahan Menu dengan Url

Bagian ini digunakan ketika kita ingin menambahkan menu dengan target link adalah sebuah url. Label disini adalah text yang akan ditampilkan dalam halaman web.

4. Penambahan Menu dengan Page

Bagian ini digunakan ketika kita ingin menambahkan menu dengan target link adalah page yang telah ada di dalam sistem blog.

5. Penambahan Menu dengan Category

Bagian ini digunakan ketika kita ingin menambahkan menu dengan target link adalah category yang telah ada di dalam sistem blog.

Custom Header

Seperti halnya fasilitas Pengaturan Menu, fasilitas ini juga tergantung dari desain theme yang digunakan. Fasilitas ini pada dasarnya mengatur penyertaan image pada bagian tertentu dari halaman web, biasanya bagian atas dari website. Halaman pengaturan Custom Header dan contoh tampilan Custom Header di halaman web dapat dilihat di bawah ini (kita menggunakan theme default sebagai contoh) :

[wptf act="InsertImg" src="menyambut-wordpress/custom-header.jpg" alt="Gambar opsi instalasi wordpress"][/wptf]

[wptf act="InsertImg" src="menyambut-wordpress/twenty-ten-header.jpg" alt="Gambar opsi instalasi wordpress"][/wptf]

Untuk menentukan gambar yang akan ditampilkan kita cukup memilih gambar yang telah disediakan oleh theme atau dengan mengupload file gambar milik sendiri.

Custom Background

Hampir seperti Custom Header, hanya saja pada fasilitas ini digunakan untuk mengatur background dari halaman web. Kita dapat mengatur background dengan warna maupun gambar. Jika disupport oleh theme yang digunakan halaman pengaturannya dapat diakses melalui Appearance > Background. Berikut gambaran untuk halaman pengaturan Custom Background.

[wptf act="InsertImg" src="menyambut-wordpress/custom-bg.jpg" alt="Gambar opsi instalasi wordpress"][/wptf]

New Template Files

Pada versi 3.0 ini, WordPress menyediakan file template baru yang akan memberikan keleluasaan dalam menyusun theme. Dengan file template baru ini, penyusunan tampilan web menjadi lebih mudah dan variatif. Kita dapat membedakan tampilan web berdasarkan parameter request yang lebih spesifik seperti nama author, slug, post type etc.

Berikut beberapa file template baru yang disediakan :

single-{post_type}.php

{post_type} dapat diganti dengan tipe post. Sebagai contoh jika tipe post adalah news maka file template menjadi single-news.php Untuk memahami tentang tipe post dapat dilihat pada bagian selanjutnya.

front-page.php

Digunakan untuk latest posts atau static page sesuai yang diatur pada bagian setting Front page displays di Administration > Settings > Reading

taxonomy.php

File template yang akan dipanggil untuk semua request taxonomy

taxonomy-{taxonomy}-{term}.php

{taxonomy} diganti dengan tipe taxonomy dan {term} diganti dengan nama term, misalkan jika taxonomy adalah tag dan term adalah web maka file template menjadi taxonomy-tag-web.php

taxonomy-{taxonomy}.php

{taxonomy} dapat diganti dengan nama taxonomy. Misalkan taxonomy adalah category maka file template menjadi taxonomy-category.php

author-{nicename}.php

{nicename} diganti dengan attribute nicename dari author. Misalkan jika nicename adalah iznyn maka file template menjadi author-iznyn.php

author-{id}.php

{id} diganti dengan id dari author. Misalkan jika id adalah 7 maka file template menjadi author-7.php

Custom Post Types

Fasilitas terakhir mungkin menjadi yang terhebat. Dengan fasilitas ini, dapat dikatakan bahwa WordPress semakin mendekati ke bentuk CMS (Content Management System ). Intinya fasilitas ini dapat menambahkan jenis content selain page dan post. Walaupun secara khusus disediakan bagi Theme Developer namun bagi anda pengguna biasa dapat menantikan berbagai theme yang menyajikan suatu manajemen content yang cukup luas, sehingga makin memberikan kemudahan kepada anda.

Kita disini tidak akan menjelaskan bagaimana cara membentuk Custom Post Type karena membutuhkan ruang yang tidak sedikit. Daripada itu kita akan memberikan beberapa link yang membahas hal ini secara rinci, sebagai berikut :

• WordPress 3.0: Ultimate Guide to New Features
• Rock-Solid WordPress 3.0 Themes using Custom Post Types"
• Create A Professional Portfolio Using WordPress 3.0 Custom Post Types
• Explore the Power of Custom Post Types to Maximize WordPress as a CMS
• Create your first WordPress Custom Post Type
• How to create a side blog with WordPress 3.0

]]> http://iznyn.com/blog/2010/06/25/menyambut-kehadiran-wordpress-3-0?feed=comment 2 http://iznyn.com/blog/2010/06/14/html-5-dan-css-3-0-di-iznyndotcom http://iznyn.com/blog/2010/06/14/html-5-dan-css-3-0-di-iznyndotcom#comments Mon, 14 Jun 2010 07:18:00 +0000 Iznyn Blog http://iznyn.com/blog/2010/06/14/html-5-dan-css-3-0-di-iznyndotcom Salah satu bentuk revolusi dari versi terbaru iznyndotcom adalah penggunaan HTML 5 dan CSS 3.0. Dua standard teknologi web yang sampai saat artikel ini ditulis masih dalam bentuk draft dan terus dikembangkan oleh W3C dan sangat ditunggu kehadirannya oleh web designer diseluruh dunia.

]]> Salah satu bentuk revolusi dari versi terbaru iznyndotcom adalah penggunaan HTML 5 dan CSS 3.0. Dua standard teknologi web yang sampai saat artikel ini ditulis masih dalam bentuk draft dan terus dikembangkan oleh W3C dan sangat ditunggu kehadirannya oleh web designer diseluruh dunia.

Karena belum berbentuk rekomendasi, maka HTML 5 dan CSS 3.0 masih cukup minim penggunaannya dan dukungan dari browser juga masih rendah. Sebagai contoh untuk dapat memasukkan attribute CSS ke dalam HTML 5, kita sebelumnya masih harus memperjelas level blok dari element tersebut dengan menggunakan attribute CSS display.

Contoh lainnya adalah di dalam penggunaan CSS 3.0. Untuk dapat menggunakan attribute baru dalam CSS 3.0 kita masih harus menggunakan attribute tambahan yang dikembangkan oelh browser. Sehingga ketersediaan style akan sangat tergantung pada dukungan browser yang menampilkan halaman dengan attribute CSS 3.0.

Walapun dengan segala kekurangan diatas, namun kita tetap harus membuat sebuah persiapan karena suatu saat nanti pasti akan mengunakan kedua standard ini. Inilah alasan utama penggunaan HTML 5 dan CSS 3.0 dalam website ini. Di sisi lain, ada harapan bahwa dengan adanya penggunaan HTML 5 dan CSS 3.0 dapat memberikan kesempatan kepada kami untuk berpartisipasi dalam perkembangan kedua standard tersebut.

Penggunaan HTML 5

Dalam mengembangkan website ini kami mencoba untuk menerapkan hampir seluruh tag HTML baru seperti header, footer, article, hgroup, time, aside, nav. Selain berdasarkan standard yang dikembangkan oleh W3C, penerapan HTML 5 banyak terbantu oleh beberapa tutorial dari website seperti alistapart dan html5doctor.

Salah satu contoh penggunaan HTML 5 pada website ini adalah di dalam data post. Kami menyusun setiap post dengan struktur HTML sebagai berikut :

[xml]

Title Here

Post date

Content Here ....

Category List

Tag List

Related Post

[/xml]

Artikel ini tidak akan membahas teknis dari penggunaan HTML 5 secara mendetail, namun disini kami akan menjelaskan sedikit tentang struktur HTML diatas. Satu hal yang dapat disimpulkan setelah menggunakan HTML 5 adalah bahwa adanya tag baru tersebut memberikan kita peluang yang lebih luas dalam mendeskripsikan content. Sebelumnya content hanya dapat dideskripisikan sebagai paragraph, title dan beberapa konteks lain melalui tag inline seperti emphasis, abbreative dsb.

Dengan HTML 5, kita dapat menambahkan arti dari suatu content sebagai header, footer ataupun memecah content menjadi beberapa bab. Namun semua manfaat ini tidak akan kita dapatkan apabila tidak memiliki pemahaman yang kuat terhadap fungsi dari setiap tag. Di sisi lain kurangnya pemahaman dari setiap fungsi tag dapat menyulitkan kita dalam membuat keputusan terhadap pembentukan konteks dari content.

Ada satu kenyataan lain berkaitan dengan penggunaan HTML 5 yaitu kembalinya fungsi tag div sebagai kontainer murni yang tidak memberikan arti apapun terhadap content yang dikandungnya. Penggunaan div lebih sebagai pengait di dalam CSS dan Javascript.

Microformat

Inilah salah satu yang sedikit membingungkan dalam pembentukan HTML 5. Microformat pada dasarnya digunakan untuk menambahkan informasi semantic ke sebuah halaman web menggunakan HTML classes. Ia muncul sebagai akibat kurang mampunya tag HTML dalam menyediakan fungsi tersebut. Dengan semakin banyaknya tag baru yang dapat mengartikan content dalam berbagai konteks, masih bergunakah Microformat di dalam HTML 5 ?

Memang benar beberapa microformat dapat digantikan dengan tag HTML 5, sebagai contoh Microformat datetime-design-pattern dapat diganti dengan element time. Namun demikian selama stadard HTML 5 belum diterapkan secara luas maka microformat masih sangat diperlukan. Cara yang paling bijaksana adalah mencampur keduanya sampai ada standard yang pasti dan pengunaan yang luas dari HTML 5.

Secara prinsip Penambahan Microformat dalam HTML 5 (seperti yang diterapkan pada website ini) adalah sesuatu yang legal karena penambahan micordata dilakukan melalui HTML class tanpa terpengaruh oleh jenis tag yang digunakan. Terlebih lagi jika microdata HTML 5 kurang dapat memenuhi keinginan kita, maka microformat masih tetap diperlukan.

Penggunaan CSS 3.0

Penggunaan CSS 3.0 pada website ini masih belum terlalu signifikan. Hanya beberapa attribute yang kami gunakan untuk memperkuat style dokumen. Attribute tersebut antara lain font-face, text-shadow dan border-radius.

Namun karena attribute ini masih belum disupport oleh semua browser maka efeknya tidak akan dirasakan pada beberapa browser. Saya merekomendasikan untuk menggunakan firefox untuk mendapatkan hasil maksimal dari website ini.

Penutup

Pada dasarnya artikel ini bukan menjelaskan teknis penggunaan HTML 5 maupun CSS 3 namun lebih untuk memperkenalkan penggunaan dua stadard ini di dalam struktur website.

Terakhir, karena masih bersifat percobaan, maka kami sangat mengharapkan kritik dan saran terhadap penggunaan HTML 5 dan CSS 3 ini demi kemajuan bersama.

]]> http://iznyn.com/blog/2010/06/14/html-5-dan-css-3-0-di-iznyndotcom?feed=comment 0 http://iznyn.com/blog/2010/06/14/redesign-untuk-sebuah-revolusi http://iznyn.com/blog/2010/06/14/redesign-untuk-sebuah-revolusi#comments Mon, 14 Jun 2010 07:02:00 +0000 Iznyn Blog http://iznyn.com/blog/2010/06/14/redesign-untuk-sebuah-revolusi Kegilaan, mungkin adalah kata yang paling pantas jika melihat sejarah iznyndotcom. Bagaimana tidak, terhitung sejak lahirnya website ini pada Maret 2009 sudah mengalami dua kali perubahan desain. Artinya bahwa hanya dalam kurun waktu 1 tahun kami sudah menggunakan tiga versi yang berbeda.

Secara khusus, perkembangan website ini dapat juga dikatakan sebagai gambaran atas perkembangan dari kemampuan web design yang kami miliki. Pada desain awal dari iznyndotcom dapat menggambarkan kegamangan kami dalam dunia web design. Disini kami masih belum mampu menciptakan sebuah desain website yang solid. Pada versi kedua, sejalan dengan bertambahnya kemampuan web design yang kami miliki, sebuah desain tampilan website yang cukup bagus sudah dapat diciptakan. Namun tidak untuk sistem website. Dan pada versi terkini akhrinya kami mampu menyusun sebuah desain berhasil mencapai sebuah kesempuranaan pada desain terkini.

]]> Kegilaan, mungkin adalah kata yang paling pantas jika melihat sejarah iznyndotcom. Bagaimana tidak, terhitung sejak lahirnya website ini pada Maret 2009 sudah mengalami dua kali perubahan desain. Artinya bahwa hanya dalam kurun waktu 1 tahun kami sudah menggunakan tiga versi yang berbeda.

Pada saat kemunculan pertama kali, kami masih menggunakan fasilitas dasar dari Wordpress. Sedangkan theme sudah membuat sendiri dan bernama Peace In Darkness. Generasi pertama ini tidak bertahan lama karena pada bulan juli sudah dilakukan proses redesign.

Generasi kedua selesai pada Agustus 2009. Pada versi ini sedikit lebih baik dan mulai memperluas fasilitas wordpress untuk dapat menjangkau kebutuhan website. Bersamaan dengan itu, kami juga melahirkan theme baru bernama Red In Light. Terakhir, pada Maret 2010 kami memutuskan untuk melakukan redesign yang kedua kalinya dan melahirkan versi 3.0 yang digunakan saat ini.

Mengapa Kami Lakukan?

Redesign suatu website adalah sebuah pekerjaan yang sangat melelahkan serta membutuhkan biaya dan waktu yang tidak sedikit. Jadi sangat jarang dilakukan dalam jarak waktu yang pendek.

Tapi mengapa hal ini justru terjadi pada iznyndotcom?

Tentu saja kami tidak sembarangan dalam memutuskan hal sepenting ini. Dalam kasus iznyndotcom ini, memang harus dilakukan sebuah perbaikan karena tanpa adanya hal tersebut maka tidak ada yang namanya langkah maju. Dari desain website sebelumnya, kami merasakan ketidaknyamanan dalam mengembangkannya sehingga sulit untuk mengharapkan adanya kemajuan dari desain tersebut.

Secara khusus, perkembangan website ini dapat juga dikatakan sebagai gambaran atas perkembangan dari kemampuan web design yang kami miliki. Pada desain awal dari iznyndotcom dapat menggambarkan kegamangan kami dalam dunia web design. Disini kami masih belum mampu menciptakan sebuah desain website yang solid. Pada versi kedua, sejalan dengan bertambahnya kemampuan web design yang kami miliki, sebuah desain tampilan website yang cukup bagus sudah dapat diciptakan. Namun tidak untuk sistem website.

Kesempurnaan Desain Saat Ini

Tidak ada yang lebih menyenangkan selain dapat mencapai sebuah kesempurnaan. Dan inilah yang kami rasakan setelah berhasil menyelesaikan versi 3.0 dari website ini.

Kami menyusun desain terbaru ini dengan detail yang sangat luar biasa sehingga seluruh kekurangan yang ada didalam desain sebelumnya tidak ada lagi.

Inspirasi

Ada banyak hal yang menginspirasi design terbaru dari website ini. Deviantart merupakan salah satunya. Beberapa karya yang dipublikasikan melalui social network ini banyak memberikan inspirasi terhadap unsur "Look and Feel". Kemudian untuk sistem dibelakang website, terutama untuk penyajian artikel blog banyak terinspirasi oleh alistapart.

Selain itu, inspirasi juga kami dapatkan dari hasil pengamatan terhadap beberapa "website showcase" yang dilakukan oleh beberapa blog seperti Vandelay Design dan Designm.ag.

Warna

Pertimbangan warna untuk design website ini menjadi cukup luas karena kami tidak mempunyai patokan yang pasti. Biasanya pencarian komposisi warna dari suatu project website dimulai dari logo organisasi di belakang website. Namun karena ini adalah blog pribadi sedangkan secara khusus kami belum mempunyai warna yang pasti pada logo yang digunakan menjadikan penentuan komposisi warna sedikit sulit dilakukan.

Suasana hati kemudian menjadi kunci dalam pemilihan warna biru untuk diterapkan dalam design website. Keputusan ini diambil lebih karena suasana yang ditimbulkan warna biru itu sendiri, yaitu segar, sejuk, dan alamiah. Dari suasana ini diharapkan akan memberikan kenyamanan dan kesejukan dalam menikmati isi website.

Layout

Berbeda dengan desain sebelumnya yang menempatkan seluruh content ke sisi kiri, pada desain terbaru ini kami memilih untuk menempatkan seluruh content di tengah-tengah monitor. Sedangkan untuk ukuran layout kami memilih menggunakan ukuran tetap (fixed) yang tidak akan terpengaruh oleh perubahan ukuran monitor maupun font. Walupun demikian, layout tetap memberikan flexibilitas dalam menyesuaikan berbagai lingkungan.

Desain layout untuk website versi ini cukup bervariasi, beberapa ada yang hanya terdiri dari 1 column sedangkan yang lainnya menempatkan content website di dalam 2 column. Pendekatan ini dilakukan agar user dapat fokus pada satu topik pembahasan untuk setiap halamannya dan tidak terganggu oleh content yang tidak berhubungan dengan topik utama.

Typography

Sejak awal pengembangan website ini, ada keinginan kuat untuk menggunakan suatu font yang memiliki kesan unik dan kuat pada bagian title content. Setelah melakukan pencarian, kami menemukan Rockwell dapat memenuhi keinginan tersebut. Namun disini ada beberapa masalah dalam penggunaan font ini. Penggunaan Rockwell akan menjadi sia-sia karena tidak ada satupun sistem operasi yang secara default menyertakannya. Hal ini diperburuk oleh ketiadaan font sejenis pada font-font yang tergolong aman.

Untuk mengatasinya, kami menemukan attribute css font-face sebagai solusi terbaik untuk masalah ini. Namun karena Rockwell merupakan font commercial maka kita harus mempunyai lisensi terhadap pemakaian font tersebut. Dengan dana yang cukup ketat, membuatnya menjadi cukup mustahil.

Akhirnya kami memutuskan untuk mencoba alternative lain melalui font gratis. Setelah melakukan pencarian, kami menemukan dua font yang mampu menggantikan Rockwell, yaitu Chunk dan Nilland. Pada dasarnya Chunk merupakan font utama yang kami gunakan sebagai heading, namun karena font ini terlalu tebal untuk suatu sub heading maka perlu digunakan Nilland yang mempunyai struktur lebih tipis.

Body Text Typography

Ketika menentukan tipe font yang digunakan pada suatu body text, kami masih beranggapan bahwa font sans-serif masih tetap menjadi yang terbaik. Walaupun beberapa website, seperti colly.com telah membuktikan bahwa font serif dapat dengan cantik digunakan pada text body.

Arial kemudian menjadi pilihan utama untuk setiap text body di dalam website ini. Selain karena disertakan hampir pada seluruh instalasi sistem operasi, pemilihan font ini juga didasarkan pada kesederhanannya.

Hal Baru Dalam Versi Ini

Berbicara tentang redesign tentu saja akan ada sesuatu yang baru. Terlebih jika menilik pada kata "Revolusi" dalam judul dari artikel ini. Pada proses pengembangan versi terbaru dari website ini lebih menitikberatkan pada sistem di belakang website. Bahkan pada awal rencana kami tidak melakukan perubahan terhadap tampilan website.

Berikut beberapa hal yang kami tambahkan dalam versi terbaru dari iznyndotcom.

HTML 5 dan CSS 3

Kesempurnaan dalam versi terbaru iznyndotcom semakin lengkap dengan diterapkannya HTML 5 dan CSS 3. Hampir secara keseluruhan struktur website ini dibangun dengan menggunakan standard HTML 5. Namun berbeda dengan CSS 3, kami hanya menggunakan beberapa attribute untuk memperkuat unsur presentasi website. Anda dapat membaca cerita lebih lengkap tentang hal ini dalam HTML 5 dan CSS 3 di Iznyndotcom

Cara Baru Penyajian Blog

Sejak awal, blog adalah inti dari website ini karena menjadi media yang menampilkan ide dan pikiran kami. Namun pada versi terbaru ini, kami tidak terlalu menonjolkan isi dari blog pada bagian halaman depan dan memberikan menu khusus untuk menyajikan seluruh artikel blog.

Hal ini disebabkan karena sekarang iznyndotcom tidak hanya sebagai tempat menampilkan ide (blog) namun juga menampilkan seluruh hasil perkerjaan web design yang telah kami kerjakan. Di lain pihak kami juga ingin memberikan kemudahan bagi user dalam menjangkau seluruh isi dari website.

Commenter Notification

Ini adalah fasilitas yang benar-benar baru dalam website ini. Commenter notification disediakan agar seseorang yang pernah terlibat diskusi pada suatu post, mendapatkan perberitahuan terkait dengan perkembangan proses diskusi.

Sebuah Harapan Baru

Awal dari terbesitnya ide redesign adalah rasa ketidaknyamanan kami dalam mengelola website ini. Sehingga ada harapan bahwa design baru ini mampu memberikan kenyamanan baik bagi kami selaku pengelola website maupun seluruh pengunjung website.

Selain itu kami juga berharap bahwa versi ini dapat menjadi pintu gerbang kesuksesan dalam dunia freelance web design serta sebagai awal dari pekerjaan-pekerjaan besar selanjutnya.

Dan yang lebih penting adalah bagaimana melalui website ini kami mampu memberikan manfaat kepada semua pihak yang telah berinteraksi dengan website kami ini.

Terakhir Namun Bukan Akhir Segalanya

Walaupun kami menganggap versi terbaru dari website ini sebagai sebuah kesempurnaan, namun kami sadar bahwa ini hanya bersifat sementara. Karena tidak ada yang sempurna di dunia ini. Kesempurnaan hanya bersifat sementara. Seiring berjalannya waktu, kesempurnaan akan memudar dan dapat menjadi sebuah kehancuran bilamana tidak dilakukan usaha untuk mempertahankannya.

Selain tetap berusaha untuk mempertahankan kesempurnaan website ini, kami sangat berharap adanya saran dan kritik atas semua kekurangan dan kesalahan yang anda temui ketika mengunjungi website ini.

Tak lupa kami juga mengucapkan banyak terima kasih kepada semua pihak yang telah memberikan bantuannya sehingga pekerjaan ini dapat terselesaikan dengan baik. Secara khusus ucapan ini kami persembahkan kepada My best friend, rere yang telah membantu dalam penyusunan content website ini

Akhirnya kami hanya bisa berharap agar website ini dapat memberikan manfaat bagi kita semua. Dan selamat menikmati.

]]> http://iznyn.com/blog/2010/06/14/redesign-untuk-sebuah-revolusi?feed=comment 0 http://iznyn.com/blog/2010/03/09/membuat-menu-dropdown-menggunakan-css-part-3 http://iznyn.com/blog/2010/03/09/membuat-menu-dropdown-menggunakan-css-part-3#comments Tue, 09 Mar 2010 08:31:00 +0000 Iznyn Blog http://iznyn.com/blog/2010/03/09/membuat-menu-dropdown-menggunakan-css-part-3 Masalah terbesar dari kode CSS yang membentuk menu drop down tersebut adalah Compatibility. Walaupun sebenarnya masalah ini hanya timbul untuk browser Internet Explorer, namun menjadi cukup serius karena browser ini masih mempunyai cukup banyak penggemar. Anda mungkin akan mencatat bahwa jika menu drop down dilihat pada browser IE akan menghasilkan sesuatu yang berbeda. Why? berikut penjelasannya.

]]> Masih ingatkah anda dengan artikel saya sebelumnya yang menjelaskan pembuatan menu drop down dengan CSS ?. Pada akhir artikel saya sempat menjanjikan akan menjelaskan tentang masalah yang timbul dari drop down menu tersebut. Namun seiring berjalannya waktu, saya tampaknya sedikit melupakannya sampai akhirnya teringat kembali ketika ada pembaca yang menanyakannya. Dan melalui artikel ini saya akan membayar lunas dengan membahas masalah ini secara tuntas.

IE Compatibility Problem

Masalah terbesar dari kode CSS yang membentuk menu drop down tersebut adalah Compatibility. Walaupun sebenarnya masalah ini hanya timbul untuk browser Internet Explorer, namun menjadi cukup serius karena browser ini masih mempunyai cukup banyak penggemar. Anda mungkin akan mencatat bahwa jika menu drop down dilihat pada browser IE akan menghasilkan sesuatu yang berbeda. Why? berikut penjelasannya.

Karena masalah yang timbul pada IE 7 dan IE 6 cukup berbeda, maka kita akan memisahkannya. Kita mulai saja dari yang paling tua, yaitu Internet Explorer 6

Masalah di Internet Explorer 6

Masalah yang timbul pada browser ini akan menjadi jelas jika kita melihat sejarah dari IE 6. Sejak dirilis pada Agustus 2001, browser ini cukup mendapat tempat bagi para pengguna. Selain karena dia disertakan didalam OS Windows, juga karena dukungan terhadap CSS yang sangat bagus. Sedihnya seluruh kesuksesan yang didapatkannya diiringi oleh sebuah keangkuhan. Merasa telah memenangkan browser war, Microsoft memutuskan untuk menghentikan pengembangan IE 6 dan mengalihkan tim pada proyek lain. Seiring dengan tertidurnya IE 6, perkembangan teknologi CSS justru berkembang sangat cepat. Hasilnya pun bisa ditebak, browser ini menjadi cukup kekurangan untuk dukungan CSS yang terkini.

Ok kita tidak perlu berlama-lama dengan pelajaran sejarah, karena yang kita perlukan adalah kalimat terakhir. Sekarang kita menuju ke kode CSS kita. Untuk membentuk menu drop down, kita menggunakan child selector. Berikut salah satu kodenya :

[css] #menu>ul>li { display: inline; float: left; line-height: 40px; } [/css]

Child selector pada kode tersebut ditandai oleh karakter >. Selector jenis ini digunakan untuk menargetkan element html yang secara langsung menjadi anak atau turunan dari element diatasnya. Nah Internet Explorer tidak dapat memahami selector ini, jadi semua kode didalamnya akan diabaikan oleh browser ini.

Kemudian kita lihat kode CSS berikut :

[css] #menu li:hover>ul {display: block;} [/css]

Kode CSS diatas merupakan kunci untuk menu drop down kita, dimana kode ini akan memunculkan menu level bawah ketika mouse berada pada menu level atasnya. Atau dengan kata lain kode tersebut berkata "Tampilkan element ul yang berada langsung dibawah element li ketika mouse berada diatas element li. Nah masalah dengan IE 6 disini adalah bahwa IE 6 tidak mendukung pseudo class :hover untuk element selain a atau yang mempunyai attribute href.

Nah sekarang anda sudah tahu masalah yang terjadi pada menu drop down di dalam IE 6. Saatnya anda untuk pergi ke tempat tidur beristirahat dan melupakan semua masalah ini.

Are you kidding?. Tidak saya disini benar-benar serius. Untuk masalah selector mungkin akan bisa diselesaikan, namun untuk masalah pseudo class kita benar-benar tidak bisa berbuat apapun. Yang bisa anda lakukan ketika harus memaksakan suatu menu drop down pada browser IE 6 adalah beralih ke Java Script, dan hal ini diluar jangkauan dari artikel ini. Atau anda dapat juga mempertimbangkan untuk membedakan style menu untuk browser ini dengan hanya menampilkan menu utama saja. OK kita tidak perlu berlama-lama dengan IE 6, karena sesungguhnya perjalanan kita masih cukup panjang.

Masalah di Internet Explorer 7

Berbeda dengan versi sebelumnya, Internet Explorer 7, telah banyak mengalami perbaikan dalam dukungan terhadap kode-kode CSS. Dan kabar gembira bagi kita, browser ini telah mendukung untuk kode CSS yang digunakan untuk membentuk menu drop down yang menjadi masalah di IE 6. Tetapi mungkin anda mencatat bahwa jika menu drop down dilihat pada IE 7 justru tidak terlihat dan hanya akan menampilkan halaman kosong saja. Mengapa bisa demikian? Berikut penjelasannya.

Penyebab utama mengapa kasus di atas dapat terjadi adalah float. Kita menggunakan float dalam membentuk menu drop down agar setiap item menu dapat bersebelahan secara horisontal, berikut kodenya :

[css] #menu>ul>li { display: inline; float: left; line-height: 40px; } [/css]

Pada dasarnya kita telah menjelaskan secara mendalam tentang efek negatif dari float dan bagaimana cara mengatasinya pada artikel styling form part 1. Namun tampaknya solusi tersebut tidak berlaku di dalam IE 7. Sebelumnya telah dijelaskan bahwa kita mengatasi masalah float dengan menggunakan tehnik clearfix. Di dalam class clearfix kita menggunakan pseudo-element :after yang digunakan untuk menambahkan suatu content setelah element class clearfix. Berikut kodenya :

[css] .clearfix:after { content: "."; display: block; height: 0; visibility: hidden; clear: both; } [/css]

Pada situs resmi dari clearfix telah dijelaskan bagaimana cara mengatasi hal tersebut, yaitu dengan menambahkan attribute css zoom.

[css htmlscript="true"] [/css]

Dengan perbaikan ini, kini menu utama dapat terlihat pada browser IE 7, namun demikian masih ada masalah untuk submenu-nya. Pada submenu terlihat letaknya terlalu tinggi dan setiap item menu ruangnya terlalu besar. Untuk memperbaikinya tambahkan kode css berikut:

[css htmlscript="true"] [/css]

Pada kode CSS yang pertama digunakan untuk memperkecil ruang pada setiap item submenu. Untuk membentuk ruang pada setiap item submenu, disini kita melakukannya dengan mengubah sifat dari tag a menjadi block kemudian menambahkan padding pada sisi atas dan bawah sebanyak 12px. Di dalam IE 7, browser ini secara misterius menambahkan sedikit ruang di kedua sisi tersebut. Ketika pertama kali mengetahui masalah ini, saya menduga bahwa hal ini disebabkan oleh float. Namun ternyata justru attribute line-height yang menjadi penyebab masalah ini.

Attribute line-height digunakan memperluas ketinggian content dan sekaligus menengahkan content secara vertikal pada menu utama. Satu hal yang penting dari attribute ini adalah bahwa dia akan diturunkan (inherited) ke element turunannya. Nah di dalam IE 7 perilaku attribute line-height menjadi aneh jika element mengandung bukan inline-element atau inline-element yang diganti dengan content bukan teks seperti image dan element form. Dan perilaku aneh ini menghasilkan ruang yang lebih lebar dari seharusnya.

Setelah mengadakan beberapa percobaan, ternyata solusi dari masalah ini cukup sederhana yaitu dengan menentukan ukuran ketinggian terhadap element, dalam hal ini saya menggunakan height: 1%. Attribute ini kemudian akan memicu element untuk menjadi "hasLayout". IE menerapkan mesin render berbeda yang menggunakan internal konsep yang dikenal sebagai "Layout". Konsep Layout ini digunakan oleh IE untuk mengatur ukuran dan posisi dari element. Ketika suatu element dikatakan untuk "have layout" akan bertanggung jawab terhadap ukuran dan posisi dari dirinya dan turunannya. Sedangkan jika tidak maka ukuran dan posisi akan ditentukan oleh element ancestor dengan layout yang terdekat. Untuk lebih jelasnya tentang masalah ini dapat dibaca dalam The Internet Explorer hasLayout Property.

Selanjutnya pada kode perbaikan yang kedua hanya digunakan untuk menurunkan posisi dari submenu agar tepat dibawah menu utama. Dengan adanya masalah ini dapat disimpulkan bahwa di dalam IE suatu element yang diposisikan secara relative akan ditempatkan pada batas teratas dari element ancestor yang diposisikan secara absolute. Hal ini berbeda dengan browser lainnya yang akan menempatkan pada batas terbawah dari element ancestor.

Masalah di Browser lain

Penulis telah melakukan test terhadap menu drop down ini pada beberapa browser selain Internet Explorer seperti Opera 9, Firefox 3.5, Safari 4, Google Chrome 4. Dan hasilnya terlihat sangat sempurna hampir tidak ada masalah apapun. Walaupun demikian penulis tidak menjamin secara penuh menu drop down ini tidak ada masalah pada browser dengan versi di bawah dari browser test tersebut.

Terakhir solusi terhadap masalah di Internet Explorer diatas sepenuhnya hanya diperuntukkan dalam perbaikan menu drop down yang kita buat sebelumnya. Yang lebih penting disini adalah bahwa anda mampu memahami secara mendalam beberapa masalah yang akan sering kali anda temui ketika menyusun kode CSS. Selamat mencoba....

]]> http://iznyn.com/blog/2010/03/09/membuat-menu-dropdown-menggunakan-css-part-3?feed=comment 0 http://iznyn.com/blog/2010/02/10/styling-form-part-2 http://iznyn.com/blog/2010/02/10/styling-form-part-2#comments Wed, 10 Feb 2010 02:43:00 +0000 Iznyn Blog http://iznyn.com/blog/2010/02/10/styling-form-part-2 Artikel ini merupakan kelanjutan dari artikel saya sebelumnya, Styling Form Part 1. Pada artikel sebelumnya kita telah belajar bagaimana membentuk HTML form dari membentuk struktur kode HTML dari suatu form hingga bagaimana menghias form tersebut dengan menggunakan CSS agar lebih enak dilihat dan digunakan oleh user kita.

Pada artikel bagian kedua ini kita masih tetap mempelajari CSS untuk menghias suatu form. Namun kita akan membuat tampilan form yang berbeda dari tutorial pertama, jika sebelumnya tampilan form adalah label berada diatas element form, kali ini kita akan membentuk label dan element form saling bersebelahan.

]]> Artikel ini merupakan kelanjutan dari artikel saya sebelumnya, Styling Form Part 1. Pada artikel sebelumnya kita telah belajar bagaimana membentuk HTML form dari membentuk struktur kode HTML dari suatu form hingga bagaimana menghias form tersebut dengan menggunakan CSS agar lebih enak dilihat dan digunakan oleh user kita.

Pada artikel bagian kedua ini kita masih tetap mempelajari CSS untuk menghias suatu form. Namun kita akan membuat tampilan form yang berbeda dari tutorial pertama, jika sebelumnya tampilan form adalah label berada diatas element form, kali ini kita akan membentuk label dan element form saling bersebelahan. Berikut hasil akhir dari form kita nantinya :

[wptf act="InsertImg" src="styling-form/finish-form-2.gif" alt="Gambar hasil akhir form"][/wptf]

Sebelum kita menjamah pada CSS, kita harus terlebih dahulu sedikit merubah struktur Html, yaitu dengan merubah posisi teks required dari setelah label ke setelah input. Sebagai berikut :

[xml]

Name (required)

[/xml]

Struktur HTML yang lebih lengkap dapat dilihat pada perubahan struktur HTML.

Menyusun Kode CSS

Di dalam desain form yang kedua ini, kita akan membuat setiap rangkaian element form, yang terdiri dari label, field dan teks required sejajar dalam satu baris. Karena dari ketiga element tersebut bersifat inline, maka kita tidak perlu melakukan apapun. Selanjutnya kita akan terlebih dahulu menyusun style dasar dari form, sepert huruf, warna dan jarak antar element. Untuk mempersingkat tutorial ini, kita gunakan kode CSS dari tutorial styling form bagian I dan merubahnya sesuai dengan kebutuhan. Hasilnya dapat dilihat pada hasil kode CSS tutotial I.

Dari hasil kode CSS diatas terlihat bahwa teks required tidak ikut berubah. Hal ini dikarenakan kita merubah letaknya di dalam struktur HTML. Untuk memperbaikinya kita cukup merubah selector yang menargetkan element ini dari label em menjadi em. Selain itu tampak bahwa label dan element form tidak lagi sejajar, untuk mensejajarkannya kembali dilakukan dengan mengembalikan sifat asli dari element label menjadi inline. Untuk melakukannya hapus kode css display: block didalam selector label. Hasil dapat dilihat pada perbaikan teks required. Dari hasil yang didapatkan terlihat cukup bagus, namun belum sesuai dengan hasil akhir yang kita inginkan.

Memperbaiki Layout Form

Sampai titik ini, terlihat bahwa form masih kurang rapi dan berbeda dari hasil akhir yang diinginkan. Pada hasil akhir, terlihat bahwa label dan element form akan sejajar secara vertikal dan label mempunyai lebar yang sama. Kita tidak dapat menyelesaikannya dengan menambahkan nilai width, karena sifat inline dari tag label. Lebar dari suatu element inline ditentukan berdasarkan lebar dari teks yang ada di dalamnya. Walaupun kita dapat mempengaruhi lebar dengan attribute padding dan margin, namun tetap akan menghasilkan lebar yang berbeda.

Untuk dapat memberikan lebar pada element label kita harus merubah sifat dari element ini menjadi block, namun hal ini membuat label tidak lagi sejajar dengan element form. Satu-satunya cara yang tersisa adalah menggunakan float. Property CSS float digunakan untuk memaksakan suatu element untuk mengisi ruang kosong yang ada di atasnya. Element float mempunyai sifat yang unik, ketika masih ada ruang kosong diatasnya dia mirip seperti element inline, namun kita juga dapat memberikan dimension properties (width dan height). Inilah yang kita butuhkan disini.

Namun pertanyaannya adalah element apa yang perlu di-float ?. Cara termudah adalah dengan melakukannya pada element yang paling kiri dan kemudian kita berikan nilai left. Dalam struktur kita berarti adalah label, berikut kodenya,

[css] label { float: left; font: bold italic 12px "Trebuchet MS", Calibri, Arial, sans-serif; color: #003399; } [/css]

Hasilnya dapat dilihat pada hasil floating element label.

Terlihat masih tetap kurang rapi, untuk merapikannya kita berikan nilai width dan mengatur perataan dari element label, sebagai berikut,

[css] label { float: left; width: 80px; text-align: right; margin-right: 10px; font: bold italic 12px "Trebuchet MS", Calibri, Arial, sans-serif; color: #003399; } [/css]

Hasilnya dapat dilihat pada perbaikan layout form.

Untuk sentuhan akhir kita tambahkan property vertical align pada element teks required (<em>), sehingga teks akan selalu berada di bagian teratas.

[css] em { font-size: 10px; color: #6699cc; font-weight: normal; vertical-align: top; } [/css]

Semuanya terlihat sangat sempurna, namun hal ini dicapai ketika kita melihatnya di Firefox, bagaimana dengan IE ? Beruntungnya semua terlihat sama dan tidak ada yang ganjal dengan tampilan form. Berikut seluruh kode CSS yang membentuk form bagian kedua.

[css] ol { padding-left: 0; margin-bottom: 20px; } li { list-style: none; } label { float: left; width: 80px; text-align: right; margin-right: 10px; font: bold italic 12px "Trebuchet MS", Calibri, Arial, sans-serif; color: #003399; } input { margin-bottom: 16px; width: 180px; } input, textarea { border: 1px solid #6699cc; color: #003366; } textarea { width: 240px; height: 80px; } em { font-size: 10px; color: #6699cc; font-weight: normal; vertical-align: top; } .submit input { width: auto; padding: 4px 20px; font: bold 12px "Trebuchet MS", Calibri, Arial, sans-serif; } .submit input:hover { cursor: pointer; background-color: #ccccff; } [/css]

Hasil akhir dapat dilihat pada hasil akhir form.

]]> http://iznyn.com/blog/2010/02/10/styling-form-part-2?feed=comment 2 http://iznyn.com/blog/2010/01/22/styling-form-part-1 http://iznyn.com/blog/2010/01/22/styling-form-part-1#comments Fri, 22 Jan 2010 08:52:00 +0000 Iznyn Blog http://iznyn.com/blog/2010/01/22/styling-form-part-1 Form pada modern web seperti saat ini merupakan sebuah element yang cukup penting dalam menghubungkan user dengan sistem di dalam web tersebut. Fungsi utama dari suatu form adalah memungkinkan suatu user untuk memasukkan data ke dalam sistem web, dalam rangka untuk memenuhi suatu proses tertentu. Dan pada artikel ini kita akan bercerita tentang bagaimana menyusun suatu form yang baik dan benar.

]]> Form pada modern web seperti saat ini merupakan sebuah element yang cukup penting dalam menghubungkan user dengan sistem di dalam web tersebut. Fungsi utama dari suatu form adalah memungkinkan suatu user untuk memasukkan data ke dalam sistem web, dalam rangka untuk memenuhi suatu proses tertentu. Sebagai contoh adalah User Registration Form, pada form jenis ini, user memasukkan data pribadi untuk mandapatkan suatu hak khusus terhadap akses data di dalam web yang bersangkutan.

Penyusunan form tidak akan terlepas dari teknologi server-side, seperti PHP, ASP, Perl, dsb. Kita harus membuat fungsi-fungsi pemrosesan data yang dimasukkan melalui form dengan menggunakan teknologi ini. Namun demikian kita juga jangan sampai melupakan teknologi client-side, seperti CSS dan Javascript, untuk memberikan kenyamanan kepada user ketika memasukkan data melalui form. Dan pada artikel ini kita akan bercerita tentang bagaimana menyusun suatu form yang baik dan benar.

Menyusun Struktur HTML Untuk Form

Tentu saja, langkah pertama untuk menyusun Form adalah membentuk struktur HTML. Namun sebelum kita melangkah lebih jauh lagi, satu hal yang perlu diingat adalah bahwa masa kejayaan "Table" telah lewat dan kita tidak akan secara bodoh menggunakannya dalam tutorial ini.

Dari semua tag html yang tersedia, saya lebih suka menggunakan tag ordered list dalam menyusun form. Dengan menggunakan tag ini, maka dalam kondisi tanpa CSS, form akan tetap akan terstruktur dengan baik dan tetap mudah diikuti. Kemudian mengingat suatu form mempunyai urutan pengisian yang jelas dari atas ke bawah maka pemilihan tag ordered list akan menjadi semakin sempurna.

Berikut kode HTML dari form yang akan kita susun,

[xml]

1. Name (required)
2. Email (required)
3. Message (required)

[/xml]

Hasil dari kode HTML diatas dapat dilihat pada struktur html untuk form.

Menyusun Kode CSS

Sekarang kita masuk pada inti dari tutorial ini, yaitu menyusun kode CSS. Pada tutorial ini kita akan membentuk dua style form pada struktur html di atas. Berikut hasil akhir dari form kita.

[wptf act="insertImg" src="styling-form/finish-form.jpg" title="Gambar bentuk akhir form"][/wptf]

Menyusun Style Form 1

Untuk membentuk tampilan form pada gambar 1 cukup mudah dilakukan. Pertama kita harus menghilangkan style-list dari tag list, sebagai berikut :

[css] ol { padding-left: 0; } li { list-style: none; } [/css]

Selanjutnya kita merubah attribute block pada tag label dan menambahkan sedikit ruang dibawah tag input. Berikut code CSS-nya :

[css] label { display: block; } input { margin-bottom: 16px; } [/css]

Anda dapat melihat hasil kode CSS diatas pada hasil untuk pembentukan layout form.

Selanjutnya kita mempercantik element form dengan merubah warna border dan sedikit memperbesar ukurannya, sebagai berikut :

[css] input { margin-bottom: 16px; width: 180px; } input, textarea { border: 1px solid #6699cc; color: #003366; } textarea { width: 240px; height: 80px; } [/css]

Berikutnya kita mengatur style dari tombol Send Message.

[css] .submit input { width: auto; padding: 4px 20px; } .submit input:hover { cursor: pointer; background-color: #ccccff; } [/css]

Untuk sementara bentuk form dapat dilihat pada hasil mempercantik form.

Terakhir kita tinggal mengatur style dari font. Berikut hasil dari kode CSS yang menyusun style form kita.

[css] ol { padding-left: 0; margin-bottom: 20px; } li { list-style: none; } label { display: block; font: bold italic 12px "Trebuchet MS", Calibri, Arial, sans-serif; color: #003399; } input { margin-bottom: 16px; width: 180px; } input, textarea { border: 1px solid #6699cc; color: #003366; } textarea { width: 240px; height: 80px; } label em { font-size: 10px; color: #6699cc; font-weight: normal; } .submit input { width: auto; padding: 4px 20px; font: bold 12px "Trebuchet MS", Calibri, Arial, sans-serif; } .submit input:hover { cursor: pointer; background-color: #ccccff; } [/css]

Hasil akhir dari style form bagian 1 dapat dilihat pada hasil akhir form

Berikutnya kita akan menjelaskan cara menyusun style form untuk bagian ke 2. Pada bagian ini akan menjadi sedikit lebih rumit dari bagian sebelumnya dan kita akan menjelaskannya pada artikel saya selanjutnya. Enjoyed

]]> http://iznyn.com/blog/2010/01/22/styling-form-part-1?feed=comment 6 http://iznyn.com/blog/2010/01/13/membuat-post-list-di-dalam-wordpress-tanpa-the-loop http://iznyn.com/blog/2010/01/13/membuat-post-list-di-dalam-wordpress-tanpa-the-loop#comments Wed, 13 Jan 2010 05:25:00 +0000 Iznyn Blog http://iznyn.com/blog/2010/01/13/membuat-post-list-di-dalam-wordpress-tanpa-the-loop Wordpress saat ini telah menjadi salah satu mesin blog yang paling banyak digunakan. Kemudahan serta flexibilitas dari wordpress mempermudah kita di dalam membuat suatu blog atau bahkan suatu web yang lebih rumit. Salah satu fasilitas yang dimiliki oleh Wordpress yang dapat mempermudah dalam penyusunan blog adalah the loop(). The loop merupakan serangkaian php function yang disediakan untuk mempermudah dalam menampilkan setiap post di dalam suatu halaman.

]]> Wordpress saat ini telah menjadi salah satu mesin blog yang paling banyak digunakan. Kemudahan serta flexibilitas dari wordpress mempermudah kita di dalam membuat suatu blog atau bahkan suatu web yang lebih rumit. Salah satu fasilitas yang dimiliki oleh Wordpress yang dapat mempermudah dalam penyusunan blog adalah the loop(). The loop merupakan serangkaian php function yang disediakan untuk mempermudah dalam menampilkan setiap post di dalam suatu halaman.

Namun disini kita tidak akan menjelaskan bagaimana menggunakan fasilitas ini. Kita disini akan mencoba untuk mencapai hasil yang sama dengan menggunakan cara yang berbeda. Meskipun kita akan tetap menjelaskan bagaimana The Loop berkerja.

Proses Pengambilan Data Post Di Dalam Wordpress

Sebelum kita menggali lebih dalam tentang cara kerja The Loop, kita akan melihat bagaimana Wordpress bekerja menangani setiap request. Setiap request yang diterima oleh Wordpress akan diuraikan untuk mendapatkan variable-variable request. Proses penguraian dilakukan dengan menyamakan URI Request dengan suatu rangkaian rewrite_rule. Dengan variable request yang didapatkan kemudian akan digunakan oleh Wordpress untuk mengambil data post di dalam database. Jadi pada setiap request yang diterima, Wordpress akan selalu berusaha untuk mendapatkan data posts.

Pada dasarnya Wordpress akan menangani fungsi-fungsi tersebut dengan menggunakan beberapa class. Beruntungnya objek dari class tersebut oleh Wordpress disimpan dalam suatu global variable. Sehingga kita dapat mempelajari proses wordpress dengan memeriksa global variable tersebut, antara lain :

$wp_rewrite

Membawa object WP_Rewrite yang digunakan oleh Wordpress untuk membentuk rewrite_rule

$wp_query

Membawa object WP_Query yang digunakan oleh Wordpress untuk mendapatkan data post berdasarkan variable request yang di dapatkan

$wp

Di dalam class yang di bawa oleh variable ini akan menguraikan URI Request berdasarkan rewrite_rule dan menyuplai variable request yang di dapatkan ke dalam class WP_Query

Kita dapat memeriksa variable tersebut dengan menggunakan fungsi php print_r() dan disarangkan di dalam tag pre. Sebagai contoh masukkan kode berikut ke dalam file header.php di dalam folder theme anda.

[php htmlscript="true"]

[/php]

Seharusnya anda sekarang telah mendapatkan ide tentang bagaimana wordpress menangani setiap request. Selanjutnya akan dijelaskan tentang bagaimana The Loop bekerja

Cara Kerja The Loop

Pada dasarnya fungsi-fungsi dalam The Loop hanya memanipulasi object wp_query. Kita menggunakan The Loop untuk mendapatkan data posts sebagai berikut :

[php] //Html code here [/php]

Dari kode diatas, pertama kita mempunyai function have_post(). Fungsi ini berfungsi untuk memeriksa apakah suatu request menghasilkan data post atau tidak. Apabila terdapat data posts yang dihasilkan maka fungsi ini juga akan melakukan proses iteration dengan menambahkan nilai counter ke dalam attribute class.

Kemudian kita mempunyai fungsi the_post(). Fungsi ini akan mendapatkan data post tunggal berdasarkan nilai counter yang disuplai oleh fungsi have_post(). Dari data post yang didapatkan, kemudian akan menyuplai beberapa nilai penting ke dalam global variable, sebagai contoh adalah $id, sehingga kemudian dapat digunakan oleh fungsi-fungsi templete.

Membangun Post List Tanpa The Loop

Sekarang kita masuk pada inti dari artikel ini. Untuk dapat menampilkan data post tanpa menggunakan The Loop, maka kita dapat menggunakan class WP_Query. Pada dasarnya dari setiap request yang didapatkan, Wordpress akan membuat object baru dari class WP_Query dan disimpan dalam global variable $wp_query yang kemudian menggunakannya untuk mendapatkan data post.

Tanpa The Loop, kita dapat menggunakan data dalam object $wp_query untuk mendapatkan data post, sebagai contoh :

[php htmlscript="true"] posts; if (!empty($posts)) : foreach($posts as $post) : ?>

post_title; ?>

post_content; ?>

[/php]

Salah satu keuntungan dengan menggunakan class WP_Query adalah kita dapat secara bebas menentukan data post yang ingin di dapatkan tanpa harus tergantung pada request halaman. Sebagai contoh adalah mendapatkan 5 data post terbaru, sebagai berikut :

[php htmlscript="true"] 5); $post = $posts->query($q); if (!empty($post)) : foreach($post as $value) : ?>

post_title; ?>

post_content; ?>

[/php]

Sebagai catatan penting adalah bahwa ketika kita menampilkan data post tanpa menggunakan The Loop, maka kita sama sekali tidak dapat menggunakan fungsi-fungsi templete seperti the_ID(), the_title(), the_content().

Terakhir, tujuan dibuatnya artikel ini bukanlah memberikan suatu rekomendasi, namun lebih ingin menjelaskan bagaimana proses pengambilan data post di dalam Wordpress. Saya tetap merekomendasikan untuk menggunakan The Loop untuk kondisi-kondisi biasa. Baru kemudian jika The Loop dirasa kurang dapat memenuhi kebutuhan pengambilan data post, kita dapat menggunakan tehnik-tehnik yang telah dijelaskan diatas.

]]> http://iznyn.com/blog/2010/01/13/membuat-post-list-di-dalam-wordpress-tanpa-the-loop?feed=comment 1 http://iznyn.com/blog/2009/11/27/wordpress-memenangkan-cms-award http://iznyn.com/blog/2009/11/27/wordpress-memenangkan-cms-award#comments Fri, 27 Nov 2009 06:16:00 +0000 Iznyn Blog http://iznyn.com/blog/2009/11/27/wordpress-memenangkan-cms-award Ini merupakan kabar gembira bagi para penggemar Wordpress, dengan terpilihnya Wordpress sebagai the Overall Best Open Source CMS Award pada the 2009 Open Source CMS Awards yang diselenggarakan Packt Publishing. Bukan sebuah kontes yang kecil, karena di dalamnya terlibat lebih dari 12,000 nominasi dan lebih dari 23,000 partisipan ikut dalam pemilihan diseluruh category yang disediakan. Dengan penghargaan yang diraih ini telah menunjukkan bahwa Wordpress sekarang tidak lagi dipandang hanya sebagai software blog namun sebagai suatu CMS

]]> Ini merupakan kabar gembira bagi para penggemar Wordpress, dengan terpilihnya Wordpress sebagai the Overall Best Open Source CMS Award pada the 2009 Open Source CMS Awards yang diselenggarakan Packt Publishing. Bukan sebuah kontes yang kecil, karena di dalamnya terlibat lebih dari 12,000 nominasi dan lebih dari 23,000 partisipan ikut dalam pemilihan diseluruh category yang disediakan. Dengan penghargaan yang diraih ini telah menunjukkan bahwa Wordpress sekarang tidak lagi dipandang hanya sebagai software blog namun sebagai suatu CMS

Disamping memenangkan penghargaan di dalam categori the 2009 Open Source CMS Awards, Wordpress juga meraih sukses dengan menduduki peringkat kedua di dalam categori the Best Open Source PHP CMS dibawah Drupal dan diatas Joomla. Hal ini cukup mengejutkan karena sebelumnya, pada acara yang sama, Wordpress bahkan tidak masuk di dalam 5 besar, dan sekarang berada di peringkat kedua diatas joomla yang notabene benar-benar suatu CMS murni.

Semua raihan ini tidak terlepas dari peran komunitas Wordpress secara keseluruhan. Terutama bagi para pengembang plugin yang telah berhasil memperkuat fungsi dasar Wordpress sehingga mampu menjadikannya lebih fleksible dalam memenuhi berbagai kebutuhan pengembangan web. Pada kenyataannya, menurut penulis semua ini memang pantas untuk diraih oleh Wordpress. Berdasarkan pengalaman dari penulis selama menggunakannya, sistem ini memang cukup fleksible karena kita secara bebas diberikan kesempatan untuk memperluas fungsi-fungsinya di hampir seluruh bagian fungsi dasarnya.

Akhirnya dengan semua raihan ini, akan memberikan kebanggaan tidak hanya bagi tim pengembang Wordpress itu sendiri namun bagi komunitas Wordpress secara keseluruhan. Congratulations !!!!

Berikut daftar lengkap dari peraih penghargaan tersebut :

The Overall Best Open Source CMS Award

1. WordPress
2. MODx
3. SilverStripe

The inaugural Hall of Fame Award

1. Drupal
2. Joomla

The Most Promising Open Source CMS

1. ImpressCMS
2. Pixie
3. Pligg

The Best Open Source PHP CMS

1. Drupal
2. WordPress
3. Joomla

The Best Other Open Source CMS

1. Plone
2. dotCMS
3. mojoPortal

]]> http://iznyn.com/blog/2009/11/27/wordpress-memenangkan-cms-award?feed=comment 1 http://iznyn.com/blog/2009/11/05/membuat-menu-dropdown-menggunakan-css-part-2 http://iznyn.com/blog/2009/11/05/membuat-menu-dropdown-menggunakan-css-part-2#comments Thu, 05 Nov 2009 05:25:00 +0000 Iznyn Blog http://iznyn.com/blog/2009/11/05/membuat-menu-dropdown-menggunakan-css-part-2 Setelah pada bagian pertama kita mengatur style untuk menu utama, maka kali ini kita akan mengatur style untuk sub menu.

Sesuai dengan desain yang telah kita buat sebelumnya, sub menu hanya akan nampak ketika mouse berada diatas daerah menu utama. Kita dapat melakukannya dengan menyembunyikan sub menu pada kondisi normal dan baru akan memunculkannya ketika mouse berada diatas menu utama. Namun untuk keperluan desain, maka pengaturan tersebut akan diberikan pada bagian paling akhir karena kita membutuhkan memunculkan bagian sub menu untuk mengatur tampilannya.

]]> Mengatur style untuk Sub Menu

Setelah pada bagian pertama kita mengatur style untuk menu utama, maka kali ini kita akan mengatur style untuk sub menu.

Sesuai dengan desain yang telah kita buat sebelumnya, sub menu hanya akan nampak ketika mouse berada diatas daerah menu utama. Kita dapat melakukannya dengan menyembunyikan sub menu pada kondisi normal dan baru akan memunculkannya ketika mouse berada diatas menu utama. Namun untuk keperluan desain, maka pengaturan tersebut akan diberikan pada bagian paling akhir karena kita membutuhkan memunculkan bagian sub menu untuk mengatur tampilannya.

Pertama kita atur style untuk element kontainer dari setiap sub menu, termasuk background color, padding dan width, berikut ini :

[css] #menu>ul>li ul { background-color: #99ccff; width: 140px; padding: 10px 10px 20px 10px; } [/css]

Berikutnya adalah memposisikan sub menu relatif terhadap menu induknya.

[css] #menu>ul>li ul {position: absolute; left:23px;} [/css]

Secara default apabila kita memposisikan suatu elemen secara absolute, maka elemen tersebut akan diposisikan relatif terhadap elemen terdekatnya yang telah keluar dari aliran normal dokumen. Untuk kasus diatas, kita harus membuat elemen kontainer dari menu utama agar keluar dari aliran normal dokumen, dalam hal ini menggunakan relative positioning. Untuk lebih jelas tentang masalah ini dapat dilihat pada artikel saya, Absolute Positioning dan Relative Positioning.

Kode CSS tersebut hanya berlaku untuk sub menu yang langsung berada dibawah menu utama, sedangkan untuk sub menu dari suatu sub menu tidak akan terpenuhi. Hal ini disebabkan oleh posisi dari sub menu tersebut yang berbeda, untuk sub menu dari menu utama akan diposisikan dibawah dari menu utama, sedangkan untuk sub menu dari sub menu akan diposisikan di samping sub menu induknya. Agar dapat menyelesaikan masalah ini dengan memposisikan ulang sub menu dari sub menu, sebagai berikut :

[css] #menu>ul>li ul ul { left: 140px; top: 0; } [/css]

Selanjutnya kita akan mengatur style untuk link sub menu. Link akan diatur agar ketika mouse berada diatasnya, warna background berubah. Perlu dicatat juga bahwa link ini akan mempunyai luasan yang cukup lebar sedangkan dengan perilaku default dari elemen anchor, yaitu sebagai inline element, hal ini tidak mungkin dapat terpenuhi. Suatu inline element, seperti a, em, strong dan code tidak akan terpengaruh oleh attribute CSS yang berusaha untuk memperluas elemen tersebut secara vertikal, seperti padding-top, padding-bottom, margin-top dan margin-bottom. Kebalikan dari inline-level element adalah block-level element. Pada suatu block-level element, seperti p, ul dan pre kita dapat memperluas elemen tersebut baik secara vertikal maupun horisontal. Untuk lebih memahami tentang masalah dapat dilihat pada Wikipedia - HTML Element

Dengan menggunakan CSS kita dapat merubah sifat dasar suatu elemen HTML, baik dari Block ke Inline maupun sebaliknya dengan menggunakan attribute display. Kembali ke link yang akan kita susun, setelah merubah elemen anchor dari level inline ke block, kita dapat memperluas elemen link dengan menggunakan attribute padding, sebagai berikut :

[css] #menu>ul>li ul a { display: block; padding: 12px 0 12px 4px; line-height: 16px; border-bottom: 1px solid #6699cc; color: #04386a; } #menu>ul>li ul a:hover { background-color: #6699cc; border-bottom-color: #8e3539; } [/css]

Disini kita juga memberikan attibute line-height untuk mengurangi efek dari attribute yang sama, yang kita deklerasikan sebelumnya. Selain itu kita juga memberikan border di bagian bawah dari setiap sub-menu untuk memisahkan setiap menu.

Pekerjaan hampir selesai, yang tersisa adalah mengatur perilaku dari sub-menu. Seperti telah dijelaskan sebelumnya bahwa sub-menu hanya akan nampak ketika mouse ada diatas menu induknya. Untuk menyelesaikannya, pertama kita sembunyikan terlebih dahulu ketika dalam kondisi normal.

[css] #menu>ul>li ul { display: none; } [/css]

Berikutnya kita tampilkan sub-menu ketika mouse ada diatas menu induknya.

[css] #menu li:hover>ul { display: block; } [/css]

Nah, semua perkejaan kini telah selesai. Untuk dapat melihat hasil akhir dari menu drop-down dapat dilihat disini.

Apabila ingin mendapatkan semua file yang diperlukan dalam tutorial ini dapat diunduh disini.

Walaupun menu drop-down telah selesai disusun, namun tutorial ini tidak berhenti disini. Pada bagian selanjutnya akan dijelaskan tentang masalah-masalah yang timbul dari menu drop-down ini dan bagaimana menyelesaikannya.

]]> http://iznyn.com/blog/2009/11/05/membuat-menu-dropdown-menggunakan-css-part-2?feed=comment 14 http://iznyn.com/blog/2009/11/04/membuat-menu-drop-down-menggunakan-css-part-1 http://iznyn.com/blog/2009/11/04/membuat-menu-drop-down-menggunakan-css-part-1#comments Wed, 04 Nov 2009 08:00:00 +0000 Iznyn Blog http://iznyn.com/blog/2009/11/04/membuat-menu-drop-down-menggunakan-css-part-1 Suatu menu dropdown biasanya disediakan ketika website terdiri dari banyak menu halaman. Keuntungan dari penggunaan menu dropdown ini adalah desain halaman menjadi lebih menarik serta meningkatkan kemudahan pengguna untuk menjelajahi web site. Kebanyakan, menu dropdown disusun dengan menggunakan Javascript, namun kita dapat mencapai hasil yang hampir sama secara lebih mudah dengan menggunakan CSS. Dalam artikel ini akan dijelaskan secara detail cara membuat menu drop down dengan menggunakan CSS.

]]> Suatu menu dropdown biasanya disediakan ketika website terdiri dari banyak menu halaman. Keuntungan dari penggunaan menu dropdown ini adalah desain halaman menjadi lebih menarik serta meningkatkan kemudahan pengguna untuk menjelajahi web site. Kebanyakan, menu dropdown disusun dengan menggunakan Javascript, namun kita dapat mencapai hasil yang hampir sama secara lebih mudah dengan menggunakan CSS. Dalam artikel ini akan dijelaskan secara detail cara membuat menu drop down dengan menggunakan CSS.

Membuat Struktur HTML

Susunan menu atau navigasi di dalam suatu web site dapat digambarkan sebagai sistem folder di dalam sistem operasi. Sehingga tag HTML yang paling sesuai untuk membentuk sistem menu adalah list. Dan karena suatu menu didalam web site bukanlah suatu list yang ditentukan urutannya, maka dari tag HTML list yang paling sesuai adalah unordered list (<ul>).

Misalkan kita mempunyai struktur menu sebagai berikut :

[wptf act="insertImg" src="drop-down-menu/menutree.gif" alt="Gambar struktur menu"][/wptf]

Dari struktur menu tersebut dapat kita susun dalam struktur html berikut ini

[xml]

• Home
• About
  • The Company
    • History
    • Mission
  • Working Process
  • Work Planners
  • Testimonials
• Services
  • Web Design and Development
  • Logo Design
  • Print Design
• Portfolio
  • Website Design
  • Corporate Identity
• Contact

[/xml]

Membuat Desain Menu

Disini kita tidak akan menjelaskan bagaimana cara membuat desain menu, yang dalam hal ini dibuat dengan Photoshop. Namun yang jelas desain menu yang akan kita buat pada tutorial ini terlihat sebagai berikut :

[wptf act="insertImg" src="drop-down-menu/design-menu-finish.jpg" alt="Gambar struktur menu"][/wptf]

Nah semua persiapan telah dilakukan, saatnya kita masuk pada inti dari tutorial ini yaitu menyusun kode CSS untuk membentuk menu

Menyusun kode CSS

Untuk mempermudah dalam menjelaskan kode CSS yang menyusun menu dropdown ini, kita akan membaginya menjadi 2 tahap yaitu menyusun styles menu utama dan menyusun styles sub menu. Namun sebelum kita memasuki tahap-tahap ini, disini untuk mempermudah penyusunan kode CSS kita lakukan pembersihan terhadap default styles dari browser.

Clearing Browser Default Styles

Secara umum pembersihan default styles dari browser dilakukan untuk mempermudah penyusunan kode CSS. Pada tutorial ini kode yang digunakan untuk pembersihan hanya terbatas untuk memenuhi kebutuhan dari penyusunan menu dropdown. Apabila anda tertarik dengan hal ini, maka satu yang disediakan oleh Yahoo (YUI) adalah contoh yang cukup bagus. Berikut kode CSS yang digunakan dalam rangka pembersihan default styles dari browser :

[css] body, ul, li { margin: 0; padding:0; } ul { list-style: none; } /* Set font */ body { font-family: "Trebuchet MS", Verdana, Arial, sans-serif; } [/css]

Pada bagian pertama dari kode CSS diatas, kita menghilangkan attribute padding dan margin pada element body, ul dan li. Kemudian dilanjutkan dengan menghilangkan style dari list pada element ul. Terakhir kita mengatur jenis font pada element body, yang kemudian akan diturunkan pada semua element yang menjadi keturunannya.

Selain itu, kita juga akan menyediakan suatu CSS class yang dinamakan clearfix. Class ini berfungsi untuk menyelesaikan masalah float, yang kita gunakan untuk menyusun susun horisontal. Hal ini akan menjadi jelas ketika kita menyusun kode CSS. Berikut kode CSS untuk class clearfix ini :

[css] .clearfix:after { content: "."; display: block; height: 0; visibility: hidden; clear: both; } .clearfix { display: inline-table; } /* Hide for IE-Mac \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hide for IE-Mac */ [/css]

Class clearfix ini adalah salah satu metode yang cukup efektif untuk menyelesaikan masalah float. Disini kita tidak akan menjelaskan bagaimana class ini bekerja, namun jika anda tertarik untuk mempelajari lebih detail dapat dilihat pada Position Is Everything - Easy clearing.

Mengatur Style Menu Utama

Yang pertama kali kita lakukan untuk mengatur style menu utama adalah memberikan background serta menentukan font dan padding pada kontainer dari menu, berikut ini :

[css] #menu { background: transparent url(bg-menu.gif) repeat-x; font-size: 12px; } #menu>ul { padding-left: 10px; } [/css]

Saya memutuskan untuk menentukan font-size pada bagian kontainer (ul) karena pertimbangan bahwa menu ini akan menggunakan ukuran font yang sama serta kenyataan bahwa menu akan menggunakan ukuran static (px) sehingga kita tidak perlu mengkhawatirkan adanya pengaruh ukuran font terhadap ukuran menu. Pada bagian kedua, kita menggunakan selector child yang akan menyamakan element ul yang secara langsung menjadi turunan/anak dari element #menu.

Kemudian proses dilanjutkan dengan menyusun menu utama agar terlihat horisontal, berikut kode css-nya :

[css] #menu>ul>li { display: inline; float: left; line-height: 40px; } [/css]

Salah satu attribute CSS yang dapat digunakan untuk menyusun elemen HTML secara horisontal adalah float. Attribute float akan memaksakan suatu elemen untuk mengisi ruang kosong disebelah kanan maupun kiri (tergantung nilai yang diberikan pada attribute ini) dari elemen tersebut. Dengan sifatnya tersebut, membuat element disekitar "flaoted element" ikut terpengaruh sehingga akan sulit dikontrol. Ada beberapa metode yang dapat digunakan untuk menyelesaikan masalah float ini, namun satu yang paling efektif dalah dengan menggunakan class clearfix yang telah kita buat sebelumnya. Untuk dapat menggunakannya, kita tambahkan didalam elemen kontainer, sebagai berikut:

[xml]

[/xml]

Yang perlu dilakukan selanjutnya adalah merubah attribute position dari setiap elemen li menjadi relative, sebagai berikut :

[css] #menu>ul li { position: relative; } [/css]

Hal ini sangat diperlukan terutama ketika akan memposisikan sub menu.

Selanjutnya kita tambahkan sedikit ruang diantara menu utama agar dapat menambah jangkuan klik terhadap link.

[css] #menu>ul>li a { padding: 5px 25px; } [/css]

Terakhir kita atur style dari anchor/link.

[css] #menu a { color: #ffffff; text-decoration: none; } #menu>ul>li>a:hover { color: #99ccff; } [/css]

Sampai disini kita telah menyelesaikan penyusunan untuk menu utama. Hasil sementara dari menu ini dapat dilihat disini.

Pada artikel selanjutnya kita akan mengatur style untuk sub menu.

]]> http://iznyn.com/blog/2009/11/04/membuat-menu-drop-down-menggunakan-css-part-1?feed=comment 7 http://iznyn.com/blog/2009/09/18/2-wordpress-theme-baru-dari-iznyn-com http://iznyn.com/blog/2009/09/18/2-wordpress-theme-baru-dari-iznyn-com#comments Fri, 18 Sep 2009 11:03:00 +0000 Iznyn Blog http://iznyn.com/blog/2009/09/18/2-wordpress-theme-baru-dari-iznyn-com Dalam rangka menyambut hari besar Islam, Idul Fitri 1430 H, iznyn.com telah menyusun dua wordpress themes, yaitu Opor Ayam dan PurityOfSoul. Kedua theme ini kami sediakan secara gratis dengan license dari GPL. Anda dapat secara bebas menggunakan, menyebarkan dan mengubah kedua Wordpress theme ini dengan menyertakan credit link pada bagian footer.
]]> Dalam rangka menyambut hari besar Islam, Idul Fitri 1430 H, iznyn.com telah menyusun dua wordpress themes, yaitu Opor Ayam dan PurityOfSoul. Kedua theme ini kami sediakan secara gratis dengan license dari GPL. Anda dapat secara bebas menggunakan, menyebarkan dan mengubah kedua Wordpress theme ini dengan menyertakan credit link pada bagian footer.

Detail tentang masing-masing theme dapat dilihat pada halaman Works beserta link untuk mengunduhnya. Selanjutnya kami sangat mengharapkan saran dan kritik, sehingga dapat menjadi acuan dalam memperbaiki kekurangan yang ada dalam pekerjaan kami ini dan semoga bermanfaat. Terakhir tak lupa kami mengucapkan Selamat Hari Raya Idul Fitri 1430 H, Minal Aidzin Wal Faidzin, Mohon Maaf Lahir dan Bathin

]]> http://iznyn.com/blog/2009/09/18/2-wordpress-theme-baru-dari-iznyn-com?feed=comment 1 http://iznyn.com/blog/2009/09/17/css-validator-tidak-hanya-sekedar-bikin-keren http://iznyn.com/blog/2009/09/17/css-validator-tidak-hanya-sekedar-bikin-keren#comments Thu, 17 Sep 2009 08:50:00 +0000 Iznyn Blog http://iznyn.com/blog/2009/09/17/css-validator-tidak-hanya-sekedar-bikin-keren Belakangan ini ada satu paradigma yang menganggap bahwa dengan menempatkan suatu link ke W3C Validator tersebut dan kemudian mendapatkan sebuah "lampu hijau" sebagai hasil validasi menjadi suatu hal yang cukup keren dan seperti menambah hebat halaman webnya. Namun apakah memang benar-benar menjadi lebih hebat kode yang lolos validasi?. Pada kenyataannya tidak. Kita hanya mendapatkan suatu kepastian bahwa kode yang kita disusun telah mematuhi suatu standard specification CSS. Selebihnya seringkali justru membatasi kita dalam memaksimalkan fasilitas yang dimiliki oleh CSS.
]]> CSS belakangan ini menjadi sebuah kebutuhan pokok bagi Web Designer di dalam menyusun unsur "look and feel" dari suatu halaman Web. Hal ini cukup beralasan dengan semua keuntungan yang bisa kita dapatkan dengan penggunaan CSS ini. Salah satu yang terpenting adalah bahwa kita dapat benar-benar memisahkan unsur "look and feel" dengan struktur dokumennya (HTML). Hal ini membuat penyusunan halaman web menjadi lebih mudah.

CSS Yang Begitu "Pemaaf"

Selain itu, sifat CSS yang mudah dipelajari dan cukup "pemaaf" merupakan alasan lain mengapa ia menjadi cukup diminati. Namun terkadang, kita akan menemukan bahwa dengan sifatnya yang pemaaf justru menjadi penghambat dalam proses penyusunan kode CSS.

Ketika menyusun kode CSS, dapat dipastikan bahwa kita tidak akan pernah menemui suatu pesan error meskipun kita menuliskan secara asal-asalan. Kita hanya akan mendapatkan tampilan yang berbeda dengan apa yang kita harapkan. Hal ini menyebabkan sulitnya untuk menemukan suatu ukuran yang dapat menentukan apakah kode yang kita susun benar atau salah.

CSS Validator

Berterima kasihlah kepada CSS Validator, karena kita tidak perlu bersusah payah lagi ketika ingin mencari kesalahan-kesalahan dalam kode CSS. Ada beberapa CSS Validator yang tersedia, namun yang banyak digunakan adalah yang disediakan oleh W3C. Jika belum pernah memeriksanya, anda dapat melakukannya melalui W3C CSS Validator. Keunggulan dari validator ini adalah bahwa dia tersedia secara online dan dapat di-bookmark secara langsung dari suatu halaman web.

Namun belakangan ini ada satu paradigma yang menganggap bahwa dengan menempatkan suatu link ke W3C Validator tersebut dan kemudian mendapatkan sebuah "lampu hijau" sebagai hasil validasi menjadi suatu hal yang cukup keren dan seperti menambah hebat halaman webnya. Namun apakah memang benar-benar menjadi lebih hebat kode yang lolos validasi?. Pada kenyataannya tidak. Kita hanya mendapatkan suatu kepastian bahwa kode yang kita disusun telah mematuhi suatu standard specification CSS. Selebihnya seringkali justru membatasi kita dalam memaksimalkan fasilitas yang dimiliki oleh CSS.

CSS Specification

Sejak kemunculannya, CSS telah memiliki beberapa versi specification, yaitu CSS Level 1 dan CSS Level 2.1 serta satu spesifikasi yang masih dalam bentuk draft, yaitu CSS Level 3. Selain ketiga specification yang dikeluarkan oleh W3C ini, ada beberapa specification lain yang dikembangkan oleh browser vendor.

Ketika suatu validator memeriksa suatu kode CSS, maka dia akan mengacu pada satu spesifikasi saja dan tidak untuk spesifikasi yang masih dalam bentuk draft maupun spesifikasi dari browser vendor. Sehingga apabila kita menyisipkan properties non-standard, maka kita akan mendapati bahwa kode CSS memiliki beberapa kesalahan. Hal ini yang dapat membatasi kita dalam memaksimalkan kekuatan dari CSS.

Memanfaatkan Sifat CSS Yang "Pemaaf"

Seperti yang telah saya katakan sebelumnya bahwa CSS mempunyai sifat yang cukup "pemaaf", sehingga apabila terdapat suatu properties yang tidak didukung oleh suatu browser atau secara tidak sengaja kita salah mengetikan suatu properties, maka dia akan langsung diabaikan oleh browser tersebut. Hal ini memberikan kebebasan kepada kita untuk meyisipkan kode-kode CSS non-standard. Walaupun kita tetap harus berhati-hati agar kode-kode tersebut tidak merusak tampilan dari halaman Web.

Sebagai contoh adalah extension dari mozilla, -moz-border-radius, contoh :

[css] .test { border: 1px solid #33333; -moz-border-radius: 5px; } [/css]

Properties tersebut di dalam firefox akan menyebabkan elemen mempunyai garis tepi melengkung di tiap sudutnya ("rounded corner"). Sedangkan pada browser lain akan mengabaikan properties tersebut sehingga hanya menghasilkan garis tepi biasa. Dengan menggunakan elemen ini kita akan memberikan pengalaman baru terhadap user pada browser tertentu tanpa mempengaruhi user pada browser lain.

Buruknya, adanya properties non-standard ini menyebabkan munculnya pesan kesalahan ketika mem-validasi kode CSS kita. Namun pada dasarnya kita dapat mengabaikan hal ini, selama anda yakin bahwa kode non-standard tersebut mempunyai tujuan yang jelas dan tidak merusak tampilan yang sudah ada.

Contoh lain dari penggunaan properties non-standard adalah CSS Bug, yaitu properties CSS yang digunakan untuk memperbaiki kesalahan implementasi pada suatu browser (biasanya pada Internet Explorer). Pada artikel ini tidak akan dijelaskan tentang CSS Bug namun untuk informasi lebih jelas dapat dilihat di www.positioniseverything.net. Seperti halnya extension dari browser, CSS Bug ini jika akan dinilai salah oleh validator. Namun kembali, pada dasarnya dia tidak salah hanya tidak mematuhi suatu standard.

Disini Kitalah Yang Berkuasa

Sebagai seorang Web Designer, kitalah yang berkuasa terhadap kode CSS yang kita susun. Kita dapat secara bebas menentukan bagaimana kode akan disusun tanpa harus mempedulikan pengaruh terhadap pihak lain. Yang terpenting adalah susunan kode CSS dapat memberikan kenyamanan di dalam proses pengembangan serta mampu membentuk suatu "look and feel" yang konsisten dan memberikan kenyamanan bagi user.

Yakinlah bahwa user tidak akan pernah mempedulikan bagaimana kode CSS akan disusun, yang mereka pedulikan hanyalah bagimana tampilan Web memberikan kenyamana pada saat menjelajahi isi dari sebuah Web site. Kecuali bahwa dia memang benar-benar memahai tentang CSS dan memang bermaksud mempelajari kode CSS yang kita susun.

Maka, jadikanlah suatu validator benar-benar sebagai alat bantu dalam mencari kesalahan kode CSS yang kita susun. Akan tetapi jangan kemudian membatasi kita dalam menciptakan pengalaman baru dan unik bagi user hanya karena ingin mendapat "lampu hijau" dari suatu CSS Validator. Asalkan anda yakin bahwa anda tidak salah ketik dan kode CSS secara keseluruhan mempunyai tujuan yang jelas, maka anda dapat mengabaikan pesan error yang dihasilkan oleh suatu validasi kode CSS.

]]> http://iznyn.com/blog/2009/09/17/css-validator-tidak-hanya-sekedar-bikin-keren?feed=comment 1 http://iznyn.com/blog/2009/09/07/absolute-positioning-dan-relative-positioning http://iznyn.com/blog/2009/09/07/absolute-positioning-dan-relative-positioning#comments Mon, 07 Sep 2009 01:04:00 +0000 Iznyn Blog http://iznyn.com/blog/2009/09/07/absolute-positioning-dan-relative-positioning Absolute positioning dan Relative positioning merupakan tool yang cukup bagus dalam penyusunan layout dokumen, baik ketika digunakan secara individu maupun gabungan antara keduanya. Artikel ini akan membahas tentang kedua attribute ini secara mendalam.

Absolute positioning merupakan suatu attribute CSS yang digunakan untuk mengatur posisi suatu elemen secara bebas, relatif terhadap element induk terdekat yang telah keluar dari aliran normal dokumen. Sedangkan Relative Positioning akan memposisikan elemen relatif terhadap posisi awal dari elemen ketika berada pada aliran normal.

]]> Absolute positioning dan Relative positioning merupakan tool yang cukup bagus dalam penyusunan layout dokumen, baik ketika digunakan secara individu maupun gabungan antara keduanya. Artikel ini akan membahas tentang kedua attribute ini secara mendalam.

Document Flow

Sebelum kita membahas lebih dalam tentang Absolute Positioning dan Relative Positioning, saya akan sedikit menjelaskan tentang Document Flow. Document flow sendiri merupakan suatu konsep yang digunakan oleh User Agent untuk menempatkan elemen-elemen HTML di dalam dokumen. Di dalam suatu dokumen HTML dapat terjadi dua jenis document flow, yaitu Normal dan Ubnormal. Normal document flow merupakan proses penempatan elemen-elemen HTML, dimana semua elemen membawa nilai posisi default atau Static Positioning. Pada kondisi ini, setiap elemen akan ditempatkan saling berturutan dari atas ke bawah di dalam dokumen. Sedangkan untuk Ubnormal document flow terjadi ketika suatu elemen HTML keluar dari aliran normal dokumen, yang mana terjadi sebagai akibat ditempatkannya elemen tersebut secara Absolute, Fixed atau Relative dan menggunakan attribute Float. Sketsa dari normal document flow dapat dilihat pada gambar di bawah ini :

[wptf act="InsertImg" src="absolute-positioning-dan-relative-positioning/normal-flow.jpg" alt="Sketsa normal document flow"][/wptf]

Sedangkan untuk perilaku dari ubnormal flow dapat dilihat pada masing-masing penyebab terjadinya ubnormal flow. Untuk Relative dan Absolute Positioning dapat dilihat pada penjelasan berikutnya.

Perilaku dari Absolute Positioning

Absolute positioning merupakan suatu attribute CSS yang digunakan untuk mengatur posisi suatu elemen secara bebas, relatif terhadap element induk terdekat yang telah keluar dari aliran normal dokumen. Ketika suatu elemen diposisikan secara Absolute, maka elemen tersebut akan keluar dari aliran normal dokumen dan membentuk layer baru bersama elemen-elemen turunannya. Kemudian dari layer baru ini, terbentuk sistem penempatan elemen baru yang tidak terpengaruh oleh elemen encestor (elemen induk) maupun elemen sibling (elemen yang mempunyai induk yang sama). Untuk menempatkan absolute elemen kita memerlukan attribute offset (top, bottom, left, right) dan apabila kita tidak menentukan attribute ini, maka elemen tersebut akan ditempatkan di pojok atas kiri dari elemen induknya. Sedangkan untuk aliran normal dokumen sebelumnya akan menganggap bahwa elemen yang diposisikan secara absolute sudah tidak ada lagi dan digantikan oleh elemen yang di dalam urutan markup berada di bawahnya. Seperti tampak pada gambar di bawah ini :

[wptf act="InsertImg" src="absolute-positioning-dan-relative-positioning/absolute-post.jpg" alt="Sketsa normal document flow"][/wptf]

Untuk lebih jelasnya perhatikan contoh dibawah ini :

Misalkan kita memiliki kode HTML sebagai berikut :

[xml]

Absolute Positioning

Lorem ipsum .....

Sub Heading

Lorem ipsum ......

• List 1
• List 2
• List 3
[/xml]

Kemudian misalkan saja kita posisikan elemen p.abs yang disarangkan didalam elemen div secara absolute, berikut kode CSS-nya :

[css] .abs { position: absolute; top: 30px; left: 30px; background-color: #e4e4e4; border: 1px dashed #aaa; } [/css]

Hasil dari kode diatas dapat dilihat disini

Dari contoh tersebut, terlihat bahwa elemen p diposisikan secara bebas, bahkan ketika dia disarangkan pada elemen yang lainnya

Sekarang kita rubah kode CSS diatas dengan memposisikan elemen div secara absolute, sebagai berikut :

[css] div { position: absolute; top: 40px; left: 40px; width: 400px; background-color: #d4d4d4; border: 1px dashed #888; } [/css]

Hasil dari kode diatas dapat dilihat disini

Opps, sekarang elemen p ikut berubah mengikuti elemen div, mengapa? Berikut penjelasannya. Ketika elemen p menjadi satu-satunya elemen di dalam dokumen yang diposisikan secara absolute, maka dia diposisikan (dalam hal ini dengan menggunakan attribute offset) relatif terhadap elemen body, dalam hal ini elemen body bertindak sebagai elemen induk terdekat yang mempunyai perlakuan khusus. Namun kemudian, ketika elemen div yang merupakan elemen induk dari p diposisikan secara absolute, maka elemen p tidak lagi diposisikan relatif terhadap body namun diposisikan relatif terhadap elemen div, karena sekarang elemen div-lah yang bertidak sebagai elemen induk terdekat yang mempunyai perlakuan khusus.

Selain itu, berdasarkan contoh diatas terlihat bahwa elemen div disertakan nilai width sebesar 400px, yang juga menyebabkan elemen p mengikuti nilai ini. Dan juga terlihat bahwa kontainer div tidak terpengaruh oleh tinggi dari elemen p. Ketinggian elemen div hanya mengembang berdasarkan kehadiran dari elemen turunannya yang masih mengikuti aliran normal (dalam contoh diatas adalah elemen h2). Dengan kata lain elemen div diatas hanya sebagai acuan dari penghitungan posisi elemen turunannya.

Perilaku dari Relative Positioning

Perilaku dari Relative Positioning hampir sama dengan Absolute Positioning. Hanya saja dari pada memposisikan elemen relatif terhadap elemen induk terdekat yang telah mendapatkan perlakuan khusus (sebagai akibat diposisikannya suatu elemen induk secara absolute, relative maupun fixed), Relative Positioning akan memposisikan elemen relatif terhadap posisi awal dari elemen ketika berada pada aliran normal. Perhatikan gambar dibawah ini :

[wptf act="InsertImg" src="absolute-positioning-dan-relative-positioning/relative-post.jpg" alt="Sketsa normal document flow"][/wptf]

Sebagai catatan bahwa pada gambar diatas, box 2 kita asumsikan diberikan suatu nilai lebar sehingga lebih kecil dari semula, hal ini hanya untuk mempermudah penjelasan saja. Berdasarkan gambar tersebut, ketika suatu elemen diposisikan secara relative maka dia akan membentuk layer baru beserta elemen turunannya dan menariknya area yang semula dia duduki tidak ditempati oleh elemen dibawahnya atau dengan kata lain bahwa memposisikan suatu elemen secara relative tidak akan merusak aliran normal dari kontainernya. Dan kemudian penempatan elemen akan didasarkan pada posisi awal dari elemen saat berada pada aliran normal.

Untuk lebih jelasnya perhatikan contoh dibawah ini :

Misalkan kita memiliki kode HTML sebagai berikut :

[xml]

Absolute Positioning

Lorem ipsum .....

Sub Heading

Lorem ipsum ......

• List 1
• List 2
• List 3
[/xml]

Kemudian misalkan saja kita posisikan elemen div secara relative, berikut kode CSS-nya :

[css] div { position: relative; top: 30px; left: 30px; background-color: #e4e4e4; border: 1px dashed #aaa; } [/css]

Hasil dari kode diatas dapat dilihat disini

Sebagai tambahan, berdasarkan contoh diatas bahwa elemen yang diposisikan secara relative, lebarnya akan tetap seperti saat berada pada aliran normal, kecuali jika secara langsung menentukannya dengan menggunakan attribute width. Hal ini menyebabkan munculnya horisontal scroll-bar.

Kombinasi Absolute dan Relative Positioning

Ketika attribute position, Absolute dan Relative, digunakan bersama-sama (dalam arti elemen induk diposisikan salah satu dari attribute ini dan element induk diposisikan secara sebaliknya) maka mereka dapat menjadi "tool" yang sangat bagus di dalam penyusunan layout dokumen. Disini ada dua kombinasi yaitu Elemen induk diposisikan secara Absolute dengan elemen turunan di posisikan secara Relative dan Elemen induk diposisikan secara Relative dengan elemen turunan di posisikan secara Absolute. Dari kedua opsi tersebut, opsi terakhirlah yang paling menarik, jadi saya hanya akan membahas untuk opsi ini, toh effek yang kita dapatkan untuk opsi pertama tidak jauh berbeda ketika kita memposisikan suatu element secara absolute.

Dengan memposisikan suatu elemen induk secara relative sedangkan elemen turunan secara absolute, maka efek yang didapatkan adalah bahwa kita dapat memposisikan suatu elemen relatif terhadap kontainernya tanpa kontainer harus keluar dari aliran normal dokumen. Tehnik ini biasanya dilakukan dengan memposisikan elemen induk secara relative tanpa menentukan attribute offset sehingga elemen tersebut akan tetap berada ditempatnya sesuai dengan aliran normal dokumen. Dari sini kita kemudian dapat memposisikan elemen turunannya berdasarkan luas dari elemen induknya dengan menggunakan absolute positioning. Seperti terlihat pada gambar di bawah ini :

[wptf act="InsertImg" src="absolute-positioning-dan-relative-positioning/relative-absolute.jpg" alt="Sketsa normal document flow"][/wptf]

Untuk lebih jelasnya dapat anda lihat pada contoh di bawah ini, dimana menggunakan tehnik tersebut diatas untuk menenmpatkan link "skip to content" di sebelah kanan atas dari kontainer header.

HTML code

[xml]

Site Header

Skip to content

Page Header

Lorem ipsum ......

Lorem ipsum ......

copyright © 2008-2009 iznyn

[/xml]

CSS code

[css] body {margin: 0;} a{color: #000;} a:hover{color: #666;} #header { position: relative; height: 80px; background-color: #ccc; border-bottom: 2px solid #333; padding: 10px; } #header span { position: absolute; right: 20px; bottom: 10px; font-weight: bold; } #content, #footer { background-color: #eee; padding: 10px; border-bottom: 2px solid #333; } #footer { background-color: #ccc; } [/css]

Hasil dari kode diatas dapat dilihat disini

]]> http://iznyn.com/blog/2009/09/07/absolute-positioning-dan-relative-positioning?feed=comment 6 http://iznyn.com/blog/2009/09/04/sepenggal-rasa-syukur-dari-penulis http://iznyn.com/blog/2009/09/04/sepenggal-rasa-syukur-dari-penulis#comments Fri, 04 Sep 2009 06:01:00 +0000 Iznyn Blog http://iznyn.com/blog/2009/09/04/sepenggal-rasa-syukur-dari-penulis Inilah alasan utama yang mendasari didirikannya iznyn.com. Ya semua tentang Web Design. Sejak perkenalannya dengan HTML, beberapa tahun yang lalu, kecintaan penulis terhadap dunia Web Design semakin menjadi-jadi belakangan ini. Dan blog ini mungkin dapat dikatakan sebagai wujud kecintaan penulis terhadap Web Design. Di dalam blog ini penulis akan berusaha untuk memberikan informasi sebanyak mungkin terutama yang berkaitan dengan Web Design, dengan harapan dapat memberikan pengaruh terhadap perkembangan dunia Web Design.
]]> Alhamdullilahirabil 'aalamin, segala puji dan syukur bagi Allah semata, kedamaian dan kesejahteraan dari-NYA semoga selalu tercurah bagi Rasullulah SAW, beserta keluarga, sahabat dan pengikutnya.

Belakangan ini, internet sudah menjadi kebutuhan pokok kita semua. Hampir semua hal dapat kita lakukan dengan internet, mulai dari mengirim surat, membeli barang, sampai mencari pasangan hidup. Selain itu kita dapat mencari informasi apapun dalam berbagai hal di dalam internet.

Sejalan dengan semakin meningkatnya kebutuhan yang harus dipenuhi oleh internet, maka teknologi dibelakang internet pun ikut berkembang dengan cukup cepat. Teknologi seperti HTML, CSS, Java Script dan PHP kini menjadi tulang punggung dalam perkembangan internet terutama di dalam prosess penyusunan dokumen yang membawa informasi.

Inilah alasan utama yang mendasari didirikannya iznyn.com. Ya semua tentang Web Design. Sejak perkenalannya dengan HTML, beberapa tahun yang lalu, kecintaan penulis terhadap dunia Web Design semakin menjadi-jadi belakangan ini. Dan blog ini mungkin dapat dikatakan sebagai wujud kecintaan penulis terhadap Web Design. Di dalam blog ini penulis akan berusaha untuk memberikan informasi sebanyak mungkin terutama yang berkaitan dengan Web Design, dengan harapan dapat memberikan pengaruh terhadap perkembangan dunia Web Design.

Tak terelakkan lagi bahwa keberhasilan dalam penyusunan blog ini merupakan sebuah berkah yang teramat tak terkira bagi penulis. Dan dapat dikatakan sebagai buah dari kerja keras yang dilakukan oleh penulis beberapa tahun ini di dalam mempelajari teknologi Web Design.

Selanjutnya, kami hanya bisa mengucapkan terima kasih terutama bagi Penciptaku, Yang Maha Pengasih lagi Maha Penyayang yang telah memberikan ilmu, kecerdasan, serta kesabaran selama proses penyusunan hingga terselesaikannya blog ini. Tak lupa kami juga mengucapkan sebesar-besarnya kepada semua pihak yang tidak dapat kami sebutkan satu-persatu yang baik secara langsung maupun tidak langsung telah memberikan dukungan moril, nasehat, saran, kritik serta inspirasi terhadap perkembangan dari blog ini. Tak lupa pula kami terus menunggu kritik dan saran dari anda sekalian.

Akhir kata, penulis hanya dapat berharap bahwa blog ini dapat memberikan manfaat bagi kita semua. Amin....

]]> http://iznyn.com/blog/2009/09/04/sepenggal-rasa-syukur-dari-penulis?feed=comment 2 http://iznyn.com/blog/2009/09/03/iznyn-com-now-in-stable-version http://iznyn.com/blog/2009/09/03/iznyn-com-now-in-stable-version#comments Thu, 03 Sep 2009 07:00:00 +0000 Iznyn Blog http://iznyn.com/blog/2009/09/03/iznyn-com-now-in-stable-version Akhirnya setelah selama 3 bulan berjalan dalam versi uji coba, dengan bangga kami meresmikan iznyn.com untuk menjadi versi stable. Selama dalam versi uji coba, kami telah berusaha cukup keras untuk memperbaiki segala kekurangan yang dimiliki oleh desain terdahulu. Dan semua usaha tersebut tidak sia-sia dengan ditandai dengan diluncurkannya versi stable ini.
]]> Akhirnya setelah selama 3 bulan berjalan dalam versi uji coba, dengan bangga kami meresmikan iznyn.com untuk menjadi versi stable. Selama dalam versi uji coba, kami telah berusaha cukup keras untuk memperbaiki segala kekurangan yang dimiliki oleh desain terdahulu. Dan semua usaha tersebut tidak sia-sia dengan ditandai dengan diluncurkannya versi stable ini.

Perubahan yang paling kentara dari versi ini, adalah bahwa situs ini menggunakan theme yang benar-benar baru. Di dalam theme yang baru ini, kami menggunakan desain yang lebih bersih, terang namun tetap elegan. Dan dengan theme ini diharapkan dapat meningkatkan accesibility dari site dan semakin mempermudah user dalam menjelajahi content dari site ini.

Selain dari sisi penampilan, kami juga melakukan perubahan cukup signifikan pada bagian arsip artikel (http://iznyn.com/archive). Perbaikan yang kami lakukan pada bagian ini terutama untuk arsip berdasarkan category post, dimana sekarang lebih terstrukutur dari pada dahulu. Dengan sistem arsip yang kami miliki ini, anda dapat lebih mudah dalam mencari artikel-artikel yang kami miliki baik berdasarkan date, category, author, maupun tag.

Terakhir dengan peluncuran blog ini, kami hanya berharap bahwa blog ini dapat bermanfaat bagi kita semua terutama dalam menyajikan informasi tentang Web Design. Terima kasih ......

]]> http://iznyn.com/blog/2009/09/03/iznyn-com-now-in-stable-version?feed=comment 0