Chapitre 1: Premiers pas

Le but de ce chapitre est de vous donner une courte introduction aux fonctions de base, afin de vous rendre capable de commencer à créer et dessiner sur le champ vos sites web avec Bluefish. Notre but pour l'instant est de vous faire faire connaissance avec l'environnement et l'interface utilisateur de Bluefish.

Ce chapitre ne couvre pas tous les aspects de Bluefish, mais c'est une simple introduction à tout l'environnement. Les autres chapitres couvriront tout en détail.

Lancer le programme

Après l'installation, si vous n'avez pas changé le répertoire d'installation, le fichier exécutable doit avoir été placé dans /usr/local/bin/. Ainsi tout ce que vous avez à faire pour lancer le programme est de taper : blashyrkh:~# bluefish

NOTA BENE: Pour des raisons de sécurité, le compte root ne peut pas lancer Bluefish. Ainsi, si vous êtes root et tapez bluefish un message d'erreur apparaîtra. Afin d'outrepasser ce point de sécurité et de lancer le programme en root, tapez bluefish -s.

Le logo de Bluefish apparaîtra quelques secondes et puis l'écran principal (comme nous verrons par la suite) apparaîtra. Bien sûr, vous pouvez minimiser, maximiser, etc. cet écran, en accord avec les caractéristiques qui vous sont données par votre gestionnaire d'écran (toutes les captures d'écrans suivantes ont été prises en utilisant KDE).

Les options de lignes de commande peuvent être trouvées en utilisant -h:

  
blashyrkh:~# bluefish -h  
bluefish 0.6 HTML editor  
Usage: src/bluefish [options] [filename]  
Les options couramment acceptées sont :  
-s           		sauter la vérification root  
-v           		version courante  
-h           		aide en ligne  
-p nom de fichier charge le projet au démarrage  
TIP: Si vous voulez ouvrir tous les documents PHP dans un répertoire et ses sous-répertoires, vous pouvez lancer bluefish comme cela : bluefish `find -name '*.php'`. Ou vous voulez ouvrir tous les fichiers html de votre machine? (Attention! environ 1100 sur une machine Debian standard!) Faites bluefish `find / -name '*.html'` .Regardez man find et man bash pour plus d'info.
MAIN SCREEN

Interface

Nous allons commencer l'explication de quelques trucs de base sur l'interface de Bluefish, et afin de faire cela, nous prendrons l'écran ci-dessus comme guide.

Le menu

En haut de l'écran se trouve le menu, où sont répertoriées toutes les fonctions de Bluefish. Les fonctions sont regroupées selon leur usage, ainsi le menu Fichier contient des fonctions qui concernent les fichiers, Editer concerne les fonctions principales d'édition (Couper, Copier, Coller, etc.), et ainsi de suite. Si vous cliquez sur un menu, ses sous-menus apparaissent. Chaque sous-menu a son nom sur la gauche, et sur la droite son raccourci qui sera expliqué plus loin.

NOTA BENE:Dans ce manuel, quand nous nous référons à une commande de sous-menu , nous donnons son chemin complet de la manière suivante : Fichier--> Nouveau signifie que du menu Fichier vous devez sélectionner Nouveau.
Une fonction trè utile fournit par GTK+ est tearoffs. Afin de voir ce que c'est, sélectionnez Fichier et appuyer sur la petite ligne pointillée. Comme vous le verrez, une nouvelle fenêtre apparaîtra qui contiendra tout les sous-menus de Fichier. De cette façon, vous pouvez accéder plus rapidement aux fonctions d'un menu, puis vous pourrez simplement placer cette fenêtre à coté de la fenêtre principale. Si vous appuyez à nouveau sur la ligne pointillée ou fermez la fenêtre, la fenêtre disparaitra. Notez que le menu est encore accessible pas seulement de la fenêtre qui est apparue, mais aussi du menu de la fenêtre principale.

Ainsi, ce qu'il fait actuellement est de permettre au menu de flotter sur l'écran. L'inconvénient est qu'il n'y a pas de possibilité de sauvegarder leur position et, quand vous re-démarrez Bluefish, aucun menu ne flottera.

Raccourcis

Pendant que vous regardiez aux menus, vous pourriez avoir noté que pour certaines fonctions il y a une combinaison de touches sur la droite. Celles-ci sont appelées raccourcis et sont des combinaisons de touches, habituellement commençant par Control ou Alt. Si cette combinaison de touches est appuyée, alors la fonction est exécutée. Ainsi, par exemple, si vous voulez ouvrir un nouveau fichier, au lieu de sélectionner Fichier-->Nouveau (qui a le texte Ctrl-N sur sa droite) vous pouvez appuyer sur les touches Control et 'N' ensemble.

Une caractéristique très utile est, à part les raccourcis par défaut, que vous pouvez ajouter vos propres raccourcis ou re-définir ceux par défaut. Il faut simplement bouger la souris sur le sous-menu auquel vous voulez ajouter un raccourci et appuyez sur la combinaison de touches (ex. Control avec 'G'). Comme vous le verrez, la combinaison apparaîtra à coté et la fonction sera exécuté la prochaine fois que vous ferez cette combinaison. Si le raccourci existait déjà dans un autre sous-menu, il sera effacé de l'ancienne position et ira là où vous l'avez placé.

Au cas où vous voulez effacer un raccourci, placez la souris sur le sous-menu qui a le raccourci et appuyez sur Retour en arrière.

TIP:un raccourci peut également être une combinaison de Control, Alt, Shift avec une autre touche, aussi bien deux d'entre elles ensemble, ex. Ctrl-Alt-G. Cependant, notez que Shift+touche, bien qu'accepté ne sera pas accessible, car Shift a déjà l'usage de modifier la casse. Alt+Shift+key or Ctrl+Shift+Key fonctionnera.

Depuis que les raccourcis sont utilisés très fréquemment, vous pouriez vouloir sauvegarder les changements que vous avez fait. Sélectionner Options-->Sauvegarder touches raccourcis pour faire cela. Cela sauvegardera tous les raccourcis que vous avez défini pour le Menu personnalisé (Bluefish 0.5 et suivant). Notez que les raccourcis NE sont PAS sauvegardés automatiquement, ainsi vous devrez sélectionner ce sous-menu chaque fois que vous voudrez les sauvegarder.

Aussi, notez que certains raccourcis sont réservés par la zone de texte et ne peuvent pas être utilisé. Un listing de ceux-ci pourra être trouvé plus tard.

Les barres d'outils

En dessous du menu il y a 3 barres d'outils (dans l'écran au dessus, seul deux d'entre elles apparaissent); la barre d'outils principale, la barre d'outils HTML et le menu personnalisé.

Floating Une chose importante à propos des barres d'outils est le fait qu'elles puissent flotter. Notez que le coin gauche de chaque barre d'outils, qui est similaire à l'image sur la gauche. Placez la souris dessus, maintenez le bouton gauche de la souris appuyé et tirer la barre d'outils vers où vous voulez et puis relacher le bouton de la souris. De cette manière, vous pouvez faire flotter une barre d'outils.

Quand une barre d'outils flotte, elle n'apparaît plus dans la fenêtre principale, de cette façon plus d'espace est donné à la zone de texte.

Si vous tirez la barre d'outils vers sa place d'origine, elle redeviendra une partie de la fenêtre principale. Notez que les barres d'outils seront placées dans l'ordre suivant (de haut en bas): barre d'outils principale, barre d'outils html, menu personnalisé. Jusque là, il n'y a pas de manière pour placer une barre d'outils au dessus d'une autre.

Une courte description de ce que chaque bouton de la barre d'outils peut apparaître si vous laissez le pointeur de la souris quelques secondes sur le bouton (elles sont appelés bulles d'aide).

