Developing a web app that behaves like a native app

Like many developers out there I started out coding for the web. So you might think it would be easier to develop a web app than a native app, right? The short answer is no… but web app development is getting better and the performance gap is closing.

Thoughts on web app vs native app development

Delivering a world-class UX is the main reason to opt for native development. Web app performance has quite some way to go especially on the vast majority of low spec devices. For example even if you get your web app running at a buttery smooth 60fps in iOS Safari, it doesn’t automatically mean you get that sort of performance in an app’s UIWebView.

iOS Tip: Don’t be content testing any web app or web UI framework in Safari and think that it works. A real web app development test is only done by running it inside an embedded WebView.

What you have to be careful off is getting sucked into some web app framework because you can get some decent results pretty quickly, but as soon as you add a little more complexity things can start to break and the speed of development will slow as a result. Whereas while native development might take longer to learn initially, after that you can start building some pretty slick apps just using the standard suite of UI components provided.

Ultimately things are getting better for web app development but probably not enough as to make native app developers want to consider switching. But with all the modern browser javascript speed optimisations and mobile devices becoming ever more powerful it’s worth considering a web app where the ability to share code is most important. After all who wouldn’t rather develop code once that works across mobile and desktop and leverages the extensive web developer knowledge base? So the compelling reason to build a web app is that your code should run on any screen that runs a modern browser.

Postcard app

I’ve been involved with developing the Postcard app which is a web app for demoing a peer to peer web experience using the Thali Cordova plugin. Throughout the design, development and build process of this web app I’ve encountered a number of issues or pain points and thought it would be good to share the golden nuggets I’ve learnt while trying to develop a web app that behaves like a native app!

Postcard app icon

Icons and splashes generator for Cordova web app

With any project I always like to start with design before I jump into development. Design is a time consuming task but some things can be automated like resizing all those app icons and splashscreens across multiple platforms. I wrote a time saving Ruby script to build app icons and splashscreens for iOS and Android with Cordova’s image filenames and sizes. (Usage and instructions are in the gist)

Designing a web app across different screens – live!

Many web apps take advantage of node and there is a great module for designers called BrowserSync.

BrowserSync allows you live preview all your design or code changes across multiple screens. That means you can test your web app in real-time on any browser on Mac or Windows as well as hook up the web app on iPhone, iPad or Android. Also when you interact on one screen for example following a link or scrolling the page this automatically updates everywhere else. This is a must have for any responsive design or adaptive design work!
BrowserSync demo

Polymer 1.0 – a UI kit for web apps

For the UI design side of things I choose Polymer 1.0 due to it’s host of web app elements inspired by a native app’s UI kit. Initially I didn’t like all the custom element names, as this reminded of an Angular wild west of element names but you can quickly learn the Polymer core elements and view the documentation and source behind them. Also there is a benefit to this as it prevents the usual ‘div nest of inception’ meaning that an HTML layout can be understood at a glance.

Getting started developing with Polymer

The trickiest thing is actually getting all the Polymer elements you need to use as these all come separately which of course makes sense later for production. But do yourself a favour and just install all the paper, iron and neon elements for no hassle development.

Should I use Polymer’s ‘on-click’ or ‘on-tap’ event?

There is a 300ms click delay issue that affects mobile web apps. The good news is that there is a simple fix by using the viewport meta tag with width=device-width property. But the bad news is that this trick only works in Chrome 32+ on Android.

Thankfully Polymer tries to handle this issue for you if you use the on-tap event however it doesn’t appear to currently trigger a click on Mac Safari (using an iframe web app). So if desktop Safari compatibility is more important then you may have to stick with the standard on-click event until this is fixed. Or just incase you already use a ‘fast click’ javascript polyfill it may run into issues due to click delay complications with the iOS 8 web view.

Meet ‘iron-list’ – the UITableView for web app

Polymer’s iron-list element is essential for scrolling large amounts of data on mobile devices. It does this by using a virtual list and recycling (20) cells to handle smooth scrolling of 1000s of items. One note of caution is that this runs fine in Safari browser but there is currently a scrolling issue in iOS 8 WebView beyond a certain number of items. If only UIWebView would behave the same as Safari then development would run so much smoother!

Make it feel like a native app – not a web site!

It’s important to make sure things act like an app and not feel like a website thrown inside a Cordova webview. There are a couple of giveaway indicators that can be fixed, although not everything will behave perfectly.

