Tulisan Lain

Apa web browser yang Anda gunakan saat ini?

Jika jawaban Anda adalah IE, aduh maaf saja kalau blog saya terlihat jelek Karena memang IE adalah browser yang tidak sesuai standar W3C. Apa itu W3C? klik di sini saja yah… Jadi presentasi yang ditampilkan kadang-kadang tidak sesuai yang semestinya. Makannya ada suatu gerakan yang dipelopori oleh www.savethedevelopers.org/ dengan nama “Save the Developer” dengan cara meninggalkan jauh-jauh IE6.

Review Browser versi hanifali.info

Sebelumnya saya hanya akan mereview 4 browser yang paling menjadi prioritas saat ini secara singkat. Mulai dari sang jawara dunia (berdasarkan statistik) si Microsoft IE.

Yang saya kagum atas IE adalah ketika ia melakukan skak mat terhadap Netscape yang pernah jaya di era sebelumnya, selain itu tidak ada lagi yang dapat saya banggakan dari browser ini. Besar dan berkembang bersama Microsoft, tentunya membuatnya tak terkalahkan sampai sekarang, karena sudah menjadi suatu image bahwa browsernya windows adalah IE. Tetapi bagi internet-surfer sejati yang tidak asal buka ini itu, tentunya mereka tau kalau IE bukanlah pilihan tepat. Selain dari sisi presentasi web yang ditampilkan tidak sesuai standar (IE 6), dari sisi keamanannya juga IE paling rawan terhadap serangan hacker. Ini karena IE menggunakan fungsi-fungsi Active X yang mana melalui Active X ini memungkinkan seorang hacker untuk menyerang Sistem Operasi.

Browser kedua adalah Opera. Pernah menjadi browser tercepat di tahun 90-an, dan juga browser pertama yang menggunakan tabbed browsing. Di komputer saya terinstall Opera v 9.50 beta dengan interface yang lebih modern, tapi hanya sebatas browser untuk testing saja. Kecepatannya menampilkan sebuah halaman web memang tidak diragukan, tetapi yang saya tidak suka terhadap browser ini adalah saat mengeksekusi JavaScript. Saya berkali-kali membuka web dengan JavaScript kompleksitas tinggi dengan Opera tetapi hasilnya tidak sempurna , contohnya saja saya sering menggunakan jQuery JavaScript Library, atau yang serupa di dalam sebuah halaman web, tetapi ketika browser diminta melakukan animasi-animasi tertentu, Opera tidak terlalu bagus untuk melakukannya.

Yang ketiga adalah Apple Safari. Di komputer saya juga sudah terinstall Safari 3.1.2 for Windows yang sering saya gunakan untuk browsing juga. Yang saya suka dari browser ini adalah font rendering yang lebih mudah dibaca (silahkan saja bandingkan dengan browser lain ) dan adanya fitur Private Browsing (walaupun di firefox juga ada dengan tambahan add-on). Menurut teman-teman pengguna Mac, Safari-nya bisa berkali-kali lebih cepat dibanding browser lain, tetapi kehebatan itu tidak saya rasakan pada Safari saya , entah kenapa saya juga kurang tau, tetapi yang jelas browser ini lebih cepat dibanding IE. Nilai tambah lainnya adalah tampilan dan animasinya yang unik yang membuat kesan tersendiri pada browser ini (ya iya lah… Apple punya )

Terakhir adalah Mozilla Firefox. Eiitts… tapi jangan berfikir dulu saya akan merekomendasikan browser ini pada Anda, walaupun akhirnya saya nanti akan banyak menyebutkan kelebihannya dibanding browser lain . Sekarang saya menggunakan Firefox 3.0 dan Firefox 2.0 Portable. Sangat disayangkan Firefox versi 3 ini adalah browser yang rakus memory yang tidak seperti versi sebelumnya yang lebih ringan. Tetapi entah kenapa pada sistem operasi Linux, Firefox tidak se-rakus di Windows yang mengkonsumsi banyak memory (atau jangan-jangan itu hanya perasaan saya saja… ). Tapi walau bagaimanapun, ini menjadi browser kecintaan saya sekarang Bukan karena gambar icon-nya bagus lho… tapi memang Firefox ini mewakili dari semua kelebihan web browser yang ada saat ini.

Menggunakan engine Gecko yang sesuai standar W3C adalah yang paling utama, dan juga bisa menampilkan beberapa spesial CSS yang tidak bisa ditampilkan di browser lain. Contohnya silahkan saja amati sebuah button pada halaman Admin Wordpress Anda, jika Anda menggunakan Firefox atau Safari, button tersebut akan nampak lebih halus dengan keempat ujungnya yang agak tumpul (atau istilah kerennya rounded corner), padahal itu murni menggunakan CSS, bukan JavaScript. Satu hal lagi dimana Firefox menjadi browser yang paling direkomendasikan adalah dengan adanya addons.mozilla.org. Ribuan Add-ons dan theme yang dikembangkan oleh jutaan orang di dunia untuk Firefox siap untuk dipilah untuk kenyamanan berselancar Anda. Pada postingan saya sebelumnya, juga pernah menulis tentang bagaimana membuat browser ini lebih ‘wuzzz…’ dengan cara mengaktifkan pipelining-nya dan beberapa opsi tambahannya. Silahkan cek kembali artikel sebelumnya

Kenyataan yang Terjadi

Walaupun IE adalah browser yang paling tidak direkomendasikan, tetapi lihatlah statistik blog saya berikut. (diambil 18/09/08)

Bagaimana dengan blog Anda? Saya pikir juga tidak jauh beda dengan statistik di atas dari IE, Firefox, Opera kemudian disusul browser-browser lain seperti Safari, Avant, Flock, dll.

Akhirnya selesai juga dalam waktu satu minggu atau lebih tepatnya 5 hari lebih beberapa jam . Sebelumnya, lebih detail mengenai project ini bisa disimak DI SINI, atau di Halaman Project -> Desain -> WordPress Theme : Hijau Kelabu v0.9, dan bisa di-download di sana…

Tetapi ternyata theme ini masih belum kompatibel dengan WordPress 2.5.1, dan… alhasil theme ini belum bisa ditampilkan di blog ini yang baru saja upgrade ke WPMU 1.5 jadi harus utak-atik lagi deh…

Ternyata ribet juga buat theme yang bisa dinikmati semua pengguna browser. Apalagi setiap browser punya beberapa versi :capedeh: ditambah pengetahuan desain web yang masih terbatas, Huh! jadi maklum kalau ada beberapa tampilan yang tidak sama di beberapa browser, namanya juga project pertama

Ampun IE…

Bener-bener separuh waktunya hanya buat ngurusin bagaimana bisa tampil normal di IE seperti browser lainnya. Tampaknya saya jadi setuju apa yang dikatakan di blog-nya Undercover yang berjudul “IE Musuh Web Designer”. Tapi fenomena yang terjadi saat ini malah IE yang mendominasi Web Browser di dunia. Ya… mau tidak mau kita harus baik sama IE juga…

Dibawah adalah screenshotnya. Klik untuk memperbesar!

Pada posting yang lalu telah dituliskan aturan-aturan penulisan XHTML dan juga kesalahan yang sering terjadi, kemudian pada tulisan kali ini, kita akan belajar menjadi web designer professional dengan membuatnya sesuai aturan yang ada. Sebelumnya saya akan jelaskan fungsi Struktur dan Style pada XHTML dan CSS.

Struktur yang merupakan susunan code XHTML murni seharusnya tidak dicampur aduk dengan fungsi Style yang seharusnya di-handle seluruhnya oleh CSS. Atau dengan kata lain, XHTML hanya digunakan untuk menuliskan strukturnya, sedangkan untuk mendefinisikan style (presentasi) harus dituliskan pada CSS-nya. Ini nantinya akan berefek pada efektivitas dan efisiensi dalam pengkodean dalam mendesain sebuah web.

Kemudian mana saja yang termasuk struktur dan mana saja yang termasuk dalam fungsi style? Contoh struktur dan style seperti di bawah :

• XHTML tidak membolehkan penggunaan tag i, b, u (italic, bold, underline), semua itu harus dituliskan di dalam CSS sebagai “font-weight : bold; text-decoration : underline”, kalaupun jika dituliskan dalam XHTML gunakanlah tag <strong> atau <em>.
• Pendefinisian Heading merupakan Struktur, contoh : H1, H2, H3, dst, sedangkan untuk style-nya dituliskan dalam CSS ” H1 { font-size: 3em; color: #fff } “
• Tag table, tr, td, th adalah struktur, sedangkan untuk border, width, max-width, background-color dituliskan dalam CSS.
• Contoh lain struktur adalah form, input, img, div, dll. Sedangkan contoh fungsi style-nya yang lain adalah margin, padding, height, dll

Dengan begitu, maka pengkodean kita akan lebih efektif dan efisien, dan yang lebih penting lagi, desain yang kita buat dapat ditampilkan sempurna pada semua browser karena telah sesuai aturan yang ada. Ada website yang pada IE tampil sempurna, tapi tidak pada Firefox atau Opera, itu karena penulisan kode-nya tidak sesuai standar dan aturan yang ada.

(Terusan posting sebelumnya tentang Aturan penulisan XHTML) Ini adalah kesalahan-kesalahan yang sering terjadi ketika penulisan kode XHTML :

•  Lupa menuliskan DOCTYPE
  • Ini adalah kebiasaan umum yang dilakukan oleh seorang yang baru berpindah dari HTML ke XHTML. Ingat bahwa DOCTYPE adalah salah satu elemen wajib yang harus ada pada XHTML. Ada beberapa HTML editor yang otomatis menaruh kode DOCTYPE XHTML 1.0 Transitional pada saat membuat dokumen baru.
• Menyisipkan teks langsung pada elemen body
  • Text dalam XHTML tidak boleh disisipkan langsung pada body, contoh <body> Hello World </body>. Contoh benar : <body><p> Hello World </p></body>
•  Tidak menggunakan penutup elemen
  • Contoh yang sering dilupakan adalah tag <hr />, <br />, <img … />, <input … />
•  Elemen yang tidak tersarang
  • Contoh : <p> This is a <strong>Strong Text</p></strong>, yang seharusnya <p> This is a <strong>Strong Text</strong></p>
•  Parameter value yang ditak menggunakan quot
  • Contoh : <a href=http://localhost/wordpress/wp-admin target=_self title=Admin > Admin </a>, pada sebagian browser kode tersebut tidak terbaca alias error. Contoh benar : <a href=”http://localhost/wordpress/wp-admin” title=”Admin”> Admin </a>
•  Penulisan Special Character dan Ampersand yang tidak benar
  • Contoh special karakter adalah seperti ini : » , «, ©, ™ yang seharusnya ditulis dalam XHTML sebagai ‘&raquo, &laquo, &copy, &trade’ sedangkan penulisan ampersand yang sering lupa adalah dalam menulis alamat href, contoh : <a href=”index.php?show=about&lang=en”> yang seharusnya <a href=”index.php?show=about&amp;lang=en”>.

Kali ini saya akan menuliskan bagaimana mempercantik tampilan website dengan menambahkan efek mouseover pada link, tetapi kali ini murni dari CSS/Stylesheet, karena ada beberapa efek mouseover yang menggunakan JavaScript ataupun Adobe Flash. Untuk membuatnya, codenya sebagai berikut :

<style type="text/css">
a {
 color : #0000BB;
 font-weight : normal;
 text-decoration : none;
 background-color : #FFFFFF;
 }
a:hover {
 color : #FF0000;
 font-weight : normal;
 text-decoration : underline overline;
 background-color : #EEEEEE;
 }

</style>

Sisipkan kode tersebut diantara tag <head>…</head>, untuk keterangannya adalah sebagai berikut :

• a : untuk mendefinisikan style tag <a>…</a> pada HTML
• a:hover : style ketika link mendapat efek mouseover
• color : adalah warna tulisan, anda dapat mengubahnya sesuai selera, misal #000 (hitam), #1e90ff (biru muda), yellow (kuning)…
• font-weight : opsi yang tersedia antara lain normal, bold, lighter, bolder atau anda dapat isi dengan angka misal 200, 600, untuk mengatur ketebalan tulisan.
• text-decoration : opsi yang dapat anda pilih adalah underline (garis bawah), overline (garis atas), line-through (coret), atau none (untuk normal)
• background-color : biasanya jarang dipakai untuk website dengan background gambar, karena akan membuat tampilan kurang indah, tapi anda bisa juga pakai sesuai kebutuhan design anda.

Kemudian di antara tag <body>…</body>, anda tuliskan suatu link misal :

// contoh link
<a href=http://weblog.bedeng.com" title="Bukan Blog Biasa">
Kunjungi Bukan Blog Biasa... </a>

Selamat Mencoba… :D