Di bawah sedikit info tentang theme dan setting baru blog ini:

• Nama theme: eDegree (Percuma)
• Nama blog: AzmanZainal’s Basecamp (Sebelumnya Dunia Dari Kaca Monitor)
• Plugin: FancyBox for WP (dulu pakai lightbox)
• Plugin: All SEO Pack
• Plugin: Articles (Tag post sebagai artikel)
• Plugin: Backup WordPress (Just in case)
• Plugin: Facebook Social Plugin
• Plugin: Cidy Image Header Rotater
• Plugin: DoFollow Trackback
• Plugin: Download Counter
• Plugin: cForms
• Plugin: AddThis
• Plugin: Random Text

Mereka laman web tidaklah suatu perkara yang mudah, namun ianya cepat dan seronok dipelajari.  Artikel ini saya tidak mengajar anda bagaimana untuk membuat website kerana saya anggap anda sudah biasa dengannya.

Untuk merancang sesebuah laman web, anda perlu mengambil kira banyak perkara sebelum merancang membina sesebuah laman web. Di bawah ini saya berikan beberapa tips penting dan bermanfaat untuk merancang sebuah laman web yang berkesan dan berkualiti tinggi.

Seseorang web designer mestilah fokus kepada keperluan pengguna pada setiap masa iaitu:-

1. Kebolehan pengunaan (usability);
2. Kebolehaksesan (accesibility);
3. Pengalaman pengguna (user-experience);
4. Interaksi pengguna (user interaction).

Link Navigation Yang Hidup, Jelas & Mudah

Kedudukan link navigation dalam website anda memainkan peranan besar dalam memberikan pengalaman pengguna (user experience) kepada pelawat anda. Struktur navigasi anda harus rapi, konsisten dan mudah diakses untuk pengalaman pengguna yang optimum tanpa gangguan atau kepayahan. Ianya harus cukup fleksibel untuk menempatkan setiap jumlah link tambahan yang diperlukan.

Design dan Layout Yang Bersih & Konsisten

Sebuah layout yang bersih yang menggunakan banyak ruang putih meningkatkan penampilan halaman dan tulisan. Elakkan dari membuat caca-merba, segala apa ada dimasukkan tanpa mengira konsep warna yang tertentu.  Gunakan font yang dah tersedia ada pada semua komputer untuk mengelakkan laman anda nampak tidak konsisten.

Menggunakan Kod CSS

Laman web menggunakan CSS menawarkan kepelbagaian penggunaan seperti float dan tableless design (tidak menggunakan table). Ia juga dapat mengurangkan saiz fail selain dari memberikan kawalan yang lebih besar paparan laman web anda.

Optimalkan Load Time

Pastikan laman web anda dapat dibuka dengan cepat dan dapat diaksses dari internet berkelajuan rendah kerana ia adalah faktor accessibility yang kita bincangkan di atas. Anda perlu:

1. Kurangkan saiz dan bilangan imej, flash dan script.
2. Optimalkan HTML & kod script: Pastikan bahawa laman anda tidak mempunyai tag script yang tidak diingini atau tidak dipakai.
3. Mengurangkan CSS dan kod JS – membuang semua ruang kosong, dan komen yang tak digunakan dari CSS dan file javascript.

Pastikan Saiz dan Resolusi Web Boleh Berubah

Kepesatan teknologi konfigurasi komputer & monitor terus meningkat dan pelbagai, tidak mungkin untuk anda menguji laman anda dalam semua saiz skrin dan platform pengguna. Pastikan kod dan desgin anda scalable (boleh ubah). Dengan ini pengguna tidak perlu menggunakan horizontal scroll bar apabila menggunakan saiz screen yang lebih kecil.

Buatlah Cross Browser Compatible

Pastikan anda periksa website anda pada pelbagai  browser terutama sekali pada yang paling kerap digunakan oleh pengguna seperti Google Chrome, Internet Explorer, Mozilla Firefox, Opera dan Safari.

Saya harap dengan tips yang ringkas ini dapat membantu anda membina web yang lebih efektif. Selamat berjaya!

Laman Desktopography suatu projek laman yang menyediakan koleksi desktop photo berunsurkan nature / alam semulajadi. Walaupun lebih kurang begitu definisi di webnya, dari penelitian saya koleksi mereka  lebih kepada gabungan nature dan HDR manipulation atau boleh dikatakan juga gabungan nature dan fantasi.

Susah untuk saya terangkan konsep desktop photo mereka, mari abaikan tentang konsep laman tersebut, desktop wallpaper yang mereka sediakan sangat menarik, unik dan hebat! Bagi pencinta alam, wallpaper sebegini mesti ada di desktop anda. Lawati web mereka di www.Desktopography.com

