Présentation de l'Atelier Numérique de Territoire : Création d'un site web avec Jimdo (2014) en 3 étapes !

1. Création d’un site inter/et
Lundi 12 Mai 2014
Office de Tourisme -­‐ Pays de Gourdon
Atelier Numérique E-­‐tourisme

2. Ø On se présente … Petit tour de table
Ø « L’avant » site ! Ce qu’il faut savoir …
Ø La création en 3 étapes … Créez, Personnalisez, AdministOez
Aujourd’hui …
Alors c’est parRi !!!

3. Cathy MABOUT
Office de Tourisme Intercommunal du Pays de Gourdon,
Chargée de l’Animation Numérique de TerOitoire, et surRout
pas webmaster, communitX manager, spécialiste du
référencement, …
ANT : ???
Qui
suis-­‐je
?
L’Anima0on
Numérique
de
Territoire
c’est
…
Une nouvelle mission pour les Offices de Tourisme : accompag/er les
professionnels du Tourisme dans le E-­‐tourisme
Pe0t
tour
de
table
…
Qui êtes vous ?
Où en êtes vous de votOe site web ?
ANT
:
en
anglais
ça
veut
dire
Fourmi
!

4. Je vous présente … nos P’tits Sites « Jimdo » !
h"p://medievalesdegourdon.jimdo.com/
h"p://fes8valhappydaysgospel.jimdo.com/

5. Site basé sur la rédaction rég`lière d’arRicles d’act`alités,
billets d’humeur, interactivité avec les lecteurs …
Blog ou Site Inter/et ?
Blog
Le site procure beaucoup plus de liberRé dans l’organisation
des r`briques et des pages (un menu et des sous-­‐menus). Il y
a une réelle hiérarchisation de votOe inforeation
Site
Internet
Nous, aujourd’hui, on s’occupe de créer un Site Inter/et !!!

6. Avant de parler « Technique », il faut parler de contenus et de cibles !
• À qui votOe site s’adresse,
• Pour répondre à quels besoins,
• Avec quels outils et quels contenus ?
• Quelle image je veux véhiculer ?
• Qu’est ce que je vais meiOe dedans ?
• Que font mes concurOents ?
Avant de commencer …
Se
poser
les
bonnes
ques0ons
!

7. La Méthode …
ü Essayer de hiérarchiser vos infos
ü Lister tous vos contenus
ü Les RegOouper en catégories
ü Les StO`ct`rer
Un stXlo et un bloc note :

8. Exemples d’arborescences pour sites touristiques
L’Arborescence …
C’est l’arRiculation des différentes pages entOe elles
C’est une étape imporRante mais toujours modifiable

9. Aujourd’hui …
Créer un site inter/et
facilement

10. Jimdo ? Mais c’est quoi …
Jimdo pereet de créer et d'administOer un site web tOès facilement
Les avantages :
-­‐ Pas besoin de télécharger de logiciel: tout se fait en lig/e. Accessible depuis n'imporRe
quel ordinateur.
-­‐ Pas besoin de connaîtOe des langages inforeatiques.
-­‐ Plateforee int`itive d'utilisation, même pour les débutants
-­‐ Nombre de page illimité
-­‐ Un bon référencement nat`rel
-­‐ Une version « Mobile » générée automatiquement
-­‐ Version gOat`ite et version professionnelle payante (5€/mois)

11. Des versions Pro, aussi …

12. Des versions Pro, aussi …
Jimdo2FREE2
Gratuit2
12nom2de2domaine2
Réféncement2
Jimdo2PRO2
60 2/2an2
12nom2de2domaine2
12email2pro2
Statistiques22
Jimdo2BUSINESS2
1802 2/2an2
22noms2de2domaine2
+2de2mémoire2
EJboutique2illimitée2

13. Les étapes …

14. VotOe Nom de Domaine …
Vérifier
la
disponibilité
du
Nom
de
Domaine
souhaité
A"en8on
aux
mots
trop
concurren8els
U8liser
des
mots
clés,
faciles
à
retenir
et
qui
décrivent
au
mieux
votre
ac8vité
et
qui
soient
a"rac8fs
Éviter
les
mots
compliqués
ou
difficiles
à
prononcer
Éviter
les
8rets

15. Vérifier votOe Nom de Domaine …
h"p://www.whois-­‐rayne"e.fr/

