HTML5 Academy

Creating an iOS Native App On Windows

2010-07-15T08:19:00.000-07:00

As Homer Simpson says ... "DOH!" If you've ever thought - "gee, I'd love to create an iPhone/iPad app but I've only got a Microsoft Windows machine", I've got great news for you.

In appMobi - every app is really a small web site (we call them "app sites"). These app sites can be created in any traditional HTML editor - from Notepad++ to Visual Studio. In fact, you can run your favorite HTML editor on any kind of PC (Windows, Linux, Mac - whatever ...) because, to test it and build it you'll be uploading it into appMobi's cloud based development system. So, the process basically looks like: create the app site, upload it to your free appMobi app account, download the required info from your Apple Developer account (signing certificates), upload the certificates to us, press the appMobi "build" button inside your dashboard, and presto - iOS4 app! Even better - you can simultaneously output your app for Google Android as well.

I'd would have loved to make this post longer but it's really that simple with appMobi. As far as I know - it's the only way to create an Apple iOS app on Windows. Enjoy!

How To Create A Native App For Free

2010-07-13T12:45:00.000-07:00

I can't tell you how many times I'm asked asked the question - "I've got this great idea for an app, is that something you can help me with? What will it cost me?" A year ago, the best I could tell people was "find yourself a smartphone developer (mine are too busy) and try and convince them ... ." Native iOS4 and Android developers are few and far between, they're pretty full-up on work and they're not cheap. That doesn't even start to scratch the issues: development machines - OSX based for iOS development, SDKs, longer development cycles, IDEs, analytics, monetization ... .

It's been my mission to eliminate the barriers to entry for mobile apps, and that means addressing every aspect of the development chain including cost. I won't pretend this is an exhaustive review of all the tools and services on the market - just my favorites. I'm biased, but I think think their's only one plausible way to go for 99% of the apps people hope to bring to market - and that's the way both the CEOs of Apple and Google, Steve Jobs and Eric Schmidt, say we should - HTML(5) and Javascript. But how do you use HTML5 to create a native app? Read on ...

HTML5 = Great User Interfaces

I won't go into this too deeply - but suffice it to say that if the CEOs of the two biggest mobile players say HTML5 is the future, then you should take their word for it.

PhoneGap = HTML5 Websites As Native Apps
Cost: $0
PhoneGap might be described as the Linux of mobile development. It's development SDK that takes the approach of writing a native app - exactly as if it were a web site. In fact, let call this web site as an app, the "app site". It's brilliant in that HTML and JavaScript are by far the most widely known technical skill sets and the easiest to learn. PhoneGap provides a bridge to native device functionality through JavaScript - that's how the app site can tap into the GPS, accelerometer, camera, and other device features. The downside is to PhoneGap is that it developers are still required to set-up native SDK based development environments - for Apple that means a Mac, OSX + developer tools, XCode, the latest iOS4 SDK, and an XCode container project for PhoneGap. There's a similar tool chain for Android. In essence PhoneGap suffers from the same issues as most open source projects - if you could use it in a fully configured enviornment, it would be great.

appMobi = an online PhoneGap Hosting Environment
Cost: $0
appMobi takes all the pain out of PhoneGap. When you start an appMobi app, PhoneGap is baked in as are several extensions and additional APIs. appMobi is a SaaS (software as a service) based system that hosts a development system in the cloud. So, developers no longer need any of the desktop tools (machines, sdks, etc.) to create native apps. Three major benefits here of appMobi:

it's the only way I know of to develop an iPhone/iOS app on Windows
apps developed within the system can be deployed to multiple device OS's without changes
it allows developers to use any IDE to develop their app site.

appMobi let's developers develop apps for free if the developer is developing a "free to consumers" app.

Summary

PhoneGap + appMobi effectively remove the barriers to native app development:

there are millions of capable web developers as opposed to 10s of thousands of smart phone developers. That means cheaper, faster, and better native apps!
appMobi is effectively the RedHat to PhoneGap's Linux - that is, there is a trusted vendor that is building commercial quality toolsets that you can leverage into app developement.

Amazingly, it's easy and it's free to create great native apps - what's stopping you?

Writing HTML5 Mobile Apps

2010-06-10T07:52:00.000-07:00

Writing in HTML5 for mobile apps may require some rethink from traditional best practices on the desktop web. We'll give a quick overview of the high-level things you should take into account and we'll dive into the nitty gritty details in future articles. Let's go!

Absolute Positioning & ViewportFor the desktop web, the vast majority of content is developed in flow layout (as opposed to absolutely positioned). Historically, this has allowed designers to be relatively indifferent to the pixel resolution of the user's screen. That strategy doesn't work out very well on a mobile device because the resolution difference between the iPhone/iPad/G1/Droid etc. are dramatic and the enviornment in which the device is being used requires tighter control over the position of elements. For example, if a user has to hit a button with only one hand to work the device, the button really needs to be in exactly the right spot (as opposed to off the screen).

Viewport is a new meta tag that is available and is particularly useful for mobile situations.

meta name="viewport" content="width=320, user-scalable=no"

Using viewport, you can design to one resolution (say 768x1024) and have the whole page display on every device you are targeting. In conjunction with viewport, if you use absolute positioning, you can guarantee the fidelity of the user experience.

Viewport can sometime be tricky to implement on multiple devices correctly escpecially when the devices rotate etc.. To help with this, appMobi has created some convenience functions in their JavaScript helper functions - AppMobi.useViewport([widthPortriat], [widthLandscape]). Documentation for this can be found here: appMobi API documentation.

Cache is King

For mobile apps, a network connection isn't omni-present. HTML5 and the appMobi javascript library have facilities for caching data (HTML5) and media (appMobi). Use them early and often, your users will love the fact that the apps/sites work faster when they're online & and even work when they're offline!

Animation Is In!

What used to be the province of Flash is now available to the iPhone/iPad/Android/Nokia/BBY6.0 and all webkit based devices. You can move, rotate and flip elements with the greatest of ease. We have one sample that allows you to roll a soda can on a table top - that animation updates 100 times per second and it works beautifully even down to Gen1 iPod Touches. Check out the source code here: http://appMobi.com/Gallery.