PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

  • Ce que vous allez apprendre dans cette leçon
  • Présentation
  • Ma première page en mode Responsive Web Design
  • Création d'une page
  • Fluidité et Responsive Web Design
  • Tranches de résolution
  • Comment adapter les champs aux différentes tranches ?
Leçon 8.2. Responsive Web Design et WEBDEV
Ce que vous allez apprendre dans cette leçon
  • Outils disponibles dans WEBDEV.
  • Grille de positionnement.
  • Tranches de résolution.
  • Surcharges.

Durée estimée : 30 mn
Leçon précédenteSommaireLeçon suivante
Présentation
Pour connaître les moyens à votre disposition dans WEBDEV pour créer des sites en mode Responsive Web Design, nous allons utiliser un projet exemple. Vous pourrez ainsi réaliser toutes les manipulations et mieux comprendre les outils à votre disposition.
  • Nous vous avons préparé un exemple simple :
    1. Lancez WEBDEV 23 (si ce n'est déjà fait). Si nécessaire, fermez le projet en cours pour faire apparaître la fenêtre de bienvenue.
    2. Ouvrez le projet "WW_Responsive". Pour cela, dans la fenêtre de bienvenue, cliquez sur "Cours d'auto-formation" et sélectionnez le projet "Responsive Web Design (Exercice)".

      Astuce

      Si la fenêtre de bienvenue n'est pas affichée, sous le volet "Accueil", dans le groupe "Aide en ligne", déroulez "Guide d'Auto-formation" puis sélectionnez l'option "Responsive Web Design (Exercice)".
Ma première page en mode Responsive Web Design

Création d'une page

  • En WEBDEV, la création d'une page en mode Responsive est réalisée de la même façon que les autres pages WEBDEV :
    1. Créez une nouvelle page vierge.
      • Dans la fenêtre de création d'un nouvel élément, cliquez sur "Page" puis sur "Page".
        Remarque : Pour afficher la fenêtre de création d'un nouvel élément, cliquez sur parmi les boutons d'accès rapide.
      • L'assistant de création d'une page se lance.
      • Cliquez sur "Page Vierge - Responsive Web Design" et validez l'assistant.

        Note

        Vous pouvez également choisir d'utiliser un des modèles de pages Responsive livré en standard avec WEBDEV.
        Ici, nous allons créer une page vierge pour bien comprendre le principe du Responsive Web Design.
    2. WEBDEV affiche une fenêtre permettant de choisir la largeur principale utilisée pour le Responsive Web Design. Dans cet exemple, nous allons commencer par créer une page pour le mode "Bureau".
    3. Sélectionnez "Edition "Desktop First"" et validez.
    4. La fenêtre de sauvegarde est affichée. Saisissez le titre de la page : "Responsive". Le nom "PAGE_Responsive" est automatiquement proposé.
    5. Validez.
    6. La page est créée sous l'éditeur. Cette page est affichée en mode "Bureau".

Note

La nouvelle page est affichée en mode "Desktop first". Une option de menu permet d'utiliser si nécessaire le mode "Mobile first".

Fluidité et Responsive Web Design

Nous allons tout d'abord voir comment se comporte la page sous l'éditeur de WEBDEV en créant un champ Libellé.
  • Pour créer le champ Libellé :
    1. Sous le volet "Création", dans le groupe "Champs usuels", cliquez sur "ABC".
    2. Cliquez ensuite dans la page pour créer le champ.
    3. Appuyez sur la touche F7 trois fois pour afficher le cadre des champs.
Le premier principe du responsive est la fluidité : lorsque le navigateur est réduit, les champs de la page vont se réduire d'autant.
  • Pour tester cette fluidité, sous l'éditeur :
    1. Utilisez le curseur situé en haut de la page pour diminuer la taille du navigateur.
    2. Le champ Libellé que vous venez de créer se réduit proportionnellement.

Tranches de résolution

Le curseur que vous venez d'utiliser fait partie des tranches de résolution, second principe du Responsive WEBDEV.
Les tranches de résolution permettent de matérialiser les résolutions des différents terminaux.
  • Examinons le fonctionnement de ces tranches de résolution.
    1. Dans le projet "WW_Responsive", ouvrez la page PAGE_Adaptations.
    2. Au-dessus de la page, trois tranches apparaissent :
    • En bleu, la tranche Bureau, pour tous les affichages sur un écran de bureau,
    • En vert, la tranche Tablette correspondant à l'affichage sur tablettes,
    • En jaune, la tranche Mobile pour l'affichage sur les Smartphones.
Les tranches de résolutions vous permettent de définir les mises en page que vous souhaitez pour chaque type de matériel.

Note

Vous pouvez bien entendu ajouter des tranches de résolutions personnalisées pour gérer plus finement les différents matériels.
Pour changer de tranche de résolution, vous pouvez soit utiliser le curseur, soit directement cliquer sur la tranche de résolution.

Attention

Le Responsive WEB Design avec WEBDEV utilise par défaut le concept du "Desktop First". Dans ce mode, la création des champs s'effectue toujours dans la tranche de résolution Bureau. Il est ensuite nécessaire d'adapter l'interface des tranches plus petites.
La tranche Bureau correspond à la base de la page, sans aucune adaptation.
Pour faire des adaptations dans les autres tranches de résolution, c'est facile : il suffit de faire les modifications directement sous l'éditeur.
  • Examinons la page PAGE_Adaptations.
  • Cette page contient différents champs :
    • un titre en haut,
    • un champ Carte pour indiquer où se trouve le restaurant,
    • un champ Libellé à côté contenant l'adresse du restaurant,
    • un champ Image à droite avec la publicité,
    • un champ Zone répétée en bas affichant les avis.
  • Testez la page ( parmi les boutons d'accès rapide).
    • La page apparaît en test telle qu'elle était sous l'éditeur en mode Bureau.
      Remarque : Cette page utilise un champ Carte. En GO 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.
    • Réduisez la taille de votre navigateur pour visualiser les changements de tranche.
  • Certains champs de la page changent de position ou disparaissent en fonction de la tranche de résolution affichée.
    Notamment l'image de publicité est présente dans la tranche Bureau mais elle devient invisible dans les tranches plus petites.

Comment adapter les champs aux différentes tranches ?

Pour faire des adaptations de positionnement et/ou de taille, rien de plus facile ! Ces modifications sont réalisées directement dans l'éditeur (comme pour n'importe quelle autre modification). Ces adaptations sont en fait des surcharges.

Attention

Afin que les tailles soient bien respectées lors de la réduction du navigateur, nous vous conseillons de cliquer sur la tranche de résolution à modifier avant toute modification.
La taille par défaut de la tranche sélectionnée sera prise comme référence et vous éviterez ainsi des surprises à l'exécution.
De nombreuses propriétés sont surchargeables par tranches de résolutions, vous pouvez les identifier directement dans la fenêtre de description des champs grâce au picto .
Par exemple, pour le champ Image, il est possible d'utiliser un fichier image différent selon la tranche de résolution utilisée.
  • Pour surcharger la taille et la position des champs, il suffit de :
    1. Sélectionner la tranche voulue.
    2. Faire la modification voulue sous l'éditeur.
  • Pour voir la liste des surcharges d'une tranche de résolution.
    1. Sélectionnez la tranche de résolution voulue (par exemple, pour la tranche tablette, cliquez dans la tranche tablette).
    2. Affichez le menu contextuel du bandeau de la tranche (clic droit) et sélectionnez l'option "Liste des surcharges".
    3. La liste des surcharges effectuées s'affiche :
      Remarque : Depuis cette fenêtre, vous pouvez supprimer des surcharges pour revenir au comportement par défaut du champ.
Cas particulier : Visibilité d'un champ
La visibilité d'un champ se définit habituellement dans l'onglet "IHM" de la fenêtre de description du champ.
Dans le cas du Responsive, cette option n'est pas surchargeable par tranche.
  • Pour définir la visibilité d'un champ par tranche, vous devez :
    1. Sélectionner le champ.
    2. Afficher le menu contextuel du champ (clic droit).
    3. Sélectionner l'option "Responsive Web Design .. Visibilité par tranche".
    4. Laisser cochées uniquement les tranches où vous souhaitez conserver le champ visible.
Remarque : Seule la visibilité définie dans la fenêtre de description du champ peut être modifiée par programmation. Les surcharges de visibilité effectuées par tranche de résolution ne peuvent pas être modifiées par programmation.

Note

Pour voir les champs masqués (par exemple pour modifier leur position en cas de superposition), sous le volet "Affichage", dans le groupe "Aide à l'édition", cochez l'option "Champs masqués".
Leçon précédenteSommaireLeçon suivante
Version minimum requise
  • Version 23
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire