Réaliser des pages HTML avec KompoZer 0.7.10.

KompoZer permet d'écrire des pages HTML, soit en mode Normal, comme s'il s'agissait d'un traitement de texte, soit en mode Source. En mode Normal, l'affichage est de type WYSIWYG, c'est à dire tel qu'il apparaîtra dans la fenêtre du navigateur.

Son accessibilité avec Jaws est limitée. Il est donc indispensable d'utiliser un script. Les possibilités actuelles du script sont:

Maximiser l'affichage de la fenêtre.

Lire la lettre courante, le mot courant; épeler le mot courant.

Permuter rapidement entre le mode Normal et le mode Source.

Changer rapidement de format de texte: corps de texte, paragraphe, titre de niveau 1 à 6, adresse, préformaté et conteneur div.

Activer le bouton Parcourir dans la boite de dialogue "Propriétés du lien".

Améliorer l'accessibilité du correcteur orthographique.

Accéder à la liste déroulante des styles CSS, pour appliquer ou supprimer un script CSS.

Il a été testé avec Jaws 7.10, 8.0 et 9.0, avec Windows XP, Vista et 7.

A. Installation de KompoZer et de son script.

A.1. Installation de KompoZer.

1. Téléchargez le logiciel en version française, avec ce lien direct http://downloads.sourceforge.net/frenchmozilla/KompoZer-0.7.10-win32.fr-FR.exe?download

Avec Firefox, ce lien ouvre une page sur le site SourceForge, et en premier plan, une boite de messages pour lancer le téléchargement.
Avec Internet Explorer, cette boite de messages n'apparait pas. Vous l'otiendrez en activant le lien "direct link" dans la liste des liens.

2. Sélectionnez le fichier téléchargé, puis lancez l'installation de KompoZer en pressant Entrée.

- La fenêtre qui s'ouvre est une fenêtre de présentation. Frappez Entrée.

- Dans la fenêtre suivante, vous devez acceptez les conditions de la licence utilisateur. Frappez Entrée pour les accepter.

- Dans la fenêtre suivante, vous pourrez cocher ou non les cases de création de raccourcis: "sur le bureau" et "dans la barre de lancement rapide", puis frappez Entrée.

- Dans la fenêtre suivante, vous pourrez modifier le dossier d'installation. Frappez Entrée pour lancer l'installation. Au bout de quelques secondes vous serez invité à valider le bouton "Suivant", par exemple par Entrée.

- Dans la dernière fenêtre, la case "Lancer KompoZer 0.7.10" est cochée. En frappant Entrée, vous lancerez le logiciel.

3. Une fenêtre de titre "Astuces KompoZer" s'ouvre au-dessus de la fenêtre du logiciel. Par Tab, vous sélectionnerez la case "Afficher les astuces au démarrage". Puis vous tabulerez jusqu'au bouton "Fermer" que vous activerez.

4. Dans la fenêtre du logiciel, le volet "Gestionnaire de sites" est affiché. Il est inutile. Vous supprimerez son affichage par F9, ou par le menu Affichage, item Barre d'outils, sous-menu, item Gestionnaire de sites.

A.2. Installation du script.

Le lien de téléchargement est:  script_KompoZer0.7.10.zip. Dernière mise à jour le 27/08/09. Nouvelle commande Alt +B pour lire les boites de dialogue. Mise à jour précédente: 18/08/09. 

Après avoir décompressé les fichiers, vous les placerez ici:

Pour Vista: C:\Users\NomD'Utilisateur\AppData\Roaming\Freedom Scientific\JAWS\version de Jaws\Settings\fra.

Pour XP: C:\Documents and Settings\NomD'Utilisateur\Application Data\Freedom Scientific\JAWS\version de Jaws\Settings\fra.

Vous remarquerez que le nom des fichiers est gkwidget.xxx et non KompoZer.xxx.

Important. Le script nécessite la présence des deux premières barres d'outils pour fonctionner correctement.

Vous frapperez Insert +H pour retrouver les raccourcis clavier suivants.

Alt +K: passer en mode Source.

Alt +J: passer en mode Normal.

Alt +H: choisir un format de texte (corps de texte, paragraphe, titre 1, 2,etc.). Le format par défaut est "Paragraphe". Double frappe pour choisir "Paragraphe" et fermer le menu. Indication. Ceci ouvre le menu Format, dans un sous-menu où vous pourrez utiliser les lettres raccourcis dans les items: t, r, 1, 2, 3 etc. Attention. Il s'agit des chiffres, donc on doit utiliser la touche Maj.

Alt +G: lire le format de texte, et la classe CSS utilisés. Double frappe pour appliquer une nouvelle classe CSS ou supprimer une classe appliquée. Pour plus d'informations, consultez le paragraphe: B.4. Utiliser la liste déroulante des scripts CSS.

Ctrl +L: ouvrir la boite de dialogue "Propriétés du lien". Seuls les champs de formulaire sont lus par Jaws en curseur PC, par Insert +Flèche haut.

Ctrl +Maj +L: activer le bouton "Propriétés" dans les boites de dialogue "Propriétés du lien" et "Propriétés de l'image".

Alt +B: lire le contenu des boites de dialogue. Remplace la commande Insert +B qui ne fonctionne pas dans ce logiciel.

Ctrl +K: ouvrir le correcteur orthographique. C'est la même boite de dialogue que dans Thunderbird.

Ctrl +Maj +K: lire le mot mal orthographié dans le correcteur. Double frappe pour l'épeler.

Si  après une manipulation avec les classes CSS, vous entendez "Actualisez la page", tentez de le faire par Alt +L. Si cela ne suffit pas, passer en mode Source, puis revenez en mode Normal, ou changez de logiciel par Alt+Tab, puis revenez à Kompozer.

B. Premiers pas avec KompoZer.

B.1. Description de la fenêtre principale.

Vous trouverez:

une barre de menus avec les menus Fichier, Édition, Affichage, Format, Tableau, Outils et Aide,

plusieurs barre d'outils,

une zone d'édition où sera affiché le contenu de la page, en mode Normal ou Source,

une barre d'onglets,

la barre d'état que Jaws lit par Insert +Page suivante.

B.2. Quelques éléments de configuration.

1. Les raccourcis proposés dans l'aide pour la navigation entre onglets ne fonctionnent pas, de même que la navigation dans la page par F6. Ouvrez la boite de dialogues "Options" par le menu Outils, item Préférences. Vous êtes dans l'item "général". Tabulez jusqu'à la case "Toujours ouvrir un document dans un nouvel onglet" que vous décocherez.

2. Dans la fenêtre du correcteur orthographique, ouverte par Ctrl +K, frappez Maj +Tab jusqu'à entendre "Télécharger un dictionnaire". C'est l'item affiché de la liste déroulante "Langue". Frappez Flèche bas jusqu'à entendre "fr_FR". Validez ce choix par Entrée, puis fermez la fenêtre par Entrée.

B.3. Une astuce pour le passage du mode Normal au mode Source.

Quand vous passez en mode Source, vous pouvez obtenir que le curseur se retrouve au même endroit qu'en mode Normal. Pour cela, sélectionnez une lettre du texte, qui ne soit pas la première d'une ligne. Vous constaterez en mode Source, que la lettre est sélectionnée et que le curseur est devant cette lettre. Cette astuce n'est pas utilisable dans l'autre sens.

B.4. A propos des boites de dialogue pour les liens, les images et les tableaux.

Ces boites comportent généralement des onglets. Ce sont:

Emplacement, Dimensions, Apparence et Lien pour la boite "Propriétés des images",

Rapidement, Précisément et Cellule pour la boite "Propriétés des images",

Attributs HTML, Style interne et Évènements JavaScript pour la boite "Éditeur des propriétés avancées".

Jaws ne lit pas le nom des champs de formulaire. Vous pouvez les connaitre en utilisant le curseur Jaws. Une autre solution est d'utiliser la commande Alt +B, qui équivaut à Insert +B. En effet la commande Insert +B ne fonctionne pas.