Disable the scrolling bounce effect

While adding the magical web app meta tags will give you full screen control in the browser it doesn’t get rid of the web page scrolling spring effect common with iOS and Mac. Now while the spring effect provides a wonderful UX in a web browsing context – native app’s don’t spring! To disable this unwanted behaviour the first thing to do is to enable the DisallowOverscroll preference in Cordova’s config.xml.

If you are not using Cordova then you can disable the iOS webview scroll:

It’s always a good idea to do a CSS reset on the html,body and then add the following to disable the bounce effect in the browser:

Disable select copy/paste

Another annoying web behaviour inherited is that everything is selectable on a web page. Again a useful behaviour in a web browsing context but not so much with a web app. Besides not feeling right there is a UX issue if a user taps the ‘wrong way’ instead of activating a button click as expected they end up in a text selection mode. The easiest workaround is setting user-select to none on the ‘body’. NB: If your web app contains form inputs then you can exclude those inputs using the :not() CSS selector but I find it easier to switch everything off by default.

The one problem you still get with iOS UIWebView is that you always get a magnifying glass when doing a long-press and unfortunately there is no simple way of disabling this without hacking UIWebView private APIs.

Prevent scrolling nav bar when editing input

A quirk with web apps on iOS is trying to fix a nav bar so it won’t scroll off the screen when editing an input or textarea that would obscure the soft-keyboard when it pops up. One trick is to position your input as high up the page as possible in order to avoid the issue. But sometimes this isn’t always possible so the other option is to try a hacky workaround discussed on SO which also seems to work pretty well with Polymer:

In Cordova if you want to enable Javascript focus() calls to open the soft-keyboard you can disable the KeyboardDisplayRequiresUserAction preference. Although bear in mind iOS8 now supports focus() calls but I found the input and keyboard can lose connection sometimes.

Problems with web app when running as a native iOS app…

I encountered quite a number of problems when running a web app inside the iOS 8 UIWebView. I have listed the main issues below to watch out for with possible workarounds:

[WebActionDisablingCALayerDelegate setBeingRemoved:]: unrecognized selector sent to instance 0x174009d20
*** WebKit discarded an uncaught exception in the webView:willRemoveScrollingLayer:withContentsLayer:forNode: delegate: -[WebActionDisablingCALayerDelegate setBeingRemoved:]: unrecognized selector sent to instance 0x174009d20

Solution: Add body style for -webkit-transform. This WebView bug occurred when animating an element sliding up from the bottom of the page. It caused the animation to jump and skip frames and seemed to trigger memory warnings.

[46377:7026777] Received memory warning.

Solution: If you’ve tested for memory leaks then try disabling animations. If this solves the issue then try to optimise your script so that expensive business logic is called only after animations are completed.

Message from debugger: failed to send the k packet

Solution: Keep app awake! In the app delegate enable setIdleTimerDisabled:

iOS Tip: When testing web apps on iOS it can take so long to build and debug on device that the screen locks and the deploy fails. Use the setIdleTimerDisabled to keep the app alive for debugging!

Developing a peer to peer web for iOS

To establish peer to peer (p2p) communication on iOS devices there is an API for that known as the Multipeer Connectivity framework. There are a couple of things to bear in mind about this framework:

  • Discovers and connects with iOS devices but will not discover devices on other platforms like Android
  • Maximum number of 7 invitees (client peers)
  • Will raise a prompt for user acceptance of a peer connection request

Intro to Thali project for iOS

Thali is an experimental open source p2p project that promises to enable p2p web to run on mobile devices. This is quite a big undertaking so to make life easier to begin with we can start to look at the iOS to iOS p2p connectivity story which is documented as Thali “Story -1”.
The spec will use the TCP internet standard to transport data across peers therefore all mobile devices will run a Node.js layer. In order to run Node.js on iOS we use a Cordova plugin which runs JXCore. This will then connect with a native TCP bridge which will relay the data over the iOS Multipeer Connectivity framework. The flow is illustrated in the diagram below:
Thali flow for iOS

How to build Thali demo for iOS

If you like playing with bleeding edge code you can build the “Story -1” iOS dev branch. (NB: You will need two iOS devices with Bluetooth 4.0 support.)

To run this build script in Terminal you will need Node.js. If you haven’t already got Node.js installed you can get Node.js with NVM for Mac OS X.

Install the Cordova package:

