Pintasan ke kandungan utama

Arkib untuk July, 2007

Transcending CSS - Siri 2

Pertama sekali, minta maaf sebab semalam tak dapat post entri ni, terlalu banyak perkara yang terjadi semalam..Dan sekiranya aku terus menulis, mungkin kualitinya menghampiri tahap jahanam..Jadi aku tangguhkan dulu..Ok, berbalik kepada topik, kali ni kita akan lihat pula prinsip kedua dalam Transcending CSS iaitu, Gunakan Kesemua CSS Selector yang ada!

Antara jenis-jenis CSS selector:

Attribute selector - Sangat power, digunakan untuk memberikan style kepada elemen-elemen tertentu berdasarkan ‘attribute’nya. Mari aku berikan contoh supaya tidak pening. =)

img[alt]
{
border:1px solid #ccc;
}

Contoh di atas aku gunakan untuk blog ni, ianya akan efektif apabila gambar yang aku letakkan disertakan sekali dengan teks ALT. Kalau tak letak ALT, maka takda la border tu. Seperti yang berlaku pada entri-entri penulis infomalaya yang lain..hehe..Sori la lupa nak bagitau..Tapi, sebab apa aku guna? Sebabnya aku tak mahu smiley di dalam entri atau komen mempunyai border, smiley juga image bukan? :)

Manakala lain-lain selector termasuklah :

  • Child selector
  • Adjacent sibling selector
  • Pseudo-classes
  • Pseudo-elements

Untuk pembacaan lanjut, boleh rujuk di laman web W3C.

Nota : IE6 tidak dapat memahami attribute selector, IE7 aku tak tahu, sebab aku tak pasang..heh..Jadi benda ni berkait rapat dengan Siri 1 sebelum ni..

Selepas ini, berkenaan CSS3 pula..

Cara menguruskan kewangan secara berkesan!

Saudara IbnuImam ada menceritakan bagaimana menguruskan sumber kewangan dengan bijak!

Siri ke2 Transcending CSS akan menyusul selepas solat Jumaat! =)

Transcending CSS - Siri 1

TranscendingCSS

Assalamualaikum, maaf sebab lambat siapkan entri ni..heh..Ok! Jom kita mulakan! Artikel yang aku buat ini adalah berdasarkan buku Transcending CSS yang aku dah baca.

Apa itu Transcending CSS?

Adalah satu pendekatan ketika merekabentuk laman web dengan menggunakan CSS. Tapi pendekatan ini akan menggunakan sepenuhnya CSS2.1 dan mungkin juga CSS3 demi mewujudkan laman web yang bukan saja cantik, tetapi maju dari segi accessbility, dan dapat memberikan pengalaman yang menyeronokkan kepada pengguna.

Prinsip 1 - Tidak semua pelayar akan melihat design yang sama.

Prinsip 1 ini adalah berlawanan dengan pendekatan Progressive Enhancement. Biar aku terangkan serba sikit tentang Progressive Enhancement, iaitu ianya menggunakan browser yang less-capable sebagai benchmark, jadi mereka akan buat design dan layout yang sama untuk semua browser….

Jadi prinsip 1 ni pula, design dan layout akan di’render’ sepenuhnya oleh semua browser(Termasuk IE6), gunakan kesemua elemen dalam CSS2.1. TETAPI rupa design di dalam IE6 dan browser yang bagus(Firefox,Opera dan IE7) akan berbeza. Ianya macam motivasi, dan bunyinya seperti ini, “Kalau hang nak tengok laman web ni dalam rupa yang optimum, hang kena la guna FireFox, IE6 tu dah lama sangat..”, hehe..Prinsip ini menggunakan browser yang maju sebagai benchmark. Sila lihat contoh di bawah :

hitam_putih

warna_warni

Nota : Gambar pertama (Hitam putih) akan dilihat oleh pengguna IE6, manakala gambar kedua(Berwarna) akan dilihat oleh pengguna yang menggunakan browser yang maju seperti IE7, FireFox atau Opera. Untuk melihat sendiri, sila ke StuffAndNonsense.Co.Uk.

Jadi, ketika ingin merekabentuk laman web, sekiranya ingin menggunakan pendekatan ini, semuanya bergantung kepada kita sendiri, berapa banyak design yang ingin dikurangkan kepada pengguna IE6..Dalam siri yang akan datang, kita akan lihat bagaimana pendekatan ini direalisasikan.. ^__^

Ada sebarang pertanyaan? =)

Sedikit kemaskini!

MyBlogLog

