Journal Idée de logiciel d'aide au positionnement en CSS

Posté par  .
Étiquettes :
0
24
nov.
2004
En tant que webmastandardcomplianter du dimanche, je viens d'avoir l'idée suivante pour résoudre le casse-tête du positionnement en CSS. Tous ceux qui ont déjà travaillé sur une feuille de style savent que le placement des boites de texte est une épreuve dure et capitale.

D'où mon idée:
Pourquoi ne pas écrire un logiciel qui permettent de définir graphiquement le placement des boites?
Je m'explique: Lorsque le logiciel se lance, il présente un facsimilé de page blanche ouverte dans Firefox.
(L'image fixe d'une fenetre firefox, disponibe en plusieurs résolution: 800x600, 1024x768, etc diminuée d'un certain ratio pour que la fenetre tienne dans l'écran de l'utilisateur).

L'utilisateur peut cliquer sur un bouton qui lui permet d'ajouter des rectangles de couleur sur l'image.

Chaque rectangle représente un ou tout élément de bloc en CSS. L'utilisateur place ses rectangles à sa convenance. Pour chaque rectangle il peut assigner une propriété :
- "fixe" : la boite aura une position "fixed" (elle ne scrollera pas en même temps que la page)
- absolue
- etc.

Chaque propriété est caractérisée par une lettre (F pour Fixe, A pour Absolue, ...) qui s'affiche sur le rectangle de couleur.
Chaque rectangle est d'une couleur différente afin de faciliter le travail de l'utilsateur si des éléments doivent se chevaucher.

Lorsque tous les rectangles auront été placés, le logiciel pourra reprendre son cours: Il récapitule toutes les coordonnées des rectangles et génère une feuille de style CSS valide, pouvant inclure tous les hacks possibles pour IE/Netscape/Opera (On peut donner à l'utilisateur le choix de ne pas générer les hacks, mais il est capital de pouvoir les générer).
En prime, le logiciel génère une page HTML de démonstration, faisant appel à la feuille de style tout juste générée.

--

Voilà! Ce logiciel pourrait permettre de simplifier grandement la conception d'un site propre et accessible.
Malheureusement je ne suis pas analyste-programmeur, et je ne sais pas programmer. Du tout.

Et pourtant! Je fourmille d'idée de petite amélioration possible (si le rectangle représente une liste non ordonnée (UL), le logiciel peut proposer de présenter la liste comme un menu en ligne ou en colonne (selon la longueur et la largeur du rectangle)).

Et pourtant! L'idée m'emballe au point que je serais prêt à offrir un bounty[*] à l'individu qui réalisera ce logiciel en GPL.
Plus même s'il est sympa! Une bière pourquoi pas? Une place de ciné pour aller voir HHGG ?

Je fais appel à toi, ô communauté. Que penses-tu de cette idée? Serais-tu interessée pour l'amener à sa concrétisation?

D'avance merci, communauté.

plagiats
[*] voir conditions en magasin.

  • # Ceci est un titre

    Posté par  (site web personnel) . Évalué à 8.

    Ca existe et ça s'appelle Dreamweaver.

    Ca a un gros inconvénient : les utilisateurs ont tendance à travailler en position fixe et en pixels au lieu de faire des designs élastiques à coup de flottant et de tailles relatives.

    L'association LinuxFr ne saurait être tenue responsable des propos légalement repréhensibles ou faisant allusion à l'évêque de Rome, au chef de l'Église catholique romaine ou au chef temporel de l'État du Vatican et se trouvant dans ce commentaire

    • [^] # Re: Ceci est un titre

      Posté par  . Évalué à 7.

      nvu ne sais pas faire la meme chose ?

      • [^] # Re: Ceci est un titre

        Posté par  (site web personnel) . Évalué à 1.

        Je crois que c'était prévu mais je fais mes pages avec gvim et je n'ai pas installé nvu depuis .... jamais en fait :)

        L'association LinuxFr ne saurait être tenue responsable des propos légalement repréhensibles ou faisant allusion à l'évêque de Rome, au chef de l'Église catholique romaine ou au chef temporel de l'État du Vatican et se trouvant dans ce commentaire

      • [^] # Re: Ceci est un titre

        Posté par  (Mastodon) . Évalué à 10.

        La dernière fois que j'ai essayé Nvu, il faisait le layout fixe (au pixel près, pas au sens "fixed" des CSS), mais pas le layout dynamique. Par contre, si cette fonction a été ajoutée ou est en projet, ça m'intéresse.

  • # CPSSKINS

    Posté par  . Évalué à 5.

    Ca existe plus ou moins pour Zope (plone CPS ...)

    http://www.medic.chalmers.se/~jmo/CPS/(...)

    Et le tout en DHTML / Javascript

    Tu es dans ton site et tu repositionne les box comme tu veux
    (voir les quelques vidéos flash et les screenshots du site)

  • # difficile à faire...

    Posté par  . Évalué à 3.

    Si ça n'est pas encore intégré aux logiciels genre Nvu, c'est pas pour rien...

    Je crois que c'est très compliqué et y'a encore que le cerveau humain pour faire ça bien (mais pas très vite, je me souviens, j'ai pas mal galèré pour en faire...)...

  • # Pourquoi pas un bestiaire ?

    Posté par  . Évalué à 3.

    En général, il y a quelques schémas type de présentation...

    Pourquoi ne pas faire un bestiaire paramètrable (genre choix du nom du calque, etc.) qui nous ressort un CSS ?

  • # web developer

    Posté par  (site web personnel) . Évalué à 6.

    Il y a quand même un outil bien pratique, en option sur firefox et qui permet d'éditer le CSS en live dans la barre latérale pour voir directement ce que ça fait dans la page.
    http://www.chrispederick.com/work/firefox/webdeveloper/(...)

    • [^] # Re: web developer

      Posté par  . Évalué à 2.

      je connais. mais là, l'interet est de générer un sorte de "modèle" (template) directement livré avec les hacks qui vont bien et auxquels on ne pense pas forcément.

  • # Peut être

    Posté par  (site web personnel) . Évalué à 5.

    http://www.csscreator.com/version2/pagelayout.php(...) ?

    J'en avais trouvé un autre à l'époque, qui générait les box model hacks et tout le bazar. Faudrait Googler un peu plus.

    • [^] # Re: Peut être

      Posté par  . Évalué à 2.

      Je n'avais pas fait le rapprochement, mais c'est vrai que c'est à peu près ca. La différence ici c'est que l'on peut dessiner les rectangles sans spécifier de coordonnées ni de tailles (= -moins précis mais +simple).

    • [^] # Alternative

      Posté par  . Évalué à 2.

      Dans le même genre que CSS Creator, il y a aussi le Layout-oMatic : http://www.inknoise.com/experimental/layoutomatic.php(...)

      Je ne sais pas qu'elles sont les différences entre les deux.

  • # TopStyle Pro

    Posté par  . Évalué à 0.

    C'est un excellent éditeur de CSS (c'est sa spécialité). Il permet de voir immédiatement le résultat d'une CSS dans un aperçu fonctionnant avec différents moteurs de rendu (IE, Gecko, ...). Il permet également de savoir si un style est reconnu par le standard et quelles versions de navigateurs le supporte... En un mot, je le trouve incontournable.

    Un défaut: il est payant :-(

    http://www.bradsoft.com/topstyle/(...)

    • [^] # Re: TopStyle Pro

      Posté par  (site web personnel) . Évalué à 4.

      Un autre défaut : ca ne marche que sous windows...

      Sinon il y'a, qui correspond exactement a ce journal (mais pour windows), DHE editor : http://www.hexagora.com/en_dw_dhe.asp(...)

      Ca marche très bien, on pose des boites, c'est totalement intuitif. Mais, déjà ça ne gère que des positions fixes, et surtout le code est d'une saleté inimaginable, inclu dans le html (enfin quand j'avais testé, il y'a au moins 6 mois...)

    • [^] # Re: TopStyle Pro

      Posté par  . Évalué à 1.

      au moins deux extensions de FireFox font du bon boulot : editcss et webdeveloper.

      on peut apercevoir le principe à gauche :

      http://62.212.109.174/temp/eretzvaju2.jpg(...)

      on édite tout simplement la CSS de la page en direct dans la toolbar à gauche et les modifications sont instantanément répercutées sur le rendu de la page - sans reload, sauvegarde ou téléchargement, qui ne sera fait que si et quand on est content du résultat.


      on pourrait croire qu'il faille connaitre par coeur la syntaxe des CSS mais en fait il récupère la css associée à la page : il suffit donc d'ajuster la taille et la postion des divers bidules.

      editcss se contente de faire ça. webdeveloper fait ça et bien plus, même un peu trop, c'est carrément fouilli, je trouve, mais bref... (les rectangles colorés à droite, le curseur de la souris qui affiche la classe de l'élément survolé dans la barre de statut..)

      • [^] # webdeveloper

        Posté par  . Évalué à 1.

        A propos de webdeveloper, c'est possible de lui faire afficher les images en background ? Si je passe en mode édition css elles disparaissent et c'est très génant pour justement bricoler la css.

  • # Je suis ton homme !

    Posté par  . Évalué à 2.


    Je suis un développeur et ton idée avait aussi germé dans ma tête.

    J'ai pas mal de pistes sur ce sujet. Mais d'autres choses font que je n'ai pas concretisé.

    contact moi avec les coordonnées accessible depuis ma page par exemple.

    @++

    PS : c est quoi ton boonty ;) ;)


    Serieux, contacte moi et on le fait
    @+

    • [^] # YOUPi!

      Posté par  . Évalué à 2.

      Je t'ai envoyé un message linuxfrien contenant mon mail.
      Je peux réaliser les graphismes, l'aide, et le site du logiciel. :)

      plagiats

      • [^] # Re: YOUPi!

        Posté par  . Évalué à 1.

        Ok,

        j'attends ;)

        • [^] # Re: YOUPi!

          Posté par  (site web personnel) . Évalué à 3.

          il a dit qu'il t'avait envoyé un message linuxfrien :) regarde dans ta page personelle :)

          • [^] # Re: YOUPi!

            Posté par  . Évalué à 1.

            Euh merci !! moi j'attendais un mail sur @dlfp.org !!

            Effectivement il est passé par les messages linuxfrien...

    • [^] # Partir de rien...

      Posté par  (Mastodon) . Évalué à 3.

      Vous pourriez peut-être travailler avec / sur la base de nvu, non?
      Enfin, je ne vois pas trop si ce serait plus simple ou pas, c'est juste une idée comme ça...

      • [^] # Re: Partir de rien...

        Posté par  . Évalué à 3.

        A voir !

        de toute façon avant de partir tête baissée , on va faire un petit benchmark de ce qui existe pour ne pas réinventer ce qui peut être réutiliser.

        ...

  • # Nvu

    Posté par  . Évalué à 1.

    La version 0.5 de NVU le fait.

    • [^] # Re: Nvu

      Posté par  . Évalué à 3.

      En es-tu sûr? J'ai cherché cette fonctionnalité et ne l'ai pas trouvé.

      Il s'agit pour moi de dessiner des rectangles et que les coordonnées de ces rectangles soient retranscries en css...

      • [^] # Re: Nvu

        Posté par  . Évalué à 2.

        Attends un peu la version 0.6 devrais sortir aujourd'hui ou demain ...

        Dam

  • # Zephoria

    Posté par  . Évalué à 4.

    je viens de découvrir cet ovni :

    http://www.aypwip.org/webnote/zephoria(...)

    ça pourrait être utilisé non ?

    • [^] # Re: Zephoria

      Posté par  (site web personnel) . Évalué à 1.

      Ca m'a l'air très chouette, je vais regarder ça un peu plus en détail.

      A priori, c'est dommage qu'il n'y ai pas une restriction d'acces.

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.