SD1230

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 Mobile Web app Single-page model Uses Ajax to load content based on user actions Does not degrade to lower-end devices • Multi-page model • Hierarchical page structure • Degrades to lower-end devices

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 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> <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 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 {-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">  </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

SD1230

SD1230

Presentation Transcript

SD1230

SD1230

SD1230

SD1230

SD1230