Discussion :

[ABCIWEB]

Bonjour,

Je finalise ce module de filigrane Wysiwyg.

Il est conçu pour offrir un maximum de possibilités concernant la direction artistique mais aussi au niveau de la productivité avec la gestion de présélections. Vos suggestions et remarques sont les bienvenues.

Merci pour vos retours


Notes :
- Vous pouvez éventuellement récupérer le code, mais il sera proposé prochainement dans ce module d'upload avec le code serveur Php correspondant pour une solution prête à l'emploi qui permet également de gérer en complément des redimensionnements, recadrage et optimisation d'images pour le web.

- Evitez des remarques concernant l'utilisation de jQuery, ce n'est pas le sujet ici.

[jreaux62]

Bonjour,

ce n'est pas hyper-intuitif...

J'ai téléchargé une image, cliquer un peu partout, mais le bouton "Envoyer" reste désactivé.

Et les listes déroulante "Preset..." ? (pas compris...)

+ une coquille ici :

Productivité
...
Enregsitrement des presets

[ABCIWEB]

Merci pour ta réponse

Bonjour,

ce n'est pas hyper-intuitif...

Ben oui, je m'y attendais un peu, d'autant plus qu'il y a des instructions pour l'installation destinées au webmestre, qui peuvent aussi perturber l'utilisateur. Ce sera le choix du webmestre de proposer les explications qu'il souhaite. Mais vous pouvez m'indiquer celles que vous pensez indispensables pour l'utilisateur.

J'ai téléchargé une image, cliquer un peu partout, mais le bouton "Envoyer" reste désactivé.

