Personnalisation de HTML-Kit : fenêtres, menus, plugins, raccourcis claviers... et sauvegarde

Les fenêtres

En premier, comment cacher certaines fenêtres qui ne servent pas tout le temps ?

• Les fenêtres "Messages", "Workspace" et la barre d'actions ont une croix en haut à gauche ou à droite, il suffit d'y cliquer dessus.
• La barre d'outils est en fait triple : "File" "Edit" "Windows". Vous devez fermer ces 3 barres une par une, mais c'est très simple : "Affichage" => "Barre" => et vous cliquez sur celle que vous voulez cacher.
• Pour la barre d'état et la barre des tâches, c'est pareil : "Affichage" => et vous cliquez sur celle que vous voulez cacher.

Et comment les montrer ?

• La barre d'outils : "File" "Edit" "Windows" : "Affichage" => "Barre" => et vous cliquez sur celle que vous voulez montrer.
• Les fenêtres "Messages" et "Workspace", la barre d'actions, la barre d'état et la barre des tâches : "Affichage" =>... et vous cliquez sur celle que vous voulez montrer.

Déplacer ? Rendre flottant ? Rien de plus simple, vous cliquez dans les 2 petits traits qu'il y a à gauche ou en haut (lorsque la fenêtre ou la barre est en haut ou en bas)... et vous les draguer là où vous voulez ! Cela marche aussi en double cliquant dans les 2 traits.

Ancrer à nouveau ? Vous cliquez dans la barre de titre de la fenêtre désirée et vous la draguer vers un des bords verticaux ou horizontaux... et vous lâchez (les barres d'état et de tâches ne s'ancrent qu’en haut ou en bas, pas sur les côtés !). Pour ancrer les fenêtres en haut ou en bas, il vaut mieux les amener d'abord dans le bord gauche, puis, sans les lâcher, en haut ou en bas. Cela marche aussi en double cliquant dans la barre de titre de la fenêtre.

Personnaliser le Workspace

C'est plus qu'un espace de travail sur les fichiers ou dossiers locaux et distants, c'est vraiment un explorateur de fichiers aux fonctionnalités très étendues, il me rappelle le fameux "Windows Commander" ! Pour vous en convaincre, un simple clic du droit dedans et regardez toutes les options proposées (beaucoup n'apparaissent qu'en second niveau). En voici une petite liste :

• Fonction FTP, avec la possibilité de traiter plusieurs fichiers :
  1. Cliquez du droit dans le Workspace sur votre dossier distant (il faut bien sûr être connecté),
  2. Sélectez "Upload" dans le menu contextuel,
  3. Sélectez les fichiers à mettre à jour (double clic pour un seul, "Crtl" enfoncé pour plusieurs non séquentiels, "Shift" enfoncé pour sélecter tous les fichiers qui se suivent, "Crtl+a" pour tous les fichiers de ce dossier)... puis cliquez sur le bouton "Ouvrir"
• Fonction "Drag and Drop" :
  1. Ouvrez un dossier local (si vous n'en avez pas : "Workspace" => "Ajouter dossier local/distant"),
  2. Prenez une de vos images et posez la dans votre page HTML
  3. Cela marche aussi pour les JS, les CSS, les raccourcis Internet...
• Fonction FTP et "Drag and Drop" : Vous venez de finir une modification sur votre fichier local et vous souhaitez la mettre en ligne ? Ouvrez le Workspace, connectez-vous sur le site distant (clic du droit => "Connect") et draguez le petit icone situé à droite des 4 onglets
"Editor/Preview/Output/Split View" dans le dossier distant.
• Fonction "CHMOD" : connectez-vous sur un de vos dossiers distants, puis un clic du droit et "Set Permissions..."
• Vous voulez arranger les dossiers locaux et distants de votre Workspace : sélectionnez un dossier, enfoncez "Ctrl", puis avec les flèches "Monter" ou "Descendre", positionnez votre dossier là où vous voulez !
• Votre fenêtre Workspace n'est pas assez large, vous êtes sans arrêt obligé de jouer avec l'ascenceur horizontal... il n'est pas possible de la redimensionner tant qu'elle est ancrée, donc il suffit de la dé-ancrer (voir au-dessus), de la redimentionner et de l'ancrer à nouveau !
• Vous avez trop de sous-dossiers dans un de vos dossiers et lorsque vous voulez traiter un fichier, ces sous-dossiers vous obligent à utiliser l'ascenseur ? Un clic du droit dessus, "Properties" => "General" et décochez "List folders first" => "OK" puis "Refresh"
• Vous pouvez accéder à vos modèles (templates) : clic du droit "Add/Remove FTP/Folder" => "Add Local Folder". Dans la boite de dialogue qui s'ouvre, allez chercher votre dossier contenant vos modèles, donnez-lui un nom parlant, puis dans l'onglet "General", cochez "Open a duplicate". C'est tout.
• Même chose pour les morceaux de code (snippets), mais en cochant "Insert its content at the cursor".

Vous trouverez d'autres fonctions ou astuces en allant sur le site de HTML-Kit http://www.chami.com/html-kit/ et en tapant "workspace" dans la boîte de recherche.

Personnaliser les menus

Très facile : un clic du droit dessus => "Customize..." => vous allez dans l'onglet "Commands" et là, vous parcourez tous les menus à la recherche de l'item que vous voulez ajouter (il y en a des tonnes !), vous le prenez, vous le draguez et vous le déposez dans le menu que vous voulez (le vrai, pas celui de la boîte... il va s'ouvrir à votre approche)... ou dans la barre d'outils (car la barre d'outils est elle aussi personnalisable !). Pour enlever un item ou un outil, il suffit, lorsque cette boîte de dialogue est ouverte, de le draguer du menu dans la boîte. Si vous voulez voir apparaître une petite séparation entre deux outils, toujours lorsque cette boîte de dialogue est ouverte, draguez un de ces 2 outils sur 2 millimètres à droite ou à gauche.
 
Je vous encourage vivement à parcourir dans sa totalité cette liste d'items au moins une fois, cela vous permettra de visualiser d'un seul coup toutes les possibilités de HTML-Kit !

Voici ma barre d'outils, j'y ai mis dedans les boutons qui me sont indispensables :

• Ouvrir un nouveau document
• Ouvrir un document existant (choix des (n) derniers dans la liste)
• Ouvrir un classeur (ce sont des ensembles de documents que vous créez par l'option "Fichier" "Faire un classeur", c'est hyper pratique lorsque comme moi, vous travaillez sur plusieurs projets en parallèle qui utilisent toujours les mêmes fichiers)
• Enregistrer
• Enregistrer sous
• Faire un classeur
• Fermer
• Préférences
• Ouvrir dans un navigateur (choix des navigateurs installés sur mon PC dans la liste)
• Ouvrir dans le navigateur interne (c'est différent du "Preview", cet affichage est vraiment celui d'un navigateur)
• Rafraîchir
• Couper
• Copier
• Choisir et insérer
• Coller
• Annuler la dernière action et les précédentes
• Rétablir la dernière action et les précédentes
• Décaler la sélection vers la droite
• Décaler la sélection vers la gauche
• Chercher
• Remplacer
• Aller à la punaise suivante (un clic dans la marge met une punaise à cette ligne)
• Aller à la punaise précédente
• Redimensionner la fenêtre
• Disposer les fenêtres en cascade
• Disposer les fenêtres en mosaïque horizontale
• Disposer les fenêtres en mosaïque verticale
• Aperçu avant impression
• Imprimer
• Liste d'options pour imprimer
• Programmes installés

Les plugins

C'est la seconde chose qu'il est nécessaire de connaître dans HTML-Kit ! Voici les miens (cliquez sur le nom pour le charger) :

• {}.hks : insère {} sur le texte sélecté (ce n'est pas le plugin que j'utilise le plus !)
• BR.hks : insère <br> mais reste sur la même ligne (celui fournit sur le site de Chami provoque un retour à la ligne dans le code, même chose pour "Ctrl+Entrée"... et j'aime pas)
• 2br.hks : insère <br>&nbsp;<br>, c'est à dire 2 sauts de ligne (c'est sur que l'on peut faire mieux en CSS !)
• table.hks : insère sur le texte sélecté
  <table cellspacing=0 cellpadding=0 border=0>
  <tr>
      <td>le texte sélecté</td>
  </tr>
  </table>
  le plugin original ne fait que ça :
  <table summary="">
  <tr><td></td></tr>
  </table>
• sup.hks insère  sur le texte sélecté... ^{ce qui donne ce bout de texte}
• carac_spec.hks insère tous les caractères spéciaux dont un développeur utilisant le français peut avoir besoin... plus pleins d'autres (le fichier étant gros - 71 ko - je l'ai comprimé dans un zip, en y ajoutant le source carac_spec.hpd).
• Modif.hks : (7 fonctions) "protège" les simples ou les doubles quotes de l'interpréteur ou les transforme de l'un à l'autre (bien pratique en JS) ou transforme :
  > en &gt;
  < en &lt;
  & en &amp;
• ListeLI.hks : Hyper pratique !!! C'est un plugin écrit par Alexandre Seywert, lequel devait le mettre en chargement sur un site depuis le 03/03/2003, mais comme on ne voit toujours rien venir et que ce plugin est vraiment très utile, je le mets à votre disposition à sa place. Il vous suffit de sélecter les "n" lignes de texte que vous voulez transformer en item d'une liste, un clic sur l'icone du plugin, et c'est fait (il scanne les retours charriots).

  avant	après
  toto tata tiiti tutu	<li>toto</li> <li>tata</li> <li>tiiti</li> <li>tutu</li>

• Voici un plugin qui va sûrement beaucoup plaire Space_double_punctuation.hks. Il tranforme les espaces "normales" devant les caractères de ponctuation doubles en espaces insécables (les espaces "fines" ne sont reconnues pratiquement par aucun navigateur, donc pas la peine de les mettre !) :
  • " :" devient "&nbsp;:"
  • " !" devient "&nbsp;!"
  • " ?" devient "&nbsp;?"
  • " ;" devient "&nbsp;;"
  • ...
  Soit vous sélectez du texte, et il travaille sur ce texte, soit vous n'avez rien sélecté et il fait le remplacement sur tout le document.
• Dans les listes ordonnées fournies par Chami, il n'y a que le code HTML alors que parfois, un petit coup de CSS est plus que nécessaire, par exemple lorsqu'on ne veut pas de marge entre le début de la liste et la ligne qui la précède. Voici donc 2 plugins stylés à cette sauce :
  <ul style="margin-top: 0px; margin-bottom: 0px;"> ListeUL.hks
  et
  <ol style="margin-top: 0px; margin-bottom: 0px;"> ListeOL.hks
  (ces 2 listes ne remplacent pas obligatoirement celles de Chami, je continue d'utiliser les 2)

• RaccourcisClavier.hks affiche tous les raccourcis clavier que j'ai fait mais n'insère rien. Si vous utilisez HKPGen, voici le source RaccourcisClavier.hpd pour le modifier à vos propres raccourcis.
• polices.hks il y a 2 plugins dedans, "polices" propre aux CSS et <FONT=?> propre au HTML. Affiche - et les insère aussi (faudra que je le modifie) - les propriétés CSS des polices et plein d'autres trucs propres aux polices de caractères.

• hkInsertNBSP: insère un espace insécable (&nbsp;)... vous pouvez aussi faire "Ctrl+Shift+Espace" pour gagner du temps
• chars2entities : vraiment très pratique, permet de changer les lettres accentuées (et autres) en leurs entités... et inversement. Je ne sais plus pour quelles raisons, mais il vaut mieux mettre les lettres accentuées - même en majuscule - que leurs entités, donc ce plugin ne sert normalement que dans un sens. ATTENTION : il arrive parfois que, après le traitement de la page, il ne conserve que les lignes modifiées ! Si cela vous arrive, une seule solution, annulez la modification... et recommencez.
• Tidy : permet de vérifier le code de la page.
• WordCount : permet de compter le nombre de mots et d'en sortir des stats pour remplir les balises META
• hkUpdateDate : permet d'insérer une ligne contenant la date courante mise en forme ("Preferences" => "Misc." et vous rentrez le format que vous voulez dans "Default date/time format").
  Par exemple "dddd dd mmmm yyyy à hh:nn"... donnera dans le code :
  <-- datestamp:begin -->dimanche 20 octobre 2002 à 16:55<!-- datestamp:end -->
  et dans la page :
  dimanche 20 octobre 2002 à 16:55
  Chaque fois que vous cliquerez sur cette icone, cette date sera mise à jour.
  Si c'est uniquement que la date de la dernière modification - sans mise en forme de celle-ci - que vous cherchez à insérer, ce JavaScript fait ça automatiquement :
  <script language="JavaScript" type="text/javascript">
  <!--
  document.write(document.lastModified.substring(3,(document.lastModified.lastIndexOf('/'))));
  document.write("/"+document.lastModified.substring(0,(document.lastModified.indexOf('/'))));
  document.write("/"+document.lastModified.substring((document.lastModified.lastIndexOf('/')+1)));
  // -->
  </script>
  plus simplement, mais en date US :
  <script language="JavaScript" type="text/javascript">document.write(document.lastModified);</script>
• hkDeleteMatchingTags : permet d'enlever dans le texte sélecté les balises html qu'il contient.
• hkAutoStyle : permet de voir ce que donne sa page mise en forme par un style (CSS) pris aléatoirement.
• twjs : tous les "outils" pour JavaScript, dont un plugin "Premade scripts for your use" dans lequel se trouve le "Last Modified" vu plus haut (et pleins d'autres scripts prêts à l'emploi)... mais j'ai l'impression que ce plugin développé par Tom Walker vient d'être amputé du module "Premade scripts for your use"... et j'en ai marre de chercher où il a bien pu le mettre, donc voici le plugin modifié par mes soins : js.hks
• hkWinSize : permet de visualiser votre page sous plusieurs résolutions d'écran.
• Make-a-Filelist : c'est beaucoup plus qu'un simple plugin ! Il permet de faire un tableau de liens vers des fichiers ou des répertoires avec une facilité ! INDISPENSABLE !!!

Voici comment j'ai configuré ma barre d'actions :

 
Comme vous le voyez, elle est entièrement personnalisée et c'est très facile à faire :

1. Cliquez du droit sur un des icones de votre barre
2. "Customize..." vous avez deux colonnes : "Available Actions" qui contient tous les plugins que vous avez installés et "Customized Actions Bars" qui est votre barre d'actions après sa personnalisation (tant que vous n'avez rien fait, elle est vide !)
3. Vous pouvez prendre un groupe d'action à gauche et le porter à droite : Sélectez ce groupe puis cliquez sur "Add >>"
4. Vous pouvez ne prendre qu'une action d'un groupe, il suffit de cliquer sur le + de gauche pour ouvrir le groupe... sélectez l'action, puis "Add >>"... pour chaque action. Attention : par défaut, HTML-Kit rajoute les actions dans le premier groupe ! Si vous la voulez dans un autre, il faut le sélecter avant.
5. S'il y en a beaucoup, mieux vaut prendre tout le groupe et cliquez sur le "Delete" du bas pour enlever ceux en trop
6. Vous pouvez créer un nouveau groupe "New"
7. Ou en renommer un "Rename"
8. Et pour finir, vous sauvegardez votre nouvelle barre d'action "Save as..."

Les raccourcis clavier

Ils sont vraiment très utiles ! Par exemple, pour faire la page sur les menus, je rentrais sans arrêt les 2 codes suivant :
<img src="menu/fleche.jpg" width="50" height="20" style="margin-left: 10px;">
<img src="menu/blnk.gif" width="20" height="20">
Hop ! J'ai affecté le premier à "Ctrl+0" et le second à "Alt+0" !
 
Comment faire la même chose : Un petit "Copier" du texte que vous devez reproduire (n) fois, puis "Outils" => "Personnaliser" => "Personnaliser raccourcis claviers". Une fois là, vous faites :

• ADD
• Choisissez un raccourci de libre dans "Or, pick a free key from the list"
• Cochez "Insert text"
• Collez votre texte
• <<ADD
• OK
• un petit "Save as" n'est pas superflu, surtout si vous voulez "exporter" vos raccourcis sur un autre poste (mais à partir du moment où vous avez fait OK, vos nouveaux raccourcis sont sauvegardés)

• ADD
• Choisissez "Ctrl+b"
• Cochez "Insert text"
• Collez exactement ça : <B>{{SELTEXT}}</B>
• <<ADD
• OK

• ADD
• Choisissez "Ctrl+Alt+U"
• Cochez "Action"
• En face, par le menu déroulant, choisissez "Tools > TextTools"
• Dans le champ du dessous, par le menu déroulant toujours, choisissez "To uppercase"
• <<ADD
• OK

Compléter automatiquement

C'est une autre façon de se simplifier la vie et de gagner du temps ! Vous entrez une chaîne de caractères suivie d'un espace... et HK va remplacer cette chaîne par celle enregistrée au préalable : "Preference" => "Auto Complete" => sélecter "USER" (si vous mettez vos propres raccourcis dans "Default", ils seront écrasés à l'installation de la prochaîne version de HTML-Kit) => "Add Shortcut" =>...
 
Quelques uns de mes raccourcis :

Les punaises

Encore un truc tout simple, mais ô combien pratique ! Cliquez dans la règle à gauche... et vous venez de poser une punaise sur cette ligne ! Pour l'enlever, un clic dessus...
Mais à quoi ça sert ? Vous avez de grosses pages à éditer (comme celle-ci, mais j'ai pire !) et vous êtes en train de modifier la ligne 563... "zut, qu'est-ce que j'avais mis avant !?!"... une punaise sur la ligne 563, vous allez rechercher l'info précédente... "F2"... et vous voilà à nouveau sur votre ligne 563 ! Merveilleux, n'est-il pas ?
Je vous conseille de rajouter dans votre barre d'outils les 2 icones "Punaise suivante" et "Punaise précédente", car si vous êtes comme moi, je ne me rappelle jamais si F2 c'est "suivant" ou "précédent" ou si c'est "Shift+F2" ! Ces 2 fonctions sont aussi accessibles par "Edition" => "Punaises" et surtout "Ctrl+F" => "Go To".

Sauvegarde

Maintenant que votre HTML-Kit est totalement personnalisé à votre goût, il serait bon de le sauvegarder pour pouvoir le retrouver tel quel en cas de problème, n'est ce pas ?

Voici un extrait de mon "sauve.bat" (si vous voulez le récupérer en entier, cliquez ici ), lancé à chaque démarrage du PC :

• xcopy "G:\Chami\HTML-Kit\Plugins\*.*" "D:\HTML-Kit\Plugins\" /c /h /y /s /k /q /r /m
• xcopy "G:\Chami\HTML-Kit\Data\Default\*.*" "D:\HTML-Kit\Default\" /c /h /y /s /k /q /r /m
• xcopy "G:\Chami\HTML-Kit\Data\Perso\*.*" "D:\HTML-Kit\Perso\" /c /h /y /s /k /q /r /m
• REGEDIT /e "D:\HTML-Kit\HTML-Kit.reg" "HKEY_CURRENT_USER\Software\Chami\HTML-Kit"

Il faut faire une sauvegarde initiale en passant ces commandes sans le "/m" à la fin

Présentation de HTML-Kit

Les astuces et trucs

Préférences dans HTML-Kit

Les éléments des menus de HTML-Kit

Écriture de plugins pour HTML-Kit (HKPGen et autres) (je n'ai pas commencé la rédaction)