Formats de configuration des écrans

Ces formats ont été utilisés pour définir : en amont, les micro-tâches de localisation des espaces à considérer (lightbox, panneaux, sections ou tableaux) — au sein des écrans ; et en aval, les micro-tâches d'interaction avec les outils (champs de saisie, listes déroulantes, cases à cocher, etc.).

[Se situer] Format des lightbox

Ce format est utilisé pour traiter les sous-espaces de configuration venant s’afficher par dessus les écrans de base (exemple : édition d’un article). Ces espaces appelés lightbox donnent accès à des fonctionnalités qui servent à compléter/détailler/enrichir le travail de configuration (l’intégration d’une photo dans un article génère une lightbox qui servira notamment à sélectionner la photo à insérer).

Les lightbox se caractérisent par leur titre, qui est une étiquette.

Format simplifié :

Lightbox : {titre}

Lightbox […] displays images and videos [en fait, n'importe quel type de contenu] by filling the screen, and dimming out the rest of the web page.

Source : Lightbox (JavaScript), Wikipedia, 2021 ; https://en.wikipedia.org/…/lightbox-(javaScript). (Pas de version française)

In the predominant layout for modern window decorations, the top bar contains the title of that window and buttons which perform windowing-related actions such as: close, maximize, minimize, resize, roll-up. [Les lightbox sont affiliées aux fenêtres.]

Source : Window decoration, Window (computing) , Wikipedia, 2021 ; https://en.wikipedia.org/…/window-(computing) {version française : Fenêtre (informatique), Wikipédia, https://fr.wikipedia.org/…/fenetre-(informatique)}.

[Se situer] Formats des panneaux [déroulants] et des sections

Ces formats sont utilisés pour indiquer le sous-espace à considérer, sur écran donné (et non par dessus, comme dans le cas des lightbox). Les panneaux et les sections sont des conteneurs emboîtés les uns dans les autres, dont la fonction est de regrouper des informations. (Ce sont les panneaux qui emboîtent les sections.)

Les panneaux se caractérisent par leur nom, qui est une étiquette.

Format général :

“Panneau” [“déroulant”] (( “:” nom) | (“[”descripteur“]”))

Formats simplifiés :

Panneau : {nom}

Panneau déroulant (accordéon) : {nom}

Remarque. — Les panneaux déroulants, aussi appelés accordéons, sont des panneaux qui s’ouvrent et qui se referment à la demande.

Les sections se caractérisent par leur en-tête, qui est une étiquette.

Format simplifié :

Section : {en-tête}

A panel is “a particular arrangement of information grouped together for presentation to users in a window or pop-up”.

Source : Panel (computer software), Wikipedia, 2021 ; https://en.wikipedia.org/…/panel-(computer-software). (Pas de version française)

[Se situer] Formats des tableaux

Ce format est utilisé pour indiquer le sous-espace à considérer à l’intérieur d’un tableau, ce sous-espace — ou cette cellule — se situe au croisement d’une ligne et d’une colonne.

Cellule (croisement ligne/colonne). Les lignes représentent des objets (articles, menus, liens d’un menu, etc.), chacune d’entre elles fait intervenir une référence complétée par une série de données. Les données en question sont structurées selon un ordre fixé par les en-têtes des colonnes.

Les lignes sont caractérisées par le type des objets listés, qui est un descripteur. Une ligne donnée se caractérise par la référence de l’objet considéré, qui se présente le plus souvent sous la forme d’un libellé dynamique. Les en-têtes apparaissent soit comme des étiquettes soit comme des libellés dynamiques [du fait de l’intégration des fonctions de tri].

Format simplifié :

Ligne [{objet}] : {référence} ; colonne : {en-tête}

Les tableaux font aussi intervenir un format dédié au pointage des références que l'utilisateur devra considérer.

Référence cliquable. Les références-liens sont des libellés dynamiques.

Format simplifié :

Référence-lien : {référence-lien}

A table consists of an ordered arrangement of rows and columns […]:

the term row has several common synonyms [record];
the term column has several common synonyms [field];
a column is usually identified by a name;
a column name can consist of a word, phrase or a numerical index;
the intersection of a row and a column is a cell.

Source : Table (information), Wikipedia, 2021 ; https://en.wikipedia.org/…/table-(information). (Pas de version française)

[Interagir] Formats des champs de saisie

Ce format est utilisé pour indiquer le champ à considérer et la valeur à renseigner.

Les champs de saisie se caractérisent par leur nom, qui est une étiquette ; les valeurs à renseigner sont des chaînes de caractères alphanumériques (voir supra).

Formats généraux :

“Champ” [“[”descripteur“]”] “:” nom “;” “Valeur” “:” valeur

ou bien

“Champ” nom “:” valeur

Formats simplifiés correspondants :

Champ : {nom} ; valeur : {valeur}

ou bien

Champ {nom} : {valeur}

Remarque. — Le format qui utilise le point-virgule peut sembler un peu lourd, pour autant, il reste très utile dans la mesure où il évite la multiplication des guillemets, avec les problèmes de lisibilité cela induit.

A text box, text field or text entry box is a graphical control element intended to enable the user to input text information to be used by the program.

Source : Text box, Wikipedia, 2021 ; https://en.wikipedia.org/…/text-box {version française : Zone de texte, Wikipédia ; https://fr.wikipedia.org/…/zone-de-texte}.

[Interagir] Formats des listes déroulantes

Ce format est utilisé pour indiquer la ou les options à sélectionner dans le cas des listes déroulantes. Les listes déroulantes peuvent être chapeautées par un en-tête décrivant l’ensemble des options.

Les en-têtes sont des étiquettes, les options des libellés dynamiques.

Format général :

“Liste déroulante” [alternatives] “;” “option(s)” “:” 1#option

avec

alternatives = (“:” en-tête) | (“[”descripteur“]”)

Format simplifié avec un en-tête et une option à sélectionner :

Liste déroulante : {en-tête} ; option : {option}

Remarque. — L’option affichée par défaut peut servir d’en-tête quand elle est générique (Sélectionner une catégorie).

Format simplifié avec un descripteur et une option à sélectionner :

Liste déroulante [{descripteur}] ; option : {option}

Format simplifié sans en-tête ni descripteur :

Liste déroulante ; option : {option}

Format simplifié utilisé pour lister les trois options d’une liste déroulante :

Liste déroulante ; options : {option} / {option} / {option}

A text box, text field or text entry box is a graphical control element intended to enable the user to input text information to be used by the program. A drop-down menu (also dropdown menu or dropdown list or "drop menu") is a graphical control element […] that allows the user to choose one value from a list. When a drop-down list is inactive, it displays a single value. When activated, it displays (drops down) a list of values, from which the user may select one [pas nécessairement, les listes déroulantes permettent aussi de sélectionner plusieurs options].

Source : Drop-down list, Wikipedia, 2021 ; https://en.wikipedia.org/…/drop-down-list {version française : Liste déroulante, Wikipédia ; https://fr.wikipedia.org/…/liste-deroulante}.

Remarque. — À ne pas confondre avec la combox box, boîte combinée en français, qui en plus des options prédéfinies permet de définir ses propres options via un champ de saisie.)

