1. HTML5 Level II Session IV
Chapter 17 - How to Use jQuery Mobile to Build and Mobile Web Site

2. Class Outline How to Work with 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

3. 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

4. Viewport
3/4/2014
Copyright © Carl M. Burnett

5. 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
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
width
3/4/2014
Copyright © Carl M. Burnett

6. Meta Elements Set Viewport Properties
<meta name="viewport"
content="width=device-width, user-scalable=no">
content="width=device-width, initial-scale=1">
3/4/2014
Copyright © Carl M. Burnett

7. 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

8. 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

9. jQuery Framework jQuery (the core library) jQuery Mobile 3/4/2014
Copyright © Carl M. Burnett

10. 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

11. Ways to Include jQuery Files
Content Delivery Network (CDN)
Download and Deploy From Web Server.
<!-- include the jQuery Mobile stylesheet -->
<link rel="stylesheet"
href="
jquery.mobile-1.0b3.min.css">
<!-- include the jQuery and jQuery Mobile JavaScript
files -->
<script src="
jquery min.js"></script>
<script src="
jquery.mobile-1.0b3.min.js">
</script>
<!-- include the jQuery Mobile stylesheet -->
<link rel="stylesheet"
href="jquery.mobile-1.0b3.min.css">
<!-- include the jQuery and jQuery Mobile JavaScript
files -->
<script src="jquery min.js"></script>
<script src="jquery.mobile-1.0b3.min.js"></script>
3/4/2014
Copyright © Carl M. Burnett

12. 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

13. 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 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>© 2011</h4></footer>
</div>
<div data-role="page" id="toobin">
<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 -->
3/4/2014
Copyright © Carl M. Burnett

14. Transitions that can be used
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

15. Mobile Web Page Buttons
3/4/2014
Copyright © Carl M. Burnett

16. jQuery Mobile Icons
3/4/2014
Copyright © Carl M. Burnett

17. HTML for Buttons 3/4/2014 Copyright © Carl M. Burnett
<!-- 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=" data-role="button"
data-icon="plus">Add to Facebook</a>
<a href=" data-role="button"
data-icon="plus">Tweet this Page</a>
</footer>
3/4/2014
Copyright © Carl M. Burnett

18. 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

19. Headers and Navigation Bar Themes
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”
Header “e”, bar “d”
3/4/2014
Copyright © Carl M. Burnett

20. 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

21. 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 -->
</section>
3/4/2014
Copyright © Carl M. Burnett

22. Mobile page with Collapsible Content
All blocks collapsed
Second block expanded
3/4/2014
Copyright © Carl M. Burnett

23. 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>
<!-- THE DIV ELEMENTS FOR THE OTHER CONTENT BLOCKS -->
</section>
3/4/2014
Copyright © Carl M. Burnett

24. Mobile Web Page Accordion
All blocks collapsed
First block expanded
3/4/2014
Copyright © Carl M. Burnett

25. HTML for Accordion <section data-role="content">
<section data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="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>
3/4/2014
Copyright © Carl M. Burnett

26. Student Exercise 1
Complete Exercise 17-1 on page 597 using Dreamweaver.
Upload your HTML pages and CSS files to the live site to preview.
3/4/2014
Copyright © Carl M. Burnett

27. Chapter 8 – How to Use Responsive Web Design (RWD)
Class Review
How to Work with 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 8 – How to Use Responsive Web Design (RWD)
3/4/2014
Copyright © Carl M. Burnett