SlideShare une entreprise Scribd logo
1  sur  240
Télécharger pour lire hors ligne
    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
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)
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
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Plan du cours
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],> Plan de la matinée
[object Object],[object Object],[object Object],[object Object],[object Object],http://www.flickr.com/photos/farbwahl/5158059489/
L ’internet  mobile Des chiffres vertigineux
Décollage de l ’internet mobile
Un média ultra répandu ,[object Object]
Une profonde révolution ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Le 7 ème  média de masse ,[object Object],[object Object],[object Object],[object Object],[object Object],http://blog.jeanbaptistedumont.com/2009/06/la-soci%C3%A9t%C3%A9-mobile-de-gutenberg-%C3%A0-l-iphone.html
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
L ’internet mobile va dépasser l’autre
Usage ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object]
Des applications en masse Sous-titre intermédiaire Un modèle qui fonctionne
Les magasins d ’applications mobiles ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
…  des services unitaires (vs. sites mobiles) ,[object Object],[object Object],[object Object],Maquette pour EDF Entreprises : file d ’informations et FAQ en langage naturel (Avatar Laurent)
L ’App Store… et les autres ! http://www.billshrink.com/blog/10071/how-popular-is-iphone/ ,[object Object],[object Object],[object Object],[object Object]
Une tendance lourde Téléchargements de musique et d'apps sur iTunes, par jour et en milliers ,[object Object]
Quelles applications ?
Les fonctionnalités sociales fidélisent
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
[object Object],[object Object],[object Object],[object Object],[object Object]
Un marché ultra fragmenté ,[object Object],Appareils Opérateurs Constructeurs
Beaucoup de technologies à maîtriser ,[object Object]
Nokia résiste ,[object Object]
...pas si bien que ça ,[object Object]
Android (de Google) à moyen terme ,[object Object]
Mais pour l'instant... 300K iOS vs. 100K Android (forte croissance) ,[object Object]
La hauteur de l'enjeu ,[object Object]
Durée de vie limitée ? Opportunité ! ,[object Object],[object Object],[object Object]
BNP Paribas Lentement mais sûrement
BNP : Les bons comptes entre amis (avril 2009)   ,[object Object],[object Object],[object Object],[object Object]
BNP : Site mobile iPhone (nov 2009)
BNP : SPOT (fév 2010) ,[object Object],[object Object],[object Object],[object Object],[object Object]
BNP : Mes comptes (juin 2010)   ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Quelques applications remarquables (en toute objectivité ;-) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
SnapTell ,[object Object]
Google Goggles ,[object Object]
SoundHound (ex Midomi) ,[object Object]
Meebo ,[object Object]
Installous 3.3.5
Plants vs. Zombies ,[object Object]
Quelques applications remarquables(2/3) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Warfare inc. ,[object Object]
Paris-ci la sortie du métro ,[object Object]
Quelques applications remarquables (3/3) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Layar / Meilleurs agents ,[object Object]
Rollercoaster extreme ,[object Object]
[object Object],[object Object],[object Object],[object Object],http://www.flickr.com/photos/coreydorsey/5163930215/
Définitions & Clarifications  (1/2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Définitions & Clarifications  (2/2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
API - SDK - Bibliothèques ... ?? ,[object Object]
Développement iPhone selon Jobs ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
ADN classique du développeur ,[object Object],[object Object],[object Object]
Les développeurs parlent aux développeurs ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Progression ,[object Object],[object Object],[object Object],Xcode Titanium PhoneGap Game Salad jQTouch WebApp
jQTouch : une librairie javascript ,[object Object]
GameSalad
 
 
[object Object],[object Object],[object Object],[object Object]
Développement selon Titanium ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Fiche d'identité :  ,[object Object],[object Object]
En bref ,[object Object]
Titanium : un code simplifié 1 Définition de la page 2 Définition d'un élément 3 Logique 4 Ajout dans la page
Richesse des fonctionnalités ,[object Object]
Une API Cross plateforme  ,[object Object]
App native contre webapp : gmail triche ,[object Object]
...et Digg sort son app native (04/2010)
Quelques une de nos réalisations ou idées Avec Titanium... ou sans !
Révélation du potentiel photovoltaïque ,[object Object],[object Object],[object Object]
Révélation du potentiel photovoltaïque
Potentiel PV : Making Off ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
De l'iPhone à l'iPad
Comprendre mon énergie ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Elise, Juan, Edouard & Stéphane, EDF R&D 2010
Comprendre mon énergie
Etiquette énergie ,[object Object],[object Object],[object Object],[object Object]
Etiquette énergie
Etiquette énergie - Page iTunes ,[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],http://www.flickr.com/photos/47181226@N05/5173193974/
Maquette         Prototype           Pilote          Pré-série      Production
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
Workshop  “Arduino” 4  mock-ups (functional prototypes) 5 days + + +  =
Workshop  “Arduino” ,[object Object],[object Object],[object Object],[object Object],[object Object]
Workshop  “Arduino” ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
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
Workshop Arduino process
Projet "HomeSense" Mettre à disposition d'un binôme "expert - foyer" un kit Hardware Open Source pour qu'ils construisent leurs propres  "habitats intelligents" 
Homesense Project process http://www.homesenseproject.com/
[object Object],[object Object],[object Object],[object Object],[object Object]
Benchmark Réaliser un état de l'art des différents services mobiles de visualisation de sa consommation électrique
TED-O-Meter ,[object Object],[object Object],[object Object]
Mirawatt T5K ,[object Object],[object Object]
Meter Read ,[object Object]
British Gas Meter ,[object Object],[object Object]
Utility Buddy ,[object Object]
Utility Buddy ,[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object]
Wireframing : dessinez c'est gagné ! ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Wireframing Low Fidelity : MockingBird ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
 
 
 
Wireframing Collaboratif : Google Docs ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Un modèle type
Copie d ’un modèle vierge
Résultat
Wireframing High Fidelity : Mock App ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
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
Les limites du wireframing ,[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object]
Industrialisation raisons et méthodes ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
 
 
 
 
 
 
Fin de la partie 1 :  Eléments de contexte
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Plan du cours
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],> Plan de l'après-midi
[object Object],http://www.flickr.com/photos/35824647@N03/5161011400/
Construction de votre application en utilisant Powerpoint et Mockapp ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
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
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!
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
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
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.
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],http://www.flickr.com/photos/muzuto/2921028949/
Tours de main ,[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Tester ses modifs très rapidement
Lancement Titanium Liste Projets Nouveau Projet Import Projet
Création d ’un nouveau projet
Import d ’un nouveau projet Emplacement Projet Existant
Import d ’un nouveau projet
Exécution d ’un projet Messages Console Choix SDK
Projet simulé (iPad) Simulateur iPad
Fonctionnement simulateur Accueil simulateur
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
IDE Netbeans Code dans Ressources
Création nouveau projet Netbeans
Création nouveau projet Netbeans
Création nouveau projet Netbeans
Création nouveau projet Netbeans
Fichiers nouveau projet Netbeans
App.js, page principale d'un nouveau projet Titanium
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
KitchenSink ,[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Bibliothèque des API  http://developer.appcelerator.com/apidoc/mobile/latest ,[object Object]
Communauté en ligne http://developer.appcelerator.com/questions/ ,[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],http://www.flickr.com/photos/peterbox/175801757/
 
On se met à coder ? Une appli de révélation du potentiel solaire ?  (un exemple complet)
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
Anatomie d'un code Titanium ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Anatomie  (2/2) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Rappel 1 Définition de la page 2 Définition d'un élément 3 Logique 4 Ajout dans la page
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Etape 1 : La surface du panneau  ,[object Object],[object Object],[object Object]
1 - Quoi coder : de l'UI pure ! ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Résolutions, - iPhone 3GS : 320 x 480 - iPhone 4G : 640 x 960 - iPad : 768 x 1024
1 - Focus sur... ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Vous devriez obtenir... ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Etape 2 : L'ensoleillement (le lieu) ,[object Object],[object Object],[object Object],[object Object],[object Object]
2 - Quoi coder : géoloc et mapview ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
2 - Focus sur... ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Vous devriez obtenir... ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Etape 3 : L'orientation du toit ,[object Object],[object Object],[object Object],[object Object],[object Object]
3 - Quoi coder :  accéléromètre et boussole ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
3 - Focus sur... ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
3 - Focus sur... (suite) ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Vous devriez obtenir... ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Etape 4 : Calculer et assembler l'appli ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
4 - Quoi coder : inclusion et tabs ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
4 - Focus sur... ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Vous devriez obtenir... ,[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
5.1 - Une icone et une image d'accueil ,[object Object],[object Object],[object Object],[object Object],[object Object]
5.1 - Focus sur... ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Export Android ,[object Object]
Export Android ,[object Object]
Fin de la partie 2 :  Apprivoiser les applications
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Plan du cours
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],> Plan de la journée
"Blood sweat tears", why ? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Nos objectifs pédagogiques ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object]
Une équipe de 2 personnes ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
6 équipes de 2 : ,[object Object],[object Object],[object Object]
Du matériel ,[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object]
Choix d'un cas par équipe ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
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.
Cas 2 - Le juste prix des charges ,[object Object],[object Object]
Cas 3 - La route du Rhum ,[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],http://www.flickr.com/photos/dusseldorfer/4699321174/
Période 1 : 9h00 à 10h30h ,[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Période 2 : 10h45 à 12h15 ,[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Période 3 : 13h30 à 15h00 ,[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Période 4, 5 et 6: 15h15 à 16h45 et de 9h à 12h15 vendredi ,[object Object],[object Object]
Période 7 : 13h30 à 15h00 ,[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],http://www.flickr.com/photos/loswl/2422533408/
Rendu de fin de workshop ,[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],http://www.flickr.com/photos/loswl/2422533408/
Veency  (Cydia)  / VNC  (Mac/Pc/Linux) ,[object Object]
Screensplitr  (Cydia)  / iDemo  (Mac/Pc, $9,99) ,[object Object]
ScreenRecorder  (Cydia, 2$) ,[object Object]
MyWi  (Cydia, $20) ,[object Object],[object Object]
Incarcérer un iPad pour une démo libre ,[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],http://www.flickr.com/photos/loswl/2422533408/
Compilation avant la distribution ,[object Object],[object Object],[object Object],[object Object],[object Object]
Distribution d'une application ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Enregistrement des UDID
Export iPhone et Android :  plusieurs solutions ,[object Object],[object Object],[object Object],[object Object]
Sans clé développeur : iSimulate ,[object Object],[object Object],[object Object]
iSimulate ,[object Object]
Encoder en IPA Provisioning Profile
Export automatique vers iTunes Installing App onto iTunes
Récupérer IPA depuis iTunes Nouvelle IPA Générée
Sans iTunes, en SSH ,[object Object],[object Object],[object Object]
Export vers le téléphone  avec CyberDuck
Export vers le téléphone  avec CyberDuck
Exporter via iTunes ,[object Object],[object Object],[object Object]
Configuration Android Configuration Android
Test Android
Emulateur Android
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],http://www.flickr.com/photos/loswl/2422533408/
Installation Android libre ,[object Object]
Votre appli sur VOTRE mobile ,[object Object]
Fin de la partie 3,  Workshop & Bonus
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)
 

Contenu connexe

Tendances

Approche mobile First : pourquoi privilégier les supports mobiles ?
Approche mobile First : pourquoi privilégier les supports mobiles ?Approche mobile First : pourquoi privilégier les supports mobiles ?
Approche mobile First : pourquoi privilégier les supports mobiles ?Anaïs Vivion
 
Parlons App Economie : du dev à l'usage
Parlons App Economie : du dev à l'usageParlons App Economie : du dev à l'usage
Parlons App Economie : du dev à l'usageLaFrenchMobile
 
Speakeasy - JWT Intelligence (French)
Speakeasy - JWT Intelligence (French)Speakeasy - JWT Intelligence (French)
Speakeasy - JWT Intelligence (French)Virgile Brodziak
 
Mobile First to AI First
Mobile First to AI FirstMobile First to AI First
Mobile First to AI FirstLaFrenchMobile
 
L'iphone et la révolution du web mobile
L'iphone et la révolution du web mobileL'iphone et la révolution du web mobile
L'iphone et la révolution du web mobileJefferson Bonnaire
 
Mobile et Médias - La grande et la petite histoire du mobile dans/pour les mé...
Mobile et Médias - La grande et la petite histoire du mobile dans/pour les mé...Mobile et Médias - La grande et la petite histoire du mobile dans/pour les mé...
Mobile et Médias - La grande et la petite histoire du mobile dans/pour les mé...Denis Verloes
 
SUMMER'S WATCH • Les news Mobile & Tech de l'été
SUMMER'S WATCH • Les news Mobile & Tech de l'étéSUMMER'S WATCH • Les news Mobile & Tech de l'été
SUMMER'S WATCH • Les news Mobile & Tech de l'étéUSERADGENTS
 
Business&Breakfast Sport 25.10.2017
Business&Breakfast Sport 25.10.2017Business&Breakfast Sport 25.10.2017
Business&Breakfast Sport 25.10.2017Fabernovel
 
IoTeaTime #1 - 10 tendances du CES 2016
IoTeaTime #1 - 10 tendances du CES 2016 IoTeaTime #1 - 10 tendances du CES 2016
IoTeaTime #1 - 10 tendances du CES 2016 USERADGENTS
 
Barometre internet 1er semestre 2010
Barometre internet 1er semestre 2010Barometre internet 1er semestre 2010
Barometre internet 1er semestre 2010Genaro Bardy
 
Mobiliteatime #1 : "Smartwatches & Apple Watch: Time to market?" by userADgents
Mobiliteatime #1 : "Smartwatches & Apple Watch: Time to market?" by userADgents Mobiliteatime #1 : "Smartwatches & Apple Watch: Time to market?" by userADgents
Mobiliteatime #1 : "Smartwatches & Apple Watch: Time to market?" by userADgents USERADGENTS
 
Présentation écosystème mobile
Présentation écosystème mobilePrésentation écosystème mobile
Présentation écosystème mobileguest28b3ded
 
Modèles d'affaire pour tablettes
Modèles d'affaire pour tablettes Modèles d'affaire pour tablettes
Modèles d'affaire pour tablettes LongBoard Montreal
 
MobiliteaTime #15 : iOS 11
MobiliteaTime #15 : iOS 11MobiliteaTime #15 : iOS 11
MobiliteaTime #15 : iOS 11USERADGENTS
 
Avoir une approche mobile first
Avoir une approche mobile firstAvoir une approche mobile first
Avoir une approche mobile firstBeApp
 
Web et Mobile, l'été de tous les Dangers
Web et Mobile, l'été de tous les DangersWeb et Mobile, l'été de tous les Dangers
Web et Mobile, l'été de tous les DangersRaphaël Chenol
 
9 tendances du Mobile World Congress 2017 par @hubinstitute
9 tendances du Mobile World Congress 2017 par @hubinstitute 9 tendances du Mobile World Congress 2017 par @hubinstitute
9 tendances du Mobile World Congress 2017 par @hubinstitute HUB INSTITUTE
 
Les applications mobiles, sites mobiles et web apps
Les applications mobiles, sites mobiles et web appsLes applications mobiles, sites mobiles et web apps
Les applications mobiles, sites mobiles et web appsNeedeo
 

Tendances (19)

Approche mobile First : pourquoi privilégier les supports mobiles ?
Approche mobile First : pourquoi privilégier les supports mobiles ?Approche mobile First : pourquoi privilégier les supports mobiles ?
Approche mobile First : pourquoi privilégier les supports mobiles ?
 
Parlons App Economie : du dev à l'usage
Parlons App Economie : du dev à l'usageParlons App Economie : du dev à l'usage
Parlons App Economie : du dev à l'usage
 
Speakeasy - JWT Intelligence (French)
Speakeasy - JWT Intelligence (French)Speakeasy - JWT Intelligence (French)
Speakeasy - JWT Intelligence (French)
 
Mobile First to AI First
Mobile First to AI FirstMobile First to AI First
Mobile First to AI First
 
L'iphone et la révolution du web mobile
L'iphone et la révolution du web mobileL'iphone et la révolution du web mobile
L'iphone et la révolution du web mobile
 
Mobile et Médias - La grande et la petite histoire du mobile dans/pour les mé...
Mobile et Médias - La grande et la petite histoire du mobile dans/pour les mé...Mobile et Médias - La grande et la petite histoire du mobile dans/pour les mé...
Mobile et Médias - La grande et la petite histoire du mobile dans/pour les mé...
 
Tourisme
TourismeTourisme
Tourisme
 
SUMMER'S WATCH • Les news Mobile & Tech de l'été
SUMMER'S WATCH • Les news Mobile & Tech de l'étéSUMMER'S WATCH • Les news Mobile & Tech de l'été
SUMMER'S WATCH • Les news Mobile & Tech de l'été
 
Business&Breakfast Sport 25.10.2017
Business&Breakfast Sport 25.10.2017Business&Breakfast Sport 25.10.2017
Business&Breakfast Sport 25.10.2017
 
IoTeaTime #1 - 10 tendances du CES 2016
IoTeaTime #1 - 10 tendances du CES 2016 IoTeaTime #1 - 10 tendances du CES 2016
IoTeaTime #1 - 10 tendances du CES 2016
 
Barometre internet 1er semestre 2010
Barometre internet 1er semestre 2010Barometre internet 1er semestre 2010
Barometre internet 1er semestre 2010
 
Mobiliteatime #1 : "Smartwatches & Apple Watch: Time to market?" by userADgents
Mobiliteatime #1 : "Smartwatches & Apple Watch: Time to market?" by userADgents Mobiliteatime #1 : "Smartwatches & Apple Watch: Time to market?" by userADgents
Mobiliteatime #1 : "Smartwatches & Apple Watch: Time to market?" by userADgents
 
Présentation écosystème mobile
Présentation écosystème mobilePrésentation écosystème mobile
Présentation écosystème mobile
 
Modèles d'affaire pour tablettes
Modèles d'affaire pour tablettes Modèles d'affaire pour tablettes
Modèles d'affaire pour tablettes
 
MobiliteaTime #15 : iOS 11
MobiliteaTime #15 : iOS 11MobiliteaTime #15 : iOS 11
MobiliteaTime #15 : iOS 11
 
Avoir une approche mobile first
Avoir une approche mobile firstAvoir une approche mobile first
Avoir une approche mobile first
 
Web et Mobile, l'été de tous les Dangers
Web et Mobile, l'été de tous les DangersWeb et Mobile, l'été de tous les Dangers
Web et Mobile, l'été de tous les Dangers
 
9 tendances du Mobile World Congress 2017 par @hubinstitute
9 tendances du Mobile World Congress 2017 par @hubinstitute 9 tendances du Mobile World Congress 2017 par @hubinstitute
9 tendances du Mobile World Congress 2017 par @hubinstitute
 
Les applications mobiles, sites mobiles et web apps
Les applications mobiles, sites mobiles et web appsLes applications mobiles, sites mobiles et web apps
Les applications mobiles, sites mobiles et web apps
 

Similaire à Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)

[ Revue Innovations ] Valtech - Mobile World Congress
[ Revue Innovations ] Valtech - Mobile World Congress[ Revue Innovations ] Valtech - Mobile World Congress
[ Revue Innovations ] Valtech - Mobile World CongressValtech
 
Presentation Android
Presentation AndroidPresentation Android
Presentation AndroidJean Collas
 
Sharing day CES 2017
Sharing day CES 2017Sharing day CES 2017
Sharing day CES 2017heaven
 
Competitic applications accessibles tablettes
Competitic   applications accessibles tablettesCompetitic   applications accessibles tablettes
Competitic applications accessibles tablettesCOMPETITIC
 
Présentation smartphones
Présentation smartphonesPrésentation smartphones
Présentation smartphonesLo Teil
 
Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisseran...
Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisseran...Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisseran...
Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisseran...UADF_CEF
 
LES MATERIELS ANDROID
LES MATERIELS ANDROIDLES MATERIELS ANDROID
LES MATERIELS ANDROIDTiyab K.
 
L’internet de séjour et le web mobile _ Ateliers numériques en Pays de ...
L’internet de séjour et le web mobile _ Ateliers numériques en Pays de ...L’internet de séjour et le web mobile _ Ateliers numériques en Pays de ...
L’internet de séjour et le web mobile _ Ateliers numériques en Pays de ...Pays de Bergerac
 
Présentation backelite 161210
Présentation backelite 161210Présentation backelite 161210
Présentation backelite 161210AFMM
 
Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?NiceToMeetYou
 
Atelier T7 Développer un site ou une application mobile - Salon e-tourisme V...
Atelier T7 Développer un site ou une application  mobile - Salon e-tourisme V...Atelier T7 Développer un site ou une application  mobile - Salon e-tourisme V...
Atelier T7 Développer un site ou une application mobile - Salon e-tourisme V...Salon e-tourisme #VeM
 
Les applis fétiches sur son iphone, son iPod touch, son iPad - ExplorCamp (2010)
Les applis fétiches sur son iphone, son iPod touch, son iPad - ExplorCamp (2010)Les applis fétiches sur son iphone, son iPod touch, son iPad - ExplorCamp (2010)
Les applis fétiches sur son iphone, son iPod touch, son iPad - ExplorCamp (2010)Ardesi Midi-Pyrénées
 
Presentation cgt juin2010
Presentation cgt juin2010Presentation cgt juin2010
Presentation cgt juin2010Pascal Poty
 
Compte-rendu-buzzness-mobile
Compte-rendu-buzzness-mobileCompte-rendu-buzzness-mobile
Compte-rendu-buzzness-mobileBastien Serafin
 
Conférence Gemalto Le mobile et ses usages
Conférence Gemalto Le mobile et ses usagesConférence Gemalto Le mobile et ses usages
Conférence Gemalto Le mobile et ses usagesservicesmobiles.fr
 
SophiaConf 2010 Présentation de la conférence du 05 Juillet - Android :Tout s...
SophiaConf 2010 Présentation de la conférence du 05 Juillet - Android :Tout s...SophiaConf 2010 Présentation de la conférence du 05 Juillet - Android :Tout s...
SophiaConf 2010 Présentation de la conférence du 05 Juillet - Android :Tout s...TelecomValley
 
Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...
Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...
Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...FredericJutant
 
Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...
Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...
Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...FredericJutant
 

Similaire à Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA) (20)

