I. Introduction▲
Le marché des navigateurs Web est actuellement dominé par Internet Explorer qui se fait peu à peu rattraper par Mozilla Firefox. Firefox a su utiliser les faiblesses d'Internet Explorer pour se faire adopter par une grande partie des utilisateurs. Ces faiblesses étaient (sont encore pour certaines) d'abord le mauvais respect des spécifications du W3C et la limitation quant aux fonctionnalités du navigateur.
Microsoft a su écouter ses utilisateurs en sortant une nouvelle version (Internet Explorer 7) respectant bien mieux les spécifications Web (XHTML, CSS, etc) et étant plus ouverte à l'ajout d'add-ins. Parmi les add-ins connus pour Internet Explorer 7, nous avons l'add-in Web Developper Toolbar (le sujet de cet article), mais également IE7 Pro dont Baptiste Wicht fait une présentation ici ainsi qu’IEP Plus qui fera l'objet d'un prochain article.
Les développeurs Web d'aujourd'hui sont souvent soit pro-IE (pour sa forte part de marché) soit pro-Firefox (pour son respect des spécifications du W3C) et développer un site se révèle parfois compliqué, car il est nécessaire de tester le site Web sous chaque navigateur.
Est alors arrivé Firefox et son extension IETab qui permet de tester un site web sous Internet Explorer sans quitter Firefox. Après cela est apparu l'extension pour Firefox : Web developper qui propose un très grand nombre d'options, de validation de code, d'aide à la création de CSS, et bien d'autres. Il était alors plus que logique de délaisser Internet Explorer pour Firefox avec les deux extensions précitées, installées…
Jusqu'à la sortie de l'extension « IE developper toolbar ». Celle-ci est la version IE de l'extension « Web developper ». Nous allons donc au cours de cet article voir si elle peut remplacer sa « concurrente ».
II. Présentation▲
La première chose à faire consiste à télécharger l'extension pour Internet Explorer 7 (mais qui devrait aussi fonctionner sur IE6) à l'adresse suivante : Téléchargement.
Une fois l'extension installée, lancez Internet Explorer puis cliquez sur l'icône de la barre d'outils « IE developper toolbar ». Cette icône est peut-être cachée, il vous faut dans ce cas cliquer sur la flèche à droite du menu Outils.
Cette extension propose de nombreuses fonctionnalités dont voici une liste (non exhaustive) :
- explorer et modifier la structure d'une page web en live - DOM (Document Object Model) ;
- localiser et sélectionner des éléments spécifiques sur une page Web à travers une variété de techniques ;
- désactiver de façon sélective des paramètres d'Internet Explorer ;
- voir les noms des objets HTML comme les classes, les ID, et toute autre sorte d'attributs comme les touches d'accessibilité, etc. ;
- faire ressortir les tables, les cellules, les images ou les tags sélectionnés ;
- valider le code HTML, CSS, WAI (Accessibilité), et les liens de flux RSS ;
- afficher les dimensions des images, la taille des fichiers, chemin de l'image et le texte alternatif ;
- redimensionner la fenêtre du navigateur pour simuler différentes résolutions ;
- possibilité de vider le cache ou effacer les cookies (ou alors seulement ceux associés à un domaine spécifique) ;
- afficher des règles pour aligner et/ou mesurer précisément les objets sur vos pages Web ;
- trouver les règles de style utilisées sur un élément spécifique de la page web ;
- voir le code source de façon formatée et colorée.
III. Fonctionnalités▲
Certains d'entre vous ne savent peut-être pas à quoi correspondent les fonctionnalités listées et je vais donc en décrire certaines plus en profondeur afin qu'ils comprennent l'intérêt, pour un développeur web, de ne pas se passer de cette extension.
Tentons donc de vous faire apprécier ses fonctionnalités.
Voici l'aperçu général qui contient un menu et trois panneaux possédant chacun son intérêt.
III-A. L'utilisation de DOM▲
DOM (Document Object Model) est une technologie qui fait partie du Web depuis pratiquement ses tout débuts. DOM est une conception de la structure d'une page permettant de manipuler ses éléments, ou si vous préférez, un arbre hiérarchique des éléments du pages (images, paragraphes, tableaux, cellules, etc.) et qui permet de parcourir les éléments de cet arbre jusqu'à un élément donné et d'en modifier les valeurs si nécessaire. DOM est le partenaire d'AJAX dans un grand nombre de cas pratiques.
Je doute néanmoins que vous utilisiez cette barre d'outils afin de créer du code AJAX. Son utilisation est plutôt destinée au code (x)HTML notamment pour la création de feuilles de style, en sachant par exemple où se trouve tel ou tel élément et quels sont ses attributs comme son ID.
III-A-1. Édition de l'arbre▲
La première chose intéressante est la modification de l'arbre DOM ou si vous préférez, l'édition de la page en temps réel, mais sans rien changer sur le serveur. Tout se passe en local et vous pouvez tester toutes les manipulations de votre choix sans le moindre risque. L'add-in est pour cela très facile d'utilisation et même un webmestre débutant y retrouvera ses marques.
Une fois sur votre page, dans la partie la plus à gauche, vous dépliez l'arbre jusqu'à trouver l'élément qui vous intéresse. Une fois que vous avez cliqué dessus, s'affichent dans la partie centrale les attributs de cet élément et c'est ces derniers que vous pouvez modifier. Vous n'avez qu'à cliquer sur une case pour choisir parmi tous les attributs reconnus puis en lui indiquant une valeur. La modification se fera alors instantanément dans la page Web.
III-A-2. Information sur les éléments HTML de la page▲
Cette fonctionnalité est peu souvent utilisée, mais quand elle l'est, elle est d'une grande aide. Son principe : mettre en évidence certains éléments de la page. Simplement via les menu View et Outline vous pourrez faire ressortir des éléments comme certains attributs spécifiques ou alors les éléments DIV (c'est les paramètres que j'ai choisis sur la capture suivante :
III-B. Les feuilles de style CSS▲
Il est impossible aujourd'hui de créer un bon site web professionnel ou personnel sans l'utilisation des feuilles de style, qui permettent grâce à un seul fichier, de personnaliser l'affichage, tant les couleurs que la position de chaque élément dans la page.
L'extension n'a pas pour but de vous aider à écrire une feuille de style, mais plutôt à déboguer la feuille lorsqu'un problème d'affichage se présente ou alors, il vous sera possible sur un autre site web, de simplement pointer un élément avec la souris pour voir s'afficher toutes les règles de style qui s'y appliquent. Pour cela, il vous faut savoir toutes les règles de style qui s'appliquent à cet élément et en faire la liste en analysant le code HTML et le fichier CSS peut se révéler très difficile, encore plus si la page utilise plusieurs fichiers CSS.
III-B-1. Création/Déboguage de CSS▲
Il peut arriver que vous vouliez copier le style d'une page web ne vous appartenant pas ou tout simplement que vous vouliez savoir pourquoi l'affichage d'un élément ne correspond pas à ce que vous souhaitiez. Pour cela, cliquez sur le menu Find > Select Element by click puis passez votre souris au-dessus de la page Web. À chaque fois que votre curseur rencontrera un élément (une image, une cellule, un titre, etc.), ce dernier sera entouré par une bordure bleue afin de vous indiquer l'élément marqué, puis vous devez alors cliquer une fois avec le bouton gauche de la souris. La partie inférieure se met alors à jour. Vous avez dans la partie gauche le positionnement de votre élément dans l'arbre DOM, ce qui peut vous aider pour l'héritage ainsi que la visualisation des styles dits « inline ». La partie centrale montre également les attributs de chaque élément, mais permet avant tout d'en ajouter à la volée (pour les tests) ou d'en modifier une valeur.
Enfin, la partie de droite vous permet de voir toutes les règles qui s'appliquent à votre CSS. Cela vous permet entre autres de voir que parfois des règles s'appliquent alors que vous ne le voudriez pas ou que, au contraire, une règle que vous attendiez ne s'applique pas. Dans ces deux cas, cela vient toujours d'une erreur humaine et c'est seulement grâce à ce genre de fonctionnalités, qu'il est possible de trouver rapidement le problème.
III-B-2. Nettoyage des feuilles de style▲
Une dernière fonctionnalité qui peut se révéler fort intéressante consiste à nettoyer votre feuille de style de toute règle d'affichage non utilisée, ce qui rend le fichier plus léger et plus facile à lire.
Pour faire cela, cliquez sur le menu View > CSS Selector Matches, ce qui aura pour conséquence de lister les règles CSS et d'indiquer le nombre d'éléments « touchés » par cette règle. Lorsqu'une règle n'est pas utilisée (0 match(es) for), vous pouvez la supprimer de votre feuille de style.
III-C. L'accessibilité▲
Lorsque vous créez un site web, vous devez penser à l'affichage qu'il aura sur différents navigateurs et donc penser également aux navigateurs moins connus, principalement dédiés aux personnes ayant un handicap. Vous aurez aussi les navigateurs « mobiles » comme sur le PDA ou téléphones mobiles (mais c'est une autre spécification) ainsi que les navigateurs en mode texte et/ou à lecture audio (Text-To-Speech). Pour tout cela, il existe différentes initiatives dont les plus connues restent le groupe de travail WAI et la « section 508 », qui définissent les points à suivre pour développer un site web accessible à tous. Il est important de noter que développer un site qui ne serait pas pleinement accessible à des personnes ayant un handicap comme les aveugles, s'apparente à de la discrimination et est illégal dans de nombreux pays. Il faut savoir qu'à peine 5 % des 100 sites les plus visités au monde sont pleinement compatibles et respectent tous les conseils d'accessibilité.
En résumé cela consiste à avoir un document structuré (bonne utilisation des headers), des textes alternatifs pour les liens et les images, ainsi que des touches d'accès pour naviguer parmi le site web.
Nous allons maintenant voir que l'extension peut justement nous aider à respecter ces conseils afin de rendre votre site web pleinement accessible.
Cela peut se faire par deux principales fonctionnalités :
la première, c'est la validation des règles d'accessibilité. Il vous suffit de cliquer sur le menu Tools > accessibilité et de choisir parmi les sites normes existantes (WAI et norme 508) ;
la seconde solution est de se mettre à la place d'un utilisateur avec un écran limité ou même un navigateur limité (voire en mode texte pour les aveugles. Texte uniquement, car un logiciel tiers se charge alors de lire la page Web à haute voix).
Ainsi vous pouvez grâce à cette extension, désactiver les images ou le style CSS, changer la taille de l'écran pour simuler une résolution particulière ou encore afficher les accessKeys pour voir ce que pourra faire l'utilisateur avec un handicap.
IV. Conclusion▲
On ne peut qu'apprécier l'effort utile réalisé par les développeurs de Microsoft en développant une extension qui permet aux développeurs Web de développer plus rapidement son site Web tout en restant sous Internet Explorer. Dans le pire des cas, si celui-ci aime à développer sous Firefox, avoir cette extension lui permettra de tester déboguer sous IE et de trouver plus rapidement les soucis sous le célèbre navigateur.
De mon avis personnel, Firefox est et restera mon navigateur par défaut, mais fort est de constater que Internet Explorer s'améliore de jour en jour et devient alors un vrai outil plutôt qu'un simple navigateur. Vivement la version 8 avec un éventuel moteur d'extensions.
V. Liens▲
Téléchargement de Internet Explorer 7
Téléchargement de Internet Explorer Developper Toolbar
Téléchargement de IE7 Pro
Article de présentation de IE7 Pro par Baptiste Wicht
Remerciements▲
J'aimerais remercier Jérôme Briot pour ses corrections et conseils apportés à l'élaboration de cet article