PC SOFT

DOCUMENTATION EN LIGNE
DE WINDEV, WEBDEV ET WINDEV MOBILE

  • Présentation
  • Sites pour iPhone
  • Spécificités de programmation
  • Conseils
  • Test d'une page d'un site pour Mobile
  • Site pour BlackBerry
  • Mise en page
  • Boutons spécifiques
  • Champs
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
WEBDEV permet de développer des sites pour tous types de supports : iPhone, BlackBerry, ... Voici quelques conseils pour optimiser la réalisation de ces sites.
Versions 17 et supérieures
Remarque : WINDEV Mobile permet de créer des applications pour iPhone et iPad. Pour plus de détails, consultez Développer une application pour iPhone ou iPad.
Nouveauté 17
Remarque : WINDEV Mobile permet de créer des applications pour iPhone et iPad. Pour plus de détails, consultez Développer une application pour iPhone ou iPad.
Remarque : WINDEV Mobile permet de créer des applications pour iPhone et iPad. Pour plus de détails, consultez Développer une application pour iPhone ou iPad.
Sites pour iPhone
Par défaut, l'iPhone visualise les sites avec un zoom arrière, pour avoir une vue d'ensemble de la page. Une page aux dimensions classiques ressemble à un timbre poste.
La taille de l'écran de l'iPhone est 320 x 480. La taille utile réellement disponible pour les applications est 320 x 256. Le reste est utilisé par les menus systèmes.
Pour vous permettre de développer des sites correspondant à la taille de l'écran, WEBDEV propose d'afficher la taille de navigation dans la page (option "Affichage .. Taille de navigation"). Vous pouvez sélectionner la taille de navigation correspondant à l'iPhone. Pour plus de détails, consultez Taille de Navigation.
Pour spécifier à l'iPhone que la taille du site est celle attendue :
  1. Affichez la description de la page.
  2. Affichez l'onglet "Avancé".
  3. Dans l'onglet "Périphériques", sélectionnez "Spécificités iPhone" et cochez l'option "Générer les informations de navigation Safari pour iPhone".
  4. Indiquez les éléments suivants :
    • Largeur : Largeur du périphérique
    • Zoom initial : 100%
    • Hauteur : Hauteur du périphérique
Versions 15 et supérieures
Il est également possible de prendre en compte les spécificités suivantes :
  • Mode plein écran
    Il est possible d'indiquer qu'une page d'un site doit s'afficher en plein écran sur l'iPhone, pour cela il suffit de cocher la case "Plein écran" dans les propriétés de la page (onglet "Avancé", sous-onglet "Périphériques", partie "Spécificités iPhone").
    Dans ce cas, il est possible de choisir comment s'affichera la barre d'état de Safari (la barre en haut de l'écran indiquant la charge de la batterie, l'heure, etc.). Les options disponibles sont :
    • "Défaut" : la barre s'affiche de la couleur par défaut
    • "Noir" : la barre s'affiche avec un fond noir
    • "Noir translucide" : la barre s'affiche avec un fond noir et une opacité réduite, le site peut être vu à travers la barre.
  • Icône d'application
    Si un raccourci vers le site est créé sur l'écran d'accueil de l'iPhone, il est possible de spécifier une icône.
  • Splash Screen
    Si un raccourci vers le site est créé sur l'écran d'accueil de l'iPhone, il est possible de spécifier un splash screen. Cette image doit obligatoirement avoir une taille de 320 par 460 pixels pour être prise en compte par le téléphone.
Nouveauté 15
Il est également possible de prendre en compte les spécificités suivantes :
  • Mode plein écran
    Il est possible d'indiquer qu'une page d'un site doit s'afficher en plein écran sur l'iPhone, pour cela il suffit de cocher la case "Plein écran" dans les propriétés de la page (onglet "Avancé", sous-onglet "Périphériques", partie "Spécificités iPhone").
    Dans ce cas, il est possible de choisir comment s'affichera la barre d'état de Safari (la barre en haut de l'écran indiquant la charge de la batterie, l'heure, etc.). Les options disponibles sont :
    • "Défaut" : la barre s'affiche de la couleur par défaut
    • "Noir" : la barre s'affiche avec un fond noir
    • "Noir translucide" : la barre s'affiche avec un fond noir et une opacité réduite, le site peut être vu à travers la barre.
  • Icône d'application
    Si un raccourci vers le site est créé sur l'écran d'accueil de l'iPhone, il est possible de spécifier une icône.
  • Splash Screen
    Si un raccourci vers le site est créé sur l'écran d'accueil de l'iPhone, il est possible de spécifier un splash screen. Cette image doit obligatoirement avoir une taille de 320 par 460 pixels pour être prise en compte par le téléphone.
