Dreamweaver CS6, jQuery, PhoneGap, mobile design
-
Upload
dee-sadler -
Category
Technology
-
view
22.747 -
download
2
description
Transcript of Dreamweaver CS6, jQuery, PhoneGap, mobile design
![Page 1: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/1.jpg)
Creating applications fast for multiple screens
with appearances of jQuery mobile, PhoneGap and Dreamweaver CS6
![Page 2: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/2.jpg)
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
![Page 3: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/3.jpg)
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
![Page 4: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/4.jpg)
![Page 5: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/5.jpg)
![Page 6: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/6.jpg)
![Page 7: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/7.jpg)
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.
![Page 8: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/8.jpg)
![Page 9: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/9.jpg)
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
![Page 10: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/10.jpg)
![Page 11: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/11.jpg)
![Page 12: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/12.jpg)
SprintZone 5.0…
HTML5
Sprint customers visi5ng our .com site are prompted to download our Web App.
![Page 13: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/13.jpg)
![Page 14: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/14.jpg)
![Page 15: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/15.jpg)
Boot2Gecko
![Page 16: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/16.jpg)
![Page 17: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/17.jpg)
Device Specific HTML5 API’s - Qualcomm
• Audio Input
• Camera
• File System
• Screen Orientation
![Page 18: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/18.jpg)
Hybrid Apps
![Page 19: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/19.jpg)
Hybrids• PhoneGap (Apache Cordova)
• Sencha Touch
• Titanium
• Kendoui
• UXI (super micro tiny DOM lib)
• Zepto
• etc. . .
![Page 20: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/20.jpg)
![Page 21: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/21.jpg)
![Page 22: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/22.jpg)
Fluid Grids
![Page 23: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/23.jpg)
![Page 24: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/24.jpg)
Quick HTML5 Templates
![Page 25: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/25.jpg)
jQuery Mobile Starter Pages
![Page 26: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/26.jpg)
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.
![Page 27: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/27.jpg)
![Page 28: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/28.jpg)
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
![Page 29: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/29.jpg)
![Page 30: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/30.jpg)
Design
![Page 31: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/31.jpg)
Designing for all screens
![Page 32: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/32.jpg)
Design the experience
![Page 33: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/33.jpg)
![Page 34: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/34.jpg)
![Page 35: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/35.jpg)
Which way will they navigate the app?
![Page 36: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/36.jpg)
![Page 37: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/37.jpg)
Fireworks CS6
• CSS Sprites
• CSS Properties Panel
• jQuery theme creation
• New wireframing tools
• Gesture icons
![Page 38: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/38.jpg)
![Page 39: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/39.jpg)
![Page 40: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/40.jpg)
![Page 41: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/41.jpg)
![Page 42: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/42.jpg)
![Page 43: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/43.jpg)
PrototypingAnd things to make development easier
![Page 44: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/44.jpg)
![Page 45: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/45.jpg)
![Page 46: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/46.jpg)
![Page 47: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/47.jpg)
![Page 48: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/48.jpg)
![Page 49: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/49.jpg)
![Page 50: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/50.jpg)
![Page 51: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/51.jpg)
![Page 52: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/52.jpg)
![Page 53: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/53.jpg)
![Page 54: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/54.jpg)
![Page 55: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/55.jpg)
![Page 56: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/56.jpg)
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
![Page 57: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/57.jpg)
Edge Animate
![Page 58: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/58.jpg)
![Page 59: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/59.jpg)
![Page 60: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/60.jpg)
![Page 61: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/61.jpg)
![Page 62: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/62.jpg)
![Page 63: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/63.jpg)
![Page 64: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/64.jpg)
![Page 65: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/65.jpg)
![Page 66: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/66.jpg)
![Page 67: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/67.jpg)
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>
![Page 68: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/68.jpg)
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 [email protected]</h4> </div></div>
![Page 69: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/69.jpg)
![Page 70: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/70.jpg)
![Page 71: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/71.jpg)
![Page 72: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/72.jpg)
![Page 73: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/73.jpg)
![Page 74: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/74.jpg)
![Page 75: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/75.jpg)
![Page 76: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/76.jpg)
![Page 77: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/77.jpg)
PhoneGap Build in DW
![Page 78: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/78.jpg)
Working with native mobile
![Page 79: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/79.jpg)
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
![Page 80: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/80.jpg)
Thanks!
![Page 81: Dreamweaver CS6, jQuery, PhoneGap, mobile design](https://reader037.fdocuments.in/reader037/viewer/2022102814/54b732574a79595e468b4570/html5/thumbnails/81.jpg)