SlideShare a Scribd company logo
1 of 16
Download to read offline
Haim Michael
December 20th, 2013

All logos, trade marks and brand names used in this presentation belong
to the respective owners.
You can watch the video clip at http://youtu.be/zFSTN8JnFEk.

LifeMichael.com

jQueryMobile Jump Start
●

Introduction to jQueryMobile

●

Clean Semantic HTML

●

Web Browsers Compatibility

●

Platforms Compatibility

●

HTML5 Capabilities

●

Handling User Events

●

Themes Framework

●

The Codiqa Designer Tool

●

jQueryMobile Alternatives

●

Learning Resources

●

Questions & Answers

LifeMichael.com

Table of Content
●

The jQueryMobile JavaScript library allows us to create a
unified user interface that works across most smartphone
web browsers and tablets.

●

The jQueryMobile library uses the well known jQuery
library.
www.jquerymobile.com www.jquery.com

●

www.jqueryui.com

If you are not familiar with JavaScript you might want to
check my JavaScript Jump Start.

LifeMichael.com

Introduction to jQueryMobile
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href=
"http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js">
</script>
<script src=
"http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js">
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Simple List Demo</h1>
</div>

LifeMichael.com

Introduction to jQueryMobile
<div data-role="content">
<ul data-role="listview" data-theme="c">
<li><a href="http://www.google.com">google</a></li>
<li><a href="http://www.oracle.com">oracle</a></li>
<li><a href="http://www.microsoft.com">microsoft</a></li>
<li><a href="http://www.ibm.com">ibm</a></li>
<li><a href="http://www.intel.com">intel</a></li>
<li><a href="http://www.samsung.com">samsung</a></li>
<li><a href="http://www.nokia.com">nokia</a></li>
<li><a href="http://www.apple.com">apple</a></li>
<li><a href="http://www.sony.com">sony</a></li>
<li><a href="http://www.lenovo.com">lenovo</a></li>
</ul>
</div>
<div data-role="footer">
<h4>lifemichael</h4>
</div>
</div>
</body>
</html>

LifeMichael.com

Introduction to jQueryMobile
http://www.lifemichael.com/jqmdemo.html

LifeMichael.com

Introduction to jQueryMobile
●

The jQuery Mobile is built on top of a simple usage of
clean semantic HTML.

●

When the web browser supports CSS and JavaScript,
jQueryMobile applies progressive enhancements
techniques that transform the semantic page into a rich
interactive user interface one.

LifeMichael.com

Clean Semantic HTML
●

The jQueryMobile library is compatible with most mobile
web browsers.

LifeMichael.com

Web Browsers Compatibility
●

The jQueryMobile library is compatible with most mobile
platforms.

http://jquerymobile.com/gbs/

LifeMichael.com

Platforms Compatibility
●

The jQuery Mobile utilizes HTML5 capabilities. Using
jQueryMobile we indirectly exploit the power of HTML5.

HTML5 Jump Start

LifeMichael.com

HTML5 Capabilities
●

The jQuery Mobile library supports new events relevant
for mobile platforms, such as touching and dragging.
Handling Touch Events Code Sample

LifeMichael.com

Handling User Events
●

We can create our own theme or use one of the many
themes that were already created.

●

The ThemeRoller provides us with a visual simple way
for creating our own customized theme.
http://jquerymobile.com/themeroller/

LifeMichael.com

Themes Frameworks
●

Codiqa is a powerful drag-and-drop IDE for creating
cross-platform mobile hybrid applications and websites.
https://codiqa.com/

LifeMichael.com

The Codiqa Designer Tool
http://www.sencha.com/products/touch/

http://ionicframework.com/

http://app-framework-software.intel.com/

http://www.kendoui.com/

LifeMichael.com

JQueryMobile Alternatives
●

http://www.jquerymobile.com
This is jQueryMobile main website. It includes detailed
documentation and links for other relevant resources.

●

http://www.jqmgallery.com
This website includes samples for hybrid applications for mobile
telephone that were developed using jQueryMobile.

●

http://abelski.lifemichael.com
This website includes an online free course for learning how to
use jQueryMobile. You will find it inside the JavaScript
frameworks category.

LifeMichael.com

Learning Resources
●

Two courses you might find interesting include
Software Engineering in PHP
more info
Android 4.4 Java Applications Development
more info
HTML5 Cross Platform Mobile Applications
more info

●