[ Revue Innovations ] Valtech - Mobile World Congress
[ Revue Innovations ] Valtech - Mobile World Congress[ Revue Innovations ] Valtech - Mobile World Congress
[ Revue Innovations ] Valtech - Mobile World Congress
 
Presentation Android
Presentation AndroidPresentation Android
Presentation Android
 
Veille tendance
Veille tendanceVeille tendance
Veille tendance
 
Sharing day CES 2017
Sharing day CES 2017Sharing day CES 2017
Sharing day CES 2017
 
Le Marketing Mobile
Le Marketing MobileLe Marketing Mobile
Le Marketing Mobile
 
Competitic applications accessibles tablettes
Competitic   applications accessibles tablettesCompetitic   applications accessibles tablettes
Competitic applications accessibles tablettes
 
Présentation smartphones
Présentation smartphonesPrésentation smartphones
Présentation smartphones
 
Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisseran...
Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisseran...Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisseran...
Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisseran...
 
LES MATERIELS ANDROID
LES MATERIELS ANDROIDLES MATERIELS ANDROID
LES MATERIELS ANDROID
 
L’internet de séjour et le web mobile _ Ateliers numériques en Pays de ...
L’internet de séjour et le web mobile _ Ateliers numériques en Pays de ...L’internet de séjour et le web mobile _ Ateliers numériques en Pays de ...
L’internet de séjour et le web mobile _ Ateliers numériques en Pays de ...
 
