Directives relatives aux applications web et au contenu HTML

Quels sont les avantages pour vous ?

Vous pouvez présenter votre contenu d'une manière épatante pour vraiment impressionner les clients et les prospects. En construisant des applications web HTML5 interactives à utiliser dans Showpad, vous pouvez guider vos 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 commerciaux.
• Impressionnez vos clients et prospects
• Créez des tutoriels et des conversations interactifs
• Cela fonctionne en multi-plateforme
• Utilisez l'application hors ligne, si toutes les ressources sont disponibles dans l'archive

Ce qu'il vous faut pour y parvenir

• Des connaissances HTML5
• Du contenu à utiliser dans votre Web app personnalisée
• Savoir utiliser Javascript, CSS, la mémoire et le traitement des images
• Des outils de développement, tels que XCode (iOS), pour vérifier l'utilisation de la mémoire de votre application HTML

Un moyen rapide d'atteindre la perfection

• Seul HTML5 avec Javascript, CSS et images est pris en charge
• Les langages de programmation dynamiques tels que 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
• Compressez tous les fichiers utilisés par l'application Web dans un fichier zip
• Placez le fichier index.html dans le dossier racine du ZIP
• N'utilisez pas d'iFrames dans votre application
• Nous vous recommandons d'utiliser HTTPS dans tous les hyperliens
• Veillez à toujours prendre en compte les limites de mémoire des appareils mobiles
• Consultez les meilleures pratiques du W3C pour développer des applications web

Consultez ceci étape par étape

Général

Seules les applications web HTML5 (utilisant Javascript, CSS, HTML, images,...) sont prises en charge. Les langages de programmation dynamiques tels que Ruby, PHP, .NET, etc. nécessitent un logiciel serveur spécifique et ne s'exécuteront pas dans l'application Showpad.
Flash n'est pas entièrement pris en charge car il s'agit d'une technologie plus ancienne et les pages ne s'afficheraient 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'un fichier index.html se trouve dans la racine ou le dossier racine. Le fichier HTML « principal » devrait donc s'appeler « index.html ». Showpad décompressera le zip et traitera l'application du site pour générer une vignette et la préparer pour nos applications. La vignette est blanche lorsque le fichier index.html est vide. Vous pouvez résoudre ce problème en ayant dans le package de contenu HTML une image visible les quelques premières millisecondes, comme un écran de chargement, et qui est ensuite permutée pour 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.

Il est possible d'exécuter des applications web dans Showpad même en l'absence de connexion internet. Pour cela, toutes les ressources doivent être disponibles dans l'archive zip.

Pour consulter des statistiques utiles sur l'utilisation de l'application HTML5 dans la Web app de Showpad, vous pouvez utiliser Google Analytics pour vous donner des informations précieuses. Le contenu HTML étant demandé via HTTPS, veillez à ne pas utiliser HTTP comme source de script, car cela empêchera l'application de se charger correctement sur la plupart des navigateurs.

Pour que Google Analytics fonctionne dans les applications HTML5 à la fois sur la Web app et sur nos applications mobiles, vous devez utiliser les éléments suivants :

ga('create', 'UA-ABCDE123465-1', 'auto'); // Créer le traqueur
ga('set', 'checkProtocolTask', null); // Ne pas laisser le traqueur vérifier le protocole
ga('set', 'checkStorageTask', null); // Ne pas laisser le traqueur vérifier le stockage
ga('set', 'historyImportTask', null); // Ne pas laisser le traqueur vérifier l'historique
ga('send', 'pageview', '/about');

Plus d'informations peuvent être trouvées 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 s'adapter à plusieurs tailles d'écran, donc utiliser un design réactif est une bonne idée. Les technologies utilisées doivent convenir à ces appareils. Sur iOS/Android, nous utilisons le kit web standard (Safari/Chrome). Showpad Web prend en charge IE11, Edge, Chrome, Safari et Firefox. Pour des directives spécifiques à Windows, cliquez ici.
• Le chargement de Javascript entre domaines peut poser des problèmes. Vérifiez la solution de rechange.

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

Il est possible d'utiliser le stockage local pour enregistrer l'état d'une Web app, de sorte que vous pouvez quitter l'application et revenir à cet état. Pensez à un formulaire rempli, à une sélection de langue, etc.

