10 conseils pour développer des applications Web de kiosque

Je pensais que je noterais quelques conseils de mon expérience de développement d'applications Web de kiosque. Cela pourrait être utile pour jeter un coup d'œil rapide à vous assurer que votre prochaine application Web de kiosque n'a rien négligé. Les voici.

1. Désactiver la sélection de texte

Certains kiosques se comportent de telle manière que le texte puisse toujours être sélectionné lors de la traînée de votre doigt, cela dépend également du navigateur / logiciel que vous utilisez pour afficher l'application.

<span>/* disable text selection */
</span>    <span>-webkit-touch-callout: none;
</span>    <span>-webkit-user-select: none;
</span>    <span>-khtml-user-select: none;
</span>    <span>-moz-user-select: moz-none;
</span>    <span>-ms-user-select: none;
</span>    user<span>-select: none;</span>

2. Imiter le dispositif tactile.

Pendant le développement, utilisez des remplacements Chrome Dev Tools pour simuler vos événements de clic et toucher / glisser.

3. Rafraîchissement du cache du navigateur de force

Les applications Web de kiosque peuvent exécuter des supports en cache et les forcer à exécuter le dernier code, vous pourriez avoir besoin pour ajouter une variable à des supports statiques pour forcer le navigateur à actualiser JS / CSS. Vous pouvez annexonner les variables dynamiques à des médias statiques invite ou si vous utilisez PHP, par exemple index.php, vous pouvez faire quelque chose comme ceci:

<span>    <span>//currently changes daily at middnight
</span>    $forceNum <span>= '5'; //increment this number to force browser to refresh static media cache(js/css).
</span>    $cacheKey <span>= '?'.strtotime(date('Y-m-d')).$forceNum;
</span><span>?>
</span><span><link href="css/styles.css<?php%20echo%20%24cacheKey;%20?/>" rel="stylesheet">
</span><span><script src="js/main.js<?php%20echo%20%24cacheKey;%20?>"></script></span></span>

4. Utilisez Google Chrome en mode kiosque

Chrome peut démarrer en mode kiosque hors de la boîte. Idéal pour les tests. Suivez ces instructions pour savoir comment le faire -> Configuration du mode kiosque Chrome.

5. Bootstrap avec support tactile

Si vous partez de zéro, ne réinventez pas la roue! Consultez Gumby 2 Bootstrap qui a une prise en charge tactile hors de la boîte et une interface utilisateur de bootstrap personnalisable pour que l'application Web soit facilement en train de chercher comme vous le souhaitez. Backbone.js fournit le changement de vue instantané et la gestion des modèles et des données entre les vues.

6. Empêchez les appels de script en double

Lorsqu'un utilisateur glisse l'écran, il peut licencier plusieurs événements et ne doit tirer qu'une seule fois. Donc, pour que votre application fonctionne en douceur, utilisez un script de débouchement.

7. Préchargez vos images d'application Web

Voici un tutoriel sur la façon de configurer la précharge de vos images d'application Web. Cela peut accélérer considérablement l'utilisation de votre application et empêcher le chargement à l'échelle des images plus grandes.
Je mettrai à jour avec plus une fois que j'aurai examiné le code / la fonctionnalité. - Comme toujours, n'hésitez pas à partager vos conseils et je vais les ajouter.

Questions fréquemment posées (FAQ) sur le développement des applications Web de kiosque

Quelles sont les principales considérations lors du développement d'une application Web de kiosque?

Lors du développement d'une application Web de kiosque, il existe plusieurs considérations clés à garder à l'esprit. Premièrement, vous devez vous assurer que l'application est conviviale et intuitive. Cela signifie que l'interface utilisateur doit être simple et facile à naviguer. Deuxièmement, l'application doit être conçue pour s'exécuter en mode plein écran, sans aucun contrôle de navigateur visible. Il s'agit d'empêcher les utilisateurs de s'éloigner de l'application. Troisièmement, l'application doit être conçue pour gérer l'entrée tactile, car la plupart des kiosques utilisent des écrans tactiles. Enfin, l'application doit être robuste et capable de gérer gracieusement les erreurs, pour éviter toute perturbation en service.

Comment puis-je faire en sorte que mon application Web de kiosque s'exécute en mode plein écran?

