Dreamweaver CS6, jQuery, PhoneGap, mobile design


Published on

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

Published in: Technology, Design
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Dreamweaver CS6, jQuery, PhoneGap, mobile design

  1. 1. Creating applications fast for multiple screenswith appearances of jQuery mobile, PhoneGap and Dreamweaver CS6
  2. 2. Dee Sadler Adobe Community Professional Adobe Certified Expert / Instructor Adobe Freelancer ProgramUI Strategist/Android/HTML/CSS geek for Sprint Dreamweaver and Fireworks CS5 videos for Total Training and Adobe TV (CS6) Hybrid @DeeSadler
  3. 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
  4. 4. 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  
  5. 5. ProsCorporate websites and blogs that don’t require Corporate websites and blogs that don’t requireextensive user input extensive user inputOne Code Base One Code BaseDevice Agnostic Device AgnosticNot just a tool forfor mobile Not just a tool mobileIf done right, can bebe fast If done right, can fast
  6. 6. SprintZone   5.0… HTML5 Sprint  customers   visi5ng  our  .com  site   are  prompted  to   download  our  Web   App.
  7. 7. Boot2Gecko
  8. 8. Device Specific HTML5 API’s - Qualcomm• Audio Input• Camera• File System• Screen Orientation
  9. 9. Hybrid Apps
  10. 10. Hybrids• PhoneGap (Apache Cordova)• Sencha Touch• Titanium• Kendoui• UXI (super micro tiny DOM lib)• Zepto• etc. . .
  11. 11. Fluid Grids
  12. 12. Quick HTML5 Templates
  13. 13. jQuery Mobile Starter Pages
  14. 14. 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.
  15. 15. 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.
  16. 16. Design
  17. 17. Designing for all screens
  18. 18. Design the experience
  19. 19. Which way will they navigate the app?
  20. 20. Fireworks CS6• CSS Sprites• CSS Properties Panel• jQuery theme creation• New wireframing tools• Gesture icons
  21. 21. PrototypingAnd things to make development easier
  22. 22. 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
  23. 23. Edge Animate
  24. 24. 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>
  25. 25. 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"><?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>
  26. 26. PhoneGap Build in DW
  27. 27. Working with native mobile
  28. 28. 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, addedtogether (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 adensity-independent way.The density-independent pixel is equivalent to one physical pixel on a 160 dpi screen, which is the baselinedensity assumed by the system for a "medium" density screen. At runtime, the system transparently handles anyscaling of the dp units, as necessary, based on the actual density of the screen in use. The conversion of dp unitsto screen pixels is simple: px = dp * (dpi / 160). For example, on a 240 dpi screen, 1 dp equals 1.5 physicalpixels.You should always use dp units when defining your applications UI, to ensure proper display of your UIon screens with different densities.http://developer.android.com/guide/practices/screens_support.html
  29. 29. Thanks!