Farhad Alaydrus - Yet Another Geek's Blog

See also: Other Geeks@INDC
Silverlight 5: Elevated-Trust In-Browser Applications

image

Pada versi Silverlight 5, terdapat beberapa perubahan fitur pada aplikasi yang bersifat Elevated-Trust. Salah satu perubahan tersebut adalah dimungkinkannya elevated-trust pada in-browser applications.

Tidak seperti versi sebelumnya, pada Silverlight 5, untuk mendapatkan hak elevated-trust sebuah aplikasi tidak harus berjalan secara Out if Browser (OOB). Elevated-trust dapat dicapai dengan aplikasi yang berjalan di browser. Untuk mendapatkan fitur ini, perlu diperhatikan bahwa kita harus mengenable aplikasi untuk dijalankan dengan elevated trust via Client Access Policy file atau melalui Windows Registry. Penggunaan Client Access Policy dapat membuat aplikasi elevated-trust pada private network, sedangkan windows registry memungkinkan aplikasi untuk bekerja elevated-trust di sebuah mesin tertentu.

Modifikasi Client Access Policy file dilakukan dengan memodifikasi SecuritySetting. Permission yang perlu ditambahkan adalah :

<SecuritySettings ElevatedPermissions="Required" />

Untuk memberikan elevated-trust aplikasi untuk dapat bekerja di satu komputer saja, kita perlu memodifikasi registry pada HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Silverlight. Pada lokasi ini, perlu kita tambahkan value:

  • AllowElevatedTrustAppsInBrowser dengan value TRUE (0×00000001) untuk mengenable elevated-trust application di dalam browser.
  • AllowInstallOfElevatedTrustApps dengan value TRUE (0×00000001) untuk mengenable aplikasi elevated-trust diinstal di komputer
  • AllowLaunchOfElevatedTrustApps dengan value TRUE (0×00000001) untuk mengenable aplikasi elevated-trust.

Namun masih terdapat batasan dalam mengeksekusi aplikasi elevated-trust di dalam browser yaitu:

  • XAP aplikasi haruslah memiliki trusted certificate yang dapat diperoleh di Trusted Publisher Certificate store.
  • Aplikasi in-browser hanya dapat dilajankan pada whitelisted domains. Localhost merupakan domain yang termasuk dalam whitelist sehingga aplikasi elevated-trust akan berjalan dengan sempurna di localhost. Ketika aplikasi dideploy pada suatu domain tertentu, maka harus dipastikan bahwa domain tersebut telah ditambahkan ke dalam whitelist.
  • Pada versi beta, in-browser elevated-trust hanya disupport pada Windows saja, dukungan platform lain akan ada pada final release.

Lebih lanjut mengenai Access Restriction ini dapat dibaca di msdn.microsoft.com. Semoga bermanfaat.

Share this post: | | | |
Silverlight 5: Mendeteksi Triple Click Dengan ClickCount

Pada tulisan sebelumnya tentang Double Click dengan ClickCount, saya mencoba mendeteksi double click. Kini saya ingin mencoba untuk mendeteksi Triple Click. Sebenarnya triple click jarang digunakan, namun saya penasaran dan ingin mencoba. Smile

Baiklah, andaikan kita punya sebuiah rectangle yang akan kita jadikan sebagai sebuah kontrol

<UserControl x:Class="MouseClickCountDemo.MainPage"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            mc:Ignorable="d"
            d:DesignHeight="300"
            d:DesignWidth="400">
            <Grid x:Name="LayoutRoot" Background="White">
                        <Rectangle x:Name="MyRect"
                                    Width="100"
                                    Height="100"
                                    MouseLeftButtonDown="MyRect_MouseLeftButtonDown"
                        Fill="Blue" />
            </Grid>
</UserControl>

Pada awalnya, saya memodifikasi kode c# dari posting saya sebelumnya (Double Click dengan ClickCount) menjadi:

private void MyRect_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    System.Diagnostics.Debug.WriteLine("Click Count: " + e.ClickCount);
    if (e.ClickCount == 2)
    {
        System.Diagnostics.Debug.WriteLine("Saya diklik dua kali alias double click");
    }

    else if (e.ClickCount == 3)
    {
        System.Diagnostics.Debug.WriteLine("Saya diklik tiga kali alias triple click");
    }  
}

namun ternyata tidak behasil. Menurut beberapa sumber yang saya baca, salah satunya adalah blog 10REM.Net, untuk mendeteksi triple click, kita perlu mendefinisikan batas waktu yang ditolerir untuk sebuah click delay. Jadi klik ketiga akan dianggap sebagai Triple Click jika masih berada pada delay click yang sesuai threshold. Oleh karena itu kita memerlukan Timer untuk memperoleh fitur Triple Click. Pada kode C#, kita perlu membuat kode seperti ini:

