ABTech DME Program Website

• Home
• Lectures
• Video Tutorials
• DME Samples
• Resources and Links
• Workshops

Become a fan on facebook. Share projects, ideas, events... and even technical issues! Follow on Twitter.

Mobile Development Primer

What platforms are out there?

1. Web Use: http://gs.statcounter.com/#mobile_os-ww-monthly-201004-201104
2. Sales: http://blog.seattlepi.com/microsoft/chart-mobile-os-market-shares/

So... iOS, Android (or Symbian)? It's chaotic... and it will be for some time - http://www.techrepublic.com/blog/hiner/google-android-vs-apple-ios-handicapping-the-2011-death-match/7411

Let's not get into it too much... it's your choice.

What makes mobile SO different?

1. Rate of growth

You probably know this already, but mobile device use is exploding!

"Research indicates that mobile devices are being adopted at a rate of 3-4 times that of PCs globally." - http://www.firstbestordifferent.com/blog/?p=1204

Factors that drive mobile growth - http://www.internetnews.com/stats/article.php/3763836/5-Factors-Driving-Mobile-Device-Growth.htm

---------------------

2. Form Factor

Size/Resolution matters... http://en.wikipedia.org/wiki/Mobile_phone_form_factors

-------------------------

Touch Events and Gestures

1. http://www.html5rocks.com/mobile/touch.html

---------------------------

3. Design Patterns

1. http://mobile-patterns.com/
2. http://uxmovement.com/resources/best-collection-of-mobile-user-interface-patterns

The topics for today... ways to development for mobile devices:

1. Native Development
2. Websites optimized for Mobile Devices
3. Javascript APIs for mobile devices
4. "Web Apps" - with PhoneGap
5. Javascript application development
6. Cross-platform development tools
7. Flash and Flex (vs HTML5 too)

Native Development

Most robust, but most complicated. Requires an understanding of advanced programming concepts and a pretty complicated IDE.

1. Objective-C (typically on Mac only with xCode ... GNUstep for pc)
2. Java (eclipse - works on multiple OS)

Sample code - http://javadevsoniphone.blogspot.com/2009/03/java-vs-objective-c.html

WHOA!... backup, let's make this easier...

Google App Inventor
http://appinventor.googlelabs.com/about/

Easy learning curve... but limited in capability? Requires understanding programming logic... also good to teach it.

To be fair... iOS has a lots of online tools... however, here is how some of them work. http://www.youtube.com/user/swebdevelopment#p/u/14/LIAR-VmN4qY

Websites optimized for Mobile Devices

1. HTML5... what is it? One of my fav resources - http://diveintohtml5.org
2. http://www.html5rocks.com/en/mobile/mobifying.html

1. HTML5 markup - (semantic structure, media tags, more.. demos )
2. CSS3 - Enables new features!
3. LOTS of Javascript. (Truth be told... a lot of sites claiming to be HTML5 are really simple HTML5 markup with jQuery used.)

Do we HAVE to use HTML5? No, but why not? Lots of mobile use of websites is just a simple webpage optimized for mobile devices.

Should we use CSS3 or HTML5 (for things like buttons)?

Detecting your browser

1. Simple example - http://websmx.com/
2. With Javascript - http://www.w3schools.com/js/js_browser.asp
3. With php - http://chrisschuld.com/projects/browser-php-detecting-a-users-browser-from-php/
4. With JQuery - http://perishablepress.com/press/2009/12/13/simple-browser-detection/
5. Ipad - http://davidwalsh.name/detect-ipad
6. http://www.1stwebdesigner.com/design/snippets-html5-boilerplate/

Detecting your viewport size

Probably a better practice than detecting the user agent... just update the CSS based upon the size/orientation of the device.

Media Queries

1. http://reference.sitepoint.com/css/mediaqueries
2. http://www.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
3. http://webdesignerwall.com/tutorials/adaptive-mobile-design-with-css3-media-queries
4. Specifically for iphone/iPad - http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/
5. iPad orientation - http://matthewjamestaylor.com/blog/ipad-layout-with-landscape-portrait-modes
6. https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

Here is the basic way to use media queries. This code goes in the <head> section.

<!-- first... must have meta for viewport -->
<meta name="viewport" content="width=device-width" />

<!-- you can do other things with this... -->
<meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" />

<! typical use... code from Dreamweaver ->
<link href="phone.css" rel="stylesheet" type="text/css" media="only screen and (max-width:320px)" />
<link href="tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width:321px) and (max-width:768px)" />
<link href="desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:769px)" />

You can also use @media:

<!-- another way... in the CSS file -->
@media only screen and (max-width : 800px) {
/* CSS here */
}
@media only screen and (min-width : 801px) {
/* CSS here */
}

 Media Query samples:

1. Change CSS file - http://websmx.com/
2. Use @media: sample file
3. Pro version - http://webdesignerwall.com/demo/adaptive-design/final.html

-----------------

