PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

  • Présentation
  • Principe de création d'une page "Responsive Web Design" en WEBDEV
  • Mise en place
  • Création d'une page en mode "Responsive Web Design"
  • Mise en place
  • Les différents éléments de l'éditeur
  • Création de champs dans une page en mode Responsive Web Design
  • Exemple pratique de gestion des ancrages dans une page Responsive Web Design
WINDEV
WindowsLinuxUniversal Windows 10 AppJavaEtats et RequêtesCode Utilisateur (MCU)
WEBDEV
WindowsLinuxPHPWEBDEV - Code Navigateur
WINDEV Mobile
AndroidWidget AndroidiPhone/iPadApple WatchUniversal Windows 10 AppWindows Mobile
Autres
Procédures stockées
Présentation
Désormais, les sites Web peuvent être visualisés sur de nombreuses plateformes : mobiles, tablettes, PC, ... 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.
Principe de création d'une page "Responsive Web Design" en WEBDEV

Mise en place

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

Mise en place

Pour créer une nouvelle page en mode "Responsive Web Design" :
  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 : "Page vierge" de type "Responsive Web Design".
  3. La page va être créée automatiquement en mode Desktop First.Sélectionnez le mode d'édition :
    • Desktop First : 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.
    • Versions 22 et supérieures
      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.
      Nouveauté 22
      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.
      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.
  4. Validez l'assistant. La page est automatiquement créée et affichée sous l'éditeur.
Remarques :
  • Les pages utilisant le mode "Responsive Web Design" sont en HTML 5.
  • Il est possible de visualiser et de modifier le mode d'édition des pages depuis la fenêtre de description de la page, onglet "Général".
    Le mode "Responsive Web Design" correspond à l'option "Edition "Responsive Web Design", positionnement par grille fluide et mises en page multiples".

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 :
  • 1. Barre du ruban contenant les options spécifiques au "Responsive Web Design".
  • 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 SHIFT.

Création de champs dans une page en mode Responsive Web Design

  • Les champs créés dans une page en mode "Responsive Web Design" 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 Web Design" :
    • 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.
    • Versions 22 et supérieures
      Le champ Tableau de bord : adaptation du nombre de colonnes en fonction de la tranche.
      Nouveauté 22
      Le champ Tableau de bord : adaptation du nombre de colonnes 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 Web Design
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