private TimeSpan clickThreshold = TimeSpan.FromMilliseconds(500);
private int clickCount = 0;
private DispatcherTimer clickTimer = new DispatcherTimer();
     
void MyRect_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    clickCount = e.ClickCount;
 
    if (e.ClickCount >= 2 && !clickTimer.IsEnabled) //setelah terjadi dua kali klik
    {
        clickTimer.Interval = clickThreshold;
        clickTimer.Tick += TimerTick;
        clickTimer.Start();
    }
    else if (e.ClickCount < 2)
    {
        clickTimer.Stop();
    }
}
 
private void TimerTick(object sender, EventArgs e)
{
    clickTimer.Stop();
    clickTimer.Tick -= TimerTick;
 
    if (clickCount == 2)
    {
        System.Diagnostics.Debug.WriteLine("Terjadi Double CLick");
    }
    else if (clickCount == 3)
    {
        System.Diagnostics.Debug.WriteLine("Terjadi Triple Click!");
    }
}

Dengan cara demikian kita dapat mendeteksi Triple Click pada Silverlight 5. Semoga bermanfaat. Open-mouthed smile

Share this post: | | | |
Silverlight 5 : Mendeteksi Double Click Dengan ClickCount

Penggunaan fitur double click terkadang dapat menjadi masalah bagi beeberapa pengguna khususnya orang tua dan anak-anak. Pengguna berusia sangat muda dan sangat tua cenderung memiliki kesulitan dalam melakukan klik debanyak dua kali dengan cepat pada satu titik. Hal ini menyebabkan penggunaan double click menjadi tidak populer dalam aplikasi RIA seperti Silverlight. Namun, ada kalanya double click diperlukan, seperti saat melakukan seleksi teks, atau ketika melakukan manipulasi 2d dan 3d. Untuk mengakomodasi keperluan tersebut, Silverlight 5 beta memperkenalkan konsep ClickCount. ClickCount juga dapat digunakan untuk mencegah klik berkali-kali pada suatu kontrol.

ClickCount merupakan property dari MouseButtonEventArgs yang dapat digunakan untuk menghitung jumlah click yang dilakukan. Berikut adalah contoh penggunaan ClickCount untuk mendeteksi double click:

Andaikan kita punya sebuiah rectangle yang akan kita jadikan sebagai sebuah kontrol.

<UserControl x:Class="MouseClickCountDemo.MainPage"
            xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
            xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
            xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
            xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
            mc:Ignorable="d"
            d:DesignHeight="300"
            d:DesignWidth="400">
            <Grid x:Name="LayoutRoot" Background="White">
                        <Rectangle x:Name="MyRect"
                                    Width="100"
                                    Height="100"
                                    MouseLeftButtonDown="MyRect_MouseLeftButtonDown"
                        Fill="Blue" />
            </Grid>
</UserControl>

Secara sederhana kita dapat membuat kode event handler C# untuk mendeteksi double click pada rectangle MyRect.

private void MyRect_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    System.Diagnostics.Debug.WriteLine("Click Count: " + e.ClickCount);
    if (e.ClickCount == 2)
        System.Diagnostics.Debug.WriteLine("Saya diklik dua kali alias double click");
}

Dengan ClickCount ini, kita dapat mendeteksi double click dan juga dapat melakukan pencegahan suatu method yang ditrigger dari button atau kontrol lainnya dieksekusi berkali-kali karena user melakukan klik lebih dari satu kali. Semoga bermanfaat.

Share this post: | | | |
Meningkatkan Usability pada WPF User Experience

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 satu komponen penting dalam pengembangan antarmuka adalah Usability. Usability sendiri adalah ukuran kebergunaan suatu aplikasi. Berdasarkan Windows User Experience Guidelines, pengembangan antarmuka WPF akan usable dengan mempertimbangkan beberapa hal berikut:

-          Memodelkan dunia nyata. Pengembangan WPF dapat melibatkan berbagai interaksi serta visual effect yang dapat menghasilkan antarmuka aplikasi yang terlihat natural dan sama seperti apa yang ada di dunia nyata. Misialnya, sebuah aplikasi kalkulator haruslah bekerja sebagaimana kalkulator yang ada di dunia nyata. Atau aplikasi absensi kantor, haruslah dapat memodelkan proses absensi di sebuah perusahaan. KessKesesuaian dengan dunia nyata membuat pengguna dengan mudah mengetahui apa yang harus ia lakukan dalam mengerjakan sebuah task. Hal ini membuat pengguna dapat mempersingkat masa mempelajari cara menggunakan aplikasi dan berkonsentrasi ke goal yang akan dicapai dengan aplikasi WPF yang kita bangun.

-          Menunjukkan ketimbang menjelaskan. Sebuah aplikasi WPF sebaiknya mengurangi penjelasan dalam bentuk tulisan untuk menginformasikan sesuatu kepada pengguna. Sebuah instruksi sebaiknya disampaikan dengan cara mencontohkan bagaimana suatu task dilakukan melalui animasi demo atau penggunaan kontrol lainnya.