Khas untuk web designer, ForWebDesigners.com ini memuatkan sebanyak 647 links untuk dijadikan sumber kepada web designer yang merangkumi CSS, AJAX, HTML, Color dan lain-lain.

Bagi para designer, sumber-sumber begini adalah sangat penting untuk memastikan kerja-kerja mereka lebih produktif dan memudahkan mereka mencari sumber-sumber yang berkaitan mengenai web design.

Terima kasih kepada ForWebDesigners.com kerana sekarang saya tidak perlu mencari-cari ulangkali di google untuk mendapatkan sumber yang berkaitan. Menjimatkan masa saya dan sumber-sumbernya adalah amat berguna.

WordPress adalah software/script blogging open-source yang terbaik berbanding software blogging yang lain. Dengan penggunaan sistem widget dan plugin percuma yang ada lebih luaslah keupayaan presentation blog/web anda tambahan terdapat ribuan theme-theme secara percuma yang anda boleh dapati di internet ini.

Mungkin ada yang merasakan artikel ini sangat basic atau sudah lapuk memandangkan ramai yang sudah menggunakan WordPress di dunia internet ini namun tahukah anda masih ramai lagi yang tidak mengetahui kehebatan WordPress ini malah sama sekali tidak mengetahui kewujudannya (masih ramai yang bertanyakan kepada saya tentang ini).

Baiklah, sekiranya anda masih tertanya-tanya software manakah yang terbaik untuk anda memulakan blogging maka jawapan saya adalah WORDPRESS kerana:-

1. Pemasangan plugin/function yang mudah, cepat dan pelbagai – Dengan ramainya developer-developer secara freelancer dan sukarela membina plugin dan disebarkan secara percuma, pilihan pelbagai jenis plugin menjadi sangat banyak mengikut keperluan-keperluan umum seperti SEO, download manager, anti-spam, dan lain-lain
2. Pelbagai theme percuma yang ada mengikut kesesuaian anda - Terdapat pelbagai jenis theme secara percuma di website-website yang menyediakannya. Anda hanya perlu upload dan pilih theme-theme tersebut
3. Pembinaan theme yang mudah untuk web designer/developer – Penggunaan kod function yang mudah tidak perlu anda master dalam PHP dan MYSQL programming, theme dapat dihasilkan dengan mudah dan produktif. Terima kasih kepada WordPress, sekarang saya hanya perlu mengisikan kod-kod yang sudah tersedia dengan hanya menambah serba sedikit sahaja kod-kod yang berkaitan. Penggunaan kod yang konsisten ini dapat mengurangkan tekanan anda membina design yang anda mahukan.
4. Tidak memerlukan pengetahuan mendalam tentang web design / coding – Bagi blogger, anda hanya perlu isikan content anda, tiada perlu membuka html atau php file. Tiada lagi kod-kod dengan menggunakan interface WYSIWYG (What You See Is What You Get) tool. Masuk content dan publish adalah kerja yang sangat mudah sekali.
5. Installation / upgrade dan support yang mudah dan cepat – Anda tidak memerlukan banyak masa untuk install di web hosting anda, kurang dari 5 minit blog / web anda sudah tersedia online di internet. Upgrade dengan beberapa klik menggunakan plugin WordPress Automatic Upgrade.
6. Pengurusan web/blog dengan usaha yang minima – Dengan widget, sidebar anda lebih mudah diuruskan. Anda boleh add, edit dan delete post anda dengan simple.
7. Hack menjadi website dan CMS – Dengan mengubah sedikit kod-kod yang sedia ada, anda boleh mempunyai sebuah website yang commercial tanpa membuang waktu untuk membina kod-kod dari mula hingga habis. Content lebih senang dimasukkan dan diuruskan dengan WYSIWYG tool.
8. Mesra search engine – WordPress adalah mesra search engine kerana codingnya yang bersih, sistematik, fungsi arkib (archive), tajuk dinamik mengikut post dan lain-lain.
9. Komen / feedback user-friendly dan secure - Sesetengah software/script lain tidak menawarkan komen yang terbuka dan memerlukan pendaftaran. Dengan WordPress sesiapa sahaja boleh memberi komen dan feedback kepada anda pada masa yang sama security komen anda terjaga dengan detection dan penapisan spam yang pintar (plugin diperlukan seperti Akismet dan Spam Karma).
10. Sistem automatik draft - Sekiranya post anda hilang dan tidak sempat save semasa sedang menulis, WordPress mempunyai sistem menyelamatkan post draft anda. Sistem AJAX yang memudahkan dan pintar membuatkan dunia blogging anda semudah anda fikirkan.

Ada banyak sebab lagi, sesiapa yang ada nak tambah? Tambahlah di ruangan komen artikel ini. Beritahu saya mengapa anda menggunakan WordPress.

Tiba-tiba rasa syok letak gambar sendiri kat theme ni dengan menggunakan teknik lakaran pensel dalam Photoshop dan dihabiskan dengan Illustrator.

Lepas siap theme ini saya akan buatkan tutorial macamana nak jadikan gambar anda menjadi lukisan pensel seterusnya memasukkan warna-warna basic. Dah lama tak bagi tutorial so saya harap anda tunggulah beberapa minggu lagi disebabkan job yang tak habis-habis.

Apa lagi, jom subscribe RSS blog ini dan dapatkan update-update tutorial terkini.

Pernahkah anda teringin untuk mempunyai design WordPress theme anda sendiri? Pastinya pernahkan? Tapi tahukah anda, dengan mengetahui flow yang betul, anda dapat menyiapkan WP theme anda dengan lebih produktif.

Download File Checklist Membina WordPress Theme (1391 kali)

Di sini saya berikan proses-proses membina WordPress Theme supaya kerja-kerja anda lebih lancar, saya assume anda adalah designer yang mempunyai basic pengetahuan mengenai HTML dan CSS serta mengetahui coding-coding di dalam WordPress.

1. Design Theme Anda
Langkah pertama anda hanya perlu design theme anda dari scratch dan mulakannya dari melakarnya di atas kertas hingga siap design anda dengan menggunakan program yang anda biasa gunakan seperti Adobe Photoshop atau Illustrator.

2. Slicing dan Optimizing Image
Selepas design anda siap, proses seterusnya adalah slicing dengan menggunakan function slice pada Photoshop atau Illustrator. Optimize gambar-gambar tersebut dengan menggunakan Save For Web feature. Pastikan optimize bermula dari anda slice lagi dengan memeriksa bahagian mana image yang boleh dibuat repeat horizontal mahupun vertical.

3. Mulakan Coding XHTML dan CSS Bagi Layout dan Style
Sekarang anda boleh mula coding ke bentuk XHTML dan CSS. Pastikan coding anda bersih dari mula lagi
supaya kerja anda akan lebih lancar dikemudiannya. Antara yang anda perlu codekan pada layout adalah seperti:-

• Header
• Content/Post
• Sidebar
• Footer

Untuk styling pula adalah seperti berikut:-

• List/Sublist
• Blockquote dan Citation
• Unordered List
• Ordered List
• Links
• Image
• Headings
• Comments

Anda boleh download checklist membina wordpress theme untuk dijadikan reference setiap kali anda ingin membina theme anda sendiri.

Sekiranya anda tidak mahu fikir tentang coding, anda boleh mengupah pihak ketiga melakukannya utk anda.

4.Validate XHTML dan CSS Coding Anda
Pastikan anda berjaya validate kan coding anda supaya theme anda mempunyai coding-coding yang bersih dan tidak cacat. Untuk validate XHTML anda boleh lakukannya di W3C Markup Validation Service manakala untuk CSS pula boleh di buat di W3C CSS Validation Service.

5. Convert ke WordPress
Selesai anda menyiapkan layout anda di dalam XHTML dan CSS, sekarang anda boleh modify theme anda dengan memasukkan kod-kod WordPress ke dalamnya. Modify mana-mana kod yang patut supaya ianya kelihatan sepertimana yang anda inginkan.

6. Validate XHTML dan CSS Anda Semula
Lakukan sekali lagi seperti #4. Itulah ukuran kualiti theme code anda, cuba tetapkan standard seperti itu.

7. Publish / Siarkan / Gunakan
Bila sudah siap, terpulanglah kepada anda samada ada anda ingin siarkan secara percuma/berbayar atau anda sendiri yang menggunakannya.

Ada apa-apa yang saya tertinggal? Hantarkan komen mengenai post ini.

Dulu-dulu ada juga belajar melukis potret kat sekolah, tapi memang kurang berbakat, saya main tekap-tekap bolehlah. Apa-apa pun saya ingin mengucapkan terima kasih kepada bro wanwma kerana memberi peluang kepada wajah saya yang kurang macho menjadi peserta bertuah bulan ini, hehe.

Korang apa tunggu lagi? Jadilah peserta bertuah memenangi potret free dari wanwma.

Sebelum kita pergi lagi lanjut, biarlah saya menerangkan apakah definisi kedua-dua jenis image tersebut.

Imej Vector

Definisi Vector

Images defined by sets of straight lines, defined by the locations of the end points. At larger magnifications, curves may appear jagged. This condition is call aliasing. www.wrightcolorgraphics.com/v.htm

Definisi ini saya kutip dari www.wrightcolorgraphics.com/v.htm dan saya rasa definisi ini terlalu umum dan tidak dapat memberi penjelasan seperti yang saya mahukan. Jadi biarlah saya yang memberi penerangan kepada anda apakah image vector tersebut.

