Artikel tersebut memberikan inspirasi untuk membuat tampilan yang mirip rapi dengan sumber data dari kategori artikel di blog dengan Textpattern.

Saya hendak membuat tampilan nama kategori dengan jumlah artikel di dalam kategori tersebut, kemudian nama kategori tertaut ke dalam daftar artikel yang termasuk di dalamnya. Dari sini saya mendapatkan sumber data : nama kategori dan jumlah artikel di dalam kategori.

Saya hendak membuat tampilan nama kategori dengan jumlah artikel di dalam kategori tersebut, kemudian nama kategori tertaut ke dalam daftar artikel yang termasuk di dalamnya. Dari sini saya mendapatkan sumber data : nama kategori dan jumlah artikel di dalam kategori.

Mengambil data

Untuk menarik hasil dari sumber data tersebut , bisa dengan mempergunakan plugin smd_query. Plugin ini berfungsi untuk menjembatani pengguna untuk berbicara atau memanggil data dan fungsi spesifik di dalam database SQL.

Setelah memasang pulgin smd_query, gunakan kode ini untuk memanggil data dari SQL :

    <txp:smd_query query="SELECT DISTINCT
             txc.name, COUNT(*) AS count FROM txp_category AS txc,
             textpattern AS txp
             WHERE type='article'
             AND (txc.name = txp.category1 OR txc.name = txp.category2)
             GROUP BY txc.name"
             wraptag="ul" class="chartlist" break="li" />

Kode ini akan menelusuri table textpattern dengan filter jenis article dan kemudian memeriksa data di kolom Category1 dan Category2. Setelah itu semua data dimasukkan dalam satu grup dengan nama name .

Kemudian smd_query akan memeriksa grup ini, dan mengelompokkan nama – nama kategori dalam artikel menjadi satu nama kategori ( jika sama ). Dan diberi nama count.

Menampilkan data dengan ALA Accesible Data Visualization

Sebelumnya perlu di inga bahwa saya telah memiliki snippet bernama name dan count , yang dengan smd_query biasa ditampilkan dengan kode {nama_snippet}.

Untuk menampilkan daftar kategori, saya akan mempergunakan tag txp:category dengan tambahan atribut :

• link untuk membuat daftar kategori bisa ditautkan ke daftar artikel berdasarkan kategori tersebut,
• name untuk menampilkan kategori lebih spesifik dengan filter nama kategori,
• title untuk menampilkan nama kategori, dan
• section untuk memfilter kategori per bagian

Kemudian juga disesuaikan dengan format kode yang dipergunakan di ALA Accesible Data Visualization.

   <txp:category name='{name}' link='1' title='1' section='blog' />
   <span class="count">{count}</span>
    <span class="index" style="width: {count}%">({count}%)</span>

Terakhir , saya menyatukan kode sehingga menjadi seperti ini :

 
  <txp:smd_query query="SELECT DISTINCT
             txc.name, COUNT(*) AS count FROM txp_category AS txc,
             textpattern AS txp
             WHERE type='article'
             AND (txc.name = txp.category1 OR txc.name = txp.category2)
             GROUP BY txc.name"
             wraptag="ul" class="chartlist" break="li">
       <txp:category name='{name}' link='1' title='1' section='blog' />
       <span class="count">{count}</span>
       <span class="index" style="width: {count}%">({count}%)</span>
     </txp:smd_query>

Selesai, dan contoh tampilan bisa dilihat di WC.

Di ALA Accesible Data Visualization memberikan 3 tampilan berbeda yaitu sparkline, timeline, dan chartlist. Dalam tutorial ini memang baru menampilkan ala chartlist, tapi tentu saja untuk 2 yang lainnya juga bisa diimplementasikan dengan mudah. Selamat mencoba.

Related posts

• No related posts.

Tampilan Color Scheme Designer

Color Scheme Designer memberikan beberapa pilihan kombinasi warna yang bisa dipilih. Selanjutnya, kita bisa melihat preview dari warna yang telah kita pilih apabila diaplikasikan ke dalam layout yang ditampilkan dengan menggunakan modal window.

Kita bisa meng-export warna yang sudah dipilih ke dalam format html, xml, text, Photoshop dan GIMP palette.

Sangat menarik untuk dicoba!

Catatan: Pengguna IE6 tidak bisa menggunakan Color Scheme Designer. Hooray! :p

Related posts

• Tools Menarik dari westciv.com (0)
• 10 fonts gratis terbaik untuk @font-face (3)
• 10 Tips Membuat Design Shopping Cart (4)
• Menghitung Biaya Pembuatan Website dengan Web Development Project Estimator (6)
• Logo Gratis dari LogoInstant (0)

Contoh Shopping Cart

Webdesigner Depot memberikan 10 tips untuk membuat design shopping cart yang mudah digunakan.

Disertakan juga beberapa screenshot yang bisa memberikan inspirasi dalam membuat design shopping cart.

Related posts

• Color Scheme Designer (2)
• Logo Gratis dari LogoInstant (0)
• 10 Teknik Berguna Untuk Memperbaiki Design User Interface (2)
• 10 Majalah Lokal Online Gratis (1)
• Contoh Design Tabel Harga (0)

Screenshot Infothemes.com

Menurut sang pemiliknya, Masim “Vavai” Sugianto, infothemes didedikasikan sebagai website untuk melakukan bookmark alamat dan keterangan desain web yang bagus-bagus. Tak ada batasan tipenya. WordPress, Serendipity, Drupal, Joomla, Xoops, Blogger dan lain-lain.