-          Penggunaan kontrol yang jelas. Sebuah aplikasi WPF sebaiknya mengurangi penggunaan tulisan pada kontrolnya. Misalnya pada button, daripada membuat tulisan deskriptif tentang fungsi buttonnya, lebih baik membuat button dengan bentuk yang dapat menjelaskan dirinya sendiri. Misalnya button “home” yang berbentuk rumah serta button exit yang berbentuk “x”.  Selain itu, penjelasan mengenai sebuah control dapat dijelaskan oleh control lain seperti tooltip.

-          Menggunakan konsep “natural mapping”. Konsep ini merupakan pemetaan yang jelas antara apa yang ingin pengguna lakukan dengan bagaimana cara melakukan hal tersebut. Oleh karena itu sebuah cutom control haruslah memiliki behavior yang sama dengan control standar. Misalnya, sebuah button akan mengkonfirmasi suatu fungsi jika diklik, bukan ketika didrag. Hal ini harus diperhatikan saat mengkostumisasi sebuah control di WPF.

-          Mengurangi kebutuhan pengetahuan pengguna. Untuk menghasilkan aplikasi WPF yang usable, sebuah task haruslah dapat mempermudah pekerjaan pengguna. Misalkan sebuah aplikasi perhitungan fisika diharapkan dapat membantu pengguna menghitung kecepatan sebuah mobil tanpa pengguna perlu menghafal rumus. Contoh lainnya adalah sebuah textbox untuk memasukkan angka yang akan secara otomatis mengubah angka decimal dengan koma (,) menjadi bentuk decimal dengan titik (.).

-          Memberikan feedback. Aplikasi WPF haruslah responsive dan memberikan feedback kepada pengguna. Feedback dapat berupa peringatan, progress bar, throber, atau bentuk lain yang mengindikasikan aplikasi sedang memproses sesuatu. Tidak adanya feedback akan membuat pengguna bingung apakah aplikasi ini sedang memproses requestnya atau justru sedang hang.

-          Membuat setiap objek mudah diakses. Sebuah objek akan mudah diakses jika objek tersebut mudah dilihat, rapi dan teratur. Misalnya, sebuah antarmuka yang berantakan akan menjadi sulit dioperasikan oleh pengguna. Beberapa textbox misalnya, ketika pengguna mengetik di satu textbox kemudian akan pindah ke textbox lain dengan menggunakan tombol “tab”, harus dipastikan bahwa focus control akan menuju ke textbox yang berada tepat dibawahnya. Penggunaan mnemonic juga dapat menjadi alternative untuk memudahkan pengguna mengakses sebuah control.

-          Fokus. Antarmuka aplikasi WPF yang kita bangun haruslah dapat memfokuskan pandangan pengguna ke elemen yang menjadi pusat perhatian pada penyelesaian task. Hal ini dapat dilakukan dengan memberikan distance pada control (dengan mengubah brightness atau z-axis misalnya) sehingga pengguna dapat menemukan dengan mudah apa yang harus ia lakukan untuk mencapai suatu goal.

Ini adalah  beberapa poin yang perlu diperhatikan saat mengembangkan antarmuka suatu aplikasi khususnya WPF. Semoga bermanfaat.

 

Share this post: | | | |
Prinsip “Keren” Dalam WPF User Experience

 

Windows Presentation Foundation menghadirkan suasana baru dalam pengembangan aplikasi desktop. Seperti yang sudah kita ketahui bersama, WPF menyediakan akses ke tampilan antarmuka yang interaktif dan atraktif. Pengembangan aplikasi WPF tidaklah lepas dari pengembangan User Experience (UX) yang menjadi salah satu fokus teknologi ini. Ada beberapa prinsip dasar yang perlu diperhatikan sebelum mengembangkan UX pada WPF.

Prinsip pengembangan UX pada WPF didasarkan pada Windows User Experience Guidelines (Windows UX Guide) yang memang dirancang khusus untuk Windows. Karena WPF merupakan aplikasi desktop yang berjalan di Windows, maka suatu antarmuka aplikasi WPF sebaiknya tidak mengabaikan look and feel yang sudah ada di Windows. Developer dapat mengekspansi antarmuka dari look and feel windows konvensional tanpa mengabaikan ‘pakem’ yang telah ada.

Dengan WPF, seorang developer dapat mengembangkan control sesuka hatinya. Misalnya kita bisa saja membuat sebuah tombol yang berbentuk seperti combobox, atau mungkin sebuah combobox yang bekerja seperti lookup-box. Namun kebebasan desain ini perlu diimplementasikan dengan memperhatikan dasar-dasar yang telah ada di UI Windows. Tidaklah tepat jika sebuah drop-down list ketika diklik akan memunculkan popup lookup box. Atau tidaklah tepat jika sebuah button tidak terlihat clickable. Hal semacam ini hanya akan menghasilkan antarmuka yang “keren” namun tidak usable.

