L'équipement

Avant de se lancer, il vaut mieux s'assurer que l'on dispose de tout le nécessaire, soit :

Les propositions données dans cette page ne sont pas impératives. Chacun peut faire ses choix. Toutefois ceux qui sont présentés ici ont été éprouvés et se sont révélés adaptés.

Cependant, avant de s'équiper, il faut avoir une idée du type de site à construire.

Quel type de site ?

La réponse à cette question est importante car un site dynamique nécessite un investissement plus important. En effet il faudra réaliser des programmes côté serveur et probablement utiliser une base de données. Cela nécessite un équipement logiciel et une documentation plus importants ainsi qu'un hébergement adapté.

Ici, nous voyons les choses en grand. Nous considérons que nous développons un site dynamique. De plus, afin de ne pas trop s'éparpiller, nous considérons que le site utilisera le langage PHP et le système de gestion de base de données MySQL car ce sont les plus répandus.

Le matériel

Bien évidement, il faut disposer d'un ordinateur et d'un accès à Internet. Internet n'est toutefois pas toujours indispensable car on peut développer le site localement et le transférer plus tard. En revanche, Internet est utile pour accéder à la documentation en ligne.

L'idéal pour un bon confort est d'utiliser deux ordinateurs en réseau local. L'un sert pour développer (créer), l'autre pour tester les pages produites.

Le système d'exploitation utilisé a peu d'importance car la plupart des logiciels présentés ci-dessous existent pour Linux, Microsoft Windows et Apple Macintosh (ce sera précisé).

Les logiciels

Si, à priori, il n'est besoin de rien car le système dispose d'un éditeur de texte et d'un système de transfert de fichiers vers le serveur, il faut reconnaitre que cette situation est très pénible. Il vaut mieux avoir des logiciels adaptés et sympathiques à utiliser.

Navigateur web

Le navigateur à deux rôles : accéder à la documentation en ligne et tester les pages du site. Pour lire la documentation n'importe quel navigateur moderne convient.

En revanche, pour tester les pages du site, il est nécessaire d'utiliser plusieurs navigateurs. En effet on ne peut pas savoir quel sera celui de l'internaute. Le minimum est de tester avec Internet Explorer et Mozilla Firefox, mais il est utile de consulter les pages avec Chrome, Opéra et Safari. En effet les navigateurs n'interprètent pas toujours le code HTML de la même façon, à fortiori si on utilise le JavaScript. Il faudrait aussi avoir différentes versions de chaque navigateur. Cela n'est pas vraiment possible, en particulier il est difficile d'installer plusieurs versions d'Internet Explorer sur la même machine. Eventuellement, on peut (si le site est mis en ligne sur Internet) demander à des amis diversement équipés de faire les tests.

Mozilla Firefox est très bien adapté à la mise au point notamment des passages en JavaScript. En effet, il est possible de lui adjoindre des modules complémentaires très utiles comme Firebug ou Web Developper qui permettent de détecter les défauts de fonctionnement des pages. Notons aussi le module YSlow pour avoir une idée des performances des pages (temps de chargement, optimisations).

Editeur de pages HTML

Son rôle est de faciliter la composition des pages et de produire le fichier HTML correspondant. On l'utilise comme un traitement de texte. On voit à l'écran ce qui apparaitra (ou devrait apparaitre) sur l'écran du navigateur de l'internaute.

A ma connaissance seuls trois tels logiciels récents, libres et gratuits existent, malheureusement ils ne sont pas parfaits.

Amaya

http://www.w3.org/Amaya/ (la page est en anglais, mais l'éditeur peut être configuré en français).

Cet éditeur développé par le W3C (World Wide Web Consortium), l'INRIA est la référence en matière de conformité des pages avec les standards officiels.

Cependant, son utilisation n'est pas très intuitive, notamment avec les feuilles de styles externes.

KompoZer

http://kompozer.net/ (la page est en anglais, mais l'éditeur peut être configuré en français).

La version proposée aujourd'hui (août 2010) sur ce site est la 0.8b3 qui est une version en cours de développement. La dernière version stable est la 0.7.10 que l'on peut trouver sur le site à l'onglet "Download".

Cet éditeur est issu de la communauté Mozilla. Il a la particularité de générer le code HTML à partir d'une représentation interne arborescente de la structure de la page sans mise en forme, ce qui fait que la lecture du source (code HTML) de la page est particulièrement pénible. Cela est résolu à partir de la version 0.8.

Par ailleurs, l'insertion de code PHP à certains endroits pose quelques problèmes.
En revanche, il est, comme Firefox, extensible. Et l'on peux résoudre les deux dernières difficultés avec le module complémentaire "HandCoder" (non compatible avec la version 0.8 de Kompozer).

Voir les extension possibles ici : http://extensions.geckozone.org/KompoZer

