Introducing HTML and XHTML
Download
Report
Transcript Introducing HTML and XHTML
Anatomy of an App
HTML, CSS, jQuery, jQuery Mobile
CIS 136 Building Mobile Apps
1
Review
2
What we did
Created our DialogTest app which was designed to display
an image and text and perform 4 notifications
Beep
Alert
Confirm
Prompt
Questions..
3
Why did all the pop-up windows overlay the image and text?
Why did the prompt window display first?
Controlling the timing of events
Nothing stops the code from running
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady()
{
navigator.notification.beep(4);
}
</script>
<body onload=“listener()”>
To see the page,
control the launch
of the event so that
the events run after
the ‘page’ is loaded
4
<script>
function listener()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady()
{
navigator.notification.beep(4);
}
</script>
Architecture
5
Architecture
Phonegap leverages open web standards
6
Test/debug user interface using desktop browser
Move on to building out native components and testing on an
emulator/device
Architecture
Chromeless browser
Phonegap
‘Built’ app - publishable
Phonegap is an intermediary
Wrapper around the app that talks to the mobile device
Basically has Two interfaces
7
A web-to-native abstraction layer enables access to device capabilities that are not accessible in
Mobile Web applications, such as the accelerometer, camera and local storage
User interface – html,css,etc – web view
Device interface – api’s that connect to mobile features – phone view
HTML
web view structure
8
HyperText Markup Language (HTML)
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
< element > content </end element>
Types of tags
Containers - have opening and closing and contain content
Standalone tags – opening closes itself <element …. />
Whitespace
9
Any whitespace you type in your html file will be ignored by the
browser
The Structure of an HTML File
DOCTYPE tag <!DOCTYPE html>
HTML tag <html></html>
Head element <head></head>
Root element
Can have only one root element
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
content
</body>
</html>
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>
10
Contains tags and content to be displayed in the Web page
Sequential process of each line
Element Attributes
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
<element attribute1=“some value" attribute2=“some value“></element>
<img src=“picture.gif” id=“picture1” />
11
<head></head> tag
Container for other tags
12
<title> </title>
<meta />
<link />
<script> </script>
Viewport meta tag
Specifies how the browser should control the page zoom
level and dimensions
user-scalable: allows/prevents the user from using the
browser's zoom
width=device-width: sets the width of the page to follow the
screen-width of the device
13
Varies depending on the device
initial-scale=1 sets the initial zoom level when the page is first
loaded by the browser
<script></script>
This instructs PhoneGap Build to inject a platform specific
version of phonegap.js at build time
phonegaps.js should not be present in the project folder
change to phonegap.js
The javascript/jQuery functions
you write for your app
14
<body></body> tag
15
Container for other tags and content (text, multi-media)
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
<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
16
<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
Working with Images
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
<img src="url" alt="text" />
The alt attribute is used for users who do not display
images.
17
jQuery and jQuery Mobile
Web view
18
jQuery
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 –
Development version
19
for your live website because it has been minified and compressed
for testing and development (uncompressed and readable code)
Both versions can be downloaded from jQuery.com
jQuery Download vs CDN (faster)
The jQuery library is a single JavaScript file
Download
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>
< /head>
CDN (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>
20
jQuery Syntax
With jQuery you select (query) HTML elements and
perform "actions" on them
Basic syntax is: $(selector).action()
A $ sign to define/access jQuery
A (selector) to "query (or find)" HTML elements
A jQuery action() to be performed on the element(s)
Examples
21
$(this).hide() - hides the current element
$("p").hide() - hides all <p> elements
$(".test").hide() - hides all elements with class="test“
$("#test").hide() - hides the element with id="test“
Document.ready
all jQuery code should be inside a document ready event:
$(document).ready(function()
{
// jQuery code go here...
}
);
prevents any jQuery code from running before the document
is finished loading
<script>
$(document).ready(function()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady()
{
navigator.notification.beep(4);
}
</script>
22
jQuery selectors
used to "find" (or select) HTML elements based on their
id, classes, types, attributes, values of attributes
based on the existing CSS selectors
has some own custom selectors
All selectors in jQuery start with the dollar sign and
parentheses: $().
23
Element Selector
selects elements based on the element name
select all <p> elements:
$(document).ready(function()
{
$("button").click(function()
{
$("p").hide();
});
});
24
#id selector
uses the id attribute of an HTML tag to find the specific
element
id should be unique within a page to find the desired element
write a hash character, followed by the id of the HTML
element
$(document).ready(function()
{
$("button").click(function()
{
$(“#test").hide();
});
});
25
.class selector
uses the class attribute of an HTML tag to find multiple
elements (a group)
write a dot character, followed by the classname of the
HTML element
$(document).ready(function()
{
$("button").click(function()
{
$(“.test").hide();
});
});
26
Whats going to happen with these?
$("*")
$(this)
$("p.intro")
$("p#first")
27
Best Practice
Place your jQuery functions in a separate file (.js file)
Link to the file in the HTML
<head>
< script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
< /script>
<script src="my_jquery_functions.js"></script>
< /head>
28
jQuery events
tailor-made to respond to events (users actions )in an
HTML page
the precise moment when something happens.
examples:
29
moving a mouse over an element
selecting a radio button
clicking on an element
jQuery events
"fires" – term used to indicate and event has initiated
ex. to assign and event:
$("p").click();
Next, define what should happen when the event fires.
must pass a function to the event
$("p").click(function()
{
// action to be taken goes here!!
});
30
Common Events
Which HTML element would you attach a hover event?
mouseenter? mouseleave?
31
jQuery Mobile
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
32
Must start with HTML 5 doctype
<!DOCTYPE html>
Installing jQuery Mobile
As with jQuery core, there is nothing to install – to get it to work, use
the CDN
include the stylesheet (.css) and JavaScript libraries (.js) directly into your HTML
page
<head>
<!-- Include meta tag to ensure proper rendering and touch zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 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>
</head>
33
jQuery Mobile vs. jQuery
Has page-related events you can invoke programmatically
during the lifecycle of a pageview
Has custom events for handling user gestures and device
orientation
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()
Swipe
Tap
Tap-and-hold
Uses themes to customize the look and feel of the app
34
Differences in construct
$(document).ready(function()
{
});
$(selector).live(‘pageinit’, (function(event)
{
}));
jQuery sends an event when
the web page is loaded
35
jQuery Mobile sends an event when a page
view has been initialized
data-roles
HTML5 data-* attribute creates a "touch-friendly" and attractive look for
mobile devices
Data-roles allow navigation between page views
Inside the <body> tag, each view or "page" on the mobile device is
identified with an element (usually a div) with the data-role="page"
attribute:
<div data-role="page"> ... </div>
Within the "page" container, any valid HTML markup can be used, but for
typical pages in jQuery Mobile, the immediate children of a "page" are divs
with data-roles of "header", "content", and "footer".
<div data-role="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>
36
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<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/jquery-1.11.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content">
<p>Page content goes here.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
37
Example
38