Jquery mobile
Upcoming SlideShare
Loading in...5
×
 

Jquery mobile

on

  • 2,181 views

 

Statistics

Views

Total Views
2,181
Views on SlideShare
2,181
Embed Views
0

Actions

Likes
0
Downloads
48
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Jquery mobile Presentation Transcript

  • jQuery Mobile
  • jQuery Mobile
    Brief History
    Web
    Mobile
    JSVM
    Why?
    jQuery
    jQuery Mobile
  • 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
  • Brief History of Mobile
    1900 – Reginald Fessenden
    1901 – First transatlantic radio transmission Guglielmo Marconi
    1946 – First mobile phone
    call
  • Brief History of Mobile
  • Brief History of Mobile
    1G
    DynaTAC 8000X
  • Brief History of Mobile
    2G
    1G
    DynaTAC 8000X
  • Brief History of Mobile
    3G
    Smartphones
    2G
    WAP
    1G
    DynaTAC 8000X
  • Brief History of Mobile
    4G
    Android
    iPhone
    3G
    Smartphones
    2G
    WAP
    1G
    DynaTAC 8000X
  • Culmination of Awesome
  • With Some Not So Awesome
    Standards vs. evolution
    Browser implementations
    Device differences
    Desktop
    Phone
    Tablet
    Operating systems
    App stores
  • Browsers
  • Operating Systems
  • Trend Trends
  • With Some Not So Awesome
    iOS
    Android
    Blackberry
    Palm
    Symbian
    Windows
    MeeGo
    Desktop
  • 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
  • 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
  • App Stores
    111 app stores
    Android Market
    App Catalog
    App Store
    App World
    Ovi Store
    Windows Phone Marketplace
    Amazon
  • JSVM
  • JSVM
    Cross-browser support
    DOM manipulation
    CSS manipulation
    AJAX
    Selectors
    Event handling
    Utilities
    Widgets
    Effects & animation
    Progressive enhancement/Graceful degredation
    Plugins
  • Why jQuery?
    Free
    Choose your license
    Small
    Active, vibrant community
    Popular
    Mature set of widgets
    Easy to get help
  • Easy to Get jQuery Help
  • Why jQuery Mobile?
    Top Job Trends
    HTML5
    Mobile app
    Android
    Twitter
    jQuery
    Facebook
    Social Media
    iPhone
    Cloud Computing
    Virtualization
  • 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
  • jQuery
    Is $
    $(document).ready(…)
    Element selection
    By
    Tag name
    CSS class
    ID
    Hierarchy
    Sizzle
    W3C Selectors API
    Themeable
  • 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
  • <!doctypehtml>
    <html>
    <head>
    <link rel="stylesheet"href="jquery.mobile.css"/>
    <script src="jquery.js"></script>
    <script src="jquery.mobile.js"></script>
    </head>
  • <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>
  • <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>
  • 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
  • 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"
  • List Views
    <ul data-role="listview">
    Adds > to the right side of links
    Dividers
    Thumbnails
    Count bubbles
    Nested lists
    Split button
  • $.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
  • 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
  • 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
  • Other Events
    scrollstart
    scrollstop
    orientationchange
    Passes orientation as “portrait” or “landscape”
    Applies .landscape or .portrait CSS classes
  • 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;
    }
  • 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>
  • Demo
  • Platform Support
    A Grade
    iOS
    Android
    Windows Phone 7
    Blackberry
    Palm WebOS
    Opera Mobile
    Kindle 3
    Chrome Desktop
    Firefox Desktop
    IE Desktop
    Opera Desktop
  • Competitors
    jQTouch
    jQuery Plugin
    Focused on WebKit
    Sencha Touch
    Ext JS
    Titanium Mobile
    Compiles JavaScript to native
    iOS and Android
    XUI
    Zepto
  • Gaps & The Future
    Access to peripherals
    PhoneGap
    W3C Device API working group
    WebIntents
  • Links
    http://jquerymobile.com/
    http://www.jqmgallery.com/
    http://www.ibm.com/developerworks/web/library/wa-jqmobile/
  • 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/