I was awarded Microsoft MVP (Most Valuable Professional) Expression Blend 2010 So excited that the package just came in yesterday. Guess i need to start blogging more! Hehe.. Sometimes it’s hard to focus when you’ve had so many things in mind, a lot of distraction, yet so little time in between work-days & weekends. Let’s give it my best, cheers…..

See more photos on my photoblog.

Saya yakin dari komunitas .NET Indonesia ini juga sudah banyak yang mulai mencoba bermain-main dengan barang baru ini. Hanya tinggal download dev-kit dan segala keperluannya, lalu buka Visual Studio 2010 / VS2010 for Windows Phone / Expression Blend 4 RC, tekan F5, voila.. Anda akan langsung diberi tampilan emulator yang hitam, kelam, dan super plain
Saya jadi bertanya-tanya, berapa banyak dari para developer sekalian yang ketika menekan F5, menjumpai tampilan Windows Phone yang hampir ASLI, hampir final seperti demo-demo asli di YouTube dkk?

Well I did I even had my own contact pinned on it, hehe.. Caranya gampang banget, seperti yang ditulis oleh Gizmodo disini:

• Download ROM versi Unlocked terbaru (build 6176) dari sini.
• Setelah selesai, ekstrak file tersebut, lalu masuk ke C:\Program Files (x86)\Microsoft SDKs\WindowsPhone\v7.0\Emulation\Images
• Ganti file .bin asli dengan file ROM versi unlocked tadi. Jangan lupa membuat backup file .bin asli!

• Kembali ke Visual Studio 2010/Blend 4 RC, langsung tekan F5. Manstab!

Kalau ditambah dengan hardware yang sudah support multitouch, Anda akan mendapatkan pengalaman ‘lebih’ dari sekedar emulator hitam biasa! Walaupun versi terbaru ini masih banyak bug-bug, Anda masih tetap dapat bermain dengan aplikasi2 yang ada dan berpura2lah itu adalah device sungguhan

Screenshot yang cukup menarik perhatian saya:

People, Phone, Messaging, Email

Saya coba set up account untuk email (Windows Live Hotmail, Outlook, Gmail, Yahoo) & Facebook, tapi kok hanya punya Google yang bisa (super aneh, hehe). Walaupun pada akhirnya tetap saja belum bisa check inbox atau kirim email.. Kalo beneran bisa, nanti bisa-bisa nggak laku lagi WP7 pas rilis beneran

Aplikasi Office (OneNote, Word, Excel, dan Powerpoint Mobile)

Sayangnya ROM versi ini belum menyertakan Outlook, tapi secara fungsionalitas sudah bisa dicoba membuat dokumen-dokumen diatas emulator Windows Phone 7. Sempat mencoba juga buka situs Sharepoint public tapi entah kenapa kayaknya masih belum berfungsi.

Zune (Music, Video & Radio), Pictures + Camera

Sekian dulu sharing WP7-nya, melengkapi rangkaian postingan aplikasi WP7 yang pernah saya buat sebelumnya yaitu MSDN mini-browser dan 3D Silverlight perspective transform. Ayo-ayo, yang telah bereskperimen dengan WP7 dev jangan lupa berbagi yaa.. Cheers!

At first, I was inspired by this post about Windows Phone Animation, it was simply 3 sliders and 1 image to demo 3D perspective transform feature by using “plane projection”. But reading that post kinda makes me think, “Why is this guy using so much code-behind while we can simply do DATA-BINDING directly from XAML?” Hmm… I just thought so because I don’t think I like coding too much
So now I’m giving very basic tutorial on how to utilize 3D Silverlight perspective transform on Windows Phone. Make sure you already have Windows Phone Development kit installed on your PC, if not, now you better go download them all at once

Let’s get started!

Open Visual Studio 2010 / VS2010 Express for Windows Phone / Expression Blend 4 RC, go create new Project (File > New Project). In this case I am using one of my favorite tool, Blend 4 RC.

Go play around, change the Title & Sub-title text on top, then add 3 sliders + 1 image so it would look like this:

(Make sure to set the Maximum properties of each sliders to 360 and Minimum to 0)

