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
Produits
WINDEVWEBDEV - Code ServeurWEBDEV - Code NavigateurWINDEV MobileEtats et Requêtes
Plateformes
WindowsLinuxWindows MobileUniversal Windows 10 AppAndroidWidget AndroidiPhone/iPadApple Watch
Langages
JavaPHPAjaxCode Utilisateur (MCU)Langage Externe
Bases de données
HFSQLHFSQL Client/ServeurProcédures stockéesOLE DBODBCAccès Natifs
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. 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.
  • 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.
Exemple pratique de gestion des ancrages dans une page Responsive Web Design
Nous allons paramétrer les ancrages pour la page suivante :
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