Pour gagner du temps sur le web, il est impératif aujourd'hui d'utiliser des outils en ligne gratuits. Cet atelier permet de parcourir quelques logiciels: retouches photos, impression écran, téléchargement de documents, ...

1. TRUCS ET ASTUCES DU WEB

2. AU PROGRAMME
# Réduire une URL
# Créer un QR Code
# Jing
# Animoto et Photofiltre
# Les disponibilités sur son site:
> avec Google Agenda
# Insérer un widget sur son site
internet :
> Météo
> Tripadvisor
> Facebook
# Wisestamp
# Calaméo
# Picmonkey

3. RÉDUIRE UNE URL

4. RÉDUIRE UNE URL
une URL ?

5. RÉDUIRE UNE URL
Twitter y recours
systématiquement pour
intégrer des liens dans ses
messages sans pénaliser la
taille de ceux-ci.
Pourquoi ?

6. RÉDUIRE UNE URL
Une URL plus courte
est plus facile à retenir
Pourquoi ?

7. RÉDUIRE UNE URL
Raccourcir une URL permet d’
obtenir des QR codes plus
simples et plus lisibles.
Pourquoi ?

8. RÉDUIRE UNE URL
Moins de caractères à
encoder, c’est un code plus
facile à lire par mon
smartphone !
Pourquoi ?

9. RÉDUIRE UNE URL
En utilisant des générateurs
de liens courts
Comment ?

10. RÉDUIRE UNE URL
Générateurs de liens courts:
Le plus ancien:
Assure que les url raccourcies par son service n’expireront jamais. Garantie non
négligeable.
Le plus complet et populaire:
Vous pouvez alors personnaliser vos liens, voir l’historique de vos liens, les
rechercher, les regrouper et les classer.
Googlemania:
Raccourcisseur d’url officiel de Google. Fiable et sûr.

11. RÉDUIRE UNE URL
Mise en pratique avec Google URL Shortener:
1. Allez sur le site internet www.rochefort-ocean.com, rubrique “Découvrir”,
puis “Destination Rochefort Océan” et enfin “Rochefort” : http://www.
rochefort-ocean.com/decouvrir/destination-rochefort-ocean/rochefort
2. Copiez-collez l’adresse URL de cette page

12. RÉDUIRE UNE URL
Dans le cadre rouge, vous avez l’
URL raccourcie.
En-dessous, vous trouvez la page
vers laquelle elle renvoie.

13. RÉDUIRE UNE URL
Je peux l’utiliser sur une carte de
visite ou sur un flyer pour gagner
de la place.
Le plus : personnalisez votre URL
raccourcie avec Bitly par exemple.

14. RÉDUIRE UNE URL
Il est réellement
plus facile de
retenir l’URL
raccourcie que l’URL
vers laquelle elle
renvoie

15. RÉDUIRE UNE URLCRÉER UN QR CODE

16. RÉDUIRE UNE URL
Vidéo explicative sur:
http://goo.gl/Evsnte
#ONPDP
Notez l’URL raccourcie !
Qu’est ce que
c’est un
QR CODE ?
CRÉER UN QR CODE

17. RÉDUIRE UNE URLCRÉER UN QR CODE
Comme vous pourrez le découvrir dans la vidéo, voilà un QR code :
On le retrouve partout: dans les magazines, sur les affiches,
packagings produit ou cartes de visites...
Il permet d’accéder à un contenu en ligne à l’aide d’un téléphone
portable (smartphones, Iphone).
Et pour créer un QR code, vous devez utiliser un logiciel en ligne.

18. RÉDUIRE UNE URLCRÉER UN QR CODE
Nous utiliserons le logiciel en ligne UNITAG:
Dans l’encadré rouge,
choisissez le type de
QR code que vous
souhaitez créer.

19. RÉDUIRE UNE URLCRÉER UN QR CODE
Si vous souhaitez que le QR code renvoie vers une page internet:
Choisir l’option Web et
réseaux sociaux.
Entrez l’URL de la page.
N’oubliez pas !
URL raccourcie = QR code + simple et + lisible !

20. RÉDUIRE UNE URLCRÉER UN QR CODE
Si vous souhaitez que le QR code renvoie vers une page internet:
Vous pouvez:
* intégrez le QR code à
votre site internet en
utilisant le code généré
* téléchargez le QR code

