SlideShare une entreprise Scribd logo
1  sur  32
Télécharger pour lire hors ligne
» 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

Contenu connexe

Tendances

Distro Recipes 2013 : Yocto / OpenEmbedded
Distro Recipes 2013 : Yocto / OpenEmbeddedDistro Recipes 2013 : Yocto / OpenEmbedded
Distro Recipes 2013 : Yocto / OpenEmbedded
Anne Nicolas
 
Embarquer Linux et des systèmes libres, méthodes et apports
Embarquer Linux et des systèmes libres, méthodes et apportsEmbarquer Linux et des systèmes libres, méthodes et apports
Embarquer Linux et des systèmes libres, méthodes et apports
guest3be047
 
Linux - Hedi Magroun - AUF - 2008
Linux -  Hedi Magroun - AUF - 2008Linux -  Hedi Magroun - AUF - 2008
Linux - Hedi Magroun - AUF - 2008
Hedi Magroun
 
Logiciel Libre - Hedi Magroun - AUF - 2008
Logiciel Libre - Hedi Magroun - AUF - 2008Logiciel Libre - Hedi Magroun - AUF - 2008
Logiciel Libre - Hedi Magroun - AUF - 2008
Hedi Magroun
 
974267 ubuntu-documentation-installation-configuration
974267 ubuntu-documentation-installation-configuration974267 ubuntu-documentation-installation-configuration
974267 ubuntu-documentation-installation-configuration
Younes Hajji
 

Tendances (20)

Open Wide : Les outils pour le développement des systemes embarques
Open Wide : Les outils pour le développement des systemes embarquesOpen Wide : Les outils pour le développement des systemes embarques
Open Wide : Les outils pour le développement des systemes embarques
 
OS libres pour l'IoT - Zephyr
OS libres pour l'IoT - ZephyrOS libres pour l'IoT - Zephyr
OS libres pour l'IoT - Zephyr
 
Yocto une solution robuste pour construire des applications à fort contenu ap...
Yocto une solution robuste pour construire des applications à fort contenu ap...Yocto une solution robuste pour construire des applications à fort contenu ap...
Yocto une solution robuste pour construire des applications à fort contenu ap...
 
Créer sa distribution Linux embarqué avec Yocto ou Angström
Créer sa distribution Linux embarqué avec Yocto ou AngströmCréer sa distribution Linux embarqué avec Yocto ou Angström
Créer sa distribution Linux embarqué avec Yocto ou Angström
 
Présentation Yocto - SophiaConf 2015
Présentation Yocto - SophiaConf 2015Présentation Yocto - SophiaConf 2015
Présentation Yocto - SophiaConf 2015
 
Open Embedded un framework libre pour assurer la cohérence de son projet
Open Embedded un framework libre pour assurer la cohérence de son projetOpen Embedded un framework libre pour assurer la cohérence de son projet
Open Embedded un framework libre pour assurer la cohérence de son projet
 
Distro Recipes 2013 : Yocto / OpenEmbedded
Distro Recipes 2013 : Yocto / OpenEmbeddedDistro Recipes 2013 : Yocto / OpenEmbedded
Distro Recipes 2013 : Yocto / OpenEmbedded
 
Embarquer Linux et des systèmes libres, méthodes et apports
Embarquer Linux et des systèmes libres, méthodes et apportsEmbarquer Linux et des systèmes libres, méthodes et apports
Embarquer Linux et des systèmes libres, méthodes et apports
 
Meetup Systemd vs sysvinit
Meetup Systemd vs sysvinitMeetup Systemd vs sysvinit
Meetup Systemd vs sysvinit
 
Gestion des dépendances dans un projet PHP - Forum PHP 2012
Gestion des dépendances dans un projet PHP - Forum PHP 2012Gestion des dépendances dans un projet PHP - Forum PHP 2012
Gestion des dépendances dans un projet PHP - Forum PHP 2012
 
Licences libres et embarqué
Licences libres et embarquéLicences libres et embarqué
Licences libres et embarqué
 
Historique
HistoriqueHistorique
Historique
 
Autotools
AutotoolsAutotools
Autotools
 
Linux - Hedi Magroun - AUF - 2008
Linux -  Hedi Magroun - AUF - 2008Linux -  Hedi Magroun - AUF - 2008
Linux - Hedi Magroun - AUF - 2008
 
Logiciel Libre - Hedi Magroun - AUF - 2008
Logiciel Libre - Hedi Magroun - AUF - 2008Logiciel Libre - Hedi Magroun - AUF - 2008
Logiciel Libre - Hedi Magroun - AUF - 2008
 
Cours linux
Cours linuxCours linux
Cours linux
 
