» Développer, analyser et valider vos pages web                                                     Page 1 sur 32
   Prése...
» Développer, analyser et valider vos pages web                                                              Page 2 sur 32...
» Développer, analyser et valider vos pages web                                                                  Page 3 su...
» Développer, analyser et valider vos pages web                                                  Page 4 sur 32
       A) C...
» Développer, analyser et valider vos pages web                                                                           ...
» Développer, analyser et valider vos pages web                                                                       Page...
» Développer, analyser et valider vos pages web                                                                  Page 7 su...
» Développer, analyser et valider vos pages web                 Page 8 sur 32
     A) Créez vos pages avec EasyEclipse

  ...
» Développer, analyser et valider vos pages web                                        Page 9 sur 32
     A) Créez vos pag...
» Développer, analyser et valider vos pages web                                                                 Page 10 su...
» Développer, analyser et valider vos pages web                                                                       Page...
» Développer, analyser et valider vos pages web                  Page 12 sur 32
     A) Créez vos pages avec EasyEclipse

...
» Développer, analyser et valider vos pages web                    Page 13 sur 32
     A) Créez vos pages avec EasyEclipse...
» Développer, analyser et valider vos pages web                                                                           ...
» Développer, analyser et valider vos pages web                                                                Page 15 sur...
» Développer, analyser et valider vos pages web                                                                        Pag...
» Développer, analyser et valider vos pages web                                                                      Page ...
» Développer, analyser et valider vos pages web                                                                       Page...
» Développer, analyser et valider vos pages web                                                   Page 19 sur 32
      B) ...
» Développer, analyser et valider vos pages web                                                   Page 20 sur 32
      B) ...
» Développer, analyser et valider vos pages web                                                      Page 21 sur 32
      ...
» Développer, analyser et valider vos pages web                   Page 22 sur 32
     B) Barre d'extension des navigateurs...
» Développer, analyser et valider vos pages web                                  Page 23 sur 32
     B) Barre d'extension ...
» Développer, analyser et valider vos pages web                                               Page 24 sur 32
     B) Barre...
» Développer, analyser et valider vos pages web                                                              Page 25 sur 3...
» Développer, analyser et valider vos pages web                                                     Page 26 sur 32
     B)...
» Développer, analyser et valider vos pages web                                                                      Page ...
» Développer, analyser et valider vos pages web                                                                          P...
» Développer, analyser et valider vos pages web                                                                    Page 29...
» Développer, analyser et valider vos pages web                                                                         Pa...
» Développer, analyser et valider vos pages web                                                                         Pa...
» Développer, analyser et valider vos pages web                                                                        Pag...
Upcoming SlideShare
Loading in...5
×

Barre pour développeur Firefox et Eclipse

3,697

Published on

Présentation au logiciel Eclipse et les outils de collaborations dont SVN. La deuxième partie est consacrée à la barre de développeur pour le
navigateur Firefox, on y retrouve les outils les plus utiles.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
3,697
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Barre pour développeur Firefox et Eclipse

  1. 1. » 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
  2. 2. » 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
  3. 3. » 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
  4. 4. » 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
  5. 5. » 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
  6. 6. » 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
  7. 7. » 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
  8. 8. » 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
  9. 9. » 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
  10. 10. » 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
  11. 11. » 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
  12. 12. » 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
  13. 13. » 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
  14. 14. » 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
  15. 15. » 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
  16. 16. » 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
  17. 17. » 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
  18. 18. » 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
  19. 19. » 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
  20. 20. » 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
  21. 21. » 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
  22. 22. » 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
  23. 23. » 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
  24. 24. » 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
  25. 25. » 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
  26. 26. » 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
  27. 27. » 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
  28. 28. » 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
  29. 29. » 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
  30. 30. » 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
  31. 31. » 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
  32. 32. » 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×