[PDF] Tutorial des barres doutils dans Mozilla Firefox

View - Download Tutorial des barres doutils dans Mozilla Firefox

Previous PDF

Next PDF

Groupe Accessibilité

Direction des systèmes d"information (DSI)

Rue Caroline 11, 1014 Lausanne

Version 2.1

24. septembre 2007

Tutorial des barres d"outils dans Mozilla Firefox

Responsable du projet : Marc Johannot

Auteur : Cide

Collaborateurs : Cyrille Verdon, Pouly Romain

Groupe Accessibilité Direction des systèmes d"information (DSI Rue Caroline 11, 1014 Lausanne Tutorial Barres d"outils

Tutorial_BarresOutils_WebDeveloperToolba

r.doc créé par : Cide modifié par : Pouly Romain

Verdon Cyrille Page 2 sur 14

Créé le 24/09/2007 10:02

Dernier enregistrement le 24/09/2007 10:02

TTTUUUTTTOOORRRIIIAAALLL

Les barres d"outils d"accessibilité de Mozilla Firefox :

¨ Accessibar

¨ Accessibility Toolbar

¨ Web Developer Toolbar

Les comparaisons des barres d"outils d"accessibilité des navigateurs suivants :

¨ Mozilla Firefox

¨ Internet explorer

¨ Opéra

1. BARRES D"ACCESSIBILITÉ FIREFOX.................................................................................................................................3

1.1. Web Developer Toolbar...........................................................................................................................................3

1.1.1. Désactiver....................................................................................................................................................................... 3

1.1.2. Cookies........................................................................................................................................................................... 4

1.1.3. CSS................................................................................................................................................................................ 4

1.1.4. Formulaire....................................................................................................................................................................... 5

1.1.5. Images ............................................................................................................................................................................ 6

1.1.6. Information...................................................................................................................................................................... 8

1.1.7. Divers............................................................................................................................................................................ 10

1.1.8. Entourer ........................................................................................................................................................................ 11

1.1.9. Redimensionner............................................................................................................................................................ 12

1.1.10. Outils......................................................................................................................................................................... 13

1.1.11. Voir Source............................................................................................................................................................... 14

1.1.12. Options ..................................................................................................................................................................... 14

2. SUPPORT....................................................................................................................................................................14

Groupe Accessibilité Direction des systèmes d"information (DSI Rue Caroline 11, 1014 Lausanne Tutorial Barres d"outils

Tutorial_BarresOutils_WebDeveloperToolba

r.doc créé par : Cide modifié par : Pouly Romain

Verdon Cyrille Page 3 sur 14

Créé le 24/09/2007 10:02

Dernier enregistrement le 24/09/2007 10:02

