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.
TD : 12 Logiciels libres pour contruire vos sites web
Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)
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
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
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
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
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
90. Projet "HomeSense" Mettre à disposition d'un binôme "expert - foyer" un kit Hardware Open Source pour qu'ils construisent leurs propres "habitats intelligents"
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
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.
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
158.
159.
160. Rappel 1 Définition de la page 2 Définition d'un élément 3 Logique 4 Ajout dans la page
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187. Fin de la partie 2 : Apprivoiser les applications
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
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.
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)