Kusaeni.com | Weblog Kus : The Kus Empire Strikes Back, a personal weblog of Kusaeni

28 Oktober 08

typeface.js

Typeface.js Akan menjadi alternatif lain ( yang menurut saya lebih sempurna ) untuk menggantikan sIFR.

Kelebihan utamanya adalah bisa merender font tanpa harus merubahnya dari teks ke gambar atau ke berkas flash.

Typeface.js itu open source , cross platform, & fleksibel. Selain itu disertakan pula aplikasi untuk mengkonversi font berjenis True Type ke format typeface.js.

Penggunaannya juga mudah, setelah selesai mengunduh , tinggal masukkan script javascript untuk memanggil fungsi typeface.js beserta font yang ingin dipakai. Kemudian untuk menentukan teks mana yang akan mempergunakan font tersebut, tinggal mempergunakan rule css font-family dengan nama font sesuai dengan yang ingin dipergunakan.

Mudah.

Baca juga Facelift solusi lain untuk image replacement

tags: , , ,

---

22 Oktober 08

TEXTPATTERN : Membuat halaman arsip

Q : Bagaimana cara membuat halaman arsip di Textpattern, tanpa mempergunakan plugin ?

A : Mudah, caranya adalah :

1. Buat sebuah form ( lewat menu Tata Letak / Presentation > Bentuk / Form ) baru dengan nama arsip_bulanan misalnya, dan isi dengan kode tag Textpattern berikut :

  
    <!-- show the year -->
    <txp:if_different>
    <h2><txp:posted format="%Y" /></h2>
    </txp:if_different>
    <!-- show the month -->
    <txp:if_different>
    <h3><txp:posted format="%B" /></h3>
    </txp:if_different>
    <!-- article title and link -->
    <txp:permlink><txp:title /></txp:permlink>
    <code><br />

2. Buat halaman ( HTML ) tampilan dimana nanti arsip akan dimunculkan. Kamu bisa membuat halaman baru atau cukup menyalin dari halaman yang sudah ada jika desainnya sama. Setelah itu beri nama halaman tersebut, misal halaman_arsip.

3. Gubah halaman_arsip , untuk menampilkan daftar arsip kamu bisa mempergunakan tag Textpattern sebagai berikut :

  
      <txp:article_custom limit=99999 form="arsip_bulanan" />

4. Kemudian buat sebuah section baru dan beri nama arsip1 . Setelah selesai, pada properti section uses page pilih nama halaman yang di khususkan untuk arsip, dalam contoh ini halaman_arsip. Untuk CSS silakan dipilih sesuai dengan CSS yang di pergunakan halaman tersebut. Untuk pilihan lainnya kasih centang saja ke Tidak / No.

5. Selesai, coba kunjungi halaman arsip baru kamu dengan URL http://domain.mu/nama section untuk arsip, dalam hal ini http://domain.mu/arsip . Selamat mencoba.

1 Jika kamu kasih nama arsip, maka halaman section ini bisa dipanggil dengan bentuk URL http://domain.mu/arsip .

tags: , ,

---

17 Oktober 08

Jika Nokia memiliki desain seperti ini...

Jika Nokia memiliki desain seperti ini, mungkin saya akan beralih dari Sony Ericsson fans boy ke Nokia. Desain ini dibuat oleh Mac Funamizu, kalau dilihat dari namanya jelas lah kalau si Funamizu ini salah seorang Apple fans boy. Dan kalau dilihat memang desainnya di buat mirip dengan desain iPod Nano.

Gambar diatas ini cuma mock up, dan belum tentu akan dipakai oleh Nokia untuk desain produk handphone nya. Tapi seandainya Nokia tidak mau mempergunakannya, saya berharap Sony Ericsson mau, walupun mereka juga memiliki handphone dengan bentuk yang mirip iPod di seri W350i

sumber :

1. Mac Funamizu : Just a sketch : mobile phone.

2. Yanko Desain : If Nokia’s Aeon And A Nano Had Sex….

tags: , , ,

---

9 September 08

Text Shadow di Opera 9

text shadow di Opera

Cakep banget, cuma Opera dan Safari ( Webkit ) yang baru bisa. Firefox ??? masih lama kayaknya.

tags: , ,

---

29 Agustus 08

Textpattern : Membuat tampilan tanggal ala tumblr

Kasus :

Kamu adalah seorang blogger yang aktif menulis atau memperbaharui isi dari blog mu, sehari bisa mengisi lebih dari 1, mungkin 2 , 3 , atau 5 tulisan , artikel, gambar dan lain – lain. Tapi kamu ingin menampilkan format tanggal hanya muncul di artikel terakhir di publikasikan, dan yang lainnya hanya tampil jamnya saja. OK lebih mudahnya, tampilan ala tumblr , seperti yang dicontohkan oleh tema tumblr Digital Wood yang ini.

Solusi :

Bisa mempergunakan tag dari Textpattern yaitu if_different. Dengan tag ini TxP akan memproses isi dari statemen pertama dan kemudian membandingkan dengan statemen kedua, dan akan mengeksekusinya jika ( isinya ) nilainya berbeda.