Open Wide : Les interfaces graphiques dans l'embarque
Open Wide : Les interfaces graphiques dans l'embarqueOpen Wide : Les interfaces graphiques dans l'embarque
Open Wide : Les interfaces graphiques dans l'embarque
 
974267 ubuntu-documentation-installation-configuration
974267 ubuntu-documentation-installation-configuration974267 ubuntu-documentation-installation-configuration
974267 ubuntu-documentation-installation-configuration
 
NetBSD operating system: Clean Code, Ports, Anykernel, pkgsrc and Desktop pro...
NetBSD operating system: Clean Code, Ports, Anykernel, pkgsrc and Desktop pro...NetBSD operating system: Clean Code, Ports, Anykernel, pkgsrc and Desktop pro...
NetBSD operating system: Clean Code, Ports, Anykernel, pkgsrc and Desktop pro...
 
Comparatif Windows/Linux
Comparatif Windows/LinuxComparatif Windows/Linux
Comparatif Windows/Linux
 

En vedette

Il était une fois la vie d'un Product Owner
Il était une fois la vie d'un Product OwnerIl était une fois la vie d'un Product Owner
Il était une fois la vie d'un Product Owner
Romain Couturier
 
Baromètre Converteo sur l’efficacité des moteurs de recherche interne - Etude...
Baromètre Converteo sur l’efficacité des moteurs de recherche interne - Etude...Baromètre Converteo sur l’efficacité des moteurs de recherche interne - Etude...
Baromètre Converteo sur l’efficacité des moteurs de recherche interne - Etude...
alain Clapaud
 
Brulures caustiques oesophage
Brulures caustiques oesophageBrulures caustiques oesophage
Brulures caustiques oesophage
Hana Hanouna
 
Tour du monde
Tour du mondeTour du monde
Tour du monde
guimera
 
French IGCSE Oral Area A : Home Life & School
French IGCSE Oral Area A : Home Life & SchoolFrench IGCSE Oral Area A : Home Life & School
French IGCSE Oral Area A : Home Life & School
David Ash
 

En vedette (20)

Atelier veille et prospection en btob nouvelles techniques - 14112013 - dif...
Atelier   veille et prospection en btob nouvelles techniques - 14112013 - dif...Atelier   veille et prospection en btob nouvelles techniques - 14112013 - dif...
Atelier veille et prospection en btob nouvelles techniques - 14112013 - dif...
 
Apache Cassandra - Concepts et fonctionnalités
Apache Cassandra - Concepts et fonctionnalitésApache Cassandra - Concepts et fonctionnalités
Apache Cassandra - Concepts et fonctionnalités
 
Il était une fois la vie d'un Product Owner
Il était une fois la vie d'un Product OwnerIl était une fois la vie d'un Product Owner
Il était une fois la vie d'un Product Owner
 
Statistiques, indicateurs, performance et qualité : prendre la mesure de la b...
Statistiques, indicateurs, performance et qualité : prendre la mesure de la b...Statistiques, indicateurs, performance et qualité : prendre la mesure de la b...
Statistiques, indicateurs, performance et qualité : prendre la mesure de la b...
 
SMMW // Cas Marketel - Alimentation Couche-Tard
SMMW // Cas Marketel - Alimentation Couche-TardSMMW // Cas Marketel - Alimentation Couche-Tard
SMMW // Cas Marketel - Alimentation Couche-Tard
 
La féodalité en Europe
La féodalité en EuropeLa féodalité en Europe
La féodalité en Europe
 
Les bases de Scrum
Les bases de ScrumLes bases de Scrum
Les bases de Scrum
 
Baromètre Converteo sur l’efficacité des moteurs de recherche interne - Etude...
Baromètre Converteo sur l’efficacité des moteurs de recherche interne - Etude...Baromètre Converteo sur l’efficacité des moteurs de recherche interne - Etude...
Baromètre Converteo sur l’efficacité des moteurs de recherche interne - Etude...
 
Modelisation et maquettage 2015
Modelisation et maquettage 2015Modelisation et maquettage 2015
Modelisation et maquettage 2015
 
Brulures caustiques oesophage
Brulures caustiques oesophageBrulures caustiques oesophage
Brulures caustiques oesophage
 
Atelier Isidore du colloque des Industries Numériques et de la Santé: "m-sant...
Atelier Isidore du colloque des Industries Numériques et de la Santé: "m-sant...Atelier Isidore du colloque des Industries Numériques et de la Santé: "m-sant...
Atelier Isidore du colloque des Industries Numériques et de la Santé: "m-sant...
 
Matinée marketplace HiPay, Mirakl
Matinée marketplace HiPay, MiraklMatinée marketplace HiPay, Mirakl
Matinée marketplace HiPay, Mirakl
 
