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 Multi-page model Hierarchical page structure Degrades to lower-end devices 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 HTML5 CSS Ajax Dynamic content
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 Offline data storage 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 Rounded corners Border images -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 overflow text-overflow: clip; 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: Foundation for: 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, 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