Il est également possible de prendre en compte les spécificités suivantes :
  • Mode plein écran
    Il est possible d'indiquer qu'une page d'un site doit s'afficher en plein écran sur l'iPhone, pour cela il suffit de cocher la case "Plein écran" dans les propriétés de la page (onglet "Avancé", sous-onglet "Périphériques", partie "Spécificités iPhone").
    Dans ce cas, il est possible de choisir comment s'affichera la barre d'état de Safari (la barre en haut de l'écran indiquant la charge de la batterie, l'heure, etc.). Les options disponibles sont :
    • "Défaut" : la barre s'affiche de la couleur par défaut
    • "Noir" : la barre s'affiche avec un fond noir
    • "Noir translucide" : la barre s'affiche avec un fond noir et une opacité réduite, le site peut être vu à travers la barre.
  • Icône d'application
    Si un raccourci vers le site est créé sur l'écran d'accueil de l'iPhone, il est possible de spécifier une icône.
  • Splash Screen
    Si un raccourci vers le site est créé sur l'écran d'accueil de l'iPhone, il est possible de spécifier un splash screen. Cette image doit obligatoirement avoir une taille de 320 par 460 pixels pour être prise en compte par le téléphone.
Par défaut, l'iPhone visualise les sites avec un zoom arrière, pour avoir une vue d'ensemble de la page. Une page aux dimensions classiques ressemble à un timbre poste.
La taille de l'écran de l'iPhone est 320 x 480. La taille utile réellement disponible pour les applications est 320 x 256. Le reste est utilisé par les menus systèmes.
Pour vous permettre de développer des sites correspondant à la taille de l'écran :
  1. Dans la fenêtre de description de la page, dans l'onglet "Général", spécifiez la plateforme cible et la taille de l'écran :
    PlateformeTaille des écrans disponible
    Mobile générique
    • 240 x 320
    • 320 x 480
    • 480 x 640
    • 480 x 800
    Cette taille peut être personnalisée.
    Mobile Apple
    • iPad 3, iPad 4 (1536 x 2048)
    • iPad, iPad Mini (768 x 1024)
    • iPhone iPod Touch (320 x 480)
    • iPhone 4 (640 x 960)
    • iPhone 5 (640 x 1136)
    • iPhone 6 (750 x 1334)
    • iPhone 6 Plus (1080 x 1920)
    Mobile BlackBerry
    • 240 x 320
    • 320 x 480
    • 360 x 480
    • 480 x 640
    • 480 x 800
  2. Affichez l'onglet "Avancé".
  3. Dans l'onglet "Périphérique", l'option "Générer les informations de navigation et de zoom (viewport)" est cochée par défaut. Cette option permet d'utiliser une génération adaptée pour les navigateurs Safari utilisés sur l'iPhone. Les valeurs spécifiées sont remplies par défaut et peuvent être modifiées
  4. Si nécessaire configurez également les fonctionnalités de l'iPhone (Spécificités WebApps iPhone) :
    • Mode plein écran
      Il est possible d'indiquer qu'une page d'un site doit s'afficher en plein écran sur l'iPhone.
      Dans ce cas, il est possible de choisir comment s'affichera la barre d'état de Safari (barre en haut de l'écran indiquant la charge de la batterie, l'heure, etc.). Les options disponibles sont :
      • "Défaut" : la barre s'affiche de la couleur par défaut
      • "Noir" : la barre s'affiche avec un fond noir
      • "Noir translucide" : la barre s'affiche avec un fond noir et une opacité réduite, le site peut être vu à travers la barre.
    • Versions 16 et supérieures
      La barre d'adresse peut être masquée ou non.
      Nouveauté 16
      La barre d'adresse peut être masquée ou non.
      La barre d'adresse peut être masquée ou non.
    • Icône d'application
      Si un raccourci vers le site est créé sur l'écran d'accueil de l'iPhone, il est possible de spécifier une icône.
    • Splash Screen
      Si un raccourci vers le site est créé sur l'écran d'accueil de l'iPhone, il est possible de spécifier un splash screen. Cette image doit obligatoirement avoir une taille de 320 par 460 pixels pour être prise en compte par le téléphone.

