Twitter YouTube SoundCloud LinkedIn

Tiennot blog

Conseils divers pour réaliser son site internet

Je n'ai pas pour ambition de faire un cours complet sur "comment créer son site internet". Je tiens simplement à faire part du peu d'expérience que j'ai dans le domaine, ayant créé tout mon site entièrement à la main. Je pars donc du principe que vous savez déjà (basiquement) coder en html et en css. Le but de cette page est de vous donner des conseils, et de vous faire part de mon expérience (minime, certes) afin de vous aider à améliorer votre site internet (où à vous aider dans sa conception s'il n'existe pas encore). Nous commencerons avec une introduction généraliste, puis nous verrons comment coder de façon propre en html et css, et enfin, nous parlerons animation, avec flash, java et compagnie. Tout un programme... (si votre site est déjà terminé et ne demande plus qu'à être amélioré, vous pouvez passer la première partie ;-)

Sommaire :

Introduction un peu généraliste...

Commençons par parler hébergement. Si vous n'avez pas une grande expérience en informatique, le mieux est sans doute de passer par un hébergeur spécialisé. Lorsque j'ai débuté, j'ai trouvé cette page sur Comment ça marche listant un bon nombre d'hébergeurs (néanmoins la liste n'est pas exhaustive). Pour ma part, je suis chez Toile-libre. Sinon, si vous êtes motivé, et que vous avez une bonne expérience sous GNU/Linux, vous pouvez même vous auto-héberger. Pour trouver comment faire, gogole est votre ami ;-)

Une fois l'hébergement choisi, vous pouvez enfin commencer le développement de votre site internet. À ce stade, attention : pensez à toujours bien découper votre site en dossiers et sous-dossiers. L'erreur à ne pas faire consiste à tout mettre dans le dossier racine. Impossible de vous y retrouver quand votre site va grossir ! Donc, dès le début, on crée des dossiers. Classiquement, on fait un dossier par rubrique. Par exemple chez moi : un dossier programmation, un dossier astronomie, un dossier divers, un dossier liens. En plus de cela, comptez un dossier images et un dossier style. Dans le premier, vous y metterez toutes les images de votre site, et dans le second, les feuilles de style css (on en reparlera plus tard).

L'autre intérêt d'utiliser une arborescence bien fournie réside dans les fichiers index. Prenons un exemple. Lorsque vous tapez dans votre navigateur "http://guilhem.toile-libre.org/", le serveur sous-entend en fait ceci : "http://guilhem.toile-libre.org/index.html". Il va chercher un fichier nommé index.html (ou index.php, ...) dans le dossier dont vous lui avez donné l'adresse. Donc, pour vos rubriques, je vous conseille de placer un fichier index.html dans le répertoire. Pour la rubrique astronomie, ça donne ça : http://guilhem.toile-libre.org/astronomie/ . Plusieurs avantages à cela :

Introduction terminée. Bon je l'avoue, ça n'était pas très passionnant. Heureusement, la suite est plus intéressante :-)

Coder de façon propre

Il est une chose très importante qu'il convient de toujours garder à l'esprit : ce n'est pas parce qu'une page html s'affiche correctement sur un navigateur qu'elle est bien codée. Déjà, le rendu dépend fortement des navigateurs (surtout pour Internet Explorer), et ensuite, une foultitude d'erreurs peuvent se cacher, mais ne pas empêcher la bonne interprétation de la page. Alors, pourquoi les traquer ? Et bien c'est tout simplement un peu comme les fautes d'orthographe : on vous comprend quand même si vous en faites (enfin pas trop quand même), mais c'est très agaçant, et ça nuit malgré tout à une bonne communication. En html, c'est pareil : c'est le W3C qui gère "l'orthographe".

Le W3C (World Wide Web Consortium), qu'est-ce que c'est ? C'est l'organisme qui est chargé d'éditer les recommandations pour tous les standarts internet comme html, xml, xthml, ... Il est aussi en charge de favoriser une bonne communication entre les différents acteurs du web. Par exemple, vous devez pouvoir accéder aux mêmes sites indifféremment du système d'exploitation utilisé (Windows, GNU/Linux, ...). On appelle cela l'interopérabilité. C'est une notion très importante qu'il faut toujours garder à l'esprit : pensez bien que le visiteur n'utilise pas forcément Internet Explorer ou Firefox (et oui, il en existe d'autres ;-) . Notez bien que depuis le début, et jusque à la fin, je parlerai de recommandations, et non normes : on ne va pas en prison pour avoir mal codé une page html (quoique ça ferait pas de mal à certains...).

