1019-code - Tumblr blog

[1019-code]

Lien du Discord "La Piscine"

Salut !

Croyez-le ou non, j'ai oublié de fournir le lien d'invitation vers le serveur Discord d'entraide codage / design sur Forumactif "La Piscine".

Du coup le voilà :

https://discord.com/invite/Dwc8eG4UKp

[1019-code]

Ouverture (officielle) de La Piscine

Bonjour tout le monde 👋

Ici @1019-code, je viens vous annoncer l'ouverture (officielle) de La Piscine, un discord de commandes et d'entraide pour forums Forumactif dans les domaines du codage et du graphisme.

Vous pourrez :

trouver des épreuves, "challenges", pour tester votre créativité ou faire fleurir l'inspiration (et accessoirement peut-être réussir à booster le libre-service),

rejoindre des équipes pour gagner des POINTS qui ne servent à RIEN !!!

si vous êtes prestataire, discuter entre nous dans le but de se mettre d'accord sur nos pratiques ou trouver de l'aide dans le monde merveilleux du freelance,

trouver un répertoire de prestataires pour réaliser des commandes payantes en code ou en design,

partager votre plateforme, tumblr, forum, etc pour présenter votre travail,

partager du libre-service que ce soit en code ou en design,

nous faire part de vos meilleures ressources (et en trouver !) que ce soit en code ou en design,

vous entraider et réussir à traquer les bugs ou à comprendre comment on fait des incrustations trop classes sur des bannières,

présenter votre travail en cours et recevoir tous les compliments du monde pour faire un peu de bien à votre ego,

recevoir des feedbacks si vous le souhaitez, que ce soit sur un design, une création ou un code,

demander de l'aide pour trouver l'inspiration, finie la page blanche,

présenter vos objectifs de la journée, du mois, de l'année, au choix,

partager vos coups de coeur en terme de codage ou de design, que ces derniers soient des forums où d'autres sites qui n'ont absolument rien à voir,

partager vos meilleurs memes sur le burn-out,

et tout simplement discuter de codage et graphisme !

Et en plus on a déjà 280 membres !

J'ai récemment terminé la configuration du serveur (après 2 ans, oups...), de fait j'en fais maintenant la publicité !

Le but de La Piscine

Avec La Piscine, j'espère composer une vraie communauté d'entraide autour de Forumactif, mais aussi une plateforme de partage de ressources, de tutoriels, et aussi d'idées "irréalisables".

On a quelques scripts inédits et totalement révolutionnaires qui sont uniquement présents là-bas, faute de temps de leurs créat·eur·rice·s (oups, je parle peut-être que des miens). On a par exemple le processus complet de @code-lab concernant la génération de fiches de présentation, mais on a aussi des tentatives de bases de données de membres pour permettre des bottins automatiques mais aussi des listes de membres avancées, style masterlist, entre autre choses.

Ce que j'aimerais également, c'est que ça booste la création de libre-service. Que ce soit en design ou en code, qu'on propose + de contenu libre. Donc si vous créez régulièrement du libre-service (maquettes ou code), n'hésitez pas à nous rejoindre pour remplir les placards de vos créations !

Vous êtes débutant·e ?

Pas de panique : La Piscine est ouverte à TOUS les niveaux ! On est là pour vous aider, même si c'est pour quelque chose d'ultra simple mais que vous ne maîtrisez pas. Et vous n'êtes vraiment pas seul·e !

Vous êtes professionnel·le ?

On est plusieurs à l'être ! et parfois on parle de nos projets en-dehors de Forumactif. Donc si vous avez besoin d'aide sur des choses plus avancées, y a peut-être moyen que vous trouviez quelqu'un pour vous aider là-bas !

[1019-code]

Générateur de fiche

Hey ! Sous l'impulsion de @Tamaraa, on travaille sur un générateur de fiche de présentation qu'on pourrait intégrer au Blank Theme.

C'est un code qui existe déjà sous plusieurs version mais là on s'est dit que ça serait mieux qu'il soit plus complet que juste générer un code à c/c dans son post.

L'idée ça serait d'avoir un formulaire qui s'affichage à la création de sa fiche (comme à la création normal d'un post) et chaque information serait remplie dans un champs texte normal puis sauvegardé. En éditant le post de la fiche, le formulaire sera remplie des informations sauvegardés. En gros, on remplirait sa fiche comme on remplit ses informations de profil de compte !

On travail dessus à plusieurs et vous pouvez nous rejoindre sur le discord de La Piscine pour participer ! Et le début de code se trouve sur ce post pour tout ceux qui souhaiterait tester en cours de route et donner des retours.

En espérant que ça aboutisse à quelque chose de cool 👋

[1019-code]

Générateur de fiche