Just to make sure in Objects & Timeline panel you will see control-hierarchy just like this:

Now the super-fun stuff begins. What you need to make those sliders work like a charm is some DATA-BINDING. To what? Well maybe I should explain about Plane Projection a little bit:

Plane Projection

PlaneProjection is a class that represents a perspective transform (a 3-D-like effect) on an object. So not only it can be applied to Images, but to Controls (UIElement) as well. You can create 3D effects on a Grid/Canvas/Stackpanel container, which means that anything contained inside is also being transformed, as long as it’s visible For example buttons, textboxes, etc, you can still interact with them (clicking, typing, etc) even while they’re being projected.

PlaneProjection has 12 properties to control the rotation and positioning of an object. But basically it’s divided into 4 :

• Rotation (X/Y/Z) : specify the number of degrees to rotate the object in space. Specifically, RotationX specifies rotating around the horizontal axis, RotationY along the vertical axis, and RotationZ is like the diagonal vector, rotating around a line perpendicular to the object.

• CenterOfRotation (X/Y/Z) : change where the axis of rotation are positioned, therefore you could change the effect of rotation. Default value is 0.5 (on the scale 0 to 1).

• GlobalOffset (X/Y/Z) : This one’s useful when you want to simply move the object along X/Y/Z axis without worrying about the rotation applied to it. In other words, GlobalOffset translates an object along the axis of the screen.

• LocalOffset (X/Y/Z) : Unlike GlobalOffset, LocalOffset translates an object along the respective axis after it has been rotated. That is why in this LocalOffset case, the Rotation value determines the DIRECTION of the translated object.

Got a little bit of insight?

Now first thing we need to do is adding Projection properties in our image:

<Image Height="380" Width="380" Name="image1" Source="...">
    <Image.Projection>
        <PlaneProjection x:Name="Projection"
                    CenterOfRotationX="0.5"
                    CenterOfRotationY="0.5"
                    CenterOfRotationZ="0.5" />
    </Image.Projection>
</Image>

And this simple magic does the trick!

<Slider Name="slider1" Maximum="360" SmallChange="1"
        Value="{Binding RotationX, Mode=TwoWay, ElementName=Projection}"/>

Do it for other slider (for axis Y and Z), and that’s it, you’re done! NO CODE-BEHIND

If you’d like to see the value of rotation you could add 3 textblocks and bind them directly to each of the Slider’s value. For example,

<TextBlock x:Name="textX" Text="{Binding ElementName=slider1, Path=Value}" />

So here’s our final screenshot: (Source code attached, you can download it here.)

Cheers…

Haha.. *maaf kurang penting postingannya*

Cheers

• Blend SDK Preview for Windows Phone
• Microsoft Expression Blend Add-in Preview for Windows Phone
• Expression Blend 4 Beta (pastinyaaa)

Lama pengerjaan: yang jelas lebih lamaan ngeblognya Siapp. Kita mulai.

1. Buka VS2010 Express for Windows Phone.
2. File > New Project. Pilih di tab ‘Silverlight for Windows Phone’ > Windows Phone Application – Visual C#. Ketik nama aplikasi, kilki OK.
3. Beginilah tampilan emulator Windows Phone 7 di VS2010 Express (setelah saya modif isi TextBlock nya )
4. Sederhananya, saya hanya ingin membuat sebuah mini-browser sederhana yang khusus menampilkan situs MSDN Indonesia. Oleh karena itu sementara yang saya butuhkan hanyalah sebuah TextBox, Button ‘GO’, dan container untuk render isi HTML dari web tersebut. Jadi saya tambahkan (drag & drop), atur2 dikit di kanvas, dan hasilnya seperti berikut:

<Grid x:Name="ContentGrid" Grid.Row="1">
    <TextBox HorizontalAlignment="Stretch" VerticalAlignment="Top"
             Margin="-10,4,81,0" Name="textBox1" FontSize="22" Height="Auto"
             Text="http://microsoft.com/indonesia/msdn" />
    <Button Content="Go" Height="70" HorizontalAlignment="Right"
            Margin="0,4,-3,0" Name="button1" VerticalAlignment="Top"
            Width="91" Click="button1_Click" />
    <browser:WebBrowser HorizontalAlignment="Stretch"
                        Margin="0,70,0,0" Name="webBrowser1"
                        VerticalAlignment="Stretch" />
