ADC MEETUP ROUND03 HTMLトラック SESSION 04 2011/11/13

1. Design Tips & Development
with
jQuery Mobile and PhoneGap
2011/11/13
ADC MEETUP ROUND 03

2. ( @GO_OHTANI )
web
HTML CSS JavaScript
webview
web

3. PC
web native

4. 1.
2.
3.
4. /web
5. /native

5. 1.
2.
3.
4. /web
5. /native

6. web native

7. index topics
information
program
session

8. ( )

9. 1.
2.
3.
4. /web
5. /native

10. DreamWeaver CS5.5
jQueryMobile
PhoneGap

11. jQuery Mobile
( http://jquerymobile.com/ )
web

12. jQuery Mobile
HTML5 Markup-driven
write less, do more
+PhoneGap

13. HTML5 Markup-driven
data-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. 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. 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-all
ui-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. ( http://jquerymobile.com/original-graded-browser-matrix/ )

17. +PhoneGap
( http://jquerymobile.com/original-graded-browser-matrix/ )

18. jQuery Mobile
iUI
jQTouch
Sencha Touch ..

19. iUI ( http://www.iui-js.org/ )
jQuery
iPhone
New BSD License

20. jQTouch ( http://jqtouch.com/ )
jQuery
Sencha Labs
MIT Licence

21. Sencha Touch ( http://jqtouch.com/ )
JavaScript
( )

22. jQuery Mobile ( http://jqtouch.com/ )

23. 1.
2.
3.
4. /web
5. /native

24. jQuery Mobile ( http://jqtouch.com/ )

25. Fireworks jQuery Mobile
Fireworks CS5
Fireworks CSS3 Mobile Pack
( http://labs.adobe.com/technologies/fireworks_css3mobile/ )

26. Fireworks CSS3 Mobile Pack
web
web
FireworksCS5
jQuery Mobile Theme Skinning
CSS Properties

27. jQuery Mobile Theme Skinning
jQuery Mobile

28. Fireworks CSS3 Mobile Pack
CSS Properties
CSS

29. Fireworks CSS3 Mobile Pack
CSS Properties
CSS
( ×)
( )
( )

30. Fireworks CSS3 Mobile Pack
Fireworks CSS3 Mobile Pack
ADC

31. /web
1.
2.
3.
4. /web
5. /native

33. /native
1.
2.
3.
4. /web
5. /native

34. PhoneGap
( http://phonegap.com/ )
nitobi
web native
API
(PhoneGap:Build)
Dreamweaver CS5.5

35. PhoneGap

36. ( http://phonegap.com/about/features )

37. Dreamweaver CS5.5
&
Android
DW PhoneGap Android SDK
build.xml
http://www.tricedesigns.com/2011/11/01/building-phonegap-applications-with-
dreamweaver/

38. PhoneGap:Build
( https://build.phonegap.com/ )
web
( )

40. DreamWeaver CS5.5