21. RÉDUIRE UNE URLCRÉER UN QR CODE
Si vous souhaitez que le QR code renvoie vers un autre type d’information:
Choisir l’option Autres
types.

22. RÉDUIRE UNE URLCRÉER UN QR CODE
Si vous souhaitez personnaliser votre QR code:

23. RÉDUIRE UNE URLCRÉER UN QR CODE
À ne pas oublier avant de diffuser votre QR code:
Tester votre QR code avec plusieurs appareils:
Iphone, Blackberry, Android ou Windows phone

24. RÉDUIRE UNE URLCRÉER UN QR CODE
Plus d’info en flashant le QR code:

25. RÉDUIRE UNE URLCRÉER UN QR CODE
En générant votre QR Code, vous obtenez aussi ces 2 visuels à utiliser sur vos
outils de communication

26. JING

27. JING
Outil de capture d’écran

28. JING
Cliquez sur le + pour capturer l’écran
Sélectionnez la zone à capturer:
Mettez le curseur dans l’angle en haut à gauche de
l’image, maintenez la sélection et faites
descendre le curseur jusqu’à l’angle en bas à
droite.

29. JING
Une fois la zone de capture effectuée
une barre de tâches va apparaître.
Elle vous permet de :
* Valider votre capture d’écran
* Faire une vidéo
* Annuler la sélection si l’image ne
vous convient pas et en faire une de
nouveau (avec la flèche)
* Annuler la capture d’écran (avec la
croix)

30. JING
Annuler/ supprimer la capture
En cliquant sur le logo de capture d’écran, vous pouvez:
Donnez un nom à votre capture
Faire une copie de
la capture
Ajoutez des
flèches ou des
encadrements
texte sur votre
capture

31. ANIMOTO
Outil en ligne de montage vidéo automatisé.
Extrêmement simple à utiliser : il suffit de
choisir des photos, des vidéos, une musique, du
texte et Animoto compile tout automatiquement
pour un rendu esthétique et professionnel !

32. ANIMOTO

33. ANIMOTO
Créez votre
vidéo

34. ANIMOTO
Choisissez votre modèle

35. ANIMOTO

36. ANIMOTO

37. PHOTOFILTRE
Pour redimensionner le poids de
vos photos.
1. Télécharger Photofiltre 7
2. Ouvrez votre photo
3. Allez dans “image” puis
“taille de l’image”

38. PHOTOFILTRE
Pour redimensionner le poids de
vos photos.
4. Modifiez la largeur ou la
hauteur
5. Dans le cadre “Mémoire”, le
poids de votre photo doit être
au maxi autour de 300ko

39. LES DISPOS SUR MON SITE
AVEC GOOGLE AGENDA

40. Étape 1 : Création d'un agenda pour chaque
chambre/meublé
Une fois connecté(e) à votre espace Google Agenda, créez 1 agenda par chambre/meublé en
plus de celui installé par défaut correspondant à votre compte Google:
> Cliquez sur le lien nommé "créer" à gauche de la page, dans le bloc Mes Agendas.
> Donner le nom d'une de vos chambres/meublés à chaque nouvel agenda et veiller à bien
cocher: "Rendre cet agenda public" et "Afficher uniquement ma disponibilité".

41. Étape 1 : Création d'un agenda pour chaque
chambre/meublé

42. Étape 1 : Création d'un agenda pour chaque
chambre/meublé

43. Étape 2 : Créer une réservation express pour
une chambre/meublé
Maintenant vos agendas sont
visibles sur le côté gauche de la
page, vous pouvez modifier leur
couleur en cliquant sur la petite
flèche à droite de chaque agenda
dans le bloc "Mes Agendas".

44. Étape 2 : Créer une réservation express pour
une chambre/meublé
Insérons maintenant une réservation pour 3 nuits pour Monsieur Marcel Pagnol qui
séjournera dans la chambre jaune.
Pour insérer des journées complètes, pensez à cliquer dans la zone au-dessus des
plages horaires, comme dans la capture ci-après. Nous mettons donc le nom de
notre client dans la partie “Objet” et surtout, maintenant, vous allez cliquer
sur "Modifier les détails de l'événement".

45. Étape 2 : Créer une réservation express pour
une chambre/meublé
Nous allons ainsi pouvoir préciser que la chambre jaune est
OCCUPÉE pour ces 3 nuits, du 12 au 14 décembre.

