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.
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. 
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. 
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.
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.
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.
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
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.
2. Kemudian, pada template, pilihlah Watch (lihat gambar) dan klik radio button Animation
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.
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.
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).
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.
8. Berikan penjelasan mengenai demonstrasi pada kolom Paragraph.
9. Tekan save dan klik preview untuk melihat hasilnya. Pada bagian hasilnya, klik tombol Launch untuk menjalankan animasi.
Booyah!
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:
Silahkan klik salah satu Topic dalam course.
2. Berikutnya, masih dalam template interact, pilihlah radio button Interactive Job Aid.
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?”
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.
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.
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.
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..)
2. Masih pada fitur interactivity (yang gambar mouse itu), pilih radio button bertuliskan Drag and Drop.
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.
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..
Semoga bermanfaat.
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.
2. Setelah diklik, akan muncul window LCDS yang tampilannya seperti gambar di bawah ini
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”.
5. Klik
module pada
course structure. Pastikan tulisan “Module” di-highlight oranye.
6. Sekarang kita mulai berkarya. Klik tombol dengan gambar Mouse (lihat gambar di bawah).
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
8. Pada bagian Text, ketikkan “Silahkan pilih satu dari beberapa pilihan ini.”
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.
11. Berikutnya, kita buat beberapa halaman lagi, caranya, tekan tombol next page (lihat gambar)
Secara
otomatis, sistem akan membuat halaman ke-2 yang masih polos, jadi
jangan panic kalau gambar koala dan tulisan di kolom teks menghilang.
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. 
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.
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.
19. Setelah tombol preview diklik, maka akan muncul window yang berisi konten yang telah kita buat.
Selamat mencoba.. Semoga bermanfaat.
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).
*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:
![]()
Kemudian saya mencoba menjalankan video tersebut di
aplikasi silverlight tanpa mengaktifkan GPU Acceleration. Task manager
menunjukkan penggunaan CPU yang cukup tinggi ketika aplikasi dijalankan.
![]()
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.
![]()
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.