23 Desember 2007

Simple Product Gallery untuk di Blog

Busana Model Mix 03
Busana By: Zulfa Collection @ Riristore Web Store


Menjual sebuah produk dengan menggunakan Blog sekarang ini sudah menjadi 'Trend' baru di dunia internet, karena selain relatif lebih mudah dalam hal pembuatannya kita tidak perlu mengeluarkan biaya untuk membuat Blog tersebut alias 'gratis' dibandingkan harus membuat sebuah Web Store yang akan membutuhkan biaya yang tidak sedikit, belum lagi masalah waktu pembuatan dan customize sebuah Web Store yang tidak akan seperti layaknya di 'sulap' bila menggunakan Blog barang kita sudah dapat dengan cepat ditampilkan dan siap untuk ditawarkan.

Uniknya menjual produk dengan menggunakan blog seperti ini adalah pembeli bisa lebih 'familiar' dengan si pemilik 'toko' di blog yang biasanya mencantumkan kata 'Pemilik' lengkap dengan alamat dan kontak person-nya, bahkan dapat berkomunikasi langsung melalui 'shoutbox' yang di pasang di blog tersebut ataupun dengan status YM yang berwana 'kuning' yang siap di 'Add' bila dibutuhkan, tentu ini bisa dimanfaatkan oleh calon pembeli untuk menanyakan barang yang akan dibeli dengan harapan bisa mendapat 'diskon' dari si Pemilik langsung mungkin hehehe...

Kondisi ini kan tidak beda dengan bila kita belanja di toko offline yang dilayani oleh si Pemilik langsung akan berbeda dengan dilayani oleh si penjaga toko yang belum lagi kalau si 'mbak'-nya dengan bete melayani kita untuk berbelanja :)

Tapi memang sampai saat ini saya belum menemukan sebuah produk terkenal seperti Nike, Nokia, Levi's, Etienne Aigner dll yang sejenis menjual produk2-nya menggunakan blog, biasanya blog digunakan untuk 'product support' ataupun untuk keperluan lainya.

Di postingan ini saya ingin memberi sedikit trik bagi yang menjual produk2-nya menggukanan sebuah blog, yaitu Membuat sebuah Gallery Product yang simple untuk di Blog dengan menggunakan Javascript.

Selain akan menghemat tempat, Gallery ini juga tidak membutuhkan scroll yang panjang kebawah untuk melihat product yang kita tampilkan di blog, dan dari 'Thumbsnail' gallery ini akan menampilkan gambar detail product tersebut tanpa harus me-'refresh' halaman blog, dengan demikian si calon pembeli akan lebih leluasa melihat2 product yang kita tawarkan.

Berikut langkah2 pembuatan simple Gallery Product dengan menggunakan Javascript tersebut:

Langkah-1

Masukkan bagian Kontrol Panel blog anda kemuadian masuk ke halaman
Template | Elemen Halaman

Pada bagian footer template anda masukkan script javascript dibawah ini, dengan cara click Tambahkan sebuah Elemen Halaman | HTML/Javascript

<script type="text/javascript">
//-->

// Javascrip By: http://ipulanwar.blogspot.com
// Function Name: Change Image Display

function changeImg(id,iTitle,iScr,iWidth,iHeight){
var ie4=document.all
var ns6=document.getElementById
if (ie4||ns6)
var imageView=document.getElementById? document.getElementById(id): document.all.id
var imageTitle=document.getElementById? document.getElementById(id+"Title"): document.all.id+imgTitle

if (ie4||ns6){
imageView.innerHTML='<img vspace="0" border="0" hspace="0" width="'+iWidth+'" src="'+iScr+'" height="'+iHeight+'">'
imageTitle.innerHTML=iTitle
}
else if (document.layers){
document.id.document.write('<img vspace="0" border="0" hspace="0" width="'+iWidth+'" src="'+iScr+'" height="'+iHeight+'">')
document.id+Title.document.write(iTitle)

document.id.document.id+Title.document.close()
}
else
alert('You need NS 4+ or IE 4+ to view the images!')
}

//-->
</script>

Penjelasan Umum Script Javascript diatas adalah:
Dibuatnya sebuah fungsi program javascript untuk mengganti isi (image, text) sebuah elemen halaman HTML dengan 'id' yang kita tentukan dengan isi (image, text) yang baru.

Dengan aturan penggantian (syntax) yang akan dimasukkan sebagai perintah link dari sebuah image ataupun text, Berikut contoh membuat link yang mengganti image di area 'display' dengan image yang baru:

syntax:
<a href="javascript:changeImg(id,iTitle,iScr,iWidth,iHeight)"><img src="image.jpg" /></a>

id : Area yang akan diganti
iTitle : Judul image
iScr : URL image
iWidth : Lebar image
iHeight : Tinggi image

Contoh lengkap-nya sbb:

<a href="javascript:changeImg('display','Busana Model Mix 03','http://4.bp.blogspot.com/busana-1.jpg','300','375')"><img style="cursor: pointer; width: 60px; height: 75px;" src="http://4.bp.blogspot.com/busana-1.jpg" border="0" /></a>

Langkah-2

Membuat Gallery pada postingan baru anda, dengan langkah awal adalah membuat sebuah area display untuk image anda.

Upload image baru seperti biasa yang anda lakukan dengan pilihan posisi image layout 'kosong', dari editor mode 'HTML' blogger akan mendefinisikan image anda sbb:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/_g4tuUmfcaro/R27obq3_UKI/AAAAAAAAAYQ/YVln_dQMbSo/s1600-h/busana-1.jpg"><img style="cursor: pointer;" src="http://2.bp.blogspot.com/_g4tuUmfcaro/R27obq3_UKI/AAAAAAAAAYQ/YVln_dQMbSo/s200/busana-1.jpg" alt="" id="BLOGGER_PHOTO_ID_5147306986194292898" border="0" /></a>

Kemudian hapus text yang berwarna merah pada HTML diatas untuk menghilangkan link dan atribut yang tidak kita inginkan dari image tersebut.

Selanjutnya adalah menentukan lebar dan tinggi image yang diinginkan untuk display image tersebut dan menentukan 'id' area 'display' dengan tag div, lihat text berwarna biru HTML dibawah ini untuk perubahannya:

<div id="display" align="center"><img style="width: 300px; height: 375px;" src="http://2.bp.blogspot.com/_g4tuUmfcaro/R27obq3_UKI/AAAAAAAAAYQ/YVln_dQMbSo/s200/busana-1.jpg" border="0" /></div>

Langkah-3

Membuat Area 'Title' untuk setiap image display, dengan menggunakan tag div (tidak perlu di enter bila tidak ingin jarak antara image display dan title terlalu jauh), dan berikut contoh Title untuk image display pertama anda:

<div id="displayTitle" align="center">Busana Model Mix 03</div>

Langkah-4

Membuat Area atribut dari semua gallery anda seperti spesifikasi barang atau yang lainnya yang tidak akan berubah dari gallery ini, contoh yang saya masukkan adalah koleksi barang tersebut sbb:

<div align="center">Busana By: Zulfa Collection @ <a href="http://riristore.com/" target="_blank">Riristore Web Store</a></div>

Langkah-5

Membuat sebuah 'Thumbsnail' gallery untuk navigasi image display anda yang bila di click akan mengganti image yang ada di area display.

Enter untuk memberi jarak antara text diatasnya dengan 'Thumbsnail' gallery ini, dan beri tag div supaya image anda terlihat rapih. Untuk image pertama anda bisa copy HTML image yang ada di area display kemudian rubah ukuran yang lebih kecil, lihat text dibawah yang berwarna biru:

<div align="center"><img style="cursor: pointer;width: 60px; height: 75px;" src="http://2.bp.blogspot.com/_g4tuUmfcaro/R27obq3_UKI/AAAAAAAAAYQ/YVln_dQMbSo/s200/busana-1.jpg" border="0" /></div>

Kemudian untuk image selanjutnya upload image berikutnya atau dengan cara sama seperti Langkah-2 yang di hapus atribut link dan yang tidak perlu, berikut contoh 'Thumbsnail' gallery dengan 5 image:

<div align="center"><img style="width: 60px; height: 75px;" src="http://2.bp.blogspot.com/_g4tuUmfcaro/R27obq3_UKI/AAAAAAAAAYQ/YVln_dQMbSo/s200/busana-1.jpg" border="0" /> <img style="cursor: pointer; width: 60px; height: 75px;" src="http://2.bp.blogspot.com/_g4tuUmfcaro/R23qG63_UGI/AAAAAAAAAXg/RMeuYMW71f0/s200/busana-2.jpg" border="0" /> <img style="cursor: pointer; width: 60px; height: 75px;" src="http://4.bp.blogspot.com/_g4tuUmfcaro/R23uKa3_UHI/AAAAAAAAAXo/UsHXYPRwY8k/s200/busana-3.jpg" border="0" /> <img style="cursor: pointer; width: 60px; height: 75px;" src="http://1.bp.blogspot.com/_g4tuUmfcaro/R23ulq3_UII/AAAAAAAAAXw/M5HvO93qoBY/s200/busana-4.jpg" border="0" /> <img style="cursor: pointer; width: 60px; height: 75px;" src="http://2.bp.blogspot.com/_g4tuUmfcaro/R23ut63_UJI/AAAAAAAAAX4/zV4kMDTSERc/s200/busana-5.jpg" border="0" /></div>

Langkah-6

Langkah terakhir adalah dengan memberi perintah link untuk masing2 image yang ada di 'Thumbsnail' Gallery anda, tapi anda harus tau terlebih dahulu alamat/URL dari masing2 image yang ada di 'Thumbsnail' Gallery tersebut. Lihat contoh URL di langkah-5.

Kemudian masuk Editor pada mode 'Compose', click image pertama anda dan click icon 'link' yang ada di editor anda.

Selanjutnya masukkan perintah javascript pada link tersebut, seperti ini:

javascript:changeImg('display','Busana Model Mix 03','http://2.bp.blogspot.com/_g4tuUmfcaro/R27obq3_UKI/AAAAAAAAAYQ/YVln_dQMbSo/s200/busana-1.jpg','300','375')

Maka image pertama bila dilihat dengan mode HTML editor anda adalah sbb:

<a href="javascript:changeImg('display','Busana Model Mix 03','http://2.bp.blogspot.com/_g4tuUmfcaro/R27obq3_UKI/AAAAAAAAAYQ/YVln_dQMbSo/s200/busana-1.jpg','300','375')"><img style="width: 60px; height: 75px;" src="http://2.bp.blogspot.com/_g4tuUmfcaro/R27obq3_UKI/AAAAAAAAAYQ/YVln_dQMbSo/s200/busana-1.jpg" border="0" /></a>

Catatan: Lihat Syntax Javascript pada Langkah-1, untuk menentukan image URL dan Title yang diinginkan untuk ditampilkan.

Kemudian Ulangi langkah memasukkan link di atas untuk image ke-2 dan seterusnya.

Image gallery ini juga bisa anda gunakan untuk gallery2 yang lain seperti Gallery Event, Gallery Keluarga dan yang lainnya.

Bila anda mengalami kesulitan, script lengkap untuk Trik gallery diatas berupa file .txt anda bisa download di URL ini: Free-Script Simple Gallery

'Save As' halaman tersebut menjadi simpleGallery.htm dan coba jalankan di browser anda.

Selamat Mencoba!

3 Desember 2007

Teknik memotong objek di PhotoShop

Ayo tebak siapa yang tau foto Luna Maya ini lagi di mana? dan bersama siapa? eeit... maksudnya lagi dimana gak pake dengan siapa tar ada wartawan infotainment jadi gosip lagi :)

Wah itu sih Luna Maya lagi di kamar ngadem dengan kesejukan udara AC, udara pegunungan, atau...

Iya benar kalau liat foto itu memang bener kesannya seperti itu, tapi kalau dari foto aslinya gak seperti itu lah... Ini hanya salah satu trik pengolahan gambar dengan menggunakan Photo Shop.

Memang trik ini yang banyak dipakai selain trik-trik lainnya untuk memotong sebuah objek gambar di Photo Shop dan mengabungkannya dengan objek atau gambar lainnya, dan ini yang bisa bikin artis-artis jadi kebakaran jenggot biasanya :)

Ya tapi untuk yang buat dan jago komputer grafis kok ya tega bikin seperti itu.. hehehe, mbok... ya kalo punya ilmu coba digunain untuk yang positif kenapa? misalnya dengan trik ini bikin simulasi 'Monorel' yang dipadukan dengan gambar situasi Jakarta, jadi sebelum Monorel-nya jadi bisa tau kira2 situasinya seperti apa.

Tapi itu urusan yang buat dech..
Saya disini hanya ingin kasih trik bagaimana membuat foto Luna Maya itu bisa seperti itu. Dan ini juga bisa dipakai untuk yang berbisnis Web Store dengan menampilkan barang2 yang di tawarkan supaya lebih menarik lagi untuk di tampilkan.

Sebagai langkah awal mungkin sebelum memotret objek gambar, bila ingin menggunakan trik ini untuk menampilkan di Web Store usahakan waktu pemotretan menggunakan latar belakang yang polos dengan warna yang bertolak belakang dengan objek yang akan di foto.

Contoh:
Kita mempunyai produk busana dengan warna putih, maka latar belakang kasih kain polos dengan warna biru. Ini akan lebih memudahkan pemotongan gambar tersebut. kalau yang pernah tau atau dengar trik 'Blue Screen' di Film2 menggunakan layar belakang polos untuk syuting sebuah peperangan misalnya, dan setelah jadi layar biru itu di ganti dengan film padang pasir misalnya... halah kayak orang film aja.. :) iya ini yang saya liat waktu acara 'Behind The Scene' untuk film '300' kok di tv.. hehehe

Nah kalo udah tau gitu, jadi gak perlu deh tuh si model busana foto di taman2 segala :) cukup dengan latar belakang seperti itu kalaupun ingin kesan ada di taman ya tinggal foto pemandangannya aja sendiri nanti tinggal dipadukan.

Berikut adalah langkah2 untuk memotong objek gambar tersebut:

Langkah-1

Di Photo Shop buka file objek yang akan di potong dengan cara File | Open

Nah ini foto aslinya Luna Maya untuk iklan Zestea :)
yang saya pinjem dari Gallery Produksi-nya Website APFII (Asosiasi Pekerja Film Iklan Indonesia) yang saya buat.





Langkah-2

Selanjutnya buka menu Filter | Extract yang akan keluar window seperti di bawah ini:


Langkah-3

Dari tools yang ada di sebelah kiri gambar, dari icon Edge Highlighter Tool (area) atau icon yang ada di paling kiri atas (lingkaran merah) click untuk menentukan objek yang akan kita potong.

Caranya, lihat gambar diatas lingkaran hijau adalah batas potongan objek yang akan kita potong dengan gambar di belakangnya.

Click tarik mouse anda untuk membuat lingkaran tersebut, catatan lingkaran hijau tersebut harus menyatu antara ujung yang satu dengan ujung yang lainnya.

Langkah-4


Selanjutnya adalah kita beri 'Fill' pada objek yang akan kita ambil, dengan cara click icon 'Fill' pada tool yang ada di sebelah kiri gambar (lihat lingkaran merah pada gabar di atas) kemudian click di objek yg akan kita potong.

Kalau disini click pada gambar Luna Maya-nya.

Langkah-5


Setelah mendapat objek gambar tersebut, selanjutnya tinggal 'Preview' dengan click pada tombol 'Preview' yang ada di sebelah kanan gambar.

Yaa... sekaranng sudah jadi objek gambar dengan latar belakang transparan. Click 'OK' untuk keluar dari window 'Extract' ini.

Langkah-6

Untuk mengabungkan dengan objek atau gambar lain buka file yang akan kita gabungkan.

Dan untuk tambahan saya akan kasih effect blur pada gambar latar belakang tersebut dengan cara masuk menu:


Filter | Blur | Motion Blur

disini click 'OK' saja untuk effect standard-nya yang bila ingin effect lain silahkan ber-experiment sendiri.













Langkah-7



Langkah terakhir adalah anda tinggal click n' drag foto objek yang sudah di potong tadi ke objek latar belakang yang sudah dibuat blur tersebut.

Lihat gambar di atas untuk lebih jelasnya.

silahkan simpan file tersebut yang menjadi file master Photo Shop dengan extention .PSD, dan bila ingin digunakan untuk di website... yaa... jangan file .PSD-nya tapi 'save as' ke file format .jpg atau .gif

Selamat mencoba!

Bila nanti ada foto artis beredar di internet yang dimanipulasi hasil dari tutorial ini saya tidak akan pernah bertanggung jawab untuk itu! :)

TDA-IT Workshop: "How to design your webstore with Blogger"


Workshop "How to design your webstore with Blogger" Gelombang-1 yang diadakan oleh Komunitas Tangandiatas (TDA-IT) akhirnya terlaksana juga pada hari sabtu yang lalu tanggal 01-Desember-2007 di Ayola Cybernet Cafe Mangga Dua Square Lantai 2 Hall B, Jalan Gunung Sahari Raya No. 1 Jakarta Utara.

