Directives pour les Web App et le contenu HTML

Présentez votre contenu de manière saisissante qui captive les clients et les prospects. En développant des applications web HTML5 interactives pour Showpad, vous pouvez guider efficacement les représentants commerciaux et leurs prospects à travers des présentations engageantes. Pour garantir que votre contenu HTML5 fonctionne de manière optimale dans Showpad, suivez ces directives essentielles.

Avantages clés

• Applications web HTML personnalisées adaptées à des scénarios de vente spécifiques
• Captivez les clients et les prospects avec du contenu interactif
• Compatibilité multiplateforme pour travailler de manière fluide sur différents appareils et plateformes
• Accès hors ligne si toutes les ressources nécessaires sont intégrées dans l'application,

Vous avez besoin de cela pour réussir

Le chemin rapide vers l'extraordinaire

1. Utilisez HTML5 avec JavaScript et CSS ; les langages côté serveur (par exemple, .NET, PHP ou Ruby) ne sont pas pris en charge.
2. Assurez la compatibilité multiplateforme en utilisant une conception responsive.
3. Pour une utilisation hors ligne, incluez toutes les ressources nécessaires dans le ZIP.
4. Évitez d'utiliser des iFrames au profit des liens HTTPS.
5. Évitez les espaces dans les noms de fichiers et de dossiers
6. Gardez à l'esprit les limites de mémoire des appareils mobiles
7. Suivez les meilleures pratiques du W3C pour développer des Web App
8. Compressez les fichiers de l'application dans un ZIP file avec `index.html` à la racine.
9. Téléchargez votre fichier ZIP dans votre Library Showpad

Points à garder à l'esprit

• Considérations générales
• Télécharger vers Showpad
• Utilisation hors connexion
• Données statistiques
• Compatibilité multiplateforme
• Navigation Showpad et fonctions JS
• Stockage local
• Lien
• Bonnes pratiques

Considérations générales

Il est important de savoir que Showpad prend uniquement en charge les Web App HTML5 utilisant JavaScript, CSS, HTML, images et technologies similaires. Les langages de programmation dynamiques comme Ruby, PHP et .NET ne sont pas compatibles car ils nécessitent un traitement côté serveur.

De plus, Flash n'est pas entièrement pris en charge en raison de sa technologie obsolète, ce qui peut causer des problèmes d'affichage.

Pour préparer votre Web App avant de la télécharger sur Showpad :

1. Assurez-vous que le fichier HTML principal est nommé « index.html » et qu'il se trouve dans le dossier racine. Notez que si le fichier index.html est vide, la vignette sera blanche. Pour éviter cela, incluez une image d'écran de chargement visible dans les premières millisecondes.
2. Compressez tous les fichiers de l'application dans un fichier ZIP. Assurez-vous d'inclure tous les fichiers nécessaires (JavaScript, CSS, images) pour garantir que l'application fonctionne correctement, même hors ligne.
3. Lorsque vous êtes prêt, téléchargez le ZIP file dans votre Showpad Library. En savoir plus sur la façon de procéder ici.

Une fois que le ZIP file est téléchargé sur Showpad, nous décompresserons le fichier, générerons une vignette et le rendrons prêt à l'emploi.

Vous pouvez exécuter des Web App dans Showpad sans connexion Internet tant que l'archive ZIP contient toutes les ressources nécessaires.

• Showpad - Les développeurs peuvent suivre l'utilisation de Showpad via la fonction trackEvent du SDK.
• Google - Des informations générales sont disponibles sur le site des développeurs de Google.\n
  • Google Analytics - Pour suivre l'utilisation de l'application HTML5 dans la Web App de Showpad, vous pouvez intégrer Google Analytics pour des informations détaillées. Assurez-vous que tout le contenu est demandé via HTTPS, car l'utilisation de scripts HTTP peut empêcher le chargement de l'application dans la plupart des navigateurs.
    Pour activer Google Analytics dans les applications HTML5 pour la Web App et les applications mobiles, suivez ces étapes :
    

    // 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.

  • Balisage JavaScript - Vous pouvez également utiliser le service gtag.js de Google.

Showpad prend en charge l'accès via iOS, Android, les navigateurs web et Windows, ce qui rend la conception responsive essentielle pour assurer la compatibilité sur différentes tailles d'écran.

• Les navigateurs web standard, Safari et Chrome, sont utilisés sur iOS et Android, tandis que la plateforme Showpad Web est compatible avec Edge, Chrome, Safari et Firefox.
• L'application Windows Desktop intègre un contrôle WebView2, ainsi l'exécution du contenu HTML dans l'application Windows offre une expérience cohérente avec celle des navigateurs web. Il n'y a aucune différence entre l'application et le navigateur pour le rendu du contenu HTML.

• Navigation - Sur iOS, un bouton dans le coin supérieur gauche permet aux utilisateurs d'accéder à la navigation Showpad et de quitter la Web App. Pour éviter les conflits, cette zone doit être maintenue libre de tout élément interactif ou bouton d'action au sein de la Web App elle-même.
• Fonctions JS - Cet article fournit un rapport complet sur les fonctions JavaScript que nous proposons pour le contenu HTML.

Vous pouvez utiliser le stockage local pour préserver l'état d'une Web App, permettant à vos utilisateurs de quitter et de revenir à l'application tout en conservant leur état précédent. Cela inclut la sauvegarde de détails tels qu'un formulaire complété, la langue sélectionnée et d'autres paramètres.

• Ressources - Utilisez la balise pour les liens de ressources dans la Showpad Web App. Notez que les liens de ressources utilisent le protocole "showpad.//" (par exemple, showpad://file/{assetSlug}.
• Hyperliens - Assurez-vous d'utiliser la méthode de balise pour les hyperliens dans la Showpad Web App. Les hyperliens sont exclusivement chargés via le protocole HTTPS.
  De plus, consultez la section Données statistiques concernant les sources JavaScript lors de la liaison vers des pages externes.
• Liens internes - Lors du développement de votre fichier HTML5, vous devez garder à l'esprit que vous ne pouvez pas utiliser d'iFrames pour les liens internes car ils ne fonctionneront pas sur iPad.
  
  

Note : Par défaut, les applications Angular ont un dans le fichier index.html. Vous devriez le modifier en pour garantir que vos fichiers soient chargés correctement.