44
MON PROJET WEB ATELIER 2

ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Embed Size (px)

Citation preview

Page 1: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

MON PROJET WEB

ATELIER 2

Page 2: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Créer votre site internet

Page 3: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Pourquoi Jimdo ?

Pas besoin de télécharger un logiciel : ordinateur et internet

Pas besoin d’être un expert en informatique

Facile et rapide d’utilisation

Autonome pour la création et la mise à jour

Nombre de pages illimité

Une version mobile créée automatiquement

Version gratuite ou professionnelle peu onéreuse

Page 4: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Etape 1 : s’inscrire

Pour créer un site avec Jimdo, rendez-vous sur https://fr.jimdo.com/

Page 5: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Etape 1 : s’inscrire

Page 6: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Quel genre : Site internet

Page 7: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Comment ?

Page 8: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Jimdo Dolphin

Page 9: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Jimdo Creator

Page 10: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Choisir son design

Page 11: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Les formules

Page 12: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Choisir son sous-domaine avec Jimdo

Page 13: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Vérifier la disponibilité du nom de domaine

C’est parti !

Page 14: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

De quoi est composé votre site

(= Arborescence)

(visible uniquement

en mode « modifier »)

Page 15: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Menu Jimdo

Design : choisir, modifier et paramétrer l’aspect général du site. E-boutique : Vente en ligne de produits mais attention, beaucoup sont dispo qu’en version pro Blog : Pour écrire et gérer la publication des articles de votre blog (si vous activez cette fonction) SEO : Optimisez votre site Internet pour les moteurs de recherche, afin d'attirer plus de visiteurs sur votre site. (seulement page d’accueil version

gratuite)

Domaines et E-mails : mon nom de domaine PARAMETRES : A vérifier dans le détail mais après une bonne prise en main du site Questions : L’assistance de Jimdo est très performante et simple d’utilisation.

Menu Permet de revenir au tableau de tous vos sites.

En cliquant sur votre nom vous

accèderez à votre profil qu’il faut

compléter

Page 16: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Votre site internet

Durée moyenne de visite d’un site : 30 à 60 secondes

Objectif : rallonger et faire durer ce temps de visite le + possible

Capter

l’attention Rassurer

&

Source : Jimdo

Page 17: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Mise en page

Imaginez que votre page d'accueil soit la couverture d'un magazine : elle doit donner envie à l'internaute de rester sur votre site et surtout lui donner une vision globale et claire des informations qu'il va pouvoir trouver sur vos pages.

Page 18: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Page d’accueil

Pour ce faire, évitez de créer une page d'accueil trop encombrée, qui donnera une impression de désordre et demandera un effort de concentration. Limitez-vous à : votre logo et nom d'entreprise avec votre slogan un minimum de texte : votre message doit rester clair une navigation simple : visible et intuitive quelques images (voire une seule) : pertinentes et de qualité.

Important : Votre page d'accueil est aussi la page vers laquelle vos visiteurs reviennent lorsqu'ils se perdent sur votre site. Nommez la clairement - "Accueil" ou "Bienvenue" : c’est un gain de temps et de simplicité pour vos visiteurs.

Page 19: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Menu de navigation

Le menu de navigation est un élément important pour retenir vos visiteurs sur vos pages. Réfléchissez à son emplacement : il est déterminant pour l'ergonomie de votre site. Autres conseils : Pas plus de 7 onglets de navigation sur votre page d'accueil qui soient intuitifs : qui appelleront naturellement à cliquer pour accéder aux infos ou sous-catégories.

Page 20: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Les textes

Le texte sur votre page d'accueil doit être concis, efficace et pertinent. Il doit résumer le but de votre site et éventuellement vous permettre de faire passer un message. Ce texte doit donc être : accueillant impactant dans le même ton que votre communication facilement lisible.

Ce n'est pas parce que votre zone principale de contenu est large qu'il faut la remplir de textes ! L'idéal est de rédiger des phrases d’une longueur de 40 – 60 caractères et d'utiliser beaucoup d'images, de colonnes et d'espacements afin de rendre votre présentation plus aérée et confortable à lire.

Conseil : aérer le texte, mettre les mots clés en gras

Page 21: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Bas de page et Sidebare

