Mobile Applications

• Industry is in a state of competitive flux not seen since the days when mini-computer manufacturers first flooded the market– There is now open source, but there are also lots of proprietary secrets– Standards are evolving rapidly

• Prediction: there will be winners and losers• Based on history: Winners will not likely produce the best products

– Superior marketing strategies gain traction quicklyExample: Microsoft versus Apple in the 1980s

– Getting to the public to fill a need before standards are establishedExample: Early browser war between Netscape and Explorer

• Bottom line: Development is expensive; mistakes can be disastrous

Assumption: We have an idea for a hot new mobile application

General Considerations

Hardware Specifications• Display Sizes

– Laptop/Desktops: 15”, 17”, 19”, 21”, etc.– Phones: 1½” , 2.3”, 3”, 4”– Tablets: 7”, 8”, 10.1”, etc.

• Mobile Device Resolution– Low end: 128x128– Mid end: 240x360– High end: 320x480, 1024x768, 1200x800, etc.

• Operating Systems: Android, WebOS, Windows 8, iOS, Blackberry• Manufacturers: Apple, Nokia, RIM, Samsung, Sony, Motorola, LG, HTC• Memory: 256MB – 1GB; Storage: 1GB-32 GB• Processor Speed: 500 mhz – 1 ghz

Tablet Market Share

Note: The Android market is fragmented among dozens of manufacturers

Pixels and Aspect Ratio• Pixels per inch (ppi), or dots per inch (dpi)

– High resolution may mean that you need a magnifier glass to read text

– The retina has a limit of 300 ppi– Zooming in and out may be necessary

• Aspect ratio– Width to height ratio differs between devices– When turning the device, the aspect may change

• Does the device automatically zoom to fit?• Does the device adjust the font to accommodate?

Features• Key Entry– Virtual or physical keyboard– Numeric or alphanumeric entry– External keyboard attachment

• Interacting with applications– Touch or multi-touch– Handwriting and/or voice recognition

• Geo-location• Facial and gesture recognition• Connections: Phone, web, texting, email

Best Practices• Handle unavailable or lost network connection• Limit permissions requested as much as possible• Optimal use of storage. Use the SD card if possible• Use standard GUI layouts• Efficient, fast, responsive• Multi thread slow time consuming operations• Save application data when state changes occur• Share data with apps by implementing content providers• Implement activities launchable from other apps• Utilize notification facilities, progress bars, flash screens

Design Considerations• Orientation changes• Varied screen sizes and resolutions• Operating system choice to reach a wide audience• Intuitive operation• Reason for continued use• Well-defined purpose• Multi user support• Upgrades/new features (without feature creep)• Multiple language and color support• Varied font sizes

Getting the product to market• Register for an Android Market account: market.android.com/publish/• Click: Setup Merchant Account to set up a Google Checkout• Adhere to Android application policy requirements

(www.android.com/market/terms/developer-content-policy.html)• Digitally sign (can be self-signed) and upload to the Android market (see

developer.android.com/guide/publishing/publishing.htm)• Price the application

– The average paid app price is $3.13 – 30% for Google; 57% are free.– In app advertising price per view– virtual products (Google retains 5%)– Limited free version, with paid version having full capabilities

• Market: social media, app review sites, advertising networks, etc..

Browsers• Preinstalled

– NetFront , Myriad, Explorer, Safari, Nokia, Sony, Obijo, Motorola, Symbian, Android, webOS, Blackberry, Samsung, MicroB

• User-installed– Opera Mobile, Opera Mini, Firefox (Fennec) for

Mobile, Chromium, UC, SkyFire, Bolt

• Webkit– Open source framework used by many browsers

Questions to Ask?• On which device(s) will our application run?• Should it run in a browser or as a native application?• Which language(s) should we use?

– HTML5/JavaScript, Objective C, Java ME, Flash, Silverlight, C#, Dalvik VM, Java FX

• Which cross-platform development framework should we use? Do they have their own API to learn?

• If JavaScript, which JavaScript libraries should we incorporate?

• How do we develop/debug?– Which emulators/simulators are available?– What development toolkits do we use?

This Class• Part 1: HTML5/JavaScript. Why?

