» Développer, analyser et valider vos pages web Page 1 sur 32
Présentation à l'occasion des WebÉducation
A) Créer vos pages avec EasyEclipse
(1) Présentation de EasyEclipse
(2) Worspace et gestion des projets
(3) Fonctionnalités de EasyEclipse
(4) EasyEclipse pour le Web
(5) Gestion de version avec Subclipse C) Valider et tester ses sites web
(6) Pour aller plus loin... (1) Valider vos pages (x)HTML et le CSS
(2) Tester vos pages avec les navigateurs web
B) Extensions des navigateurs web
(3) Autres solutions logicielles
(1) Firefox
➔ Présentation
➔ Options de la barre de développement
➔ Autres extensions indispensables
(2) Internet Explorer
➔ Présentation
➔ Barre de développement (version beta)
Présentation effectuée par Yannick Pavard (ypavard@infoglobe.ca)
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 2 sur 32
A) Créez vos pages avec EasyEclipse
Site Officiel : http://www.easyeclipse.org/
(1) Présentation de EasyEclipse Traduction : http://download.eclipse.org/eclipse/downloads/
 EasyEclipe, ensemble de paquetages autour d'Eclipse
EasyEclipse est un ensemble de distributions pour différents systèmes d'exploitation
(Windows, Linux ou Mac OS X) qui comprend de base l'application opensource
Eclipse ainsi que plusieurs autres plugins pré-installés
A savoir : Eclipse est un projet initié par IBM, qui est devenu à présent une fondation.
 Liste des différents paquetages
✔ JAVA : Expert, Desktop, Server et Mobile
✔ WEB : Lamp (php, Python, Perl), PHP, Ruby and Rails, Python
✔ C++
 Liste des plugins pour la distribution Lamp
✔ ColorEditor : Colorisation syntaxique
✔ WebToolEditor : Css, Js, Xml, ..
✔ Html Tidy : Validation du code HTML/XHTML
✔ QuantumDB : Accès à des bases de données (JDBC)
✔ PhpEclipse : Pour le php
✔ Subclipse : Pour l'accès à un serveur SVN
Liste plus complète ici : http://www.easyeclipse.org/site/distributions/lamp.html
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 3 sur 32
A) Créez vos pages avec EasyEclipse
(2) Workspace et gestion des projets
 Notion de Workspace
Un workspace est un espace de travail qui mémorise les
éléments de l'interface que vous auriez placé comme bon
vous semble, de même que les préférences. Le workspace
stocke également les fichiers (html, css, php, etc) de
travail.
Vous pouvez très facilement passer d'un workspace à
l'autre.
 Notion de projet
Que vous ayez besoin de créer un nouveau projet php, java ou autre, EasyEclipse permettra de
les différencier à travers votre explorateur (ou navigateur) et d'y rattacher plusieurs autres
services (svn, synchronisation ftp, ..)
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 4 sur 32
A) Créez vos pages avec EasyEclipse
(3) Fonctionnalités de EasyEclipse
 Les espaces de travail
 Les Perspectives
 Les vues
 Gestion de tâches / de signets
 Historique local
 Folding (replier/deplier du code, commentaire, etc)
 Gestion de modèle pour les fichiers courants : php, css. html. etc
 Navigation dans le code de la page (liste des constantes, listes des fonctions, etc)
 Recherche dans les projets, ressources ou workspaces
 Affichage des erreurs *
 Colorisation syntaxique *
 Assistant de code (completion) *
 Synchronisation sur serveur ftp, sftp, webdav, ..) *
 Débogueur PHP *
 Gestion des versions CVS
 Gestion des versions SVN *
 Validation HTML (HTML Tidy) *
 Gestion d'une base de donnée (client SQL) *
 Test unitaire pour php avec SimpleTest *
 Manuel externe (php.net pour php par exemple) *
 Mise à jour des plugins et d'Eclipse en ligne