Normal, la partie serveur ne fonctionne pas ici (le script est sur le serveur de developpez.com qui n'accepte évidemment pas les scripts Php pour des raisons de sécurité). Comprendre que lorsqu'on cliquera sur ce bouton, le ou les fichiers sont traités par Php qui créera les images avec leur filigrane et enverra le résultat dans le dossier voulu. Alternativement on pourrait créer un fichier Zip avec les images traitées et le proposer en téléchargement, mais c'est un choix à faire côté serveur, cela ne change rien pour le front-end exposé ici.

Et les listes déroulante "Preset..." ? (pas compris...)

La liste déroulante des presets restera vide tant que tu n'auras pas enregistré de preset. Il y a quelques explications quand on clique sur les onglets de la première boite de configuration qui s'affiche avant la sélection des photos. Etant donné qu'il n'est pas possible ici d'enregistrer les presets en bdd, ils s'enregistrent dans un cookie.

Les presets enregistrent le filigrane tel qu'il se présente sur la photo. Tu peux l'enregistrer complet, ou par exemple laisser le texte vide qu'il suffira de compléter pour chaque photo. Cela permet de choisir un preset avant la sélection de photos pour l'appliquer à toutes les photos puis éventuellement personnaliser le texte ou modifier la position ou n'importe quel autre paramètre, pour chaque photo de la sélection. Et chaque photo peut par ailleurs accéder à n'importe quel preset enregistré, y compris les derniers crées dans la sélection de photos en cours.

Si l'enregistrement des presets n'est possible qu'après avoir sélectionné une photo, c'est parce que sinon on ne voit pas ce que l'on enregistre. De plus, étant donné que la taille des filigranes est proportionnelle à la largeur des photos - pour pouvoir être utilisé sur n'importe quel périphérique donc avec des images de prévisualisation qui peuvent varier en taille, et tout en restituant les mêmes proportions sur l'image finale - il faut nécessairement faire référence à une photo lors de l'enregistrement du preset. Et de même pour l'enregistrement possible d'une position définie manuellement par cliquez-glisser du filigrane sur la photo.

En fait la première boite de configuration (qui s'affiche avant la sélection de photos) est surtout conçue pour sélectionner un preset qui sera appliqué à la sélection, et là encore on pourra modifier/compléter ce preset (sans besoin de l'enregistrer) pour répercuter les modifications sur la prochaine sélection.

Pas facile d'expliquer toutes ces fonctionnalités en mode intuitif. Mais bon apparemment si c'est principalement le bouton "Envoyer" qui t'a posé problème, cela veut dire que tu as au moins pu créer un filigrane en utilisant les fonctions basiques.

+ une coquille ici :

Merci c"est corrigé.

Je ne vois pas trop comment faire mieux pour le côté intuitif, c'est pour cela aussi que je propose ce module en test et je suis à l'écoute de vos propositions. J'ai pris le parti de faire plusieurs onglets dans la boite de configuration afin d'avoir un menu compact pour pouvoir personnaliser le filigrane pour chaque photo en cas d'upload multiple sans que cela ne prenne trop de place sous les photos. Et la petite taille des sélecteurs (que vous pourrez toujours agrandir si besoin) vient du fait que je les ai définies au plus juste afin que la boite tienne sur une seule ligne y compris sur les smartphones.

Si vous avez des idées pour améliorer l'ergonomie, les fonctionnalités, ou un texte explicatif, je suis preneur

[NoSmoking]

Bonjour,
• Pour toutes tes directives soulignées, Direction artistique, Productivité ... j’ajouterais une « flèche de déploiement », je pensais que c’était des paragraphes en cours de rédaction.

• Il y a un « cadre filigrane » situé au dessus du bouton Cliquez ou déposez vos images ici qui « ne sert pas » attendu que lorsque tu déposes une image un autre « cadre filigrane » s’affiche et est actif contrairement au premier même si il semblerait que celui-ci serve à conserver des valeurs par défaut lors du chargement d’une nouvelle image.
Ce point ne me paraît pas trop clair même si tu expliques :

En fait la première boite de configuration (qui s'affiche avant la sélection de photos) est surtout conçue pour sélectionner un preset qui sera appliqué à la sélection, et là encore on pourra modifier/compléter ce preset (sans besoin de l'enregistrer) pour répercuter les modifications sur la prochaine sélection.

... je n'en garderais qu'un et au-dessus de l'image.

• Je ne ferais pas le rendu dans le champ éditable pour ne pas casser la présentation en cas de choix extravagants, un simple <input> suffirait pour la saisie et le rendu sur l'image directement.

• Un petit cadre, discret, autour de l’image pour bien visualiser la zone et ce d’autant si celle-ci est sur fond blanc.

• Taille ...

Et la petite taille des sélecteurs (que vous pourrez toujours agrandir si besoin) vient du fait que je les ai définies au plus juste afin que la boite tienne sur une seule ligne y compris sur les smartphones.

... alors là bon courage moi et mes gros doigts !

• Les explications ...
... pas vraiment lu attendu que c'est toi qui maitrise, mais cela à l'air clair.


C'est déjà du bon boulot.

[jreaux62]

Autre coquille dans l'encart "Filigrane" -> "texte" :

...C'est une couleur générée automatiquement pour vous permettre d'apercevoir le texte quelque soit sa couleur, dans la mesure où ....

C'est "...quelle que soit sa couleur...".

je pense avoir saisi le principe
ET waouh ! je viens de voir qu'on peut déplacer le filigrane sur l'image avec la souris !

Sinon... pour les questions qui fâchent... : à quand le filigrane EN DIAGONALE ? (rotation)

[ABCIWEB]

C'est "...quelle que soit sa couleur...".

Bien vu, jamais je ne l'aurais remarqué, moi et l'orthographe, ça fait deux.

à quand le filigrane EN DIAGONALE.

Pas cette fois-ci. Je subodore qu'il faudrait utiliser un canvas, et il y a aussi le mode multi lignes pour être tout à fait complet. Je n'ai pas trop envie de m'embêter avec des fonctionnalités "marginales" dont je ne me sert pas pour l'instant, il faut bien livrer un jour.

En fait ce module de filigrane est une commande client que le partagerai lors de la mise à jour du module d'upload (donc avec le code php correspondant pour avoir une solution prête à l'emploi) et j'en ai déjà fait plus que nécessaire. Le drag and drop par exemple n'était pas indispensable, mais j'ai pensé que cela pourrait servir à poser rapidement un copyright sans background (plus adapté pour des photos artistiques) à un endroit précis d'une photo. De même la possibilité de faire des bandeaux pleine largeur ou pleine hauteur ou même les deux à la fois pour griser l'ensemble de la photo avec une légende au milieu, ne m'était pas non plus demandée.

Une autre particularité est que ce module peut être couplé à une fonction de recadrage, c'est à dire que lorsque l'on recadre une photo en faisant un cliquer glisser pour sélectionner une portion d'une image, le filigrane s'adapte en taille et en position sur la zone sélectionnée. Je mettrai le fichier en ligne quand j'aurai le temps mais c'est ce même module dont j'utilise certains paramètres (déjà implémentés mais non utilisés ici) pour le configurer avec une fonction de recadrage.

Bref, ce module est prévu pour répondre aux besoins les plus courants, avec certaines fonctionnalités peu courantes, mais pas pour répondre à tous les besoins de manière exhaustive. On verra plus tard pour le multi ligne et le positionnement en diagonale si j'ai le temps

Bonjour,
• Pour toutes tes directives soulignées, Direction artistique, Productivité ... j’ajouterais une « flèche de déploiement », je pensais que c’était des paragraphes en cours de rédaction.

1/ Ok ça sera fait.

• Un petit cadre, discret, autour de l’image pour bien visualiser la zone et ce d’autant si celle-ci est sur fond blanc.

2/ Oui effectivement c'est aussi une bonne idée.

• Je ne ferais pas le rendu dans le champ éditable pour ne pas casser la présentation en cas de choix extravagants, un simple <input> suffirait pour la saisie et le rendu sur l'image directement.