Pour que votre application Web de kiosque s'exécute en mode plein écran, vous pouvez utiliser l'API pleine écran HTML5. Cette API vous permet de saisir et de quitter le mode plein écran programmatique, ainsi que de détecter lorsque le navigateur est en mode plein écran. Cependant, gardez à l'esprit que l'API plein écran n'est pas pris en charge par tous les navigateurs, vous devrez donc peut-être fournir un repli aux navigateurs qui ne le prennent pas en charge.

Comment puis-je gérer la saisie tactile dans mon application Web de kiosque?

Gestionnement La saisie de l'entrée dans une application Web de kiosque peut être effectuée à l'aide de l'API HTML5 Touch Events. Cette API fournit un ensemble d'événements que vous pouvez écouter dans votre application, tels que Touchstart, TouchMove et Touchend. En écoutant ces événements, vous pouvez répondre à la saisie de l'utilisateur d'une manière appropriée pour un écran tactile.

Comment puis-je rendre mon application Web de kiosque robuste et résistant aux erreurs?

Votre application Web de kiosque robuste et résistant aux erreurs implique une combinaison de bonnes pratiques de conception et de tests approfondis. Du côté de la conception, vous devez viser à garder votre application aussi simple que possible, pour réduire le potentiel d'erreurs. Du côté des tests, vous devez tester votre application dans une variété de conditions, pour vous assurer qu'elle peut gérer gracieusement les situations inattendues.

Puis-je utiliser n'importe quel cadre de développement Web pour créer une application Web de kiosque?

Oui, vous pouvez utiliser n'importe quel cadre de développement Web pour créer une application Web de kiosque. Cependant, certains cadres peuvent être mieux adaptés à cette tâche que d'autres. Par exemple, les cadres qui prennent en charge les applications à une seule page (SPAS) peuvent être un bon choix pour les applications Web de kiosque, car ils permettent une expérience utilisateur sans couture sans aucun rechargement de page.

Comment puis-je empêcher les utilisateurs de naviguer dans De mon application Web de kiosque?

Une façon d'empêcher les utilisateurs de naviguer loin de votre application Web de kiosque est de masquer les commandes du navigateur. Cela peut être fait en utilisant l'API HTML5 FullScreen, comme mentionné précédemment. Une autre façon consiste à désactiver le menu contextuel du clic droit, qui peut être fait en utilisant JavaScript.

Quels sont les défis courants dans le développement d'applications Web de kiosque?

Quelques défis communs dans le développement d'applications Web de kiosque Inclure la gestion de l'entrée tactile, l'exécution en mode plein écran, empêcher les utilisateurs de naviguer loin de l'application et de s'assurer que l'application est robuste et résistante aux erreurs. Ces défis peuvent être relevés grâce à une conception minutieuse et à des tests approfondis.

Comment puis-je tester mon application Web de kiosque?

Le test d'une application Web de kiosque peut être effectué de diverses manières. Une approche courante consiste à utiliser une combinaison de tests unitaires, de tests d'intégration et de tests de bout en bout. Des tests unitaires peuvent être utilisés pour tester les composants individuels de l'application, les tests d'intégration peuvent être utilisés pour tester comment ces composants fonctionnent ensemble, et des tests de bout en bout peuvent être utilisés pour tester l'application dans son ensemble.

Puis-je utiliser un système de gestion de contenu (CMS) pour créer une application Web de kiosque?

Oui, vous pouvez utiliser un système de gestion de contenu (CMS) pour créer une application Web de kiosque. Un CMS peut fournir une interface conviviale pour la gestion du contenu de votre application, ainsi qu'une variété d'outils et de plugins qui peuvent aider avec le processus de développement.

Comment puis-je optimiser les performances de mon Web de kiosque application?

Optimisation des performances d'une application Web de kiosque peut impliquer une variété de techniques, telles que la mini-minimisation de vos fichiers JavaScript et CSS, l'optimisation de vos images et l'utilisation d'un réseau de livraison de contenu (CDN) pour servir vos fichiers statiques. De plus, vous devez viser à maintenir votre application aussi légère que possible, pour vous assurer qu'elle se charge rapidement et fonctionne bien.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!