applications Web et directives relatives au contenu HTML

Quels sont vos avantages

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
• Il fonctionne sur toutes les plates-formes
• Utiliser l'application hors ligne, si toutes les ressources sont disponibles dans les archives

Ce qu'il vous faut 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
• La limite de taille des fichiers pour les applications Web et les applications HTML est la suivante 4 GB

Réussir en quelques minutes

• 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

Afficher étape par étape

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 <a href=“”> pour les liens d'actifs.

Pour une utilisation dans l'application web Showpad, veuillez utiliser la méthode de balise <a href=""> ; 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.

• Connaissez les limites de votre matériel, vous ne faites pas tourner le code sur un vaisseau spatial.
• Connaissez vos bibliothèques externes, elles vous fournissent des API faciles à utiliser, mais elles peuvent avoir un coût en termes de performances si elles ne sont pas utilisées correctement -> jQuery : `$()` est coûteux, mettez vos sélecteurs en cache, enchaînez vos actions/méthodes.
• N'utilisez pas d'animations JS et de setTimeout, utilisez des animations CSS (de préférence en 3d, afin que le GPU prenne en charge les calculs, et non le CPU) ou utilisez requestAnimationFrame.
• Gardez votre DOM aussi propre que possible. Cachez/supprimez les éléments que vous n'utilisez pas.
• Les ressources de préchargement ne sont intéressantes que lorsqu'elles proviennent du réseau, et non lorsqu'elles sont stockées sur l'appareil. Ne les gardez pas dans votre DOM et assurez-vous qu'elles ont les bons en-têtes de cache (sinon vous ne ferez aucun préchargement).
• Test à l'intérieur de Showpad.
• Ne développez pas pour un viewport fixe, tous les appareils ne sont pas 1024*768 et les appareils peuvent être tournés. Si l'application que vous développez doit être utilisée en paysage ou portrait, veillez à ajouter un message en cas d'utilisation incorrecte.
• Lorsque vous partagez du contenu HTML avec un client (visualiseur de Collection), le contenu HTML s'affiche dans une iframe. Assurez-vous que les dimensions de votre fenêtre d'affichage et le débordement sont correctement configurés.
• Lors de l'implémentation d'un bouton qui fait une location.reload(), en utilisant un gestionnaire de clic en JS, cela ne fonctionnera pas sur la Web App. Au sein de l'iframe, essayez de définir 'document.location.href = ' au lieu de window.location.reload().
• Nous recommandons d'utiliser HTTPS pour les applications HTML communiquant en externe sur iOS. Si vous avez des difficultés à vous y adapter, nous vous recommandons de faire une mise à jour vers la version iOS 10,1 ou ultérieure. Pour s'assurer que ces URL et applications HTML fonctionnent sur iOS, nous avons ajouté une exception pour autoriser la communication HTTP dans nos vues Web. Cette exception ne fonctionne qu'à partir de la version iOS 10.1.
  Sur iOS 10.0, les URL HTTP ou les applications HTML qui utilisent HTTP pour charger des ressources externes se traduiront par des pages vides ou à moitié chargées.
• Nous utilisons WKWebview pour intégrer du contenu dans notre application iOS.
• L'utilisation de l'extension "index.htm" ne fonctionne pas et vous devez utiliser .html à la place.
• Évitez d'utiliser des dossiers de raccourcis (symlinks) dans la structure de votre site.