Something incredible might be happening with this initiative. I've been keeping up with it over the course of the year it's been up and slowly losing hope (50% of time elapsed and only 17% of signatures, etc.) but this week has gotten more signatures than the previous 11 months combined.
First to establish the rules: to get an official reply from the commission and possibly legislation, an initiative needs 1 million signatures within 1 year AND at least 7 different countries need to hit their threshold which is calculated based on population (idk how it's calculated but a little more than 1 in 1000 adult citizens of the country need to sign to hit its threshold). This is to ensure that not all the support for an initiative comes from one or very few countries.
Ok so here's the graph for signatures that the conversion therapy ban got over time according to the wayback machine:
The deadline is in 2 days as I write this and there's a MASSIVE last minute push! 415,223 signatures to go still but the last update to the website added about 360,000 all at once. I think it might still be possible after all.
With that newest update we now also have hit 7 different country thresholds (up from 3 before this spike). Shoutouts to France, Finland, Spain, Belgium, Ireland, Netherlands, and Slovenia!
Je sors de ma caverne et du travail sur mes contrats, pour fêter ce jour bénis avec un petit dessin vite fait !
Au moins une bonne nouvelle pour cette année 2025 -même s'il n'avait plus de poids dans la politique- c'est toujours bon à prendre !
Et en parallèle mon grand père, un des derniers survivants des déportés de Dachau, est toujours vivant et à fêté ses 99 ans en novembre 2024 ! CHEH
On continue bien sûr de se battre contre ses idées qui ont éssemées dans toute la classe politique et une partie de la population. Mais n'oublions pas de profiter de la moindre parcelle de joie militante.
They are already selling data to midjourney, and it's very likely your work is already being used to train their models because you have to OPT OUT of this, not opt in. Very scummy of them to roll this out unannounced.
Il y a deux jours je suis allez faire un tour sur prd. Ça faisait longtemps ! J'étais curieuse de voir les nouveaux forums qui s'étaient montés mais aussi voir quels anciens tiennent le choc après un an ou deux voir plus.
Savez-vous ce que j'ai eu à la fin de ma session de farfouillage ? Une migraine ! On s'en fou non me direz-vous ? Et bien non !
Ma migraine a été provoquée tout simplement par un manque d'accessibilité numérique sur les différents rpg. Je peux comprendre que de vieux forums aient du mal à changer leur charte graphique et encore pas vraiment justifiable ... Mais les nouveaux forums qui se montent ...
Je rêve d'un monde où la police ne serait pas en dessous de 15px, ou les polices de textes seraient lisibles et non justes jolies, que les textes respirent avec des interlignes corrects et que chacun vérifie que les couleurs mises en place respectent les normes d'accessibilité ! Pitié arrêtez avec votre jaune sur du rouge où on doit plisser des yeux pour lire et bannissez aussi votre blanc et noir pur !
Il y a un tas de ressources bien faites qui circulent sur le sujet, prenez la peine de les lire, pour le bien de tous ! Et quand je vois que des personnes qui sont au courant de ces ressources, font des forums sans appliquer les recommandations/conseils ça m'exaspère au plus haut point.
L'accessibilité numérique ce n'est pas seulement pour les personnes avec des difficultés, si ça fait du bien à une catégorie de personne ça fait du bien à tous !
Dans mon job je milite pour ça au quotidien et je me demande si je ne vais pas faire de mon Tumblr mon cheval de bataille pour les forums !
Il est temps que ça change. On a bien réussi à changer d'autres pratiques pour rendre les rpg plus safe et bien ça passe aussi par offrir un design agréable à sa communauté, c'est aussi prendre soin de ses membres en travaillant son accessibilité numérique !
Un long texte mais j'avais besoin de déverser sur Tumblr ... ✨
Je ne me lasse pas de rebloguer ce genre de post pour vous linker ad nauseam des solutions faciles et rapides à mettre en place sur vos forums même sans être un‧e as du codage (histoire que « y'a pas de ressources » ou « c'est difficile à faire » ne soient plus des excuses).
Le post d'@aeroplvne sur le sujet : ici (harmonie des couleurs, lisibilité des textes et polices, optimisation des images et du code, light/dark mode)
De la ressource par @noxeternam, @nsty-rp, @decrescxndo, @code-lab : ici (les designs sombres/clairs, les couleurs, la taille et le choix des polices, les contrastes, la navigation, etc)
Proposés par un‧e anon : www.whocanuse.com (tester le contraste des couleurs tout en s'assurant qu'elles soient lisibles pour les personnes daltoniennes) & www.a11ymyths.com/fr/ (déboulonne les mythes sur l'accessibilité)
Et toujours La Piscine, serveur d'entraide francophone de @1019-code, par et pour les passionné‧es de codage, débutant‧es à confirmé‧es — avec des gens plein de compétences et de patience pour aider tout le monde, peu importe le niveau.
Dès que l'on souhaite jouer un personnage plus âgé·e, le choix se réduit drastiquement en terme de faceclaims. On voit toujours passer les mêmes têtes, qui sont très souvent des hommes cis ou des personnes blanches et les ressources se font rares, en général.
À notre échelle, @angemorose et moi voudrions contribuer à lutter contre ce constat !
En créant ce directory, on aimerait offrir de la visibilité à des célébrités plus âgées que ce que l'on voit généralement et en profiter pour rassembler des ressources pour les graphistes et leur permettre de créer sur ces faceclaims.
Ce directory est en cours de construction, on réfléchit, on le met en place, on rassemble des noms, des ressources... Sont inclus pour le moment les infos sur chaque faceclaim ainsi que des liens directs vers des avatars, gifs et galeries de photos.
On espère vous le partager au plus vite, mais pour ça, on a besoin de vous !
Vous voulez nous aider ?
On a commencé le gros du travail, mais il nous manque encore beaucoup de contenu et nos deux cerveaux ne suffiront jamais à offrir un aussi large choix qu'en mettant en commun nos trouvailles !
Envoyez-nous des noms de célébrités nées avant 1980. On aimerait aussi prioriser les faceclaims racisé·es, trans, non-binaire et féminins !
Partagez-nous vos galeries, ce qui nous permettra de mettre à disposition des images pour les graphistes et créer plus de ressources sur ces faceclaims.
Que ce soit en mp, en ask ou en commentaires de ce poste, on notera consciencieusement vos contributions !
On espère que ce projet vous plaira, on a hâte de le publier pour de bon ! Et si vous avez la moindre remarque ou question, n'hésitez pas, on est dispo pour en discuter. 🔥
bientôt(-ish) sur vos écrans : la banque administrative des rpgistes, ou BAR, par la communauté pour la communauté, un service open source permettant d’alléger la charge de travail dans le cadre de construction administrative d’un forum et ainsi de se concentrer sur l’aspect créatif. parce que c’est plus possible de se tirer constamment dans les pattes et qu’on va pas réinventer la roue à chaque fois qu’on ouvre un forum, et que cette commu mérite mieux que la méfiance généralisée !
en cours:
pour le moment, j’ai créé un espace sur gdrive où je suis en train de répertorier les textes administratifs nécessaires :
- réglement
- formulaires (avatars, double-compte, points, absences)
- vos idées (drop a comment ou hit me up par mp - les suggestions seront toutes étudiées)
next steps:
- définir le processus de validation d’une contribution (sur quels critères on se base histoire de garantir une cohérence et une qualité communes à tous les textes)
- définir la gouvernance sur le long terme (qui valide, qui vérifie, comment)
- ouvrir le projet en alpha pour obtenir du feedback sur le bon fonctionnement afin d’affiner les processus pour ensuite ouvrir le BAR à tous.tes :)
stay tuned!
Aujourd'hui c'est le #17mai et la Journée Internationale de Lutte Contre Les Queerphobies #IDAHOBIT#Idaho#IDAHOT !
Cela faisait deux ans que je n'avais pas pu réaliser d'illustration pour l'occasion mais grâce au soutien de mes abonné'es sur Patreon ( https://www.patreon.com/LaurierTheFox ) c'est chose faite !
J'espère que cette illustration vous plairas et je vous souhaite une belle journée et un bon mois de luttes et des fiertés !
Hello, hi, bonjour 🥰
Je viens vers vous avec une petite idée de tag toute simple : montrez-nous votre faceclaim ‘birthday twin’ (aka: quelqu’un avec qui vous partagez votre anniversaire) 🎂 🎁
Pour trouvez vos jumeaux de naissance, vous pouvez passer par famousbirthdays, imdb ou wikipédia. Une fois postées, taggez vos créations #birthday twin fc et votre date d’anniversaire (format month+day) pour qu’on puisse voir vos merveilles.
Merci d’avance aux participants.es et bon graphing 💕 ✨
D-DAY pour What Land Remembers ! Nous sommes très fières de vous présenter enfin notre petit bébé, fruit de plusieurs longs mois de travail et qui nous tient vraiment beaucoup à coeur ! ❤️
ACCÈS AU FORUM ◇ DISCORD ◇ ZONE INVITÉS
ALORS, WLR C'EST QUOI ?
C'est un forum d'inspi medieval fantasy, mais aussi steampunk, et un mélange de tout ce que les admins aiment comme univers (lotr, wow, got, arcane...). C'est un univers complétement inventé avec des touches de plein de choses (qu'on trouve) stylées.
Ce forum se veut vraiment être un moment de bonne humeur, de rpg, de rencontres et d'histoires trop chouettes qu'on va créer ensemble. Notre vision du rpg c'est vraiment : UN HOBBY, un truc qu'on fait quand on veut, qu'on a l'inspi et surtout du partage !
Le mot d'ordre ici, c'est CHILL, on veut vraiment que chacun d'entre vous puissiez vous sentir comme chez vous, sans pression, sans sentiment d'obligation, bref juste du fun, du fun et puis du fun aussi !
Je me posais la question : pour vous un modèle de présentation de personnage parfait, c'est quoi ?
Je parle en terme de codage et aussi un peu de contenu, mais ça peut s'allier à vos convictions au sujet des fiches de présentation.
Par exemple si vous pensez que la fiche doit avoir plusieurs "façons" d'être remplie, un moyen de switcher entre ces modes.
Est-ce que vous aimeriez avoir des sortes de curseurs pour choisir entre deux traits de caractères pour définir votre personnage ? (exemple ci-dessous)
Est-ce que vous aimeriez voir d'autres choses ? Peut-être plus proche du jeu de rôles sur table ?
Est-ce que vous avez des envies en tant que joueuses et joueurs ? Une fiche plus facile à éditer ? Autre chose ?
Ca m'intéresse en vrai, hésitez pas à répondre, en DM (je mords pas !), dans les commentaires ici, de la manière qui vous plait !
J'ai jamais trop su me positionner sur la question des crédits.
Je ne produit pas pour les crédits (ce qui me donne l'impression de chercher la reconnaissance avant l'utilité et l'amusement).
Reste que j'ai fais le tour d'une vingtaine de forum il y a quelque temps et après un ou deux "oh, trop cool, ils utilisent le blank", mes réactions se sont transformées en "meh, dommage que je le découvre que maintenant" puis en "ok il manque de sérieuses informations"...
J'ai fais cette liste sans trop savoir quoi en faire. D'abord peut-être pour réaliser que le problème était important et persistant (ça, je m'en doutais déjà un peu). Puis force est de constater que après quelques jours à laisser la liste de côté, je nourrissais pas mal de sentiment mélangés.
J'ai pas envie de faire la chasse aux sorcières, c'est pourquoi ces forums ne sont pas clairement affichés. J'invite juste tout le monde à vérifier sa partie crédit (quand il y en a un) et la corriger si besoin.
Ca m'embête mais peut-être que je devrais considérer utiliser ma visibilité pour passer ce genre de message plus souvent.
On souffle mais évitons de partir en pugilat.
Pensez à soutenir vos créateurs !
Pour moi, c'est sur KoFi ❤
Les créateurices derrière le Blank Theme ont donné beaucoup de leur temps et de leur énergie pour un thème de base pratique, esthétique et lisible, la moindre des choses est de les créditer correctement svp 🙏 (et soutenez-les financièrement si vous pouvez !)
En 2020, nous vous avions proposé un questionnaire, nous avons obtenu + de 180 réponses et nous vous remercions de votre participation.
Nous espérons que ces données vous ont aidé ou ont pu aider les admins ou roleplayers. Depuis deux ans, certaines choses ont changé tandis que d’autres, non.
Nous lançons à présent un nouveau questionnaire.
Comme la fois précédente, les réponses sont consultables par tout le monde. Il y a des questions similaires : c’est voir aussi l’évolution des réponses ! (on a le droit de changer d’avis)
Les questions - les réponses - les réponses sous forme de graphique
Vous souhaitez présenter votre monde à vos membres ? Ou l'intérieur de la ville où se passe l'intrigue de votre forum ? Voici le libre-service qu'il vous faut !
Introduction
C'est le premier libre-service que je crée ! ✌
Je précise que j'ai pas forcément toujours fait attention à comment je codais, surtout côté JavaScript. Y a quelques couacs (par exemple moi qui demande un "id" dans le JSON alors qu'il y a déjà une clé unique), j'ai souvent codé tard dans la nuit, je me suis pris la tête avec trois librairies différentes et je suis même pas satisfait de celle que j'ai utilisé là maintenant, mais bon tant pis.
Si jamais vous remarquez des problèmes d'optimisation ou autre, faites-moi signe (plutôt sur Discord, je passe rarement sur tumblr).
Installation
Cette documentation est rédigée pour un projet hébergé sur ForumActif. Vous aurez besoin d'un compte administrateur.
Ce libre-service s'installe en deux parties :
Une page HTML,
Un code JavaScript.
Vous trouverez ces sections dans "Modules", sur le panneau d'administration de votre forum.
Modules > HTML & JAVASCRIPT > Gestion des pages HTML
Modules > HTML & JAVASCRIPT > Gestion des codes JavaScript
Installation du code JavaScript
Nous allons tout d'abord installer le code Javascript. Nous n'allons pour l'instant pas y toucher, ni le commenter plus qu'il ne l'est. Nous y reviendrons plus tard : c'est juste pour nous assurer que notre page HTML fonctionnera correctement.
Copiez le code JavaScript disponible ci-dessous dans un nouveau code JavaScript.
Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.
Pour se faire :
Allez dans "Gestion des codes JavaScript",
Activez la gestion des codes JavaScript si ça n'a pas déjà été fait,
Appuyez sur le bouton "Créer un nouveau JavaScript".
Vous allez vous retrouver face à un éditeur de code. En guise de titre, vous pouvez écrire par exemple "Données de la carte interactive". Quant au "placement", décochez toutes les cases. Ce ne sera pas nécessaire de le placer où que ce soit.
Vous devriez obtenir ce que vous présente la capture d'écran suivante :
Vous allez vous retrouver à présent face à la liste de vos codes JavaScript. C'est la section "URL" de ce nouveau script qui nous intéresse, mais nous y reviendrons plus tard.
Installation de la page HTML
Nous allons maintenant installer la page HTML. Elle contiendra votre carte, carte dont vous devez tout d'abord avoir une image, si possible en haute qualité (dont la largeur et la hauteur sont assez larges, ne prenez pas des images de 1000px sur 600px).
Si vous n'avez pas de carte sous la main, prenez le temps de regarder du côté de ces différents sites ou générateurs :
Inkarnate, qui vous permet de créer vos propres cartes,
Azgaar's Fantasy Map Generator, qui génère une carte aléatoire,
Cartes de Callum Ogden, cartes de pays et continents en libre-service dans un style fantasy.
Dans l'exemple ici, j'utilise une carte générée par Azgaar's Fantasy Map.
Une fois la carte en votre possession, hébergez-la sur un hébergeur d'images fiable et rapide. À titre personnel, j'utilise imgur.
Maintenant que vous avez toutes les données nécessaires pour construire votre carte, passons au code ! Copiez le code disponible ci-dessous dans une nouvelle page HTML.
Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.
Pour se faire :
Allez dans "Gestion des pages HTML",
Appuyez sur le bouton "Création en mode avancé (HTML)".
Vous allez vous retrouver face à un éditeur de code. Vous donnez le titre de votre choix. Si vous n'avez pas d'idée, vous pouvez tout simplement l'appeler "Carte interactive".
Vous devez cocher "Non" à la question "Voulez-vous utiliser le haut et le bas de page de votre forum ?". Quant à la question "Utiliser cette page en tant que page d'accueil ?", c'est à vous de voir mais je vous le déconseille puisque ce n'est pas dans l'habitude des utilisatrices et utilisateurs que d'être accueillis par une carte.
Dans l'éditeur de code, collez le code que vous avez précédemment copié. La carte devrait devrait bientôt fonctionner mais nous avons besoin pour cela de modifier quelques informations.
Modifications des données
Aux lignes 11 et 12, vous allez retrouver du CSS et plus spécifiquement cette partie-là :
--widthMap: 2560px; /* Largeur de la carte */
--heightMap: 1316px; /* Hauteur de la carte */
Changez la valeur de --widthMap par la largeur, en pixels, de l'image de votre carte. Faites de même pour la valeur de --heightMap, mais avec la hauteur en pixels de l'image de votre carte.
Ici donc, il suffit de changer "2560" par la largeur de votre image et "1316" par la hauteur.
Une fois ceci fait, rendez-vous aux lignes 372 et 374. Vous allez arriver dans du JavaScript. Si vous n'y connaissez rien, pas de panique : vous n'avez normalement pas besoin d'y toucher. Vous allez être nez-à-nez avec cette partie de code :
// Ici, vous devrez ajouter le lien URL vers votre JSON. Attention, l'URL change à chaque modification du JSON.
let url = "https://1019-code.forumactif.com/10227.js";
// Ici, vous devrez ajouter le lien URL qui mène à la carte que vous souhaitez afficher
let imageUrl = "https://i.imgur.com/D5DNjGk.png";
Comme vous pouvez le lire dans les commentaires, il vous suffit de changer les liens par ceux du code JavaScript et de votre image.
Modifier l'URL du code JavaScript
La première valeur à modifier est celle-ci : "https://1019-code.forumactif.com/10227.js".
Souvenez-vous : lorsque vous avez installé votre code JavaScript, je vous ai signalé que la section "URL" était ce qui nous intéressait. Copiez l'URL et remplacez le lien déjà présent dans le code, sans enlever les guillemets.
Modifier le lien vers la carte
La seconde valeur à modifier est celle-ci : "https://i.imgur.com/D5DNjGk.png".
C'est le lien vers l'image de votre carte. Il vous suffit de copier le lien qui mène donc vers l'image de votre carte. Remplacez la valeur, le tout sans enlever les guillemets.
Appuyez sur "Valider".
Voilà ! Votre carte est installée et devrait être fonctionnelle ! Cependant, les informations qui sont dedans ne sont pas celles que vous souhaitez voir affichées. Nous allons régler ça immédiatement.
Le code JavaScript : qu'est-ce qu'un fichier JSON ?
Avant de plonger dans le vif du sujet, je dois vous expliquer que le code JavaScript que vous avez copié est ce qu'on appelle un fichier "JSON".
Un fichier JSON, c'est un fichier qui contient des données, fichier qui doit suivre quelques règles pour pouvoir être lu correctement par le code. C'est en quelque sorte une base de données dans notre cas.
Toute série de données qu'on souhaite ajouter au JSON va s'appeler un "objet" ("item" en anglais). Il a toujours ce qu'on appelle une "clé" ("key" en anglais). Dans notre cas, ce seront des chiffres qui augmenteront à chaque objet mais ça pourrait techniquement être n'importe quoi. Je vous recommande malgré tout de rester sur les chiffres pour l'instant.
Les fichiers JSON, comme vous le voyez ci-dessus, sont relativement lisibles pour nous les humains : on a des objets, qui ont des clés différentes à chaque fois, qui s'incrémentent. Dans ces objets, on retrouve plusieurs propriétés et valeurs. Dans cet exemple, on a un ID, un nom, un âge, un métier,...
Le principe, c'est que la propriété ("id", "name", "age", "work",...) et la valeur ("joshua", "Joshua", "25", "Développeur web",...) soient tous les deux entourés de guillemets, tout comme la clé.
Vous pourriez mettre n'importe quel nom de propriété si vous le souhaitez, en créer de nouvelles, etc.
À partir de là, il n'est pas bien difficile de comprendre ce que signifie le code JavaScript que vous avez copié / collé :
Ce sont donc les données de votre carte !
Mais une petite description des différentes propriétés déjà installées dans le script que vous avez copié / collé s'impose, pour que vous puissiez savoir quoi mettre où.
ID
La propriété "id", dans ce JSON-ci, sert à rajouter un ID personnalisé à la boîte de dialogue qui s'ouvre au clic sur un marqueur. Il est nécessaire puisqu'il permet de lier un marqueur à une boîte de dialogue en particulier. Attention : ne rajoutez pas de caractère spécial, ni d'espace dans la valeur de ce champ. Seuls les caractères - et _ sont autorisés.
Title
La propriété "title" permet d'afficher un titre dans la boîte de dialogue. Il est aussi utilisé pour le bloc qui s'affiche au passage de la souris sur les marqueurs.
Class
La propriété "class" permet d'ajouter une class à votre marqueur. Par exemple, vous pourriez avoir envie d'afficher une couleur de marqueur différente selon si c'est une ville, un village ou un point d'intérêt. Dans ce cas, la class vous sera d'une grande aide, afin de modifier en CSS vos marqueurs.
Img
La propriété "img" sert à afficher une image dans la boîte de dialogue qui s'ouvre au clic sur un marqueur.
Description
La propriété "description" c'est tout le texte qui s'affiche dans votre boîte de dialogue. Vous pouvez rajouter du HTML dedans, mais attention à bien échapper les guillemets ! Car en effet, si vous rajoutez des double-guillemets comme ceux qui entourent le code, le code ne fonctionnera plus (par exemple si vous voulez ajouter un lien, vous allez devoir faire : <a href="#">, donc avec des double guillemets). Pour échapper un caractère, il suffit de mettre avant ce-dit caractère un "anti-slash" :
La propriété "link" permet d'ajouter un lien, qui ici a été placé sous le titre mais pourrait être utilisé ailleurs si vous bidouillez un peu. Vous mettez le lien de votre choix bien sûr.
X
La propriété "x" indique la coordonnée "X" de votre marqueur. Pour connaître cette valeur "x", votre carte, que vous pouvez d'ores et déjà visualiser, a en haut à droite un petit bloc d'informations où est marqué "X" et "Y". Si vous cliquez sur votre carte à l'endroit où vous souhaitez placer votre marqueur, vous obtiendrez les coordonnées "X" et "Y". Il vous suffit de les copier / coller.
Y
La propriété "y" indique la coordonnée "Y" de votre marqueur. Pour connaître cette valeur "x", votre carte, que vous pouvez d'ores et déjà visualiser, a en haut à droite un petit bloc d'informations où est marqué "X" et "Y". Si vous cliquez sur votre carte à l'endroit où vous souhaitez placer votre marqueur, vous obtiendrez les coordonnées "X" et "Y". Il vous suffit de les copier / coller.
Installer des marqueurs personnalisés
Bon ! Maintenant que vous savez tout sur le JSON, vous êtes prêt·e·s pour installer vos propres marqueurs.
Pour se faire, vous allez devoir modifier le JSON que vous avez copié / collé.
Attention : les codes JavaScript sur Forumactif changent d'URL à chaque modification. Il va donc falloir changer l'URL dans la page HTML à chaque fois que vous modifiez le JSON. Pour cela, revenez à l'étape "Modifier l'URL du code JavaScript".
D'ailleurs si ce comportement vous emmerde, j'ai fait un sondage sur le forum des forums pour que les URL puissent devenir fixes sous certaines conditions...
Pour modifier le JSON, il vous suffit de modifier simplement les valeurs des différentes propriétés que vous avez.
On rappelle que dans l'exemple de l'objet 0 :
"id" : "ammit",
"id" est une propriété, "ammit" est sa valeur. Les deux doivent toujours être entourés de guillemets, mais ça vous le savez déjà.
Pour les modifier, c'est simple : la section juste au-dessus vous donne déjà toutes les infos pour le faire correctement et vous explique champ par champ ce à quoi chaque chose correspond. Attention à ne modifier que les valeurs et non pas les propriétés.
Rajouter un objet
Ok, c'est super, vous avez trois objets. Mais comment rajouter de nouveaux objets, donc de nouveaux marqueurs ?
Pour cela, après un objet, rajoutez une virgule, un chiffre entre guillemets (en lui rajoutant +1 par rapport au précédent par exemple), deux points ( : ) et des accolades ouvrantes et fermantes.
// ...
},"3" : {
// ...
}
Bravo ! Vous avez créé votre premier objet !
Maintenant, pour le remplir, je vous propose de simplement copier / coller l'intérieur du précédent objet et de modifier ses valeurs, comme vous l'avez fait au début.
Validez et enregistrez votre code JavaScript, copiez / collez l'URL et revenez à votre page HTML. Cliquez sur "Modification en mode avancé (HTML)" (l'icône contenant plusieurs roues crantées) et rendez-vous à la ligne 368 (si vous n'avez rien modifié) qui contient cette partie de code :
let url = "(votre forum)/10819.js";
(je précise que l'URL a déjà été modifiée par votre part et contient un autre lien)
Remplacez le lien par l'URL que vous avez copiée et validez. C'est bon ! Votre carte a été mise à jour et vous avez normalement un nouveau marqueur.
Supprimer un objet
Si vous souhaitez supprimer un de vos objets / marqueurs, rien de plus simple : vous devez simplement sélectionner l'objet et sa clé qui ne vous intéressent plus et le supprimer entièrement.
Attention : il est nécessaire de supprimer l'une des virgules. Ne laissez jamais deux virgules entre deux objets ou une virgule en fin de fichier JSON. Cela risquerait de faire bugguer votre fichier.
Ne faites d'ailleurs pas attention si vous passez d'une clé "0" à une clé "2" pour l'objet suivant. Ce n'est pas important. Votre fichier sera tout de même lu correctement.
Validez et enregistrez votre code JavaScript, copiez / collez l'URL et revenez à votre page HTML. Cliquez sur "Modification en mode avancé (HTML)" (l'icône contenant plusieurs roues crantées) et rendez-vous à la ligne 368 (si vous n'avez rien modifié) qui contient cette partie de code :
let url = "(votre forum)/10819.js";
(je précise que l'URL a déjà été modifiée par votre part et contient un autre lien)
Remplacez le lien par l'URL que vous avez copiée et validez. C'est bon ! Votre carte a été mise à jour et vous avez normalement supprimé un marqueur.
Rajouter des propriétés
Si les propriétés déjà présentes ne sont pas en assez grand nombre pour les informations que vous souhaitez afficher, vous pouvez créer de nouvelles propriétés !
Pour se faire, il vous suffit de rajouter une virgule après la dernière propriété de votre objet, de donner un nom à votre nouvelle propriété entre guillemets (sans espace ni caractère spécial !), rajouter deux points ( : ) et mettre votre valeur entre guillemets.
Si vous rajoutez une propriété à un objet, n'oubliez pas de le faire pour tous les autres objets, sinon vous allez vous retrouver avec des "undefined" qui vont s'afficher partout sur votre carte, quitte à mettre des valeurs vides ( "" ) si vous ne souhaitez rien mettre dedans pour certains de vos objets.
Validez et enregistrez votre code JavaScript, copiez / collez l'URL et revenez à votre page HTML. Cliquez sur "Modification en mode avancé (HTML)" (l'icône contenant plusieurs roues crantées) et rendez-vous à la ligne 368 (si vous n'avez rien modifié) qui contient cette partie de code :
let url = "(votre forum)/10819.js";
(je précise que l'URL a déjà été modifiée par votre part et contient un autre lien)
Remplacez le lien par l'URL que vous avez copiée et validez. C'est bon ! Votre carte a été mise à jour, mais votre nouvelle propriété ne s'affiche nulle part pour l'instant. C'est normal ! Nous allons voir ça ensemble dans "Personnaliser la carte et les données affichées".
Supprimer des propriétés
Attention : je recommande de ne pas toucher aux propriétés de base du fichier JSON si vous n'avez pas les bases en HTML. Ne supprimez pas la propriété "id". Elle est nécessaire pour le fonctionnement du script.
Si certaines des propriétés ne vous plaisent pas ou ne correspondent pas à ce que vous souhaitez, rassurez-vous : il est possible de les supprimer.
Pour se faire, sélectionnez la propriété, sa valeur, la virgule au bout de la ligne et... supprimez !
Validez et enregistrez votre code JavaScript, copiez / collez l'URL et revenez à votre page HTML. Cliquez sur "Modification en mode avancé (HTML)" (l'icône contenant plusieurs roues crantées) et rendez-vous à la ligne 368 (si vous n'avez rien modifié) qui contient cette partie de code :
let url = "(votre forum)/10819.js";
(je précise que l'URL a déjà été modifiée par votre part et contient un autre lien)
Remplacez le lien par l'URL que vous avez copiée et validez. C'est bon ! Votre carte a été mise à jour, mais si vous avez supprimé une propriété de base ou une propriété que vous avez déjà faite afficher, vous allez voir apparaître des "undefined" à l'endroit où se trouvait sa valeur. C'est normal ! Nous allons voir ça ensemble dans "Personnaliser la carte et les données affichées".
Personnaliser la carte et les données affichées
Bien ! Maintenant que votre JSON a vos propres données, nous allons pouvoir jouer avec l'affichage de la carte et la personnaliser.
Personnaliser les valeurs qui s'affichent
Vous avez peut-être rajouté des propriétés ? Ou alors vous en avez supprimé et vous aimeriez que les "undefined" qui sont apparus disparaissent ? Vous êtes dans la bonne section !
Rendez-vous à la ligne 452 (si vous n'avez pas modifié le code), où vous trouverez une variable JavaScript appelée "content" :
Vous trouvez entre deux caractères "accents graves" ( ` ) toute une partie composée de HTML et de variables JavaScript sous cette forme :
${json.nomPropriete}
Ne touchez pas aux aux accents graves.
Mais comme vous l'aurez compris, ces variables JavaScript sont des variables qui vont aller chercher des informations sur votre JSON.
Donc si jamais vous avez supprimé une propriété, il vous faut aussi supprimer les variables qui portent son nom dans cette page HTML.
Si, au contraire, vous souhaitez en ajouter, il vous suffit de les rajouter où cela vous semble bon, sous la forme citée plus haut.
Exemple : vous avez rajouté une propriété nommée "citoyens". Vous souhaitez l'afficher en-dessous de la description. Retrouvez la variable ${json.description} et rajoutez ci-dessous, avec le HTML que vous désirez :
${json.citoyens}
Personnaliser l'apparence de la carte
Je ne compte pas, dans cette section, vous expliquer en détails comment personnaliser le CSS ou le HTML de votre carte. Ces deux langages étant largement utilisés sur ForumActif, je considère que vous avez plus de possibilités d'avoir quelqu'un dans votre entourage qui s'y connaît assez pour produire une carte personnalisée. N'hésitez pas à jeter un coup d'oeil aux tutoriels sur comment utiliser du CSS ou HTML si vous le souhaitez !
Le CSS
Par contre j'ai inclus quelques variables CSS pour modifier facilement les couleurs de la carte ! Et c'est ce dont je vais vous parler maintenant.
De la ligne 10 à 36 vous allez trouver :root et ses variables CSS.
(je n'ai pas réussi à partager cet extrait de code autrement qu'en capture d'écran, Tumblr a du mal avec ce copié / collé, désolé !)
Comme vous le voyez sur la capture d'écran ci-dessus, vous avez un tas de variables qui ont chacune une description en commentaire. J'ai gardé des couleurs relativement simples (blanc et noir principalement) pour que ce soit le plus neutre possible. N'hésitez pas à les personnaliser !
Le HTML
Vous remarquerez que dans le HTML, il n'y a pas grand chose, comme le montre la capture d'écran ci-dessous :
C'est normal : les marqueurs et les boîtes de dialogue se trouvent en réalité dans le script en-dessous.
Pour personnaliser ces éléments, je vous invite à rejoindre la ligne 452 (si vous n'avez pas modifié le code), où vous trouverez une variable JavaScript appelée "content" :
let content = `(...)`
Vous trouvez entre deux caractères "accents graves" ( ` ) toute une partie composée de HTML et de variables JavaScript sous cette forme :
${json.nomPropriete}
Ne touchez pas aux variables ni aux accents graves, mais si vous voulez rajouter des class ou bouger des div, c'est le bon endroit pour le faire !
N'hésitez pas à modifier le texte du lien également, si "lien vers le lieu" ne vous convient pas.
Quelques informations supplémentaires :
<button> correspond au marqueur. Le <span> à l'intérieur, au bloc qui s'affiche au passage de la souris sur le marqueur.
<dialog> correspond à la boîte de dialogue qui s'ouvre au clic sur le marqueur.
Responsive
Normalement, la carte devrait être lisible sur téléphone. Je ne dis pas cependant qu'elle sera jolie. Elle sera surtout lisible.
Avancer plus loin pour les plus expérimenté·e·s
J'ai utilisé la librairie panzoom de timmywill. Vous y trouverez la documentation nécessaire pour rajouter les options que vous souhaitez.
Si vous souhaitez réaliser de nouvelles fonctionnalités sur base de cette carte, vous avez quartier libre. N'hésitez pas à les partager sur Tumblr ou ailleurs, en libre-service ou pas ! C'est toujours sympa de découvrir ce que vous faites !
Vous avez le droit d'utiliser ce libre-service dans vos commandes payantes. Vous pouvez aussi créer des "skins" / "thèmes" pour cette carte, qu'ils soient gratuits ou payants.
Vous pouvez modifier l'URL qui mène vers le JSON par un autre lien externe (par exemple, vous pouvez l'héberger sur github). Ca vous évitera de devoir changer l'URL dès que vous modifiez le JSON, mais malheureusement vous serez la ou le seul·e à pouvoir le maintenir, si le reste de votre staff ne maîtrise pas git.
Si vous préférez un JSON de base sans commentaire, le voici :
Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.
Crédits
Je vous demanderai de ne pas effacer le crédit qu'il y a sur la carte : vivant en partie de mes commandes pour Forumactif, j'ai besoin d'être visible dans la communauté. Je vous remercie !
dailybridgerton
germansingergirl
blakekathryn
tangentwithtanner
