HTML 5 Level II Session IV Chapter 17

HTML 5 Level II Session IV Chapter 17 - How to Use j. Query Mobile to Build and Mobile Web Site www. profburnett. com

Class Outline �How to Work with Mobile Devices �Intro to j. Query Mobile �How to Use j. Query Mobile to Build a web site. �How to Format Content with j. Query Mobile �How to Use j. Query 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 �Java. Script 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

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

Files for j. Query Mobile Web Apps �The j. Query Java. Script file �The j. Query Mobile CSS style sheet 3/4/2014 Copyright © Carl M. Burnett 10

Ways to Include j. Query Files Content Delivery Network (CDN) Download and Deploy From Web Server. <!-- include the j. Query Mobile stylesheet --> <link rel="stylesheet" href="http: //code. jquery. com/mobile/1. 0 b 3/ jquery. mobile-1. 0 b 3. min. css"> <!-- include the j. Query Mobile stylesheet --> <link rel="stylesheet" href="jquery. mobile-1. 0 b 3. min. css"> <!-- include the j. Query and j. Query Mobile Java. Script files --> <script src="jquery-1. 6. 3. min. js"></script> <script src="http: //code. jquery. com/ <script src="jquery. mobile-1. 0 b 3. min. js"></script> jquery-1. 6. 3. min. js"></script> <script src="http: //code. jquery. com/mobile/1. 0 b 3/ jquery. mobile-1. 0 b 3. min. js"> </script> 3/4/2014 Copyright © Carl M. Burnett 11

j. Query Mobile Web Page The HTML for the mobile web page <div data-role="page"> <header data-role="header"> <h 1>Header</h 1> </header> <section data-role="content"> <p>The page content</p> </section> <footer data-role="footer"> <h 4>Footer</h 4> </footer> </div> 3/4/2014 Copyright © Carl M. Burnett 12

j. Query Mobile Web Pages HTML for two pages in one HTML file <div data-role="page"> <header data-role="header"> <h 1>SJV Town Hall</h 1> </header> <section data-role="content"> <h 3>The 2011 -2012 Speakers</h 3> <a href="#toobin"> <h 4>Jeffrey Toobin October 19, 2011</h 4> <img src="images/toobin 75. jpg" alt="Jeffrey Toobin"></a> <!-- THE ELEMENTS FOR THE REST OF THE SPEAKERS --> </section> <footer data-role="footer"><h 4>© 2011</h 4></footer> </div> <div data-role="page" id="toobin"> <header data-role="header"> <h 1>SJV Town Hall</h 1> </header> <section data-role="content"> <h 3>The Supreme Nine: Black Robed Secrets</h 3> <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"><h 4>© 2011</h 4></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

j. Query Mobile Icons 3/4/2014 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"> <h 1>SJV Town Hall</h 1> <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 Copyright © Carl M. Burnett Header “e”, bar “d” 19

HTML for Headers and Navigation Bar Themes <header data-role="header" data-theme="e"> <h 1>SJV Town Hall</h 1> <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/toobin 75. jpg" alt="Jeffrey Toobin"> <p><a href="#toobin"><strong> Jeffrey Toobin</strong></a> October 19, 2011</p> <p><strong>Babylon to Beijing</strong></p> <!-- the rest of the code for this speaker --> </div> <div class="ui-block-b"> <p> <strong>Too Big to Fail</strong></p> <img src="images/sorkin 75. jpg" alt="Andrew Ross Sorkin"> <p><a href="#sorkin"><strong> Andrew Sorkin</strong></a> November 16, 2011</p> <!-- the code for next speaker in the second column --> </div> </section> 3/4/2014 Copyright © Carl M. Burnett 21

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

HTML for Collapsible Content <section data-role="content"> <div data-role="collapsible"> <h 3>Jeffrey Toobin October 19, 2011</h 3> <h 3>Black Robed Secrets</h 3> <img src="images/toobin 75. jpg" alt="Jeffrey Toobin"> <p>Author of the critically acclaimed. . . </p> </div> <div data-role="collapsible" data-collapsed="false"> <h 3>Andrew Ross. Sorkin November 16, 2011</h 3> <h 3>Too Big to Fail</h 3> <img src="images/sorkin 75. 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 Copyright © Carl M. Burnett First block expanded 24

HTML for Accordion <section data-role="content"> <section data-role="collapsible-set"> <div data-role="collapsible" data-collapsed="false"> <h 3>Jeffrey Toobin October 19, 2011</h 3> <h 3>Black Robed Secrets</h 3> <img src="images/toobin 75. 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 25

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 26

Class Review �How to Work with Mobile Devices �Intro to j. Query Mobile �How to Use j. Query Mobile to Build a web site. �How to Format Content with j. Query Mobile �How to Use j. Query Mobile for Page Layout Next – Session 5 Chapter 8 – How to Use Responsive Web Design (RWD) 3/4/2014 Copyright © Carl M. Burnett 27