Développement et standards du Web
Rubrique : développement web, standards, XHTML, CSS, W3C, accessibilité.
Voici les principales étapes du développement.
Réalisation avec des feuilles de styles
Les sites web suivants constituent des références et des guides qu’il est très intéressant de consulter lors de la réalisation de votre site.
- HTML 4.01 Specification
- http://www.w3.org/TR/html401/
- Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
- http://www.w3.org/TR/CSS21/
- A List Apart
- http://www.alistapart.com/
- Pompage.net : le web design puisé à la source
- http://www.pompage.net/
- Jardin Zen css: La beauté de la conception CSS
- http://www.csszengarden.com/tr/francais/
CSS 3
- CSS: Current Work [CSS 3]
- http://www.w3.org/Style/CSS/current-work
Lorsqu’une propriété, une valeur ou un sélecteur CSS est implémenté de façon expérimentale, son nom est précédé d’un préfixe spécifique à l’éditeur du moteur du navigateur web.
| Préfixe | Moteur | Éditeur | Navigateur |
|---|---|---|---|
-o- |
Presto | Opera Software | Opera, Opera Mobile |
-ms- |
Trident | Microsoft | Internet Explorer |
-moz- |
Gecko | Mozilla Foundation | Mozilla Firefox, SeaMonkey |
-icab- |
iCab | Alexander Clauss | iCab (v3-) |
-khtml- |
KHTML | KDE | Konqueror |
-webkit- |
WebKit | WebKit Foundation | Safari, Google Chrome |
Exemple d’utilisation des préfixes spécifiques éditeur pour la propriété CSS 3 « border-radius » :
#page {
border-radius: 1em;
-o-border-radius: 1em;
-moz-border-radius: 1em;
-khtml-border-radius: 1em;
-webkit-border-radius: 1em;
}
Note : en général, le préfixe -icab- n’est pas utilisé, car depuis le 1er janvier 2008 le navigateur iCab (version 4) est basé sur le moteur WebKit et reconnait son préfixe associé -webkit-.
Graphisme web
Il est conseillé de faire un croquis sur papier avec la position et la taille de chaque zone (e.g. zone de navigation, zone du contenu, zone des nouveautés, etc.) et des images.
Formats d’images bitmap reconnus dans les navigateurs web : GIF, PNG et JPEG JFIF
Formats d’images vectorielles reconnus dans les navigateurs web modernes : SVG
Les logiciels les plus performants :
- Adobe Photoshop (éditeur d’images) ;
- Adobe Fireworks (éditeur graphique) ;
- GIMP, GIMP-fr (éditeur open source d’images rasters) ;
- Inkscape, Inkscape-fr (éditeur open source d’images vectorielles, e.g. SVG) ;
- XnView, XnView (visualisateur d’images gratuit).
Convertisseur décimal/hexadécimal
Voici un utilitaire que j’ai réalisé en JavaScript pour convertir les codes couleurs RGB/Hexadécimal.
Utilisation
Ce logiciel à été réalisé de façon à que son utilisation soit la plus rapide possible :
- Remplir les champs « rouge », « vert » et « bleu » ;
- Passez d’un champ à l’autre avec la touche TAB ;
- Jusqu’à sélectionner le champ « hexa » ;
- Faire un simple copier (Ctrl+C) dans ce champ « hexa » ;
- Faire un coller (Ctrl+V) dans le source de votre page HTML.
Programmation
Les logiciels les plus performants :
- Adobe Dreamweaver (logiciel de conception web, éditeur HTML) ;
- Bluefish (éditeur de texte, éditeur HTML/CSS, pour GNU/Linux) ;
- Notepad++, Notepad++ (éditeur de texte, éditeur HTML/CSS, pour Windows) ;
- KompoZer (éditeur open source de sites web, éditeur HTML/CSS) ;
- Nvu (éditeur open source de sites web, éditeur HTML/CSS).
Le langage de base est le HTML. Vous pouvez utiliser le langage PHP si vous souhaitez faire un site web dynamique. Dans ces deux cas, il est fortement conseillé d’utiliser des feuilles de style (langage CSS) afin de garantir l’homogénéïté de votre site.
De plus, éviter les frames. Ce type de site est démodé et non ergonomique (e.g. il est très peu pratique de bookmarquer, d’imprimer ou de faire un lien sur une page).
Afin qu’un maximum d’internautes puissent voir votre site, il vaut mieux éviter les langages JavaScript, DHTML et Flash ; surtout lorsqu’ils n’apportent rien.
De plus, il faut absolument éviter le Java, si il n’est pas indispensable. Par exemple, lancer la machine virtuelle Java pour faire « agiter » du texte est complètement stupide.
N’oubliez pas de remplir correctement la balise <title>. C’est très important pour le référencement de votre site auprès des moteurs de recherche.
Validation et sites de référence
- World Wide Web Consortium
- http://www.w3.org/
- OpenWeb pour les Standards du Web
- http://www.openweb.eu.org/
- The Web Standards Project
- http://www.webstandards.org/
- The W3C MarkUp Validation Service
- http://validator.w3.org/
- The W3C CSS Validation Service
- http://jigsaw.w3.org/css-validator/
- W3Schools Online Web Tutorials
- http://www.w3schools.com/
Tester le site avec plusieurs navigateurs
Ne pas oublier de tester son site avec les principaux navigateurs web :
- Firefox [en] [fr] : le plus complet ;
- Safari [en] [fr] : pour MacOS et PC/Windows ;
- Google Chrome [en] [fr] : un navigateur très performant (pour Windows) ;
- Opera [en] [fr] : un très bon navigateur respectant les standards ;
- SeaMonkey [en] [fr] : ex-Mozilla Suite (pour les surfeurs avertis) ;
- Internet Explorer : ce navigateur est obsolète et très peu performant, ne pas l’utiliser.
– Mozilla Firefox [fr] [en] est le grand remplaçant d’Internet Explorer.
Rédaction
Il faut ensuite rédiger le contenu de ses pages web.
Respectez les internautes qui visitent votre site en soignant l’orthographe et la typographie de vos pages.
David CARELLA