3/ Evidemment, ou peut-être je garderai le rendu de la police (puisque c'est déjà fait) mais pas le rendu de la taille dans le champ de saisie. Rien que pour ça j'ai bien fait de demander votre avis, une idée simple à laquelle je n'avais pas pensé.

• Taille ...

... alors là bon courage moi et mes gros doigts !

4/ C'est un problème ergonomique plus complexe à résoudre qui dépend de ce que l'on veut privilégier. Dans mon idée, il faut pouvoir voir la totalité de l'image, y compris en cadrage portrait, et en même temps les outils du filigrane pour voir directement l'effet des réglages/modifications. Sinon avec un filigrane en haut de l'image, et les outils en bas, il faut scroller pour voir le résultat, et même chose pour un filigrane en bas si je mets les outils en haut. Mais on pourrait aussi diminuer la hauteur maximale des photos, et faire des menus sur deux lignes ce qui permettrait d'élargir les sélecteurs/boutons. Après le webmestre pourra choisir de modifier cette présentation comme il veut suivant les besoins du client et ce qu'il souhaite privilégier, mais effectivement j'ai du mal à trouver une présentation universelle qui soit optimale quelque soit le périphérique de visualisation. La compatibilité technique est bonne mais pas l'ergonomie, j'en convient.

• Il y a un « cadre filigrane » situé au dessus du bouton Cliquez ou déposez vos images ici qui « ne sert pas » attendu que lorsque tu déposes une image un autre « cadre filigrane » s’affiche et est actif contrairement au premier même si il semblerait que celui-ci serve à conserver des valeurs par défaut lors du chargement d’une nouvelle image.
Ce point ne me paraît pas trop clair même si tu expliques :
... je n'en garderais qu'un et au-dessus de l'image.

5/ Oui mais le premier ne sert pas uniquement à stocker les valeurs par défaut, mais aussi à sélectionner un preset (et éventuellement modifier quelques uns de ses paramètres) qui sera appliqué à toute la sélection de photos. Evidemment il n'a pas d'intérêt pour une seule photo, mais il est pratique si l'on pense à du traitement par lot (upload multiple). Mais peut-être je pourrais cacher cette première boite dès la sélection de photos, puisque effectivement il ne sert plus après la sélection de photos.

Merci pour vos contributions, je posterai un petit mot quand j'aurai terminé ces modifs. Le point 4/ me semble le moins évident à résoudre, si vous avez des idées pour une meilleure ergonomie je suis preneur.

[jreaux62]

Idées du jour, bonjour !

C'est surtout l'interface graphique / ergonomique qui pêche un peu...
Sinon, techniquement, c'est déjà top.

4/ ...et en même temps les outils du filigrane...

...Le point 4/ me semble le moins évident à résoudre...

1- Pour chaque image :

• Les "outils" peuvent être dans une colonne latérale (ou dessus ou dessous), escamotable, via une icône "tools".
• Et, effectivement, mettre des icônes assez grosses pour les "gros doigts" !

2- D'autre part, les différentes "aides" (Productivité, notes,...) pourraient être :

• dans un menu à onglets (ou autre système, avec icône "?" ou "flèche").
• Ou, là aussi, dans une colonne latérale, escamotable, via une icône "help".

-> du coup, il suffit de DEUX ICÔNES "visibles" :

• "outils" et "aides" !

5/...le premier ne sert pas uniquement à stocker les valeurs par défaut, mais aussi à sélectionner un preset...

3- Concernant le 1er encart "Filigrane", peut-être proposer :

• une configuration BASIQUE (par défaut -> OU le "preset") : "texte (font par défaut) centré en bas, sans background" (par exemple)
• ajouter une "image fictive" (une simple case grise, ou autre) + du "faux texte" (par défaut)
  -> ce qui permet de visualiser le filigrane sur une image fictive, avant même de télécharger une(des) image(s)
• + une icône "plus" ou "configuration avancée" qui affiche + de paramètres modifiables *

Et, comme tu l'as suggéré, masquer le tout dès qu'on télécharge des images (avec possibilité de ré-afficher, au cas où...)


* Comme disait un de mes prof. (en Terminale, je crois, donc pas hier...) :

"Le mieux est l'ennemi du bien."

En fait ce module de filigrane ... que le partagerai lors de la mise à jour du module d'upload

Concernant l'upload ABCIWEB (multiple ou pas) :

• pourra-t-on configurer "une fois pour toutes" ** le "Filigrane" ?
• et/ou aura-t-on une icône pour "personnaliser" chaque image ?

** Dans MA pratique (actuelle), je définis (via variables de SESSION) par défaut : le texte "Copyright Moi-Même" et la position "BC" (= Bas Centre), pour TOUTES mes images.

[NoSmoking]

Le point 4/ me semble le moins évident à résoudre, si vous avez des idées pour une meilleure ergonomie je suis preneur.

Tu peux toujours regarder du côté du positionnement sticky voir fixed pour avoir tes outils toujours à portée de la « main ».

[ABCIWEB]

Salut,

J'ai effectué une mise à jour, vous devrez peut-être rafraîchir votre navigateur pour mettre à jour le contenu du cache.

1/ J'ai changé le menu des explications, en séparant ce qui est destiné au webmestre, cette partie sera donc plus facile à supprimer pour la mise en ligne destinée au public.

2/ Mis un cadre autour de l'image.

3/ Supprimer le rendu de la taille de la police dans le champ de saisie du texte pour éviter les déformations.

4/ Rendu compatible le drag and drop du filigrane sur l'image pour les portables.

5/ Supprimer la première boite de paramétrage du filigrane lorsque l'on sélectionne des photos. Cette boite réapparaît normalement après la soumission des fichiers quand le traitement (upload) est terminé, mais vous ne pourrez pas l'observer ici puisque la soumission des fichiers est désactivée. Il faudra donc rafraîchir la page pour voir l'équivalent.

6/ Concernant l'ergonomie des menus, j'ai simplement mis en place un système qui augmente la taille de la police des onglets "Texte" et "Fond" lorsqu'il y a de la place. C'est minimaliste mais je n'ai pas le temps d'en faire plus et je ne vois pas de solution évidente pour l'instant (si on privilégie la taille des boutons c'est au détriment de la compacité et d'une vision d'ensemble Menu + Image, etc.). Un menu fixed pourrait être une solution mais sur les petits appareils le menu une fois déployé va cacher la quasi totalité de l'image.

Enfin bon, niveau ergonomie des menus je vais en rester là pour l'instant. D'autant plus que cela peut être peut être personnalisé par le webmestre donc ce sera au choix de chacun de modifier cette présentation. Par ailleurs le ciblage des éléments html est regroupé dans une fonction de la classe "FiligraneABCI" de sorte qu'il est facile de vérifier que l'on ne rompt pas les fonctionnalités si l'on modifie le html et si besoin on peut modifier ce ciblage.


Reste une bidouille, comme d'habitude le symbole ⚙️ qui représente la roue crantée du menu paramètre ne s'affiche pas dans mon smartphone. Je ne sais pas si cela vient du fait que j'utilise un ancien smartphone ou autre. Dois-je intégrer une image à la place où existe-t-il une autre solution pour par exemple faire afficher les caractères spéciaux ?

