etre présent sur mobiles_patrice de saint-steban_13ème rencontre des tisserands_06 avril 2013
TRANSCRIPT
![Page 1: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/1.jpg)
Applications Smartphone
Applications Smartphones : enjeux et perspectives pour les communautés de l'Eglise
Catholique
23/01/2011Application Smartphone1
![Page 2: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/2.jpg)
Application Smartphone 2
Patrice de Saint Steban École EPITA Ingénieur en Informatique : Société SFEIR
Application web Java/GWT Développeur Expert
Travaille à la CEF sur le projet EgliseInfo (Refonte du site MessesInfo)
Application mobile android : MessesInfo et EgliseInfo Membre de Technologiæ
23/01/2011
![Page 3: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/3.jpg)
Modèle de présentation Technologiae 3
Technologiæ Un groupe de travail sur l’Église et les NTIC
14 membres Des compétences diversifiées :
stratégie, organisation, management communication, marketing, médias sociaux informatique, systèmes d’information
un site internet : www.technologiae.org Des actions au service de l’Église
Veille Conseil Formation
![Page 4: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/4.jpg)
Application Smartphone 4
Et vous ? Qui a un téléphone portable ? Qui a un smartphone ?
Iphone ? Android ? Blackberry ? Windows Mobile ? Autre ?
Qui a un site accessible en mobile ?
23/01/2011
![Page 5: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/5.jpg)
Application Smartphone 5
Historique
23/01/2011
1991 : Premier mobile en France par Alcatel => Carte SIM
23 avril 1993 : Arrivé en France du Bi-Bop (téléphone urbain)
1999 : Nokia 7110 premier mobile avec « internet » => Format WAP
2003 : Naissance de la 3G : Haut débit mobile
![Page 6: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/6.jpg)
Application Smartphone 6
Du mobile au smartphone
1992 : Prototype HTC Simon (agenda, mail, fax, traitement de texte, écran tactile) => Premier smartphone
1996 : Palm Pilot => PDA 1996 : Nokia Communicator (version E90 intègre GPS) 2000 : Ericsson R380 - Premier smartphone tactile (Symbian) 2000 : Lecteur MP3 dans un téléphone 2001 : Ecran couleur et sortie de Windows CE Pocket PC OS 2002 : BlackBerry => Email mobile 2007 : Nokia N95 (GPS, Wifi, Photo, …) 1er smartphone moderne
23/01/2011
![Page 7: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/7.jpg)
Application Smartphone 7
IPhone
Annoncé par Apple en janvier 2007 Sortie en Juillet 2007 => évènements Ecran tactile au doigt et multitouche ! Interface simple Applications tierces (non natives) Vrai navigateur web !
Début de l’internet mobile !23/01/2011
![Page 8: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/8.jpg)
Application Smartphone 8
Développement considérable
Nov
embr
e :
Anno
nce
d’An
droi
d
Juill
et: i
Phon
e 3G
O
ctob
re :
And
roid
1.0
M
ai :
Andr
oid
1.5
(1e v
rai v
ersi
on)
Ju
in :
Palm
Pre
– W
eb O
S
Juill
et :
iPho
ne 3
GS
Se
ptem
bre
: And
roid
1.6
Ja
nvie
r : A
ndro
id 2
.1 –
Nex
us O
ne
Juin
: Sa
msu
ng W
ave
- Bad
a
Juill
et :
Andr
oid
2.2
Ju
illet
: iP
hone
4
Oct
obre
: W
indo
ws
Mob
ile 7
D
écem
bre
: And
roid
2.3
– N
exus
S23/01/2011
2007
2008
2009
2010
![Page 9: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/9.jpg)
Application Smartphone 9
2011 - 2012 IPhone 4S IPad 1, 2, 2S Android 4.0 : Mobile et tablette Importance du marché de la tablette Disparition de Nokia/Symbian Guerre des brevets mobiles Android dépasse l’Iphone
Symbian Nokia27%
RIM BlackBerry13%Android
Google36%
iOS Apple17%
Windows Mobile4%
Autres3%
Ventes mobiles 2011
![Page 10: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/10.jpg)
Application Smartphone 10
SMARTPHONE ?
Téléphone avec les fonctionnalités d’un agenda personnel (PDA)
23/01/2011
![Page 11: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/11.jpg)
Application Smartphone 11
Internet Navigateur web Connexion rapide : Wifi/3G Connexion permanente
23/01/2011
![Page 12: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/12.jpg)
Application Smartphone 12
Larges écrans
Plus de place pour afficher des informations Multimédia (Photo, Vidéo)
23/01/2011
![Page 13: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/13.jpg)
Application Smartphone 13
Ecran tactile multitouch
Expérience simplifiée Pas de stylet, ni de clavier (direct sur
l’écran)
23/01/2011
![Page 14: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/14.jpg)
Application Smartphone 14
GPS
Navigation Cartographie Savoir où on est
=> services autour Le contenu est maintenant
associé à une position géographique
23/01/2011
![Page 15: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/15.jpg)
Application Smartphone 15
Applications Plus limité aux applications du constructeur Personnalisation Ajout de fonctions spécifiques à l’utilisateur (centre d’intérêts,
travail, préférences, goûts, etc …)
23/01/2011
![Page 16: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/16.jpg)
Application Smartphone 16
Marché d’applications iPhone App Store, Google Play (Android Market Place),
Windows MarketPlace, Ovi Store, App Word Trouver et installer des applications Vendre ! Commentaires, Votes
23/01/2011
![Page 17: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/17.jpg)
Application Smartphone 17
TABLETTE ?
![Page 18: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/18.jpg)
Application Smartphone 18
De plus en plus utilisé Plus de 3 millions de tablette vendu en 2012 !
![Page 19: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/19.jpg)
Application Smartphone 19
A la croisé entre le smartphone et le desktop Système identique smartphone (IOS, Android, Window 8) Applications mobile Écran plus grand et tactile
![Page 20: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/20.jpg)
Application Smartphone 20
APPLICATIONS / SITE MOBILE ?
23/01/2011
![Page 21: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/21.jpg)
Application Smartphone 2123/01/2011
Facebook présent sur toutes les plateformes
![Page 22: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/22.jpg)
Application Smartphone 22
Application native
Application installable On ne l’oublie pas On la trouve facilement
Fonctionnalités natives Notifications / Push
Plus ludique / Plus communicatif Développement (relativement) simple (par rapport aux anciennes
plateforme mobile)
Faire une appli par système (iPhone, Android, Windows Mobile, etc…)
Coût23/01/2011
![Page 23: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/23.jpg)
Application Smartphone 23
Site mobile ?
Simple changement de style du site Coût réduit
Compatible avec tous les smartphones (récents) HTML5
Géolocalisation Vidéo
Plugins automatique pour les CMS
Il faut connaitre le site
23/01/2011
![Page 24: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/24.jpg)
Application Smartphone 24
Verdict ?Appli vs site
Faire systématiquement une version mobile de son site
Développer une application mobile (si) : Utilisations de fonctionnalités avancées Monétisation Service ajoutés par rapport au site Usage mobile (géolocalisation, usage récurrent, hors ligne) Marketing
=> Mutualisation des applications
23/01/2011
![Page 25: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/25.jpg)
Application Smartphone 25
ENJEUX POUR L’ÉGLISE
23/01/2011
![Page 26: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/26.jpg)
Application Smartphone 26
Diffusions Application mobile => Communication Toucher un large publique => Magasins d’applications
23/01/2011
![Page 27: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/27.jpg)
Application Smartphone 27
Mutualisation Une application mobile coûte cher pour une petite
communauté Il faut avoir une vraie valeur ajoutée
23/01/2011
![Page 28: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/28.jpg)
Application Smartphone 28
Potentiel Développement du mobile Informations accessible partout, tous le temps Beaucoup d’idée à mettre en place Tablette Tactile
23/01/2011
![Page 29: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/29.jpg)
Application Smartphone 29
CRÉER SON SITE OU SON APPLICATION MOBILE
![Page 30: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/30.jpg)
Application Smartphone 30
Version mobile
Il est important maintenant d’avoir une version mobile
Deux solutions : Plugins ou extension du CMS Feuille CSS spécifique pour le mobile
![Page 31: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/31.jpg)
Application Smartphone 31
Plugins du CMS Template spécifique Détection automatique du navigateur Optimisation des ressources (réductions des
images) Redimensionnement du contenu. Interface adapté à l’écran (gros bouton,
défilement verticale) Simple et automatique
![Page 32: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/32.jpg)
Application Smartphone 32
Feuille de style CSS Personnalisation du design Simple à faire si l’on connait le CSS
Pas d’optimisation des images et du contenu
![Page 33: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/33.jpg)
Application Smartphone 33
Wordpress WPTouch : Détection du mobile Adaptation des images Template personnalisable par type de mobile Installez et ça marche !
http://wordpress.org/extend/plugins/wptouch
![Page 34: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/34.jpg)
Application Smartphone 34
SPIP 1) ITwX mobile Squelette tout fait Iphone, Android, Blackberry Compatible avec d’autres plugins
http://twxdesign.com/itwx-mobile-v3
2 ) Ci-mobile : http://www.spip-contrib.net/cimobile-plugin-detection-et-aiguillage-des-telephones
Détection et Aiguillage vers des squelettes mobile
![Page 35: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/35.jpg)
Application Smartphone 35
Joomla Détection du mobile Adaptation des images Template personnalisable par type de mobile Configuration
http://extensions.joomla.org/extensions/mobile/mobile-display/11722
http://www.mobilejoomla.com
![Page 36: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/36.jpg)
Application Smartphone 36
Créer sa feuille de style :@media screen and (max-width: 640px) {
//Definition des classes mobiles
.contenu { width: 100%;
} }
![Page 37: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/37.jpg)
Application Smartphone 37
Ordinateur / Portable / Tablette / Smartphone Changer simplement l’agencement des blocs
![Page 38: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/38.jpg)
Application Smartphone 38
Exemple
Pour faire cette capture : http://ami.responsivedesign.is/#
![Page 39: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/39.jpg)
Application Smartphone 39
Testerhttp://quirktools.com/screenfly/ Firefox :
Menu / Développement Web / Vue adaptative (Ctrl + Maj + M)
![Page 40: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/40.jpg)
Application Smartphone 40
Contenu Mais il est important d’avoir un contenu mobile
adapté ! Tous sur la hauteur : Défilement vertical Images réduites Texte raccourcis Géolocalisé Vidéo HTML5 (Youtube gère automatiquement) Contenu spécifique
![Page 41: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/41.jpg)
Application Smartphone 41
Générateur d’applications Génération simple d’application Visualisation du résultat en direct Génère une version native pour chaque système : Iphone,
Android, Windows Mobile, etc…
http://www.mobbase.com (payant 5$ / mois + 20 $ Iphone + 20$ Android)
http://mobile.conduit.com/ (payant 39$ / mois)
http://madebykawet.com/
http://www.appsgeyser.com/ (Gratuit, juste Android)
![Page 42: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/42.jpg)
Application Smartphone 42
Exemple mobile.conduit.com Mettre le nom du site
Et ?
![Page 43: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/43.jpg)
Application Smartphone 43
Application automatiquement généré
Détecte le flux RSS, le compte twitter, le compte facebook Possibilité d’ajouter d’autres pages Prévisualisation en direct !
![Page 44: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/44.jpg)
Application Smartphone 44
Résultat ? http://technologiae.org.mobapp.at/
![Page 45: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/45.jpg)
Application Smartphone 45
Autre exemple : Retraite dans la ville http://retraitedanslaville.mobapp.at/
![Page 46: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/46.jpg)
Application Smartphone 46
Conclusion Importance du mobile Version mobile de notre site Application si nécessaire Ne pas négliger les autres plateformes que l’iPhone (Surtout
Android)
![Page 47: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/47.jpg)
Modèle de présentation Technologiae 47
Merci !
Patrice de Saint StebanTechnologiæ
www.technologiae.org
photo
![Page 48: Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisserands_06 avril 2013](https://reader036.vdocuments.mx/reader036/viewer/2022062308/55918c4e1a28aba22e8b4598/html5/thumbnails/48.jpg)
Application Smartphone 48
Bibliographie Catholique.fr : messesinfo là où je suis et partout en France La Croix : La religion sur les téléphones mobiles Catholique.fr : Smartphones quelles applications pour l’eglise Technologiae.org : Messes-info sur android Technologiae.org : l’Internet mobile catholique en pleine effer
vescence
23/01/2011