sd1230 unit 10 mobile web. course objectives during this unit, we will cover the following course...
TRANSCRIPT
![Page 1: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/1.jpg)
SD1230
Unit 10Mobile Web
![Page 2: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/2.jpg)
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.
![Page 3: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/3.jpg)
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.
![Page 4: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/4.jpg)
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.
![Page 5: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/5.jpg)
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.
![Page 6: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/6.jpg)
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
![Page 7: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/7.jpg)
Mobile Safari
![Page 8: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/8.jpg)
Android Browser
![Page 9: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/9.jpg)
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
![Page 10: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/10.jpg)
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
![Page 11: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/11.jpg)
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>
![Page 12: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/12.jpg)
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);
}
![Page 13: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/13.jpg)
HTML5
• New elements– canvas– header– nav– article– section– aside– footer
• Offline data storage
![Page 14: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/14.jpg)
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>
![Page 15: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/15.jpg)
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>
![Page 16: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/16.jpg)
Offline Data Storage
![Page 17: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/17.jpg)
CSS2
• Acid2 test• Mobile Safari does not
have a perfect score.• Supports most
positioning techniques
![Page 18: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/18.jpg)
CSS3
• Supports majority of CSS3 selectors
• 97% on Acid3 test
![Page 19: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/19.jpg)
Multiple Background Images
![Page 20: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/20.jpg)
Box Sizing
<div style="width: 200px; border: 5px black solid; padding: 10px;
-webkit-box-sizing:border-box;">Box</div>
![Page 21: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/21.jpg)
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;
![Page 22: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/22.jpg)
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)}
![Page 23: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/23.jpg)
Visual Effects
• Gradients• Masks• Transitions• Transforms• Animation• Hover, click, and tap
![Page 24: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/24.jpg)
Gradients
-webkit-gradient(type, start_point, end_point, / stop...)
-webkit-gradient(type, inner_center, inner_radius, outer_center, outer_radius, /
stop...)
![Page 25: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/25.jpg)
Masks
<img src="penny.png" style="-webkit-mask-box-image: url(heart.png);">
![Page 26: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/26.jpg)
Transitions
-webkit-transition:property duration timing_function delay
![Page 27: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/27.jpg)
Transforms
.rotate-me {-webkit-transform: rotate(45deg);
![Page 28: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/28.jpg)
Animations<style>top:.bounce {-webkit-animation-name: bounce;-webkit-animation-duration: 4s;-webkit-animation-iteration-count: 3;}</style>
![Page 29: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/29.jpg)
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>
![Page 30: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/30.jpg)
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;
![Page 31: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/31.jpg)
JavaScript
• Client-side script• Functions can be stored:– In external file– In the <head> section
• Foundation for:– DHTML– Ajax
![Page 32: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/32.jpg)
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>
![Page 33: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/33.jpg)
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
![Page 34: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/34.jpg)
Using CSS Transforms to Createa Fixed Footer
![Page 35: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/35.jpg)
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">
![Page 36: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/36.jpg)
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" />
![Page 37: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/37.jpg)
Tools and Libraries
• PhoneGap• iPhone GUI PSD• iUI• JQTouch
![Page 38: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/38.jpg)
PhoneGap
![Page 39: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/39.jpg)
iPhone UI PSD
![Page 40: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/40.jpg)
iUI
![Page 41: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/41.jpg)
JQTouch
![Page 42: SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website](https://reader034.vdocuments.net/reader034/viewer/2022051819/551ab4f15503466b6a8b4586/html5/thumbnails/42.jpg)
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