1. CNIT 132 Intermediate HTML and CSS jQuery Mobile

2. Agenda My Web Site: http://fog.ccsf.edu/~hyip (download syllabus, class notes).http://fog.ccsf.edu/~hyip 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. 1.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/)http://www.w3.org/TR/css3-mediaqueries/ 2.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…) 3.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) 4.Use a server-side scripting language to detect and redirect (There are so many mobile browsers that it is difficult to detect them all) 5.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: You code another link element for screen media with a minimum screen width of 481 pixels.

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. 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.www.jquerymobile.com

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.

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 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 elements of other pages. http://fog.ccsf.edu/~hyip/cnit132/week13/in_class_s amples/03_mobile_web_site.html http://fog.ccsf.edu/~hyip/cnit132/week13/in_class_s amples/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 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-larrow-rarrow-u arrow-dsearchplusminus checkgearrefreshforward backgridstaralert infohome To add a button to a web page, you code an element with its data-role attribute set to “button”. http://fog.ccsf.edu/~hyip/cnit132/week13/in_class_samples/ 05_button.html 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 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_navigatio n_bar.html http://fog.ccsf.edu/~hyip/cnit132/week13/in_class_samples/06_navigatio n_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.ht ml http://fog.ccsf.edu/~hyip/cnit132/week13/in_class_samples/07_theme.ht ml

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_collapsibl e_block.html http://fog.ccsf.edu/~hyip/cnit132/week13/in_class_samples/08_collapsibl e_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 http://fog.ccsf.edu/~hyip/cnit132/week13/in_class_samples/ 09_accordion.html