DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Nouveauté WEBDEV 2024 !
Aide / Tuto WEBDEV / Tuto - Les agencements WEBDEV
  • Leçon 1 - Agencements simples
  • Qu'est-ce que le "Mobile-Friendly" ?
  • Les concepts dans WEBDEV
  • Utiliser les agencements
  • Agencements simples
  • Page manipulée
  • Création d'un agencement mobile
  • Mise en page dans l'agencement mobile
  • Test de la page
  • Agencements et champs spécifiques
  • Page manipulée
  • Création d'un agencement mobile
  • Mise en page dans l'agencement mobile
  • Comment adapter la taille du champ et des répétitions du champ Zone répétée ?
  • Test de la page et du projet
  • En résumé

Tuto - Les agencements WEBDEV

Leçon 1 - Agencements simples
Ce que vous allez apprendre :
  • Qu'est-ce que le "Mobile-Friendly" ?
  • Créer un agencement.
  • Dissociation du positionnement des champs.
  • Gestion des champs Zone répétée.
Durée de la leçon 30 mn
Qu'est-ce que le "Mobile-Friendly" ?
De plus en plus de personnes utilisent leur téléphone ou leur tablette pour accéder aux sites Internet et Intranet. Il devient donc nécessaire de penser les sites afin qu'ils soient "Mobile-friendly, c'est-à-dire qu'ils puissent s'adapter à un usage sur mobile (téléphone ou tablette).
Dans un site "Mobile-friendly", l'utilisateur accèdera depuis son mobile ou sa tablette à toutes les informations principales du site, sans avoir à zoomer ou à réduire les pages pour accéder aux informations voulues.

Les concepts dans WEBDEV

Pour faire un site "Mobile-friendly", WEBDEV propose plusieurs concepts :
  • Le Dynamic Serving : Le "Dynamic serving" est une technique dans laquelle la même adresse (URL) mène à 2 pages différentes : une page pour PC et une page pour mobile. Selon le matériel (PC ou mobile) qui accède à la page, la page adéquate sera affichée.
    Avec le "Dynamic serving", il n'est pas nécessaire de modifier les pages existantes : il suffit d'en rajouter pour les mobiles.
    Cependant, cette méthode impose d'utiliser deux jeux de pages, et donc un doublement des codes à exécuter.
  • Le Responsive Web Design historique : Ce concept permet de découper les pages en tranches pour s'adapter sur le mobile. Cette solution permet de conserver un code unique quel que soit le support d'utilisation du site. Cependant, ce mode de mise en page demande une grande rigueur.
  • Les agencements. Nous avons déjà évoqué et abordé ce concept dans différents tutos. Les agencements permettent de mettre en place rapidement une interface spécifique à l'utilisation sur mobile. Le code reste commun. Il suffit de déplacer, rendre invisible ou configurer les différents champs dans l'agencement mobile. Ces manipulations sont entièrement WYSIWYG sous l'éditeur de pages.
Utiliser les agencements
Dans ce tuto, nous allons voir les différentes techniques mises à votre disposition pour créer des agencements facilement dans vos pages.
Plus particulièrement, cette leçon va nous permettre de manipuler :
  • la dissociation du positionnement des champs.
  • le positionnement des champs dans les différents agencements.
  • la visibilité des champs selon les agencements.
  • la gestion des champs Zone répétée dans les agencements.
La leçon suivante sera réservée à l'utilisation d'un menu dans les agencements.
Pour connaître les moyens à votre disposition dans WEBDEV pour créer des sites avec agencements, nous allons utiliser un projet exemple. Vous pourrez ainsi réaliser toutes les manipulations et mieux comprendre les outils à votre disposition.
Ouverture du projet exemple
  1. Affichez la page d'accueil de WEBDEV (Ctrl + <).
  2. Dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Tuto - Agencements WEBDEV", double-cliquez sur "Agencements - Exercice".
Avertissement
Ce projet sera utilisé dans les différentes leçons de ce tuto.
Agencements simples

Page manipulée

