Mobile Apps with jQuery Mobile - sigs.de ?· Mobile Apps with jQuery Mobile Kai Tödter Siemens Building…

  • Published on
    04-Jun-2018

  • View
    212

  • Download
    0

Embed Size (px)

Transcript

  • Mobile Apps with jQuery Mobile

    Kai Tdter Siemens Building Technologies

  • Who am I?

    Senior Software System Architect at Siemens Building Technologies

    Eclipse expert and OSGi enthusiast

    Web Technology expert

    Committer at several OSS projects

    E-mail: kai.toedter@siemens.com

    Twitter: twitter.com/kaitoedter

    Google+: gplus.to/toedter

    Blog: toedter.com/blog

    1/13/2014 2 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

  • Show Hands!

    1/13/2014 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 3

    Picture by lusi, http://www.sxc.hu/photo/1068224

  • Why jQuery Mobile?

    1/13/2014 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 4

    Picture by beermug http://www.sxc.hu/photo/1393941

  • After this session Ill get an Idea!

    1/13/2014 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 5

    Picture by beermug http://www.sxc.hu/photo/1393939

  • Outline

    jQuery Mobile Introduction

    Showcases + Live Demo

    Discussion and questions

    1/13/2014 6 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.

  • 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

    1/13/2014 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 7

  • Rock Solid Foundation

    1/13/2014 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 8

    Picture by satty4u, http://www.sxc.hu/photo/890371

  • 1/13/2014 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 9

    Picture by Egilshay http://www.sxc.hu/photo/1095604

    Excellent Documentation

  • jQuery Mobile API Online Doc

    1/13/2014 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 10

  • jQuery Mobile API Online Demos

    1/13/2014 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 11

  • HTML Page Structure

    My Page

    1/13/2014 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 12

  • Play a Role!

    1/13/2014 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 13

    Picture by miamiamia, http://www.sxc.hu/photo/1168590

  • data-role My Header

    My Content

    My Footer

    1/13/2014 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 14

  • Hello jQuery Mobile!

    1/13/2014 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 15

  • Multi Page

    View internal page called bar

    Back to foo

    1/13/2014 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 16

  • Widgets, Lots of Widgets

    1/13/2014 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 17

  • List View Examples

    1/13/2014 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 18

  • List View

    Acura

    Audi

    BMW

    1/13/2014 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 19

  • Theming

    1/13/2014 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 20

    Picture from http://www.sxc.hu/photo/1089931

  • http://jquerymobile.com/themeroller

    1/13/2014 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 21

  • http://www.jqmgallery.com

    1/13/2014 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 22

  • Plugins

    1/13/2014 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 23

    Picture by klsa12, http://www.sxc.hu/photo/1269461

  • jQuery Mobile Plugins (1)

    1/13/2014 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 24

  • jQuery Mobile Plugins (2)

    1/13/2014 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 25

  • jQuery Mobile + HTML 5 Canvas

    1/13/2014 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 26

  • Download Builder

    1/13/2014 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 27

  • Roadmap

    1/13/2014 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 28

    Picture by fcl1971 http://www.sxc.hu/photo/1081630

    http://jquerymobile.com/roadmap/

  • Demo

    1/13/2014 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 29

  • Live Demos

    https://github.com/toedter/jquery-mobile-demos

    1/13/2014 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 30

    Picture by flaivoloka http://www.sxc.hu/photo/1159613

  • 1/13/2014 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 31

    Picture from http://www.sxc.hu/photo/922004

  • License & Acknowledgements

    This work is licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License

    See http://creativecommons.org/licenses/by-nc-nd/3.0/de/deed.en_US

    Thanks to Heiko Behrens for his great Device Screenshot Tools

    Thanks to Gerrit Grunwald for his great steelseries, https://github.com/HanSolo/SteelSeries-Canvas

    1/13/2014 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 32

    http://creativecommons.org/licenses/by-nc-nd/3.0/de/deed.en_UShttp://creativecommons.org/licenses/by-nc-nd/3.0/de/deed.en_UShttp://creativecommons.org/licenses/by-nc-nd/3.0/de/deed.en_UShttp://creativecommons.org/licenses/by-nc-nd/3.0/de/deed.en_UShttp://creativecommons.org/licenses/by-nc-nd/3.0/de/deed.en_US

  • 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

    1/13/2014 Kai Tdter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 33

    Many thanks to the authors of the following pictures:

    http://www.sxc.hu/photo/1168590http://www.sxc.hu/photo/1263022http://www.sxc.hu/photo/1089931http://www.sxc.hu/photo/1089931http://www.sxc.hu/photo/922004http://www.sxc.hu/photo/922004http://www.sxc.hu/photo/1095604http://www.sxc.hu/photo/1095604http://www.sxc.hu/photo/1068224http://www.sxc.hu/photo/1068224http://www.sxc.hu/photo/1393941http://www.sxc.hu/photo/1393941http://www.sxc.hu/photo/1393939http://www.sxc.hu/photo/1393939

Recommended

View more >