Design Tips & Development with jQuery Mobile and PhoneGap

2,812 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,812
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
364
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • jQueryMobileとPhoneGapを使用したサイト構築\nそして、jQueryMobileと相性の良いデザインツールや機能について紹介していきます。\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

    ×