Cours de 3 jours pour comprendre l'émergence de l'Internet Mobile et expérimenter la fabrication éclair de son application iPhone. L'idée est de montrer que le mobile est le nouveau web, que le domaine fourmille de créativité et que tout le monde peut participer, même avec peu de connaissance techniques. C'est un cours qui parle - des potentialités du média mobile, - de l'opportunité de développer/prototyper de l'universel (pour créer des application qui tournent sur tous les smartphone en évitant le spécifique), - de quelques façons d'innover pour convaincre - de codage très empirique, exemples à la clé Le tout sous une forme vivante (Stéphane Rouilly, ingénieur Chercheur à EDF R&D et Charles Delalonde, Docteur en informatique, plutôt branché média sociaux) avec un workshop qui libère les énergies, par binomes, avec un mac et du papier et une application à montrer aux autres équipes en fin de workshop voire même à emporter.

1. Comprendre l'émergence de l'Internet Mobile et expérimenter la fabrication éclair de son application iPhone. http://www.flickr.com/photos/ucumari/2317386162/ Workshop du 12, 13 & 14 janvier 2011, Télécom ParisTech

2. Comprendre l'émergence de l'Internet Mobile et expérimenter la fabrication éclair de son application iPhone. http://bit.ly/CPM2011 Stéphane Rouilly, @starcrouz Charles Delalonde, @delalonde Sauf les grandes images (c)

3. Planning simplifié Mercredi Jeudi Vendredi Cours Workshop : wireframing Lo-Fi Développement de la fonction 2 Cours Choix des éléments dans Kitchensink PRESENTATION Développement de la fonction 3 TD Wireframing Wireframing Hi-Fi dans Titanium PRIORISATION Finalisation du développement de l ’application TD Codage Titanium Développement de la fonction 1 PRESENTATION Bonus track, Export IPA / APK

7. L ’internet mobile Des chiffres vertigineux

8. Décollage de l ’internet mobile

12. Expérience utilisateur, comme pour la Wii ? - Au lieu d ’une course à la vitesse, à la puissance ou aux fonctionnalités, la Wii et l’iPhone s’intéressent aux utilisateurs : simplification du gameplay, de l’usage et des interfaces… Quand la technologie est suffisante, on peut s ’intéresser à l’expérience utilisateur, au plus grand nombre http://www.kieweconsulting.com/images/what.jpg

13. L ’internet mobile va dépasser l’autre

16. Des applications en masse Sous-titre intermédiaire Un modèle qui fonctionne

21. Quelles applications ?

22. Les fonctionnalités sociales fidélisent

23. Un phénomène extrême, une bulle ? 15 - Document name - Chapter - 00 Mois 2009 La moitié des applications payantes rapportent moins de 500€ par an. Full Analysis of iPhone Economics - it is bad news. And then it gets worse, 22 juin 2010

33. BNP Paribas Lentement mais sûrement

35. BNP : Site mobile iPhone (nov 2009)

43. Installous 3.3.5

60. GameSalad

67. Titanium : un code simplifié 1 Définition de la page 2 Définition d'un élément 3 Logique 4 Ajout dans la page

71. ...et Digg sort son app native (04/2010)

72. Quelques une de nos réalisations ou idées Avec Titanium... ou sans !

74. Révélation du potentiel photovoltaïque

76. De l'iPhone à l'iPad

78. Comprendre mon énergie

80. Etiquette énergie

83. Maquette Prototype Pilote Pré-série Production

84. Workshop "Arduino" Produire en une semaine quatre concepts de produits ou services dédiés à l'éco-efficacité énergétique, construits à l'aide du hardware Open Source : Arduino

85. Workshop “Arduino” 4 mock-ups (functional prototypes) 5 days + + + =

88. Workshop Arduino process Monday identification of internal challenges + Arduino introduction Tuesday team creation + brainstorming Wednesday prototyping day 1 Thursday prototyping day 2 Friday exhibition of the projects

89. Workshop Arduino process

90. Projet "HomeSense" Mettre à disposition d'un binôme "expert - foyer" un kit Hardware Open Source pour qu'ils construisent leurs propres "habitats intelligents"

91. Homesense Project process http://www.homesenseproject.com/

93. Benchmark Réaliser un état de l'art des différents services mobiles de visualisation de sa consommation électrique

107. Un modèle type

108. Copie d ’un modèle vierge

109. Résultat

111. Welcome The comments in this file are meant as handy reminders ONLY. You must refer to Apple ’s latest iPhone Interface Guidelines document as the definitive guide in the matter. If there ’s a UI element you can’t find here, email me at [email_address] and I’ll do my best to include it in the next release. Hello, This library file contains iPhone UI elements you ’ll want to copy and paste into your MockApp Template file. Vector format: Most UI elements you ’ll find here have been recreated in vector format so you can edit their text and even modify their shape, color, gradient, etc. Grouping / ungrouping: Note that most of the UI elements have been created by grouping several shapes together. You may want to copy and paste the UI element you ’re working on into your app template before ungrouping it. That way you always keep a clean grouped copy here. Enjoy MockApp! Dotan Saguy

121. Fin de la partie 1 : Eléments de contexte

126. Welcome The comments in this file are meant as handy reminders ONLY. You must refer to Apple ’s latest iPhone Interface Guidelines document as the definitive guide in the matter. If there ’s a UI element you can’t find here, email me at [email_address] and I’ll do my best to include it in the next release. Hello, This library file contains iPhone UI elements you ’ll want to copy and paste into your MockApp Template file. Vector format: Most UI elements you ’ll find here have been recreated in vector format so you can edit their text and even modify their shape, color, gradient, etc. Grouping / ungrouping: Note that most of the UI elements have been created by grouping several shapes together. You may want to copy and paste the UI element you ’re working on into your app template before ungrouping it. That way you always keep a clean grouped copy here. Enjoy MockApp! Dotan Saguy

127. Tab Bar Icon Library Music Videos Podcasts Search More Music Videos Podcasts Search More iTunes U Downloads Ringtones iTunes U Downloads Ringtones Genres Genres Artists Artists Audiobooks Albums Audiobooks Albums Compilations Composers Playlist Compilations Composers Playlists 6 More More Most Recent Featured Favorites Top Rated Top Rated Most Recent Featured Favorites Updates Categories Categories Updates Playlists Subscriptions Subscriptions My Videos My Videos Playlists Voicemail Keypad Keypad Contacts Contacts Voicemail World Clock Alarm Stopwatch Timer Timer World Clock Alarm Stopwatch Clock App tab bar controller . iDisk App tab bar controller . iDisk Recents Shared Files Public Folders Recents Public Folders Shared Files iDisk iTunes store and iPod tab controllers + icons (including “table view” black on white versions) Youtube , App Store and Phone additional tab controller + icons (including “table view” black on white versions) More tab bar icons coming soon!

128. Action sheets, Bubbles Action sheets An action sheet the user a set of choices for a task he/she just selected. It appears at the bottom of the screen by sliding upwards and over the current view. Action sheets can be used either to provide a selection of ways a task can be completed or to get confirmation before completing a potentially destructive task (i.e. delete or cancel). The most important or common action should appear as the top button. If the action is destructive (i.e. Delete), a red button might be called for. Action sheet Primary action you can also do this or maybe this or why not that Cancel Cancel Delete Bubbles Paste Select Select All MockApp I ’m hoping this one will help put MockApp on the map ;-) OK Delete 0:00 0:28 Play Record

129. Regular Table Views Regular Table Views Regular table views (as opposed to grouped table views - next slide) are most useful to display long lists of items such as messages, contacts, etc. which users must easily scroll. Each row is an item. The list can be divided into sections (i.e. alphabetical) separated by grey headers as below. Hierarchical items let the user “drill down” and are indicated by a ‘>’ icon to the right of the item. M N O A B C D E F G H I J K L M N O P Q R S T U This is a regular table view Divided into sections (the letters are the sections) and can contain several data elements (image, text, etc.) Each row is an item of the list This is a regular table view With icons like in The “more” tab of the iPod app Podcasts G Pete Gardener Tess Grady M.J. Grey Jenn Guggenheim H Sara Hashimoto A B C D E F G H I J K L M N O P Q R S T U V W Em Hirsch Unread Item to delete or move Ready to be deleted Delete First Last name mobile it highlights When pressed Not pressed yet Current status 29

