Tuesday, April 30, 2013

iPhone Design Tips

iphone

Every platform has its own set of best practices and rules, and its own requirements for graphics rendering. Native platforms rely a lot on hardware capabilities to provide the best experience possible. We all know that visuals are a huge part of digital experiences, and getting the right design assets is vital.

Getting you developers and designers on the same page from day one will save you a lot of time and headaches later, down the road. It should actually be one of your top goals at the beginning of every digital project. 

I want to share some design tips that you should keep in mind. You might know these things already, but if not, I hope this can help as a quick reference for any iPhone development you do.

These are the current iPhone device resolutions:

iPhone 5 640 x 1136
iPhone 4/4S Retina 640 x 960
iPhone 3GS 320 x 480

Keep in mind that if you are targeting retina and non-retina devices, you should have two sets of assets, and have the app use both sets accordingly. Otherwise asset display and positioning might not be as you expected it.

Now, the pixel density is another matter. It is important to understand the implications it has, because you want to make sure developers get the right design assets, and you don’t want designers get mad because they need to do their work twice.

It turns out that iOS works internally at 72dpi, which is traditionally what designers use for web development. However, iOS actually doubles the number of pixels for retina devices, meaning that designs targeting retina resolution should be using 144 dpi (2 x 72 dpi).

Having assets created at 144 dpi will ensure that developers can open the PSD files provided by designers and get the correct font size in the app. Additionally, developers will be able to use the assets and get them displaying correctly, without having to fiddle with them in Photoshop.

Creating assets with higher pixel densities might be fine, but overkill. You might want better assets, but consider the performance and size implications in your application.

Here is a nice infographic with more design measurements and tips for iOS development. Also, check this discussion about the matter in Stack Overflow. Finally, make sure to understand what is the real difference between DPI and PPI.

Monday, April 29, 2013

WP8 Tip: Troubleshooting Windows Phone 8.0 Emulator Issues

I stumbled over an annoying issue on a Windows 8 development machine when trying to run my Windows Phone emulator from Visual Studio 2012:

“The Windows Phone Emulator wasn’t able to create the virtual machine: Something happened while creating a switch: Xde couldn’t find an IPv4 address for the host machine”

hyper-V_09

I had a fresh Windows 8 install and I needed to run a Windows Phone 8 project. After installing your tools and having the WP8 SDK, you need to make sure that Hyper-V is enabled. Hyper-V is basically a windows virtualization platform for x86-64 systems. Now to enable Hyper-V, your machine’s CPU needs to support Second Level Address Translation (SLAT). Most newer computers will support SLAT (here is a good article about SLAT and how to check if your machine supports it). You need Hyper-V enabled because the Windows Phone 8.0 Emulator is basically a set of virtual machines.

Anyway, when trying to run the emulator without Hyper-V enabled, you will get the corresponding error message, with a handy shortcut to enable it.

hyper-V_01

Clicking on the “Turn on Hyper-V” link, will open the Windows Features dialog. You then need to check on the Hyper-V feature to enable it.

hyper-V_02

The machine will install and configure the feature, and then it will prompt you to restart the machine.

hyper-V_03

Once the computer restarted, I opened Visual Studio and tried to run the project again, triggering a couple of messages warning me that the emulator needed to be run with higher privileges. You might get them at some point.

hyper-V_04

hyper-V_07 

Ok, now everything is in place and the emulator should fire up. The first time it tries to run, it will ask you if you want to configure the emulator to connect to the Internet, which in most cased, you would want to do.

hyper-V_06

Here is when my issue started. The system will try to configure the virtual connection settings for the emulator, and then run the emulator, which in my case it didn’t work. The error that I got was the virtual machine switch error mentioned at the beginning.

hyper-V_09

I was hoping this to be an easy to fix setting, but it turns out that is one of those obscure tricky situations with different possible tricky solutions. I went all around the Internet, including windows phone forums, stack overflow and several other popular destinations for troubleshooting. Most of them will suggest issues with the Hyper-V configuration, but I was sure this was not the case.

I noticed that my network adapters where a bit different, and tried to enable/disable them without success. Then I stumble upon a forum thread where there were suggestions about older VPN clients with Windows 8 compatibility issues.