Build Thali “Story -1” demo for iOS:

How all the parts work inside the Xcode project…

There are three main parts or layers in the Thali iOS project:

  1. Cordova

    • All demo UI code is handled by “thali_main.js” script.
  2. JXCore

    • UI actions will trigger a call to functions in “app.js” script which is responsible for running all our Node.js code and calling the native methods as documented in the Thali common API.
  3. Native Plugins

    • All native methods called from JXCore are registered in “THEAppContext.m” defineJavaScriptExtensions method

What about Android p2p?

More info about Thali for Android is available on Dr Jukka’s blog.

What about iOS and Android p2p?

More info about future Thali development including iOS and Android p2p interoperability is documented on Thali stories.

Using Azure CLI on Mac OS X to create Mobile Service

One of our startups at MS Ventures was looking to use the command line to manage their Azure account on Mac. If you prefer using Mac OS X Terminal or iTerm and have an Azure account then you should check out the Azure CLI tools for Mac.

Azure CLI

Install Azure CLI for Mac

You can either download the Azure Command Line tools installer for Mac or install the Azure command line tools using nodejs. I have previously written a post covering installing nodejs using NVM.

Test Azure command works with help:

Download Azure Publish Settings file

Sign in to your Azure account and download your *.publishsettings subscription file.

Import Publish Settings file

Import path to downloaded Azure Publish Settings file:

Tip: You can drag & drop the file into Terminal instead of typing the link.

Show Azure account subscriptions:

Create Mobile Service with Azure CLI

Create Mobile Service TerminalTest:

You will be prompted to enter SQL admin user name and password. The Mobile Service should only take a couple of minutes to provision.

Show Mobile Service details including applicationUrl and applicationKey:

You will want to make a note of your applicationUrl and applicationKey for CRUD examples below.

Create Table Items:

Show Tables:

Read Table Items:

CRUD examples with Mobile Service using curl

You can quickly execute Create, Read, Update and Delete operations with Mobile Services using curl commands. Here’s a quick overview of Mobile Service CRUD operations and methods:

Operation Method REST URL format
Create / Insert POST https://<service_name><table_name>
Read / Query GET https://<service_name><table_name>
Update PATCH https://<service_name><table_name>/<item_id>
Delete DELETE https://<service_name><table_name>/<item_id>

You will need to replace the X-ZUMO-APPLICATION header value below with your own Mobile Service applicationKey.

  1. Create / Insert

    Change the data text to submit a couple of items… Note you will get a JSON response with the id of the inserted item. This item id value is to be used in the Update and Delete examples below.

  2. Read / Query

  3. Update

    ^ Data updates shown in Azure Mobile Service table.
  4. Delete

How to query and filter Mobile Service table data with curl

Get items marked as complete

Get items starting with text ‘hello’ with total count of results:

Get a collection of items in order (eg. pagination):

Just be aware if you use double quotes for --location then you must escape the dollar signs that prefix the params with a backslash (eg. \$). Single quotes don’t require dollar escaping but you may have trouble encapsulating filters with quoted strings hence I have opted for double quotes in these query examples.

Ember-CLI ToDo example app with Azure Mobile Services


When you create an Azure Mobile Service you can download a ToDo sample app to help you get started on a number of platforms including Windows, iOS and Android. There are also cross platform options available with Xamarin or web app development using PhoneGap or HTML/Javascript. Recently I came across a pretty neat Javascript framework called Ember for creating web apps. While you can go ahead and quickly download the Ember Starter Kit to try out some of the introductory snippets listed on the Emberjs homepage, the better option for serious development of Ember apps is to use Ember-CLI. The Ember Command Line Interface gets you up and running with a full MVC framework and helps install project dependencies using NPM (Node Package Manager) and Bower. Having just started learning Ember-CLI myself I thought it might be useful to do a getting started tutorial showing how to hook it up with Azure Mobile Services to create a ToDo app with same functionality as the other offerings already available on the Mobile Services quick-start page.


Before you can start using Ember-CLI you will need Node.js installed.

How to install Node.js on Windows

Alternatively you can manage multiple node versions using the latest nvm-setup Windows installer.

See nvm-windows for more commands.

How to install Node.js on Mac

If you’re using a Mac its better to install Node.js using NVM (Node Version Manager) rather than install as admin/sudo user. Run the following commands in Terminal:

NB: In new Terminal sessions you may need to run nvm use default. If you want to you can add this to your bash profile to setup automatically.