Kode yang dipergunakan adalah :

  
 <txp:if_different>
    <txp:posted format="%d %B %Y" />
 <txp:else />
    <txp:posted format="%H" /> : <txp:posted format="%M" />
 </txp:if_different>

Mudahkan?

tags: , , ,

---

6 Agustus 08

Facelift , solusi lain untuk image replacement

Kukatakan ya! , karena aku tidak begitu suka dengan flash untuk mengggantikan teks atau font di web. Secara beberapa browser yang dipergunakan banyak orang masih belum mendukung plugin flash dari adobe.

Jadi Facelift memang benar – benar solusi. Kukatakan ya lagi.

tags: , ,

---

7 Juli 08

Tampilan administrasi Textpattern

Akan semakin baik di versi selanjutnya, mungkin akan hadir di versi 4.0.7 atau di 4.1.

Textpattern akan mendukung pemakaian tema untuk tampilan administrasi situs. Perubahan lengkap bisa di lihat di Google Code.

Selain itu ada juga beberapa pemakai Txp yang membuat mock-up untuk tampilan administrasi, yang mungkin nantinya bisa dipergunakan. Salah satunya dari SimpleCandy .

Bagaimana dengan tema untuk tampilan situs ?

Saat ini tidak didukung, dan kemungkinan tidak juga didukung dalam waktu dekat. namun ada plugin juga untuk melakukan hal tersebut, walau tidak sebagus CMS lain. Setidaknya ada.

Sabar menunggu TxP 4.1

tags: , , ,

---

18 Juni 08

Desain Situs Firefox nendang

Aha ha ha ha tampilan situs Firefox untuk versi 3 nya benar – benar nendang :D

tags: , , ,

---

29 Mei 08

Tipo..

DebianArt is a place for high quality artwork and themes for the Debian Desktop.

DeviantArt is a place for artwork, photos, and another related to graphic design for all.

tags: ,

Komentar

---

7 Mei 08

DragonFly

Mainan baru dari Opera , memiliki fungsi yang sama dengan Firebug.

Pengguna Opera dapatkan segera, DragonFly.

tags: , , , ,

---

6 Mei 08

Ada yang kepengen nyoba aviary?

JIka jawaban kamu adalah ya, saya punya 5 4 undangan tersisa untuknya, jika berkenan silakan meminta lewat kolom komentar di bawah. Jika kesulitan untuk melakukannya bisa menghubungi saya lewat email .

tags: , , ,

Komentar [6]

---

1 April 08

960.gs

Ini alternatif lain untuk CSS Framework selain Blueprint . 960.gs diusung oleh Nathan Smith untuk mempermudah melakukan desain situs berdasarkan fenomena grid css.

Dilihat dari kekayaan pustaka CSS, 960.gs tidak selengkap Blueprint, dalam bundelnya 960.gs hanya menyertakan sebuah CSS dasar dengan nama 960.css dan CSS reset buatan Eric Meyer.

Namun 960.gs menyertakan beberapa berkas yang bisa dipergunakan untuk mempermudah pendesainan situs, yaitu berkas berisi tampilan lembar grids yang bisa di cetak, dan kemudian bisa dipergunakan untuk sket pembuatan desain. Ini luar biasa dan sangat membantu.

Beberapa templates yang bisa digubah juga tersedia diantaranya untuk Fireworks, Visio, OmniGraffe, serta Photoshop ( & Gimp ).

Kus akan pakai grids

Saya berencana untuk memakai 960.gs ini untuk pendesainan selanjutnya, 960.gs sangat menarik.

Sebelumnya saya sudah melakukan pendesainan untuk blog ini dengan mempergunakan grids CSS juga. Yang pertama mempergunkan Yahoo! UI Grids dan kemudian Blueprint.

Semuanya bagus, dan sekarang saya ingin memberikan kesempatan untuk 960.gs .

tags: , , ,

Komentar [4]

---

25 Maret 08

Kembali ke FireFox

Saya lama mempergunakan Epiphany sebagai aplikasi penjelajah internet utama. Bahkan sampai menyampingkan Iceweasel ( Firefox ).

Tapi untuk urusan web desain, Epiphany tidak lagi bisa diandalkan. Epyphany memang ditenagai oleh XUL Runner, mesin yang juga digunakan oleh Firefox, tapi soal penampilan CSS dan HTML , Epiphany masih kalah denagn Firefox.

Di batas paling awalpun, soal menampilkan besar ukuran jenis huruf Epiphany masih kebingungan, dan untuk orang yang mementingkan tipograpi seperti saya, hal ini sangat mengganggu.

Untuk perubahan desain Weblog Kus selanjutnya, terpaksa saya harus kembali mempergunakan Firefox. Dan harus bersiap diri dengan crash dan kejengkelan akan kelambatan sistem.

tags: , , , , ,

---

ZenHeron

Desktop 25 Mar 2008

Hardy Heron???

Bukan!!!, ini Zenwalk dengan tampilan wallpaper milik Hardy Heron.

Wallpaper diambil dari Hank.Ballew

tags: , , , , , ,

---

6 Maret 08

Linux Media Content Manager.