* Disponible par l'ajout d'un plugin
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 5 sur 32
A) Créez vos pages avec EasyEclipse
(4) EasyEclipse pour le Web
EasyEclipse étant basé sur Eclipse, est avant tout un framework de développement pour des applications Java. Il n'offre donc pas
d'options très puissantes pour faire du web, c'est à dire manipuler des fichiers html et des feuilles de style CSS. Toutefois, avec l'ajout
de quelques plugins, il y a quelques fonctions intéressantes à utiliser.
Ne vous attendez pas en utilisant EasyEclipse à retrouver la souplesse d'un logiciel comme Dreamweaver ou Golive, c'est à dire des
fonctionnalités Wysiwyg (What You See Is What You Get)
 Plugins > Fonctionnalités :
✔ Amateras HTML and XML editor : Assistant de code HTML/CSS, colorisation,
prévisualisation des pages html.
Utilisez la touche [CTRL] + [ESPACE] pour l'assistant
✔ Eclipse Web tools editors : Edition et validation des fichiers XML, XSL, XML
Schemas, DTD, HTML, JavaScript et CSS.
✔ Eclipse HTML Tidy : Formate et valide les fichiers de type HTML, XHTML et XML
documents.
+ des plugins pour faire du Php, Ruby, Perl ou Python.
 Ce qui manque :
✔ Editeur Wysiwyg : Il a bien un plugin eZingBuilder, mais il ne semble pas adapté pour Java.
✔ Assistant CSS : Il manque un panneau comme Dreamweaver qui pourrait afficher toutes les propriétés pour du CSS 2 par
exemple.
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 6 sur 32
A) Créez vos pages avec EasyEclipse
(5) Gestion de version avec Subclipse
Subclipse est un plugin pour Eclipse qui permet de se connecter sur un gestionnaire de version appelé Subversion
(SNV). Subversion est le successeur de CVS (Concurrent Versions System), il a été lancé en février 2000 par
CollabNet.
« La gestion de version (en anglais revision control) est une activité qui consiste à maintenir l'ensemble des versions
d'un logiciel. Essentiellement utilisée dans le domaine de la création de logiciels, elle est surtout concernée par le
code source ; mais elle peut être utilisée pour tout type de document informatique. »
 Les commandes indispensables à connaitre
✔ Checkout : Permet de récupérer sur la machine locale l'ensemble des fichiers du
projet ainsi que ses méta-données depuis le dépôt.
✔ Commit : Pour enregistrer les modifications locales dans le dépôt créant ainsi une
nouvelle révision
 Quelques options disponibles
✔ Historique : Pour voir toute l'historique des différentes versions d'un fichier.
✔ Commentaire : Déposer un commentaire lorsqu'une modification est apportée sur le
dépôt
✔ Déplacer/renommer : Déplacer un fichier ou un répertoire sur le dépôt ou tout
simplement le renommer.
✔ Annotation : Visualiser tous les changements effectués d'une révision à l'autre.
✔ Import/export : Pour déposer ou récupérer des fichiers depuis un dépôt (sans les
méta-données)
✔ Mise à jour (update) : Permet de mettre à jour sa version locale par rapport à la
dernière version du dépôt
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 7 sur 32
A) Créez vos pages avec EasyEclipse
(5) Gestion de version avec Subclipse
Voici une petite démonstration pour importer un projet d'un dépôt de fichier SVN sur la machine locale, puis effectuer une
modification et ensuite la renvoyer sur le dépôt afin que les autres développeurs puissent en profiter.
 Récupérer le projet sur la machine locale
Une des premières étapes consiste à récupérer l'ensemble des fichiers projet localement sur sa machine. Pour cela dans la vue SVN
REPOSITORY, il suffit de sélectionner le projet et de choisir l'option CHECKOUT.
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 8 sur 32
A) Créez vos pages avec EasyEclipse
(5) Gestion de version avec Subclipse
 Créer un nouveau projet localement
Une fois l'option CHECKOUT sélectionnée, on doit créer
un projet localement à l'intérieur de notre espace de
travail (workspace) pour importer les fichiers.
Dans notre exemple, le projet portera le même nom que
le projet sur le dépôt de fichier SVN.
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 9 sur 32
A) Créez vos pages avec EasyEclipse
(5) Gestion de version avec Subclipse
 Vérifier la présence de vos fichiers
Si vous repassez dans une perspective différente (PHP par exemple), vous
pouvez vérifier la présence de vos fichiers dans votre nouveau projet
[tc2l_semantic_v1] ainsi que la liste des dossiers et fichiers. C'est à partir de
cette perspective que vous pourrez modifier le contenu de vos fichiers.
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 10 sur 32
A) Créez vos pages avec EasyEclipse
(5) Gestion de version avec Subclipse
 Modifier vos fichiers php
