Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Cross-Platform Web Apps with jQuery Mobile

Kai Toedter
May 15, 2014
Programming
1
4.4k

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.

Kai Toedter

May 15, 2014
Tweet

More Decks by Kai Toedter

See All by Kai Toedter
Hyper, Hyper! Bootiful RESTful Hypermedia APIs with Spring
toedter
0
470
Bootiful REST Services with Spring
toedter
0
670
Modern Web Apps with Spring Boot & Angular
toedter
14
16k
HAL-Explorer: The easiest way to explore HAL/HAL-FORMS based APIs
toedter
0
530
JSON:API for Spring HATEOAS
toedter
0
18k
Hello REST API: What can I do next?
toedter
3
3.5k
Microservices with Spring Boot, Angular, Docker and Terraform
toedter
2
7.5k
RESTful Hypermedia APIs
toedter
2
9k
Infrastructure as Code: Build Pipelines with Docker and Terraform
toedter
1
4.7k

Other Decks in Programming

See All in Programming
Kaigi on Rails 2024 - Rails APIモードのためのシンプルで効果的なCSRF対策 / kaigionrails-2024-csrf
corocn
5
3.3k
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
3
390
Piniaの現状と今後
waka292
5
1.4k
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
11
2.3k
とにかくAWS GameDay！AWSは世界の共通言語！ / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
530
Pinia Colada が実現するスマートな非同期処理
naokihaba
2
150
プロジェクト新規参入者のリードタイム短縮の観点から見る、品質の高いコードとアーキテクチャを保つメリット
d_endo
1
1k
Android 15 でアクションバー表示時にステータスバーが白くなってしまう問題
tonionagauzzi
0
140
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
360
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
570
Vue.js学習の振り返り
hiro_xre
2
130
OpenTelemetryでRailsのパフォーマンス分析を始めてみよう（KoR2024）
ymtdzzz
4
1.5k

Featured

See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
How to Think Like a Performance Engineer
csswizardry
19
1.1k
Visualization
eitanlees
144
15k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
The Art of Programming - Codeland 2020
erikaheidi
51
13k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
41
2.1k
Six Lessons from altMBA
skipperchong
26
3.5k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
How to Ace a Technical Interview
jacobian
275
23k
Designing for Performance
lara
604
68k

Transcript

  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: [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.

  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: