Presentation is loading. Please wait.

Presentation is loading. Please wait.

SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website.

Similar presentations


Presentation on theme: "SD1230 Unit 10 Mobile Web. Course Objectives During this unit, we will cover the following course objectives: – Identify the characteristics of website."— Presentation transcript:

1 SD1230 Unit 10 Mobile Web

2 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.

3 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.

4 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.

5 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.

6 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

7 Mobile Safari

8 Android Browser

9 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

10 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 AjaxCSSHTML5

11 XHTML An XHTML 1.0 Compliant Document Here is some text

12 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); }

13 HTML5 New elements – canvas – header – nav – article – section – aside – footer Offline data storage

14 Canvas Element 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); }

15 Canvas Element This example requires a browser that supports the HTML5 <canvas> feature.

16 Offline Data Storage

17 CSS2 Acid2 test Mobile Safari does not have a perfect score. Supports most positioning techniques

18 CSS3 Supports majority of CSS3 selectors 97% on Acid3 test

19 Multiple Background Images

20 Box Sizing

Box

Similar presentations


Ads by Google