CSS3 - Styling for Mobile

BTW... most mobile browsers are more CSS3 capable than desktop browsers. Check out your browser's capabilities with http://tools.css3.info/selectors-test/test.html.

1. http://net.tutsplus.com/tutorials/html-css-techniques/flexible-mobile-first-layouts-with-css3/
2. http://net.tutsplus.com/tutorials/html-css-techniques/10-css3-properties-you-need-to-be-familiar-with/
3. http://www.westciv.com/iphonetests/
4. http://www.smashingmagazine.com/2011/05/11/the-future-of-css-experimental-css-properties/

CSS3 Transitions, Transforms & Animations

1. CSS3 Transitions - http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/
2. Samples: http://css3.bradshawenterprises.com/
3. 47 Amzing CSS3 Animation Demos

CMS Systems have plugins

1. Wordpress - http://wordpress.org/extend/plugins/wordpress-mobile-edition/, 
2. GetSimple - http://get-simple.info/extend/plugin/simple-mobile-theme-changer/21/

Let's try it out... 

1. Play with CSS3 - http://css3.mikeplate.com/
2. Create CSS3 - http://www.css3maker.com/
3. Play with HTML5 - http://rendera.heroku.com/
4. CSS Gradients - http://www.colorzilla.com/gradient-editor/

Javascript APIs for mobile devices

There are a lot of resources here... for example, just for mapping and geolocation:

1. Google Maps API - http://code.google.com/apis/maps/documentation/javascript/
2. ArcGIS - http://help.arcgis.com/en/webapi/javascript/arcgis/index.html
3. DeCarta - http://developer.decarta.com/docs/read/Home
4. iPhone - http://blog.bemoko.com/2009/06/17/iphone-30-geolocation-javascript-api/

UI Design/Interaction for Mobile

1. jQuery mobile... http://jquerymobile.com/ (demos)
2. SenchaTouch... http://www.sencha.com/products/touch/ (demos)
3. JQTouch... http://jqtouch.com/
4. iUI (iOS)... http://code.google.com/p/iui/wiki/Introduction
5. XUI - http://xuijs.com/

Who will win?... JQuery Mobile and Dreamweaver CS5.5 (video)

"Web Apps" - Mobile websites "wrapped" as a Native App

AKA... creating an "app" by "wrapping" a local/remote website with a native webview. The idea is that it will look and act like a native app... but it's a website.

Local Data! - Using HTML5 localStorage or SQLlite DB, JSON or XML... you can save data directly to the phone... making the app more responsive and rely less on constant internet access.

www.phonegap.com - most popular tool.

1. Creating started with PhoneGap and Eclipse.
2. Creating web apps with Dreamweaver CS 5.5 (video)
3. Also... MobiOne. http://www.genuitec.com/mobile/features.html

However... what is Apple up to? "Apple has issued a statement to The Register confirming reports and rumors stating that iOS web apps and embedded web views in iOS applications are throttled and run twice as slow as Safari." (link)

Android vs Apple browser tests - Spoiler... Android wins.

Wait a sec!

So... should it be a "web app" or a mobile site? Bizreport says 2000% increase in mobile ready websites. Actually, the mobi graph looks like this:

The verdict: probably a mobile website... publish once for ALL devices. However, the "app: ecosystem is still strong.

Javascript application development

1. Titanium Appcelerator - http://www.appcelerator.com/ (most popular)
2. Rhomobile - http://rhomobile.com/

PhoneGap vs Appcelerator

Cross-platform development tools

There are PLENTY...

1. AirPlay - http://airplaysdk.com/
2. App Mobi - http://www.appmobi.com/
3. GameSalad - http://gamesalad.com/
4. Mosync - http://www.mosync.com/
5. Unity 3D - http://unity3d.com/
6. **Corona SDK - http://www.anscamobile.com/corona/

Benefits of Corona... awesome features, fast, free to use, great performance and easy language (LUA). Check out the code comparison samples. ;-)

Corona vs Flash - http://www.anscamobile.com/corona/comparison/flash/side-by-side/

Using Flash/Air to create apps

1. Android - (in browser or as app.)
2. Blackberry Playbook (UI based on Air)
3. iOS - (compiles to native app)
   1. Apple lifts restrictions... http://3dg.me/story/flash-games-comes-to-ios-iphone-ipad-apple-lifts-restrictions-on-development-tools
   2. Air on iOS - http://www.flash-3d.net/2011/03/air-2-6-game-development/

Flash vs Flex (Flash builder)

1. Flash - http://www.paultrani.com/blog/index.php/2010/11/tutorial-creating-mobile-apps-using-flash-cs5/
2. Flash builder - http://success.adobe.com/en/na/sem/products/flashbuildermobile.html?sdid=IQQBN&skwcid=TC|22195|mobile%20development||S|b|8594772403
3. Neon Guy game - https://www.mochimedia.com/community/forum/topic/mobile-platform-game-with-flash-cs5