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
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 fragmentation
developer.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
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
seriousness
serious
tool purpose entertainment
London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c)
30
2012
47. Fun tool
fun
seriousness
serious
tool purpose entertainment
London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c)
31
2012
48. Fun entertainment
fun
seriousness
serious
tool purpose entertainment
London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c)
32
2012
49. Serious entertainment
fun
seriousness
serious
tool purpose entertainment
London iOS Technical Group, London, May 22nd 2012 Slide Hello24 Ltd. (c)
33
2012
50. Utility
fun
seriousness
serious
tool purpose entertainment
http://h24.co/NearestBus London iOS Technical Group, London, May 22nd 2012 Slide
34
Hello24 Ltd. (c)
2012
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
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
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 support
if(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 support
if(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
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
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&#x2019;s 71 yo!\nAnd that&#x2019;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&#x2019;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&#x2019;s a highly competitive market.\n\nPalm was the first casualty but, based on the outlook.... RIM might follow them.\n
It&#x2019;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&#x2022; Limited colour palette&#x2022; Focus on minimising graphics&#x2022; Most important thing is the data &#x2022; Standard Navigation&#x2022; Clear divisions and blocks\n\n
FUN TOOL\n&#x2022; Moderate use of colour&#x2022; Moderate use of graphics&#x2022; Simple hierarchy of information&#x2022; Encourages leisurely productivity\n\n\n
FUN ENTERTAINMENT\n&#x2022; Extremely graphically rich&#x2022; Fun use of sound,&#x2022; Simple hierarchy of information \n&#x2022; In-your-face visual feedback\n\n\n\n
SERIOUS ENTERTAINMENT\n&#x2022; Moderate use of graphics&#x2022; Content Focused&#x2022; Normally heavy use of tabbed data \n&#x2022; Standard navigation elements\n\n\n\n
UTILITY\n&#x2022; Graphically rich&#x2022; Normally single screen&#x2022; Does not have a hierarchy&#x2022; Normally used for less than 30 seconds\n&#x2022; Performs a single function\n\n\n\n\n
Web app \n - if you have a dedicated mobile website, you&#x2019;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&#x2019;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&#x2019;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&#x2019;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&#x2019;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&#x2019;t require approval\nHybrid moves in time to high costs\n
Web in green - because it doesn&#x2019;t require approval\nHybrid moves in time to high costs\n
Web in green - because it doesn&#x2019;t require approval\nHybrid moves in time to high costs\n
Web in green - because it doesn&#x2019;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
