Tutoriels pour créer son site internet

Créer son site internet

Afin de créer convenablement son site internet, il y a quelques procédures à respecter pour ne pas partir dans tous les sens et ne plus savoir où on en est.

Je tiens également à apporter une précision sur les différentes terminologies employées parfois à tord :

• Site web : c'est une publication contenant plusieurs pages web.
• La page web : c'est une page affichée à l'écran quelque soit sa hauteur et/ou sa largeur.
• La page d'accueil : c'est la page par laquelle on arrive sur un site.

Avant toute chose, il faut sélectionnez avec soins les différents outils que vous allez utiliser pour créer vos pages, pour réaliser les graphismes (que ce soit des logicieles en ligne ou installés sur votre ordinateur).

Chacun ira de sont point de vue pour vous imposer l'utilisation tel ou tel logiciel ou solution plutôt qu'une autre.
Vous avez les puristes du code source, ceux qui ne jure que par l'éditeur de texte ou de code à ceux préférant les éditeurs de type WYSIWYG.
Vous avez également des suites d'outils qui peuvent vous aider dans la conception de votre site (CMS de type Wordpress, Framework de type Bootstrap...).

Je vous conseille de tester un(e) ou plusieur(e)s logiciels ou solutions à utiliser, afin que vous constatiez par vous même, si son ergonomie et son fonctionnement sont les plus appropriés à votre façon de travailler.

Voici, en quelques étapes comment créer et réaliser la base d'un site.
Vous pourrez agrémenter ce dernier de fonctionnalités supplémentaires, en ayant recours à la programmation (javascrtipt, PHP ou l'ASP avec base de données...), afin d'obtenir le résultat final souhaité.

Le découpage du site

Quand on réalise un site, en général on se pose LA question : De quoi va-t-on parler ?

Le découpage, c'est comme un sommaire, il permet de définir le nombre de parties qui doivent composer le site et surtout ce que chacune des ces parties doient présenter.
On peut considérer qu'une partie ou section, peut représenter l'une des thématiques de votre site.

Chaque section peut-être re-découpée en une ou plusieures sous section où sera présentée les différentes thématiques du site (comme par exemple le blog, le formulaire de contact, le portfolio...).

N'hésitez pas à faire des schémas pour s'avoir comment vous organiser, cela vous aidera notamment à définir la navigation entre vos différentes sections.

L'architecture du site

L'architecture, c'est la façon dont va se définir l'arborescence de votre site. C'est-à-dire où vous allez placer les pages des différentes sections, où vous allez placer le contenu média (images, vidéos, animations...)...

L'arboresence reprend le principe des dossiers de votre explorateur de fichiers :

• le dossier racine qui est en faite votre site internet,
• les sous-dossiers pour classer vos différentes sections et les divers fichiers connexes que vous allez utiliser pour votre site.

Si c'est vous qui gérez l'architecture du site et non un programme tel que certain CMR, alors la suite vous concerne.

Le premier dossier à créer, c'est le dossier "images", c'est ici que vous allez placer toutes les images du site.
Il est préférable de structurer son contenu en fonction de ce que vous allez y mettre. Séparer les éléments propres à l'aspect visuel de votre site des différentes images qui serviront d'illustrations complémentaires de vos pages (séparateurs, puces...).

Créer également les dossiers contenant les parties "Mise en forme et programmation", je parle ici des dossiers contenant les CSS et scripts nécessaire au fonctionnement du site (JQuery et Javascript entre autre ...).

Créer ensuite un dossier par "partie" et éventuellement les sous-dossiers si nécessaires, en fonction du découpage que vous avez précédement défini.

A la racine de chaque dossier, ajouter un fichier que vous nommerez "index".
L'extension dépendra du type de site que vous réaliserez ainsi que du language utilisé (.html, .htm, .xml, .php, .asp....).
Ce fichier à deux fonctions : il sera la page de garde de chacune des sections et il servira de page de protection afin de masquer le contenu des dossiers à vos visiteurs.

Maintenant que le squelette de votre site est prêt, vous allez pouvoir créer son contenu et préparer votre mise en page tout en gérant son aspect visuel.

Le contenu du site

Le contenu d'un site détermine sa cible. Sachez donc à qui vous allez vous adresser afin, d'adapter éventuellement, le langage utilisé pour la rédaction de vos sujets (néophytes ou spécialistes).

Le contenu, c'est le regroupement de tout ce qui est textes, images, illustrations, liens, fichiers à télécharger pour chaque pages du site.

Cependant, créer les différents contenus de votre site prendra du temps (ce sera également le cas pour les mises à jour ultérieures).
Faites bien attention, ne négligez pas le travail de rédaction au détriment d'une programmation impéccable, cela pourrait avoir un effet négatif sur votre site (tout ce temps passé pour rien, ça peut faire mal).

Lors de la préparation du contenu d'une page, une fois tous les éléments regroupés, il est nécessaire de savoir quelle architecture vous souhaiterez lui donner :

A ce niveau, tous les éléments doivent être disponibles en "bibliothèque", c'est-à-dire les textes déjà saisis (dans des documents textes ou en base de données), les images au format numériques, les vidéos,..., et tout cela bien identifié afin de permettre une intégration plus rapide du contenu de chacune des pages et pouvoir ainsi prendre son temps nécessaire à la mise en page et la recherche des différents styles CSS.

La mise en page

La mise en page, c'est l'étape finale de la création d'une page. C'est ici que se retrouve la fusion de la charte graphique et du contenu.

La mise en page c'est aussi l'agencement des différents éléments dans la page, la façon dont vous allez présenter chaque paragraphe, définir chacune des polices de caractères utilisées, les couleurs des cadres des tableaux, des blocs, l'aspect des séparateurs...
C'est une étape très importante car d'elle, dépendra la clarté de lecture des informations de votre site.
 

Les différents formats de texte

Chaque éléments de texte se doit d'être différent, qu'il s'agisse du texte de base (celui utiliser pour la rédaction de tous les paragraphes), du texte pour signaler des informations particulières, des titres, des sous-titres, des liens hypertextes en fonction de leur utilités (mail, pages, site...)...

Les éléments textes doivent s'harmoniser au niveau de leur couleur avec l'esprit de la charte graphique, pensez à éviter certaines associations de couleurs, de tailles, en fonction de la couleur de fond que vous allez utiliser comme par exemple :

Exemple de ce qu'il faudrait éviter

Exemple de ce qu'il faudrait éviter

Si vous arrivez à lire le contenu sans vous faire mal aux yeux alors chapeau.

Pour définir ces différents aspects stylistiques, utilisez les feuilles de style CSS.
Vous devrez ainsi créer des "classes" et des "ID" avec différentes variantes de couleurs, de tailles, redéfinir le formatage de certains éléments (le paragraphe, les en-têtes) et ainsi les appliquer à aux différents élément de vos pages.