Things to download:• This PowerPoint• techandbehavior.com/flashcard/FlashcardWorkshop.pptx

• The app source code• techandbehavior.com/flashcard/App.zip

• The app (optional)• For iOS

• https://itunes.apple.com/app/id570008010?mt=8• For Android:

• https://play.google.com/store/apps/details?id=com.techandbehavior.flashcards

• As a webpage: • techandbehavior.com/flashcard/

Agenda• Why?• Tools of the Trade• Example App• Flashcard App• Hosting/App Stores

A very important question:

•Why?

Good Reasons:

• Interactivity•Reminders•Proximity•Navigation of Information•Communication

Bad Reasons:

• To replace us• To duplicate other materials

Tools of the Trade

Smartphone Market Share

The Mathew Effect in Market Share

• Android and iOS Dominate• Less incentive for developers

to make apps for other markets• Fewer Apps in other markets• Less reason to buy other

phones• Android and iOS Dominate

Operating Systems are like Languages

IOS Android

IOS• Objective C (Free)• X-Code (Free)• *need a mac with OS 10 or higher

• iOS Developer Program ($99/Year)• Must use Developer Certificate in Testing• Submission to App Store• Apple gets a cut of all sales and subscriptions

Android• Java (Free)• Eclipse (Free)• Can test apps without account• Submit to Google Play (One time $25 fee, instantaneous

publishing)• Google Play gets a cut of all sales and subscriptions

Websites are Like Interpreters

HTML5• Free (but requires hosting)• No software needed, but it helps• Able to update within seconds• No curated market (both good and bad)• Able to work offline (if bookmarked)• No fees attached• Able to access many features on newer devices• Sandboxed• No Fees attached• Public doesn’t understand it

How to learn• www.codecademy.com• Wonderful (and free) tutorials

• Lynda• University Subscription

• W3schools.com• Brief but good tutorials (also free)

• Playing around!

jQuery Mobile

• jQuery • A (free) javascript library that makes things

easier• jQuery Mobile• A (free) jquery library that makes pretty mobile

webpages with very little effort

Native Wrappers• Phonegap • Titanium• appMobi• Create native apps using HTML5• Provide API’s (Hooks to get out of the sandbox)• Work across platforms (mostly)• Can be submitted to app stores

Limitations of Native Wrappers• Integration with SDK’s (like Google Analytics)• Efficiency• Memory Leaks/Garbage Collection Problems• Difficult to orchestrate large projects• Poor Documentation

Example App

Kitten Therapy

Get jQuery Mobile• Go to http://jquerymobile.com• Download .zip of Latest Version

Get jQuery Mobile

Customize Code

Flashcard App

• Go to www.techandbehavior.com/flashcard/App.zip• Open Index.html with a html editor or text

program (not Word)

Clear out the vocab

• Find var wordbank = new Array (""); ----keep it• Delete everything that starts with wordbank[X] =

new Array()

Make your own vocabulary

• Open wordbank.xlsx• Locate the Wordbank Tab• Replace the Vocabulary• Section is the group of cards (for the menu)• Word• Response• Page

Create the Code• Remember what row you stopped on• Navigate to the Interum tab• Copy last existing cell if your word list is longer• Delete extra cells if it is shorter

• Navigate to Code Tab• Copy last existing cell if your word list is longer• Delete extra cells if it is shorter

Insert the code

• Copy the code from the code tab of the excel spread-sheet• Paste it after var wordbank = new Array ("");

Customize the App• Custom Themes (free)• http://jquerymobile.com/themeroller/

• Find and replace text• Create new pages or features

Hosting/App Store

Phonegap Build• Go to build.phonegap.com• Login or register• Zip your folder• Upload it to their site• Customize the app:• Edit the config.xml file

• https://build.phonegap.com/docs/config-xml• Replace the Images

• https://github.com/phonegap/phonegap/wiki/App-Splash-Screen-Sizes

App store submission• Get the certificates• Android

• https://build.phonegap.com/docs/android-signing• iOS

• https://build.phonegap.com/docs/ios-builds

• Submit to the stores• Android

• play.google.com/apps/publish/• iOS

Carmen• Zip folder• In Carmen, click content manage files • Upload zipped file• Unzip the file• On a page in content, click “insert quicklink” • Select “course file”• Navigate to index.html• Select “whole window”

Contact• Ryan Hansen• 316-409-0804• Hansen.282@osu.edu