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,208

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

    ×