Présentation backelite 161210
Présentation backelite 161210Présentation backelite 161210
Présentation backelite 161210
 
Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?Web Mobile : quelles opportunités face aux apps ?
Web Mobile : quelles opportunités face aux apps ?
 
Atelier T7 Développer un site ou une application mobile - Salon e-tourisme V...
Atelier T7 Développer un site ou une application  mobile - Salon e-tourisme V...Atelier T7 Développer un site ou une application  mobile - Salon e-tourisme V...
Atelier T7 Développer un site ou une application mobile - Salon e-tourisme V...
 
Les applis fétiches sur son iphone, son iPod touch, son iPad - ExplorCamp (2010)
Les applis fétiches sur son iphone, son iPod touch, son iPad - ExplorCamp (2010)Les applis fétiches sur son iphone, son iPod touch, son iPad - ExplorCamp (2010)
Les applis fétiches sur son iphone, son iPod touch, son iPad - ExplorCamp (2010)
 
Presentation cgt juin2010
Presentation cgt juin2010Presentation cgt juin2010
Presentation cgt juin2010
 
Compte-rendu-buzzness-mobile
Compte-rendu-buzzness-mobileCompte-rendu-buzzness-mobile
Compte-rendu-buzzness-mobile
 
Conférence Gemalto Le mobile et ses usages
Conférence Gemalto Le mobile et ses usagesConférence Gemalto Le mobile et ses usages
Conférence Gemalto Le mobile et ses usages
 