Era Linux identik dengan segala kesusahan dan kerumitan dengan tampilan penuh huruf putih diatas papan hitam sudah hampir berlalu, sekarang jamannya desktop nice eye catching . Dulu , perkara tampilan keindahan serta kemudahan dalam menangani berkas multimedia memang menjadi kelebihan Windows dan Mac OS, mereka memiliki segudang cara dan inovasi untuk memudahkan penggunanya untuk mengorganisir koleksi berkas multimedia , entah itu musik, gambar , atau film sekalipun.

Sementara itu Linux masih berkutat dengan cara kuno, semua harus diketik, kalaupun ada aplikasi sejenis, tapi datang dengan tampilan yang kurang sedap dipandang dibandingkan kompatriotnya.

Sekarang berbeda. Di Linux pun sudah ada pelbagai aplikasi untuk mngolah berkas multimedia dengan tampilan yang tidak kalah dengan aplikasi di Windows maupun Mac, beberapa diantaranya:

  1. My Media System
    2. Adalah aplikasi untuk mengorganisir berkas multimedia, kelebihan dari aplikasi ini adalah kemampuan untuk menampilkan dan mengunduh informasi multimedia ( film atau clip ) dari TV ( asal tersambung ke PC ). Juga kemampuan untuk mengorganisir berkas – berkas permainan ( game ), entah itu permainan yang khusus untuk Linux, atau permainan yang dijalankan lewat emulator seperti snes, epsx

  2. Entertainer
    3. Baru di luncurkan dan langsung mendapatkan banyak aplous di pelbagai tempat, Entertainer adalah solusi media center yang dikhususkan untuk Gnome dan xFce. Dibangun dengan python, dan membutuhkan banyak dependencies yang harus dipenuhi, namun hasil akhirnya tidak akan membuat kecewa, Entertainer adalah salah satu yang terbaik.

  3. Elisa
    4. Elisa adalah aplikasi cross platform yang di desain untuk memanajemen koleksi multimedia kamu, dengan tampilan indah dan mudah, Elisa memberikan pelbagai fitur diantaranya kemudahan untuk menampilkan koleksi gambar , musik , dan video serta kemudahan untuk memount ipod, kamera digital, dan pemutar musik portable lainnya.

    Elisa sangat lengkap dari segi fitur dan cukup indah dari tampilan, cuma Elisa datang dengan paket yang cukup besar dan dibangun dengan python. Pada proses pemasangannya dibutuhkan kejelian dalam mengerti depedencies apa saja yang harus di penuhi. Cukup rumit tapi untuk Elisa apa sih yang nggak dilakukan??

  4. Sofa
    5. Aplikasi ini lebih cocok sebenarnya jika digunakan sebagai Music Manager, tapi dia juga memiliki kemampuan untuk mengorganisir berkas multimedia seperti aplikasi sebelumnya.

    Tapi dibandingkan yang lainnya, Sofa tidak memiliki banyak fitur, seperti menampilkan gambar, podcast , dan perekam TV. Namun menurut pengembangnya, fitur tersebut akan hadir di rilis selanjutnya. Patut ditunggu.

Saya senang dengan kenyataan bahwa Linux tidak lagi menakutkan, dan meiliki banyak pilihan aplikasi yang indah dan menarik. Linux sudah tidak lagi kalah dengan OS lainnya. Linux sudah tidak lagi identik dengan command line.

Itu menyenangkan.

tags: , ,

---

5 Maret 08

We’ve decided that IE8 will...

“We’ve decided that IE8 will, by default, interpret web content in the most standards compliant way it can. This decision is a change from what we’ve posted previously.” - Dean Hachamovitch General Manager IE

tags: , , ,

---

22 Pebruari 08

Kus dengan efek Lomo

Kus dengan efek Lomo, di buat dengan GIMP + Fx Foundry.

tags: ,

---

11 Pebruari 08

Gimp Plugins Registry

Gudang plugins gimp, punya berton – ton stok plugin yang menarik, tidak kalah dengan Photoshop ataupun Pixelmator.

Kunjungi Gimp Plugins Registry

tags: , ,

---

6 Pebruari 08

Akatsuki Dance

Akatsuki Dance oleh Ugly-Baka-Girl, ( via Deviant Art )

Dari atas kiri : Zetsu – Itachi Uchina – Kisame – Deidara – Tobi

Dari Bawah kiri : Pain – Konan – Master Kusaeni Sasori – Hidan – Kakuzu

Let,s Dance!

tags: ,

---

1 Pebruari 08

Masuk ke WarnaDunia

“WarnaDunia,
Apa itu WarnaDunia?
Tahukah kamu apa itu WarnaDunia?
WarnaDunia adalah blog Thomas Arie Setiawan”

Tapi itu dulu. Cuma untuk Old Skool.

Sekarang WarnaDunia sudah bukan lagi menjadi tempat ngeblog dari si Thomas. Entah apa yang dipikirkannya, sekarang dia menunggangi Orange Scale, padahal dulu Warna Dunia sudah identik dengan Thomas, kalau orang ngomong tentang WarnaDunia ya pasti nyangkut ke Thomas, begitu pula sebaliknya.

Sedangkan sekarang, brand terbaru Thomas tidak begitu kental lagi, ketika orang bicara tentang Orange mereka akan berpikir tentang Jus, Sebuah perusahaan Web Hosting luar , sebuah perusahaan Web Desain luar, dan tentu Timnas Belanda. Bukan Thomas lagi.

