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

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

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

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

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

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

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

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

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

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

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 and jQuery Mobile JavaScript files --> <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> <!-- 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-1.6.3.min.js"></script> <script src="jquery.mobile-1.0b3.min.js"></script> 3/4/2014 Copyright © Carl M. Burnett

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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