– JavaScript supported on all popular smart phone and tablet devices– The popular browsers have good debugging facilities– There are extensive JavaScript frameworks and libraries that attempt to

facilitate application development and provide cross-platform compatibility– There are toolkits to translate from HTML5/JavaScript to native applications– Smaller learning curve for cross-platform development– Industry is moving in this direction (at least at the moment)

• Part 2: Native Applications on Android. Why?– Android is rapidly gaining market share– The Eclipse JDK/Android emulator provides good development tools– Android’s Java is not too difficult to learn and use– Familiarization with at least one mobile development platform is beneficial– HTML5/JavaScript must be tested/debugged on every possible browser

Popular JavaScript libraries/Frameworks

• Google We Toolkit - GWT (http://code.google.com/webtoolkit) Free toolkit, used by thousands of developers for complex web applications. Code in Java; deploy in JavaScript

• jQuery (http://jquery.com/) : JavaScript library that simplifies HTML document traversing, event handling, animating, and Ajax interactions

• Prototype (http://www.prototypejs.org/) and script.aculo.us (http://script.aculo.us/): Easy to use class-driven JavaScript framework that aims to ease development of dynamic web applications

• YUI (http://developer.yahoo.com/yui/ ): JavaScript and CSS utilities and controls for richly interactive web applications. Built by Yahoo

• Dojo (http://dojotoolkit.org): A toolkit, focusing on performance, for building desktop and mobile web experiences

• MooTools (http://www.mootools.net/): Object-Oriented JavaScript cross-browser framework for intermediate to advanced JavaScript developers

Mobile Frameworks• jQuery based

o jQuery Mobile (http://jquerymobile.com/): a Touch-Optimized Web Framework for Smart phones & Tablets.

o jQTouch (http://jqtouch.com/): jQuery plug-in that provides a native UI feel to iPhone-based web apps.

o M-Project (http://the-m-project.net/): framework to build mobile apps using HTML5 JavaScript, and JQuery that run on the iPhone, Android devices and many others.

• Sencha and Sencha Touch (http://www.sencha.com/): mobile builder for apps that feel native on iPhone, Android, and Blackberry, and other touch devices

• Titanium (http://www.appcelerator.com/products/ ): JavaScript interface that translates into mobile applications, which will perform just as if you had written them in Objective-C or Java.

Mobile Frameworks (cont.)• Phonegap (http://phonegap.com/) : Platform allowing native

application development in HTML/JavaScript for APIs and app store access

• Appmobi (http://www.appmobi.com/): Cross platform JavaScript bridge that allows apps access to device APIs on iOS and Android platforms

• NimbleKit (http://nimblekit.com ): Framework that allows development for Apple iOS devices using HTML and JavaScript

• XUI (http://xuijs.com/) Micro DOM library for HTML5 mobile web applications. Compatible with WebKit-based mobile browsers

• WebApp (http://webapp-net.com) light weight JavaScript framework with a full set components for advanced mobile applications.

• iUI (http://code.google.com/p/iui): JavaScript library, CSS, and images for advanced mobile web apps

• YUI (http://yuilibrary.com/) Yahoo developed framework with a large user base developing interactive Web applications.

JavaScript and other tools• Leading edge JavaScript Features

– Record, detect orientation, device vibration, sense gestures, etc.– ARIA standards: Accessible rich internet application– Transform features– Drag and Drop

• HTML templates (https://github.com/janl/mustache.js/) for eliminating embedded HTML in JavaScript

• CSS Reset (http://www.cssreset.com/)– Initialize presentation parameters for cross browser

compatibility

• NodeJs (http://nodejs.org/): Server side JavaScript

First PresentationTopics1. One of the top five

JavaScript libraries. Research how it works and how it is applicable to mobile development.

2. One of the JavaScript frameworks. Research how it works, the development environment, and how it is applicable to mobile development

Requirements

1. Clear description including an overview plus examples.

2. Short demo of a program using the technology

3. Audience: Understand computer terminology, html, and JavaScript but not this particular topic

4. Turn in your PowerPoint slides and a five to eight page well-written summary of the topic

5. Each team member must participate in the presentation