CRÉER FACILEMENT SON SITE WEB ET EN TOUTE AUTONOMIE

Transcription

1 CRÉER FACILEMENT SON SITE WEB ET EN TOUTE AUTONOMIE MARDI 1 er AVRIL 2014 OFFICE DE TOURISME Maison du Patrimoine 2 rue de la Chapelle VERNET-LES-BAINS Tel : Contact e-tourisme : Emilie / eg.otvernet@orange.fr Groupe Facebook : : 1

2 LES FONDAMENTAUX DU WEB CONNEXION WIFI RESEAU : IKD OT VERNET LES BAINS Ouvrir une page Internet La page de connexion s affiche Enregistrer : UTILISATEUR : lrlquhl MOT DE PASSE : VERNET Cocher la case «veuillez cocher la case ci-contre.» Cliquer sur «se connecter» Ouvrir une nouvelle page Internet et naviguer. 2

3 Le programme de l atelier Et tour de table 3

4 Les Chiffres 72% des Français sont des internautes. 92 % de ces internautes se connectent quotidiennement (Source : TNS Sofres 2011) 78% des internautes français utilisent les réseaux sociaux (Source : 2 Factory Agency-2011) 80% des Français partis en vacances en 2012 ont préparé leur séjour sur le web (Source : Raffour Interactive) 45% des Français partis en vacances en 2012 ont réservé tout ou partie de leur séjour sur le web (Source : Raffour Interactive) Parmi ces e-touristes français partis en 2012, 64% possèdent un smartphone et 50% l ont déjà utilisé à des fins touristiques pendant leurs séjours. (Source : Raffour Interactive) 56% des internautes ont déjà noté ou déposé un avis (Source: FEVAD-Médiamétrie Juillet 2011) + de 66% des avis déposés sont positifs. 4

5 AVANT DE SE LANCER Les conseils Quelle est votre stratégie web? Un site web, mais pourquoi? Parce que tout le monde s y met? Pour être visible sur le web, il faut définir : - Vos objectifs - Vos moyens techniques, humains et financiers Vous pourrez ensuite réaliser un mini cahier des charges. 5

6 AVANT DE SE LANCER Les conseils Le cahier des charges : - Faites un audit de votre image sur internet - Etudiez votre concurrence pour vous différencier - Ciblez votre public et l offre à lui proposer - Quel référencement? - Politique d échanges de liens? - Outils de communication? - Stratégie web 2.0? 6

7 AVANT DE SE LANCER Les mots clés www: Abréviation de «World Wide Web», «toile d araignée mondiale» en français. Système mondial d interconnexion des informations diffusées sur : Arobas, le caractère qui symbolise Internet HTML : «Hyper Text Markup Langage». C est le langage universel permettant de créer des pages Internet HTTP : «Hyper TextTransfer Protocol». Il s agit du protocole du W.W.W qui rend les textes lisibles par un navigateur. URL : «Uniforme Ressources Locator». Description de l adresse d un ordinateur ou d un service sur Internet. Sur le web, l adresse suivante est une URL : Nom de domaine : se compose du nom d une marque et d une extension (.frou.com). C est une "adresse" qui permet de retrouver facilement un site Internet sans devoir apprendre par coeurdes séries de chiffres difficiles à mémoriser. Hébergeur : Un hébergeur web est une entité ayant pour vocation de mettre à disposition des internautes des sites web conçus et gérés par des tiers. Sa principale activité consiste à installer ses serveurs, à les sécuriser, à les tenir à jour en installant les mises à jour de sécurité pour éviter les attaques malveillantes, à les réparer en cas de panne, à y installer les technologies logicielles souhaitées par les clients ou qu'il souhaite leur offrir Homepage: Désigne la page par défaut d un site Web, celle qui s affiche lors de la première connexion. Moteur de recherche : C est un système de recherche qui scanne les pages d un site afin d en récupérer les mots qui serviront au classement des sites dans les pages de résultat de la recherche (ex : Google, bing, ) Serveur : Ordinateur qui fournit des services à d autres ordinateurs Login : nom qui permet d identifier un utilisateur qui se connecte sur ordinateur ou un site internet. Il est en principe associé àunmot de passe. Référencement : l ensemble des techniques permettant d être présent dans les résultats des moteurs de recherche et annuaires (référencement naturel et liens commerciaux). 7