Pour comprendre la gestion de l'ordre des champs, ouvrez la page PAGE_OrdreChamp présente dans le projet WW_Agencement.
Cette page comporte :
  • un champ Libellé affichant un titre.
  • 3 champs Image et 3 champs Zone de texte riche présentés horizontalement. Les champs Zone de texte riche affichent un libellé correspondant à l'image.
Nous allons tout de suite lancer un premier test de la page pour voir son comportement lors du redimensionnement du navigateur.
  1. Lancez le test de la page (Tester une page parmi les boutons d'accès rapide).
  2. La page s'affiche sous le navigateur.
  3. Redimensionnez le navigateur : le site ne s'affiche pas correctement.
  4. Fermez le navigateur.
Ce comportement n'est pas celui attendu
En mode mobile, nous voulons afficher les 3 produits avec leur libellé les uns sous les autres, dans toute la hauteur de la page.

Création d'un agencement mobile

Nous allons tout d'abord créer un nouvel agencement mobile :
  1. Sous le volet "Page", dans le groupe "Agencements", déroulez "Agencements" et sélectionnez "Ajouter un agencement".
  2. Dans la fenêtre qui s'affiche, un agencement adapté aux téléphones et aux tablettes est automatiquement proposé.
    Validez la fenêtre.
  3. Dans notre exemple, deux agencements sont créés. Ces agencements sont affichés sous forme de vignettes, à droite de la page "PAGE_OrdreChamp". L'agencement mobile est automatiquement sélectionné et affiché dans l'éditeur.
    Les zones en pointillé rouge délimitent les zones posant problème.

Mise en page dans l'agencement mobile

Pour commencer notre mise en page, nous allons agrandir la page en hauteur :
  1. Cliquez sur le cadre représentant la page. Dans la barre de message la taille de la page est indiquée : 320 x 406.
  2. Modifiez la valeur de la hauteur de la page en remplaçant 406 par 1200.
Ensuite, nous allons repositionner les champs dans la page.
  1. Sélectionnez le libellé "Dissociation du positionnement des champs" et ajustez sa taille à la largeur de la page.

    L'option "Dissociation automatique" (en haut à droite de la fenêtre principale, dans la barre de titre) permet d'activer ou non le mode "Dissociation automatique". Lorsque ce mode est activé (par défaut), toute modification de position ou de taille effectuée sur un champ d'une des pages spécifiques de l'agencement ne sera pas reportée sur les autres.
  2. Sélectionnez la seconde image et le libellé associé et positionnez ces champs en dessous de la première image et de son libellé.
  3. Répétez la même opération pour la troisième image.
  4. Sélectionnez les trois images et leur libellé et sous le volet "Alignement", dans le groupe "Centrage et répartition", cliquez sur "Centrer dans le parent".
Maintenant, occupons-nous du libellé en haut de la page : le texte est trop grand et ne rentre pas complètement dans le champ. Nous allons donc diminuer la taille de la police du texte, mais uniquement dans l'agencement mobile.
  1. Affichez l'agencement mobile si nécessaire (il suffit de double-cliquer sur la vignette correspondante).
  2. Sélectionnez le libellé et affichez la fenêtre de description du champ (Alt + Entrée).
  3. Dans l'onglet "Style", changez la taille de 24 à 20 pixels.
  4. Validez. Le texte rentre maintenant dans la largeur du champ Libellé.
  5. Enregistrez la page (Ctrl + S).
L'agencement étant en mode "Dissociation automatique", la taille de la police du libellé a été modifiée uniquement dans l'agencement en cours. Pour le vérifier, c'est très simple :
  1. Affichez l'agencement Bureau : double-cliquez sur la vignette "Bureau" à droite de la page.
  2. Affichez la fenêtre de description du champ Libellé : dans l'onglet "Style", la taille de la police est toujours de 24 pixels.

Test de la page

Lancez le test de la page (Tester une page parmi les boutons d'accès rapide).
  1. La page s'affiche sous le navigateur.
  2. Redimensionnez le navigateur : l'agencement mobile est affiché.
  3. Fermez le navigateur.
Maintenant, nous pouvons tester immédiatement le site sur un téléphone ou une tablette :
  1. Déroulez l'option depuis les boutons d'accès rapide et sélectionnez "Tester depuis un téléphone (accès via un QR Code)".
  2. Une fenêtre proposant un QR code à flasher avec votre mobile.
  3. Une fois le code flashé, le site s'affiche sur le mobile.
  4. L'agencement "Mobile" est automatiquement affiché sur le mobile.
Agencements et champs spécifiques

Page manipulée

Ouvrez la page PAGE_Adaptations.
Page sous l'éditeur
Cette page contient différents champs :
  • un titre en haut,
  • un champ Carte pour indiquer où se trouve le restaurant,
  • un champ Zone de texte riche à côté de la carte contenant l'adresse du restaurant,
  • un champ Image à droite avec la publicité,
  • un champ Zone répétée en bas affichant les avis.
Nous allons tout de suite lancer un premier test de la page pour voir son comportement lors du redimensionnement du navigateur.
  1. Lancez le test de la page (Tester une page parmi les boutons d'accès rapide).
  2. La page apparaît en test telle qu'elle était sous l'éditeur en mode Bureau.
    Avertissement
    Cette page utilise un champ Carte. En test comme en déploiement, il est nécessaire d'utiliser une clé Google. Dans le cas contraire, une erreur s'affiche dans le champ Carte. Pour obtenir cette clé, consultez l'aide en ligne.
    Si vous possédez une clé, indiquez-la dans l'onglet "Projet" de la fenêtre de description du projet.
  3. Réduisez la taille de votre navigateur pour visualiser le comportement en mobile.
    Page mobile
Ce comportement n'est pas celui attendu. En mobile, il faudrait que :
  • l'image de publicité disparaisse,
  • la carte soit réduite et positionnée sous la description.
  • la zone répétée affiche les informations sur 1 seule colonne.

Création d'un agencement mobile

Nous allons tout d'abord créer un nouvel agencement mobile :
  1. Sous le volet "Page", dans le groupe "Agencements", déroulez "Agencements" et sélectionnez "Ajouter un agencement".
  2. Dans la fenêtre qui s'affiche, un agencement adapté aux téléphones et aux tablettes est automatiquement proposé. Validez la fenêtre.
  3. Dans notre exemple, deux agencements sont créés. Ces agencements sont affichés sous forme de vignettes, à droite de la page "PAGE_Adaptations".
    L'agencement mobile est automatiquement sélectionné et affiché dans la page.

Mise en page dans l'agencement mobile

Pour mettre en page notre agencement, nous allons agrandir la page en hauteur :
  1. Cliquez sur le cadre représentant la page. Dans la barre de message la taille de la page est indiquée : 320 x 616.
  2. Modifiez la valeur de la hauteur de la page en remplaçant 616 par 1024.
Nous allons également modifier les marges de la page en mode agencement mobile. En effet, les marges de la page version "Bureau" sont conservées, et elles sont tout de même trop grandes pour la version mobile. Pour réduire les marges :
  1. Affichez la fenêtre de description de la page : sous le volet "Page", dans le groupe "Description", cliquez sur "Description".
  2. Dans l'onglet "Style", dans la zone "Elément", sélectionnez "Marges".
  3. Remplacer la valeur "20px" par "10px".
  4. Validez.
Pour y voir plus clair, positionnez les différents champs dans la zone à droite de la page. Pour chaque champ (sauf le titre) :
  1. Sélectionnez le champ voulu.
  2. Déplacez le champ vers la zone à droite de la page.
Des zones rouges peuvent apparaître, indiquant des problèmes de positionnement des champs. C'est normal. Nous allons maintenant traiter les champs un par un.
Pour faire des adaptations de positionnement et/ou de taille des champs simples (libellé, champs de saisie, image, carte, etc.), rien de plus facile ! Ces modifications sont réalisées directement dans l'éditeur (comme pour n'importe quelle autre modification) et sont automatiquement effectuées uniquement dans l'agencement en cours (grâce à la dissociation automatique que nous avons déjà vu dans cette leçon).
Le champ Image est inutile en mobile. Nous allons donc le rendre invisible dans l'agencement mobile :
  1. Sélectionnez le champ Image.
  2. Dans le menu contextuel du champ, sélectionnez l'option "Agencements .. Visibilité par agencement" et désélectionnez l'option "Mobile (Smartphone)".
  3. Le champ disparaît de l'agencement mobile.
    Remarque : La visibilité d'un champ se définit habituellement dans l'onglet "UI" de la fenêtre de description du champ.
Nous allons ensuite déplacer les différents champs pour les positionner dans la page :
  1. Positionnez sous le titre, la zone de texte, en la redimensionnant pour qu'elle rentre dans la page.
  2. De la même manière, positionnez le champ Carte sous le texte, en redimensionnant le champ.
  3. A la suite, redimensionnez et positionnez le champ "Avis". Vous obtenez l'interface suivante :
  4. Positionnez en dernier le champ Zone répétée.
    La zone de répétition de ce champ est trop grande dans l'agencement mobile. Nous allons donc voir comment gérer la taille de ce champ en fonction des agencements.

Comment adapter la taille du champ et des répétitions du champ Zone répétée ?

L'affichage du champ Zone répétée doit être différent selon l'agencement utilisé. Dans notre cas, dans l'agencement Bureau, le champ Zone répétée doit être composé de deux colonnes et en mode Mobile, une seule colonne doit être affichée. Pour cela, il est nécessaire de "dissocier" le nombre de colonnes affiché par le champ Zone répétée.
Pour dissocier le nombre de colonnes affichées par le champ Zone répétée :
  1. Sélectionnez le champ Zone Répétée dans l'agencement mobile.
  2. Affichez la fenêtre de description du champ.
  3. Dans l'onglet "Détail", cliquez sur . Dans la fenêtre qui s'affiche :
    • Cochez l'option "Dissocier la valeur par agencement".
    • Conservez la valeur 2 pour l'agencement Bureau.
    • Modifiez la valeur 2 par 1 pour l'agencement mobile.
  4. Validez.
  5. Validez la fenêtre de description du champ.
  6. Le champ Zone répétée présent dans l'agencement mobile apparaît avec une seule colonne. Vous pouvez le redimensionner pour qu'il rentre entièrement dans la page.
Enregistrez la page (Ctrl + S).

Test de la page et du projet

Lancez le test de la page (Tester une page parmi les boutons d'accès rapide).
  1. La page s'affiche sous le navigateur.
  2. Redimensionnez le navigateur : l'agencement mobile est affiché.
Fermez le navigateur.
Maintenant, nous pouvons tester immédiatement le site sur un téléphone ou une tablette :
  1. Déroulez l'option depuis les boutons d'accès rapide et sélectionnez "Tester depuis un téléphone (accès via un QR Code)".
  2. Une fenêtre s'ouvre, proposant un QR code à flasher avec votre mobile.
  3. Une fois le code flashé, le site s'affiche sur le mobile.
  4. L'agencement "Mobile" est automatiquement affiché sur le mobile.
En résumé
Dans cette leçon, nous avons créé et manipulé des agencements pour mettre en page des pages relativement simples.
La prochaine leçon nous permettra de gérer le cas particulier d'un menu dans une page avec agencement.
Projet corrigé :
Vous voulez vérifier le résultat de vos manipulations ? Un projet corrigé est disponible. Ce projet contient la correction des différentes manipulations effectuées dans cette leçon. Pour ouvrir le projet corrigé, dans la page d'accueil, cliquez sur "Tutoriel" puis dans la zone "Tuto - Agencements WEBDEV", double-cliquez sur "Agencements - Corrigés".
SommaireLeçon suivante
Version minimum requise
  • Version 2024
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 13/12/2023

Signaler une erreur ou faire une suggestion | Aide en ligne locale