SophiaConf 2010 Présentation de la conférence du 05 Juillet - Android :Tout s...
SophiaConf 2010 Présentation de la conférence du 05 Juillet - Android :Tout s...SophiaConf 2010 Présentation de la conférence du 05 Juillet - Android :Tout s...
SophiaConf 2010 Présentation de la conférence du 05 Juillet - Android :Tout s...
 
Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...
Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...
Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...
 
Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...
Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...
Web 2.0 / Web 3.0 / Real Time Web / Médias sociaux / Marketing viral / Buzz /...
 

Plus de Stéphane Rouilly

Scénographie des controverses 2014, Sciences Po, Ecole de la Com
Scénographie des controverses 2014, Sciences Po, Ecole de la ComScénographie des controverses 2014, Sciences Po, Ecole de la Com
Scénographie des controverses 2014, Sciences Po, Ecole de la ComStéphane Rouilly
 
Scénographie des controverses 2013 à Sciences Po, Ecole de la Com
Scénographie des controverses 2013 à Sciences Po, Ecole de la ComScénographie des controverses 2013 à Sciences Po, Ecole de la Com
Scénographie des controverses 2013 à Sciences Po, Ecole de la ComStéphane Rouilly
 
Scénographie des analyses de controverses
Scénographie des analyses de controversesScénographie des analyses de controverses
Scénographie des analyses de controversesStéphane Rouilly
 
Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)
Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)
Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)Stéphane Rouilly
 