Lorsque vous développez votre fichier HTML5, n'oubliez pas que vous ne pouvez pas utiliser d'iFrames pour les liens internes car ils ne fonctionneront pas sur l'iPad.

• Élément Webview.
  Lors de la création d'un contenu HTML, également appelé applications web, qui sera utilisé dans l'application Windows Showpad, gardez à l'esprit que 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.
  Sous Windows 10, certaines fonctions JS peuvent être bloquées. Vérifiez vos journaux pour vous assurer qu'elles disposent des autorisations suffisantes pour être exécutées.
  
  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, donc tous les URI commenceront par ms-local-stream://. Si vous utilisez angular, vous devez vous assurer qu'angular traite ce protocole comme un protocole sécurisé dans son fournisseur de compilation. Si vous ne le faites pas, angular traitera ces adresses URI comme non sécurisées et les préfixera par « non sécurisées : », ce qui empêchera l'élément webview de charger l'élément demandé.
• Événements tactiles
  Consultez ce blog pour plus d'informations sur les éléments à prendre en compte pour les événements tactiles du mode Metro sous Windows.

Pour une utilisation dans la Web app Showpad, veuillez utiliser la méthode de balise <a href=“”> pour les liens de ressources.

Pour une utilisation dans la Web app Showpad, veuillez utiliser la méthode de balise <a href=“” > pour les hyperliens. 
N'oubliez pas non plus 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 sur la source du script lorsque vous créez un lien vers des pages externes.

• Connaissez vos limites matérielles, ce n'est pas un vaisseau spatial sur lequel vous exécutez le code.
• Connaissez vos bibliothèques externes, elles vous fournissent des API faciles à utiliser, mais elles peuvent être coûteuses en performances si elles ne sont pas utilisées correctement -> jQuery: `$()` est coûteux, met en cache vos sélecteurs, enchaîne vos actions/méthodes.
• N'utilisez pas les animations JS et setTimeout, utilisez soit les animations CSS (de préférence 3D, afin que le GPU prenne en charge les calculs, et pas le processeur), soit requestAnimationFrame.
• Gardez votre DOM aussi propre que possible. Masquez/supprimez les éléments que vous n'utilisez pas.
• Le préchargement des ressources n'est intéressant que lorsqu'elles proviennent du réseau et non lorsqu'elles sont stockées sur le périphérique. Ne les conservez pas non plus dans votre DOM et assurez-vous qu'elles disposent des bons en-têtes de cache (sinon vous ne ferez aucun préchargement du tout)
• Testez dans Showpad.
• Ne développez pas pour une fenêtre d'affichage fixe, tous les appareils ne sont pas en 1024*768 et les appareils peuvent être tournés. Si l'application que vous développez doit être au format paysage ou portrait, veillez à ajouter un message en cas d'utilisation incorrecte.
• Lors du partage de contenu HTML avec un client (visualiseur de Collection), le contenu HTML sera affiché dans une iframe. Assurez-vous que les dimensions et le débordement de la fenêtre de visualisation sont configurés correctement.
• Lors de l'implémentation d'un bouton effectuant location.reload(), à l'aide d'un gestionnaire de clics dans JS, cela ne fonctionnera pas sur la Web app. De l'intérieur de l'iframe, essayez de définir « document.location.href = » au lieu de window.location.reload()
• Nous vous recommandons d'utiliser HTTPS pour les applications HTML communiquant en externe sous iOS. Si vous avez des problèmes pour vous adapter à cela, nous vous recommandons de mettre à jour vers iOS version 10.1 ou ultérieure. Pour vous assurer que ces URL et applications HTML fonctionnent sur iOS, nous avons ajouté une exception permettant la communication HTTP dans nos affichages 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 généreront des pages vides ou à moitié chargées.
• Nous utilisons WKWebview pour incorporer du contenu dans notre application iOS.
• L'utilisation de l'extension « index.htm » ne fonctionne pas et vous devriez utiliser .html à la place.
• Évitez d'utiliser des dossiers de raccourci (liens symboliques) dans la structure de votre site.

Pour plus d'informations, veuillez contacter notre équipe de support.