8 AVANT DE SE LANCER LE NOM DE DOMAINE Définition: C est l adresse de votre site web. Il se compose du nom d une marque et d une extension (.frou.com). Il permet de retrouver facilement un site Internet sans devoir apprendre par coeur des séries de chiffres difficiles à mémoriser. Utilisation : Un site web qui possède son propre nom de domaine est beaucoup plus facile à mémoriser. Un nom de domaine bien choisi favorisera le bouche à oreille et permettra au site de gagner plus vite en popularité. Il donne une touche de professionnalisme et de crédibilité à un site web, et donne un sentiment de confiance. A ne pas faire : Choisir des noms trop compliqués, trop longs, et des caractères spéciaux difficiles à retenir ou expliquer. Le nom de domaine doit: Être prononçable Avec une signification (dans la mesure du possible) Être disponible Pour acheter et vérifier la disponibilité du nom de domaine : OVH ou GANDI sont les plus utilisés 8

9 AVANT DE SE LANCER La charte graphique de votre futur site web On appelle «charte graphique» le document synthétique récapitulant les règles de présentation des éléments graphiques d un site web, traduisant son identité visuelle. La charte graphique définit l habillement graphique de la page, notamment les tailles, couleurs et apparences des textes, images et boutons du site, ainsi que les positionnement relatif des objets dans la page. AVANT DE SE LANCER L arborescence de votre site web Avant de vous lancer dans la création d un site, pensez à noter les éléments que vous souhaitez faire apparaître, et surtout l ordre dans lequel vous voulez que l internaute les découvre. Cela peut ressembler à un arbre généalogique ou à une armoire, avec des tiroirs et des casiers. 9

10 AVANT DE SE LANCER Le coût Financier Mais aussi humain NE PAS ETRE VISIBLE SUR INTERNET C EST SE PASSER DE 88% DE LA POPULATION FRANCAISE 10

11 AVANT DE SE LANCER Le choix de l outil Besoin d un site original? Unique? Qui sorte de l ordinaire? Avec une charte graphique personnalisée? Vous n avez pas le temps? >> Un professionnel, un vrai, vous fera un design unique! Car, vous n êtes pas infographiste, ni webmaster, ni informaticien >> Vous ne ferez jamais mieux qu une agence web dont c est le métier. 11

12 AVANT DE SE LANCER Le choix de l outil J ai des compétences et je maîtrise! Les outils intéressants: Wordpress, Joomla, Drupal, Spip,. 12

13 AVANT DE SE LANCER Le choix de l outil J ai des compétences en développement WEB! DREAMWEAVER 13

14 AVANT DE SE LANCER Le choix de l outil Je ne maîtrise pas mais j ai quelques notions. J ai peu de compétences sur le sujet. Jimdo: Notre choix!, moins cher, simple et efficace! Sinon : Weebly ou Mywebsite.1and1.fr 14

15 Pourquoi JIMDO? Simple et efficace : Vous savez rédiger un document avec word? Vous saurez utiliser Jimdo! Pas besoin de compétences techniques dans le langage html. Vous en avez? Vous irez encore plus loin! Coût très abordable, il peut même rester totalement gratuit La version gratuite avec de nombreuses fonctions vous permet d apprécier et d apprivoiser l outil. Vous êtes 100% autonome, pour la création comme pour les mises à jour. Accès full-web : pas besoin d installer un logiciel. Votre site est accessible où que vous soyez! Nombre de pages illimitées contrairement à d autres outils. Fonction référencement accessible à tous sans aucune connaissance technique Fonction blog et boutique (mentions légales) Version optimisée pour smartphone générée automatiquement. Un support technique (pour la version pro) et une communauté active sur le web pour vous aider. 15

16 Présentation de Jimdo 16

17 Des exemples de sites web Sites réalisés par des prestataires en autonomie. 17

18 Des fonctionnalités et services à tous les prix Toutes les fonctions. 18

19 C est parti! Choisissez une URL pour votre site web Enregistrez votre adresse mail Choisissez un mot de passe Vous recevrez très rapidement le lien vers votre nouveau site web 19

