1. jQuery Mobile HTML5 2013/07/23 2 HTML5 Toru Yoshikawa (@yoshikawa_t)

2. Who? Google Developer Experts (Chrome) html5jHTML5 () HTML5 Experts.jp No.3 Web ()jQuery Mobile ()Sublime Text 2 Japan Users Group ()allWeb jQuery Mobile Blog: http://d.hatena.ne.jp/pikotea/ / Toru Yoshikawa @yoshikawa_t

3. Agenda jQuery Mobile jQuery MobileHTML5

4. jQuery Mobile

5. jquerymobile.com

6. jQuery Mobile HTML5 jQuery

7. jQuery Mobile

8. Live coding

9. jQuery Mobile HTML5

10. jQuery Mobile data-* attributes

11. border-radius .ui-corner-all { border-radius: 0.6em; }

12. linear-gradient .ui-btn-up-b { background-image: linear-gradient(#5f9cc5, #396b9e); }

13. box-shadow .ui-shadow { box-shadow: 0 1px 3px; }

14. text-shadow .ui-btn-hover-c { text-shadow: 0 1px 0 #f; }

15. CSS3 Transform transform: rotateY(-90deg) scale(0.9);

16. CSS3 Animations @keyframes popin { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } .pop.in { animation: popin 350ms; }

17. CSS3 Transitions .ui-panel-animate { transition: transform 350ms ease; }

18. CSS3 Media Queries @media all and (max-width: 35em) { /* styles */ }

19. History API jQuery Mobile pjax (Ajax + pushState) Ajax URL

20. Getting more jQuery Mobile http://slidesha.re/11bc17l jQuery Mobile 1.1 & Tips http://slidesha.re/16WsnPO jQuery Mobile 1.2 & Tips http://slidesha.re/12evK8O jQuery Mobile v1.2 http://slidesha.re/16WspaC jQuery Mobile 1.3 http://slidesha.re/19f2OzT

21. Thank you!! ( @yoshikawa_t )