ITI 134: HTML5 Desktop and Mobile Level II
Session 4
Chapter 15 - How to Use jQuery Mobile
to Build and Mobile Web Site
www.profburnett.com
Class Outline





Providing Content to Mobile Devices
Intro to jQuery Mobile
How to Use jQuery Mobile to Build a web site.
How to Format Content with jQuery Mobile
How to Use jQuery Mobile for Page Layout
3/4/2014
Copyright © Carl M. Burnett
2
Providing Content to Mobile Devices






Mobile App – Native Application
Mobile Web Application Frameworks
Link to Mobilized Website
JavaScript Detected Phone
Server-Side Script to Detect and Redirect
Wireless Universal Resource File (WURFL) API
3/4/2014
Copyright © Carl M. Burnett
3
Viewport
3/4/2014
Copyright © Carl M. Burnett
4
Properties for Viewport Metadata
Property
Description
width
The width of the viewport in pixels
height
The height of the viewport in pixels
initial-scale
Number that indicates initial zoom factor for the page
minimum-scale
width
Number that indicates minimum zoom factor for the page
maximum-scale
Number that indicates maximum zoom factor for the page
user-scalable
Indicates whether user can zoom in or out
3/4/2014
Copyright © Carl M. Burnett
5
Meta Elements Set Viewport Properties
<meta name="viewport"
content="width=device-width, user-scalable=no">
<meta name="viewport"
content="width=device-width, initial-scale=1">
3/4/2014
Copyright © Carl M. Burnett
6
Mobile Web Design Guidelines









Keep your layout simple.
One-column layouts work best.
Only essential content.
Keep images small and a minimum.
Avoid using Flash.
Only essential navigation in the header.
Other navigation part of page content.
Make links and other elements large.
Use relative measurements.
3/4/2014
Copyright © Carl M. Burnett
7
Mobile Web Design Testing Guidelines
 Use device emulators and browser simulators.
 Test all pages on different mobile devices and
browsers.
 Deploy on server and test on the devices. themselves.
3/4/2014
Copyright © Carl M. Burnett
8
jQuery Framework
 jQuery (the core library)
 jQuery Mobile
3/4/2014
Copyright © Carl M. Burnett
9
Files for jQuery Mobile Web Apps
 The jQuery JavaScript file
 The jQuery Mobile JavaScript file
 The jQuery Mobile CSS style sheet
3/4/2014
Copyright © Carl M. Burnett
10
Ways to Include jQuery Files
Content Delivery Network (CDN)
Download and Deploy From Web Server.
<!-- include the jQuery Mobile stylesheet -->
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0b3/
jquery.mobile-1.0b3.min.css">
<!-- include the jQuery Mobile stylesheet -->
<link rel="stylesheet"
href="jquery.mobile-1.0b3.min.css">
<!-- include the jQuery and jQuery Mobile JavaScript
<!-- include the jQuery and jQuery Mobile JavaScript
files -->
files -->
<script src="jquery-1.6.3.min.js"></script>
<script src="http://code.jquery.com/
<script src="jquery.mobile-1.0b3.min.js"></script>
jquery-1.6.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b3/
jquery.mobile-1.0b3.min.js">
</script>
3/4/2014
Copyright © Carl M. Burnett
11
jQuery Mobile Web Page
The HTML for the mobile web page
<div data-role="page">
<header data-role="header">
<h1>Header</h1>
</header>
<section data-role="content">
<p>The page content</p>
</section>
<footer data-role="footer">
<h4>Footer</h4>
</footer>
</div>
3/4/2014
Copyright © Carl M. Burnett
12
jQuery Mobile Web Pages
HTML for two pages in one HTML file
<div data-role="page">
<header data-role="header">
<h1>SJV Town Hall</h1>
</header>
<section data-role="content">
<h3>The 2011-2012 Speakers</h3>
<a href="#toobin">
<h4>Jeffrey Toobin<br>October 19, 2011</h4>
<img src="images/toobin75.jpg"
alt="Jeffrey Toobin"></a>
<!-- THE ELEMENTS FOR THE REST OF THE SPEAKERS -->
</section>
<footer data-role="footer"><h4>&copy; 2011</h4></footer>
</div>
<div data-role="page" id="toobin">
<header data-role="header">
<h1>SJV Town Hall</h1>
</header>
<section data-role="content">
<h3>The Supreme Nine:<br>Black Robed Secrets</h3>
<img src="images/toobin_court.cnn.jpg"
alt="Jeffrey Toobin">
<p>Author of the critically acclaimed best seller,
<!-- THE COPY CONTINUES -->
</section>
<footer data-role="footer"><h4>&copy; 2011</h4></footer>
</div>
3/4/2014
Copyright © Carl M. Burnett
13
Transitions that can be used
Transition
Description
slide
The next page slides in from right to left
slideup
The next page slides in from bottom to top
slidedown
The next page slides in from top to bottom
pop
The next page fades in from the middle of the screen
fade
The next page fades into view
flip
The next page flips back to front
“pop” transition
<a href="#toobin" data-rel="dialog“ data-transition="pop">
“fade” transition
<a href="#toobin" data-transition="fade">
3/4/2014
Copyright © Carl M. Burnett
14
Mobile Web Page Buttons
3/4/2014
Copyright © Carl M. Burnett
15
jQuery Mobile Icons
3/4/2014

delete

arrow-1

arrow-r

arrow-u

arrow-d

search

plus

minus

check

gear

refresh

forward

back

grid

star

alert

info