Comme pour les menus, vous ne pouvez pas mettre en mémoire leur position, aussi quand Bluefish est re-démarré, elles apparaîtront à leur position normale, comme une partie de la fenêtre principale.

La zone d'édition de fichier

La plus grande partie de la fenêtre est prise pour l'aire de rédaction. C'est là qu'apparaissent le texte des fichiers. Bluefish vous permet d'avoir simultanément autant de documents ouverts que vous voulez.

Le menu onglets montre les fichiers qui ont été ouverts. Dans l'image au dessus, on a deux fichiers : preface.html, un fichier que nous avons ouvert du disque et Sans titre qui est un nouveau fichier non sauvegardé. Les nouveaux fichiers sont toujours nommé "Sans titre". Le fichier actuellement sélectionné est "Sans titre". Les onglets vous permettent de permuter entre les fichiers. Si vous appuyez sur un autre onglet, cela passe sur le fichier dont le nom a été sélectionné. Allez-y ! et essayez, en cliquant sur Fichier-->Nouveau deux fois et puis permuter les onglets. Une autre manière de changer les documents (si vous n'avez pas modifié les raccourcis) est avec la touche F1 pour sélectionner le prochain document et F2 pour sélectionner le document précedent (Ces raccourcis sont dans le menu Visualiser ).