Workshop kali ini saya ditunjuk sebagai Pembawa Materi di Workshop tersebut, yang sudah lama juga saya tidak membawakan Materi di Workshop serupa seperti ini. Terakhir saya sebagai Pembawa Materi Workshop pada bulan Juni 2007 lalu untuk Materi "Pelatihan Flash Programming dan Animasi" di Pustekkom (Pusat Teknologi Informasi dan komunikasi Pendidikan) Departemen Pendidikan Nasional dengan peserta pelatihan dari para dosen senior STSI (Sekolah Tinggi Seni Indonesia) Bandung

Workshop TDA ini diikuti oleh 40 orang para member TDA, yang sebelumnya sempat diadakan pooling untuk memilih kira-kira materi apa yang diminati oleh para member TDA ini, dengan Materi pilihan Membuat Webstore dengan Joomla atau dengan Blog dan pooling ini sendiri diadakan di Blog-nya Pak Iim Rusyamsi (Koordinator TDA-IT).

Dari hasil pooling tersebut lebih banyak dari para member untuk diadakannya Workshop dengan Materi Membuat Webstore dengan Blog, sebenernya sempat kaget juga saya melihat hasil pooling ini dan yang lebih kaget lagi setelah dibukannya pendaftaran 2 minggu sebelum Workshop ini diadakan, baru 2 hari saja dibuka sudah melebihi target peminat untuk 30 peserta Workshop ini. Sampai hari pelaksanan memang akhirnya dibatasi untuk hanya 40 orang peserta saja yang bisa ikut workshop gelombang-1 ini yang selebihnya mungkin akan dipertimbangkan sebagai peserta untuk gelombang berikutnya. Dan dari informasi terakhir list peserta yang daftar sudah 60 orang. Wah... hebat antusias peserta untuk Materi Workshop kali ini.

Terus terang sebelumnya saya agak sedikit kuatir dengan antusias peserta kali ini, bukan karena dari banyaknya peminat untuk mengikuti Workshop ini (kalau untuk ini patut di syukuri), tapi karena saya agak kuatir akan mengecewakan peserta nantinya. Selain saya belum siap dengan Materi yang akan disajikan di Workshop tersebut, kebetulan saya juga sedang ada kesibukan di minggu yang sama untuk deadline mengeluarkan Design Layout untuk beberapa Website client untuk di Approval. walah...

Tapi Allhamdulillah... akhirnya semua selesai juga, walaupun untuk materi Workshop baru bisa saya selesaikan tepat 1 hari sebelum pelaksanaan Workshop tersebut.

Di hari pelaksanaan karena ada tools yang tidak dapat di install ditempat Workshop tersebut seperti Dreamwever dan Firework, yang merupakan kunci untuk praktek bagi para peserta jadi ada beberapa materi yang harus dilewatkan. Tapi syukur Dreamwever dapat di install pada sesi setelah break makan siang jadi peserta bisa aktif untuk mempraktekkan teknik-teknik HTML, CSS, dan Menyisip Program Javascript yang saya berikan, walaupun ada materi yang terlewatkan disini yaitu Membuat Website Sederhana dengan Dreamwever karena keterbatasan waktu. Selain itu memang ada beberapa Materi yang tidak dapat disajikan di Workshop ini. Selain sofware, ini dikarenakan keterbatasan waktu di Workshop tersebut yang begitu singkat.

Untuk Kondisi ini saya secara pribadi mohon maaf bila mengecewakan peserta Workshop, tapi seperti yang saya katakan di akhir sesi yang saya bawakan "Kalau Workshop ini bukanlah menjadi sebuah akhir pertemuan, tapi menjadi sebuah awal yang selanjutnya bisa dilanjutkan melalui millis atau yang lainnya".

Selamat untuk para peserta Workshop "How to design your webstore with Blogger" Gelombang 1 ini semoga bermanfaat apa yang sudah didapat dari Workshop ini.

"Selayaknya Standard Internasional sebagai acuan dalam berkarya dan berkreasi untuk menghasilkan sebuah karya yang barkualitas, agar dapat dinikmati oleh dunia Internasional yang tidak hanya berskala Nasional"

Selamat Berkarya!