home
Copyright © Carl M. Burnett
16
HTML for Buttons
<!-- For inline buttons, set the data-line attribute
to true -->
<a href="#" data-role="button" data-inline="true">Cancel</a>
<a href="#" data-role="button" data-inline="true">OK</a>
<!-- To add an icon to a button, use the data-icon
attribute -->
<a href="#" data-role="button" data-icon="delete">Delete</a>
<a href="#" data-role="button" data-icon="home">Home</a>
<!-- To group buttons, use a div element with the attributes
that follow -->
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-icon="check">Yes</a>
<a href="#" data-role="button"
data-icon="arrow-d">No</a>
<a href="#" data-role="button">Maybe</a>
</div>
<!-- To code a Back button, set the data-rel attribute
to back -->
<a href="#" data-role="button" dat-rel="back"
data-icon="back">Back to previous page</a>
<footer data-role="footer" class="ui-bar">
<a href="http://www.facebook.com" data-role="button"
data-icon="plus">Add to Facebook</a>
<a href="http://www.twitter.com" data-role="button"
data-icon="plus">Tweet this Page</a>
</footer>
3/4/2014
Copyright © Carl M. Burnett
17
Mobile Web Page with Navigation Bar
The HTML for the navigation bar
<header data-role="header">
<h1>SJV Town Hall</h1>
<div data-role="navbar">
<ul>
<li><a href="#home" class="ui-btn-active"
data-icon="home"
data-theme="b">Home</a></li>
<li><a href="#speakers"
data-icon="star"
data-theme="b">Speakers</a></li>
<li><a href="#contactus"
data-icon="grid"
data-theme="b">Contact Us</a></li>
</ul>
</div>
</header>
3/4/2014
Copyright © Carl M. Burnett
18
Headers and Navigation Bar Themes
Theme
Description
a
Black background with white foreground. This is the default.
b
Blue background with white foreground
c
Light gray background with a black foreground. Text will appear in bold.
d
Dark gray background with black foreground. Text will not appear in bold.
e
Orange background with black foreground. Use for accents, and use sparingly.
Header “a”, bar “b”
3/4/2014
Header “e”, bar “d”
Copyright © Carl M. Burnett
19
HTML for Headers and Navigation Bar Themes
<header data-role="header" data-theme="e">
<h1>SJV Town Hall</h1>
<div data-role="navbar">
<ul>
<li><a href="#home" data-icon="home"
data-theme="d">Home</a></li>
<li><a href="#speakers" data-icon="star"
data-theme="d"
class="ui-btn-active">
Speakers</a></li>
<li><a href="#news" id="news"
data-icon="grid"
data-theme="d">News</a></li>
</ul>
</div>
</header>
3/4/2014
Copyright © Carl M. Burnett
20
Two Column Mobile Web Page
<section data-role="content">
<section class="ui-grid-a">
<div class="ui-block-a">
<p><strong>Black Robed Secrets</strong></p>
<img src="images/toobin75.jpg"
alt="Jeffrey Toobin"><br>
<p><a href="#toobin"><strong>
Jeffrey Toobin</strong></a>
<br>October 19, 2011</p>
<p><strong>Babylon<br>to Beijing</strong></p>
<!-- the rest of the code for this speaker -->
</div>
<div class="ui-block-b">
<p><br><strong>Too Big to Fail</strong></p>
<img src="images/sorkin75.jpg"
alt="Andrew Ross Sorkin">
<p><a href="#sorkin"><strong>
Andrew Sorkin</strong></a>
<br>November 16, 2011</p>
<!-- the code for next speaker in the
second column -->
</div>
</section>
</section>
3/4/2014
Copyright © Carl M. Burnett
21
Mobile page with Collapsible Content
All blocks collapsed
3/4/2014
Second block expanded
Copyright © Carl M. Burnett
22
HTML for Collapsible Content
<section data-role="content">
<div data-role="collapsible">
<h3>Jeffrey Toobin<br>October 19, 2011</h3>
<h3>Black Robed Secrets</h3>
<img src="images/toobin75.jpg" alt="Jeffrey
Toobin">
<p>Author of the critically acclaimed...</p>
</div>
<div data-role="collapsible" data-collapsed="false">
<h3>Andrew RossSorkin<br>November 16, 2011</h3>
<h3>Too Big to Fail</h3>
<img src="images/sorkin75.jpg"
alt="Andrew Ross Sorkin">
<p>A leading voice on Wall Street and...</p>
</div>
<!-- THE DIV ELEMENTS FOR THE OTHER CONTENT BLOCKS -->
</section>
3/4/2014
Copyright © Carl M. Burnett
23
Mobile Web Page Accordion
All blocks collapsed
3/4/2014
First block expanded
Copyright © Carl M. Burnett
24
HTML for Accordion
<section data-role="content">
<section data-role="collapsible-set">
<div data-role="collapsible" datacollapsed="false">
<h3>Jeffrey Toobin<br>October 19, 2011</h3>
<h3>Black Robed Secrets</h3>
<img src="images/toobin75.jpg"
alt="Jeffrey Toobin">
<p>Author of the critically acclaimed best
seller, <i>The Nine: Inside the Secret
World
of the Supreme Court</i>, Jeffrey Toobin
brings us the inside story of one of
America's most mysterious and powerful
institutions.</p>
</div>
<!-- DIV ELEMENTS FOR THE OTHER CONTENT BLOCKS -->
</section>
</section>
3/4/2014
Copyright © Carl M. Burnett
25
Student Exercise 2
 Complete Exercise 15-1 on page 523 using
Dreamweaver.
 Upload your HTML pages and CSS files to the
live site to preview.
3/4/2014
Copyright © Carl M. Burnett
26
Class Review





Mobile Devices
Intro to JQuery Mobile
How to Use JQuery Mobile to Build a web site.
How to Format Content with JQuery Mobile
How to Use JQuery Mobile for Page Layout
Next – Session 5
Chapter 16 – Advanced HTML5 and CSS3 Features
3/4/2014
Copyright © Carl M. Burnett
27