Tuto - Les agencements WEBDEV

Les concepts dans WEBDEV

• 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.

• 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.

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.

Page manipulée

• 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.

1. Lancez le test de la 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.

Création d'un 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

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.
   

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".
   

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

1. La page s'affiche sous le navigateur.
2. Redimensionnez le navigateur : l'agencement mobile est affiché.
3. Fermez le navigateur.

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.
   

Page manipulée

• 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.

1. Lancez le test de la 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 de la fonction CarteLicenceGgl.
   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.
   

• 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

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

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.
   

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.

1. Sélectionnez le champ voulu.
2. Déplacez le champ vers la zone à droite de la page.
   

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.

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 ?

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.
   

Test de la page et du projet

Lancez le test de la 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é.
   

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.