Contenu | Recherche | Plan du site | Accessibilité | Contact

Documentation

Handbook - Webmaster

Créer un site web from scratch

Ce petit essai décrit la création de la base d'un site web en partant de rien (from scratch) et en utilsant uniquement des logiciels libres sur un système d'exploitation libre tels que GNU/Linux ou BSD. Cet essai résume les étapes et les choix que Pankso a fait pour la création du site web de Libordux.Org. L'idée est de commencer par créer la structure de base avec l'arborescence des répertoires et les fichiers minimaux en se fixant une ligne de conduite. Les noms des répertoires et fichiers sont tirés de l'anglais, c'est souvent des mots plus court et sans accents. La langue de Shakespear est aussi utilisée dans le code source des pages lors du nommage des identités, classes CSS, fonctions PHP, etc. La version xHTML 1.0 DTD Strict est préférenciée avec un code valide respectant les standards du web, ce choix permet de construire un site moderne tout en étant compatible avec tous les navigateurs web. Créer des sites respectant les standards permet d'avoir un code source clair, bien plus léger, et plus facile à maintenir. Creer un site depuis la base permet d'avoir une connaissance complète, une maîtrise fine de tous les éléments, et un contrôle général du site web.

Prérequis

Pour créer un site internet il faut savoir utiliser un éditeur de texte et un navigateur web. Les balises du langage HTML/xHTML peuvent s'apprendre au fil du temps et en fonction des besoins. Il existe de nombreux éditeurs de texte et IDE disponibles sous licence libre, que se soit en mode texte/ncurses ou en mode graphique, le choix ne manque pas. Le site de Libordux.Org est codé avec l'IDE Geany et l'éditeur de texte avancé GNU Nano, installés par défaut sur le mini LiveCD de SliTaz et distribués sous forme de paquets par les distibutions GNU/Linux tels que Debian, PCLinuxOS, ou Fedora. La plus part des éditeurs/IDE proposent la colorisation syntaxique des balises permettant une lecture plus simple, rapide, et agréable du code source. Geany fournit aussi la complétion automatique du code, le pliage/dépliage des balises, l'ôuverture de plusieurs fichiers dans des onglets, sélecteur de couleurs intégré, et bien plus. Pour tester le rendu des pages, il est vivement conseillé d'utiliser différents navigateurs web graphique et texte, tels que Firefox, IceWeasel, Konqueror, Links 2, Dillo, Lynx, ou encore Retawq.

Répertoires et fichiers de base

Le premier répertoire à créer est la racine du site, il contiendra tous les sous repértoires, la page principale (index), le plan du site, le fichier robot.txt, et la feuille de style CSS. La gestion d'un site peut se faire en ligne de commandes via un terminal X ou une console Linux, pour créer et se placer dans un répertoire nommé website: 

 $ mkdir website && cd website

L'arborescence d'un site web devrait être aussi structurée que celle d'un système GNU/Linux ou BSD avec des noms simples et significatifs. Les images dans un réperoire /images et les scripts/fichiers à inclure dans /include. L'utilisation d'un répertoire /devel permet de stocker une page modèle, un fichier ChangeLog, et divers informations utiles au(x) développeur(s) du site. La création d'un fichier template.html va servir à écrire les premier bouts de code xHTML, au final ce fichier sera utilisé pour créer de nouvelles pages dans le site. Le fichier style.css est une feuille de style CSS déstinée à contenir le graphisme et les règles de mise en page appliquées à l'ensemble du site web: 

 $ mkdir images include devel
 $ touch devel/template.html
 $ touch style.css

Les répertoires et fichiers de base étant présents, les premières lignes de code peuvent être écrites. Pour voir le travail et éditer la page en même temps, il suffit d'ouvrir le fichier avec son éditeur de texte et son navigateur web préféré. Pour afficher des modifications il faut enregistrer le fichier et actualiser la page dans son navigateur web. Le code d'une simple page modèle template.html au format xHTML 1.0 peut tenir sur seulement 16 lignes: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
    <title>Template</title>
    <meta http-equiv="content-type" content="text/html; windows-1251" />
    <link rel="stylesheet" type="text/css" href="../style.css" />
</head>
<body>
<div id="content">
<h1>Titre</h1>
<p>
Du texte dans un paragraphe.
</p>
</div>
</body>
</html>

Cette simple page template.html est liée à une feuille de style CSS permettant de créer quelques règles de mise en page, et de poser les bases du graphisme avec ou sans images. Un fichier CSS style.css de base donnant un peu de style à la page modèle: 

body {
    font: 90% sans-serif, vernada, arial;
    margin: 0;
    background: #222222;
    color: black;
    }
#content {
    background: white;
    color: black;
    margin: 40px;
    padding: 20px;
    }
h1 {
    color: #3F4C6B;
    background: white;
    }

Le travail peut être admiré en ouvrant ou en actualisant la page template.html située dans le répertoire devel/ du site web. Par la suite, le travail peut continuer en ajoutant du code CSS à la feuille de style, en créant un menu dans la page xHTML, ou en continuant à lire cette page. The Gimp et mtPaint sont de très bon choix pour la réalisation d'images déstinées au graphisme du site, pour la créations d'un logo, ou pour la retouche de photos. Pour utiliser la puissance des scripts PHP il suffit de copier/renommer la page template.html en template.php, et d'ajouter divers bouts de code en langage PHP. Libordux.Org dispose d'une page modèle static (template.html) utilisée pour écrire de la nouvelle documentation destinée au site web.

