Cross-Platform Web Apps with jQuery Mobile

These are a few slides that I use to introduce jQuery Mobile. This slide deck is NOT supposed to be an overview of all (or even most of) the jQuery Mobile features. It is intended to be used in conjunction with live coding and demos. You find all the demos at https://github.com/toedter/jquery-mobile-demos. This work is licensed under a Creative Commons Attribution 4.0 International License.

1. Cross-Platform Web Apps with jQuery Mobile Kai Tödter 5/25/2014 1 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
2. Who am I?  Senior Software System Architect at Siemens Building Technologies  Eclipse expert and OSGi enthusiast  UX and Web Technology lover  Committer at several OSS projects  E-mail: kai@toedter.com  Twitter: twitter.com/kaitoedter  Google+: gplus.to/toedter  Blog: toedter.com/blog 5/25/2014 2 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
3. Show Hands! 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 3 Picture by lusi, http://www.sxc.hu/photo/1068224
4. Why jQuery Mobile? 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 4 Picture by beermug http://www.sxc.hu/photo/1393941
5. After this session I’ll get an Idea! 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 5 Picture by beermug http://www.sxc.hu/photo/1393939
6. Outline  jQuery Mobile Introduction  Showcases + Live Demo  Discussion and questions 5/25/2014 6 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License.
7. Key Features  Supports almost all devices that provide a Web Browser  “Mobile First” approach, but works also great on Desktop!  HTML Progressive Enhancement  Responsive Design  Common UI Widget Set, optimized for Touch  Great Theming Capabilities  … 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 7
8. Rock Solid Foundation 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 8 Picture by satty4u, http://www.sxc.hu/photo/890371
9. 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 9 Picture by Egilshay http://www.sxc.hu/photo/1095604 Excellent Documentation
10. jQuery Mobile API Online Doc 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 10
11. jQuery Mobile API Online Demos 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 11
12. HTML Page Structure <!DOCTYPE html> <html> <head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="jquery.mobile.min.css" /> <script src="jquery.min.js"></script> <script src="jquery.mobile.min.js"></script> </head> <body> … </body> </html> 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 12
13. Play a Role! 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 13 Picture by miamiamia, http://www.sxc.hu/photo/1168590
14. data-role <div data-role="page" > <div data-role="header" > <h1>My Header</h1> </div> <div data-role="content" > <p>My Content</p> </div> <div data-role="footer" data-position="fixed"> <h4>My Footer</h4> </div> </div> 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 14
15. Hello jQuery Mobile! 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 15
16. Multi Page <body> <div data-role="page" id="foo"> <div data-role="content"> <p>View internal page called <a href="#bar">bar</a></p> </div> </div> <div data-role="page" id="bar"> <div data-role="content"> <p><a href="#foo">Back to foo</a></p> </div> </div> </body> 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 16
17. Widgets, Lots of Widgets… 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 17
18. List View Examples 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 18
19. List View <ul data-role="listview"> <li><a href="acura.html">Acura</a></li> <li><a href="audi.html">Audi</a></li> <li><a href="bmw.html">BMW</a></li> </ul> 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 19
20. Theming 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 20 Picture from http://www.sxc.hu/photo/1089931
21. http://jquerymobile.com/themeroller 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 21
22. http://www.jqmgallery.com 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 22
23. Plugins 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 23 Picture by klsa12, http://www.sxc.hu/photo/1269461
24. jQuery Mobile Plugins (1) 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 24
25. jQuery Mobile Plugins (2) 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 25
26. jQuery Mobile + HTML 5 Canvas 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 26
27. Download Builder 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 27
28. Roadmap 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 28 Picture by fcl1971 http://www.sxc.hu/photo/1081630 http://jquerymobile.com/roadmap/
29. Demo 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 29
30. Live Demos https://github.com/toedter/jquery-mobile-demos 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 30 Picture by flaivoloka http://www.sxc.hu/photo/1159613
31. 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 31 Picture from http://www.sxc.hu/photo/922004
32. License & Acknowledgements  This work is licensed under a Creative Commons Attribution 4.0 International License.  See http://creativecommons.org/licenses/by/4.0/  Thanks to Heiko Behrens for his great Device Screenshot Tools  Thanks to Gerrit Grunwald for his great steelseries,  See https://github.com/HanSolo/SteelSeries-Canvas 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 32
33. Picture Index  Slide “Application Model”: http://www.sxc.hu/photo/1168590  Slide “Rendering”: http://www.sxc.hu/photo/1263022  Slide “UI Styling”: http://www.sxc.hu/photo/1089931  Slide “Discussion”: http://www.sxc.hu/photo/922004  Slide “Excellent Documentation”: http://www.sxc.hu/photo/1095604  Slide “Show Hands”: http://www.sxc.hu/photo/1068224  Slide “Why”: http://www.sxc.hu/photo/1393941  Slide “After the session…”: http://www.sxc.hu/photo/1393939 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 33 Many thanks to the authors of the following pictures: