Choisir l'outil de développement

Vous avez choisi votre hébergement, il vous faut donc passer maintenant à la mise en place concrète de votre site. Pour cela différentes options ou solutions sont possibles, du développement complet de votre site à l’utilisation d’outils « clé en main ».

Il importe de comprendre la distinction entre un site Web statique et un site Web dynamique. Faisons un parallèle avec une autre situation pour aider à mieux cerner cette différence.

Imaginons que vous teniez un magasin. Tous les rayons sont remplis des marchandises exposées. Si vous souhaitez présenter de nouvelles marchandises, puisque toute la place est occupée, il faudra procéder à des remaniements du magasin. Si vous n’avez que peu de produits à ajouter, quelques modifications mineures pourront suffire : resserrer un peu la place occupée par les marchandises déjà présentes par exemple. Si maintenant vous décidez de créer une nouvelle ligne complète de produits, présentée dans une section à part entière du magasin, il vous faudra procédez à des remaniements importants, voire à des travaux d’agrandissement. Si le décor ne vous convient plus, il faudra là aussi tout refaire. Vous avez ici une idée de ce qu’est un site statique : tout ajout de contenu sur votre site Web peut faire l’objet de modifications mineures, mais peut aussi nécessiter la refonte complète du site.  Le changement de design conduira inévitablement, lui, à une refonte complète.

Imaginons maintenant qu’au lieu de ce magasin, vous disposiez d’un lieu de stockage dont les dimensions peuvent s’étendre quasi à l’infini, et dans lequel vous puissiez structurer des sections elles-mêmes extensibles à l’infini. Dès que vous avez besoin de placer de nouveaux produits, l’espace nécessaire se crée automatiquement, de même pour la création de nouvelles sections. Imaginez que la modification du décor de votre nouveau lieu de vente soit tout aussi simple. Vous élaborez votre décor sur un magasin fictif vide de marchandises, et une fois ce décor jugé satisfaisant, vous pouvez le « transférer »  immédiatement à votre magasin réel sans effectuer de travaux supplémentaires ni déplacement de marchandises. Vous avez là une assez bonne idée de ce qu’est un site dynamique.

Dans un site dynamique, tout ce qui concerne la présentation est séparé du contenu. Les informations sont rangées dans une base de données, et c’est le site Web lui-même qui se charge de les présenter au bon endroit avec la bonne présentation. De plus, pour modifier l’aspect du site, il n’est nul besoin de toucher au contenu. Avec un site dynamique, on se préoccupe du design, ou du contenu, mais pas des deux en même temps, et toute intervention sur l’un des aspects ne remet pas en question l’autre aspect.

Aujourd’hui, la plus grande partie des sites Web sont des sites dynamiques tant les avantages en sont indiscutables. Un site statique pourra toutefois s’avérer suffisant pour un petit site personnel.

Faire des suggestions sur cet article

Tous les champs sont requis
Merci pour votre contribution.

Outil fourni par l’hébergeur

De nombreux hébergeurs proposent la pré-installation sur votre espace d’un site Web clé en main. Vous n’avez plus qu’à créer le contenu de votre site via une console d’administration accessible depuis votre navigateur Internet.

Avantages : vous pouvez créer votre site Web en quelques minutes sans grandes connaissances techniques.

Inconvénients : vous êtes limité dans le choix de l’outil qui ne sera pas forcément adapté au site que vous désirez mettre en place. Le design de votre site ne sera pas très personnalisable.

Niveau requis : débutant.

Faire des suggestions sur cet article

Choisir un CMS

Un CMS  (Content management system, système de gestion de contenu en français) est une structure logicielle s’installant sur votre espace d’hébergement permettant de disposer d’un site Web dynamique clé en main. Vous disposez des sources logicielles, ce qui permet de le personnaliser selon vos besoins à condition d’avoir des connaissances dans le langage informatique PHP. Il en existe des centaines, librement accessibles, proposés par la communauté du logiciel libre. Certains hébergeurs vous proposent même de préinstaller un CMS sur votre espace.

Choisir un CMS disposant d’une communauté de développeurs et utilisateurs très active permet de trouver plus facilement réponse, via les forums, aux problèmes que l’on peut rencontrer si l’on souhaite personnaliser l’outil.

Avantages : on dispose d’outils prêts à l’emploi, personnalisables, avec la possibilité de choisir celui qui convient le mieux à ses besoins. De nombreux modules complémentaires permettant d’ajouter des fonctionnalités à son site sont généralement accessibles. La communauté assure le suivi et la mise à jour du CMS.

Inconvénients : Le grand nombre d’outils existant rend le choix difficile.

Pour vous aider à choisir votre CMS, voici deux outils élaborés par des professionnels, la société SMILE, société d'experts des architectures web et des solutions open source:

- Un document d'aide au choix d'un CMS: http://www.smile.fr/Livres-blancs/Gestion-de-contenu-et-GED/Choisir-un-CMS

- Un document comparant les principaux CMS du marché: http://www.smile.fr/Livres-blancs/Gestion-de-contenu-et-GED/Les-CMS-open-source

Niveau requis : débutant n’ayant pas peur de mettre les « mains dans le cambouis », à expert selon le degré de personnalisation que l’on veut atteindre.

Faire des suggestions sur cet article

 

s

Drupal

CMS made simple

Guppy

Dotclear

- Articles organisés en sections, puis catégories

- Archives

- Permet les articles multipages avec index

Depuis la version 1.6, plus de « sections », mais organisation en catégories emboîtables

 

- Articles organisés en catégories

- Pages organisables en sous-pages

- Archives

Nécessite un plugin pour créer des articles multipages avec index

 

- Articles

- Pages

- Livres (articles multipages avec index) en activant le module Book

- Billet de blog

Possibilité de créer de nouveaux types de contenus

- Articles organisés en catégories

- Pages

 

- Nouvelles

- Articles

- Blog

-  forum

- Photos

- livre d’or

- Billets

- Pages

Développer son propre site

Il vous est bien entendu possible de créer votre propre site de A à Z en le développant par vous-même. Ceci requiert un niveau de connaissances qui dépendra du type de site que vous désirez mettre en place.


1- HTML et CSS

Pour la création d’un site statique, ce qui peut suffire pour un site personnel basique, il faut connaître les langages HTML et CSS. Sachez toutefois qu’il existe des logiciels qui permettent de développer un site en HTML et CSS sans rien connaître de ces langages informatiques. Le principe de ces logiciels est le suivant : vous disposez d’une interface vous permettant de construire visuellement votre site en plaçant aux endroits souhaités les éléments que vous voulez voir apparaître sur votre site. Le logiciel se charge de traduire cela dans les langages HTML et CSS. C’est ce que l’on appelle des outils Wysiwyg (what you see is what you got, que l’on peut traduire par « ce que vous voyez est ce que vous obtiendrez»). Citons en deux, parmi les plus connus :

 - Dreamweaver est un logiciel de la société Adobe dont le prix exclut toute éventualité de l’acheter uniquement pour des besoins personnels.

- Il existe des produits concurrents dans le domaine du logiciel libre, notamment Kompozer.

Il est bien sûr possible de coder directement son site en HTML et CSS, il suffit pour cela d’un éditeur de texte. Les langages HTML et CSS ne sont pas très difficiles à aborder. L’HTML est un langage descriptif, c’est-à-dire qu’il se contente de décrire pas à pas ce que doit afficher votre navigateur Web. Dans ce langage, on place entre les signes < >, qu’on appelle balises, des instructions sur la façon d’afficher les données, et en dehors de ces balises ce qui doit être réellement affiché.

Voici quel en est le principe. Ce qui est écrit entre les signes < > sera, dans la réalité, rédigé dans le langage HTML. Il est rédigé ici en langage courant pour en comprendre la logique.

<affiche avec une grande taille de police et en gras > 
    Bienvenue sur mon site 
    <affiche avec une petite taille de police normale> 
    Voici un tableau présentant l’évolution du prix de l’essence 
    <construis un tableau> 
    <Crée la première ligne du tableau> 
    <écris dans la première cellule avec une grande taille de caractères et en centrant> 
    Date 
    <ferme la première cellule> 
    <écris dans la 2ème cellule avec une grande taille de caractères et en centrant> 
    Prix 
    <ferme la 2ème cellule> 
    <ferme la première ligne du tableau> 
    etc.

Voir un exemple de page HTML

On voit bien que dans ce type de structure la présentation et le contenu sont étroitement imbriqués. C’est pourquoi l’HTML ne permet de faire que des sites statiques. Grâce au langage CSS on peut renvoyer partiellement ce qui concerne la présentation dans une autre partie détaillant l’aspect que devront prendre les textes affichés.  Dans le principe, un fichier en CSS a la logique suivante (là aussi ces principes sont écrits en langage courant, un fichier CSS ayant une syntaxe spécifique):

- Tous les titres en page d’accueil doivent être écrits en grande taille et en gras 
    - Le texte ordinaire des articles en page d’accueil  doivent être écrits dans une taille normale dans la police Arial 

etc.

Voir un exemple de code CSS

body, html
{
width: 100%;
height:100%;
margin:0;
background-image: url("motif.png");
background-attachment: fixed;
}

#containt
{
position:relative;
margin: auto; /* Pour centrer la page */
width:90%;
}

#en_tete
{
position:absolute;
top:0px;
left:0px;

opacity:0.6;
-moz-opacity : 0.6;
-ms-filter: "alpha(opacity=60)"; /* IE 8 */
filter : alpha(opacity=60); /* IE < 8 */
background-color: #59a68e;
width: 100%;
height: 100px;

/*border: 3px solid black;*/
}

#menu
{
width: 120px;
position:absolute;
top:110px;
left:0px;
}

.element_menu
{
border: 2px solid black;
margin-bottom: 20px;
width: 120px;
}
.element_menu h3 /* Tous les titres de menus */
{
color: #000000;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
}

Pour les passionnés qui souhaiteraient se lancer dans l’aventure, je conseille vivement le site suivant, proposant des cours gratuits très didactiques de formation aux différents langages informatiques et accessibles même aux débutants complets, le site OpenClassrooms (anciennement Site du Zéro) à l’adresse http://fr.openclassrooms.com/

 Niveau requis: débutant à confirmé selon que l'on utilise un éditeur wysiwig ou que l'on développe en HTML et CSS.


2- PHP

 Pour créer un site dynamique, il faudra recourir au langage PHP. Le PHP est un langage procédural, c’est-à-dire en mesure d’effectuer des opérations informatiques avant d’envoyer en HTML et CSS vers votre ordinateur ce qui devra être affiché. C’est pourquoi un site comportant du PHP nécessite d’être installé sur un serveur disposant d’un système d’exploitation en mesure d’interpréter ce langage pour effectuer les opérations demandées.

Le PHP est un langage en mesure de s’intégrer dans le HTML, et en mesure de générer du code HTML.

Grâce au PHP, il est possible de complètement séparer présentation et contenu du site. Les informations à afficher sont rangées dans une base de données, et c’est uniquement au moment ou un visiteur viendra se connecter sur le site que le code PHP générera, en direction du navigateur de ce visiteur, le code HTML permettant d’afficher les données qu’il ira chercher dans la base de données, et la façon de les afficher. Vous comprenez maintenant l’importance de disposer d’un hébergement disposant d’une base de données. A noter que certains outils CMS permettent de se dispenser d’une base de données type mySQL en créant leur propre base de données sous forme de fichiers sur l’espace d’hébergement. Cela permettra d’installer un site sur des espaces d’hébergement ne proposant pas de base de données.

Si vous souhaitez vous lancer dans la programmation PHP vous trouverez sur OpenClassrooms, déjà cité, un cours complet. 

Niveau requis: expert.

Faire des suggestions sur cet article