CS 696 Emerging Web and Mobile TechnologiesSpring Semester, 2011Doc 8 Location, Web Workers, Mobile App StartFeb 8, 2011Copyright ©, All rights reserved. 2011 SDSU & Roger Whitney, 5500 Campanile Drive, San Diego, CA 92182-7700 USA. OpenContent (http://www.opencontent.org/opl.shtml) license defines the copyright on this document.Tuesday, February 22, 2011References2jQuery Mobile Documentation, http://jquerymobile.com/test/HTML5 & CSS3 Develop with Tomorrow's Standards Today, Hogan, Pragmatic ProgrammersBuilding iPhone Apps with HTML, CSS, and JavaScript, Jonathan StarkBuilding Android Apps with HTML, CSS, and JavaScript, Jonathan StarkTuesday, February 22, 2011Location3<html lang="en"><head> <meta charset="utf-8" /> <title>Untitled</title></head><body onload="navigator.geolocation.getCurrentPosition(function(position) { alert(position.coords.latitude); alert(position.coords.longitude);});"></body></html>Tuesday, February 22, 2011Location on Desktop browsers4Google street view cars record location of all wi-fi spots Tuesday, February 22, 2011Web Workers5JavaScript threads in browserHeavy-weight threadsHigh start-up costHigh per-instance memorySupported inFireFox 3.5+Chome 3+Safari 4+Opera 10.6+Not supported inInternet ExploreriOSAndroidTuesday, February 22, 2011http://en.wikipedia.org/wiki/Web_WorkersWeb Workers6Web workers don't have access to DOMExcept for XMLHttpRequestCan have multiple workersWorkers can communicate with each otherTuesday, February 22, 2011Example7<!DOCTYPE HTML><html> <head> <title>Worker example: One-core computation</title> </head> <body> <p>The highest prime number discovered so far is: <output id="result"></output></p> <script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { document.getElementById('result').textContent = event.data; }; </script> </body></html>Tuesday, February 22, 2011http://www.whatwg.org/specs/web-workers/current-work/worker.js8var n = 1;search: while (true) {n += 1;for (var i = 2; i <= Math.sqrt(n); i += 1)if (n % i == 0)continue search;// found a prime!postMessage(n);}Tuesday, February 22, 2011worker.onmessage9var worker = new Worker('worker.js'); worker.onmessage = function (event) { document.getElementById('result').textContent = event.data; };Callback method for messages from threadTuesday, February 22, 2011postMessage10var n = 1;search: while (true) {n += 1;for (var i = 2; i <= Math.sqrt(n); i += 1)if (n % i == 0)continue search;// found a prime!postMessage(n);}How thread sends message to main threadTuesday, February 22, 201111Mobile Web AppsTuesday, February 22, 201112iPhone Browser SizesTuesday, February 22, 2011source: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.htmlViewport13Region of the screen used to display part of imageMobile viewportFixed sizeCan change scaleTuesday, February 22, 2011Viewport & Scale14Tuesday, February 22, 2011http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html<meta name="viewport" content="user-scalable=no, width=device-width" />15width=device-widthmake the view port same size as the deviceuser-scalable=noDon't let user zoom in or outCommon settings for web app to look like iPhone appTuesday, February 22, 2011The iPhone Look16 <body> <div id="container"> <div id="header"> <h1><a href="./">Jonathan Stark</a></h1> <div id="utility"> <ul> <li><a href="about.html">About</a></li> <li><a href="blog.html">Blog</a></li> </ul> </div> <div id="nav"> <ul> <li><a href="consulting-clinic.html">Consulting Clinic</a></li> <li><a href="on-call.html">On Call</a></li> <li><a href="development.html">Development</a></li> </ul>Tuesday, February 22, 2011The iPhone Look (same on Android)17#header ul li a { background-color: #FFFFFF; border: 1px solid #999999; color: #222222; display: block; font-size: 17px; font-weight: bold; margin-bottom: -1px; padding: 12px 10px; text-decoration: none;}#header ul li:first-child a { -webkit-border-top-left-radius: 8px; -webkit-border-top-right-radius: 8px;}#header ul li:last-child a { -webkit-border-bottom-left-radius: 8px; -webkit-border-bottom-right-radius: 8px;}Tuesday, February 22, 2011jQuery Mobile18Touch-Optimized Web Framework for Smartphones & TabletsAlpha 3 release Feb, 2011Tuesday, February 22, 2011jQuery Mobile Example19<body><div data-role="page" data-theme="b"> <div id="jqm-homeheader"> <h1> Hello World! </h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b"> <li data-role="list-divider">Example</li> <li>List Item</li> <li><a href="page.html">With Link</a></li> </ul> </div></div></body>Tuesday, February 22, 2011Single Page Structure20<!DOCTYPE html> <html><head> <title>Page Title</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js"></script></head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1></div> <div data-role="content"><p>Page content goes here.</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div></div></body></html>Tuesday, February 22, 2011Themes21Tuesday, February 22, 2011Themes22Tuesday, February 22,
View Full Document
Unlocking...