Turns out that I had a Cisco VPN client installed on the machine. As soon as I uninstalled the software and restarted the machine, everything worked perfectly.

There you go. Sometimes is an external little software piece messing around with your settings. You know it now. If you run into the same issues, make sure you don’t have any VPN software installed.

Hope it helps, and saves you a lot of wall-banging time!

Nokia Lumia WP8 Firmware Update

Earlier this month Nokia released a new update for their Windows Phone 8 Lumia range, which includes 920, 820 and 620 (I assume that the recently released 720 and 520 devices already come with the updated firmware).

wp_ss_20130428_0001  wp_ss_20130428_0002  wp_ss_20130428_0003

For the 920 and 820 devices, improvement relate to screen and overall system stability. However, the most benefits come for the 620 device, including better touch response and more stable multi-touch actions, improvement to Bluetooth connectivity, enhanced camera performance and improvements to overall stability, performance and usability.

wp_ss_20130428_0004  wp_ss_20130428_0005  wp_ss_20130428_0006

If you haven’t noticed yet, it turns out that there is a storage performance problem with the system where the OS is keeping some kind of reference to files uploaded or used by other apps. This shows as an obscure “Other” category. There is no way to actually see what this storage space contains, or how to clean it up. Suggestions include turning off SkyDrive photo auto-upload feature.

Screenshot (24)

wp_ss_20130428_0008  wp_ss_20130428_0012  wp_ss_20130428_0011 

One neat feature is a new settings application to check the phone storage. This becomes a handy feature specially for lower end devices where storage is scarce. The Storage Check feature published by Nokia allows you to clean the phone’s temporary files, which might help you free some storage space. It is also a good visual representation of how you are consuming your device storage.

wp_ss_20130428_0009    wp_ss_20130428_0010

Try it out for yourself. I was able to save some space myself cleaning out temporary files, and the feature helped me visualize where I could free more space in the other categories. You might need to work a bit on your SkyDrive image uploads folder to go further, at least until Microsoft and Nokia solve the issue properly (which might be actually solved for good in the upcoming Windows Blue update).

Sunday, April 28, 2013

Obscure FN and Num LK Keys

keyboard

Just wanted to do a quick IT support post since this issue can become quite frustrating.

The issue started when suddenly I noticed my keyboard acting weird and typing the wrong keys. It seemed as if my FN key was stuck, so I could not type the normal keys without holding FN.

It turns our that the problem was not the FN itself, but actually the Num LK key was on (I must have turned it on without noticing). This means that your num pad keys are active by default: (U)4, (I)5, (O)6, (P)*,(J)1, (K)2, (L)3, M(o).

In my case, I have an Dell Alienware M15x system. My Num LK key is on the DELETE key, and it is activated by pressing the FN key + DELETE at the same time.

This might sound quite a stupid mistake, but after searching online for a bit, it became clear that there are LOTS of people having the same issue. That’s why I decided to post this.

So remember, if your keyboard starts typing the wrong keys, it might be because your Num Pad is on!

Saturday, April 27, 2013

Talking About Windows Blue

image

Windows Blue is the next feature pack update coming for the Windows Platform, which should trigger the start of the new wave of Windows products.

There are many rumours, talk and confusion about what Blue actually is and represents for the platform, although is still hard to grasp the whole picture. Officials have been quite scarce about what to expect. Mary Jo Foley and friends have been blogging about the subject, and expectations are high.

Microsoft will be hosting its BUILD 2013 conference earlier this year, at the end of June in San Francisco. Additionally, the company will soon revealing plans for the future of the Xbox platform. Additionally, both the Windows Phone and the Windows RT platforms have been getting minor updates, covering not only OS features but also updated services.

I’m fairly confident that we can expect a growth in tablet form factors, from smaller 7-inch and bigger. Even if Microsoft itself is not close to release a smaller surface product, it doesn’t mean that its partners could go ahead with it.

image

In my view, Microsoft is pushing its offerings to converge across the different platforms, including desktop, phone, tablet, television, cloud, console and services. It makes sense to keep rolling out updates towards making the platforms converge. If the company is able to offer a build-once, deploy-many approach, it might be able to steer companies, developers and consumers from going with competitors.

