Session 4 Chapter 15 - How to Use jQuery Mobile to Build and Mobile Web Site ITI 134: HTML5 Desktop...

Session 4

Chapter 15 - How to Use jQuery Mobile

to Build and Mobile Web Site

ITI 134: HTML5 Desktop and Mobile Level II

www.profburnett.com

Copyright © Carl M. Burnett

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

http://www.markus-falk.com/mobile-frameworks-comparison-chart/


Viewport

3/4/2014 4


Properties for Viewport Metadata

width

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

3/4/2014 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 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 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 8


jQuery Framework

jQuery (the core library) jQuery Mobile

3/4/2014 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 10

Ways to Include jQuery Files

3/4/2014 11

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/ jquery.mobile-1.0b3.min.css">

<script src="http://code.jquery.com/ jquery-1.6.3.min.js"></script><script src="http://code.jquery.com/mobile/1.0b3/ jquery.mobile-1.0b3.min.js"></script>

Download and Deploy From Web Server.Content Delivery Network (CDN)

<link rel="stylesheet" href="jquery.mobile-1.0b3.min.css">

<script src="jquery-1.6.3.min.js"></script><script src="jquery.mobile-1.0b3.min.js"></script>


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

The HTML for the mobile web page

3/4/2014 12

jQuery Mobile Web Pages

<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>  </section> <footer data-role="footer"><h4>© 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,  </section> <footer data-role="footer"><h4>© 2011</h4></footer></div>

HTML for two pages in one HTML file

3/4/2014 13


Transitions that can be usedTransition Descriptionslide 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 14


Mobile Web Page Buttons

3/4/2014 15


jQuery Mobile Icons delete arrow-1 arrow-r

arrow-u arrow-d search

plus minus check

gear refresh forward

back grid star

alert info home

3/4/2014 16

HTML for Buttons<a href="#" data-role="button" data-inline="true">Cancel</a><a href="#" data-role="button" data-inline="true">OK</a><a href="#" data-role="button" data-icon="delete">Delete</a><a href="#" data-role="button" data-icon="home">Home</a><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><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 17


Mobile Web Page with 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>

The HTML for the navigation bar

3/4/2014 18


Headers and Navigation Bar Themes

Header “a”, bar “b” Header “e”, bar “d”

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.

3/4/2014 19


HTML for Headers and Navigation Bar Themes

3/4/2014 20

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

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>  </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> </div> </section></section>

3/4/2014 21


Mobile page with Collapsible ContentAll blocks collapsed Second block expanded

3/4/2014 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> </section>

3/4/2014 23


Mobile Web Page AccordionAll blocks collapsed First block expanded

3/4/2014 24

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>  </section></section>

3/4/2014 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 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

3/4/2014 27

Next – Session 5 Chapter 16 – Advanced HTML5 and CSS3 Features

Session 4 Chapter 15 - How to Use jQuery Mobile to Build and Mobile Web Site ITI 134: HTML5 Desktop...

Documents

Transcript of Session 4 Chapter 15 - How to Use jQuery Mobile to Build and Mobile Web Site ITI 134: HTML5 Desktop...