46. Étape 2 : Créer une réservation express pour
une chambre/meublé
Une fois les champs renseignés,
cliquez sur “Enregistrer”.
Sur la diapositive suivante, vous
trouverez le rendu final de la
réservation.

47. Étape 2 : Créer une réservation express pour
une chambre/meublé

48. Étape 3 : Exporter mes agendas chambre/meublé
pour intégration dans mon site Internet
Vous allez pouvoir exporter vos agendas dans votre site Internet sans afficher le
détail des réservations, précisant juste à l'internaute si à telle date, la
chambre jaune est occupée.
Avec ce genre de pratique, vous allez voir réduire le nombre d'emails de demandes
de disponibilité. Ici, plus besoin d'emails, l'internaute a la réponse sous les
yeux et même si vous ne proposez pas de réservation en ligne, vous avez fait le
principal !!! Alors voyons comment cela se passe.
Vous allez cliquer sur la petite flèche de votre première chambre listée dans le
bloc "Mes agendas", vous découvrez le lien "Paramètres de l'agenda".

49. Étape 3 : Exporter mes agendas chambre/meublé
pour intégration dans mon site Internet
Cliquez sur la flèche puis ensuite sur
“Paramètres”.
Vous trouverez une copie d’écran de la
page qui s’ouvre sur la diapo suivante.

50. Étape 3 : Exporter mes agendas chambre/meublé
pour intégration dans mon site Internet
Une fenêtre s'ouvre et
vous permet de modifier
les paramètres de cet
agenda. Nous allons
maintenant voir comment
personnaliser l’
intégration de votre
élément en cliquant sur
“Personnaliser la couleur,
la taille et d’autres
options” dans l’encadré
rouge.

51. Étape 3 : Exporter mes agendas chambre/meublé
pour intégration dans mon site Internet
Vous voici dans l'espace de personnalisation. Vous allez pouvoir:
> Donner un titre global à votre module Agenda qui sera exporté. Ici, j'ai mis
"Disponibilités Gîte du Figuier". Ensuite, libre à vous de cocher ou décocher les
éléments à afficher pour naviguer dans vos plannings de disponibilités.
******
L'astuce, en rouge dans la capture:
Remplacer la largeur en pixel pré-paramétrée par une valeur relative:
ici 100%. Cela veut dire qu'une fois intégré dans votre page web, ce
module Agenda prendra 100% de la largeur disponible dans votre page.
C'est parfaitement intégré ainsi.
Faites également commencer la semaine un lundi, ce sera mieux pour voir
les disponibilités du week-end.

52. Étape 3 : Exporter mes agendas chambre/meublé
pour intégration dans mon site Internet

53. Étape 3 : Exporter mes agendas chambre/meublé
pour intégration dans mon site Internet
En bas à gauche de cette page de
personnalisation, vous allez pouvoir choisir
les agendas à afficher dans votre page Web.
Libre à vous de choisir une seule chambre si
dans votre site, votre planning est affiché
dans une page de détail de la chambre jaune par
exemple. Sinon, une page Disponibilités fera
l'affaire, alors, nous cocherons toutes les
chambres.

54. Étape 3 : Exporter mes agendas chambre/meublé
pour intégration dans mon site Internet
Vous avez terminé la personnalisation de votre agenda à exporter, il est temps
maintenant de remonter tout en haut de la page et de copier-coller le code HTML
que nous allons maintenant intégrer sur votre site Internet.

55. Étape 4 : Intégration dans mon site Internet,
exemple avec un site Jimdo
Vous avez différentes manières
d'accéder à l'administration de votre
site Internet, parfois, vous ne le
pourrez pas, c'est votre prestataire
qui fera cette dernière étape. Pour
faciliter la démonstration, j'utilise
un site réalisé avec Jimdo. Je vais
donc aller sur une page
"Disponibilités" et y ajouter un nouvel
élément de contenu Jimdo, je choisis :
WIDGET/HTML.

56. Étape 4 : Intégration dans mon site Internet,
exemple avec un site Jimdo
Je viens alors coller mon code html toujours en mémoire depuis que je
l'ai copié sur ma page de personnalisation Google Agenda.

57. INSÉRER UN WIDGET FACEBOOK
SUR SON SITE INTERNET
INSÉRER UN WIDGET MÉTÉO
SUR MON SITE INTERNET