Dans la capture ci-dessous, il a été ajouté une ligne de commentaire au fichier [class_semantic.php]. Nous aurions pu également
effectuer plusieurs changements sur plusieurs fichiers du même projet.
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 11 sur 32
A) Créez vos pages avec EasyEclipse
(5) Gestion de version avec Subclipse
 Déposer vos fichiers sur le dépôt
L'action de déposer les changements sur le dépôt, s'appelle « faire un commit », c'est à dire mettre les fichiers qui ont été modifiés
sur le serveur distant qui se chargera de ne prendre en compte que les changements.
Étapes :
➢ Bouton droit sur le projet
➢ Aller le menu EQUIPE
➢ Choisir Commit
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 12 sur 32
A) Créez vos pages avec EasyEclipse
(5) Gestion de version avec Subclipse
 Ajouter un commentaire
Lors de chaque « commit » il est toujours préférable
de laisser un commentaire afin que les autres
développeurs puissent avoir l'information nécessaire
du changement.
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 13 sur 32
A) Créez vos pages avec EasyEclipse
(5) Gestion de version avec Subclipse
 Ce que les autres voient
Après avoir effectué des modifications
sur le dépôt, n'importe qui peut contrôler
les changements. La vue ci-contre
montre plusieurs informations :
➢ A gauche : La vue « Annotation » qui
permet de voir tous les « commit » sur
le fichier sélectionné Chaque
personne est identifiée ainsi que le
nombre de ligne affecté.
➢ En haut : Le fichier ouvert indique en
surligné les lignes qui ont été ajoutées.
➢ En bas : L'historique, permet de
naviguer à travers tous les « commit »
effectués sur le dépôt et de voir le
résultat directement dans la fenêtre du
dessus.
➢ Tout en bas : Les commentaires
pour chacun des « commit »
apparaissent.
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 14 sur 32
A) Créez vos pages avec EasyEclipse
(6) Pour aller plus loin ...
Voici quelques liens pour aller plus loin avec Eclipse en général, ainsi que les différents plugins et paquetages existants :
➢ Site Officiel d'Eclipse : http://www.eclipse.org/
➢ Site officiel de EasyEclipse : http://www.easyeclipse.org/
➢ La page sur Wikipédia : http://fr.wikipedia.org/wiki/Eclipse_%28logiciel%29
➢ Un tutoriel pour développer avec le Web et Eclipse : http://jp-grossglauser.developpez.com/tutoriels/logiciels/phpeclipse/
➢ Le nouveau projet d'Eclipse pour développer en Php : http://www.eclipse.org/php/
➢ Le projet PhpEclipse : http://www.phpeclipse.de/
➢ Debogueur Php pour PhpEclipse : http://dd.cron.ru/dbg/
➢ Debogueur Php de Zend pour Eclipse : http://www.zend.com/pdt
➢ Générer de la documentation au format Doxygen : http://home.gna.org/eclox/
➢ Tutoriel en français pour installer PhpEclipse sous windows :
http://www.plog.free.fr/blog/index.php?2005/02/19/104-intsallation-eclipse-phpeclipse-dbg-debugger
➢ Documentation en anglais sur PhpEclipse :
http://docs.schuetzengau-freising.de/modules/xdocman/index.php?doc=xo-002&lang=en
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 15 sur 32
B) Barre d'extension des navigateurs web
(1) Firefox, présentation
 Présentation :
Firefox un navigateur Web libre développé et distribué par la Fondation
Mozilla aidée de centaines de bénévoles grâce aux méthodes de
développement open source. Ce logiciel a connu un succès croissant
depuis sa sortie : le 19 octobre 2005, moins d'un an après sa sortie
officielle, le nombre de téléchargements avait atteint 100 millions et,
depuis le 9 août 2006, ce nombre a dépassé la barre des 200 millions et
devrait atteindre les 300 millions prochainement.
La version 2.0 est disponible en téléchargement depuis le 24 octobre 2006, elle représente environ 12% des parts de marché des
navigateurs.
 Extension pour développeurs de page web :
