Quand vous tentez d’afficher une page d’un site Internet qui n’existe plus (ou pas) sur le serveur, le serveur HTTP va vous renvoyer un code d’erreur 404.
Votre navigateur va alors comprendre que la page n’est pas disponible et va vous afficher un message du style : 404 File Not Found. Voyons voir comment personnaliser tout ça…

La où ça devient sympa, c’est qu’il est possible de personnaliser cette page d’erreur pour la rendre un peu plus attrayante. (moins eut été compliqué…)

Pour se faire, il vous faudra créer une page 404.html, choisissez le nom que vous voulez d’ailleurs, ça n’a pas d’importance, puis spécifier au serveur qu’une erreur 404 doit vous rediriger vers cette page.

Créez un fichier .htaccess à la racine de votre site et indiquez le petit bout de code suivant :

ErrorDocument 404 http://www.votre_site_super_cool.fr/404.php

Je vous laisse libre de remplir votre page 404.html (ou bobMarley.php hein!) comme bon vous semble.

Essayez maintenant d’aller sur une page qui n’existe pas sur votre serveur. Si vous avez bien fait votre travail, vous devriez retomber sur votre page 404 personnalisée !
Voici quelques exemples de pages 404 customisées par des gens plein d’imagination :

Gog.com

Css-tricks.com

Blizzard.com

Si ces 3 exemples n’ont pas suffit à éveiller votre imagination, vous pouvez en trouver d’autres ici !

A première vue, le développement de pages web a l’air plutôt simple. Il suffit de coller un peu de html, de css et de javascript ensembles, de bien mélanger, et vous avez votre page web.

Cependant, tout bon développeur web se doit de produire un code clair, sémantique et compatible avec les différents navigateurs Internet.

Pour cela, il y a quelques règles simples à respecter.

Indiquez quelle div vous fermez

La plupart du temps, les pages se terminent par une succession interminable de balises </div>. Il est alors compliqué de savoir où on se trouve.

Indenter son code est une première bonne pratique et permet déjà de savoir si on a fermé assez de balises.

Cependant, le mieux reste encore d’indiquer via un petit commentaire, quelle div on vient de fermer comme dans l’exemple ci-dessous

1
2
3
4
5

<div id="header">
 <div id="menu" class="gauche">
 ...
 </div><!-- #menu.gauche -->
</div><!-- #header -->

La technique du Reset CSS

Les valeurs par défaut concernant les marges et le padding ne sont pas toujours les mêmes en fonction du navigateur utilisé. Pour éviter d’avoir une mise en page différente, on peut utiliser la technique du Reset CSS qui consiste à remettre à 0 certaines valeurs des éléments de notre page web.

Pour en savoir plus concernant le Reset CSS et son application, vous pouvez vous rendre sur l’article d’Alsacreations.

Ne pas utiliser @import

Les fichiers CSS peuvent être inclus via la syntaxe @import. Cela peut être utilisé pour inclure un CSS dans un autre fichier CSS ou directement dans une page HTML.

1
2
3
4

<style type="text/css">
 @import url('style1.css');
 @import url('style2.css');
</style>

Ce code fonctionne mais il est plus lent que le code ci-dessous pour inclure une feuille de style dans un document HTML.

1
2

<link rel='stylesheet' type='text/css' href='style1.css'>
<link rel='stylesheet' type='text/css' href='style2.css'>

Vous ne verrez pas de différence notoire entre les deux syntaxes sur des sites générant peu de trafic, mais vous saurez quoi faire quand vous aurez un site avec un million de visiteurs par jour (comme mootiweb).

Il faut smusher vos images!

Heu quoi?

Par smusher, je veux dire optimiser vos images, c’est à dire avoir le meilleur rapport qualité/poids. Le terme smusher vient de l’outil que j’utilise qui s’appelle Smush It.

Smush it est un outil online développé par Yahoo qui va donc vous permettre d’optimiser le poids de vos images sans perdre en qualité visuelle. L’outil promet des gains allant jusqu’à 70% du poids initial, ce qui n’est pas négligeable.

Ne mélangez pas CSS et HTML

HTML est un langage de balisage permettant de structurer sémantiquement et mettre en forme le contenu des pages.

Il est parfois tentant d’insérer le style d’un élément directement dans la page html (parce que ça va tellement plus vite).

1

<a href="http://super_lien.com" style="background:#064; padding:3px; font-weight:bold">Super lien!</a>

Ce code va à l’encontre de la philosophie même de CSS et dans un soucis de clarté de votre code, il est toujours préférable de mettre tout ce qui concerne le style de votre page dans un fichier CSS externe.

Le mix Javascript / HTML, c’est pas mieux!

Il en est de même pour l’intégration du code Javascript. Le code suivant illustre la mauvaise habitude d’utiliser l’événement onclick directement sur un élément de la page HTML.

1

<a id="mootiweb" href="http://www.mootiweb.fr" onclick="alert('Superbe site!');">Mooti Web</a>

On peut obtenir le même résultat en utilisant par exemple le framework JQuery.

1
2
3
4
5

$(document).ready(function() {
 $('#mootiweb').click(function() {
 alert('Superbe site!');
 });
});