58. INSÉRER UN WIDGET MÉTÉO
SUR MON SITE INTERNET
Code HTML à copier dans votre site internet:
<iframe src="http://modules.meteorem.com/ws/?module=y9zc28rJ4dfoi7Tc0trh4ZSkmw==" width="320&quot;" height="300"></iframe>
L’Office de Tourisme Rochefort Océan propose
la mise en place d'un WebServices Météo sur
vos sites internet via Météorem, fournisseur
de services météorologique.
Sur votre site, prévoir un espace adapté.
Car si vous réduisez la taille du widget, il
n’apparaît pas en entier.

59. INSÉRER UN WIDGET TRIPADVISOR SUR MON
SITE INTERNET
Condition: votre établissement est référencé sur TripAdvisor et
vous êtes propriétaires de votre fiche.

60. INSÉRER UN WIDGET TRIPADVISOR SUR MON
SITE INTERNET
Connectez-vous sur le site de Tripadvisor: www.tripadvisor.com et
connectez-vous à votre compte

61. INSÉRER UN WIDGET TRIPADVISOR SUR MON
SITE INTERNET

62. INSÉRER UN WIDGET TRIPADVISOR SUR MON
SITE INTERNET

63. INSÉRER UN WIDGET TRIPADVISOR SUR MON
SITE INTERNET
Cliquez sur “Outils Marketing Gratuits”

64. INSÉRER UN WIDGET TRIPADVISOR SUR MON
SITE INTERNET
Choisissez le visuel/widget que vous
souhaitez intégrer sur votre site
internet

65. INSÉRER UN WIDGET TRIPADVISOR SUR MON
SITE INTERNET
Personnalisez votre widget:
- Langue
- Taille
- Bordures
- Ombre
- Couleur
Au fur et à mesure de votre
personnalisation, vous avez
un aperçu de votre futur
widget

66. INSÉRER UN WIDGET TRIPADVISOR SUR MON
SITE INTERNET
Tout en bas de page, vous trouverez
le code HTML qu’il faudra copier et
coller dans l’une de vos pages
internet.
Vous pouvez également l’envoyer par
mail à la personne qui gère votre
site pour qu’elle fasse la
manipulation pour vous.

67. INSÉRER UN WIDGET TRIPADVISOR SUR MON
SITE INTERNET
Exemple du site internet de l’Office de Tourisme Rochefort Océan

68. INSÉRER UN WIDGET FACEBOOK
SUR SON MITE INTERNET
Condition: Vous avez créé une page Facebook pour votre
établissement.

69. INSÉRER UN WIDGET TRIPADVISOR SUR SON
SITE INTERNET
Connectez-vous sur Facebook: connectez-vous à votre compte.
INSÉRER UN WIDGET FACEBOOK SUR MON
SITE INTERNET

70. INSÉRER UN WIDGET FACEBOOK
SUR MON SITE INTERNET
Pour créer votre widget Facebook, cliquez sur le lien:
https://developers.facebook.com/docs/plugins/like
Cliquez ensuite sur DOCS et MODULES SOCIAUX
(voir page suivante)

71. INSÉRER UN WIDGET FACEBOOK
SUR MON SITE INTERNET
1 2
3

72. INSÉRER UN WIDGET FACEBOOK
SUR MON SITE INTERNET
Descendez sur la page et
sélectionnez:
LIKE BOX

73. INSÉRER UN WIDGET FACEBOOK
SUR MON SITE INTERNET
1. Copiez l’adresse de votre page Facebook dans “FACEBOOK PAGE URL”
Si vous n’avez pas de page Facebook, vous pouvez intégrer celle de l’Office de
Tourisme !

74. INSÉRER UN WIDGET FACEBOOK
SUR MON SITE INTERNET
Personnalisez votre widget et voyez
le résultat en direct: le visuel du
widget change au fur et à mesure de
votre personnalisation.

75. INSÉRER UN WIDGET FACEBOOK
SUR MON SITE INTERNET
Une fois votre personnalisation
terminée, cliquez sur “GET
CODE”.

