barre pour développeur firefox et eclipse

» Développer, analyser et valider vos pages web» Développer, analyser et valider vos pages web

Jeudi 22 février 2007

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

(6) Pour aller plus loin...

B) Extensions des navigateurs web

(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)

C) Valider et tester ses sites web

(1) Valider vos pages (x)HTML et le CSS

(2) Tester vos pages avec les navigateurs web

(3) Autres solutions logicielles

Présentation effectuée par Yannick Pavard ([email protected])



sur 32

A) Créez vos pages avec EasyEclipse

(1) Présentation de EasyEclipse

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

Site Officiel : http://www.easyeclipse.org/Traduction : http://download.eclipse.org/eclipse/downloads/

http://www.easyeclipse.org/site/distributions/lamp.html

http://www.easyeclipse.org/

http://download.eclipse.org/eclipse/downloads/



sur 32


(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, ..)



sur 32


(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



sur 32


(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.



sur 32



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



sur 32



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.



sur 32



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.



sur 32



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.



sur 32



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.



sur 32



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



sur 32



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.



sur 32



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.



sur 32


(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

http://www.eclipse.org/

http://www.easyeclipse.org/

http://fr.wikipedia.org/wiki/Eclipse_%28logiciel%29

http://jp-grossglauser.developpez.com/tutoriels/logiciels/phpeclipse/

http://www.eclipse.org/php/

http://www.phpeclipse.de/

http://dd.cron.ru/dbg/

http://www.zend.com/pdt

http://home.gna.org/eclox/

http://www.plog.free.fr/blog/index.php?2005/02/19/104-intsallation-eclipse-phpeclipse-dbg-debugger

http://docs.schuetzengau-freising.de/modules/xdocman/index.php?doc=xo-002&lang=en



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.

http://chrispederick.com/work/webdeveloper/

http://joliclic.free.fr/mozilla/webdeveloper/



sur 32


(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.



sur 32



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.



sur 32



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 :



sur 32



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.



sur 32



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



sur 32



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)



sur 32



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)



sur 32



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)



sur 32



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.



sur 32



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



sur 32



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, ..)



sur 32


(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/

http://extensions.geckozone.org/Firefox/

https://addons.mozilla.org/firefox/extensions/

http://www.iosart.com/firefox/colorzilla/

http://getfirebug.com/

http://ieview.mozdev.org/

https://addons.mozilla.org/firefox/1419/




sur 32


(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.


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.


http://users.skynet.be/mgueury/mozilla/download.html

http://www.totalvalidator.com/support/extension.html


http://jennifermadden.com/scripts/ViewRenderedSource.html




sur 32


(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

http://www.fredboucher.com/infos.71-web-developer-toolbars---des-outils-au-service-des-developpeurs-web.html

http://www.microsoft.com/downloads/details.aspx?FamilyID=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

http://www.wat-c.org/tools/WAT/versions/fr/about.html

http://www.debugbar.com/

http://www.techheadbrothers.com/Astuces.aspx?Id=ab8febea-455b-4f87-98b7-3eb161845cab



sur 32


(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

http://pompage.net/pompe/doctype/

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/validator.html#validate-by-uri

http://htmlhelp.com/tools/validator/

http://w3qc.org/validateur/

http://feedvalidator.org/

http://validator.w3.org/feed/

http://validator.w3.org/checklink

http://www.w3.org/WAI/

http://www.validateur.ca/

http://www.webmaestro.gouv.qc.ca/fr/niveau2.asp?CodePage=4.1



sur 32


(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)

http://browsershots.org/

http://www.danvine.com/iecapture/

http://www.danvine.com/icapture/

http://www.scapture.com/

http://www.browsercam.com/

http://browsers.evolt.org/



sur 32


(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.

http://www.vmware.com/products/player/

http://xenfr.org/tiki-index.php

http://www.qemu.org/

http://www.winehq.com/

http://www.easyvmx.com/easyvmx.shtml

barre pour développeur firefox et eclipse

Technology