Mobile App Development with HTML5

inexpensivebossesMobile - Wireless

Nov 12, 2013 (3 years and 1 month ago)

54 views

Mobile App Development with HTML5

Danny Harvey, Dr. Robert Beck, Dr. Homer Hruby, Jeremy Streich

College of Letters and Science IT Office

Mobile

devices

enjoy

a

significant

and

growing

presence

on

college

campuses
.

As

web

users,

especially

college

students,

increasingly

rely

on

mobile

devices,

mobile

may

well

surpass

desktop

access

in

the

near

future
.

Higher

education

must

recognize

this

trend,

start

to

build

mobile

applications,

and

adapt

content

to

the

mobile

medium
.

Many

mobile

application

development

solutions

are

device
-
specific,

and

require

learning

a

different

programming

language

for

each

operating

system
.

In

order

to

implement

these

solutions,

many

person
-
hours

are

needed

to

focus

on

each

mobile

operating

system,

or

solutions

must

be

outsourced

to

third
-
party

vendors
.

For

organizations

with

limited

resources,

these

solutions

are

undesirable
.

The

Web

Development

Group

in

the

Letters

and

Science

IT

Office

has

been

developing

mobile

apps

in

ways

that

leverage

our

existing

web

expertise
.

We

have

been

exploring

two

approaches
:

HTML
5

web

apps
;

and

Appcelerator,

which

allows

code

written

in

JavaScript

to

be

exported

to

native

code
.

INTRODUCTION

In

order

to

make

some

preliminary

decisions

with

regard

to

mobile

development,

we

used

information

about

mobile

devices

obtained

from

Google

Analytics

for

our

existing

web

site

during

September

2012
.

The

percentage

of

mobile

traffic

to

the

site

was

10
.
5
%

of

total

visits
.

Figure

1

shows

the

breakdown

of

mobile

devices

visiting

the

College

of

Letters

and

Science

main

web

page

by

client

operating

system
.

The

great

majority

of

mobile

visitors

(>
97
%
)

are

iOS

and

Android
.

The

mobile

traffic

broken

down

by

device

type

shows

that

77
%

was

from

smartphones

and

23
%

was

from

tablets
.

The

two

most

prevalent

screen

resolutions

used

by

mobile

visitors

were

320
x
480

and

768
x
1024
.


DEVICE STATISTICS

For

the

user

interface,

we

have

incorporated

recommendations

from

the

UWM

Web

Site

Standards

for

colors,

images,

and

other

styling
.

We

have

used

CSS
3

for

sliding

animation

to

transition

between

views
.

We

are

currently

utilizing

navigation

lists

(Figure

2
a)

and

detail

pages

(Figure

2
b)

in

our

app
.

We

are

also

using

web

forms

that

are

optimized

for

mobile

(Figures

3
a

&

b)
.

We

are

considering

including

a

home

screen

with

icons

in

a

subsequent

version

of

the

app
.


CONTEXT

App Development


For

web

apps,

we

are

using

HTML
5
,

Javascript

and

CSS
3
.

These

apps

are

located

on

a

LAMP

server,

so

we

are

using

PHP

for

server
-
side

scripting

to

dynamically

generate

content,

communicate

with

local

databases,

and

interact

with

API’s

using

xPath
.

For

Android

Hybrid

apps,

we

are

using

the

Java

Development

Kit

(JDK),

Android

Development

Tools,

and

the

Android

SDK

in

the

context

of

Eclipse
.

For

native

apps,

we

are

working

with

Appcelerator

which

automatically

generates

native

code

from

Javascript
.

We

are

using

several

data

sources

to

populate

the

content

of

this

app
.

The

external

API’s

we

are

using

include

Google

Calendar,

YouTube,

Google

Maps,

Facebook,

and

Twitter
.

We

are

also

creating

and

maintaining

local

databases
.




Mobile Optimization: Meta Tags for HTML 5


<meta name="apple
-
mobile
-
web
-
app
-
capable" content="yes" />

<meta name="apple
-
mobile
-
web
-
app
-
status
-
bar
-
style" content="black" />

<meta name="viewport" content="user
-
scalable=yes, width=320, height=480,
initial
-
scale=1.0, maximum
-
scale=1.6"/>


<link rel="apple
-
touch
-
icon" href="images/uwm2.png"/>

<link rel="apple
-
touch
-
icon" sizes="72x72" href="images/uwm2
-
iPad.png" />

<link rel="apple
-
touch
-
icon" sizes="114x114" href="images/uwm2
-
iPhone4.png" />


<link rel="apple
-
touch
-
startup
-
image" href="images/default2.png" />



App Deployment


HTML5 Apps Module on LAMP Web Server


Android Hybrid Apps

Create Native Android wrapper for HTML5 app

Distributed in Google Play


Native Apps created in Appcelerator will be deployed in App Stores





TECHNOLOGY

photo or chart

Figure 1. Mobile Visits by Operating System.

UW

Milwaukee

already

features

a

university
-
wide

native

app

for

both

iOS

and

Android

devices
.

Our

college
-
level

group

does

not

wish

to

duplicate

the

existing

campus

app’s

functionality
.


Accordingly,

we

must

decide

not

only

what

college
-
specific

content

should

be

developed,

but

also

which

content

is

appropriate

for

integration

into

the

university
-
wide

app,

and

which

content

is

more

appropriately

delivered

in

a

stand
-
alone,

college
-
specific

app
.



UWM

is

beginning

to

embrace

“responsive

design”

for

its

web

presence
.

This

trend

leads

us

to

consider

the

respective

functions

for

mobile

web

and

mobile

apps
.

Apps

are

especially

well

suited

to

the

performance

of

specific

tasks
.


Mobile

web

with

full

content

is

good

for

allowing

users

to

browse

content,

learn,

and

determine

what

they

may

want

to

do
.

Who

are

the

respective

audiences

for

each

modality?

How

can

each

approach

be

developed

so

that

they

are

mutually

complementary?

We

are

also

developing

processes

to

determine

what

apps

and

content

will

be

mobile
-
only
.

One

crucial

consideration

here

is

leveraging

mobile
-
specific

technologies

such

as

geolocation,

push

notifications,

and

hardware

like

cameras

and

accelerometers
.

Incorporating

these

features

will

be

useful

in

apps

that

are

designed

to

enhance

location
-
specific

activities
.


Finally,

the

College

of

Letters

and

Science

includes

22

academic

departments
.

When

we

begin

mobile

app

development

at

the

departmental

and

at

smaller

organizational

levels,

we

need

to

determine

how

we

can

most

effectively

organize,

develop,

and

deploy

that

content
.

Once

we

have

initial

solutions

in

place,

we

plan

to

use

site

and

app

analytics

to

better

answer

these

questions
.

DESIGN

The

content

we

are

currently

considering

for

a

college

mobile

app

includes
:




drill down menus for departments and degree programs that provide basic
contact and programmatic information




a college
-
specific public events calendar



a campus map that integrates with the previous two modules



forms for administrative purposes such as Declaration of Major and Independent
Study proposals



an events calendar for faculty and staff specific to administrative deadlines and
meetings



links to the UWM learning management and course registration systems



and the College’s social media (Facebook, Twitter, and YouTube) feeds


Figure 2. Screen shots showing navigation list and detail pages.

Figure 3 a & b. Mobile optimized web forms.

CONTENT

iOS

68.29%

Android

29.21%

BlackBerry

1.31%

Other

1.19%