Fichier robots.txt

Le fichier robots.txt est un fichier texte, ASCII, contenant des commandes à destination des moteurs de recherche, il se place à la racine du site. Sa fonction est d'informer les robots d'indexation des pages qui peuvent ou ne peuvent pas être visitées. Tous les moteurs de recherche commencent par chercher ce fichier robots.txt lors de l'exploration d'un site, blog, CMS, ou wiki. Un fichier robots.txt n'est pas obligatoire, mais il ne doit pas contenir de lignes vides. Attention à la sécurité car tout le monde peut voir ce fichier, il pourrait même aider certaines personnes malveillantes.

Les directives robots.txt

Les fichiers robots.txt on leur propre syntaxe, elle supportent deux directives: User-Agent: et Disallow:. Pour préciser le robot concerné par les directives il faut utiliser User-Agent, vous pouvez utiliser la valeur * signifiant que les directives s'appliquent à tous les moteurs de recherche. Pour indiquer les pages à exclure de l'indexation, il faut spécifier le chemin complet en commençant par un slash /.

Exemple d'un fichier robots.txt

Cette exemple s'applique à tous les robots (*), il exclu tout le répertoire security et le fichier news.html de l'indexation des moteurs de recherche: 

User-Agent: *
Disallow: /security/
Disallow: /posts/news.html
Disallow:

Favicon image

Le favicon est la petite image qui se trouve dans la barre de navigation et dans les marques pages ou favoris. Pour créer un favicon, vous pouvez utilisé le générateur d'images favicon avec l'une de vos créations sur dynamicdrive.com. Pour afficher un favicon classique, il faut ajouter un lien vers l'image .ico du favicon entre les balises <meta>. Si vous désirez avoir une image animée au format GIF, il faut spécifier le type d'image type="image/gif": 

<link rel="shortcut icon" href="favicon.ico" />

Extension web-developer

Le plugin web-developer fournit tout un set d'outils déstinés au développeurs web ou webmaster, il permet l'édition du code CSS/xHTML avec modification en temps réel, l'affichage d'information sur les images ou les formulaires, la validation direct de ses pages, et bien plus encore. Web Developer est disponible sous forme d'un add-on directement installable dans Firefox depuis le site web officiel de Mozilla: https://addons.mozilla.org ou via le site web de l'auteur de Web Developer: http://chrispederick.com/work/web-developer/. L'outil fonctionne avec Firefox/Seamonkey et IceWeasel. Sur Debian il existe un paquet officiel nommé iceweasel-webdeveloper disponible sur les miroirs et facilement installable via la commande: 

 # aptitude install iceweasel-webdeveloper

BBClone - Outil de statistiques web basé sur PHP

L'outil libre de statistiques internet ou web counter BBClone (http://bbclone.de/) est basé sur le langage de programmation PHP, disponible sous licence libre GNU GPL, il ne nécessite aucune base de donnés SQL. BBClone est facilement installable en quelques minutes, il suffit de télécharger l'archive source depuis le site officiel, désarchiver, changer quelques permissions, créer quelques fichiers, et configurer l'outil via un seul fichier PHP. Pour télécharger et préparer BBClone en quelques commandes shell directement dans le répertoire d'installation du site web déstiné à être monitoré: 

 $ wget http://bbclone.de/dist/bbclone-0.4.9b.tar.gz
 $ tar xzf bbclone-0.4.9b.tar.gz
 $ mv bbclone stats

Pour que BBClone puisse écrire les informations sur les visites du site il faut que les scripts puissent écrires dans les fichiers contenus dans le répertoire var/ de BBClone renomé stats: 

 $ chmod 666 stats/var/counter*.inc
 $ chmod 666 stats/var/access.php
 $ chmod 666 stats/var/last.php
 $ chmod 666 stats/var/.htalock

Il ne reste plus qu'a tester le bon fonctionnement de BBClone en insérant directement dans une page du site, ou via un fichier include, le code PHP monitorant les pages et définnissant le chemin absolu du répertoire d'installation de BBClone par la variable _BBCLONE_DIR: 

<?php
define("_BBCLONE_DIR", "/path/to/stats/");
define("COUNTER", _BBCLONE_DIR."mark_page.php");
if (is_readable(COUNTER)) include_once(COUNTER);
?>

Pour utiliser un fichier htaccess avec Apache s'occupant d'insérer le code de BBClone monitorants les pages PHP et xHTML, il faut créer un nouveau fichier PHP contenant le code PHP spécifique à BBClone. Ensuite il faut ajouter des lignes au fichier htaccess principale situé à la racine du site, en adaptant le chemin vers le fichier count.php contenant le code PHP spécifique à l'outil de statistiques web: 

AddHandler application/x-httpd-php .htm .html
<FilesMatch "\.(html?)$">
php_value short_open_tag "Off"
php_value auto_append_file "/path/to/stats/count.php"
</FilesMatch>
<FilesMatch "\.(php)$">
php_value short_open_tag "Off"
php_value auto_append_file "/path/to/stats/count.php"
</FilesMatch>

Le fichier de configuration de BBClone se nomme config.php et se trouve dans le répertoire conf/. Ce fichier PHP peut s'éditer graphiquement, ou via un terminal avec l'éditeur de texte GNU Nano et la commande: 

 $ nano stats/conf/config.php