Developing Mobile Solutions with Adobe CS6

Developing Mobile Solu/ons with Adobe CS6 @ChrisGriﬃth

These opinions and thoughts are my own, and may
or may not reﬂect the opinions of the company that I work for. Disclaimer

What PlaIorm? 4

Mobile is becoming increasingly important to web designers and
developers because users expect a site to work on their phones. 6

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

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

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

What’s New Fluid Grid Layouts jQuery Mobile Support
PhoneGap Support Mul=screen Preview

Intro to jQuery Mobile

What does jQuery Mobile do? jQuery Mobile makes it
easy to develop user interfaces for mobile web apps.

What does jQuery Mobile do? The interface conﬁgura=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!)

What does jQuery Mobile do? It provides a series
of new custom events to let you detect mobile and touch speciﬁc ac/ons like tap, tap-‐and-‐hold, swipe, and orienta=on change (i.e. rota/ng the device).

What does jQuery Mobile do? It uses themes to
make it easy to customize the look of your app.

<!DOCTYPE html> <html> <head> </tle>Page Title<//tle>
<link rel="stylesheet" href="h`p://code.jquery.com/mobile/1.0/ jquery.mobile-‐1.0.min.css" /> <script src="h`p://code.jquery.com/jquery-‐1.7.1.min.js"></script> <script src="h`p://code.jquery.com/mobile/1.0/ jquery.mobile-‐1.0.min.js"></script> </head> <body> </body> </html>

<body> <div id="homePage"> <div> <h1>Page Title</h1> </div> <div> <p>My page
content</p> </div> <div> <h4>Footer</h4> </div> </div> </body>

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-‐ preﬁx.

<body> <div id="homePage" data-‐role="page"> <div data-‐role="header">
<h1>Page Title</h1> </div> <div data-‐role="content"> <p>My page content</p> </div> <div data-‐role="footer"> <h4>Footer</h4> </div> </div> </body>

<div data-‐ role="header"> This lets you create a toolbar
at the top of the page, used for things like the page /tle and buòns. (Typically there is at least a "Back" buòn 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.

<div data-‐ role="content"> Contains the main content of the
page, such as text, images, bu`ons, lists, forms, and so on.

<div data-‐ role="footer"> Creates a toolbar at the boòm
of the page, which is useful for things like main func/on buòns. By adding data-‐posi/on="fixed" to the footer, you can make sure it always stays at the boòm of the screen.

Pages within pages <body> <div id="homePage" data-‐role="page">
<div data-‐role="header"> <h1>Page Title</h1> </div> <div data-‐role="content"> <p>My page content</p> <p><a href="#about">About this app</a></p> </div> <div data-‐role="footer"> <h4>Footer</h4> </div> </div> <div data-‐role="page" id="about"> <div data-‐role="header"> <h1>About This App</h1> </div> <div data-‐role="content"> <p>This app rocks! <a href="#homePage">Go home</a></p> </div> </div> </body>

Page transi/ons •  slide •  slideup • 
slidedown •  slidefade •  pop •  fade •  flip •  flow •  turn <p><a href="#about" data-‐transi/on="flip">About this app</ a></p>

Buòns To turn a link into a buòn in
jQuery Mobile, simply add data-‐role="buòn" to the a tag: <p><a href="#about" data-‐role="buòn">About this app</a></p>

Icons & more An icon can be added to
a buòn by adding a data-‐icon a`ribute on the anchor specifying the icon to display. For example, the following markup: <p><a href="#about" data-‐transi/on="flip" data-‐ role="buòn" data-‐icon="info">About this app</a></p>

Grouped Buòns <div data-‐role="page" id="about"> <div data-‐role="header">
<h1>About This App</h1> </div> <div data-‐role="content"> <p>Does app rocks?</p> <div data-‐role="controlgroup" data-‐type="horizontal"> <a href="#homePage" data-‐role="buòn">Yes</a> <a href="#homePage" data-‐role="buòn">No</a> <a href="#homePage" data-‐role="buòn">Maybe</a> </div> </div> </div>

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.

List Code -‐ Sample <li> <a href="#"><img src="images/rush.png"
class="ui-‐li-‐thumb"> <h3 class="ui-‐li-‐heading">Fly by Night</h3> <p class="ui-‐li-‐desc">(1975)</p> </a> </li>

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.

Back? <div data-‐role="page" id="twenty-‐one-‐twelve" data-‐add-‐back-‐ btn="true"> OR
<script src="h`p://code.jquery.com/jquery-‐1.7.1.min.js"></script> <script> $(document).bind("mobileinit", func/on(){ $.mobile.page.prototype.op/ons.addBackBtn=true; }); </script> <script src="h`p://code.jquery.com/mobile/1.0/ jquery.mobile-‐1.0.min.js"></script>

What’s New CSS3 Support CSS3 Sprites jQuery
Mobile Symbols & Templates

Themes <script> $(document).bind("mobileinit", func/on(){ $.mobile.page.prototype.op/ons.addBackBtn=true; $.mobile.page.prototype.op/ons.theme="a";
}); </script>

Theming Tools

Tabs <div data-‐role="footer"> <div data-‐role="navbar">
<ul> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a href="#">Three</a></li> </ul> </div><!-‐-‐ /navbar -‐-‐> </div><!-‐-‐ /footer -‐-‐>

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.

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; } }

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òm 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òm 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: <div data-‐role="header" data-‐posi/on="fixed"> <h1>Fixed Header!</h1> </div> Fixed footer markup example: <div data-‐role="footer" data-‐posi/on="fixed"> <h1>Fixed Footer!</h1> </div>

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 ﬁxed outside of the transi/on.

Persistent Footer naviga/on bar <div data-‐role="footer" data-‐id=”myTabs" data-‐posi/on="ﬁxed">
<div data-‐role="navbar"> <ul> <li><a href="a.html">Friends</a></li> <li><a href="b.html">Albums</a></li> <li><a href="c.html">Emails</a></li> <li><a href="d.html" >Info</a></li> </ul> </div><!-‐-‐ /navbar -‐-‐> </div><!-‐-‐ /footer -‐-‐> To set the ac/ve state of an item in a persistent toolbar, add a class of ui-‐state-‐persist in addi/on to ui-‐btn-‐ac/ve to the corresponding anchor. <li><a href="d.html" class="ui-‐btn-‐ac/ve ui-‐state-‐persist">Info</a></li>

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 eﬃciently 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.

•  The web is sandboxed •  The web has
no good oﬄine 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…

Applica/on container that allows you to build na/vely installed
apps using HTML, CSS & JavaScript What is PhoneGap

What is PhoneGap Your Code

What is PhoneGap Your Code Na=ve Web View

Na=ve APIs

Na=ve APIs Na=ve App -‐ .apk, .ipa, etc

What plaRorms support PhoneGap

Since it is HTML, CSS & JSS, can I use
exis=ng tools/frameworks?

Cau=on… PhoneGap uses the NATIVE browser on the
device to render the HTML/CSS/JS Keep that in mind, as that can aﬀect the experience

GeYng Started hJp://incubator.apache.org/cordova/

Phone Community

Building it phonegap.com/start

Building it build.phonegap.com

Building it <Demo>

Building it

Device Access Accelerometer Camera Capture
Compass Connec=on Contacts Device Informa=on File Geoloca=on Media No=ﬁca=on Storage Out of the box, PhoneGap provides support for a number of basic device APIs

Camera API example

Debugging It’s all just HTML/JS, so you can use
your browser! Take advantage of Chrome Developer tools/Firebug to test.

Debugging Luckily we have Weinre, which lets us debug
and manipulate the DOM from our PCs. h`p://people.apache.org/~pmuellr/weinre/

Debugging Weinre can be conﬁgured as a server (there
is a Mac applica/on) and uses the developer tools from Chrome to provide hooks into the mobile app.

Debugging

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

Intro to Flash Professional CS6

What’s New Sprite sheet generation Wide platform and device support
Prepackaged Adobe AIR application creation Adobe AIR mobile simulation Stage 3D targeting

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

Sprite Sheet Generation

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

anks! chris.griffith@gmail.com @chrisgriffith h p://chrisgriffith.wordpress.com/

Developing Mobile Solutions with Adobe CS6

Developing Mobile Solutions with Adobe CS6

More Decks by Chris Griffith

Other Decks in Technology

Featured

Transcript