16. Le Contenu du site …
Ne
pas
faire
de
Copier-­‐Coller
de
textes
existants
!
Mauvais
pour
le
référencement.
Chaque
page
d’internet
doit
être
unique.
Me"re
des
liens
(internes
et
externes)
per8nents
sur
des
mots
clés
Répondre
à
des
ques8ons
types
:
Où,
quoi,
comment,
quand,
qui,
combien
Privilégier
les
textes
courts
qui
vont
directement
à
l’informa8on
principale
(15
mots/phrase)
Soigner
les
8tres
et
sous-­‐8tres,
ils
guident
les
internautes

17. On y va !!!
Rendez-­‐vous
sur
:
h"p://fr.jimdo.com/

18. Étape 1 : Créer un compte Rendez-­‐vous sur :
www.jimdo.com
Acceptez les conditions
Cliquez sur « Créer mon site
gOat`it »
Saisissez le nom de votOe site
Saisissez votOe adresse mail

19. Confireation & Accès au site
Lien vers votOe site
Relevez vos
mails
VotOe mot de passe
VotOe site est en
lig/e !
Il ne reste plus
qu’à le
personnaliser …

20. Voici la page
d’accueil de
votOe site.
Étape 2 : Connexion au site

21. Petite présentation …
Header : Bannière, Bandeau,
En tête du site
Menu de Navigation
BarOe latérale : est visible sur
toutes les pages. On pourOa
y meiOe différents modules
comme « La Météo
Balader la
souris sur la
page, sans
cliquer …

22. Personnalisation du « Header » !
Maintenant, on fait une p’tite BEAUTÉ à notOe site !!!

23. Personnalisation du Header !
Passez votOe souris sur la zone d’entête de votOe site,
puis cliquez sur
« Modifier le header »…

24. Personnalisation du Header
On clique sur « parcourir » pour
aller chercher notOe photo sur
notOe ordinateur

25. Motif :
InserRion de
motif
Personnalisation du Header
Modifier le
header :
changer la
taille : hauteur
et largeur
TitOe :
modification
du titOe
d’entête

26. StXle
Blog
Acheter
ParamètOes
SEO -­‐ Référencement
Stats (achat)
Aide
Desig/
Le Menu « AdministOation »

27. Onglet « Desig/ » -­‐ Mise en page

28. Onglet « Desig/ »

29. Onglet « StXle »
STYLE :
Ici on personnalise tout le contenu du site
Police
Couleur
Fond
TexR`re
…

30. Onglet « Blog »
Jimdo vous donne la possibilité d’insérer un « BLOG » à votOe site
inter/et !
Un BLOG doit êtOe alimenté quasi « QUOTIDIENNEMENT »
Tenir compte du temps que cela prend avant de meiOe en lig/e !

31. Onglet « Achat »

32. Onglet « ParamètOes »

33. Onglet « SEO »

34. C’est parRi ! Personnalisation du site
Navigation : Création du
Menu : ajout de pages
Zoom
Ne pas oublier d’enregistOer

35. Le Menu : les niveaux, la hiérarchisation
1er
niveau
du
menu
2nd
niveau
du
menu
3ème
niveau
du
menu
Ne
pas
oublier
d’enregistrer

36. Gérer vos pages, votOe menu
Ces
flèches
perme"ent
de
changer
l’ordre
des
pages
dans
le
menu
Ces
flèches
perme"ent
de
changer
le
niveau
des
pages
dans
le
menu
Ajouter
ou
supprimer
une
page
Masquer
une
page
ADen0on
!
La
suppression
d’une
page
est
irréversible
!
Donc
on
préfère
«
masquer
»
la
page.

37. Ajout d’un module : on a
beaucoup de choix !!!
Personnalisation du site
Ajout d’un TitOe dans une
page
Déplacer le module vers le
haut ou vers le bas
Supprimer le module
Ajouter un module
Dupliquer le module

38. Le contenu : présentation des outils
§ Une page de site Jimdo est composée d’une succession
d’éléments, de modules.
§ Chaque module est indépendant
§ A tout moment vous pouvez modifier, déplacer ou
supprimer un module dans la page
§ Tout module peut êtOe dupliqué. (La duplication d’une page
entière n’est disponible qu’en version pro)
§ Toutes les mises à jour se font instantanément dès que vous
cliquez sur « EnregistOer »
§ Pour ajouter du contenu dans une nouvelle page, cliquez
sur

