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

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/ Copyright © Carl M. Burnett

Providing Content to Mobile Devices  Mobile App – Native Application  Mobile Web Application Frameworks 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/ Copyright © Carl M. Burnett

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

Properties for Viewport Metadata  width PropertyDescription 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 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/ Copyright © Carl M. Burnett

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

jQuery Mobile Web Page Header The page content Footer The HTML for the mobile web page 3/4/2014 Copyright © Carl M. Burnett 12

jQuery Mobile Web Pages SJV Town Hall The Speakers Jeffrey Toobin October 19, 2011 <img src="images/toobin75.jpg" alt="Jeffrey Toobin"> © 2011 SJV Town Hall The Supreme Nine: Black Robed Secrets <img src="images/toobin_court.cnn.jpg" alt="Jeffrey Toobin"> Author of the critically acclaimed best seller, © 2011 HTML for two pages in one HTML file 3/4/2014 Copyright © Carl M. Burnett 13

Transitions that can be used TransitionDescription 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 “fade” transition “fade” transition 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 Copyright © Carl M. Burnett 16

HTML for Buttons <!-- For inline buttons, set the data-line attribute to true --> Cancel OK <!-- To add an icon to a button, use the data-icon attribute --> Delete Home <!-- To group buttons, use a div element with the attributes that follow --> Yes <a href="#" data-role="button" data-icon="arrow-d">No Maybe <!-- 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 href=" data-role="button" data-icon="plus">Add to Facebook <a href=" data-role="button" data-icon="plus">Tweet this Page 3/4/2014 Copyright © Carl M. Burnett 17

Mobile Web Page with Navigation Bar SJV Town Hall <a href="#home" class="ui-btn-active" data-icon="home" data-theme="b">Home <a href="#speakers" data-icon="star" data-theme="b">Speakers <a href="#contactus" data-icon="grid" data-theme="b">Contact Us The HTML for the navigation bar 3/4/2014 Copyright © Carl M. Burnett 18

Headers and Navigation Bar Themes Header “a”, bar “b”Header “e”, bar “d” ThemeDescription 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 Copyright © Carl M. Burnett 19

HTML for Headers and Navigation Bar Themes 3/4/ Copyright © Carl M. Burnett SJV Town Hall <a href="#home" data-icon="home" data-theme="d">Home <a href="#speakers" data-icon="star" data-theme="d" class="ui-btn-active"> Speakers <a href="#news" id="news" data-icon="grid" data-theme="d">News

Two Column Mobile Web Page Black Robed Secrets <img src="images/toobin75.jpg" alt="Jeffrey Toobin"> Jeffrey Toobin October 19, 2011 Babylon to Beijing Too Big to Fail <img src="images/sorkin75.jpg" alt="Andrew Ross Sorkin"> Andrew Sorkin November 16, 2011 <!-- the code for next speaker in the second column --> 3/4/2014 Copyright © Carl M. Burnett 21

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

HTML for Collapsible Content Jeffrey Toobin October 19, 2011 Black Robed Secrets Author of the critically acclaimed... Andrew RossSorkin November 16, 2011 Too Big to Fail <img src="images/sorkin75.jpg" alt="Andrew Ross Sorkin"> A leading voice on Wall Street and... 3/4/2014 Copyright © Carl M. Burnett 23

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

HTML for Accordion Jeffrey Toobin October 19, 2011 Black Robed Secrets <img src="images/toobin75.jpg" alt="Jeffrey Toobin"> Author of the critically acclaimed best seller, The Nine: Inside the Secret World of the Supreme Court, Jeffrey Toobin brings us the inside story of one of America's most mysterious and powerful institutions. 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/ Copyright © Carl M. Burnett

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/ Copyright © Carl M. Burnett Next – Session 5 Chapter 16 – Advanced HTML5 and CSS3 Features