DOCUMENTATION EN LIGNE
DE WINDEVWEBDEV ET WINDEV MOBILE

Aide / Editeurs / Editeur de fenêtres et de pages / Editeur de pages / Responsive Web Design
  • Présentation
  • Transformation d'un modèle de pages
  • Transformation de la page modèle
  • Gestion d'une barre de navigation
  • Mise en page des tranches Tablette et Mobile
  • Transformation d'un modèle de pages héritant d'un modèle de pages
  • Transformation d'une page avec un champ Zone répétée
  • Transformation de la page
  • Vérification de la mise en page pour chaque tranche
  • Test sous le navigateur
  • Transformation d'une page avec des champs de saisie
  • Transformation d'une page avec une Zone de texte riche
  • Transformation d'une page avec un champ HTML programmé
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadWidget IOSApple WatchMac CatalystUniversal Windows 10 App
Autres
Procédures stockées
Avertissement
En version 28, le mode d'édition des pages initialement appelé "Responsive Web Design : mise en page par tranche" devient "Tranches (Responsive historique pour compatibilité)".
Le mode "Responsive (zoning et agencements)" devient le mode recommandé pour les nouvelles créations. Pour plus de détails, consultez Changement du mode d'édition des sites mobile friendly.
Cette page de documentation est adaptée aux nouvelles options de la version 28.
Présentation
Cette page d'aide présente comment appliquer le mode Responsive Web Design à une page WEBDEV existante.
Les manipulations sont basées sur l'exemple "WW_Precilia_sport", exemple fourni en standard avec WEBDEV.
Cette page présente comment :
Remarques :
  • Ces manipulations sont effectuées sur l'exemple WW_Precilia_sport. La méthode générale décrite ici peut s'appliquer directement à vos propres pages (avec une interprétation dépendant du contenu de la page).
  • Pour optimiser la gestion du mode Responsive Web Design, n'hésitez pas à consulter :
Transformation d'un modèle de pages
Les différentes étapes pour transformer le modèle de pages "PAGEMOD_Principal" de l'exemple WW_Precilia_sport sont les suivantes :

Transformation de la page modèle

Pour utiliser le mode "Responsive Web Design" sur le modèle de pages :
  1. Ouvrez le projet si nécessaire.
  2. Affichez la page modèle "PAGEMOD_Principal" sous l'éditeur.
  3. Affichez la fenêtre de description de la page : affichez le menu contextuel (clic droit) et sélectionnez l'option "Description".
  4. Dans l'onglet "Général", sélectionnez l'option "Tranches (Responsive historique pour compatibilité)".
  5. Validez.
Remarque : Le modèle ou la page est par défaut dans le mode Desktop First.
L'éditeur se transforme : un nouveau bandeau spécifique au mode d'édition "Responsive Web Design" apparaît.
Par défaut, 3 tranches sont définies :
  • Bureau (en bleu).
  • Tablette (en vert).
  • Mobile (en jaune).
Rappel : une tranche représente une taille de navigateur pour un appareil spécifique.
Par défaut, la tranche "Bureau" (tranche bleue) est sélectionnée. La présentation est correcte.
Cette page contient un menu déroulant : nous allons le transformer pour le mettre dans un champ Barre de navigation.

Gestion d'une barre de navigation