Dear NSA, let me take care of your slides.
Dear NSA, let me take care of your slides.Dear NSA, let me take care of your slides.
Dear NSA, let me take care of your slides.
 
Tour du monde
Tour du mondeTour du monde
Tour du monde
 
Chapitre 2 complexité
Chapitre 2 complexitéChapitre 2 complexité
Chapitre 2 complexité
 
French IGCSE Oral Area A : Home Life & School
French IGCSE Oral Area A : Home Life & SchoolFrench IGCSE Oral Area A : Home Life & School
French IGCSE Oral Area A : Home Life & School
 
Panorama 2013 du Business Process Management : Le BPM en marche
Panorama 2013 du Business Process Management : Le BPM en marchePanorama 2013 du Business Process Management : Le BPM en marche
Panorama 2013 du Business Process Management : Le BPM en marche
 
What I Carry: 10 Tools for Success
What I Carry: 10 Tools for SuccessWhat I Carry: 10 Tools for Success
What I Carry: 10 Tools for Success
 
BLSTK Replay n°138 - la revue luxe et digitale 05.10 au 11.11.15
BLSTK Replay n°138 - la revue luxe et digitale 05.10 au 11.11.15BLSTK Replay n°138 - la revue luxe et digitale 05.10 au 11.11.15
BLSTK Replay n°138 - la revue luxe et digitale 05.10 au 11.11.15
 
2015 Upload Campaigns Calendar - SlideShare
2015 Upload Campaigns Calendar - SlideShare2015 Upload Campaigns Calendar - SlideShare
2015 Upload Campaigns Calendar - SlideShare
 

Similaire à Barre pour développeur Firefox et Eclipse

Le Developpement Web Aspnet2 Vb2005
Le Developpement Web Aspnet2   Vb2005Le Developpement Web Aspnet2   Vb2005
Le Developpement Web Aspnet2 Vb2005
Gregory Renard
 
Play Framework
Play FrameworkPlay Framework
Play Framework
Armaklan
 
La plateforme Web Microsoft
La plateforme Web MicrosoftLa plateforme Web Microsoft
La plateforme Web Microsoft
Christophe Lauer
 

Similaire à Barre pour développeur Firefox et Eclipse (20)

Windev
WindevWindev
Windev
 
Nouveautés 2009
Nouveautés 2009Nouveautés 2009
Nouveautés 2009
 
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
 
Gwt oxiane-novae-lr
Gwt oxiane-novae-lrGwt oxiane-novae-lr
Gwt oxiane-novae-lr
 
Compte rendu Blend Web Mix 2015
Compte rendu Blend Web Mix 2015Compte rendu Blend Web Mix 2015
Compte rendu Blend Web Mix 2015
 
HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?HTML5 et Internet Explorer 9, est-ce réellement compatible?
HTML5 et Internet Explorer 9, est-ce réellement compatible?
 
Le Developpement Web Aspnet2 Vb2005
Le Developpement Web Aspnet2   Vb2005Le Developpement Web Aspnet2   Vb2005
Le Developpement Web Aspnet2 Vb2005
 
Développement de plug in sous eclipse
Développement de plug in sous eclipseDéveloppement de plug in sous eclipse
Développement de plug in sous eclipse
 
Décourvir les logiciels libres
Décourvir les logiciels libresDécourvir les logiciels libres
Décourvir les logiciels libres
 
Présentation1
Présentation1Présentation1
Présentation1
 
Play Framework
Play FrameworkPlay Framework
Play Framework
 
Gab17 lyon-Docker pour quoi faire - Cédric Leblond et Derue
Gab17 lyon-Docker pour quoi faire - Cédric Leblond et DerueGab17 lyon-Docker pour quoi faire - Cédric Leblond et Derue
Gab17 lyon-Docker pour quoi faire - Cédric Leblond et Derue
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !
 
Présentation eZ publish
Présentation eZ publishPrésentation eZ publish
Présentation eZ publish
 
Être productif avec JHipster - Devoxx France 2017
Être productif avec JHipster - Devoxx France 2017Être productif avec JHipster - Devoxx France 2017
Être productif avec JHipster - Devoxx France 2017
 
CI-Jenkins.pptx
CI-Jenkins.pptxCI-Jenkins.pptx
CI-Jenkins.pptx
 
Google Web Toolkit 1.5 Presentation Web Creative Common
Google Web Toolkit 1.5 Presentation Web Creative CommonGoogle Web Toolkit 1.5 Presentation Web Creative Common
Google Web Toolkit 1.5 Presentation Web Creative Common
 
