Tutoriel comment créer site web avec Jimdo

4,264 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,264
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
95
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Tutoriel comment créer site web avec Jimdo

  1. 1. LES ATELIERS NUMÉRIQUES Atelier n° 2Comment créer soi-même un site web avec 1
  2. 2. Un site internet, pourquoi ? 2 88 % DES FRANÇAIS UTILISENT INTERNET POUR PRÉPARER LEURS VACANCES. 82% des touristes comparent les prix sur internet 1 personne sur 2 utilise internet pour se renseigner sur son lieu de vacances à travers:  les photos (56 %)  les avis laissés par les voyageurs (51 %)Source: www.etourisme.infohttp://www.quotidiendutourisme.com
  3. 3. Les 5 règles d’or de la rédaction Web 3 1. Hiérarchisez vos sites et paragraphes en F 1. Une grande idée par paragraphe 1. Illustrez vos propos 1. Utilisez la ponctuation 1. Utilisez des boutons de partageSource:http://blog.useweb.fr/2012/01/10/les-5-regles-dor-de-la-redaction-web/
  4. 4. Jimdo: qu’est-ce que c’est ? 4Jimdo est un « système de gestion de contenus », aussi appeléCMS (Content Management System). C’est un système qui vouspermet de créer et gérer un site internet.
  5. 5. Mise en pratique avec Jimdo. Pourquoi Jimdo ? 5
  6. 6. Les avantages de Jimdo 6 Pas besoin de télécharger de logiciel: tout se fait en ligne. Accessible depuis nimporte quel ordinateur. Version gratuite pour démarrer Version gratuite (ou version professionnelle payante) Une grande choix de designs Très simple, même sans connaissance informatique Un bon référencement naturel Version mobile
  7. 7. Etape 1: S’inscrire sur Jimdo 71. Rendez-vous sur: http://fr.jimdo.com/2. Choisissez votre nom de domaine (le nom de votre site web), en version gratuite il terminera par .jimdo.com, pour utiliser votre nom de domaine il faudra une version payante Inscrivez votre e-mail, vous y recevrez la confirmation de la création de votre site web et un mot de passe provisoire Acceptez les conditions Cliquez sur « créer mon site gratuit »
  8. 8. Comment choisir son nom de domaine ? 8Si vous n´avez pas encore de nom de domaine personnel. Voici quelques conseils pour trouver unnom qui vous convient :Choisissez un nom pas trop court ni trop long qui doit refléter votre activité principale.Faites en sorte qu´il soit facile à retenir spontanément par vos visiteursN´hésitez pas à utiliser des "-" afin d´éviter une succession de mots les uns à la suite des autres.Les accents, points, tirets bas ou autres signes originaux ne peuvent pas être contenus dans un nomde domaine Jimdo.Comment savoir si le domaine est libre ou non ? Avant de commander le domaine, il est aussi essentiel de vérifier que ce dernier soit disponible (et non déjàsous la propriété de quelqu´un). Pour cela, utiliser un site annuaire comme http://whois.domaintools.com/ ouhttp://www.netissime.com/ .1. Sur ce site, tapez le nom du domaine souhaité.2. Si le nom souhaité est bien libre, vous pouvez le commander chez Jimdo.Attention ! Plus rien n´est à faire sur ce site, car vous risquez de commander le domaine non paschez Jimdo mais chez un autre hébergeur. Source: http://fr.jimdo.com
  9. 9. Si j’ai déjà un nom de domaine ? 9Si vous avez déjà l’hébergement et le nom de domaine et vous souhaitez faireune refonte du site sur Jimdo.Avec Jimdo, on peut lier des noms de domaines achetés ailleurs avec un pack JimdoPro ouJimdoBusiness (versions payantes).Rendez-vous ici:http://aide.jimdo.com/nom-de-domaine/enregistrement/gestion-des-noms-de-domaineUn domaine existant (donc vous êtes déjà propriétaire)Dans ce cas, le message suivant saffichera :Ce lien vous permet de paramétrer la méthode de connexion de ce nom de domaine avec votresite Jimdo.
  10. 10. Etape 1: S’inscrire sur Jimdo 10 Mail de la part de Jimdo Votre site est maintenant en ligne Récupérez votre mot de passe provisoire dans votre messagerie. Celui-ci va vous permettre d’accéder à l’interface d’administration de votre site. Accédez à votre site en cliquant sur le lien dans le mail.
  11. 11. Etape 2: 11MON SITE EST EN LIGNE: la personnalisation
  12. 12. La personnalisation 12 Accédez à l’interface de l’administration de Jimdo en cliquant sur le lien « connexion » en bas à droite du site.
  13. 13. La personnalisation 13 BARRE La composition d’une page Jimdo D’ADMINISTRATIONLE HEADER(en-tête de votre site) MENU DENAVIGATION CORPS DE SITE (contenu de chaque page) BARRE LATERALE (reste identique sur toutes les pages) FOOTER (pied de Afficher vos page) modificatons en temps réel
  14. 14. Modifier l’en-tête 14Passez la sourissur l’en-tête et cliquez sur « modifier header ».
  15. 15. Modifier l’en-tête 15 LE MENU DU HEADEROnglets: « Galerie » : vous pouvez sélectionner une image parmi la collection d’images Jimdo « Image personnelle » : vous pouvez télécharger votre propre imageIl est vivement conseillé d’insérer une image personnelle représentant votre activité. La taille vous estprécisée. « Motif »: à utiliser quand vous ne souhaitez pas mettre de photo dans le bandeau « Modifier le header » : pour changer la hauteur et la taille du bandeau « Titre » : Pour changer le nom de votre site
  16. 16. 1 Construction site web: Arborescence 6 CRÉEZ L’ARBORESCENCE DE VOTRE SITEComment voulez-vous structurer votre site ? Quels éléments doivent apparaître ?L’information essentielle en premier. Mais ceci reste toujours modifiable ! Passez votre souris sur « modifier navigation » et cliquez dessus
  17. 17. 1 Construction site web: Arborescence 7 CRÉEZ L’ARBORESCENCE DE VOTRE SITE La navigation est le «menu» devotre site internet. C’est lendroit Menuoù seront listées toutes vos pages. principalIl y a 3 niveaux de pages:le menu principal, le sous-rubrique Sous rubriqueset les articles simples.Déplacez simplement votre souris Articles simplessur le champ de la navigation etcliquez sur «modifier navigation».Lorsque vous aurez terminé vosmodifications, n’oubliez pas decliquer sur le bouton "Enregistrer",de manière à ce que lesmodifications deviennent visiblespour vos visiteurs !
  18. 18. 1Construction site web: Arborescence 8 CRÉEZ L’ARBORESCENCE DE VOTRE SITEDéplacer les pages Menudans l’arborescence principalChanger les pages de Sous rubriquesniveau dans l’arborescenceAjouter une nouvelle Articles simplespageSupprimer une page Après modification, cliquez sur « enregistrer » etCacher une page puis sur « fermer »
  19. 19. La barre d’administration Jimdo 19DESIGN: permet de modifier la forme et la structure de votre site Jimdo, sa mise en page... Laplace des éléments (barre de navigation, sidebar), la taille et la forme de len-tête varient parexemple selon le design choisi.STYLE: vous pouvez gérer la mise en forme de la police des textes, des titres ou des liens enquelques clics. Ce style sera adopté dans toutes les pages du site.BLOG (si vous activez cette fonction): bâtissez votre propre Blog pour garder vos visiteursinformés des nouveautés relatives à votre activité. Publiez des articles, laissez les visiteurs lescommenter, modifiez le style des titres et dates... tout est possible !ACHETER: permet de passer aux versions supérieurs de JimdoPARAMETRES: pour gérer toutes les foncions importantes de votre site (nom de domaine,référencement, mot de passe, etc.)SEO (Search Engine Optimisation): permet l`optimisation (avec un titre, un descriptif et des mots-clés) du référencement de votre site Jimdo pour les moteurs de recherche.STATISTIQUES: permettent détudier sérieusement le comportement des visiteurs, la fréquencedes visites, le nombre de pages consultées, les pages préférées sur une période donnée. Pourdes statistiques plus détaillées, utilisez Google AnalyticsAIDE: une zone regroupant les principales rubriques daide chez Jimdo, le forum Jimdo, unformulaire pour nous envoyer un message et un regroupement des news Jimdo.
  20. 20. Ajouter du CONTENU 20Un élément/contenu estun module que vousajoutez à votre site : unchamp de texte, unegalerie d’images, un titrede rubrique, un tableau,etc.Les éléments peuvent êtreajoutés de deux façons : encliquant sur le signe "+ " oubien en cliquant sur "+Ajouter nouvel élément".Dans les deux cas, unefenêtre souvreimmédiatement avec unaperçu de tous leséléments à votredisposition.
  21. 21. Ajouter du CONTENU 21 Pour bien organiser votre page Colonnes: En cliquant sur cet outil deux colonnes apparaissent, mais vous avez la possibilité den ajouter jusquà six en cliquant en bas à droit sur le signe "+". Chaque colonne s’utilise comme une page dans la page. Tableau: Le tableau vous permet de structurer votre contenu facilement et de présenter de façon claire des informations à vos visiteurs. Espacement: permet de créer une espace entre deux éléments. Séparation: Avec un trait de séparation, vous pouvez disposer vos informations de manière plus claire et structurée.
  22. 22. Ajouter du CONTENU 22 Pour ajouter du texte Titre: Afin de donner un rapide aperçu de votre contenu à vos visiteurs, vous pouvez créer trois niveaux de titre différents. Cela est particulièrement utile dans de très longs textes et vous permet de structurer votre contenu. Les numéros indiquent un ordre de priorité. Un "Titre 1" sera aussi considéré comme plus important qu´un "Titre 2" par les moteurs de recherche. Texte / Texte avec image : s’utilise de la même façon que les logiciels traitement de texte comme Word.
  23. 23. Ajouter du CONTENU 23 Pour ajouter des images La galerie d’images vous permet d’intégrer plusieurs photos dans un même bloc. Vous pouvez choisir le format en HTML ou bien en format flash. Galerie flash fait défiler un diaporama (paramétrable) Galerie HTML présente une mosaïque de toutes vos images.
  24. 24. Ajouter du CONTENU 24 Pour utiliser les outils Jimdo Téléchargement: Avec l´élément "Téléchargement", vous pouvez proposer à vos visiteurs de télécharger facilement des fichiers sur votre site : images, documents Word, vidéos et musique. Formulaire: Vous pouvez insérer un formulaire de contact/de réservation où vous le souhaitez sur une page de votre site. Livre d’or: Pour permettre à vos visiteurs de laisser des commentaires sur votre site. Il est néanmoins conseillé de créer des liens vers les différents sites d’avis (Tripadvisor, Dismoioù, Zoover, Vinivi, etc.) Flux RSS: (Really Simple Syndication) est un format de description de données qui facilite la diffusion de fils dinformations, de façon automatisée, à lintention des internautes, et qui favorise la syndication de contenus en permettant à dautres sites de republier facilement tout ou partie de ces données. Sur votre site Jimdo, vous pouvez installer un module Flux RSS pour lire les fils dactivité RSS dautres sites.
  25. 25. Ajouter du CONTENU externe 25 L’outil Widget Un widget est un outil interactif intégré dans une page web et provenant d’une autre plate forme web. Avec cet onglet, vous pourrez intégrer : - des vidéos depuis youtube, animoto, dailymotion ou autre - des e-brochures depuis calaméo, - votre photothèque en ligne depuis picasa, flickr, panoramio… - La météo - Google Docs Dépôts d’avis Tripadvisor
  26. 26. Etape 2: 26INTÉGER DES WIDGETS
  27. 27. Intégrer un widget Météo 27Rendez-vous sur: http://www.my-meteo.fr Cliquez sur « Météo Webmaster »
  28. 28. Intégrer un widget Météo 28 Créez votre bloc météo personnalisé enchoisissant une ville, un format, les options etles couleurs. Vous voyez en temps réel à quoiressemblera votre widget sur votre site. N’oubliez pas d’accepter les conditions générales d’utilisation Puis générez le code HTML associé à vos paramètres et collez le et collez le dans l’élément Widget/HTML sur votre site.
  29. 29. Intégrer une vidéo 29Rendez-vous sur: http://www.google.frConnectez vous à votre compte (ou créez votre compte).Cliquez sur Youtube
  30. 30. Intégrer une vidéo 30 Faites une recherche de vidéo avec l’aide de mots clés ou Cliquez sur ma chaîne pour les vidéos que vous avez mis en ligne
  31. 31. Intégrer une vidéo 31 Cliquez sur partager Puis cliquez sur intégrer, paramétrez la taille de la vidéo, copiez le code html généré et collez le dans l’élément Widget/htl dans votre site Jimdo
  32. 32. Intégrer une carte Google Maps 32 Rendez-vous sur www.google.fr Connectez-vous à votre compte ou créez en un Cliquez sur Maps
  33. 33. Intégrer une carte Google Maps 33 Cliquez sur « mes adresses » Puis cliquez sur « créer une carte »
  34. 34. Intégrer une carte Google Maps 34 Donnez un titre à votre carte et une description (facultatif) Cochez le statut « publique » Cliquez sur OK
  35. 35. Intégrer une carte Google Maps 35 Tapez le nom de votre établissement dans la barre recherche en haut pour le géolocaliser sur la carte  CAS 1: Vous avez une Google Adresse: Cliquez sur « ajouter à mes cartes » et sélectionnez la carte que vient d’être créée.
  36. 36. Intégrer une carte Google Maps 36 Tapez le nom de votre établissement dans la barre recherche en haut pour le géolocaliser sur la carte CAS 2:Vous n’avez pas de Google Adresse:• Cliquez sur modifier.• Prenez la repère bleue et faites la glisser jusqu’à l’endroit sur la carte où se trouve votre établissement.• Donnez un titre à votre repère• Cliquez sur ok.
  37. 37. Intégrer une carte Google Maps 37Maintenant que votre carte est créée, Ensuite, cliquez sur Personnaliser etcliquez sur le chainon de lien hypertexte. « prévisualiser la carte intégrée ».
  38. 38. Intégrer une carte Google Maps 38 Personnalisez votre carte : • La taille de votre widget • Le mode d’affichage • Le niveau du zoom Il est conseillé de faire 2 cartes, 1. Une à l’échelle de la France, 2. Une (plus zoomée) à l’échelle du territoire ou de la commune Copiez le code html généré Collez le code dans l’élément widget/html sur votre site Jimdo
  39. 39. Intégrer des boutons de partage des réseaux sociaux 39  Soit vous cliquez sur « partage » dans l’aperçu des contenus et vous choisissez les boutons que vous souhaitez intégrer. Soit vous vous rendez sur le site : www.addthis.com Connectez-vous (Sign in) avec votre compte Google, Facebook ou Twitter ou créez en un.
  40. 40. Intégrer des boutons de partage des réseaux sociaux 40 Cliquez sur « get the code » Vous sélectionnez le style de barre que vous souhaitez insérer sur votre site Copiez le code html généré et collez le sur l’élément widget/html sur votre site JimdoConseil:Collez ce widget dans labarre latérale de votre sitepour qu’il reste visible surtoutes les pages.
  41. 41. Créer et insérer un calendrier de disponibilités 41 Rendez-vous sur www.google.fr Connectez-vous à votre compte Google ou créez en un Cliquez sur Agenda
  42. 42. Créer et insérer un calendrier de disponibilités 42 Cliquez sur la flèche à droite de « mes agendas » Cliquez sur « créer un agenda »
  43. 43. Créer et insérer un calendrier de disponibilités 43 Donnez un nom à votre agenda (1 agenda par chambre) Description (facultatif) Lieu de votre établissement Cochez la case « rendre cet agenda public » Puis, cliquez sur « créer l’agenda »
  44. 44. Créer et insérer un calendrier de disponibilités 44 2) Choisissez « paramètres de l’agenda » 3) Personnalisez et créez votre widget, récupérez le code à coller dans votre site Jimdo1) Cliquez sur la flèche droite à côté du nom de votre agenda
  45. 45. Créer et insérer un calendrier de disponibilités 45 Personnalisez votre agenda:  Modifiez la taille  Choisissez le mode d’affichage  Choisissez les éléments d’affichage  Cochez les agendas que vous souhaitez insérer (1 widget par chambre ou 1 widget rassemblant tous les agendas des chambres)  Cliquez sur mettre à jour le code HTML et copiez le code HTML. Collez le ensuite dans l’élément widget/html sur votre site Jimdo
  46. 46. Fin de l’atelier 46Une communauté Jimdo est très dynamique sur le web et vous propose de nombreuxtutoriels pour aller encore plus loin avec votre site jimdo. Quelques liens utiles: http://realia.jimdo.com/ http://communautefrancophone.jimdo.com/
  47. 47. 47 Merci de votre attention !!Anouk Marchand MooldijkOffice de Tourisme de Duravelcontact@duravel-tourisme.comhttp://www.duravel-tourisme.com Toute l’info Etourisme sur le centre de ressources : www.tourisme-lot-ressources.com Rubrique Etourisme

×