Dernière version ici

[ABCIWEB]

Concernant l'upload ABCIWEB (multiple ou pas) :

• pourra-t-on configurer "une fois pour toutes" ** le "Filigrane" ?
• et/ou aura-t-on une icône pour "personnaliser" chaque image ?

** Dans MA pratique (actuelle), je définis (via variables de SESSION) par défaut : le texte "Copyright Moi-Même" et la position "BC" (= Bas Centre), pour TOUTES mes images.

Tu peux le configurer par défaut, en définissant un preset par défaut qui sera sélectionné automatiquement dès le chargement de la page, et donc le filigrane correspondant sera appliqué à toute la sélection de photos sans avoir à choisir un preset, ni rien faire d'autre. Tu peux essayer, c'est déjà en place. Et bien entendu rien ne t'empêche ensuite de le personnaliser pour chaque image avec le menu de filigrane qui se situe sous chaque photo, ou même sans utiliser le menu s'il s'agit simplement de déplacer le filigrane sur l'image.

[jreaux62]

Tu peux le configurer par défaut....

OUI, bien sûr.

Ce que je voulais dire, c'est :

• une "configuration INITIALE", par défaut, SANS avoir à faire quoi que ce soit.
• ET/OU 2-3 "trucs" à régler et "c'est tout"

C'est juste "ergonomique" :

RIEN A FAIRE =>

• config. par défaut
  
• 2-3 réglages = 2-3 "bricoles" à modifier

AFFINER les réglages =>

• -> "paramètres avancés"

[ABCIWEB]

OUI, bien sûr.

Ce que je voulais dire, c'est :
...

Ah oui je n'avais pas compris. C'est fait, dernière version du module de filigrane.

Donc cette fois-ci tous les paramètres de la première boite de configuration peuvent être initialisés, si aucun preset n'est défini par défaut. Dans l'exemple ci-dessus j'ai défini une fonte et un texte pour exemple. J'ai aussi ajouté un paragraphe "Paramètres par défaut" dans la rubrique "Configuration webmestre". C'est mieux comme cela, tu as bien fait d'insister, en fait j'avais oublié car trop focalisé sur les presets.

Sinon pas d'idée pour faire apparaître la roue crantée (qui symbolise le menu paramètres) sur mon portable ? J'ai mis le symbole dans le html et je ne sais pas comment essayer en css avec un after. Au pire je mettrai une image mais je me demandais s'il n'y avait pas de moyen plus moderne, d'autant plus qu'il est plus facile d'augmenter dynamiquement la taille en utilisant un caractère spécial.

Ou peut-être je devrais changer de portable... je suis encore en 3g, je le gardais car je me sert très peu d'internet et en plus j'avais choisi un modèle basique de chez basique pour tester mes sites sur du matériel d'entrée de gamme. Mais bon il a fait son temps (plus de huit ans), je peux être fier de mon empreinte carbone

[ABCIWEB]

Salut,

Bon j'ai gardé mon portable et je suis passé par un css background en base64 pour afficher cette roue crantée, c'est plus universel et pas trop pesant. Cette fois-ci cela ne devait plus bouger à moins que vous ayez d'autres remarques. module de filigrane

Cela dit j'ai du travail par ailleurs (un site à refaire), donc le module d'upload avec le code php correspondant au filigrane sera mis en ligne d'ici la fin de l'année, ou au tout début de l'année prochaine. Je posterai un message ici à cette occasion.

Merci pour vos contributions

[ABCIWEB]

Salut,

Le module de filigrane est en ligne ici avec le code Php complémentaire pour finaliser le traitement.

Le module d'upload dans son ensemble est maintenant compatible Php 8.0+, je laisserai prochainement un message dans la discussion dédiée pour plus de détails.

J'ai suivi vos conseils en mettant les outils du filigrane en haut des images, et amélioré l'ergonomie en utilisant un Css "flex" pour un accès plus facile des éléments du menu pour les portables. L'essentiel est fait, les webmestres pourront toujours modifier cette présentation suivant leurs besoins.

Ce module est également compatible avec une fonction de recadrage wysiwyg, de telle sorte que le filigrane se repositionne et se redimensionne en fonction de l'éventuel recadrage effectué.

Une démo côté client de ces deux variantes est disponible ici.