Geckozone

Sujet issu de la division du sujet "Portage de KompoZer sous Gecko 1.8.1" suite à la suggestion d'améliorer l'interface de l'éditeur css


chinon37 > si vous avez des idées pour refondre l’interface de l’éditeur CSS, lâchez-vous !
Outre l’agencement des éléments qui est à revoir pour rendre la fenêtre retaillable, je trouve que l’onglet « box » est particulièrement hermétique. Ça mériterait d’être repensé en s’inspirant des propriétés « cadres » d’OOo par exemple…

Zefling > oui, KompoZer manque de raccourcis clavier à mon goût (je bosse sous Vim…) ; mais outre les raccourcis en Ctrl+qqch il y a aussi la possibilité d’accéder aux menus via Alt+qqch. Par contre, je ne suis pas du tout d’avis de faire des raccourcis pour modifier des styles en ligne (alignement, taille de texte, etc.) car c’est le boulot de l’éditeur CSS. KompoZer est un éditeur ouèbe, pas un traitement de texte : il faut inciter l’utilisateur à travailler proprement (= avec des feuilles de style) plutôt qu’à ajouter des styles internes qui pourrissent le code HTML.

Pour changer de vue, à mon sens la seule chose qui mérite d’être implémentée c’est l’affichage du dock source. J’ai prévu un [F8], mais je ne l’ai pas encore implémenté.
Pour ce qui est de sélectionner un nœud, essaye donc Alt+flèches ou Alt+BackSpace dans KompoZer 0.8, tu m’en diras des nouvelles.

Kazé a écrit :Zefling > oui, KompoZer manque de raccourcis clavier à mon goût (je bosse sous Vim…) ; mais outre les raccourcis en Ctrl+qqch il y a aussi la possibilité d’accéder aux menus via Alt+qqch. Par contre, je ne suis pas du tout d’avis de faire des raccourcis pour modifier des styles en ligne (alignement, taille de texte, etc.) car c’est le boulot de l’éditeur CSS. KompoZer est un éditeur ouèbe, pas un traitement de texte : il faut inciter l’utilisateur à travailler proprement (= avec des feuilles de style) plutôt qu’à ajouter des styles internes qui pourrissent le code HTML.

Mais il y a bien les bouton qui généré des style. Mais en fait, je suis obliger de parser dernier. Il faut dire que je me sers de KompoZer pour écrire mes articles. Le code est moins carde que quand ça sort d'un traitement de texte et plus simple a modifier.

Donc tu serais pour faire disparaitre les boutons de mise en formes ? Dans ce cas il faut proposer une alternative ? Des boutons personnaliser à qui on attribue un style. Ça serait géant, mais je doute que ça soit faisable. De plus il faudrait créer des projets et non plus des pages.
Ça permettrait de faire de l'édition CSS mais aussi un éditeur qui permet de ce servir du CSS générer de façon convenable.

Kazé a écrit :Pour changer de vue, à mon sens la seule chose qui mérite d’être implémentée c’est l’affichage du dock source. J’ai prévu un [F8], mais je ne l’ai pas encore implémenté.
Pour ce qui est de sélectionner un nœud, essaye donc Alt+flèches ou Alt+BackSpace dans KompoZer 0.8, tu m’en diras des nouvelles.

J'aimerais bien essayer ça. J'aimerais bien...

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

Zefling a écrit :Donc tu serais pour faire disparaitre les boutons de mise en formes ?

Oui. D’ailleurs, rien de plus simple : View > Show/Hide > Format Toolbar 2
L’alternative consiste tout simplement à utiliser des feuilles de style. Pour générer des styles internes plus facilement, il suffirait d’ajouter un bouton « span » dans la barre d’outils. J’y pense aussi.

Zefling a écrit : J'aimerais bien essayer ça. J'aimerais bien...

Télécharge un liveCD d’Ubuntu
Là j’essaye de faire fonctionner la compilation automatique sous Debian, désolé mais c’est prioritaire sur la compilation Windows pour moi. Ce n’est pas parce que je dénigre la plate-forme majoritaire, mais parce que les utilisateurs Linux sont bien plus em***dés que les utilisateurs Windows en ce moment avec KompoZer.

Kazé a écrit :

Zefling a écrit :Donc tu serais pour faire disparaitre les boutons de mise en formes ?