Firefox peut étendre ces possibilités grâce à l'ajout d'extension. Une des extensions les
plus populaires pour les développeurs de page web, s'appelle : Web Developer
Extension, vous pouvez la télécharger sur le site officiel :
http://chrispederick.com/work/webdeveloper/
Version française : http://joliclic.free.fr/mozilla/webdeveloper/
Note : La version en anglais est souvent plus à jour que la version français que vous
pourriez trouver sur internet.
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 16 sur 32
B) Barre d'extension des navigateurs web
(1) Firefox, options de la barre de développement
Il existe 12 onglets dans la barre de développement, qui seront décrits succinctement dans les pages suivantes.
 Onglet 1 : Disable
Cette option permet de désactiver certains scripts ou configurations de la page web ouverte sur le navigateur. En l'occurrence cela peut
être pratique pour désactiver du javascript (des redirections ou popup), de même que l'utilisation du cache. Cela évite de le vider
constamment pendant les tests.
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 17 sur 32
B) Barre d'extension des navigateurs web
(1) Firefox, options de la barre de développement
 Onglet 2 : Cookies
Cette option permet toutes les actions possibles sur les cookies, à savoir : Désactiver temporairement les cookies sur une page web,
effacer touts les cookies de type sessions, domaines ou « path ».
Une des options intéressantes est de pouvoir visualiser l'ensemble des cookies pour la page en cours, de même que l'ajout d'un cookie
en plus qui peut éventuellement prendre la place d'un autre.
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 18 sur 32
B) Barre d'extension des navigateurs web
(1) Firefox, options de la barre de développement
 Onglet 3 : CSS
C'est sans doute l'option la plus utilisée dans la barre de développement Firefox. Elle offre des options de désactivation par média
(impression, écran, etc) ou tout simplement la désactivation d'une feuille particulière s'il y en a plusieurs de chargées.
Une des options les plus intéressantes est sans doute la possibilité d'éditer directement n'importe quel style sur la page (style lié,
incorporé, etc) La dernière version de l'extension propose également un moteur de recherche, pour recherche dans une feuille en
particulier.
On peut également demander à visualiser un élément en particulier sur la page et obtenir son chemin complet :
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 19 sur 32
B) Barre d'extension des navigateurs web
(1) Firefox, options de la barre de développement
 Onglet 4 : Forms
Cette option permet énormément de manipulations sur les
formulaires web, notamment :
➢ Afficher les informations complètes d'un formulaire à l'écran
➢ Afficher les mots de passe que vous auriez oublié, qui
s'affichent avec des étoiles à l'écran
➢ Voir l'ensemble des informations d'un formulaire qui vient
d'être validé
➢ Convertir un formulaire de type GET en POST et vice versa
➢ Désactiver certaines limites comme par exemple la taille de
certains champs.
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 20 sur 32
B) Barre d'extension des navigateurs web
(1) Firefox, options de la barre de développement
 Onglet 5 : Images
L'option IMAGES permet de contrôler plusieurs
éléments qui peuvent influencer une page utilisant des
images :
➢ Est ce que toutes les images utilisent l'attribut ALT ?
➢ Est ce que la taille de mes images n'est pas trop
importante ?
➢ Est ce qu'il y a des images absentes sur ma page ?
➢ Obtenir une vue d'ensemble des images disponibles
sur la page
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 21 sur 32
B) Barre d'extension des navigateurs web
(1) Firefox, options de la barre de développement
 Onglet 6 : Information
Cette partie offre énormément de choix, parmi ceux les plus intéressants, l'on trouve :
➢ Affichage des ancres html sur la page
➢ Affiche la taille (hauteur/largeur) des blocs (div par exemple)
➢ Affiche des informations sur un élément en particulier (Display Element Information),
ce qui permet d'avoir une vue des éléments parents et ancêtres.
➢ Obtenir tous les codes couleurs utilisés sur la page.
➢ Afficher l'emboîtement des balises H1, H2 et les erreurs. (View Document Outline)
➢ Afficher un rapport concernant le poids total de la page et le détail (image, script, etc)
➢ Afficher des informations pertinentes sur l'encodage de la page, les entêtes du
serveur, etc)
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 22 sur 32
B) Barre d'extension des navigateurs web
(1) Firefox, options de la barre de développement
 Onglet 7 : Miscellaneous
Cette partie « Divers » offre quelques options intéressantes
➢ Afficher une règle pour mesurer (largeur/hauteur)
➢ Afficher les éléments cachés sur la page
➢ Édition du code HTML (comme le CSS), mais ça
ne reste pas très pratique
➢ Permettre le redimensionner les cadres (frames)
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 23 sur 32
B) Barre d'extension des navigateurs web
(1) Firefox, options de la barre de développement
 Onglet 8 : Outline
Cette partie permet de mettre en évidence des éléments particuliers sur une
page, par exemple :
➢ On souhaite mettre en évidence des tableaux ainsi que les cellules
➢ On souhaite mettre en évidence tous les éléments de type « block »
tel que les div
➢ Mettre également en évidence les éléments dépréciés (font size)
➢ Surligner un élément particulier (toutes les balises ul ou li par
exemple)
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 24 sur 32
B) Barre d'extension des navigateurs web
(1) Firefox, options de la barre de développement
 Onglet 9 : Resize
Cette partie offre peu d'options si ce n'est le fait de pouvoir modifier la taille de la
fenêtre du navigateur pour par exemple simuler une résolution d'écran de 800x600
pixels ou 1024x768 pixels pour ceux qui seraient à des résolutions plus élevés.
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 25 sur 32
B) Barre d'extension des navigateurs web
(1) Firefox, options de la barre de développement
 Onglet 10 : Tools
On trouve ici essentiellement une liste de liens permettant de valider la page web vers différents
services : Validation des feuilles de styles css, validation des flux rss, des pages (x)html, des liens
ou de l'accessibilité web.
À voir également l'inspecteur DOM (Document Object Model) et la console d'erreur Javascript.
On peut également valider localement la page pour le CSS, le (x)HTML et l'accessibilité, mais les
résultats seront toujours moins précis qu'une vraie validation en ligne.
Enfin, il est possible d'ajouter une autre barre qui permet de voir en temps réel les résultats de
validation pour chaque site qui s'affichera sur votre navigateur
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 26 sur 32
B) Barre d'extension des navigateurs web
(1) Firefox, options de la barre de développement
 Onglet 11 et 12 : View source et Options
Les deux derniers onglets permettent d'éditer la source de la page web ainsi que d'accéder aux
options de configuration de la barre.
Il existe également un bouton complètement à droite de la barre qui permet d'accéder
rapidement à la console d'erreur (Javascript, css, xml, xul, ..)
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 27 sur 32
B) Barre d'extension des navigateurs web
(1) Firefox, autres extensions indispensables
Il existe plusieurs autres extensions intéressantes, voire dans certains cas indispensables pour tout développeur de page web.
Pour récupérer les extensions : http://extensions.geckozone.org/Firefox/ et https://addons.mozilla.org/firefox/extensions/
 ColorZilla
C'est une extension qui permet de retrouver facilement n'importe quelle couleur qui se trouve sur une page web, de même que de
rechercher un code couleur en hexadécimale ou rgb.
Site Officiel : http://www.iosart.com/firefox/colorzilla/
 Firebug
C'est une autre barre de développement comme celle présentée précédemment. Elle permet entre autre d'éditer le contenu html, le
css, intègre un débogueur javascript et un inspecteur DOM.
Site Officiel : http://getfirebug.com/
 IEview
Cette extension permet de charger une page web avec Internet Explorer tout en restant dans Firefox. Ceci peut être pratique pour
visualiser le résultat sans changer de navigateur ou de se rendre sur un site accessible uniquement pour Internet Exlorer.
Site Officiel : http://ieview.mozdev.org/, voir aussi IETab : https://addons.mozilla.org/firefox/1419/
 Mozilla Accessibility Extension
Une extension orientée accessibilité web
Site Officiel : https://addons.mozilla.org/firefox/1891/
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 28 sur 32
B) Barre d'extension des navigateurs web
(1) Firefox, autres extensions indispensables
 Html Validator
Basée sur l'application Tidy, cette extension permet de valider le code (x)HTML lorsqu'on affiche une page web sur le navigateur ou
lorsqu'on visualise le code source
Site Officiel : http://users.skynet.be/mgueury/mozilla/download.html
 Total Validator