If all platforms are able to run the same WinRT core, even if certain aspects remain platform specific, it will make functional integration and product ecosystems easier to implement, deploy and maintain in a cross-device digital environment, which seems to be the company’s goal.

Awards: HKJC wins Best Practice Awards 2012

543231_431825893509705_151109168248047_1639397_426778538_n

This is a bit old already, and something I missed at the time the award was actually announced. My friend and former colleague Wacdany Rojas told me about the award a couple of weeks ago, and I want to post it here for posterity.

The Hong Kong Jockey Club won the Best Practice Awards 2012 in Usability and Simplicity with its ibu (Interactive Best for You), the world’s largest multi-touch entertainment table interface, which very proudly helped architect and build.

I worked on the Hong Kong Jockey Club’s Interactive Betting Table before moving to London. You can find the corresponding post here, which I published when the project became public. 

I was responsible for leading the backend implementation, and I had Wacdany working with me during that time. I eventually moved to London and I had to leave the project in Wac’s hands. He did an awesome job finishing the project and flying to Hong Kong to install and launch the system. He did such a good job, that he was later offered a position to move to Possible’s Singapore office to continue the work in other locations in Asia.

It is always nice to hear that your work was awarded. It is also true that amazing work, always comes from amazing teams. I’m proud to say I was part of this one.

Case Study: Nokia Sense Installations

I recently posted a case study of the Nokia Sense platform. A project I lead and worked for over a year at R/GA. The project‘s outcome was a personalized retail experience that educated, inspired and will help sell Nokia mobile solutions across their stores, at a global scale. The objective was to focus on the customer’s tendency of shopping by device and then build a solution from it.

As a complement to the case study article, I also want to share some photos of the actual physical installations of the experience, which were displayed at several conferences and temporary locations across the world.

The following are some pictures from the Arch Installation, displayed mostly at Nokia World conferences and temporary displays in key locations in Europe.

DSCF2410

DSCF2411

DSCF2412    DSCF2413

A smaller version for smaller displays was also done for some other events.

P1030468    P1030470

P1030469

The Nokia Sense touch application was also displayed at key locations like Westfield in Stratford, here in the UK.

WP_000116

WP_000117

The physical space is an important aspect of digital experiences. Just as devices and hardware can make a software experience more engaging, fun and confortable, the physical space can transform a digital experience if it is integrated properly.

This is one example of this type of integrations, which are becoming more and more relevant in the current digital landscape.

Wednesday, April 24, 2013

Case Study: Nokia Sense Global Platform

image

This post is actually long due, but it is until now that I’m able to publish a retrospective article about one of the large-scale, global projects that I have lead and worked on for the last couple of years at R/GA, here in London: the Nokia Sense Platform.

 
Platform Brief

R/GA developed a global retail touch platform, Nokia Sense, which empowers customers to browse, compare, and customise Nokia phones, accessories and apps. Moreover, it encourages existing Nokia owners to get the most of their phone through new app and accessory suggestions.


Through one swipe, in-store staff can quickly give an overview of the range of devices and prices and then, easily filter phones based on customer needs.


The platform has been deployed on 15 different regions and 32 different languages, including Arabic and Chinese. Nokia has currently 850,000 point of sales across the globe.

Project Background

This was actually my first project working for R/GA, just a day after I arrived to London. I was responsible for taking over the technology lead role for the backend side of things, leading a middle size team in charge of developing the global content management platform, including web sites, web services, interconnectivity with client application, automation, infrastructure, maintenance and deployment.


I was also responsible for coordinating with other teams in charge of the production, strategy, creative, and frontend applications, along with other agencies in charge of content administration, translation and on-site administration. Just on our side, combined teams got to the 20+ people mark!

Platform Features

Bespoke content gives consumers an in-depth understanding of each device, expanding on the standard functionality to demonstrate benefits and services.


Customers are able to email themselves PDF brochures, comparison information as well as their customisation choices for future visits. Mobile apps can be sent directly to the user’s new phone so that they are ready to go immediately after purchase.