Hey ! Sous l'impulsion de @Tamaraa, on travaille sur un générateur de fiche de présentation qu'on pourrait intégrer au Blank Theme.

C'est un code qui existe déjà sous plusieurs version mais là on s'est dit que ça serait mieux qu'il soit plus complet que juste générer un code à c/c dans son post.

L'idée ça serait d'avoir un formulaire qui s'affichage à la création de sa fiche (comme à la création normal d'un post) et chaque information serait remplie dans un champs texte normal puis sauvegardé. En éditant le post de la fiche, le formulaire sera remplie des informations sauvegardés. En gros, on remplirait sa fiche comme on remplit ses informations de profil de compte !

On travail dessus à plusieurs et vous pouvez nous rejoindre sur le discord de La Piscine pour participer ! Et le début de code se trouve sur ce post pour tout ceux qui souhaiterait tester en cours de route et donner des retours.

En espérant que ça aboutisse à quelque chose de cool 👋

[1019-code]

Je fais suite à mon message original et notamment à cette réponse (et j'arrive même à taguer la personne 😩). Je précise que j'ai un ton de discussion, même si mes formulations peuvent être ressenties comme accusatrices 🙏

Ce n'est pas le droit à la critique que je remet en question, mais le moyen.

Pourquoi ne pas formuler les critiques directement aux personnes visées ?

Pourquoi exprimer son mécontentement sur une plateforme sur laquelle les concernés ne sont peut-être pas (et par extension, n'ont pas le droit de réponse)

Pourquoi ne pas accompagner les critiques avec des ressources dont on a déjà connaissance ?

Pourquoi assumer que tout les cas rencontrés sont issus de la mauvaise foi des concernés ?

Et pourquoi faire d'un cas prouvé de mauvaise foi une généralité ?

Pourquoi assumer que tout le monde à accès/connaissance à toutes les ressources ?

Si mon message semble accusateur, comment se sentent les personnes qui se reconnaissent dans les critiques formulées avec une claire intention d'exprimer de l'indignation et du ras-le-bol ?

La façon dont on s'exprime provoque un cercle vicieux dans lequel ceux qui sont d'accord surenchérissent et ceux qui ne le sont pas entrent directement en conflit et/ou se braquent.

Plus d'apprentissage, plus d'échange.

On est une communauté qui doit se nourrir sur les bonnes intentions des un et des autres (tu rp -> je réponds, tu créés -> je partage). Manquer de temps et de connaissance peut être comblé par l'ouverture de discussion dans lequel on peut proposer des initiatives.

On est en train de perdre de l'activité (c'est un fait et c'est normal), mais si on ne veut ralentir cette pente descendante, on doit se rappeler qu'on doit s'investir. Il faut continuer à répéter et répéter, transmettre d'une plateforme à l'autre, le tout dans l'espoir que certaine notion devienne des normes.

[1019-code]

Nouveaux tutoriels !

Des nouveaux tutoriels sont disponibles sur le Blank Theme.

Ajouter le module des derniers sujets

Modifier le texte par défaut de Forumactif

Personnaliser une catégorie ou un sujet selon son état ou son type

Pour rappel, cette section est communautaire, ouverte à tous·tes.

N'hésitez pas à partager vos trucs et astuces ainsi que vos connaissances au reste de la communauté. Pas besoin d'être expérimenté ou de réinventer la roue. Si vous avez des petits bouts de code que vous trainer de forum en forum que vous trouvez utile, partagez-les !

Le Blank Theme est le principale travail d'une seule paire de main mais je travaille depuis le début à ce que ça ne soit pas le cas. Toutes participations sera la bienvenue 🙏

[1019-code]

Salut !

Si tu es admin/designer/codeur-euse de ton propre forum, et que tu aimerais un retour sur l'accessibilité de ton forum (est ce que les textes sont lisibles, est ce que la navigation est intuitive, etc.), tu peux m'envoyer le lien vers ton forum en privé ou sur Discord.

Je te renverrai des améliorations rapides que tu pourrais opérer pour rendre ton forum plus accessible.

Sans engagement de ta part ou jugement de la mienne, mais juste dans une intention d'améliorer l'accessibilité web dans les rpg francophones !

[1019-code]

Reprise du Blank Theme

Hey ! Je sors doucement de ma torpeur, fatiguée mais diplômée ✅

Donc je peux reprendre mon activité sur le Blank Theme et répondre à vos messages.

Vous êtes encore beaucoup à l'utiliser malgré tout et ça me fait super plaisir ! Si j'ai pu vous épargner quelque mal de tête avec Forumactif, n'hésitez pas à m'offrir un petit Kofi ☕

Retours et améliorations

Durant mon temps off (pas si off), j'ai réfléchis aux futurs améliorations que je pourrai apporter au Blank mais il me semble d'avoir relativement fait le tour de ce que je pouvais offrir au regard du temps libre que je peux lui accorder. 🤔

Si vous avez des idées, des suggestions et autre retour d'expérience à me faire, je suis preneuse !

Après avoir autant travaillé seule, j'aimerais bien rendre l'expérience un peu plus participative. Sans quoi, j'ai peur que ma motivation ne revienne pas comme je l'aurai voulu, donc n'hésitez pas. ✨

[1019-code]

Codevembre sur le discord de La Piscine

Hello !

Bon j'en ai jamais parlé parce que j'ai malheureusement pas terminé la configuration du Discord (ça fait un bail, help) mais j'ai un serveur Discord d'entraide et de commandes au sujet du code / du design sur forums RPG (et plus spécifiquement Forumactif).

Dessus, je vais lancer en Novembre un CODEVEMBRE ! (oui c'est une traduction toute pourrie de Codevember)

J'ai écrit une liste de sujets, "prompts" en rapport de près ou de loin avec les forums RP, que je posterai chaque jour du mois (sauf exception, étant très occupé ce mois-là)

Si jamais, vous pouvez nous rejoindre ici :

Et si vous voulez partager vos créations sur Tumblr, n'hésitez pas à utiliser les tags :

codevembre rp

codevember rp

Comme ça on vous retrouve ! et / ou taggez-moi, comme ça je partage vos créations aussi ♥

Bisous !

[1019-code]

Blank Theme Updates

Important, to all english speakers!

Hi there, I'm sorry to announce that I'm no longer supporting the english version of my theme. I don't think I've reached enough of you to continue updating my work in both languages ):

The english documentation will soon no more be available but I've kept it all so if you're really interested you can still ask me to share it!

---

Une mise à jour du Blank Theme est doucement en train d'arriver. Elle contient des améliorations dans les templates, des nouveaux scripts et des corrections. Rien de très majeur (d'ailleurs ce qui est terminé est déjà disponible) mais de quoi dépoussiérer tout ça. Je ferais un recap officielle quand je serais sûre d'avoir tout terminé !

Blank Theme Sources

Si vous vous rendez sur le Blank Theme, vous apercevrez une nouvelle section en construction qui rassemblera une multitude de ressources en libre-service. 👏

Cette section sera participative et donc ouverte à tous.

Vous pourrez proposer vos propres tutoriels, textes, etc. Pour l'instant, j'impose aucun règlement/condition pour poster car je n'arrive pas à évaluer la potentielle participation de la communauté. Donc je managerais ça un peu au cas par cas, à voir!

Plus d'information à venir 🙏

[1019-code]

Viene bien tener ciertos 'tags' que simbolicen el tipo de tema que estamos viendo. Desde tags administrativos (trama grupal, anuncio importante, censo…) hasta tags para usuarios (busqueda abierta/reservada/cerrada, tema privado/libre/+18…). En este tutorial, os enseñaré a hacerlo de manera que los admins podáis tener ciertos tags predeterminados disponibles para los usuarios, y puedan añadir sus tags si no encuentran el que les hace falta, como en las capturas que dejo a continuación:

Tutorial dedicado a @thewitchlies, siento la tardanza; cuando miré el code que estaba usando me dieron ganas de llorar e hice uno nuevo y con mejor funcionalidad que el anterior 😅

Lo primero que tendréis que hacer es decidir qué tags necesitaréis. Para el ejemplo, usaré tres:

Tema privado, usando el color azul (#3774ad) y el icono de FontAwesome times.

Tema +18, usando el color rojo (#ad3737) y el icono de FontAwesome exclamation-triangle.

Tema libre, usando el color verde (#37ad3f) y sin ningún icono.

Primero que nada, deberemos editar un par de variables. Primero, vamos a cambiar un elemento en viewtopic_body. Este es el link dentro de .page-title. Debe quedar así:

<h1 class="page-title"> <a href="{TOPIC_URL}" class="title-thread">{TOPIC_TITLE}</a> </h1>

Si tenéis este elemento editado o no usáis un título de tema sobre vuestros posts, esta parte es indiferente, pero los tags de tema no saldrán en esa sección de vuestro foro.

Otro elemento a editar se encuentra en topics_list_box. Este es el link al tema, o .topictitle por defecto. Si le habéis cambiado la clase, ponedle dicha clase para que pueda ser identificado por el JS. Debe quedar así:

<a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>

Seguimos con el siguiente: está en search_results_posts y es el link que está dentro del .h3 en la línea 10. Debemos agregarle la clase post-title. Debe quedar así:

<h2 class="h3"><a href="{searchresults.U_POST}" class="post-title">{searchresults.TOPIC_TITLE}</a></h2>

También nos hará falta, si tenemos en uso el módulo de últimos temas, añadir una clase para que los tags se muestren ahí; le pondremos la clase module-title. Esto se encuentra en el template mod_recent_topics (en la sección "Portal"). Dependiendo del tipo de módulos que uséis, deberá quedar así para el marquee:

» <a href="{scrolling_row.recent_topic_row.U_TITLE}" title="{scrolling_row.recent_topic_row.L_TITLE}" class="module-title">{scrolling_row.recent_topic_row.L_TOPIC_TITLE}</a><br />

Y así para la lista de temas estática:

» <a href="{classical_row.recent_topic_row.U_TITLE}" class="module-title">{classical_row.recent_topic_row.L_TITLE}</a><br />{BY} 

Si no quieres que salgan los tags en esta sección, simplemente añade a tu CSS (siendo CLASETAGS la clase que pondrás más abajo, en el JS, en threadTagClass): .module-title .CLASETAGS { display:none; }

Por último, para poder insertar el formulario de inserción de tags en nuestro formulario de creación de temas, vais a buscar la variable {L_SUBJECT} en vuestro posting_body (en la sección "Escribir un mensaje & Mensajes privados"), y le vamos a poner la clase threadSubject. Debe quedar así:

<dt><label class="threadSubject">{L_SUBJECT}</label></dt>

Una vez editados nuestros templates, vamos a dirigirnos a nuestro JS y vamos a crear una nueva hoja y la marcaremos en Todas las páginas. Vamos a pegar este código de pastebin (no me arriesgo a que tumblr lo rompa 😅) y vamos a editar un par de cosas:

threadTagClass: Esta variable dará nombre a cada uno de tus tags. Por defecto, es .threadtag.

threadTagElement: Esta variable definirá el elemento de cada uno de tus tags. Por defecto, es span. Puedes hacerlos div's, strong's, em's, i's… Lo que te haga falta.

undeclaredTagColor: Esta variable dará un color de acento a los tags no definidos por la administración.

lastPostLink: Esta variable sirve para localizar el link del último tema en los listados de foros. Por defecto es .forums .row .lastpost>span>a:first-child. Si habéis modificado vuestro index_box, tendréis que renombrar esta variable por la adecuada en vuestro HTML.

Ahora, lo grueso del JS está en la parte de arriba, en la variable threadTags. Esta variable es un array, contenida entre corchetes ([]) y en su interior hay objetos, separados entre sí por comas y rodeados por llaves ({}). Cada uno de esos objetos es un tag.

var threadTags = [ { filter: 'privado', color: '#3774ad', icon: '' }, { filter: '+18', color: '#ad3737', icon: '' }, { filter: 'libre', color: '#37ad3f', icon:'' } ];

Cada uno de nuestros tags tiene tres variables: filter, color e icon, y están separadas por comas.

filter: Es la variable que el código buscará para identificar nuestro tag. Es obligatorio incluirla y debe estar en minúsculas.

color: Es la variable que se asignará como la variable CSS --accent para el uso en el diseño. Puede ser hexadecimal, rgb/a, hsl… A preferencia. Es obligatorio incluirla.

icon: Es la variable que insertará un icono antes del título del tag, en forma de HTML como se ve en el ejemplo. No es obligatorio incluirla; si no te hace falta, déjala como la que puedes ver en el tag 'libre'.

Una vez tengas eso dispuesto, simplemente presiona guardar y ¡listo! Tus tags ya están visibles en tu foro y pueden empezar a ser usados. ¿Cómo se usan? Tienes dos opciones:

Automáticos en tu formulario de publicación de tema: Podrás ver que tras la instalación de los tags, cuando vas a publicar o editar un tema ya publicado (el primer mensaje del mismo), aparece el formulario que hemos mencionado anteriormente sobre nuestro Título de tema. Simplemente selecciona los tags necesarios, pulsa el botón 'Modificar título de tema' y los tags se agregarán como texto al principio del mismo.

Manuales: Puedes escribir los tags manualmente, ya sean los predefinidos o tags no declarados. Simplemente pon tu texto entre corchetes {tal que así} antes del título de tu tema, para que quede {tal que así} Tu título de tema. Podrás ver aparecer un tag con el texto {tal que así} al lado del título. Recomendaría instruir a tus usuarios de esta funcionalidad en las normas del foro. Aunque, por supuesto, siempre puedes dejar que tus usuarios sugieran tags y añadirlos de manera permanente a la lista de tags predefinidos.

Os dejo también un CSS base por si no queréis comeros mucho la cabeza editando los tags:

/*Tags*/

.threadtag { background: rgba(255,255,255,0.5); border: 1px solid rgba(0,0,0,0.1); padding: 5px 10px; display: inline-block; margin-right: 5px; border-radius: 5px; font-size: 10px; font-weight:700; text-transform: uppercase; color: var(--accent); }

.threadtag em { color: #000; margin-right: 3px; }

Y con eso y un bizcocho ya tenéis vuestros tags. Podéis añadir nuevos simplemente añadiendo un nuevo objeto al array del javascript; acordaos de rodear cada uno con llaves ({}), separar los grupos de llaves ({}) con una coma (,), y que todo esté dentro de los corchetes ([]).

Como puede pasar con estos códigos un poco tochos, pueden haber bugs que no haya cazado yo. Si encuentras alguno, notifícame para que pueda actualizar el código en el pastebin.

Si os ha servido este tutorial u os ha parecido útil, dadle un reblog para que llegue a más gente 💕

[1019-code]

Au sujet des Intelligences Artificielles (IA)

Hello,

Je voulais faire un petit post à ce sujet : je vois quelques personnes parler du fait que les IA ne produisent pas un travail de qualité et que de ce fait on ne devrait pas les utiliser. Je voulais revenir sur ça.

Les IA de nos jours sont "nouvelles" et s'améliorent extrêmement vite en raison de leur ouverture au grand public (vous les nourrissez avec des images, du texte, etc). MidJourney au tout début avait impressionné beaucoup de monde malgré la piètre qualité de ses images.

Aujourd'hui, il est parfois impossible pour l'oeil non-averti de savoir qu'une image a été générée par une IA (Par exemple : The Phantom Painter, dont les générations n'ont pas les usuels défauts (doigts en trop, etc)).

Le début de MidJourney, c'était il y a moins d'un an (Juillet 2022).

ChatGPT, c'est pareil : c'est une IA encore toute neuve qui ne va pas cesser d'être alimentée ces prochaines années, que ce soit par des entreprises qui vont utiliser ses services pour le service client ou par des employeurs qui remplacent leurs auteurices.

Là où je veux en venir c'est que : les IA vont devenir aussi bonnes que les plus doués d'entre nous. Un jour, les IA écriront probablement de meilleures histoires, de meilleurs règlements, de meilleures dissertations que nous.

J'aimerais mettre en garde contre l'argument "de toutes façons le travail produit est de mauvaise qualité". C'est vrai aujourd'hui, mais pas pour longtemps.

Pourquoi boycotter les IA ?

La réponse se trouve en vérité dans leur conception. Les IA sont un bijou de technologie qui très probablement permettra par la suite de nombreuses avancées technologiques. Mais la manière dont elles ont été conçues n'est pas éthique.

Pour MidJourney, il faut savoir que l'IA s'est nourrie de banques d'images non-libres de droit, copyrightées, parfois de grand.e.s artistes, parfois de petit.e.s artistes. Ces personnes se retrouvent avec une clientèle en moins et dans le monde artistique, déjà pauvre, la possibilité de plagier en quelques clics, c'est précariser cette population. Les recours juridiques sont longs, difficiles, voire impossibles selon les pays. Également, l'IA est aussi capable de reproduire le style d'artistes récemment décédé.e.s... et tout cela sans parler de l'attachement émotionnel d'un.e artiste à son art, surtout s'il est une forme de revendication.

Quant à ChatGPT, sa méthode pour enrichir sa base de données est la même : code, articles, livres non-libres de droit, ou dont la copie n'était pas autorisée.

Mais plus encore : l'entreprise derrière ChatGPT a exploité des travailleurs kényans, payé entre 1$32 et 2$ de l'heure, très loin des 12$50 de l'heure annoncés par le contrat initial. Leur travail consistait à trier et étiquetter des données dont le contenu était extrêmement choquant ; des employés ont d'ailleurs développé dea troubles psychologiques à la suite de cette mission tant les contenus étaient ignobles. Un des employés qualifie cette mission de "torture".

De mon côté, c'est l'argument que je retiens pour justifier la non-utilisation de ces outils.

Mot de la fin et réflexions personnelles

J'aimerais préciser que ces technologies sont malgré tout (et malheureusement) intéressantes. Je pense qu'elles auront un impact important sur nos vies d'ici quelques années.

Cependant, elles sont détenues par des entreprises privées, dont la recherche de gains financiers n'est pas à prouver (abonnements hors de prix, pas d'open-source, exploitation de travailleurs,...). Cette recherche de bénéfices mène à des pratiques plus que douteuses, si ce n'est pas criminelles.

Aussi, je ne crois pas que le "vol de travail" par les IA et robots (caisse automatique, génération de code, de texte, etc) soit une mauvaise chose, au contraire. Selon moi, un monde idéal est un monde automatisé où nous pourrions nous adonner à nos loisirs sans devoir travailler.

J'ai un avis plutôt à contre-courant lorsqu'il s'agit de la propriété, du copyright et des droits d'auteur. J'avoue avoir un peu peur de le partager entièrement sur cette plateforme. Ce que j'aimerais en dire, c'est que le principal problème ne réside pas dans le fait que les IA volent nos jobs (d'artistes, d'auteurices, de rédacteurices,...). Le principal problème, c'est que nous avons besoin de ces jobs pour vivre.

Aujourd'hui, dans l'état actuel des choses, les artistes, les auteurices, les rédacteurices et toustes les autres ont besoin de leurs jobs. La suppression de postes, de nos jours, c'est tuer les plus pauvres d'entre nous.

J'aimerais donc conclure sur ça : soyez énervé.e.s, mais rappelez-vous qui est votre ennemi.

Personnellement je considère que ce ne sont pas les IA dans leur globalité, mais les entreprises derrière ces technologies et le capitalisme.

[1019-code]

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! 

[1019-code]

Codons ensembles!

Hey !

(un jour je finirais mes projets, mais anyway)

Je me fais la remarque depuis longtemps que j'aimerais stream sur Discord du codage, et je me suis dit que le genre de stream pour lequel j'aurais pas besoin de préparation (et qui est donc plus facile pour moi) c'est un stream où on code ensemble quelque chose.

Donc voilà je me demandais si vous seriez intéressé.e.s par la création d'un script ensemble ? Quelque chose que vous avez toujours voulu voir par exemple ?

Ce que je compte faire pendant ce stream :

Expliquer ma démarche pas à pas,

Présenter comment je travaille sur du JavaScript et comment en débugguer,

Montrer comment je fais mes recherches concernant les bugs que je rencontre,

Puis globalement parler et construire ensemble, si vous avez des remarques, si vous voulez coder en même temps un script avec la même finalité et qu'on le débuggue, etc

Je propose spécifiquement du JavaScript parce que je sais que beaucoup n'y arrivent pas et je me dis que ça peut être un bon moyen de comprendre comment se lancer :)

Débisou !

[1019-code]

Viene bien tener ciertos 'tags' que simbolicen el tipo de tema que estamos viendo. Desde tags administrativos (trama grupal, anuncio importante, censo…) hasta tags para usuarios (busqueda abierta/reservada/cerrada, tema privado/libre/+18…). En este tutorial, os enseñaré a hacerlo de manera que los admins podáis tener ciertos tags predeterminados disponibles para los usuarios, y puedan añadir sus tags si no encuentran el que les hace falta, como en las capturas que dejo a continuación:

Tutorial dedicado a @thewitchlies, siento la tardanza; cuando miré el code que estaba usando me dieron ganas de llorar e hice uno nuevo y con mejor funcionalidad que el anterior 😅

Lo primero que tendréis que hacer es decidir qué tags necesitaréis. Para el ejemplo, usaré tres:

Tema privado, usando el color azul (#3774ad) y el icono de FontAwesome times.

Tema +18, usando el color rojo (#ad3737) y el icono de FontAwesome exclamation-triangle.

Tema libre, usando el color verde (#37ad3f) y sin ningún icono.

Primero que nada, deberemos editar un par de variables. Primero, vamos a cambiar un elemento en viewtopic_body. Este es el link dentro de .page-title. Debe quedar así:

<h1 class="page-title"> <a href="{TOPIC_URL}" class="title-thread">{TOPIC_TITLE}</a> </h1>

Si tenéis este elemento editado o no usáis un título de tema sobre vuestros posts, esta parte es indiferente, pero los tags de tema no saldrán en esa sección de vuestro foro.

Otro elemento a editar se encuentra en topics_list_box. Este es el link al tema, o .topictitle por defecto. Si le habéis cambiado la clase, ponedle dicha clase para que pueda ser identificado por el JS. Debe quedar así:

<a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>

Seguimos con el siguiente: está en search_results_posts y es el link que está dentro del .h3 en la línea 10. Debemos agregarle la clase post-title. Debe quedar así:

<h2 class="h3"><a href="{searchresults.U_POST}" class="post-title">{searchresults.TOPIC_TITLE}</a></h2>

También nos hará falta, si tenemos en uso el módulo de últimos temas, añadir una clase para que los tags se muestren ahí; le pondremos la clase module-title. Esto se encuentra en el template mod_recent_topics (en la sección "Portal"). Dependiendo del tipo de módulos que uséis, deberá quedar así para el marquee:

» <a href="{scrolling_row.recent_topic_row.U_TITLE}" title="{scrolling_row.recent_topic_row.L_TITLE}" class="module-title">{scrolling_row.recent_topic_row.L_TOPIC_TITLE}</a><br />

Y así para la lista de temas estática:

» <a href="{classical_row.recent_topic_row.U_TITLE}" class="module-title">{classical_row.recent_topic_row.L_TITLE}</a><br />{BY} 

Si no quieres que salgan los tags en esta sección, simplemente añade a tu CSS (siendo CLASETAGS la clase que pondrás más abajo, en el JS, en threadTagClass): .module-title .CLASETAGS { display:none; }

Por último, para poder insertar el formulario de inserción de tags en nuestro formulario de creación de temas, vais a buscar la variable {L_SUBJECT} en vuestro posting_body (en la sección "Escribir un mensaje & Mensajes privados"), y le vamos a poner la clase threadSubject. Debe quedar así:

<dt><label class="threadSubject">{L_SUBJECT}</label></dt>

Una vez editados nuestros templates, vamos a dirigirnos a nuestro JS y vamos a crear una nueva hoja y la marcaremos en Todas las páginas. Vamos a pegar este código de pastebin (no me arriesgo a que tumblr lo rompa 😅) y vamos a editar un par de cosas:

threadTagClass: Esta variable dará nombre a cada uno de tus tags. Por defecto, es .threadtag.

threadTagElement: Esta variable definirá el elemento de cada uno de tus tags. Por defecto, es span. Puedes hacerlos div's, strong's, em's, i's… Lo que te haga falta.

undeclaredTagColor: Esta variable dará un color de acento a los tags no definidos por la administración.

lastPostLink: Esta variable sirve para localizar el link del último tema en los listados de foros. Por defecto es .forums .row .lastpost>span>a:first-child. Si habéis modificado vuestro index_box, tendréis que renombrar esta variable por la adecuada en vuestro HTML.

Ahora, lo grueso del JS está en la parte de arriba, en la variable threadTags. Esta variable es un array, contenida entre corchetes ([]) y en su interior hay objetos, separados entre sí por comas y rodeados por llaves ({}). Cada uno de esos objetos es un tag.

var threadTags = [ { filter: 'privado', color: '#3774ad', icon: '' }, { filter: '+18', color: '#ad3737', icon: '' }, { filter: 'libre', color: '#37ad3f', icon:'' } ];

Cada uno de nuestros tags tiene tres variables: filter, color e icon, y están separadas por comas.

filter: Es la variable que el código buscará para identificar nuestro tag. Es obligatorio incluirla y debe estar en minúsculas.

color: Es la variable que se asignará como la variable CSS --accent para el uso en el diseño. Puede ser hexadecimal, rgb/a, hsl… A preferencia. Es obligatorio incluirla.

icon: Es la variable que insertará un icono antes del título del tag, en forma de HTML como se ve en el ejemplo. No es obligatorio incluirla; si no te hace falta, déjala como la que puedes ver en el tag 'libre'.

Una vez tengas eso dispuesto, simplemente presiona guardar y ¡listo! Tus tags ya están visibles en tu foro y pueden empezar a ser usados. ¿Cómo se usan? Tienes dos opciones:

Automáticos en tu formulario de publicación de tema: Podrás ver que tras la instalación de los tags, cuando vas a publicar o editar un tema ya publicado (el primer mensaje del mismo), aparece el formulario que hemos mencionado anteriormente sobre nuestro Título de tema. Simplemente selecciona los tags necesarios, pulsa el botón 'Modificar título de tema' y los tags se agregarán como texto al principio del mismo.

Manuales: Puedes escribir los tags manualmente, ya sean los predefinidos o tags no declarados. Simplemente pon tu texto entre corchetes {tal que así} antes del título de tu tema, para que quede {tal que así} Tu título de tema. Podrás ver aparecer un tag con el texto {tal que así} al lado del título. Recomendaría instruir a tus usuarios de esta funcionalidad en las normas del foro. Aunque, por supuesto, siempre puedes dejar que tus usuarios sugieran tags y añadirlos de manera permanente a la lista de tags predefinidos.

Os dejo también un CSS base por si no queréis comeros mucho la cabeza editando los tags:

/*Tags*/

.threadtag { background: rgba(255,255,255,0.5); border: 1px solid rgba(0,0,0,0.1); padding: 5px 10px; display: inline-block; margin-right: 5px; border-radius: 5px; font-size: 10px; font-weight:700; text-transform: uppercase; color: var(--accent); }

.threadtag em { color: #000; margin-right: 3px; }

Y con eso y un bizcocho ya tenéis vuestros tags. Podéis añadir nuevos simplemente añadiendo un nuevo objeto al array del javascript; acordaos de rodear cada uno con llaves ({}), separar los grupos de llaves ({}) con una coma (,), y que todo esté dentro de los corchetes ([]).

Como puede pasar con estos códigos un poco tochos, pueden haber bugs que no haya cazado yo. Si encuentras alguno, notifícame para que pueda actualizar el código en el pastebin.

Si os ha servido este tutorial u os ha parecido útil, dadle un reblog para que llegue a más gente 💕

[1019-code]

Editeur de texte Forumactif

Hey !

J'ai tenté un petit truc, ça fonctionne bien. J'en ai marre de cet éditeur :

J'ai réussi à le modifier par un éditeur TinyMce :

Bon, jusque là, ok, rien de nouveau. Techniquement, on peut basculer en What You See Is What You Get (WYSIWYG) sur Forumactif.

Mais pourquoi on ne le fait jamais ?

➡ parce que ça fout en l'air le HTML (des fiches, des codes RPs, etc).

Illustration avec l'ancien éditeur. Quand je copie/colle un code (un code, "30. Flowers (black)" de @cactuscodes) dans l'éditeur, ça m'envoie ça :

Et dans le post :

Bref, c'est pas super. Ca me rajoute des balises.

Dans le nouvel éditeur, ça donne quoi ?

Hé bien... la même chose, en fait.

Mais !

Avec le nouvel éditeur, il y a la possibilité d'installer un plugin appelé code.

Quand on clique dessus, voilà ce que ça donne :

Si je remplace tout le contenu par le code en libre-service et que j'appuie sur enregistrer...

Et je peux même modifier le texte directement dans cette prévisualisation !

Après, quelques points à faire attention :

pour faire un retour à la ligne dans la div où il y a le texte, il vaut mieux utiliser Maj + Entrée, puisque le retour à la ligne classique donne en général une balise

je pense que ça dépendra beaucoup des codes copiés / collés

je n'arrive pas à modifier tous les textes en cliquant avec la souris ; par contre j'y arrive en remontant ou en descendant avec le clavier.

Et y a généralement un grand nombre de plugins qui viennent avec, une très bonne documentation, qui rendent en général TinyMCE très facile à utiliser. En vrac :

Un plugin pour restaurer le dernier brouillon, enregistré automatiquement toutes les 30 secondes.

Un plugin pour entrer du code et le colorier.

Un plugin pour rajouter des emojis.

Un plugin pour prévisualiser sans avoir à cliquer mille fois sur "prévisualiser".

Puis y a globalement beaucoup d'autres plugins, la possibilité d'en créer aussi, bref, c'est super super cool.

J'ai honnêtement juste suivi la documentation mais si vous voulez je ferai un tutoriel... un jour... voilà...

[1019-code]

Hey tout le monde !

Je reblogue parce que dedans y a un outil de générateur de formulaires. Je vous avais précédemment parlé des formulaires pour qu'un.e utilisat.eur.rice génère une fiche de présentation ou tout autre chose, de votre choix.

Personnellement j'utilise le traducteur automatique de mon navigateur pour comprendre ce qui est écrit, vu que je ne parle pas la langue.

Mais voilà, super pratique !

Hola Necro, he visto que en forumactif usan formularios para postear las fichas. He intentado seguir un par de tutoriales (entre ellos el del superformulario), pero al poner los códigos de tablilla envolviendo los valores que devuelve el formulario me devuelve un error. ¿Sabes por qué sucede? ¿Hay alguna manera de que los valores del formulario al generar tema nuevo estén envueltos en divs?

¡Hola anon! Yo personalmente uso este para mis publicaciones de fichas. Importante que modifiques lo siguiente:

var id_foro: El id del foro donde se publicará el post.

Ahora: Cada input/select/textarea que crees, es importante que tenga un name concreto, porque es lo que usarás para localizar su valor en tu HTML. Por ejemplo:

<select name="grupo" id="grupo" required="required"> <option>Death eaters</option> <option>Citizens</option> <option>Order of The Phoenix</option> </select>

O en versión input/textarea:

<textarea id="historia" name="historia" rows="30" cols="50" required="required"></textarea>

¿Cómo usamos esto? Es más sencillo de lo que parece. Supongamos que tenemos solo estos dos campos (grupo e historia) y vamos a ponerlo en este HTML:

<div class="ficha"><span class="grupo"></span><div class="historia"></div></div>

La variable txt_message es la que contendrá nuestro html generado:

var txt_message = 'aquí va tu html y tus valores';

Y cada valor del formulario se usa siguiendo el siguiente nombramiento: form.nombrecampo.value. Sabiendo esto, rellenamos nuestro txt_message:

var txt_message = '<div class="ficha"><span class="grupo">'+form.grupo.value+'</span><div class="historia">'+form.historia.value+'</div></div>';

Es muy importante que pongas las variables siguiendo la nomenclatura correcta + insertándolas como deberían (fíjate que se cierran las comillas simples y van rodeadas de pluses, para que el código entienda que son variables y no texto).

Y listo. En mi opinión esta versión es mil veces más fácil de editar que el Superformulario y en mi opinión da mejores resultados, pues todo es editable mucho más fácilmente; desde el propio formulario hasta el output del mismo.

¡Saludos!