111... BBBaaarrrrrreeesss ddd"""aaacccccceeessssssiiibbbiiillliiitttééé FFFiiirrreeefffoooxxx

1.1. Web Developer Toolbar

Télécharger en français la barre d"outils Web Developer 1.

Cette extension pourrait être définie comme "le couteau suisse pour webmaster». L"utilisation de cette barre est assez

intuitif et est très pratique pour l"utilisation des CSS 2.

1.1.1. Désactiver

"Désactiver le cache» vous permet de désactiver tous les fichiers temporaires qui se souviennent des pages visitées. "Désactiver Java» désactive tout le Java. "Désactiver JavaScript permet de désactiver toutes les boucles JavaScript et aussi les avertissements (Avertissements stricts). "Désactiver les redirections Meta» désactive les redirections automatiques que peut faire un meta 3. "Désactiver la taille de police minimale», partout (CSS de la page ou du navigateur) ou la taille minimum a été précisée, cette fonction la désactive. "Désactiver les couleurs de la page» désactive les couleurs de la page (à ne pas confondre avec les images). "Désactiver le bloquer de pop up» désactive le bloqueur de pop up. "Désactiver le Proxy», pour les personnes passant par un Proxy (réseau), cela leur permet de désactiver leur connexion Internet et pouvoir voir leur page en local. Pour ceux passant par une connexion normale, cela ne change rien.

1 Source de téléchargement : http://joliclic.free.fr/mozilla/webdeveloper/.

2 Pour de plus amples informations sur cette barre d"outils, veuillez consulter : http://framasoft.net/article3825.html.

3 Qu"est-ce qu"un "meta» ? : http://fr.wikipedia.org/wiki/Balise_meta.

Groupe Accessibilité Direction des systèmes d"information (DSI Rue Caroline 11, 1014 Lausanne Tutorial Barres d"outils

Tutorial_BarresOutils_WebDeveloperToolba

r.doc créé par : Cide modifié par : Pouly Romain

Verdon Cyrille Page 4 sur 14

Créé le 24/09/2007 10:02

Dernier enregistrement le 24/09/2007 10:02

"Désactiver le Référer» désactive le chemin parcouru pour arriver sur la page actuelle.

1.1.2. Cookies

"Désactiver les cookies» vous permet de désactiver tout les cookies ou seulement ceux des sites externes. "Effacer les cookies de session de ce site» vous permet d"effacer les cookies déjà enregistrés. "Supprimer les cookies de ce domaine» détruit vos cookies sur le site visité. "Supprimer les cookies de ce chemin» détruit le chemin à l"intérieur du domaine pour lequel le cookie est valable. "Information sur les cookies» voir les informations sur les cookies. "Ajouter un cookie» lance une boîte de dialogue qui permet d"ajouter un cookie.

1.1.3. CSS

"Désactiver les styles CSS» : ¨ "Tout les styles» enlève tout les styles CSS. ¨ "Styles par défaut du navigateur» désactive les styles par défaut du navigateur. ¨ "Styles incorporés» désactive les styles écrits dans le"head». ¨ "Styles en-ligne» désactive les styles écrits dans le body. ¨ "Feuilles de styles liées» désactive les pages CSS en lien. ¨ "Styles d"impression» désactive la feuille de style pour le "print».

¨ "Feuilles de styles individuelles» permet de visualiser les différentes feuilles de style et de les

désactiver. Groupe Accessibilité Direction des systèmes d"information (DSI Rue Caroline 11, 1014 Lausanne Tutorial Barres d"outils

Tutorial_BarresOutils_WebDeveloperToolba

r.doc créé par : Cide modifié par : Pouly Romain

Verdon Cyrille Page 5 sur 14

Créé le 24/09/2007 10:02

Dernier enregistrement le 24/09/2007 10:02

"Afficher les CSS par type de média», montre la page avec le CSS pour le "print» ou pour le "handheld»

(appareils portatifs), se réinitialise en ouvrant une autre page. ("print» et "handheld» sont activés par défaut

sur les navigateurs Internet.) "Voir les CSS» la feuille de style apparaît dans une nouvelle fenêtre.

"Voir les styles d"un élément particulier» regarde les information (tableau, Div, ...) qui sont dans la feuille de

style pour une section précise (nouvelle barre d"outils). "Ajouter une feuille de style personnalisée...» ajoute votre propre feuille de style.

"Editer les CSS» vous permet d"éditer la feuille de style (disparaît lors de l"actualisation de la page).

"Utiliser le mode ''border-box""» utilise le modèle traditionnel au lieu du W3C. Pratique pour savoir si nos blocs

ont bien été définis.

1.1.4. Formulaire

"Afficher les détails du formulaire» vous montre les informations de formulaires 4. "Montrer les mots de passe» vous dévoile votre mot de passe (à la place des caractères masqués). "Informations sur les formulaires» vous montre les informations du tableau sous forme de tableau (voir exemple du site de youtube en bas de page). "Convertir les méthodes de formulaire» convertit la méthode du formulaire de GET en POST ou vice-versa. "Convertir les éléments ''select"" en ''input text""» convertit les ''éléments à sélectionner"" en block de texte à insérer. "Autoriser l"auto-complétion» autorise que les formulaires soient remplis automatiquement (si ceux-ci sont configurés pour cet effet). "Autoriser tous les champs de formulaire», tous les champs du formulaire sont actifs. "Décocher les boutons radio» efface la sélection prédéfinie dans les boutons. "Rendre inscriptibles les champs de formulaire» permet d"autoriser la saisie à l"intérieur des champs du formulaire. "Remplir les champs de formulaire» remplit les formulaires inscriptibles avec la valeur du "name».

4 Tester cette option sur une page du site http://www.youtube.com/ pour vous donner un aperçu pertinent.

Groupe Accessibilité Direction des systèmes d"information (DSI Rue Caroline 11, 1014 Lausanne Tutorial Barres d"outils

Tutorial_BarresOutils_WebDeveloperToolba

r.doc créé par : Cide modifié par : Pouly Romain

Verdon Cyrille Page 6 sur 14

Créé le 24/09/2007 10:02

Dernier enregistrement le 24/09/2007 10:02

"Supprimer les longueurs maximales», dans un formulaire, quand on doit remplir un champ, l"auteur a défini une longueur maximale afin qu"un visiteur ne remplisse pas n"importe quoi. Cette fonction supprime les longueurs maximales des champs.

1.1.5. Images

"Désactiver les images»

¨ "Toutes les images» désactive toutes les images de la page ouverte en cassant leurs liens mais en

vous indiquant toujours qu"il y a une image ici. ¨ "Images externes au site» désactive les images ne pointant pas sur le site en cours.

¨ "Images animées» désactive les bannières ou autres GIF qui pourraient vous déconcentrer ou rendre

épileptique.

"Afficher les attributs Alt» affiche les descriptifs des images. "Afficher les dimensions des images» affiche les dimensions des images. "Afficher le poids des images» affiche le poids en Ko. "Afficher les URL des images» affiche l"url des images.

"Trouver les images inaccessibles» vous ouvre une nouvelle page, listant le site et vous montrant si ce

dernier possède des images invisibles. Groupe Accessibilité Direction des systèmes d"information (DSI Rue Caroline 11, 1014 Lausanne Tutorial Barres d"outils

Tutorial_BarresOutils_WebDeveloperToolba

r.doc créé par : Cide modifié par : Pouly Romain

Verdon Cyrille Page 7 sur 14

Créé le 24/09/2007 10:02

Dernier enregistrement le 24/09/2007 10:02

"Entourer les images» ¨ "Toutes les images» entoure en rouge toutes les images du site. ¨ "Images d"arrière-plan» entoure en rouge les images d"arrière plan. ¨ "Images avec des dimensions ajustées» entoure en rouge les images qui ont des dimensions ajustées. ¨ "Images avec attribut alt vide» entoure en rouge les images qui ont un attribut "alt" vide. ¨ "Images surdimensionnées» entoure en rouge les images qui sont surdimensionnées. ¨ "Images sans dimension» entoure en rouge les images qui n"ont pas de dimensions fixes. ¨ "Images sans attribut title» entoure en rouge les images qui n"ont pas d"attribut "title".

"Informations sur les images» vous ouvre une page ou les images du site sont décortiquées et vous donne

leurs informations. "Cacher les images d"arrière-plan» vous cache les images dans le ''background"". "Ne pas afficher les images» masque vos images.

"Afficher les images avec leurs pleines dimensions» force l"image à prendre la dimension qu"il y est attribué.

"Rendre les images invisibles» masque les images et aussi le ''background"" qui est défini par une couleur et

non une image. "Remplacer les images par l"attribut alt» remplace les images par l"attribut ''alt"". Groupe Accessibilité Direction des systèmes d"information (DSI Rue Caroline 11, 1014 Lausanne Tutorial Barres d"outils

Tutorial_BarresOutils_WebDeveloperToolba

r.doc créé par : Cide modifié par : Pouly Romain

Verdon Cyrille Page 8 sur 14

Créé le 24/09/2007 10:02

Dernier enregistrement le 24/09/2007 10:02

1.1.6. Information

"Afficher les abréviations» vous affiche en rouge les abréviations ou les acronymes. "Afficher les AccessKeys», si le webmaster a prévu des raccourcis, les encadre en rouge. "Afficher les ancres» vous affiche les ancres du document en rouge et leur lien. "Afficher la taille des blocs» vous indique les Div (encadré en rouge) et leur taille. "Afficher l"ordre des éléments Div» vous montre les Div (encadré en rouge) et leur ordre. "Afficher les informations de l"élément», une nouvelle barre apparaît dans le navigateur vous indiquant le chemin HTML des éléments survolés. Une fois un élément sélectionné, des données vont dans l"encadré. "Afficher les détails des ID & Class» affiche en rouge le détail des ID et des Class. "Afficher les détails des liens» affiche en rouge le détail des différents liens. "Afficher les détails des éléments Objet» affiche les détails, en rouge, des objets. "Afficher les niveaux des éléments empilés» affiche, en encadré rouge, le niveau des Div. "Afficher les index de tabulation» encadre les "tabindex» de la page. "Afficher la profondeur des tableaux» affiche le niveau de profondeur des tableaux ("depth»). "Afficher les informations des tableaux» affiche les informations des tableaux. "Afficher les attributs Titles» affiche dans un encadré rouge, les balises ''title''. "Afficher les informations topographiques», la page vous apparaît en noir et blanc et vous met en relief le contenu de la page. "Informations sur les ancres» vous ouvre une page avec les ancres et leurs informations. Groupe Accessibilité Direction des systèmes d"information (DSI Rue Caroline 11, 1014 Lausanne Tutorial Barres d"outils

Tutorial_BarresOutils_WebDeveloperToolba

r.doc créé par : Cide modifié par : Pouly Romain

Verdon Cyrille Page 9 sur 14

Créé le 24/09/2007 10:02

Dernier enregistrement le 24/09/2007 10:02

"Informations sur les couleurs» vous ouvre une page avec toutes les couleurs de la page choisie en hexadécimal. "Plan du document» vous ouvre une fenêtre avec un diagramme des titres (H). "Poids de la page» vous liste les éléments et les poids en Ko (images, script, ...). "Voir le JavaScript» vous montre dans une nouvelle fenêtre le

JavaScript de la page.

"Voir les liens» vous montre les liens mais pas les menus déroulants en JavaScript. "Voir les balises Meta» vous informe des Meta. "Informations sur la page» vous affiche les informations de la page (meta, formulaire, liens, ...) "En-têtes HTTP» vous affiche les en-têtes HTTP reçues par le navigateur. Groupe Accessibilité Direction des systèmes d"information (DSI Rue Caroline 11, 1014 Lausanne Tutorial Barres d"outils

Tutorial_BarresOutils_WebDeveloperToolba

r.doc créé par : Cide modifié par : Pouly Romain

Verdon Cyrille Page 10 sur 14

Créé le 24/09/2007 10:02

Dernier enregistrement le 24/09/2007 10:02

1.1.7. Divers

"Effacer les traces» "Cache» vous permet d"effacer les fichiers temporaires qui se souviennent des pages visitées. (Attention, en informatique rien ne se perd vraiment !) "Historique» efface l"historique du navigateur. "Identification HTTP», si un site avec un forum vous a demandé de vous identifier et que vous avez autorisé l"enregistrement de vos données, vous pouvez les effacer. Il faudra "Toutes mes traces». "Afficher les lignes repères», pas disponible concernant les frames, vous permet de mettre des lignes de repère sur la page. "Afficher la loupe», une loupe vous permet d"agrandir une zone de la page, possibilité de changer son agrandissement. "Afficher l"outil de mesure», en sélectionnant une zone, l"outil de mesure vous indiquera sa position dans la page et le nombre de pixels en hauteur et largeur. "Montrer les commentaires» vous affiche un carré rouge contenant des commentaires dans le script. "Montrer les éléments cachés» vous affiche les

éléments "hidden».

"Montrer la fenêtre chrome» "Editer le HTML» vous permet d"éditer le HTML et d"enregistrer les changements. "Linéariser la page» affiche les boîtes les unes en dessous des autres. "Rendre les frames redimensionnables» "Rendu sur petits écrans» vous donne un aperçu de la page web en mode petit écran, par exemple avec un téléphone mobile (application d"une feuille de style si existante sinon l"affichage peut dépendre selon le navigateur). "Liens visités» parfois, quand vous avez déjà visité un lien, ce dernier change de couleur. Il vous est possible de noter tous les liens comme étant déjà visité ou non. Groupe Accessibilité Direction des systèmes d"information (DSI Rue Caroline 11, 1014 Lausanne Tutorial Barres d"outils

Tutorial_BarresOutils_WebDeveloperToolba

r.doc créé par : Cide modifié par : Pouly Romain

Verdon Cyrille Page 11 sur 14

Créé le 24/09/2007 10:02

Dernier enregistrement le 24/09/2007 10:02

1.1.8. Entourer

"Entourer les frames» vous entoure les frames. "Entourer les titres» vous entoure les titres. "Entourer les liens» vous entoure les liens. "Liens externes» tout les liens externes au site. "Liens avec attribut ping» vous indique les liens avec l"attribut ping. "Liens sans attribut title» tous les liens dont l"attribut title n"a pas été défini. "Entourer les tableaux» vous entoure les tableaux. "Légendes des tableaux»vous entoure légende des tableaux. "Cellules de tableaux» vous entoure les cellules des tableaux. "Tableaux» entoure l"extérieur du tableau. "Entourer les type block» entoure les Div, p, H, ...

"Entourer les éléments déconseillés» vous entoure les éléments qui ne devraient plus être utilisés.

Groupe Accessibilité Direction des systèmes d"information (DSI Rue Caroline 11, 1014 Lausanne Tutorial Barres d"outils

Tutorial_BarresOutils_WebDeveloperToolba

r.doc créé par : Cide modifié par : Pouly Romain

Verdon Cyrille Page 12 sur 14

Créé le 24/09/2007 10:02

Dernier enregistrement le 24/09/2007 10:02

"Entourer les éléments positionnés»5

¨ "Absolute»

¨ "Fixed»

¨ "Float»

¨ "Relative»

"Entourer l"élément survolé» dès que la souris survole un élément, un encadré contenant des informations

s"affiche.

"Entourer les éléments personnalisés» vous permet de personnaliser vous-même les éléments à sélectionner

et leur donner une couleur.

"Afficher le nom de l"élément entouré» comme son nom l"indique, si quelque chose est entouré, son nom

s"indique.

1.1.9. Redimensionner

"Afficher la taille de la fenêtre» vous informe de la taille de la fenêtre et celle de la zone d"affichage. "Afficher la taille de la fenêtre dans la barre de titre» affiche les données précédentes dans la barre de titre. "Redimensionner la fenêtre» vous demande dans quelles tailles redimensionner la fenêtre, par exemple, "800x600» vous redimensionne la fenêtre en 800 par 600 pixels. "Tailles personnalisées» vous permet d"entrer des tailles par défaut et les ajoutent plus haut (au dessus de "800x600»). "Zoom» permet un agrandissement du texte et des images (avec une pixellisation en plus). Certaines images gardent leur taille initiale.

5 Tutorial sur le positionnement des éléments à l"intérieur d"une page Web : http://www.grappa.univ-lille3.fr/polys/htmlcss-

2004/index.php?page=css_positionnement.

Groupe Accessibilité Direction des systèmes d"information (DSI Rue Caroline 11, 1014 Lausanne Tutorial Barres d"outils

Tutorial_BarresOutils_WebDeveloperToolba

r.doc créé par : Cide modifié par : Pouly Romain

Verdon Cyrille Page 13 sur 14

Créé le 24/09/2007 10:02

Dernier enregistrement le 24/09/2007 10:02

1.1.10. Outils

"Validate CSS» valide la CSS. "Validate Feed» valide les flux RSS et Atom. "Validate HTML» valide le code HTML. "Validate Links» valide les liens. "Validate Section 508» valide le standard Section 508. "Validate WAI

6» valide l"accessibilité de la page pour les personnes

handicapées. "View Speed Report» vous conseil pour optimiser vos pages web, en augmentant la vitesse de téléchargement et en améliorant les performances. "Régler les outils» vous ouvre le panneau '"options Web Developer"". "Inspecteur DOM»

7 inspecte, parcourt et modifie le modèle objet de

document des pages Web ou des fenêtres XUL 8. "Console d"erreurs» vous ouvre la console d"erreur. "Console Java» affiche la console Java. "Afficher la page de validation» vous affiche une nouvelle barre ou le

HTML, le CSS et l"accessibilité se calcul.

"Valider l"accessibilité locale» vous permet de valider une page locale. "Valider les CSS locales» vous permet de valider les CSS locales. "Valider le HTML local» vous permet de valider le HTML locale.

6 Qu"est-ce que le WAI ? : http://fr.wikipedia.org/wiki/Web_Accessibility_Initiative.

7 Qu"est-ce que le DOM ? : http://fr.wikipedia.org/wiki/Document_Object_Model.

8 Qu"est-ce que XUL ? : http://developer.mozilla.org/fr/docs/XUL.

Groupe Accessibilité Direction des systèmes d"information (DSI Rue Caroline 11, 1014 Lausanne Tutorial Barres d"outils

Tutorial_BarresOutils_WebDeveloperToolba

r.doc créé par : Cide modifié par : Pouly Romain

Verdon Cyrille Page 14 sur 14

Créé le 24/09/2007 10:02

Dernier enregistrement le 24/09/2007 10:02

1.1.11. Voir Source

"Voir Source» affiche le code source de la page. "Voir le code source du cadre» affiche le code source du cadre. "Voir le code source généré» affiche le code source généré. "Régler applications d"édition» vous ouvre "Option Web Developer» dans l"onglet "Affichage des sources».quotesdbs_dbs50.pdfusesText_50

[PDF] convertir pdf en pdf/a

[PDF] convertir pdf en pdf/a mac

[PDF] convertir pdf/a en pdf

[PDF] convertir plusieurs images en jpeg en ligne

[PDF] convertir une page web en pdf

[PDF] convertisseur nef jpeg gratuit

[PDF] convexité et matrice hessienne

[PDF] convocation bac 2017 cote d'ivoire

[PDF] convocation bac 2017 ivoirien

[PDF] convocation bepc

[PDF] convocation bepc 2017

[PDF] convocation bepc 2017 ci

[PDF] convocation categorie 3 police

[PDF] convocation ccf cap

[PDF] convocation ccf eps