guide pratique - etic-tsm.com · «télécharger») et permettant l’accès à un fichier de votre...

GUIDE PRATIQUE : CRÉATION DE SITE

2

SOMMAIRE

A. Insértion de contenu texte et galerie

B. Choisir une charte graphique et chager de couleur

C. Gérer les titres, les descrptions et les mots-clés

D. Mise en ligne et versions

E. Pages arborescence et modèles de pages

F. Insérer des Apps

G. Insérer un formulaire

H. Insertion de video et animation flash

I. Insertion de boutons, liens et espace-ments

J. Insertion d’une iFrame

K. Insertion de photos

L. Référencement et bonne conduite

3

9

13

19

23

27

32

37

41

46

51

57

3

CRÉATION DE SITEInsertion de contenu

4

INSERTION DE CONTENU

2

Il est aisé d’insérer de nouveaux blocs texte au sein de votre site Internet grâce à l’éditeur Viaduc. Deux boutons du Menu Insertion vont principalement vous servir : Textes et Textes préformatés : Les deux ouvriront un menu déroulant listant les options d’insertion de texte, et passer votre souris sur les différentes options ouvrira une prévisualisation. Après avoir sélectionné le bloc à ajouter de votre choix, un simple glisser-déposer suffit à l’ajouter où bon vous semble sur votre site Internet.

Le premier menu d’insertion de texte ne concerne que les contenus purement textuels : listes, paragraphes, titres (en trois tailles différentes). Il est important de noter que la gestion de vos titres est d’une importance critique pour un bon référencement de votre site Internet (référez-vous à la page dédiée).

Insérer du contenu textuel au sein de votre site Internet

5


3

Le second menu vous permettra d’inclure des textes préformatés au sein de votre mise en page. De la même façon, une prévisualisation s’ouvrira au survol de chaque option disponible afin de vous aider à choisir la mise en page la plus adaptée. Il y a cependant un changement notable : les insertions étant préformatées, il est possible de les réadapter par la suite en sélectionnant certains éléments et en les supprimant au cas par cas. On peut ainsi supprimer le titre, la phrase d’accroche, ou enlever certaines images présentes afin d’adapter le préformatage au contenu voulu (voir seconde photo).

6


4

Insérer des images, des documents à télécharger et créer des galeries photo est très simple via l’éditeur de site Viaduc. Sur le Menu Insertion, le troisième bouton y est intégralement dédié. Le menu qu’il déroule vous permet de:

Grâce à la première option, vous créerez un bouton doté d’un texte personnalisable (par défaut : «Télécharger») et permettant l’accès à un fichier de votre choix, mis en ligne via l’option Parcourir.

Mettre à disposition un fichier

7


5

Une fois ces options définies, vous pouvez simplement ajouter image après image à votre galerie grâce au bouton Ajouter une image présent directement dans cette dernière.

La création d’une galerie est extrêment simple : le premier menu Galerie est présent pour définir l’affichage ou non d’un titre et le style propre de la galerie d’images (nombre de colonnes, taille maximale des images.

Créer une galerie d’images

8


6

Tout est bien évidemment modifiable afin de vous autoriser un haut niveau de personnalisation.

Le troisime bouton vous permet, d’un simple glisser-déposer, d’insérer directement une image de votre choix sur la page sur laquelle vous travaillez. Ici encore, le bouton Parcourir vous permet de choisir l’image à insérer, et diverses options complémentaires sont présentes afin de modifier la taille et la mise en page de votre image afin d’obtenir un résultat esthétique et immédiat.

Insérer une image simple

9

Choisir une charte et changer les couleurs

CRÉATION DE SITE

10

CHOISIR UNE CHARTE ET CHANGER LES COULEURS

2

Choisir la charte graphique de votre site Internet est de première importance : en effet, un changement de charte via notre éditeur supprime l’intégralité des contenus mis en ligne et « remet à zéro » le site Internet. Il est donc fortement déconseillé de changer la charte graphique une fois le site créé et mis en ligne.

Il est parfaitement possible de prévisualiser les chartes graphiques via notre éditeur avant de créer vos contenus et votre site lui-même. Cette pratique est même conseillée, puisque vous aurez un aperçu du rendu de votre site, même si de nombreux éléments restent personnalisables. Pour ce faire, rendez-vous sur l’onglet Charte du menu principal de l’éditeur.

L’importance de la charte graphique

Choisir son thème et un jeu de couleurs avec l’éditeur Viaduc

11


3

Appuyer sur le premier bouton à gauche, comprenant une miniature, ouvrira le menu de changement de charte graphique. Vous aurez accès à l’intégralité des chartes disponibles, quelle que soit l’offre de création de site Internet que vous aurez choisie, et pourrez prévisualiser à la fois un morceau de la page d’accueil du site et les jeu de couleurs qui vous semble le plus adapté à l’aide du sous-menu Choisissez vos couleurs.

12


4

Le bouton Valider permet d’afficher la charte choisie dans l’éditeur. Vous pourrez alors entièrement l’explorer afin de déterminer si elle vous convient ou si vous souhaitez en changer. De la même manière, à l’aide du second bouton du menu Charte, vous pourrez modifier à la volée le jeu de couleurs correspondant à votre site et à votre charte graphique. Cela permettra également de déterminer le jeu de couleurs le plus adapté.

Il est important de noter qu’alors que changement de charte remet à zéro les contenus du site Internet, un changement de palette de couleurs n’a pas cet effet. Il est donc possible de changer les couleurs de votre site Internet à tout moment, même une fois le site en ligne.N’oubliez pas de valider vos changements à l’aide du bouton bleu Valider à droite des menus !

13

CRÉATION DE SITEGérer les titres,

les descriptions et les mot-clés

14

GÉRER LES TITRES, LES DESCRIPTIONS ET LES MOTS-CLÉS

2

En règle générale, lorsque l’on se réfère aux méta-données d’une page Internet, il est fait allusion au titre de la page, à sa description et aux mots-clés qui y sont associés. Ces données sont modifiables au sein même de l’éditeur Viaduc, et jouent un rôle important dans le référencement de votre site Internet. En effet, titre et description s’afficheront sur la page de résultat des moteurs de recherche, et les robots d’indexation que ce derniers utilisent scannent les mots-clés présents sur chaque page Internet. Bien renseigner ces champs est donc essentiel pour un bon référencement.

Toutes les méta-données citées ci-dessus sont gérables dans le menu Paramètres qui s’affiche sous le nom de page, dans l’onglet Pages de votre éditeur. Cliquer sur ce bouton ouvrira l’interface de gestion.

Gérer les méta-données du chaque page

15


3

Le champ Nom de la page est très simplement le nom de la page tel qu’il s’affichera dans l’éditeur. Sa seule influence est donc sur votre organisation personnelle.

Le second champ vous permet de déterminer l’adresse url de votre page - importante à la fois pour le référencement et pour le confort de navigation de vos visiteurs. Elle se modifie très simplement en copiant le texte renseigné et en y ajoutant «.html». Veillez cependant à ne pas utiliser d’espaces ou de points dans ce champ, et privilégiez les tirets et les formules courtes afin de faciliter la mémorisation.

16


4

Le troisième champ vous permet de déterminer le titre de votre page : c’est la première des trois méta-données. Ce titre s’affichera à la fois sur les moteurs de recherche et en haut des onglets lorsque cette page sera ouverte dans un navigateur. Il est donc important de limiter sa longueur (on considère que 55 caractères, espaces compris, constitue le maximum) et de rappeler le contenu de la page.

17


5

Le quatrième champ vous permet de renseigner la méta-description de votre page. C’est ce court texte qui s’affichera sous le titre de votre page dans les moteurs de recherche, et les robots d’indexation l’analyseront également afin de référencer votre site. Il est donc primordial de respecter quelques règles lors de la rédaction de ce contenu :

• Respecter une longueur maximale de 165 caractères, espaces compris, afin d’optimiser l’affichage sur les moteurs de recherche.

• Rédiger la méta-description comme un «résumé» du contenu de votre page, ce qui optimise le référencement et donne au visiteur l’envie d’approfondir sa lecture.

• Rédiger un texte ayant du sens, et non une suite de mots-clés ou un texte copié-collé (très mauvais pour le référencement).

18


6

Le quatrième champ vous permet de renseigner la méta-description de votre page. C’est ce court texte qui s’affichera sous le titre de votre page dans les moteurs de recherche, et les robots d’indexation l’analyseront également afin de référencer votre site. Il est donc primordial de respecter quelques règles lors de la rédaction de ce contenu :

• Respecter une longueur maximale de 165 caractères, espaces compris, afin d’optimiser l’affichage sur les moteurs de recherche.

• Rédiger la méta-description comme un «résumé» du contenu de votre page, ce qui optimise le référencement et donne au visiteur l’envie d’approfondir sa lecture.

• Rédiger un texte ayant du sens, et non une suite de mots-clés ou un texte copié-collé (très mauvais pour le référencement).

Les derniers champs, quand à eux, vous permettent de déplacer la page au sein de votre site Internet (changer la page parente) ou de gérer sa visibilité dans les menus.

19

CRÉATION DE SITEMise en ligne et versions

20

MISE EN LIGNE ET VERSIONS

2

Le menu de mise en ligne de votre site Internet est disponible à l’appui sur le bouton bleu Mettre en ligne, en haut à droite de l’éditeur Viaduc. Ce menu ouvre de nombreuses possibilités de gestion de votre site Internet.

Vous pouvez prévisualiser la version actuelle de votre site, avec les modifications effectuées, en cliquant sur le premier bouton Voir mes modifications (icône d’oeil). Cela ouvrira dans un nouvel onglet de votre navigateur une version complète de prévisualisation du site Internet.

Le bouton bleu frappé d’un écran, à droite de la barre d’options, permet d’effectuer la mise en ligne immédiate du site Internet, tel que prévisualisé précédemment. Cette procédure de mise en ligne est à effectuer à chaque fois que vous voulez valider un ou plusieurs changements sur la version en ligne du site Internet (ajout de pages, modifications de contenu, etc...). Sans cette mise en ligne, toute modification enregistrée sur l’éditeur n’affectera pas le site Internet en ligne, ces modifications restant internes à l’interface d’édition.

Mettre en ligne votre site Internet

21


3

En cas de fausses manipulation, de perte de données ou d’erreurs, il est possible de revenir à une version antérieure de votre site Internet. C’est la raison d’être du sous-menu Restaurer une version précédente de mon site, qui vous permet de sélectionner une version antérieure et de la restaurer pour ensuite la mettre en ligne. Cette fonction permet une sauvegarde constante des spécificités de votre site Internet, et sert de «garde-fou» en cas d’erreur ou de problème grave. Le système de versionning conservant de très nombreuses sauvegardes de votre site Internet, il est particulièrement réactif et permet de modifier en toute sécurité votre site.

Gérer les versions de votre site Internet

22


4

Un bouton Suspendre le site est également présent sur la barre d’outils. Il permet de mettre de manière immédiate le site Internet hors-ligne (un pop-up «Site en construction» s’affichera à la place). Cette fonction est utile en cas de piratage, de problème grave ou tout autre cas (heureusement extrêmement rare) où le site Internet doit être immédiatement et temporairement suspendu. Une fois activé, le bouton se muera en Réactiver le site, qui permettra de remettre en ligne le site Internet, dans sa version la plus récente mise en ligne (c’est à dire après modifications validées et mises en ligne ou avant suspension, dans cet ordre de priorité).

En cas de problème...

23

CRÉATION DE SITEPages, arborescence et modèles de page

24

PAGES, ARBORESCENCE ET MODÈLES DE PAGE

2

Bien réfléchir l’arborescence de votre site Internet est très important : elle facilite le référencement de votre site tout en améliorant grandement l’expérience des visiteurs de votre site. Un site bien organisé est plus agréable à parcourir qu’un site fouillis où toutes les pages sont mélangées !Notre premier conseil en la matière sera de limiter au maximum le nombre de pages : il est préférable d’avoir peu de pages, mais un contenu abondant et de qualité à de nombreuses pages au contenu pauvre.

Réfléchissez donc à votre organisation en amont, quitte à schématiser l’arborescence de votre site Internet sur papier. Un menu bien construit et quelques sous-pages par catégorie sont bien plus agréables pour vos utilisateurs !

Afin de gérer finement l’ordre de votre menu principal, utilisez le bouton Gérer l’ordre des pages disponible dans l’onglet Pages.

Arborescence du site Internet

25


3

Ajouter de nouvelles pages à votre site Internet est très simple : dans l’onglet Pages du menu de l’éditeur, cliquez sur le premier bouton à gauche, Ajouter une page, pour ouvrir le menu d’ajout. Ce dernier se compose simplement d’un champ Nom de Page permettant de nommer votre nouvelle page, d’un menu Page Parente si vous souhaitez créer une sous-page appartenant à une catégorie définie au préalable, et de deux options permettant de choisir la mise en page liée à votre charte (et de créer un nouveau modèle de page, mais nous y reviendrons).

Ajouter de nouvelles pages

Attention : en ajoutant une page, veillez à ce que la case Oui dans Nouvelle Mise en Page soit cochée !

26


4

Chaque page peut être arrangée selon un modèle prédéfini par le thème que vous aurez choisi. Afin de modifier le modèle utilisé pour chaque page de votre site Internet, le menu Choix de la mise en page est votre solution. Vous pourrez utiliser un des modèles prévus dans le thème (page d’accueil, page interne 1 ou 2) ou créer un modèle à partir d’une page que vous aurez personnalisée au préalable (Nouvelle mise en page lors de l’ajout, voir paragraphe précédent).

Les modèles de page

27

CRÉATION DE SITEInsérer des Apps

28


2

Grâce au sous-menu Actualités, vous avez la possibilité d’inclure un flux RSS au sein de votre mise en page. L’intérêt en est très simple : vous pouvez afficher des nouvelles liées à votre domaine d’activité de manière transparente pour vos visiteurs, et ainsi augmenter l’intérêt de vos pages. Il vous suffit pour ce faire de copier-coller l’url du flux RSS à afficher directement dans le menu présent au sein de l’éditeur. Vous avez également la possibilité de définir le nombre de nouvelles à afficher (entre 1 et 10).

Le menu Insertion de l’éditeur Viaduc vous permet de rajouter de nombreuses applications directement sur votre site Web, en plus de l’insertion d’animations Flash et d’iframes. Ces fonctionnalités supplémentaires augmenteront les interactions possibles sur votre site Internet et participeront directement à son intérêt pour vos visiteurs.

Flux RSS et réseaux sociaux

29


3

Le sous-menu Réseaux Sociaux, quand à lui, en plus de vous permettre l’ajout de formulaires et de formulaires personnalisés (voir page dédiée) autorise l’ajout de deux blocs :

Un compteur de visites

Un bloc préformaté Réseaux Sociaux, paramétrables à loisir. Choisissez les réseaux sur lesquels votre entreprise est présente, et reliez-les directement à votre site Internet. De cette manière, l’expérience est fluide pour les utilisateurs et vous gagnerez en conversions vers des like, des followers on des contacts.

30


4

Le sous-menu Apps, en sus de l’insertion d’iframes, permet d’insérer plusieurs applications utiles sur votre site Internet.

L’insertion du bloc Date et Heure affichera, de manière transparente, la date et l’heure exacte sur votre site Internet.

L’outil de localisation est un peu plus complexe : il crée une iframe Google Maps directement sur votre site Internet. Vous pourrez y insérer une localisation, ou via une adresse, ou via des coordonnées GPS. Vous avez également la possibilité de choisir l’affichage (en carte, en image satellite, etc...), ainsi que de fixer le niveau de zoom disponible. Toutes ces options sont, comme pour chaque bloc personnalisable, disponibles dans le menu.

Autres Apps disponibles

31


5

Enfin, vous avez la possibilité d’inclure des prévisions météo au sein de votre site Internet grâce à l’app Météo, toujours configurable à l’envie via le menu.

32

CRÉATION DE SITEInsérer un formulaire

33


2

Le formulaire ainsi déposé sera immédiatement créé dans une version «basique», verticale et utilisant un nombre conséquent de champs. Chacun de ces champs étant personnalisable, comme nous allons le voir plus loin.

Il est désormais possible, grâce à un ajout dans l’éditeur Viaduc, d’entièrement personnaliser vos formulaires afin de les adapter aux informations que vous souhaitez recueillir. L’insertion du formulaire lui-même sur votre page s’effectue de la même manière que tout rajout de contenu à travers l’éditeur Viaduc : par un glisser-déposer depuis le sous-menu dédié (en l’occurence, Réseaux Sociaux) vers la page, à l’endroit où vous souhaitez insérer le formulaire.

Créer le formulaire

34


3

Le bloc Formulaire lui-même se prête tout d’abord à la personnalisation. Utilisant tout ou partie de la largeur de page selon vos préférences, vous pouvez également indiquer l’adresse de destination des informations ou ajouter de nouveaux champs depuis l’interface. Notez la possibilité d’utiliser des e-mails de réception différents pour différents formulaires. On peut ainsi imaginer un formulaire de contact envoyant vers contact@votredomaine et un formulaire de SAV dirigeant vers sav@votredomaine. Cela permet une gestion plus fine de votre relation client.

Vous pouvez également personnaliser les messages s’affichant lors d’un envoi, suivant s’il est réussi, raté, ou invalidé par l’entrée d’un code de validation erronné

35


4

Comme expliqué précédemment, chaque champ est personnalisable pour s’adapter au mieux à vos besoins.

Personnaliser en détail

• Vous pouvez déterminer la largeur prise par chaque «bloc de champ» afin de créer différentes colonnes.• Vous avez la possibilité de changer l’intitulé de chaque champ, ou de ne pas l’afficher du tout.• Dans le même sens, vous pouvez modifier l’espacement entre titre de champ et champ même.• Le champ de saisie peut être modifié en taille, peut être rendu facultatif ou non (une petite étoile rouge

s’affichant à la fin des champs obligatoires).• Le type de saisie requis par les champs peut être modifié : champ de texte plus ou moins grand, choix

multiple...• Vous êtes à même d’écrire des suggestions de message, qui peuvent remplacer avantageusement les

titres de champ par exemple.

36


5

Enfin, dans le cas d’un champ à choix multiples, les différentes options sont réglables dans le menu adéquat Configurer les choix.

Chaque champ de saisie pouvant être géré de manière indépendante des autres, vous êtes donc libre de modifier chaque formulaire à votre convenance pour l’adapter aux besoins de votre structure. Vous pouvez à loisir supprimer des champs ou en ajouter de nouveaux, afin de collecter très précisément le nombre de données que vous voulez. Il ne tient plus qu’à vous d’optimiser vos formulaires avec l’éditeur Viaduc !

37


Vidéo et Animation Flash

38


2

Au sein du menu Insertion de l’éditeur Viaduc, vous trouverez le sous-menu Vidéos et animations qui vous permet d’ajouter à votre site des animations Flash ainsi que des vidéos, ou en votre possession, ou importées directement depuis Youtube : il ne vous suffira donc que de mettre en ligne la vidéo sur la plate-forme pour créer un lien direct avec votre site web et ainsi la rendre disponible pour vos visiteurs.

Le processus est très simple :

Insérer vidéos

39


3

• Glissez-déposer l’outil Vidéo depuis la barre d’outils vers l’endroit où vous souhaitez insérer la vidéo : cela créera le bloc adéquat et affichera le menu d’insertion vidéo de votre éditeur.

• A l’aide du menu d’insertion vidéo (accessible si besoin d’un simple clic sur votre page, à l’endroit où vous aurez déposé le bloc Vidéo à insérer), choisissez sur votre ordinateur la vidéo à insérer, ou copiez-collez l’adresse de la vidéo youtube adéquate.

• Le reste du menu vous permettra de gérer la taille et la mise en page de l’objet, afin de personnaliser au mieux et d’obtenir un résultat à votre convenance.

Important : si vous souhaitez insérer une vidéo Youtube, vérifiez que le lien collé commence par «http://» et non par «https://» et au besoin, corrigez-le !

40


4

La manipulation à effectuer afin d’insérer une animation Flash à votre site web est similaire à celle précédemment décrite d’insertion de vidéos, avec la notable différence de devoir absolument importer l’animation depuis votre propre disque dur. La gestion reste la même pour le reste des options, depuis la mise en page jusqu’aux paramètres de taille.

Insérer une animations Flash

41

CRÉATION DE SITEInsérer boutons,

liens et espacements

42


2

Au sein du menu Insertion, vous trouverez un sous-menu Boutons qui vous permettra de glisser-déposer, à votre convenance, des liens vers la page de votre choix et des boutons ayant la même fonction (pour créer des boutons enclenchant un téléchargement de fichier, nous vous invitons à vous rendre sur la page dédiée).

Boutons comme liens peuvent, après avoir été insérés sur la page, être modifiées et personnalisés à votre convenance : taille du bloc, texte à afficher... De cette manière, vous obtiendrez le résultat optimal en toute simplicité.

Il est très important de créer un maillage de liens à la fois internes et externes à votre site Internet : cela améliorera en simultané l’expérience de navigation de vos visiteurs, tout en participant activement à un meilleur référencement. L’éditeur Viaduc offre de nombreuses options en ce sens, afin de vous appuyer dans ce travail.

Insertion de liens et de boutons

43


3

• un lien interne sera construit de la façon suivante : /nom-de-la-page-cible• un lien externe commencera toujours par http:// ou https://

Lorsque que vous créerez votre lien et définirez sa cible (champ Lien dans le menu), pensez bien à certaines conventions :

44


4

Grâce au sous-menu Espacement présent dans le menu Insertion de l’éditeur Viaduc, vous pourrez glisser-déposer espacements et lignes de séparation sur votre page. Ces deux objets sont très importants pour la mise en forme de votre contenu.

En effet, un espacement vide dont vous aurez modifié la taille vous permettra de décaler un bloc de contenu vers la droite, comme démontré dans la capture d’écran suivante. Pensez à modifier la taille de l’espacement et du bloc de contenu à déplacer, les blocs prenant par défaut 100% de la largeur d’écran disponible.

On voit nettement que le bouton Télécharger est adossé au bloc d’espacement invisible, les deux étant présentes sur la même ligne. Cette astuce vous permettra d’aligner comme bon vous semblera vos contenus.

Insertion d’espacements et mise en page

45


5

Le séparateur offre une fonctionnalité différente : créer une ligne visible de séparation entre deux éléments, elle aussi modifiable au niveau de sa taille, permet en toute simplicité de différencier plusieurs paragraphes ou blocs de contenu. Vous créerez donc un appui visuel pour vos visiteurs, et améliorerez nettement leur expérience sur votre site. Personne n’apprécie les textes trop peu aérés, encore moins sur écran !

46

CRÉATION DE SITEInsérer d’une iFrame

47


2

Il est entièrement possible d’insérer une iFrame au sein de votre site grâce à un glisser-déposer de l’outil iFrame présent dans le sous-menu Apps, lui-même dans le menu Insertion. Comme tous les blocs présents dans l’éditeur Viaduc, ce dernier est entièrement personnalisable.

48


3

Une iFrame est, pour simplifier, tout ou partie d’un site Web qui est intégrée au sein d’un autre site web. Si le premier est accessible par le plus grand nombre, alors il s’affichera sans problème (impossible par exemple d’afficher la page paramétrage d’un compte privé, par exemple). Les possibilités sont alors sans limite !

Certains sites proposent de générer directement une iFrame, c’est le cas par exemple pour Google Agenda, que nous utiliserons dans cet exemple. D’autres ne proposent pas cette fonctionnalité, il est donc nécéssaire de générer l’iFrame vous-même sur le modèle suivant :

<iframe width="" height= frameborder="0" marginheight="0"marginwidth="0" src="adresse du site à afficher"></iframe>

Dans tous les cas, vous aurez à copier-coller le code généré par le site ou généré par vos propres soins dans le champ Inserez le code html de l’iFrame présent en haut à droite de l’éditeur.

iFrame Google Agenda

Commençons par créer un nouvel agenda sur l’interface Google Agenda

49


4

Et rendons-le public, afin que tous les visiteurs du site puissent y accéder (si cette étape n’est pas validée, vous seulement y aurez accès, ce qui limite très fortement l’utilité de l’insertion de l’iFrame sur votre site Internet).

Une fois l’agenda spécial créé, rendons-nous dans ses Paramètres

50


5

Et Google génère automatiquement un code iFrame qu’il suffit de copier-coller dans le champ prévu à cet effet sur l’éditeur Viaduc

Cela résultera en la présence de notre agenda «iFrame Viaduc» sur notre éditeur, et ce dernier sera ainsi à disposition de nos clients !

51


52


2

L’éditeur Viaduc intègre un menu Photothèque vous vous permettra de gérer de manière pointue vos médias, afin d’avoir une vision globale. L’interface du menu est elle-même divisée en deux parties distinctes que nous allons explorer en détail.

L’onglet de droite, Photothèque, vous permet d’explorer l’intégralité de la banque d’image mise à votre disposition. Il vous suffit de rechercher les images qui vous intéressent, par thème ou par sujet. Une fois trouvées les images voulues, vous pourrez les sélectionner et choisir la qualité d’affichage. Attention cependant, vous ne disposez que de 7 crédits d’achat, et la qualité des images influe sur le nombre de crédits nécéssaires à leur achat. Une fois votre sélection établie, il vous suffira de cliquer sur le bouton Récapitulatif de ma sélection et de valider cette dernière. Les images seront automatiquement ajoutée sà votre photothèque en ligne, disponible dans l’onglet Mes Photos.

Photothèque et Banque d’images

53


3

L’onglet de gauche, Mes Photos, regroupe l’intégralité des photos que vous avez ajoutées sur le site (voir le tutoriel correspondant), ainsi que les photos récupérées depuis la banque d’images (voir paragraphe précédent). Il est très simple d’utiliser ce menu, et d’ajouter des photos à votre site Internet de cette manière. Commencez par insérer une photo à l’endroit désiré à l’aide du menu Insertion > Image.

A l’insertion, s’ouvrira le menu de gestion de l’image elle-même (sinon, un triple clic suffit à l’afficher). Notez la présence du bouton Photothèque sur la droite. Ce bouton affichera une version spéciale du menu Mes Photos.

Mes Photos

54


4

Sélectionnez à présent la photo de votre choix dans le menu qui s’est ouvert. Cette dernière sera surlignée en bleu et le bouton Insérer dans mon site sera alors fonctionnel : un simple appui validera votre choix et remplacera l’image de base insérée par celle que vous aurez choisie. Cette procédure peut être répetée autant de fois que nécessaire.

Il est à noter que pour qu’une image soit affichée dans l’onglet Mes Photos, elle doit d’abord avoir été importée (en généaral via une insertion d’image ou une création de galerie).

55


5

Une fois ces options définies, vous pouvez simplement ajouter image après image à votre galerie grâce au bouton Ajouter une image présent directement dans cette dernière.

La création d’une galerie est extrêment simple : le premier menu Galerie est présent pour définir l’affichage ou non d’un titre et le style propre de la galerie d’images (nombre de colonnes, taille maximale des images.

Créer une galerie d’images

56


6

Tout est bien évidemment modifiable afin de vous autoriser un haut niveau de personnalisation.

Le troisime bouton vous permet, d’un simple glisser-déposer, d’insérer directement une image de votre choix sur la page sur laquelle vous travaillez. Ici encore, le bouton Parcourir vous permet de choisir l’image à insérer, et diverses options complémentaires sont présentes afin de modifier la taille et la mise en page de votre image afin d’obtenir un résultat esthétique et immédiat.

Insérer une image simple

57

Référencement& bonnes pratiques

CRÉATION DE SITE

58

GUIDE DE RÉFÉRENCEMENT ET BONNES PRATIQUES

2

La première barrière est la quantité : un robot d’indexation pourra correctement effectuer son travail à partir d’environ 500 mots présents sur la page. Ce « corps » de texte lui permettra de dégager avec facilité les mots-clés les plus utilisés, de déterminer efficacement le sens et le but de votre page, et donc de mieux la référencer. Plus de texte il y a, mieux le robot peut effectuer son travail.

Incidemment, il est important de ne pas oublier vos visiteurs « humains ». Ecrire des paragraphes gigantesques réduit fortement la lisibilité de votre site Internet et fatigue l’oeil. Pensez donc à aérer votre contenu, et à l’organiser en titres et sous-titres. Distinguer clairement les différentes parties de votre site permettra non seulement à vos lecteurs de mieux se repérer, mais aussi aux référenceurs de mieux effectuer leur travail - votre contenu étant clair, organisé et facile à indexer - un rapport gagnant-gagnant !

Organiser le contenu texte

59


3

Comme nous l’avons précisé, un robot d’indexation ne lit que le contenu textuel. Comment alors gérer vos contenus multimédia, et les optimiser pour le référencement ? De nombreuses solutions s’offrent à vous !

• Insérer des légendes sous vos contenus afin que les robots puissent les lire.• Décrire le contenu média (analyse, explications, mise en situation...) au sein même de vos textes.• Utiliser l’attribut « Texte alternatif », lu également par les robots pour décrire le contenu. (triple clic sur

une image, puis Options)

Soigner les contenus multimédia

60


4

Trop souvent négligée, l’arborescence même du site Internet, ainsi que sa navigabilité, sont des facteurs clés dans un bon référencement. Non seulement vos titres de menus seront comparés par les robots aux contenus des pages vers lesquelles mènent les liens, mais la facilité de navigation pour le visiteur est un point vital pour tout site internet visant à générer du trafic (ergo, tout site internet).

Il ne vous faut pas non plus négliger les méta-données présentes sur chaque page. Elles déterminent non seulement l’aperçu de votre site sur les pages de résultats des moteurs de recherche, mais aident également le référencement du site lui-même.Le titre de chaque page ne devrait dans l’idéal jamais dépasser 55 caractères - espaces inclus - afin d’être correctement affiché. Les descriptions de pages, quand à elles, devraient contenir jusqu’à 156 caractères (espaces également inclus !) et inclure quelques mots-clés utilisés dans la page, de manière cohérente.

Penser le site lui-même

61


5

Quand au champ « mot-clés », même si par nature il est illimité, il ne sert à rien de le remplir avec une multitude de valeurs : mieux vaut s’en tenir à 5 - 10 mots-clés adaptés à la page concernée et en rappelant le contenu.

Les liens externes sont également importants : proposer des liens sortant du site et menant sur des pages « de qualité » est extrêment positif pour le référencement, comme pour vos visiteurs. Il est donc très intéressant de sélectionner quelques liens de grande qualité (articles de référence, organismes officiels...) à vos visiteurs.

62


6

Certaines pratiques sont fortement pénalisées par les moteurs de recherche lorsqu’ils les détectent. Il convient donc de ne jamais les mettre en place, même involontairement.

• le « duplicate content », ou contenu dupliqué, fait référence à tout contenu trop similaire à un autre présent sur le même site Internet : paragraphe présent sur deux pages différentes, images répétées en dehors des « éléments communs » (menu et pied de page)... Cette pratique est extrêmement nuisible au référencement. Il est préférable d’écrire 500 mots originaux que 1000 mots donc 200 sont répétés. Notez que le duplicate content peut intervenir sur deux sites internet distincts (copie de contenu entre deux sites, copie d’article de presse ou wikipédia...)

• le « linkbuidling » excessif : de la même manière que quelques liens externes de qualité sont très favorables au référencement, ils peuvent le pénaliser s’ils sont présents au détriment du contenu. Evitez donc de rassembler trop de liens externes, même pertinents, au sein d’une même page.

• de manière générale, évitez toute pratique « cachée » aux visiteurs (texte blanc sur blanc, liens cachés, etc...) qui sont très mal vues (à la fois lorqu’elles sont découvertes par les utilisateurs, et par les robots d’indexation).

Nous finirons ce tutoriel en citant le conseil de Google aux webmasters et aux créateurs de contenu : créez un site intéressant pour vos visiteurs et vous serez mieux référencés.

Penser le site lui-même

guide pratique - etic-tsm.com · «télécharger») et permettant l’accès à un fichier de votre...

Documents