If you enjoyed my lecture please leave me a comment
at http://speakerpedia.com/speakers/life-michael.
Thanks for your time!
Haim.

LifeMichael.com

Questions & Answers

More Related Content

What's hot

jQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web PerformancejQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web Performance
dmethvin
 

What's hot (20)

jQuery Mobile UI
jQuery Mobile UIjQuery Mobile UI
jQuery Mobile UI
 
Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap Advanced JQuery Mobile tutorial with Phonegap
Advanced JQuery Mobile tutorial with Phonegap
 
jQuery Mobile: Progressive Enhancement with HTML5
jQuery Mobile: Progressive Enhancement with HTML5jQuery Mobile: Progressive Enhancement with HTML5
jQuery Mobile: Progressive Enhancement with HTML5
 
Adobe & HTML5
Adobe & HTML5Adobe & HTML5
Adobe & HTML5
 
Accessibility - A feature you can build
Accessibility - A feature you can buildAccessibility - A feature you can build
Accessibility - A feature you can build
 
Real World Web components
Real World Web componentsReal World Web components
Real World Web components
 
jQuery Conference Chicago - September 2014
jQuery Conference Chicago - September 2014jQuery Conference Chicago - September 2014
jQuery Conference Chicago - September 2014
 
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile FrameworkBuilding a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
Building a Simple Mobile-optimized Web App Using the jQuery Mobile Framework
 
Fundamental JQuery
Fundamental JQueryFundamental JQuery
Fundamental JQuery
 
Building jQuery Mobile Web Apps
Building jQuery Mobile Web AppsBuilding jQuery Mobile Web Apps
Building jQuery Mobile Web Apps
 
State of jQuery June 2013 - Portland
State of jQuery June 2013 - PortlandState of jQuery June 2013 - Portland
State of jQuery June 2013 - Portland
 
Harness jQuery Templates and Data Link
Harness jQuery Templates and Data LinkHarness jQuery Templates and Data Link
Harness jQuery Templates and Data Link
 
JsViews - Next Generation jQuery Templates
JsViews - Next Generation jQuery TemplatesJsViews - Next Generation jQuery Templates
JsViews - Next Generation jQuery Templates
 
jQuery Mobile Introduction ( demo on EZoapp )
jQuery Mobile Introduction ( demo on EZoapp )jQuery Mobile Introduction ( demo on EZoapp )
jQuery Mobile Introduction ( demo on EZoapp )
 
Building Mobile Applications with Ionic
Building Mobile Applications with IonicBuilding Mobile Applications with Ionic
Building Mobile Applications with Ionic
 
Jquery Cheatsheet
Jquery CheatsheetJquery Cheatsheet
Jquery Cheatsheet
 
Introduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for AllIntroduction to jQuery Mobile - Web Deliver for All
Introduction to jQuery Mobile - Web Deliver for All
 
jQuery Conference Toronto
jQuery Conference TorontojQuery Conference Toronto
jQuery Conference Toronto
 
jQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web PerformancejQuery Conference San Diego 2014 - Web Performance
jQuery Conference San Diego 2014 - Web Performance
 
J Query Presentation
J Query PresentationJ Query Presentation
J Query Presentation
 

Similar to jQueryMobile Jump Start

Intro j query_mobile_mojo
Intro j query_mobile_mojoIntro j query_mobile_mojo
Intro j query_mobile_mojo
Jeff Tillett
 
HTML5 Jump Start
HTML5 Jump StartHTML5 Jump Start
HTML5 Jump Start
Haim Michael
 

Similar to jQueryMobile Jump Start (20)

Android crash course_20180812
Android crash course_20180812Android crash course_20180812
Android crash course_20180812
 
DrupalCamp NH
DrupalCamp NHDrupalCamp NH
DrupalCamp NH
 
Start IoT with jQueryMobile - 기초1
Start IoT with jQueryMobile - 기초1Start IoT with jQueryMobile - 기초1
Start IoT with jQueryMobile - 기초1
 
Introduction to jQueryMobile
Introduction to jQueryMobileIntroduction to jQueryMobile
Introduction to jQueryMobile
 
Intro j query_mobile_mojo
Intro j query_mobile_mojoIntro j query_mobile_mojo
Intro j query_mobile_mojo
 
Android Jump Start
Android Jump StartAndroid Jump Start
Android Jump Start
 