Oui. D’ailleurs, rien de plus simple : View > Show/Hide > Format Toolbar 2
L’alternative consiste tout simplement à utiliser des feuilles de style. Pour générer des styles internes plus facilement, il suffirait d’ajouter un bouton « span » dans la barre d’outils. J’y pense aussi.

Pour l'instant je fais avec ce qu'il y a. Mais si il y pouvait y avoir la possiblité de créer ces boutons ça serait génial : Genre le truc qui te fait « <span class="titre_serie">Ton titre</span> » avec un simple clic ou un raccourcis clavier. D'ailleurs la liste des style serait peut-être une idée ?
Je dis ça parce que je connais pas mal de monde qui sert de KompoZer pour écrire dans leur CMS (le code passe souvent mieux que les merdes d'éditeur en JS et surtout laisse bien plus de possibilité comme de pouvoir nettoyer le code en un clin d'œil).

Kazé a écrit :

Zefling a écrit : J'aimerais bien essayer ça. J'aimerais bien...

Télécharge un liveCD d’Ubuntu
Là j’essaye de faire fonctionner la compilation automatique sous Debian, désolé mais c’est prioritaire sur la compilation Windows pour moi. Ce n’est pas parce que je dénigre la plate-forme majoritaire, mais parce que les utilisateurs Linux sont bien plus em***dés que les utilisateurs Windows en ce moment avec KompoZer.

Ouais, mais je pourrais pas l'installer (problème matériel par reconnu) et j'aurais probablement pas assez de ram pour tout faire en mémoire.

Il faut que je change de machine, et j'espère que la prochaine machine passera sous Linux. Et comme je suis pas près de changer, je vais patienter.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr-FR; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

Salut,

Dans l'explorateur des styles css, n'y a t-il pas de la place en dessous pour y intégrer une mise en forme graphique avec quelques boutons?
On aurait les règles de styles qui s'affichent plus haut, l'outil graphique en bas et la page sur la droite avec les modifications en live.
Bon, la fenêtre de l'explorateur est petite alors, cela risque d'être dur mais cela me semble moins manger de la place que sur un dock.
Par contre avec la solution du dock, cela serait surement plus confortable et plus accessible.
Petite question:
Avec ce nouveau kompozer, est-il possible de coller des extensions compatibles firefox2?
J'ai essayé par exemple fireftp (depuis geckozone pour FF2) mais cela ne fonctionne pas.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; es-AR; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

electrophil a écrit :Dans l'explorateur des styles css, n'y a t-il pas de la place en dessous pour y intégrer une mise en forme graphique avec quelques boutons?

pas sûr d’avoir compris. Si tu as le courage de faire une petite maquette sous Paint / Gimp, n’hésite pas à ouvrir un autre fil de discussion.

electrophil a écrit :Avec ce nouveau kompozer, est-il possible de coller des extensions compatibles firefox2?

Oui et non : les extensions Firefox 2 sont désormais toutes adaptables à KompoZer, mais il faut encore qu’une bonne poire se fade la dite adaptation. FireFTP est évidemment en haut de ma liste.

Merci pour cette réponse rapide.
Pour la maquette, cela sera avec plaisir, mais plus tard, je pars à Bogota dans 30min.
Pour les extensions:
En quoi consiste cette "adaptation" ?
(Une description très sommaire pour un gars (comme moi) qui s'est arrêter à l'assembleur 8bit sera la bien venue)
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.5) Gecko/2008121622 Ubuntu/8.10 (intrepid) Firefox/3.0.5

Bon, en attendant la maquette, je me disais que de la même manère que l'explorateur css+html est partagé en deux, on pourrait avoir sur l'onglet css seul, les règles en haut et une outil graphique en bas correspondant à ce que l'on a choisit de modifier.
Evidement, cela fait des boites différentes à fabriquer, mais si on veut modifier le style de h1 on ne serait pas perdu avec tous les onglet qu'offres l'éditeur css complet et qui doit en refroidir plus d'un. Je ne dis pas que c'est mal fait, mais je me rappelle que la première fois, j'e ne savais pas quoi faire ou modifier.
Je poursuis donc mon idée. J'ai un style h1 et je veux modifier la couleur et l'alignement.
La partie basse de l'explorateur pourrait intégrer (s'il y a la place) la partie "text" de l'éditeur css.
Tu vois mieux ce que je dis ?
là, je dois y aller.
Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.3) Gecko/2008101315 Ubuntu/8.10 (intrepid) Firefox/3.0.5

