applications Web et directives relatives au contenu HTML

Vous pouvez présenter votre contenu de la meilleure des manières pour réellement impressionner vos clients et prospects. En créant des applications Web interactives HTML5 à utiliser dans Showpad, vous pouvez guider vos représentants commerciaux et leurs prospects de manière interactive. Les directives suivantes doivent être suivies pour une utilisation optimale de ce contenu HTML5 dans Showpad.

Afficher un exemple

Avantages clés

• Créez des applications web HTML personnalisées qui répondent à vos besoins de vente.
• Impressionnez vos clients et prospects
• Créez des tutoriels et des conversations interactives
• Utiliser l'application hors ligne, si toutes les ressources sont disponibles dans les archives

Vous avez besoin de cela pour réussir

• Connaissance de HTML5
• Contenu à utiliser dans votre web app personnalisée
• Connaissance de l'utilisation de Javascript, CSS, de la mémoire et de la manipulation des images
• Outils de développement, comme XCode (iOS), pour vérifier l'utilisation de la mémoire de votre application HTML

Le chemin rapide vers l'extraordinaire

• Seul le HTML5 avec Javascript, CSS et images est pris en charge
• Les langages de programmation dynamiques comme Ruby, PHP et .NET ne sont pas pris en charge
• Flash n'est pas entièrement pris en charge sur toutes les plateformes et doit être évité.
• Évitez les espaces dans les noms de fichiers et de dossiers
• Compresser tous les fichiers utilisés par l’ appli web dans un fichier zip
• Placez l'index.html dans le dossier racine du fichier ZIP
• N'utilisez pas iFrames dans votre application
• Téléchargez votre HTML. zip dans votre bibliothèque Showpad
• Nous recommandons d'utiliser HTTPS dans tous les hyperliens
• Tenez toujours compte des limites de mémoire des appareils mobiles
• Voir les meilleures pratiques du W3C pour le développement d'applications web

Général

Seules les applications web HTML5 (utilisant Javascript, CSS, HTML, images...) sont prises en charge. Langages de programmation dynamiques comme Ruby, PHP.NET, etc. nécessitent un logiciel serveur spécifique et ne fonctionneront pas dans l'application Showpad.
Flash n'est pas entièrement pris en charge, car il s'agit d'une technologie plus ancienne. Il se peut donc que les pages ne s'affichent pas comme prévu.

Pour préparer votre web app pour Showpad, compressez tous les fichiers de l'application dans un fichier .zip et assurez-vous qu'il y a un fichier index.html à la racine ou dans le dossier racine. Le fichier HTML "principal" doit donc s'appeler "index.html". Showpad va décompresser le fichier zip et traiter l’application web pour générer une vignette et le rendre prêt pour nos applications. La vignette est blanche lorsque le fichier index.html est vide. Vous pouvez résoudre ce problème en ayant une image dans le paquet de contenu HTML qui est visible pendant les premières millisecondes, comme un écran de chargement, et qui est ensuite remplacée par le contenu réel. Nous vous conseillons d'inclure tous les fichiers utilisés par l'application (Javascript, CSS, images...) dans le fichier .zip afin que l'application s'exécute correctement, qu'il y ait une connexion internet ou non.

Lorsque vous êtes prêt, téléchargez votre HTML fichier .zip dans votre bibliothèque Showpad. Pour en savoir plus sur la façon de procéder, cliquez ici.

Il est possible d'exécuter des applications web dans Showpad même lorsqu'il n'y a pas de connexion Internet. Pour cela, il faut que toutes les ressources soient disponibles dans l'archive du fichier zip.

Pour voir des statistiques utiles sur l'utilisation de l'application HTML5 dans l'application Web de Showpad, vous pouvez utiliser Google Analytics pour vous donner des indications précieuses. Le contenu HTML est demandé sur HTTPS. Veillez donc à ne pas utiliser HTTP comme script source, car cela empêcherait le chargement correct de l'application sur la plupart des navigateurs.

Pour que Google Analytics fonctionne dans les applications HTML5, tant sur l'application Web que sur nos applications mobiles, vous devez utiliser les éléments suivants :

// Créer le tracker
ga('create', 'UA-ABCDE123465-1', 'auto') ;

// Ne pas laisser le tracker vérifier le protocole
ga('set', 'checkProtocolTask', null);

// Ne laissez pas le tracker vérifier le stockage
ga('set', 'checkStorageTask', null);

// Ne pas laisser le tracker vérifier l'historique
ga('set', 'historyImportTask', null);
ga('send', 'pageview', '/about') ;

Remarque : remplacez l'identifiant UA par le numéro de propriété de votre entreprise.

Vous pouvez également utiliser le service gtag.js de Google. Pour en savoir plus, vous pouvez trouver les informations ici :

• Comment utiliser le global site tag (gtag.js)
• Comment passer de analytics.js à gtag.js

Vous trouverez des informations générales sur le site des développeurs de Google.

• Showpad est accessible sur iOS, Android, navigateur et Windows (8.1+). Cela signifie que l'application web doit pouvoir s'adapter à plusieurs tailles d'écran, d'où l'intérêt d'utiliser un design réactif. Les technologies utilisées doivent être adaptées à ces dispositifs. Sur iOS/Android, nous utilisons le kit web standard (Safari/Chrome). Showpad Web est compatible avec Edge, Chrome, Safari, et Firefox. Pour les directives spécifiques à Windows, cliquez ici.
• Le chargement de Javascript inter-domaines peut causer des problèmes. Vérifiez la solution de contournement.

Sur iOS, une icône en haut à gauche permet d'activer la navigation Showpad pour quitter l'application web. Cela signifie que cet espace doit être réservé à ce bouton et à aucun objet d'action du web app lui-même.
Veuillez consulter cet article pour le rapport complet sur les fonctions js que nous proposons dans le contenu HTML.

Il est possible d'utiliser le stockage local pour sauvegarder l'état d'une application web, afin de pouvoir quitter l'application et revenir à cet état. Pensez à un formulaire rempli, à un choix de langue, etc.

Lorsque vous développez votre fichier HTML5, vous devez garder à l'esprit que vous ne pouvez pas utiliser iFrames pour les liens internes car ils ne fonctionneront pas sur le site iPad.

• Élément Webview.
  Lorsque vous créez du contenu HTML, également connu sous le nom d'applications Web, qui sera utilisé dans l'application Windows Showpad, gardez à l'esprit ce qui suit : l'application Windows Store utilise l'élément Webview (https://msdn.microsoft.com/en-us/library/windows/apps/dn301831.aspx) pour afficher l'application HTML.
  Sur Windows 10, certaines fonctions JS peuvent être bloquées. Vérifiez vos journaux pour vous assurer qu'ils disposent de suffisamment de permissions pour être exécutés.
  
  L'application complète est d'abord téléchargée sur l'appareil, puis chargée à partir du disque en utilisant le protocole ms-local-stream, de sorte que tous les URL commencent par ms-local-stream://. Si vous utilisez angular, vous devez vous assurer qu'angular traite ce protocole comme un protocole sûr dans son fournisseur de compilation. Si vous ne le faites pas, Angular traitera ces URL comme non sécurisés et les préfixera 'unsafe:', ce qui empêchera l'élément webview de charger l'élément demandé.
• Événements tactiles
  Voir ce blog pour plus d'informations sur ce qu'il faut prendre en compte pour les événements tactiles pour le Mode Metro sous Windows.

Pour l'utilisation sur le site Showpad web app, veuillez utiliser la méthode de balise pour les liens d'actifs.

Pour une utilisation dans l'application web Showpad, veuillez utiliser la méthode de balise ; pour les hyperliens.
Gardez également à l'esprit que Showpad charge le contenu via le protocole https et que les hyperliens devront également être chargés via https.
Gardez également à l'esprit la Section 2 concernant la source du script lorsque vous créez des liens vers des pages externes.