Stores can promote unique offers, campaigns, prices and recommended local tariffs through the touch-screen as well as highlight key devices. A key feature was the implementation of a local admin secret mode that store managers could use to alter content and prices as needed when store promotions or stock changed.


We also expanded the experience to help existing Nokia users get more out of their phone by providing them with an opportunity to get new apps, related accessories, and software upgrades directly from the touch-screen using the store’s Wi-Fi (particularly important in key markets like China and India). The touch-screen also gives existing owners recommendations for upgrades based on their current device.


On the backend platform side, the platform enables centralized global content creation and administration trough a friendly and easy to use web interface. The content administration tool also allows content administrators to publish content to specific regions, and automates the translation process interfacing with translation systems behind the scenes. Translated content is submitted and retrieved automatically providing a seamless and hassle-free experience for users.


The platform also automates the process of creating, distributing and installing the touch application and updated content to selected stores across the world, at the same time that provides visibility on the status and version information for each store, enabling administrators to know the state of each store across the global retail network.


Last but not least, the platform provided all the necessary service endpoints for the client applications to update software, content, send emails, dynamically generate and send PDF files and distribute admin and training content across the world.

Technologies

The Nokia Sense touch application is built in flash and runs as an Adobe AIR 3 application. The flash team did extensive optimisation and testing to ensure a seamless and intuitive user experience. Content is loaded as and when it is required by the user and then cached for repeat use to ensure the speed of interactions is quick and not loaded down by heavy video.


Behind the front-end is a robust backend and a tailored CMS that enables content creation, publishing, translation, deployment and distribution to markets. The CMS features a 2-tiered admin system for global and regional users to ensure core information and assets are managed globally for consistency and brand language while other content can be tailored to local needs.

The backend system was built using the latest .NET technology stack, including ASP.NET MVC, WCF and RESTful services and MS SQL Databases, enforcing robust design patterns and industry coding best practices. The platform is also integrated with third party solutions to automate translations and deployment to individual screens.

Client Benefits

Here are some of the benefits that the platform was able to bring to the client.
  • Between 50% and 75% of customers visiting the store, used the touch screen experience.
  • Customers said that the experience was easy to use, personalised and quick to find the information they were looking for.
  • Stores with the touchscreen experience improved the time customers spent in the store by 32%.
  • 3 of 4 people shop without staff assistance, so digital tools are best for self-discovery.
  • Client’s investment on the platform was paid back in 6.5 months.
  • Average Sales Price went up by 25%


Lessons

Here are some of the lessons learned from the experience running on the retail space.
  • Centralized solution with local management tools are better than distributed content management strategies, to keep a consistent message and brand across a global network.
  • Deployment and installation needs to be faster and simpler, where automated processes, user friendly and highly available tools make a big different.
  • Experiences work best when they can be pre-installed on the devices, so the correct functionality of the experience is not left to non-technical staff members in local stores.
  • Centralization of content creation, translation and localization is much better to ensure the consistency of the brand image.
  • Streamline workflows that make sense across the brand’s strategy.
  • Quick time to market.
  • Real time monitoring of the state of the apps across the stores.
  • Flexible design.
  • Easy to update.
Final Notes

It was a big undertaking, with really satisfying, on budget and on time deliveries, including Nokia World 2011 and Nokia World 2012 events. It is important to mention that we enforced continuous integration and agile methodologies practices, using TeamCity CI Server along with Windows Server 2008 and Agile/Scrum and Kanban practices for iterative development.


Being in charge of leading the team, enforcing best practices both in team management and code writing, coordinating with other teams, agencies and also the client, and on top of that, being responsible for managing the server infrastructure and deployment environments, plus also coding across the whole backed solution was not easy, it was a big challenge! However, I was able to take it through its delivery, and it was a rewarding experiences that though me a lot!

It has been a very good run for the platform, spanning the life of the platform over more than two years in the retail space, which is a lot to say if we take into account the current technology phase. We have completely moved to .NET platforms for creating digital experiences in the physical space, because it gives us a consistent platform that accelerates the development process, and enables us to increase the reusability of components and knowledge far more than in any other platform. This is incredibly relevant, since the spectrum of platforms where .NET applications can run is huge (mobile, tablet, desktop, screens, video signage, web, peripherals, sensors, cars, out-of home experiences, backend and frontend, etc.).


