tag:blogger.com,1999:blog-13626368123528311372024-03-12T20:59:09.738-07:00Koding Sambil Ngopi - Farhad AlaydrusFarhad Alaydrus - MSP IPB yang Udah Jadi .Net Developer BeneranFarhad Alaydrushttp://www.blogger.com/profile/02135974688853926772noreply@blogger.comBlogger23125tag:blogger.com,1999:blog-1362636812352831137.post-44434721505001224732011-01-05T23:29:00.000-08:002011-01-06T22:24:32.847-08:00Sekilas Tentang Heuristic Evaluation Checklist<p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph">Salah satu cara untuk menguji keberhasilan sebuah antarmuka adalah dengan melakukan <i style="mso-bidi-font-style: normal">heuristic evaluation </i>(HE). Menurut Galitz (2007), cara ini bukanlah cara yang terbaik, namun cara ini adalah yang paling populer. HE dilakukan oleh beberapa orang evaluator yang berkompeten di bidang pengembangan antarmuka. Evaluator akan diminta untuk menilai antarmuka yang telah kita buat dengan menggunakan heuristic evaluation checklist. HE merupakan metode evaluasi antarmuka yang dikembangkan oleh Jacob Nielsen (Artikel lengkap dapat dibaca <a href="http://www.useit.com/papers/heuristic/"><b><span class="Apple-style-span">di sini</span></b></a>). Dalam HE ada 10 komponen yang perlu dievaluasi yaitu:</p><p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><br /></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><o:p> </o:p></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><b style="mso-bidi-font-weight:normal">Visibility of System Status<o:p></o:p></b></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph">Meliputi kejelasan suatu control dan kesesuaian dengan fungsinya. Misalnya, kalau kita lihat bentuk kursi, kita akan segera tahu bagaimana cara menggunakannya. Itulah visibility. Sesuatu yang dikatakan tidak memenuhi visibility misalnya ada sebuah mobil yang ternyata bukan mobil melainkan sebuah robot transformer. Kita tidak membutuhkan transformer dalam antarmuka. Cukup yang jelas-jelas saja.</p><p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><br /></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><o:p> </o:p></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><b style="mso-bidi-font-weight:normal">Match Between System and The Real World<o:p></o:p></b></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph">Komponen ini meliputi kesesuaian dengan dunia nyata seperti penggunaan angka decimal yang tepat, pemilihan icon yang sesuai, dan sebagainya.</p><p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><br /></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><o:p> </o:p></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><b style="mso-bidi-font-weight:normal">User Control and Freedom<o:p></o:p></b></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph">Kebebasan pengguna meliputi seberapa kuat peran pengguna untuk mengatur aplikasi. Misalnya, pada aplikasi pemutar musik, apakah ada tombol untuk mengecilkan volumenya? Atau yang lebih sederhana lagi, apakah ada tombol close di aplikasi itu?</p><p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><br /></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><b style="mso-bidi-font-weight:normal"><o:p> </o:p></b></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><b style="mso-bidi-font-weight:normal">Consistency and Standards<o:p></o:p></b></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph">Komponen ini berkaitan erat dengan standard an konsistensi desain yang dibangun. Suatu desain dikatakan tidak konsisten apabila tiba-tiba headernya miring padahal sebelumnya tidak, atau tadinya pakai bahasa Indonesia but suddenly the application is in English. This adalah something that tidak konsisten. </p><p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><br /></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><b style="mso-bidi-font-weight:normal"><o:p> </o:p></b></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><b style="mso-bidi-font-weight:normal">Help User Recognize, Diagnose, and Recover From Erros<o:p></o:p></b></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph">Poin ini dimaksudkan untuk menguji apakah sistem dapat membantu pengguna keluar dari jeratan eror. Jika terjadi eror, apa peringatan yang diberikan desainer? Sopankah peringatan tersebut? Apakah pemberitahuan tersebut dapat membatu pengguna atau justru membuat pengguna menjadi makin bingung?</p><p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><br /></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><b style="mso-bidi-font-weight:normal"><o:p> </o:p></b></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><b style="mso-bidi-font-weight:normal">Error Prevention<o:p></o:p></b></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph">Ini adalah sesuatu yang sangat penting, bagaimana desain yang dibuat bisa mencegah pengguna dari melakukan kesalahan. Bagaimana desainer bisa membuat pengguna tahu bahwa ia harus mengetikkan tanggal/bulan/tahun dan bukannya bulan/tanggal/tahun.</p><p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><br /></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><b style="mso-bidi-font-weight:normal"><o:p> </o:p></b></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><b style="mso-bidi-font-weight:normal">Recognition Rather Than Recall<o:p></o:p></b></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph">Salah satu tujuan usability adalah untuk membuat pengguna tidak perlu mengingat informasi yang sebelumnya ia berikan atau dapatkan. Misalnya, ketika kita melakukan search di Google, maka setelah hasil search muncul, textbox search tetap bertuliskan keyword kita kan? Ini adalah upaya untuk membuat pengguna tidak perlu mengingat-ingat “tadi gw ngetik apa ya?”</p><p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><br /></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><o:p> </o:p></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><b style="mso-bidi-font-weight:normal">Flexibility<o:p></o:p></b></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph">Sebuah system boleh memiliki batasan, namun jangan sampai mengekang pengguna dan mengabaikan fleksibilitas. Bagaimana kemampuan antarmuka untuk memenuhi “eksperimen” pengguna perlu diuji di sini.</p><p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><br /></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><span style="mso-spacerun:yes"> </span></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><b style="mso-bidi-font-weight:normal">Aesthetic and Minimalist Design<o:p></o:p></b></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph">Desain yang sederhana menjadi nilai tambah dalam sebuah aplikasi. Desain yang sederhana bukan berarti ada tombol2 di atas page berwarna putih, namun lebih berkaitan dengan penentuan porsi desain yang “pas” dalam antarmuka. Sederhananya, slide Power Point untuk presentasi agak hambar kalau tanpa animasi, namun animasi berlebihan justru akan sangat mengganggu.</p><p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><br /></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><o:p> </o:p></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><b style="mso-bidi-font-weight:normal">Help and Documentation<o:p></o:p></b></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph">Komponen ini berkaitan dengan bagaimana desainer (dan developer) mempersiapkan bantuan bagi pengguna. Apakah ada tooltip dalam aplikasi? Apakah ada tombol help?</p><p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><br /></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><o:p> </o:p></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph">Nah, kira-kira itulah poin-poin yang harus diperhatikan dalam melakukan heuristic evaluation. Contoh HE checklist dalam bahasa Indonesia dapat diunduh <b><span class="Apple-style-span"><a href="http://cid-47dace0f3777d7b9.office.live.com/view.aspx/.Public/HE%5E_Id.xlsx">di sini</a>.</span></b></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;text-align: justify;text-justify:inter-ideograph"><o:p> </o:p></p>Farhad Alaydrushttp://www.blogger.com/profile/02135974688853926772noreply@blogger.com0tag:blogger.com,1999:blog-1362636812352831137.post-19522147199294835272011-01-05T22:52:00.001-08:002011-01-05T23:02:04.451-08:00Simple Usability Engineering Lifecycle<span xmlns=""><p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;mso-add-space: auto;text-align:justify;text-justify:inter-ideograph;text-indent:14.2pt"><span style="color: black; "><br /></span></p><div style="text-align: justify;text-indent: 0px; "><span style="color: black; "><span class="Apple-tab-span" style="white-space: pre; "> </span>Pengembangan sebuah software tidak akan pernah lepas dari pembuatan antamuka aplikasinya. Tidak akan berguna, secanggih apapun algoritmenya, sehebat apapun idenya, kalau tidak bisa digunakan oleh pengguna. Untuk memudahkan penggunaan aplikasi dan agar tujuan pengembangan system dapat tercapai, perlu dilakukan pengembangan antarmuka yang terstruktur dan sesuai dengan kaidahnya. Salah catu cara untuk mengambangkan antarmuka adalah dengan menggunakan metode <i>usability engineering life cycyle</i> (Mayhew 1999) untuk aplikasi sederhana. Gambar 1 menunjukkan skema metode pengembangan tersebut.</span></div><span style="color: black; "><o:p></o:p></span><p></p><p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;mso-add-space: auto;text-align:justify;text-justify:inter-ideograph;text-indent:14.2pt"><span style="color: black; "><span class="Apple-style-span" style="color: rgb(0, 0, 238); -webkit-text-decorations-in-effect: underline; "><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgScvOc8IDCgE170UOd0Ccy4SQx6GekkKX2D0e1qZI5p2h_G3PoMp9uka8eMF41wY94q0P5bo5JRMYcdsBddmdCVSKwNANhJm0-YAqcng5SM0zHG9szdfRvEjsp7rflv-FPcCZEa8oqE9M/s320/ps.png" border="0" alt="" id="BLOGGER_PHOTO_ID_5558962655718875490" style="text-align: justify;display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; cursor: pointer; width: 157px; height: 320px; " /></span></span></p> <p class="MsoListParagraph" style="margin-bottom:0in;margin-bottom:.0001pt; mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span style="color: black; "><b>Profil Pengguna</b></span></p><p class="MsoListParagraph" style="margin-bottom:0in;margin-bottom:.0001pt; mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span style="color: black; ">Pada tahap ini dilakukan pengumpulan data karakteristik pengguna sistem. Pengumpulan profil pengguna dapat dilakukan dengan berbagai cara seperti dengan wawancara, observasi, menggunakan teknik persona dan lain sebagainya. Intinya, pada tahap ini kita harus mengenal dengan jelas siapa pengguna kita dan bagaimana karakter mereka sehingga desain yang dihasilkan nanti akan sesuai dengan karakter pengguna. <o:p></o:p></span></p><h2 style="text-indent: 0px;margin-top: 0in; margin-right: 0in; margin-left: 0.5in; margin-bottom: 0.0001pt; text-align: justify; "><span class="Apple-style-span" style="font-weight: normal; font-size: 15px;"><br /></span></h2> <p class="MsoListParagraph" style="margin-bottom:0in;margin-bottom:.0001pt; mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span style="color: black; "><b>Analisis Tugas Kontekstual</b></span></p><p class="MsoListParagraph" style="margin-bottom:0in;margin-bottom:.0001pt; mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span style="color: black; ">Pada tahap ini dilakukan analisis mengenai tugas pengguna yang berkaitan dengan aliran pekerjaan yang dilakukan. Hasil analisis ini akan digunakan sebagai dasar untuk menentukan <i>usability goals</i>. Analisis dilakukan dengan mendaftarkan pekerjaan yang dilakukan oleh pengguna secara manual sehari-hari beserta permasalahan yang dihadapi pengguna yang berkaitan dengan pekerjaannya. Dengan melakukan tahap ini kita dapat mulai merancang apa urutan pekerjaan yang perlu diotomasi dan bagaimana cara agar system yang kita kembangkan dapat menghapuskan permasalahan yang sering dihadapi </span></p><p class="MsoListParagraph" style="margin-bottom:0in;margin-bottom:.0001pt; mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span style="color: black; "><br /></span></p> <p class="MsoListParagraph" style="margin-bottom:0in;margin-bottom:.0001pt; mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span style="color: black; "><b>Keterbatasan Platform</b></span></p><p class="MsoListParagraph" style="margin-bottom:0in;margin-bottom:.0001pt; mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span style="color: black; ">Pada tahap ini dilakukan analisis terhadap kapabilitas <i>platform</i> tempat aplikasi ini akan berjalan. Keterbatasan <i>platform</i> akan membatasi desain antarmuka. Antarmuka haruslah dibuat sesuai dengan standar <i>platform</i> tertentu agar dapat suatu aplikasi dapat bekerja dengan optimal. Keterbatasan yang harus diperhatikan antara lain berapa resolusi layar yang digunakan pengguna, apa system operasinya, bagaimana hardware yang digunakan, dan sebagainya.<o:p></o:p></span></p><h2 style="text-indent: 0px;text-align: justify; margin-top: 0in; margin-right: 0in; margin-left: 0.5in; margin-bottom: 0.0001pt; "><span class="Apple-style-span" style="font-weight: normal; font-size: 15px;"><br /></span></h2> <p class="MsoListParagraph" style="margin-bottom:0in;margin-bottom:.0001pt; mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span style="color: black; "><b>Prinsip Desain Umum</b></span></p><p class="MsoListParagraph" style="margin-bottom:0in;margin-bottom:.0001pt; mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span style="color: black; ">Pada tahap ini dipelajari mengenai prinsip-prinsip desain antarmuka yang baik dan sesuai standar. Pemehaman mengenai prinsip-prinsip desain tersebut dilakukan berdasarkan panduan pengembangan antarmuka yang ada. <o:p></o:p></span></p><h2 style="text-indent: 0px;text-align: justify; margin-top: 0in; margin-right: 0in; margin-left: 0.5in; margin-bottom: 0.0001pt; "><span class="Apple-style-span" style="font-weight: normal; font-size: 15px;"><br /></span></h2> <p class="MsoListParagraph" style="margin-bottom:0in;margin-bottom:.0001pt; mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span style="color: black; "><b>Usability Goals</b></span></p><p class="MsoListParagraph" style="margin-bottom:0in;margin-bottom:.0001pt; mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span style="color: black; ">Pada tahap ini, dirumuskan tujuan-tujuan kualitatif dan kuantitatif yang menggambarkan kebutuhan <i>usability</i>. Rumusan yang dihasilkan pada tahap ini akan menjadi tolak ukur keberhasilan pembangunan antarmuka ini pada tahap evaluasi.<o:p></o:p></span></p><h2 style="text-indent: 0px;text-align: justify; margin-top: 0in; margin-right: 0in; margin-left: 0.5in; margin-bottom: 0.0001pt; "><span class="Apple-style-span" style="font-weight: normal; font-size: 15px;"><br /></span></h2> <p class="MsoListParagraph" style="margin-bottom:0in;margin-bottom:.0001pt; mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span class="Apple-style-span"><i><span style="color: black; "><b>Style Guide</b></span></i></span></p><p class="MsoListParagraph" style="margin-bottom:0in;margin-bottom:.0001pt; mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span class="Apple-style-span"><i><span style="color: black; ">Style guide</span></i><span style="color: black; "> merupakan panduan desain yang diperoleh dari analisis pada tahap-tahap sebelumnya. <i>Style guide</i> akan menjadi panduan untuk melakukan perancangan lebih lanjut. Berdasarkan Mayhew (1999), pada perancangan aplikasi sederhana <i>style guide</i> tidak perlu didokumentasikan, oleh karena itu tahap pembuatan <i>style guide</i> tidak dilakukan dalam perancangan prototipe ini.<o:p></o:p></span></span></p><h2 style="text-indent: 0px;text-align: justify; margin-top: 0in; margin-right: 0in; margin-left: 0.5in; margin-bottom: 0.0001pt; "><span class="Apple-style-span" style="font-weight: normal; font-size: 15px;"><br /></span></h2> <p class="MsoListParagraph" style="margin-bottom:0in;margin-bottom:.0001pt; mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span style="color: black; "><b>Work Reengineering</b></span></p><p class="MsoListParagraph" style="margin-bottom:0in;margin-bottom:.0001pt; mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span style="color: black; ">Tahap <i>work reengineering </i><span> </span>merupakan tahap perancangan ulang tugas pengguna pada tingkat organisasi dan aliran pekerjaan. Pada tahap ini tidak dilakukan perancangan antarmuka, melainkan hanya organisasi abstrak fungsionalitas dan aliran pekerjaan. <span> </span>Work reengineering dilakukan jika ada task yang belum dapat dianalogikan secara gamblang ke dunia digital. Misalnya kita ingin membangun sebuah aplikasi word processing semacam MS.Word, di dunia nyata ketika kita menulis dengan tangan, tidak ada cara untuk mengubah ukuran dan jenis tulisan. Hal seperti inilah yang perlu di-reengineering untuk menghasilkan analogi baru yang usable. <o:p></o:p></span></p><h2 style="text-indent: 0px;text-align: justify; margin-top: 0in; margin-right: 0in; margin-left: 0.5in; margin-bottom: 0.0001pt; "><span class="Apple-style-span" style="font-weight: normal; font-size: 15px;"><br /></span></h2> <p class="MsoListParagraph" style="margin-bottom:0in;margin-bottom:.0001pt; mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span style="color: black; "><b>Desain Model Konseptual</b></span></p><p class="MsoListParagraph" style="margin-bottom:0in;margin-bottom:.0001pt; mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span style="color: black; ">Pada tahap ini dibuat sketsa desain antarmuka. Desain meliputi sketsa tampilan, navigasi dan menu-menu. Detail perancangan layar tidak dibuat pada tahapan ini.<o:p></o:p></span></p><h2 style="text-indent: 0px;text-align: justify; margin-top: 0in; margin-right: 0in; margin-left: 0.5in; margin-bottom: 0.0001pt; "><span class="Apple-style-span" style="font-weight: normal; font-size: 15px;"><br /></span></h2> <p class="MsoListParagraph" style="margin-bottom:0in;margin-bottom:.0001pt; mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span style="color: black; "><b>Standar Desain Layar</b></span></p><p class="MsoListParagraph" style="margin-bottom:0in;margin-bottom:.0001pt; mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span style="color: black; ">Pada tahapan ini dipelajari mengenai tata letak dan aspek-aspek lain yang menjadi standar antarmuka dari platform yang dipilih untuk diikuti. Standar ini diperlukan untuk menghasilkan antarmuka yang mudah dan memiliki ciri-ciri umum seperti antarmuka suatu platform yang biasa digunakan oleh pengguna.<o:p></o:p></span></p><h2 style="text-indent: 0px;text-align: justify; margin-top: 0in; margin-right: 0in; margin-left: 0.5in; margin-bottom: 0.0001pt; "><span class="Apple-style-span" style="font-weight: normal; font-size: 15px;"><br /></span></h2> <p class="MsoListParagraph" style="margin-bottom:0in;margin-bottom:.0001pt; mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span style="color: black; "><b>Desain Antarmuka Detil</b></span></p><p class="MsoListParagraph" style="margin-bottom:0in;margin-bottom:.0001pt; mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span style="color: black; ">Rancangan detil antarmuka produk dilaksanakan berdasarkan perbaikan dan validasi model konseptual dan standar desain layar yang sudah terdokumentasi pada <i>style guide</i> produk. <o:p></o:p></span></p><h2 style="text-indent: 0px;text-align: justify; margin-top: 0in; margin-right: 0in; margin-left: 0.5in; margin-bottom: 0.0001pt; "><span class="Apple-style-span" style="font-weight: normal; font-size: 15px;"><br /></span></h2> <p class="MsoListParagraph" style="margin-bottom:0in;margin-bottom:.0001pt; mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span style="color: black; "><b>Evaluasi Desain Antarmuka Detil</b></span></p><p class="MsoListParagraph" style="margin-bottom:0in;margin-bottom:.0001pt; mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span style="color: black; ">Pada tahap ini dilakukan evaluasi terhadap desain antarmuka detil. Evaluasi dilakukan untuk memastika rancangan ini telah memenuhi standar dan memungkinkan seluruh pekerjaan dapat diakukan oleh </span></p><p class="MsoListParagraph" style="margin-bottom:0in;margin-bottom:.0001pt; mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span style="color: black; "><br /></span></p> <p class="MsoListParagraph" style="margin-bottom:0in;margin-bottom:.0001pt; mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span style="color: black; "><b>Instalasi</b></span></p><p class="MsoListParagraph" style="margin-bottom:0in;margin-bottom:.0001pt; mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span style="color: black; ">Pada tahap ini, aplikasi diluncurkan, dikonfigurasi dan diberikan kepada pengguna. <o:p></o:p></span></p><h2 style="text-indent: 0px;text-align: justify; margin-top: 0in; margin-right: 0in; margin-left: 0.5in; margin-bottom: 0.0001pt; "><span class="Apple-style-span" style="font-weight: normal; font-size: 15px;"><br /></span></h2> <p class="MsoListParagraphCxSpFirst" style="margin-bottom:0in;margin-bottom:.0001pt; mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span style="color: black; "><b>User Feedback</b></span></p><p class="MsoListParagraphCxSpFirst" style="margin-bottom:0in;margin-bottom:.0001pt; mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span style="color: black; ">Pada tahap ini akan dilakukan evaluasi heuristic Jacob Nielsen. Hasil evaluasi akan digunakan sebagai bahan revisi antarmuka jika diperlukan. <o:p></o:p></span></p><p class="MsoListParagraphCxSpFirst" style="margin-bottom:0in;margin-bottom:.0001pt; mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span style="color: black; "><br /></span></p> <p class="MsoListParagraphCxSpMiddle" style="margin-bottom:0in;margin-bottom: .0001pt;mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span style="color: black; "><o:p> </o:p></span></p> <p class="MsoListParagraphCxSpLast" style="margin:0in;margin-bottom:.0001pt; mso-add-space:auto;text-align:justify;text-justify:inter-ideograph"><span style="color: black; ">Itulah tahapan yang dilakukan dalam usability engineering sederhana. Semoga dengan menerapkan tahapan ini kita dapat menghasilkan antarmuka yang usable. </span></p> <p class="MsoNormal" style="margin-bottom:0in;margin-bottom:.0001pt;mso-add-space: auto"><o:p> </o:p></p><p></p></span>Farhad Alaydrushttp://www.blogger.com/profile/02135974688853926772noreply@blogger.com0tag:blogger.com,1999:blog-1362636812352831137.post-31492834220167325542011-01-05T20:21:00.000-08:002011-01-05T20:47:31.241-08:00Web Developer’s Mistake: The “Mail to” Link<div style="text-align: justify;"><span class="Apple-style-span">Ketika user membaca sebuah artikel baik itu ilmiah ataupun sekedar artikel feature, ada kecenderungan user ingin tahu siapa sih yang menulis artikel ini. Kalau saya pribadi ketika membaca sebuah artikel yang bagus, jadi penasaran “pingin tau mukanya orang yang nulis ini! Gaul banget kayaknya..” Nah, oleh karena itulah di suatu halaman post yang bukan berada di blog pribadi sebaiknya mencantumkan foto dan link menuju biografi si penulis. </span></div><div style="text-align: justify;"><span class="Apple-style-span"><br /></span></div><div style="text-align: justify;"><span class="Apple-style-span">Kebutuhan akan biografi penulis seringkali digantikan oleh developer dengan meletakkan link “Mail to Author” atau “Mail to <a href="mailto:author@postkeren.com">author@postkeren.com</a>”. Padahal, in-fact, kebanyakan user cuma pingin tau aja siapa sih yang nulis, bukan pingin langsung kirim email. Pencantuman email memang penting, apalagi buat tulisan ilmiah, tapi seharusnya email bukan menjadi emphasis dari suatu biografi penulis.</span></div><div><p class="MsoNormal" style="text-align:justify;text-justify:inter-ideograph"><a href="http://www.useit.com/alertbox/20021223_10_mistake.gif" style="font-size: medium; "><img src="http://www.useit.com/alertbox/20021223_10_mistake.gif" border="0" alt="" style="text-align: justify;display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; cursor: pointer; width: 340px; height: 444px; " /></a><span class="Apple-style-span" style="font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular, sans-serif; -webkit-border-horizontal-spacing: 2px; -webkit-border-vertical-spacing: 2px; "><span class="Apple-style-span"></span></span></p><div style="text-align: center;"><span class="Apple-style-span"><em>Cartoons by </em></span></div><span class="Apple-style-span"><em><div style="text-align: center;"><span class="Apple-style-span" style="font-style: normal; "><em>Doug Sheppard and Katrin L. Salyers</em></span></div><div style="text-align: justify;"><span class="Apple-style-span" style="font-style: normal; "><em><br /></em></span></div></em></span><p></p> <p class="MsoNormal" style="text-align:justify;text-justify:inter-ideograph"><span><o:p> </o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span>Bicara mengenai pencantuman email, kita sering menemukan ada tulisan berwarna biru dan diberi underline yang berisikan tulisan <span> </span>“Ditulis oleh : <u><span style="color:#0070C0">Author bin Authorian</span></u>“. Coba kita pikir deh, apa sih ekspektasi user ketika dia menemukan ada tulisan berwarna biru dan ber-underline? Ekspektasi user adalah “Ketika gw klik tulisan ini, maka gw akan pindah ke halaman baru yang isinya adalah informasi mengenai si author.” Tapi apa yang didapat ketika user mengklik anchor itu? Yang terjadi adalah secara otomatis computer kita akan membuka mail client, Outlook misalnya, yang bahkan kebanyakan user males makenya dan belum tentu juga mau kirim email ke si author. Ekspektasi user adalah dia akan diajak ke halaman biodata atau biografi si penulis, bukan malah membuka aplikasi email client. <o:p></o:p></span></p><p class="MsoNormal" style="text-align: justify;"><span><br /></span></p> <p class="MsoNormal" style="text-align:justify;text-justify:inter-ideograph"><span><o:p> </o:p></span></p> <p class="MsoNormal" style="text-align: justify;"><span><span class="Apple-style-span">Anchor yang mengindikasikan “mail to” haruslah disajikan secara eksplisit misalnya “Mail to: <a href="mailto:author@penulis.com">author@penulis.com</a>”, atau “<u><span style="color:#0070C0">Kirim email ke saya</span></u>”. Jangan sekali-sekali menjadikan foto sebagai anchor untuk mengirim email, karena percayalah ini akan sangat mengganggu.</span><o:p></o:p></span></p></div>Farhad Alaydrushttp://www.blogger.com/profile/02135974688853926772noreply@blogger.com0tag:blogger.com,1999:blog-1362636812352831137.post-46709354735809510262011-01-05T20:07:00.000-08:002011-01-05T20:47:43.193-08:00Web Developer’s Usability Mistake: “Open in New Window”<div style="text-align: justify;"><span class="Apple-style-span">Seringkali ketika kita mengklik sebuah link di halaman website yang tiba-tiba membuka halaman yang bertautan di window browser baru. Kita mungkin merasa terganggu dengan kemunculan new window ini, apalagi jika kita menggunakan netbook yang layarnya begitu kecil. Developer web memutuskan untuk menggunakan new window dengan tujuan untuk tidak menutup halaman yang sedang dibuka oleh pengguna. Biasanya ini dilakukan jika link menuju pada sebuah eksternal link. Pemilik website tidak menginginkan penggunanya meninggalkan websitenya demi mengunjungi web orang lain. Ini adalah tujuan yang sah sah saja, namun bagaimana jika kita kaji masalah ini dari segi usability?</span></div><p class="MsoNormal" style="text-align:justify;text-justify:inter-ideograph"><span><br /></span></p><img src="http://www.useit.com/alertbox/20021223_06_mistake.gif" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 340px; height: 452px;" border="0" alt="" /><div><div style="text-align: center;"><span class="Apple-style-span" style="font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular, sans-serif; font-size: small; -webkit-border-horizontal-spacing: 1px; -webkit-border-vertical-spacing: 1px; "><div style="text-align: center; "><em>Cartoons by </em></div><em><div style="text-align: center; "><span class="Apple-style-span" style="font-style: normal; "><em>Doug Sheppard and Katrin L. Salyers</em></span></div><div style="text-align: center; "><span class="Apple-style-span" style="font-style: normal; "><em><br /></em></span></div></em></span></div> <p class="MsoNormal" style="text-align:justify;text-justify:inter-ideograph"><span><o:p> </o:p></span></p> <p class="MsoNormal" style="text-align:justify;text-justify:inter-ideograph"><span>Kemunculan new window browser justru akan mengganggu keseimbangan dalam penggunaan aplikasi web.<span> </span>Dengan memunculkan window browser baru, maka developer telah merenggut kebebasan pengguna untuk mengklik tombol back. Tombol back pada new window secara otomatis akan menjadi disable karena memang tidak ada halaman sebelumnya. Ini tidak sesuai prinsip dasar aplikasi web konvensional yang seharusnya mengedepankan “navigation-based”. Tombol back seharusnya menjadi lifeline dan pegangan yang menenangkan pengguna “oh saya bisa santai karena apapun yang saya klik, saya akan bisa kembali ke halaman sebelumnya”, namun dengan munculnya new window, pengguna hanya akan menemukan tombol back yang disable dan akan membuatnya bingung sebelum menyadari bahwa halaman yang sebelumnya ada di window yang berbeda. <o:p></o:p></span></p><p class="MsoNormal" style="text-align:justify;text-justify:inter-ideograph"><span><br /></span></p> <p class="MsoNormal" style="text-align:justify;text-justify:inter-ideograph"><span><o:p> </o:p></span></p> <p class="MsoNormal" style="text-align:justify;text-justify:inter-ideograph"><span>Memunculkan browser new window (mengutip Nielsen) bagaikan seorang salesman alat penghisap debu yang menuangkan kotoran ke karpet rumah kita sebelum mulai mendemokan dagangannya tersebut. Kata Nielsen, “<span class="apple-style-span"><span style="color:black">Don't pollute my screen with any more windows, thanks. If I want a new window, I will open it myself!</span>” Developer berpikir keras untuk membuat pengguna tetap berada pada halaman web mereka namun developer sering mengesampingkan ketidaknyamanan pengguna ketika aplikasi “mengambil alih kontrol sistem”. Memunculkan window baru adalah hak penuh pengguna karena hal tersebut melibatkan entitas lain di luar system web yang dibangun. <o:p></o:p></span></span></p><p class="MsoNormal" style="text-align:justify;text-justify:inter-ideograph"><span><span class="apple-style-span"><br /></span></span></p> <p class="MsoNormal" style="text-align:justify;text-justify:inter-ideograph"><span class="apple-style-span"><span style="mso-bidi-font-family:Calibri;mso-bidi-theme-font: minor-latin;color:black"><o:p> </o:p></span></span></p> <p class="MsoNormal" style="text-align:justify;text-justify:inter-ideograph"><span class="apple-style-span"><span style="mso-bidi-font-family:Calibri;mso-bidi-theme-font: minor-latin;color:black">Saya sangat menyarankan untuk tidak menggunakan link yang akan memunculkan window baru, gunakanlah page navigation yang standar. Kalau kita takut user berpindah dari web kita, mari kita lakukan dengan cara yang lebih <i>elit</i>: buat konten yang menarik sehingga user akan selalu datang ke web kita. Atau cara yang paling sederhana: <b>Munculkan tab baru saja</b> <b>lah</b>..</span></span><span style="mso-bidi-font-family:Calibri;mso-bidi-theme-font:minor-latin"><o:p></o:p></span></p></div>Farhad Alaydrushttp://www.blogger.com/profile/02135974688853926772noreply@blogger.com0tag:blogger.com,1999:blog-1362636812352831137.post-65197762690726560972011-01-05T19:47:00.000-08:002011-01-05T20:46:40.926-08:00Sekilas Tentang Enterprise Service Bus<div style="text-align: justify;"><span class="Apple-style-span">Progress Sonic, teman baru yang baru saya temui di kantor. Sonic adalah sebuah software yang digunakan untuk mengembangkan sebuah Enterprise Service Bus (ESB). Saya yang masih anget2nya keluar dari kampus lumayan kaget ketemu ESB yang sama sekali ga pernah saya temui sebelumnya. Nah, makanya saya cari2 info soal barang ini (sekalian ditulis biar ga lupa). Oke, ESB adalah sebuah arsitektur software yang menyediakan servis berupa komunikasi (messaging) antara satu sistem dengan system lain. Sederhananya sih ESB ini jadi perantara, pihak penengah diantara beberapa system yang ingin berkomunikasi. ESB biasa diimplementasikan dengan teknologi-teknologi yang banyak ditemukan di infrastruktur middleware.</span></div><p class="MsoNormal" style="text-align:justify;text-justify:inter-ideograph"><span class="Apple-style-span"><br /></span></p><img src="http://all-programs.com/wp-content/uploads/2010/10/progress-sonic-esb-v-1.jpg" style="text-align: justify;display: block; margin-top: 0px; margin-right: auto; margin-bottom: 10px; margin-left: auto; cursor: pointer; width: 350px; height: 295px; " border="0" alt="" /><p class="MsoNormal" style="text-align:justify;text-justify:inter-ideograph"><span class="Apple-style-span">Secara umum, ESB menyediakan <i>abstraction layer</i> di atas implementasi sebuah <i>enterprise messaging system</i>. Layer ini memungkinkan <i>integration architects</i> untuk mengekspose dan memanfaatkan message yang diproduksi oleh suatu system untuk dapat diteruskan ke system lain. ESB bagaikan mak comblang, ketika ada seorang jomblo tua karatan dateng minta bantuan, si mak comblang akan menerima foto si jomblo, mungkin dia akan lakukan sedikit manipulasi (diedit dikit fotonya biar agak ganteng) lalu dikirimkannya foto itu kepada seorang wanita muda yang mencari jodoh. Sama prinsipnya, system A akan mengirimkan message dalam bentuk xml dan ESB akan melakukan manipulasi seperti mengubah bentuk xml jika diperlukan. Manipulasi, misalnya pengubahan bentuk, dilakukan untuk menyesuailan xml dengan input yang diperbolehkan oleh system B.</span></p><p class="MsoNormal" style="text-align:justify;text-justify:inter-ideograph"><span class="Apple-style-span"><br /></span></p> <p class="MsoNormal" style="text-align:justify;text-justify:inter-ideograph"><span class="Apple-style-span">Salah satu aplikasi yang dapat digunakan untuk mengembangkan sebuah proses ESB adalah Progres Sonic. Sonic Workbench terintegrasi sepenuhnya dengan eclipse. Yap, Eclipse. Sonic sudah menyediakan banyak proses yang bisa dimanfaatkan, namun jika kita perlu mekalukan kostumisasi, maka pemrograman haruslah dilakukan dengan bahasa Java. Oke Java. Namun menariknya, kita dapat menggunakan library Sonic .Net Client untuk mengembangkan aplikasi berdasarkan Sonic. Yup .Net. Artinya , kita bisa mengembangkan service ESB di dalam workbench dengan java sekaligus memanfaatkan servis yang ada dengan menggunakan .Net. </span></p><p class="MsoNormal" style="text-align:justify;text-justify:inter-ideograph"><span class="Apple-style-span"><br /></span></p> <p class="MsoNormal" style="text-align:justify;text-justify:inter-ideograph"><span class="Apple-style-span">Saya akan bicarakan lagi mengenai detil penggunaan Sonic Workbench di post berikutnya.<span> </span>Bagi kamu-kamu yang mau tau lebih banyak soal teknologi ini, silahkan aja dulu mampir ke <a href="http://web.progress.com/en/sonic/sonic-esb.html">http://web.progress.com/en/sonic/sonic-esb.html</a>. Booyah!</span></p>Farhad Alaydrushttp://www.blogger.com/profile/02135974688853926772noreply@blogger.com0tag:blogger.com,1999:blog-1362636812352831137.post-70236507097052112492010-12-21T23:28:00.001-08:002011-01-05T20:48:03.747-08:00Make Divide and Conquer buat nyelesein problem Fibonacci<div style="text-align: justify;">Tiba tiba saya kepikiran soal algoritme yang dulu dipelajari di kampus. Algoritme kan pada dasarnya merupakan langkah terstruktur buat menyelesaikan masalah tertentu. Jadi belom tentu suatu algoritme yang cocok buat problem A bisa diterapkan dengan tepat di problem B. Salah satu algoritme yang pernah ditanyain waktu saya interview kerja (di tempat yang saya ga jadi ambil) adalah algoritme <em>divide and conquer</em> dan <em>dynamic programming</em>.Saya pernah belajar dua algoritme ini tapi saya ngga pernah ngerti kapan saya harus memutuskan pake <em>divide and conquer</em> atau <em>dynamic programming</em>. Hingga beberapa menit yang lalu saya mendapat sedikit pencerahan (makanya langsung ditulis biar ga lupa).</div><div style="text-align: left;"><br /></div><span xmlns=""><p style="text-align: justify">Oke kita coba liat dulu deh <em>divide and conquer</em> (saya inget kalo yang ini ni) yang dulu pernah diterapkan oleh bangsa Belanda yang sukses megobrak-abrik Nusantara. Algoritme ini udah ada sejak awal abad ke 19. Bahkan penerapannya sebenernya udah dari kapan tau, tapi baru dirumuskan aja kayaknya. Pada dasarnya algoritme ini bekerja dengan cara memecah suatu masalah besar menjadi sub-sub masalah hingga ke sub masalah terkecil dan menyelesaikan setiap sub masalah tersebut. Istilah peribahasanya, <em>sedikit-sedikit lama lama jadi bukit</em>. Ya secara logika kan kalo ada masalah besar kita selesein pelan-pelan dari yang paling gampang dulu, satu per satu, lama-lama kan selesai tuh semua masalah.<br /></p><p style="text-align: justify"><br /></p><p style="text-align: justify">Nah, misalnya kita diberikan masalah Fibonacci. Problem yang selalu diberikan di hamper semua mata kuliah. Kan Fibonacci itu intinya jumlah dua bilangan sebelumnya dalam suatu deret, atau yang kalo ditulis dalam bahasa matematika jadi begini:<br /></p><p style="text-align: justify"></p><div style="text-align: center;"><span class="Apple-style-span"><br /></span></div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij006fMVkgRGcx3aAJ4Y5vY9MxwydDIDFNqhbwX7xL_5Cy_isra2i4Clt_XghUaFNMcILcWhzhImYur6qUSCTfDaNm1TCj_Gwl_SEaOhod0k6IdHLwd65nVAwY0qgEP9_geneadxrk36Y/s320/fib_eq.jpg" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 94px;" border="0" alt="" id="BLOGGER_PHOTO_ID_5553408388568515490" /><p></p><p style="text-align: justify">Mari kita coba pecahkan problem ini dengan algoritme <em>divide and conquer</em>. Problem ini bisa kita selesaikan dengan algoritme yang kira-kira bunyinya begini:<br /></p><p style="text-align: justify; margin-left: 162pt"><span><strong style="font-size: 10pt; ">If n<=</strong><b><span class="Apple-style-span">1</span></b><strong style="font-size: 10pt; "> </strong><strong style="font-size: 10pt; ">return </strong><strong><span class="Apple-style-span">n</span></strong><br /></span></p><p style="text-align: justify; margin-left: 162pt"><span style="font-size:10pt"><strong>else</strong> <strong>return F(n-1) + F(n-2)</strong><br /> </span></p><p style="text-align: justify"><br /></p><p style="text-align: justify">Oke, kalo algoritme itu kita jalanin untuk meghitung Fib(4), yang terjadi adalah seperti tree dibawah ini:<br /></p><p style="text-align: center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJJ7OP7w8bte7rF43WfJJx3qS6rvPfOu1OqtDPEgXDLiZ8HpixXSf_WDj-hhzJB9ZlZ0Mcdfh0DoNAJSVRuWoMHsFq0lJM6b0nGi1cPx6cwO-AGL4NSewYf_vYCXFU1eDZX8iG2dsmMrA/s320/fib.jpg" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 202px;" border="0" alt="" id="BLOGGER_PHOTO_ID_5553408548262348658" /> </p><p style="text-align: justify">Coba deh liat, Fib(2) diulang perhitungannya sampe 2 kali.. Bayangkan kalo kita menghitung Fib(6), maka akan nada penghitungan F(6)=F(5) + F(4), F(5)=F(4)+F(3), yang melibatkan dua kali penghitungan F(4) yang artinya aka nada 4 kali penghitungan F(2). Berarti kalo kita mau itung F(n) bakal makin banyak perulangan yang dilakukan dan bakalan menuju ke <em>eksponensial time</em> ni algoritmenya.<br /></p><p style="text-align: justify"><br /></p><p style="text-align: justify"> Hmm, gimana cara menyelesaikan si Fibonacci ini supaya jalannya algoritme ga panjang ya? Kayaknya sih bisa pake <em>Dynamic Programming</em>.. Oke, nanti saya cobain lagi deh.. hehe..<br /></p></span>Farhad Alaydrushttp://www.blogger.com/profile/02135974688853926772noreply@blogger.com0tag:blogger.com,1999:blog-1362636812352831137.post-76036291279720067822010-07-15T23:18:00.001-07:002011-01-06T22:17:15.618-08:00Learning Content Development System (LCDS) Tutorial (part 4)<p>1. Selanjutnya, kita akan mencoba membuat animasi<i> </i>pada konten kita. Pertaman, klik topic yang masih kosong.</p> <p><a href="http://lh5.ggpht.com/_7KUlToPrkJ8/TD_5b5H22EI/AAAAAAAAAH4/3NYTjx7QSe0/s1600-h/clip_image001%5B3%5D.png"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="clip_image001" border="0" alt="clip_image001" src="http://lh5.ggpht.com/_7KUlToPrkJ8/TD_5c2cypBI/AAAAAAAAAH8/S7jcuJ3O7_o/clip_image001_thumb.png?imgmax=800" width="173" height="150" /></a></p> <p> </p> <p>2. Kemudian, pada template, pilihlah Watch (lihat gambar) dan klik radio button Animation</p> <p><a href="http://lh5.ggpht.com/_7KUlToPrkJ8/TD_5ePXZ8dI/AAAAAAAAAIA/sIZfH2_vPZo/s1600-h/clip_image005%5B3%5D.png"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="clip_image005" border="0" alt="clip_image005" src="http://lh6.ggpht.com/_7KUlToPrkJ8/TD_5fKhOfxI/AAAAAAAAAIE/_x0UABRIIJ4/clip_image005_thumb.png?imgmax=800" width="182" height="156" /></a></p> <p> </p> <p>3. Nah, sekarang muncullah template animation. Template inihanya terbagi dari dua bagian, yaitu bagian teks dan bagian animasi. Tuliskanlah keterangan atau teks lain di bagian teks.</p> <p><a href="http://lh6.ggpht.com/_7KUlToPrkJ8/TD_5gDrivMI/AAAAAAAAAII/P2GuF7XRnB4/s1600-h/clip_image007%5B3%5D.png"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="clip_image007" border="0" alt="clip_image007" src="http://lh4.ggpht.com/_7KUlToPrkJ8/TD_5hZiDHJI/AAAAAAAAAIM/wouOn23ZXi4/clip_image007_thumb.png?imgmax=800" width="244" height="98" /></a></p> <p> </p> <p>4. Animasi yang dimasukkan dapat berupa *.swf, *.xaml dan *.wmv. Sekarang ini kita cobakan saja menggunakan file berformat wmv yang terdapat di sample video pada windows 7. Kopikan file video dari <b>C:\Users\Public\Videos\Sample Videos</b> ke <b>C:\ProgramData\Microsoft Learning\LCDS\courses\pelajaran_saya\course\media</b>. Klik Browse dan pilih video atau animasi yang akan kita masukkan. Pilih videonya dan tekan OK.</p> <p> </p> <p>5. Berikutnya, save course dan tekan tombol preview untuk melihat hasilnya.</p> <p><a href="http://lh6.ggpht.com/_7KUlToPrkJ8/TD_5j_7jtEI/AAAAAAAAAIQ/LpmVe2ZW-JE/s1600-h/clip_image008%5B3%5D.png"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="clip_image008" border="0" alt="clip_image008" src="http://lh4.ggpht.com/_7KUlToPrkJ8/TD_5lc970QI/AAAAAAAAAIU/jzJvPY3Ujjw/clip_image008_thumb.png?imgmax=800" width="244" height="130" /></a></p> <p> </p> <p>6. Sekarang kita coba menggunakan fitur demonstration. Silahkan buat topic baru (lihat kembali langkah kerja 4). Dan pada template Watch , pilihlah Demonstration. Berbeda dengan animation, Demonstration menampilkan video atau animasi di window berbeda (tidak seperti fitur animation yang langsung menampilkan animasinya di halaman yang sama).</p> <p><a href="http://lh3.ggpht.com/_7KUlToPrkJ8/TD_5mFqTLpI/AAAAAAAAAIY/8Clg-ej9T-w/s1600-h/clip_image011%5B3%5D.png"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="clip_image011" border="0" alt="clip_image011" src="http://lh4.ggpht.com/_7KUlToPrkJ8/TD_5m_yh3nI/AAAAAAAAAIc/0cNekT9YA7M/clip_image011_thumb.png?imgmax=800" width="202" height="157" /></a></p> <p> </p> <p>7. Pada template silahkan masukkan gambar dengan mengklik tombol Browse pada kolom Picture, dan masukkan video dengan cara mengklik tombol Browse pada kolom Demo. Ingat, sebelum dimasukkan ke dalam course, segala macam media harus dikopi terlebih dahulu ke <b>C:\ProgramData\Microsoft Learning\LCDS\courses\pelajaran_saya\course\media.</b></p> <p><a href="http://lh6.ggpht.com/_7KUlToPrkJ8/TD_5oLfyckI/AAAAAAAAAIg/-rPloHF1Ttg/s1600-h/clip_image012%5B3%5D.png"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="clip_image012" border="0" alt="clip_image012" src="http://lh3.ggpht.com/_7KUlToPrkJ8/TD_5pNwrh0I/AAAAAAAAAIk/8FOgxz8E98Y/clip_image012_thumb.png?imgmax=800" width="244" height="106" /></a></p> <p> </p> <p>8. Berikan penjelasan mengenai demonstrasi pada kolom Paragraph.</p> <p><a href="http://lh3.ggpht.com/_7KUlToPrkJ8/TD_5p5XwZpI/AAAAAAAAAIo/pR8dK7BcP2o/s1600-h/clip_image013%5B3%5D.png"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="clip_image013" border="0" alt="clip_image013" src="http://lh6.ggpht.com/_7KUlToPrkJ8/TD_5qu1Mq5I/AAAAAAAAAIs/F6LD1s1BWaI/clip_image013_thumb.png?imgmax=800" width="169" height="82" /></a></p> <p> </p> <p>9. Tekan save dan klik preview untuk melihat hasilnya. Pada bagian hasilnya, klik tombol Launch untuk menjalankan animasi.</p> <p> </p> <p>Booyah!</p>Farhad Alaydrushttp://www.blogger.com/profile/02135974688853926772noreply@blogger.com0tag:blogger.com,1999:blog-1362636812352831137.post-4804309610285811882010-07-15T23:11:00.001-07:002011-01-06T22:17:32.936-08:00Learning Content Development System (LCDS) Tutorial (part 3)<p>Oke, di part ke tiga ini akan kita cobain fitur interactive job aid, selamat mencobaaaa.. </p> <p> </p> <p>1. Berikutnya, kita akan coba fitur <i>Interactive Job Aid</i> untuk membuat serangkaian pertanyaan boolean (Yes-No Question) dalam sebuah decision tree. Arsitektur informasi yang akan kita bangun misalnya seperti ini:</p> <p><a href="http://lh3.ggpht.com/_7KUlToPrkJ8/TD_385KosuI/AAAAAAAAAG4/fboOtIw-Ozw/s1600-h/clip_image002%5B3%5D.jpg"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image002" border="0" alt="clip_image002" src="http://lh4.ggpht.com/_7KUlToPrkJ8/TD_3-D648TI/AAAAAAAAAG8/bbq799sCPYY/clip_image002_thumb.jpg?imgmax=800" width="244" height="172" /></a></p> <p>Silahkan klik salah satu Topic dalam course. </p> <p><a href="http://lh3.ggpht.com/_7KUlToPrkJ8/TD_3-y_kv1I/AAAAAAAAAHA/OnGRQg0j8dU/s1600-h/clip_image003%5B3%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image003" border="0" alt="clip_image003" src="http://lh3.ggpht.com/_7KUlToPrkJ8/TD_3_yLA-8I/AAAAAAAAAHE/FytZUuTL0B4/clip_image003_thumb.png?imgmax=800" width="147" height="146" /></a></p> <p> </p> <p>2. Berikutnya, masih dalam template <i>interact</i>, pilihlah radio button Interactive Job Aid.</p> <p><a href="http://lh5.ggpht.com/_7KUlToPrkJ8/TD_4BC01tyI/AAAAAAAAAHI/m28pvQlNg-A/s1600-h/clip_image004%5B3%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image004" border="0" alt="clip_image004" src="http://lh6.ggpht.com/_7KUlToPrkJ8/TD_4BwFHX2I/AAAAAAAAAHM/kvi1c80BXBU/clip_image004_thumb.png?imgmax=800" width="156" height="131" /></a></p> <p> </p> <p>3. Sekarang Anda akan melihat template baru muncul. Dalam template interactive job aid ini, kita melakukan penambahan pertanyaan sebagaimana kita menambah page pada fitur Adventure Activity. Kita buat pertanyaan pertama, silahkan isikan pertanyaan di kolom “Yes/No Question”, misalkan tulislah pertanyaan yang tercantum pada langkah 26, “Apakah hewan ini berkaki empat?”</p> <p><a href="http://lh5.ggpht.com/_7KUlToPrkJ8/TD_4C8IOURI/AAAAAAAAAHQ/-nxyndBDYc0/s1600-h/clip_image005%5B3%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image005" border="0" alt="clip_image005" src="http://lh4.ggpht.com/_7KUlToPrkJ8/TD_4DtZegKI/AAAAAAAAAHU/X67-hoq3SKo/clip_image005_thumb.png?imgmax=800" width="244" height="58" /></a></p> <p> </p> <p>4. Kemudian di bagian bawah ada kolom If Yes, klik radio button “Go to Question”, dan isikan kotak di sampingnya dengan angka 2 (secara default sudah terisi). Lakukan hal yang sama untuk kolom If No.</p> <p><a href="http://lh3.ggpht.com/_7KUlToPrkJ8/TD_4EhX17II/AAAAAAAAAHY/or5zxEXl-V0/s1600-h/clip_image006%5B3%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image006" border="0" alt="clip_image006" src="http://lh3.ggpht.com/_7KUlToPrkJ8/TD_4Fn3t6cI/AAAAAAAAAHc/slwVKzswkTo/clip_image006_thumb.png?imgmax=800" width="238" height="110" /></a> <a href="http://lh6.ggpht.com/_7KUlToPrkJ8/TD_4GSaJn2I/AAAAAAAAAHg/QM7vAXPJBzA/s1600-h/clip_image007%5B3%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image007" border="0" alt="clip_image007" src="http://lh5.ggpht.com/_7KUlToPrkJ8/TD_4HY4w8rI/AAAAAAAAAHk/44QVOaU8qJM/clip_image007_thumb.png?imgmax=800" width="229" height="108" /></a></p> <p> </p> <p>5. Kita telah memerintahkan kepada aplikasi untuk pergi ke pertanyaan ke 2 jika siswa memilih jawaban “Yes” pada pertanyaan pertama. Oleh karena itu kita perlu membuat pertanyaan ke 2. Klik tombol “Next Question” untuk membuat pertanyaan ke 2.</p> <p><a href="http://lh4.ggpht.com/_7KUlToPrkJ8/TD_4IyFx07I/AAAAAAAAAHo/b7om_vuX8T0/s1600-h/clip_image008%5B3%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image008" border="0" alt="clip_image008" src="http://lh6.ggpht.com/_7KUlToPrkJ8/TD_4JlDgNcI/AAAAAAAAAHs/F6UFnpk1W9I/clip_image008_thumb.png?imgmax=800" width="244" height="44" /></a></p> <p> </p> <p>6. Isikan pertanyaan kedua, “Apakah hewan tersebut karnivora”. Pada kolom If Yes, klik radio button Display Decision untuk memunculkan kesimpulan dari decision tree. Pada kolom Display Decision tuliskan “Hewan itu adalah Harimau”. Pada kolom If Yes, klik juga radio button Display Decision dan tuliskan “Hewan itu adalah Sapi”.</p> <p> </p> <p>7. Simpan course dengan menekan tombol Save atau Ctrl+S.</p> <p> </p> <p>8. Tekan tombol preview (lihat kembali langkah 18) dan lihat hasilnya.</p> <p><a href="http://lh3.ggpht.com/_7KUlToPrkJ8/TD_4KUe6E3I/AAAAAAAAAHw/1JQhDCDwwNo/s1600-h/clip_image009%5B3%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image009" border="0" alt="clip_image009" src="http://lh3.ggpht.com/_7KUlToPrkJ8/TD_4LKfjJjI/AAAAAAAAAH0/trIGEN-NsKs/clip_image009_thumb.png?imgmax=800" width="244" height="44" /></a></p>Farhad Alaydrushttp://www.blogger.com/profile/02135974688853926772noreply@blogger.com0tag:blogger.com,1999:blog-1362636812352831137.post-87643899711995642972010-07-15T21:38:00.001-07:002011-01-06T22:17:45.157-08:00Learning Content Development System (LCDS) Tutorial (part 2)<p>Yup, pada <a href="http://kodingsambilngopi.blogspot.com/2010/07/learning-content-development-system.html">part 1</a> kita sudah berkenalan dengan fitur pertama dari LCDS. Sekarang kita akan mencoba tentang template drag and drop.</p> <p> </p> <p>1. Selanjutnya, kita coba membuat kuis sederhana dengan fitur <i>drag and drop</i>. Klik Introduction pada <i>Course Structure</i> dan pastikan Introduction terpilih (sebenarnya ini bisa dilakukan pada bagian manapun dalam struktur, tapi supaya seragam, kita samakan aja dulu ya..)</p> <p><a href="http://lh4.ggpht.com/_7KUlToPrkJ8/TD_iMpPSVdI/AAAAAAAAAGY/hgvkkmyH-js/s1600-h/clip_image003%5B3%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image003" border="0" alt="clip_image003" src="http://lh3.ggpht.com/_7KUlToPrkJ8/TD_iNqjppRI/AAAAAAAAAGc/1KBTQ6yruCw/clip_image003_thumb.png?imgmax=800" width="176" height="169" /></a></p> <p> </p> <p>2. Masih pada fitur <i>interactivity</i> (yang gambar <i>mouse</i> itu), pilih <i>radio button</i> bertuliskan Drag and Drop.</p> <p><a href="http://lh4.ggpht.com/_7KUlToPrkJ8/TD_iOg_e30I/AAAAAAAAAGg/Wc2GRKo-efw/s1600-h/clip_image004%5B3%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image004" border="0" alt="clip_image004" src="http://lh6.ggpht.com/_7KUlToPrkJ8/TD_iPkBcp1I/AAAAAAAAAGk/H6HKPYtjGUU/clip_image004_thumb.png?imgmax=800" width="154" height="158" /></a></p> <p> </p> <p>3. Maka, akan muncul template drag and drop. Fitur ini intinya kita membuat beberapa kategori beserta anggota masing-masing kategori tersebut. Misalkan kita punya table seperti ini: <table border="1" cellspacing="0" cellpadding="0"><tbody> <tr> <td valign="top"> <p><b>Hewan</b></p> </td> <td valign="top"> <p><b>Tumbuhan</b></p> </td> <td valign="top"> <p><b>Makanan</b></p> </td> </tr> <tr> <td valign="top"> <p>Kuda</p> </td> <td valign="top"> <p>Beringin</p> </td> <td valign="top"> <p>Tahu</p> </td> </tr> <tr> <td valign="top"> <p>Ayam</p> </td> <td valign="top"> <p>Anggrek</p> </td> <td valign="top"> <p>Mie Rebus</p> </td> </tr> <tr> <td valign="top"> <p>Sapi</p> </td> <td valign="top"> <p>Mawar</p> </td> <td valign="top"> <p>Roti</p> </td> </tr> </tbody></table> </p> <p>Dengan fitur ini kita membuat suatu kuis untuk mencocokkan elemen elemen seperti kuda, mawar, dan roti dengan kategorinya. </p> <p> </p> <p>4. Oke, kita fokus ke template drag and drop yang muncul. Pada kolom Category 1,ketikkan “Hewan”, kemudian di bawahnya, yaitu pada kolom Category 1 item, ketikkan Kuda, kemudian Ayam, dan Sapi. Lakukan seterusnya untuk kategori lain. </p> <p><a href="http://lh3.ggpht.com/_7KUlToPrkJ8/TD_iQQCS8uI/AAAAAAAAAGo/x2VnxAD7YGQ/s1600-h/clip_image005%5B3%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image005" border="0" alt="clip_image005" src="http://lh4.ggpht.com/_7KUlToPrkJ8/TD_iRHMganI/AAAAAAAAAGs/goiv9uDuKTU/clip_image005_thumb.png?imgmax=800" width="244" height="127" /></a></p> <p>5. Save course dengan cara menekan tombol Save atau Ctrl + S, lalu tekan tombol Preview </p> <p> </p> <p>6. Sekarang, silahkan dicoba kuisnya.. Drag and drop item-item ke dalam kategori yang tepat. Jika sudah yakin dengan jawabannya, tekan tombol SUBMIT untuk mengetahui hasilnya.. Asik kan.. J</p> <p><a href="http://lh3.ggpht.com/_7KUlToPrkJ8/TD_iSdx-0BI/AAAAAAAAAGw/DyKcKvkOgtA/s1600-h/clip_image006%5B3%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image006" border="0" alt="clip_image006" src="http://lh5.ggpht.com/_7KUlToPrkJ8/TD_iTiZThbI/AAAAAAAAAG0/PvK2x36DCXo/clip_image006_thumb.png?imgmax=800" width="244" height="156" /></a></p>Farhad Alaydrushttp://www.blogger.com/profile/02135974688853926772noreply@blogger.com0tag:blogger.com,1999:blog-1362636812352831137.post-74042960570541869622010-07-15T21:30:00.000-07:002011-01-06T22:17:56.752-08:00Learning Content Development System (LCDS) Tutorial (part 1)<p>Belajar melalui media online sudah ada di depan mata dan kita akan mencoba berkenalan dan mengoperasikan tool LCDS untuk membuat materi pelajaran online. Sudah siap? Mari kita mulai berkarya dengan LCDS.</p> <p> </p> <p>1. Bukalah program LCDS dengan cara klik Start à All Programs à Microsoft Learning àLearning Content Development System</p> <p><a href="http://lh3.ggpht.com/_7KUlToPrkJ8/TD_goIcnhDI/AAAAAAAAAEk/B1AR_ZxMnyg/s1600-h/clip_image004%5B5%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image004" border="0" alt="clip_image004" src="http://lh5.ggpht.com/_7KUlToPrkJ8/TD_gpxGqPEI/AAAAAAAAAEo/7CIkh52F_yo/clip_image004_thumb%5B2%5D.png?imgmax=800" width="218" height="185" /></a></p> <p>2. Oke, setelah diklik, akan muncul window LCDS yang tampilannya seperti gambar di bawah ini</p> <p><a href="http://lh4.ggpht.com/_7KUlToPrkJ8/TD_grgPKABI/AAAAAAAAAEs/fVCzP4Bjmvk/s1600-h/clip_image005%5B3%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image005" border="0" alt="clip_image005" src="http://lh3.ggpht.com/_7KUlToPrkJ8/TD_gs2_wHNI/AAAAAAAAAEw/ZF-tc7QW9oE/clip_image005_thumb.png?imgmax=800" width="244" height="139" /></a></p> <p>3. Sekarang, buatlah <i>Course</i> baru dengan cara klik New (ada di sudut kiri atas). Kemudian akan muncul jendela New – Webpage Dialog. SIlahkan isikan nama <i>course</i> yang anda inginkan, misalnya “Pelajaran Saya” lalu tekan OK. </p> <p> </p> <p>4. Nah, setelah <i>course</i> sukses dibuat, akan muncul <i>course structure</i> yang menunjukkan struktur hierarki dari konten pelajaran ini. Terdapat empat tingkatan dalam struktur <i>course</i> ini yaitu “course”, “module”, “lesson”, dan “topic”. </p> <p><a href="http://lh6.ggpht.com/_7KUlToPrkJ8/TD_gt7_Lm3I/AAAAAAAAAE0/NlLRgzhk1u0/s1600-h/clip_image023%5B3%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image023" border="0" alt="clip_image023" src="http://lh5.ggpht.com/_7KUlToPrkJ8/TD_guxeOr-I/AAAAAAAAAE4/-lyyJqRxK0I/clip_image023_thumb.png?imgmax=800" width="155" height="146" /></a></p> <p></p> <p><b><a href="http://lh4.ggpht.com/_7KUlToPrkJ8/TD_gvgQaiFI/AAAAAAAAAE8/mQ0IB7L7GDc/s1600-h/clip_image035%5B3%5D.png"></a></b><b></b></p> 5. Klik <i>module</i> pada <i>course structure</i>. Pastikan tulisan “Module” di-highlight oranye. <p></p> <p><a href="http://lh4.ggpht.com/_7KUlToPrkJ8/TD_gwTyzvmI/AAAAAAAAAFA/8d0zdwiLYbY/s1600-h/clip_image036%5B3%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image036" border="0" alt="clip_image036" src="http://lh6.ggpht.com/_7KUlToPrkJ8/TD_gxlhEiJI/AAAAAAAAAFE/RI3Zfq4R-iU/clip_image036_thumb.png?imgmax=800" width="165" height="144" /></a></p> <p>6. Sekarang kita mulai berkarya. Klik tombol dengan gambar Mouse (lihat gambar di bawah). </p> <p><a href="http://lh5.ggpht.com/_7KUlToPrkJ8/TD_gyuR3D_I/AAAAAAAAAFI/2EhbN1gqYmg/s1600-h/clip_image037%5B3%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image037" border="0" alt="clip_image037" src="http://lh4.ggpht.com/_7KUlToPrkJ8/TD_gztFahTI/AAAAAAAAAFM/LoSmOZz9bho/clip_image037_thumb.png?imgmax=800" width="164" height="140" /></a></p> <p>Ini adalah template <i>interact</i> yang dapat kita gunakan untuk membuat konten pembelajaran yang interaktif. Kita akan coba satu-per-satu template yang ada di dalam <i>interact</i> ini. </p> <p>7. Pilihlah <i>radio button </i>Adventure Activity, maka akan muncul template pada bagian <i>Page</i></p> <p><a href="http://lh6.ggpht.com/_7KUlToPrkJ8/TD_g1f4x_ZI/AAAAAAAAAFQ/nUAMo5EyEbM/s1600-h/clip_image038%5B3%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image038" border="0" alt="clip_image038" src="http://lh6.ggpht.com/_7KUlToPrkJ8/TD_g2fmVFtI/AAAAAAAAAFU/GhAn85-AKw8/clip_image038_thumb.png?imgmax=800" width="244" height="181" /></a></p> <p>8. Pada bagian Text, ketikkan “Silahkan pilih satu dari beberapa pilihan ini.”</p> <p><a href="http://lh6.ggpht.com/_7KUlToPrkJ8/TD_g3Jp6ZYI/AAAAAAAAAFY/4xR3mZMvF_Q/s1600-h/clip_image040%5B3%5D.jpg"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image040" border="0" alt="clip_image040" src="http://lh5.ggpht.com/_7KUlToPrkJ8/TD_g31XGlHI/AAAAAAAAAFc/TOVNv77IkQM/clip_image040_thumb.jpg?imgmax=800" width="220" height="157" /></a></p> <p>9. Untuk memasukkan gambar, kita harus terlebih dahulu mengkopi gambar yang akan kita masukkan ke folder </p> <p><b>C:\ProgramData\Microsoft Learning\LCDS\courses\pelajaran_saya\course\media</b></p> <p>Silahkan kopi gambar yang anda inginkan (misalkan dari <b>C:\Users\Public\Pictures\Sample Pictures</b>) ke folder tersebut. Sebaiknya, sesuaikan dulu ukuran gambar yang akan diletakkan di halaman ini agar gambar tidak terpotong.</p> <p>10. Setelah gambar dikopi, klik Browse, kemudian pilihlah gambar yang telah kita kopi tadi.</p> <p><a href="http://lh6.ggpht.com/_7KUlToPrkJ8/TD_g6jWsWII/AAAAAAAAAFg/19LDBFim-0E/s1600-h/clip_image042%5B3%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image042" border="0" alt="clip_image042" src="http://lh5.ggpht.com/_7KUlToPrkJ8/TD_g7gqzBjI/AAAAAAAAAFk/HqybjrR7veI/clip_image042_thumb.png?imgmax=800" width="170" height="176" /></a></p> <p>11. Berikutnya, kita buat beberapa halaman lagi, caranya, tekan tombol <i>next page</i> (lihat gambar)</p> <p><a href="http://lh4.ggpht.com/_7KUlToPrkJ8/TD_g9DQUfhI/AAAAAAAAAFo/pvkvJHA6fGQ/s1600-h/clip_image044%5B3%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image044" border="0" alt="clip_image044" src="http://lh5.ggpht.com/_7KUlToPrkJ8/TD_g93b6wYI/AAAAAAAAAFs/af5sOGqyeHs/clip_image044_thumb.png?imgmax=800" width="244" height="155" /></a></p> <p>Secara otomatis, sistem akan membuat halaman ke-2 yang masih polos, jadi jangan panic kalau gambar koala dan tulisan di kolom teks menghilang. </p> <p><a href="http://lh4.ggpht.com/_7KUlToPrkJ8/TD_g_LLUbeI/AAAAAAAAAFw/uLvCPY7S1HA/s1600-h/clip_image045%5B3%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image045" border="0" alt="clip_image045" src="http://lh6.ggpht.com/_7KUlToPrkJ8/TD_hAYdt5SI/AAAAAAAAAF0/bYC24Qepd90/clip_image045_thumb.png?imgmax=800" width="244" height="154" /></a></p> <p>12. Isi halaman 2 dengan tulisan “INI HALAMAN 2” dan gambar seperti halnya kita mengisi halaman 1 pada langkah kerja 8 sampai 10. </p> <p>13. Buatlah halaman ke-3 lalu isi dengan tulisan “INI HALAMAN 3” dan gambar</p> <p>14. Kemudian, kembalilah ke halaman 1 dengan cara menekan tombol previous sebanyak 2 kali</p> <p>15. <a href="http://lh4.ggpht.com/_7KUlToPrkJ8/TD_hB6QdqYI/AAAAAAAAAF4/HEJbWSMH_jg/s1600-h/clip_image046%5B3%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image046" border="0" alt="clip_image046" src="http://lh4.ggpht.com/_7KUlToPrkJ8/TD_hCyjF0RI/AAAAAAAAAF8/L78dLKO1aes/clip_image046_thumb.png?imgmax=800" width="244" height="78" /></a></p> <p>16. Oke, kita sudah kembali ke halaman 1, sekarang, pada bagian bawah template ada tulisan “Choice 1”, “Choice 2”, dan seterusnya. Tuliskan “Ke halaman 2” pada kolom <i>choice 1</i>, kemudian pada kolom <i>go to page</i>, ketikkan angka 2. </p> <p><a href="http://lh6.ggpht.com/_7KUlToPrkJ8/TD_hD3fDezI/AAAAAAAAAGA/3WABC3oHBG4/s1600-h/clip_image047%5B3%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image047" border="0" alt="clip_image047" src="http://lh6.ggpht.com/_7KUlToPrkJ8/TD_hElxsh7I/AAAAAAAAAGE/JYvsjvHGHOA/clip_image047_thumb.png?imgmax=800" width="244" height="47" /></a></p> <p>Lakukan hal yang sama untuk kolom Choice 2, namun arahkan pilihan ini pada halaman 3.</p> <p>17. Nah sekarang tekan tombol Save pada bagian atas window atau tekan Ctrl + S untuk menyimpan course. </p> <p>18. Kemudian, tekan tombol Preview pada bagian atas window.</p> <p><a href="http://lh3.ggpht.com/_7KUlToPrkJ8/TD_hF9lo6YI/AAAAAAAAAGI/Bq8NMhA5u_w/s1600-h/clip_image048%5B3%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image048" border="0" alt="clip_image048" src="http://lh3.ggpht.com/_7KUlToPrkJ8/TD_hHSVObzI/AAAAAAAAAGM/NQR_q1uTgfI/clip_image048_thumb.png?imgmax=800" width="215" height="117" /></a></p> <p>19. Setelah tombol preview diklik, maka akan muncul window yang berisi konten yang telah kita buat.</p> <p><a href="http://lh3.ggpht.com/_7KUlToPrkJ8/TD_hIWCa1LI/AAAAAAAAAGQ/UkzOhHD2h2s/s1600-h/clip_image049%5B3%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image049" border="0" alt="clip_image049" src="http://lh5.ggpht.com/_7KUlToPrkJ8/TD_hJvRTTbI/AAAAAAAAAGU/0kOtNEPGTFU/clip_image049_thumb.png?imgmax=800" width="244" height="81" /></a></p> <p> </p> <p>Berikutnya kita lanjut di part 2 ya…</p> <p> </p> <p><strong>Lanjutkan ke:</strong></p> <p><a href="http://kodingsambilngopi.blogspot.com/2010/07/learning-content-development-system_15.html">- LCDS Tutorial Part 2</a></p>Farhad Alaydrushttp://www.blogger.com/profile/02135974688853926772noreply@blogger.com1tag:blogger.com,1999:blog-1362636812352831137.post-27140166166656309642010-05-03T01:24:00.000-07:002011-01-05T20:48:44.968-08:00Kenapa di Theme Windows 7 Adanya Theme "United States"Yah, sebenernya wajar-wajar aja sih kalo themes yang disediain di Windows 7 yang berhubungan dengan negara adanya United States, lha wong mereka yang bikin.. Tadinya saya berpikir begitu aja, tapi ternyata themes Aero yang disediakan ngga cuma United States aja loh.. Emang sih, Indonesia tetep ngga ada, tapi ternyata ada yang lain juga. Themes yang lain tidak dimunculkan sehubungan dengan region ketika kita setting Windows 7. Jadi si Windows 7 ini pinter, dia bisa deteksi posisi dan memunculkan themes yang cocok aja (Tapi kenapa Indonesia ngga ada juga??)..<br /><br />Nah, untuk mengaktifkan tema tersembunyi ini ternyata gampang banget. Tema-tema negara yang lain secara default disimpan oleh Windows 7 di C:\Windows\Globalization\MCT\. Di folder ini, terdapat beberapa tema negara seperti :<br /><blockquote>MCT-AU : Australia<br />MCT-GB : Great Britain<br />MCT-US: United States<br />MCT-CA: Canada<br />MCT-ZA: South Africa</blockquote><br />Untuk mengaktifkannya, kita perlu ngakses folder Theme dan langsung aja klik dua kali file theme yang ada di situ.. Asiik.. Tapi kapan ya Indonesia masuk ke sini? Musti ada pentolan Microsoft di Amerika sono yang asli Indonesia kayaknya.. :)<br /><br />-- Koding Sambil Ngopi --<br />-- Farhad Alaydrus --<br /><blockquote></blockquote>Farhad Alaydrushttp://www.blogger.com/profile/02135974688853926772noreply@blogger.com2tag:blogger.com,1999:blog-1362636812352831137.post-83028125200858385852010-05-03T01:02:00.000-07:002011-01-05T20:48:44.969-08:00Ternyata Banyak Shortcut Asik di Windows 7Sore ini lagi ngantor bareng sule yang tidak lain tidak bukan adalah empunya<a href="http://blog.syabac.web.id"> syabac.web.id</a> dan ngobrolin tentang shortcut-shorcut asik di Windows 7. Windows 7 dengan fitur Aeronya menyediakan fasilitas yang bener-bener bisa memanjakan penggunanya dengan antarmuka dan interaksi yang asik banget. Nah, untuk melengkapi experience dalam ber-Seven, kita cobain yuk shortcut-shortcut asiknya..<br /><blockquote><br />* Win + Tab : Menampilkan windows Aero, kita bisa gonta-ganti window yang lagi aktif dengan tampilan 3D yang muantab..<br />* Win + Spasi : Membuat semua window yang sedang terbuka menjadi transparan dan menampilkan desktop. Setara sama kalo kita mouse over di bagian pojok kanan bawah layar.<br />* Win + Panah Atas: Maximize Wiindow yang sedang aktif<br />* Win + Panah Bawah: Minimize Window yang sedang aktif<br />* Win + Panah Kanan: Memposisikan Window yang aktif menjadi dock kanan<br />* Win + Panah Kiri: Memposisikan Window yang aktif menjadi dock kiri<br />* Wiin + P : Memunculkan pilihan projector, bisa banget kta pake kalo kita lagi nyambungin komputer ke proyektor<br />* Win + T: Memfokuskan ke taskbar yang sedang terbuka.. Bisa kita pakai untuk milih window mana yang mau kita aktifin.<br />* Win + Tanda Plus / Minus: Zoom in dan out windows, pas kita ngeklik ini, otomatis langsung muncul Magnifiernya.<br />* Kita juga bisa ngegoyang-goyang window yang lagi aktif untuk "ngerontokin" window yang lain.. Kalo kita goyang lagi, window yang pada rontok masuk taskbar tadi bakal muncul lagi..<br /></blockquote><br />Apa lagi ya? Nanti kalo ketemu lagi langsung saya update deh.. :)<br /><br />-- Koding Sambil Ngopi --<br />-- Farhad Alaydrus --Farhad Alaydrushttp://www.blogger.com/profile/02135974688853926772noreply@blogger.com1tag:blogger.com,1999:blog-1362636812352831137.post-88107796266551029192010-05-02T23:47:00.000-07:002011-01-05T20:48:44.969-08:00On/Off Windows 7 Feature: Jawaban Atas Pertanyaan “Mana Gamenya Windows 7?”<span style=";font-family:arial;font-size:100%;" lang="EN-US"><span style="font-family:arial;">Ketika pertama kali mengoperasikan Windows 7 Professional, hal pertama yang saya cari adalah Game. Saya tidak kunjung sukses menemukan keberadaan game di Windows 7 sebagaimana Windows seri terdahulu. Ternyata, secara default, game memang tidak dimunculkan di Windows 7 Professional ini. Namun, kita bisa dengan mudah menyalakan dan mematikan fitur Game dan fitur-fitur lainnya di Windows 7. Oke, untuk mengaktifkan dan menonaktifkan fitur Windows 7, kita perlu mengakses Control Panel -> Programs and Feature.</span><span style="font-family:arial;"> </span><span style="font-family:arial;">Maka akan muncul jendela seperti di bawah ini:</span>
<br /></span><p style="text-align: left;font-family:arial;" class="MsoNormal"><span style="font-size:100%;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixam_6c5poqkSGTJ8RP6ucEBguvjUCgOBdtEVWvP-OCmdND2m-Z3TVwZAIw07p8uZS2LmGunorYR80xF6UdwpUWeQ-iVNS8oBdhQ61t5nshzUP2lrtsJ5JKPXvkMnohoZGXcHfnYct4tY/s1600/cpanel.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 330px; height: 233px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixam_6c5poqkSGTJ8RP6ucEBguvjUCgOBdtEVWvP-OCmdND2m-Z3TVwZAIw07p8uZS2LmGunorYR80xF6UdwpUWeQ-iVNS8oBdhQ61t5nshzUP2lrtsJ5JKPXvkMnohoZGXcHfnYct4tY/s320/cpanel.jpg" alt="" id="BLOGGER_PHOTO_ID_5466931993591359906" border="0" /></a></span></p><p style="text-align: left; font-family: arial;" class="MsoNormal"><meta equiv="Content-Type" content="text/html; charset=utf-8"><meta name="ProgId" content="Word.Document"><meta name="Generator" content="Microsoft Word 14"><meta name="Originator" content="Microsoft Word 14"><link rel="File-List" href="file:///C:%5CUsers%5CFARHAD%7E1%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_filelist.xml"><link rel="themeData" href="file:///C:%5CUsers%5CFARHAD%7E1%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_themedata.thmx"><link rel="colorSchemeMapping" href="file:///C:%5CUsers%5CFARHAD%7E1%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_colorschememapping.xml"><!--[if gte mso 9]><xml> <w:worddocument> <w:view>Normal</w:View> <w:zoom>0</w:Zoom> <w:trackmoves/> <w:trackformatting/> <w:punctuationkerning/> <w:validateagainstschemas/> <w:saveifxmlinvalid>false</w:SaveIfXMLInvalid> <w:ignoremixedcontent>false</w:IgnoreMixedContent> <w:alwaysshowplaceholdertext>false</w:AlwaysShowPlaceholderText> <w:donotpromoteqf/> <w:lidthemeother>IN</w:LidThemeOther> <w:lidthemeasian>X-NONE</w:LidThemeAsian> <w:lidthemecomplexscript>X-NONE</w:LidThemeComplexScript> <w:compatibility> <w:breakwrappedtables/> <w:snaptogridincell/> <w:wraptextwithpunct/> <w:useasianbreakrules/> <w:dontgrowautofit/> <w:splitpgbreakandparamark/> <w:enableopentypekerning/> <w:dontflipmirrorindents/> <w:overridetablestylehps/> <w:usefelayout/> </w:Compatibility> <w:donotoptimizeforbrowser/> <m:mathpr> <m:mathfont val="Cambria Math"> <m:brkbin val="before"> <m:brkbinsub val="--"> <m:smallfrac val="off"> <m:dispdef/> <m:lmargin val="0"> <m:rmargin val="0"> <m:defjc val="centerGroup"> <m:wrapindent val="1440"> <m:intlim val="subSup"> <m:narylim val="undOvr"> </m:mathPr></w:WordDocument> </xml><![endif]--><!--[if gte mso 9]><xml> <w:latentstyles deflockedstate="false" defunhidewhenused="true" defsemihidden="true" defqformat="false" defpriority="99" latentstylecount="267"> <w:lsdexception locked="false" priority="1" semihidden="false" unhidewhenused="false" qformat="true" name="Normal"> <w:lsdexception locked="false" priority="9" semihidden="false" unhidewhenused="false" qformat="true" name="heading 1"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 2"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 3"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 4"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 5"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 6"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 7"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 8"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 9"> <w:lsdexception locked="false" priority="39" name="toc 1"> <w:lsdexception locked="false" priority="39" name="toc 2"> <w:lsdexception locked="false" priority="39" name="toc 3"> <w:lsdexception locked="false" priority="39" name="toc 4"> <w:lsdexception locked="false" priority="39" name="toc 5"> <w:lsdexception locked="false" priority="39" name="toc 6"> <w:lsdexception locked="false" priority="39" name="toc 7"> <w:lsdexception locked="false" priority="39" name="toc 8"> <w:lsdexception locked="false" priority="39" name="toc 9"> <w:lsdexception locked="false" priority="35" qformat="true" name="caption"> <w:lsdexception locked="false" priority="10" semihidden="false" unhidewhenused="false" qformat="true" name="Title"> <w:lsdexception locked="false" priority="1" name="Default Paragraph Font"> <w:lsdexception locked="false" priority="11" semihidden="false" unhidewhenused="false" qformat="true" name="Subtitle"> <w:lsdexception locked="false" priority="22" semihidden="false" unhidewhenused="false" qformat="true" name="Strong"> <w:lsdexception locked="false" priority="20" semihidden="false" unhidewhenused="false" qformat="true" name="Emphasis"> <w:lsdexception locked="false" priority="59" semihidden="false" unhidewhenused="false" name="Table Grid"> <w:lsdexception locked="false" unhidewhenused="false" name="Placeholder Text"> <w:lsdexception locked="false" priority="1" semihidden="false" unhidewhenused="false" qformat="true" name="No Spacing"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading Accent 1"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List Accent 1"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid Accent 1"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1 Accent 1"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2 Accent 1"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1 Accent 1"> <w:lsdexception locked="false" unhidewhenused="false" name="Revision"> <w:lsdexception locked="false" priority="34" semihidden="false" unhidewhenused="false" qformat="true" name="List Paragraph"> <w:lsdexception locked="false" priority="29" semihidden="false" unhidewhenused="false" qformat="true" name="Quote"> <w:lsdexception locked="false" priority="30" semihidden="false" unhidewhenused="false" qformat="true" name="Intense Quote"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2 Accent 1"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1 Accent 1"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2 Accent 1"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3 Accent 1"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List Accent 1"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading Accent 1"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List Accent 1"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid Accent 1"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading Accent 2"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List Accent 2"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid Accent 2"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1 Accent 2"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2 Accent 2"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1 Accent 2"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2 Accent 2"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1 Accent 2"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2 Accent 2"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3 Accent 2"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List Accent 2"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading Accent 2"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List Accent 2"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid Accent 2"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading Accent 3"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List Accent 3"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid Accent 3"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1 Accent 3"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2 Accent 3"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1 Accent 3"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2 Accent 3"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1 Accent 3"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2 Accent 3"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3 Accent 3"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List Accent 3"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading Accent 3"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List Accent 3"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid Accent 3"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading Accent 4"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List Accent 4"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid Accent 4"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1 Accent 4"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2 Accent 4"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1 Accent 4"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2 Accent 4"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1 Accent 4"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2 Accent 4"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3 Accent 4"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List Accent 4"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading Accent 4"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List Accent 4"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid Accent 4"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading Accent 5"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List Accent 5"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid Accent 5"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1 Accent 5"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2 Accent 5"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1 Accent 5"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2 Accent 5"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1 Accent 5"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2 Accent 5"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3 Accent 5"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List Accent 5"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading Accent 5"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List Accent 5"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid Accent 5"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading Accent 6"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List Accent 6"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid Accent 6"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1 Accent 6"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2 Accent 6"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1 Accent 6"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2 Accent 6"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1 Accent 6"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2 Accent 6"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3 Accent 6"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List Accent 6"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading Accent 6"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List Accent 6"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid Accent 6"> <w:lsdexception locked="false" priority="19" semihidden="false" unhidewhenused="false" qformat="true" name="Subtle Emphasis"> <w:lsdexception locked="false" priority="21" semihidden="false" unhidewhenused="false" qformat="true" name="Intense Emphasis"> <w:lsdexception locked="false" priority="31" semihidden="false" unhidewhenused="false" qformat="true" name="Subtle Reference"> <w:lsdexception locked="false" priority="32" semihidden="false" unhidewhenused="false" qformat="true" name="Intense Reference"> <w:lsdexception locked="false" priority="33" semihidden="false" unhidewhenused="false" qformat="true" name="Book Title"> <w:lsdexception locked="false" priority="37" name="Bibliography"> <w:lsdexception locked="false" priority="39" qformat="true" name="TOC Heading"> </w:LatentStyles> </xml><![endif]--><style> <!-- /* Font Definitions */ @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:-520092929 1073786111 9 0 415 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-priority:1; mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:""; margin-top:0cm; margin-right:0cm; margin-bottom:10.0pt; margin-left:0cm; mso-pagination:widow-orphan; font-size:11.0pt; mso-bidi-font-size:10.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:minor-fareast; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; mso-bidi-font-size:10.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:minor-fareast; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} .MsoPapDefault {mso-style-type:export-only; margin-bottom:10.0pt;} @page WordSection1 {size:612.0pt 792.0pt; margin:72.0pt 72.0pt 72.0pt 72.0pt; mso-header-margin:36.0pt; mso-footer-margin:36.0pt; mso-paper-source:0;} div.WordSection1 {page:WordSection1;} --> </style><!--[if gte mso 10]> <style> /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin-top:0cm; mso-para-margin-right:0cm; mso-para-margin-bottom:10.0pt; mso-para-margin-left:0cm; mso-pagination:widow-orphan; font-size:11.0pt; mso-bidi-font-size:10.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} </style> <![endif]--> </p><p class="MsoNormal" style="font-family:arial;"><span lang="EN-US" style="font-size:100%;">Dari Program and Features, kliklah pilihan Turn Windows Feature On or Off di bagian sebelah kiri jendela. Kemudian kita akan menemukan jendela seperti ini:</span></p><p class="MsoNormal" style="font-family:arial;"><span style="font-size:100%;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu1WfeLF_kycQ8OMZ2BvCLRa5VDX992hjQY6LID5PYTQHFs40joZwOtgTXfVOKMT7reBxejnQkpFqxs1jwsSjGxbsDkWe9N5mgMUuz9Fq5BsEtmzjF9cCw-HA8_hRHyR2-tNGftarP-rM/s1600/cpanel2.jpg"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 320px; height: 274px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu1WfeLF_kycQ8OMZ2BvCLRa5VDX992hjQY6LID5PYTQHFs40joZwOtgTXfVOKMT7reBxejnQkpFqxs1jwsSjGxbsDkWe9N5mgMUuz9Fq5BsEtmzjF9cCw-HA8_hRHyR2-tNGftarP-rM/s320/cpanel2.jpg" alt="" id="BLOGGER_PHOTO_ID_5466932657203451314" border="0" /></a></span><meta equiv="Content-Type" content="text/html; charset=utf-8"><meta name="ProgId" content="Word.Document"><meta name="Generator" content="Microsoft Word 14"><meta name="Originator" content="Microsoft Word 14"><link rel="File-List" href="file:///C:%5CUsers%5CFARHAD%7E1%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_filelist.xml"><link rel="themeData" href="file:///C:%5CUsers%5CFARHAD%7E1%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_themedata.thmx"><link rel="colorSchemeMapping" href="file:///C:%5CUsers%5CFARHAD%7E1%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_colorschememapping.xml"><!--[if gte mso 9]><xml> <w:worddocument> <w:view>Normal</w:View> <w:zoom>0</w:Zoom> <w:trackmoves/> <w:trackformatting/> <w:punctuationkerning/> <w:validateagainstschemas/> <w:saveifxmlinvalid>false</w:SaveIfXMLInvalid> <w:ignoremixedcontent>false</w:IgnoreMixedContent> <w:alwaysshowplaceholdertext>false</w:AlwaysShowPlaceholderText> <w:donotpromoteqf/> <w:lidthemeother>IN</w:LidThemeOther> <w:lidthemeasian>X-NONE</w:LidThemeAsian> <w:lidthemecomplexscript>X-NONE</w:LidThemeComplexScript> <w:compatibility> <w:breakwrappedtables/> <w:snaptogridincell/> <w:wraptextwithpunct/> <w:useasianbreakrules/> <w:dontgrowautofit/> <w:splitpgbreakandparamark/> <w:enableopentypekerning/> <w:dontflipmirrorindents/> <w:overridetablestylehps/> <w:usefelayout/> </w:Compatibility> <w:donotoptimizeforbrowser/> <m:mathpr> <m:mathfont val="Cambria Math"> <m:brkbin val="before"> <m:brkbinsub val="--"> <m:smallfrac val="off"> <m:dispdef/> <m:lmargin val="0"> <m:rmargin val="0"> <m:defjc val="centerGroup"> <m:wrapindent val="1440"> <m:intlim val="subSup"> <m:narylim val="undOvr"> </m:mathPr></w:WordDocument> </xml><![endif]--><!--[if gte mso 9]><xml> <w:latentstyles deflockedstate="false" defunhidewhenused="true" defsemihidden="true" defqformat="false" defpriority="99" latentstylecount="267"> <w:lsdexception locked="false" priority="1" semihidden="false" unhidewhenused="false" qformat="true" name="Normal"> <w:lsdexception locked="false" priority="9" semihidden="false" unhidewhenused="false" qformat="true" name="heading 1"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 2"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 3"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 4"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 5"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 6"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 7"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 8"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 9"> <w:lsdexception locked="false" priority="39" name="toc 1"> <w:lsdexception locked="false" priority="39" name="toc 2"> <w:lsdexception locked="false" priority="39" name="toc 3"> <w:lsdexception locked="false" priority="39" name="toc 4"> <w:lsdexception locked="false" priority="39" name="toc 5"> <w:lsdexception locked="false" priority="39" name="toc 6"> <w:lsdexception locked="false" priority="39" name="toc 7"> <w:lsdexception locked="false" priority="39" name="toc 8"> <w:lsdexception locked="false" priority="39" name="toc 9"> <w:lsdexception locked="false" priority="35" qformat="true" name="caption"> <w:lsdexception locked="false" priority="10" semihidden="false" unhidewhenused="false" qformat="true" name="Title"> <w:lsdexception locked="false" priority="1" name="Default Paragraph Font"> <w:lsdexception locked="false" priority="11" semihidden="false" unhidewhenused="false" qformat="true" name="Subtitle"> <w:lsdexception locked="false" priority="22" semihidden="false" unhidewhenused="false" qformat="true" name="Strong"> <w:lsdexception locked="false" priority="20" semihidden="false" unhidewhenused="false" qformat="true" name="Emphasis"> <w:lsdexception locked="false" priority="59" semihidden="false" unhidewhenused="false" name="Table Grid"> <w:lsdexception locked="false" unhidewhenused="false" name="Placeholder Text"> <w:lsdexception locked="false" priority="1" semihidden="false" unhidewhenused="false" qformat="true" name="No Spacing"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading Accent 1"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List Accent 1"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid Accent 1"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1 Accent 1"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2 Accent 1"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1 Accent 1"> <w:lsdexception locked="false" unhidewhenused="false" name="Revision"> <w:lsdexception locked="false" priority="34" semihidden="false" unhidewhenused="false" qformat="true" name="List Paragraph"> <w:lsdexception locked="false" priority="29" semihidden="false" unhidewhenused="false" qformat="true" name="Quote"> <w:lsdexception locked="false" priority="30" semihidden="false" unhidewhenused="false" qformat="true" name="Intense Quote"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2 Accent 1"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1 Accent 1"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2 Accent 1"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3 Accent 1"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List Accent 1"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading Accent 1"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List Accent 1"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid Accent 1"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading Accent 2"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List Accent 2"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid Accent 2"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1 Accent 2"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2 Accent 2"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1 Accent 2"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2 Accent 2"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1 Accent 2"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2 Accent 2"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3 Accent 2"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List Accent 2"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading Accent 2"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List Accent 2"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid Accent 2"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading Accent 3"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List Accent 3"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid Accent 3"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1 Accent 3"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2 Accent 3"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1 Accent 3"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2 Accent 3"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1 Accent 3"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2 Accent 3"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3 Accent 3"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List Accent 3"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading Accent 3"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List Accent 3"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid Accent 3"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading Accent 4"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List Accent 4"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid Accent 4"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1 Accent 4"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2 Accent 4"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1 Accent 4"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2 Accent 4"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1 Accent 4"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2 Accent 4"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3 Accent 4"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List Accent 4"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading Accent 4"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List Accent 4"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid Accent 4"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading Accent 5"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List Accent 5"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid Accent 5"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1 Accent 5"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2 Accent 5"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1 Accent 5"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2 Accent 5"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1 Accent 5"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2 Accent 5"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3 Accent 5"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List Accent 5"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading Accent 5"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List Accent 5"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid Accent 5"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading Accent 6"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List Accent 6"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid Accent 6"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1 Accent 6"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2 Accent 6"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1 Accent 6"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2 Accent 6"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1 Accent 6"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2 Accent 6"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3 Accent 6"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List Accent 6"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading Accent 6"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List Accent 6"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid Accent 6"> <w:lsdexception locked="false" priority="19" semihidden="false" unhidewhenused="false" qformat="true" name="Subtle Emphasis"> <w:lsdexception locked="false" priority="21" semihidden="false" unhidewhenused="false" qformat="true" name="Intense Emphasis"> <w:lsdexception locked="false" priority="31" semihidden="false" unhidewhenused="false" qformat="true" name="Subtle Reference"> <w:lsdexception locked="false" priority="32" semihidden="false" unhidewhenused="false" qformat="true" name="Intense Reference"> <w:lsdexception locked="false" priority="33" semihidden="false" unhidewhenused="false" qformat="true" name="Book Title"> <w:lsdexception locked="false" priority="37" name="Bibliography"> <w:lsdexception locked="false" priority="39" qformat="true" name="TOC Heading"> </w:LatentStyles> </xml><![endif]--><style> <!-- /* Font Definitions */ @font-face {font-family:Wingdings; panose-1:5 0 0 0 0 0 0 0 0 0; mso-font-charset:2; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:0 268435456 0 0 -2147483648 0;} @font-face {font-family:Wingdings; panose-1:5 0 0 0 0 0 0 0 0 0; mso-font-charset:2; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:0 268435456 0 0 -2147483648 0;} @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:-520092929 1073786111 9 0 415 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-priority:1; mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:""; margin-top:0cm; margin-right:0cm; margin-bottom:10.0pt; margin-left:0cm; mso-pagination:widow-orphan; font-size:11.0pt; mso-bidi-font-size:10.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:minor-fareast; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; mso-bidi-font-size:10.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:"Times New Roman"; mso-fareast-theme-font:minor-fareast; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} .MsoPapDefault {mso-style-type:export-only; margin-bottom:10.0pt;} @page WordSection1 {size:612.0pt 792.0pt; margin:72.0pt 72.0pt 72.0pt 72.0pt; mso-header-margin:36.0pt; mso-footer-margin:36.0pt; mso-paper-source:0;} div.WordSection1 {page:WordSection1;} --> </style><!--[if gte mso 10]> <style> /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin-top:0cm; mso-para-margin-right:0cm; mso-para-margin-bottom:10.0pt; mso-para-margin-left:0cm; mso-pagination:widow-orphan; font-size:11.0pt; mso-bidi-font-size:10.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} </style> <![endif]--> </p><p class="MsoNormal"><span style="font-size:100%;"><span style="" lang="EN-US">Nah, di sana kita dapat menemukan fitur-fitur yang sudah dan belum dimunculkan di Windows 7 kita. Untuk mengaktifkan games, kita tinggal mengklik checkbox Games atau memilih game yang akan kita aktifkan. Setelah proses ini selesai dan computer di restart, maka kita dapat memainkan Game khas Windows.</span><span lang="EN-US" style="font-family:Wingdings;"><span style=""></span></span><span style="" lang="EN-US"><o:p></o:p></span></span></p> <p></p><p class="MsoNormal" style="font-family:arial;"><span style="font-size:100%;">
<br /></span> </p><p class="MsoNormal"><span style="font-size:100%;"><span style="" lang="EN-US">Tunggu dulu, Windows Movie Makernya manaaaa??? Cari jawabanya di <a href="http://kodingsambilngopi.blogspot.com/">kodingsambilngopi.blogspot.com</a>.<o:p></o:p></span></span></p> <span style="font-size:100%;">
<br />-- Koding Sambil Ngopi --
<br />-- Farhad Alaydrus --
<br /></span><span lang="EN-US" style="font-size:100%;"><o:p></o:p></span><p></p> Farhad Alaydrushttp://www.blogger.com/profile/02135974688853926772noreply@blogger.com0tag:blogger.com,1999:blog-1362636812352831137.post-90887069777605763472010-05-02T05:27:00.000-07:002011-01-05T20:48:44.970-08:00Power Efficiency Diagnostics Report - Windows 7<span style="font-size:130%;">Dalam tulisan sebelumnya di <a href="http://kodingsambilngopi.blogspot.com/2010/05/analisis-efisiensi-energi-windows-7.html">"Analisis Efisiensi Energi Windows 7"</a>, saya telah menyampaikan tentang fitur powercfg untuk menganalisis efisiensi energi pada komputer Anda. Pada postingan ini saya akan mengajak anda melihat hasil analisis tersebut. Pada bagian pertama report, akan dituliskan spesifikasi sistem Anda. Hasil pada komputer saya adalah sebagai berikut:<br /></span><style> body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; margin-right:1.5em} .log-entry {margin-bottom:1em;} .error-log-entry {background-color:#ffcccc; padding:4pt;} .warning-log-entry {background-color:#ffffc6; padding:4pt;} .info-log-entry {background-color:#ffffff; padding:4pt;} .log-entry-header {font-weight:bold;} .log-entry-content {margin: 2pt; } .expander { display: block; left: 0em; width: 1em; float: left; color:red; font-family:'Courier New'; font-weight:bold; text-decoration:none; padding-top:6pt;} td { font-size:x-small; font-weight: bold; } .log-entry-content table { ; } .log-entry-content td { padding: 3pt; } .detail-name { font-weight:normal; } </style><table> <tbody> <tr> <td class="detail-name"><span style="font-size:130%;"><br /></span></td></tr></tbody></table><blockquote><table><tbody><tr><td class="detail-name"><span style="font-size:130%;">Computer Name</span></td> <td><span style="font-size:130%;">CERZ</span></td></tr> <tr> <td class="detail-name"><span style="font-size:130%;">Scan Time</span></td> <td><span style="font-size:130%;">2010-05-02T05:43:13Z</span></td></tr> <tr> <td class="detail-name"><span style="font-size:130%;">Scan Duration</span></td> <td><span style="font-size:130%;">60 seconds </span></td></tr> <tr> <td class="detail-name"><span style="font-size:130%;">System Manufacturer</span></td> <td><span style="font-size:130%;">Acer</span></td></tr> <tr> <td class="detail-name"><span style="font-size:130%;">System Product Name</span></td> <td><span style="font-size:130%;">Aspire 4732Z</span></td></tr> <tr> <td class="detail-name"><span style="font-size:130%;">BIOS Date</span></td> <td><span style="font-size:130%;">06/24/2009</span></td></tr> <tr> <td class="detail-name"><span style="font-size:130%;">BIOS Version</span></td> <td><span style="font-size:130%;">V1.01</span></td></tr> <tr> <td class="detail-name"><span style="font-size:130%;">OS Build</span></td> <td><span style="font-size:130%;">7600</span></td></tr> <tr> <td class="detail-name"><span style="font-size:130%;">Platform Role</span></td> <td><span style="font-size:130%;">PlatformRoleMobile</span></td></tr> <tr> <td class="detail-name"><span style="font-size:130%;">Plugged In</span></td> <td><span style="font-size:130%;">false</span></td></tr> <tr> <td class="detail-name"><span style="font-size:130%;">Process Count</span></td> <td><span style="font-size:130%;">58</span></td></tr> <tr> <td class="detail-name"><span style="font-size:130%;">Thread Count</span></td> <td><span style="font-size:130%;">963</span></td></tr> <tr> <td class="detail-name"><span style="font-size:130%;">Report GUID</span></td> <td><span style="font-size:130%;">{28faf7f8-1ac3-4659-ad2d-94e8fcf2fabd} </span></td></tr></tbody></table></blockquote><span style="font-size:130%;">Durasi analisis adalah 60 detik (ini sudah dafault), kemudian Plugged In adalah status apakah komputer dengan tenaga baterai atau listrik. Pada bagian berikutnya adalah daftar masalah yang menyebabkan penggunaan komputer menjadi tidak efisien. Jangan takut, Error di bawah hanya menampilkan masalah efisiensi power saja. Misalnya, pada komputer saya terdapat masalah seperti ini:<br /></span><blockquote><span style="font-size:130%;"><br /></span><style> body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: x-small; margin-right:1.5em} .log-entry {margin-bottom:1em;} .error-log-entry {background-color:#ffcccc; padding:4pt;} .warning-log-entry {background-color:#ffffc6; padding:4pt;} .info-log-entry {background-color:#ffffff; padding:4pt;} .log-entry-header {font-weight:bold;} .log-entry-content {margin: 2pt; } .expander { display: block; left: 0em; width: 1em; float: left; color:red; font-family:'Courier New'; font-weight:bold; text-decoration:none; padding-top:6pt;} td { font-size:x-small; font-weight: bold; } .log-entry-content table { ; } .log-entry-content td { padding: 3pt; } .detail-name { font-weight:normal; } </style><h4><span style="font-size:130%;">Errors</span></h4> <div class="log-entry"> <div class=" error-log-entry "> <div class="log-entry-header"><span style="font-size:130%;">Power Policy:Dim timeout is disabled (On Battery)</span></div> <div class="log-entry-content"> <div class="log-entry-description"><span style="font-size:130%;">The display is not configured to automatically dim after a period of inactivity.</span></div></div></div></div> <div class="log-entry"> <div class=" error-log-entry "> <div class="log-entry-header"><span style="font-size:130%;">Power Policy:Sleep timeout is disabled (On Battery)</span></div> <div class="log-entry-content"> <div class="log-entry-description"><span style="font-size:130%;">The computer is not configured to automatically sleep after a period of inactivity.</span></div></div></div></div> <div class="log-entry"> <div class=" error-log-entry "> <div class="log-entry-header"><span style="font-size:130%;">Power Policy:Dim timeout is disabled (Plugged In)</span></div> <div class="log-entry-content"> <div class="log-entry-description"><span style="font-size:130%;">The display is not configured to automatically dim after a period of inactivity.</span></div></div></div></div> <div class="log-entry"> <div class=" error-log-entry "> <div class="log-entry-header"><span style="font-size:130%;">Power Policy:Sleep timeout is disabled (Plugged In)</span></div> <div class="log-entry-content"> <div class="log-entry-description"><span style="font-size:130%;">The computer is not configured to automatically sleep after a period of inactivity.</span></div></div></div></div> <div class="log-entry"> <div class=" error-log-entry "> <div class="log-entry-header"><span style="font-size:130%;">CPU Utilization:Processor utilization is high</span></div> <div class="log-entry-content"> <div class="log-entry-description"><span style="font-size:130%;">The average processor utilization during the trace was high. The system will consume less power when the average processor utilization is very low. Review processor utilization for individual processes to determine which applications and services contribute the most to total processor utilization.</span></div> <table> <tbody> <tr> <td><span class="detail-name" style="font-size:130%;">Average Utilization (%)</span></td> <td><span style="font-size:130%;">22.25</span></td></tr></tbody></table></div></div></div></blockquote><span style="font-size:130%;">Dalam laporan itu dicantumkan bahwa terdapat fitur-fitur berkaitan dengan power yang saya disable seperti saya mematikan dim light monitor dan menggunakan tipe power high performance yang menyebabkan penggunaan energi meningkat 22.25%. Sleep time-out yang didisable dianggap sebagai gangguan terhadap efisiensi karena menyebabkan konsumsi power tidak dapat dihemat.<br /><br />Hasil laporan ini dapat digunakan sebagai bahan pertimbangan dalam membuat kinerja komputer dan pemanfaatan power lebih efisien terutama pada saat mengunakan baterai. Semoga hasil ini dapat bermanfaat bagi kita dalam mengoptimalkan kinerja Windows 7 anda. Have a nice Seven-ing (aduh maksanya)..<br /><br /></span><span style="font-size:100%;"><br />-- Koding Sambil Ngopi --<br />-- Farhad Alaydrus -- </span>Farhad Alaydrushttp://www.blogger.com/profile/02135974688853926772noreply@blogger.com0tag:blogger.com,1999:blog-1362636812352831137.post-9342862055028821102010-05-01T22:45:00.000-07:002011-01-05T20:48:44.971-08:00Analisis Efisiensi Energi Windows 7Salah satu fitur yang dimiliki oleh Windows 7 adalah <span style="font-style: italic;">Power Eficiency Diagnostic Report </span>yang bisa kita pakai untuk melihat seberapa efisienkah penggunaan energi komputer kita. Diagnosa dilakukan dengan cara menganalisa kinerja komputer selama 60 detik yang berkaitan dengan konfigurasi layar monitor, automatisasi dim dan penggunaan hardware lain yang <span style="font-style: italic;">menyedot </span>energi komputer. Setelah analisis ini selesai, maka windows secara otomatis akan men<span style="font-style: italic;">generate</span> sebuah report yang menampilkan masalah efisiensi pada komputer kita.<br /><br />Oke, kita cobain aja langsung.. Pertama silahkan buka command prompt (cmd) sebagai administrator (bisa dengan cara mengklik cmd sambil menekan CTRL + SHIFT). Setelah masuk, kita akan memanggil "powercfg /energy". Saya mencobakan di cmd saya dan menunculkan hasil seperti ini:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh08IblC5-bHBQoeqXj0uUPr3sFDiylnG4WukmikGqDqOAASLscFrzLmB5L1dkEhKstmMcugOMWxnlaCRFbqCSt7Us0EFFlc0qwZfc5qU9rLzOpZVU9MJahPgI__t02pa9ymkuQgg6YJA/s1600/powerconfig.png"><img style="display: block; margin: 0px auto 10px; text-align: center; cursor: pointer; width: 484px; height: 176px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhh08IblC5-bHBQoeqXj0uUPr3sFDiylnG4WukmikGqDqOAASLscFrzLmB5L1dkEhKstmMcugOMWxnlaCRFbqCSt7Us0EFFlc0qwZfc5qU9rLzOpZVU9MJahPgI__t02pa9ymkuQgg6YJA/s400/powerconfig.png" alt="" id="BLOGGER_PHOTO_ID_5466547133848969522" border="0" /></a><br />Terlihat command tadi mengaktifkan tracing sistem selama 60 detik. Selama 60 detik ini, Windows mengobservasi kegiatan yang dikerjakan dalam task-task Window. Setelah tracing selesai, silahkan buka file yang berada di C:\Users\Nama User Anda\energy-report.html di browser.<br /><br />Mengenai isi report ini akan kita bahas di post <a href="http://kodingsambilngopi.blogspot.com/2010/05/power-efficiency-diagnostics-report.html">Power Efficiency Diagnostic Report</a>.. Selamat menganalisa.. :)<br /><br /><span style="font-size:100%;"><br />-- Koding Sambil Ngopi --<br />-- Farhad Alaydrus -- </span>Farhad Alaydrushttp://www.blogger.com/profile/02135974688853926772noreply@blogger.com0tag:blogger.com,1999:blog-1362636812352831137.post-64474505753257000472010-04-25T04:56:00.000-07:002011-01-05T20:48:44.971-08:00Database Management Tool Dengan WPFHi, sekarang ini saya lagi ngerjain skripsi dan saya musti masukin data tanaman banyak banget. Daripada repot musti masukin satu-satu ke SQLServer, saya bikin aplikasi Add-Update-Delete data dengan WPF. Saya mau share aplikasi yang saya bikin itu ke temen-temen semua. Aplikasi ini bertugas untuk membantu saya memanipulasi database tanaman untuk table yang namanya “daftar_tanaman”.<br />Saya menggunakan LinQ to SQL untuk mengakses database dan menampilkannya di data grid dan untuk saya manipulasi.<br /><br />Aplikasinya windowless, iseng-iseng aja.. Source code aplikasi ini bisa di-download <a href="http://cid-47dace0f3777d7b9.skydrive.live.com/self.aspx/.Public/WpfApplication5.rar" content="rar">di sini</a>. Semoga bermanfaat ya.. <br /><br /><span style="font-size:100%;"><br />-- Koding Sambil Ngopi --<br />-- Farhad Alaydrus -- </span>Farhad Alaydrushttp://www.blogger.com/profile/02135974688853926772noreply@blogger.com0tag:blogger.com,1999:blog-1362636812352831137.post-63228341357335036222010-04-25T04:47:00.001-07:002011-01-05T20:48:44.972-08:00Menampilkan Data Dari SQLServer ke Datagrid pada WPF dengan LinQ to SQL<span xmlns=""><p>Hai, kali ini kita akan coba bikin aplikasi WPF sederhana untuk menampilkan data dari database SQLServer dengan menggunakan LinQ to SQL. Mari kita coba sama-sama.<br /></p><ol><li>Bukalah Microsoft Visual Studio (saya pakai VStud 2008) dan buat project aplikasi WPF bernama "TesDatabaseWPF"<br /></li><li>Kita akan pakai database Northwind untuk latihan ini, jadi kalau kamu belum punya sample database Northwind, silahkan dulu download yaa.. Nah, pada Server Explorer (View-> Solution Explorer), klik kanan pada "Data Connection", maka akan muncul window Add Connection.<br /></li><li>Pastikan Data Source adalah "Microsoft SQL Server Database File (SqlClient)", lalu browse file database Northwind. Kalau sudah, maka akan terbuka koneksi SQLServer ke database Northwind.<br /></li><li>Pada Solution Explorer, klik kanan pada TestDatabaseWPF, pilih Add->New Item.<br /></li><li>Pilihlah "LinQ to SQL Classes", beri nama "MyNorthwind.dbml" kemudian klik Add<br /></li><li>Dari Server Explorer, drag and drop table "Supplier" ke MyNorthwind.dbml, lalu save (Ctrl+s)<br /></li><li>Berikutnya, drag-drop lah sebuah datagrid ke Window1.xaml dan beri nama "MyDataGrid"<br /></li><li> Berikutnya, pada Window1.xaml.cs, ketikkan kode berikut:</li></ol><blockquote><ol><li><span style="font-size:100%;"><br /></span></li></ol><p><span style=";font-family:Courier New;font-size:100%;" ><span style="color:blue;">public</span><br /> <span style="color:blue;">partial</span><br /> <span style="color:blue;">class</span><br /> <span style="color: rgb(43, 145, 175);">Window1</span> : <span style="color: rgb(43, 145, 175);">Window<br /></span></span></p><p style="margin-left: 18pt;"><span style=";font-family:Courier New;font-size:100%;" > {<br /> <span style="color:blue;">public</span> Window1()<br /></span></p><p style="margin-left: 18pt;"><span style=";font-family:Courier New;font-size:100%;" > {<br /></span></p><p style="margin-left: 18pt;"><span style=";font-family:Courier New;font-size:100%;" > InitializeComponent();<br /></span></p><p style="margin-left: 18pt;"><span style=";font-family:Courier New;font-size:100%;" > InitData();<br /></span></p><p style="margin-left: 18pt;"><span style=";font-family:Courier New;font-size:100%;" > }<br /></span></p><p style="margin-left: 18pt;"><span style="font-size:100%;"><br /> </span></p><p style="margin-left: 18pt;"><span style=";font-family:Courier New;font-size:100%;" ><br /> <span style="color:blue;">private</span><br /> <span style="color:blue;">void</span> InitData()<br /></span></p><p style="margin-left: 18pt;"><span style=";font-family:Courier New;font-size:100%;" > {<br /></span></p><p><span style=";font-family:Courier New;font-size:100%;" ><br /> <span style="color:blue;">try<br /></span></span></p><p style="margin-left: 18pt;"><span style=";font-family:Courier New;font-size:100%;" > {<br /></span></p><p style="margin-left: 90pt;"><span style=";font-family:Courier New;font-size:100%;" ><span style="color: rgb(43, 145, 175);">MyNorthwindDataContext</span> db = <span style="color:blue;">new</span><br /> <span style="color: rgb(43, 145, 175);">MyNorthwindDataContext</span>();<br /></span></p><p style="margin-left: 18pt;"><span style=";font-family:Courier New;font-size:100%;" ><br /> <span style="color:blue;">var</span> DataResult = <span style="color:blue;">from</span><br /> <span style="color: rgb(43, 145, 175);">Supplier</span><br /> <span style="color:blue;">in</span> db.Suppliers<br /></span></p><p style="margin-left: 18pt;"><span style=";font-family:Courier New;font-size:100%;" ><br /> <span style="color:blue;">select</span> Supplier;<br /></span></p><p style="margin-left: 18pt;"><span style=";font-family:Courier New;font-size:100%;" ><span style="color:blue;"> this</span>.MyDataGrid.ItemsSource = DataResult.ToList<<span style="color: rgb(43, 145, 175);">Supplier</span>>();<br /></span></p><p style="margin-left: 18pt;"><span style=";font-family:Courier New;font-size:100%;" > }<br /></span></p><p style="margin-left: 18pt;"><span style=";font-family:Courier New;font-size:100%;" > <span style="color:blue;">catch<br /></span></span></p><p style="margin-left: 90pt;"><span style=";font-family:Courier New;font-size:100%;color:black;" >{<br /></span></p><p style="margin-left: 90pt;"><span style=";font-family:Courier New;font-size:100%;color:black;" > MessageBox.Show(<span style="color: rgb(163, 21, 21);">"Data Gagal Dimasukkan"<span style="color:black;">);<br /></span></span></span></p><p style="margin-left: 90pt;"><span style=";font-family:Courier New;font-size:100%;color:black;" >}<br /></span></p><p style="margin-left: 18pt;"><span style=";font-family:Courier New;font-size:100%;" > }<br /></span></p><p style="margin-left: 18pt;"><span style=";font-family:Courier New;font-size:100%;" > }</span></p></blockquote><p style="margin-left: 18pt;"><span style=";font-family:Courier New;font-size:85%;" ></span><br /></p><p style="margin-left: 18pt;">Berikutnya, silahkan coba run dengan menekan F5. Gimana? Bisa kan?</p><p style="margin-left: 18pt;"><br /></p><p style="margin-left: 18pt;"><span style="font-size:100%;"><br />-- Koding Sambil Ngopi --<br />-- Farhad Alaydrus -- </span></p></span>Farhad Alaydrushttp://www.blogger.com/profile/02135974688853926772noreply@blogger.com0tag:blogger.com,1999:blog-1362636812352831137.post-42228937544489718592010-04-25T04:42:00.001-07:002011-01-05T20:48:44.973-08:00Dasar Animasi Silverlight Dengan Expression Blend<span xmlns=""><p>Ngga lengkap rasanya Silverlight tanpa animasi. Bagaikan nyetir mobil Ferari di kecepatan 5 km/jam di jalan tol. Silverlihgt memiliki kemampuan untuk memaksimalkan komponen grafis yang dimiliki PC untuk memberikan user experience yang luar biasa. Kita akan coba bikin animasi sederhana dengan menggunakan Storyboard. Storyboard adalah fitur yang tersedia di Expression Blend untuk kita gunakan dalam membuat animasi. Caranya gampang, mari kita coba sama-sama.<br /></p><p>Pertama, buka dulu Expression Blend dan buat baru project Silverlight. Ceritanya, kita akan bikin animasi mobil-mobilan. Jadi, mari kita bikin dulu mobilnya. Ga usah ribet-ribet, kita bikin aja rectangle yang ceritanya akan jadi mobil juga ga apa-apa. Tapi silahkan berkarya loh ya, saya ngga mau ngebatesin.. hehe..<br /></p><p>Oke, kalo udah jadi mobilnya, sekarang kita siap untuk bikin animasinya. Di bagian kiri, tepat di bawah tulisan "Objects and Timeline" klik tanda tambah (+) untuk membuat storyboard baru. Beri nama "MobilJalan". Nah, coba lihat perubahan tampilan pada Expression Blend. Di sebelah kiri muncul timeline yang akan kita pake untuk bikin animasinya.<br /></p><p>Sekarang, klik pada angka 2, artinya kita akan memberikan posisi akhir mobil pada detik ke-2. Pastikan garis oranye yang menandakan posisi aktif timeline berada pada detik ke-2. Sekarang, gerakkanlah mobil pada canvas (posisi mobil sekarang akan menjadi posisi akhir animasi).<br /></p><p>Coba tekan tombol Play (segi tiga yang menghadap ke kanan pada timeline), nah gerak kan mobilnya.. Kalau sudah, tekan tombol "x" persis di bawah tulisan "Objects and Timeline" untuk menutup storyboard. Sekarang, kita akan buat button yang akan men-trigger animasi tersebut. Caranya gampang banget, dari toolbar di sebelah kiri, klik button dan gambarlah sebuah button di canvas.<br /></p><p>Sekarang kita sudah punya button, pada bagian Properties paling atas, beri button tersebut nama "ButtonAnimasi" dan ubah tulisan di dalamnya menjadi "Jalan" (mengubah tulisan Button dapat dilakukan dengan cara mengklik 2 kali Button tersebut). Nah, kita udah punya button yang akan menjadi trigger. Sekarang, dalam kondisi ButtonAnimasi terpilih, pada Properties, klik gambar petir (Events) untuk menambahkan event pada button.<br /></p><p>Sekarang, di bagian property klik dua kali pada textbox dengan label "Click". Dengan mengklik dua kali pada textbox ini, kita akan membuat handler untuk event tombol ButtonAnimasi jika ia diklik. Saat kita klik, akan terbuka file MainPage.xaml.cs. Kemudian silahkan tambahkan kode seperti di bawah ini:<br /></p><p><span style=";font-family:Consolas;font-size:100%;color:blue;" ></span></p><blockquote><p><span style=";font-family:Consolas;font-size:100%;color:blue;" >private<span style="color:black;"><br /> <span style="color:blue;">void<span style="color:black;"> ButtonAnimasi_Click(<span style="color:blue;">object<span style="color:black;"> sender, System.Windows.RoutedEventArgs e)<br /></span></span></span></span></span></span></p><p><span style=";font-family:Consolas;font-size:100%;color:black;" > {<br /></span></p><p><span style=";font-family:Consolas;font-size:100%;color:black;" > MobilJalan.Begin();<br /></span></p><p><span style=";font-family:Consolas;font-size:10pt;color:black;" ><span style="font-size:100%;"> }</span></span></p></blockquote><p><span style=";font-family:Consolas;font-size:10pt;color:black;" ><span style="font-size:100%;"></span><br /></span></p><p><span style="color:black;">Nah, sekarang coba run Aplikasi dengan menekan F5, lalu klik tombol "Jalan", maka si mobil akan bergerak. Bisa kan? Kalo udah bisa, coba explore Animasi untuk event lain, misalnya animasi kalau tombol di <em>mouse over</em> dan lain-lain.. Selamat mencoba..</span></p><p><br /></p><p><span style="font-size:100%;"><br />-- Koding Sambil Ngopi --<br />-- Farhad Alaydrus -- </span> </p></span>Farhad Alaydrushttp://www.blogger.com/profile/02135974688853926772noreply@blogger.com0tag:blogger.com,1999:blog-1362636812352831137.post-86993561221560121722010-04-25T04:38:00.000-07:002011-01-05T20:48:44.973-08:00Aplikasi Windows Tanpa WindowWindows Presentation Foundation memungkinkan kita untuk membuat aplikasi Window tanpa Window. Nah loh.. Jadi istilahnya kita akan bikin jendela tanpa frame. Kita akan coba bikin jendela tanpa frame itu di Expression Blend 3. Jadi, pertama mari kita buka Expression Blend 3, lalu pilih project WPF Application. Nah, sekarang kita mau bikin window yang bentuknya round-rectangle.<br /><br />Jadi, kita bikin aja rectangle di Expresion Blend seukuran Window kita. Pada bagian Properties, atur Radius X dan Radius Y menjadi 20 untuk membuat sudut rectangle itu “bulet”. Jreng, jadilah calon window kita. Ubahlah warna rectangle itu sesuai selera. Kalo udah, sekarang klik layer “Window”.<br /><br />Kemudian, dalam kondisi Window terpilih, pada Properties ceklis pilihan Allow Transparency.<br /><br />Nah, sekarang window kita udah ngga ber-frame, tapi bentuknya masih kotak. Sekarang, dalam kondisi layer Window terpilih, pilihlah No Brush sebagai warna background Window, dan Jreng, hilanglah si Window kotak itu.<br /><br />Sekarang silahkan jalankan aplikasi kita itu dengan menekan tombol F5 dan lihat keajaiban apa yang terjadi..<br /><br /><span style="font-size:100%;"><br />-- Koding Sambil Ngopi --<br />-- Farhad Alaydrus -- </span>Farhad Alaydrushttp://www.blogger.com/profile/02135974688853926772noreply@blogger.com0tag:blogger.com,1999:blog-1362636812352831137.post-72210082597057641942010-04-25T04:35:00.000-07:002011-01-05T20:48:44.974-08:00Photoshop to Expression Blend<meta equiv="Content-Type" content="text/html; charset=utf-8"><meta name="ProgId" content="Word.Document"><meta name="Generator" content="Microsoft Word 14"><meta name="Originator" content="Microsoft Word 14"><link rel="File-List" href="file:///C:%5CUsers%5CFARHAD%7E1%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_filelist.xml"><link rel="Edit-Time-Data" href="file:///C:%5CUsers%5CFARHAD%7E1%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_editdata.mso"><!--[if !mso]> <style> v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VML);} .shape {behavior:url(#default#VML);} </style> <![endif]--><!--[if gte mso 9]><xml> <o:officedocumentsettings> <o:allowpng/> </o:OfficeDocumentSettings> </xml><![endif]--><link rel="themeData" href="file:///C:%5CUsers%5CFARHAD%7E1%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_themedata.thmx"><link rel="colorSchemeMapping" href="file:///C:%5CUsers%5CFARHAD%7E1%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_colorschememapping.xml"><!--[if gte mso 9]><xml> <w:worddocument> <w:view>Normal</w:View> <w:zoom>0</w:Zoom> <w:trackmoves>false</w:TrackMoves> <w:trackformatting/> <w:punctuationkerning/> <w:validateagainstschemas/> <w:saveifxmlinvalid>false</w:SaveIfXMLInvalid> <w:ignoremixedcontent>false</w:IgnoreMixedContent> <w:alwaysshowplaceholdertext>false</w:AlwaysShowPlaceholderText> <w:donotpromoteqf/> <w:lidthemeother>IN</w:LidThemeOther> <w:lidthemeasian>X-NONE</w:LidThemeAsian> <w:lidthemecomplexscript>X-NONE</w:LidThemeComplexScript> <w:compatibility> <w:breakwrappedtables/> <w:snaptogridincell/> <w:wraptextwithpunct/> <w:useasianbreakrules/> <w:dontgrowautofit/> <w:splitpgbreakandparamark/> <w:enableopentypekerning/> <w:dontflipmirrorindents/> <w:overridetablestylehps/> </w:Compatibility> <m:mathpr> <m:mathfont val="Cambria Math"> <m:brkbin val="before"> <m:brkbinsub val="--"> <m:smallfrac val="off"> <m:dispdef/> <m:lmargin val="0"> <m:rmargin val="0"> <m:defjc val="centerGroup"> <m:wrapindent val="1440"> <m:intlim val="subSup"> <m:narylim val="undOvr"> </m:mathPr></w:WordDocument> </xml><![endif]--><!--[if gte mso 9]><xml> <w:latentstyles deflockedstate="false" defunhidewhenused="true" defsemihidden="true" defqformat="false" defpriority="99" latentstylecount="267"> <w:lsdexception locked="false" priority="0" semihidden="false" unhidewhenused="false" qformat="true" name="Normal"> <w:lsdexception locked="false" priority="9" semihidden="false" unhidewhenused="false" qformat="true" name="heading 1"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 2"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 3"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 4"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 5"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 6"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 7"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 8"> <w:lsdexception locked="false" priority="9" qformat="true" name="heading 9"> <w:lsdexception locked="false" priority="39" name="toc 1"> <w:lsdexception locked="false" priority="39" name="toc 2"> <w:lsdexception locked="false" priority="39" name="toc 3"> <w:lsdexception locked="false" priority="39" name="toc 4"> <w:lsdexception locked="false" priority="39" name="toc 5"> <w:lsdexception locked="false" priority="39" name="toc 6"> <w:lsdexception locked="false" priority="39" name="toc 7"> <w:lsdexception locked="false" priority="39" name="toc 8"> <w:lsdexception locked="false" priority="39" name="toc 9"> <w:lsdexception locked="false" priority="35" qformat="true" name="caption"> <w:lsdexception locked="false" priority="10" semihidden="false" unhidewhenused="false" qformat="true" name="Title"> <w:lsdexception locked="false" priority="1" name="Default Paragraph Font"> <w:lsdexception locked="false" priority="11" semihidden="false" unhidewhenused="false" qformat="true" name="Subtitle"> <w:lsdexception locked="false" priority="22" semihidden="false" unhidewhenused="false" qformat="true" name="Strong"> <w:lsdexception locked="false" priority="20" semihidden="false" unhidewhenused="false" qformat="true" name="Emphasis"> <w:lsdexception locked="false" priority="59" semihidden="false" unhidewhenused="false" name="Table Grid"> <w:lsdexception locked="false" unhidewhenused="false" name="Placeholder Text"> <w:lsdexception locked="false" priority="1" semihidden="false" unhidewhenused="false" qformat="true" name="No Spacing"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading Accent 1"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List Accent 1"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid Accent 1"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1 Accent 1"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2 Accent 1"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1 Accent 1"> <w:lsdexception locked="false" unhidewhenused="false" name="Revision"> <w:lsdexception locked="false" priority="34" semihidden="false" unhidewhenused="false" qformat="true" name="List Paragraph"> <w:lsdexception locked="false" priority="29" semihidden="false" unhidewhenused="false" qformat="true" name="Quote"> <w:lsdexception locked="false" priority="30" semihidden="false" unhidewhenused="false" qformat="true" name="Intense Quote"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2 Accent 1"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1 Accent 1"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2 Accent 1"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3 Accent 1"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List Accent 1"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading Accent 1"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List Accent 1"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid Accent 1"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading Accent 2"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List Accent 2"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid Accent 2"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1 Accent 2"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2 Accent 2"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1 Accent 2"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2 Accent 2"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1 Accent 2"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2 Accent 2"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3 Accent 2"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List Accent 2"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading Accent 2"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List Accent 2"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid Accent 2"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading Accent 3"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List Accent 3"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid Accent 3"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1 Accent 3"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2 Accent 3"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1 Accent 3"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2 Accent 3"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1 Accent 3"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2 Accent 3"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3 Accent 3"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List Accent 3"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading Accent 3"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List Accent 3"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid Accent 3"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading Accent 4"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List Accent 4"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid Accent 4"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1 Accent 4"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2 Accent 4"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1 Accent 4"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2 Accent 4"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1 Accent 4"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2 Accent 4"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3 Accent 4"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List Accent 4"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading Accent 4"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List Accent 4"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid Accent 4"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading Accent 5"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List Accent 5"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid Accent 5"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1 Accent 5"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2 Accent 5"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1 Accent 5"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2 Accent 5"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1 Accent 5"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2 Accent 5"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3 Accent 5"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List Accent 5"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading Accent 5"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List Accent 5"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid Accent 5"> <w:lsdexception locked="false" priority="60" semihidden="false" unhidewhenused="false" name="Light Shading Accent 6"> <w:lsdexception locked="false" priority="61" semihidden="false" unhidewhenused="false" name="Light List Accent 6"> <w:lsdexception locked="false" priority="62" semihidden="false" unhidewhenused="false" name="Light Grid Accent 6"> <w:lsdexception locked="false" priority="63" semihidden="false" unhidewhenused="false" name="Medium Shading 1 Accent 6"> <w:lsdexception locked="false" priority="64" semihidden="false" unhidewhenused="false" name="Medium Shading 2 Accent 6"> <w:lsdexception locked="false" priority="65" semihidden="false" unhidewhenused="false" name="Medium List 1 Accent 6"> <w:lsdexception locked="false" priority="66" semihidden="false" unhidewhenused="false" name="Medium List 2 Accent 6"> <w:lsdexception locked="false" priority="67" semihidden="false" unhidewhenused="false" name="Medium Grid 1 Accent 6"> <w:lsdexception locked="false" priority="68" semihidden="false" unhidewhenused="false" name="Medium Grid 2 Accent 6"> <w:lsdexception locked="false" priority="69" semihidden="false" unhidewhenused="false" name="Medium Grid 3 Accent 6"> <w:lsdexception locked="false" priority="70" semihidden="false" unhidewhenused="false" name="Dark List Accent 6"> <w:lsdexception locked="false" priority="71" semihidden="false" unhidewhenused="false" name="Colorful Shading Accent 6"> <w:lsdexception locked="false" priority="72" semihidden="false" unhidewhenused="false" name="Colorful List Accent 6"> <w:lsdexception locked="false" priority="73" semihidden="false" unhidewhenused="false" name="Colorful Grid Accent 6"> <w:lsdexception locked="false" priority="19" semihidden="false" unhidewhenused="false" qformat="true" name="Subtle Emphasis"> <w:lsdexception locked="false" priority="21" semihidden="false" unhidewhenused="false" qformat="true" name="Intense Emphasis"> <w:lsdexception locked="false" priority="31" semihidden="false" unhidewhenused="false" qformat="true" name="Subtle Reference"> <w:lsdexception locked="false" priority="32" semihidden="false" unhidewhenused="false" qformat="true" name="Intense Reference"> <w:lsdexception locked="false" priority="33" semihidden="false" unhidewhenused="false" qformat="true" name="Book Title"> <w:lsdexception locked="false" priority="37" name="Bibliography"> <w:lsdexception locked="false" priority="39" qformat="true" name="TOC Heading"> </w:LatentStyles> </xml><![endif]--><style> <!-- /* Font Definitions */ @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:-520092929 1073786111 9 0 415 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:""; margin-top:0cm; margin-right:0cm; margin-bottom:10.0pt; margin-left:0cm; line-height:115%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-fareast-language:EN-US;} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-fareast-language:EN-US;} .MsoPapDefault {mso-style-type:export-only; margin-bottom:10.0pt; line-height:115%;} @page WordSection1 {size:595.3pt 841.9pt; margin:72.0pt 72.0pt 72.0pt 72.0pt; mso-header-margin:35.4pt; mso-footer-margin:35.4pt; mso-paper-source:0;} div.WordSection1 {page:WordSection1;} --> </style><!--[if gte mso 10]> <style> /* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-parent:""; mso-padding-alt:0cm 5.4pt 0cm 5.4pt; mso-para-margin-top:0cm; mso-para-margin-right:0cm; mso-para-margin-bottom:10.0pt; mso-para-margin-left:0cm; line-height:115%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-fareast-language:EN-US;} </style> <![endif]--> <p class="MsoNormal"><span style="" lang="EN-US">Photoshop, tool desain keluaran Adobe yang udah sering banget kita denger. Desainer biasanya pasti jagoan banget make Photoshop. Saya pribadi, dalam membuat desain aplikasi, seneng ngedesain pake Photoshop sebelum saya transformasikan ke dalam form aplikasi. <span style=""> </span>Tapi biasanya apa yang udah saya bikin keren-keren di Photoshop jadinya biasa aja di form aplikasinya (biasanya desain keren ngga bisa diulang dua kali, hehe). Nah, untungnya, Microsoft Expression Blend memungkinkan kita untuk meng-import file psd langsung ke XAML pada aplikasi Silverlight atau WPF kita. Disupportnya file psd ini merupakan bagian dari interoperability Microsoft yang sekarang semakin gencarnya. Oke, mari kita cobain..<o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">Pertama, sediakan dulu file photoshop yang akan kita import. Sebelum diimport ke XAML, sebaiknya susun dulu layer-layer dalam photoshop dengan rapi. Beri nama yang jelas untuk setiap layer. Misalkan, gambar tombol berilah nama “MyButton” atau nama apapun yang sesuai dengan fungsi layer itu nantinya. Pastikan juga kamu udah menggabung (merge) setiap komponen yang akan jadi satu. Misalnya buletan tombol dan teks diatas tombolnya usah disatuin dalam satu layer. <span style=""> </span>Tujuan me-merge komponen itu adalah supaya waktu nanti diimport ke Expression Blend udah dalam kondisi rapi dan siap pakai. Oke, kalo sudah rapi layer-layernya, langsung aja save jadi file psd. <o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">Sekarang kita pindah ke Expression Blend. Buat project baru, bisa Silverlight, bisa WPF, tapi kali ini biar seragam, kita cobain aja WPF Application dulu. Setelah project terbentuk, pastikan MainPage.xaml yang menjadi halaman utama kita dalam keadaan aktif. Supaya nanti import photoshopnya rapi, sesuaikan dulu ukuran MainPage.xaml sesuai dengan ukuran file psd yang udah kita bikin. Sekarang bagian <i style="">magic</i>-nya..<o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">Klik File->Import Adobe Photoshop File, dan browse file psd yang akan kita import. Setelah dipilih, akan muncul window baru.<o:p></o:p> Nah, keliatan kan di situ, layer-layer yang udah kita bikin di photoshop. Kita bisa pilih semua atau beberapa layer aja yang mau diimport. Kalau udah sesuai, tekan OK dan BOOM jadilah sudah user interface XAML kita. <span style=""> </span>Tapi tunggu dulu, button yang udah kita bikin belom bisa langsung dipake karena bentuknya masih berupa image. Kita harus bikin dia jadi button yang sebenar-benarnya button..<o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">Klik aja ke gambar tombol yang akan kita jadikan button. Klik kanan pada gambar tombol, lalu pilih Make into control. Nah, akan muncul window macem-macem control yang bisa kita assign ke gambar tombol tadi. Pilih “Button” dan klik OK, maka sekarang gambar kita udah bisa dipakai sebagai button. Ulangi proses tersebut ke komponen-komponen lain dalam user interface kita.<o:p></o:p></span></p> <p class="MsoNormal"><span style="" lang="EN-US">Gimana, seru kan, ngedesain di Photoshop dan langsung disulap jadi user interface keren di Expression Blend?</span></p><p class="MsoNormal"><span style="font-size:100%;">
<br />-- Koding Sambil Ngopi --
<br />-- Farhad Alaydrus -- </span>
<br /><span style="" lang="EN-US"><o:p></o:p></span></p> Farhad Alaydrushttp://www.blogger.com/profile/02135974688853926772noreply@blogger.com0tag:blogger.com,1999:blog-1362636812352831137.post-51148141327481126282009-11-19T18:40:00.000-08:002011-01-05T20:48:44.974-08:00Textbox dan Button Silverlight dengan Microsoft Expression Blend 3<b><o:p></o:p></b> <p style="text-align: justify; line-height: normal; text-indent: 36pt; margin-bottom: 0pt;" class="MsoNormal">Hi, guys.. Pada tutorial kali ini, kita akan belajar tentang dasar-dasar <i>Textbox</i> dan <i>Button</i> Silverlight. <i>Tool</i> yang akan kita gunakan adalah Microsoft Expression Blend 3 (pastikan sudah terinstal di komputer kamu) dan tentunya .Net Framework 3.5 SP1 dan pastikan juga <i>browser default</i> kamu sudah terinstal <i>plug-in</i> Silverlight. Kalau semua bahan sudah tersedia, baru kita mulai memasak. Siap? Ayo buka Expression Blend 3 kamu dan kita mulai <i>ngoprek</i> sama-sama..</p><p style="text-align: justify; line-height: normal; text-indent: -18pt; margin: 0cm 0cm 0pt 54pt;" class="MsoListParagraphCxSpFirst"><span style="font-size:0pt;"><span style="font-size:0pt;">1.<span style=";font-family:';font-size:7;" > </span></span></span>Setelah Expression Blend terbuka, pilih <i>New Project</i>, lalu pilih <i>Silverlight 3 Application + Website</i>. Silahkan pilih nama file yang kamu suka, pilih Visual C# dalam <i>drop-down-list</i> <i>Language</i> (lihat lingkaran merah di Gambar 1), dan tekan OK.</p><p style="text-align: left; line-height: normal; text-indent: -18pt; margin: 0cm 0cm 0pt 54pt;" class="MsoListParagraphCxSpFirst"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFWuWon_7ukUKtnOLzq121espKDStXBj326MrkyGKBAS2LbNDIdPYkrX1OnWnUrmxt_gHtMP3yFl4uNf25d8HTANuaFhJctl20BD7Vsb_O2fEmNTB37cy8R18PAGmDi1vsi-ef9w2-qA4/s1600/blog1.jpg"><img style="text-align: center; margin: 0px auto 10px; width: 330px; display: block; height: 56px; cursor: pointer;" id="BLOGGER_PHOTO_ID_5406012119598081586" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFWuWon_7ukUKtnOLzq121espKDStXBj326MrkyGKBAS2LbNDIdPYkrX1OnWnUrmxt_gHtMP3yFl4uNf25d8HTANuaFhJctl20BD7Vsb_O2fEmNTB37cy8R18PAGmDi1vsi-ef9w2-qA4/s400/blog1.jpg" border="0" /></a></p><p style="text-align: justify; line-height: normal; margin: 0cm 0cm 0pt 54pt;" class="MsoListParagraphCxSpMiddle"><span style="font-size:100%;"><o:p></o:p></span></p><p style="text-align: center; line-height: normal; margin: 0cm 0cm 0pt 54pt;" class="MsoListParagraphCxSpMiddle" align="center"><o:p></o:p></p><p style="text-align: center; line-height: normal; margin: 0cm 0cm 0pt 54pt;" class="MsoListParagraphCxSpMiddle" align="center"><span style="font-size:9px;"><span style="font-size:85%;">Gambar 1. <i>New Project</i>.</span><o:p></o:p></span></p><p style="text-align: center; line-height: normal; margin: 0cm 0cm 0pt 54pt;" class="MsoListParagraphCxSpMiddle" align="center"><span style="font-size:9px;"><o:p></o:p></span></p><p style="text-align: justify; line-height: normal; text-indent: -18pt; margin: 0cm 0cm 0pt 54pt;" class="MsoListParagraphCxSpMiddle"><span style="font-size:0pt;"><span style="font-size:0pt;">2.<span style=";font-family:';font-size:7;" > </span></span></span>Kemudian muncullah MainPage.xaml dengan sebidang ruang kosong yang bisa kita gunakan untuk berekspresi. Sekarang klik tab <i>Assets</i> di sebelah kiri layar (di sebelah tab <i>Project</i>) lalu cari <b><i>TextBox</i> </b>(Gambar 2). Ketemu? Nah, sekarang <i>drag-drop</i> saja <i>TextBox</i> itu ke bidang kerja kita dan atur ukurannya sesuka hati.</p><p style="text-align: justify; line-height: normal; text-indent: -18pt; margin: 0cm 0cm 0pt 54pt;" class="MsoListParagraphCxSpMiddle"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvi27J_0kfKaYnskARElLf1yKRrJFIskHD62mG37KuiYFS9Q6TyhDibupD7Zm-q4jhwkL-2ycI7ScaFpIKuAa6od6XXuYaH1Xd29P2CpZX-E_rC9uQFcz_VznzOW4-bo8kMMhoJCGVZ2k/s1600/blog2.jpg"><img style="text-align: center; margin: 0px auto 10px; width: 330px; display: block; height: 206px; cursor: pointer;" id="BLOGGER_PHOTO_ID_5406012407618234674" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvi27J_0kfKaYnskARElLf1yKRrJFIskHD62mG37KuiYFS9Q6TyhDibupD7Zm-q4jhwkL-2ycI7ScaFpIKuAa6od6XXuYaH1Xd29P2CpZX-E_rC9uQFcz_VznzOW4-bo8kMMhoJCGVZ2k/s400/blog2.jpg" border="0" /></a></p><p style="text-align: justify; line-height: normal; text-indent: -18pt; margin: 0cm 0cm 0pt 54pt;" class="MsoListParagraphCxSpMiddle"><br /></p><p style="text-align: center; line-height: normal; margin: 0cm 0cm 0pt 54pt;" class="MsoListParagraphCxSpMiddle" align="center"><o:p></o:p></p><p style="text-align: center; line-height: normal; margin: 0cm 0cm 0pt 54pt;" class="MsoListParagraphCxSpMiddle" align="center"><span style="font-size:9px;"><span style="font-size:85%;">Gambar 2. Tab <i>Assets</i>, cari <i>TextBox</i>.</span><o:p></o:p></span></p><p style="text-align: center; line-height: normal; margin: 0cm 0cm 0pt 54pt;" class="MsoListParagraphCxSpMiddle" align="center"><span style="font-size:9px;"><o:p></o:p></span></p><p style="text-align: justify; line-height: normal; text-indent: -18pt; margin: 0cm 0cm 0pt 54pt;" class="MsoListParagraphCxSpMiddle"><span style="font-size:0pt;"><span style="font-size:0pt;">3.<span style=";font-family:';font-size:7;" > </span></span></span>Pastikan TextBox yang telah kita buat dalam keadaan terseleksi. Kemudian pada tab<i> Properties</i> di sebelah kanan layar, masukkan nama TextBox pada kolom <i>Name</i>. Misalkan kita beri nama TextBoxSatu (Gambar 3).</p><p style="text-align: justify; line-height: normal; text-indent: -18pt; margin: 0cm 0cm 0pt 54pt;" class="MsoListParagraphCxSpMiddle"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB0mGIZuNLw72dsed3FVyvzA0kOJL-XLpXhtsHqHq5y-EcWlj_3CbpHTlPjpPi1uOMlqoMeOGjiUTZmO0Silz-U8_GkUfASSQj3zyDJ9KWAl7UHUv0vr569VzVEmHpmCXmsQTuMztHCw4/s1600/blog3.jpg"><img style="text-align: center; margin: 0px auto 10px; width: 310px; display: block; height: 86px; cursor: pointer;" id="BLOGGER_PHOTO_ID_5406012413045154210" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB0mGIZuNLw72dsed3FVyvzA0kOJL-XLpXhtsHqHq5y-EcWlj_3CbpHTlPjpPi1uOMlqoMeOGjiUTZmO0Silz-U8_GkUfASSQj3zyDJ9KWAl7UHUv0vr569VzVEmHpmCXmsQTuMztHCw4/s400/blog3.jpg" border="0" /></a></p><p style="text-align: center; line-height: normal; margin: 0cm 0cm 0pt 72pt;" class="MsoListParagraphCxSpMiddle" align="center"><o:p></o:p></p><p style="text-align: center; line-height: normal; margin: 0cm 0cm 0pt 72pt;" class="MsoListParagraphCxSpMiddle" align="center"><span style="font-size:9px;"><span style="font-size:85%;">Gambar 3. Ubah nama <i>TextBox</i>.</span><o:p></o:p></span></p><p style="text-align: justify; line-height: normal; text-indent: -18pt; margin: 0cm 0cm 0pt 54pt;" class="MsoListParagraphCxSpMiddle"><span style="font-size:0pt;"><span style="font-size:0pt;">4.<span style=";font-family:';font-size:7;" > </span></span></span>Sekarang, kita akan membuat <i>button</i>. Cari <i>button</i> di tab <i>Assets</i> (seperti langkah 2), kemudian <i>drag-drop </i>ke bidang kerja. Ubah tulisan pada tombol dengan cara klik kanan pada button dan pilih <b><i>Edit Text</i></b> (dapat dilakukan juga pada <i>TextBox</i>).</p><p style="text-align: justify; line-height: normal; text-indent: -18pt; margin: 0cm 0cm 0pt 54pt;" class="MsoListParagraphCxSpMiddle"><span style="font-size:0pt;"><span style="font-size:0pt;">5.<span style=";font-family:';font-size:7;" > </span></span></span>Beri nama <i>button</i> seperti pada langkah 3. Beri nama <i>ButtonGue</i>.</p><p style="text-align: justify; line-height: normal; text-indent: -18pt; margin: 0cm 0cm 0pt 54pt;" class="MsoListParagraphCxSpMiddle"><span style="font-size:0pt;"><span style="font-size:0pt;">6.<span style=";font-family:';font-size:7;" > </span></span></span>Cari <i>TextBlok</i> pada tab <i>Assets</i> (seperti langkah 2), <i>drag-drop </i>ke bidang kerja dan ubah nama <i>TextBlok</i> kita (seperti langkah 3) menjadi <i>BoxHasil</i>. </p><p style="text-align: justify; line-height: normal; text-indent: -18pt; margin: 0cm 0cm 0pt 54pt;" class="MsoListParagraphCxSpMiddle"><span style="font-size:0pt;"><span style="font-size:0pt;">7.<span style=";font-family:';font-size:7;" > </span></span></span>Klik <i>button </i>yang telah kita buat tadi, kemudian pada tab <i>Properties</i> (lihat gambar 3), klik gambar petir di bagian paling kanan. Tombol tersebut akan membuka <i>property</i> <i>event</i> tombol kita. </p><p style="text-align: justify; line-height: normal; text-indent: -18pt; margin: 0cm 0cm 0pt 54pt;" class="MsoListParagraphCxSpLast"><span style="font-size:0pt;"><span style="font-size:0pt;">8.<span style=";font-family:';font-size:7;" > </span></span></span>Klik dua kali pada <i>input box</i> <i>Click</i> (Gambar 4), maka akan terbuka MainPage.xaml.cs.</p><p style="text-align: left; line-height: normal; text-indent: -18pt; margin: 0cm 0cm 0pt 54pt;" class="MsoListParagraphCxSpLast"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_ctc0NYm7MPBKiXQ7w3mJp9dMiZd1fWhA1UN3WHeoZIQtIa4FaL62hBh3s3T51yP9AzD1RMfjAMTscQqjZ3K-GiQ7vG32OB0B3KhSbO97h-ibQpHs4YX1az_s00j7IaU3T2W-fupfLEg/s1600/blog4.jpg"><img style="text-align: center; margin: 0px auto 10px; width: 343px; display: block; height: 54px; cursor: pointer;" id="BLOGGER_PHOTO_ID_5406012418212909970" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_ctc0NYm7MPBKiXQ7w3mJp9dMiZd1fWhA1UN3WHeoZIQtIa4FaL62hBh3s3T51yP9AzD1RMfjAMTscQqjZ3K-GiQ7vG32OB0B3KhSbO97h-ibQpHs4YX1az_s00j7IaU3T2W-fupfLEg/s400/blog4.jpg" border="0" /></a></p><p style="text-align: center; line-height: normal; margin-bottom: 0pt;" class="MsoNormal" align="center"><o:p></o:p></p><p style="text-align: center; line-height: normal; margin-bottom: 0pt;" class="MsoNormal" align="center"><span style="font-size:9px;"><span style="font-size:85%;">Gambar 4. <i>Double Click</i> di sini.</span><o:p></o:p></span></p><p style="text-align: center; line-height: normal; margin-bottom: 0pt;" class="MsoNormal" align="center"><span style="font-size:9px;"><o:p></o:p></span></p><p style="text-align: center; line-height: normal; margin-bottom: 0pt;" class="MsoNormal" align="center"><span style="font-size:9px;"><o:p></o:p></span></p><p style="text-align: center; line-height: normal; margin-bottom: 0pt;" class="MsoNormal" align="center"><span style="font-size:9px;"><o:p></o:p></span></p><p style="text-align: center; line-height: normal; margin-bottom: 0pt;" class="MsoNormal" align="center"><span style="font-size:9px;"><o:p></o:p></span></p><p style="text-align: justify; line-height: normal; text-indent: -18pt; margin: 0cm 0cm 0pt 54pt;" class="MsoListParagraphCxSpFirst"><span style="font-size:0pt;"><span style="font-size:0pt;">9.<span style=";font-family:';font-size:7;" > </span></span></span>Berikutnya, ketikkan kode ini</p><p style="text-align: justify; line-height: normal; text-indent: -18pt; margin: 0cm 0cm 0pt 54pt;" class="MsoListParagraphCxSpFirst"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEip5PiVYoRJcHxJFz5N3cIa3cLm4R4IloiGm5AoPr2zJ4POaFrR1WgiQKwvttw2v-1cVqLL5kcGBH3TcjA8LcGIpiunpD-Ba9HEWzDI34hgy6e7wsrlgBaU5EfGssgxv1aknereX-fBQbM/s1600/blog5.jpg"><br /></a></p><p style="text-align: center; line-height: normal; margin: 0cm 0cm 0pt 54pt;" class="MsoListParagraphCxSpMiddle" align="center"><o:p></o:p></p><p style="text-align: justify; line-height: normal; text-indent: -18pt; margin: 0cm 0cm 0pt 54pt;" class="MsoListParagraphCxSpMiddle">private void ButtonGue_Click(object sender, System.Windows.RoutedEventArgs e)<br />{<br />String IsiTextBox = TextBoxSatu.Text;<br /><span style="color: rgb(255, 255, 51);">/*</span><br /><span style="color: rgb(255, 255, 51);">Baris di atas ini fungsinya untuk menyimpan</span><br /><span style="color: rgb(255, 255, 51);">isi text box yang udah kita bikin ke dalam</span><br /><span style="color: rgb(255, 255, 51);">sebuah variabel string.</span><br /><span style="color: rgb(255, 255, 51);">*/</span><br />BoxHasil.Text = "Halo "+IsiTextBox+"... \nApa kabar?";<br /><span style="color: rgb(255, 255, 51);">/*</span><br /><span style="color: rgb(255, 255, 51);">Baris berikutnya fungsinya untuk menampilkan kata-kata (string) tertentu</span><br /><span style="color: rgb(255, 255, 51);">ke dalam text block yang udah kita bikin tadi. Yang dalem tanda</span><br /><span style="color: rgb(255, 255, 51);">kutip itu adalah string trus tanda plus (+) itu untuk</span><br /><span style="color: rgb(255, 255, 51);">ngegabung string satu (misalkan "Halo") dengan string IsiTextBox.</span><br /><span style="color: rgb(255, 255, 51);">*/</span><br />}<br /></p><p style="text-align: justify; line-height: normal; text-indent: -18pt; margin: 0cm 0cm 0pt 54pt;" class="MsoListParagraphCxSpMiddle"><span style="font-size:0pt;"><span style="font-size:0pt;">10.<span style=";font-family:';font-size:7;" > </span></span></span>Setelah diketik, tekan F5 (atau klik Project->Run Project) untuk menjalankan program ini, dan.. Poof, lihat apa yang terjadi...<br /></p><p style="text-align: justify; line-height: normal; text-indent: -18pt; margin: 0cm 0cm 0pt 54pt;" class="MsoListParagraphCxSpMiddle"><br /></p><p style="text-align: justify; line-height: normal; margin: 0cm 0cm 0pt 54pt;" class="MsoListParagraphCxSpLast"><o:p></o:p></p><p style="text-align: justify; line-height: normal; text-indent: 36pt; margin-bottom: 0pt;" class="MsoNormal">Nah, udah jago dong sekarang pake textbos sama button? Nanti kita belajar lagi yang lebih seru ya...</p><p style="text-align: justify; line-height: normal; text-indent: 36pt; margin-bottom: 0pt;" class="MsoNormal"><br /></p><p style="text-align: justify; line-height: normal; text-indent: 36pt; margin-bottom: 0pt;" class="MsoNormal"><span style="font-size:100%;"><br />-- Koding Sambil Ngopi --<br />-- Farhad Alaydrus -- </span></p>Farhad Alaydrushttp://www.blogger.com/profile/02135974688853926772noreply@blogger.com0tag:blogger.com,1999:blog-1362636812352831137.post-27082308598034692222009-11-15T19:41:00.000-08:002011-01-05T20:48:44.975-08:00Galeri Foto Keren Dengan Deep Zoom Composer<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYJLiRKtfIPNPanoUIsVB8fxemacovZ4Ga8Oz7mz3SIhACPQYiDy5GxBG599ziKRgFn1TDKG1RLofaqcsDnB8Fd6s3uRg_LlEVacuZ222WIztviD6WdBEmsW548O9iG6kxveHjvKzn0j4/s1600/deepzom.jpg"><img style="text-align: center; margin: 0px auto 10px; width: 400px; display: block; height: 309px; cursor: pointer;" id="BLOGGER_PHOTO_ID_5404545227283481714" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYJLiRKtfIPNPanoUIsVB8fxemacovZ4Ga8Oz7mz3SIhACPQYiDy5GxBG599ziKRgFn1TDKG1RLofaqcsDnB8Fd6s3uRg_LlEVacuZ222WIztviD6WdBEmsW548O9iG6kxveHjvKzn0j4/s400/deepzom.jpg" border="0" /></a>
<br />
<br /><meta content="text/html; charset=utf-8" equiv="Content-Type"><meta name="ProgId" content="Word.Document"><meta name="Generator" content="Microsoft Word 12"><meta name="Originator" content="Microsoft Word 12"><link rel="File-List" href="file:///C:%5CUsers%5CFARHAD%7E1%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_filelist.xml"><link rel="Edit-Time-Data" href="file:///C:%5CUsers%5CFARHAD%7E1%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_editdata.mso"><style> v\:* {behavior:url(#default#VML);} o\:* {behavior:url(#default#VML);} w\:* {behavior:url(#default#VML);} .shape {behavior:url(#default#VML);} </style><link rel="themeData" href="file:///C:%5CUsers%5CFARHAD%7E1%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_themedata.thmx"><link rel="colorSchemeMapping" href="file:///C:%5CUsers%5CFARHAD%7E1%5CAppData%5CLocal%5CTemp%5Cmsohtmlclip1%5C01%5Cclip_colorschememapping.xml"><style> <!-- /* Font Definitions */ @font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:1; mso-generic-font-family:roman; mso-font-format:other; mso-font-pitch:variable; mso-font-signature:0 0 0 0 0 0;} @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:-520092929 1073786111 9 0 415 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:""; margin-top:0cm; margin-right:0cm; margin-bottom:10.0pt; margin-left:0cm; line-height:115%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-fareast-language:EN-US;} p.MsoListParagraph, li.MsoListParagraph, div.MsoListParagraph {mso-style-priority:34; mso-style-unhide:no; mso-style-qformat:yes; margin-top:0cm; margin-right:0cm; margin-bottom:10.0pt; margin-left:36.0pt; mso-add-space:auto; line-height:115%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-fareast-language:EN-US;} p.MsoListParagraphCxSpFirst, li.MsoListParagraphCxSpFirst, div.MsoListParagraphCxSpFirst {mso-style-priority:34; mso-style-unhide:no; mso-style-qformat:yes; mso-style-type:export-only; margin-top:0cm; margin-right:0cm; margin-bottom:0cm; margin-left:36.0pt; margin-bottom:.0001pt; mso-add-space:auto; line-height:115%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-fareast-language:EN-US;} p.MsoListParagraphCxSpMiddle, li.MsoListParagraphCxSpMiddle, div.MsoListParagraphCxSpMiddle {mso-style-priority:34; mso-style-unhide:no; mso-style-qformat:yes; mso-style-type:export-only; margin-top:0cm; margin-right:0cm; margin-bottom:0cm; margin-left:36.0pt; margin-bottom:.0001pt; mso-add-space:auto; line-height:115%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-fareast-language:EN-US;} p.MsoListParagraphCxSpLast, li.MsoListParagraphCxSpLast, div.MsoListParagraphCxSpLast {mso-style-priority:34; mso-style-unhide:no; mso-style-qformat:yes; mso-style-type:export-only; margin-top:0cm; margin-right:0cm; margin-bottom:10.0pt; margin-left:36.0pt; mso-add-space:auto; line-height:115%; mso-pagination:widow-orphan; font-size:11.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-fareast-language:EN-US;} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:Calibri; mso-fareast-theme-font:minor-latin; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-fareast-language:EN-US;} .MsoPapDefault {mso-style-type:export-only; margin-bottom:10.0pt; line-height:115%;} @page Section1 {size:595.3pt 841.9pt; margin:72.0pt 72.0pt 72.0pt 72.0pt; mso-header-margin:35.4pt; mso-footer-margin:35.4pt; mso-paper-source:0;} div.Section1 {page:Section1;} /* List Definitions */ @list l0 {mso-list-id:1205941860; mso-list-type:hybrid; mso-list-template-ids:1416765864 69271567 69271577 69271579 69271567 69271577 69271579 69271567 69271577 69271579;} @list l0:level1 {mso-level-tab-stop:none; mso-level-number-position:left; text-indent:-18.0pt;} ol {margin-bottom:0cm;} ul {margin-bottom:0cm;} --> </style>
<br /><p style="text-align: justify; line-height: normal; margin-bottom: 6pt;" class="MsoNormal"><span style="font-size:0pt;"></span>Satu lagi teknologi keren dari Microsoft yang bisa kita gunakan untuk berekspresi dengan gambar dan animasi, namanya <i>Deep Zoom Composer</i>. Sesuai namanya, <i>software</i> ini digunakan untuk membuat aplikasi berbasis Silverlight dengan kemampuan <i>zoom</i> (<i>deep zoom</i>) sampai ratusan kali. Pernah liat foto di dalam foto, dan ada foto lagi di dalam foto itu, terus ada foto lagi di dalam foto yang ada di dalam foto itu? Nah, kita bisa buat yang seperti itu dengan <i>Deep Zoom Composer</i> dengan mudah dan cepat. Untuk memulai berkarya, kita perlu mempersenjatai diri dengan .Net Framework 3.5, Silverlight 3.0, dan <i>Deep Zoom Composer</i>-nya sendiri. Kalo mau download Deep Zoom Composer <a href="http://www.microsoft.com/downloads/details.aspx?familyid=457b17b7-52bf-4bda-87a3-fa8a4673f8bf&displaylang=en">klik aja disini</a>. O ya, jangan lupa beberapa foto yang akan kita <i>utak-utik</i>. Kalau semuanya sudah lengkap, berarti kita siap beraksi dengan beberapa langkah penting:</p><p style="text-align: justify; line-height: normal; text-indent: -18pt; margin-bottom: 6pt;" class="MsoListParagraphCxSpFirst"><span style="font-size:0pt;"><span style="font-size:0pt;">1.<span style=";font-family:';font-size:7;" > </span></span></span>Buka Deep Zoom Composer dan pilih aja <i>New Project</i> di jendela yang muncul pertama kali atau klik File->New Project, beri nama project sesuai keinginan dan tekan <i>OK</i>.</p><p style="text-align: justify; line-height: normal; text-indent: -18pt; margin-bottom: 6pt;" class="MsoListParagraphCxSpMiddle"><span style="font-size:0pt;"><span style="font-size:0pt;">2.<span style=";font-family:';font-size:7;" > </span></span></span>Akan ada 3 tombol utama di bagian atas window, yaitu <i>Import</i>, <i>C</i><i>ompose</i>, dan <i>Export</i> (gambar 1). Ketiga tombol ini juga merepresentasikan alur kerja kita di <i>Deep Zoom Composer </i>yaitu pilih foto yang akan diproses, atur penempatan foto, dan <i>export</i> hasil kerja kita.</p><p style="text-align: justify; line-height: normal; text-indent: -18pt; margin-bottom: 6pt;" class="MsoListParagraphCxSpMiddle"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4PKCh_XK_ZoQysoUNe3_VJo0LDKE-l5bgnKDIZPTDAgZmpZUv4bajJBtVEbKrrrJDoFNoweQL14spt4F_TSb2TzM1t2e_qi95odNYlX3e1MC66dR0E7i8oojoGul0zsLNlQTVLdT-NMY/s1600/tool1.jpg"><img style="text-align: center; margin: 0px auto 10px; width: 356px; display: block; height: 77px; cursor: pointer;" id="BLOGGER_PHOTO_ID_5404543713510263122" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4PKCh_XK_ZoQysoUNe3_VJo0LDKE-l5bgnKDIZPTDAgZmpZUv4bajJBtVEbKrrrJDoFNoweQL14spt4F_TSb2TzM1t2e_qi95odNYlX3e1MC66dR0E7i8oojoGul0zsLNlQTVLdT-NMY/s400/tool1.jpg" border="0" /></a></p><p style="text-align: center; line-height: normal; margin-bottom: 6pt;" class="MsoListParagraphCxSpMiddle" align="center"><span style="font-size:0pt;"></span></p><p style="text-align: center; line-height: normal; margin-bottom: 6pt;" class="MsoListParagraphCxSpMiddle" align="center"><span style="font-size:9px;"><o:p></o:p></span></p><p style="text-align: center; line-height: normal; text-indent: -18pt; margin-bottom: 6pt;" class="MsoListParagraphCxSpMiddle"><span style="font-size:85%;"><span style="font-size:0pt;">Gambar 1. tombol utama.</span></span></p><p style="text-align: center; line-height: normal; text-indent: -18pt; margin-bottom: 6pt;" class="MsoListParagraphCxSpMiddle"><span style="font-size:9px;"><span style="font-size:0pt;"><span style="font-size:100%;">
<br /></span></span></span></p><p style="text-align: justify; line-height: normal; text-indent: -18pt; margin-bottom: 6pt;" class="MsoListParagraphCxSpMiddle"><span style="font-size:9px;"><span style="font-size:0pt;"><span style="font-size:100%;">3.</span><span style=";font-family:';font-size:7;" ><span style="font-size:100%;"> </span></span></span></span>Pilih <i>Import</i>, lalu klik <i>Add Image</i> di sebelah kanan <i>window</i>. Nah, selanjutnya tinggal browse aja gambar atau foto-foto yang kita inginkan.<span style="font-size:9px;"><o:p></o:p></span></p><p style="text-align: justify; line-height: normal; text-indent: -18pt; margin-bottom: 6pt;" class="MsoListParagraphCxSpMiddle"><span style="font-size:0pt;"><span style="font-size:0pt;">4.<span style=";font-family:';font-size:7;" > </span></span></span>Setelah kita punya foto-foto, waktunya kita mengatur posisinya. Klik <i>Compose</i>, dan tampilan <i>window</i> akan berubah. Lebih banyak lagi toolbar yang muncul di sebelah kiri layar (Gambar 2). Untuk mengatur posisi gambar, kita hanya cukup melakukan <i>drag and drop</i> sesuka hati. Coba tempatkan satu foto, kemudian zoom jauh ke dalam foto tersebut dengan tool <i>Zoom</i> (scroll up) dan tempatkan foto lain di sana. </p><div style="text-align: left;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhetluZLdvUr05NCh7vG6_9hfwXltt66vbM8UZW0Cn1iHFmFpt1NACrJ9-WxpW6e3V8DA1ubNzXNvNqi5MpV30WGuIQvMDVWzK4XendTZTU0FSKaTj_S8pXVvIg7k5SAjIoHKy3AHM8Ghg/s1600/bzoom+composer.jpg"><img style="text-align: center; margin: 0px auto 10px; width: 400px; display: block; height: 122px; cursor: pointer;" id="BLOGGER_PHOTO_ID_5404544160011439570" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhetluZLdvUr05NCh7vG6_9hfwXltt66vbM8UZW0Cn1iHFmFpt1NACrJ9-WxpW6e3V8DA1ubNzXNvNqi5MpV30WGuIQvMDVWzK4XendTZTU0FSKaTj_S8pXVvIg7k5SAjIoHKy3AHM8Ghg/s400/bzoom+composer.jpg" border="0" /></a>
<br /></div><p style="text-align: center; line-height: normal; margin: 0cm 0cm 6pt 72pt;" class="MsoListParagraphCxSpMiddle" align="center"><span style="font-size:9px;"><o:p></o:p></span></p><p style="text-align: center; line-height: normal; margin: 0cm 0cm 6pt 72pt;" class="MsoListParagraphCxSpMiddle" align="center"><span style="font-size:9px;"><span style="font-size:85%;">Gambar 2. Tool Compose.</span><o:p></o:p></span></p><p style="text-align: justify; line-height: normal; text-indent: -18pt; margin-bottom: 6pt;" class="MsoListParagraphCxSpLast"><span style="font-size:0pt;"><span style="font-size:0pt;">5.<span style=";font-family:';font-size:7;" > </span></span></span>Setelah puas dengan komposisi yang kita atur, waktunya meng-<i>export</i> hasilnya. Klik Export, lalu pilih tab Custom di sebelah kanan layar (Gambar 3). Pilih format export (Pilih aja Silverlight Deep Zoom), dan tentukan nama file outputnya. Setelah semua lengkap, tekan tombol <i>Export</i> dan BOOM, jadilah galeri foto keren ala Deep Zoom Composer.</p><p style="text-align: center; line-height: normal; margin-bottom: 6pt;" class="MsoNormal" align="center"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKtZwGAGPJzMvJmli7boroXbDFJQnvZfgrYRPG2M2MvaXsvE9gqfrQgQW9PVNwpYH8C5EiaaHRpvi4fQ1eAl3uhP0TC4CW5REo1cr8vPx3o0Q7kezeJ2nkwNjicEiqGnhYUo5Z-iivxAw/s1600/tool2.jpg"><img style="text-align: center; margin: 0px auto 10px; width: 400px; display: block; height: 95px; cursor: pointer;" id="BLOGGER_PHOTO_ID_5404544668914082162" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKtZwGAGPJzMvJmli7boroXbDFJQnvZfgrYRPG2M2MvaXsvE9gqfrQgQW9PVNwpYH8C5EiaaHRpvi4fQ1eAl3uhP0TC4CW5REo1cr8vPx3o0Q7kezeJ2nkwNjicEiqGnhYUo5Z-iivxAw/s400/tool2.jpg" border="0" /></a></p><p style="text-align: center; line-height: normal; margin-bottom: 6pt;" class="MsoNormal" align="center"><span style="font-size:8px;"><span style="font-size:85%;">Gambar 3. Panel Export.</span></span></p><p style="text-align: left; line-height: normal; margin-bottom: 6pt;" class="MsoNormal">Tinggal dicobain deh sekarang. Keren kan?
<br /></p><p style="text-align: left; line-height: normal; margin-bottom: 6pt;" class="MsoNormal">
<br /><span style="font-size:8px;"><o:p></o:p></span></p><span style="font-size:100%;">
<br />-- Koding Sambil Ngopi --
<br />-- Farhad Alaydrus -- </span>Farhad Alaydrushttp://www.blogger.com/profile/02135974688853926772noreply@blogger.com0tag:blogger.com,1999:blog-1362636812352831137.post-25601833172851738212009-10-23T02:11:00.000-07:002011-01-05T20:48:44.976-08:00Secangkir Light Latte Dan Perkenalan Dengan Silverlight 3: Jangan Mau Jadi Penonton DoangMalam ini gw kembali berhadapan dengan Cerz (laptop gw satu-satunya) yang masih aja semangat muter lagu There She Goes-nya Sixpense None The Richer. Secangkir light latte nemenin gw begadang malem ini, cukup kopi ringan karna gw emang ga ada niat bangun sampe pagi. Sambil berusaha ngikutin lirik lagu yang gw cuma tau sepotong-sepotong ini, gw tiba-tiba keinget sama kejadian yang ternyata mengubah hidup gw. <br />Waktu itu pertengahan Desember 2008 pas kampus gw kedatangan dua orang dari Microsoft Indonesia yang bakal jadi pembicara seminar IT-Today garapan anak Ilkom IPB. Gw sebagai ketua panitia kontan harus menyambut dong pas dua tamu yang udah dinanti itu turun dari taksi (gokil juga naik taksi dari Jakarta ke Darmaga yang jauh dan ngampung abis). Dua orang itu adalah Pak Norman Sasono sama Pak Julius Fenata yang menyampaikan seminar yang inspiratif banget buat anak Ilkom yang masih cupu kayak gw. <br /><br />Selama ini gw ngeliat software ya cuma sebagai tool aja, tapi hari itu Pak Norman dan Pak Julius memperkenalkan ke gw dan temen-temen barang baru yang bener-bener keren, nyeni dan bikin mangap sampe ngga sadar kalo ada lalet masuk ke mulut (sumpah ada lalet hamper masuk ke mulut waktu itu). Barang baru itu bernama Silverlight. Dan Silverlight bener-bener ngebius gw sampe sekarang (nah gw aja nulis ini setengah sadar jadinya).<br /><br />Sebenernya gw udah ketinggalan jaman banget waktu pertama kali tau soal Silverlight, karna sebenernya teknologi itu udah dirilis sejak taun 2007 (bayangkan gw telat setaun). Oke, buat lw yang belom tau (sebelum makin ketinggalan) atau mau tau lebih lanjut soal ni barang, gw bakal certain deh...<br /><br /><span style="font-weight:bold;">Silverlight Brief History</span><br /><br />Oke, jadi gini ceritanya (Auuuu… Hehe masih inget acara di RCTI yang judulnya Kismis ga? Auuuuuuuu).. Pada zaman dahulu kala, tepatnya taun 2006, Microsoft ngeluarin teknologi buat bikin user interface desktop yang canggih, cantik, menarik dan terintegrasi sama .Net Framework. Teknologi keren itu dinamain Windows Presentation Foundation alias WPF. Aplikasi desktop yang bisa dibangun pake teknologi ini bener-bener bisa ngasih user experience yang luar biasa banget buat penggunanya. Nah, terus setelah kemunculan gilang gemilang dari si cantik WPF, dikembangkanlah adiknya bertugas untuk mempercantik dan memperkaya tampilan website. Adiknya itu adalah WPE/E yang kemudian berganti nama (lengkap dengan bubur merah-putih) menjadi Silverlight. <br /><br />Silverlight terus dikembangkan mulai dari Silverlight 1 dengan kode pendukung JavaScript dirilis tanggal 5 September 2007, Silverlight 1.1 Alpha yang terintegrasi sama .Net yang ujung-ujungnya menjadi Silverlight 2 pada 14 Oktober 2008. Ga sampe disitu aja, sekarang udah hadir nih Silverlight 3 (Horeee!!!)…<br />Sekarang ini udah banyak banget web yang pake Silverlight. Kalo mau liat-liat coba deh dateng aja ke <a href="http://silverlight.vet">http://silverlight.net</a> atau coba aja baca koran dengan gaya baru di <a href="http://epaper.kompas.com"></a>, dan masih buanyak lagi web seru lainnya. <br />So jangan mau jadi penonton aja, kita cobain yuk belajar sama-sama buat bikin sesuatu pake Silverlight 3…<br /><br /><br />-- Koding Sambil Ngopi --<br />-- Farhad Alaydrus --Farhad Alaydrushttp://www.blogger.com/profile/02135974688853926772noreply@blogger.com0