Friday, July 8, 2011

Fleux-powered KitchenPal won second prize in Microsoft embeddedSPARK competition

Congrats to Gianni Rosa Gallina for a fantastic project called “KitchenPal”. It won the second prize in the latest version of the former “Sparks Will Fly” contest, created by Microsoft aiming academics, developers and hobbyists currently called embeddedSPARK.

Gianni did a great work making Fleux work in a Windows Embedded Compact 7 device, adding some great controls and features, and what is even better, his KitchenPal project looks pretty amazing. Watch the video

Sources:
http://www.microsoft.com/Presspass/Features/2011/jun11/WENC06-24EmbeddedSpark.mspx
http://www.windowsfordevices.com/c/a/News/Microsoft-announces-winners-in-embeddedSPARK-2011-competition/

Tuesday, November 16, 2010

Fleux is coming. Video Preview

Fleux.Net is a new open source project I published in CodePlex, the open source portal from Microsoft. It includes some of the UX elements I was working on recently, and it’s also an evolution of the UI engine I used for the world cup app.

For further information, you can go to the project portal at http://fleux.codeplex.com/ and play with the latest source code.

It’s a .Net Compact Framework c# development initiative, where I’m trying to share some of my UI dev experience with other Windows Mobile developers.

Fleux is coming. If you want to contribute to the project, or if you want to use Fleux to power your project UI, feel free to contact me at  jose@mobilepractices.net.

Do you want to be part of it?

Fleux sample app running on HTC HD2

Friday, October 22, 2010

Welcome Franco!

I know it’s not new if I say that I was very busy lately. But this time my typical “free time” was occupied by what is the most important part of my life: my family. My second son, Franco, was born on October, 8th, and we all: his mom, his brother, and of course his dad, are extremely happy with the new member.

Franco

Thank you Franco for making all of us so happy!

Thursday, June 3, 2010

World Cup 2010 Application for Windows Mobile: The panoramic UX proof of concept is here!

worldcupapp

I’m glad to introduce you this small World Cup 2010 application for Windows Mobile, which has been entirely developed using the Compact Framework applying some UX concepts from Windows Phone 7 panoramic UI and spikes on fluent UI I recently worked on.

This app requires a touch-screen device with Windows Mobile and the Microsoft .Net Compact Framework 3.5.

As this is just a proof of concept, you can download it for free following the links bellow:

New version v.0.3.beta available!

English

Español