Or for a specific node version:

Once you have node installed you can check its working by getting the version:

Installing Ember-CLI and bower

Install ember-cli, bower and phantomjs globally using the -g switch.

Creating the Todo example app using Ember-CLI and Azure Mobile Services

  1. Create an Azure Mobile Service
  2. Create example TodoItem table.
  3. Create a new Ember-CLI app
  4. Run in ember client in Browser.
  5. Open http://localhost:4200/ in new Browser window to see web app.


  6. Save Azure Mobile Services javascript files into /vendor folder.
  7. Update the Broccoli file Brocfile.js to import /vendor javascripts
  8. Update the js hint file .jshintrc to recognise the WindowsAzure global namespace.
  9. Generate TodoItem model, index controller and route. (Generating a route will also generate a Handlebars index.hbs template by default).

  10. Create azure service. (Generating a service will also generate an azure-service.js initalizer)

  11. Update the services/azure.js script with your own Mobile Service connection strings (on lines 61-62):

    When the app first loads we will need to read a table. In this case we will read the TodoItem table to get a list of TodoItems. When a user needs to add a Todo item we will call the insert method to add an item into a table and update our Ember model for display. The del method will work the same way except the item will be deleted. Finally the update method will be used to save changes to an item, which in this case will be when the TodoItem is completed (stroked out).

  12. Edit models/todo-item.js to handle todo text string and a completed boolean so tasks can be marked off:

    The TodoItem model consists of a string property for the Todo text and a boolean property to say if the Todo item has been completed.

  13. Edit routes/index.js and set model to read TodoItems table:
  14. As ember serve auto updates as you save changes you should see some activity in your Browser’s console log.

  15. In the Browser’s console log you might get a refused to connect error “because it violates the following Content Security Policy directive: connect-src ‘self'” that means we need to update our environment config. To fix this add the following contentSecurityPolicy settings to the ENV var in config/environment.js to allow connections to *
  16. Update the templates/index.hbs which will be used to display the user interface.

    NB: You will get an uncaught error if you try to add, update or delete items as we still need to handle user actions with a controller.

  17. Update the controllers/index.js to handle actions from user interface and delegate them to our Azure service.

    To allow access to the service from the controller we need to inject the azureService in the initializers/azure-service.js service initializer.


  18. Finally add some styles to grey out and strike through completed items styles/app.css:


Download finished Todo ember-cli project on GitHub

Unity3D Leaderboard demo using BitRave Azure plugin

This is a quick Unity3D game developer tutorial showing how to save, update and query high scores stored in the Cloud using a Mobile Service and the BitRave Azure plugin.

Watch how to create a Leaderboard in the cloud using the Unity3D BitRave plugin.

  1. To save scores in the Leaderboard table you will need to create a Mobile Service.

    If you don’t have an Azure account there is a special Cloud GameDev Offer for game developers.

  2. Get the BitRave plugin with Leaderboard scripts on my GitHub fork.

    There are two new scripts I’ve added for the Leaderboard demo:

    Unity3D BitRave Fork with Leaderboard script demo
  3. Create new Unity project.

    Unity3D BitRave Fork with Leaderboard script demo
  4. Copy contents of the BitRave Universal Plugin Assets folder into your Unity3D project’s Assets folder.

    Unity3D BitRave Fork with Leaderboard script demo
  5. Import JSON.NET dependancy from Unity Asset Store.

    Unity3D BitRave Fork with Leaderboard script demo
  6. Open the TestAzure scene.

    Unity3D BitRave Fork with Leaderboard script demo

    Select Main Camera and remove Script in the Inspector panel. (This will be replaced later.)

    Unity3D BitRave Fork with Leaderboard script demo
  7. Create ‘Leaderboard’ table in Azure Mobile Services.

    Unity3D BitRave Fork with Leaderboard script demo
  8. Open AzureUILeaderboard.cs script and replace Azure Mobile Service connection strings.

    Unity3D BitRave Fork with Leaderboard script demo
  9. Drag & drop AzureUILeaderboard.cs script to attach it to the Main Camera.

    Unity3D BitRave Fork with Leaderboard script demo
  10. Now you’re ready to play in Unity Editor add post some high scores!

    Unity3D BitRave Fork with Leaderboard script demo
    Unity3D BitRave Fork with Leaderboard script demo

