Mobile Applications
Assumption: We have an idea for a hot new mobile application
General Considerations
• 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 quickly
Example: Microsoft versus Apple in the 1980s
– Getting to the public to fill a need before standards are established
Example: Early browser war between Netscape and Explorer
• Bottom line: Development is expensive; mistakes can be disastrous
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?
• Key Entry
Features
– 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 Presentation
Topics
1. 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