De l'iPhone à twitter : le web qui bouleverse notre quotidien
De l'iPhone à twitter : le web qui bouleverse notre quotidienDe l'iPhone à twitter : le web qui bouleverse notre quotidien
De l'iPhone à twitter : le web qui bouleverse notre quotidienStéphane Rouilly
 
Mines CSI, 2nd cours de la formation des webmasters
Mines CSI, 2nd cours de la formation des webmastersMines CSI, 2nd cours de la formation des webmasters
Mines CSI, 2nd cours de la formation des webmastersStéphane Rouilly
 
Scenographie Des Analyses De Controverse
Scenographie Des Analyses De ControverseScenographie Des Analyses De Controverse
Scenographie Des Analyses De ControverseStéphane Rouilly
 
TD : un chat geolocalise (mashup)
TD : un chat geolocalise (mashup)TD : un chat geolocalise (mashup)
TD : un chat geolocalise (mashup)Stéphane Rouilly
 
TD : 12 Logiciels libres pour contruire vos sites web
TD : 12 Logiciels libres pour contruire vos sites webTD : 12 Logiciels libres pour contruire vos sites web
TD : 12 Logiciels libres pour contruire vos sites webStéphane Rouilly
 

Plus de Stéphane Rouilly (11)

Scénographie des controverses 2014, Sciences Po, Ecole de la Com
Scénographie des controverses 2014, Sciences Po, Ecole de la ComScénographie des controverses 2014, Sciences Po, Ecole de la Com
Scénographie des controverses 2014, Sciences Po, Ecole de la Com
 
