Tutoriel comment créer site web avec Jimdo

of 47/47
LES ATELIERS NUMÉRIQUES Atelier n ° 2 Comment créer soi-même un site web avec
  • date post

    12-Jan-2015
  • Category

    Documents

  • view

    2.757
  • download

    2

Embed Size (px)

description

 

Transcript of Tutoriel comment créer site web avec Jimdo

  • 1. LES ATELIERS NUMRIQUESAtelier n 2Comment crer soi-mme un site webavec1

2. Un site internet, pourquoi ?288 % DES FRANAIS UTILISENT INTERNET POUR PRPARER LEURS VACANCES. 82% des touristes comparent les prix sur internet1 personne sur 2 utilise internet pour se renseigner sur son lieu de vacances travers: les photos (56 %) les avis laisss par les voyageurs (51 %)Source: www.etourisme.infohttp://www.quotidiendutourisme.com 3. Les 5 rgles dor de la rdaction Web 31. Hirarchisez vos sites et paragraphes en F 1. Une grande ide 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. Jimdo: quest-ce que cest ? 4Jimdo est un systme de gestion de contenus , aussi appelCMS (Content Management System). Cest un systme qui vouspermet de crer et grer un site internet. 5. Mise en pratique avec Jimdo. Pourquoi Jimdo ? 5 6. Les avantages de Jimdo 6 Pas besoin de tlcharger de logiciel: tout se fait en ligne. Accessible depuis nimporte quel ordinateur.Version gratuite pour dmarrerVersion gratuite (ou version professionnelle payante) Une grande choix de designs Trs simple, mme sans connaissance informatique Un bon rfrencement naturel Version mobile 7. Etape 1: Sinscrire sur Jimdo71. 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 payanteInscrivez votre e-mail, vous yrecevrez la confirmation de la cration de votre site web etun mot de passe provisoireAcceptez les conditionsCliquez sur crer mon site gratuit 8. Comment choisir son nom de domaine ?8Si vous navez 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 reflter votre activit principale.Faites en sorte quil soit facile retenir spontanment par vos visiteursNhsitez pas utiliser des "-" afin dviter 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 vrifier que ce dernier soit disponible (et non djsous la proprit de quelquun). 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 nest faire sur ce site, car vous risquez de commander le domaine non paschez Jimdo mais chez un autre hbergeur. Source: http://fr.jimdo.com 9. Si jai dj un nom de domaine ? 9Si vous avez dj lhbergement et le nom de domaine et vous souhaitez faireune refonte du site sur Jimdo.Avec Jimdo, on peut lier des noms de domaines achets 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 dj propritaire)Dans ce cas, le message suivant saffichera :Ce lien vous permet de paramtrer la mthode de connexion de ce nom de domaine avec votresite Jimdo. 10. Etape 1: Sinscrire sur Jimdo10 Mail de la part de Jimdo Votre site est maintenant en ligne Rcuprez votre mot de passeprovisoire dans votre messagerie.Celui-ci va vous permettre daccder linterface dadministration devotre site. Accdez votre site en cliquant surle lien dans le mail. 11. Etape 2:11MON SITE EST EN LIGNE: la personnalisation 12. La personnalisation12 Accdez linterface de ladministration de Jimdo encliquant sur le lien connexion en bas droite du site. 13. La personnalisation13 BARRE La composition dune page JimdoDADMINISTRATIONLE HEADER(en-tte de votre site) MENU DENAVIGATION CORPS DE SITE(contenu de chaque page) BARRE LATERALE (reste identique sur toutes les pages)FOOTER(pied deAfficher vos page) modificatons en temps rel 14. Modifier len-tte 14Passez la sourissur len-tte etcliquez sur modifier header . 15. Modifier len-tte 15 LE MENU DU HEADEROnglets: Galerie : vous pouvez slectionner une image parmi la collection dimages Jimdo Image personnelle : vous pouvez tlcharger votre propre imageIl est vivement conseill dinsrer une image personnelle reprsentant votre activit. La taille vous estprcise. 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. 1 Construction site web: Arborescence6 CREZ LARBORESCENCE DE VOTRE SITEComment voulez-vous structurer votre site ? Quels lments doivent apparatre ?Linformation essentielle en premier. Mais ceci reste toujours modifiable ! Passez votre souris sur modifier navigation et cliquez dessus 17. 1Construction site web: Arborescence 7 CREZ LARBORESCENCE DE VOTRE SITE La navigation est le menu devotre site internet. Cest lendroitMenuo seront listes toutes vos pages. principalIl y a 3 niveaux de pages:le menu principal, le sous-rubrique Sous rubriqueset les articles simples.Dplacez simplement votre sourisArticles simplessur le champ de la navigation etcliquez sur modifier navigation.Lorsque vous aurez termin vosmodifications, noubliez pas decliquer sur le bouton "Enregistrer",de manire ce que lesmodifications deviennent visiblespour vos visiteurs ! 18. 1Construction site web: Arborescence8CREZ LARBORESCENCE DE VOTRE SITEDplacer les pages Menudans larborescence principalChanger les pages de Sous rubriquesniveau dans larborescenceAjouter une nouvelle Articles simplespageSupprimer une page Aprs modification, cliquez sur enregistrer etCacher une page puis sur fermer 19. La barre dadministration Jimdo 19DESIGN: permet de modifier la forme et la structure de votre site Jimdo, sa mise en page... Laplace des lments (barre de navigation, sidebar), la taille et la forme de len-tte varient parexemple selon le design choisi.STYLE: vous pouvez grer 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): btissez votre propre Blog pour garder vos visiteursinforms des nouveauts 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 suprieurs de JimdoPARAMETRES: pour grer toutes les foncions importantes de votre site (nom de domaine,rfrencement, mot de passe, etc.)SEO (Search Engine Optimisation): permet l`optimisation (avec un titre, un descriptif et des mots-cls) du rfrencement de votre site Jimdo pour les moteurs de recherche.STATISTIQUES: permettent dtudier srieusement le comportement des visiteurs, la frquencedes visites, le nombre de pages consultes, les pages prfres sur une priode donne. Pourdes statistiques plus dtailles, 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. Ajouter du CONTENU 20Un lment/contenu estun module que vousajoutez votre site : unchamp de texte, unegalerie dimages, un titrede rubrique, un tableau,etc.Les lments peuvent treajouts de deux faons : encliquant sur le signe "+ " oubien en cliquant sur "+Ajouter nouvel lment".Dans les deux cas, unefentre souvreimmdiatement avec unaperu de tous leslments votredisposition. 21. Ajouter du CONTENU21 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 sutilise comme une page dans la page. Tableau: Le tableau vous permet de structurer votre contenu facilement et de prsenter de faon claire des informations vos visiteurs. Espacement: permet de crer une espace entre deux lments. Sparation: Avec un trait de sparation, vous pouvez disposer vos informations de manire plus claire et structure. 22. Ajouter du CONTENU22Pour ajouter du texte Titre: Afin de donner un rapide aperu de votre contenu vos visiteurs, vous pouvez crer trois niveaux de titre diffrents. Cela est particulirement utile dans de trs longs textes et vous permet de structurer votre contenu. Les numros indiquent un ordre de priorit. Un "Titre 1" sera aussi considr comme plus important quun "Titre 2" par les moteurs de recherche. Texte / Texte avec image : sutilise de la mme faon que les logiciels traitement de texte comme Word. 23. Ajouter du CONTENU23Pour ajouter des images La galerie dimages vous permet dintgrer plusieurs photos dans un mme bloc. Vous pouvez choisir le format en HTML ou bien en format flash. Galerie flash fait dfiler un diaporama (paramtrable) Galerie HTML prsente une mosaque de toutes vos images. 24. Ajouter du CONTENU 24Pour utiliser les outils JimdoTlchargement: Avec llment "Tlchargement", vous pouvez proposer vos visiteurs de tlcharger facilement des fichiers sur votre site : images, documents Word, vidos et musique. Formulaire: Vous pouvez insrer un formulaire de contact/de rservation o vous le souhaitez sur une page de votre site. Livre dor: Pour permettre vos visiteurs de laisser des commentaires sur votre site. Il est nanmoins conseill de crer des liens vers les diffrents sites davis (Tripadvisor, Dismoio, Zoover, Vinivi, etc.) Flux RSS: (Really Simple Syndication) est un format de description de donnes qui facilite la diffusion de fils dinformations, de faon automatise, lintention des internautes, et qui favorise la syndication de contenus en permettant dautres sites de republier facilement tout ou partie de ces donnes. Sur votre site Jimdo, vous pouvez installer un module Flux RSS pour lire les fils dactivit RSS dautres sites. 25. Ajouter du CONTENU externe 25Loutil Widget Un widget est un outil interactif intgr dans une page web et provenant dune autre plate forme web. Avec cet onglet, vous pourrez intgrer : - des vidos depuis youtube, animoto, dailymotion ou autre - des e-brochures depuis calamo, - votre photothque en ligne depuis picasa, flickr, panoramio - La mto - Google Docs Dpts davis Tripadvisor 26. Etape 2:26INTGER DES WIDGETS 27. Intgrer un widget Mto 27Rendez-vous sur: http://www.my-meteo.frCliquez sur Mto Webmaster 28. Intgrer un widget Mto28 Crez votre bloc mto personnalis enchoisissant une ville, un format, les options etles couleurs. Vous voyez en temps rel quoiressemblera votre widget sur votre site.Noubliez pasdaccepter les conditions gnrales dutilisation Puis gnrez le code HTML associ vos paramtres et collez le et collez le dans llment Widget/HTML sur votre site. 29. Intgrer une vido 29Rendez-vous sur: http://www.google.frConnectez vous votre compte (ou crez votre compte).Cliquez sur Youtube 30. Intgrer une vido30 Faites une recherche de vido avec laide de mots clsou Cliquez sur ma chane pour les vidos que vous avezmis en ligne 31. Intgrer une vido 31 Cliquez sur partager Puis cliquez sur intgrer, paramtrez la taillede la vido, copiez le code html gnr etcollez le dans llment Widget/htl dansvotre site Jimdo 32. Intgrer une carte Google Maps 32 Rendez-vous sur www.google.fr Connectez-vous votre compte ou crez en un Cliquez sur Maps 33. Intgrer une carte Google Maps 33 Cliquez sur mes adresses Puis cliquez sur crer une carte 34. Intgrer une carte Google Maps 34 Donnez un titre votre carte et unedescription (facultatif) Cochez le statut publique Cliquez sur OK 35. Intgrer une carte Google Maps 35 Tapez le nom de votre tablissement dansla barre recherche en haut pour legolocaliser sur la carte CAS 1: Vous avez une Google Adresse: Cliquez sur ajouter mes cartes et slectionnez la carte que vient dtre cre. 36. Intgrer une carte Google Maps 36 Tapez le nom de votre tablissementdans la barre recherche en haut pour legolocaliser sur la carte CAS 2:Vous navez pas de Google Adresse: Cliquez sur modifier. Prenez la repre bleue et faites la glisser jusqu lendroit sur la carte o se trouve votre tablissement. Donnez un titre votre repre Cliquez sur ok. 37. Intgrer une carte Google Maps 37Maintenant que votre carte est cre,Ensuite, cliquez sur Personnaliser etcliquez sur le chainon de lien hypertexte. prvisualiser la carte intgre . 38. Intgrer une carte Google Maps 38 Personnalisez votre carte : La taille de votre widget Le mode daffichage Le niveau du zoom Il est conseill de faire 2 cartes, 1. Une lchelle de la France, 2. Une (plus zoome) lchelle du territoire ou de la commune Copiez le code html gnr Collez le code dans llment widget/htmlsur votre site Jimdo 39. Intgrer des boutons de partage des rseaux sociaux 39 Soit vous cliquez sur partage dans laperu des contenus et vous choisissez les boutons que vous souhaitez intgrer. Soit vous vous rendez surle site : www.addthis.com Connectez-vous (Sign in)avec votre compteGoogle, Facebook ouTwitter ou crez en un. 40. Intgrer des boutons de partage des rseaux sociaux 40 Cliquez sur get the code Vous slectionnez le style debarre que vous souhaitezinsrer sur votre site Copiez le code html gnret collez le sur llmentwidget/html sur votre siteJimdoConseil:Collez ce widget dans labarre latrale de votre sitepour quil reste visible surtoutes les pages. 41. Crer et insrer un calendrier de disponibilits 41 Rendez-vous sur www.google.fr Connectez-vous votre compte Google ou crez en un Cliquez sur Agenda 42. Crer et insrer un calendrier de disponibilits 42 Cliquez sur la flche droite de mes agendas Cliquez sur crer un agenda 43. Crer et insrer un calendrier de disponibilits 43Donnez un nom votre agenda (1 agenda par chambre) Description (facultatif) Lieu de votre tablissement Cochez la case rendre cet agenda public Puis, cliquez sur crer lagenda 44. Crer et insrer un calendrier de disponibilits 442) Choisissez paramtres de lagenda 3) Personnalisez et crez votre widget, rcuprez le code coller dans votre site Jimdo1) Cliquez sur la flche droite ct du nom de votre agenda 45. Crer et insrer un calendrier de disponibilits 45Personnalisez votre agenda: Modifiez la taille Choisissez le mode daffichage Choisissez les lments daffichage Cochez les agendas que vous souhaitez insrer (1 widget par chambre ou 1 widget rassemblant tous les agendas des chambres) Cliquez sur mettre jour le code HTML et copiezle code HTML. Collez le ensuite dans llmentwidget/html sur votre site Jimdo 46. Fin de latelier 46Une communaut Jimdo est trs 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 Merci de votre attention !!Anouk Marchand MooldijkOffice de Tourisme de [email protected]://www.duravel-tourisme.com Toute linfo Etourisme sur le centre de ressources :www.tourisme-lot-ressources.com Rubrique Etourisme