Malgrè ses défauts (et quelques bugs), c'est l'éditeur qui est utilisé pour composer les pages de ce site (en version 0.7.10 et avec HandCoder).

BlueGriffon

Probable successeur de KompoZer dont il reprend les principes essentiels (génération du code), il est en cours de développement. La version 0.8 du 30 décembre 2010 est opérationnelle, toutefois l'insertion de code PHP n'est pas gérée (pour le moment).

Ou d'autres (commerciaux).... Il en existe un grand nombre, la référence reste cependant Adobe Dreamweaver, onéreux et pas pour les linuxiens.

Les exercices et démonstrations proposées sur ce site sont présentés avec les commandes de KompoZer.

Transfert de fichiers avec le serveur

La gestion des fichiers (pages) sur le serveur web ainsi que leur transfert avec la machine locale se réalise généralement avec le protocole FTP (File Transfer Protocol). Il faut donc disposer d'un logiciel client pour ce protocole. Les systèmes d'exploitation en proposent un qui, le plus souvent ne fonctionne qu'en ligne de commande. Il est donc plus agréable d'en utiliser un disposant d'une interface graphique. Le choix en libre et gratuit ne manque pas, en voici deux qui sont complets et faciles à utiliser.

Fillezilla

WinSCP (comme son nom le suggère, ne fonctionne que sous Windows)

Ces deux logiciels sont assez semblables. Ils présentent deux panneaux d'explorateur, l'un pour la machine locale, l'autre pour le serveur. On gère les fichiers comme avec un explorateur classique. Le transfert se fait en glissant le fichier d'un panneau à l'autre.

Editeur de texte

Il est utilisé pour "retoucher" le code HTML généré mais surtout pour écrire les passages de programmation. en PHP et en JavaScript. Par conséquent on appréciera que l'éditeur nous apporte quelques aides en programmation.

Notepad++ (uniquement Windows, les linuxiens pourront se tourner vers SciTE)

Très léger : il se lance rapidement, donc utile pour de petites retouches. Il dispose du minimum pour la programmation.

Ce minimum étant :
- La coloration syntaxique : les mots sont affichés en différentes couleur selon le langage et leur rôle.
- L'appariement : lorsque l'on sélectionne un symbole d'une paire (comme les parenthèse), les deux sont mis en valeur.
- L'auto-complétion : on tape le début d'un mot-clef ou d'une fonction d'un langage, l'éditeur propose la suite.

NetBeans ou Eclipse

Ce ne sont pas de simples éditeurs mais des EDI (Environnement de Développement Intégré). Ils intègrent un explorateur de fichiers avec ses principales fonctions et des outils pour faciliter la gestion de projet.

NetBeans, à l'origine conçu pour programmer en Java, s'est ouvert à d'autres langages (à choisir au moment du téléchargement).

Ils disposent aussi de la documentation HTML, PHP et JavaScript et détectent les erreurs de syntaxe au cours de la frappe.

Serveur web

Si l'on utile pas la programmation côté serveur (PHP), il est inutile d'installer un serveur web sur son ordinateur. Les pages peuvent être consultées directement dans le navigateur.

En revanche, si les pages sont construites par le serveur à la demande, il est nécessaire de pouvoir le faire en local. Un serveur web local avec l'interpréteur PHP et le gestionnaire de bases de données MySQL permettra la réalisation de tests en local.

Certains considèrent qu'il n'est pas utile de disposer d'un serveur local car il est possible de transférer les pages dès leur finalisation vers le serveur distant.

Certes, cela évite une phase intermédiaire, donc est plus rapide. Cependant les tests péliminaires ne sont pas possibles. Si le serveur est en exploitation, il faut êre sûr de soi !

En revanche, cette méthode est la seule intéressante lorsque le développement est fait par un groupe de concepteurs . Dans ce cas il est utile d'utiliser un serveur distant de tests et un serveur distant de production.

Il convient bien sûr de trouver un serveur local aussi ressemblant que possible du serveur distant. Ce choix doit donc être fait en parallèle avec celui de l'hébergement. Dans la plupart des cas, on s'oriente vers l'ensemble :

XAMPP

EasyPHP

Ne fonctionne que pour Windows et comme son nom l'indique est simple à mettre en oeuvre.

Même si l'installation est assez simple, il sera souvent nécessaire d'intervenir dans les fichiers de configuration afin de rendre le serveur local le plus conforme possible au serveur distant.
Généralement, pour des raisons de sécurité, le site n'est accessible que depuis la machine sur laquelle est installée le serveur local (localhost). Si l'on utilise un autre ordinateur pour réaliser les test, il faudra retirer cette restriction. Il faudra quant même vérifier que son routeur de donne pas accès au serveur local depuis l'extérieur (blocage du port 80). En général c'est la configuration par défaut des routeurs.