Nokia Sense platform was a big success in a moment where Nokia needed to help bust their sales and engage customers to self-discover the ride range of products they offer. While they might have a tough round ahead in the main markets to compete against iPhone and Android in the smartphone segment, they are still huge is other markets and in the non-smartphone segment, and Nokia Sense was a key digital tool in keeping it like that.

Sunday, April 21, 2013

How to Automate Builds with TeamCity (Part 1)

Please notice that this is a multi-part, step-by-step guide, on how to automate builds in TeamCity CI Server. You can find the parent article here, which has links to all the related posts.

Part 1:  Creating the Project’s Build Script 

To get started, we first need to setup our source control repository and create an application we can use to configure and test our TeamCity CI Build.

TC_build_web_02_thumb[2]

  1. Create a Repo on your Source Control Server that can be seen from your TeamCity CI Server. In my case, I’m using Subversion
  2. Create an application that you can commit to the repo for testing purposes. Let’s start with a default ASP.NET MVC 4 application, which will be created with default controllers and views.
  3. Once created, run the application from Visual Studio (F5 or DEBUG/Start Debugging) to make sure everything is working correctly. You should see the default page running.
  4. Let’s do a couple of modifications so you can give a few personal details to the home page. In the HomeController.cs file, change the ViewBag.Message property for something more meaningful in the three controller actions. That should be good enough for now.

Now, the trick to enable TeamCity to automate the Build process of your applications is to establish a build mechanism. Each tech stack will have its own mechanisms to compile and build projects. 

In Visual Studio, you build your solution every time you compile and/or run your application. Visual Studio is able to do this by using Microsoft’s Build Engine, known as MSBuild.

TeamCity needs to have a mechanism in place to know how to build the application files that will be retrieved from the source control repository. Currently, TeamCity supports a wide variety of build mechanisms that work across a large range of platforms.

Among the supported platforms, you will fine MSBuild, Ant, .NET Process Runner, Command Line, FxCop, Maven, rake and PowerShell. You will also find mechanisms to build and run unit tests suites like Nant, NUnit and MSTest.

In our case, the common choice is to use MSBuild and MSTest for .NET projects. This means that we need to create a MSBuild script in our .NET project, which will be used by TeamCity to build our solution.

TC_build_web_43_thumb[2]

In your solution, create a new folder and called “Build”. You will place your MSBuild scripts here. Open the explorer of that location and create a new file for your MSBuild script. It can have any name, but needs to have “.build” extension. In my case I named it “project.build”. Now make sure to add it to the project inside the Build folder in Visual Studio.

The following is the code for the build script:

  1: <?xml version="1.0" encoding="utf-8"?>
  2: <Project DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
  3:   
  4:   <PropertyGroup>
  5:     <Configuration Condition=" '$(Configuration)' == '' ">Dev</Configuration>
  6:     <ClassLibraryOutputDirectory>bin\$(Configuration)</ClassLibraryOutputDirectory>
  7:     <ProjectDirectory>$(SolutionDir)\$(ProjectName)</ProjectDirectory>
  8:     <ProjectFile>$(ProjectDirectory)\$(ProjectName).csproj</ProjectFile>
  9:     <ApplicationOutputDirectory>$(ProjectDirectory)\$(ClassLibraryOutputDirectory)</ApplicationOutputDirectory>
 10:   </PropertyGroup>
 11:   
 12:   <!-- Build projects by calling the Project files generated by VS -->
 13:   <Target Name="Build">
 14:     <MSBuild Projects="$(SolutionDir)\$(SolutionFile)" Properties="Configuration=$(Configuration);"  />
 15:   </Target>
 16:   
 17: </Project>
 18: 

Notice that the script has two main sections so far. One where we declare properties that can be used across the script, and then the one where we define the MSBuild target. In this case, we are defining a simple target for our “Build” process, which will build our solution based on the configuration that we pass (in this case set as “Dev” by default).