L'apparence de la zone d'édition peut être changée dans Options--> Préférences comme nous le verrons plus loin.

Barre d'état

Finalement, sur le coin en bas de l'écran se trouve la barre d'état, qui est utilisée afin de montrer des messages sur les actions qui ont été prises. Pour comprendre son usage, observez ce qu'il y apparaît lorsque vous appuyez sur les différents boutons, etc.

Allons vers des choses plus importantes

Maintenant que nous avons expliqué les bases sur l'interface, nous allons continuer avec l'utilisation de Bluefish.

Je crois que la première chose que nous devons expliquer est comment vous pourriez créer des nouveaux documents, aussi bien qu'ouvrir et sauvegarder des fichiers. Non seulement nous expliquerons ces fonctions mais aussi nous vous aiderons à réaliser quelques aspects de Bluefish cela rendra les choses plus facile et plus rapide pour vous (comme Départ rapide...).

Créer un nouveau fichier

Pour créer un nouveau fichier sans titre, vide, il y a 3 façons :

Comme vous le verrez, un nouvel onglet apparaîtra dans l'aire de rédaction et le texte sera complètement vide.

Mais cela n'est pas bien d'être vide. Ne serait-ce pas merveilleux si vous aviez les balises élémentaires HTML écrites pour vous (ex. la DTD, le titre, etc.). Bluefish a une bonne méthode pour vous aider à écrire les choses élémentaires aisément.

Cela affichera des fenêtres, dans lesquelles vous pourrez sélectionner la DTD, titre de la page et les balises META, aussi bien que les variables du Corps.

Editer le texte

Apparemment, vous pouvez éditer le fichier en utilisant l'aire de rédaction. En écrivant les balises, la barre d'outils HTML peut apparaître très utile, puisqu'elle contient toutes les balises de base. Certains boutons (aussi bien que les fonctions dans le menu Dialogues ) montrent des fenêtres dans lesquelles vous pouvez facilement définir les paramètres de la balise, rendant les choses plus rapides. Au cas où vous vous voudriez une description de ce que fait chaque bouton de la barre d'outils HTML, bouger la souris dessus et attendez jusqu'à ce que sa bulle d'aide apparaisse.

Par défaut, le retour de mot est utilisé (vous pouvez le désactiver dans Options-->Préférences). Au cas où une ligne est retournée, une petite icone apparaît sur la droite de la ligne, indiquant quelles lignes sont retournées. S'il y a beaucoup d'icones dans une ligne, cela signifie qu'elle a été retournée en plusieurs autres lignes.

Je crois qu'il est temps de s'intéresser au menu Editer , car il contient quelques fonctions très intéressantes.

TIP: Les expressions régulières sont des outils très puissants. Supposons que vous voulez mettre en minuscules toutes les balises HTML dans un document. Sans les expressions régulières vous ne pouvez pas faire un Rechercher et Remplacer. Le motif <[^>]*> trouvera tout entre un < et un > , qui ne doit pas avoir un > entre les deux. Maintenant sélectionnez Remplacer par minuscule et c'est fait! Le revers: ce motif simple mettra aussi, bien sûr, en minuscule le alt de la description d'une image etc. Bon ce n'est pas parfait.
TIP: Avez vous déjà vu un document HTML créé en utilisant Frontpage? Celui-ci parfois inclue des centaines de lignes vides et des espaces. il est possible de chercher et remplacer les nouvelles lignes dans Bluefish. Mais vous avez à les copier et les coller dans l'entrée de la boîte de dialogue chercher. Bon, maintenant sélectionnez deux lignes, collez la sélection dans l'entrée trouver: dans la boîte de dialogue chercher, remplacez la avec une simple ligne, et sélectionnez Recherches parallèles. Toutes les multiples de lignes vides seront réduits en une simple ligne vide.

Une autre caractéristique intéressante est le menu contextuel qui apparaît si vous appuyez sur le bouton droit de la souris. C'est un moyen rapide pour utiliser quelques fonctions élémentaires, comme 'Couper' et 'Copier'. Les fonctions ici travaillent exactement comme leurs fonctions correspondantes dans les menus et barres d'outils. Jusqu'au dernier item concerné de ce menu contextuel, le 'Editer balise', nous en parlerons plus tard.

Ouvrir un fichier (d'un disque ou du web)

Pour ouvrir un fichier d'un disque:

Une boîte de dialogue 'sélectionnez fichiers' apparaîtra, dans laquelle vous pourrez choisir le fichier que vous voulez ouvrir. Une caractéristique très utile est que dans ce menu vous pouvez sélectionner plus d'un fichier à ouvrir en même temps (sauf que tous les fichiers à ouvrir doivent être dans le même répertoire). En fait, nous avons essayé avec succès d'ouvrir 1000 documents en même temps!

Une autre caractéristique très utile est que vous pouvez ouvrir un fichier directement pris du web. Afin de faire cela, sélectionnez Fichier-->Ouvrir du web. Dans la fenêtre qui apparaît, écrivez l'adresse complète du document (ex. 'http://jmk.simplenet.com/prod/download.htm'). Bien sûr, des adresses comme 'http://jmk.simplenet.com/' sont acceptées et le fichier ouvert sera celui qui serait ouvert si vous aviez sélectionné cette URL d'un navigateur.

Enfin, une chose que vous pouvez notez est que si vous avez seulement ouvert le programme et s'il ne contyient qu'un fichier sans titre, alrs ce dernier disparaitra quand un fichier sera ouvert et sera remplacé par celui-ci. Cependant, si vous l'avez modifié un peu, il restera.

Sauvegarder les fichiers

Si vous voulez sauvegarder un fichier, vous devez d'abord sélectionner son nom sur l'onglet des fichiers dans l'aire de rédaction (i.e. il peut être le seul qui apparaît dans la fenêtre principale), puis :

En appuyant sur 'Sauvegarder', le fichier qui est actuellement visualisé est sauvegardé. Au cas où le fichier n'est pas sauvegardé sur le disque (i.e. s'il a été ouvert du web ou est un fichier sans titre), 'Sauvegarder' agit comme 'Sauvegarder Sous'. En appuyant sur 'Sauvegarder Sous' vous pouvez le sauvegarder avec un nom différent que celui qu'il a déjà.

Au cas où vous désirez sauvegarder tous les fichiers ouverts, sélectionnez Fichier-->Tout Sauvegarder. Cela sauvegarde tous les fichiers, examinant chaque fois si le fichier est sans titre ou bien ouvert du web. Alors la boîte de dialogue 'Sauvegarder Sous' apparait pour ces fichiers spécifiques.

Fermer un fichier

Afin de fermer un fichier, vous devez d'abord le sélectionner ainsi il est visible dans l'aire de rédaction, puis:

Au cas où le fichier a été modifié depuis la dernière fois où il fut sauvegardé, alors vous serez interrogé pour le sauvegarder avant de le fermer. Dans cette boîte de dialogue, en sélctionnant 'Fermer', le fichier ferme sans sauvegarde. Si vous sélectionnez 'Sauvegarder', le fichier est d'abord sauvegarder, et si vous appuyez sur 'Annuler' le fichier n'est pas fermé du tout.

Si vous voulez fermer tous les fichiers qui sont ouverts, sélectionnez Fichier-->Tout fermer. Au cas où ils ne sont pas sauvegardés, la boîte de dialogue apparaitra.

Quitter Bluefish

Afin de fermer Bluefish, vous pouvez soit fermer la fenêtre principale, soit sélectionnez Fichier-->Quitter, qui a pour raccourci Ctrl-Q.

Au cas où il y aurait des fichiers non sauvegardés, avant que l'application ferme, une boîte de dialogue similaire à celle expliqué au dessus apparaîtra.

Travailler avec HTML

Ainsi, nous avons vu comment vous pouvez créer, ouvrir, éditer et sauvegarder un fichier. Bien que cela soit suffisant pour commencer à travailler, n'oubliez pas que c'est un éditeur HTML, pas un simple éditeur de texte. Cela signifie qu'une attention particulière a été donné pour utiliser HTML, ainsi quelques outils particuliers (que vous ne trouverez pas dans un simple éditeur de texte) ont été implémanté pour vous aider à utiliser les balises et organiser vos documents.

Balises et boîtes de Dialogue

Vous pouvez avoir noté deux menus, Balises et Dialogues. La plupart des fonctions de ces menus peuvent aussi être trouvé dans la barre d'outils HTML.

Le menu Balises contient quelques balises HTML, la plupart d'entre elles n'ont pas de paramètres. Ces balises incluent les balises de formatage de texte (Gras, Italique, Barré, etc.), Titres, listes, etc. Aussi, prêter attention au menu Balises-->Spécial qui contient une liste de caractères spéciaux.

Essayons d'appuyer sur un sous-menu (soyez sûr qu'aucun texte n'est sélectionné). La balise décrite apparaît et le curseur est placé entre la balise de début et (<>) celle de fin (</>) pour que vous puissiez écrire le texte qui appartient à cette balise.

Une autre méthode intéressante de ces fonctions est avec du texte que vous avez sélectionné. Par exemple, écrivez 'Hello World' et puis sélectionnez le. Appuyez sur Balises-->Titres-->H1 et le texte sera encadré par une balise H1. C'est très utile puisque vous pouvez changer rapidement le formatage d'un texte déjà écrit (ex. faire qu'il soit en gras ou italique).

Le balises-->remplacer caractères ascii remplacera toutes les occurences des caractères HTML spéciaux comme <>&" par leurs entités HTML &lt;&gt;&amp;&quot; dans la sélection courante.

Le menu Dialogues a presque le même usage, mais au lieu de simplement écrire le texte, une fenêtre est affichée, dans laquelle vous pouvez placer les paramètres des balises. Si vous laissez un champ blanc, alors ces paramètres n'apparaîtront pas dans le texte.

Balises d'édition

Rappelez vous que nous avons parlé du menu contextuel qui apparaît quand nous appuyons sur le bouton droit de la souris sur l'aire de rédaction? Le dernier item était Editer balise. Le temps est venu d'expliquer ce qu'il fait.

Comme vous l'avez vu, avec le menu Dialogues vous pouvez facilement insérer des balises paramétrées. Une fois qu'elles sont insérées, vous pouvez toujours les éditer manuellement, en éditant simplement le texte. Mais, comme vous l'avez vu, c'est plus facile d'ajuster les paramètres d'une balise à travers une boîte de dialogues, plutôt que d'écrire le texte. C'est ici qu'intervient 'Editer balise'.

Du menu Dialogues, sélectionnez une balise (ex. Dialogues-->Tableau-->Tableau, ajustez ses paramètres et insérez la balise. Puis, placez le curseur sur la balise, appuyez sur le bouton droit de la souris et sélectionnez 'Editer balise'. Comme vous le verrez, la même fenêtre dans laquelle vous avez créé la balise apparaît (cette fois, tout les champs ne sont pas blanc, mais à la place ils sont définis pour s'adapter aux paramètres de la balise). Maintenant, vous pouvez éditer les balises à travers ce menu plus facilement et plus automatiquement.

Notez que cela fonctionne seulement avec les balises qui ont été insérées du menu Dialogues ou des boutons correspondant dans la barre d'outils HTML.

Surlignage de la Syntaxe

Cette caracatéristique sera expliquée en détail dans le second chapitre, mais voici un synopsis de son utilisation.

Afin d'identifier les balises et de les distinguer du texte normal, les balises peuvent être surlignées (actuellement, le texte est coloré différemment du texte normal afin d'être distingué, vu qu'un vrai surligneur change la couleur du fond).

Pour définir cette caractéristique, cochez Visualiser-->Surligner la syntaxe. Chaque fois que vous voudrez que les balises soient colorées, sélectionnez Visualiser-->Rafraîchir le surlignage, raccourcis par défaut F5, ou cela peut être fait continuellement si vous ajustez le menu Préférences, comme vous le verrez par la suite.

Projets

Les projets dans Bluefish vous rappeleront quelques histoires. Si vous avez un couple de fichiers ouverts qui sont en relation, choisissez Projet->ajouter tous les documents ouverts. Maintenant sauvegardez le projet (habituellement situé dans ~/.bluefish/projects/). Toute couleur que vous utilisez, ou toute police, toutes cibles, url etc. sont racordés au projet, et si vous sauvegardez le projet, elles seront sauvegardées également. Les valeurs peuvent être édité en utilisant Projet->Editer, le menu contient fichiers et listes, où vous pouvez accéder au contenu d'un projet.

Quand vous ouvrez un projet, tous les fichiers de ce projet sont ouverts. Si vous prévisualisez un fichier qui se trouve dans le projet, le basedir est retiré du nom de fichier et est replacé dans le webdir. Ainsi /home/olivier/public_html/index.html peut être replacé dans http://localhost/~olivier/index.html si vous le voulez. C'est très utile quand vous programmez des sites web dynamiques (PHP, SSI, RXML) sur un serveur local.