Akhirnya, komuniti MyBlogLog InfoMalaya telah pun cukup seratus orang(Walaupun blog orang lain lebih banyak). Gembira betul aku. Insan yang ke-100 itu ialah saudara Dendang. Dan aku ingin mengucapkan ribuan terima kasih kepada semua insan yang telah menyertai komuniti InfoMalaya. Terima kasih daun keladi ^__^. Dan untuk meraikan peristiwa yang bersejarah ini, aku akan membuat entri bersiri mengenai Prinsip dalam Transcending CSS. Ada 7 prinsip semuanya, dan setiap satu akan aku huraikan mulai esok. Jadi minggu ini, entri-entri dari aku akan berkisar tentang pembangunan web sahaja. Penulis lain bolehlah membuat entri yang bercorak info sekiranya mahu. =)

Dan untuk entri bersiri yang akan diterbitkan esok, diharap kau, kau dan kau dapat memberikan komen, dan kritik sekiranya ada perkara yang ingin dibincangkan. Aku memerlukan perkara-perkara itu semua. Tunggu esok tau! ^__^

Inspirasi! Di mana kau?!

Inspirasi

Bila bercakap mengenai inspirasi, mungkin ramai atau pun semua dah tahu. Inspirasi atau ilham ini merupakan elemen terpenting ketika diperlukan. Sama ada ketika membuat design, menulis entri, membuat susun atur perabot rumah hatta ketika ingin menyusun ayat ketika ingin mengurat si anak gadis..hehe..

Namun, apa yang ingin disentuh oleh aku untuk entri ini ialah, inspirasi untuk membuat design atau layout laman web. Dan sekiranya kau bukan designer, jangan bimbang, entri aku kali ini agak menarik dan sesuai dibaca oleh sesiapa sahaja. Aku berani jamin!

Tahu mengapa designer dibayar dengan gaji yang mahal? Dan mengapa karier ini dianggap profesional? Sebabnya tak lain tak bukan, bukan mudah mencipta atau merekabentuk sesuatu yang baru dan cantik. Kau pun tahu bukan? Tak percaya? Cuba buka Photoshop dan buat satu design, dan berikan kepada kepada rakan-rakan kau untuk dinilai. Sekiranya mereka mengatakan cantik atau menarik, mungkin kau berbakat menjadi seorang designer atau pun kau berdarah seni, hehe..Kalau sebaliknya, maaf, mungkin kau boleh berlatih dan mencuba lagi, dan sentiasa mencari ilham, mana tahu kau juga berbakat!

Di mana kan ku cari inspirasi?

Kaedah 1

Rajin-rajinkan diri melawat laman web Galeri CSS, di situ, aku jamin kau akan terbeliak biji mata melihat betapa banyaknya laman web yang cantik dan sesuai dijadikan inspirasi. Tapi awas! Jangan cuba menjadi peniru, jangan cuba meniru bulat-bulat atau petak-petak design orang lain. Itu kerja jahat namanya, itu tidak profesional. Mengambil konsep mungkin tiada masalah, dan jadilah seorang kreatif dan inovatif.

Kaedah 2

Tahu buku skrap? Iaitu buku atau helaian kertas yang dipenuhi dengan gambar-gambar atau tulisan yang dipotong dari majalah, buku atau pun suratkhabar. Apa motifnya? Percayalah, kau akan jumpa insipirasi kau selepas melalui proses menyusun dan melekat benda-benda tersebut. Di situlah kau akan lihat bagaimana kuatnya padanan dan susunan elemen yang kau dah buat tadi. Nak jadi lebih kreatif? Kerat lebih banyak gambar dari warna-warna yang berbeza atau pun sama tona untuk melihat kesan yang lebih mengghairahkan. Haha.. =) Aku pun ada satu. =) Tapi aku masih lagi baru dan belajar.

Buku Scrap

Kaedah 3

Baca majalah? Suratkhabar? flyers? Itu semua boleh dijadikan bahan untuk mencari inspirasi. Abaikan sebentar isi kandungannya, tetapi lihatlah pada bagaimana susunaturnya, bagaimana warna dimainkan pada mukasurat tersebut, dan lihat juga bagaimana gambar diletakkan bersebelahan teks. Semua itu penting, lepas ini, lihat semula majalah yang kau selalu baca, selak dan kau akan lihat apa yang aku sebutkan tadi. =) Dan lebih molek kalau benda-benda ni diletakkan dalam buku skrap seperti dalam kaedah 2.

Kaedah 4