Berbicara mengenai istilah “keren”, kita harus dapat mengerti apa yang disebut “keren” dalam konteks WPF UX. WPF telah menyediakan komponen-komponen yang dapat digunakan. Komponen-komponen ini bagaikan kain, kancing serta bordir yang ada di meja penjahit. Bagus atau tidaknya baju yang dihasilkan tergantung bagaimana si penjahit merangkai kancing, kain dan bordir tersebut.  Sebuah aplikasi WPF dapat dikatakan “keren” jika:

-          Fitur yang diberikan sesuai untuk aplikasi dan sesuai untuk penggunanya. Aplikasi WPF yang ditujukan untuk anak-anak haruslah dapat memberi experience yang menyenangkan bagi anak-anak. Misalnya dengan menggunakan warna-warna dasar dan komplemen, kemudian menggunakan animasi yang lebih atraktif dan dinamis. Sedangkan aplikasi WPF untuk enterprise tentulah harus memiliki UI yang elegan, tidak terlalu ramai serta memberikan fitur yang secukupnya. Tidak perlu berlebihan dalam memberi fitur pada aplikasi WPF. Aplikasi yang terlalu banyak fitur akan seperti makanan yang terlalu banyak garam, jadi tidak bisa dinikmati.

-          Memiliki look and feel yang menyenangkan dan usable, dalam artian dapat dinikmati dan dapat digunakan dengan mudah. Hal ini dapat dicapai dengan memperhatikan sifat dasar suatu komponen. Misalnya, sebuah button yang baik akan memiliki volume sehingga terlihat “clickable”, kemudian button yang disable haruslah lebih redup dari yang sedang aktif. Contoh lainnya adalah sebuah textbox di WPF harus tetap visible dengan memperhatikan kontras warna textbox dengan backgroundnya.

-          Memberikan flow yang menarik pada aplikasi, misalnya penggunaan animasi secukupnya pada control, atau pada splash screen, dan sebagainya. Kita perlu menambahkan bumbu-bumbu secukupnya untuk membedakan aplikasi WPF kita dengan aplikasi windows form biasa.

-          Sebuah aplikasi WPF harus dapat dinikmati “sepanjang zaman”. Biasanya, sebuah aplikasi yang melibatkan animasi serta grafis yang “wah” akan menarik pengguna di awal penggunaan. Pengguna akan berkata “wow,animasinya keren”. Satu dua kali melihat animasi tersebut, pengguna akan bosan dan akhirnya malas untuk melihat animasi tersebut. Oleh karena itu penggunaan animasi pada sebuah aplikasi wpf perlu dibatasi. Durasi animasi sebaiknya tidak lebih dari satu atau dua detik. Misalnya kita membangun aplikasi WPF yang ketika user membuka window aplikasi tersebut, si Window akan berputar-putar di layar, berubah warna, membesar, kemudian dengan efek bounce kembali ke posisi tengah dengan disertai musik selama 30 detik. Pada awalnya ini akan menjadi menarik bagi pengguna, tetapi semakin lama, fitur ini akan menjadi “annoying”. Gunakanlah animasi dan grafis secukupnya dalam durasi yang tidak terlalu panjang. Satu atau dua detik cukup.

Sebuah desain aplikasi yang “keren” dapat menjadi tidak berguna jika tidak sesuai dengan target penggunanya. Oleh karena itu sebelum mendesain aplikasi WPF, perlu diperhatikan terlebih dahulu siapa yang akan menggunakan aplikasi ini. Siapa pengguna aplikasi Anda? Bagaimana karakteristik pengguna aplikasi Anda? Berapa umur mereka? Bagaimana lingkungan kerja mereka? Developer dapat menggunakan persona atau mempertimbangkan penggunaan konsep Usability Engineering Lifecycle dalam penentuan karakteristik pengguna.

 

 

Share this post: | | | |
8 Prinsip Interaction Design Aplikasi Microsoft Surface
Pembangunan aplikasi berbasis Microsoft Surface tidaklah lepas dari pengembangan User Interface dan User Experience yang sesuai dengan kebutuhan sistem. Pengembangan antarmuka aplikasi dengan Microsoft Surface SDK for Windows Touch dapat dikatakan berada pada ranah Natural User Interface (NUI). NUI adalah suatu bentuk antarmuka yang memungkinkan pengguna mengoperasikan aplikasi sebagaimana mereka berinteraksi sehari-hari. Interaksi yang dimaksud seperti, membalik halaman buku saat membaca, menulis dengan tangan untuk mencatat, serta penggunaan gesture lainnya.

Beberapa prinsip yang perlu diperhatikan dalam Interaction Design aplikasi berbasis Surface yaitu:

1. Seamless (mulus)