Vector adalah satu jenis image yang terbentuk daripada koleksi garisan dan lengkongan yang bersambung antara satu sama lain.

Kesemua garisan-garisan tersebut terhasil daripada pengiraan matematik dan memerlukan software grafik tertentu untuk menghasilkannya. Resolution vector image tidak terbatas kepada penggunaan pixel kerana ianya adalah dari hasil pengiraan matematik seperti yang saya terangkan.

Image vector ini tidak akan pecah sekiranya ia dibesarkan dan tidak pula mengalami kehilangan kualiti. Penggunaan vector image adalah sesuai bagi menghasilkan imej seperti:-

1. Logo
2. Animasi
3. Kartun
4. Clip art
5. Button
6. Dan lain-lain

Kebanyakkan designer menggunakan software grafik yang terkenal untuk menghasilkan vector image di antaranya:-

1. Adobe Illustrator
2. Corel Draw
3. AutoCAD
4. Macromedia/Adobe Flash
5. Macromedia FreeHand

Setiap software tersebut mempunyai keistimewaan berbeza bergantung kepada imej yang ingin dibuat. Seperti contoh untuk web design penggunaan Adobe Illustrator adalah popular dikalangan web grafik designer manakala penggunaan AutoCAD adalah popular dikalangan Arkitek dan Interior Designer.

Anda pasti pernah melihat imej-imej Flash yang mana apabila anda cuba untuk Zoom In kan dia kelihatan tidak langsung imej tersebut pecah. Itulah contoh imej vektor yang saya maksudkan. Antara file-file imej yang disavekan di dalam vector adalah .eps, .ai, dan .swf.

Imej Raster

Definisi Raster

A graphic image stored as a specific arrangement of screen dots, or pixels. Web graphics are bitmap images. A graphic which is defined by specifying the colors of dots or pixels which make up the picture. Common types of bitmap graphics are GIF, JPEG and TIFF. www.lehigh.edu/~kko2/wwd/glossary.html

Raster imej tertakluk kepada dot per inch atau dot per pixel. Ini bermakna sekiranya anda cuba untuk besarkan saiz imej tersebut maka petak-petak imej akan kelihatan dan kualiti juga berkurangan. Imej-imej raster adalah kebiasaan yang anda selalu lihat seperti Jpg, Gif, PNG, Bitmap dan lain-lain.

Imej-imej ini selalunya tidak bertujuan “direka wujudkan” tetapi selalunya digunakan untuk manipulasi menggunakan software-sofware seperti:-

1. Adobe Photoshop
2. Windows Paint
3. Corel Photo Paint
4. Macromedia Fireworks
5. Dan lain-lain

Tentu anda confuse mengapa sebelum ini saya mengatakan Adobe Illustrator popular digunakan oleh web designer sedangkan ianya adalah untuk me-reka imej vector dan bagaimana pula boleh dibuat imej bagi web?

Ya, jawapannya sudah tentu boleh kerana file-file imej vector tersebut kemudiannya akan diconvert menjadi raster dengan anda savekan filenya dalam bentuk jpg gif png dan lain-lain.

Setakat ini artikel ringkas saya mengenai vector dan raster. Sekiranya ia tidak mencukupi atau anda mempunyai soalan atau cadangan atau pembetulan, silalah kemukakan di ruangan komen artikel ini untuk dikongsi bersama.

Selepas seminggu sibuk menyiapkan order dari customer untuk khidmat design saya, semalam secara tiba-tiba saya diberikan ilham untuk membuat WordPress theme free. Saya mengambil masa selama 1 malam bersengkang mata untuk menyiapkannya layout design theme ini sebelum dimasukkan ke proses coding XHTML dan CSS.

Progress sekarang 60% dan saya jangkakan ianya akan siap dalam jangkamasa 1-2 minggu lagi untuk dilancarkan. Theme ini masih belum diberikan nama jadi dikesempatan ini, saya ingin memberi laluan kepada anda untuk mencadangkan nama theme ini.

Sila cadangkan nama theme di ruang komen post ini dan nantikan kemunculan nama theme yang anda berikan. Bangga tak?

Dikesempatan ini juga, saya ingin membuat pengumuman mengenai servis untuk design minisite (design layout sahaja-tiada content). Dibahagian page service saya tiada quotation untuk minisite mahupun portfolio saya.

Berikan saya ruang masa untuk update portfolio dan quotation minisite dalam masa terdekat ini. Harga untuk sebuah minisite adalah seperti berikut:-

• Pembayaran melalui Maybank2u: RM 250.00
• Pembayaran melalui Paypal: USD 90.00

Sila ke Service Page Azman untuk order.

p/s: Pemilihan nama theme cadangan anda adalah berdasarkan pertimbangan saya dari segi kesesuaian konsep dan temanya.