39. Les outils de stO`ct`ration
Les colonnes sont un nouvel outil tOès pratique pour stO`ct`rer
la présentation de votOe page.
2 colonnes sont insérées par défaut mais vous pouvez ajouter
autant de colonnes que nécessaire.
Ensuite chaque colonne s’utilise et s’alimente comme une page
dans la page. Vous pouvez donc y ajouter autant d’éléments
que vous souhaitez.

40. Les outils de texRe
Les TitOes pereeient de stO`ct`rer votOe texRe (3 niveaux de titOes)
• visuellement pour l’inter/aute qui va le lire,
• techniquement pour les moteurs de recherche qui vont les
reconnaîtOe comme des éléments imporRants de la page
Le TexRe s’utilise de la même façon que les logiciels de tOaitement de
texRe tX{e Word.

41. ① Pour créer un lien, sélectionnez le texRe sur lequel vous souhaitez meiOe le lien
② cliquez sur le chaînon puis choisissez entOe
• lien inter/e (lien vers une autOe page de votOe site) ou
• lien exRer/e (lien vers un autOe site ou un e-­‐mail)
③ cliquez sur « Créer un lien »
* Création ou suppression de liens
Les outils de texRe
Alig/ement
du texRe
RetOait de
paragOaphe
Création ou
suppression
de liens *
Annule ou
restaure
l’action
TexRe Gras
ou Italique
InserRion
de puces ou
numéros
Couleur du
texRe
InserRion de texRe br`t ou suppression de
mise en foree (à utiliser impérativement
pour les « copier-­‐coller » !!!)
Pereet d’accéder au code
« htel » de votOe texRe

42. La Galerie d’Images
pereet tOès simplement
d’afficher une série de
photos : soit en mode
diaporama , soit en mode
vig/eies agOandissables
Les Images & Photos
« Image » et « TexRe avec Image » pereet tOès facilement l’inserRion d’une
photo dans votOe page ou un TexRe positionné par rapporR à une photo.
Vous pourOez gérer la taille de votOe image, sa position dans la page, la
rotation (si besoin), spécifier qu’elle soit agOandissable ou non, ajouter
un texRe alter/atif et meiOe un lien sur vos photos (t8ès impor:ant pour
chaque visuel !)
Pour
autoriser
le
partage
de
vos
photos
sur
Pinterest

43. Les outils « Jimdo »
« Téléchargement » o~e aux inter/autes la possibilité de télécharger des
documents, par exemple votOe dépliant d’appel, au foreat Pdf (foreat à
privilégier !)
« Le Livre d’Or » o~e aux inter/autes la possibilité de déposer leur avis
ou leur ex{érience sur votOe établissement. Cela ne remplace pas les liens
vers les différents sites d’avis existants : Tripadvisor, Dismoioù, Google, …
« Le Foreulaire » pereet la création d’un foreulaire de contact et/ou de
réser•ation
« Flux RSS » vous pereet de récupérer et d’intégOer à votOe site un flux
RSS issu d’un blog ou d’un autOe site inter/et

44. Comment
insérer
un
Flux
RSS
?
Exemple
:
" Copier
l’adresse
internet
" La
coller
dans
le
cadre
prévu
par
l’ou8l
Flux
RSS
de
Jimdo
" A
chaque
mise
à
jour,
l’informa8on
le
sera
automa8quement
sur
votre
site
Ce
symbole
n’apparaît
pas
dans
votre
navigateur
?
Pas
de
panique
!
Il
suffit
d’installer
l’extension
correspondante
Pour
Chrome
8ny.cc/rsschrome
Pour
Mozilla
Firefox
8ny.cc/rssmozilla
Les outils « Jimdo »

45. Les outils « Jimdo »
« ParRager » pour insérer les boutons de parRage – Cela pereet aux
inter/autes de parRager vos infos avec leurs amis sur leurs réseaux
sociaux.
« Facebook » Bouton « J’aime » avec ou sans compteur, pour que les
inter/autes sig/alent « qu’ils aiment » votOe contenu sur leur compte
Facebook
« Twiier » pour faire remonter le fil d’act` de votOe compte Twiier et
inciter les gens à vous suivre sur Twiier.
« Google + » Bouton « G+ » pour que les inter/autes sig/alent qu’ils
aiment votOe contenu sur le compte Google +

46. L’inserRion de contenus exRer/es
« Widget / HTML »
On utilisera de préférence cet outil pour intégOer à notOe site des
contenus hébergés par des plateforees telles Yout`be, DailyMotion,
Viméo, Flickr, Google, …
HTML : il faut simplement « copier-­‐coller » dans ce module, le code htel
de ce que vous souhaitez insérer dans votOe page.
Widget : Dans ce module, Jimdo vous en propose.
Exemples de widgets : Météo, Google Agenda, dépôt d’avis Tripadvisor,
Albums photos, Vidéos, …
Google Maps : CarRe « Google Maps » avec Calcul d’itinéraire du Client à
vous. Vous définissez votOe position, le client n’a plus qu’à définir la
sienne.

47. L’inserRion de contenus exRer/es
Widgets
(gadgets)
Google
:
h"p://www.google.fr/ig/directory?synd=open&hl=fr
Insérer
un
moteur
de
recherche
en
français
Tous
les
modules
mis
dans
le
panneau
latéral,
sont
reportés
sur
toutes
les
pages
de
votre
site.

48. Exemples d’inserRion de modules dans la barOe latérale :
ParRage Réseaux sociaux, Bouton « j’aime » ou Météo
InserRion dans la BarOe Latérale
On clique sur dans la barOe latérale

49. Rendez-­‐vous sur Yout`be.com
ou depuis Google cliquez sur YouTube
L’inserRion d’une vidéo « You Tube »

50. L’inserRion d’une vidéo « You Tube »
1 Cliquez sur « parRager »
2 Cliquez sur « IntégOer »
3 Ajuster la taille de la vidéo
4 Copiez le code HTML et collez le dans le cadre
du module « widget » sur votOe site Jimdo.
Cherchez la vidéo souhaitée
1
2
3
4

51. L’inserRion d’un Widget « Météo »
1
2
3
4
1 Rendez-­‐vous sur www.meteorama.… et saisir votOe commune à gauche
2 Cliquez sur « Météo gOat`it pour site » à droite
3 Suivre les étapes du paramétOage de votOe widget et voyez à quoi
il ressemble. Acceptez les conditions et cliquez sur « Générer le
code (en bas à gauche)
4 Copiez le code HTML et collez le dans le cadre du
module « widget » sur votOe site Jimdo.

52. Très pratique pour la gestion des disponibilités !
InserRion d’un Google Agenda !
cliquez sur « Agenda »
Depuis Google connectez vous à votOe
compte ou créez en un puis …

53. InserRion d’un Google Agenda !
Cliquez sur la flèche à droite de « Mes agendas »
puis sur « Créer un agenda »

54. InserRion d’un Google Agenda !
1 Nommez votOe agenda
2 Descriptif (facultatif)
3 Indiquez le lieu de votOe établissement
4 Cochez la case de publication
5 Cliquez sur « Créer l’agenda » pour tereiner

55. InserRion d’un Google Agenda !
Cliquez sur la flèche à droite de votOe agenda
Cliquez sur « ParamètOes de l’agenda »
Personnalisez votOe widget « Google agenda »

56. InserRion d’un Google Agenda !
Personnalisation de votOe Agenda :
• Modification de la taille
• Choix du mode d’affichage
• Choix des éléments d’affichage
• Cochez les agendas que vous souhaitez insérer (1 widget / chambre ou
1 widget pour tous les agendas)
• Cliquez sur « meiOe à jour le code htel », copiez le et collez le sur votOe
site Jimdo

57. Pour aller plus loin avec Jimdo !!!
Des mentions légales en bonne et due foree
hi{://www.subdelirium.com/generateur-­‐de-­‐mentions-­‐legales/
Analyser la …équentation de son site web avec Google AnalyRics
hi{://….jimdo.com/wiki/Google_AnalyRics
Créer un desig/ professionnel pour son site
hi{://….jimdo.com/outils/webdesig//
Trouver des bons t`yaux pour améliorer son site Jimdo
hi{://communaute…ancophone.jimdo.com/
hi{://realia.jimdo.com/
hi{://f`nnycat.jimdo.com/
Suivre l’act`alité du e-­‐tourisme
hi{://www.etourisme.info

58. Bandeau de l’OT
Merci de votre attention
Cathy Mabout
Office de Tourisme Intercommunal du Pays de Gourdon
Tel : 05 65 27 52 50
Mail : info@tourisme-­‐gourdon.com
Web : www.tourisme-­‐gourdon.com
Facebook : Pays de Gourdon Tourisme
Twiier : Gourdon Tourisme
Toute l’info Etourisme sur le centre de ressources :
www.tourisme-lot-ressources.com
Rubrique Etourisme
Office de Tourisme -­‐ Pays de Gourdon