Cette extension permet de valider le contenu des pages ainsi que les normes d'accessibilité WCAG, les liens, ainsi que prendre des
captures d'écrans pour différents navigateurs Windows et Linux (MAC OS X sont payantes)
Site Officiel : http://www.totalvalidator.com/support/extension.html
 PageDiff
Cette extension permet de comparer le code source de deux pages web.
Site Officiel : https://addons.mozilla.org/firefox/4274/
 View Source Chart
Permet d'avoir une vue des éléments emboîtés (DOM) lorsque l'on visualise le code source d'une page, le tout en couleur.
Site Officiel : http://jennifermadden.com/scripts/ViewRenderedSource.html
 Hack Bar
C'est une barre orientée sécurité qui permet de faire de l'audit sur un site en testant les injections SQL par exemple.
Site Officiel : https://addons.mozilla.org/firefox/3899/
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 29 sur 32
B) Barre d'extension des navigateurs web
(2) Internet explorer
 Présentation
Internet Explorer, parfois abrégé IE, MSIE ou MS IE, est le navigateur Web propriétaire de Microsoft, installé par défaut avec
Windows. C'est depuis la fin des années 1990 le navigateur le plus utilisé au monde, malgré l'apparition du navigateur Mozilla
Firefox, et dans une moindre mesure Opera et Safari. Les versions antérieures à la version 7 sont nommées « Microsoft Internet
Explorer », tandis qu'à partir de la version 7, le logiciel est nommé « Windows Internet Explorer »
Source : Wikipedia
 Barre de développement (version beta)
Il existe une barre pour développeur web pour IE, mais elle est encore en version beta et offre des options équivalentes à celle de
Firefox avec toutefois des manques importants tel que l'édition des feuilles de styles CSS.
Voici quelques liens pour récupérer d'autres barres pour Internet Explorer :
➢ Pour en savoir plus sur les barres firefox, internet explorer et opera :
http://www.fredboucher.com/infos.71-web-developer-toolbars---des-outils-au-service-des-developpeurs-web.html
➢ La barre d'internet Explorer en version beta 3 :
http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en
➢ Barre d'accessibilité web : http://www.wat-c.org/tools/WAT/versions/fr/about.html
➢ La debugbar : http://www.debugbar.com/
➢ La Web Developper Helper : http://www.techheadbrothers.com/Astuces.aspx?Id=ab8febea-455b-4f87-98b7-3eb161845cab
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 30 sur 32
C) Valider et tester ses sites web
(1) Valider les pages (x)HTML et le CSS
Pour s'assurer que chacune des pages d'un site internet est codée selon les standards émis par le w3c, il est essentiel (mais pas
obligatoire) de faire valider ses pages web avec des programmes accessibles le plus souvent en ligne que l'on appelle « validateur ».
Il existe plusieurs sites permettant d'effectuer ces tests, la plupart utilisent les outils du w3c. Ces différents outils permettent
notamment de valider le code x(HTML) de vos pages, ainsi que les feuilles de styles. Il existe également d'autres outils pour valider la
syntaxe de vos fils rss (xml) ainsi que les normes d'accessibilités WCAG.
 La déclaration DOCTYPE
Avant toute chose, le validateur doit connaître la spécification que vous utilisez (HTML 4.01, XHTML strict, etc) c'est pourquoi il est
essentiel que vos pages comportent une déclaration DOCTYPE conforme. Pour en savoir plus sur la DOCTYPE consulter ce lien :
http://pompage.net/pompe/doctype/
 Quelques liens à connaître