How to create high scalable JavaScript apps for Java Portals
How to create high scalable JavaScript apps for Java PortalsHow to create high scalable JavaScript apps for Java Portals
How to create high scalable JavaScript apps for Java Portals
 
Jquery mobile
Jquery mobileJquery mobile
Jquery mobile
 
Frameworks in JavaScript
Frameworks in JavaScriptFrameworks in JavaScript
Frameworks in JavaScript
 
Jquery
Jquery Jquery
Jquery
 
Best Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile AppBest Practices in Mobile Development: Building Your First jQuery Mobile App
Best Practices in Mobile Development: Building Your First jQuery Mobile App
 
Quick prototyping apps using JS - Ciklum, Vinnitsa
Quick prototyping apps using JS - Ciklum, VinnitsaQuick prototyping apps using JS - Ciklum, Vinnitsa
Quick prototyping apps using JS - Ciklum, Vinnitsa
 
Upstate CSCI 450 jQuery
Upstate CSCI 450 jQueryUpstate CSCI 450 jQuery
Upstate CSCI 450 jQuery
 
Jquery
JqueryJquery
Jquery
 
Webpage Design Using Templates and Online WYSIWYG Platforms
Webpage Design Using Templates and Online WYSIWYG PlatformsWebpage Design Using Templates and Online WYSIWYG Platforms
Webpage Design Using Templates and Online WYSIWYG Platforms
 
Cross Platform Mobile Development
Cross Platform Mobile DevelopmentCross Platform Mobile Development
Cross Platform Mobile Development
 
jQuery - Chapter 1 - Introduction
 jQuery - Chapter 1 - Introduction jQuery - Chapter 1 - Introduction
jQuery - Chapter 1 - Introduction
 
HTML5 Jump Start
HTML5 Jump StartHTML5 Jump Start
HTML5 Jump Start
 
Jquery mobile book review
Jquery mobile book reviewJquery mobile book review
Jquery mobile book review
 
2011 08-24 mobile web app
2011 08-24  mobile web app2011 08-24  mobile web app
2011 08-24 mobile web app
 

More from Haim Michael

More from Haim Michael (20)

Anti Patterns
Anti PatternsAnti Patterns
Anti Patterns
 
Virtual Threads in Java
Virtual Threads in JavaVirtual Threads in Java
Virtual Threads in Java
 
MongoDB Design Patterns
MongoDB Design PatternsMongoDB Design Patterns
MongoDB Design Patterns
 
Introduction to SQL Injections
Introduction to SQL InjectionsIntroduction to SQL Injections
Introduction to SQL Injections
 
Record Classes in Java
Record Classes in JavaRecord Classes in Java
Record Classes in Java
 
Microservices Design Patterns
Microservices Design PatternsMicroservices Design Patterns
Microservices Design Patterns
 
Structural Pattern Matching in Python
Structural Pattern Matching in PythonStructural Pattern Matching in Python
Structural Pattern Matching in Python
 
Unit Testing in Python
Unit Testing in PythonUnit Testing in Python
Unit Testing in Python
 
OOP Best Practices in JavaScript
OOP Best Practices in JavaScriptOOP Best Practices in JavaScript
OOP Best Practices in JavaScript
 
Java Jump Start
Java Jump StartJava Jump Start
Java Jump Start
 
JavaScript Jump Start 20220214
JavaScript Jump Start 20220214JavaScript Jump Start 20220214
JavaScript Jump Start 20220214
 
Bootstrap Jump Start
Bootstrap Jump StartBootstrap Jump Start
Bootstrap Jump Start
 
What is new in PHP
What is new in PHPWhat is new in PHP
What is new in PHP
 
What is new in Python 3.9
What is new in Python 3.9What is new in Python 3.9
What is new in Python 3.9
 
Programming in Python on Steroid
Programming in Python on SteroidProgramming in Python on Steroid
Programming in Python on Steroid
 
The matplotlib Library
The matplotlib LibraryThe matplotlib Library
The matplotlib Library
 
Pandas meetup 20200908
Pandas meetup 20200908Pandas meetup 20200908
Pandas meetup 20200908
 
The num py_library_20200818
The num py_library_20200818The num py_library_20200818
The num py_library_20200818
 
Jupyter notebook 20200728
Jupyter notebook 20200728Jupyter notebook 20200728
Jupyter notebook 20200728
 