Tapi biarlah, bukan urusanku.

Yang menjadi urusanku saat ini adalah desain situs ini, masuk ke WarnaDunia. Oh ya lupa mengatakan kalau WarnaDunia seudah berubah menjadi situs galeri desain dari situs umum atau blog khususnya dari blogger yang berasal dari Indonesia ( gak peduli tinggal dimana, mau di Yogya, Jakarta, Hard Rock Cafe, Bali, Berlin, atau Kutub Utara ).

Padahal desainnya jelek, gak bagus dan gak sesuai standar W3C dan yang lainnya. Aku tidak tahu apa yang dipikirkan Thomas & co girlfriend. Ya tapi gak masalah lagi. Syukur bisa masuk, soalnya gak semua situs bisa masuk.

Itunya aku dihargai, walau desain situs ini bukan murni ide ku, Ini sangat terinspirasi dengan desain Garret Murray dari Maniacal Rage. Cuma porting ke Textpattern template tags.

Terakhir, ku ucapkan banyak terima kasih kepada Thomas & co girlfriend , ini sangat berarti bagiku. Terima Kasih, Matur Nuwun.

Oh ya, latar belakang dan sedikit CSS sudah kurubah nih, skrinsyut ku di punya kalian belum terupdate tuh!.

tags: , ,

---

Colors Of Auntumn

– Oleh Haani , sepertinya bagus jika dijadikan background.

tags: ,

---

17 Desember 07

Pemanasan * { padding: 0px; margin:0px; }

Fuuih, akhir – akhir ini aku banyak membaca tulisan blog yang membahas tentang “pembubaran konsorsium CSS Work Group“ yang di ajukan oleh Andy Clarke, seorang desainer web dari Inggris yang sangat populer.

Opera melawan Microsoft

Hal ini dipicu oleh tuntutan Tim Opera terhadap monopoli Microsoft dalam dunia perambah internet. Bisa dipahami kalau sebagian besar pengguna Internet di seluruh dunia mempergunakan perambah IE sebagai alatnya. Dan melihat itu, Microsoft sendiri membuat sebuah standar pribadi untuk urusan perenderan tampilan dan fungsi dari sebuah halaman situs.

Pengguna IE sangat besar karena IE disertakan dalam paket pemasangan sistem Operasi Windows milik Microsoft. Sehingga hal itu membuat Microsoft seolah – olah memiliki kekuatan untuk menentukan pasar. Hal ini yang membuat Microsoft dengan mudah dan congkak untuk tidak mengikuti standar dari Open Web Standar.

H

tags: , ,

Komentar [4]

---

1 Desember 07

I've Redesigned : _erised

I’ve redesigned. Oh wait, or was it realigning?

If you’re not reading this on my website, go on and check out the new look!. There not many changes applied, you can still find what was where from the previous layout.


Title, tagline and main navigation menu are realigned, just repositioned to fit the new idea.

So what not new then?

Homepage still have big colony of text, but now using 2 coloumn with sidebar on right. Sidebar ( like my pre previous templates ) still contains my super-simple-opossiting profil information. And recents comment .

The subtitle headings are now positioned on the left and I have sidenotes too now, yay!

Yeah Code is Pottery not Poetry

Powered by Textpattern – Code is Pottery off course.

And .. Other than that, I forgot, seriously. Sorry, it’s the weekend excitement guys! Happy weekend everyone!

tags: ,

Komentar [14]

---

15 November 07

Styling CPreview di Textpattern

Di Textpattern , Comment Preview tidak hanya penting untuk menangkal serangan Spam , namun juga memberikan peringatan kepada pengunjung yang ikut serta berinteraksi lewat kolom komentar tentang isi komentar mereka. Apakah sudah benar atau apakah ada yang perlu di perbaiki.

Ini Esensial.

Textpattern, sejak versi 4.0.2 sudah memberikan fasilitas untuk membuat tampilan CPreview bisa dibedakan dengan penampilan komantar jika sudah terkirim. Bedakan! dengan membuatnya berbeda!, karena tidak semua komentatormu mengerti beda antara pratampil komentar dan komentar terkirim.

Di beberapa desain situs yang mempergunakan TxP, saya menemukan bahwa si pembuat desain tidak begitu peduli dengan hal ini. Hal yang sangat disayangkan mengingat hal tersebut bisa menyebabkan missunderstanding kepada komentator artikel. Ketika mereka mengklik tombol preview atau kilasan jika memperguanakan backend Indonesia, maka kebanyakan dari mereka akan mengira bahwa komentar sudah terkirim. Ini salah. Akibatnya komentar tidak muncul.

Jadi kostumisasi CPreview sekarang juga

Ini solusi dari TxP.

Gunakan fungsi yang sudah ditawarkan TxP, oh maksudku selami tag TxP dan daya gunakan kehebatannya.

<txp:if_comments_preview>
<div id="cpreview" style="background-color:#FF0"><b>Aaa Ooo. ini cuma preview komentarmu, periksa dulu apakah sudah benar , jika sudah klik submit untuk mengirimkan</b>
<txp:comments_preview form="my_preview" />
<txp:comments_form />
</div>
</txp:if_comments_preview>

