Les composants graphiques sont les constituants des générateurs de pages qui leur permettent d'afficher des groupes d'images, mais aussi d'assurer la gestion de leur disposition.

1. Les composants graphiques de base

Dans la rubrique Notions de base, l'article Génération des pages explique comment les générateurs utilisent des composants pour produire les pages affichées aux internautes. Très souvent d'ailleurs, le code du générateur se limite à l'appel d'un composant, avec ou sans paramètres d'adaptation, englobé dans un bloc <div> avec un identifiant qui sert de cible aux instructions de la feuille de style CSS.

On rappelle que, d'après le modèle de données, les images à afficher sur un espace (space) sont celles des œuvres (works) visibles qui lui sont rattachées par des collages (stickers). Par visibles, on entend les images dont le niveau de visibilité est compatible avec les droits d'accès de l'utilisateur et aussi dont la période de publication du collage est en cours.

On dénommera mur d'affichage ou tout simplement mur la zone de la page sur laquelle seront placées les images, le plus souvent entre le haut et le bas de page.

Comme pour tous les composants, les données à afficher sont obtenues à partir des variables de classe standard fournies par le contrôleur See (@site, @space...) grâce à des méthodes d'extraction des classes de modèle assossiées comme Space.visible_works_for_purpose, etc. L'adaptation du composant est assurée soit par des paramètres d'appel Ruby, soit par des valeurs de l'attribut spaces.parameters transmis par le contrôleur au moyen de la variable @gen_params (paramètres de génération).

Les composants destinés à afficher les œuvres des artistes peuvent être répartis en plusieurs catégories : les composants unitaires, les composants génériques et les composants positionneurs.

1.1. Les composants unitaires

Un composant unitaire affiche une seule image d'une œuvre. Un composant de ce type est simple de conception et d'utilisation, la mise en page étant essentiellement assurée par la feuille de style CSS.

1.2. Les composants génériques

Un composant générique affiche de façon répétitive un lot d'images. Le positionnement des images est calculé à partir de l'ordre des collages et des caractérisques des images.

1.3. Les composants positionneurs

Un composant positionneur permet la mise en place des images par le webmestre sur le mur d'affichage de l'espace considéré. Le composant doit donc avoir deux modes de fonctionnement : positionnement des images par le webmestre lors de la phase de composition, puis affichage suivant le positionnement demandé lors de l'affichage aux internautes.

L'information de positionnement de chaque image est enregistré dans l'attribut stickers.place du collage correspondant, dans un format propre à chaque composant. Si nécessaire, la hauteur du mur est stockée dans l'attribut spaces.display de l'espace.

1.4. Fonctionnement du composant p5003_free

Le composant p5003_free, ou brièvement le composant free, est le positionneur le plus universel et le plus sophistiqué.

En mettant à vrai l'attribut positionable d'un générateur vue d'espace (space_view), on active le bouton Positionner sur la page de gestion des espaces qui le référencent comme générateur principal. Ce bouton permet l'affichage de la page générée correspondant à l'espace avec comme paramètre ?position=true (en fin d'adresse internet de la page). Ce paramètre déclenche le mode Position du code JQuery embarqué par le composant.

Ce mode affiche une barre de commande et encadre chaque image et chaque texte du mur d'affichage. La bordure de ces cadres peut être étirée pour redimensionner l'image ou la zone de texte (en conservant les proportions initiales pour les images). Cliquer puis tirer sur un cadre le déplace sur le mur, et même au delà. Comme les cadres sont superposables, double-cliquer sur l'un d'eux le passe au premier plan.

Une ligne horizontale trace la limite inférieure du mur dans la page ; la déplacer vers le bas ou vers le haut augmente ou diminue la hauteur du mur.

Une fois le positionnement des objets sur le mur effectué, le bouton Enregistrer de la barre de commande sauvegarde dans l'attribut stickers.place des collages correspondants et dans spaces.display la position et les dimensions des objets ainsi que la hauteur du mur. Le bouton Espace de la barre renvoie vers la page de gestion de l'espace. Si le moule de l'espace l'autorise, le bouton de modification d'un collage permet d'ajuster au pixel le placement de l'objet associé.

L'enregistrement du placement modifie le numéro d'ordre des collages de 1 à N, ce qui précisera l'ordre d'affichage des objets sur le mur. Ceci est utile pour résoudre les cas de superposition, mais aussi pour générer un effet 3D. Celui-ci se manifeste si au moins l'un des paramètres de génération X ou Y est défini : ces valeurs sont des coefficients multiplicateurs appliqués au déplacement de la souris sur la page pour déterminer un mouvement de chaque objet en fonction de son numéro d'ordre.

En mode d'affichage normal, quand la page générée est appelée par un internaute, les fonctions JQuery sont désactivées, sauf, le cas échéant, celles relatives à l'affichage 3D.

2. Les composants graphiques complémentaires

La possibilité d'ajouter des objets joints (attachments) à une œuvre ou des œuvres filles à une œuvre mère multiplie les possibilités de présentation.

2.1. Les composants spéciaux

2.2. Les animations

  • Le bougre de Pétaouchnock
    passe régulièrement sur le bas des pages du site Pétaouchnock (hors page d'accueil).
    Il ne fait pas encore l'objet d'un composant réutilisable.

3. Évolutions possibles

La bibliothèque des composants n'est encore qu'embryonnaire, elle peut donc être encore notablement améliorée et complétée.

3.1. Adaptations générales

  • Utilisation des composants avec les objets joints aux œuvres (attachments)
    Les objets joints à une œuvre font partie d'une classe récemment ajoutée au projet, encore peu outillée. Ils peuvent être différentes représentations (photos ou dessins) de celles-ci dont on peut souhaiter l'affichage sur un mur.
    Dans ce cas, la difficulté provient de l'absence de collage direct entre l'objet joint et le mur, c'est-à-dire l'espace. Si ce point est sans conséquence pour les composants graphiques génériques où les éléments sont placés automatiquement, il est important pour les composants positionneurs et nécessite de définir comment enregistrer la position des images et textes.
  • Structuration et séparation du code JQuery des composants
    Relecture du code JQuery et séparation du code Ruby des composants.

3.2. Les composants unitaires

  • Image de fond
    Formalisation d'un composant pour positionner dynamiquement une image de fond en fonction notamment de la taille de la fenêtre du navigateur.

3.3. Les composants génériques

  • Images flottantes
    Formalisation d'un composant pour positionner dynamiquement une série d'images en fonction notamment de la taille de la fenêtre du navigateur (mode CSS float).
  • Diaporamas
    Formalisation d'un ou de plusieurs composants de présentation d'images successivement par l'utilisation d'un des composants JQuery disponibles sur l'internet.

3.4. Les composants positionneurs

  • Navigation sur un plan
    Définition et réalisation d'un composant disposant les éléments graphiques sur une zone très supérieure à la taille de l'écran, avec gestion du placement des objets, du fond et du déplacement de l'affichage sur la zone.
    Extension à une navigation multi-plans, en 2D ou en 3D.
  • Positionnement libre adaptable
    Le composant p5003_free génère un mur de dimension fixe. Adaptation du composant aux écrans de taille réduite
  • p5003_free : gestion des bordures
    La définition d'une bordure CSS autour des images et textes entraine une bordure de cadre gênante en mode positionnement et un décalage inadapté des coordonnées.

3.5. Les composants spéciaux

  • Animations
    Formalisation d'un ou de plusieurs composants produisant des animations comme le bougre de Pétaouchnock.
  • Autres composants
    ???

Plan du site

Code QR de la page

Télécharger

↑ Haut