Pour gérer un champ Barre de navigation :
  1. Ne changez pas de tranche : la tranche "bureau" doit être sélectionnée (si nécessaire, cliquez sur l'entête de la tranche).
  2. Insérez un champ Barre de navigation : sous le volet "Création", dans le groupe "Navigation", cliquez sur "Barre de nav.". Cliquez ensuite au milieu de la page. Le champ apparaît en création. Ce champ est composé de 3 parties :
    • à gauche, une partie représentant le menu réduit (communément appelé "Hamburger").
      Remarque : Dans la tranche "Bureau", le bouton "Hamburger" n'est pas visible. Il apparaît uniquement dans les tranches inférieures.
    • au centre, la partie recevant le menu classique déroulant.
      Par défaut, un menu déroulant est déjà présent dans cette zone. Dans notre exemple, supprimez ce menu. Nous le remplacerons par le menu existant.
    • à droite, une partie additionnelle pouvant accueillir des liens ou champs additionnels.
  3. Réduisez légèrement la largeur de la partie de gauche qui accueille le hamburger :
    • Survolez le carré rouge situé à droite de la zone. Le curseur de la souris se transforme en double-flèche.
    • Cliquez sur le carré rouge.
    • Maintenez le bouton gauche de la souris enfoncé et appuyez sur la touche Maj.
    • Diminuez la zone.
  4. Déplacez le menu de la page dans la partie centrale du champ Barre de navigation.
  5. Réduisez si nécessaire la partie centrale du champ Barre de navigation.
  6. Déplacez les champs concernant le panier dans la partie droite de la barre de navigation.
  7. Replacez le champ Barre de navigation sur le bandeau noir. Vous obtenez l'interface suivante :
Par défaut, dans notre exemple, le menu est horizontal. Il est possible de modifier son orientation. L'orientation du menu peut être différente dans chaque tranche. Par exemple :
  • un menu horizontal dans la tranche "Bureau".
  • un menu vertical (accessible depuis le hamburger) dans les tranches "Tablette" et "Mobile".
Dans notre exemple, nous allons laisser le menu horizontal dans la tranche "Bureau". Par contre, nous allons modifier son orientation dans les tranches "Tablette" et "Mobile" : nous allons passer le menu en vertical dans ces tranches.
Pour modifier l'orientation du menu dans la tranche "Tablette" :
  1. Passez dans la tranche "Tablette" : cliquez sur l'entête "Tablette".
  2. Cliquez dans la zone centrale de la barre de navigation. Cette zone est hachurée.
  3. Cliquez à nouveau dans la partie hachurée : le menu déroulant apparaît. Il est automatiquement affiché en mode vertical.
  4. Appuyez sur la touche "Echap" pour sortir de l'édition de la zone centrale (si nécessaire, cliquez préalablement sur le menu pour le sélectionner).
  5. Passez ensuite sur la tranche "Mobile" : vous pouvez observer que le menu est identique à celui de la tranche "Tablette". En effet, les manipulations effectuées dans les tranches supérieures sont automatiquement reportées dans les tranches inférieures.

Mise en page des tranches Tablette et Mobile

Nous allons maintenant analyser les tranches suivantes (Tablette et Mobile). Pour cela, vous pouvez :
  • soit cliquer directement sur les entêtes de couleur représentant chaque tranche.
  • soit utiliser le petit symbole "double-flèche" dans la bulle et vous déplacer vers la gauche (poignée du navigateur d'édition).
Votre page et les champs à l'intérieur se déplaceront et évolueront tout au long de ce changement de taille du navigateur.
  • Si un champ est mal aligné ou déborde dans une tranche, n'hésitez pas à modifier sa largeur, sa hauteur et ses positions X et Y dans cette tranche.
  • Pensez à utiliser la touche Maj tout en déplaçant le champ à la souris afin de ne pas suivre le magnétisme de la grille.
Lors du déplacement de la tranche Bureau vers la tranche Mobile, nous nous apercevons que la représentation de la page dans la tranche Tablette ou Mobile est altérée.
  • Le menu en haut n'est plus du tout visible. Ceci est tout à fait normal : en effet, le menu est accessible en passant par le hamburger (bouton qui apparaît dans la partie de droite de la barre de navigation).
  • Le bas de la page nécessite quelques ajustements. Il est nécessaire de déplacer et réaligner les champs dans chaque tranche. En effet, lors du passage de la tranche Tablette à Mobile, certains champs sont tronqués et les images sont moins visibles.
Nous allons donc faire des corrections dans les tranches Bureau, Tablette et Mobile.
Par exemple, si vous sélectionnez la tranche Mobile :
Les manipulations possibles pour corriger ces problèmes sont les suivantes :
  • Pour le texte : si le texte déborde, n'hésitez pas à changer la taille de la police de caractères dans le style du champ. Si cette opération n'est pas suffisante, agrandissez la taille du champ Libellé. Au besoin, déplacez les libellés les uns en dessous des autres.
  • Pour les images : changez leurs paramètres d'ancrage pour qu'elles ne soient pas déformées.
    Pour cela, affichez le menu contextuel de l'image (clic droit) et sélectionnez "Ancrage". Dans la fenêtre qui s'affiche, choisissez les options "Largeur fixe" et "Hauteur fixe". Ainsi, l'image conservera ses proportions d'origine quelle que soit la tranche active.
Après modification, la tranche Mobile devient :
Répétez cette opération pour l'image du panier en haut à droite et pour l'image du logo en haut à gauche.
La page modèle est terminée.

Transformation d'un modèle de pages héritant d'un modèle de pages

Nous allons maintenant passer au second modèle de pages du projet, le modèle "PAGEMOD_Contenu". Ce modèle hérite du modèle "PAGEMOD_Principal". Il est donc tout simplement nécessaire de faire une mise à jour de ce modèle par rapport au modèle précédent.
  1. Afficher le modèle "PAGEMOD_Contenu" sous l'éditeur.
  2. Sous le volet "Page", dans le groupe "Description", déroulez "Modèles" et sélectionnez l'option "Liste des modèles utilisés".
  3. Appuyez ensuite sur le bouton de mise à jour à droite (double flèche bleue).
La même opération peut être effectuée pour le modèle "PAGEMOD_PANIER" en le mettant à jour du modèle principal.
Transformation d'une page avec un champ Zone répétée
Nous allons travailler sur la page "boutique" de l'exemple WW_Precilia_sport.

Transformation de la page

Pour utiliser le mode "Responsive Web Design" sur la page :
  1. Affichez la page "boutique" sous l'éditeur.
  2. Sous le volet "Page", dans le groupe "Description", déroulez "Modèles" et sélectionnez "Liste des modèles utilisés".
  3. Actualisez la page avec le modèle.
La page est automatiquement passée en mode Responsive Web Design puisqu'elle hérite d'un modèle de page en mode Responsive Web Design. Vous pouvez le vérifier dans la description de la page : dans le menu contextuel (clic droit), sélectionnez l'option "Description".
L'option "Edition "Responsive Web Design"" n'est pas modifiable. Pour changer cette option, il faut :
  • soit modifier le modèle de pages associé.
  • soit dissocier le modèle ou supprimer le modèle de la page.

Vérification de la mise en page pour chaque tranche

L'étape suivante consiste à vérifier la représentation de la page dans chaque tranche.
Dans cet exemple, l'affichage est correct pour la tranche "Bureau" ainsi que pour la tranche "Tablette". Par contre, pour la tranche "Mobile", les champs sont un peu rétrécis.
Cette page contient un champ Zone répétée défini sur 2 colonnes. La largeur sur 2 colonnes est correcte dans la tranche "Bureau" ou "Tablette". Par contre, il faut afficher moins de colonnes dans la tranche "Mobile".
WEBDEV permet de paramétrer le nombre de colonnes d'un champ Zone répétée par tranche.
Remarque : Dans cet exemple, nous travaillons sur un champ Zone répétée. Dans le cas d'un champ Table, il est également possible de masquer ou d'afficher des colonnes différentes par tranche.
Pour modifier le nombre de colonnes du champ Zone répétée pour une tranche :
  1. Sélectionnez tout d'abord la tranche : dans notre cas, sélectionnez la tranche "Bureau".
  2. Affichez le menu contextuel du champ (clic droit) puis sélectionnez l'option "Description".
  3. Dans l'onglet "Détail", dans la partie "Paramètres du mode d'affichage", sélectionnez "Nombre de colonnes par tranche".
  4. Saisissez le nombre de colonnes : 2 (2 colonnes pour la tranche bureau) et validez.
  5. Répétez ces opérations pour la tranche "Tablette" : choisissez également 2 colonnes pour la tranche "Tablette".
  6. Répétez ces opérations pour la tranche "Mobile" : choisissez 1 colonne uniquement pour la tranche "Mobile".
Astuce : pour ne pas répéter ces opérations, il est possible de paramétrer le nombre de colonnes pour toutes les tranches en une seule opération :
  • Cliquez sur l'icône symbolisant le Responsive Web Design :
  • Dans la fenêtre qui s'affiche, renseignez les différentes valeurs pour chaque tranche.
Conseils
  • Ne pas hésiter à redimensionner dans chaque tranche la largeur de la colonne du champ Zone répétée afin d'occuper au mieux l'espace horizontal de la page.
  • Ne pas oublier de déplacer ou de réaligner les champs à l'intérieur du champ Zone répétée si la colonne a changé de taille.
Dans la tranche "Bureau" (ou "Tablette"), vous obtenez :
Dans la tranche "Mobile", vous obtenez :

Test sous le navigateur

Vous pouvez tester le résultat final dans un navigateur :
  • Exécution en mode Bureau :
  • Exécution en mode Tablette :
  • Exécution en mode Mobile :
Le champ Zone répétée s'adapte bien selon la tranche.
Transformation d'une page avec des champs de saisie
Nous allons maintenant manipuler la page "Precilia_identification". Cette page est :
  • basée sur le modèle "pagemod_panier".
  • composée de 2 parties verticales (2 modèles de champs côte à côte).
Première étape : Mettre à niveau la page avec le modèle (afin que la page passe en mode Responsive Web Design) : sous le volet "Page", dans le groupe "Description", déroulez "Modèles" et sélectionnez l'option "Liste des modèles utilisés".
Seconde étape : Vérifier comment se comporte la page en fonction de la tranche sélectionnée.
  • Dans les tranches "Bureau" et "Tablette", la page est affichée correctement.
  • Dans la tranche "Mobile", les champs ne sont pas assez larges : il serait plus judicieux de réorganiser la page en hauteur.
Nous allons donc passer sur la tranche "Mobile" et déplacer les champs pour obtenir le résultat final suivant :
Pour obtenir ce résultat : la page est constituée de 2 modèles de champs. Ils sont déjà surchargés. Il suffit donc de :
  • déplacer ces modèles de champs.
  • changer la hauteur et la largeur des modèles de champs.
  • réorganiser les champs à l'intérieur des modèles de champs.
Astuce : Le libellé de chaque champ n'est pas intégré au champ de saisie : il est ainsi facile de positionner ces deux éléments séparément.
Transformation d'une page avec une Zone de texte riche
Nous allons maintenant transformer la page "spa". Cette page contient un champ Zone de texte riche.
Première étape : Mettre à niveau la page avec le modèle (afin que la page passe en mode Responsive Web Design) : sous le volet "Page", dans le groupe "Description", déroulez "Modèles" et sélectionnez l'option "Liste des modèles utilisés". Cliquez sur le bouton de mise à jour à droite (double flèche bleue) puis validez.
Seconde étape : Aligner et modifier la largeur du champ Zone de texte riche au mieux dans chaque tranche. La page va s'étirer naturellement en hauteur au moment de l'exécution dans le navigateur : il y aura un ascenseur vertical pour lister le contenu de la Zone de texte riche.
Conseil : Ne pas oublier de modifier la marge interne du champ Zone de texte riche afin de ne pas tronquer ou chevaucher les champs en dessous.
Transformation d'une page avec un champ HTML programmé
La page "contact" affiche les coordonnées du contact ainsi qu'une carte Google affichée dans un champ HTML rempli par programmation.
Première étape : Mettre à niveau la page avec le modèle (afin que la page passe en mode Responsive Web Design) : sous le volet "Page", dans le groupe "Description", déroulez "Modèles" et sélectionnez l'option "Liste des modèles utilisés". Cliquez sur le bouton de mise à jour à droite (double flèche bleue) puis validez.
Seconde étape : Test de la page :
  • Exécution en mode "Bureau" :
  • Exécution en mode "Tablette" :
  • Exécution en mode "Mobile" :
La carte est tronquée dans les tranches Mobile et Tablette. Il faut donc vérifier la largeur du champ HTML dans chaque tranche.
En effet, le champ HTML déborde de la page dans la tranche "Tablette" et la tranche "Mobile". Il faut :
  • le redimensionner.
  • modifier le code HTML du champ car la carte dessinée a une taille fixe imposée (largeur 604, hauteur 300) :
    Il faut remplacer les valeurs 604 et 300 (respectivement largeur et hauteur) par 100% et 100% de manière à conserver la même proportion pour le contenu du champ HTML.
Conseil : D'une manière générale,
  • évitez de travailler avec des tailles fixes en pixels sinon l'affichage risque d'être tronqué dans les tranches inférieures.
  • utilisez les champs WEBDEV plutôt que d'utiliser le champ HTML.
Version minimum requise
  • Version 21
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 14/12/2022

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