Introduction webextensions
Introduction webextensionsIntroduction webextensions
Introduction webextensions
 
Scub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libreScub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libre
 
La plateforme Web Microsoft
La plateforme Web MicrosoftLa plateforme Web Microsoft
La plateforme Web Microsoft
 

Plus de Yannick Pavard

Plus de Yannick Pavard (20)

Media center sous linux
Media center sous linuxMedia center sous linux
Media center sous linux
 
RMLL 2011 - L'accessibilité Web des CMS
RMLL 2011 - L'accessibilité Web des CMSRMLL 2011 - L'accessibilité Web des CMS
RMLL 2011 - L'accessibilité Web des CMS
 
RMLL 2011 - TYPO3 le CMS de référence au gouvernement du Québec
RMLL 2011   - TYPO3 le CMS de référence au gouvernement du QuébecRMLL 2011   - TYPO3 le CMS de référence au gouvernement du Québec
RMLL 2011 - TYPO3 le CMS de référence au gouvernement du Québec
 
L'accessibilité en 20 étapes pour TYPO3 et Wordpress
L'accessibilité en 20 étapes pour TYPO3 et WordpressL'accessibilité en 20 étapes pour TYPO3 et Wordpress
L'accessibilité en 20 étapes pour TYPO3 et Wordpress
 
TYPO3 et l'accessibilité web
TYPO3 et l'accessibilité webTYPO3 et l'accessibilité web
TYPO3 et l'accessibilité web
 
Les nouveautés de TYPO3 4.2
Les nouveautés de TYPO3 4.2Les nouveautés de TYPO3 4.2
Les nouveautés de TYPO3 4.2
 
Statistique de TYPO3 dans le monde
Statistique de TYPO3 dans le mondeStatistique de TYPO3 dans le monde
Statistique de TYPO3 dans le monde
 
Formation sur le CSS
Formation sur le CSSFormation sur le CSS
Formation sur le CSS
 
Administration de plusieurs sites TYPO3
Administration de plusieurs sites TYPO3Administration de plusieurs sites TYPO3
Administration de plusieurs sites TYPO3
 
Typo3 En 1 Heure - Conférence Php Québec 2009
Typo3 En 1 Heure - Conférence Php Québec 2009Typo3 En 1 Heure - Conférence Php Québec 2009
Typo3 En 1 Heure - Conférence Php Québec 2009
 
Outils Indispensables pour vs navigateurs web
Outils Indispensables pour vs navigateurs webOutils Indispensables pour vs navigateurs web
Outils Indispensables pour vs navigateurs web
 
Présentation sur TWiki
Présentation sur TWikiPrésentation sur TWiki
Présentation sur TWiki
 
Alfresco et TYPO3, ou en sommes nous ?
Alfresco et TYPO3, ou en sommes nous ?Alfresco et TYPO3, ou en sommes nous ?
Alfresco et TYPO3, ou en sommes nous ?
 
Le web et les logiciels libres
Le web et les logiciels libresLe web et les logiciels libres
Le web et les logiciels libres
 
Migration du site du MDEIE vers le CMS TYPO3
Migration du site du MDEIE vers le CMS TYPO3Migration du site du MDEIE vers le CMS TYPO3
Migration du site du MDEIE vers le CMS TYPO3
 
Présentation des travaux entre TYPO3 et Alfresco
Présentation des travaux entre TYPO3 et AlfrescoPrésentation des travaux entre TYPO3 et Alfresco
Présentation des travaux entre TYPO3 et Alfresco
 
Les nouveautés de TYPO3 4.2
Les nouveautés de TYPO3 4.2Les nouveautés de TYPO3 4.2
Les nouveautés de TYPO3 4.2
 
Avantages de TYPO3 dans un environnement LAMP
Avantages de TYPO3 dans un environnement LAMPAvantages de TYPO3 dans un environnement LAMP
Avantages de TYPO3 dans un environnement LAMP
 
TYPO3, le CMS de référence au gouvernement québécois
TYPO3, le CMS de référence au gouvernement québécoisTYPO3, le CMS de référence au gouvernement québécois
TYPO3, le CMS de référence au gouvernement québécois
 
Tour d'horizon des CMS Open Source
Tour d'horizon des CMS Open SourceTour d'horizon des CMS Open Source
Tour d'horizon des CMS Open Source
 

Barre pour développeur Firefox et Eclipse

  • 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. » 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. » 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. » 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. » 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. » 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. » 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. » 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. » 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. » 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. » 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. » 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. » 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. » 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. » 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. » 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. » 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. » 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. » 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. » 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. » 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. » 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. » 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. » 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. » 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. » 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. » 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. » 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. » 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. » 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. » 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. » 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