Developing Mobile Solutions with Adobe CS6

Chris Griffith will show the new tools in CS6 for getting content onto any device. He will show how to take your ideas to the mobile web and beyond with Dreamweaver, Fireworks, and PhoneGap. He will also show the tools in Flash Pro CS6 for authoring incredible experiences in Flash, and publishing for iOS and Android platforms. He will explore the new HTML5 publishing features (Create.js) and improvements in 3D and gaming. Chris will even give you a sneak peek at a new technology from Adobe, code-named "Shadow", for improving the mobile development workflow.

Transcript

1. Developing  Mobile  Solu/ons  
   with  Adobe  CS6  
   @ChrisGriffith  
   

   View Slide

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

   View Slide

3. View Slide

4. What  PlaIorm?  
   4  
   

   View Slide

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

   View Slide

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  
   

   View Slide

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  
   

   View Slide

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  
   

   View Slide

9. View Slide

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

    View Slide

11. Intro  to  jQuery  Mobile  
    

    View Slide

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

    View Slide

13. 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!)  
    

    View Slide

14. View Slide

15. 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).  
    

    View Slide

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

    View Slide

17.  
     
     
    Page  Title/tle>  
     jquery.mobile-­‐1.0.min.css"  />  
       
     jquery.mobile-­‐1.0.min.js">  
     
     
     
     
     
     
    

    View Slide

18. 
    
    
    Page Title
    
    
    My page content
    
    
    Footer
    
    
    
    

    View Slide

19. 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.  
    

    View Slide

20.  
     
       
       Page  Title  
       
       
       My  page  content  
       
       
       Footer  
       
     
     
    

    View Slide

21.  
    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.  
    

    View Slide

22.  
    Contains  the  main  content  of  the  page,  such  as  
    text,  images,  bu`ons,  lists,  forms,  and  so  on.  
    

    View Slide

23.  
    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.  
    

    View Slide

24. Pages  within  pages  
     
     
       
       Page  Title  
       
       
       My  page  content  
       About  this  app  
       
       
       Footer  
       
     
     
       
       About  This  App  
       
       
       This  app  rocks!  Go  home  
       
     
     
    

    View Slide

25. Page  transi/ons  
    •  slide  
    •  slideup  
    •  slidedown  
    •  slidefade  
    •  pop  
    •  fade  
    •  flip  
    •  flow  
    •  turn  
    About  this  app
    a>  
    

    View Slide

26. Bu`ons  
    To  turn  a  link  into  a  bu`on  in  jQuery  Mobile,  
    simply  add  data-­‐role="bu`on"  to  the  a  tag:  
     
    About  
    this  app  
    

    View Slide

27. 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:  
    role="bu`on"  data-­‐icon="info">About  this  
    app  
    

    View Slide

28. Grouped  Bu`ons  
     
       
       About  This  App  
       
       
       Does  app  rocks?  
         
         Yes  
         No  
         Maybe  
         
       
     
    

    View Slide

29. 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.  
    

    View Slide

30. List  Code  -­‐  Sample  
     
     class="ui-­‐li-­‐thumb">  
     Fly  by  Night  
     (1975)  
       
     
    

    View Slide

31. 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.  
    

    View Slide

32. Back?  
    btn="true">  
     
    OR  
     
     
     <br/>$(document).bind("mobileinit",  func/on(){  <br/>  $.mobile.page.prototype.op/ons.addBackBtn=true;  <br/>});  <br/>  
    jquery.mobile-­‐1.0.min.js">  
    

    View Slide

33. View Slide

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

    View Slide

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

    View Slide

36. Theming  Tools  
    

    View Slide

37. View Slide

38.  
    densitydpi=high-­‐dpi,  width=device-­‐width,  ini/al-­‐
    scale=1.0,  maximum-­‐scale=1.0,  user-­‐
    scalable=no"/>  
    content="yes"  />  
    bar-­‐style"  content="black"  />  
    See  h`p://www.html5rocks.com/en/mobile/mobifying/  
    

    View Slide

39. Tabs  
         
       
         
         One  
         Two  
         Three  
         
       
     
    

    View Slide

40. 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.  
     
    

    View Slide

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

    View Slide

42. 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  Header!  
     
         
    Fixed  footer  markup  example:  
       
     
     Fixed  Footer!  
     
    

    View Slide

43. 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.    
    

    View Slide

44. Persistent  Footer  naviga/on  bar  
     
       
         
         Friends  
         Albums  
         Emails  
         Info  
         
       
     
     
    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.  
     
    Info  
    

    View Slide

45. 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.  
    

    View Slide

46. View Slide

47. View Slide

48. View Slide

49. View Slide

50. •  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…  
    

    View Slide

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

    View Slide

52. What  is  PhoneGap  
    Your  Code  
    

    View Slide

53. What  is  PhoneGap  
    Your  Code  
    Na=ve  Web  View  
    

    View Slide

54. What  is  PhoneGap  
    Your  Code  
    Na=ve  Web  View  
    Na=ve  APIs  
    

    View Slide

55. What  is  PhoneGap  
    Your  Code  
    Na=ve  Web  View  
    Na=ve  APIs  
    Na=ve  App  -­‐  .apk,  .ipa,  etc  
    

    View Slide

56. What  plaRorms  support  PhoneGap  
    

    View Slide

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

    View Slide

58. 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  
    

    View Slide

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

    View Slide

60. Phone  Community  
    

    View Slide

61. Building  it  
    phonegap.com/start  
    

    View Slide

62. Building  it  
    build.phonegap.com  
    

    View Slide

63. Building  it  
     
    

    View Slide

64. Building  it  
    

    View Slide

65. 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  
    

    View Slide

66. Camera  API  example  
    

    View Slide

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

    View Slide

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

    View Slide

69. 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.  
    

    View Slide

70. Debugging  
    

    View Slide

71. 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    
     
    

    View Slide

72. View Slide

73. Intro to Flash Professional CS6
    

    View Slide

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

    View Slide

75. View Slide

76. 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
    

    View Slide

77. Sprite Sheet Generation
    

    View Slide

78. 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
    

    View Slide

79. 
    

    View Slide

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

    View Slide