20 C est parti! 20

21 1. Choisissez le design de votre site web 21

22 2. Choisissez le style de votre site web 22

23 3. Modifiez le titre de votre site web Choix du fond du header dans une galerie, ou ajout d une image perso, ou d un motif Titre du header Hauteur du header 23

24 4. Créez votre arborescence Passez votre souris sur «accueil», le bloc «modifier navigation» apparaitra. Ajoutez maintenant des pages (onglets), modifiez les titres de chacune. N oubliez pas d enregistrer vos modifications. 24

25 4. Créez votre arborescence 25

26 5. Ajoutez du contenu Passez votre souris sur un élément (exemple le titre), puis glissez votre souris sur le + pour ajouter du contenu. Les flèches vers le haut ou le bas permettent de déplacer un élément La poubelle permet de supprimer un élément Les 2 feuilles permettent de dupliquer un élément Le + permet d ajouter un élément 26

27 6. Ajoutez des éléments 27

28 6. Ajoutez des éléments 28

29 6. Ajoutez des éléments 29

30 6. Ajoutez des éléments 30

31 6. Ajoutez des éléments 31

32 6. Ajoutez des éléments Facebook 1. Cliquer sur le «+» : ajouter un élément 2. Sélectionner Facebook 3. 2 choix : le bouton j aime (indique le nombre de personnes qui aime ce site web) ou la like box (indique le nombre de personnes fans de votre page Facebook) 4. Si vous choisissez la «like box», modifiez l URL de la page FB à aimer. 5. Si vous voulez faire apparaître les photos de vos fans, cliquez aussi sur Profil 6. Et enregistrer Bouton j aime Like box 32

33 6. Ajoutez des éléments 33

34 6. Ajoutez des éléments externes Galerie Flickr Pré requi: être inscrit et avoir créé des albums 1. Ouvrir la première photo de l album sélectionné 2. Cliquer sur les trois petits points blancs en bas à droite de la photo 3. Cliquer sur «afficher le diaporama» 4. Cliquer sur Partager (en haut à droite) 5. Copier le code html incorporé 6. Retourner sur Jimdo 7. Insérer l élément «code html» 8. Coller le code flickr 34

35 6. Ajoutez des éléments externes Widget Tripadvisor Pré requi: être inscrit 1. Se connecter 2. Cliquer sur votre établissement 3. Cliquer sur «outils marketing gratuits» 4. Choisir le widget 5. Copier le code html 6. Retourner sur Jimdo 7. Insérer l élément «code html» 8. Coller le code tripadvisor 35

36 6. Ajoutez des éléments externes Widget Google+ Pré requi: être inscrit sur Google+ et administrez sa page 1. Se connecter 2. Cliquer la photo en haut à droite de votre structure 3. Cliquer sur Paramétrage de la page 4. Cliquer sur «pour votre site» 5. En bas de la page, sélectionnez le plug-in que vous souhaitez 6. Modifier le si besoins (peut être la largeur width) 7. Copier le code html 8. Retourner sur Jimdo 9. Insérer l élément «code html» 10. Coller le code Google+ 36

37 6. Ajoutez des éléments externes Widget Météo 1. Aller sur 2. Sur la colonne la plus à droite, en bas, cliquer sur «widget météo» 3. Mettez en forme votre widget (couleur, ville, nombre de jours de prévisions,.) 4. Accepter les conditions générales 5. Et cliquer sur «générer le code» 6. Copier le 7. Insérer l élément «code html» 8. Coller le code tamétéo 37

38 Résultat TADAM 38

39 Informations complémentaires Des mentions légales en bonne et due forme : Analyser la fréquentation de son site web avec Google Analytics Tout savoir sur le nom de domaine 39

40 J ai un problème Que faire? Le support technique de l outil : Le support technique pour un bon référencement de votre site: (référencement = SEO) La rubrique d aide de Jimdo: accueil LIENS UTILES :

41 Et après?... Déclarer votre nom de domaine aux moteurs de recherche :

42 Et après?... Pour plus d infos : Vous retrouverez ce tutoriel en ligne : sur notre groupe Facebook pour les professionnels du tourisme de la station: Sur un nouveau site web qui vous est dédié : 42