130. Date, Time and other Pickers Date and Time Pickers Sat Oct 3 Sun Oct 4 Today Tue Oct 6 Wed Oct 7 7 8 9 10 11 50 55 00 05 10 AM PM August September October November December 03 04 05 06 07 2007 2008 2009 2010 2011 7 8 9 10 11 45 46 47 48 49 AM PM 28 29 30 mins 31 32 0 hours 1 2 Value Picker First & default value Second value Third value Analogous to “pull-downs” frequently used on websites and desktop applications.

134. Lancement Titanium Liste Projets Nouveau Projet Import Projet

135. Création d ’un nouveau projet

136. Import d ’un nouveau projet Emplacement Projet Existant

137. Import d ’un nouveau projet

138. Exécution d ’un projet Messages Console Choix SDK

139. Projet simulé (iPad) Simulateur iPad

140. Fonctionnement simulateur Accueil simulateur

142. IDE Netbeans Code dans Ressources

143. Création nouveau projet Netbeans

144. Création nouveau projet Netbeans

145. Création nouveau projet Netbeans

146. Création nouveau projet Netbeans

147. Fichiers nouveau projet Netbeans

148. App.js, page principale d'un nouveau projet Titanium

156. On se met à coder ? Une appli de révélation du potentiel solaire ? (un exemple complet)

157. Les fichiers pour coder Pendant les 3 premières étapes, notre fichier de travail est, myApp.js Projet vierge myApp1.js myApp2.js myApp3.js myApp4.js app-1tab.js Pour travailler myApp.js myApp.js myApp.js myApp.js app.js En fin d'étape vous myArea.js myLocation.js myOrientation.js myEarnings.js app-4tabs.js En fin d'étape nous area.js location.js orientation.js earnings.js app-4tabs-final.js

160. Rappel 1 Définition de la page 2 Définition d'un élément 3 Logique 4 Ajout dans la page

187. Fin de la partie 2 : Apprivoiser les applications

198. Cas 1 - Le Cristal de Sel Description Le cristal de sel est un restaurant de bonne tenue situé dans le 15e arrondissement de Paris. Ce restaurant dispose d ’une clientèle d’habitués, à la recherche d’un dîner de bonne qualité et d’un service irréprochable, pour un budget mesuré. Les midis, le restaurant dispose également d’une clientèle travaillant à proximité et qui apprécie une formule à 18 euros plat et dessert / entrée. Le chef, Karil Lopez, et le responsable de la salle Damien Crépu ont identifié l ’importance des technologies de l’information et de la communication pour capter, informer puis conserver une clientèle. Le site web : http://www.lecristaldesel.fr est soigné et permet de partager la carte et les actualités du restaurant. Une page de Fan Facebook http://www.facebook.com/lecristaldesel est également très active et créé un lien agréable entre le chef et ses convives. Consignes Site Web, page de Fan Facebook, le cristal de sel sait se positionner sur les médias sociaux classiques. Aujourd ’hui l’Internet Mobile constitue pour Karil et Damien un nouveau support à investiguer permettant d’attirer une nouvelle clientèle ou de maintenir un lien avec une clientèle existante. Votre mission, si vous l’acceptez, sera donc de dessiner puis développer la maquette de l’application mobile le cristal de sel.

221. Enregistrement des UDID

225. Encoder en IPA Provisioning Profile

226. Export automatique vers iTunes Installing App onto iTunes

227. Récupérer IPA depuis iTunes Nouvelle IPA Générée

229. Export vers le téléphone avec CyberDuck

230. Export vers le téléphone avec CyberDuck

232. Configuration Android Configuration Android

233. Test Android

234. Emulateur Android

238. Fin de la partie 3, Workshop & Bonus

239. Comprendre l'émergence de l'Internet Mobile et expérimenter la fabrication éclair de son application iPhone. Stéphane Rouilly, @starcrouz Charles Delalonde, @delalonde Sauf les grandes images (c)