Spécificités de programmation

Le développement d'un site pour iPhone est identique au développement d'un site classique. Quelques spécificités de programmation sont propres au développement pour iPhone.
Il est possible de lancer directement un appel téléphonique depuis un site : dans l'URL du lien permettant de téléphoner, indiquez "tel:" et le numéro de téléphone.
Par exemple :
// Téléphone
MAP_TELEPHONE..URL = "tel:" + CLIENT.Téléphone
Il est également possible d'afficher la carte Google Maps de l'adresse du client directement depuis sa fiche : dans l'URL du lien, indiquez "http://maps.google.com/maps?q=" suivi de l'adresse du client.
Par exemple :
// Géolocalisation
MAP_TGMAP..URL = "http://maps.google.com/maps?q=" + ...
URLEncode(Client.Adresse + " " + Client.Ville + ", " + Client.Pays)

Conseils

  • Utilisez des modèles de pages spécifiques à l'iPhone.
  • Réduisez au maximum le poids des images du site. Les images de taille importantes, les animations Flash ou les vidéos risquent de ralentir le temps de chargement de la page.
  • Utilisez les ancrages pour gérer correctement le retournement de l'iPhone.
Versions 16 et supérieures

Test d'une page d'un site pour Mobile

Selon le type de la page testé, le test de la page est réalisé dans un environnement représentant le mobile sous le navigateur. Par exemple :
Il est possible en bas de la page de cliquer pour tester le retournement de l'iPhone.
Nouveauté 16

Test d'une page d'un site pour Mobile

Selon le type de la page testé, le test de la page est réalisé dans un environnement représentant le mobile sous le navigateur. Par exemple :
Il est possible en bas de la page de cliquer pour tester le retournement de l'iPhone.

Test d'une page d'un site pour Mobile

Selon le type de la page testé, le test de la page est réalisé dans un environnement représentant le mobile sous le navigateur. Par exemple :
Il est possible en bas de la page de cliquer pour tester le retournement de l'iPhone.
Site pour BlackBerry
Le BlackBerry est également un appareil téléphonique permettant principalement de gérer les emails. Il est également possible d'accéder à des pages WEB. L'utilisation de sites Web pour BlackBerry est surtout réservée à la consultation et aux formulaires basiques. Le navigateur du BlackBerry est en effet destiné à une utilisation bas débit et impose donc certaines contraintes.
Pour vous permettre de développer des sites correspondant à la taille de l'écran, WEBDEV propose d'afficher la taille de navigation dans la page (option "Affichage .. Taille de navigation"). Vous pouvez sélectionner la taille de navigation correspondant au BlackBerry. Pour plus de détails, consultez Taille de Navigation.Pour vous permettre de développer des sites correspondant à la taille de l'écran, dans la fenêtre de description de la page, dans l'onglet "Détail", spécifiez la plateforme cible "Mobile BlackBerry" et la taille de l'écran :
  • 240 x 320
  • 320 x 480
  • 480 x 640
  • 680 x 800

Mise en page

Le BlackBerry ne transpose pas directement la mise en page définie dans le projet. Les champs sont automatiquement redimensionnés et alignés les uns au dessous des autres, au bord de la page afin de permettre une navigation verticale adaptée à ce type de terminal.
Il est donc conseillé de faire des pages "en hauteur" afin de respecter au mieux le mode de fonctionnement du navigateur.

Boutons spécifiques

Pour que les boutons aient un fonctionnement classique sur un navigateur :
  1. Affichez la description de la page.
  2. Affichez l'onglet "Avancé".
  3. Dans l'onglet "Périphériques", sélectionnez "Spécificités BlackBerry" et cochez l'option "Générer les boutons textes adaptés au BlackBerry".Dans l'onglet "Périphériques", cochez l'option "Générer les boutons textes adaptés au BlackBerry".

Champs

Les sites pour BlackBerry ne peuvent avoir qu'un seul bouton par page et ce bouton doit être de type "submit" : il renvoie une valeur au serveur.
Les champs gérés par le BlackBerry sont restreints :
  • certains boutons (boutons de type texte conseillé)
  • les libellés
  • les liens
  • les images
  • les interrupteurs
  • les sélecteurs
  • les listes et les combos
  • les champs de saisie
Version minimum requise
  • Version 12
Commentaires
Cliquez sur [Ajouter] pour publier un commentaire