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
  • Principe de création d'une page "Responsive historique" en WEBDEV
  • Mise en place
  • Création d'une page en mode "Responsive historique"
  • Mise en place
  • Les différents éléments de l'éditeur
  • Création de champs dans une page en mode Responsive historique
  • Exemple pratique de gestion des ancrages dans une page Responsive historique
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
Les sites Web peuvent être visualisés sur de nombreuses plateformes : mobiles, tablettes, PC, etc. Sur chaque matériel, la taille du navigateur change et donc l'espace disponible pour afficher les données.
La méthode du "Responsive Web Design" consiste à créer une seule et même page qui s'adapte automatiquement selon la plateforme sur laquelle cette page est affichée.
WEBDEV propose de créer des pages utilisant la méthode du "Responsive Web Design" et permet d'optimiser l'affichage de la page sur différentes plateformes grâce à plusieurs fonctionnalités de l'éditeur. Ces pages utilisent le mode "Responsive historique" de WEBDEV.
Principe de création d'une page "Responsive historique" en WEBDEV

Mise en place

Pour créer une page "Responsive historique", il est conseillé de :
Remarques :
Création d'une page en mode "Responsive historique"

Mise en place

Pour créer une nouvelle page en mode "Responsive historique" :
  1. Cliquez sur parmi les boutons d'accès rapide.
    • La fenêtre de création d'un nouvel élément s'affiche : cliquez sur "Page" puis sur "Page".
    • L'assistant de création d'une page se lance.
  2. Sélectionnez le type de page à créer : "Vierge" et validez. La page est automatiquement créée et affichée sous l'éditeur.
  3. Affichez la fenêtre de description de la page : Sous le volet "Page", dans le groupe "Description", cliquez sur "Description".
  4. Dans l'onglet "Général", sélectionnez le mode d'édition "Tranches (Responsive historique pour compatibilité)".
  5. Validez la fenêtre de description.
  6. Les différentes tranches apparaissent dans la page affichée sous l'éditeur. Par défaut, le mode utilisé est le mode "Desktop First - Edition en taille max.".
  7. Configurez le mode d'édition du responsive :
    • Affichez le menu contextuel de la tranche "Bureau" (clic droit sur la zone bleue "Bureau par défaut").
    • Ce menu propose les options concernant le sens de propagation des surcharges par tranche. Les possibilités sont les suivantes :
      • Desktop First - Edition en taille min : La page est définie dans sa version la plus large Bureau qui sert de référence, puis ensuite on diminue vers les tranches inférieures Tablette et Mobile. Chaque tranche sera éditée dans l'éditeur de pages dans sa taille minimale. Ainsi, en cliquant sur la tranche Tablette, la zone d'édition correspondra à la tranche Mobile, correspondant à la taille minimale de la tranche Tablette.
      • Desktop First - Edition en taille max : La page est définie dans sa version la plus large Bureau qui sert de référence, puis ensuite on diminue vers les tranches inférieures Tablette et Mobile. Chaque tranche sera éditée dans l'éditeur de pages dans sa taille maximale. Ainsi, en cliquant sur la tranche Tablette, la zone d'édition correspondra à la tranche Tablette, correspondant à la taille maximale de la tranche Tablette. Les surcharges seront propagées
      • Mobile First : La page est définie dans sa version la plus petite Mobile qui sert de référence, puis ensuite on augmente vers les tranches supérieures Tablette et Bureau.
Dans notre exemple, la page est définie en mode Desktop First.
Remarque : Les pages utilisant le mode "Responsive Web Design" sont en HTML 5.

Les différents éléments de l'éditeur