Mulus dalam konteks ini adalah memberikan pengalaman tanpa cela dalam menggunakan aplikasi. Artinya, antarmuka yang dibangun haruslah dapat membuat pengguna terlibat secara utuh dan menikmati keseluruhan pengalaman yang dihadirkan dalam aplikasi. Izinkanlah pengguna ‘menguasai’ aplikasi yang  dibangun.

Salah satu cara untuk menghasilkan NUI yang seamless adalah dengan menghadirkan objek yang ada di dunia nyata ke dalam dunia virtual atau sebaliknya. Misalkan, bayangkanlah Anda menggunakan aplikasi surface di sebuah café untuk meramu kopi yang anda inginkan. Ketika anda men-submit kopi ramuan Anda, maka kopi tersebut akan segera diantarkan oleh pelayan ke meja Anda. Ini adalah pengalaman yang ‘mulus’ dalam mewujudkan apa yang ada di dunia virtual ke dunia nyata.

Sebaliknya, aplikasi juga dapat menghadirkan objek dari dunia nyata ke dunia virtual. Misalkan ketika kopi anda tersebut sudah datang, Anda dapat meletakkan gelas kopi di atas layar surface dan sistem akan mengenali jenis kopi dan bahan baku yang digunakan (misalkan ada identifikasi khusus di dasar gelas seperti logo atau tag yang dapat dikenali surface).
 

2. Social (social)

Social Experience dapat dimunculkan di aplikasi berbasis Surface. Pengalaman ini dapat dimunculkan dengan cara memberikan akses multi-user secara bersamaan. Permukaan surface dirancang untuk dapat menerima input dari beberapa pengguna sekaligus. Hal ini memberikan sensasi penggunaan system yang biasanya merupakan kegiatan soliter menjadi kegiatan sosial.

Bayangkan kembali café dimana Anda meramu kopi Anda sendiri di layar surface. Social Experience yang dimaksud misalnya adalah ketika Anda dapat meramu kopi bersama-sama dengan rekan Anda. Anda dan rekan Anda dapat saling menambahkan gula, susu atau semacamnya ke kopi yang sedang diramu.

Mungkin di aplikasi surface pada café tersebut Anda dapat membaca buku, maka social experience dapat dicapai ketika Anda dapat memutar buku yang ada di layar dan  menyodorkannya ke teman Anda di seberang meja atau yang berada di samping Anda.

3. Spatial (spasial)

Untuk memaksimalkan experience, aplikasi yang dibangun dengan Surface dapat menggunakan pseudo-3D dengan cara memberikan volume, kedalaman, bayangan serta kesan  saling menumpuk pada objek yang ada di aplikasi. Penggunaan pseudo-3d atau 2.5D disarankan karena kadang penggunaan environment 3d membuat user kehilangan orientasi dan justru mengurangi kenikmatan menggunakan aplikasi.

Untuk menghasilken efek spasial, kita dapat memanipulasi z-axis dan melakukan skew pada objek yang ditampilkan. Manipulasi ukuran serta brightness juga dapat member efek spasial.

4. Super-realism

Penggunaan media touch screen membuat pengguna dapat berinteraksi secara langsung dengan objek yang ada di dalam aplikasi. Super-realism artinya, dalam aplikasi Surface, pengguna dapat menggunakan gerakan tubuh yang natural untuk melakukan sesuatu yang tidak mungkin dilakukan di dunia nyata.

Misalkan aplikasi surface menampilkan foto, maka pengguna dapat menggeser, memutar serta mengoperkan foto ke sekeliling layat seperti saat menggeser foto di atas meja biasa, hal ini adalah natural-realism, sesuatu yang bias dilakukan di dunia nyata dan bias dilakukan dalam sistem. Namun dalam surface, pengguna juga bisa melakukan stretch dengan kedua jarinya pada foto tersebut, dapat melakukan zoom in dan zoom out dengan gerakan jari, dan lainnya. Hal-hal seperti ini merupakan sesuatu yang tidak mungkin dilakukan di dunia nyata (super-realism), namun begitu natural untuk dilakukan.

5. Contextual Environments

Sebuah aplikasi berbasis Surface haruslah dapat memberi feedback atas apa yang dilakukan oleh pengguna. Reaksi dari aplikasi surface akan membuat pengguna belajar mengenai apa yang harus dilakukannya agar aplikasi bekerja.

Prinsip ini disebut Contextual Environments karena aplikasi Surface haruslah bereaksi sesuai konteks yang diberikan oleh pengguna. Misalnya, ketika pengguna menyentuh layar, maka surface akan bereaksi dengan memberikan lingkaran di sekitar jari pengguna. Atau ketika pengguna melakukan kegiatan memutar pada layar, maka aplikasi akan memutar layarnya, serta feedback lainnya yang sesuai dengan konteks.

6. Scaffolding

Scaffolding adalah metode pembelajaran pengguna untuk menggunakan sistem dengan cara mempelajari fitur-fitur kecil di dalamnya terlebih dulu. Metode pembelajaran ini menjawab pertanyaan pengguna, “Bagaimana system bekerja” dengan memfokuskan pada masalah yang lebih kecil yaitu, “Bagaimana cara menginisiasi sebuah action” dengan menggunakan hints, peringatan-peringatan serta notifikasi lain.

Contohnya, sebuah aplikasi Surface memiliki fitur mencetak foto. Maka untuk dapat mencetak foto, system menotifikasi pengguna untuk memilih foto yang akan dicetak, kemudian memintya pengguna mengatur tatanan foto yang akan dicetak, setelah itu barulah foto dicetak. Dapat kita lihat bahwa struktur aplikasi tersebut telah memecah keinginan pengguna untuk “Mencetak foto” menjadi “memilih foto”, “mengatur tata letak foto”, “mencetak foto”.  Hal ini membuat sebuah proses besar menjadi lebih sederhana bagi pengguna.

7. Performance Aesthetics (estetika performa)

Pembangunan antarmuka aplikasi surface tidak hanya perlu memperhatikan estetika tampilan visual, melainkan juga keindahan performa. Keindahan visual dapat melibatkan video, suara, animasi, penggunaan grafis yang cukup dan sesuai dengan konteks. Namun keindahan visual tidak akan berarti jika performa aplikasi tidak mendukung. Aplikasi dengan tampilan yang cantik tidak akan menarik jika aplikasi tidak responsive, mengalami hang, atau mengalami kegagalan lainnya. Oleh karena itu estetika performa sangatlah penting.

8. Direct Manipulation

Manipulasi secara langsung artinya benar-benar menghubungkan dunia nyata dengan system seperti yang telah dibahas pada poin Seamless. Contoh direct manipulation adalah, pengguna dapat bermain catur dengan bidak yang nyata, ataupun mengetahui informasi sebuah buku dengan meletakkan buku di atas permukaan surface. Pengguna diharapkan dapat memanipulasi konten dari aplikasi secara real-time.

sumber utama: http://www.microsoft.com/surface/training/module4/index.html

 
Share this post: | | | |
Learning Snacks Untuk Online Course Dengan LCDS (part 4)

Tulisan ini adalah sambungan dariseri tutorial LCDS pada blog ini.

Fitur berikut dari LCDS yang akan kita coba adalah memuat konten media dengan beberapa langkah berikut: 

1. Selanjutnya, kita akan mencoba mengisikan media pada konten kita. Pertama, klik topic yang masih kosong.

clip_image001

 

2. Kemudian, pada template, pilihlah Watch (lihat gambar) dan klik radio button Animation

clip_image005

 

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.

clip_image007

 

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 C:\Users\Public\Videos\Sample Videos ke C:\ProgramData\Microsoft Learning\LCDS\courses\pelajaran_saya\course\media. Klik Browse dan pilih video atau animasi yang akan kita masukkan. Pilih videonya dan tekan OK.

 

5. Berikutnya, save course dan tekan tombol preview untuk melihat hasilnya.

clip_image008

 

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).

clip_image011

 

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 C:\ProgramData\Microsoft Learning\LCDS\courses\pelajaran_saya\course\media.

clip_image012

 

8. Berikan penjelasan mengenai demonstrasi pada kolom Paragraph.

clip_image013

 

9. Tekan save dan klik preview untuk melihat hasilnya. Pada bagian hasilnya, klik tombol Launch untuk menjalankan animasi.

 

Booyah!

 

Share this post: | | | |
Learning Snacks Untuk Online Course Dengan LCDS (part 3)

Pada LCDS part 3 ini kita akan mencoba fitur interactive job aid dengan beberapa langkah sederhana berikut:

 

1. Berikutnya, kita akan coba fitur Interactive Job Aid untuk membuat serangkaian pertanyaan boolean (Yes-No Question) dalam sebuah decision tree. Arsitektur informasi yang akan kita bangun misalnya seperti ini:

clip_image002

Silahkan klik salah satu Topic dalam course.

clip_image003

 

2. Berikutnya, masih dalam template interact, pilihlah radio button Interactive Job Aid.

clip_image004

 

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?”

clip_image005

 

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.

clip_image006 clip_image007

 

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.

clip_image008

 

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”.

 

7. Simpan course dengan menekan tombol Save atau Ctrl+S.

 

8. Tekan tombol preview (lihat kembali langkah 18) dan lihat hasilnya.

clip_image009

 

 

Share this post: | | | |
Learning Snacks Untuk Online Course Dengan LCDS (part 2)

Pada part 1 kita sudah berkenalan dengan fitur pertama dari LCDS. Sekarang kita akan mencoba tentang template drag and drop.

 

1. Selanjutnya, kita coba membuat kuis sederhana dengan fitur drag and drop. Klik Introduction pada Course Structure dan pastikan Introduction terpilih (sebenarnya ini bisa dilakukan pada bagian manapun dalam struktur, tapi supaya seragam, kita samakan aja dulu ya..)

clip_image003

 

2. Masih pada fitur interactivity (yang gambar mouse itu), pilih radio button bertuliskan Drag and Drop.

clip_image004

 

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:

Hewan

Tumbuhan

Makanan

Kuda

Beringin

Tahu

Ayam

Anggrek

Mie Rebus

Sapi

Mawar

Roti

Dengan fitur ini kita membuat suatu kuis untuk mencocokkan elemen elemen seperti kuda, mawar, dan roti dengan kategorinya.

 

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.

clip_image005

5. Save course dengan cara menekan tombol Save atau Ctrl + S, lalu tekan tombol Preview

 

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.. 

clip_image006

 

Semoga bermanfaat.

 

 

Share this post: | | | |
Learning Snacks Untuk Online Course Dengan LCDS (part 1)

Tool LCDS sebenarnya sudah lama ada di sekitar kita, namun masih jarang ditemukan implementasinya di web-web yang ada di Indonesia. Oleh karena itu saya ingin kembali mengulas tentang tool ini. Belajar melalui media online sudah ada di depan mata dan kita akan mencoba berkenalan dan mengoperasikan tool LCDS untuk membuat materi pelajaran online.Informasi serta link untuk mengunduk LCDS ada di web http://www.microsoft.com/learning/en/us/training/lcds.aspx. Hasil dari learning snack ini dapat dilihat di snackbox.microsoft.com. Sebagai awalan, kita akan coba membuat course sederhana dengan langkah-langkah berikut:

 

1. Bukalah program LCDS.

clip_image004

2. Setelah diklik, akan muncul window LCDS yang tampilannya seperti gambar di bawah ini

clip_image005

3. Sekarang, buatlah Course baru dengan cara klik New (ada di sudut kiri atas). Kemudian akan muncul jendela New – Webpage Dialog. SIlahkan isikan nama course yang anda inginkan, misalnya “Pelajaran Saya” lalu tekan OK.

 

4. Nah, setelah course sukses dibuat, akan muncul course structure yang menunjukkan struktur hierarki dari konten pelajaran ini. Terdapat empat tingkatan dalam struktur course ini yaitu “course”, “module”, “lesson”, dan “topic”.

clip_image023

5. Klik module pada course structure. Pastikan tulisan “Module” di-highlight oranye.

clip_image036

6. Sekarang kita mulai berkarya. Klik tombol dengan gambar Mouse (lihat gambar di bawah).

clip_image037

Ini adalah template interact yang dapat kita gunakan untuk membuat konten pembelajaran yang interaktif. Kita akan coba satu-per-satu template yang ada di dalam interact ini.

7. Pilihlah radio button Adventure Activity, maka akan muncul template pada bagian Page

clip_image038

8. Pada bagian Text, ketikkan “Silahkan pilih satu dari beberapa pilihan ini.”

clip_image040

9. Untuk memasukkan gambar, kita harus terlebih dahulu mengkopi gambar yang akan kita masukkan ke folder

C:\ProgramData\Microsoft Learning\LCDS\courses\pelajaran_saya\course\media

Silahkan kopi gambar yang anda inginkan (misalkan dari C:\Users\Public\Pictures\Sample Pictures) ke folder tersebut. Sebaiknya, sesuaikan dulu ukuran gambar yang akan diletakkan di halaman ini agar gambar tidak terpotong.

10. Setelah gambar dikopi, klik Browse, kemudian pilihlah gambar yang telah kita kopi tadi.

clip_image042

11. Berikutnya, kita buat beberapa halaman lagi, caranya, tekan tombol next page (lihat gambar)

clip_image044

Secara otomatis, sistem akan membuat halaman ke-2 yang masih polos, jadi jangan panic kalau gambar koala dan tulisan di kolom teks menghilang.

clip_image045

12. Isi halaman 2 dengan tulisan “INI HALAMAN 2” dan gambar seperti halnya kita mengisi halaman 1 pada langkah kerja 8 sampai 10.

13. Buatlah halaman ke-3 lalu isi dengan tulisan “INI HALAMAN 3” dan gambar

14. Kemudian, kembalilah ke halaman 1 dengan cara menekan tombol previous sebanyak 2 kali

15. clip_image046

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 choice 1, kemudian pada kolom go to page, ketikkan angka 2.

clip_image047

Lakukan hal yang sama untuk kolom Choice 2, namun arahkan pilihan ini pada halaman 3.

17. Nah sekarang tekan tombol Save pada bagian atas window atau tekan Ctrl + S untuk menyimpan course.

18. Kemudian, tekan tombol Preview pada bagian atas window.

clip_image048

19. Setelah tombol preview diklik, maka akan muncul window yang berisi konten yang telah kita buat.

clip_image049

Selamat mencoba.. Semoga bermanfaat. 

Share this post: | | | |
Silverlight 5: TrickPlay Feature

 

Setelah sebelumnya saya mengulas mengenai fitur H.264 Hardware Decode pada Silverlight 5, kini saya akan melanjutkan ke fitur TrickPlay. Adanya fitur TrickPlay yang memungkinkan sebuah video diputar pada kecepatan berbeda. Pada video yang diputar dua kali lebih cepat, Silverlight 5 memungkinkan audio pitch correction sehingga video masih dapat ditonton dengan nada suara yang normal. Untuk menguji fitur ini saya membuat aplikasi silverlight sederhana dengan mengatur PlaybackRate pada tag media element.  Aplikasi silverlight menggunakan DataBinding dua arah pada slider dan video PlaybackRate.

 

<UserControl
  x:Class="CobaTrickPlay.MainPage"
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  mc:Ignorable="d"  d:DesignHeight="480"  d:DesignWidth="640">
    <Grid x:Name="LayoutRoot" Background="White">
    <MediaElement
      CacheMode="BitmapCache"
      Stretch="Fill"
      Source="imagine-cup-trailer.mp4"
      x:Name="media" />
    <Slider
      HorizontalAlignment="Center"
      VerticalAlignment="Bottom"
      Opacity="0.4"
      Width="192"
      Minimum="0.25"
      Maximum="8"
      Margin="0,0,0,24"
      SmallChange="0.25"
      LargeChange="0.5"
      Value="{Binding ElementName=media,Path=PlaybackRate,Mode=TwoWay}" />
    <TextBlock
      Foreground="White"
      HorizontalAlignment="Right"
      VerticalAlignment="Bottom"
      Opacity="0.3" 
      Margin="0,0,24,24"
      FontSize="144"
      Text="{Binding ElementName=media,Path=PlaybackRate,StringFormat=\{0\}x}" />
    </Grid>
</UserControl>

Pada video yang diperlambat hingga 0.5 kali, hasil gambar masih dapat dinikmati dengan mulus tanpa patah-patah. Silverlight 5 memiliki fitur audio pitch correction, namun fitur ini belum ditemukan di versi beta. Pada versi ini, ketika video dipercepat, suara akan hilang. Menurut tulisan oleh Mike Taulty, fitur audio pitch correction akan muncul pada versi RTM Silverlight 5. Ketika memanipulasi sebuah video dengan nilai PlaybackRate positif (0.5, 2, 4, dst) video dapat berjalan sesuai harapan (walaupun dengan audio yang menghilang pada PlaybackRate lebih besar dari 1).Dapat disimpulkan bahwa TrickPlay pada Silverlight 5 membuat video menjadi lebih interaktif. Perlu diuji lebih lanjut fitur ini pada PlaybackRate negatif (rewind).

 

 

Share this post: | | | |
Silverlight 5: H.264 Hardware Decode

 *Tulisan adalah hasil dari percobaan sederhana di laptop saya. Hasil mungkin dapat berbeda di perangkat lain. 

Generasi terbaru di dunia web experience development sudah muncul dalam versi beta, Silverlight 5. Versi terbaru Silverlight muncul dengan berbagai fitur baru yang belum ada di generasi sebelumnya.  Sebagai usaha Media Support Improvement, Silverlight 5 mendukung penggunaan H.264 Hardware Decode. Silverlight 5 menggunakan hardware decode dengan memanfaatkan GPU untuk merender high-definition video pada low-power devices. Penggunaan H.264 membuat video dapat diputar dengan penggunaan CPU yang minim. Berdasarkan percobaan sederhana yang dilakukan oleh Mike Taulty pada salah satu tulisannya, sayapun mencoba memperhatikan CPU usage video yang berjalan di aplikasi silverlight 5 sedehana.

Sebuah video yang diputar di windows media player menunjukkan penggunaan CPU yang tidak tinggi seperti dapat dilihat pada gambar di bawah:

 screenshot 1

Kemudian saya mencoba menjalankan video tersebut di aplikasi silverlight tanpa mengaktifkan GPU Acceleration. Task manager menunjukkan penggunaan CPU yang cukup tinggi ketika aplikasi dijalankan.

 screenshot 2

Kemudian saya aktifkan GPU Acceleration dengan menambahkan kode <param name="enableGPUAcceleration" value="true"/> serta menambahkan propertyCacheMode="BitmapCache" pada tag media element dan mendapatkan hasil yang menggembirakan. CPU usage menjadi sangat rendah ketika aplikasi silverlight yang memutar video dijalankan.

 screenshot3

Dapat disimpulkan bahwa GPU Acceleration pada Silverlight 5 menunjukkan hasil yang memuaskan dari segi CPU usage. Beberapa fitur lain akan diulas kembali di tulisan berikutnya di blog ini. Salam.

Share this post: | | | |