Le blog de teepsy

Personnaliser les textes dans teepsy

30 janvier 2008 par Roberto

Avec le lancement de la version bêta de teepsy, les premiers retours des utilisateurs nous ont permis d’établir une liste des choix que nous avons qui ont été validés par les utilisateurs, et d’autres qui posent problème.

Une des frustrations les plus souvent évoquées est celle de ne pas pouvoir plus personnaliser le contenu d’une page. Changer une police, une taille de texte, une couleur, ….

Il faut dire que nous l’attendions celle-là :) En effet, nous avons volontairement bridé l’interface de l’éditeur de textes, pour que l’utlisateur ne se concentre que sur un seul point : le contenu de son texte.

Pour justifier notre choix, prenons l’exemple du journaliste de la Tribune du coin. Son travail consiste à rédiger un article, créer du contenu, illustré ou pas, et de le saisir dans un logiciel conçu à cet effet. Ce logiciel a une interface très basique : il peut mettre un texte en gras, en italique, faire un bref sous-titre, voire un paragraphe d’introduction. Au delà de ces possibilités, le journaliste ne peux que taper du texte qui sera imprimé sans mise en forme dans le journal.

La taille des titres, sous-titres, des colonnes, des images, etc…, est définie par une charte graphique commune à l’ensemble du journal, qui ne change que très rarement (que l’on nomme d’ailleurs changement de formule). A aucun moment, le journaliste n’a la possiblité de choisir la taille de la police, la couleur de son texte ni sa justification (droite, gauche, centré). Imaginez un peu le manque de cohérance de l’ensemble d’un journal si chaque journaliste peut choisir de taper son texte en Arial, Times New Roman ou en Comic, en ayant un sous-titre en rose, en vert ou en bleu. Le résultat serait illisible.

C’est exactement ce type de raisonnement que nous essayons d’appliquer à teepsy. Le choix de la police, des couleurs et des tailles ne se fait pas lors de la rédaction d’un article ou d’un texte, mais en amont. Dans notre cas, c’est le graphiste qui fait ces choix. L’utilisateur choisit un graphisme en fonction de ses goûts (dans le futur il y en aura plus et on pourra en personnaliser certains aspects) lors de la création de son site, et ensuite ne s’occupe plus que du contenu, du texte à saisir.

Mais il est certain que certaines fonctionnalités de base doivent être disponibles pour les utilisateurs. Ces dernières vont permettre à l’utilisateur de structurer son texte d’un point de vue sémantique sans se préoccuper de sa mise en page. Ainsi, nous avons établit une première liste :

  • mise en gras,
  • en italique,
  • créer un lien, (et le supprimer ;))
  • insérer une image,
  • liste à puces,
  • listes numérotées,
  • sous-titre,
  • citation (pour mettre en évidence l’ensemble d’un paragraphe)

A notre avis, cette liste couvre une grande majorité de cas. Mais peut-être passons-nous à côté d’un outil qui aurait sa place dans cette liste. A votre avis, y manque-t-il quelque chose ?

3 commentaires pour “Personnaliser les textes dans teepsy”

  1. Lio dit :

    Hello les pros.

    Je suis parfaitement d’accord avec cette philosophie. Le style doit être pensé et préparé en amont, par un graphiste. Justement, pouvez-vous me dire quand il sera possible de modifier, d’intégrer, de changer à souhait les feuilles de style.

    Encore bravo pour votre excellent travail.

  2. Surf dit :

    Je suis aussi convaincu du bien fondé de ce choix. Ce qui n’empèche pas qu’il y aura bien des détracteurs à convaincre ;-)

    Pourkoi n’y a-t’il pas plusieurs niveaux de titres (j’aurais dit au moins 3) et y-a-t’il les ancres internes? (pour une table des matières)

    Keep the good work up :-)

    Pour info, voir ci-desssous d’autres styles structuraux qu’on trouve avec html.

    STRUCTURAL DEFINITION
    ——————————————-
    Heading (the spec. defines 6 levels)

    Align Heading
    [*]
    Division

    Align Division

    Block Quote (usually displayed as indented)

    Emphasis (usually displayed as italic)

    Strong Emphasis (usually displayed as bold)

    Citation (usually italics)

    Code (for source code listings)

    Sample Output

    Keyboard Input

    Variable

    Definition (not widely implemented)

    Author’s Address

    Large Font Size

    Small Font Size

  3. Surf dit :

    bon, la liste des tags html ne passe pas ;-)
    voir donc ici:
    http://tecfa.unige.ch/guides/bare_bone.html#structure

Laisser un commentaire

.