In this demo project you can submit new scores, return list of all scores and update them. You can also query to show only high scores or get list of a user’s scores.

Check it out!

Karma Labs on Azure Mobile Services and BitRave plugin in their Unity3D game development.

If you are also looking to handle user identity with Mobile Services and configure build settings for iOS and Android development I touch on this in my first getting started with BitRave Azure plugin tutorial.

Share your Unity3D #GameDev with @deadlyfingers

Unity3D game dev with Azure Mobile Services using BitRave plugin

This quick-start tutorial is for Unity3D game developers who would like to get a cloud backend that runs across multiple platforms (including the Unity Editor for quick testing). One of the big advantages for game devs using Unity3D is that it supports so many platforms. It’s fair to say more people own more than one device that connects to the internet and a lot of them can run apps and games. While the platforms and ecosystems may differ as a gamer I would like to play the same game across any device (and on any platform) and expect things to sync. Azure Mobile Services is a ‘Backend as a Service’ which supports multi-platform app development. In Unity the BitRave plugin for Azure Mobile Services is designed to just work on any platform that Unity supports.

Watch getting started with Unity BitRave Azure plugin running on iOS and Android

  1. To kick off with create a Mobile Service in Azure management portal. If you don’t have an Azure account yet game developers can register for the Cloud GameDev Offer.

    NB: A Mobile Service will only take a minute to setup and just a couple of minutes more to become active and ready to use.

  2. Download BitRave plugin.

  3. Create new Unity3D project.

  4. Copy BitRave’s AzureMobileServicesUniversalPlugin/Assets into Unity3D project’s ‘Assets’ folder.

  5. Get JSON.NET Unity asset to enable cross platform support.

  6. Open TestAzure Scene.

  7. Open AzureUI.cs script and replace the connection strings with your own Mobile Service URL & API Key.

  8. The BitRave demo uses Authentication with Facebook. You will need to create a Facebook app for your Mobile Service and copy & paste the App Id and App Secret into your Mobile Service’s IDENTITY Facebook section. Then generate the Facebook Access Token under Facebook’s Tools > Access Tokens.

    Copy the Access Token and paste into AzureUI.cs script’s Access Token value.

    NB: Remember to save changes.

  9. In Unity select the Main Camera and remove the Script in the Inspector panel.

    Reattach the AzureUI.cs script. (Drag & drop the script onto the Camera.)

  10. Add the demo TodoItem table (in Azure Mobile Service’s get started section).

  11. Run in Unity Editor and connect to Mobile Service.

    Once logged in you can add a TodoItem.

    You can query or list all items.

    Items can be selected to updated.

  12. In Unity Build Settings switch platform to build for iOS. I’ve selected Development Build and Symlink Unity Libraries for smaller/faster builds.

    To run on the iOS Simulator edit Player Settings and under Target iOS Version menu select Simulator SDK

  13. Open Xcode project to build & run. Rotate iOS simulator to landscape to display UI.

    Connect to Mobile Services by logging in to add some items.

  14. In Unity Build Settings switch platform to build for Android. I’ve selected Development Build and Google Android Project.

    Edit Player Settings to change the Bundle Identifier. (This is in reverse domain name notation – for example net.deadlyfingers.DemoApp)

  15. Import Android project into Android Studio.

    Edit the AndroidManifest.xml and change the installLocation attribute to auto.

    Build & run app. (I find the Nexus 7 tablet API 21 ARM emulator works best with Unity builds.)

    Rotate Android emulator to landscape to display UI.

    Connect to Mobile Services by logging in to add some items.

One more thing to todo!

You can also record the userId by adding one line of code on the server-side.


Edit TodoItem table Script > Insert

Score bonus points!

Check out my Leaderboard BitRave tutorial showing how to save, update and query high scores stored in the Cloud using a Mobile Service.

Share your Unity3D #GameDev with @deadlyfingers

Unity3D and Cloud backend using Azure Mobile Services and Prime31 plugin

Unity game developers looking to publish their games on Windows Store might want to add global/local high-score leaderboards, record user achievements and level progress. For example the ability to save level progress is usually important as users tend to own more than one device and won’t really like the idea of starting over again. With Azure Mobile Services it’s really easy to setup a cloud backend for apps so why not use an Azure Mobile Service to provide a backend for your game? The best part is it will only take a couple of minutes to setup!