Logiciels graphiques

Bien que ce soit un peu hors sujet ici, il sera probablement nécessaire d'intervenir sur les images à mettre en ligne.

GIMP

http://www.gimp.org/ (le site est en anglais, mais le logiciel peut être configuré en français).

Un grand classique du libre pour la retouche d'image. Il est très complet mais demande un peu d'apprentissage.

Inkscape

Liens utiles

La documentation

Il est traditionnel d'acquérir des livres traitant du sujet de réalisation de sites web ainsi que des langages utilisés pour cela.

Cependant, le web est une source importante pour ce type d'information, voici une petite liste de sites intéressants sur ces sujets (en français sauf indication contraire).

Pour ceux qui aiment la précision et qui n'ont pas peur des documentations très techniques (mais tout autant complètes).

Spécifications HTML
http://www.la-grange.net/w3c/html4.01/cover.html
Spécifications dur les feuilles de styles (CSS)
http://www.yoyodesign.org/doc/w3c/css2/cover.html
Référence du langage Javscript (sans le DOM)
https://developer.mozilla.org/fr/R%C3%A9f%C3%A9rence_de_JavaScript_1.5_Core
Référence du DOM (Document Object Model, les fonctions de Javascript)
https://developer.mozilla.org/fr/R%C3%A9f%C3%A9rence_du_DOM_Gecko
Documentation du serveur Apache 2.2
http://httpd.apache.org/docs/2.2/

Ne pas oublier aussi l'encyclopédie en ligne Wikipédia qui, bien que généraliste, est particulièrement fournie dans le domaine de l'informatique.

Documentation des logiciels

La grande majorité des logiciels disposent de leur documentation intégrée, on y accède en utilisant la touche 'F1' du clavier ou par le menu "aide" ou "?". Il s'agit généralement d'un manuel de référence.

Il est également possible de trouver sur le web nombre de sites d'aide et de didacticiels.

Sites outils

Les équipements des internautes.

Il est très utile d'avoir quelques idées sur les navigateurs, les systèmes et les résolutions d'écran utilisés, afin d'adapter son site au moins aux équipements les plus courants.

Toutefois, il faut prendre garde que l'étendue de ces statistiques et parfois imparfaite et ne couvre pas toujours la même catégorie de population que celle que vous ciblez. Il sera donc utile de disposer sur votre site d'un système d'observation générant les statistiques sur l'équipement des internautes qui vous visitent.

Générateur de "faux texte"

Lors du développement de la maquette du site, il est utile de pouvoir "remplir" quelques pages de texte. Mais comme ce n'est pas encore le moment d'y placer le contenu, il est intéressant de disposer de "faux texte" pour le remplissage.

Performances du site

Pour ceux (tous ?) qui souhaitent développer un site réactif, où les pages se chargent rapidement, voici un outil de test :

Utilisez l'onglet "New test", entrez l'adresse di site à tester, complétez les autres rubriques, en particulier cochez la case "Keep test results private " si vous ne souhaitez pas que l'adresse de votre site soit enregistrée dans la page historique de "WebPagetest" et cliquez sur le bouton "submit" en bas de la page.
Il faut attendre quelques instants pour obtenir les résultats.

Mais ne pas oublier le module complémentaire YSlow de Mozilla Firefox qui donne de bonnes indications.

Hébergement

Ici pas de publicité donc pas de recommandations ni de liens, juste quelques informations.

Les hébergeurs gratuits sont en disparition. La plupart des rares qui restent insèrent de la publicité dans les pages de vos sites.

* Utiliser le "site perso" de son fournisseur d'accès Internet. En effet ceux-ci offrent habituellement cette prestation gratuitement. Il convient toutefois de vérifier que cette possibilité correspond à ce que l'on veut produire, en particulier pour un site dynamique avec base de données (PHP et MySQL sont-ils possibles ?).

* Installer son propre serveur. En effet, on a vu que l'on trouvait librement les logiciels qui le permettent. Cependant, il convient de réaliser que ce serveur doit être toujours en fonctionnement (en bon état de marche), qu'il en est de même de l'accès Internet (qui doit aussi disposer d'une bonne bande passante) et qu'il est fortement souhaitable de disposer d'une adresse IP fixe. L'installation et la maintenance d'un serveur web de production n'est pas non plus toujours très simple, mais cela peut être sous-traité.

* Louer un hébergement payant (solution classique). Si on choisi un prestataire renommé, on n'aura pas de problèmes de maintenance et une bonne qualité de prestation. Souvent, le nom de domaine est compris dans la prestation et on peut disposer de services annexes (service de messagerie). Il y a deux possibilités différentes par leurs fonctions, leurs performances et... leur coût.

Equipement