Slide 1

Slide 1 text

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.

Slide 2

Slide 2 text

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: [email protected]  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.

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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.

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

jQuery Mobile API Online Doc 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 10

Slide 11

Slide 11 text

jQuery Mobile API Online Demos 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 11

Slide 12

Slide 12 text

HTML Page Structure My Page … 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 12

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

data-role

My Header

My Content

My Footer

5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 14

Slide 15

Slide 15 text

Hello jQuery Mobile! 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 15

Slide 16

Slide 16 text

Multi Page

View internal page called bar

Back to foo

5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 16

Slide 17

Slide 17 text

Widgets, Lots of Widgets… 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 17

Slide 18

Slide 18 text

List View Examples 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 18

Slide 19

Slide 19 text

List View

Acura
Audi
BMW

5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 19

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

http://jquerymobile.com/themeroller 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 21

Slide 22

Slide 22 text

http://www.jqmgallery.com 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 22

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

jQuery Mobile Plugins (1) 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 24

Slide 25

Slide 25 text

jQuery Mobile Plugins (2) 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 25

Slide 26

Slide 26 text

jQuery Mobile + HTML 5 Canvas 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 26

Slide 27

Slide 27 text

Download Builder 5/25/2014 © Kai Tödter and others, Licensed under a Creative Commons Attribution 4.0 International License. 27

Slide 28

Slide 28 text

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/

Slide 29

Slide 29 text

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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: