 http://mawel.free.fr : Site d'informations pratiques pour la mise en place de sites dynamiques en php |
|
|
| > Tutoriels |
|
| Erreurs courantes |
|
| Saisie de texte riche |
|
| Structure de données |
|
| Ajout/Modif/Suppression |
|
| Résoudre un problème |
|
| Soumission de données |
|
| Pseudo-templates |
|
| Enregistrement de fichiers |
|
| Liens relatifs |
|
|
| > Cours |
|
| 1. Structure de site |
|
|
| Contact |
|
| Votre avis |
|
|
|
| Liens |
|
| Inventons! |
|
|
Introduction On appelle "texte riche" le fait, dans un texte, de pouvoir mettre des passages en gras, en italique, d'y insérer des images, voire des tableaux. Ce type de texte est très facile à produire avec un logiciel de traitement de texte ou un éditeur html comme FrontPage. On peut alors s'autoriser toutes les fantaisies, et obtenir des résultats qui ne sont pas nécessairements très heureux. Ce tutoriel traite de la création de textes de ce type, dans le contexte de la mise à jour d'un site web par une interface web. Contraintes de l'interface web L'interface de saisie web (le navigateur) possède un nombre assez limité de "contrôles" en standard. Il est possible de placer sur une page web les champs de saisie suivant :
Ces champs se présentent de la manière suivante :
et... c'est tout ! Un navigateur web ne comprend en standard que ces deux types de champs pour la saisie de données. Tout le neud du problème se trouve ici : le navigateur ne permet pas de saisir du texte riche. Aucun bouton ne permet de spécifier que tel mot doit être en gras, en italique ou en souligné, pas de couleur... rien que du texte ! L'utlisation de feuilles de style permet de faire en sorte que le texte affiché dans les zones de saisie apparaisse avec une police et dans une taille particuliere, mais a l'interieur de la zone, on ne peut faire que du texte. Note : Il existe d'autres types de champs input, utilisés pour effectuer des selections : zones de sélection, bouton radio et cases à cocher. Contournement par le biais d'une applet La première idée qui vienne a l'esprit pour palier au manque de fonctionalités des deux contrôles de textes présents dans les navigateurs web est de mettre en place une applet. Pour rappel, une applet est un petit programme, écrit en java, et qui a la particularité de pouvoir être déployé dans n'importe quel navigateur. Dans la mesure ou l'applet est un véritable programme, on peut tout a fait écrire, en java donc, un mini traitement de texte offrant les fonctions indispensables : mettre en gras, inserer une image, ajouter un lien. Ce type d'applet offre des résultats qui peuvent être interessants. L'utilisateur se trouve dans un cadre, avec des icones qui lui sont familières. Le principal défaut de cette méthode est la lenteur de chargement du code lors de la lecture de la page, chargement qui est d'autant plus long que les fonctionnalités de l'applet sont évoluées. Contournement par le biais de la classe "RichEdit" Depuis la version 4, microsoft a ajouté a son navigateur une sorte de "contrôle" permettant d'étendre les formats de saisie de texte. Sans expliciter ici la totalité du fonctionnement de la méthode, il s'agit simplement de créer une IFRAME, et de placer son "designmode" sur "on", pour pouvoir, depuis le navigateur, écrire dans l'IFRAME, placer des mots en gras, etc... L'IFRAME devient alors une sorte d'éditeur HTML au sein du navigateur. Vous pouvez effectuer des tests dans la zone suivante : Ensuite, un jeu de fonctions javascript permet de jouer sur le fonctionnement du controle, pour lui ajouter ou lui retrancher des fonctionnalités. Un détail intéressant est le fait que ce contrôle, éllaboré par microsoft, a une fonctionnement assez proche du traitement de texte Word, toujours de microsoft, rien n'est du au hasard. Concrétement, un copier-coller d'un texte Word dans un controle "RichEdit" web donnera un résultat assez fidéle. Par ailleurs, certaines combinaisons de touches comme "Ctrl-I" fonctionnent aussi dans le controle, et permettent d'agir sur le texte sélectionné. L'énorme avantage de cette méthode repose sur le fait qu'elle fonctionne tout de suite avec les navigateurs des version 4 et 5 (6 probablement aussi) des navigateurs microsoft. Il n'y a rien à télécharger. De plus, dans la mesure ou la mise en page s'effectue directement dans Internet Explorer, on est a peu près certain qu'elle sera ensuite correctement interprété, en lecture seule cette fois ci, par le même internet explorer. Les inconvénients de cette méthode sont en revanche très pénalisants :
En conclusion, c'est une excellente manière de procéder, mais uniquement lorsque l'on se trouve dans un position ou l'on maitrise le navigateur, par exemple pour la réalisation de l'interface de contribution d'un intranet d'entreprise. Contournement à l'aide de balises L'idée n'est plus maintenant de contourner les problèmes par l'utilisation de nouveaux controles, mais de tenter de tirer partie des contrôles existant. Le principe tout simple revient en quelque sorte a demander a l'utilisateur de coder lui-même des balises HTML. On lui demande ainsi de taper <b>Gras</b> lorsqu'il souhaite obtenir Gras. Ce n'est qu'un retour aux sources. Les premiers éditeurs de texte fonctionnaient sur ce principe de balises, qui permettaient de donner au texte un aspect particulier. Toutefois, on voit bien que l'utilisation directe de balise html est génante pour l'utilisateur, a plusieurs titres :
On va donc essayer de créer un second langage de balise, très basique, pour traiter les cas les plus courants. On peut imaginer ainsi le tableau de correspondance suivant :
On demande donc a l'utilisateur qui saisi des information d'effectuer les travail de balisage pour pouvoir ensuite placer les balises au bon endroits. Cette méthode est celle que j'utilise sur mon site, les balises étant celles définies sur le même principe que dans le tableau ci-dessus. L'énorme avantage de cette méthode, c'est la possiblité de contrôle total de l'aspect des documents saisis. On peut définir très exactement les polices que l'utilisateur peut utiliser, les couleurs, les styles... On l'affranchit par ailleurs du travail de saisie des styles répétitifs. Sur mon site par exemple, les titres sont écrits comme ceci : Un titre de niveau 1 et le code php dans une boite :
Pour afficher les quelques lignes ci-dessus, je n'ai eu qu'a écrire :
ce qui simplifie considérablement l'écriture de grands textes. Par ailleurs, cette méthode présente aussi l'énorme avantage d'autoriser une dissociation complete entre le style des différents éléments du site (Titres, Listes, Tableaux...) de leur saisie. On peut très simplement, d'un seul coup, modifier la totalite des titres de toutes les pages du site. On maitrise ici complétement la saisie. Dans le cas d'un site comportant beaucoup de contributeurs, on évite que chacun n'utilise sa police, sa taille de caractères, tout en permettant la saisie de texte "semi-riches". Conclusion Les trois méthodes présentées ci dessus présentent chacune leur avantages :
|