</Grid>

Jangan lupa kasih kode dikit supaya ketika tombol ‘Go’ diklik bisa langsung me-navigasikan ke situs MSDN

Tekan F5, jalankan! Voila..

Kalo Anda menekan tombol yg tengah (logo Windows), akan menampilkan Logo IE seperti diatas. Sepertinya emulator ini mengenali tipe aplikasi yang kita buat, berhubung saya membuatnya MSDN Browser, jadi dia termasuk ke dalam grup seperti diatas. (Keterangan: nama aplikasi saya WindowsPhoneApplication1, seperti yg tampak di bawah menu Setting).

Menambahkan Application Bar Button & Menu Item

Plain amat yah klo diliat2? hehe.. Akhirnya dengan memanfaatkan icon pack gratis untuk development WP7 disini, saya berencana membuat Application Bar. Apa itu application bar? Kalau Anda sudah melihat demo/preview awal WP7 pastinya ingat dengan interface semacam toolbar dibagian bawah layar.. Nah itu yang dinamakan App-Bar. Isinya bisa icon-icon seperti dibawah ini:

Kalo gambar yang titik tiga di sebelah kanan itu diklik, maka sifatnya seperti auto-expander ke bawah (seperti accordion), dia akan menampilkan menu item seperti berikut:

Nah, untuk membuat App-Bar itu ternyata suppeeeerrr gampang Namun Anda harus menambahkan reference dahulu terhadap kelas library “Microsoft.Phone.Shell”. Jadi sebelum menambahkan App-Bar, pilih Project > Add Reference, lalu pilih library tersebut.

Setelah itu, jangan lupa menambahkan folder Images yang berisi icon-pack gratis WP7 ke dalam solusi Anda. Yang penting diingat, untuk setiap gambar yang Anda masukkan, di panel Properties jangan lupa mengubah Build Action menjadi ‘Content’ dan Copy To Output Directory menjadi “Copy Always”. Hal ini memastikan agar gambar tidak missing saat deployment.

Ada 2 pilihan untuk membuatnya, langsung di halaman XAMLnya, atau via code-behind. Berhubung saya gak hobi-hobi amat liat kode, jadi kita tambahin aja langsung di XAML

Pastikan di bagian paling atas, namespace berikut telah ada. Jika belum, tambahkan:

xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone.Shell"

Lalu didalam tag <phoneNavigation:PhoneApplicationPage> tambahkan kode berikut:

<pre><phoneNavigation:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar Visible="True" IsMenuEnabled="True">
        <shell:ApplicationBar.Buttons>
            <shell:ApplicationBarIconButton Click="ApplicationBarIconButton_Click"
                                            IconUri="Images/appbar.refresh.rest.png">
            </shell:ApplicationBarIconButton>
            <shell:ApplicationBarIconButton Click="ApplicationBarIconButton_Click_1"
                                            IconUri="Images/appbar.back.rest.png">
            </shell:ApplicationBarIconButton>
        </shell:ApplicationBar.Buttons>
        <shell:ApplicationBar.MenuItems>
            <shell:ApplicationBarMenuItem Click="ApplicationBarMenuItem_Click"
                                          Text="Main Pendekar IT"></shell:ApplicationBarMenuItem>
            <shell:ApplicationBarMenuItem Click="ApplicationBarMenuItem_Click_1"
                                          Text="Kunjungi TechNet!"></shell:ApplicationBarMenuItem>
        </shell:ApplicationBar.MenuItems>
    </shell:ApplicationBar>
</phoneNavigation:PhoneApplicationPage.ApplicationBar>
</pre>

Jangan kelupaan untuk menambahkan di code-behing untuk fungsi ketika icon2 tersebut diklik. Saya disini ceritanya bikin icon refresh & back. Lalu kedua menu item saya modifikasi menjadi pilihan untuk bermain Pendekar-IT & link menuju situs TechNet
Tekan F5, jalankan!
Voila…


Yang cukup menyenangkan karna laptop saya sudah mendukung Multi-Touch, jadi di emulatornya pun kita bisa melakukan zoom in zoom out melalui gesture ‘pinching’ Serasa punya Windows Phone 7 beneran
Kalo saya klik menu item ‘Kunjungi TechNet’, akan langsung membuka situs tersebut. Dan begitu juga dengan Pendekar-IT. Sayangnya, dibangun sama-sama diatas SIlverlight, tapi kok ngga bisa dimainkan? :p hehehehe.. Tanya kenapa…

Ok that’s all.. cheers.. !! Selamat mencoba Source code attached : WindowsPhoneApplication1-MSDN Browser.zip

<Run Text="Kalo pake Run biasa, gak bisa di-bind kayak TextBlock dibawah ini"/>
<TextBlock Text="{Binding Source= {StaticResource namaResource}, Path=Text}"/>

Sudah terbayang? Nah tapi seringkali dengan menggunakan kombinasi penggunaan Run & binding TextBlock seperti diatas, hasilnya bisa kacau, flow teks nya jadi berantakan. Tidak percaya? Baca postingan ini sampai bawah, saya akan tunjukkan screenshotnya
Kekurangan seperti inilah yang memicu banyak solusi dari programmer-programmer kreatif yang mencoba “mengakali” agar Run.Text dapat menjadi depedency property. Contohnya disini dan disini. Namun sekarang itu ngga perlu lagi, karena di WPF 4.0 Run.Texttidak lagi merupakan properti CLR biasa, namun kini telah berubah menjadi suatu dependency property. Hal ini berarti kita telah mendapatkan sebuah bindable run! Sintaksnya kira-kira seperti ini, singkat sekali:

<Run Text="{Binding Source={StaticResource namaResource}, Path=Text}"/>

Sekarang perhatikan perbedaannya di FlowDocument sederhana yang saya buat berikut:

Lihat bagaimana flow dari teks paragraf pertama tampak berantakan, karena terkadang programmer turut memasukkan white-empty space misalnya menekan tombol Enter/spacing berlebihan saat menjalankan Run.Text. Berikut kode aslinya sebagai perbandingan:

<Window.Resources>
    <TextBox x:Key="Kalimat1" Text="bagaimana flow dokumen jadi H A N C U R ketika kita"/>
    <TextBox x:Key="Kalimat2" Text="Ini paragraf contoh bagaimana flow dokumen menampilkan
data yang seharusnya. Run Text dapat di-bind langsung!"/>
</Window.Resources>

<FlowDocument>
    <Paragraph>
        <Run Text="Ini paragraf contoh"/>
        <TextBlock Text="{Binding Source= {StaticResource Kalimat1}, Path=Text}"/>
        <Run Text="menggunakan kombinasi dari
                        Run Text dan TextBlock
             secara manual"/>
    </Paragraph>
    <Paragraph>
        <Run Text="{Binding Source={StaticResource Kalimat2}, Path=Text}"/>
    </Paragraph>
</FlowDocument>

Dengan adanya bindable run, kode pemanggilan pun jadi cukup sebaris aja Sederhana bukan?

One-way Binding? Two-way Binding?

Untuk masalah penggunaan bindable run ini, one-way data binding (searah) telah sepenuhnya didukung. Contohnya persis seperti diatas, Run dapat di-bind ke suatu datasource dan ketika dijalankan, Run.Text tersebut akan menghasilkan teks yang sama dengan kemunculan di data source.

Sedangkan untuk data-binding dua arah (two way data binding), tidak sepenuhnya didukung (hanya parsial saja). Misalnya, jika Run tersebut akan terupdate melalui panggilan properti sistem di WPF, maka datasource tempat Run di-bind pun akan ikut berubah. Sedangkan kalo misalnya Run terupdate melalui kontrol semacam RichTextBox misalnya, maka binding-nya akan lepas. Rada susah ngejelasinnya pake kata-kata, hehe..

Yasudah sekian saja postingan kali ini, semoga berguna.. Cheers….

PS: Postingan ini merupakan bagian dari rangkaian tulisan mengenai fitur teks terbaru lainnya di WPF 4.0. Yang sebelumnya telah saya bahas, antara lain:

A. Text Clarity: Text Formatting & Text Rendering

B. Caret & Selection Brush.

Langsung saja, ada yang belum tahu Caret itu apa? Jangan mikir jauh-jauh.. hehe Caret itu sama saja dengan kursor kedip-kedip yang biasa kita jumpai di kontrol seperti TextBox, dan semacamnya. Hehe, iya mulai WPF 4.0 ini kita bisa lebih berekspresi dalam membuat skin kontrol agar lebih selaras dengan keperluan aplikasi
Kodenya sangat amat sederhana. WPF 4.0 mendukung penggunaan CaretBrush  sebagai properti pada jenis kontrol TextBox, PasswordBox, dan RichTextBox. Jadi misalkan saya punya sebuah textbox plain, maka saya modifikasi sebagi berikut:

<TextBox Background="Orange" FontSize="16" FontWeight="Bold"
         Text="Apa itu Caret dan Selection Brush?"
         CaretBrush="White"
         SelectionBrush="Magenta"
         SelectionOpacity="0.3"/>

Hasilnya menjadi seperti berikut: (perhatikan kursor teks warna putih *harusnya kedip-kedip :p*)

Dan pada kode diatas, saya memasukkan properti baru yang disebut SelectionBrush dan SelectionOpacity Seperti yang Anda duga, warna magenta dengan opacity 0.3 (atau skala 30% dari 100) akan muncul ketika saya melakukan seleksi / highlight teks menggunakan mouse maupun keyboard, kira-kira seperti ini:

Yang seru, SelectionBrush nggak hanya bisa berupa warna solid saja tetapi gradasi pun bisa! Dengan komposisi warna gradien yang tepat pasti akan bisa menimbulkan efek sleek & smooth yang cukup untuk membuat client kita kagum, tidak seperti pilihan warna gradien berikut

Kodenya juga nggak ribet2 amat. Yang telah familiar dengan bahasa XAML pasti langsung mengerti:

<TextBox FontSize="16pt" Background="Orange" FontWeight="Bold"
         Text="Bisa Gradasi Juga Ternyata  "
         SelectionOpacity="0.8">
    <TextBox.SelectionBrush>
        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
            <GradientStop Color="Transparent" Offset="-.2" />
            <GradientStop Color="Magenta" Offset="0.25" />
            <GradientStop Color="Yellow" Offset="0.75" />
            <GradientStop Color="Transparent" Offset="1.2" />
        </LinearGradientBrush>
    </TextBox.SelectionBrush>
</TextBox>

Sederhana sekali bukan?

SelectionBrush bisa diaplikasikan pada semua kontrol yang mendukung seleksi, misalnya TextBox, RichTextBox, PasswordBox, FlowDocumentPageViewer, FlowDocumentScrollViewer dan juga FlowDocumentReader. Jadi kita bisa banyak bereksperimen, berguna misalnya untuk membuat efek stabilo pada teks di FlowDocument.. hehehehe..

Nampaknya postingan kali ini tergolong cukup singkat, hehe.. Nantikan rangkaian postingan selanjutnya mengenai fitur teks di WPF 4.0!

Cheers…

Text Clarity

Sebagai seorang pecinta UI (user interface, bukan universitas indonesia, haha..), saya memang cukup memperhatikan segala detail mulai dari layout sampai ke kualitas grafik/tulisan yang pixel-perfect. Nah yang cukup jadi “selebritis” di WPF 4 mendatang adalah masalah Text-Rendering Clarity, alias seberapa jelas tulisan yang bisa terlihat oleh mata kita. Dan di WPF 4, kita diberi beragam pilihan dalam hal rendering & formatting, melalui 2 buah properti baru berikut:

1. Text Formatting Mode, ada 2 value properti yang bisa dipilih yaitu:
   • Ideal – ini tampilan default a.k.a WPF yang jadul. Disini glyph dari tulisan sebisa mungkin akan dijaga kemiripannya dibandingkan file font aslinya, sehingga kalo diutak-atik positioning/bitmap dari tulisan tersebut pasti hasilnya jadi kurang bagus.
   • Display – nah yang baru ini sudah menggunakan metriks kompatibel Win32-GDI (Graphics Device Interface). Bagi yg belum pernah dengar, GDI ini adalah semacam API dari windows yg bertanggung jawab terhadap hasil output pixel per pixel ke monitor / printer kita. Jadi dengan memilih opsi yang ini, hasilnya teks bakal lebih tajam & pixel perfect!

   <StackPanel>
       <TextBlock>
           Text Lebih Jelas di WPF
       </TextBlock>
       <TextBlock TextOptions.TextFormattingMode="Display">
           Text Lebih Jelas di WPF
       </TextBlock>
   </StackPanel>
   

   

   See the difference? Tapi jangan salah, TextFormatting mode Ideal pada beberapa skenario justru terlihat lebih bagus dibandingkan yang udah support GDI! Pada kesempatan lain akan saya coba jelaskan.

2. Text Rendering Mode, ada 4 pilihan value properti:
   • Auto : defaultnya, sistem akan me-render teks dalam ClearType, kecuali dalam sistem tersebut jenis rendering ClearType nya di-set disabled.
   • ClearType : dalam proses rendering text, digunakan anti-aliasing jenis ClearType
   • GrayScale : dalam proses rendering text, digunakan anti-aliasing jenis Grayscale
   • Aliased : rendering teks tidak akan menggunakan anti-aliasing jenis apapun.

    <StackPanel TextOptions.TextFormattingMode="Display">
        <TextBlock>
            Contoh Rendering Teks ... ClearType </TextBlock>

        <TextBlock TextOptions.TextRenderingMode="Grayscale">
            Contoh Rendering Teks ... Grayscale </TextBlock>

        <TextBlock TextOptions.TextRenderingMode="Aliased">
            Contoh Rendering Teks ... Aliased </TextBlock>
    </StackPanel>

Mungkin rada bingung yah, apaan sih ALIAS? ANTI-ALIAS? Saya coba berbagi sedikit ilmu desain tipografi yaa..

Anti-aliasing adalah terobosan baru seiring dengan berkembangnya resolusi monitor layar menjadi semakin tinggi.  Pada prinsipnya Anti-aliasing itu tuh cuman nambahin semi-transparan pixel sepanjang ujung-ujung/edge dari suatu huruf, untuk memberi kesan ‘smooth’ pada tampilan keseluruhan huruf. Jadi sangat berkebalikan dari Alias, dimana tiap huruf digambarkan pixel-per-pixel, jadi sampe terkenal istilah efek “anak-tangga”

Lebih jelasnya mungkin bisa dipelajari dari situs referensi utama favorit saya. Yang jelas, untuk pilihan mode Rendering, paling bagus ya memang “ClearType”, walaupun jenis ClearType ini justru terkadang terasa kurang eye-friendly bagi pemilik monitor yang masih CRT :p Makanya ganti jadi LCD aja..

Hmm.. sepertinya sekian dulu postingan kali ini. Nantikan seri berikutnya yang menarik mengenai Text improvements di WPF 4! Cheers…

Kuis trivia ini terbagi atas 2 track / jalur, yang di dalamnya berisi kategori-kategori teknologi terbaru yang tentunya para geeks sekalian ini pastinya sudah sangat familiar. Anda boleh mengikuti lebih dari 1 kategori. Tujuan utamanya, mendapatkan skor sebanyak-banyaknya agar memperbesar kesempatan Anda untuk memenangkan sebuah netbook HP 1169 Mini-bote seharga $375 Lumayan kan tinggal klik-klik kuis doang bisa dapet netbook? hehe…
Belum tau netbook HP 1169 yang mana? Ini nih kayak yang dipegang mbak-mbaknya

Dan siap-siap, ini dia pembagian kategorinya:

7 kategori di jalur IT Pro:

• Office 2010
• Sharepoint 2010
• Windows 7
• Windows Server 2008 R2
• SQL Server 2008 R2

Dan 2 kategori di jalur Developer:

• Visual Studio 2010
• Silverlight 4

