dreamweaver cs6, jquery, phonegap, mobile design
Post on 15-Jan-2015
22.752 Views
Preview:
DESCRIPTION
TRANSCRIPT
Creating applications fast for multiple screens
with appearances of jQuery mobile, PhoneGap and Dreamweaver CS6
Dee SadlerAdobe Community Professional
Adobe Certified Expert / InstructorAdobe Freelancer Program
UI Strategist/Android/HTML/CSS geek for SprintDreamweaver 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
Pros (na)ve client)§ Be#er performance (at least for now), snappier anima5ons, transi5ons, and faster load 5mes. The performance difference between na5ve and web apps is far more pronounced on slower devices (e.g. iPhone 3G running iOS4)
§ Can store more data offline
§ Can be featured and searched for in the app store
§ Full access to the device’s hardware and OS features
§ Implicit installa5on of an app to the device’s home screen. On iOS devices you can add any web app to your home screen, but it’s a manual process
§ The App Store handles purchase transac5ons on your behalf
Vs.
Cons (na)ve client)§ Typically more expensive to build, even for a single plaMorm. Build costs increase significantly for each new plaMorm. Because the codebase needs to be re-‐worked for each OS, the 5me to build an app for mul5ple devices can also be quite involved.
§ Your app must be accessed through the device’s app store, which has two important considera5ons: your app must go through an approval process, which can be lengthy and arbitrary, and if your app generates revenue you must share a percentage with the store (30% for Apple’s App Store, including in-‐app purchases). App updates must go through a new approval process each 5me.
ProsCorporate websites and blogs that don’t require extensive user input
One Code Base
Device Agnostic
Not just a tool for mobile
If done right, can be fast
ProsCorporate websites and blogs that don’t require extensive user input
One Code Base
Device Agnostic
Not just a tool for mobile
If done right, can be fast
SprintZone 5.0…
HTML5
Sprint customers visi5ng our .com site are prompted to download our Web App.
Boot2Gecko
Device Specific HTML5 API’s - Qualcomm
• Audio Input
• Camera
• File System
• Screen Orientation
Hybrid Apps
Hybrids• PhoneGap (Apache Cordova)
• Sencha Touch
• Titanium
• Kendoui
• UXI (super micro tiny DOM lib)
• Zepto
• etc. . .
Fluid Grids
Quick HTML5 Templates
jQuery Mobile Starter Pages
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?
<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.
A media query is a logical expression that is either true or false
Design
Designing for all screens
Design the experience
Which way will they navigate the app?
Fireworks CS6
• CSS Sprites
• CSS Properties Panel
• jQuery theme creation
• New wireframing tools
• Gesture icons
PrototypingAnd 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
Edge Animate
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 datathanks 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"><?phpinclude_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>
PhoneGap Build in DW
Working with native mobile
Pixel Density/Screen sizeTo 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 highDensity-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
Thanks!
top related