Producing content for mobile devices raises the issue of testing the content in a situation as close as possible to the reality. Most of the time, you’ll only test the HTML 5 output of Captivate only on the mobile device you own or, even worse, in the desktop version of an HTML 5 web browser. If you are a Mac user, there is an easy way to test the behavior of your Captivate HTML 5 content on iOS devices, without even owning such a device.
The secret behind the strange title of this post is a small application called the iOS Simulator. The iOS simulator is part of a larger package called xCode.
Xcode is a suite of software development tools developed by Apple. These tools are used by the developers to create both desktop applications for Mac OS X and mobile native applications for iOS. The main tool of the suite is an IDE (Integrated Development Environment) also named xCode.
But the xCode package contains much more than the xCode IDE. One of the other app included in the suite is the iOS simulator that we will use to test the HTML 5 output of our Captivate project.
The xCode package is available for free in the Mac App Store, so downloading and installing is should be very easy!
Accessing the iOS simulator
The xCode package as downloaded from the Mac App store is a single .app file. To access the iOS Simulator that lies within this package, we will take advantage of the Forked file system of Mac os X.
Don’t get fooled by the apparent simplicity of the application files you download from the Mac App store. An .app file is actually a folder, not a file. The forked file system makes it look like a single file hiding its true complexity to the user.
Mac OS offers a simple way to open the .app folder and browse its content. Simply right click on a .app file and choose Show Package Content in the contextual menu.
Once in the xCode.app package, it is easy to locate the iOS Simulator application and to create an Alias to make it easily accessible.
The process of accessing the iOS simulator is described in the following general steps
- Download xCode.app from the Mac App store (it is a 3.5 GB download, so be patient!)
- Right click on xCode.app and choose Show Package Content.
- Once inside the .app package go to the /Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/Applications
- Right click iOS Simulator.app and make an alias
- Move the alias to the /Applications folder for easy access to the iOS Simulator
This process is described in the following video.
This is where the whole thing comes together! Simply test your HTML 5 content in a regular desktop browser, then, copy-paste the URL of your application in the virtual Mobile Safari browser of the simulated iOs device as described in the following video
Thanks to the iOS Simulator, it is easy (and cheap) to test your Captivate HTML 5 content on an iPhone or an iPad in various situations without actually owning these expensive devices.
Unfortunately, xCode is not available on Windows, so this technique is only available to Mac users.
Similar tools exist for Android, Windows Phone and Blackberry devices. I will try to describe them in future blog posts. In the meantime, don’t hesitate to share your tips, tricks and tools on testing the HTML 5 output of Captivate for Mobile devices in the Comments section of this post.