jQuery Mobile<br />
jQuery Mobile<br />Brief History<br />Web<br />Mobile<br />JSVM<br />Why?<br />jQuery<br />jQuery Mobile<br />
Brief History of Web Languages<br />1991	HTML Tags<br />1995	HTML 2	LiveScript<br />1996			JScript, EcmaScript			CSS 1<br ...
Brief History of Mobile<br />1900 – Reginald Fessenden<br />1901 – First transatlantic radio transmission Guglielmo Marcon...
Brief History of Mobile<br />
Brief History of Mobile<br />1G<br />DynaTAC 8000X <br />
Brief History of Mobile<br />2G<br />1G<br />DynaTAC 8000X <br />
Brief History of Mobile<br />3G<br />Smartphones<br />2G<br />WAP<br />1G<br />DynaTAC 8000X <br />
Brief History of Mobile<br />4G<br />Android<br />iPhone<br />3G<br />Smartphones<br />2G<br />WAP<br />1G<br />DynaTAC 80...
Culmination of Awesome<br />
With Some Not So Awesome<br />Standards vs. evolution<br />Browser implementations<br />Device differences<br />Desktop<br...
Browsers<br />
Operating Systems<br />
Trend Trends<br />
With Some Not So Awesome<br />iOS<br />Android<br />Blackberry<br />Palm<br />Symbian<br />Windows<br />MeeGo<br />Desktop...
With Some Not So Awesome<br />iOS<br />Android<br />Blackberry<br />Palm<br />Tablet 1.0.7<br />2.0<br />Froyo<br />Ice Cr...
With Some Not So Awesome<br />iOS<br />Android<br />Blackberry<br />Palm<br />Tablet 1.0.7<br />2.0<br />Froyo<br />Ice Cr...
App Stores<br />111 app stores<br />Android Market<br />App Catalog<br />App Store<br />App World<br />Ovi Store<br />Wind...
JSVM<br />
JSVM<br />Cross-browser support<br />DOM manipulation<br />CSS manipulation<br />AJAX<br />Selectors<br />Event handling<b...
Why jQuery?<br />Free<br />Choose your license<br />Small<br />Active, vibrant community<br />Popular<br />Mature set of w...
Easy to Get jQuery Help<br />
Why jQuery Mobile?<br />Top Job Trends<br />HTML5<br />Mobile app<br />Android <br />Twitter <br />jQuery<br />Facebook<br...
jQuery<br />Started Aug 2006<br />31 KB<br />Used by 43% of top 10,000 most visited sites<br />Licenses: GPL or MIT<br />E...
jQuery<br />Is $<br />$(document).ready(…)<br />Element selection<br />By<br />Tag name<br />CSS class<br />ID<br />Hierar...
jQuery Mobile<br />Started October 2010<br />Currently 1.0 Beta 2<br />Feature complete<br />Licenses: GPL or MIT<br />26 ...
<!doctypehtml><br /><html><br /><head><br />    <link rel="stylesheet"href="jquery.mobile.css"/><br />    <script src="jqu...
<div data-role="page"id="page1"><br />    <div data-role="header"><br />Page 1 title<br />        <a href="index.html"data...
<div data-role="page"id="page2"><br />    <div data-role="header">Page 2 title</div><br />    <div data-role="content"><br...
Transitions<br />slide<br />Slide right to left (default)<br />slideup<br />Slide from the bottom to the top<br />slidedow...
Roles<br />Buttons<br />data-role="button"<br />submit, reset, button, or image<br />Collapsible content<br />data-role="c...
List Views<br /><ul data-role="listview"><br />Adds > to the right side of links<br />Dividers<br />Thumbnails<br />Count ...
$.mobile<br />$.mobile.changePage<br />$.mobile.changePage("weblog.php", "slide")<br />$.mobile.pageLoading<br />$.mobile....
Touch Events<br />tap<br />taphold<br />swipe<br />Vertically 20 or fewer pixels<br />Horizontally 30 or more pixels<br />...
Page Events<br />pagebeforehide<br />on the page being transitioned from, before the transition between pages starts<br />...
Other Events<br />scrollstart<br />scrollstop<br />orientationchange<br />Passes orientation as “portrait” or “landscape”<...
Handling Screen sizes<br />Default breakpoints 320, 480, 768, 1024<br />.min-width-320px #mainPage,<br />.max-width-480px ...
Media Queries<br />media="screen"<br />media="print"<br />http://www.w3.org/TR/css3-mediaqueries/<br />$.mobile.media<br /...
Demo<br />
Platform Support<br />A Grade<br />iOS<br />Android<br />Windows Phone 7<br />Blackberry<br />Palm WebOS<br />Opera Mobile...
Competitors<br />jQTouch<br />jQuery Plugin<br />Focused on WebKit<br />Sencha Touch<br />Ext JS<br />Titanium Mobile<br /...
Gaps & The Future<br />Access to peripherals<br />PhoneGap<br />W3C Device API working group<br />WebIntents<br />
Links<br />http://jquerymobile.com/<br />http://www.jqmgallery.com/<br />http://www.ibm.com/developerworks/web/library/wa-...
Attributions<br />http://keyolhubey.blogspot.com/2009/11/telecommunication-services-in-maldives.html<br />http://xahlee.bl...
Upcoming SlideShare
Loading in...5
×