Scénographie des controverses 2013 à Sciences Po, Ecole de la Com
Scénographie des controverses 2013 à Sciences Po, Ecole de la ComScénographie des controverses 2013 à Sciences Po, Ecole de la Com
Scénographie des controverses 2013 à Sciences Po, Ecole de la Com
 
Scénographie des analyses de controverses
Scénographie des analyses de controversesScénographie des analyses de controverses
Scénographie des analyses de controverses
 
Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)
Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)
Cours mobiles du Mastère CPM 2011 (Telecom ParisTech/INA)
 
De l'iPhone à twitter : le web qui bouleverse notre quotidien
De l'iPhone à twitter : le web qui bouleverse notre quotidienDe l'iPhone à twitter : le web qui bouleverse notre quotidien
De l'iPhone à twitter : le web qui bouleverse notre quotidien
 
Mines CSI, 2nd cours de la formation des webmasters
Mines CSI, 2nd cours de la formation des webmastersMines CSI, 2nd cours de la formation des webmasters
Mines CSI, 2nd cours de la formation des webmasters
 
Blog De Voyage
Blog De VoyageBlog De Voyage
Blog De Voyage
 
Scenographie Des Analyses De Controverse
Scenographie Des Analyses De ControverseScenographie Des Analyses De Controverse
Scenographie Des Analyses De Controverse
 
