Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile Web 5.0

3,686 views

Published on

Are the smartphone wars wearing your out? When asked to choose between Objective-C and Java do you answer “None of the Above”? Do you think app stores are so 1995? Then there is good news for you and it’s called the mobile web. This isn’t about trying to port iFart to the browser, and it’s definitely not about tweaking an existing website so it doesn’t look awful on your mom’s iPhone. It is about writing full featured, engaging applications on the web. This talk is all about how to create killer web apps using HTML5, CSS3, as well as some other not-so-standard technologies available on a wide variety of popular smartphones. We’re talking about multi-threaded, high performance apps that can track your movement or even take pictures of whatever you think is interesting.

Published in: Technology
  • Be the first to comment

Mobile Web 5.0

  1. 1. MOBILE WEB 5.0 Michael Galpin, eBay
  2. 2. WHO AM I? Michael Galpin Mobile Architect, eBay Android & Mobile Web Author, Android in Practice @michaelg
  3. 3. WHY?
  4. 4. Mobile is the new HOTness
  5. 5. MO BILE W E B THE IPHONE MYTH
  6. 6. MO BILE 2 BIRDS, 1 STONE? W E B
  7. 7. MO BILE ONE WEBKIT TO W E B RULE THEM ALL?
  8. 8. MO BILE ONE WEBKIT TO W E B RULE THEM ALL? Android 2.2.1 iOS 4.1
  9. 9. MOBILE PARTY LIKE IT’S W E B 2022
  10. 10. WHAT?
  11. 11. WHAT ABOUT?
  12. 12. OMG! VIDEO TAG!!!
  13. 13. HTML
  14. 14. JavaScript HTML CSS 3.0
  15. 15. MO BILE JUST ADD W E B VIEWPORT?
  16. 16. HOW?
  17. 17. MO BILE W E B GEOLOCATION geocoder = new google.maps.Geocoder(); if (navigator.geolocation){ var gps = navigator.geolocation; gps.getCurrentPosition(function(pos){ var latLng = new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude); var opts = {zoom:12, center:latLng, mapTypeId: google.maps.MapTypeId.ROADMAP}; map = new google.maps.Map($("map_canvas"), opts); theUser = new google.maps.Marker({ position: latLng, map: map, title: "You!" }); }); trackerId = gps.watchPosition(function(pos){ var latLng = new google.maps.LatLng(pos.coords.latitude,pos.coords.longitude); map.setCenter(latLng); theUser.setPosition(latLng); }); }
  18. 18. MO BILE W E B GEOLOCATION OS/Browser Status/Version 3.0 2.0 6.0 X X
  19. 19. MO BILE W E B DOM STORAGE if (window.localStorage){ localStorage.setItem("tweet" + tweet.id, JSON.stringify(tweet)); var index = localStorage.getItem("index::" + keyword); if (index){ index = JSON.parse(index); } else { index = []; } index.push(tweet.id); localStorage.setItem("index::"+keyword, JSON.stringify(index)); }
  20. 20. MO BILE W E B DOM STORAGE if (window.localStorage){ localStorage.setItem("tweet" + tweet.id, JSON.stringify(tweet)); var index = localStorage.getItem("index::" + keyword); if (index){ index = JSON.parse(index); } else { index = []; } index.push(tweet.id); localStorage.setItem("index::"+keyword, JSON.stringify(index)); }
  21. 21. MO BILE W E B DOM STORAGE OS/Browser Status/Version 3.0 2.0 6.0 7.0 X
  22. 22. MO BILE W E B WEB WORKERS var worker = new Worker("details.js"); worker.onmessage = function(message){ var responseXmlStr = message.data.responseXml; var itemDetails = parseFromXml(responseXmlStr); if (window.localStorage){ localStorage.setItem(itemDetails.id, responseXmlStr); } dealDetails[itemDetails.id] = itemDetails; }; worker.postMessage(item.itemId); onmessage = function(message){ var itemId = message.data; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if (this.readyState == 4 && this.status == 200){ postMessage({responseXml: this.responseText}); } }; var urlStr = generateUrl(itemId); xhr.open("GET", "proxy?url=" + escape(urlStr)); xhr.send(null); }
  23. 23. MO BILE W E B WEB WORKERS OS/Browser Status/Version X 2.0 6.0 X X
  24. 24. MO BILE W E B WEBSOCKET if (window.WebSocket){ var conn = new WebSocket("ws://my.server.com/socket"); conn.onopen = function(){ setStatusMessage('connecting...'); conn.send('connect'); }; conn.onmessage = function(msg){ setStatusMessage('connected'); updateItemStatus(JSON.parse(msg.data)); }; a at conn.onerror = function(err){ D showError(err); conn.close(); }; conn.onclose = function(evt){ setStatusMessage('connection closed'); }; }
  25. 25. MO BILE W E B WEBSOCKET OS/Browser Status/Version 4.2b X X X X
  26. 26. MOBILE W E B CANVAS var ctx = $("graph").getContext("2d"); ctx.font = "bold 12px sans-serif"; ctx.textAlign = "start"; for (i=0;i<data.length;i++){ ctx.fillStyle = "rgba(0, 0, 200, 0.9)"; ctx.fillRect(x, maxHeight - (data[i][report.y] / 2), width, (data[i][report.y] / 2)); ctx.fillStyle = "rgba(0, 0, 0, 0.9)"; ctx.fillText(data[i][report.x], x + (width / 4), maxHeight + 15); x += width + buffer; } ctx.moveTo(axisBuffer, maxHeight); ctx.lineTo(axisBuffer+maxWidth, maxHeight); ctx.strokeStyle = "black"; ctx.stroke(); ctx.moveTo(axisBuffer,0); ctx.lineTo(axisBuffer,maxHeight); ctx.stroke();
  27. 27. MO BILE W E B CANVAS OS/Browser Status/Version 1.0 1.0 6.0 X v2
  28. 28. MOBILE W E B CSS 3.0 $("formSection").style["-webkit-transform"] = "rotateZ(-5deg)"; $("formSection").style["-webkit-transition"] = "-webkit-transform 2s ease-in-out"; $("rtBtn").innerHTML = "Undo"; $("rtBtn").onclick = function() { $("formSection").style["-webkit-transform"] = ""; $("rtBtn").innerHTML = "Rotate"; $("rtBtn").setAttribute("onclick", "rotate()"); }
  29. 29. MORE CSS 3.0 .abc { tr:nth-child(4n+1) { color: navy; } border: 1px solid #000; tr:nth-child(4n+2) { color: green; } border-radius: 9px; tr:nth-child(4n+3) { color: maroon; } -webkit-column-count:4; tr:nth-child(4n+4) { color: purple; } -webkit-column-rule: 1px solid #a00; header > h1{ -webkit-column-gap: 0.75em; color: yellow; } background: -webkit-gradient(linear, left top, h2 { left bottom, from(blue), to(white)) -webkit-text-fill-color: blue; } -webkit-text-stroke-color: yellow; .xyz{ -webkit-text-stroke-width: 1.5px; text-shadow: #6374AB 4px -4px 2px; background: -webkit-gradient(radial, 430 50, 0, overflow: hidden; 430 50, 200, from(red), to(#000)); text-overflow: ellipsis; -webkit-box-reflect:below 5px -webkit-gradient( border: 1px solid #bbb; linear, left top, left bottom, border-radius: 9px; from(transparent), background-color: #fff; color-stop(0.5, transparent), to(white)); } }
  30. 30. MO BILE W E B CSS 3.0 OS/Browser Status/Version 3.0 2.0 X X X
  31. 31. MO BILE APPLICATION W E B CACHE <!DOCTYPE html> <html manifest="manifest.mf"> <head> <!-- ... --> </head> <body> <!-- ... --> </body> </html> CACHE MANIFEST # Version 0.2 CACHE: offline.html json2.js /images/gym.jpg /images/soccer.jpg /images/online.jpg NETWORK: http://search.twitter.com/
  32. 32. MO BILE W E B APPLICATION OS/Browser Status/Version 2.0 2.0 6.0 X X
  33. 33. DEVICE MOBILE W E B if (navigator.device.captureImage){ device.captureImage(function(data){ var file = data[0]; var xhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", function(e) { if (e.lengthComputable) { var percentage = Math.round((e.loaded * 100) / e.total); updateStatusBar(percentage); } }, false); xhr.open("POST", "http://my.server.com/upload"); xhr.overrideMimeType('text/plain; charset=x-user-defined-binary'); xhr.sendAsBinary(file.getAsBinary()); }); }
  34. 34. MO BILE W E B DEVICE OS/Browser Status/Version X 3.0 X X X
  35. 35. MO BILE W E B TOUCH EVENTS logo.ontouchmove = function(event){ if (event.touches.length == 1){ event.preventDefault(); var touch = event.touches[0]; var node = touch.target; node.style.position = "absolute"; node.style.left = touch.pageX + "px"; node.style.top = touch.pageY + "px"; } } var angle = 0; logo.ongesturechange = function(event){ var node = event.target; node.style.webkitTransform = "rotate("+ ((angle + event.rotation) % 360)+"deg)"; } logo.ongestureend = function(event){ angle = (angle + event.rotation) % 360; }
  36. 36. MO BILE W E B TOUCH EVENTS OS/Browser Status/Version 2.0 1.0 6.0? X X
  37. 37. MO BILE W E B AUDIO/VIDEO <video controls="controls" preload="true" width="720" height="640"> <source src="feature.ogg" type="video/ogg" /> <source src="feature.mp4" type="video/mp4" /> Your browser sucks </video>
  38. 38. MO BILE W E B AUDIO/VIDEO OS/Browser Status/Version 1.0 2.0 X X X
  39. 39. MO BILE W E B META <meta name="viewport" content="width=device-width; user- scalable=no;"/> <meta name="apple-touch-fullscreen" content="YES" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="apple-touch-icon" href="rice-and-bones.png"/>
  40. 40. NO REALLY, HOW?
  41. 41. MOBILE BEST W E B PRACTICES • Servers are for data • Orientation matters • Cache, cache, cache • Frameworks (not really mobile): SproutCore, Cappuccino • Frameworks (mobile): Sencha, jQTouch

×