Créer un site web dynamique et le rendre accessible
Vous souhaitez concevoir votre propre site web ? Vous avez envie ou besoin de quelque chose de plus personnalisable et optimisable qu'un blog ? Oui ? Alors sautez le pas ! Entrez dans le monde merveilleux de la Conception Web !
Si vous êtes débutant dans ce domaine, vous apprendrez ici comment concevoir de A à Z les fondations d'un site web dynamique et comment le rendre accessible au plus grand nombre. L'Accessibilité ! Cheval de bataille (et non de Troie...) du World Wide Web Consortium, plus connu sous l'abréviation W3C. Lors de la conception d'un site web, il est en effet très important de respecter certaines règles de base quant à la structure de vos pages. Ces règles sont appelées la sémantique web.
Il convient dès à présent de clarifier certains points : les sites statiques, c'était bon pour les années 90 ! Maintenant, un site web digne de ce nom se doit d'être dynamique. Qu'est-ce qu'un site web dynamique ? C'est un site dont le contenu est généré dynamiquement, c'est-à-dire que le contenu est tiré d'une base de données. Un site dynamique est beaucoup plus facile à maintenir.
Comment construire une page web ? De la même manière qu'un livre se compose d'un titre, d'une préface et d'un contenu, une page web se compose elle aussi d'un titre, d'un ensemble de balise décrivant la page et d'un contenu. Cette définition basique donne une idée assez simple du squelette d'une page web. A cela, il faut rajouter divers éléments : une déclaration XML, un type de document (doctype)... Et il faut aussi délimiter proprement les composants de la page, ainsi l'en-tête de la page sera contenue dans une paire de balises <head></head>, et le corps de la page, dans une paire de balises <body></body>. Le tout étant contenu dans une paire de balises <html></html>. Ce langage se nomme XHTML. Comme vous le voyez, XHTML est un langage de balisage, et non de programmation. Vous ne ferez de boucles, ni ne créerez de fonctions avec XHTML, vous l'utiliserez juste pour décrire la manière dont est organisée votre page. XHTML est une évolution de l'antique HTML, une exportation de ce dernier sous le standard XML, un autre langage de balisage destiné à la diffusion de données à travers le Web.
Un mot sur HTML : il est toujours possible, bien que fortement déconseillé, de développer son site web en HTML. Même si une version 5 de HTML existe, corrigeant a priori quelques défauts de HTML 4, préférez XHTML. D'autant plus que les différences de développement son minimes : si vous connaissez déjà HTML, passer à XHTML ne vous posera aucun problème.
Comment rendre mon site web plus joli, plus attrayant graphiquement ? Vous l'aurez constaté, le design par défaut créé par votre navigateur préféré ne répond pas vraiment aux attentes d'un site professionnel... Eh bien vous avez la possibilité de personnaliser (d'améliorer serait plus juste) entièrement le rendu de votre site grâce aux feuilles de style CSS (Cascading Style Sheets). Une feuille de style CSS est un fichier portant l'extension .css qui vous permet de changer l'apparence de tous les éléments XHTML contenus dans vos pages : changer la couleur d'un texte, la taille d'une police, modifier l'alignement des paragraphes ou encore placer un menu là où vous le désirez, sans aucune contrainte de gravité webique :) Les feuilles de style CSS sont incontestablement un outil indispensable à tout webmaster moderne un minimum soucieux de l'apparence de son site. Lorsque vous serez familier avec elles, vous ne pourrez plus vous en passer...
L'interactivité bas de gamme mais bien pratique des fois : JavaScript. Comment faire pour apporter des modifications à vos pages une fois que le visiteur s'y trouve ? Le faire recharger la page ? Hmm... Ce n'est pas pratique et surtout très énervant pour votre visiteur qui aura tôt fait de quitter votre site si vous l'innondez de balises meta refresh... La solution, c'est le JavaScript. Il s'agit cette fois d'un langage de programmation, certes de bas niveau, mais qui vous permettra d'apporter un semblant d'interactivité à vos pages. Vous pourrez entres autres vérifier si tous les champs d'un formulaire sont bien remplis correctement avant de traiter le résultat avec un script côté serveur. N'oubliez pas cependant que tous les internautes n'activent pas JavaScript sur leur ordinateur...
Make it dynamic!! Comme je vous l'ai dit plus haut, les sites web statiques, c'était bon à l'èpoque où les gens savaient encore qui était Larusso... De nos jours, on ne veut plus s'embêter à maintenir un site page par page, on préfère générer le contenu dynamiquement à l'aide d'une base de données. Imaginez un site avec 10 000 articles où un menu est affiché à gauche de chaque page : pour modifier un lien du menu, le webmaster serait obligé de modifier chaque page une par une... Qui voudrait faire ça ?? Heureusement il existe des langages de programmation évolués tels que PHP qui nous permettent maintenant de gérer un site beaucoup plus facilement. PHP est un langage extrêmement utilisé, partout dans le monde. La communauté française n'est pas en reste et de nombreux forums parlent de ce langage. Avec PHP, vous n'êtes limité(e) que par votre imagination (et peut-être aussi dans certains cas par votre FAI...). PHP permet une gestion dynamique de votre site, il sait communiquer avec plusieurs Systèmes de Gestion de Bases de Données (SGBD) tels que MySQL. Un SGBD possède son propre langage. Pour MySQL, vous devrez donc apprendre SQL, le langage qui permet, via PHP, d'effectuer des requêtes sur vos bases de données. Principalement, vous irez chercher un article en fonction de l'url de la page courante. Mais les possibilités sont illimitées, vous pouvez stocker toutes les adresses IP et DNS de vos visiteurs (si vous vous prenez pour Big Brother), créer des espaces membres, créer un système de vente, etc...
La conception de site web est une chose assez complexe au début, surtout lorsque l'on est pas habitué à mettre les mains dans le camboui, bien confortablement installé(e) dans la chaleur réconfortante d'une plateforme de blogs... Mais au bout d'un certain temps, variable selon que l'on y passe plus ou moins de temps, que cela nous intéresse plus ou moins, l'on arrive à acquérir des automatismes, en particulier pour la syntaxe XHTML, le placement des éléments et la syntaxe CSS.
Joyeux dev @ tous ;-)
