File - McAvoy Tech Teaching

Download Report

Transcript File - McAvoy Tech Teaching 

SD1230
Unit 10
Mobile Web
Course Objectives
• During this unit, we will cover the following
course objectives:
– Identify the characteristics of website
applications.
– Describe the differences and similarities of mobile
Web and mobile applications.
– Describe the process used to build a mobile
website.
Learning Outcomes
• Completing this unit should help enable you
to:
– Identify the characteristics of mobile Web apps
and mobile websites.
– Create a simple mobile website.
– Understand the behaviors and habits of mobile
users.
– Explore the design differences between mobile
websites and desktop websites.
Learning Outcomes (cont.)
– Create a simple mobile website with a template.
– Add a location of Google Maps to a mobile
website.
– Add a photo gallery to a mobile website.
– Add a search engine link to a mobile website.
Why Prioritize iPhone Web App
Development?
• The iPhone has proven to be the market leader in
terms of innovation and market share of the devices
that access the mobile Web the most.
• The iPhone is marketed, sold, and supported by Apple,
not the operator.
• The iPhone has the lowest development cost for the
highest number of supported devices.
• It requires little to no additional knowledge apart from
HTML, CSS, and JavaScript.
• It has simple and cost-effective testing.
• It is the highest consumer of mobile data.
WebKit
• Open source Web browser engine
• Ideal for mobile devices
– Small footprint
– Capability of rendering full-scale desktop websites
on mobile devices
• Basis for iPhone and Android browsers
Mobile Safari
Android Browser
Mobile Web App Characteristics
• Is an application-like experience that alters
existing views, in place, instead of loading new
pages like a traditional website
• Uses client-side (or offline) storage for local data
• Heavily uses DHTML or Ajax to create the user
experience
• Has a defined viewport for the mobile context
• Can run in full-screen mode
• Can be launched like a native application
Mobile Web Site vs. Mobile Web App
Mobile website
• Multi-page model
• Hierarchical page structure
• Degrades to lower-end
devices
Detail
Mobile Web app
• Single-page model
• Uses Ajax to load content
based on user actions
• Does not degrade to lowerend devices
Products
Search
Home
Store1
Locations
HTML5
CSS
Ajax
Store2
Dynamic content
XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en" dir="ltr">
<head>
<title>An XHTML 1.0 Compliant Document</title>
</head>
<body>
<p>Here is some text</p>
</body>
</html>
Script to Determine if the Client Is a
WebKit Browser on a Mobile Device
function iPhoneClient()
{
return RegExp("
AppleWebKit/").test(navigator.u
serAgent) &&
RegExp("
Mobile/").test(navigator.userAg
ent);
}
HTML5
• New elements
–
–
–
–
–
–
–
canvas
header
nav
article
section
aside
footer
• Offline data storage
Canvas Element
<head>
<script type="text/javascript" charset="utf-8">
function draw()
{
// grab the canvas element
var canvas = document.getElementById("canvas");
if (canvas.getContext)
{
// grab the context
var ctx = canvas.getContext("2d");
// background box
ctx.fillStyle = "rgba(100, 100, 100,0.2)";
ctx.fillRect(0, 0, 90, 90);
// first, smallest
ctx.fillStyle = "rgba(100,100,100,0.5)";
ctx.fillRect(10, 10, 10, 10);
}
}
</script>
Canvas Element
<body onload="draw();">
<canvas id="canvas"
width="150" height="150">
<p>This example requires a
browser that supports the
<a
href="http://www.w3.org/html
/wg/html5/">HTML5</a>
&lt;canvas&gt;
feature.</p>
</canvas>
</body>
Offline Data Storage
CSS2
• Acid2 test
• Mobile Safari does not
have a perfect score.
• Supports most
positioning techniques
CSS3
• Supports majority of
CSS3 selectors
• 97% on Acid3 test
Multiple Background Images
Box Sizing
<div style="width: 200px;
border: 5px black solid;
padding: 10px;
-webkit-box-sizing:border-box;">
Box
</div>
Other Box Effects
• box-shadow
-webkit-box-shadow: hoff voff blur color;
• Rounded corners
-webkit-border-radius: 5px;
• Border images
-webkit-border-image: url("border.png") 20 14
round stretch;
Text Effects
• Text shadow
text-shadow: 3px 3px 2px #333333;
-webkit-text-fill-color: #0000ff;
-webkit-text-stroke: 1px #000;
• Text overflow
text-overflow: clip;
text-overflow: ellipsis;
.truncate {
white-space: nowrap; (don't wrap the line)
width: 200px; (define the visible area)
overflow: hidden; (hide text outside the
visible area)
text-overflow: ellipsis; (add the ellipsis)
}
Visual Effects
•
•
•
•
•
•
Gradients
Masks
Transitions
Transforms
Animation
Hover, click, and tap
Gradients
-webkit-gradient(type,
start_point, end_point, /
stop...)
-webkit-gradient(type,
inner_center, inner_radius,
outer_center, outer_radius, /
stop...)
Masks
<img src="penny.png"
style="-webkit-mask-box-image:
url(heart.png);">
Transitions
-webkit-transition:property
duration timing_function delay
Transforms
.rotate-me {webkittransform:
rotate(45deg);
Animations
<style>
top:
.bounce {
-webkit-animation-name: bounce;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 3;
}
</style>
Animations
<script type="text/javascript" charset="utf-8">
function restartBounce(element)
{
element.style.webkitAnimationName = '';
window.setTimeout(function() {
element.style.webkitAnimationName = 'bounce';
}, 0);
}
</script>
<body>
<div class="bounce" onclick="restartBounce(this)">
</div>
</body>
Taps
• Mobile phones don’t support hover because
there is no mouse.
• One way around it:
– Hover action occurs on first tap.
– Click action occurs on second tap.
-webkit-tap-highlight-color:
blue;
JavaScript
• Client-side script
• Functions can be stored:
– In external file
– In the <head> section
• Foundation for:
– DHTML
– Ajax
DHTML
<script type="text/javascript">
<!-function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
//-->
</script>
Ajax
• Developer causes event to happen on the
server without a refresh in the browser
• Three parts:
– Data sent to server
• Plain text
• XML
• JSON
– Function to be performed on data
– Request for response
• Callback function
Using CSS Transforms to Create
a Fixed Footer
Viewport
• Area of the window where content can be
seen by the user
<meta name="viewport"
content="width=device-width">
• Prevent the user from scaling
<meta name="viewport"
content="initial-scale=1.0, userscalable=no">
Full-Screen Mode
• Browser back and forward buttons not available
• Hyperlinks show the full browser window
• Apple-only
<meta name="viewport"
content="initial-scale=1.0, userscalable=no">
• Changing the status bar appearance
<meta name="apple-mobile-web-appstatus-bar-style" content="black" />
Tools and Libraries
•
•
•
•
PhoneGap
iPhone GUI PSD
iUI
JQTouch
PhoneGap
iPhone UI PSD
iUI
JQTouch
Summary
• In this unit, we covered the following topics:
– WebKit browsers
– Mobile website vs. mobile Web app
– XHTML and HTML5
– CSS
– JavaScript, DHTML, and Ajax
– Tools and libraries