Kode diatas bisa diperguanakan untuk menampilkan CPreview, Normalnya bisa ditaruh di dalam form comment_display bisa di atas comment_form atau comment list. Terserah sesuka desainernya. Bisa juga di perindah dengan CSS, tinggal ubah selector id nya.

Kelebihannya lagi , pengguna bisa mempergunakan conditional tag untuk memberikan opsi memunculkan seluruh komentar yang sudah terekam pada saat CPreview tampil atau cuma menampilkan CPreview saja.

upd : 15 November 2007 @ 18:20 Waktu Kus.

Untuk bentuk template dari tampilan CPreview pun juga bisa dikostumisasi. Sebagai pengandaian, untuk menampilkan daftar komentar sebuah situs TxP mempergunakan form daftar_komentar.

Sedangkan untuk menampilkan CPreview mempergunakan form my_preview. Yang isi dari form tersebut bisa dibuat berbeda dengan form daftar_komentar.

Kemudian untuk pemakaian conditional tag, bisa di lihat pada contoh di bawah :

<txp:if_comments_preview>
 <div id="cpreview">
    <div class="highlight"><p>Pratampil dari komentar yang kamu tuliskan. Periksa dulu apakah sudah benar, jika sudah klik <b>kirim</b> untuk memasukkan.</p></div>
    <txp:comments_preview />
 </div>
<txp:else />
 <txp:comments break="" />
</txp:if_comments_preview>

Jika diterjemahkan dalam bahasa manusia maka artinya kurang lebihnya;


Jika ini adalah CPreview, maka tampilkan pesan dan tampilan tag txp:comments_preview.

Jika bukan maka tampilkan daftar komentar txp:comments

Untuk penampilan komentar dengan tag txp:comments , kupergunakan atribut break=”“ , kenapa ? . Coba baca artikel Walktrough : Textpattern Mysteri , mungkin berguna.

Untuk menampilkan keseluruhan komentar saat CPreview aktif, gunakan kode paling atas.

tags: , ,

Komentar [4]

---

8 November 07

Vector Magic

Sekarang ini banyak sekali aplikasi layanan untuk melakukan penggubahan gambar atau photo secara online, diantaranya Picnik, pixer.us, Snipshot, dan atau SplashUp yang memiliki tampilan sangat mirip dengan Photoshop.

Dan kemudian datang juga aplikasi untuk melakukan penggubahan dalam format gambar vector. Namanya Vector Magic.

Vector Magic memberikan layanan, pengonversian format gambar dari pelbagai format standar populer seperti jpg, png, bitmap, dll ke dalam format vector. Sekaligus merubah isi gambar tersebut agar tampil seperti jika dibuat dengan aplikasi pengolah gambar vector semisal Inkscape.

Karena gambar aslinya kecil sekali ( dari gravatar ) , jadi hasil peng vector an nya, menjadi agak kurang jelas walau sudah dalam format high quality sekalipun. Namun begitu layanan ini memang benar – benar menarik, dan bermanfaat sekali.

tags: ,

Komentar [5]

---

4 November 07

Percobaan gimp 2.4 : Efek teks di Apple Leopard

Veerle, membuat sebuah artikel tutorial menarik tentang “ cara membuat inset text bergaya Mac OS X Leopard “. Tapi dia membuatnya melalui Photoshop. Disini aku mempergunakan GIMP, jadi ?...

Tapi untunglah ada Gimparooo!, yang membuat tutorial yang sama tapi dengan mempergunakan Gimp. Yahooo, au akan mencoba mengikuti tutorialnya, dan akan kutulis disini dengan bahasaku, tentu saja dengan sedikit improvisasi.

Inset Text dengan GIMP

Ok pertama, buka lembar kerja baru, dan buat sebuah kotak ( rectangle ) dengan ukuran terserah , kemudian duplikasikan layer -nya. Beri nama misalkan gradasi.

Di layer gradasi aktif. Klik tombol gradient di jendela toolbox GIMP. Tombolnya bergambar kotak dengan gradasi warna hitam ke abu – abu. Atur dengan pengaturan mode yang dipergunakan normal, 0pacity 100% , dan jenis gradasi Foreground to Background.

Kemudian tentukan warna Foreground adalah #949494, dan untuk Background dengan warna #d1d1d1. Sapukan gradasi dari bawah-ke-atas.

Untuk membuat bayangan di bawah, jika mengikuti tips dari Veerle akan agak sulit untuk pemula, jadi gunakan saja drop shadow langsung. Maka, pastikan kotak masih terseleksi. Tuju menu Filter >> Light & Shadows >> Drop Shadow. Isi dengan offset x = 0, dan offset y = 2 . Warna masih tetap hitam kelam atau #000000, dan 0pacity 20%.

Saatnya memberi teks. Klik tombol teks ( gambar huruf A ) di toolbox, Untuk jenis huruf ( font ) kugunakan Myriad Pro, dengan ukuran 24px. Jika di komputer kamu tidak ada jenis huruf Myriad, bisa gunakan Lucida Grande atau Trebuchet MS ( Trebuchet Mac ) terserah kamu.

