Introduction to Mobile apps for the Non-Programmer

Elizabeth Jean Brumfield, MLIS, CAS, ABD

713-790-7282

ejbrumfield@pvamu.edu

Why Apps—Why Now—Why LibrariesMobile apps are now used more than desktops, they have a great impact on education because students are connected to systems and information more.

Librarians are interested in providing information, in all forms.

Librarians are there to make your life easier.

Most universities have mobile apps which may include the library but not library functions.

http://musingsaboutlibrarianship.blogspot.com/2010/09/library-mobile-apps-vs-web-apps-some.html#.VNYsqE90xdg

Interest Level

1. Curious about the topic

2. More than curious, want to learn basics

3. Want to learn basics and experiment with creating an “easy” project

4. Very interested but don’t want to invest a huge amount of time in a project

5. Willing to invest whatever time is necessary to learn everything and create 1 or more projects

AgendaPart 1. Basics—Definitions, Comparisons

Part 2. Creating Your Own App (Guidelines)

Part 3. Create Your Own App

Part 4. Using HTML 5

Objective

Provide an introduction to mobile apps Provide examples Participants will start their own mobile app Participants will leave motivated to explore more mobile app development options

Perceptions and challenges• Mobile requires a certain directed approach that is not required with desktop

application development.

• Designing mobile apps require a different thinking than designing websites.

• Mobile users still expect everything to work flawlessly on whatever random device they may be using. This perspective is flawed.

• Mobile app require an awareness of the technical opportunities and challenges.

• Designing good educational applications requires collaboration between educators and tech professionals.

• Knowledge of how people learn (key components include interaction and feedback).

PurposeDesign

People

Systems/Technical requirements

People

Definitions• Webpage—Hypertext document—desktop viewing

• Mobile app—software application--small, wireless computing devices, such as smartphones and tablets, rather than desktop or laptop computers.

• Mobile web or Mobile web app—website created specifically for mobile devices –accessible through mobile browsers, no download or installation required, term “mobile app” sometimes used interchangeably--the url is an indication it is a mobile web app as well as the markup language source code.

• Native app—An executable program coded in the machine language of the hardware platform it is running in. A native application has been compiled into the machine language of that CPU (central processing unit—brains of the computer).

• Template app—Pre-fabricated templates or shells (commonly outsourced from Indian and other overseas template builders) as the basic structure on top of which to import and ‘cut and paste’ designs.

Programming:• Android applications are written in the Java programming language• IOS in Apple—Objective-C• Blackberry—Java• Windows—C#, Basic 4ppc• Web codes can also be incorporated

Native App-Programming

Markup Languages (language of the web):HTML (1-5), XML, XHTML,A markup language is a language that annotates text so that the computer can manipulate the text

Mobile Web App--

Bottom Line!

• To develop a native app you need to know programming (Java, etc) and should know markup languages (HTML, XHTML-MP, etc.)

• Web apps require knowledge of markup languages (even if just the basic HTML)

• Both Native apps and Web apps require a substantial amount of time investment in the development

• Native apps require a financial investment getting into the marketplace

Template App--

Pre-programmed—No programming experienced neededNo knowledge of HTML needed

Mobile App

Mobile Web App

Template App

Questions—What Kind of Project Do You Want to Do?

1. What do you want your app to do?

2. How much time do you want to spend creating it?

3. Do you want it to be used publicly or for your own purposes?

4. What type of financial investment are you willing to make?

Example: Mobile app (IOS) also available Androidhttps://play.google.com/store/apps/details?id=com.pvam.library.android

Native mobile app & web app

Mobile web (app) http://hbcu2.ecdsweb.org/

Example Mobile web template apphttp://my.yapp.us/PVHOMECOMING

PVAMU Homecoming AppTemplate App

Part 2—Creating Your Own AppDesigning

Creating your mobile app—General Guidelines(PTSD)

•Purpose/People

• Travel/Mobility

• Systems/Technical requirements

•Design (pictures, colors, text, pages)

Simplicity

•Aesthetic yet practical

• Small screen-no room for overblown design elements, navigation, text

•Bandwidth-some pay by the minute-reduction in heavy elements like pictures, videos, audio

• Information-fast-utilitarian not always entertainment

Design—ADA CompliantMobile Apps must comply with same ADA laws as websites: Twenty-First Century Communications and Video Accessibility Act (CVAA), Section 508, or the Americans with Disabilities Act (ADA)

Example:

Text, Sound, Color

• Deuteranope (Deutan)--a form of red/green color deficit

• Protanope (Protan)--another form of red/green color deficit

• Tritanope (Tritan)--a blue/yellow deficit- very rare

Colorblind Scale

Test your app colors

Websites:

• http://www.vischeck.com/vischeck/vischeckImage.php

• http://colorbrewer2.org/

http://www.interactiveaccessibility.com/blog/ios-and-android-mobile-accessibility#.VODlRk90xdg

Test your mobile app for ADA

Part 3—Creating Your AppTemplate App

Part 4—Using HTML5—Creating Web Apps(To be continued)

Developing Web Apps with HTML (for iPhones)

• Draft a concept of what you want it to include and look like

• Learn the language(s), HTML, Java script, CSS, WCSS

• Get a text editor

• Install a simulator

• Register as a developer (IOS Dev Center)

• Pay Developer fees and apply to Apple for registration of your app

• Market your app

Learning the Language

A markup language is a language that annotates text so that the computer can manipulate the text.

Most markup languages are human readable because the annotations are written in a way to distinguish them from the text.

For example, with HTML, XML, and XHTML, the markup tags are < and >. Any text that appears within one of those characters is considered part of the markup language and not part of the annotated text.

Example

Put it all together HTML Example

My App

This is what HTML looks like!

Quiz

1. What makes an app native?

2. What are the principles of app design?

3. What is one difference between template apps and native apps?

4. <!DOCTYPE html> indicates what?

5. CSS allows you to do what?

Thank YouElizabeth Jean Brumfield

Prairie View A&M University—NWHC

9449 Grant Road

Houston, TX 77070

ejbrumfield@pvamu.edu