sd1230 unit 10 mobile web. course objectives during this unit, we will cover the following course...
TRANSCRIPT
SD1230
Unit 10Mobile 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
Mobile Web app• Single-page model• Uses Ajax to load content
based on user actions• Does not degrade to lower-
end devices
Home
Products
Detail
Search
Locations
Store1
Store2
Dynamic content
Ajax
CSSHT
ML5
XHTML<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.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.userAgent) &&
RegExp(" Mobile/").test(navigator.userAgent);
}
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 elementvar canvas = document.getElementById("canvas");if (canvas.getContext){// grab the contextvar ctx = canvas.getContext("2d");// background boxctx.fillStyle = "rgba(100, 100, 100,0.2)";ctx.fillRect(0, 0, 90, 90);// first, smallestctx.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> <canvas> 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 overflowtext-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 {-webkit-transform: 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';
elsee.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 Createa 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, user-scalable=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, user-scalable=no">
• Changing the status bar appearance<meta name="apple-mobile-web-app-status-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