Deutsch

    Portuguese (NEW!)

      Brazilian Portuguese (NEW!)

      Français (NEW!)

      Chinese (NEW!)

      Features

      The features included are:

      • 64 matches with detailed info which can be browsed by group, date or play off stage.
      • 8 Groups details.
      • Play-offs chart
      • Manual update on-line which will got the following:
        • World Cup news directly from the FIFA.Com News RSS feed, including pictures and links for full reading in your browser.
        • Results for finished matches.

      The application can run in almost any Windows Mobile 5.x, 6.x touch screen device. It automatically scales according to your screen size and resolution.

      I’ll continue posting about the technology around this app. Stay tuned!

      Fixes on v.0.1:

      • Fixes an issue while parsing dates on some localized versions of Windows Mobile (i.e. Danish, German ROMs) which was preventing the app to run.
      • Recovery screen if any data inconsistence is detected after update. This is a very weird case, but the app will let you update and get a new set of data if needed.
      • News screen support for longer text resizing accordingly.

      Fixes on v.0.2.beta:

      • This version downloads the news directly from the Feeds sources, getting a faster connectivity and fresh information from FIFA.com.
      • Calendar shows July 12th for time zones where the final match will be played that day.
      • Small visual changes on Calendar.
      • Play-Offs: Fix on the games chart, which was showing a confusing wrong line-connection for Semi-Finals. The data was correct, but the lines were wrong. This version fixes that.
      • In some devices or orientations, the Play-offs chart was truncated. That issue is also fixed on this version.

      Fixes on v.0.3.beta:

      • All the v.0.2.beta fixes/changes.
      • This version doesn’t show the Recovery Page.
      • Fixes an issue for v.0.2. on a clean installation when the Images folder wasn’t on the XmlData folder.
      • Includes a new “Today section” allowing you to see the games for today at a glance.

      Localization:

      • This version is published in four seven languages: English, Spanish, Portuguese, Brazilian Portuguese, French, Chinese and German.
      • Let me say thanks to Marcus Bauer, Matthias Engler, Carlos Paulo, Ayrton Vasconcelos, Thomas Michiels, Nick Käser and Kenn Zhang for their help on translations.

      Quick Troubleshooting:

      • If the app crashes on your device, please email me (jose@mobilepractices.net) the “errorfound” file located on the xmlData folder. That file has the error log so I can see what the problem was. This file will be deleted if you have a successfully synchronization, so please make a copy before sync.
      • The small portion of the next section visible at the right is intentionally there, to invite you to continue exploring the panorama.
      • I got some reports where the problem was related to the device running low of resources (even if it has lots of memory). This issue was mostly reported on Omnia II devices. I recommend you to take a look at the processes that are running on your device. A soft reset would help on those cases.
      • If you think the app is showing wrong times for the matches, please check if your device has the right time zone configured. If that’s not the issue, feel free to send me an email.
      • Any other issue you may have, don’t hesitate to contact me, because this piece of software is validating a UX engine that should be stable enough to be widespread reusable.

      Update (6/19/2010):

      Wow! The proof of concept was an incredible success. I got an amazing feedback and the awesome quantity of 35.000+ downloads. This was definitely the kind of feedback I was looking for.

      If you have read my blog posts, you should be aware that this is just a UX Proof of concept, and of course, I didn’t expect such a huge amount of downloads ;).

      I’ve changed the host server and the updating mechanism, so the client can consume the news feed directly from its original source (i.e. FIFA.com), keeping you with fresher news and simplifying the updating process.

      I strongly recommend you to install v.0.3 if you’re still using v.0.1.

      Thanks for such a wonderful feedback!.  Do you still interested on the technology behind this app?? Maybe you should start thinking on what application can you develop with this kind of UX, or maybe just how can you re design your existing app to provide a fluid experience. Stay tuned!

      kick it on DotNetKicks.com

      Saturday, May 29, 2010

      UX Proof of concept: Developing panorama applications in .Net CF. World Cup Application

      You have probably already seen a bunch of really cool applications demoed as part of the Windows Phone 7 momentum following a chrome-less and fluent approach getting a very rich user experience browsing information that Microsoft has called “Panorama Applications”. In the “UI Design and Interaction Guide for Windows Phone 7 Series” document, panoramic applications are described as applications that “offers a unique way to view controls, data, and services by using a long horizontal canvas that extends beyond the confines of the screen. These inherently dynamic application use layered animations and content so that layers smoothly pan at different speeds, similar to parallax effects”.

      I really like the way the information flows along a panorama application. That’s a great approach for browsing data in a mobile application, and it’s perfectly suitable in many use cases.

      If this is such a great approach, why aren’t we already developing Panorama Application for Windows Mobile? Maybe, because the task is not that easy without Silverlight and Blend for helping us. But I’m totally convinced that a Windows Mobile application can provide such a great user experience, it’s just a matter of developing the right custom controls, and that’s the tricky part. That said, I included some Panorama application concepts as part of my usual UX spikes that fills the little free time I have. It was basically a set of touch friendly controls, responsive and smoothly animated, supporting kinetic scrolling all around, alpha blending, transitions and so on.

      While I was working on that, one of the world biggest sport events start was getting really close: The FIFA Soccer World Cup South Africa 2010. And as a big soccer fan, I was really interested on it. I wanted to start following the tournament from my mobile device as well as from my laptop. But unfortunately, I didn’t find any world cup app on the Windows Mobile Marketplace. I did some research on the web, because WinMo users still can download a .cab installer from the web, and just install it on the device, but I didn’t find anything meeting my expectations though.

      But I’m a mobile applications developer and my free time development spikes were needing a bounded focus. Building a world cup app was a very good case study for validating the UX development I was working on. A panoramic approach for a World Cup app sounded great to me. So I decided to align my spikes targeting a World Cup Panorama Application, trying to keep it as simple as possible features-wide, but validating the panoramic approach in a .Net Compact Framework application. It was risky, as far as I didn’t have to much time for it (I had less than five weeks before the world cup starts, and this is just my pet project).

      Now, we’re only 13 days away from the World Cup first match, and the application is in very good shape. I recorded a small video to show you how it feels in action, running on my Samsung Epix.

      If you’re a soccer fan, and you have a Windows Mobile device, I bet you want it on your phone!. It will be available for downloading before the world cup starts. That means I’ll publish it on my blog as a free download, during next week.

      The requirements are .Net Compact Framework 3.5, and a touch-screen Windows Mobile device.

      If you’re a Windows Mobile developer, you’ll probably find this app very interesting. I hope we start seeing lots of Panorama Applications not only in Windows Phone 7, but also in Windows Mobile 6.x. If we have the ability to build such kind of UX in .Net CF, our applications eco system will be better for sure.

      Stay tuned! This story has just begun.

      Thursday, July 23, 2009

      Walkthrough: Custom Controls development for .Net Compact Framework (Episode 1)

      Overview: What is this guy talking about?

      In most of the projects I had, there was always the need of develop at least one custom control to provide a really good user experience. As I said before in several posts, the user experience is such a critical aspect of any mobile development, that the standard controls are never enough for fulfilling it. And this need is even beyond the lack of some desired features in the current version of Windows Mobile standard controls. Even if we would have cinematic touch scrolling or transparent backgrounds in .Net CF controls, we will highly probably still needing to develop custom controls providing the right user experience to our users, when showing specific business data or interactions that cannot been achieve with the standard controls.

      Unfortunately, there is not enough guidance about how to develop a .Net CF custom control in an start-to-end tutorialish approach, a way that you can follow it from scratch, passing thru a sequence of steps that will lead you to a finished custom control, with a clear understanding of what you should take care about during the development process.

      So, I decided to start a series of posts on how to develop a real-world custom control for .Net CF. My hope is that these posts will be useful for any developer who needs to develop a .Net CF custom control for a real-world application. That includes people working with me and even myself :). My goal is to be focused not only on the User Control UI elements coding, but also on its usability during the development and application support, and how this control should interact with the business elements, taking care of keeping them decoupled and testable while the control stills providing the desired UX and performance.

      Does it sound good? Quite ambitious maybe? I guess YES, YES. And I’ve already spent too many typing on this overview, so let’s start.

      What is a Custom Control? (Custom controls Vs. UserControls)

      For who are new to controls development in .Net, there used to be a big confusion between what is a UserControl and what is a custom Control.

      A UserControl is basically a UI component, which is made of other controls which can also be User Controls, and that has a design-time experience very similar to the Form’s one. A UserControl is built based on composition. Its goal is helping you to reuse a set of UI elements on more than one Form providing a consistent look & feel and usability from both the development and user experience point of view.

      So, if you need to show a Customer Details section in several views, you can create a CustomerDetails user control which will include a set of labels which will be filled with the customer info in the same consistent way along your forms. For achieving that you can just create a new User Control from the “Add Item” menu, call it “CustomerDetails.cs” and in a friendly designer experience, you can drop some labels, change its properties like name, text, font, position them as you prefer, and then using the UserControl code behind, expose a Customer property and fill your labels based on it.

      In contrast, a custom Control is a single control. A .Net control which is developed “from scratch” and just by coding. To make it simpler, it’s basically a class that inherits from System.Windows.Forms.Control and overrides some of the Control’s methods, like OnPaint, to provide the expected user experience.

      While a UserControl is easier to develop and support, a Custom Control is lighter and faster at runtime, and it gives you the highest flexibility you can get in a .Net control, because you are free to draw whatever you want, even animations, and to handle input messages like keyboard and touch events.

      Why do we need a Custom Control? (Understanding the business)

      During this walkthrough, I will use an imaginary but concrete business case, because I think it’s the best way to understand the three main questions about a Custom Control:

      1. Why do we need it?
      2. What do we need from it?
      3. How can we do it?

      So, to answer the first question let’s start understanding the business case. My case study is an imaginary company that publish a worldwide Restaurant Guide, let’s call it RestoGuide. It has around 150 reviewers around the world, which should collect information about restaurants and send the results to its centralized database. To improve the process, RestoGuide has decided to implement a mobile application (RestoGuideMobile)that will be used by the reviewers to enter the information on site, with the ability to send it almost at real time updating the database for potential online queries.

      By using RestoGuideMobile, the reviewer avoids taking notes on paper or recording them on tape, with the need of enter them into the RestoGuide web site later, doubling the risk of human errors. RestoGuideMobile can be used while he is in the restaurant, helping him during the process, and allowing the immediate upload to the centralized database.

      Well, there is no mystery on this idea, RestoGuideMobile is just another mobile app which can make the life of its user tons easier. But for making this assertion true, we should take it to the letter. Our app should really make the life of its user tons easier. And the users will interact with our app using the forms and controls we have. Then, for achieving our goal, we should take our app UX very seriously and don’t hesitate in spent several design and development cycles on it. It should fit the business perfectly and the best way is to start with some mockups.

      An application will have lots of mockups, but we’ll focus our work on one screen:

      restaurants

      This is a mockup of the third step of the Review wizard, it let’s the user to enter the open days and rating for a given restaurant. The screen has been designed thinking in an easy way to enter the data using a mobile device. It’s easy to read and easy to change. But… is this mockup easy to implement in a Windows Mobile .Net Compact Framework application using standard controls? I think this is the answer for question 1, “Why do we need to use custom controls?” we need them for tackling some specific UX challenges, like some of the controls we can see on this mockup, and we need them because we cannot box our mind on a reduced set of controls when we design a good mobile user experience.

      From the mockup, we can see at least the following custom controls:

      • WizardHeader: Could be implemented with a User Control, but it has some inline font changes that could be much easier to implement in a Custom Control, and we can get a better look too.
      • OpenDays: This will include a week days multi-selector, that would be implemented using a ListView or a set of labels in a User Control, but a custom control will be much lighter and it gives us the possibility of making it look really good.
      • RatingStars: A typical control for show/enter a rating, but which is not present in Windows Mobile. Again, it can be implemented with a UserControl with a set of images, but a custom control will give us the chance of doing it lighter and to play freely with it.

      During the next posts, we’ll implement the three custom controls, and we’ll be tackling the diverse challenges along the way, like:

      • Designing the control API
      • Drawing the control elements
      • Providing a design time experience
      • Resource management
      • Building Drawing Helpers
      • Avoiding flickering (Double buffering)
      • Handling the user input
      • Animations

      Well, we have lots of work to do, so stay tuned, this will have tons of fun!

      Friday, May 22, 2009

      Mobile Application Blocks new Community Drop (05-21-2009) available for download.

      I’ve just uploaded the latest drop of the Microsoft Patterns & Practices Mobile – Mobile Application Blocks to the CodePlex site.

      This new Community Drop (05-21-2009) includes the following changes:

      • All the SQL CE references have been updated targeting to SQLCE 3.5 SP1 (3.5.1.0)
      • The ConfigSectionEncrypt sample tool which can be used to encrypt configuration sections has been ported and included on this drop.
      • For each block we've created separate projects for .Net CF 3.5 and 2.0. So you currently will find projects named:
        • <BlockProjectName>.csproj - Targeting .Net CF 3.5
        • <BlockProjectName>.20.csproj - Targeting .Net CF 2.0
      • ContainerModel Block performance improvements and code simplifications.
      • Readme.htm file included with basic information about the project and online resources.

      Notice that even the blocks were ported thinking on .Net CF 3.5, they still being compatible with .Net CF 2.0 and in fact, most of the blocks source code on previous drops were targeting 2.0. In this version we’ve cleaned up things and you have specific projects for each version.

      The other main change is the inclusion of the ConfigSectionEncrypt tool which was absent on previous drops. It’s a great sample and companion for working with the Configuration Block using Encrypted Sections. It was just a straight port at this time, and probably the tool’s UI is not the most intuitive you have seen. So, I’ll try to clarify how to use it in future posts.

      About the installation, I recommend you to remove any previous version of the blocks before installing this, and, if you’re installing the blocks for first time, please double check our Requirements Page.