Anatomy of an App User Interface Design Chapter 1
Hybrid App Architecture 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
Hybrid App Architecture (cont.) User interface Also known as webview 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 Cordova/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 websites that display in a browser on a mobile device
HTML web view structure
HyperText Markup Language (HTML) Describes structure and content of a document A bunch of “Tags” (aka elements and attributes ) containing instructions for appearance Syntax < tag> content </end tag> Types of tags Containers - have opening and closing and contain content Standalone tags – opening closes itself <tag …. /> Whitespace Any whitespace you type in an html file will be ignored by the browser
The Structure of an HTML File DOCTYPE tag <!DOCTYPE html> HTML tag <html></html> Root element Can have only one root element Head element <head></head> Contains tags and information about the document Instructions in this section are done before the page is displayed and remain in memory Body element <body></body> Contains tags and content to be displayed in the page <!DOCTYPE html> <html> <head> <title></title> </head> <body> content </body> </html>
Tags (Elements and Attributes) Provide browsers with information about how to treat/refine the the content Syntax <element attribute1=“some value" attribute2=“some value“> content </element> <div border=“1” bordercolor=“black”> bugs </div> <img src=“picture.gif” id=“picture1” /> Self-closing tags do not need a closing tag, because they contain no content
<head></head> tag <!DOCTYPE html> <html> <head> <title></title> </head> <body> content </body> </html> Container for other tags <title> </title> <meta /> <link /> <script> </script> <style></style> Script and Style tags are also allowed in the <BODY> />
Viewport meta tag Specifies how the browser should control the page zoom level and dimensions user-scalable, maximum, 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 320-480 pixels Many apps set their viewport to content="width=320, initial-scale=1" to fit precisely onto the iPhone http://viewportsizes.com/
<script></script> Cordova.js is not present in the project folder but is needed at compile time Can store all code in separate .js file Note: type attribute is optional The Javascript/jQuery functions you write for your app can also be stored in a separate file
<body></body> tag Container for other tags and content (text, multi-media) dealing with appearance and behavior Paragraph: <p>content</p> Line Breaks: <br /> <hr /> Lists: <ol> items </ol>, <ul> </ul> List items: <li>content </li> Headings: <h1></h1> .. <h2> </h2>.. Etc.
Structuring a page Generic elements Semantic elements <div></div> - divides page content into sections that can be formatted and positioned using styles </span></span> - identifies text that can be formatted using styles Semantic elements <header></header> - top of page <section></section> - generic section of page <article></article> - composition, like a newspaper article <nav></nav> - links to other pages <aside></aside> - sidebar <footer></footer> - bottom of page
HTML, CSS, jQuery, jQuery Mobile, Javascript The USER INTERFACE HTML, CSS, jQuery, jQuery Mobile, Javascript
jQuery & jQuery Mobile webview structure
jQuery a lightweight, "write less, do more", JavaScript library, focusing on desktop applications takes a lot of common tasks that require many lines of Javascript code and wraps them into methods that you can call with a single line of jQuery code Two versions of jQuery available: 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) Download it from jQuery.com Reference it with the HTML <script> tag (notice that the <script> tag should be inside the <head> section): <head> < script src="jquery-1.11.2.min.js"></script> </script> < /head> Use a CDN (choose one Content Delivery Network) GOOGLE CDN <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> < /head> Microsoft CDN <head> < script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js"></script> < /head> jQuery CDN <head> <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> < /head>
jQuery Mobile jQuery mobile is a framework for creating mobile web applications Built upon jQuery, so the jQuery library must be defined first in the app Designed with functions for all popular smartphones and tablets View-oriented model Designed for one physical page(file) with multiple “page views” Has a stylesheet (.css file) and a javascript library (.js file)
jQuery Mobile Download it from jQuery.com Reference it with the HTML <script> tag (the <script> tag should be inside the <head> section) <head> < script src="jquery.mobile.min.js"></script> < script src="jquery.mobile.min.css"></script> < /head> Reference jQuery mobile from a CDN, like Google GOOGLE CDN <head> <script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script> < /head> Microsoft CDN <head> < script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery.mobile-1.4.5.min.js"></script> < script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery.mobile-1.4.5.min.css"></script> < /head> jQuery <head> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
The finished <head> using a jQuery CDN <!-- Include meta tag to ensure proper rendering and touch zooming --> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no”> <!-- Include jQuery Mobile stylesheets --> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"> <!-- Include the jQuery library --> <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> <!-- Include the jQuery Mobile library --> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <title> </title> </head>