À propos de ce site
Ce document explique l'essentiel de la réalisation technique de ce site.
- Généralités
- Évolution récente
- Langages & standards W3C
- CSS, impression & PDA
- Formulaires
- Navigabilité & rel
- Projets
- Tests
- Crédits
Généralités
J'ai créé ce site pour m'exercer au développement web. Je l'ai créé en accordant une importance particulière au respect des standards W3C, à l'accessibilité et à... la simplicité. Il est divisé en trois sections, ayant chacune un thème technique:
| Section | Thème technique |
|---|---|
| Art | JavaScript & DOM level 2 |
| Histoire | XML & XSLT |
| Recherche | Jointures SQL & PHP-OO |
Évolution récente
Au fil du temps, les standards et les langages évoluent. Les coulisses de ce site ont beaucoup changé pour accompagner cette évolution :
- Balisage sémantique
- Utilisation du format XML pour les textes de la section histoire (exemple). Convertion en XHTML par une classe PHP (exemple).
- Utilisation de PHP orienté objet : création d'une classe pour l'affichage des tableaux de résultats de recherche (exemple)
- Suppression des balises et attributs HTML de présentation, suppression des mises en page par des tables, utilisation systématique de CSS 2.1 pour la présentation
- Passage au XHTML 1.0
Langages & standards W3C
Voici une liste des langages utilisés sur ce site avec des exemples.
| Langage | Utilisation | Obs. |
|---|---|---|
| XHTML 1.0 | Balisage sémantique, métadonnées |
|
| JavaScript 1.5 | Section art : rollovers, popups (exemple) | |
| PHP | Images à la volée (exemple), JavaScript à la volée (exemple), traitement XML (exemple) | |
| CSS 2.1 | Quatre présentations du site (dont PDA et impression) |
|
| XML 1.0 | Section histoire (exemples XML+CSS et XML+XSL), RSS 2.0 | ![[Valid RSS]](../images/valid-rss.png "Validate my RSS feed") |
| MySQL | Particulièrement la section recherche |
CSS, impression & PDA
Ce site bénéficie de quatre feuilles de style. Deux sont dédiées à la présentation sur écran, l'une à l'impression et une autre aux PDA (320*240, palette web). Les navigateurs récents supportent les feuilles de style pour l'impression. Sur ces navigateurs, cette feuille de style est automatiquement activée par les commandes « imprimer » et « aperçu avant impression ».
Formulaires
Pour faciliter les recherches, les formulaires bénéficient des caractéristiques suivantes. Exemple.
- la plupart des champs ont une valeur par défaut
- pour chaque entrée, une aide contextuelle s'affiche avec un exemple
- des scripts vérifient les entrées en essayant de corriger les erreurs
Navigabilité & rel
Ce site utilise les liens de relation (rel et rev). Cette technique permet d'établir des liens logiques entre documents : premier, précédent, suivant, dernier, plan du site, aide, recherche, etc. La capture d'écran (réalisée avec Opéra) montre un exemple avec un document de la section histoire.
Projets
Les standards continuent à évoluer ; ce site aussi. Voici les principaux projets techniques.
- "unobtrusive JavaScript" (JDN Développeurs)
- "graceful degradation" (Dan's Web Tips)
Tests
Avant de mettre les pages de ce site en ligne, je les ai testées en local. Mes derniers essais ont été réalisés sur ces configurations:
- Systèmes d'exploitation : Debian Etch 5.0 (serveur) ; Windows XP, Vista et Seven
- Environnement : Serveur Apache 2.2, PHP 5.2, MySQL 5.0
- Navigateurs : Firefox 3.6, Iceweasel 3.0, MSIE 6.0, 7.0 et 8.0, PSP
Crédits
J'ai réalisé l'essentiel des codes et programmes de ce site. Mais je me suis parfois fait aidé.
Merci à Aline Blanc pour le moteur de recherche en PHP dont le code est paru dans l'article qu'elle a écrit dans le Hors-série no 15 de Login:.
Merci à la «Communauté du Libre», ensemble plus ou moins informel de personnes de tous pays qui mettent à disposition des logiciels (OS, langages de programmation, éditeurs) ou des documents (textes, images) sur Internet sans copyright et souvent gratuitement. Sans eux je n'aurais probablement pas pu réaliser ce site... ou plus difficilement :-)
Merci à Scriptaculous pour son framework JavaScript grâce auquel l'autocomplétion des formulaires à été réalisé.