PHPCrossRef est un véritable carrefour des références des variables, des fonctions, des classes et des constantes utilisées dans les projets Open Source réalisé avec PHP. A ce jour, quatre CMS dont Drupal, Joomla!, Textpattern et WordPress ainsi qu’un framework PHP avec Zend Framework sont disponibles. L’idée est de permettre de naviguer parmi les fichiers sources. Un clic sur chaque élément référencé redirige vers la liste des fichiers qui l’utilise.

Voici les CMS et autres projets que je vous laisse découvrir :

• Drupal (Drupal 6.20, Modif. du 2010-12-15),
• Joomla! (1.5.22 Stable Release [03-November-2010),
• Textpattern (Changes in 4.3.0),
• WordPress (Version 3.1),
• Zend Framework (Zend Framework 1.11.2).

Articles sur le même sujet

• Supprimer l’attribut title dans les catégories et les pages WordPress avec jQuery ou PHP
• Installer Drupal (ou les tribulations d’un WordPressien en Drupalie)
• Le petit journal du web — WordPress, développement web, etc.
• Classes CSS générées par WordPress pour les images
• 23 listes pour Webdesigners

Vous le savez certainement, les fichiers Javascript ou CSS sont placés dans le cache du navigateur pour être réutilisés sans devoir aller chercher les mêmes informations sur le serveur. C’est assez pratique car les fichiers en question ne sont téléchargés qu’une fois. Mais si vous modifiez ces fichiers après la mise en ligne, c’est la version placée en cache qui continuera de s’afficher jusqu’à ce que l’utilisateur vide son cache d’une façon ou d’une autre.

Pour y remédier, Damien Ravé nous propose une utilisation judicieuse de la fonction PHP filemtime() qui renvoie la date de la dernière modification d’un fichier pour recharger le cache CSS ou JS :

<script type="text/javascript" src="js/script.js?v=<?php echo filemtime('js/script.js'); ?>">
<link rel="stylesheet" type="text/css" href="css/ecran.css?v=<?php echo filemtime('css/ecran.css'); ?>">

Articles sur le même sujet

• WordPress de A à Z — E comme Extensions (les plugins)
• Quelques notes sur les fonctions de l’intégrateur web et de l’intégratrice web
• 100+ comptes Twitter pour webdesigner
• Feuille de style CSS conditionnelle avec Conditional CSS
• Quelques notes sur la bibliothèque Javascript IE7 de Dean Edwards

Je vous ai rapidement parlé de The HTML Framework Project qui propose de réfléchir ensemble à la mise en place d’un environnement de travail pour rendre le démarrage d’un projet de site web moins ennuyeux. Le projet en est à la phase 1.1 : définir. Il est évident que produire un bon code HTML est un métier, un art qui peut difficilement se faire comme on élève des poules en batteries. Pour autant, il doit être possible de dégager parmi les bonnes pratiques de travail, quelques concepts récurrents que l’on pourrait utiliser au démarrage d’un projet.

C’est quoi un framework HTML, au juste ?

Un Framework HTML devrait inclure une structure de fichiers normalisée, quelques trucs pour mettre les navigateurs au garde-à-vous et des fichiers HTML servant de fondations pour des maquettes différentes. C’est aussi simple que ça : un jeu de fichiers et de répertoires pour amorcer le travail dans la joie et la bonne humeur ;)

Sur quelles bases construire ce framework ?

S’assurer que le Framework HTML est conforme avec les points suivants :

• Éviter les tables pour la présentation,
• Séparer le fond et la forme,
• Réserver la partie présentation aux CSS,
• Prendre en considération la « sémantique » des balises HTML,
• Intégrer des noms de classes signifiants,
• Valider en accord avec les spécifications du W3C.

Un mot d’ordre : la flexibilité

Pour que ce framework HTML soit utile aux développeurs, il faudra :

• Ne pas gêner les web designers (les graphistes doivent pouvoir laisser libre-court à leur créativité),
• S’adapter aux contraintes propres d’un projet (être un plus, pas un obstacle),
• Rester léger en excluant les fonctionnalités superflues,
• Être extensible pour faire face aux besoins futurs.

Participer à la discussion

On parle beaucoup (ou pas) de HTML5. J’ai donc lancé l’idée de bâtir les fondations du framework sur la base des spécifications du HTML5, notamment pour la partie structure en accord avec la partie sections du W3C :

• section — Chapitres, onglets des menu, etc. La page d’accueil d’un site web pourrait être découpée en sections : introduction, news et informations de contact.
• nav — Menu principal ou secondaire d’un site web.
• article — Partie indépendante d’une page, d’un document ou d’un site : contribution sur un forum, article de magazine, billet de blog, commentaire, etc.
• aside — Barre latérale ou contenu adjacent,
• header — Regroupement de sections ou de balises h1, h2, etc.
• footer — Pied de page d’une section,
• address — Informations de contact, idéalement placées dans le footer.

Dans le framework HTML, ces éléments pourraient se traduire par :

<div id="header></div>
<div class="article"></div>
<p class="aside">

Les autres éléments de HTML4 étant utilisés — comme d’habitude — de manière à coller au plus près du sens véhiculé par le contenu.

Pour conclure

L’avantage de calquer les id et les class sur les balises prévues par HTML5, c’est de voir loin tout en s’adaptant dès maintenant aux nouvelles habitudes de structuration des contenus avec HTML5. Et comme le suggère jdgraffam il est envisageable que le framework définisse un plan pour passer du framework au HTML 5 quand ce dernier sera pris en compte par les navigateurs, tout en restant rétro-compatible !

Faites tourner et n’hésitez pas à partager ce que ce projet vous inspire. Si vous avez des idées et quelques connaissances en anglais, je vous invite à commenter ce billet, ou ici, si vous êtes plus à l’aise en français ;)

Articles sur le même sujet

• HTML5 — Pourquoi «header» et «footer» ne créent pas de «sections»
• HTML5 — Et si on évitait la balise «section» dans une balise «article» ?
• HTML5 — Une orientation encore trop « littéraire » et pas assez « web »
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Quelques notes — Programme de formation HTML & CSS