Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Jquery mobile
Similaire à Jquery mobile (20)
Dernier
Dernier (20)
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
- 11. With Some Not So Awesome Standards vs. evolution Browser implementations Device differences Desktop Phone Tablet Operating systems App stores
- 12. Browsers
- 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/
Notes de l'éditeur
- 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