Wikipédia:Brouillons/interface ajax

Un article de Wikipédia, l'encyclopédie libre.

L'interface ajax se découpe en plusieurs éléments

Sommaire 1 Capture du doubleclic et localisation du bloc à éditer 2 Transformation en textarea et affichage du wikitexte 3 Interface d'édition 4 Sauvegarde des modifications 5 Idées reçues 6 Brouillon

[modifier] Capture du doubleclic et localisation du bloc à éditer

En fonction du contenu doublecliqué, à condition que celui-ci soit descendant de l'élément <div id="bodyContent">, le champ d'édition varie suivant les règles suivantes :

[modifier] Transformation en textarea et affichage du wikitexte

À la différence du lien donné en exemple [1], [2], le contenu html diffère de la source du texte (qui est en wikitexte).

Pour afficher le contenu du bloc en wikitexte, deux solutions techniques existeraient :

1. piocher le wikitexte dans la bdd, ce qui augmenterait sensiblement la charge des serveurs, mais garantit une restitution parfaite du wikitexte source
2. parser le html et en déduire le wikitexte, ce qui ne garantit pas l'exacte restitution du wikitexte source, mais permet un affichage quasi instantané du wikitexte, de corriger les éventuelles fautes d'orthographe, de syntaxe qui s'y trouveraient au moyen d'expressions régulières. Si le parseur n'arrive pas à trouver le wikitexte d'origine, se rabattre automatiment sur la solution qui consiste à piocher le wikitext dans la base de données, et laisser une ligne dans un log afin que les développeurs puissent corriger le parseur.

[modifier] Interface d'édition

Une fois le wikitexte obtenu, remplacer le bloc html par un textarea/input contenant le wikitexte. Rajouter au dessus un div contenant aligné à gauche un lien « [désactiver cette interface] », un menu déroulant : pendant ['20 secondes' (par défaut), '10 minutes', 'à jamais'] et un menu déroulant qui enverra un cookie à l'utilisateur pour que l'interface ajax ne s'active plus au double-clic chez lui, puis qui sortira de l'interface d'édition, en annulant tous les changements éventuels.

Si la personne n'est pas connectée, un message en vert en petite taille s'ajoute au dessus du textarea : « vous n'êtes pas inscrit, votre modification sera publiée sous votre adresse internet : <mettre l'ip ici> », puis une barre verticale et un lien vers la page d'inscription qui ouvre une nouvelle fenetre afin de ne pas faire perdre les éventuelles modifications, puis une barre verticale et un formulaire d'identification (un input type="text", un input type="password" et un input type="submit" où il est écrit « s'identifier », qui envoye une requete XMLHHTPRequest connectant l'utilisateur sans recharger la page, évitant de le faire perdre d'éventuelles modifications).

En dessous du textarea, ou du bloc parent dans le cas d'une modification d'une case de tableau par exemple, est généré un bloc contenant en taille réduite le bouton de sauvegarde placée en flottant en haut à droite, un champ pour entrer le résumé préfixée d'un label « commentaire : », suivi d'un hyperlien « respectez le copyright ! » pointant sur Wikipédia:Droit d'auteur, suivi d'un texte « en sauvegardant, vous placez votre contribution sous GFDL », GFDL pointant sur http://www.gnu.org/copyleft/fdl.html.

Si l'utilisateur enlève le focus sur le formulaire d'édition, le bloc modifié affiche une prévisualisation des changements en cours, et se voit attribuer un arrière plan de couleur jaune pale.

Dès que l'utilisateur modifie le contenu, un bouton [annuler] est généré à gauche de « [désactiver cette interface] » qui annulera toutes les modifications en cours (+ retrait du fond jaune accessoirement).

Chaque modification sur la page est marqué d'un arrière plan jaune pale.

Une fois un bouton « sauvegarder » appuyé, un parseur vérifie si il n'y a pas de vandalisme (filtrage de mots sur liste noire, suppression totale de contenu, succession de mots en majuscules, détection de langage sms, abus de ponctuation (!!!!!, ????, etc.)). Si une modification apparait comme douteuse, le fond du bloc devient rouge pale et le contenu filtré est entouré de rouge pur. Un message s'affiche en dessous du formulaire : « modification douteuse, veuillez utiliser l'interface classique », le bouton [modifier] classique se voit entouré d'un fond bleu pale et une flèche « -> » lui est prépendée.

Si la personne a mis un résumé dans plusieurs blocs modifiés, les résumés sont concaténés. Si la personne n'a rien mis dans le commentaire de modification, celui ci est généré automatiquement à partir du diff de la modification (enlève..., modifie..., ajoute..., remplace tout le contenu par...). Dans tous les cas le commentaire est préfixé de « mpa : » pour « modification par ajax » afin de voir le pourcentage de personnes utilisant cette interface par rapport à l'interface classique.

Si rien n'est filtré, aussi bien dans les résumés que dans le contenu, les modifications sont concaténées et le résultat est envoyé en bloc au serveur. Les arrières plans reprennent leurs couleurs par défaut une fois accusé réception.

[modifier] Sauvegarde des modifications

Une fois les modifications validées, envoi d'un paquet XMLHTTPRequest signifiant la modification. Si celle-ci sur une seule section envoi de cette seule section, sinon envoi de toute la page. (développer technique).

[modifier] Idées reçues

il s'agit d'une interface whysiwig

faux : l'interface d'écriture est clairement séparée de ce qui s'affiche en lecture seule. Les modifications s'effectuent sur le wikitexte et le résultat définitif n'est affiché que sur requête explicite.

[modifier] Brouillon

1. Code
2. Bugs
3. Filtres