Take a look at the MSDN documentation(here and here) for the specific documentation. In this case, we are putting together a generic Build project that work across web apps.


Now we are ready to create the TeamCity Build configuration. We can create the configuration at any point, but if we do it now, we can test it as soon as we commit our first changes to the repo. Alternatively, you can commit your changes right away. We can then run the Build manually from TeamCity, or do any modification and commit it to trigger it (once the Build is properly configured in TeamCity of course).


Next Article:


Part 2: Creating the Build Project in TeamCity

How to Automate Builds with TeamCity (Part 2)

Please notice that this is a multi-part, step-by-step guide, on how to automate builds in TeamCity CI Server. You can find the parent article here, which has links to all the related posts.

Part 2:  Creating the Build Project in TeamCity

The following steps will guide you through the process of creating a Build project in TeamCity. You first need to have your project setup, including general information and version source control settings, so you can later add build steps and parameters to execute when changes are committed.

  1. Login into TeamCity’s administration panel.
  2. Click on the Administration link at the top right corner, next to the search box.

    TC_build_web_03_thumb[3]
  3. On the left, the list of configured projects will be displayed, which will be empty if you haven’t configured any projects before.
  4. At the top, you have two tabs: Active Projects and Archived Projects. Make sure you are on the first tab.

    TC_build_web_04_thumb[2]
  5. Below the tab you should see a “Create Project” button. Click on it to create a project.

    TC_build_web_06_thumb[2]
  6. The New project page will be displayed. Fill in the project name and description fields and click the “Create” button. Make sure the project name is accurate, meaningful and unique.

    TC_build_web_07_thumb[2]
  7. The basic project will be created and you will see the project general details you entered with a notification above suggesting to add a build configuration. Let’s do that.
  8. Click on the “Create build configuration” link, which should be below the project details.

    TC_build_web_10_thumb[7]
  9. The General Settings Page for the Build configuration will be displayed. Here’s is where you actually configure a CI Build. Keep in mind that commonly, you will create a new configuration for each application/solution for each environment. Let’s assume that we are creating our development Build configuration for our MVC application.
  10. Fill in the Name and Description fields. For now, let’s leave all the other fields with their defaults. The only exception is to tick the checkbox for the option “it runs longer than X minutes” and add the minute’s value. I have tentatively entered 10 minutes, which is definitely far too long, but it will do for now. Then click on the VCS settings.

    TC_build_web_11_thumb[4]
  11. The next step is to enter the version control settings. Here you will need to create a new VCS root and attach it to the project’s Build configuration. Here, you are effectively configuring the source control repo’s setting where TeamCity will look for the project files.

    TC_build_web_12_thumb[2]
  12. Click on the “Create and attach new VCS root” button.
  13. First you need to select the source control tool you are using. This depends on what you are using. In this simple case, I’m using Subversion (SVN), so that’s what I’m choosing. Settings will slightly change depending on the source control tool, but they should be straight forward.

    TC_build_web_13_thumb[2]
  14. You will be required to enter the VCS root name and the SVN connection settings, including the URL of the repo for the project (root folder of the repo), and the credentials. You can configure SSH settings if you need to. You can also make the VCS root available to other projects if you want, which is helpful if you plan to have different TeamCity projects per environment, which need to access the same root repo. In this case, I plan to create all the environment builds within the same TeamCity project for the MVC app, so I’m leaving this unchecked.

    TC_build_web_14_thumb[3]
  15. When finished entering the details, you can click on the “Test Connection” button to make sure the TeamCity is able to view and connect to the repo. If not successful, check the connection settings. When the connection is working, click on the “Save” button.

    TC_build_web_15_thumb[3]
  16. You will be taken back to the Build Configuration page, and a notification will be displayed telling you that the VCS root was created. You can now see that there is a VCS root configured, with the details you just entered. This means that your Build project is already connected to the root of your application’s source control repo.
  17. You can now change some source control settings, like the checkout mode, the checkout directory and the labelling rules. In this case, I’m leaving everything with the defaults.

Good work. We have now a Build project in out TeamCity CI Server. We are ready to start creating build steps.

Next:

Part 3: Creating the Build Step in TeamCity