Watch getting started with Unity Prime31 Azure plugin running on Windows

  1. Sign-in to Azure portal. If you don’t have an Azure account yet game developers can register for the Cloud GameDev Offer.
  2. Create Azure Mobile Service
    Create Mobile Service
    Create Mobile Service
    Create Mobile Service
  3. Create Demo TodoItem Table
    Create Mobile Service
  4. Get Prime31 “Microsoft Azure Plugin” for Windows 8 Store. (free until July 2015)
    Create Mobile Service

    When you click on the “Download Now” button, it will prompt you for your name/email. Submit the form to get the download link to the Unity plugin sent to your email.

  5. Download & install Microsoft Azure Mobile Services SDK.
    Install Azure Mobile Services SDK
  6. Create new Unity3D project
    Unity3D New Project
  7. Download Prime31 plugin from email link and then open the ‘MetroAzure.unitypackage’ package
    Open Prime31 plugin package
  8. Import the Prime31 plugin package.
    Unity3D import plugin package
  9. Open “MetroAzure” Scene
    Unity3D open MetroAzure Scene
  10. Open “MetroAzureDemoUI.cs” Script
    Unity3D open MetroAzureDemoUI script
  11. Copy & Paste Azure Mobile Services Connection Strings (from Azure Mobile Service portal)
    Unity3D open MetroAzureDemoUI script

    Remember to save changes!

  12. Select File > Build Settings and target Windows Store platform.
    Unity3D Build Settings
    • “Add Current” scene
    • Select “Windows Store” and “Switch Platform”
    • Select C# Solution and SDK “8.1”
  13. Select Player Settings
    Unity3D Player Settings

    Under “Metro Unprocessed Plugins” set:
    Size: 1
    Element 0: P31MetroAzure.dll
    Click Build

  14. Open Windows Store build in Visual Studio
    Windows Store build
  15. Open ‘Package.appxmanifest’ manifest to add Internet capabilities.
    Windows app manifest capabilities
  16. If necessary open ‘Configuration Manager’ to target current PC hardware.
    Windows Configuration Manager
    Windows Configuration Manager x86
  17. Build and run!
    Visual Studio
    Unity demo

    ‘Connect Azure Service’ first, then try adding some items.

    Azure Mobile Services Demo Table

    You will see the items appear in your Azure Mobile Service ‘TodoItem’ table.

Ready for the next level?

Check out these links which will show you how to make a leaderboard using Azure Mobile Services & Prime31:

Additional Resources:

One more thing…

Now is a great time to publish Unity games for Windows!

  • Lifetime dev centre means no more recurring annual developer fees!
  • Take advantage of the Unity Offer Program for Windows apps to qualify for developer device, Unity Asset Store Voucher, Unity3D Pro License, ID@XBox priority and more!

Share your Unity3D #GameDev with @deadlyfingers

How to record screen of iPhone, iPad, Android and WindowsPhone device

If you’ve developed an app you might want to make a promo video showing your app working across devices or multiple screens.

Of course you can record an iOS Simulator, Android Virtual Device, or WindowsPhone emulator easy enough using a screen recording tool like Camtasia but it’s often a bit tricker to record real footage from the device hardware. Also it might be necessary to demonstrate app functionality not supported by a simulator.

Camtasia Screen Record Custom Region
Recording simulator window using Custom Region recording in Camtasia.

Windows Phone 8.1 already comes with the screen projection functionality built-in. This makes Windows the easiest platform to record app interaction.

How to present and record screen of WindowsPhone device using PC/Mac

On PC you will need Windows 8 installed. On Mac you will need a Bootcamp partition or VMware Fusion Virtual Machine with Windows 8 installed.
The WindowsPhone should have the latest 8.1 update installed.

  1. Connect the Phone over USB.
  2. Open Windows Phone Settings and select “Project my screen”.
  3. Install the “Project My Screen App” for Windows 8. Project My Screen app
  4. Tap ‘yes’ when prompt to allow screen projection on WindowsPhone appears.
  5. Allow screen projection

Tip: In the Windows “Project My Screen” application press ‘F‘ key to toggle fullscreen mode and ‘B‘ key to hide the phone background chrome.

Unfortunately there is no way to display or record the touch gestures, but this can be dummied using Camtasia mouse effects. Simply ‘mirror’ with the mouse pointer what your other hand does on the device at the same time. Once the screen footage is recorded in Camtasia you can hide the mouse cursor by setting the Cursor Opacity to zero and add a Cursor Highlight effect to simulate the touch input.