76. INSÉRER UN WIDGET FACEBOOK
SUR MON SITE INTERNET
La fenêtre ci-dessus s’ouvre.
Cliquez sur “IFRAME” pour obtenir votre code en format HTML.
Si vous avez créé votre site internet il faudra copier et coller
ce code dans l’une de vos pages internet.
Vous pouvez également l’envoyer par mail à la personne qui gère
votre site pour qu’elle fasse la manipulation pour vous.

77. INSÉRER UN WIDGET FACEBOOK SUR MON
SITE INTERNET
Il existe d’autres widgets Facebook à intégrer sur vos sites internet.
Vous les retrouvez en cliquant sous Modules sociaux:

78. INSÉRER UN WIDGET FACEBOOK SUR MON
SITE INTERNET
Bouton “J’aime pour le web”:
le visiteur va aimer votre page

79. INSÉRER UN WIDGET FACEBOOK SUR MON
SITE INTERNET
Bouton “Share Button”:
le visiteur partage votre page avec ses amis

80. INSÉRER UN WIDGET FACEBOOK SUR MON
SITE INTERNET
Bouton “Send Button”:
le visiteur envoie par mail l’info de votre page à des connaissances

81. INSÉRER UN WIDGET FACEBOOK
SUR MON SITE INTERNET
Exemple du site internet de l’Office de Tourisme Rochefort Océan

82. WISESTAMP
Pour cette partie, nous allons utilisé le navigateur
Google Chrome.

83. WISESTAMP
Rendez-vous sur la page: http://webapp.wisestamp.com/

84. WISESTAMP
Renseignez les champs sur la partie
gauche de l’écran.
Vous voyez en direct l’évolution de
votre signature au milieu de l’écran.

85. WISESTAMP
Vous pouvez personnaliser la couleur,
ajouter les liens vers vos réseaux
sociaux ...

86. WISESTAMP
Lorsque vous avez terminé votre
personnalisation, cliquez sur
“OK,I’M DONE”

87. WISESTAMP
La fenêtre ci-dessous va s’ouvrir, cliquez sur
“AJOUTER”.

88. WISESTAMP
Choisissez le service de messagerie que vous
utilisez:

89. WISESTAMP
Créez un compte pour activer votre signature.

90. WISESTAMP
Collez votre signature Wisestamp dans la signature de votre service de messagerie.
Supprimez l’extension dans les paramètres du navigateur.

91. WISESTAMP
Exemple de signature de l’Office de Tourisme:

92. CALAMÉO
Calaméo vous permet de publier tout type de document (word,
powerpoint, pdf..) sur votre site internet.
De nombreux outils de personnalisation sont à votre disposition
pour présenter vos documents de manière originale et pratique.
Permet de connaître le nombre de téléchargements de la brochure
et d’alléger votre site internet.

93. CALAMÉO
Connectez-vous sur le site de Calaméo et créez un compte:

94. CALAMÉO
Cliquez sur “PUBLIER” pour intégrer vos brochures

95. CALAMÉO

96. CALAMÉO
Et personnalisez votre publication. Dans l’onglet “GÉNÉRAL”

97. CALAMÉO
Et personnalisez votre publication. Dans l’onglet “PARTAGE”

98. CALAMÉO
Et personnalisez votre publication. Dans l’onglet “PARTAGE”

99. CALAMÉO
Une fois la personnalisation
terminée, cliquez sur
“PUBLIER”
Cliquez sur la flèche
puis
Cliquez sur intégrer

100. CALAMÉO
Pour intégrer votre publication sur
votre site internet:
* copiez le code (en bas) et
collez-le dans votre site internet
* ou envoyez-le à votre prestataire
informatique.

101. PICMONKEY

102. MERCI
CONTACTS

103. NOS PROCHAINS RENDEZ-VOUS
En 2015:
❏ Pause numérique “Internet de séjour”: mardi 27 janvier à 14h30
❏ Journée Conférence “RDV en Terre Numérique”: lundi 2 février
❏ Atelier - Les sites d’avis: mardi 10 février à 9h ou jeudi 12 février à 14h
❏ Pause numérique “Le Monde Google”: mardi Mardi 17 février à 14h30
❏ Atelier - Audit de site: mardi 10 mars à 9h ou jeudi 12 mars à 14h
❏ Atelier - Photos et images: bases et outils: mardi 17 mars à 9h ou jeudi 19
mars à 14h

104. animation.numerique@rochefort-ocean.com
sandrine.bouron@rochefort-ocean.com
CONTACTS