CNIT 132 Intermediate HTML and CSS

1. CNIT 132 Intermediate HTML and CSS jQuery Mobile

2. Agenda • My Web Site: http://fog.ccsf.edu/~hyip (download syllabus, class notes). • Murach’s HTML5 and CSS3, by Zak Ruvalcaba & Anne Boehm, Mike Murach & Associates, ISBN 978-1-890774-66-0. (Chapter 15)

3. How to Provide Pages for Mobile Devices • There are five ways to provide web pages for mobile devices. • Define a style sheet for mobile devices • Set the media attribute in the link element to “handheld”. (However, many mobile browsers do not recognize this media type.) • CSS3 provides a new feature called media queries that gives you more control over this feature. (http://www.w3.org/TR/css3-mediaqueries/) • Include a link to a mobile version of the web site near the top of the home page

4. How to Provide Pages for Mobile Devices (continue…) • Use client-side JavaScript to detect mobile devices and redirect (There are so many different mobile devices that it is difficult to detect. Some mobile devices do not support JavaScript) • Use a server-side scripting language to detect and redirect (There are so many mobile browsers that it is difficult to detect them all) • Use the WURFL on the server to detect mobile devices (download the XML configuration file periodically so it is up-to-date)

5. CSS3 Media Queries • iPhone’s Safari and other mobile browsers including Opera’s Mobile and Mini Browsers do support a new feature of CSS3 called media queries. These queries let you use a conditional expression for a media type. • The maximum screen width for a mobile device is 480 pixels. You can code a link element to use a different style sheet: <link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-device-width: 480px)"> • You code another link element for screen media with aminimum screen width of 481 pixels. <link rel="stylesheet" type="text/css" href="desktop.css" media="screen and (min-device-width: 481px)">

6. How to set the viewport properties • The viewport on a mobile device determines the content that is displayed on the page. • It can be larger or smaller than the actual visible area of the screen. • Content properties for viewport metadata • width: The width of the viewport in pixels. You can also use the device-width keyword to indicate that the viewport should be as wide as the screen. • height: The height of the viewport specified in pixels. You can also use the device-height keyword to indicate that the viewport should be as tall as the screen. • initial-scale: A number that indicates the initial zoom factor that is used to display the page. • minimum-scale: A number that indicates the minimum zoom factor for the page. • maximum-scale: A number that indicates the maximum zoom factor for the page. • user-scale: Indicates whether the user can zoom in and out of the viewport. Possible values are yes and no. <meta name="viewport" content="width=device-width, initial-scale=0.5"> http://fog.ccsf.edu/~hyip/cnit132/week13/in_class_samples/01_viewport.html

7. An introduction to jQuery Mobile • jQuery Mobile is a free, open-source, JavaScript library that makes it much easier to develop web sites for mobile devices. (It is used in combination with the core jQuery library.) • jQuery Mobile lets you store multiple pages in a single HTML file, create dialog boxes, buttons, and navigation bars; format your pages without coding your own CSS; collapsible content blocks, and accordions. • jQuery Mobile is supported by most devices including iPhone iOS, Android, BlackBerry, Windows Phone, Palm WebOS, and Symbian. • The jQuery Mobile web site features all of the documentation, sample code, and downloads that you need for beginning your work with mobile devices. • To download jQuery Mobile, go to its web site (www.jquerymobile.com). However, you won’t need to do that if you include it from a Content Deliver Network.

8. How to include jQuery Mobile in your web pages • The three files that you need to include for jQuery applications. • The jQuery Mobile CSS style sheet • The jQuery JavaScript file (Core jQuery). • The jQuery Mobile JavaScript file. • Two ways to include the jQuery files • Include the files from a Content Delivery Network (CDN) like Microsoft or jQuery. • Download and deploy the files on your web server. Then, include them from the server.

9. How to include the jQuery Mobile files from a Content Delivery Network • NOTE: you must code the script element for jQuery Mobile after the one for jQuery. That is because jQuery Mobile uses functions that are in the jQuery file. <!-- use the latest version of jQuery mobile and jQuery Core --> <!-- 01 jQuery mobile css --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"> <!-- 02 jQuery core vsn 1.6.3, 1.6.4, 1.7, 1.7.1 are ok. Vsn 1.7.2, 1.8.0, latest are not ok--> <script src="http://code.jquery.com/jquery-latest.js"></script> <!-- 03 jQuery mobile js --> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

