Haim Michael
December 20th, 2013

All logos, trade marks and brand names used in this presentation belong
to the respectiv...
●

Introduction to jQueryMobile

●

Clean Semantic HTML

●

Web Browsers Compatibility

●

Platforms Compatibility

●

HTM...
●

The jQueryMobile JavaScript library allows us to create a
unified user interface that works across most smartphone
web ...
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href=
"http://code.jquery.com/mobile/1.3.1/jquery.mob...
<div data-role="content">
<ul data-role="listview" data-theme="c">
<li><a href="http://www.google.com">google</a></li>
<li...
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 J...
●

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

Plat...
●

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

HTML5 Jump...
●

The jQuery Mobile library supports new events relevant
for mobile platforms, such as touching and dragging.
Handling To...
●

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

●

The ThemeRoller provides us wi...
●

Codiqa is a powerful drag-and-drop IDE for creating
cross-platform mobile hybrid applications and websites.
https://cod...
http://www.sencha.com/products/touch/

http://ionicframework.com/

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

http://www.ke...
●

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

Two courses you might find interesting include
Software Engineering in PHP
more info
Android 4.4 Java Applications Deve...
Upcoming SlideShare
Loading in...5
×

jQueryMobile Jump Start

748

Published on

Practical jump start for learning how to use the jQueryMobile library.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
748
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

jQueryMobile Jump Start

  1. 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. 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. 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. 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. 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
  6. 6. http://www.lifemichael.com/jqmdemo.html LifeMichael.com Introduction to jQueryMobile
  7. 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. 8. ● The jQueryMobile library is compatible with most mobile web browsers. LifeMichael.com Web Browsers Compatibility
  9. 9. ● The jQueryMobile library is compatible with most mobile platforms. http://jquerymobile.com/gbs/ LifeMichael.com Platforms Compatibility
  10. 10. ● The jQuery Mobile utilizes HTML5 capabilities. Using jQueryMobile we indirectly exploit the power of HTML5. HTML5 Jump Start LifeMichael.com HTML5 Capabilities
  11. 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. 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. 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
  14. 14. http://www.sencha.com/products/touch/ http://ionicframework.com/ http://app-framework-software.intel.com/ http://www.kendoui.com/ LifeMichael.com JQueryMobile Alternatives
  15. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×