Jadi tunggu apalagi, buktikan kemampuan .NET Anda!  Ayoooo.. refreshing dulu dari kerjaan, mari main game….

Cheers!

Tim Technet & MSDN Indonesia

Secara umum materi pembelajaran design dari Microsoft ini ide-idenya datang dari Robby Ingebretsen. Belum tahu dia siapa? Singkatnya, berdasar pidatonya saat MIX09 dia mengaku mantan employee Microsoft yang keluar sesaat setelah WPF di-launch, untuk mendirikan perusahaannya sendiri yang bernama “Pixel Lab”, which mostly do some major design & UX stuff. Dia juga yang membuat Kaxaml, sebuah editor XAML yang kompatibel dengan WPF maupun SIlverlight.
So yes, as he says, developer + designer IS possible:

A Little Brief about Microsoft Design Toolbox

Sekarang kita beranjak mendalami sedikit tentang .toolbox.

Sejauh ini menurut saya .toolbox menjadi cara paling cepat dan menyenangkan untuk belajar DESIGN dan DEVELOPMENT sekaligus. Jadi belajarnya bisa dua arah, yang pertama mengenalkan prinsip-prinsip desain ke developer, dan yang kedua sebaliknya: memberikan pemahaman fundamental (teknis) kepada designer tentang pengembangan aplikasi Silverlight di lingkungan Expression Blend. Hasilnya? Menurut saya, benar-benar efektif! Karena pada akhirnya yang sama-sama ingin dicapai adalah bagaimana supaya kolaborasi designer & developer bisa meningkatkan kadar user experience serta usability suatu produk/aplikasi

.toolbox terdiri dari 2 learning path: DESIGN SCENARIOS & DESIGN PRINCIPLES. Seperti yang sudah saya jelaskan sebelumnya, Design Scenario inilah yang berisi pertanyaan-pertanyaan trivia seputar pembuatan aplikasi Silverlight di Expression Studio. Sedangkan Design Principles berisi trivia seputar konsep fundamental design dari yang paling dasar seperti warna, komposisi, textur, sampai ke yang teori-teori design process, usability, interaction design, information architecture, business uX, dst.

Berasa mengulang kuliah IMK (Interaksi Manusia Komputer) kembali

Now, What Makes .toolbox Fun & Interesting?

Karena dikemas dalam bentuk game Siapa yang nggak suka game? Jauh lebih menarik ketimbang baca eBook atau slide presentasi sekalipun. Dan juga karena gambarnya lucu-lucu, hehe.. Memanfaatkan silverlight, proses kustomisasi avatar tiap pemain bisa jadi sangat menarik dan menyenangkan!

Mengenai sistem penilaian, dalam .toolbox tersedia badge-badge hasil pencapaian tiap kali berhasil melewati 1 dari 5 level yang tersedia di masing-masing path, baik Design Scenarios maupun Design Principles. Urutannya sebagai berikut: rookie > player > starter > captain > star.

Aturannya sangat sederhana:

1 level = 12 pertanyaan. Untuk level 1-4, Anda butuh 108 point dari keseluruhan 180. Sedangkan untuk level terakhir, level 5, kudu minimal meraih 180 point dari keseluruhan 300.

Kemudian kalo misalnya udah selesai 1 level yang sama dari kedua path, barulah path yang diagonal ke-“unlock”. Nah kalo udah komplit semua level (Total: 15!) kita akan dapat anugerah tertinggi yaitu ALL-STAR DESIGN

Sampai saat postingan ini diturunkan, dari kemaren baru sempet nyelesaiin path yang Design Scenarios. Entah kenapa nih yang Design Principles rada-rada susah untuk berhasil di first attempt, haha.. Pilihan & istilahnya membingungkan.. Ketahuan yang berangkatnya bukan dari jalur desain resmi

Selain kustomisasi avatar & sistem penilaian trivia yang bikin “ketagihan” saat bermain, kita bisa juga share status melalui Twitter maupun Facebook dan mengajak agar orang tertarik berkunjung dan ikutan main. See, this is the strength of social-network, you can even show n tell people that you’re having fun

Mari ramaikan peserta dari Indonesianya.

Cheers,

And enjoy the game!