➢ Validateur (x)HTML officiel du w3c : http://validator.w3.org/
➢ Validateur CSS du w3c : http://jigsaw.w3.org/css-validator/validator.html#validate-by-uri
➢ Validateur du WDG : http://htmlhelp.com/tools/validator/
➢ Validateur du w3quebec (presque identique au w3c) : http://w3qc.org/validateur/
➢ Valider vos fils rss : http://feedvalidator.org/ et http://validator.w3.org/feed/
➢ Valider ces liens internet : http://validator.w3.org/checklink
➢ Valider l'accessibilité de vos pages web : http://www.w3.org/WAI/
➢ Valider plusieurs pages en même temps grâce à l'ajax : http://www.validateur.ca/
Retrouvez encore plus de liens sur le site des webmestres du gouvernement :
http://www.webmaestro.gouv.qc.ca/fr/niveau2.asp?CodePage=4.1
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 31 sur 32
C) Valider et tester ses sites web
(2) Tester vos pages avec les navigateurs web
Tester le code source de vos pages n'est pas toujours efficace, car tous les navigateurs web du marché ne respectent pas les
standards émis par le w3c. Il est donc nécessaire de tester vos sites sur plusieurs navigateurs. Voici une liste des navigateurs les
plus couramment utilisés sur lequel un site web devrait s'afficher correctement
➢ Windows : Internet Explorer 6, Internet Explorer 7, Firefox 2, Opera 9
➢ Linux : Firefox 2, Konqueror 3.5
➢ Mac OS X : Safari 2, Firefox 2, Internet Explorer 5 (n'est plus supporté par Microsoft)
 Des sites web pour tester vos pages sur plusieurs navigateurs
Dans la plupart des cas, il est assez simple de tester son site en étant sous Windows, à la fois pour Internet Explorer 7, Firefox 2 ou
Opera 9. Cela se complique quand on souhaite avoir une compatibilité avec Internet Explorer 6 alors que l'on vient d'installer Internet
Explorer 7, car les deux navigateurs ne peuvent pas être installés en même temps sur votre machine ou que nous travaillons
essentiellement sous linux, car Internet Explorer n'est disponible qu'avec la version 6 via une émulation approximative.
Il existe alors dans ce cas de figure, des sites web qui offrent la possibilité d'effectuer des captures d'écrans pour différents
navigateurs web. Ces sites sont gratuits la plupart du temps, mais à la vue des temps d'attente pour que les captures d'écrans
s'effectuent rapidement, des services payants ont fait leur apparition afin que vous ayez un contrôle total sur les captures à effectuer,
dans ce cas là, l'accès aux différents navigateurs se fait via une machine distante.
Quelques liens à visiter :
➢ Browsershots : http://browsershots.org/ (plusieurs navigateurs web pour windows, linux ou mac)
➢ Iecapture : http://www.danvine.com/iecapture/ (uniquement pour Internet Explorer 7) / http://www.danvine.com/icapture/ (Mac)
➢ Scapture : http://www.scapture.com/ (navigateurs sous linux)
➢ Browsercam : http://www.browsercam.com/ (service payant d'accès distant type VNC)
➢ Evolt : http://browsers.evolt.org/ (télécharger d'anciens navigateurs web et des versions standalone)
Jeudi 22 février 2007

» Développer, analyser et valider vos pages web Page 32 sur 32
C) Valider et tester ses sites web
(3) Autres solutions logicielles
Si vous ne souhaitez pas utiliser d'application en ligne pour tester vos sites web, car comme énoncé précédemment, cela nécessite du
temps et plusieurs captures d'écran, vous pourriez opter pour une solution virtuelle, qui consiste à utiliser des machines virtuelles. Il
existe des programmes gratuits qui permettent d'installer un autre système d'exploitation et de l'exécuter depuis votre système courant.
➢ Sous Windows : Vmware player free : http://www.vmware.com/products/player/
➢ Sous Linux : Xen (http://xenfr.org/tiki-index.php),Vmwareplayer ,Qemu (http://www.qemu.org/) et wine : (http://www.winehq.com/)
 Créer une image vierge avec vmware player free
Par défaut il n'est pas possible de créer une image virtuelle avec la version gratuite de vmware. Si par exemple vous souhaitez faire
fonctionner un autre windows sur votre ordinateur, il faudrait créer cette nouvelle image (par exemple de 5go) avec wmware (payant) et
l'exécuter avec vmware player free.
Toutefois il existe une solution qui consiste à créer une image vide en fonction des critères souhaités (système d'exploitation, mémoire,
émulation du réseau, usb, etc) en allant sur ce site web : http://www.easyvmx.com/easyvmx.shtml. Une fois l'image vide créé il suffit de
l'exécuter avec vmware player free, de mettre votre cdrom de windows dans votre lecteur et d'effectuer l'installation. Par la suite, vmware
player free vous permettra de lancer une version de votre Windows virtuelle sur n'importe quel système d'exploitation.
Jeudi 22 février 2007