La page créée en mode "Responsive Web Design" est affichée sous un éditeur utilisant des options spécifiques (ici, page créée en mode "Desktop First : Edition en taille min")  :
  • 1. Barre du ruban contenant les options spécifiques aux "Tranches".
  • 2. Réglette des tranches. Cette barre contient différentes tranches représentant les résolutions des matériels les plus courants. Il est possible de modifier ces tranches, de les supprimer ou d'en ajouter. Un clic sur une tranche permet de visualiser la page dans cette tranche.
  • 3. Poignée du navigateur d'édition. Cette poignée permet de redimensionner la taille du navigateur sous l'éditeur afin de visualiser dynamiquement l'adaptation des champs à la taille du navigateur. Pour diminuer ou augmenter la taille du navigateur sous l'éditeur, il suffit de cliquer sur la double flèche, maintenir le bouton de la souris enfoncé et de se déplacer horizontalement.
  • 4. Grille (en colonnes) permettant de positionner les champs dans la page. Cette grille est une aide au positionnement des champs. Elle n'a aucune existence réelle dans la page Web. La grille permet un alignement plus facile et permet le calcul automatique du positionnement des champs. Cette grille peut se désactiver lors du déplacement des champs en utilisant la touche Maj.

Création de champs dans une page en mode Responsive historique

  • Les champs créés dans une page en mode "Responsive historique" sont automatiquement créés dans la plus grande tranche ou la plus petite selon le mode Desktop First ou Mobile First.
  • Certains sont adaptés au mode "Responsive historique" :
    • Le champ Barre de navigation.
    • Le champ Zone répétée : adaptation du nombre de colonnes en fonction de la tranche.
    • Le champ Table : adaptation des colonnes (masquage ou non) de la table en fonction de la tranche.
    • Le champ Tableau de bord : adaptation du nombre de colonnes en fonction de la tranche.
Exemple pratique de gestion des ancrages dans une page Responsive historique
Nous allons paramétrer les ancrages pour la page suivante (notre page exemple est dans le mode Desktop First) :
Les champs ont été créés sur la page avec les options d'ancrage par défaut.
Utilisons le navigateur d'édition pour visualiser le comportement des champs lors du redimensionnement du navigateur.
Nous nous apercevons rapidement que les images dans les 2 champs en haut de l'écran sont tronquées.
Si nous continuons de diminuer la largeur du navigateur, le titre apparaît sur plusieurs lignes.
Pour solutionner ces problèmes, il suffit d'agir sur l'ancrage des champs :
  1. Ancrage du champ Image en haut à gauche :
    • L'ancrage en X "Gauche" est conservé : le champ conserve sa position proportionnelle au bord gauche de la page.
    • La largeur utilise la taille d'édition. Ainsi, le champ ne peut être tronqué.
  2. Ancrage du champ Image en haut à droite :
    • L'ancrage en X devient "Droite" : le champ conserve sa position proportionnelle au bord droit de la page.
    • La largeur utilise la taille d'édition. Ainsi, le champ ne peut être tronqué.
  3. Ancrage du titre :
    • L'ancrage en X devient "Centré" : le champ reste centré dans la page quelle que soit la largeur de la page.
    • La largeur utilise la taille d'édition. Ainsi, le champ ne peut être tronqué ou mis sur plusieurs lignes.
  4. Ancrage des champs Libellé et Graphe : Cet ancrage n'est pas modifié. La taille des champs diminue proportionnellement à la taille de la page. L'espace entre les champs Libellé et Graphe est conservé proportionnellement (par défaut, un ancrage en X à gauche).
Le résultat est le suivant :
  • Tranche Bureau :
  • En redimensionnant (tranche Tablette) :
Mode avancé : Exemple de surcharge : il est également possible de surcharger la position du champ Graphe et du champ Libellé en mode Mobile :
Liste des exemples associés :
WW_Presentation_Application_Mobile Exemples complets (WEBDEV) : WW_Presentation_Application_Mobile
[ + ] Cet exemple est un site web responsive qui présente une application Mobile.
Il se compose d'une page statique totalement responsive.
Version minimum requise
  • Version 21
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire

Dernière modification : 04/05/2023

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