Slide 1
Slide 1 text
Getting started with
jQuery Mobile
@BradBroulik BradBroulik.blogspot.com
Slides: bit.ly/codecamp-jqm
Slide 2
Slide 2 text
Follow along:
bit.ly/codecamp-jqm
http://farm6.staticflickr.com/5262/5565984041_8e335f0ec0.jpg
Slide 3
Slide 3 text
Sent text message
Used application
Used browser
Accessed social networking site
Played games
Listened to music 28.7%
33.7%
39.2%
52.1%
54.2%
75.9%
Top Mobile Activities
Mobile Content Usage (U.S.)
3 Month Avg. Ending Nov. 2012 vs. 3 Month Avg. Ending Aug. 2012
Source: comScore MobiLens
Slide 4
Slide 4 text
Facebook’s top mobile client is mobile web
http://www.mobify.com/blog/mobile-stats-57-of-mobile-posting-on-facebook-from-mobile-web/
Slide 5
Slide 5 text
Twitter’s top mobile client is also mobile web
Twitter via http://www.lukew.com/ff/entry.asp?1413
Slide 6
Slide 6 text
“A UI framework for building cross-platform
Mobile Web applications”
“With a single jQuery Mobile codebase we
can create a unified user experience for
nearly all mobile devices”
jQ
uery M
obile
1.3
Slide 7
Slide 7 text
Simplify the journey
http://i132.photobucket.com/albums/q24/BluSky07/MOBILE%20GAMES%202/OregonTrailv321.png
Slide 8
Slide 8 text
One codebase...
CSS3
Slide 9
Slide 9 text
no device customer left behind
iOS
Android Blackberry
Windows
WebOS
Meego
Kindle
Nook
Desktop
Bada
Slide 10
Slide 10 text
Simplified Markup-Driven Development
Page Header
Hello jQuery Mobile!
Page Footer
Slide 11
Slide 11 text
Unified User Interface
Slide 12
Slide 12 text
A-Grade experience C-Grade experience
Progressive Enhancement
Slide 13
Slide 13 text
Responsive Design
Slide 14
Slide 14 text
Portrait Landscape
Responsive Forms
Slide 15
Slide 15 text
Default Theme Alternate Theme
Themable Styling
Slide 16
Slide 16 text
Accessible
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
http://www.flickr.com/photos/wongdood/3379046643/sizes/z/in/photostream/
Getting Started
in 60 seconds
Slide 20
Slide 20 text
Add jQuery Mobile
#2
Step Two - Add jQuery Mobile
CDN repository or download via jquerymobile.com/download
Slide 23
Slide 23 text
Add theming and branding
Movies
- Now Playing
-
Kung Fu Panda
Rated: PG
Runtime: 95 min.
Slide 24
Slide 24 text
ThemeRoller
http://jquerymobile.com/themeroller/
Slide 25
Slide 25 text
Single vs multi-page template
Contact Us
Multi-Page
Contact Us
Contact information...
Slide 27
Slide 27 text
Ajaxified Navigation
Slide 28
Slide 28 text
Step 1, tap the button to navigate to another page
Ajaxified Navigation
Slide 29
Slide 29 text
Step 2, framework loads the next page side-by-side
Ajaxified Navigation
Slide 30
Slide 30 text
Ajaxified Navigation
Step 3, framework transitions to next page
Slide 31
Slide 31 text
Ajaxified Navigation
Step 4, transition complete
Slide 35
Slide 35 text
Segmented Control
.segmented-control { text-align:center;}
.segmented-control .ui-controlgroup { margin: 0.2em; }
Slide 36
Slide 36 text
Keyboard sensitive input types
Slide 37
Slide 37 text
Radio & Checkbox
Slide 38
Slide 38 text
Slider & Switch
Slide 39
Slide 39 text
Grids
Slide 40
Slide 40 text
Gradients
Slide 41
Slide 41 text
Themes: defaults & inheritance
page theme set to “e”
Slide 42
Slide 42 text
Events Diagram
mobileinit
$(document).on("mobileinit", function(){
$.mobile.defaultPageTransition = "slide";
$.mobile.ajaxEnabled = false;
});
pageinit
$(document).on("pageinit", "#my-page", function(e) {
// Setup event handler for login button
$("#loginButton").on("click", function (e) {
alert("Login clicked...");
});
});
Slide 43
Slide 43 text
$( "#changePage" ).on( "click", function() {
// Create page markup
var newPage = $("<div data-role=header><h1>Hi</h1></div>Hello Again!");
// Add page to page container
newPage.appendTo( $.mobile.pageContainer );
// Enhance and open new page
$.mobile.changePage( newPage );
});
$.mobile API
Slide 44
Slide 44 text
Panels (sliding drawer)
jQ
uery M
obile
1.3
Slide 45
Slide 45 text
Responsive tables
jQ
uery M
obile
1.3
Slide 46
Slide 46 text
Responsive tables
jQ
uery M
obile
1.3
Slide 47
Slide 47 text
Responsive grids
jQ
uery M
obile
1.3
Slide 48
Slide 48 text
More new features...
jQ
uery M
obile
1.3
Listview autocomplete
data-clear-btn=”true”
New icons
Slide 49
Slide 49 text
Inspiration
jqmgallery.com
Slide 50
Slide 50 text
http://codiqa.com/
Slide 51
Slide 51 text
Adobe Shadow
http://tv.adobe.com/watch/adobe-technology-sneaks-2012/adobe-shadow/
Simplifies multi-device testing
Slide 52
Slide 52 text
+ =
Slide 53
Slide 53 text
http://www.flickr.com/photos/oddne/3838032598/sizes/l/in/photostream/
How can we gain a performance
advantage?
Slide 54
Slide 54 text
Prefer Native jQuery Mobile Widgets
Custom message box adds overhead
Native inset list uses 80% less CSS!
Compatible across all browsers!
Simplifies maintenance!
Slide 55
Slide 55 text
Remove Unused Themes
Custom Theme
jQuery Mobile’s structure file without default theme
Slide 56
Slide 56 text
Remove Unused Plugins
Download Builder
•grid
•navbar
•select
•slider
•textinput
•transitions
•checkboxradio
•collapsible
•collapsibleset
•controlgroup
•fieldContain
•fixedToolbar
http://jquerymobile.com/download-builder/
Slide 57
Slide 57 text
Cache highly accessed read-only pages
Popular Page
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur hendrerit nisl et tortor tincidunt mattis.
Slide 58
Slide 58 text
Prefer the CDN-hosted resources
CDN Hosted minified and gzipped jQuery Mobile files
Example: bonus/config/https/https-template.html
Slide 59
Slide 59 text
Performance Analysis Tools
http://developer.yahoo.com/yslow/mobile http://blaze.io/mobile
Slide 60
Slide 60 text
You have safely arrived at your destination
http://i132.photobucket.com/albums/q24/BluSky07/MOBILE%20GAMES%202/OregonTrailv321.png
Slide 61
Slide 61 text
Resources
• @jquerymobile
• #jquerymobile
Slide 62
Slide 62 text
Questions?
Can I integrate with Google or Bing Maps?
What’s coming in the 1.4 release?
Server-side versus client-side integration?
Can I integrate with RESTful Services?
Slide 63
Slide 63 text
Thank You!
@BradBroulik BradBroulik.blogspot.com
Slides: bit.ly/codecamp-jqm