1. Anatomy of an App HTML, CSS, jQuery, jQuery Mobile CIS 136 Building Mobile Apps 1

2. CSS Web view appearance 2

3. Styles 3  A style is a rule that defines the appearance of an element on a web page  Cascading Style Sheet (CSS) is a series of rules  Can alter appearance of page by changing characteristics such as font family, font size, margins, and link specifications  Three ways to incorporate styles in a web page:  Inline – add style as attribute in a tag - only changes that tag Chemistry Class  Embedded(Internal) - styles are referred to using the “id” or “class” attributes, and style is defined in tag, using a tag Chemistry Class Chemistry Class  External(linked) - styles are stored in a separate text file having the extension.ccc. Then the file is “linked” to in web page

4. Style sheet precedence 4  Inline styles  Used to change the style within an individual HTML tag Chemistry Class  Overrides Internal and External style sheets  Internal styles  Used to change the style of one web page  Uses the “id” or “class” attributes Chemistry Class Chemistry Class  Overrides External style sheets  External styles  Used to change the style of multiple pages in a web site  All three can be co-mingled in a web page

5. Syntax of a style 5  No matter what format used, it must have a style statement Chemistry Class  A style has a selector and an declaration  Selector: identifies the page element(s)  Declaration: identifies how the page element(s) should appear, and is comprised of two parts,  The property to apply  The value for the property  Example: font-family: Garamond; font-color: navy;

6. Applying an Inline Style 6  Defines style of an INDIVIDUAL tag  Helpful when one section of a page needs to look different  To use inline style  Include the style attribute within the tag  The style attribute is assigned to the declaration (property and value)  The declaration is in quotes  There can be more than one set of properties and values, each separated by a semi-colon  EXAMPLES :

7. In-line styling when there is no HTML tag 7  create a container which can be used to add an incline style  Finer level of control than using tags  Example My dog has fleas!