Blog De Voyage
Blog De VoyageBlog De Voyage
Blog De Voyage
 
TD : un chat geolocalise (mashup)
TD : un chat geolocalise (mashup)TD : un chat geolocalise (mashup)
TD : un chat geolocalise (mashup)
 
TD : 12 Logiciels libres pour contruire vos sites web
TD : 12 Logiciels libres pour contruire vos sites webTD : 12 Logiciels libres pour contruire vos sites web
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
  • 4.
  • 5.
  • 6.
  • 7. L ’internet mobile Des chiffres vertigineux
  • 8. Décollage de l ’internet mobile
  • 9.
  • 10.
  • 11.
  • 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
  • 14.
  • 15.
  • 16. Des applications en masse Sous-titre intermédiaire Un modèle qui fonctionne
  • 17.
  • 18.
  • 19.
  • 20.
  • 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
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33. BNP Paribas Lentement mais sûrement
  • 34.
  • 35. BNP : Site mobile iPhone (nov 2009)
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 61.  
  • 62.  
  • 63.
  • 64.
  • 65.
  • 66.
  • 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
  • 68.
  • 69.
  • 70.
  • 71. ...et Digg sort son app native (04/2010)
  • 72. Quelques une de nos réalisations ou idées Avec Titanium... ou sans !
  • 73.
  • 74. Révélation du potentiel photovoltaïque
  • 75.
  • 76. De l'iPhone à l'iPad
  • 77.
  • 79.
  • 81.
  • 82.
  • 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 + + + =
  • 86.
  • 87.
  • 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" 
  • 91. Homesense Project process http://www.homesenseproject.com/
  • 92.
  • 93. Benchmark Réaliser un état de l'art des différents services mobiles de visualisation de sa consommation électrique
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.  
  • 104.  
  • 105.  
  • 106.
  • 108. Copie d ’un modèle vierge
  • 110.
  • 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
  • 112.
  • 113.
  • 114.
  • 115.  
  • 116.  
  • 117.  
  • 118.  
  • 119.  
  • 120.  
  • 121. Fin de la partie 1 :  Eléments de contexte
  • 122.
  • 123.
  • 124.
  • 125.
  • 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.
  • 131.
  • 132.
  • 133.
  • 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
  • 141.
  • 142. IDE Netbeans Code dans Ressources
  • 148. App.js, page principale d'un nouveau projet Titanium
  • 149.
  • 150.
  • 151.
  • 152.
  • 153.
  • 154.
  • 155.  
  • 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.
  • 199.
  • 200.
  • 201.
  • 202.
  • 203.
  • 204.
  • 205.
  • 206.
  • 207.
  • 208.
  • 209.
  • 210.
  • 211.
  • 212.
  • 213.
  • 214.
  • 215.
  • 216.
  • 217.
  • 218.
  • 219.
  • 220.
  • 222.
  • 223.
  • 224.
  • 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
  • 228.
  • 229. Export vers le téléphone avec CyberDuck
  • 230. Export vers le téléphone avec CyberDuck
  • 231.
  • 235.
  • 236.
  • 237.
  • 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)
  • 240.  

Notes de l'éditeur

  1. Mettre un titre sur ces slides.
  2. Mettre un titre sur ces slides.