How to present and record screen of iPhone/iPad device using PC/Mac

To record an iPhone or iPad you can try out the third party Reflector app. This makes your PC/Mac act as an AirPlay device allowing you to display and record the screen.

  1. Connect PC/Mac and iPhone/iPad to the same wifi network.
  2. Launch Reflector application.
  3. On iOS7 or higher device, swipe up from bottom of screen to open ‘Control Center’ to select the Reflector Airplay device and enable video ‘Mirroring’.

Unfortunately there is no way to display the touch gestures, but this can be dummied using Camtasia mouse effects. Simply ‘mirror’ with the mouse pointer what your other hand does on the device at the same time. Then once your Reflector footage is recorded in Camtasia you can hide the mouse cursor by setting the Cursor Opacity to zero and add a Cursor Highlight effect to simulate the touch input.

How to record screen of Android device using PC/Mac

To record an Android device without rooting your device requires an install of the Android SDK on your PC/Mac. Once your SDK Environment is setup you can run commands in the command prompt / Terminal:

  1. Check Android device is connected to PC/Mac using USB connection. NB: You will have to enable ‘Developer’ mode on your device by tapping Build number seven times (found under Settings > About device). Then enable USB debugging (found under new Developer options settings).
    adb devices
  2. Record screen using adb shell. NB: Requires Android 4.4 KitKat (API level 19) or above.
    adb shell
    screenrecord /sdcard/recording.mp4
  3. Stop recording (Control+C) and exit shell.
  4. Copy screen recording from device’s /sdcard onto PC/Mac
    adb pull /sdcard/recording.mp4
  5. Move / rename recording
    mv recording.mp4 ~/Desktop/

Recording screen of Galaxy Note 3

Unfortunately there is no way to record the touch gestures at the same time using this technique. What you can do is play the original screen recording and mimic the touch gestures over the top while recording using Camtasia.

5 World Cup apps for WindowsPhone 8

Five essential WindowsPhone apps for Brazil 2014 World Cup

Stay in the game when on the move!

  1. iTV Player

    Watch iTV World Cup games live stream.

    WindowsPhone App

  2. BBC iPlayer

    Watch BBC World Cup games and highlights.

    WindowsPhone App

  3. TV Catchup

    Stream live football World Cup games on BBC One.

    WindowsPhone App

  4. TV Guide (UK)

    Find which channel the game is on and use the right app to stream the match.

    WindowsPhone App

  5. World Cup 2014

    Group tables chart and kick off times.

    WindowsPhone App

3 Lions on a Phone!

When you’re not watching the Brazil World Cup here are three football games to collect and play.

  1. Score! World Goals

    Recreate some of best football goals in the world!

    WindowsPhone App

  2. FIFA 14

    Big football game with touch screen gameplay.

    Windows Game

  3. Official England Football

    Not for the faint of heart, this is a hardened retro football game. Unleash the three lions!

    WindowsPhone App

Extra time…?

Grab these hot new apps, whoop whoop!

Top Windows 8 Games

10 top games for Windows 8

When you need a breakout from work here are ten fun games to play on your Windows 8 device. Touch Surface recommended! 😉

  1. Reckless Racing Ultimate

    Top down mini car racing game featuring offroad and race track competitions. A must have game!

    Windows Game

  2. Zombie HQ

    Top down shooter with zombies, guns, swords and grenades = super addictive gameplay!

    Windows Game

  3. Rayman Jungle Run

    Gorgeous animated 2D platform game on rails. Split second reaction timing is key!

    Windows Game

  4. Where’s my Water

    Beautiful puzzle game with fluid dynamics and chemical reactions!

    Windows Game

  5. Spectra

    Arcade space racer with retro music.

    Windows Game

  6. Tap Happy Sabotage!

    Good family fun! A physical multiplayer game that works best on big touch screens.

    Windows Game

  7. Robotek

    Turn by turn strategy war game with a bit of luck. Build, attack, defend or hack your opponents robots!

    Windows Game

  8. GunFinger

    Shooting gallery arcade game with Zooooombies!

    Windows Game

  9. Dungeon Hunter 4

    Top down adventure game. Vanquish those foul foes with your epic powers!

    Windows Game

  10. Top Gear: Race The Stig

    Fun racing game – can you beat the Stig?

    Windows Game

…Still looking more apps?

Top up with some hot new apps, yeah!