Le W3C met à disposition sur son site des validateurs html et css. À utiliser sans modération : ils vous disent si vos pages sont valides ou non. Si elles le sont, vous pouvez mettre dessus des zolies icônes, comme celles qui trônent en pied de cette page (et oui, tout mon code respecte les recommandations du W3C).

Fesons un petit tour rapide des recommandations qui me semblent les plus importantes. Commençons par les balises dépréciées. Qui n'a jamais utilisé des balises html telles que <b>, <u>, <center> ? Et bien c'est mal :-( Ces balises sont vouées à dispararaître, au profit du css, histoire de bien distinguer "structuration" et "mise en forme" (j'y reviens juste après). Donc à ne plus utiliser !

Justement, la distinction html css. L'un ne va pas sans l'autre, néanmoins, il ont des rôles compémentaires. Le html sert à structurer des données, tandis que le css les met en forme. Par exemple, il est intelligent de découper sa page en bloc à l'aide de la balise html <div>, et ensuite d'aligner les blocs à l'aide de la propriété float en css. De plus, il est vivement recommandé de n'utiliser que des css "externes", c'est-à-dire dans un fichier bien distinct. L'intérêt ? Utiliser un seul et même fichier pour toutes les pages du site, ce qui diminue les temps de chargement, et facilite la maintenance. En effet, en exploitant intelligemment les classes css, le jour où vous voudrez changer le style de tous les titres des pages de votre site, il suffira de changer une seule propriété css. Un gain de temps formidable ! Au fur et à mesure que votre site va grossir, vous allez vous rendre compte que cette méthode est vraiment très pratique :-) Donc par pitié, évitez les choses dans ce genre :

<p style="font-family: 'sans', 'verdana'; font-size: 12pt;"> blablabla </p>

Mais préférez cette syntaxe :

# dans le fichier css externe :

.pnormal
{
   font-family: 'sans','verdana';
   font-size: 12pt;
}

# dans le fichier html :

<p class="pnormal"> blablabla </p>


Dans cet exemple, en changeant simplement les propriétés de la classe pnormal, vous changez celles de tout le site d'un seul coup !

Toujours dans le genre astuces-pratiques-vraiment-très-pratiques, parlons un peu des liens hypertextes. Avec un truc vraiment tout bête, vous allez voir. Imaginons que dans mon site, j'ai le lien suivant : <a href="http://guilhem.toile-libre.org/astronomie/">astronomie</a> . Bien. Et imaginons maintenant que mon site change d'adresse (vous me direz, ça n'arrive pas tous les jours). Il faut alors que je modifie le lien. Mais il faut aussi que je fasse de même pour tous les liens du site ! La solution : il aurait fallu écrire <a href="/astronomie/">astronomie</a> (Attention : le séparateur dans les noms de fichier est bien le /, comme sous Linux, même si le serveur est sous Windows). Le début de l'adresse du site n'est pas indispensable, car le navigateur sait bien qu'on se trouve sur guilhem.toile-libre.org . Et quand il voit un lien de la sorte, il le complète tout seul comme un grand. Et ça nous simplifie grandement la vie, non ? Cette astuce ne s'arrête pas là : vous pouvez aussi (et je vous conseille de le faire) l'appliquer aux images, vidéos, feuilles de style css, ...

Quittons un peu la partie "pur html/css" pour en venir à ce que je qualifierai de plus "algorithmique". Un bon exemple, concernant la mise en forme : l'utilisation abusive des images. Elles sont partout : dans les bordures, les arrières-plans, les pubs, ... Seulement, une image, c'est bien plus long à charger qu'un simple texte. Je vous conseille donc de ne les utiliser que lorsque c'est vraiment nécessaire : un joli arrière-plan, par exemple. Pour les bordures, il est préférable d'utiliser des propriétés css plutôt que des images. Et vous allez me dire : comment on fait pour les bordures arrondies (cauchemar du programmeur css) ? Et je vous répond : tant pis, vous supporterez les bordures carrées, en attendant css 3. Certes, vous le voyez bien, il faut faire quelques concessions, mais c'est préférable. Et puis, avouez qu'entre carrées et arrondies, ça n'a pas grande importance, non ? Enfin, lorsqu'elles sont indispensables, les images doivent être les plus légères possibles. Pensez à ceux qui sont en bas débit (oui, ça existe encore). Déjà, n'utilisez que du jpeg, gif et png. Les autres formats sont soit trop lourds, soit difficilement lisibles d'un ordinateur à l'autre. Et puis pour les images jpeg, pensez à réduire la qualité (avec Gimp par exemple). Inutile de laisser des jpeg en qualité 100%. C'est beaucoup trop lourd, et ça sert à rien. Pensez aussi à essayer les formats png et gif, ils peuvent parfois donner des résultats intéressants. Comparez, et choisissez le plus léger.

Un brin de folie avec les animations

On aborde le sujet qui fâche, avec les animations. Pourquoi ça "fâche" ? Parce que pas grand monde arrive à se mettre d'accord, comme vous allez le voir...

Commençons par une des technologies les plus utilisées : le flash. Déjà, le mot flash recouvre trois réalités différentes : il peut s'agir du format de vidéo, utilisé notamment par les sites comme Youtube, ... Il peut s'agir aussi du fichier exécutable qui permet de lire ces vidéos, ou qui fait des animations (waouu). Et enfin, ce qui nous intéresse, ce terme désigne aussi le "player", le lecteur quoi. Ce fameux lecteur est édité par une société appelée Adobe (le format PDF, c'est elle aussi). Ce qu'il faut savoir, c'est que les deux premières réalités sont ouvertes à tous : le format flash est lu par n'importe quel système d'exploitation par exemple. En revanche, la troisième non. Et elle est indispensable pour lire les vidéos et animations sur internet. Adobe fait exprès de ne pas en publier les spécifications, ou alors très en retard, pour éviter la concurrence, et se faire un max d'argent. Du coup, aucune alternative libre n'a pu être développée, notamment sous GNU/Linux (en fait si, mais c'est loin d'être abouti, pour les raisons que j'ai citées). Pourquoi je vous parle de Linux maintenant ? Parce que la version du flash player d'Adobe pour Linux est particulièrement buggée, et introduit du coup pas mal de failles de sécurité dans le système. Donc, un bon nombre de Linuxiens ne l'installent pas, ou n'arrivent pas à le faire fonctionner. Du coup, ils ne pourront pas profiter des animations flash de votre site. Donc évitez d'en mettre trop, et surtout, évitez d'utiliser flash pour des choses aussi importantes que le menu principal par exemple. Toujours pour ce bon vieux principe d'interopérabilité...

Autre sujet fâcheux : java. Java est déjà, à mon avis, un peu plus interopérable que flash. Néanmoins, n'oubliez pas que tout le monde n'a pas java d'installé chez lui (et ce même sous Windows). Aussi, java est particulièrement lent à charger. Évitez donc de l'employer trop souvent, il nuit à la bonne navigation sur votre site. De plus, ne l'utilisez pas non plus pour des éléments importants, comme le menu principal. En revanche, je n'ai jamais dit qu'il fallait ne pas en mettre du tout. L'idéal est de faire une page qui lui est spécialement consacré, avec par exemple des animations en tout genre (j'ai vu un site très bien proposant toute une foule d'applets java sur les lois de la physique).

J'ai gardé le pire pour la fin, avec javascript. Tandis que les deux technologies précédentes avait l'avantage de rester les mêmes quel que soit le navigateur, javascript, lui, change radicalement selon le navigateur ! Ça veut dire qu'un code qui marche sous Firefox ne marchera peut-être pas sous Internet Explorer (de toute façon, c'est toujours IE qui pose problème dès qu'on essaye de faire quelque chose d'un peu évolué). À éviter dans la mesure du possible, donc. À moins de lui dédier une page spéciale, comme c'est le cas sur ce site, avec la page jeux.

Après avoir lu tout ça, vous pensez peut-être que l'interopérabilité n'est pas compatible avec le côté "vivant" de votre site internet ? Et bien si, mais à condition de dédier des pages spécialement aux animations, et de s'arranger pour que ceux qui ne peuvent pas les voir puissent profiter de votre site quand même :-)