A session talk for #NAGW2012 on: 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

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

2. Dee Sadler
Adobe Community Professional
Adobe Certified 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

3. 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

7. 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

9. 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

12. SprintZone
5.0…
HTML5
Sprint
customers
visi5ng
our
.com
site
are
prompted
to
download
our
Web
App.

15. Boot2Gecko

17. Device Specific HTML5
API’s - Qualcomm
• Audio Input
• Camera
• File System
• Screen Orientation

18. Hybrid Apps

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

22. Fluid Grids

24. Quick HTML5 Templates

25. jQuery Mobile Starter Pages

26. 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.

28. 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 effect when
the current browser window is between 701
and 900 pixels in width.

30. Design

31. Designing for all screens

32. Design the experience

35. Which way will they navigate
the app?

37. Fireworks CS6
• CSS Sprites
• CSS Properties Panel
• jQuery theme creation
• New wireframing tools
• Gesture icons

43. Prototyping
And things to make development easier

56. 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

57. Edge Animate

67. 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>

68. 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>

77. PhoneGap Build in DW

78. Working with native mobile

79. 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

80. Thanks!