Votre sidebar ou bas de page est un espace à utiliser et à optimiser. Si ces zones sont visibles sur toutes les pages, c'est pour mettre en avant des informations utiles dès la page d'accueil et sur l'ensemble du site : boutons de partage , horaires, évènement à venir, adresse postale, email et numéro de téléphone, logos de partenaires ou paiement sécurisés etc...

Page 22: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Mettre en scène son contenu

Photos Une belle image pour un effet WAOUH !! (Fini les images pixélisées) Galerie et diaporama d’images Liens sur les images Vidéo Youtube, un simple lien qui fait toute la différence et renforce encore votre référencement naturel

Eviter tout ce qui flashouille, clignote et pique les yeux

Page 23: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Choisir un design

Header : filtrez nos modèles de designs en fonction de la zone dédiée au logo et/ou à la zone où votre titre de site apparaîtra. Navigation : élément-clé pour guider vos visiteurs dans l'exploration de votre site. Une navigation "standard" sera horizontale ou verticale. Vous pourrez aussi sélectionner des navigations dites breadcrumbs (il s'agit du fil d'Ariane permettant à vos visiteurs de mieux se repérer dans les différentes pages de votre site), des menus déroulants (dropdown) ou encore des menus s'ouvrant par clique (slide-in). Zone de contenu : déterminez si vous avez besoin d'une zone de contenu large ou étroit. Si vous cherchez par exemple à afficher de grandes photos, sélectionnez un modèle plus large. Les modèles plus étroits afficheront une barre latérale sur le côté gauche ou droit. Sidebar : vous pouvez choisir un design qui l'affichera à droite, à gauche ou en bas de page.

Page 24: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Le contenu du site

Les éléments que l’on doit trouver sur votre site Descriptif de votre activité Un texte général de présentation le “mot de bienvenue” Signez votre texte nom + prénom + photo de vous si vous le souhaitez. Cela permet d’humaniser votre site

Vous localiser

Formulaire de contact

Découvrir la région

Tarifs

Disponibilités

Météo

Avis clients

Page 25: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

La structure de votre site

La structuration de vos pages doit être logique afin que vos visiteurs trouvent facilement l’information qu’ils recherchent. Anticipez le comportement de vos visiteurs en leur offrant une expérience utilisateur agréable sur votre site Internet !

Cliquez sur “Modifier la navigation” : ce menu s’affiche lorsque votre souris passe sur un des éléments de la navigation déjà existante. C’est ici que vous pouvez modifier l’organisation des pages de votre site. Commencez par cette étape afin de créer la base votre structure

Page 26: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

L’arborescence

3 niveaux : menus, sous-menus, sous-sous menus

1er niveau de menu

2ème niveau de menu

3ème niveau de menu

Légende :

Permet de gérer l’ordre des pages en les montant ou en les descendant

Permet de gérer le niveau de la page (1er, 2ème ou 3ème)

Insérer une nouvelle page

Supprimer une page

Permet de cacher une page

Page 27: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Le contenu : principe de base

Une page de site Jimdo est composée d’une succession d’éléments. Chaque élément est indépendant. A tout moment, vous pouvez modifier, déplacer ou supprimer un élément dans la page. Tout élément peut-être dupliqué. Les pages entières à dupliquer ne sont disponibles qu’en version pro. Toutes les mises à jours se font instantanément lorsque vous cliquez sur enregistrer. Pour ajouter du contenu dans une nouvelle page, cliquez sur : ajouter un nouvel élément (apparaît lorsque vous passer la souris sur la page)

Page 28: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Gérer les éléments de votre site

Cliquez sur le “+ Ajouter un élément” afin d’afficher les blocs. Ces éléments vous permettent de construire votre site de A à Z. Titre, texte, image, vidéo, carte google Maps...

Page 29: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Gérer les éléments de votre site

Et les déplacer sans limite :

Page 30: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Le contenu : structurer ses pages

Les titres permettent de structurer votre texte (3 niveaux): - Visuellement : pour l’internaute qui va le lire. - Techniquement : pour les moteurs de recherche qui vont les reconnaître comme un élément important de la page.

Pour les textes, c’est le même principe qu’un logiciel de traitement de texte. Ex: Word

Page 31: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Ajouter un titre

Page 32: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Le contenu : éditeur de texte

Texte en gras (B) ou en italique (I)

Alignement du texte: à gauche, centré, à droite ou justifié

Ajout de puces ou de numéros

Ajouter ou supprimer un lien •Pour créer un lien, sélectionnez le texte sur lequel vous souhaitez mettre un lien •Cliquez sur le chaînon puis choisissez entre : -Lien interne: vers votre site web -Lien externe: un autre site ou un email •Cliquez sur créez un lien et enregistrer

Annule ou restaure une modification

Taille du texte

Augmenter ou réduire l’alinéa

Couleur du texte

Supprimer la mise en forme

Accéder au code HTML

Page 33: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Le contenu : mise en page

Les colonnes sont un outil très pratique pour structurer la présentation de votre page. 2 colonnes sont insérées par défaut, mais vous pouvez en rajouter autant que vous voulez ! Chaque colonne s’utilise et s’alimente comme une page dans une page. Vous pouvez donc y ajouter autant d’éléments que vous souhaitez ! Entre vos blocs de textes ou d’images, vous pouvez ajouter un espacement ou une séparation.

Page 34: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Insérer une image

La galerie d’images permet d’afficher une série de photos : -En mode diaporama -En mode vignette agrandissable

Vous pouvez mettre des liens internes ou externes sur vos photos ! Les photos sont limitées à 10MB en

version gratuite contre 100MB en version pro

Page 35: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Insérer une image

Page 36: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Les outils JIMDO

Le Formulaire permet de créer un formulaire de contact ou de réservation qui renvoie le message du client vers votre adresse email Le Flux RSS permet de récupérer et d’intégrer à votre site, le flux RSS issus d’autres blogs Le Téléchargement offre aux internautes la possibilités de télécharger vos brochures, présentation de votre établissement, tarifs (PDF=> aucune modification). Le Livre d’or offre aux internautes la possibilité de déposer leur avis sur votre établissement. Il faut aussi privilégier les liens vers les grands sites d’avis du type Tripadvisor, sites des Offices de Tourisme (FAIRGUEST), Dismoioù, Vinivi…

Page 37: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Ajouter du contenu externe

L’outil Widget/HTLM permet d’intégrer des contenus hébergés sur d’autres plateformes Exemples: Météo Google Maps Google Agenda Google Doc Vidéos Youtube, Dailymotion Albums photos Flickr, Picasa, panoramio Avis Tripadvisor

Page 38: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Vous localiser

Cliquez sur ajouter un élément Cliquez sur plus d’éléments et Google Maps apparaît

Insérer une carte avec un repère avec l’outil Google Maps

Page 39: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Vous localiser

La vue satellite s’affiche par défaut. Pour changer la vue cliquez sur Plan

En dessous de la carte taper le nom de votre ville + lieu dit et cliquez sur rechercher. Le lieu se géolocalise automatiquement

Page 40: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Ajouter un widget météo

➢ Connectez-vous sur www.meteorama.fr

➢ Cliquez sur Météo gratuite pour site

➢ Suivez les trois étapes : – sélectionner la ville et le format,

– changer le contenu

– ajouter votre style

➢ Vous aurez alors un aperçu de votre widget

➢ Acceptez les conditions générales et générez le code

Copiez le code HTLM généré et collez-le dans le cadre élément

Widget/HTML que vous avez créé sur votre site Jimdo

Changez la langue de la météo pour vos versions étrangères

Page 41: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Insérer une vidéo

Page 42: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Vidéos de l’Office de Tourisme

Choisissez la chaine Office de Tourisme Vallée de la Dordogne Sélectionnez votre vidéo en cliquant dessus Cliquez sur « partagez » puis « intégrez » Copiez le code Collez-le dans le widget de votre site web

Page 43: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

A FAIRE POUR LA PROCHAINE SEANCE

Finir la mise en page

Préparez vos textes

Sélectionnez vos photos Classez tout cela dans des dossiers !! C’est plus facile pour s’y retrouver.

Page 44: ATELIER 2 - vdpro.fr · Nombre de pages illimité ... claire des informations qu'il va pouvoir trouver sur vos pages. Page d’aueil Pour ce faire, évitez de créer une page d'accueil

Présentation réalisée grâce à la collaboration du réseau ANT

Merci de votre attention

Mélanie Ramière

Animateur Numérique de Territoire

[email protected]

Tél : 05 65 33 22 00

www.vallee-dordogne.com