jQuery Mobile User Interface Design Chapter 1 1

Architecture 2  Hybrid Apps leverage open web standards  Can Test/debug user interface using desktop browser  Move on to building out native components and testing on an emulator/device

Architecture 3  Phonegap is an intermediary  Wrapper around the app that talks to the mobile device  A web-to-native abstraction layer enables access to device capabilities, such as the accelerometer, camera and local storage, that are not accessible in Mobile websites

Architecture 4  An App basically has two interfaces  User interface  Also known as web view  Written in html,css, javascript  Can use third party frameworks  Device interface  Also known as the native view  Provides connectivity to the mobile devices features

HTML web view structure 5

HyperText Markup Language (HTML) 6  Markup language  Describes structure and content of a document  A bunch of “Tags” containing instructions  Instructions are called elements  Tags may contain additional information called Attributes  Syntax  content  Types of tags  Containers - have opening and closing and contain content  Standalone tags – opening closes itself  Whitespace  Any whitespace you type in your html file will be ignored by the browser

The Structure of an HTML File 7  DOCTYPE tag  HTML tag  Root element  Can have only one root element  Head element  Contains tags and information about the document  Instructions in this section are done before the page is displayed and remain in memory  Body element  Contains tags and content to be displayed in the Web page  Sequential process of each line content

Element Attributes 8  Provide browsers with additional information about how to treat/refine the tag or acquire its content  Inserted into element’s opening tag using the syntax Self-closing tags do not need a closing tag

tag 9  Container for other tags 

Viewport meta tag 10  Specifies how the browser should control the page zoom level and dimensions  not part of any web standard  user-scalable, maximu, and minimum scale: control how users are allowed to zoom the page in or out  width=device-width: sets the width of the page to follow the screen-width of the device (controls viewport size)  Varies depending on the device  initial-scale=1 sets the initial zoom level when the page is first loaded by the browser  Note: a 3-4 inch screen has pixels  Many apps set their viewport to content="width=320, initial-scale=1" to fit precisely onto the iPhone 

11  If CLI, instruct PhoneGap to inject a platform specific version of phonegap.js at build time  phonegaps.js should not be present in the project folder unless you are using CLI Can leave as cordova.js or change to phonegap.js The Javascript/jQuery functions you write for your app

tag 12  Container for other tags and content (text, multi-media)  Paragraph: content  Line Breaks:  Lists: items,  List items: content  Headings:.... Etc.

Structuring a page 13  Generic elements  - divides page content into sections that can be formatted and positioned using styles  - identifies text that can be formatted using styles  Semantic elements  - top of page  - generic section of page  - composition, like a newspaper article  - links to other pages  - sidebar  - bottom of page

Working with Images 14  Inline images  Displays a graphic image located in a separate file within the contents of a block-level element  Most widely viewable in one of three file formats  JPEG, GIF (proprietary), or PNG  To markup an inline image  The alt attribute is used for users who do not display images.

jQuery and jQuery Mobile Web view 15

jQuery 16  a lightweight, "write less, do more", JavaScript library, focusing on desktop applications  takes a lot of common tasks that require many lines of and wraps them into methods that you can call with a single line of code  to start using jQuery on your web site:  Download the jQuery library from jQuery.com  Include jQuery from a CDN, like Google  two versions of jQuery available for downloading:  Production version –  for your live website because it has been minified and compressed  Development version  for testing and development (uncompressed and readable code)  Both versions can be downloaded from jQuery.com

jQuery Download vs CDN (faster) 17  The jQuery library is a single JavaScript file  Download  Reference it with the HTML tag (notice that the tag should be inside the section):  CDN (Content Delivery Network)  GOOGLE CDN  Microsoft CDN  jQuery CDN

jQuery Mobile 18  Framework for creating mobile web applications  Designed for all popular smartphones and tablets  View-oriented model  Designed for one page with multiple “page views”  Has a stylesheet and a javascript library  Relies on base ‘jQuery’ library, so that must be defined first in the app  uses HTML5 & CSS3 for laying out pages with minimal scripting  Must start with HTML 5 doctype

jQuery Mobile Download vs CDN (faster) 19  The jQuery Mobile library is a stylesheet and a single JavaScript file  Reference it with the HTML tag (the tag should be inside the section)  Download jquery.mobile.min.js  CDN (Content Delivery Network)  GOOGLE CDN  Microsoft CDN  jQuery

The finished using a CDN 20

jQuery Mobile Download Builder 21  Lets you create a jQuery Mobile download library, customized with selected modules

jQuery Mobile vs. jQuery 22  Has page-related events you can invoke programmatically during the lifecycle of a pageview  pageInit() - Before page creation, and when the page has been created  pageCreate() - When an external page is loading, unloading or encounters a failure  pageShow()  pageHide()  Has custom events for handling user gestures and device orientation  Swipe  Tap  Tap-and-hold  Uses themes to customize the look and feel of the app

Data attributes 23  HTML5 data-* attribute lets you assign custom data to an element  embed custom data attributes on all HTML elements  custom data attribute can then be used in the page's JavaScript to create a more engaging user experience (without any extra technology)  The data-* attributes consist of two parts:  The attribute name should not contain any uppercase letters, and must be at least one character long after the prefix "data-"  The attribute value can be any string example: Profile

data-roles 24  jQuery mobile framework uses a custom data-attribute named a data-role  Data-roles can allow navigation between page views, markup-based initialization and configuration of widgets  To define a page:  Inside the tag, each view or "page" on the mobile device is identified with an HTML element (usually a div) with the data-role="page" attribute: ...  To define semantic sections within a page (children of the page)  divs with data-roles of "header", "content", and "footer"....

25 App PageTitle Page Title Page content goes here. Page Footer

Example 26