On March 21st 2011, Art is Open Source held a lesson on the theme: "Cross Media design scenarios: smartphones and tablets" The workshop engaged the problems, approaches, methodologies and processes that designers can use in imagining, designing and implementing cross media design products. Some energies were used to describe really interesting scenarios that allow using cross media design to implement solutions that are useful not only for business, but also for society, the environment and the cultural ecosystem, promoting a more tolerant, multicultural, sustainable take on the world. These are the slides that have been used in the workshop, complete with a full end-to-end example of the creation of a location based application for iPhone/iPad. You can find all the info here at Art is Open Source: http://wp.me/pnaKK-kI There is also a ZIP archive of the full XCODE project used in class: http://www.artisopensource.net/isia.zip Platforms used: XCODE with iPhone SDK 4.3 http://developer.apple.com Phonegap http://www.phonegap.com/ jQuery http://www.jquery.com Google Maps API v3 http://code.google.com/apis/maps/documentation/javascript/

1. SCENARI DI DESIGN CROSS-MEDIALE:
SMARTPHONE & TABLET APPLICATIONS
Salvatore Iaconesi
salvatore.iaconesi@artisopensource.net

2. CHI SONO?

3. Art is Open Source
FakePress
Salvatore Iaconesi La Sapienza
LPM
Altro

4. COSA FAREMO
OGGI

5. casi di studio
scenario tecnologie
esempio

6. I RISULTATI

7. visione di mercato
conoscenza delle tecnologie di riferimento
ruolo del designer
esempio completo

8. COMINCIAMO!

11. In Taiwan, there are more cellphones than people.
About 7% of all mobile data goes to movie
information. And Google owns nearly 100% of the
mobile search market

13. PIU' di
5 MILIARDI

14. SMARTPHONES
&
TABLETS
TECNOLOGIE DI
RIFERIMENTO

15. SMARTPHONES

16. TABLETS

17. SMARTPHONES

23. TABLETS
and ebook readers

30. PUNTI CHIAVE:
Smartphone e tablets are the near future
Mobile phones crush specialists (video cameras, mp3
players...)

31. Extensibility and Opennes

32. Consumption vs Creation

33. Utility & Entertainment

34. AND TABLETS?

35. Tablets vs Readers

39. IL MERCATO
DELLE
APPLICAZIONI
COSA C'E' SUL MERCATO, COSA
FUNZIONA,
COSA CI SARA' TRA BREVE

40. App Store Stats Summary
Count of Active Applications in the App Store
Total Active Apps (currently available for download): 365,421
Total Inactive Apps (no longer available for download): 78,195
Total Apps Seen in US App Store: 443,616
Number of Active Publishers in the US App Store: 76,331
Count of Application Submissions
This Month (Games): 2,108 ( 117 / day )
This Month (Non-Games): 10,395 ( 578 / day )
This Month (Total): 12,503 ( 695 / day )

41. Application Approval Delay
February, 2011: Maximum delay 39 days, average delay 6.19 days.
Application Price Distribution
Current Average App Price: $4.16
Current Average Game Price: $1.67
Current Average Overall Price: $2.46
Application Category Distribution
Most Popular Categories
1 - Books (57264 active)
2 - Games (53249 active)
3 - Entertainment (39990 active)
4 - Education (30270 active)
5 - Lifestyle (26522 active)

43. AN INTERESTING SLIDESHOW
By PinchMedia
http://www.slideshare.net/pinchmedia/iphone-appstore-secrets-pinch-media?type=presentation

44. SOME SALE STATS EXPOSED
By TechCrunch
http://techcrunch.com/2010/05/16/iphone-app-sales-exposed/

45. A CASE STUDY IN SALES
By MarkJ
http://www.markj.net/iphone-hit-tennis-sales-stats-marketing/

46. STATISTICS
In App Store, paid applications in the Top Overall, Games, Business and Entertainment
categories stay in these categories for 27, 39, 59 and 38 days on average, respectively.
Free apps stay in the Top 100 for a significantly shorter time in the Top Overall, Games
and Business categories, with 19, 21 and 39 days on average, respectively.
The majority of paid apps that have been in the Top 100 between November 2009 and
April 2010 fall into the Games and Entertainment categories.
The paid apps that have been in the top five for the longest period of time are
Doodle Jump (140 days), RedLaser (73 days) and Skee-Ball (68 days).

47. STATISTICS
The biggest driver of paid app sales on the iPhone & Android is try-before-you-buy – 54%
of Android users, 52% of iPhone users and 70% of iPod Touch users all cited liking the
free version and upgrading to the paid version‖ as a reason for buying paid apps.
AdMob estimates the size of the monthly iPhone paid app market as $125m, with the
iPod Touch market adding another $73m. The Android market in comparison is just $5m
per month.

48. STATISTICS
62% find apps by searching for a specific type of app, 60% browse through the App Store
charts, 40% receive word of mouth recommendations, 20% see ads in other apps, while
19% read about apps in the press or on blogs.
93% of iPhone users download iPhone Applications directly on their phone. Only 7% of
users download via iTunes and upload to the phone.

50. EXAMPLE OF STATS REPOST
http://www.doxtop.com/browse/e5ab3c6b/apple-ipad-trends-and-statistics.aspx

51. INFO ON HOW TO GET APP FEATURED
http://adwhirl.files.wordpress.com/2009/06/adwhirl_discovery.pdf

52. Doodle Jump
3 million sales

53. Angry Bird
4 million sales
In 5 months

54. Camera Plus
$ 275.000 in the first month

55. Rolando
700.000 download (at $ 9.99)

56. Pages
300.000 download (at $ 9.99)

57. GoodReader
250.000 download (at $ 2.99)

58. Numbers
200.000 download (at $ 9.99)

59. Angry Birds HD
180.000 download (at $ 4.99)

60. Keynote
150.000 download (at $ 9.99)

61. Glee
130.000 download (at $ 0.99)

62. WolframAlpha
120.000 download (at $ 1.99)

63. Pinball HD
120.000 download (at $ 0.99)

64. Friendly
110.000 download (at $ 0.99)

65. iMockups for iPad
$ 6.000.000 ($ 9.99 at a time)

66. INNOVAZIONE
I PRINCIPALI SCENARI INNOVATIVI E
LE SUGGESTIONI PIU'
INTERESSANTI

67. Physical interfaces
do better what you did without the pad

68. Publishing
new life for publishing

69. Augmented Reality
Info over the things of your daily life

70. Business
New views and interactions on business processes

71. Health
Your doctor, your body, your medicines...

72. Luxury
A $ 20.000 iPad? yes!

73. NEW FORMS OF CITIZENSHIP
MORE AWARENESS
NEW FORMS OF EXPRESSION
NEW FORMS OF COMMUNICATION

74. IL DESIGNER
COME E' FATTO E COME CAMBIA
IL LAVORO DEL DESIGNER CON LE
APP

75. EXPERIENCES
MULTI-DISCIPLINARIETY
SOCIAL
WORLD ISSUES
INNOVATE
BUSINESS MODELS
REMIX! RECONTEXTUALIZE! REINVENT!

76. TECNOLOGIE
PER DESIGNER
COME LAVORARE SU SMARTPHONE E
TABLET, DAL PUNTO DI VISTA DEL
DESIGNER

77. Titanium makes cross-platform native application development easy.
A free and open source application development platform, Titanium lets you create native mobile, tablet and desktop application experiences using existing web skills like
Javascript, HTML, CSS, Python, Ruby, and PHP. Learn More.
http://www.appcelerator.com

78. http://www.phonegap.com/

79. http://westcoastlogic.com/lawnchair/
JSON document store

80. http://www.sencha.com/products/touch/
Sencha Touch allows you to develop mobile web apps that look and feel native on iPhone and Android touch devices.

81. http://jqtouch.com/

82. http://jquerymobile.com/

83. NS Basic/App Studio
is a complete, powerful
development environment.
Create your app on your
desktop, then download to your
device and run.
http://www.nsbasic.com/app/

84. http://ripple.tinyhippos.com/

85. appML is an HTML extension
specifically designed for web-
based apps.
http://www.appml.org/

86. Native-like applications for smartphones, tablets and desktops
Unify was built to improve the development efficiency of apps for smartphones. Currently it supports smartphones based on the platforms iOS, Android
and WebOS. There is support for desktop operating systems like Windows or Mac OS as well. Support for tablet devices is planned for the next year.
http://unify.github.com/unify/

87. ED ORA:
REALIZZIAMO
UN PROTOTIPO
USIAMO PHONEGAP, UNA DELLE TECNOLOGIE
ANALIZZATE, PER REALIZZARE UN
PROTOTIPO

88. DA XCODE:
NEW PROJECT
--> PHONE-GAP BASED APPLICATION

89. <div id="map_canvas"
style="width:100%; height:100%">
</div>

90. <style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>

91. <script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true">
</script>

92. <script type="text/javascript">
var map;
function initialize() {
var latlng = new google.maps.LatLng(0, 0);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions
);
}
</script>

93. function run() {
initialize();
var win = function(position) {
var coords = position.coords;
var latlng2 = new google.maps.LatLng(
coords.latitude, coords.longitude
);
map.panTo( latlng2 );
};
var fail = function(e) {
alert('Can't retrieve position.nError: ' + e);
};
navigator.geolocation.getCurrentPosition(win, fail);
}

94. function onDeviceReady()
{
run();
}

95. var marker = new google.maps.Marker({
position: latlng2,
map: map,
title:"I am here!"
});

96. var contenuto = "<h1>Sono Qui!</h1>";
var infowindow = new google.maps.InfoWindow({
content: contenuto
});
google.maps.event.addListener(
marker, 'click', function() {
infowindow.open(map,marker);
}
);

97. <script
type="text/javascript" charset="utf-8"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"
>
</script>

98. var markers = {};
function addMarker(tweet, position) {
position = tweet.geo ? tweet.geo.coordinates: null;
if (!position && tweet.location) {
var L = String(tweet.location).split(':')[1] || tweet.location;
position = L.split(',');
}
if (position) {
markers[tweet.from_user_id] =
new google.maps.Marker({
map: map,
title: tweet.from_user,
position:
new google.maps.LatLng(position[0], position[1])
});
}
};

99. function getTweets(coords){
$.getJSON(
'http://search.twitter.com/search.json',
{ geocode: coords.latitude + ',' + coords.longitude + ',' + '5mi',
rpp: 30 },
function(data) {
if (data && data.results && !!data.results.length) {
data = data.results;
for (var i = 0, ln = data.length; i < ln; i++) {
var tweet = data[i];
if (tweet.geo && tweet.geo.coordinates) {
var position =
new google.maps.LatLng(
tweet.geo.coordinates[0], tweet.geo.coordinates[1]
);
addMarker(tweet, position);
}
}
} else {
alert('No Results Available');
}
}
);
}

100. getTweets(coords);