Your SlideShare is downloading. ×
0
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Jquery mobile
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Jquery mobile

2,232

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

    • 1. jQuery Mobile<br />
    • 2. jQuery Mobile<br />Brief History<br />Web<br />Mobile<br />JSVM<br />Why?<br />jQuery<br />jQuery Mobile<br />
    • 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. 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. Brief History of Mobile<br />
    • 6. Brief History of Mobile<br />1G<br />DynaTAC 8000X <br />
    • 7. Brief History of Mobile<br />2G<br />1G<br />DynaTAC 8000X <br />
    • 8. Brief History of Mobile<br />3G<br />Smartphones<br />2G<br />WAP<br />1G<br />DynaTAC 8000X <br />
    • 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. Culmination of Awesome<br />
    • 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. Browsers<br />
    • 13. Operating Systems<br />
    • 14. Trend Trends<br />
    • 15. With Some Not So Awesome<br />iOS<br />Android<br />Blackberry<br />Palm<br />Symbian<br />Windows<br />MeeGo<br />Desktop<br />
    • 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. 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. 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. JSVM<br />
    • 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. 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. Easy to Get jQuery Help<br />
    • 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. 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. 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. 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. <!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. <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. <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. 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. 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. 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. $.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. 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. 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. Other Events<br />scrollstart<br />scrollstop<br />orientationchange<br />Passes orientation as “portrait” or “landscape”<br />Applies .landscape or .portrait CSS classes<br />
    • 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. 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. Demo<br />
    • 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. 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. Gaps & The Future<br />Access to peripherals<br />PhoneGap<br />W3C Device API working group<br />WebIntents<br />
    • 43. Links<br />http://jquerymobile.com/<br />http://www.jqmgallery.com/<br />http://www.ibm.com/developerworks/web/library/wa-jqmobile/<br />
    • 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 />

    ×