Cela peut sembler un peu compliqué à utiliser mais si vous en prenez l’habitude, votre code sera toujours plus lisible et plus simple à maintenir, pour vous, ou pour quelqu’un souhaitant travailler sur vos sources.

Utilisez des commentaires conditionnels

Malgré la récente mort annoncée d’Internet Explorer 6, certains clients demandent toujours des pages compatibles avec leur navigateur favori made by Microsoft.

En partant du constat que c’est un sacré bordel de développer des pages pour ce navigateur qui a du mal à respecter certains standards, le mieux est encore d’élaborer deux feuilles de style bien distinctes et d’importer la bonne en fonction du navigateur utilisé par le visiteur.

1
2
3
4
5
6

<!--[if !IE]>
 <link href="style.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if lte IE 6]>
 <link href="styleIE.css" rel="stylesheet" type="text/css" />
 <![endif]-->

Le code ci-dessus va donc importer une feuille de style spécifique au navigateur du méchant client sur son vieux navigateur IE6 (ou inférieur) et une feuille de style classique pour les autres navigateurs.

Il est possible de répéter le même code pour avoir une feuille de style spécifique aux navigateurs IE ayant une version supérieur à la 6.

Importez vos fichiers Javascript en bas de page

Le problème de l’importation du Javascript entre les balises <head> et </head> est qu’il va être chargé avant le contenu de votre page. Donc si le code concerne des éléments de la page, il risque de mal s’exécuter.

La solution est donc d’importer votre code Javascript juste avant la fin de la page.

1
2
3
4

  ...
  <script type="text/javascript" src="jquery.js">
 </body>
</html>

Testez votre code au fur et à mesure

Voila une habitude qui peut vous faire gagner beaucoup de temps. On a tous développé un site en le testant exclusivement sur Firefox, et une fois arrivé à la fin du projet, on serre les fesses en ouvrant IE et en chargeant notre page.

Le temps de corriger tous les problèmes de mise en page et surtout de retrouver d’où viennent les différents décalages peut prendre énormément de temps.

La solution apparaît alors comme assez évidente, il suffit de tester régulièrement votre page sous les principaux navigateurs afin de savoir immédiatement où corriger un éventuel problème.

Ces bonnes manières ne sont pas toujours faciles à appliquer et ce serait mentir que de dire que je les ai toujours appliquées, mais plus un projet est important, plus ces règles facilitent la vie des développeurs web.

Pour se faire, nous allons utiliser TinyEditor qui est un éditeur de texte simple et surtout très léger (8ko). Il est facilement customisable via CSS et reprend les principales fonctions d’un éditeur (gras, italique, souligné etc…)

Passons aux choses sérieuses maintenant jeune Padawan!

Tout d’abord, commençons par télécharger l’archive contenant TinyEditor sur le site du développeur du module (Michael Leigeber).

On se retrouve avec un dossier contenant le code Javascript, la feuille de style CSS, les images de l’éditeur et une page de démonstration index.html .

Voici la démarche à suivre pour mettre en place cet éditeur sur une page web. Vous allez voir, c’est easy win! D’ailleurs, il suffit de reprendre le code de la page de démo pour éviter de lire la fin de cet article…

Premièrement, il faut importer le fichier Javascript et la feuille de style CSS. Pour cela, il faut insérer les lignes suivantes entre les balises <head> et </head> de votre page HTML.

1

<script type="text/javascript" src="tinyeditor.js"></script>

Il ne reste alors plus qu’à insérer l’éditeur sur votre page. Il suffit de placer votre textarea à l’endroit souhaité et de lui associer le code Javascript qui va bien.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<textarea id="input" style="width:400px; height:200px"></textarea>
<script type="text/javascript">
new TINY.editor.edit('editor',{
 id:'input',
 width:584,
 height:175,
 cssclass:'te',
 controlclass:'tecontrol',
 rowclass:'teheader',
 dividerclass:'tedivider',
 controls:['bold','italic','underline','strikethrough','|','subscript','superscript','|',
 'orderedlist','unorderedlist','|','outdent','indent','|','leftalign',
 'centeralign','rightalign','blockjustify','|','unformat','|','undo','redo','n',
 'font','size','style','|','image','hr','link','unlink','|','cut','copy','paste','print'],
 footer:true,
 fonts:['Verdana','Arial','Georgia','Trebuchet MS'],
 xhtml:true,
 cssfile:'style.css',
 bodyid:'editor',
 footerclass:'tefooter',
 toggle:{text:'source',activetext:'wysiwyg',cssclass:'toggle'},
 resize:{cssclass:'resize'}
});
</script>

Ici, deux paramètres nous intéressent particulièrement. id qui doit être le même que l’id du textarea auquel on souhaite appliquer l’éditeur et controls qui reprend la liste des contrôles à afficher. (vous savez, les boutons gras, italique et tout ça…)

Je me devais également de vous dire avant de vous laisser gambader sur le net avec votre éditeur tout beau tout neuf que le premier paramètre dans TINY.editor.edit est le nom de l’instance de l’éditeur.

TinyEditor étant une surcouche du textarea, ce nom va nous servir à valider les derniers changements de l’éditeur afin qu’ils soient pris en compte lorsque l’on voudra récupérer la valeur du textarea par exemple. Il suffira alors d’appeler la fonction post() sur le nom de l’instance de l’objet.

Et voilà, c’est terminé!