Slide 1
Slide 1 text
Developing
Mobile
Solu/ons
with
Adobe
CS6
@ChrisGriffith
Slide 2
Slide 2 text
These
opinions
and
thoughts
are
my
own,
and
may
or
may
not
reflect
the
opinions
of
the
company
that
I
work
for.
Disclaimer
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
What
PlaIorm?
4
Slide 5
Slide 5 text
Mobile
is
becoming
increasingly
important
to
web
designers
and
developers
because
users
expect
a
site
to
work
on
their
phones.
6
Slide 6
Slide 6 text
The
web
is
becoming
increasingly
important
to
the
mobile
world
because
it
is
the
only
way
to
deploy
an
applica/on
to
almost
any
device.
7
Slide 7
Slide 7 text
Mobile
Na/ve
App
Pro’s:
High
Performance
Con’s:
Device
dependent
(e.g.
Objec/ve
C
only
apps)
A
na/ve
app
as
one
that
is
specifically
designed
to
run
on
a
device’s
opera/ng
system
and
machine
firmware,
and
typically
needs
to
be
adapted
for
different
devices.
8
Slide 8
Slide 8 text
Pro’s:
Broad
Reach
of
mobile
devices
Con’s:
No
access
to
mobile
sensor
API’s
Mobile
Web
App
A
Web
app,
is
typically
coded
in
a
browser-‐rendered
language
such
as
HTML
combined
with
JavaScript.
9
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
What’s New
Fluid Grid Layouts jQuery Mobile Support
PhoneGap Support Mul=screen Preview
Slide 11
Slide 11 text
Intro to jQuery Mobile
Slide 12
Slide 12 text
What
does
jQuery
Mobile
do?
jQuery
Mobile
makes
it
easy
to
develop
user interfaces for mobile web apps.
Slide 13
Slide 13 text
What
does
jQuery
Mobile
do?
The interface configura=on is markup-‐driven,
which
means
you
can
pre`y
much
create
your
en/re
basic
app
interface
in
HTML,
without
needing
to
write
a
single
line
of
JavaScript.
(Of
course,
you'll
s/ll
need
to
write
JavaScript
if
your
app
is
to
do
anything
useful!)
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
What
does
jQuery
Mobile
do?
It
provides
a
series
of
new
custom
events
to
let
you
detect
mobile
and
touch
specific
ac/ons
like
tap, tap-‐and-‐hold, swipe, and orienta=on
change (i.e.
rota/ng
the
device).
Slide 16
Slide 16 text
What
does
jQuery
Mobile
do?
It
uses
themes to
make
it
easy
to
customize
the
look
of
your
app.
Slide 17
Slide 17 text
Page
Title
Slide 18
Slide 18 text
Page Title
My page content
Footer
Slide 19
Slide 19 text
data-‐*
data-‐
a`ributes
are
a
wonderful
new
feature
of
HTML5
that
let
you
add
any
a`ributes
you
like
to
an
element.
All
you
have
to
do
is
start
your
a`ribute
name
with
the
data-‐
prefix.
Slide 20
Slide 20 text
Page Title
My page content
Footer
Slide 21
Slide 21 text
This
lets
you
create
a
toolbar
at
the
top
of
the
page,
used
for
things
like
the
page
/tle
and
bu`ons.
(Typically
there
is
at
least
a
"Back"
bu`on
which
the
user
can
tap
to
return
to
the
previous
page.)
By
adding
data-‐posi/on="fixed"
to
the
header,
you
can
make
sure
the
header
always
stays
at
the
top
of
the
screen.
Slide 22
Slide 22 text
Contains
the
main
content
of
the
page,
such
as
text,
images,
bu`ons,
lists,
forms,
and
so
on.
Slide 23
Slide 23 text
Creates
a
toolbar
at
the
bo`om
of
the
page,
which
is
useful
for
things
like
main
func/on
bu`ons.
By
adding
data-‐posi/on="fixed"
to
the
footer,
you
can
make
sure
it
always
stays
at
the
bo`om
of
the
screen.
Slide 26
Slide 26 text
Bu`ons
To
turn
a
link
into
a
bu`on
in
jQuery
Mobile,
simply
add
data-‐role="bu`on"
to
the
a
tag:
Slide 27
Slide 27 text
Icons
&
more
An
icon
can
be
added
to
a
bu`on
by
adding
a
data-‐icon
a`ribute
on
the
anchor
specifying
the
icon
to
display.
For
example,
the
following
markup:
Slide 29
Slide 29 text
Lists
Lists
are
used
for
data
display,
naviga/on,
result
lists,
and
data
entry
so
jQuery
Mobile
includes
a
wide
range
of
list
types
and
formasng
examples
to
cover
most
common
design
pa`erns.
Slide 31
Slide 31 text
Lists,
part
deux
• Nested lists. If
you
nest
another
ul
list
inside
an
li,
jQuery
automa/cally
creates
a
second
"page"
for
the
embedded
list,
linked
to
from
the
original
li.
This
is
very
handy
for
crea/ng
trees
of
menu
op/ons,
sesngs,
and
so
on.
• Split buJon lists. By
placing
2
links
inside
an
li,
you
can
create
a
list
item
with
a
ver/cal
divider
bar
on
the
right
side
of
the
item.
The
user
can
then
tap
either
the
lev
or
right
side
of
the
list
item
to
achieve
different
things
(such
as
viewing
or
purchasing).
• Count bubbles. If
you
include
an
element
with
a
class
of
ui-‐li-‐count
in
a
list
item
then
jQuery
Mobile
creates
a
li`le
"bubble"
icon
on
the
right
side
of
the
list
item
containing
the
element's
contents.
This
is
great
for
things
like
message
counts
in
mailbox
lists.
• Search filtering. If
you
add
the
a`ribute
data-‐filter="true"
to
a
ul
or
ol
element
then
the
list
becomes
searchable.
A
"Filter
results..."
text
box
appears
above
the
list,
allowing
the
user
to
narrow
down
the
op/ons.
Perfect
for
large
lists.
• List dividers for
splisng
lists
into
sec/ons.
Just
add
data-‐role="list-‐divider"
to
any
list
item.
Slide 32
Slide 32 text
Back?
OR
$(document).bind("mobileinit",
func/on(){
$.mobile.page.prototype.op/ons.addBackBtn=true;
});
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
What’s New
CSS3 Support
CSS3 Sprites
jQuery Mobile
Symbols &
Templates
Slide 35
Slide 35 text
Themes
$(document).bind("mobileinit",
func/on(){
$.mobile.page.prototype.op/ons.addBackBtn=true;
$.mobile.page.prototype.op/ons.theme="a";
});
Slide 36
Slide 36 text
Theming
Tools
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
See
h`p://www.html5rocks.com/en/mobile/mobifying/
Slide 40
Slide 40 text
Icons
in
navbars
Icons
can
be
added
to
navbar
items
by
adding
the
data-‐icon a`ribute
specifying
a
standard
mobile
icon
to
each
anchor.
By
default,
icons
are
added
above
the
text
(data-‐iconpos="top").
The
following
examples
add
icons
to
a
navbar
in
a
footer.
Slide 41
Slide 41 text
Custom
Icons
18x18
pixels
saved
as
a
PNG-‐8
with
alpha
transparency
.ui-‐icon-‐myapp-‐email
{
background-‐image:
url("app-‐icon-‐email.png");
}
36x36
pixels
saved
as
a
PNG-‐8
with
alpha
transparency
@media
only
screen
and
(-‐webkit-‐min-‐device-‐pixel-‐ra/o:
2)
{
.ui-‐icon-‐myapp-‐email
{
background-‐image:
url("app-‐icon-‐email-‐highres.png");
background-‐size:
18px
18px;
}
}
Slide 42
Slide 42 text
Fixed
toolbars
In
browsers
that
support
CSS
posi/on:
fixed
(most
desktop
browsers,
iOS5+,
Android
2.2+,
BlackBerry
6,
and
others),
toolbars
that
use
the
"fixedtoolbar"
plugin
will
be
fixed
to
the
top
or
bo`om
of
the
viewport,
while
the
page
content
scrolls
freely
in
between.
In
browsers
that
don't
support
fixed
posi/oning,
the
toolbars
will
remain
posi/oned
in
flow,
at
the
top
or
bo`om
of
the
page.
To
enable
this
behavior
on
a
header
or
footer,
add
the
data-‐posi/on="fixed"
a`ribute
to
a
jQuery
Mobile
header
or
footer
element.
Fixed
header
markup
example:
Fixed
footer
markup
example:
Fixed Header!
Fixed Footer!
Slide 43
Slide 43 text
Persistent
Footer
naviga/on
bar
To
tell
the
framework
to
apply
the
persistent
behavior,
add
a
data-‐id a`ribute
to
the
footer
of
all
HTML
pages
in
the
naviga/on
set
to
the
same
ID.
It's
that
simple:
if
the
page
you're
naviga/ng
to
has
a
header
or
footer
with
the
same
data-‐id,
the
toolbars
will
appear
fixed
outside
of
the
transi/on.
Slide 45
Slide 45 text
Adobe
Shadow
Adobe®
Shadow
is
a
new
inspec/on
and
preview
tool
that
allows
front-‐end
web
developers
and
designers
to
work
faster
and
more
efficiently
by
streamlining
the
preview
process,
making
it
easier
to
customize
websites
for
mobile
devices.
Shadow
will
be
updated
regularly
to
stay
in
sync
with
web
standards,
web
browser
updates
and
support
for
new
mobile
devices
entering
the
market,
while
incorpora/ng
user
feedback
to
provide
the
best
func/onality
and
experience
possible.
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
• The
web
is
sandboxed
• The
web
has
no
good
offline
story
• The
web
cannot
par/cipate
in
app
store
distribu/on
revenue
• The
web
cannot
access
most
device
apis
• The
web
has
awful
tooling
Mobile Web is great but…
Slide 51
Slide 51 text
Applica/on
container
that
allows
you
to
build
na/vely
installed
apps
using
HTML,
CSS
&
JavaScript
What is PhoneGap
Slide 52
Slide 52 text
What is PhoneGap
Your Code
Slide 53
Slide 53 text
What is PhoneGap
Your Code
Na=ve Web View
Slide 54
Slide 54 text
What is PhoneGap
Your Code
Na=ve Web View
Na=ve APIs
Slide 55
Slide 55 text
What is PhoneGap
Your Code
Na=ve Web View
Na=ve APIs
Na=ve App -‐ .apk, .ipa, etc
Slide 56
Slide 56 text
What plaRorms support PhoneGap
Slide 57
Slide 57 text
Since it is HTML, CSS & JSS, can I use exis=ng
tools/frameworks?
Slide 58
Slide 58 text
Cau=on…
PhoneGap
uses
the
NATIVE
browser
on
the
device
to
render
the
HTML/CSS/JS
Keep
that
in
mind,
as
that
can
affect
the
experience
Slide 59
Slide 59 text
GeYng Started
hJp://incubator.apache.org/cordova/
Slide 60
Slide 60 text
Phone Community
Slide 61
Slide 61 text
Building it
phonegap.com/start
Slide 62
Slide 62 text
Building it
build.phonegap.com
Slide 63
Slide 63 text
Building it
Slide 64
Slide 64 text
Building it
Slide 65
Slide 65 text
Device Access
Accelerometer
Camera
Capture
Compass
Connec=on
Contacts
Device Informa=on
File
Geoloca=on
Media
No=fica=on
Storage
Out
of
the
box,
PhoneGap
provides
support
for
a
number
of
basic
device
APIs
Slide 66
Slide 66 text
Camera API example
Slide 67
Slide 67 text
Debugging
It’s
all
just
HTML/JS,
so
you
can
use
your
browser!
Take
advantage
of
Chrome
Developer
tools/Firebug
to
test.
Slide 68
Slide 68 text
Debugging
Luckily
we
have
Weinre,
which
lets
us
debug
and
manipulate
the
DOM
from
our
PCs.
h`p://people.apache.org/~pmuellr/weinre/
Slide 69
Slide 69 text
Debugging
Weinre
can
be
configured
as
a
server
(there
is
a
Mac
applica/on)
and
uses
the
developer
tools
from
Chrome
to
provide
hooks
into
the
mobile
app.
Slide 70
Slide 70 text
Debugging
Slide 71
Slide 71 text
Beyond the mobile web
PhoneGap
is
extensible
with
a
“na/ve
plugin”
model
that
enables
you
to
write
your
own
na/ve
logic
to
access
via
JavaScript.
There
are
lots
of
open
source
plugins
at
h`ps://github.com/phonegap/
phonegap-‐plugins
Learn
more
at
h`p://
wiki.phonegap.com/w/page/36752779/
PhoneGap%20Plugins
Slide 72
Slide 72 text
No content
Slide 73
Slide 73 text
Intro to Flash Professional CS6
Slide 74
Slide 74 text
What’s New
Sprite sheet generation Wide platform and
device support
Prepackaged Adobe AIR
application creation
Adobe AIR mobile
simulation
Stage 3D targeting
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
What is CreateJS?
EaselJS TweenJS SoundJS PreloadJS
A suite of libraries for creating
rich interactive experiences &
games in HTML5
Adobe to sponsor project
Approachable – Modular – Extensible - Open
Slide 77
Slide 77 text
Sprite Sheet Generation
Slide 78
Slide 78 text
AIR Publishing
• Support for AIR 3.3 and Flash Player 11.3
• Package AIR as a single application with
Captive Runtime
• Access platform or device-speci c capabilities
using pre-compiled Native Extensions
• AIR mobile simulation
• Enhanced remote debugging
Slide 79
Slide 79 text
Slide 80
Slide 80 text
anks!
chris.griffi[email protected]
@chrisgriffith
h p://chrisgriffith.wordpress.com/