19 September 2010

Balsamiq Mockups

Assalamualaikum dan Salam Sejahtera. Sudah lama meninggalkan dunia blog. Kini, alhamdulillah masih dikurniakan olehNya, kemahuan untuk berkongsi ilmu yang baru saya perolehi hari ini (ketika artikel ini ditulis 20-09-2010) iaitu perisian Balsamiq Mockups. Sebelum memperihalkan praktikal perisian ini, terlebih dahulu, ingin saya perincikan, bagaimana boleh terjumpa perisian ini dan kenapa/mengapa ia menarik minat saya untuk berkongsi ilmunya. 

Punca Pencarian Ilmu
Menjadi kebiasaan saya gemar membaca mengenai dunia pengkomputan (khususnya mengenai sistem pengoperasian Ubuntu (berasaskan Linux). Hari ini saya membaca mengenai artikel yang bertajuk Mark Shuttleworth Introduces Windows Indicators di Tombuntu. Kemudian terlihat imej kecil. Saya memerhatikan betul-betul imej kecil itu dan membaca dengan teliti. Apa yang tertera di dalam imej tersebut adalah, lakaran dasar (idea dan konsep) Mark Shuttleworth mengenai pengubahsuaian antaramuka Ubuntu versi 10.10 - yang dijangka akan dilancarkan pada umum pada 10 Okt 2010 (10.10.10). Di bawah imej tersebut terpapar teks yang bertajuk created with Balsamiq Mockups - www.balsamiq.com

sumber dari Tombuntu (yang dicapai dari blog Mark Shuttleworth jua adanya)

Oh ? Jadinya, Mark Shuttleworth menggunakan perisian tersebut untuk menghasilkan idea dan konsep beliau. Hati saya pun berkata, apa kata kita cuba try test tengok < bahasa budak-budak muda abad ini. :) . Jadi bermulalah 'pengembaraan' saya dalam maksud untuk mencuba pula perisian tersebut (percumakah, berbayarkah? mudahkah? sama-sama kita lihat, inshaAllah)

Ayuh ke Web Balsamiq
Taipkan alamat lengkap pada web browser (Chrome, Firefox, Safari, Opera) > : http://www.balsamiq.com  < dan anda akan dapat melihat *skrin di bawah ini ( skrin di bawah ini adalah screenshot pada 20-09-2010).

Laman Web Balsamiq
Dengan tag (slogan) "so freaking good" < macam best je ? he he. Di dalam imej di atas juga boleh dilihat contoh antaramuka aplikasi tersebut dan juga, wah ? perisian berbayar rupanya. Tidak mengapa, saya klik pada hypertext di atas "Download" dan memilih opsyen pengguna berasaskan Linux. Dimaklumkan di situ bahawa, perisian ini dijalankan dengan menggunakan Adobe AIR (Adobe Integrated-Runtime). Rata-rata aplikasi mudah sekarang ini menggunakan 'enjin' AIR. Tidak mengapalah, oleh kerana sistem Ubuntu Linux saya (versi lama 8.04 LTS sebab versi ini digunakan untuk mengajar pelajar-pelajar) masih belum dipasang Adobe AIR, lalu saya pun mendapatkannya di web Adobe sendiri. Setelah selesai proses muat turun fail Adobe AIR (saiz 13.8MB, pakej .deb < debian Linux), saya melakukan proses pemasangan. Tiada masalah. Kemudian saya muat turun pula fail MockupsForDesktop.air (saiz 4.0MB sahaja, dengan extension fail .air). Setelah itu, sayapun melakukan proses pemasangan. Pun tiada masalah. Alhamdulillah. Untuk makluman semua, Balsamiq menawarkan perisian ini untuk dicuba selama 7 hari (trial). Alhamdulillah, walaupun 7 hari, memadailah bagi saya untuk mencuba dan berkongsi ilmu ini. Bagi pengguna-pengguna yang ingin benar-benar mempelajari ilmu penggunaan perisian ini, eloklah merujuk kepada manual pengguna di atas talian ini , MANUAL PENGGUNA (bagi saya ia lengkap dan mudah untuk difahami)

Woww-weee
Alhamdulillah, cantik aplikasinya (memang aplikasi yang dijalankan (run) di bawah janaan enjin AIR memang macam inilah selalunya. Namun mari kita perhatikan tiap-tiap seksyen atau bahagian di dalam antaramuka aplikasi Balsamiq Mockups ini. Di atas sekali adalah (commonly) Title Bar yang tertera di situ Balsamiq Mockups for Desktop , diikuti dengan path fail yang aktif. Kemudian di bawahnya adalah Menu Bar, dimulai dengan (seperti perisian-perisian lain juga) File Edit View Help diikuti dengan medan carian untuk item-item atau komponen-komponen (terbina dalam). Contoh jika pengguna menaip A sahaja, akan terjatuhlah (tu dia!) Drop Down Menu dengan item yang bermula dengan huruf A (example: Accordion). Selepas medan carian tersebut, terpapar ikon-ikon kecil (Formatting Toolbar) yang membolehkan pengguna untuk melakukan proses Cut, Copy, Paste, Redo, Undo, Delete, Group/Ungroup, Lock/Unlock dan Zoom. Di bawah Menu Bar terdapat pula butang-butang untuk paparan kategori item-item lakaran. Di bahagian bawah pula, kita dapat perhatikan, seakan-akan ciri RIBBON di dalam Microsoft Office 2007/10 (agaknya pembangun aplikasi ini, hendak menyesuaikan aplikasi ini kepada pengguna Windows kot, ha ha gurau saja).

konsep RIBBON, sekali macam Microsot Office 2007 punya produk daa ! 

Di dalam Ribbon tersebut, terdapat item-item, atau komponen-komponen yang boleh dipilih, dan di drag and drop ke dalam kanvas utama.

Antaramuka (User Interfaces of Balsamiq Mockups for Desktop)

Oh, maafkan saya, gambar ini terkeluar dari templates blog ini. Tidak mengapa, ini adalah untuk memaparkan antaramuka aplikasi ini dengan lebih jelas. Apabila lakaran dibuat, dan pengguna ingin menyimpan lakaran tersebut, fail ini akan disimpan di dalam extension .bmml (saya pasti bmml adalah akronim kepada balsamiq mockups markup languages). Di bawah adalah contoh lakaran (saja-saja seronok-seronok, suka-suka hati) konsep projek JASOPEN saya.

contoh lakaran
Wah, begitu cantik ! Ha ha ha (sendiri memuji). Alhamdulillah.

Cadangan Pengguna Sasaran (Kesimpulan)
Sebenarnya, sesiapa sahaja boleh menggunakan perisian ini. Namun pada pandangan saya, ia amatlah sesuai untuk pelajar-pelajar yang memerlukan pembentangan konsep dan idea untuk projek-projek berbentuk multimedia, sistem pengurusan maklumat dan yang seangkatan dengannya. Walaupun begitu, pekerja-pekerja di sektor kerajaan dan swasta dapat juga memanfaatkan perisian ini di dalam membentangkan idea-idea berkaitan pembangunan web, blog, idea-idea kajian-kajian penyelidikan (hmm perisian peta minda lagi baik sebenarnya) dan banyak lagi.












1 comment:

  1. thanx sir... nice share... nice blog.. :D ni blog sye.. tgok la klau ade mase.. :D http://soulanne.blogspot.com/

    ReplyDelete

sumber-LinkWithin

Related Posts Plugin for WordPress, Blogger...