Design Tips & Development            withjQuery Mobile and PhoneGap                          2011/11/13                 AD...
( @GO_OHTANI )webHTML CSS JavaScript                   webview             web
PCweb        native
1.2.3.4.   /web5.   /native
1.2.3.4.   /web5.   /native
web   native
index   topics        information        program        session
(   )
1.2.3.4.   /web5.   /native
DreamWeaver CS5.5  jQueryMobile   PhoneGap
jQuery Mobile      ( http://jquerymobile.com/ )web
jQuery MobileHTML5 Markup-drivenwrite less, do more+PhoneGap
HTML5 Markup-drivendata-role             <div data-role="page" id="test">              <div data-role="header">           ...
write less, do more<div data-role="page" id="test"> <div data-role="header">   <h1>header</h1> </div> <div data-role="cont...
write less, do more<div data-role="page" id="test" data-url="test" class="ui-page ui-body-c ui-page-active"> <div data-rol...
( http://jquerymobile.com/original-graded-browser-matrix/ )
+PhoneGap( http://jquerymobile.com/original-graded-browser-matrix/ )
jQuery Mobile   iUI   jQTouch   Sencha Touch   ..
iUI              ( http://www.iui-js.org/ )jQueryiPhoneNew BSD License
jQTouch   ( http://jqtouch.com/ )jQuerySencha LabsMIT Licence
Sencha Touch       ( http://jqtouch.com/ )JavaScript               (    )
jQuery Mobile   ( http://jqtouch.com/ )
1.2.3.4.   /web5.   /native
jQuery Mobile   ( http://jqtouch.com/ )
Fireworks jQuery Mobile  Fireworks CS5     Fireworks CSS3 Mobile Pack( http://labs.adobe.com/technologies/fireworks_css3mob...
Fireworks CSS3 Mobile Pack            webwebFireworksCS5 jQuery Mobile Theme Skinning CSS Properties
jQuery Mobile Theme Skinning                jQuery Mobile
Fireworks CSS3 Mobile PackCSS Properties                                  CSS
Fireworks CSS3 Mobile PackCSS PropertiesCSS                 (   ×)             (            )                      (       )
Fireworks CSS3 Mobile PackFireworks CSS3 Mobile Pack    ADC
/web1.2.3.4.   /web5.   /native
/native1.2.3.4.   /web5.   /native
PhoneGap                                 ( http://phonegap.com/ )nitobiweb            native         API                  ...
PhoneGap
( http://phonegap.com/about/features )
Dreamweaver CS5.5          &AndroidDW            PhoneGap                        Android SDK                           bui...
PhoneGap:Build                       ( https://build.phonegap.com/ )web         (              )
DreamWeaver CS5.5
Design Tips & Development with jQuery Mobile and PhoneGap
Design Tips & Development with jQuery Mobile and PhoneGap
Design Tips & Development with jQuery Mobile and PhoneGap
Upcoming SlideShare
Loading in …5
×

Design Tips & Development with jQuery Mobile and PhoneGap

2,792 views
2,660 views

Published on

ADC MEETUP ROUND03
HTMLトラック
SESSION 04

2011/11/13

Published in: Design, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,792
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
364
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • jQueryMobile&amp;#x3068;PhoneGap&amp;#x3092;&amp;#x4F7F;&amp;#x7528;&amp;#x3057;&amp;#x305F;&amp;#x30B5;&amp;#x30A4;&amp;#x30C8;&amp;#x69CB;&amp;#x7BC9;\n&amp;#x305D;&amp;#x3057;&amp;#x3066;&amp;#x3001;jQueryMobile&amp;#x3068;&amp;#x76F8;&amp;#x6027;&amp;#x306E;&amp;#x826F;&amp;#x3044;&amp;#x30C7;&amp;#x30B6;&amp;#x30A4;&amp;#x30F3;&amp;#x30C4;&amp;#x30FC;&amp;#x30EB;&amp;#x3084;&amp;#x6A5F;&amp;#x80FD;&amp;#x306B;&amp;#x3064;&amp;#x3044;&amp;#x3066;&amp;#x7D39;&amp;#x4ECB;&amp;#x3057;&amp;#x3066;&amp;#x3044;&amp;#x304D;&amp;#x307E;&amp;#x3059;&amp;#x3002;\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Design Tips & Development with jQuery Mobile and PhoneGap

    1. 1. Design Tips & Development withjQuery Mobile and PhoneGap 2011/11/13 ADC MEETUP ROUND 03
    2. 2. ( @GO_OHTANI )webHTML CSS JavaScript webview web
    3. 3. PCweb native
    4. 4. 1.2.3.4. /web5. /native
    5. 5. 1.2.3.4. /web5. /native
    6. 6. web native
    7. 7. index topics information program session
    8. 8. ( )
    9. 9. 1.2.3.4. /web5. /native
    10. 10. DreamWeaver CS5.5 jQueryMobile PhoneGap
    11. 11. jQuery Mobile ( http://jquerymobile.com/ )web
    12. 12. jQuery MobileHTML5 Markup-drivenwrite less, do more+PhoneGap
    13. 13. HTML5 Markup-drivendata-role <div data-role="page" id="test"> <div data-role="header"> <h1>header</h1> </div> <div data-role="content">content</div> <div data-role="footer"> <h4>footer</h4> </div> </div>
    14. 14. write less, do more<div data-role="page" id="test"> <div data-role="header"> <h1>header</h1> </div> <div data-role="content">content</div> <div data-role="footer"> <h4>footer</h4> </div></div>
    15. 15. write less, do more<div data-role="page" id="test" data-url="test" class="ui-page ui-body-c ui-page-active"> <div data-role="header" class="ui-bar-a ui-header" role="banner"> <a href="#" class="ui-btn-left ui-btn ui-btn-up-a ui-btn-icon-left ui-btn-corner-allui-shadow" data-rel="back" data-icon="arrow-l" data-theme="a"> <span class="ui-btn-inner ui-btn-corner-all"> <span class="ui-btn-text">Back</span> <span class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span> </span> </a> <h1 class="ui-title" tabindex="0" role="heading" aria-level="1">header</h1> </div> <div data-role="content" class="ui-content" role="main">content</div> <div data-role="footer" class="ui-bar-a ui-footer" role="contentinfo"> <h4 class="ui-title" tabindex="0" role="heading" aria-level="1">footer</h4> </div></div>
    16. 16. ( http://jquerymobile.com/original-graded-browser-matrix/ )
    17. 17. +PhoneGap( http://jquerymobile.com/original-graded-browser-matrix/ )
    18. 18. jQuery Mobile iUI jQTouch Sencha Touch ..
    19. 19. iUI ( http://www.iui-js.org/ )jQueryiPhoneNew BSD License
    20. 20. jQTouch ( http://jqtouch.com/ )jQuerySencha LabsMIT Licence
    21. 21. Sencha Touch ( http://jqtouch.com/ )JavaScript ( )
    22. 22. jQuery Mobile ( http://jqtouch.com/ )
    23. 23. 1.2.3.4. /web5. /native
    24. 24. jQuery Mobile ( http://jqtouch.com/ )
    25. 25. Fireworks jQuery Mobile Fireworks CS5 Fireworks CSS3 Mobile Pack( http://labs.adobe.com/technologies/fireworks_css3mobile/ )
    26. 26. Fireworks CSS3 Mobile Pack webwebFireworksCS5 jQuery Mobile Theme Skinning CSS Properties
    27. 27. jQuery Mobile Theme Skinning jQuery Mobile
    28. 28. Fireworks CSS3 Mobile PackCSS Properties CSS
    29. 29. Fireworks CSS3 Mobile PackCSS PropertiesCSS ( ×) ( ) ( )
    30. 30. Fireworks CSS3 Mobile PackFireworks CSS3 Mobile Pack ADC
    31. 31. /web1.2.3.4. /web5. /native
    32. 32. /native1.2.3.4. /web5. /native
    33. 33. PhoneGap ( http://phonegap.com/ )nitobiweb native API (PhoneGap:Build)Dreamweaver CS5.5
    34. 34. PhoneGap
    35. 35. ( http://phonegap.com/about/features )
    36. 36. Dreamweaver CS5.5 &AndroidDW PhoneGap Android SDK build.xmlhttp://www.tricedesigns.com/2011/11/01/building-phonegap-applications-with- dreamweaver/
    37. 37. PhoneGap:Build ( https://build.phonegap.com/ )web ( )
    38. 38. DreamWeaver CS5.5

    ×