GameTech 2012 March 28-30, 2012Orlando, FLUsing the jQuery Mobile Framework for Mobile Content Development

miststizzaΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 10 μήνες)

92 εμφανίσεις

GameTech 2012 Tutorial Workbook Guide


1



GameTech

2012

March 28
-
30
, 2012

Orlando, FL

Using the jQuery Mobile Framework for Mobile Content Development








JASON HAAG

MOBILE LEARNING LEAD & RESEARCH ANALYST

ADVANCED
DISTRIBUTED LEARNING (ADL) INITIATIVE

JASON.HAAG.CTR@ADLNET.GOV

HTTP://WWW.ADLNET.GOV

TWITTER: @J_HAAG

LINKED IN:
http://www.linkedin.com/in/jasonhaag
















GameTech 2012 Tutorial Workbook Guide


2



















































GameTech 2012 Tutorial Workbook Guide


3














Using the jQuery Mobile Framework for Mobile Content Development


Description

E
-
Learning developers can now build e
-
learning content and
mobile apps for touch devices
such as iPhone, iPad, Android, and BlackBerry from a single code base. This can be
accomplished with the recent release of Dreamweaver CS5.5 and its support for the jQuery
Mobile Framework. This introductory tutorial shows you

how. Learn the best way to apply a
variety of interface components through a series of hands
-
on exercises. By the end of the
tutorial, you will have built a complete working mobile application that can be deployed to
multiple screens sizes

and on multiple

devices

(such as desktop, tablet, and mobile devices).
This can be done by using semantic HTML5 code so you don't have to rebuild everything
for different platforms. In addition, you will briefly learn the process for optionally
packaging your mobile cont
ent as an application for deployment to app stores. This tutorial
provides HTML5, CSS3, and JavaScript code examples; screen shots; and step
-
by
-
step
guidance to help you build a complete working app using Dreamweaver CS5.5.



Learning
Objectives








-
Work with jQuery Mobile components, form elements, list views, and themes inside of
Dreamweaver CS5.5


-
Incorporate responsive design techniques into your project to support images that
will scale for desktop, tablets, and mobile devices


-
Build a singl
e project for a variety of platforms and browsers, including iOS, Android,
BlackBerry, Firefox, webOS, and Internet Explorer













How to Create mLearning Content and Apps Using Dreamweaver CS5.5

GameTech 2012 Tutorial Workbook Guide


4

I.

Introduction

This hands
-
on
exercise

will provide you with an opportunity to learn how to create
content
that will render
in any web browser, but m
ore
importantly
it will allow you to create consistent mobile content
and apps
that can be deployed to any smartphone platform
. This content will

leverage the jQuery Mobile framework
which is now included as a component in Adobe Dreamweaver CS5.5.

We will only be
covering some

of the
introductory aspects of using Dreamweaver with the jQuery Mobile Framework.
But first

we’ll briefly
discuss the fol
lowing:




Mobile App Development: Current Landscape

& Challenges



What is
jQuery
? What is jQuery

Mobile?



What is progressive enhancement and what does this mean for mobile content?



What is PhoneGap?

Configuration



First, let’s set up the Dreamweaver workspac
e for this exercise.



Start or launch the Dreamweaver CS5.5 software application on your computer. Click the Windows
Logo Start Button > All Programs > Adobe Dreamweaver CS5.5



Wait for Dreamweaver to finish loading.



From the menu bar, click Window > Work
space Layout > App Developer

Plus



The workspace layout should look similar to the screen capture below:





II.

Exercise

1.

Set up a local site in Dreamweaver

2.

Create new page from mobile template

GameTech 2012 Tutorial Workbook Guide


5

3.

Create
content pages

a.

Anatomy of a page in jQM

b.

Create the home screen menu

c.

Create “mLearning Definitions” page

4.

Page

transitions

5.

Theming pages

6.

OPTIONAL ACTIVITY:
Create the second page “Responsive
Images


a.

Watch the video on media queries in Dreamweaver CS5.5

b.

Apply media query style sheet
s

using Dream
weaver

c.

Link to the second page from the home screen of the app


Exercise Steps

1.

From the Menubar, click “Site > New Site.” For the purpose of our workshop, we will be testing
everything locally on your machine and won’t be uploading any of the content to a
web server at this time.
So enter “
my app
” for the site name and “
app
” as the local

site folder. Then click “Save” and then “Done.”





2.

Click File > New… >

