Dreamweaver CS6, jQuery, PhoneGap, mobile design

Creating applications fast for
multiple screens
with appearances of jQuery mobile, PhoneGap
and Dreamweaver CS6

Dee Sadler
Adobe Community Professional
Adobe Certiﬁed Expert / Instructor
Adobe Freelancer Program
UI Strategist/Android/HTML/CSS geek for Sprint
Dreamweaver and Fireworks CS5 videos for
Total Training and Adobe TV (CS6)
Hybrid

@DeeSadler

We’ll try to cover

• Mobile app, choices
• Dreamweaver’s place
• Creating Mobile Design (actual design, not code)
• Other helpful Adobe tools to create HTML/CSS
• jQuery Mobile in DW
• PhoneGap Build in DW

Vs.
Pros
(na)ve
client)
Cons
(na)ve
client)
§ Be#er
performance
(at
least
for
now),
snappier
§ Typically
more
expensive
to
build,
even
for
a

anima5ons,
transi5ons,
and
faster
load
5mes.
The
single
plaMorm.
Build
costs
increase
significantly

performance
difference
between
na5ve
and
web
for
each
new
plaMorm.
Because
the
codebase

apps
is
far
more
pronounced
on
slower
devices
needs
to
be
re-‐worked
for
each
OS,
the
5me
to

(e.g.
iPhone
3G
running
iOS4)
build
an
app
for
mul5ple
devices
can
also
be

§ Can
store
more
data
offline
quite
involved.

§ Can
be
featured
and
searched
for
in
the
app
store
§ Your
app
must
be
accessed
through
the
device’s

app
store,
which
has
two
important

§ Full
access
to
the
device’s
hardware
and
OS
considera5ons:
your
app
must
go
through
an

features
approval
process,
which
can
be
lengthy
and

§ Implicit
installa5on
of
an
app
to
the
device’s
home
arbitrary,
and
if
your
app
generates
revenue
you

screen.
On
iOS
devices
you
can
add
any
web
app
must
share
a
percentage
with
the
store
(30%
for

to
your
home
screen,
but
it’s
a
manual
process Apple’s
App
Store,
including
in-‐app
purchases).

App
updates
must
go
through
a
new
approval

§ The
App
Store
handles
purchase
transac5ons
on
process
each
5me.
your
behalf

Pros
Corporate websites and blogs that don’t require
Corporate websites and blogs that don’t require
extensive user input
extensive user input
One Code Base
One Code Base
Device Agnostic
Device Agnostic
Not just a tool forfor mobile
Not just a tool mobile
If done right, can bebe fast
If done right, can fast

SprintZone

5.0…

HTML5

Sprint
customers

visi5ng
our
.com
site

are
prompted
to

download
our
Web

App.

Device Speciﬁc HTML5
API’s - Qualcomm
• Audio Input

• Camera

• File System

• Screen Orientation

Hybrids
• PhoneGap (Apache Cordova)
• Sencha Touch
• Titanium
• Kendoui
• UXI (super micro tiny DOM lib)
• Zepto
• etc. . .

jQuery starter pages

• jQuery Mobile (CDN) Use this starter page if you plan to
host the jQuery Mobile library on a CDN (Content
Delivery Network).

• jQuery Mobile (Local) Use this starter page if you plan to
host the assets yourself, or if your application doesn’t rely
on an Internet connection.

But what are
Media Queries?
A media query is a logical expression that is
either true or false

<link rel='stylesheet' media='screen and
(min-width: 701px) and (max-width: 900px)'
href='css/example.css' />

That stylesheet will only take eﬀect when
the current browser window is between 701
and 900 pixels in width.

Which way will they navigate
the app?

Fireworks CS6

• CSS Sprites
• CSS Properties Panel
• jQuery theme creation
• New wireframing tools
• Gesture icons

Prototyping
And things to make development easier

Other tools to create
HTML5/CSS3/JS

• Edge Animate
• Proto (iPad app that can quickly wireframe)
• Brackets - new code editor
• Shadow - See your designs on your device(s)/
debug

Setting up a jQuery app
<div data-role="page" id="page">

<div data-role="header">
<h1>Page One</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="#page2">Page Two</a></li>
<li><a href="#page3">Page Three</a></li>
<li><a href="#page4">Page Four</a></li>
</ul>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>

With real data
thanks to Ryan Stewart at Adobe for the code
<div data-role="page" id="page">

<div data-role="header">
<h1>Mountain Ranges</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<?php
include_once('PeakService.php');

$peak_service = new PeaksService();

$range_array = $peak_service->getDistinctRanges();

foreach ($range_array as $row)
{
echo "<li><a href='#".ereg_replace(' ','',
$row[range_name])."'>".$row[range_name]."</a></li>";
}
?>
</ul>
</div>
<div data-role="footer">
<h4>by ryan@adobe.com</h4>
</div>
</div>

Pixel Density/Screen size
To get the ppi, you first need to find out how many
pixels there are diagonally.

This is the square root of each side squared, added
together (from a2 + b2 = c2)

Android densities: low, medium, high and extra high
Density-independent pixel (dp)
A virtual pixel unit that you should use when defining UI layout, to express layout dimensions or position in a
density-independent way.
The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baseline
density assumed by the system for a "medium" density screen. At runtime, the system transparently handles any
scaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp units
to screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physical
pixels.You should always use dp units when defining your application's UI, to ensure proper display of your UI
on screens with different densities.
http://developer.android.com/guide/practices/screens_support.html

Dreamweaver CS6, jQuery, PhoneGap, mobile design

Dreamweaver CS6, jQuery, PhoneGap, mobile design

More Related Content

What's hot

Viewers also liked

Similar to Dreamweaver CS6, jQuery, PhoneGap, mobile design

More from Dee Sadler

Recently uploaded

Dreamweaver CS6, jQuery, PhoneGap, mobile design