[Interagir] Format des cases à cocher

Ce format est utilisé pour indiquer la ou les options à activer, ou à désactiver, dans le cas des cases à cocher. Les cases à cocher peuvent être chapeautées par un en-tête décrivant l’ensemble des options.

Les en-têtes et les options sont des étiquettes.

Case(s) à cocher effectivement. Format général :

“Case(s) à cocher” [complément] “:” 1#option

avec

complément = alternatives “;” “option(s)”

et

alternatives = (“:” en-tête) | (“[”descripteur“]”)

Format simplifié avec un en-tête et deux options à cocher :

Cases à cocher : {en-tête} ; options : {option}, {option}

Format simplifié avec un descripteur et deux options à cocher :

Cases à cocher [{descripteur}] ; options : {option}, {option}

Format simplifié sans en-tête ni descripteur :

Cases à cocher : {option}, {option}

Case(s) à dé-cocher. Format général :

“Case(s)” [complément] “à décocher” “:” 1#option

avec

complément = “à cocher” alternatives “;” “option(s)”

et

alternatives = (“:” en-tête) | (“[”descripteur“]”)

Format simplifié avec un en-tête et une option à décocher :

Cases à cocher : {en-tête} ; option à décocher : {option}

Format simplifié avec un descripteur et une option à décocher :

Cases à cocher [{descripteur}] ; option à décocher : {option}

Format simplifié sans en-tête ni descripteur :

Cases à décocher : {option}, {option}

A checkbox (check box, tickbox, tick box) is a Graphical control element that permits the user to make a binary choice […].

A caption describing the meaning of the checkbox is normally shown adjacent to the checkbox .

Often, a series of checkboxes are presented, each with a binary choice between two options.

Source : Checkbox, Wikipedia, 2021 ; https://en.wikipedia.org/…/checkbox {version française : Case à cocher, Wikipédia ; https://fr.wikipedia.org/…/case-a-cocher}.

[Interagir] Formats des boutons radio

