Mobile web with jQuery Mobile
Download as PPTX, PDF3 likes2,871 views
1. Frameworks like jQuery Mobile allow building mobile apps using web technologies like HTML5 that work across different devices. 2. jQuery Mobile uses progressive enhancement to provide accessibility and support less capable browsers with limited features. 3. jQuery Mobile focuses on markup over JavaScript for development and uses CSS transforms and sprites to reduce roundtrips and latency on mobile. 4. Pages and navigation in jQuery Mobile are defined through HTML markup attributes while events are handled through JavaScript. Theming is implemented through object-oriented CSS.
Mobile web with jQuery Mobile
- 2. Web vs AppsReferral traffic is lost with AppsGoogle does not index AppsCustomers are already going to the websiteCross deviceApps are in the hands of platform vendors
- 4. For building mobile applications with web technologyFor building mobile friendly websitesSencha TouchjQuery Mobiledojox.mobileSproutCorejQTouch
- 5. FeaturesHTML5 basedProgressive enhancementWorks in less capable browsers but with limited featuresAccessibilityDesigned to work with screen readersWAI-ARIA
- 6. jQuery means JavaScript right?
- 7. Well… not in this casejQuery-mobile development is mostly about markup
- 8. Pages
- 10. Simple page example<div data-role="page" id="home"> <div data-role="header"> <h1>Page header</h1> </div> <div data-role="content"> <h3>Hi!</h3> <p>This is a simple page made with jquery mobile</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div></div>
- 11. Page navigation
- 12. UI elementsList viewsCheckboxesButtonsSlidersPopup menusDialogs
- 13. <form action="form.php" method="post"><label for="slider">Slider: </label> <input type="number" data-type="range”name="slider" id="slider" min="40" max="80" value="50"/> <label for="q">Search: </label> <input data-type="search" name="q" id="q"/> <fieldset data-role="controlgroup"> <legend>Choose many:</legend> <input type="checkbox" name="checkbox-1" id="checkbox-1" /> <label for="checkbox-1">Option 1</label> <input type="checkbox" name="checkbox-2" id="checkbox-2" /> <label for="checkbox-2">Option 2</label> <input type="checkbox" name="checkbox-3" id="checkbox-3" /> <label for="checkbox-3">Option 3</label> </fieldset> <label for=”switch">Flip switch:</label> <select name=”switch" id=”switch" data-role="slider"> <option value="off">Off</option> <option value="on">On</option> </select> </form>
- 15. How are these nice effects done?
- 16. CSS transformsGPU acceleratedCompact code = efficientCurrently only implemented for webkit
- 17. .flip { -webkit-animation-name: flipinfromleft; -webkit-animation-timing-function: ease-in-out; -webkit-animation-duration: 2s;} @-webkit-keyframesflipinfromleft{ from { -webkit-transform: rotateY(180deg); }to { -webkit-transform: rotateY(0); } }
- 18. Howcan we handleall these phones?
- 21. Performance in the mobile environment
- 24. Latency is bad for wireless
- 25. Reduce roundtrips to fight latency
- 26. How does jQuery Mobile handle this?
- 27. How jQuery fights LatencyGradients and shadows with CSS3No background-images to loadImage icons in css-spriteAnd…
- 28. Remember WAP and WML?The Card Deck
- 29. jQuery mobile supports multiple pages in a single html document
- 30. JavaScript Event-listenerstapswipetapholdswipeleftswiperightorientationchangescrollstartscrollstop
- 31. Events - examples$('#tapMe').tap(function(e) {alert('tap!' ); });$('#home').swipeleft(function(e) {alert('swipe left!' ); });
- 32. ThemingObject oriented CSSSimilar to jQuery-UICSS3 to minify footprintRounded cornersShadowsGradientsColor “swatches”A theme includes several color schemes that can be applied on different content