Kalau kau berada di tepi tingkap, cuba pindahkan pandangan kau ke luar tingkap sebentar. Lihatlah dunia di sekeliling kau. Lihatlah struktur bangunan, pokok-pokok, pasu bunga, bumbung rumah hatta kereta kancil sekalipun. Lihat dan renungkan, adakah itu yang kau cari? Aku tak tahu, inspirasi bergantung kepada individu itu sendiri. Aku pernah mendapat inspirasi dari sebuah apartmen yang dilihat dari dalam Tren STAR. Aku terpegun kerana warna cat apartmen itulah yang aku cari-cari selama ini. Dan itulah warna yang aku gunakan untuk blog ini..Dan alangkah beruntungnya orang yang mempunyai kamera, senang untuk menangkap gambar di mana-mana sahaja. =)

Kaedah 5(Final Resort)

Kalau kau masih lagi tak mendapat inspirasi, aku rasa baik kau TIDUR saja. Dan sebelum tidur, berdolah supaya Allah memberikan apa yang kau mahu di dalam mimpi. Merapu? Tidak sama sekali. Renung-renungkanlah… ^__^

Sekiranya kau membaca sehingga habis, tahniah aku ucapkan kerana entri kali ini agak panjang..Bersama kita memeriahkan pembangunan laman web di Malaysia! Yeah!

Em versus Pixel!

emvspixel.jpg

Ok, kali ni jom kita bincang pasal pembangunan web pula. =) Sebelum tu, biar aku terangkan serba sedikit mengenai em dan px supaya kau tidak mengelabah ( Untuk yang tak tahu sahaja ).

Em - Merupakan nilai untuk font yang digunakan dalam percetakan. Tapi ianya juga digunakan di dalam web. Ada yang mengatakan 1em=10px, tetapi ada juga yang menyatakan yang nilai em itu bergantung pada nilai yang kita tetapkan pada tag body. (Sila abaikan ini sekiranya berasa pening-pening)

Pixel atau px - Merupakan nilai yang digunakan di dalam web. Sebagai contoh untuk menetapkan nilai untuk saiz font, saiz border, margin, padding dan sebagainya.

Persoalannya di sini, mengapa EM dikatakan lebih baik berbanding PX?

Satu kelebihan em ialah ianya scalable, bermaksud, kita boleh besarkan dan kecilkan nilainya di dalam pelayar(Internet Explorer, FireFox dan sebagainya). Kalau nak lihat kesannya, sila tekan butang Ctrl bersama roda Scroll di mouse. Kalau kita pusingkan scroll ke bawah, saiz font akan membesar, dan kalau kita pusing ke atas, font akan jadi kecil. Tapi apa yang tak kena? Layout blog ni jadi huru hara kan? Sebab aku cuma gunakan nilai em untuk font sahaja, tapi tidak kepada bahagian lain. Itulah yang masalahnya.. =)

Jadi bagaimana kalau aku gunakan em untuk kesemua bahagian dalam web? Apa kesannya? Aku dah siapkan kerja rumah, boleh la tengok kat sini. Dan jangan lupa besarkan dan kecilkan, dan tengok bagaimana layout itu berkerja dengan jayanya..

Ok, jadi apa kaitan benda ni dengan pembangunan web?

Cuba fikirkan, berapa ramai di antara kita yang gemar melihat tulisan kecil di kebanyakan laman web. Sakit mata bukan? Bukankah elok kalau kita boleh besarkan tulisan itu tanpa merosakkan layout web itu sendiri..Itulah yang aku maksudkan, dengan menggunakan em, kita boleh merekabentuk laman web yang accessible dan mesra pengguna, dan juga tidak rosak sekiranya ‘dikerjakan‘ oleh pembaca..hehe..

Kalau ada yang kurang faham tentang penulisan aku ni, jangan segan-segan untuk bertanya. Aku pun ingin berbincang mengenai perkara ni, sebab benda ni masih ada kelemahan sekiranya ingin digunakan sepenuhnya.. ^__^

Tutorial dan Plugin untuk WordPress

WordPress

Walaupun InfoMalaya kini sedang menuju ke arah ExpressionEngine, aku tetap menyukai WordPress, hehe..Smashing Magazine kini telah mengeluarkan entri yang agak komprehensif mengenai pengumpulan tutorial dan plugins untuk WordPress. Dari apa yang aku telah baca(Walaupun aku tak daya nak tengok semua plugin dan tutorial tu), bolehlah aku simpulkan, kau MEMANG wajib baca sekiranya menggunakan WordPress. Memang berbaloi!

Halaman 2 daripada 2«12