Instructions relatives aux applications Web et 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 HTML5 interactives à utiliser dans Showpad, vous pouvez guider vos commerciaux et leurs prospects de manière interactive. Il est recommandé de suivre les instructions suivantes 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 entretiens interactifs
• Applications multi-plateformes
• Utilisez l'application hors ligne, si toutes les ressources sont disponibles dans les archives

Ce qu'il vous faut pour réussir

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

Pour réussir en quelques minutes

• Seul HTML5 avec Javascript, CSS et les images sont 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
• Compressez tous les fichiers utilisés par la Web app 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 liens hypertextes
• Veillez à toujours prendre en compte les limites de mémoire des appareils mobiles
• Consultez 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. Les langages de programmation dynamiques comme Ruby, PHP,.NET, etc. nécessitent un logiciel serveur spécifique et ne fonctionnent 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.zipet 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 la Web app 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 remplacée par le contenu réel. Nous vous conseillons d'inclure tous les fichiers utilisés par l'application (Javascript, CSS, images,...) dans lefichier 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 script source, 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 :

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

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

// Ne pas laisser 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 d' analytics.js à gtag.js

Vous pouvez trouver 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 s'adapter à plusieurs tailles d'écran ; il est donc judicieux d'utiliser un design adapté. Les technologies utilisées doivent s'adapter à ces appareils. Sur iOS/Android, nous utilisons le Webkit standard (Safari/Chrome). Showpad Web prend en charge IE11, Edge, Chrome, Safari et Firefox. Pour obtenir des instructions spécifiques à Windows, cliquez ici.
• Le chargement de Javascript entre domaines peut poser des problèmes. Consultez la solution alternative.

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 articlepour voir le rapport complet sur les fonctions js que nous proposons dans le 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.

• Composant Webview.
  Lors de la création de contenu HTML (également appelé applications web) qui sera utilisé dans l'application Windows Showpad, gardez à l'esprit que l'application Windows Store utilise le composant 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 'unsafe:', ce qui empêchera le composant 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 de Showpad, utilisez la méthode de balise <a href=""> pour les liens d'actifs.

Pour une utilisation dans la Web app Showpad, utilisez la méthode de balise <a href=""> pour les liens hypertextes. 
N'oubliez pas que Showpad charge le contenu via le protocole https et que les liens hypertextes devront également être chargés via https.
Gardez également à l'esprit la section 2 sur le script source lorsque vous créez un lien vers des pages externes.

• Connaissez vos limites matérielles, vous n'exécutez pas le code sur un vaisseau spatial.
• 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, plutôt que le CPU), soit requestAnimationFrame.
• Gardez votre DOM aussi propre que possible. Masquez/supprimez les éléments que vous n'utilisez pas.
• Le préchargement des actifs n'est intéressant que lorsqu'ils proviennent du réseau et non lorsqu'ils sont stockés sur le périphérique. Ne les gardez pas non plus dans votre DOM et assurez-vous qu'ils ont les bons en-têtes cache-control (ou 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 ils peuvent être pivoté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 (visionneuse de collection), le contenu HTML sera affiché dans une iframe ; assurez-vous que les dimensions et le débordement de la fenêtre d'affichage 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. Depuis 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 10.1 d'iOS.
  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.