Warna huruf nya ##383838. Kemudian ketik isi teks sesuai dengan keinginan. Jika penempatan teks tidak sesuai dengan kotak, cukup menggesernya dengan move tool ( bergambar panah 4 arah ).

Jika sudah selesai. Teks perlu di beri efek drop shadow untuk membuatnya mirip dengan teks di Lepoard. Pastikan teks sudah terseleksi, kemudian pilih Filter >> Light & Shadows >> Drop Shadow.

Isi pilihan dengan offset x = 2, dan offset y = 0 . Warna putih ( #ffffff ), dan 0pacity 50%. Lakukan dan selesai. Untuk bagian ini, bisa di improvisasi sesuai keinginan, sehingga tampilan tentu sesuai keinginan, walau kadang belum tentu sesuai dengan Leopard. Siapa peduli ?.

Oh iyah, hasil dari olahan ini bisa dilihat disamping diatas.

tags: , ,

Komentar [10]

---

1 November 07

Article Glyph lewat jQuery

AListApart memiliki hal unik dalam penampilan artikel nya. Di setiap akhir bagian dari artikelnya ada sebuah gambar kecil ( logo ALA ). Unik.

Hal ini mengingatkanku dengan desain pada koran dan majalah – majalah, biasanya di setiap akhir artikel selalu muncul gambar semacam itu. Itu namanya Article Glyph.

Di desain sebelumnya, yang begaya koran ( dengan penampilan artikel dalam kolom – kolom ), aku sempat hendak mempergunakan juga article glyph sebagai pelengkap. Dan kebetulan sekali Textpattern memiliki sebuah plugin yang berguna untuk menampilkan article glyph.

Namun sayangnya format dari glyph nya adalah berupa ampersand encoded character, atau bisa dibilang hanya untuk karakter ASCII saja.

Walau ada kemungkinan untuk menghack plugin tersebut agar bisa menampilkan gambar, namun fungsi plugin mengharuskan untuk mengganti tag body dengan tag bawaan plugin. Agak riskan mengingat ada beberapa plugin yang membutuhkan hal serupa. Selain itu plugin ini akan otomatis mengset ke none jika tidak bisa menemukan karakter yang di maksud, alias plugin tidak akan menampilkan karakter.

Selebihnya masalah browser yang kadang tidak kompatibel dengan ASCII.

jQuery datang masalah hilang

Setelah berpikir, akhirnya datang ide untuk menampilkan article glyph lewat pemanfaatan DOM Javascript.

Aku kemudian berbincang – bincang dengan Anima tentang kemungkinan untuk menampilkan article glyph lewat JS. Dan dia mengatakan :

...secara logic bisa, mungkin dengan append…

Yep, benar. Append bisa melakukannya. Dan framework yang kupilih adalah jQuery, karena kebetulan jQuery sudah di bundel dalam TxP, sehingga tidak perlu lagi mengunduhnya.

Logikanya, untuk menampilkan article glyph adalah lewat manipulasi DOM. Saya memerintahkan kepada jQuery untuk memeriksa artikel yang diletakkan dalam sebuah div dan kemudian mencari paragraph terakhir, dan menyisipkan gambar di akhir paragraph ( sebelum tag </p> ) untuk article glyph.

Jadi jika di terjemahkan dalam bahasa JS jQuery kira – kira akan menjadi seperti ini:

 $(document).ready(function() {
   // membuat fungsi bernama artikel glyph
      function artikel_glyph(); 
   // sekarang isi fungsi artikel glyph
       function article_glyph() { 
   // mencari paragraph terakhir, hanya paragraph di dalam div ber ID content, DOM diletakkan di akhir paragraph.
        var paragraph_terakhir = $("#content p:last") .find("p").end();
   // Append ( sisipkan ) gambar di paragraph terakhir
         paragraph_terakhir.append( "<img src='http://kusaeni.com/css/img/kus.gif' class='tengah' />" );
                                                        };

Pertama aku harus mencari paragrap terakhir, yang merupakan paragrap artikel blog. Untuk menyeleksi hanya paragrap dari artikel blog saja yang akan dicari, maka ruang pencarian dipersempit dalam area div#content.

div#content adalah area tempat artikel blog berada. ( Sesuaikan dengan keadaan ). 

 <div id="content">
   <p>Lorem ipsum....</p>
  </div>

Kemudian seleksi paragrap dalam div#content , dipilih yang paling akhir karena disana tempat menaruh glyph. Disini digunakan kode p:last & .find("p") & .end() .

Terakhir append, untuk memasukkan “sesuatu” kedalam setiap elemen yang sesuai ( dalam hal ini paragrap terakhir ). Syntaxnya dalam jQuery adalah : $("p").append("<b>Hello</b>"); , diartikan masukkan kata <b>Hello</b> ke dalam akhir p .

Untuk Glyph, aku ingin memasukkan gambar , jadi kuisi dengan tag img. Selesai. Dan sebagai contoh, kamu bisa melihat ada gambar kecil bertuliskan kus di bagian bawah di akhir paragrap.

Penutup

Cara ini berjalan baik, sudah kucoba di Firefox, Safari, dan Opera. Berjalan baik, namun untuk penampilan di situs ini, ada sedikit masalah di Opera. Glyph ditampilkan memang di akhir paragrap, tapi bukan paragrap artikel, tapi benar – benar di akhir paragrap halaman.

Sebelumnya di test bed semua berjalan lancar, mungkin perlu sedikit perubahan di div nya. Sekarang dinikmati saja, setelah ini baru dikerjakan.

tags: , ,

Komentar [14]

---

20 Oktober 07

Inspirasi desain

Menjelajah situs pengepul desain situs indah, akhirnya saya menemukan beberapa situs dengan desain yang menarik untuk dijadikan inspirasi. Ada situs dengan penampilan teks yang jika dilihat seolah – oleh seperti penerapan efek inner shadow di Photoshop. Kemudian situs dengan tampilan informasi cuaca di bagian kop nya, dan contoh penerapan style switcher yang juga ditentukan secara otomatis dengan Javascript.

OK, mari dilihat contoh tampilannya.

Skema Warna

Dari Kindred Spirits, tampilan h1 , terlihat seperti penerapan efek inner shadow hasil olahan aplikasi photo editing. Awalnya saya berpikir ini adalah sebuah Image Replacement, tapi ternyata saya salah, itu asli teks!.

Semakin menarik, setelah meneliti beberapa lama sekaligus mengintip CSS nya, saya menemukan kalau tidak ada penerapan CSS yang khusus. Semua rumus yang dipergunakan adalah rumus dasar. Dan saya ambil kesimpulan bahwa si pembuat desain berhasil memanipulasi mata saya dengan menempatkan skema warna yang sesuai, sehingga benar – benar menipu.

Sempurna.

Dulu saya pernah belajar membuat gambar teks dengan efek inner shadow dengan mempergunakan Gimp, namun selalu gagal. Sampai seseorang yang sulit dikenali dari nama samarannya Pria.Purnama, kemudian menunjukkan hasil pengolahan gambar serupa dengan mempergunakan Photoshop, dan menunjukkan caranya. Dengan itu akhirnya sayabisa mengaplikasikannya di Gimp.

Namun sekarang, sepertinya saya harus meniru trik di Kindred Spirit, penerapan skema warna.

Informasi Cuaca

LJWorld situs berita kota Lawrence – Kansas ini menampilkan informasi cuaca di bagian kopnya. Dengan penambahan dekorasi ikon ilustrasi untuk sesuai jenis cuaca, tampilan informasi ini terlihat lebih manis.

Ada juga sebenarnya desainer Indonesia yang mengaplikasikan informasi cuaca di kop situsnya. Namun sayang akhir – akhir ini tampilan tersebut tidak muncul, entah karena apa. Mungkin saja alat pengecek suacanya lagi bermasalah? .

Style Switcher

Otomatis mengubah tampilan berdasarkan waktu, jika siang tampilan cerah dengan latar belakang warna putih, kalau malam jadi gelap dengan latar belakang hitam. Kereen.

Marius juga memberikan pilihan untuk mengubah tampilan secara manual, untuk pengunjung yang tidak ada waktu untuk menunggu waktu. Tinggal klik dan tampilan akan berubah sesuai keinginan, malam bisa dijadikan siang, siang bisa dijadikan malam.

Inspirasi banget..

Jadi saya memutuskan untuk mempelajarinya, walau belum tentu mengaplikasikannya pada desain “kali ini” ( v 9999999999 ++ ). Saat ini saya sedang senang dengan desain gaya koran. Sederhana, bermain dengan kolom. Dan yang lebih penting cepat untuk di load, walau hasil tes YSlow masih belum memberikan hasil yang menggembirakan.

Inspirasi desain diatas, ada beberapa yang sepertinya kurang cocok untuk diaplikasikan di desain “kali ini”. Sebagai contoh style switcher siang – malam, sampai sekarang saya belum menemukan desain situs koran + majalah yang berlatar belakang hitam. Saya pikir nanti hasilnya bakal aneh, jadi tentu tidak akan di ambil.

Namun ilmu diatas tetap akan dipelajari, siapa tahu kelak ada “panggilan jiwa” untuk redesain lagi. Versi Kus Siang-Malam 24 Jam Non-Stop.

Sepertinya akan menarik.

tags: ,

---

27 September 07

Pixelmator

Aplikasi photo and design editor baru yang berjalan di Mac OsX ini terlihat mirip dengan GIMP. Jangan - jangan cuma portingan dari GIMP ke OsX? . Kunjungi situs Pixelmator.

tags: ,

---

14 September 07

Inspiratif

ManicalRage & co, weblog , podcast dari Garret Murray benar - benar memiliki pola desain yang inspiratif. Yang paling kusuka adalah desain background nya yang sederhana namun terlihat glamour dan indah. Sempat berpikir bagaimana cara membuatnya dengan mempergunakan GIMP. LIhat kumpulan desain dari ManiacalRage di Flickr.

tags: ,

---

13 September 07

Aside di Textpattern

Awalnya Kottke. yang menulari virus aside kepada para blogger, kemudian bergerak dan meyebar dengan cepat.

Apa sih Aside itu?

Aside artinya di samping, maksudnya Aside adalah artikel pendek yang diletakkan di samping artikel utama ( sidebar ), namun seringkali diartikan artikel pendek di bagian utama. Inline. Kalau masih belum paham bisa merujuk ke tulisan Matt Mullenweg tentang Aside. Dah yahhh Matt memakai Wordpress.

Textpattern?

Khusus untuk Textpattern, Aside bisa di buat dengan mudah, ada sedikitnya 2 pemodelan aside yang bisa dibuat, yaitu Aside yang di tempatkan di sidebar, dan Aside yang ditempatkan / disisipkan dianatara artikel utama ( long article ). Dengan cara pembuatan sebagai berikut :

Aside disisipkan di antara Artikel Utama

Mudah, sangat mudah. Yang dibutuhkan untuk hal ini adalah sebuah form berjenis article yang berisi template tags dari tampilan Aside kita nantinya.

OK, katakan kita ingin membuat tampilan Aside kira – kira seperti ; judul , isi tulisan dalam satu baris, kemudian ditambah dengan penampil jumlah komentar.

Maka yang harus dilakukan adalah. Dari tab Presentation > Form ,buat sebuah form baru , katakanlah dengan nama aside.

Isi dengan template tags seperti ini :


<div class="aside">
<p><span class="title-aside"><txp:permlink><txp:title /></txp:permlink></span>
&nbsp;|&nbsp;<txp:body />&nbsp;
<span class="quiet">(<txp:permlink><txp:comments_count /></txp:permlink>)</span></p>
</div>

Kemudian simpan dengan pengaturan jenis bentuk ( form ) berjenis article. Kenapa harus article, karena hanya form berjenis article yang bisa dipanggil dengan tag <txp:article />.

Sebagai catatan , ada tag p di sana, tag tersebut dipergunakan untuk menampilkan Aside sebaris dengan judulnya. Nah di bagian ini ada yang penting untuk di ingat. TxP mempergunakan Textile sebagai tools pengformatan teks ke HTML. Dan setiap isi artikel akan di awali dengan tag p, sehingga tidak cocok untuk dipergunakan di Aside, karena penempatan teks akan berada di bawah judul.

Jadi di halaman penulisan artikel, gunakan mode pengformatan tulisan tanpa Textile. Atau gunakan kode pengnonaktifan Textile dengan syntax : 

notextile. isi dari artikel bisa dengan HTML juga

Ditulis di dalam areateks di halaman tulis artikel.

Kemudian trik untuk menampilkan Aside agar tampil beda dengan forms default article yang dipergunakan adalah; sebelum artikel disimpan, gunakan fungsi Override forms.

Pada pilihan yang ada, pilih form Aside. Ini berarti bahwa artikel yang ditulis akan mempergunakan form Aside, bukan form default. Sehingga penampilannya bisa berbeda.

Contoh nyata : Weblog Kus

UPD

Dan tunggu ada tambahannya. Jika dirasa ingin menampilkan lay out aside secara full post ( single post ) , biasanya di halaman komentar, maka yang harus dilakukan adalah menambahkan tag conditional <txp:if_individual_article> yang akan menyaring apakah artikel sedang di tampilkan dalam daftar artikel ( halaman depan ) atau dalam single post mode ( halaman komentar ).

Jadi kodenya diperbaharui , sebagai berikut :

Kode diatas bisa di improvisasi / kustomisasi sesuai keinginan kamu.

Selesai.

Aside di Sidebar

Untuk penempatan di Sidebar, caranya berbeda cukup jauh. Disini kita harus membuat sebuah section dan form baru.

Buat sebuah section , beri nama misal asidebar, kemudian cek semua pilihan pengaturan ke tidak kecuali sindikasi jika ingin punya RSS untuk aside tersebut.

Kemudian buat sebuah form baru sebagai wadah / template tags dari desain aside nya. Bisa di improvisasi sedemikian rupa.

Untuk menampilkan aside di sidebar bisa dengan mempergunakan tag <txp:article-custom />, lengkapnya :

<div class="sidebar">
 <h4>Notebook</h4>
         <txp:article_custom section="asidebar" limit="10" form="aside" />
</div>

Dari tag di atas bisa diartikan, tampilkan artikel dengan aturan hanya artikel yang ditulis di section asidebar, dengan batasan jumlah yang ditampilkan adalah 10, dan mempergunakan wadah desain aside.

Selesai. Eh jangan lupa untuk menampilkan aside di sidebar ini, pastikan artikel ditulis hanya untuk section asidebar.

Contoh nyata : Kriwil Personal Note

Penutup

Bisa dibilang tidak hanya MT dan Wp yang bisa menampilkan Aside, TxP pun juga. Kalau istilahnya dalam FAQ TxP adalah Can I use Textpattern to build a web site like...

Textpattern bisa di kostumisasi sesuai selera dengan mempergunakan template tags dan plugins. Dan semua open source yang mana kita bisa memodifikasi kode sesuai kebutuhan. Jadi singkatnya jawabannya adalah YES!!!! BISA!!, dengan Textpattern kamu bisa membangun sebuah atau lebih situs yang “bagus” seperti yang kamu inginkan.

Sebagai contoh kamu bisa mengunjungi :