Anda juga bisa mencoba untuk submit themes buatan anda untuk direview dan ditampilkan di infothemes.

Related posts

• No related posts.

Contoh logo yang tersedia

Logo yang anda download, bisa dijadikan sebagai inspirasi, digunakan di web anda atau project apapun.

Dengan kata lain, web bisa digunakan untuk project pribadi maupun komersial.

Logo dikelompokkan ke dalam kategori untuk memudahkan pencarian, meskipun belum banyak yang tersedia saat ini (18 icon).

Related posts

• Color Scheme Designer (2)
• 10 Tips Membuat Design Shopping Cart (4)
• 10 Teknik Berguna Untuk Memperbaiki Design User Interface (2)
• 10 Majalah Lokal Online Gratis (1)
• Contoh Design Tabel Harga (0)

10 teknik tersebut adalah:

1. Menggunakan padded block links
2. Typesetting buttons
3. Penggunaan kontras yang berbeda untuk mengatur fokus
4. Penggunaan warna untuk mengatur perhatian
5. Menggunakan white space untuk menunjukkan keterkaitan
6. Pengaturan jarak huruf
7. Auto-focus kursor di input field ketika website ditampilkan
8. Menggunakan custom input focus
9. Memanfaatkan hover control dengan CSS code
10. Menggunakan kata kerja untuk label di button dan link

Dari beberapa tips yang disebutkan, menurut saya — penggunaan kontras, pengaturan warna dan white space sebaiknya menjadi point utama ketika kita membuat sebuah design user interface.

Ada yang punya tambahan tips dalam pembuatan design user interface?

Related posts

• Color Scheme Designer (2)
• 10 Tips Membuat Design Shopping Cart (4)
• Logo Gratis dari LogoInstant (0)
• 10 Majalah Lokal Online Gratis (1)
• Contoh Design Tabel Harga (0)

Kadang website terlihat kurang menarik jika hanya menggunakan background berwarna putih dan mungkin akan terlihat lebih menarik jika menggunakan pattern.

Saking banyaknya pattern gratis yang tersedia di internet, memilih satu pattern dan kemudian mencoba pattern lain untuk mencari yang cocok bisa jadi menghabiskan waktu anda.

Berikut ini, beberapa website yang menyediakan pattern dengan koleksi sangat menarik, yang bisa digunakan dalam pembuatan website.

1. Squidfingers
   
   

   Squidfingers

2. AVA7 Patterns
   
   

   AVA7 Patterns

3. BgPatterns
   
   

   BgPatterns

4. DinPattern
   
   

   DinPattern

5. Kaliber 10000
   
   

   Kaliber 10000

Sementara web lainnya menyediakan pattern yang siap download, di BgPatterns kita bisa men-download pattern hasil karya pengunjung lainnya atau dengan membuat pattern sendiri dengan menggunakan elemen design yang sudah disediakan dan beberapa pengaturan lainnya — sangat menarik.

Untuk yang tertarik membuat pattern sendiri, bisa membaca artikel mengenai Geometric Background Patterns yang ditulis oleh salah satu designer favorit saya, Veerle Pieters.

Squidfingers sudah lama sekali jadi tempat favorit saya dengan pattern-pattern yang menarik.

Ada yang punya tempat favorit untuk men-download pattern?

Related posts

• No related posts.

Halloween Vector Icon Set

1. Smashing Pumpkins: Halloween Vector Icon Set

   14 Halloween icon dalam format .PNG hingga ukuran 512x512px, .AI CS3 dan .EPS.

   Icon bisa didownload secara gratis dan bisa dipergunakan untuk project pribadi maupun komersial, termasuk software, online service, templates dan themes.

2. 30+ Halloween Photoshop Brush Sets And Vector Images

   Sebuah koleksi yang berkaitan dengan Halloween seperti pumpkins, witches, creepy trees, bats, skulls dan lainnya.

Related posts

• Icon Gratis: WooFunction (1)
• Icon Gratis: Quartz Icon Pack (0)
• Icon Gratis: Splashy (0)
• Icon Gratis: WP WooThemes Ultimate Icon Set (3)
• 150+ Icon Gratis: Flavours dan Cute Tweeters (0)

Majalah-majalah tersebut membahas graphic design dan fotografi dengan content yang banyak berasal dari pembacanya.

Contoh majalah gratis: vektorika

Related posts

• Color Scheme Designer (2)
• 10 Tips Membuat Design Shopping Cart (4)
• Logo Gratis dari LogoInstant (0)
• 10 Teknik Berguna Untuk Memperbaiki Design User Interface (2)
• Contoh Design Tabel Harga (0)

Contoh daftar harga

Smashing Magazine membuat sekumpulan contoh design untuk tabel harga.

List berharga untuk web designer yang ingin membuat design dan menampilkan tabel harga di project webnya.

Bagaimana informasi ditampilkan dalam tabel harga secara baik sehingga bisa memudahkan pengguna mengambil pilihan yang tepat.

Related posts

• Color Scheme Designer (2)
• 10 Tips Membuat Design Shopping Cart (4)
• Logo Gratis dari LogoInstant (0)
• 10 Teknik Berguna Untuk Memperbaiki Design User Interface (2)
• 10 Majalah Lokal Online Gratis (1)