Jquery mobile

2,265

Published on

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
2,265
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
52
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • June 1946 – first mobile phone callApril 1973 – first handheld mobile phone call Dr Martin Cooper Motorola1982 – Motorola DynaTAC 8000X1980s – 1G networks1990s – 2G networks1999 – WAP 2000 – Smartphones2000s – 3G networks2007 – iPhone2008 – Android 2010s – 4G
  • Jquery mobile

    1. 1. jQuery Mobile<br />
    2. 2. jQuery Mobile<br />Brief History<br />Web<br />Mobile<br />JSVM<br />Why?<br />jQuery<br />jQuery Mobile<br />
    3. 3. Brief History of Web Languages<br />1991 HTML Tags<br />1995 HTML 2 LiveScript<br />1996 JScript, EcmaScript CSS 1<br />1997 HTML 3<br />1997 HTML 4<br />1998 EcmaScript 1 & 2, JavaScript 1.3 CSS 2<br />1999 CSS 3<br />2000 XHTML 1.0 EcmaScript 3, JavaScript 1.5<br />2001 XHTML 1.1<br />2005 JavaScript 1.6<br />2006 JavaScript 1.7, jQuery<br />2008 HTML 5 JavaScript 1.8<br />2010 EcmaScript 5, JavaScript 1.8.5<br />
    4. 4. Brief History of Mobile<br />1900 – Reginald Fessenden<br />1901 – First transatlantic radio transmission Guglielmo Marconi<br />1946 – First mobile phone <br /> call<br />
    5. 5. Brief History of Mobile<br />
    6. 6. Brief History of Mobile<br />1G<br />DynaTAC 8000X <br />
    7. 7. Brief History of Mobile<br />2G<br />1G<br />DynaTAC 8000X <br />
    8. 8. Brief History of Mobile<br />3G<br />Smartphones<br />2G<br />WAP<br />1G<br />DynaTAC 8000X <br />
    9. 9. Brief History of Mobile<br />4G<br />Android<br />iPhone<br />3G<br />Smartphones<br />2G<br />WAP<br />1G<br />DynaTAC 8000X <br />
    10. 10. Culmination of Awesome<br />
    11. 11. With Some Not So Awesome<br />Standards vs. evolution<br />Browser implementations<br />Device differences<br />Desktop<br />Phone<br />Tablet<br />Operating systems<br />App stores<br />
    12. 12. Browsers<br />
    13. 13. Operating Systems<br />
    14. 14. Trend Trends<br />
    15. 15. With Some Not So Awesome<br />iOS<br />Android<br />Blackberry<br />Palm<br />Symbian<br />Windows<br />MeeGo<br />Desktop<br />
    16. 16. With Some Not So Awesome<br />iOS<br />Android<br />Blackberry<br />Palm<br />Tablet 1.0.7<br />2.0<br />Froyo<br />Ice Cream Sandwich<br />1<br />3G<br />Tablet 1.0.2<br />7<br />3.0<br />4G<br />4.5<br />5<br />1.4<br />1.2<br />3GS<br />Gingerbread<br />Honeycomb<br />4.6<br />6<br />Opera<br />Firefox<br />1.1.99<br />Mobile 5<br />1<br />Symbian^3<br />Symbian^2<br />Mobile 6<br />Safari<br />1.3<br />Phone 7<br />IE<br />Symbian^1<br />Symbian^4<br />1.2<br />Symbian<br />Windows<br />MeeGo<br />Desktop<br />
    17. 17. With Some Not So Awesome<br />iOS<br />Android<br />Blackberry<br />Palm<br />Tablet 1.0.7<br />2.0<br />Froyo<br />Ice Cream Sandwich<br />1<br />3G<br />Tablet 1.0.2<br />7<br />3.0<br />4G<br />4.5<br />5<br />1.4<br />1.2<br />3GS<br />Gingerbread<br />Honeycomb<br />4.6<br />6<br />Opera<br />Firefox<br />1.1.99<br />Mobile 5<br />1<br />Symbian^3<br />Symbian^2<br />Mobile 6<br />Safari<br />1.3<br />Phone 7<br />IE<br />Symbian^1<br />Symbian^4<br />1.2<br />Symbian<br />Windows<br />MeeGo<br />Desktop<br />
    18. 18. App Stores<br />111 app stores<br />Android Market<br />App Catalog<br />App Store<br />App World<br />Ovi Store<br />Windows Phone Marketplace<br />Amazon<br />
    19. 19. JSVM<br />
    20. 20. JSVM<br />Cross-browser support<br />DOM manipulation<br />CSS manipulation<br />AJAX<br />Selectors<br />Event handling<br />Utilities<br />Widgets<br />Effects & animation<br />Progressive enhancement/Graceful degredation<br />Plugins<br />
    21. 21. Why jQuery?<br />Free<br />Choose your license<br />Small<br />Active, vibrant community<br />Popular<br />Mature set of widgets<br />Easy to get help<br />
    22. 22. Easy to Get jQuery Help<br />
    23. 23. Why jQuery Mobile?<br />Top Job Trends<br />HTML5<br />Mobile app<br />Android <br />Twitter <br />jQuery<br />Facebook<br />Social Media <br />iPhone<br />Cloud Computing <br />Virtualization <br />
    24. 24. jQuery<br />Started Aug 2006<br />31 KB<br />Used by 43% of top 10,000 most visited sites<br />Licenses: GPL or MIT<br />Ecosystem<br />jQuery Core<br />jQuery UI<br />jQuery Mobile<br />QUnit<br />Sizzle<br />Plugins<br />
    25. 25. jQuery<br />Is $<br />$(document).ready(…)<br />Element selection<br />By<br />Tag name<br />CSS class<br />ID<br />Hierarchy<br />Sizzle<br />W3C Selectors API<br />Themeable<br />
    26. 26. jQuery Mobile<br />Started October 2010<br />Currently 1.0 Beta 2<br />Feature complete<br />Licenses: GPL or MIT<br />26 KB<br />Markup driven<br />Leverages HTML5 data- attributes<br />Themeable<br />Accessibility (WAI-ARIA)<br />Touch events<br />Touch focused UI<br />
    27. 27. <!doctypehtml><br /><html><br /><head><br /> <link rel="stylesheet"href="jquery.mobile.css"/><br /> <script src="jquery.js"></script><br /> <script src="jquery.mobile.js"></script><br /></head><br />
    28. 28. <div data-role="page"id="page1"><br /> <div data-role="header"><br />Page 1 title<br /> <a href="index.html"data-icon="check">Save</a><br /> <a href="index.html"data-icon="delete">Delete</a><br /> </div><br /> <div data-role="content"><br />Content goes here. Go to <a href="#page2">Page 2</a>.<br /> </div><br /> <div data-role="footer"><br />Page 1 footer<br /> <a href="index.html"data-icon="star">Star</a><br /> <a href="index.html" data-icon="info">Info</a><br /> <a href="index.html"data-icon="alert">Alert</a><br /> <a href="index.html"data-icon="plus">Plus</a><br /> <a href="index.html"data-icon="minus">Minus</a><br /> </div><br /></div><br />
    29. 29. <div data-role="page"id="page2"><br /> <div data-role="header">Page 2 title</div><br /> <div data-role="content"><br />Content goes here.<br /> Open <a href="index.html"<br />data-transition="pop"<br />data-rel="dialog">dialog</a>.<br /> <form><br /> <select data-role="slider"><br /> <option value="on">On</option><br /> <option value="off">Off</option><br /> </select><br /> </form><br /> </div><br /> <div data-role="footer">Page 2 footer</div><br /></div><br />
    30. 30. Transitions<br />slide<br />Slide right to left (default)<br />slideup<br />Slide from the bottom to the top<br />slidedown<br />Slide from the top to the bottom<br />pop<br />Expand the new page for popups and dialogs<br />fade<br />Fade the new page in<br />flip<br />Flip the old and new page<br />
    31. 31. Roles<br />Buttons<br />data-role="button"<br />submit, reset, button, or image<br />Collapsible content<br />data-role="collapsible" <br />data-state="collapsed"<br />Form<br />Automatically replaces form elements<br />data-role="slider"<br /><div data-role="fieldcontain"> - select<br /><div data-role="controlgroup"> - grouped <br /> buttons<br />Dialogs<br />data-rel="dialog"<br />
    32. 32. List Views<br /><ul data-role="listview"><br />Adds > to the right side of links<br />Dividers<br />Thumbnails<br />Count bubbles<br />Nested lists<br />Split button<br />
    33. 33. $.mobile<br />$.mobile.changePage<br />$.mobile.changePage("weblog.php", "slide")<br />$.mobile.pageLoading<br />$.mobile.pageLoading() // show<br />$.mobile.pageLoading(true) // hide<br />$.mobile.silentScroll<br />$.mobile.silentScroll(100)<br />$.mobile.addResolutionBreakpoints<br />$.mobile.addResolutionBreakpoints(800)<br />$.mobile.activePage<br />
    34. 34. Touch Events<br />tap<br />taphold<br />swipe<br />Vertically 20 or fewer pixels<br />Horizontally 30 or more pixels<br />Swipeleft<br />Left 30 or more pixels<br />swiperight<br />Right 30 or more pixels<br />
    35. 35. Page Events<br />pagebeforehide<br />on the page being transitioned from, before the transition between pages starts<br />pagebeforeshow<br />on the page being transitioned to, before the transition between pages starts<br />pagehide<br />on the page being transitioned from, after the transition finishes<br />pageshow<br />on the page being transitioned to, after the transition finishes<br />
    36. 36. Other Events<br />scrollstart<br />scrollstop<br />orientationchange<br />Passes orientation as “portrait” or “landscape”<br />Applies .landscape or .portrait CSS classes<br />
    37. 37. Handling Screen sizes<br />Default breakpoints 320, 480, 768, 1024<br />.min-width-320px #mainPage,<br />.max-width-480px #mainPage {<br />background-image: url(images/main-bg-320.jpg);<br />}<br />.min-width-480px #mainPage,<br />.max-width-768px #mainPage {<br />background-image:url(images/main-bg-480.jpg);<br />}<br />.min-width-768px #mainPage,<br />.max-width-1024px #mainPage {<br />background:navy;<br />}<br />
    38. 38. Media Queries<br />media="screen"<br />media="print"<br />http://www.w3.org/TR/css3-mediaqueries/<br />$.mobile.media<br /><script><br />varretinaDisplay = $.mobile.media("-webkit-min-device-pixel-ratio: 2");<br />if (retinaDisplay) {<br /> $("#content").css("background-image", "url('images/bg-retina.png')");<br />}<br /></script><br />
    39. 39. Demo<br />
    40. 40. Platform Support<br />A Grade<br />iOS<br />Android<br />Windows Phone 7<br />Blackberry<br />Palm WebOS<br />Opera Mobile<br />Kindle 3<br />Chrome Desktop<br />Firefox Desktop<br />IE Desktop<br />Opera Desktop<br />
    41. 41. Competitors<br />jQTouch<br />jQuery Plugin<br />Focused on WebKit<br />Sencha Touch<br />Ext JS<br />Titanium Mobile<br />Compiles JavaScript to native<br />iOS and Android<br />XUI<br />Zepto<br />
    42. 42. Gaps & The Future<br />Access to peripherals<br />PhoneGap<br />W3C Device API working group<br />WebIntents<br />
    43. 43. Links<br />http://jquerymobile.com/<br />http://www.jqmgallery.com/<br />http://www.ibm.com/developerworks/web/library/wa-jqmobile/<br />
    44. 44. Attributions<br />http://keyolhubey.blogspot.com/2009/11/telecommunication-services-in-maldives.html<br />http://xahlee.blogspot.com/2011/05/html-css-javascript-web-tech-and.html<br />http://en.wikipedia.org/wiki/Motorola_DynaTAC<br />http://en.wikipedia.org/wiki/History_of_radio<br />http://www.flickr.com/photos/zerok/465343120/<br />http://www.flickr.com/photos/shodan/19555323 4/<br />http://www.flickr.com/photos/mellis/3019296692/<br />http://www.flickr.com/photos/29881266@N08/3196645048/<br />
    1. A particular slide catching your eye?

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

    ×