Présentation
Il est courant de devoir travailler sur des applications existantes pour corriger des bugs ou implémenter de nouvelles fonctionnalités. Etant donné que le code nous est étranger il est difficile d’appréhender le projet et il faut rapidement mettre les mains dans le cambouie et étudier le code sous notre nez pour comprendre les mécanismes mis en place. Cela est encore plus compliqué lorsque l’on s’aperçoit qu’il y a du code dans tous les sens et qu’aucune architecture ou modèle de conception n’a été utilisé, il y en a partout et vous devez faire avec … ça sent l’histoire vécue ? … oui 
Pour que personne ne puisse dire un jour que votre code ressemble à un plat de spaghettis, voici un moyen que j’utilise, et que je retrouve sur différents forums, qui permet de bien organiser la partie « vue » de l’architecture MVC (Modèle-Vue-Contrôleur) et particulièrement vos pages web.
Modèle, Vue, Contrôleur
Explications
La base des pages web est l’HTML ou XHTML pour une réglementation du code un peu plus strict. Pour la mise en page l’utilisation des feuilles de style CSS est indispensable, et l’utilisation de JavaScript permet de rendre les pages du site web interactives et permet l’utilisation d’AJAX.
Voici donc les principaux langages que composent les sites web côté client d’aujourd’hui (HTML, CSS et JavaScript) et c’est pourquoi il est indispensable de bien s’organiser dans la façon de les utiliser, voici une répartition simple et efficace :
- Structure : (X)HTML (page web)
- Comportement : JS (javascript)
- Présentation : CSS (feuilles de style)
JavaScript & (X)HTML
- Il est facile de mélanger structure et comportement, en voici un exemple lorsqu’il s’agit de lancer deux fonctions javascript après le chargement complet de la page, une astuce pour s’en rendre compte rapidement est de retirer tout le code JavaScript des balises HTML :
au lieu de
<body onload="functionOne(); functionTwo()"/>
préférez
<script type="text/javascript">
window.onload = function () {
functionOne();
functionTwo();
}
</script>
<body/>
- L’utilisation de fichiers javascript permet non seulement de pouvoir les réutiliser, mais aussi de les mettre en cache une fois placés dans l’en-tête de la page (balise <head>), on a donc tout à y gagner :
au lieu de
<body>
<script type="text/javascript">
function userClick1() { ... }
function userClick2() { ... }
</script>
</body>
préférez
<head>
<script src="userClicks.js" type="text/javascript"></script>
</head>
CSS & (X)HTML
- Les feuilles de style permettent de gérer la position des éléments, la couleur, la taille, les images, etc. , mais son utilisation abusive à l’intérieur même des balises HTML ne permet pas une réelle souplesse lors d’un changement de charte graphique ou une envie de changer totalement l’apparence d’un site, il faut pour cela externaliser les feuilles de style dans un ou plusieurs fichiers CSS et les importer dans l’en-tête de la page :
au lieu de
<body>
<div style="display:none; font-weight:bold; color:red; margin-top:10px"></div>
</body>
préférez
<head>
<link rel="stylesheet" type="text/css" href="formats.css"></link>
</head>
<body>
<div id="divId"></div>
</body>
avec le fichier formats.css :
#divId {
display:none;
font-weight:bold;
color:red;
margin-top:10px;
}
Conclusion
Cela parait simple mais rares sont les projets qui respectent ce minimum et du coup maintenir les pages de ces sites reste un challenge. Une fois cette séparation des couches mise en place, la structure de vos pages ne contient plus de parasites, les comportements de la page sont isolés et maintenables ainsi que votre présentation.
Pour aller encore plus loin, je vous conseille de lire cet excellent article http://www.phpied.com/ajax-mvc/
Cet article a été écrit par :
Mimie – qui a déjà rédigé 123 posts sur Des Geeks et des lettres.
Passionné d'informatique et développeur JavaEE de métier, je me consacre principalement à écrire des billets sur les sujets du Web et de la programmation Web. Ce blog est un espace qui me permet de partager mes découvertes avec vous et me sert accessoirement de pense bête !
Affichez votre portrait
{ 3 commentaires… à vous de vous exprimer ! }
Encore un excellent article sur les pages web en HTML, non dénué d’humour dans la mise en forme (j’ai bien aimé le « ça sent le vécu » et le plat de spaghettis
)
Merci Greg
rencontrant ces mêmes problèmes sur le projet professionnel actuel, je me suis permis de faire un clin d’oeil ^^
Tiens… on serait pas sur le même projet ??? Ah si
Je note tout ça pour le prochain projet