1. ICL3B02a : Outils et services numériques pour de projets de communication en contexte multilingue et global
Licence 3, Filière Communication et Formation Interculturelles, INALCO
Séance 3 : Communication enrichie, Communication augmentée, 17 mars 2014
Jirasri Deslis, Ingénieur R & D
Département Traitement du Signal et des Images, Télécom ParisTech, Institut Mines -Télécom
1

2. 1. Suite de Storytelling :
1.1. SlideShare et Compte Projets de CoM2014
1.2. Communication enrichie : Popcorn Marker
2. « Communication augmentée » vers Réalité
Augmentée :
2.1. QR Code,
2.2. Définition RA et Aurasma
Plan de l’intervention
2
Source des images de couverture :
 Taiwanese media group adds augmented reality to daily newspaper : [http://bit.ly/1qjlRiV ]
 Médias sociaux et Ressources Humaines, c’est possible : [ http://bit.ly/1lgrpXV ]
 Guide pratique du QRCode : [ http://bit.ly/PdaQC8 ]

3. 1.Suite de Storytelling :
1.1. SlideShare et Compte Projets de CoM2014
3

4. 1. Suite de Storytelling :
1.1. SlideShare (1)
4
http://www.socialmediaexaminer.com/how-to-generate-leads-with-slideshare/

5. 1. Suite de Storytelling :
1.1. SlideShare (2)
5
http://www.commentcamarche.net/sites/details/slideshare.net

6. 1. Suite de Storytelling :
1.2. Compte SlideShare Projets de Com2014
6
Compte Projets de Com 2014 sur Slideshare pour diffuser vos travaux
http://fr.slideshare.net/projetsdecom2014-INALCO

7. 1. Suite de Storytelling :
1.2. Compte SlideShare Projets de Com2014
7
Titre du document
Description
Catégorie
Mots-clés
Attention : Pour bien référencer

8. 1. Suite de Storytelling :
1.3. Plus d’information sur SlideShare : Modes de partage
8

9. 1. Suite de Storytelling :
1.3. Plus d’information sur SlideShare : Possibilité d’ajouter la vidéo
9
Ajouter la vidéo
Exemples concrets d’analyse de corpus audiovisuels à l’aide du studio ASA :
« From Different Horizons of Rockshelter », analyse visuelle et acoustique »
http://bit.ly/XMaeUb
Médias sociaux & CoM mobile : Vidéos en ligne, Brand
Content, Vidéo virale, YouTube, Slideshare
http://bit.ly/1hmQ8Hw

10. 1. Suite de Storytelling :
1.3. Plus d’information sur SlideShare : A lire
10
http://www.placedesreseaux.com/Dossiers/identite-
numerique/comment-utiliser-slideshare-1.html
http://www.commentcamarche.net/faq/31495
-bien-utiliser-slideshare

11. 1.Suite de Storytelling :
1.2. Communication enrichie : Popcorn Marker
11

12. 1. Suite de Storytelling :
1.2. Communication enrichie : Popcorn Marker
12
Créer une vidéo enrichie avec Mozilla Popcorn
Maker, outil libre en ligne
http://www.netpublic.fr/2013/03/mozilla-popcorn-maker/

13. 1. Suite de Storytelling :
1.2. Communication enrichie : Popcorn Marker
13
Vidéo à visionner (4.22)
http://www.ted.com/talks/ryan_merkley_online_video_annotated_remixed_and_popped

14. 1. Suite de Storytelling :
1.2. Communication enrichie : Popcorn Marker
14
How to Use Mozilla's Popcorn Maker
http://www.wikihow.com/Use-Mozilla's-Popcorn-Maker

15. 1. Suite de Storytelling :
1.2. Communication enrichie : Popcorn Marker
15
http://www.ablf.fr/index.php?post/2013/11/06/Tutoriels-Popcorn-Maker-de-la-
Fondation-Mozilla.
Tutoriels Popcorn Maker de la Fondation Mozilla

16. 1. Suite de Storytelling :
1.2. Communication enrichie : Popcorn Marker
16
http://www.youtube.com/watch?v=MK_VaK6XqzI
VDO enrichie : Ex « 24Hours In Ayutthaya »
http://fr.wikipedia.org/wiki/Ayutthaya
Choisir la vdo sur Youtube Choisir l’article dans Wikipédia

17. 1. Suite de Storytelling :
1.2. Communication enrichie : Popcorn Marker
17
VDO enrichie : 24Hours In Ayutthaya
Travailler sur Popcorn Marker
@backbook

18. 1. Suite de Storytelling :
1.2. Communication enrichie : Popcorn Marker
18
VDO enrichie : 24Hours In Ayutthaya
Visionner le résultat
https://jirasri.makes.org/popcorn/1u9a

19. 1. Suite de Storytelling :
1.2. Communication enrichie : Popcorn Marker
19
VDO enrichie : 24Hours In Ayutthaya
Exemple de l’intégration sur un web & Usage « Journalisme »
http://www.journalism.co.uk/news/web-video-creation-
tool-popcorn-maker-remixed-for-journalists/s2/a554622/
A visionner

20. 1. Suite de Storytelling :
1.2. Communication enrichie : Popcorn Marker
20
VDO enrichie : 24Hours In Ayutthaya
Exemple de l’intégration sur un web & Usage « Education »
http://blogs.slj.com/neverendingsearch/2013/12/06/remixing-ted-with-popcorn-maker/

21. 2. Communication augmentée :
2.1. QR Code
21

22. 2. « Communication augmentée » :
2.1. QR Code : Définition
22Source de l’image : https://bitly.com/
Qu'est-ce qu'un QR code ? (1)
Le QR code (QR pour Quick Response) est
un type de code-barres en deux
dimensions (ou code matriciel datamatrix)
constitué de modules noirs disposés dans
un carré à fond blanc.
QR veut dire en anglais Quick Response,
car le contenu du code peut être décodé
rapidement.
Destiné à être lu par un lecteur de code-
barres, un téléphone mobile,
un smartphone, ou encore une webcam, il
a l'avantage de pouvoir stocker plus
d'informations qu'un code à barres1, et
surtout des données directement
reconnues par des applications,
Source de la définition : MonQRCode.com

23. 2. « Communication augmentée » :
2.1. QR Code : Définition
23Source de l’image : https://bitly.com/
Qu'est-ce qu'un QR code ? (2)
……permettant ainsi de déclencher
facilement des actions comme :
Naviguer vers un site internet, ou mettre
l'adresse d'un site en marque-page ;
 Ajouter une carte de visite virtuelle (vCard,
MeCard) dans les contacts, ou un événement
(iCalendar) dans l'agenda électronique ;
 Déclencher un appel vers un numéro de
téléphone ou envoyer un SMS ;
 Montrer un point géographique sur Google
Maps ou Bing Maps ;
 Encoder un texte libre ;
etc.
Source de la définition : MonQRCode.com

24. 2. « Communication augmentée » :
2.1. QR Code : Définition
24Source de l’image : https://bitly.com/
Qu'est-ce qu'un QR code ? (2)
……permettant ainsi de déclencher
facilement des actions comme :
Naviguer vers un site internet, ou mettre
l'adresse d'un site en marque-page ;
 Ajouter une carte de visite virtuelle (vCard,
MeCard) dans les contacts, ou un événement
(iCalendar) dans l'agenda électronique ;
 Déclencher un appel vers un numéro de
téléphone ou envoyer un SMS ;
 Montrer un point géographique sur Google
Maps ou Bing Maps ;
 Encoder un texte libre ;
etc.
Source de la définition : MonQRCode.com

25. 2. « Communication augmentée » :
2.1. QR Code : Définition
25Source de l’image : http://www.scanvisit.com/infos/4-le-concept-scanvisit
Comment fonctionne un QR code ?
Source de la définition : MonQRCode.com [http://www.monqrcode.com/qu-est-ce-qu-un-qr-code.html]
Pour lire un QR code, il suffit de disposer :
 D'un téléphone mobile avec un appareil
photo intégré (plus généralement appelé
Smartphone);
 D'une connexion à internet;
 D'un lecteur (Application disponible
gratuitement sur les plateformes Appstore,
Android, etc)
Il suffit alors de lancer son application de « lecteur de
QR code » et de pointer l'appareil photo du téléphone
mobile vers le QR code.
Le lecteur va alors automatiquement décoder le QR
code et afficher instantanément le contenu sur l'écran
du téléphone.

26. 2. « Communication augmentée » :
2.1. QR Code : Domaines d’application….
26
De la formation aux pierres tombales
Formation & Education
EX….Quiz codé : vous imprimez des cartes questions avec
au dos de chacune la bonne réponse, ou vous construisez des
quiz à choix multiples avec en face de chaque question un QR
code qui renvoie un message “bonne réponse” ou “dommage
…”.
http://www.formation-professionnelle.fr/2011/03/14/10-usages-des-qr/
http://journalmetro.com/dossiers/videos-du-jour/167768/en-video-des-code-qr-sur-des-
pierres-tombales/
A visionner

27. 2. « Communication augmentée » :
2.1. QR Code : Domaines d’application….
27
En passant par les bananes
http://hellobiz.fr/en-equateur-des-qr-codes-colles-sur-les-
bananes-favorisent-le-tourisme/ http://www.youtube.com/watch?v=uQNUzgd4kGk
A visionner

28. 2. « Communication augmentée » :
2.1. QR Code : Définition
28
…SHSHI !!!
http://hellobiz.fr/des-qr-codes-comestibles-sur-des-sushis-pour-informer-des-pratiques-de-la-peche-durable/
….Fier de ses pratiques de pêche durable, le restaurant Harney Sushi – qui est situé en Californie – a commencé à poser des QR codes
comestibles composés de papier de riz et d’encre à base d’eau, sur ses plats. Les clients peuvent scanner un QR code à l’aide de leur
Smartphone pour en apprendre davantage sur la provenance du poisson et savoir si l’espèce est menacée par l’industrie de la pêche.
Cette initiative permet de promouvoir les bonnes pratiques du restaurant et sensibiliser sur les problèmes liés à la surpêche.

29. 2. « Communication augmentée » :
2.1. QR Code : Définition
29
…sur la peau
http://www.youtube.com/watch?v=Hd7x-dDzf14&feature=youtu.be&t=46s
Clara Morgane Flashée dans le métro!
Après une nuit blanche, Clara Morgane se fait flasher dans le
métro, découvre comment elle crée du style avec son TAG!
Fais comme elle avec www.tagscreator.com !!
A visionner

30. 2. « Communication augmentée » :
2.1. QR Code : Domaine d’application
30
Et la culture…
Enrichissement de la lecture
En 2012, Maryvonne Rippert publie "Alabama Blues" le premier
roman jeunesse interactif où les QR codes permettent d'écouter
la bande originale du livre composée et interprétée par Les Chics
Types http://www.club-innovation-culture.fr/site-web-applications-mobiles-qr-code-et-3d-
le-national-museum-of-china-mise-sur-le-numerique/
http://fr.wikipedia.org/wiki/Code_QR#cite_note-36

31. 2. « Communication augmentée » :
2.1. QR Code : Suggestion à lire
31
http://www.e-marketing.fr/Thematique/Tendances-1000/Breves/Les-QR-
Codes-revolutionnent-les-usages-52500.htm
http://blog.modandwa.com/qr-code-
chronique-dune-mort-annoncee/
Le QR Code : chronique d’une mort annoncée ?
http://www.rslnmag.fr/post/2011/12/28/Les-QR-codes-peuvent-ils-etre-utiles-.aspx

32. 2. « Communication augmentée » :
2.1. QR Code : Suggestion à lire
32
[ 1] : http://blog.gaborit-d.com/dossier-guide-pratique-du-qrcode/
[2] : http://blog.gaborit-d.com/20-publicites-utilisant-des-qrcodes/
Guide pratique du QRCode [1] 20 publicités utilisant des QRcodes [2]

33. 2. « Communication augmentée » :
2.1. QR Code : Générateur QR Code
33
Comparaison
http://www.newsphil-blog.com/qrcode
QR code : De nombreux générateurs aux multiples applications…
http://www.qrdresscode.com/pages/Generateurs_QRcode_et_autres_codes2D-
4197514.html

34. 2. « Communication augmentée » :
2.1. QR Code : Générateur QR Code
34
http://zxing.appspot.com/generator/
Zxing Project mobiletag
http://www.mobiletag.com/
A tester

35. 2. « Communication augmentée » :
2.1. QR Code : Personnalisation de QRCode
35
https://www.unitag.fr/
Exemple du Blog et de la carte de visite de @backbook

36. 2. « Communication augmentée » :
2.1. QR Code : QRpédia
36
QRpédia : Etude de cas « Patrimoine culturel & Multilinguisme »
QRpédia est un système, basé sur le Web mobile, qui utilise les codes QR pour
fournir à l'utilisateur des articles de Wikipédia dans la langue qu'il désire. À
l'utilisation des codes QR, qui peuvent facilement être générés pour n'importe
quel URI, le système QRpédia ajoute plusieurs fonctionnalités, fondées
notamment sur la reconnaissance de la langue du téléphone mobile.

37. 37
2. « Communication augmentée » :
2.1. QR Code : QRpédia
http://www.youtube.com/watch?v=aXCUOpBytxA

38. 38
2. « Communication augmentée » :
2.1. QR Code : QRpédia
Complétant l'étiquette unilingue, le code QRpédia de l'article A Philosopher
Lecturing on the Orrery au musée de Derby. Au mois de mars 2012, cet
article est disponible en 17 langues.
Monmouthpedia
Monmouthpedia est un projet associant le village
de Monmouth en Galles du Sud (Royaume-Uni) et le
projet encyclopédique collaboratif Wikipédia dans la
mise en place d'un système d'information sur le village
(lieux, monuments…).
Plaque de céramique avec Code QR, ici permettant aux
touristes ou autres usagers d'accéder directement à la
page Wikipédia présentant le Shire
Hall deMonmouth (chef-lieu du comté du
Monmouthshire au Pays de Galles), en complément des
guides touristiques existants.
A visionner

39. 39
2. « Communication augmentée » :
2.1. QR Code : QRpédia
Monmouthpedia : Wikipedia Town
http://en.wikipedia.org/wiki/Wikipedia:GLAM/MonmouthpediA

40. 40
2. « Communication augmentée » :
2.1. QR Code : QRpédia
A tester
Avec l’article : Phra Nakhon Si Ayutthaya (city) en anglais
http://en.wikipedia.org/wiki/Phra_Nakhon_Si_Ayutthaya_(city)

41. 2. « Communication augmentée » vers la Réalité
Augmentée
2.2. Définition RA et Aurasma
41

42. 2. Communication augmentée > Réalité Augmentée :
2.2. Un peu de définition
42
La réalité augmentée désigne les systèmes informatiques qui rendent
possible la superposition d'un modèle virtuel 3D ou 2D à la perception
que nous avons naturellement de la réalité et ceci en temps réel. Elle
désigne les différentes méthodes qui permettent d'incruster de façon
réaliste des objets virtuels dans une séquence d'images.
Source d’image : http://blog.arimagine.com/la-realite-augmentee-beaucoup-de-definitions-une-experience-unique/
Source de définition http://fr.wikipedia.org/wiki/R%C3%A9alit%C3%A9_augment%C3%A9e

43. 43
http://blog.arimagine.com/la-realite-augmentee-beaucoup-de-definitions-une-experience-unique/
2. Communication augmentée > Réalité Augmentée :
2.2. Un peu de définition
A lire : Réflexion sur la définition

44. 44
2. Communication augmentée > Réalité Augmentée :
2.2. AURASMA
Aurasma est une plateforme destinée aux entreprises et
organisations leur proposant de créer et de publier leur propre réalité
augmentée.
C’est aussi une application pour appareils mobiles. Indispensable pour
pouvoir lire (voir) les créations, cette application permet également à
chaque utilisateur de créer facilement sa propre réalité augmentée !
Source de définition : http://svt.ac-creteil.fr/?aurasma
Source d’image : http://bit.ly/1iQLmY0

45. 45
2. Communication augmentée > Réalité Augmentée :
2.2. AURASMA
http://www.ted.com/talks/matt_mills_image_recognition_that_triggers_augmented_reality
Suggestion à voir

46. 46
2. Communication augmentée > Réalité Augmentée :
2.2. AURASMA
http://www.youtube.com/watch?v=GBKy-hSedg8
A visionner en classe

47. 47
2. Communication augmentée > Réalité Augmentée :
2.2. AURASMA
Source d’information: : http://svt.ac-creteil.fr/?aurasma

48. 48
2. Communication augmentée > Réalité Augmentée :
2.2. AURASMA
Source d’information: : http://svt.ac-creteil.fr/?aurasma

49. 49
2. Communication augmentée > Réalité Augmentée :
2.2. AURASMA
Source d’information: : http://svt.ac-creteil.fr/?aurasma
A tester avec l’image du poète écossais Robert Burns.

50. 50
2. Communication augmentée > Réalité Augmentée :
2.2. AURASMA
Deux façons pour créer une Aura
Source d’information: : http://svt.ac-creteil.fr/?aurasma
1. Par les smartphone & tablette en utilisant la bibliothèque des auras existantes

51. 51
2. Communication augmentée > Réalité Augmentée :
2.2. AURASMA
Deux façons pour créer une Aura
Source d’information: https://studio.aurasma.com/home
2. Par Aurama Studio en personnalisant les auras

52. 52
2. Communication augmentée > Réalité Augmentée :
2.2. AURASMA
2.2.1. Créer une aura par les smartphones & tablettes
Source d’information: : http://svt.ac-creteil.fr/?aurasma

53. 53
2. Communication augmentée > Réalité Augmentée :
2.2. AURASMA
2.2.1. Créer une aura par les smartphones & tablettes
1. Choirsir l’aura Elvis en
cliquant sur [+]
2. Prendre une photo de l’Elvis
e.g. sur la page de Wiki
3. Confimer la superposition
entre Aura et Image

54. 54
2. Communication augmentée > Réalité Augmentée :
2.2. AURASMA
2.2.1. Créer une aura par les smartphones & tablettes
5. Confirmer pour ajouter à la chaîne 6. Voir l’aura de « Elvis » sur le papier imprimé

55. 55
2. Communication augmentée > Réalité Augmentée :
2.2. AURASMA
2.2.2. Créer une aura avec Aurasma Studio
Source d’information: https://studio.aurasma.com/home

56. 56
2. Communication augmentée > Réalité Augmentée :
2.2. AURASMA
2.2.2. Créer une aura avec Aurasma Studio, les « Tutorial Vidéos »
Source d’information: http://www.twoguysandsomeipads.com/2013/07/aurasma-studio-tutorial-videos.html?sthash.1oZybAT0.mjjo
Playlist de la chaîne :
http://www.youtube.com/playlist?list=PL349602EC4AA18535

57. 57
2. Communication augmentée > Réalité Augmentée :
2.2. AURASMA
Source d’image : http://bit.ly/1qIeu4Z
2.2.2. Créer une aura avec Aurasma Studio
Ex: Créer RA des raisins pour montrer l’expérimentation scientifique
Etape 1. Préparation de l’Image Attention au choix des images
NONOUI
Taille max 480x640

58. 58
2. Communication augmentée > Réalité Augmentée :
2.2. AURASMA
2.2.2. Créer une aura avec Aurasma Studio
Ex: Créer RA des raisins pour montrer l’expérimentation scientifique
Etape 2. Préparation de l’ « Overlays » e.g. VDO mp4
http://www.canal-u.tv/video/tele2sciences/la_danse_des_raisins_secs.9681

59. 59
2. Communication augmentée > Réalité Augmentée :
2.2. AURASMA
2.2.2. Créer une aura avec Aurasma Studio
Ex: Créer RA des raisins pour montrer l’expérimentation scientifique
Etape 3. Importation dans l’Aurasma Studio : Importer l’image

60. 60
2. Communication augmentée > Réalité Augmentée :
2.2. AURASMA
2.2.2. Créer une aura avec Aurasma Studio
Ex: Créer RA des raisins pour montrer l’expérimentation scientifique
Etape 3. Importation dans l’Aurasma Studio : Importer la VDO

61. 61
2. Communication augmentée > Réalité Augmentée :
2.2. AURASMA
2.2.2. Créer une aura avec Aurasma Studio
Ex: Créer RA des raisins pour montrer l’expérimentation scientifique
Etape 3. Importation dans l’Aurasma Studio : Créer la chaîne

62. 62
2. Communication augmentée > Réalité Augmentée :
2.2. AURASMA
2.2.2. Créer une aura avec Aurasma Studio
Ex: Créer RA des raisins pour montrer l’expérimentation scientifique
Etape 3. Importation dans l’Aurasma Studio : Créer la chaîne

63. 63
2. Communication augmentée > Réalité Augmentée :
2.2. AURASMA
2.2.2. Créer une aura avec Aurasma Studio
Ex: Créer RA des raisins pour montrer l’expérimentation scientifique
Etape 3. Importation dans l’Aurasma Studio : Créer l’Aura

64. 64
2. Communication augmentée > Réalité Augmentée :
2.2. AURASMA
2.2.2. Créer une aura avec Aurasma Studio
Ex: Créer RA des raisins pour montrer l’expérimentation scientifique
Etape 3. Importation dans l’Aurasma Studio : Créer l’Aura

65. 65
2. Communication augmentée > Réalité Augmentée :
2.2. AURASMA
2.2.2. Créer une aura avec Aurasma Studio
Ex: Créer RA des raisins pour montrer l’expérimentation scientifique
Etape 4. A tester….

66. 66
http://www.computerworld.com/s/article/9235538/Augmented_reality_mo
bile_app_brings_inanimate_objects_to_life
2. Communication augmentée > Réalité Augmentée :
2.2. AURASMA
2.2.3. Suggestion à lire
http://www.elissamalespina.com/augmented-reality-in-
the-classroom-with-aurasma.html
Education

67. 67
2. Communication augmentée > Réalité Augmentée :
2.2. AURASMA
2.2.3. Suggestion à lire
http://blog.arimagine.com/
http://www.larealiteaugmentee.info/

68. 68
http://alternancecm.wordpress.com/2013/03/15/la-realite-augmentee-est-
elle-lavenir-de-la-communication-ou-est-elle-deja-has-been-2/
http://www.dimension3-expo.com/fr/conferences-2/item/la-
communication-augmentee.html
2. Communication augmentée > Réalité Augmentée :
2.2. AURASMA
2.2.3. Suggestion à lire