B.5. Utiliser la liste déroulante des scripts CSS.

Les styles CSS ont été créés au préalable. Ils apparaissent dans une liste déroulante, ouverte par Alt +G, double frappe. Le premier élément de la liste est sélectionné. 

Il y a deux manières d'utiliser les styles CSS: sur un paragraphe en son entier, ou sur une expression sélectionnée. Dans le premier cas, la classe s'ajoute après la balise de format de texte, ce qui donnera par exemple <p class="retrait">. Dans le second cas, la classe s'ajoute après la balise <span> rajoutée par le logiciel, ce qui donnera par exemple <span class="rouge">.
Si aucun style n'a été appliqué au paragraphe courant ou à l'expression sélectionnée, les styles sont par liste alphabétique. Sinon, le ou les styles appliqués sont en tête de liste, et Jaws prononce "coché" quand on se déplace sur eux par Flèches.

Frapper Entrée, sur un style non appliqué, provoque l'application de ce style. Frapper Entrée, sur un style déjà appliqué, provoque la suppression de ce style. 

B.6. Un bug gênant de ce logiciel.

Supposons que vous ayez entré du texte dans un bloc de style Paragraphe. Quand vous frappez Entrée plusieurs fois, vous créez autant de blocs paragraphes vides, entre les balises <p> et </p>, ce qui est normal. Par contre, quand vous remontez dans le texte par la touche Flèche haut, Kompozer annonce des blocs "Corps de texte" que l'on ne retrouve pas dans la source, ce qui est déconcertant.

B.7. Quelques indications pour les néophytes.

1. Quand vous ouvrez un nouveau fichier, le format de texte est "Corps de texte". Il est préférable d'utiliser "Paragraphe", car cela évitera à Jaws de lire des textes trop longs. De plus, la page est plus facile à lire par les personnes voyantes ou malvoyantes, car un espace est créé sous le paragraphe précédent.

2. En passant en mode Source, vous pourrez constater que si vous n'avez rien tapé, la page source n'est pas vide pour autant. Vous pourrez ainsi avoir une première approche du codage HTML avec ses balises.

3. Vous pouvez savoir quel est le format actuel, par la lecture de la barre d'état. Dans votre document vide, vous entendrez <body>. Si vous sélectionnez "paragraphe", vous entendrez <body><p>. Si vous sélectionnez "Titre 1 ", vous entendrez <body><h1>. En effet, la balise <hx> correspond au titre de niveau x.

4. Quand vous changez de format, la modification porte sur tout le paragraphe où se trouve le curseur. Il est donc inutile de sélectionner le paragraphe, ou de revenir à son début.

5. En frappant Entrée à la fin d'un paragraphe, le format restera "Paragraphe". Par contre, après un titre ou une liste, il deviendra "Corps de texte". Pensez à le modifier en "Paragraphe".

6. Quand vous enregistrerez votre fichier, une boite de dialogue vous demandera d'entrer un titre pour la page. C'est ce titre qui apparaît dans la barre de titre et qui est lu par Jaws. Il n'a donc rien à voir avec les titres que vous avez utilisés pour votre mise en page. Quand vous aurez validé ce titre, KompoZer ouvrira une boite de dialogue d'enregistrement voisine de celle de Word, où le nom proposé est le titre suivi de l'extension .html Vous pouvez choisir un autre nom, mais l'extension doit rester .html ou .htm.

7. Quand vous serez familiarisé avec les formats de texte, vous pourrez tenter d'ajouter des puces ou des listes numérotées par l'intermédiaire du menu Format, item Listes. Vous envisagerez ensuite d'insérer des images, des liens etc.

8. Avec les réglages par défaut, les caractères spéciaux ne sont pas encodés, pour faciliter la lecture, sauf dans les liens, où le caractère espace est remplacé par ce groupe de trois lettres: %20. C'est la raison pour laquelle certains remplacent dans les liens un espace par un underscore (souligné).

C. Utiliser un éditeur externe pour le code source.

