View
110
Download
0
Category
Preview:
DESCRIPTION
On April 11th, 2012, Mat Marquis gave a presentation to the ABCD WWW group on An Introduction to jQuery Mobile.Learn how to use jQuery Mobile to build dynamic HTML5-based web sitesand apps that work on all popular mobile platforms. We’ll go over thebasics of using the framework and discuss ways we can use it to createcompelling experiences that span smartphone, tablet, and desktopdevices from a single unified codebase.Mat "Wilto" Marquis is a designer-slash-developer working at FilamentGroup in Boston. Mat is a member of the jQuery Mobile team, technicaleditor at A List Apart, and an active member of the open sourcecommunity. He's probably flipping out about something on Twitter as wespeak.
Citation preview
HarvardWWW
jQuery Mobile
filament group
Hello. Mat MarquisFilament Group Inc.
Engaging experiences, accessible to everyone.
filament group
Authors
Open source contributors
Sponsor & design lead
jQuery MobileIn a nutshell
Mobile UI framework
UI Elements
AJAX Nav
Project GoalsNo browser left behind.
10+ BillionWeb enabled mobile devices on the internet
Source: ITU, Mark Lipacis, Morgan Stanley Research.
(They aren’t all iPhones)
4.01
12.3
17.1
18.17
19.95
22.07
OperaiPhone / iPod TouchAndroidNokiaBlackBerryNetfront
July 2011 World Mobile Browsershttp://gs.statcounter.com/#mobile_browser-ww-monthly-201103-201103-bar
All Platforms1 codebase
and for everyone
Make it workeverywhere
iOS Android WebOSBlackberry WP 7/7.5
Meego/MaemoKindle/Nook
Playbook
Symbian
Symbian
Desktop too
50+ devices in our lab
Built on standards
Progressive Enhancement
Don’t break the web.
Bookmark / Refresh Friendly URLS
History Works
Don’t break the web.
PushState jquerymobile.com/test/docs/api/globalconfig.html
Keep it accessible
Touch, mouse, keyboard
Touch & Mouse Events
Mouse Events
Web to Native
To App Stores
Themable, Brandablehttp://jquerymobile.com/themeroller/
...or native if you want
http://taitems.github.com/iOS-Inspired-jQuery-Mobile-Theme/
Getting started with
jQuery Mobile
Step 1.
Make a regular website
<!DOCTYPE html><html> <head> <title>Welcome!</title> </head> <body> <h1>Welcome!</h1> <p><a href="contact.html">Send me a note!</a></p> </body></html>
Step 2.
Add jQuery Mobile
<!DOCTYPE html><html><head>
<title>My Web App</title> <style>body { text-align: center; }</style>
<meta name="viewport" content="width=device-width,initial- scale=1">
<link rel="stylesheet" href="jquery.mobile.min.css"> <script src="jquery.min.js"></script> <script src="jquery.mobile.min.js"></script>
</head><body> <h1>Welcome to my Site!</h1> <p><a href="contact.html" data-role="button">Contact</a></p></body></html>
<!DOCTYPE html><html><head>
<title>My Web App</title> <style>body { text-align: center; }</style>
<meta name="viewport" content="width=device-width,initial- scale=1">
<link rel="stylesheet" href="jquery.mobile.min.css"> <script src="jquery.min.js"></script> <script src="jquery.mobile.min.js"></script>
</head><body> <h1>Welcome to my Site!</h1> <p><a href="contact.html" data-role="button">Contact</a></p></body></html>
Markup config
Links, Ajaxified
<a href="page.html">Link</a>
Listen, intercept, handle w/ Ajax
products.html<div data-role=”page”>
TAP
Listen, intercept, handle w/ Ajax
products.html<div data-role=”page”>
TAP
Transitions
<a href="page.html" data-transition="flip">Link</a>
Transitions
<a href="page.html" data-transition="flip">Link</a>
Dialog
<a href="page.html" data-rel="dialog">Link</a>
Button
<a href="page.html"data-role="button">Button</a>
Icon
<a href="page.html" data-role="button" data-icon="star"> Button</a>
Theme swatch
<a href="page.html" data-role="button" data-theme="b"> Button</a>
Listviews
<ul> <li>Products</li> <li>Services</li> <li>About us</li> <li>Contact</li> </ul>
A Regular UL
Basic unordered list
<ul data-role="listview"> <li>Products</li> <li>Services</li> <li>About us</li> <li>Contact</li> </ul>
Add role
Read-only listview
<ul data-role="listview"> <li><a href="products.html">Products</a></li> <li><a href="services.html">Services</a></li> <li><a href="about.html">About us</a></li> <li><a href="contact.html">Contact</a></li> </ul>
Add links
Linked listview
<ul data-role="listview" data-filter="true" data-inset="true"> <li><a href="products.html">Products</a></li> <li><a href="services.html">Services</a></li> <li><a href="about.html">About us</a></li> <li><a href="contact.html">Contact</a></li> </ul>
Filter + inset
List with links
Etc.
Forms
Native
Auto enhanced
<label for="search">Search Input:</label>
<input type="search" name="password" id="search" value="" data-role="none" />
Opt out
<label for="search" class="ui-hidden-accessible">Search Input:</label>
<input type="search" name="password" id="search" value="" data-role="none" />
Hide accessibly
Page regions
Anatomy of a page
header
footer
content
<body>
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div><!-- /page -->
</body>
Page sections
Metric ton of
Resources
Adobe CS 5.5
Tools
Tools
Tools
Tools
Books
Putting it all together
FlipPics
Creating Themes
Basic TR demo movie
Awesome sponsors
filament group
filamentgroup.com
@jquerymobile
@filamentgroup
jquerymobile.com
github.com/jquery/jquery-mobile
github.com/filamentgroup
Thanks!
Recommended