mobile web-apps
DESCRIPTION
TRANSCRIPT
Building cross-platform mobile web applications
The strategy
• Use web technology, not native• Use frameworks to support the
design• Use standard packaging to
distribute
Implementation
• HTML 5 : the content• JQuery Mobile : the framework• W3C Widgets : the packaging
Alternatives:- Sencha framework: much steeper learning
curve, but can lead to faster, more “native looking” apps
- Molly: for institutional services
Web Apps vs Websites
“There isn't a line you can draw and say that things on this side are "web pages" and on that side they're "apps." It’s more of a common-sense definition: Google Docs is an app, Wikipedia is not. If I had to define one factor, it would be how long do you go between page loads? In an app, you may work for an hour or more before reloading the page.” - Zachary Kessin
1. Start with a basic page skeleton
<!DOCTYPE html><html><head> </head>
<body></body>
</html>
2. Add the viewport tag
The viewport meta tag hints to mobile browsers how your site/application should be rendered. It is ignored by desktop browsers
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
3. Include JQuery Mobile
Copy and paste from: http://jquerymobile.com/download/
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
4. Create a mobile “page”
<div id=“home” data-role="page">
<div data-role="header">
<h1>My App</h1>
</div>
<div data-role="content">
<h1>Hello World</h1>
</div>
</div>
5. Create a dialog boxFirst, create the button to open it in your content div:
<a data-role="button" href="#dialog" data- transition="slidedown">open dialog box</a>
5. Create a dialog boxNext, the dialog box itself:
<div id="dialog" data-role="dialog"> <div data-role="content"> <p>I am a dialog box</p> <a data-role="button" href="#home">OK</a>
</div></div>
OK, lets try it out
• http://jisc.cetis.ac.uk/publications/
6. Themes
<div data-role="page" data-theme="a">
7. Lists
<ul data-role="listview”>
<li><a href=”#1">Item1</a></li>
<li><a href=”#2">Item2</a></li>
<li><a href=”#3">Item3</a></li>
</ul>
7b Home buttons
<div id="p1" data-role="page"> <div data-role="header"> <a href="#page" data-icon="home" data-
direction="reverse">Home</a> <h1>My App</h1> </div> <div data-role="content"> <h1>Page One</h1> </div></div>
8 Fun Stuff
• Transitions:– Slideup, slidedown, twist, pop, fade
flip…
• Button themes– Groups, icons…
• Toggles and sliders
9. Packaging
W3C Widget config.xml<widget xmlns="http://www.w3.org/ns/widgets" id="http://my.widget”>
<name>My App</name><description>A silly app</description><author>Me</author>
</widget>NB: For Opera Widgets you have to make all
your JQM refs local not CDN for some reason…
Distribution
• Hosting like any other website• Side-loading onto mobiles• Installing as desktop widget using
Opera• Deploying in Apache Wookie as a
website widget
Layouts with progressive enhancement
• Media queries to detect desktop environments• Mobile as default stylesheet
<link rel="stylesheet" type="text/css" href="default.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-device-width:1024px)"/>