Session 1: One of the most common techniques for improving the mobile web application user experience is to show/hide the universal navigation with a simple menu, or “hamburger” icon. This is a very simple technique that uses a combination of CSS3 media queries and JavaScript. In today’s demo we’ll look at this technique as well as explore more examples of how to apply jQuery Mobile features to our work in progress.

Session 2: After our Google-Fu discussion and mockup critiques let’s continue demonstrations using jQuery Mobile. Specifically today it will be important to have a functional, responsive navigation system in place. In order to do this we will have significant changes to the CSS across our media query breakpoints. A responsive slide out panel might be the best way to achieve this.

Mobile Web Application Milestone #1
Due: Week 4, Session 2
Be prepared for the milestone by implementing a fully function and responsive navigation system into your template work in progress. Also make sure you are able to illustrate this functionality by having placeholder content in place.
1. Have a hideable and responsive navigation system in place
2. Illustrate how your template responds at various breakpoints
3. Have placeholder content on a minimum of three pages or content areas

Session 1: One of the most important considerations for Mobile UX is form design. Often standard checkboxes, radio buttons, select lists, and buttons are too small to effectively tap. Furthermore the form layout may not be conducive to touch interaction when mouse or trackpad pointers are the basis of the design scheme. Today we will look at the difference between laying out forms for mobile devices versus laptop or desktop machines. Here’s a few articles that explain some of the important factors involved in mobile form interaction.

Form design for usability across desktop and mobile
How to Optimize Your Checkout for Mobile Devices
10 Ways Mobile Sites Are Different from Desktop Web Sites

jQuery Mobile includes a variety of interface objects optimized for mobile. In today’s demo we’ll look at creating a simple web form that takes advantage of these tools.

Session 2: After the Google Fu presentations we will have studio time in order for each of you to show me what you have prepared for your project milestones assigned during week 3. With the remaining time I will demonstrate one more features in jQuery Mobile that we have not yet reviewed.

Session 1: Let’s begin by discussing the final project for the class. We will be developing a native or hybrid mobile application for either iOS, Android, or both platforms. In contrast to our Mobile Web App project the native / hybrid application will open directly on the mobile device without needing to run within a web browser. After discussing the final project requirements we will have studio time in order to prepare for our Mobile Web App presentations on session 2.

Project 2: Native / Hybrid Mobile Device Application
Due: Session 2, Week 11 (25 points)

Description:
Develop a native (iOS SDK, Android SDK, Processing for Android) or hybrid (PhoneGap, IONIC, Appcelerator Titanium, et al) mobile application. Prepare for your project by writing a design document that includes a title page, project summary, feature list, and wireframes that illustrate the UI and functionality of the app. Implement a variety of media (images, video, sound, interaction) within the app feature set. The completed project must be demonstrated on a mobile device in class on session 2 of week 11 during presentations.

Requirements:
1. Start by writing the design document for concept approval by session 2 of week 6
2. The design document must include a title page, project summary, and feature list
3. Include wireframes that illustrate the UI and functionality of the app
4. Develop the native / hybrid application on a mobile device (iOS or Android)
5. Include a variety of features and media that support the mobile app concept
6. Demonstrate the functional application on your mobile device on session 2 of week 11

Points Breakdown:
3 points are awarded for a clear and concise design document and concept approval
3 points are awarded for participating in scheduled milestones during development
5 points are awarded for successfully implementing unique features and media into the app
10 points are awarded for the overall design, content, and feature set of the mobile web
4 points are awarded for the clarity of your mobile app demonstration

Relevant Resources:
iOS SDK
Android SDK
Processing for Android
PhoneGap
IONIC
Appcelerator Titanium

Session 2: Mobile Web Application presentations.

Session 1: For our first of many native mobile application demonstrations we will be looking at Processing for Android. Although this mode for Processing is not as widely used as native SDKs and hybrid frameworks, it is an easy-to-learn and flexible technique for developing sophisticated, native, mobile applications for the Android platform. The main advantage of this approach is that it is not necessary to learn Java for Android. Processing is a much easier language to learn and it can also be used to create desktop applications through the Java mode and web applications through the JavaScript mode. Here are some of the steps and resources that will be useful for setting up the Processing for Android environment.

1. Download and install the Processing IDE
2. Setup the Android mode for Processing
   • Download the Android mode here
   • Unzip the file
   • Copy the “AndroidMode” folder to “Documents/Processing/modes”
3. Install the Android SDK
4. Use the Android SDK Manager to install the packages for the Android OSes necessary
5. Use the Android AVD Manager to create one or more Android Virtual Devices

Session 2: Today Jeffrey Isham, Associate Technical Director at Olson will be our guest speaker to discuss PhoneGap, GSAP, other technologies, and the mobile application development life cycle.

Relevant Resources:
PhoneGap Android Platform Guide
PhoneGap iOS Platform Guide

Session 1: This week I will be demonstrating the process of converting a simple jQuery Mobile web application to a bundled hybrid app using the Cordova/PhoneGap. Adobe provides an online service to make this process easier, but we will start by using the CLI (command-line-interface). If you plan to use this technique for your final project you may prefer to use Adobe PhoneGap Build. This service allows for one free private app and unlimited Open Sources apps hosted on a public GitHub repository.

Steps to install PhoneGap and build a project using the CLI:

1. Make sure you have properly installed the Android SDK and included it in your PATH

export ANDROID_HOME=${PATH}:/Users/john/android-sdk-macosx
export PATH=${PATH}:/Users/john/android-sdk-macosx/tools:
export PATH=${PATH}:/Users/john/android-sdk-macosx/platform-tools:

2. Follow steps to install PhoneGap via the command line here.
3. Follow the steps on the PhoneGap Android Platform Guide.
4. If you get the error: Failed to run “ant -version”, make sure you have “ant” installed and added to your PATH, run the following to install Apache ant:

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew install ant

5. Once the project has been successfully built text it on an emulator or a device

Session 2: Today we will continue working on getting your environments setup for mobile app development.

Session 1: Today let’s take a look at using PhoneGap to create iOS applications. In addition we may review the process of building PhoneGap apps for Android. I will also explain new JavaScript contained in my demonstration app.

Session 2: In addition to more PhoneGap demonstrations, please be prepared to show your work-in-progress on the final project. This might include tutorials that your have followed, tests that you have completed, and/or content or documentation that you have produced so far.

Session 1: In today’s demo I will address some of the questions from last week. This may include one or more of the following topics

1. Image Capture
2. Server Side Functions with PhoneGap (using AJAX)
3. Saving In-App Progress or Preferences (Local Storage)
4. Share Buttons
5. Push notifications

Here’s a few links to related resources.
Capturing Camera Data without PhoneGap
PhoneGap Local Storage Documentation
Building a Native Mobile App with Cordova and jQuery Mobile

Session 2: I will not be in class today. Please use the class period as studio time and be prepared to share your findings next week. Thanks!

Session 1: Most of this week will involve studio time to get each of you prepared for our presentations next week. Here are some resources that might help you will specific functionality that you intend to include in your projects:

jQuery Share Plugin
More jQuery Share Buttons
PhoneGap Push Notification Tutorial
Push Notification Sample Application

Session 2: Today we will have in-class progress reports in addition to ample studio time to prepare for your final project presentations next week.

Session 1: Today will be the last session of studio time available. Please consult with me for any last minutes issues you may have with your Final Mobile Application projects.

Session 2: Final presentations.