Page from Sample. Then highlight the folder named “Mobile Starters” and
choose the jQuery Mobile (Local) option.
Briefly

explain the differences between these options (CDN vs.
Local). Then click “Create”.



GameTech 2012 Tutorial Workbook Guide


6




Next, we need to save the html page so Drea
mweaver will automatically copy all of the jquery mobile files
needed for our project to run. Dreamweaver will copy these over to the folder where you save your html
page. Click File > Save As > and make sure you save the file as index.html inside of the “
app”
folder.

The
references to the CSS and JavaScript files in your index.html file will automatically update to the local copy
in your site.






Now that we are setup up, we
are ready to

create the content for our app. We will then

add some
interactivity to the
mobile page template.


GameTech 2012 Tutorial Workbook Guide


7

But first, let’s look at what makes up the anatomy of page in jQuery Mobile.
Here are some important things
to understand about the jQuery Mobile framework:



The jQuery Mobile "page" structure is optimiz
ed to support
both

unlimited external
HTML

pages

and

internal
ly

linked "pages" within one

HTML file
.

In our
exercise
, we
will be working with both. The default template included in Dreamweaver starts you
off with one internally linked page.





In the
'head', references to jQuery, jQuery Mobile and the mobile theme CSS are all
required.

These are generated for you anytime you create a new page.




Inside the
<body>

tag, each view or "page" on the mobile device is identified with an
element (usually a
div
) with the
data
-
role="page"

attribute. View the
data
-

attribute
reference

to see all the possible
attributes you can add to pages:
http://jquerymobile.com/demos/1.0/docs/api/da
ta
-
attributes.html





<div

data
-
role=
"page"
>






...




</div>





Within the "page" container, any valid HTML markup can be used, but for typical
pages in jQuery Mobile, the immediate children of a "page" are divs with data
-
roles
of
"header"
,
"content"
, and
"footer"
.


<div

data
-
role=
"page"
>



<div

data
-
role=
"header"
>
...
</div>



<div

data
-
role=
"content"
>
...
</div>



<div

data
-
role=
"footer"
>
...
</div>


</div>





Now click on “Live View” to see the default template from jQuery Mobile.

Next, click
on some of the menu
items (e.g. Page Two, Page Three)

to see how the default
navigation works.

Now

click
“Live View”
again
to return to editing mode.

Editing
mode should look like the screen capture below.



GameTech 2012 Tutorial Workbook Guide


8

3.

Now let’s begin
creating the conte
nt using the JQuery Mobile Framework

in Dreamweaver
. Open
your index.html file inside of your “
app
”folder (if you don’t already have it open). Update the
following in the HTML file (
we will discuss

each of the updates we are making):


a.

Chan
ge the title

to

gametech
app
.” This can be done by highlighting the text
in the

HTML
markup

or using the design view window in Dreamweaver
.

See screen capture below.


b.

Create the menu page. When the data
-
role attribute of “listview” is added to unordered list,
it creates a menu system.

One of the new features of Dreamweaver CS5.5 is the support for
jQuery Mobile code hinting. If you start typing the “data” attribute for

a page, header,
content, or footer role it will provide a drop
-
down hinting feature. You can v
iew the
data
-

attribute reference

as part of the jQuery Mobile documentation

here:
http://jquerymobile.com/demos/1.0/docs/api/data
-
attributes.html


Next
,

everyone should add
the following text

“mLearning Definition
s
” for
the link to
“Page
Two
.”
The screen capture below is using “split view” to show both the code view and the
design

view

windows.



Code View

Window

Design
View Window





c.

Now we are going to create the “mLearning Definitions” page.
First, rename

the header
section

“Page Two” as “mLearning Definitions” within Dreamweaver and then follow the
steps below:




Open a web
browser
and go to the companion site for this exercise:

http://gametech.us/tutorial

.


Next, click on “Exercise Materials >
Content
-

mLearning

Definitions” and then copy and paste the code on this page into the
content section of your “mLearning Definitions” page in Dreamweaver.
Your Code
View and Design View windows

should resemble the screen capture below.


GameTech 2012 Tutorial Workbook Guide


9



Code View

Window

Design
View Wi
ndow






Notice how these internally linked pages use a

#

symbol. This is really
important to recognize because this is how internal pages are linked using
jQuery

Mobile and provides you with the option to put all of our content within
one HTML file, if you prefer.
Now click the “Live View” button in Dreamweaver
to test out the first page you created called “mLearning Definitions.”
The Live
View window should look
like the screen capture below:




d.

While Dreamweaver CS5.5 has excellent support for the jQuery mobile framework , at the
time of this writing many of the advanced features can be applied directly by typing
the

data
” attribute
. Dreamweaver provides code h
inting for all of the jQuery Mobile
framework properties. It also provides a visual interface to insert several of the most
common elements of a mobile app page.


GameTech 2012 Tutorial Workbook Guide


10

Let’s take a look

at Dreamweaver’s visual interface for jQuery Mobile
. In Dreamweaver, click

on the Insert Panel to see a list of jQuery Mobile Elements than be inserted into your HTML
without having to write any code.
The insert panel is docked on the right side of
Dreamweaver interface by default. See
the following
screen capture to see where
the jQuery
Mobile Insert Panel is located.






Next, we are going to create a footer navigation bar that is common on many mobile
applications.

This footer bar is not part of the Insert panel in Dreamweaver CS5.5,
but you can find code examples like this a
s well as many other advanced features

of
the jQuery Mobile Framework

in
the documentation
:
http://jquerymobile.com/demos/1.0/





Scroll up to the first page section of your index.html file and locate the

<div data
-
role=”footer”>

section of the page. We are going to copy and paste some
pre
-
baked code that will generate a
fixed

navigation bar in the footer. Go to the
companion site at
http://gametech.us/tutorial

an
d navigate to “Exercise
Materials > Footer Content.”
Follow the instructions on this page and copy and paste
the sample code into your footer section
, replacing the existing <div data
-
role=”footer”> block of HTML
. When finished, click Live View to see how
the footer
navigation bar looks. Your screen should resemble the one below:

GameTech 2012 Tutorial Workbook Guide


11





Code View

Window

Design
View Window






Did you notice in the
<div data
-
role=”navbar
”>

section that each button is actually
a list item? Also, notice that you can add pre
-
defined images for your navigation bar
and other buttons in jQuery Mobile by simply adding the attribute
data
-
icon=””

Also, did you notice that the glossary is the only ac
tively linked section? For the sake
of time, we are going to link to some
glossary
content that has already been created
using jQuery Mobile in Dreamweaver.
For the sake of time, we won’t be creating any
content for the”About” or “Resources” button so leav
e those untouched. They are
simply placeholders for the navigation bar to show you some possibilities. This
three button layout is just one example.




Go to the companion site at
http://gametech.us/tutorial

and n
avigate to

“Exercise
Materials > Glossary Content” and then download or save the zip file to your
computer on the desktop.

Next, copy or move the zip file into the “app” folder
where we have set up the site in Dreamweaver.


This should be
"C:
\
users
\
usernam
e
\
Documents
\
app" or wherever your files have been
saved so far.




Extract or "unzip" the contents of the zip file in the root of your "app"

folder
.
Now go back to Dreamweaver and refresh your files.
Your new directory
structure should resemble the screen ca
pture below:

GameTech 2012 Tutorial Workbook Guide


12





Since we have already linked to the glossary.html file,
you can

now

test out
the glossary by clicking the “Live View” button in Dreamweaver
.

After Live
View renders your content,
click the “Glossary” button at the bottom of your
footer
navigation bar. Click on some of the terms in the glossary to see how
they animate using jQuery mobile. How can you apply these page transitions
and colors like what was created with the glossary? That’s next!


4.

Page Transitions



The jQuery Mobile framework
includes a set of six transition effects that can
be applied to any page link. The transition options are:
slide, slid
eup,
slidedown, pop, fade, flip.
For example, the transition effect can be

applied by
simply typing
data
-
transition=”slideup”

on a link w
here you would like the screen
to slide up from the bottom of the screen. This is the effect that has been applied to
the code we copied over for the link to the glossary

content
.




Next,
look at the link to the glossary in your footer navigation bar
. T
ry

applying
these different transitions to your link to the glossary by changing the value

of
data
-
transition=””
.


After changing the value, you can preview these by clicking “Live
View” in dreamweaver or test them in a browser.

Or you can see a complete dem
o of
all of the transitions by visiting the jQuery Mobile Demo page

in a browser
:
http://jquerymobile.com/demos/1.0/docs/pages/page
-
transitions.html



5.

Theming Pages



jQuery M
obile has a theme system that gives you full control of how pages
are styled. jQuery Mobile comes with f
ive preset themes designated as:
a,b,c,d, and e.




The
data
-
theme

attribute can be applied to the header and footer containers to
apply any of the lettered theme color swatches. While the
data
-
theme

attribute
could be added to the content container,
the jQuery Mobile documentation

recommend
s

adding it instead to
div

or
container that has been assigned the

data
-
role="page"

attribute to ensure that the background color is applied to the full
page.

GameTech 2012 Tutorial Workbook Guide


13



Now look at the footer section of your page where you linked to the glossary.html
file. Notice that the
data
-
position="fixed"

a
ttribute has been applied to the footer
section. This means that the footer will stay fixed to the bottom of the screen.
Place
your cursor after

the
data
-
position="fixed"

attribute, and then tap

the space bar
on
ce on

your keyboard , and then start typing the following:



data
-
theme=”b”




Did you notice that code hinting that appears

after only typing “
data
?


Dreamweaver’s built
-
in support makes it easy to
add any of the built in themes. In
addition to the themes that
come with jQuery Mobile, you can create your own
custom themes and save them as a stylesheet using the
Theme Roller:
http://www.jquerymobile.com/themeroller


6.

OPTIONAL ACTIVITY:


a.

Watch the video on how

to apply CSS Media Queries in Dreamweaver.

http://gametech.us/tutorial
/videos/media
-
queries.html


b.

Apply media query style sheet
s

using Dreamweaver

c.

Link to the second page from the home screen of the app

d.

Show demo

of responsive design approach applied to the
ADL Mobile Guide
:
http://mlearn.adlnet.gov


NOTE:
We will only complete this activity

if we have enough time. If we have
already
exceeded
2
5 minutes
into the exercise we will
only
watch the video on media queries. This exercise takes at least 20
-
25
minutes

to
complete
...




















GameTech 2012 Tutorial Workbook Guide


14

Job Aid




Concepts and Approaches Discussed:

o

Mobile

First
:
http://www.lukew.com/resources/mobile_first.asp


o

Progressive Enhancement
:
http://www.alistapart.c
om/articles/understandingprogressiveenhancement


o

Responsive Design
:
http://www.alistapart.com/articles/responsive
-
web
-
design/


o

Media Queries
:
http://www.w3.org/TR/css3
-
mediaqueries/


o

HTML5
:
http://www.w3.org/TR/html5/


o

CSS
:
http://www.w3.org/Style/CSS/Overview.en.html


o

jQuery
:

http://jquery.com/





Tools and Resources

Used
:

o

Dreamweaver CS5.5
:
http://www.adobe.com/products/dreamweaver.html


o

jQuery Mobile
:
http://jquerymobile.com

o

PhoneGap
:
http://phonegap.com/

o

Dreamweaver and PhoneGap:
http://blogs.nitobi.com/andre/index.php/2011/04/12/adobe
-
dreamweaver
-
5
-
5
-
supports
-
phonegap/


o

PhoneGap Build
:
https://build.phonegap.com/





Important

Notes &

Tips
:

o

The template

that comes with Dreamweaver

is very basic and the

automatic

back buttons have been
removed for the latest release of JQM. The older version was developed with the intent that everyone
would be creating native
-
looking apps using JQM, but that is not always the case. So now it is turned
off by default, but can easil
y be added.

More information about back button links can be found here:
http://jquerymobile.com/demos/1.0/docs/pages/page
-
links.html



o

We did not update the jQuery Mobile files fo
r this exercise as that would have taken up valuable time
we needed for focusing on the features and creating the content. However, it is recommended to
update your new projects to the latest version of jQuery Mobile. You can host the jQuery Mobile and
p
oint your project to a local instance by downloading the latest version from :
http://jquerymobile.com

or you can point to the CDN (repository) hosted version by updating the
head section of your HTML:


<link rel="st
ylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile
-
1.0.min.css" />

<script src="http://code.jquery.com/jquery
-
1.6.4.min.js"></script>

<script src="http://code.jquery.com/mobile/1.0/jquery.mobile
-
1.0.min.js"></script>


o

If you would like for Dre
amweaver to use the latest version of the jQuery Mobile Framework, then I
have created
Instructions for Updating Dreamweaver to the latest version of jQuery Mobile:

http://gametech.us/
tutorial/
update
-
jqm
-
instructions.pdf


o

Adobe recently acquired the company that created phonegap. The open source version of phonegap
is free has been proposed to move to the Apache Foundation under the name of “Apache Callback.”
Phonegap build is a subscri
ption
-
based service and is only free for one app.