10. How to create one web page with jQuery Mobile • The HTML for a typical web page that uses jQuery Mobile wil contain div, header, section, and footer elements. • The data-role attribute is used to identify the different parts of a mobile web page. To identify the four major parts of a mobile web page, set the values of this attribute to “page”, “header”, “content”, and “footer”. • In the header, the content should be coded within an h1 element. In the footer, the content should be coded within an h4 element. • In the section with “content” as its data-role attribute, you can code whatever elements you need. • The style sheet for jQuery Mobile formats the web page based on the values in the data-role attributes. • http://fog.ccsf.edu/~hyip/cnit132/week13/in_class_samples/02_one_web_page.html

11. How to use jQuery Mobile to create a mobile web site • When you use jQuery Mobile, you don’t have to develop a separate HTML file for each page. Instead, within the body element of a single HTML file, you code one div element for each page with its data-role attribute set to “page”. • For each div element, you set the id attribute to a placeholder value that can be accessed by the href attributes in the <a> elements of other pages. • http://fog.ccsf.edu/~hyip/cnit132/week13/in_class_samples/03_mobile_web_site.html

12. How to use dialog boxes and transitions • The transitions that can be used • slide: The next page slides in from the 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 from back to front similar to a playing card being flipped over. This transition is not supported on some devices. • The HTML for a dialog box is coded the way any page is coded. However, the <a> element that links to the page includes the data-rel attribute with “dialog” as its value. • To specify the way a page or a dialog box is opened, you can use the data-transition attribute from above. If a device does not support the transition that you specify, the attribute is ignored. • The styling for a dialog box is done by the jQuery Mobile CSS file. • http://fog.ccsf.edu/~hyip/cnit132/week13/in_class_samples/04_dialog_transition.html

13. How to create buttons • The icons that are provided by jQuery Mobile delete arrow-l arrow-r arrow-u arrow-d search plus minus check gear refresh forward back grid star alert info home • To add a button to a web page, you code an <a> element with its data-role attribute set to “button”. • http://fog.ccsf.edu/~hyip/cnit132/week13/in_class_samples/05_button.html

14. How to create a navigation bar • Code a div element within the header element. Then, set the data-role attribute for the div element to “navbar”. • Within the div element, code a ul element that contains one li element for each link. • Within each li element, code an <a> element with an href attribute that uses a placeholder for the page that the link should go to. Then, set the data-icon attribute to the icon of your choosing. • For the active item in the navigation bar, set the class attribute to “ui-btn-active”. Then, the color of this item will be lighter than the other items in the navigation bar. • http://fog.ccsf.edu/~hyip/cnit132/week13/in_class_samples/06_navigation_bar.html

15. How to apply themes to HTML elements • The five jQuery Mobile themes • 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. • By using the five themes that are included with jQuery Mobile, you can make appropriate adjustments to the default styles for the HTML elements. • http://fog.ccsf.edu/~hyip/cnit132/week13/in_class_samples/07_theme.html

16. How to create collapsible content blocks • Code a div element for each content block with the data-role attribute set to “collapsible”. • By default, each content block will be collapsed when the page is displayed. To expand a content block, add the data-collapsed attribute with its value set to “false”. • Within each div element, you can code the HTML for whatever content you want. • Description: • More than one content block can be expanded at the same time. • jQuery Mobile automatically adds the plus and minus icons for the content blocks. • http://fog.ccsf.edu/~hyip/cnit132/week13/in_class_samples/08_collapsible_block.html

17. How to create an accordion • Code a section (or div) element for the accordion within the section for the page and set its data-role attribute to “collapsible-set”. • Code the content blocks the same way you code collapsible content blocks. • Description: • In contrast to collapsible content blocks, only one block in an accordion can be expanded at the same time. • jQuery Mobile automatically adds the plus and minus icons for the content blocks. • http://fog.ccsf.edu/~hyip/cnit132/week13/in_class_samples/09_accordion.html