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

Tutoriel comment créer site web avec Jimdo

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Tutoriel comment créer site web avec Jimdo

1

LES ATELIERS NUMÉRIQUES

Atelier n° 2

Comment créer soi-même un site web avec

Page 2: Tutoriel comment créer site web avec Jimdo

Un site internet, pourquoi ? 2

88 % DES FRANÇAIS UTILISENT INTERNET POUR PRÉPARER LEURS VACANCES.

Source: www.etourisme.info http://www.quotidiendutourisme.com

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 %)

Page 3: Tutoriel comment créer site web avec Jimdo

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 partage

Source: http://blog.useweb.fr/2012/01/10/les-5-regles-dor-de-la-redaction-web/

Les 5 règles d’or de la rédaction Web 3

Page 4: Tutoriel comment créer site web avec Jimdo

Jimdo: qu’est-ce que c’est ? 4

Jimdo est un « système de gestion de contenus », aussi appelé CMS (Content Management System). C’est un système qui vous permet de créer et gérer un site internet.

Page 5: Tutoriel comment créer site web avec Jimdo

Mise en pratique avec Jimdo. Pourquoi Jimdo ? 5

Page 6: Tutoriel comment créer site web avec Jimdo

Les avantages de Jimdo 6

Pas besoin de télécharger de logiciel: tout se fait en ligne.

Accessible depuis n'importe quel ordinateur.

Une grande choix de designs

Version gratuite pour démarrer

Très simple, même sans connaissance informatique

Version gratuite (ou version professionnelle payante)

Un bon référencement naturel

Version mobile

Page 7: Tutoriel comment créer site web avec Jimdo

Etape 1: S’inscrire sur Jimdo 7

1. 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 »

Page 8: Tutoriel comment créer site web avec Jimdo

Comment choisir son nom de domaine ? 8

Si vous n´avez pas encore de nom de domaine personnel. Voici quelques conseils pour trouver un nom 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 visiteurs N´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 nom de 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/ ou http://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 pas chez Jimdo mais chez un autre hébergeur.

Source: http://fr.jimdo.com

Page 9: Tutoriel comment créer site web avec Jimdo

Si j’ai déjà un nom de domaine ? 9

Si vous avez déjà l’hébergement et le nom de domaine et vous souhaitez faire une refonte du site sur Jimdo. Avec Jimdo, on peut lier des noms de domaines achetés ailleurs avec un pack JimdoPro ou JimdoBusiness (versions payantes). Rendez-vous ici: http://aide.jimdo.com/nom-de-domaine/enregistrement/gestion-des-noms-de-domaine

Un domaine existant (donc vous êtes déjà propriétaire) Dans ce cas, le message suivant s'affichera : Ce lien vous permet de paramétrer la méthode de connexion de ce nom de domaine avec votre site Jimdo.

Page 10: Tutoriel comment créer site web avec Jimdo

Etape 1: S’inscrire sur Jimdo 10

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.

Mail de la part de Jimdo

Page 11: Tutoriel comment créer site web avec Jimdo

Etape 2: MON SITE EST EN LIGNE:

la personnalisation

11

Page 12: Tutoriel comment créer site web avec Jimdo

La personnalisation 12

Accédez à l’interface de l’administration de Jimdo en cliquant sur le lien « connexion » en bas à droite du site.

Page 13: Tutoriel comment créer site web avec Jimdo

La personnalisation 13

La composition d’une page Jimdo LE HEADER (en-tête de votre site)

BARRE D’ADMINISTRATION

CORPS DE SITE (contenu de

chaque page)

MENU DE NAVIGATION

FOOTER (pied de

page) Afficher vos

modificatons en temps réel

BARRE LATERALE (reste identique sur

toutes les pages)

Page 14: Tutoriel comment créer site web avec Jimdo

Modifier l’en-tête 14

Passez la souris sur l’en-tête et

cliquez sur « modifier header ».

Page 15: Tutoriel comment créer site web avec Jimdo

Modifier l’en-tête 15

LE MENU DU HEADER

Onglets: « Galerie » : vous pouvez sélectionner une image parmi la collection d’images Jimdo « Image personnelle » : vous pouvez télécharger votre propre image Il est vivement conseillé d’insérer une image personnelle représentant votre activité. La taille vous est pré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

Page 16: Tutoriel comment créer site web avec Jimdo

Construction site web: Arborescence 16

Comment voulez-vous structurer votre site ? Quels éléments doivent apparaître ? L’information essentielle en premier. Mais ceci reste toujours modifiable !

CRÉEZ L’ARBORESCENCE DE VOTRE SITE

Passez votre souris sur « modifier navigation » et

cliquez dessus

Page 17: Tutoriel comment créer site web avec Jimdo

Construction site web: Arborescence 17

CRÉEZ L’ARBORESCENCE DE VOTRE SITE

La navigation est le «menu» de votre site internet. C’est l'endroit où seront listées toutes vos pages. Il y a 3 niveaux de pages: le menu principal, le sous-rubrique et les articles simples. Déplacez simplement votre souris sur le champ de la navigation et cliquez sur «modifier navigation». Lorsque vous aurez terminé vos modifications, n’oubliez pas de cliquer sur le bouton "Enregistrer", de manière à ce que les modifications deviennent visibles pour vos visiteurs !

Menu principal

Sous rubriques

Articles simples

Page 18: Tutoriel comment créer site web avec Jimdo

Construction site web: Arborescence 18

CRÉEZ L’ARBORESCENCE DE VOTRE SITE

Menu principal

Sous rubriques

Articles simples

Déplacer les pages dans l’arborescence

Changer les pages de niveau dans l’arborescence

Ajouter une nouvelle page

Supprimer une page

Cacher une page

Après modification, cliquez sur « enregistrer » et puis sur « fermer »

Page 19: Tutoriel comment créer site web avec Jimdo

La barre d’administration Jimdo 19

DESIGN: permet de modifier la forme et la structure de votre site Jimdo, sa mise en page... La place des éléments (barre de navigation, sidebar), la taille et la forme de l'en-tête varient par exemple selon le design choisi.

STYLE: vous pouvez gérer la mise en forme de la police des textes, des titres ou des liens en quelques 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 visiteurs informés des nouveautés relatives à votre activité. Publiez des articles, laissez les visiteurs les commenter, modifiez le style des titres et dates... tout est possible !

ACHETER: permet de passer aux versions supérieurs de Jimdo

PARAMETRES: 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équence des visites, le nombre de pages consultées, les pages préférées sur une période donnée. Pour des statistiques plus détaillées, utilisez Google Analytics

AIDE: une zone regroupant les principales rubriques d'aide chez Jimdo, le forum Jimdo, un formulaire pour nous envoyer un message et un regroupement des news Jimdo.

Page 20: Tutoriel comment créer site web avec Jimdo

Ajouter du CONTENU 20 Un élément/contenu est un module que vous ajoutez à votre site : un champ de texte, une galerie d’images, un titre de rubrique, un tableau, etc.

Les éléments peuvent être ajoutés de deux façons : en cliquant sur le signe "+ " ou bien en cliquant sur "+ Ajouter nouvel élément". Dans les deux cas, une fenêtre s'ouvre immédiatement avec un aperçu de tous les éléments à votre disposition.

Page 21: Tutoriel comment créer site web avec Jimdo

Ajouter du CONTENU 21

Pour bien organiser votre page

Colonnes: En cliquant sur cet outil deux colonnes apparaissent, mais vous avez la possibilité d'en 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.

Page 22: Tutoriel comment créer site web avec Jimdo

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.

Page 23: Tutoriel comment créer site web avec Jimdo

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.

Page 24: Tutoriel comment créer site web avec Jimdo

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 d'informations, de façon automatisée, à l'intention des internautes, et qui favorise la syndication de contenus en permettant à d'autres 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 d'activité RSS d'autres sites.

Page 25: Tutoriel comment créer site web avec Jimdo

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

Page 26: Tutoriel comment créer site web avec Jimdo

Etape 2: INTÉGER DES WIDGETS

26

Page 27: Tutoriel comment créer site web avec Jimdo

Intégrer un widget Météo 27

Rendez-vous sur: http://www.my-meteo.fr

Cliquez sur « Météo Webmaster »

Page 28: Tutoriel comment créer site web avec Jimdo

Intégrer un widget Météo 28

Créez votre bloc météo personnalisé en choisissant une ville, un format, les options et les couleurs. Vous voyez en temps réel à quoi ressemblera votre widget sur votre site.

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.

N’oubliez pas d’accepter les

conditions générales d’utilisation

Page 29: Tutoriel comment créer site web avec Jimdo

Intégrer une vidéo 29

Rendez-vous sur: http://www.google.fr Connectez vous à votre compte (ou créez votre compte). Cliquez sur Youtube

Page 30: Tutoriel comment créer site web avec Jimdo

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

Page 31: Tutoriel comment créer site web avec Jimdo

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

Page 32: Tutoriel comment créer site web avec Jimdo

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

Page 33: Tutoriel comment créer site web avec Jimdo

Intégrer une carte Google Maps 33

Cliquez sur « mes adresses » Puis cliquez sur « créer une carte »

Page 34: Tutoriel comment créer site web avec Jimdo

Intégrer une carte Google Maps 34

Donnez un titre à votre carte et une description (facultatif)

Cochez le statut « publique »

Cliquez sur OK

Page 35: Tutoriel comment créer site web avec Jimdo

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.

Page 36: Tutoriel comment créer site web avec Jimdo

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.

Page 37: Tutoriel comment créer site web avec Jimdo

Intégrer une carte Google Maps 37

Maintenant que votre carte est créée, cliquez sur le chainon de lien hypertexte.

Ensuite, cliquez sur Personnaliser et « prévisualiser la carte intégrée ».

Page 38: Tutoriel comment créer site web avec Jimdo

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

Page 39: Tutoriel comment créer site web avec Jimdo

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.

Page 40: Tutoriel comment créer site web avec Jimdo

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 Jimdo

Conseil: Collez ce widget dans la barre latérale de votre site pour qu’il reste visible sur toutes les pages.

Page 41: Tutoriel comment créer site web avec Jimdo

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

Page 42: Tutoriel comment créer site web avec Jimdo

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 »

Page 43: Tutoriel comment créer site web avec Jimdo

Créer et insérer un calendrier de disponibilités 43 Donnez un nom à votre agenda

(1 agenda par chambre)

Description (facultatif)

Cochez la case « rendre cet agenda public »

Lieu de votre établissement

Puis, cliquez sur « créer l’agenda »

Page 44: Tutoriel comment créer site web avec Jimdo

Créer et insérer un calendrier de disponibilités 44

1) Cliquez sur la flèche droite à côté du nom de votre agenda

2) Choisissez « paramètres de l’agenda »

3) Personnalisez et créez votre widget, récupérez le code à coller dans votre

site Jimdo

Page 45: Tutoriel comment créer site web avec Jimdo

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

Page 46: Tutoriel comment créer site web avec Jimdo

Fin de l’atelier 46 Une communauté Jimdo est très dynamique sur le web et vous propose de nombreux tutoriels pour aller encore plus loin avec votre site jimdo.

Quelques liens utiles: http://realia.jimdo.com/

http://communautefrancophone.jimdo.com/