Vous devez utiliser pour cela l'extension (ou module complémentaire) HandCoder.

Avertissement. Le code généré dans le bloc-notes de Windows n'est pas mis en forme, sauf avec Windows 7. Si vous n'utilisez pas d'éditeur externe tel que Notepad++, et si vous ne disposez pas de Windows 7 RC, vous devrez utiliser le complément d'extension Tidy.exe. En effet, Tidy a le double rôle de vérifier le code et de le reformater. Nous nous placerons dans cette hypothèse.

C.1. Installation de l'extension HandCoder.

1. Téléchargez l'extension, HandCoder avec ce lien: HandCoder-0..4-fr.xpi.

2. Dans KompoZer, ouvrez le menu Outils, item "Extensions". Validez par Entrée. Ceci ouvrira la boite de dialogue "Extensions". Déplacez-vous au bouton "Installer". Validez. Ceci ouvre une boite de dialogue de type "Ouvrir". Le type de fichier présélectionné est .xpi. Il vous suffit de rechercher le fichier et de l'ouvrir.

3. Vous obtenez alors la boite de dialogue "Installation de logiciel". Validez le bouton "Installer maintenant". A la fin de l'installation, qui dure une à deux secondes, la boite de dialogue "Extensions" contient désormais l'extension HandCoder, mais Jaws ne le dit pas. Fermez cette boite de dialogue par Alt +F4, puis fermez et redémarrer KompoZer.

4. Téléchargez Tidy avec ce lien Tidy.exe, et placez-le par exemple dans le dossier KompoZer qui se trouve dans Program Files.

5. Il reste à configurer l'extension. Ouvrez le menu Outils, item HandCoder, sous menu, item Options. Ceci ouvre la boite de dialogue "HandCoder" sur l'onglet Options. Le curseur est dans la zone de texte "Chemin de l'éxécutable".
Le chemin du bloc-notes de Windows est C:\WINDOWS\notepad.exe. Vous pouvez le taper mais il est préférable d'utiliser le bouton suivant atteint par Tab, qui ouvre une boite de dialogue de type Ouvrir, où vous rechercherez le fichier notepad.exe dans le dossier Windows. Validez par Entrée. Ceci ferme la boite de dialogue, et inscrit le chemin dans la zone de texte précédente. Dans cet onglet, vous pouvez choisir, au moyen de boutons radios, de recharger automatiquement ou non le fichier HTML quand vous revenez dans KompoZer. Par défaut, le choix est "Demander s'il faut recharger (recommandé)". Vous pouvez éviter la boite de message en sélectionnant "Toujours recharger la page modifiée".

6. Frappez Ctrl +Tab pour ouvrir l'onglet Tidy. Le curseur est dans la zone de texte "Chemin de l'éxécutable". Frappez Tab pour atteindre puis activer le bouton suivant de nom "Tidy". Dans la boite de dialogue de type Ouvrir, vous rechercherez le fichier tidy.exe dans le dossier où vous l'avez placé. Validez par Entrée. Ceci ferme la boite de dialogue, et inscrit le chemin dans la zone de texte précédente. Dans cet onglet, vous pouvez choisir au moyen de boutons radios, quand lancer Tidy. Le choix "Avant édition avec le bouton Éditeur" parait judicieux.

7. Validez la boite de dialogue par Entrée.

C.2. Indications pour l'utilisation de l'extension.

1. Les raccourcis clavier sont F6 pour lancer HandCoder et F7 pour lancer Tidy. En fait, avec nos choix, Tidy se lancera à chaque démarrage de HandCoder, donc seul le raccourci F6 vous sera utile.

2. Pour utiliser HandCoder, le fichier doit être enregistré. Si ce n'est pas le cas, une boite de dialogue vous le proposera.

3. HandCoder ouvre une fenêtre du bloc-notes à chaque lancement, avec un fichier de même nom que le fichier HTML que vous êtes en train de composer. Après consultation et d'éventuelles modifications, pensez à enregistrer ce fichier, et à fermer la fenêtre du bloc-notes.