Journal Cupa : une page web éditable, simplement

Posté par (page perso) . Licence CC by-sa
Tags : aucun
29
30
sept.
2016

Bonjour Nal,

C'est bien rare que je prenne ma plume de nos jours, mais ayant écrit un petit outil qui répond à un besoin que j'ai eu de manière récurrente, je me suis dit qu'il pourrait profiter à d'autres. Cet outil, c'est Cupa.

C'est quoi ?

Cupa (CUstomizable PAge) est un petit outil destiné aux créateurs de pages HTML/CSS qui créent une page pour des gens qui, tout en ne maîtrisant pas HTML/CSS, souhaitent pouvoir apporter eux-même des modifications mineures au contenu.

Pourquoi ?

Parcequ'on me demande régulièrement de faire une petite page web ici ou là, mais ensuite apparaît le besoin de faire de retouches mineures. Et comme le temps est trop rare :

  • je préfère ne pas avoir à servir d'intermédiaire dès qu'il y a une mise à jour
  • j'ai la flemme d'installer et customiser un Wordpress ou autre, et que c'est plus complexe à utiliser pour l'utilisateur

Parceque des gens qui savent écrire des pages HTML/CSS ne savent pas forcément coder en Javascript/PHP (ce peut-être le cas d'un graphiste, par exemple), mais que leur clients peuvent vouloir un minimum de liberté éditoriale sur la page qu'ils ont commandé

Fonctionnalités

  • édition de contenus texte / image prévu pour être éditables par le créateur de la page web
  • redimensionnement automatique des images par le serveur en fonction des attributs width et/ou height détectés
  • authentification HTTP (uniquement Basic dans l'immédiat) pour pouvoir effectuer des modifications

Le mot de la fin

Voilà, cher Nal : c'est un outil jeune, codé un peu à la Rache™, mais il est sous license GPL et ne demande qu'à évoluer. J'espère qu'il pourra néanmoins servir à d'autres. Merci de ton attention :o)

  • # VisualEditor

    Posté par . Évalué à 3.

    Comment se positionne ton projet par rapport au projet de WikiMedia VisualEditor ?

    • [^] # Re: VisualEditor

      Posté par (page perso) . Évalué à 3. Dernière modification le 30/09/16 à 10:35.

      Bonne question, je ne connaissais pas.

      Si j'en juge par l'intégration sur Wikipedia et le volume de code source, c'est sans l'ombre d'un doute plus évolué que Cupa (ce dont je ne doutais pas un instant). Après, à quel point est-ce simple à intégrer/déployer pour quelqu'un n'ayant pas de notion de code autre que HTML/CSS ? ça je n'ai pas encore le temps de tester, mais je suppose que c'est plus compliqué que les quelques lignes requises pour Cupa. Mon but en le créant a été de réduire au strict minimum le travail du créateur de page web.

      Merci pour le lien en tous cas :)

      • [^] # Re: VisualEditor

        Posté par . Évalué à 1.

        Cupa : 2,38 Mo, VisualEditor : 41 Mo mais si on supprime le dossier .git on arrive à plus de 8 Mo quand même.

        De plus, VisualEditor ne semble pas pouvoir sauvegarder directement la page (ça sauve en localstorage, mais si je rafraichi la page, ça efface mes modifs), je pense que ça ne peut s'intégrer que dans une page wikipedia. Ou il faudra bien travailler pour l'intégrer dans autre chose. Peut-être que c'est envisageable de le faire dans cupa d'ailleurs.

  • # Marche pas

    Posté par (page perso) . Évalué à 2.

    J'ai téléchargé le zip depuis github, posé le tout sur mon apache/htdocs local et lancé sample.html
    La connexion avec admin/secret ne fonctionne pas, ni même en changeant le mot de passe par défaut, celà renvoit une erreur systématique… pas drôle :(

    • [^] # Re: Marche pas

      Posté par (page perso) . Évalué à 2. Dernière modification le 30/09/16 à 10:53.

      As tu bien vérifié les permissions des fichiers ? Il faut que ton serveur apache ait les droits en écriture sur le répertoire data et son contenu. Désolé du désagrément :(

      EDIT: j'avais mal lu ton message, si ton problème est l'authentification, ça ne vient pas des droits sur data. Quel navigateur utilises-tu ? bloques-tu l'exécution de javascript ?

      • [^] # Re: Marche pas

        Posté par (page perso) . Évalué à 1. Dernière modification le 30/09/16 à 10:53.

        Ah… je re-test

        • [^] # Re: Marche pas

          Posté par (page perso) . Évalué à 2. Dernière modification le 30/09/16 à 10:56.

          D'ailleurs il faut que ton serveur puisse aussi lire tous les fichiers du répertoire Cupa et qu'il supporte PHP avec le module GD.

      • [^] # Re: Marche pas

        Posté par . Évalué à 3.

        ah oui bien vu pour la permission des fichiers… c'était évident mais je n'avais pas pensé à le faire (on n'a pas les bonnes permissions en faisant un clone depuis git ?), j'avais bien le texte qui se modifiait une fois authentifié, ça indiquait "sauvé", mais je ne pouvais pas changer les images. Et j'ai vu ensuite que le texte n'était pas réellement sauvegardé. Peut-être vérifier ça ?

        D'autre part, je n'ai pas vu de fonctionnalité pour modifier l'apparence du texte (gras, italique, souligné etc), si tu l'as prévu pour la suite, et si tu souhaites sauver cela avec la meilleure syntaxe possible (txt2tags), tu peux intégrer le markitup + preview en javascript en démo ici :

        http://wiki.txt2tags.org/demos/lionwiki-t2t/index.php?page=main&action=edit (mot de passe: demo, les pages sont réinitialisées tous les jours, bien cliquer sur "preview" pour l'activer)

        L'avantage c'est que ça gère les besoins d'édition les plus courants, les titres, ainsi que la création de tableaux etc, je pense que ça ne serait pas trop lourd à rajouter dans CUPA.

        • [^] # Re: Marche pas

          Posté par (page perso) . Évalué à 2.

          Merci d'avoir testé et pour tes retours :

          • à propos du texte non-sauvegardé avec le mauvais feedback en cas de problème de permission, j'avais effectivement remarqué ça ce matin, et c'est tracé là ici
          • pour le fait de rajouter un stylage de base, effectivement c'était en projet pour la suite, merci pour les idées :) - c'est ajouté
          • et pour les permissions, c'est
          • [^] # Re: Marche pas

            Posté par . Évalué à 3.

            à oui et j'avais oublié le petit compliment encourageant dans mon dernier message : c'est vraiment facile à utiliser, notamment pour modifier l'image. Bravo pour ce travail et cet outil.

            Pour les permissions, je n'ai pas testé depuis un zip, j'ai juste cloné l'archive. Je sais que git me casse les *** en rajoutant les permissions sur les fichiers lorsque c'est modifié, alors je pensais que c'était pris en compte lorsque l'on clonait.

            Dans la liste des petits fonctionnalités qui pourrait être utiles (même si les demandes peuvent tendre vers l'infini lorsqu'on commence ce genre de projet), pouvoir supprimer et rajouter un bloc de texte et d'image serait pas mal.

            Peut-être que la page html principale pourrait être générée par un wiki léger (genre dokuwiki, pmwiki, lionwiki) pour faciliter l'édition et le rajout des éléments ?

            • [^] # Re: Marche pas

              Posté par (page perso) . Évalué à 1.

              Merci :)

              Les changements affectant la structure de la page sont effectivement quelque-chose qui serait envisageable dans le futur, mais je veux vraiment bien réfléchir au "comment" d'abord : le but est de ne rien sacrifier en terme de simplicité d'utilisation.

  • # Juste génial

    Posté par (page perso) . Évalué à 2.

    Ça marche pour moi. Et ça répond bien à des demandes que j'ai aussi. Je vais pouvoir m'amuser à faire des petits sites web basiques et laisser les gens gérer lorsqu'ils veulent corriger une coquille ou changer une image… Simple, sobre et efficace. Merci pour le partage :)

  • # .rst

    Posté par . Évalué à -1.

    Avanages/inconvenients par rapports a rst ??
    Cf https://fr.wikipedia.org/wiki/ReStructuredText

    • [^] # Re: .rst

      Posté par (page perso) . Évalué à 2.

      Hmmm, sauf erreur pas grand-chose à voir : Cupa s'adresse aux créateurs de pages web (sans requérir de connaissances Javascript/PHP), qui veulent créer des pages auxquelles les utilisateurs (non-informaticiens) pourront apporter des mises à jour de contenu (textes et images).

      Cupa simplifie aussi l'épineuse question du déploiement (problématique à laquelle RST n'apporte pas de réponse) :

      • pour le créateur de la page web, il y a juste à mettre les fichiers sur le serveur apache (pas de mise en place de base de données, etc)
      • pour l'utilisateur, il n'a besoin ni de savoir se connecter à un serveur FTP, ni de connaître un quelconque langage informatique (fût-il de markup)

      La cible est donc très différente.

  • # Pas mal

    Posté par (page perso) . Évalué à 10.

    Très bonne idée, ça marche bien, c'est simple, le code n'est pas ultra joli mais très simple et concis, ça charge pas what-mille librairies JS pourries, super :)

    Par contre niveau sécurité…

    $picture_id = $_POST['id'];
    // process params
    $filename = "../data/img-$picture_id.jpg"; 
    <snip />
    file_put_contents($filename, $picture_content)
    

    Outch. Avec ça ton utilisateur peut renommer son fichier img-machin.php.jpg et injecter du code sur ton serveur qui sera exécuté (dépend de ta config apache), ou alors indiquer tenter d'écrire dans un autre répertoire, etc. Idem pour la sauvegarde de texte. Je te suggère de vérifier que ton ID est numérique, ou alors plus simple utiliser un hash MD5/SHA1 comme nom de fichier.

    Je te suggère aussi de vérifier (avec mime_content_type($filename)) le type du fichier avant de l'enregistrer dans le répertoire de l'appli, juste pour être sûr que tu stocke un truc qui ressemble vaguement à une image.

    « Je vois bien à quels excès peut conduire une démocratie d'opinion débridée, je le vis tous les jours. » (Nicolas Sarkozy)

Suivre le flux des commentaires

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