8. Internal Styles 8  Use the tag within the  Controls the style of a single page  Example <!-- h1 { font-family: Garamond; font-size: 32pt; } a { color: blue; text-decoration: none } a { background: #020390; color: #01d3ff; } --> Note use of HTML comment tags

9. Pseudo-class styles 9  Have more control over tags that have a “state”  Attached to selector with a colon, to specify the state to use  Format: selector:pseudo-class { style definition }  Anchor tags (links), have 4 states  Link – an unvisited link  Visited – a link that has been visited  Active – a link that gains focus (has been clicked)  Hover –when the mouse is over it a:hover { background: #020390; color: #01d3ff; }

10. Working with IDs and Classes 10  id attribute  Used to identify ONE element only  Syntax: id="text“  Example: Joe Smith  class attribute  Used to identify a GROUP of elements  Syntax: class="text“  Example: Joe Smith has been the president for four years. His running mate Mary Jones is running for office for the first time.

11. Classes 11  Using classes is a two-step process 1. Any tags that belong to the class, are marked up by adding the attribute class=“classname” Example: …. …. 2. In the tag, you define the class using a dot Example:.redNames { color:red } Whatever the span tag and the paragraph tags contain, becomes red.

12. ID’s 12  Using ID’s is a two-step process 1. The tag that belongs to the ID, is marked up by adding the attribute id=“idname” Example: …. 2. In the tag, you define the ID using a hash tag Example: #blueFont { color:blue } Whatever the paragraph tag contains, becomes red.

13. Web page structure tags and styles 13  Using web page structure tags, can apply styles to entire section  HTML 4  tags content  HTML 5  # style1 { color:red};.style2 {color:blue;} header { color:red}; section {color:blue;} footer {color:green;}

14. External styles 14  Create a separate file to contain the styles (file extension.css, as in styles.css)  Include in the section, a tag, which points to the external text file  The external text file will ONLY have the styles defined –  no other tags – just styles  It will not even have the tag  EXAMPLE:  Then, INSIDE the text file named styles.css, only the selector, class, id’s and associated declarations appear, as in: a { color: blue; text-decoration: none } #blueFont {color:blue}

15. Fonts 15  Comprised of font families  5 generic  Serif  Sans-serif  Monospace  Cursive  Fantasy  Example of common font styling selectors: body { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; font-style: italic; font-weight: bold; color: blue }

16. Measurement Units 16 pt, pc, and px are absolute measurements

17. Color 17  Can use one of the 16 color names, RGB, hex  Colors are captured using red, green and blue light

18. Placement: Boxing properties are used for placement 18

19. Multi Page Apps If you want to have more than one page view on a single page… 19

20. Device differences 20  Need to take into account devices differ (width, height, dpi, zoom)  jQuery Mobile has a rich feature set and support for many mobile platforms  Differences are handled automatically

21. Single-Page App with multiple “page views” 21  Traditional web sites are multi-page  The browser makes a request via GET or POST and a complete page, including headers, cookies, html, etc is returned through the Response  Hybrid apps run inside a native container, and leverage the device’s browser engine (but not the browser) to render the HTML and process the script locally  Request/response is inefficient for the mobile  jQuery Mobile is designed around the notion of (mostly) single page apps with multiple “page views”  View-oriented model  Makes use of the data-role attribute

22. JQM tags and classes 22  JQM has additional attributes and CSS classes to enhance the appearance of a page  Classes  ui-mobile  ui-page  ui-body-c  ui-page-active  ui-bar-a  ui-header  ui-content  ui-footer  ui-loader  ui-corner  ui-icon  ui-icon-loading  Attributes  data-role  role SOME ARE INJECTED – SOME YOU CODE

23. Data-roles 23  Convenient way to navigate between “page views” within a single physical page  Multiple with data-role = “page” and unique ID tags  Include links to other id’s’ View Two View of Page two' Back to page "one" Page Footer Multi-page View of Page 'one' To show internal pages: Show page "two“ Page Footer

24. Data-Roles - buttons 24 Learn more at https://demos.jquerymobile.com/1.1.0/docs/api/themes.html  Show page "two“  data-inline=“true” causes button to only be as wide as content View Two View of Page two' Back to page "one" Page Footer Multi-page View of Page 'one' To show internal pages: Show page "two“ Page Footer Button placement: class=“ui-btn-left” or class=“ui-btn-right”

25. Data-Roles - positioning 25 Learn more at https://demos.jquerymobile.com/1.1.0/docs/api/themes.html   Values are:  Standard – toolbars presented according to document flow; scroll in and out  Fixed – header and footer appear at top and bottom of viewport as user scrolls; tapping on screen returns them to standard flow  Fullscreen – same as above, but tapping on screen will hide them View Two View of Page two' Back to page "one" Page Footer Multi-page View of Page 'one' To show internal pages: Show page "two“ Page Footer

26. jQuery Mobile Transitions 26  lets you choose the way a page should open  Note: browser/webkit must support CSS3 3D Transforms  can be applied to any link or form submission by using the data- transition attribute Slide to Page Two  Where ‘effect’ is  Fade –fading effect  Flip – flips from back to front  Flow – throws the current page ‘away’  Pop – like a popup window  Slide – sliding motion  Slidefade – slide and fade  Slideup slides from bottom to top  Slidedown – slides from top to bottom  Turn – simulate page turning  None - none

27. Learn more at 27  https://demos.jquerymobile.com/1.1.0/ https://demos.jquerymobile.com/1.1.0/

28. Installing jQuery and jQuery Mobile If you want to have local copies of jQuery and jQuery Mobile 28

29. jQuery Mobile files - http://code.jquery.com/mobile/ 29  Download version of jQuery mobile you want to use in app  Comes as a zip folder  Extract  Move CSS minimized files  In project’s CSS folder, create a subfolder named themes, and within the themes subfolder, create another subfolder called default  In default subfolder, copy indicated files, including the images subfolder

30. jQuery Mobile files 30  Move js minimized files  In project’s js folder, copy highlighted files  Also need jQuery CORE, available at http://code.jquery.com  Extract jQuery.js from jQuery Core 1.11.2

31. Shortcut to setting up file folders 31  Create a template folder for app development  Copy jQuery files into appropriate folders  Clone the template folder to new project folder as needed  Change data in config.xml