Pour les moins doués du pinceau, je signale
http://www.respawner.fr/blog/index.php? ... avec-Glade
Bon, c'est GTK. Mais ça permet de donner une idée...

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.5) Gecko/2008121621 Ubuntu/8.04 (hardy) Firefox/3.0.5

Kazé a écrit :Pour essayer d’être plus clair : si on a un panneau CSS retaillable dans le dock en bas, je pourrai tâcher de faire en sorte que le dock soit détachable, comme dans FireBug. Je crois que c’est la seule façon d’avoir une interface qui soit utilisable quelle que soit la taille de l’écran.

WHHHOOOPEEE!

chinon37 a écrit :il faut garder en tête son côté simple, accessible et ergonomique pour un débutant que je n'ai que rarement rencontré ailleurs malgré mes recherches. MB, si tu as des exemples...?

Non. Il n'y a rien de comparable, Il n'y a que les payants que je n'ai pas essayé,
Bon. Au boulot avec le Gimp, dés demain...


(je ne suis plus averti des sujets que je surveille quand y'a du neuf, C'est parce que je passe de Win au Bouquetin sans arrêt?)

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.5) Gecko/2008121622 Ubuntu/8.10 (intrepid) Firefox/3.0.5

Mongo Bob a écrit :(je ne suis plus averti des sujets que je surveille quand y'a du neuf, C'est parce que je passe de Win au Bouquetin sans arrêt?)

Une seule solution...

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.5) Gecko/2008121621 Ubuntu/8.04 (hardy) Firefox/3.0.5

Ymai a écrit :Pour les moins doués du pinceau, je signale
http://www.respawner.fr/blog/index.php? ... avec-Glade
Bon, c'est GTK. Mais ça permet de donner une idée...

Oui, Glade est une alternative. Au passage, KompoZer (comme Firefox, Thunderbird) utilise GTK sous Linux, donc le résultat serait réaliste.
Néanmoins, je pensais surtout à copier/coller des éléments de l’interface actuelle de l’éditeur CSS, pas d’en redessiner une « from scratch ». M’enfin vous faites bien comme vous voulez hein ! ;-)

J'essaye de préciser ma pensée pour l'éditeur graphique.
Depuis l'explorateur css, je pense que l'on peut scinder verticalement pour avoir en bas un éditeur graphique et en haut les règles de styles. On sélectionne sa règle de style en haut, et on modifie à la souris sans utiliser le clavier en bas.
Il y aurait des onglets correspondant aux rubriques de Cascades: text background, borders, box... mais pas général, puisque l'on a en visuel toutes les règles de styles plus haut grâce à l'explorateur.
Ce placement de l'éditeur css me parait privilégier l'espace vertical de l'écran au profit d'une page html. Si le dock se transforme en éditeur css, la place pour l'affichage de la page diminue.
Pour la fenêtre correspondant à boite ou box, je pensais à 4 curseurs +/- autour de 3 boutons Margins, Paddings, Offsets.
Puisque le code css est en haut dans l'explorateur, pourquoi le voir dans l'outil graphique? En plus, on verrait les règles css s'afficher en même temps, ce qui me parait bon pour se familiariser avec le vocabulaire anglais des feuilles de styles.

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; fr; rv:1.9.0.6) Gecko/2009020911 Ubuntu/8.04 (hardy) Firefox/3.0.6 GTB5

Pour resituer le débat : l’intérêt de « docker » l’éditeur CSS serait essentiellement (uniquement ?) de pouvoir faire défiler la page html tout en ayant l’éditeur CSS sous les yeux. La difficulté est que l’interface graphique de l’éditeur CSS repose sur des objets de taille fixe : l’éditeur CSS a donc besoin (actuellement) d’une largeur et d’une hauteur minimales, en-dessous desquelles il n’est pas utilisable.

Que l’on veuille « docker » l’éditeur CSS ou rendre la boite de dialogue CaScadeS redimensionnable, le problème est le même : il faut que l’éditeur CSS soit utilisable quelle que soit la taille de la boite. Je considère qu’une barre de défilement est acceptable, mais que deux barres de défilement sont rédhibitoires.