Node.js Crash Course (Jump Start)
Node.js Crash Course (Jump Start) Node.js Crash Course (Jump Start)
Node.js Crash Course (Jump Start)
 

Recently uploaded

Recently uploaded (20)

ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
AI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekAI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří Karpíšek
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering Teams
 
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and Planning
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
 

jQueryMobile Jump Start

  • 1. Haim Michael December 20th, 2013 All logos, trade marks and brand names used in this presentation belong to the respective owners. You can watch the video clip at http://youtu.be/zFSTN8JnFEk. LifeMichael.com jQueryMobile Jump Start
  • 2. ● Introduction to jQueryMobile ● Clean Semantic HTML ● Web Browsers Compatibility ● Platforms Compatibility ● HTML5 Capabilities ● Handling User Events ● Themes Framework ● The Codiqa Designer Tool ● jQueryMobile Alternatives ● Learning Resources ● Questions & Answers LifeMichael.com Table of Content
  • 3. ● The jQueryMobile JavaScript library allows us to create a unified user interface that works across most smartphone web browsers and tablets. ● The jQueryMobile library uses the well known jQuery library. www.jquerymobile.com www.jquery.com ● www.jqueryui.com If you are not familiar with JavaScript you might want to check my JavaScript Jump Start. LifeMichael.com Introduction to jQueryMobile
  • 4. <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href= "http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"> </script> <script src= "http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"> </script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Simple List Demo</h1> </div> LifeMichael.com Introduction to jQueryMobile
  • 5. <div data-role="content"> <ul data-role="listview" data-theme="c"> <li><a href="http://www.google.com">google</a></li> <li><a href="http://www.oracle.com">oracle</a></li> <li><a href="http://www.microsoft.com">microsoft</a></li> <li><a href="http://www.ibm.com">ibm</a></li> <li><a href="http://www.intel.com">intel</a></li> <li><a href="http://www.samsung.com">samsung</a></li> <li><a href="http://www.nokia.com">nokia</a></li> <li><a href="http://www.apple.com">apple</a></li> <li><a href="http://www.sony.com">sony</a></li> <li><a href="http://www.lenovo.com">lenovo</a></li> </ul> </div> <div data-role="footer"> <h4>lifemichael</h4> </div> </div> </body> </html> LifeMichael.com Introduction to jQueryMobile
  • 7. ● The jQuery Mobile is built on top of a simple usage of clean semantic HTML. ● When the web browser supports CSS and JavaScript, jQueryMobile applies progressive enhancements techniques that transform the semantic page into a rich interactive user interface one. LifeMichael.com Clean Semantic HTML
  • 8. ● The jQueryMobile library is compatible with most mobile web browsers. LifeMichael.com Web Browsers Compatibility
  • 9. ● The jQueryMobile library is compatible with most mobile platforms. http://jquerymobile.com/gbs/ LifeMichael.com Platforms Compatibility
  • 10. ● The jQuery Mobile utilizes HTML5 capabilities. Using jQueryMobile we indirectly exploit the power of HTML5. HTML5 Jump Start LifeMichael.com HTML5 Capabilities
  • 11. ● The jQuery Mobile library supports new events relevant for mobile platforms, such as touching and dragging. Handling Touch Events Code Sample LifeMichael.com Handling User Events
  • 12. ● We can create our own theme or use one of the many themes that were already created. ● The ThemeRoller provides us with a visual simple way for creating our own customized theme. http://jquerymobile.com/themeroller/ LifeMichael.com Themes Frameworks
  • 13. ● Codiqa is a powerful drag-and-drop IDE for creating cross-platform mobile hybrid applications and websites. https://codiqa.com/ LifeMichael.com The Codiqa Designer Tool
  • 15. ● http://www.jquerymobile.com This is jQueryMobile main website. It includes detailed documentation and links for other relevant resources. ● http://www.jqmgallery.com This website includes samples for hybrid applications for mobile telephone that were developed using jQueryMobile. ● http://abelski.lifemichael.com This website includes an online free course for learning how to use jQueryMobile. You will find it inside the JavaScript frameworks category. LifeMichael.com Learning Resources
  • 16. ● Two courses you might find interesting include Software Engineering in PHP more info Android 4.4 Java Applications Development more info HTML5 Cross Platform Mobile Applications more info ● If you enjoyed my lecture please leave me a comment at http://speakerpedia.com/speakers/life-michael. Thanks for your time! Haim. LifeMichael.com Questions & Answers