Your SlideShare is downloading. ×
Native vs html5
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Native vs html5

1,222
views

Published on

Published in: Technology, Travel, Business

1 Comment
0 Likes
Statistics
Notes
  • The video of the talk is available here:
    http://skillsmatter.com/podcast/os-mobile-server/native-vs-html5-why-when-and-how-to-use-them
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
1,222
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
14
Comments
1
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • There is the iPhone\n\nAnd the Android devices\n- lots of manufacturers\n- same manufacturer has various screen sizes and types (eg. with physical keyboard)\n\nAnd the Windows Phone 7 devices\n- lots of devices again\n- Nokia seems to be betting their business on WP7\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • That app was actually created by the guy in the picture - he’s 71 yo!\nAnd that’s another paradigm change - anyone can dream, build, publish and make a living from this.\nDemocratisation of development - topic for another talk! ;)\n
  • \n
  • It’s versatile\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • There is the iPhone\n\nAnd the Android devices\n- lots of manufacturers\n- same manufacturer has various screen sizes and types (eg. with physical keyboard)\n\nAnd the Windows Phone 7 devices\n- lots of devices again\n- Nokia seems to be betting their business on WP7\n
  • \n
  • Stats from David Smith, creator of Audiobooks - a very popular iOS app\n38% of users running the latest iOS version in 5 days\n\nHighly competive environment\n
  • Huge hardware segmentation\n\nHuge software segmentation\n- eg. Carphone Warehouse still sells devices with Android 2.1\n
  • \n
  • It’s a highly competitive market.\n\nPalm was the first casualty but, based on the outlook.... RIM might follow them.\n
  • It’s a highly competitive market.\n\nPalm was the first casualty but, based on the outlook.... RIM might follow them.\n
  • \n
  • SERIOUS TOOL\n• Limited colour palette• Focus on minimising graphics• Most important thing is the data • Standard Navigation• Clear divisions and blocks\n\n
  • FUN TOOL\n• Moderate use of colour• Moderate use of graphics• Simple hierarchy of information• Encourages leisurely productivity\n\n\n
  • FUN ENTERTAINMENT\n• Extremely graphically rich• Fun use of sound,• Simple hierarchy of information \n• In-your-face visual feedback\n\n\n\n
  • SERIOUS ENTERTAINMENT\n• Moderate use of graphics• Content Focused• Normally heavy use of tabbed data \n• Standard navigation elements\n\n\n\n
  • UTILITY\n• Graphically rich• Normally single screen• Does not have a hierarchy• Normally used for less than 30 seconds\n• Performs a single function\n\n\n\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • WebKit - Safari, Chrome, Android, webOS, LG Smart TV\nTrident - IE, WP7\nGecko - Firefox, Samsung TV\nPresto - Opera, Nintendo\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Only strings can be stored\n
  • \n
  • \n
  • WebSocket protocol handshake\n\n
  • \n
  • \n
  • \n
  • Web app \n - if you have a dedicated mobile website, you’re doing it wrong!\n\nNative apps\n\nHybrid apps \n - allows you to author native applications with web technologies and get access to APIs and app stores.\n - Bastard apps\n - lowest common denominator for features\n - assumes the interface is the same on all devices!!!\n
  • Web app \n - if you have a dedicated mobile website, you’re doing it wrong!\n\nNative apps\n\nHybrid apps \n - allows you to author native applications with web technologies and get access to APIs and app stores.\n - Bastard apps\n - lowest common denominator for features\n - assumes the interface is the same on all devices!!!\n
  • Web app \n - if you have a dedicated mobile website, you’re doing it wrong!\n\nNative apps\n\nHybrid apps \n - allows you to author native applications with web technologies and get access to APIs and app stores.\n - Bastard apps\n - lowest common denominator for features\n - assumes the interface is the same on all devices!!!\n
  • Web app \n - if you have a dedicated mobile website, you’re doing it wrong!\n\nNative apps\n\nHybrid apps \n - allows you to author native applications with web technologies and get access to APIs and app stores.\n - Bastard apps\n - lowest common denominator for features\n - assumes the interface is the same on all devices!!!\n
  • Web app \n - if you have a dedicated mobile website, you’re doing it wrong!\n\nNative apps\n\nHybrid apps \n - allows you to author native applications with web technologies and get access to APIs and app stores.\n - Bastard apps\n - lowest common denominator for features\n - assumes the interface is the same on all devices!!!\n
  • Web in green - because it doesn’t require approval\nHybrid moves in time to high costs\n
  • Web in green - because it doesn’t require approval\nHybrid moves in time to high costs\n
  • Web in green - because it doesn’t require approval\nHybrid moves in time to high costs\n
  • Web in green - because it doesn’t require approval\nHybrid moves in time to high costs\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • add screenshot from Homeflow app - map vs. list\n\n
  • add screenshot from Homeflow app - map vs. list\n\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • My ATM speaking Cockney\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. iOS Application DevelopmentNative vs. HTML5 Paul Ardeleanu London iOS Technical Group London, May 22nd 2012
    • 2. iOS Application DevelopmentNative vs. HTML5 Paul Ardeleanu London iOS Technical Group London, May 22nd 2012 #iOSLondon
    • 3. About me ‣ http://uk.linkedin.com/in/paulardeleanu ‣ http://twitter.com/pardel ‣ http://h24.co/pardelGplus ‣ paul@hello24.com London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 2 2012
    • 4. We live in a connected world London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c)flickr.com/photos/marc_smith/4311427445/ 3 2012
    • 5. Browsers London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 4 2012
    • 6. Usage share of web browsers London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 5 2012
    • 7. We live in a mobile world London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c)flickr.com/photos/athomeinscottsdale/5171125430/ 6 2012
    • 8. Mobile players London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 7 2012
    • 9. ... there is another one London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 8 2012
    • 10. Usage share of mobile web London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 9 2012
    • 11. http://labs.chitika.com/ London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 10 2012
    • 12. One more thing... “iPads dominate among tablets in driving digital traffic. In August 2011, iPads delivered 97.2 percent of all tablet traffic in the U.S. iPads have also begun to account for a higher share of Internet traffic than iPhones (46.8 percent vs. 42.6 percent of all iOS device traffic) “ comscore press release Oct 2011 London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 11 2012
    • 13. New challenges London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 12 2012
    • 14. New challenges ‣ small size (screen) London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 12 2012
    • 15. New challenges ‣ small size (screen) ‣ big pointy device London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 12 2012
    • 16. New challenges ‣ small size (screen) ‣ big pointy device ‣ limited hardware London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 12 2012
    • 17. New challenges ‣ small size (screen) ‣ big pointy device ‣ limited hardware ‣ one screen at a time London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 12 2012
    • 18. New challenges ‣ small size (screen) ‣ big pointy device ‣ limited hardware ‣ one screen at a time ‣ one application at a time * London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 12 2012
    • 19. And opportunities London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 13 2012
    • 20. And opportunities ‣ always connected London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 13 2012
    • 21. And opportunities ‣ always connected ‣ GPS device London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 13 2012
    • 22. And opportunities ‣ always connected ‣ GPS device ‣ digital brain London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 13 2012
    • 23. And opportunities ‣ always connected ‣ GPS device ‣ digital brain ‣ computer in your pocket London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 13 2012
    • 24. New interactions ‣ gestures (tap, double-tap, drag, flick, swipe, pinch open/close, touch&hold ‣ shake ‣ orientation ‣ audio switch ‣ home & power buttons ‣ back button (on some devices) London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 14 2012
    • 25. On-demand & interactive London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c)flickr.com/photos/32615508@N02/3047147045/ 15 2012
    • 26. It’s personal & addictive London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c)flickr.com/photos/akosma/4076082946/ 16 2012
    • 27. It’s accessible London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) flickr.com/photos/christophd/4911047928/ 17 2012
    • 28. It’s versatile London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 18 2012
    • 29. London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 18 2012
    • 30. iOS Application Development
    • 31. iOS Application Development http://stopacta.info/
    • 32. 3 ways to deliver content London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 21 2012
    • 33. 3 ways to deliver content ‣web app London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 21 2012
    • 34. 3 ways to deliver content ‣web app ‣native app London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 21 2012
    • 35. 3 ways to deliver content ‣web app ‣native app ‣hybrid apps London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 21 2012
    • 36. iOS Application Development Native
    • 37. Main players London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 23 2012
    • 38. ... there is another one London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 24 2012
    • 39. iOS World‣ small set of devices ‣ iPhone: 3GS, 4 & 4S ‣ iPod Touch: 4th generation only ‣ iPad: original, 2, the new iPad‣ small set of OS versions‣ 600k available apps‣ 365m devices david-smith.org/blog/2012/03/10/ios-5-dot-1- upgrade-stats/ London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 25 2012
    • 40. Android‣ hundreds of devices ‣ en.wikipedia.org/wiki/List_of_Android_devices‣ wide range of screen sizes & resolutions‣ high OS fragmentationdeveloper.android.com/resources/dashboard/platform- www.android.com/devices/?versions.html country=uk London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 26 2012
    • 41. http://opensignalmaps.com/reports/fragmentation.php London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 27 2012
    • 42. Casualties London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 28 2012
    • 43. Casualties London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 28 2012
    • 44. Casualties London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 28 2012
    • 45. Type of apps fun seriousness serious tool purpose entertainment London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 29 2012
    • 46. Serious tool fun seriousnessserious tool purpose entertainment London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 30 2012
    • 47. Fun tool fun seriousnessserious tool purpose entertainment London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 31 2012
    • 48. Fun entertainment fun seriousnessserious tool purpose entertainment London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 32 2012
    • 49. Serious entertainment fun seriousnessserious tool purpose entertainment London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 33 2012
    • 50. Utility fun seriousnessserious tool purpose entertainment http://h24.co/NearestBus London iOS Technical Group, London, May 22nd 2012 Slide 34 Hello24 Ltd. (c) 2012
    • 51. iOS Application Development HTML5
    • 52. The web so far... ‣ 1991 - "HTML Tags", Tim Berners-Lee ‣ 1995 - HTML 2.0 ‣ 1995 - HTML 3.0 proposed as standard to the IETF & dropped ‣ 1997 - HTML 3.2 ‣ 1997 - HTML 4.0 ‣ 1998 - HTML 4.01 ‣ XHTML 1.0 ‣ XHTML 1.1 ‣ XHTML 2.0 (dropped) London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 36 2012
    • 53. Usage share of web browsers London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 37 2012
    • 54. Why do we need a new version? ‣ Touch devices / browser ubiquity ‣ Offline access ‣ Plugins are evil London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 38 2012
    • 55. HTML5 Design Principles ‣ Compatibility: evolution not revolution ‣ Utility: real problems, secure by design ‣ Interoperability: well-defined behaviour ‣ Universal Access: <ruby>, plugin-free paradigm London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 39 2012
    • 56. ‣ 1998 - HTML5 working draft by W3C‣ W3C Recommendation by late 2010 - delayed until 2011‣ 2012 - candidate recommendation‣ 2022 - proposed recommendation London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 40 2012
    • 57. Are you ready?‣ http://html5test.com/‣ http://caniuse.com/‣ http://mobilehtml5.org/ London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 41 2012
    • 58. HTML5 Layout Engines ‣ WebKit ‣ Trident ‣ Gecko ‣ Presto London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 42 2012
    • 59. WebKit ‣ http://www.webkit.org/ ‣ Contributors: Apple, KDE, Nokia, Google, RIM, Palm/HP, Samsung & others London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 43 2012
    • 60. Divitis London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 44 2012
    • 61. Divitis ‣ HTML disease London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 44 2012
    • 62. Divitis ‣ HTML disease ‣ related to classitis & span-mania London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 44 2012
    • 63. Divitis ‣ HTML disease ‣ related to classitis & span-mania “Chronic syndrome that causes web developers to wrap elements with extra div tags” [HTML5 & CSS3 book - Brian Hogan, Pragmatic Programmers] London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 44 2012
    • 64. London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 45 2012
    • 65. Structural tags ‣ <header> ‣ <footer> ‣ <nav> ‣ <section> ‣ <article> ‣ <aside> London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 46 2012
    • 66. Form elements ‣ input type=”email” ‣ input type=”url”‣ input ‣ input type=”tel” ‣ type ‣ email ‣ url ‣ tel ‣ search ‣ range ‣ number ‣ date ‣ datetime ‣ color‣ autofocus‣ placeholder London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 47 2012
    • 67. Form elements<ul style="list-style-type:none;">   <li><input type="text" id="username" placeholder="username"required></li>   <li><input type="email" id="email" placeholder="your email address"></li>   <li><input type="url" placeholder="website"></li>   <li><input type="tel" placeholder="phone number"></li>   <li><label for="priority">Priority:</label> <input type="range" id="priority" min="10" max="100"></li>   <li><label for="start_date">Start date:</label> <input type="date" id="start_date" value="2012-03-05"></li></ul> London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 48 2012
    • 68. In-place editing<ul> <li> <b>Name</b> <span id="name" contenteditable="true">John Smith</span> </li> <li> <b>Email</b> <span id="email" contenteditable="true">john@smith.com</span> </li> <li> <b>Postal Code</b> <span id="postal_code" contenteditable="true">92110</span> </li></ul> London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 49 2012
    • 69. URL scheme<a href=”mailto://paul@hello24.com”>Email me</a><a href=”tel://012345223”>Phone me</a><a href=”sms://0123456”>SMS me</a><a href=”http://map.google.com/maps?q=100+Avenue+Road+London+NW3+3PF">Find us</a><a href=”http://map.google.com/maps?daddr=100+Avenue+Road+London+NW3+3PF&saddr=South+Collonnade+Canary+Wharf+E14+5EP">Driving directions</a> London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 50 2012
    • 70. Older browsers ‣ html5shiv ‣ Modenizr ‣ html5boilerplate ‣ polyfills ‣ Google Chrome frame London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 51 2012
    • 71. Media queries <style> @media all and (orientation:landscape) { body { background-color: #f0f0f0; } } @media screen and (orientation:portrait) { body { background-color: #ffeeee; } } </style> London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 52 2012
    • 72. Media queries @media (max-width: 480px) { .tagline { clear:both;} } @media (min-width: 481px) and (max-width: 767px) { .tagline { clear:both;} } @media (min-width: 768px) and (max-width: 979px) { .social { clear:right; float:right; margin:4px 0 10px 0; } .tagline { float:right; clear:both; width:98%;} } @media (min-width: 980px) and (max-width: 1199px) { #logo {width: 300px;} #logo img { max-height:180px; float:left; margin-right:16px; } .social { clear:right; float:right; margin:4px 0 10px 0; } .tagline { float:right; clear:right; margin-left:-270px; width:850px;} .tagline h3 { font-size:18px; } } @media (min-width: 1200px) { #logo {width: 370px;} #logo img { max-height:180px; float:left; margin-right:16px; } .social { clear:right; float:right; margin:4px 0 10px 0; } .tagline { float:right; clear:right; margin-left:-270px; width:1070px;} .tagline h3 { font-size:20px; } } London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 53 2012
    • 73. Media querieshttp://2012.dconstruct.org/http://mediaqueri.es/ London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 54 2012
    • 74. Multimedia ‣ <audio> ‣ <video> ‣ codecs battle: H.264 & Ogg/WebM London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 55 2012
    • 75. Canvas<canvas height="400" width="600" id="myCanvas" style="background-color:white">Update your browser to enjoy canvas!</canvas><script>function drawDiagonal() {  var canvas = document.getElementById(myCanvas);  var context = canvas.getContext(2d);  context.strokeStyle = #ff0000;  context.beginPath();  context.moveTo(70, 70);  context.lineTo(140, 140);  context.stroke();   context.fillStyle = "rgba(0,0,255,0.6)"; context.beginPath(); context.moveTo(125,100); context.lineTo(175,50); context.lineTo(225,150); context.fill();}window.addEventListener("load", drawDiagonal, true);</script> London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 56 2012
    • 76. Geolocation<script>//Checking for browser supportif(navigator.geolocation) { document.getElementById("hasLocation").innerHTML = "HTML5 Geolocation is supported."; navigator.geolocation.getCurrentPosition(updateLocation);} else { document.getElementById("hasLocation").innerHTML = "HTML5 Geolocation is not supported.";}function updateLocation(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; var accuracy = position.coords.accuracy; document.getElementById("myLocation").innerHTML = "Your location: " + latitude + " : " +longitude + " - accurate within " + accuracy + " meters";} </script> London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 57 2012
    • 77. Geolocation<script>//Checking for browser supportif(navigator.geolocation) { document.getElementById("hasLocation").innerHTML = "HTML5 Geolocation is supported."; navigator.geolocation.getCurrentPosition(updateLocation);} else { document.getElementById("hasLocation").innerHTML = "HTML5 Geolocation is not supported.";}function updateLocation(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; var accuracy = position.coords.accuracy; document.getElementById("myLocation").innerHTML = "Your location: " + latitude + " : " +longitude + " - accurate within " + accuracy + " meters";} </script> London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 57 2012
    • 78. Google Maps integration London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 58 2012
    • 79. <script> var start=; var to=London; var map; var directionsService; var directionsRenderer; function calcRouteFromHere() { var request = { origin: start, destination: to, travelMode: google.maps.DirectionsTravelMode.DRIVING }; directionsService = new google.maps.DirectionsService(); directionsRenderer = new google.maps.DirectionsRenderer(); directionsRenderer.setMap(map); directionsService.route(request, function (result, status) { if (status == google.maps.DirectionsStatus.OK) { directionsRenderer.setDirections(result); } else { console.log(status); } }); } function updateLocation(position) { //pass the position to the Google Map and center it start = new google.maps.LatLng(parseFloat(position.coords.latitude), parseFloat(position.coords.longitude)); map.setCenter(start); calcRouteFromHere(); } onload = function () { var latlng = new google.maps.LatLng(51.5435844, -0.1739516); var myOptions = { zoom: 8, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP}; map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); if(navigator.geolocation) { navigator.geolocation.getCurrentPosition(updateLocation); } London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c)}; </script> 59 2012
    • 80. Web workers ‣ perform long-running tasks ‣ can create their own workers London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 60 2012
    • 81. Offline & Storage ‣ cookie 4k ‣ web storage ‣ 5MB Firefox, Chrome, Opera ‣ 10MB IE ‣ database storage London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 61 2012
    • 82. Web Storage (DOM storage) Session storage sessionStorage.setItem(key, value); alert(sessionStorage.getItem(key)); Local storage localStorage.setItem(key, value); alert(localStorage.getItem(key)); London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 62 2012
    • 83. Database storage ‣ Web SQL database ‣ IE8, Chrome, Opera, Safari ‣ IndexedDB - technology formely known as WebSimpleDB ‣ Firefox, poss. IE 10 London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 63 2012
    • 84. Cross document messaging var o = document.getElementsByTagName(iframe)[0]; o.contentWindow.postMessage(Hello B, http://documentB.com/); function receiver(event) { if (event.origin == http://documentA.com) { if (event.data == Hello B) { event.source.postMessage(Hello A, how are you?, event.origin); } else { alert(event.data); } } } window.addEventListener(message, receiver, false); London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 64 2012
    • 85. WebSockets ‣ bi-directional ‣ full-duplex communication ‣ standardised ‣ Safari, Chrome, Firefox & IE10 ‣ BlackBerry Browser in OS7 London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 65 2012
    • 86. HTML5 ‣ Offline storage ‣ Geolocation ‣ Canvas drawing ‣ Web workers ‣ Cross document messaging ‣ Web sockets London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 66 2012
    • 87. iOS Application DevelopmentHybrid apps
    • 88. PhoneGap London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 68 2012
    • 89. 3 ways to deliver mobile London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 69 2012
    • 90. 3 ways to deliver mobile ‣ web app [dedicated] London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 69 2012
    • 91. 3 ways to deliver mobile ‣ web app [dedicated] ‣ native app London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 69 2012
    • 92. 3 ways to deliver mobile ‣ web app [dedicated] ‣ native app ‣ hybrid apps London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 69 2012
    • 93. 3 ways to deliver mobile ‣ web app [dedicated] ‣ native app ‣ hybrid apps there is no 3rd London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 69 2012
    • 94. Strengths & weaknesses cost performance London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 70 2012
    • 95. Strengths & weaknesses native cost performance London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 70 2012
    • 96. Strengths & weaknesses native cost web performance London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 70 2012
    • 97. Strengths & weaknesses native cost hybri web performance London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 70 2012
    • 98. Strengths & weaknesses hybri native cost web performance London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 70 2012
    • 99. iOS Application DevelopmentI doesn’t care
    • 100. London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 72 2012
    • 101. Surprise & Delight London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 73 2012
    • 102. Surprise & Delight Y H B London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 73 2012
    • 103. Surprise & Delight Y T H G B V London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 73 2012
    • 104. Surprise & Delight Y T H G B V London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 73 2012
    • 105. iOS Application DevelopmentExample of good interfaces
    • 106. London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 75 2012
    • 107. London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 76 2012
    • 108. London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 77 2012
    • 109. London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 78 2012
    • 110. London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 79 2012
    • 111. Path London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 80 2012
    • 112. Path London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 80 2012
    • 113. Path London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 81 2012
    • 114. Different orientations London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 82 2012
    • 115. Different orientations London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 82 2012
    • 116. Different orientations London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 82 2012
    • 117. iOS Application DevelopmentExample of bad interfaces
    • 118. London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 84 2012
    • 119. London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 85 2012
    • 120. London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 85 2012
    • 121. London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 86 2012
    • 122. London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 87 2012
    • 123. Know your users London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 88 2012
    • 124. Who are your users? London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 89 2012
    • 125. Who are your users? London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 90 2012
    • 126. Who are your users? London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 91 2012
    • 127. Don’t be a douche London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 92 2012
    • 128. Don’t be a douche London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 92 2012
    • 129. London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 93 2012
    • 130. Don’t be a douche London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 94 2012
    • 131. Don’t be a douche London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 95 2012
    • 132. Don’t... Just don’t! London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 96 2012
    • 133. Thank you!Thank you!paul@hello24.comtwitter.com/pardel London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c) 97 2012