Ce format est utilisé pour indiquer l’option à activer dans le cas des boutons radio. Les boutons radio font intervenir plusieurs options, mais l’utilisateur ne peut en sélectionner qu’une seule. Les boutons radio peuvent être chapeautés par un en-tête.

Les en-têtes et les options sont des étiquettes.

Format général :

“Bouton(s) radio” [complément] “:” option

avec

complément = alternatives “;” “option(s)”

et

alternatives = (“:” en-tête) | (“[”descripteur“]”)

Format simplifié avec un en-tête :

Boutons radio : {en-tête} ; option : {option}

Format simplifié avec un descripteur :

Boutons radio [{descripteur}] ; option : {option}

Format simplifié sans en-tête ni descripteur :

Bouton radio : {option}

A radio button or option button is a graphical control element that allows the user to choose only one of a predefined set of options […].

Radio buttons are arranged in groups of two or more […].

Source : Radio button, Wikipedia, 2021 ; https://en.wikipedia.org/…/radio-button {version française : Bouton radio, Wikipédia ; https://fr.wikipedia.org/…/bouton-radio}.

[Interagir] Formats des boutons et liens assimilés

Ces formats sont utilisés pour indiquer le bouton ou le lien assimilé, sur lequel l’utilisateur doit cliquer. Le bouton est un composant qui remplit deux fonctions : a) il permet d’interagir avec les applications (afficher/masquer un champ de saisie) ; b) il permet aussi et surtout de modifier leur état : ouverture de session, ajout/mise à jour/suppression d’un contenu ou d’un compte utilisateur, installation/désinstallation d’une extension, etc.

Les boutons se caractérisent par leur libellé, qui est dynamique.

Format simplifié :

Bouton : {libellé}

Les liens assimilés à des boutons sont des libellés dynamiques.

Format simplifié :

Lien-bouton : {lien-bouton}

In computing, the term button (sometimes known as a command button or push button) refers to any graphical control element that provides the user a simple way to trigger an event, like searching for a query at a search engine, or to interact with dialog boxes, like confirming an action.

Source : Button (computing), Wikipedia, 2021 ; https://en.wikipedia.org/…/button-(computing) {version française : Bouton (informatique), Wikipédia ; https://fr.wikipedia.org/…/bouton-(informatique)}.

[Interagir] Format du glisser-déposer

Ce format est utilisé pour indiquer la finalité du glisser-déposer (Drag&Drop). Les glisser-déposer font intervenir des poignées qui servent à déplacer des objets. Ces poignées sont représentées par des icônes (une croix par exemple).

Les poignées seront caractérisées par l’icône elle-même, sinon par un descripteur. Le type des objets est un descripteur ; l’action à réaliser est un descripteur.

Format général :

“Glisser-déposer” poignée “:” “[”type-objet“]” “[action” “:” descripteur“]”

avec

poignée = icône | (“[”descripteur“]”)

Format simplifié avec une icône :

Glisser-déposer {icône} : [{type-objet}] [action : {descripteur}]

Format simplifié avec un descripteur :

Glisser-déposer [{descripteur}] : [{type-objet}] [action : {descripteur}]

In computer graphical user interfaces, drag and drop is a pointing device gesture in which the user selects a virtual object by "grabbing" it and dragging it to a different location or onto another virtual object.

Source : Drag and drop, Wikipedia, 2021 ; https://en.wikipedia.org/…/drag-and-drop {version française : Glisser-déposer, Wikipédia ; https://fr.wikipedia.org/…/glisser-deposer}.

[Interagir] Format des éditeurs de contenu

Ce format est utilisé pour indiquer l'éditeur à considérer et les contenus à saisir. Il arrive que les éditeurs de contenu soient chapeautés par un en-tête.

L’en-tête est une étiquette. Le contenu à intégrer est un texte alphanumérique.

Format général :

“Éditeur” [alternatives] ; contenu à intégrer : {contenu}

avec

alternatives = (“:” en-tête) | (“[”descripteur“]”)

Format simplifié avec un en-tête :

Éditeur : {en-tête} ; contenu à intégrer : {contenu}

Format simplifié avec un descripteur :

Éditeur [{descripteur}] ; contenu à intégrer : {contenu}

Format simplifié sans en-tête ni descripteur :

Éditeur ; contenu à intégrer : {contenu}

WYSIWYG HTML editors provide an editing interface which resembles how the page will be displayed in a web browser. These editors may […] come in the form of browser extensions and allow editing directly within the web browser.

Source : HTML editor, Wikipédia, 2021 ; https://en.wikipedia.org/…/html-editor {version française : Éditeur HTML, Wikipédia ; https://fr.wikipedia.org/…/editeur-html}.