Pour les extensions:
En quoi consiste cette "adaptation" ?
(Une description très sommaire pour un gars (comme moi) qui s'est arrêter à l'assembleur 8bit sera la bien venue)

Les extensions Firefox utilisent des éléments de l’interface de Firefox comme « points d’ancrage ». Parfois (souvent), ces extensions réutilisent du code Firefox.
Pour adapter une extension Firefox à KompoZer il faut donc « ancrer » les éléments d’interface de l’extension sur l’interface de KompoZer, et parfois reprendre une bonne partie du code pour qu’il ne repose plus sur du code Firefox.
Concrètement, c’est le cauchemar avec Firebug mais ça s’envisage avec FireFTP.

Ce placement [vertical] de l'éditeur css me parait privilégier l'espace vertical de l'écran au profit d'une page html. Si le dock se transforme en éditeur css, la place pour l'affichage de la page diminue.

À méditer. Je ne suis pas fana de l’idée d’avoir un éditeur CSS wysiwyg dans le panneau latéral, car ça prend beaucoup de place et ça ne serait exploitable qu’à partir d’une certaine largeur minimum : il faudrait probablement redimensionner le panneau latéral chaque fois qu’on passe du gestionnaire de site au panneau CSS.
Par ailleurs, je ne trouve pas très pratique d’avoir à cliquer en haut pour sélectionner une règle et en bas pour la modifier : je préfère avoir l’arbre des règles CSS et les panneaux de propriétés côte-à-côte.

Inversement, je trouve que l’affichage actuel est pratique dans la mesure où il ne montre que les règles définies pour l’élément courant — reste à implémenter une façon d’éditer ces règles de styles, soit directement dans l’arbre CSS (tableau modifiable), soit via un double-clic qui ferait apparaître l’éditeur CSS wysiwyg (boite de dialogue ou dock).
Dans l’hypothèse où on garde une boite de dialogue pour modifier les règles de style, on aurait une boite de dialogue plus petite car on n’aurait plus besoin d’afficher l’arbre CSS dans cette boite de dialogue — un peu comme pour l’édition des styles internes.
Dans l’hypothèse d’un dock CSS horizontal, il est nécessaire qu’il soit utilisable avec une hauteur faible pour ne pas trop amputer l’affichage de la page html. Et là, je n’ai pas de solution simple à proposer.

Ça n’est que mon avis, j’essaye ici d’alimenter le brainstorming, pas de fermer des portes.

Je reconnais bien volontiers qu’un éditeur CSS « docké » n’est pas simple à dessiner. Peut-être faut-il en conclure que c’est une mauvaise idée ? Ou que le panneau latéral suffit pour des petits ajustements (sans gêner l’affichage de la page html), et que recourir à une boite de dialogue pour des modifications plus complexes serait un compromis acceptable ? D’ailleurs, je crois que les deux éditeurs ouèbe de référence (DreamWeaver et Expression Web) recourent à des boites de dialogue, et non un dock, pour éditer le CSS en wysiwyg.

Pour la fenêtre correspondant à boite ou box, je pensais à 4 curseurs +/- autour de 3 boutons Margins, Paddings, Offsets.

+1, j’irais même un peu plus loin dans cette idée en reprenant un aspect que j’aime bien dans Firebug :

• 

Cette présentation a le mérite de montrer clairement où se situent les « margin » et « padding » par rapport à la bordure. Par contre, ça prend beaucoup de place — trop pour le panneau latéral, à mon humble avis.

Par ailleurs, je trouverais sympa d’avoir la checkbox « all four sides use same style » pour les margin / padding. Du coup, je serais tenté de vouloir définir la bordure dans la même interface : ça risque d’être plus lourd visuellement, mais ça ferait une boite de propriétés toute trouvée pour les <div>.

Tu m'as convaincu, le panneau css latéral n'est pas utilisable en dessous d'une certaine hauteur de fenêtre. Déjà en 1280x1024 cela me semblait limite. Alors en 1024x768, cela ne sera pas possible.
L'idée de regrouper les bordures sur les marges me semble bonne.
Peut-on penser à un clic sur une des bordures pour voir afficher les listes de choix possibles (avec les couleurs et l'épaisseur)?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; es-AR; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6