10 Tipps zur Entwicklung von Kiosk -Webanwendungen

Ich dachte, ich würde ein paar Tipps aus meiner Erfahrung mit der Entwicklung von Kiosk -Webanwendungen aufschreiben. Könnte nützlich sein, um einen kurzen Blick darauf zu werfen, stellen Sie sicher, dass Ihre nächste Kiosk -Webanwendung nichts übersehen hat. Hier sind sie.

1. Deaktivieren Sie die Textauswahl

Einige Kioske verhalten sich so, dass beim Ziehen Ihres Fingers noch Text ausgewählt werden kann. Dies hängt auch davon ab, welche Browser/Software Sie verwenden, um die App anzuzeigen.

<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. Berührungsvorrichtung emulieren.

Während der Entwicklung von Chrome Dev Tools überschreibt die Verwendung von Chrome -Deventools, um Ihre Klickereignisse zu simulieren und zu berühren/zu wischen.

3. Erzwingen Sie den Browser -Cache -Aktualisierung

In Kiosk -Webanwendungen können zwischengespeicherte Medien ausgeführt werden und sie zum Ausführen des neuesten Codes zwingen, den Sie möglicherweise an statische Medien anhängen müssen, um den Browser zu zwingen, JS/CSS zu aktualisieren. Sie können dynamische Variablen auf statische Medien vorbereiten oder wenn Sie PHP verwenden, z. B. index.php, können Sie so etwas tun:

<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. Verwenden Sie Google Chrome im Kiosk -Modus

Chrome kann im Kiosk -Modus aus dem Box beginnen. Toll zum Testen. Befolgen Sie diese Anweisungen, um herauszufinden, wie es geht -> Chrome -Kiosk -Modus -Setup.

5. Bootstrap mit Touch Support

Wenn Sie von vorne anfangen, erfinden Sie das Rad nicht neu! Schauen Sie sich Gumby 2 Bootstrap an, der die Berührungsunterstützung im Feld hat, und eine anpassbare Bootstrap -Benutzeroberfläche, damit die Web -App die Art und Weise, wie Sie es möchten, leicht zu sehen sind. Backbone.js bietet die sofortige Ansichtsumschaltung und Verwaltung von Vorlagen und Daten zwischen Ansichten.

6. Verhindern Wenn ein Benutzer auf dem Bildschirm wischt, kann er mehrere Ereignisse abfeuern und nur einmal abfeuern. Um Ihre Anwendung reibungslos auszuführen, verwenden Sie ein Drippounce -Skript.

7. Laden Sie Ihre Web -App -Bilder

vor Hier ist ein Tutorial zum Einrichten der Vorladung Ihrer Webanwendungsbilder. Dies kann die Verwendung Ihrer App drastisch beschleunigen und das Laden größerer Bilder verhindern.

Ich werde mit mehr aktualisieren, sobald ich den Code/die Funktionalität überprüfe. - Wie immer können Sie Ihre Tipps teilen und ich füge sie hinzu.
häufig gestellte Fragen (FAQs) zur Entwicklung von Kiosk -Webanwendungen

Was sind die wichtigsten Überlegungen bei der Entwicklung einer Kiosk -Webanwendung? Zunächst müssen Sie sicherstellen, dass die Anwendung benutzerfreundlich und intuitiv ist. Dies bedeutet, dass die Benutzeroberfläche einfach und einfach zu navigieren sein sollte. Zweitens sollte die Anwendung so ausgelegt sein, dass sie im Vollbildmodus ausgeführt werden, ohne dass Browser-Steuerelemente sichtbar sind. Dies soll verhindern, dass Benutzer nicht von der Anwendung wegnavigieren. Drittens sollte die Anwendung so ausgelegt sein, dass sie den Touch -Eingang verarbeiten, da die meisten Kioske Touchscreens verwenden. Zuletzt sollte die Anwendung robust und in der Lage sein, Fehler anmutig zu behandeln, um störende Störungen zu verhindern.

Wie kann ich meine Kiosk-Webanwendung im Vollbildmodus ausgeführt? Mit dieser API können Sie den Vollbildmodus programmgesteuert eingeben und beenden sowie erkennen, wann sich der Browser im Vollbildmodus befindet. Beachten Sie jedoch, dass die Vollbild -API nicht von allen Browsern unterstützt wird. Möglicherweise müssen Sie einen Fallback für Browser bereitstellen, die sie nicht unterstützen.

Handling Touch -Eingabe in einer Kiosk -Webanwendung kann mit der HTML5 -Touch -Ereignis -API erfolgen. Diese API bietet eine Reihe von Ereignissen, die Sie in Ihrer Anwendung anhören können, z. B. TouchStart, Touchmove und Touchend. Wenn Sie auf diese Ereignisse anhören, können Sie auf die Benutzereingabe auf eine Weise reagieren, die für einen Touchscreen geeignet ist. Ihre kioskwebförmige und fehlerfreie Kiosk-Webanwendung beinhaltet eine Kombination aus guten Designpraktiken und gründlichen Tests. Auf der Designseite sollten Sie darauf abzielen, Ihre Anwendung so einfach wie möglich zu halten, um das Fehlerpotential für Fehler zu verringern. Auf der Testseite sollten Sie Ihre Anwendung unter verschiedenen Bedingungen testen, um sicherzustellen, dass unerwartete Situationen anmutig behandelt werden können. 🎜> Ja, Sie können jedes Web -Development -Framework verwenden, um eine Kiosk -Webanwendung zu erstellen. Einige Frameworks sind jedoch möglicherweise besser für diese Aufgabe geeignet als andere. Beispielsweise können Frameworks, die einseitige Anwendungen (SPAs) unterstützen Aus meiner Kiosk -Webanwendung? Dies kann unter Verwendung der HTML5 -Vollbild -API erfolgen, wie bereits erwähnt. Eine andere Möglichkeit besteht darin, das Kontextmenü mit dem Rechtsklick zu deaktivieren, das mit JavaScript erfolgen kann. Geben Sie den Handling Touch-Eingang, das Ausführen im Vollbildmodus ein, verhindern, dass Benutzer nicht von der Anwendung wegnavigieren und sicherstellen, dass die Anwendung robust und fehlerfrei ist. Diese Herausforderungen können durch sorgfältiges Design und gründliche Tests angegangen werden.

Wie kann ich meine Kiosk -Webanwendung testen? Ein häufiger Ansatz ist die Verwendung einer Kombination aus Unit-Tests, Integrationstests und End-to-End-Tests. Unit-Tests können verwendet werden, um einzelne Komponenten der Anwendung zu testen, Integrationstests zu testen, wie diese Komponenten zusammenarbeiten, und End-to-End-Tests können verwendet werden, um die Anwendung als Ganzes zu testen.

Kann ich ein Content Management System (CMS) verwenden, um eine Kiosk -Webanwendung zu erstellen? Ein CMS kann eine benutzerfreundliche Schnittstelle für die Verwaltung des Inhalts Ihrer Anwendung sowie eine Vielzahl von Tools und Plugins bereitstellen, die beim Entwicklungsprozess helfen können.

Wie kann ich die Leistung meines Kiosk-Webs optimieren Anwendung? Netzwerk (CDN) zum Servieren Ihrer statischen Dateien. Darüber hinaus sollten Sie Ihre Anwendung so leicht wie möglich halten, um sicherzustellen, dass sie schnell lädt und reibungslos läuft.

Das obige ist der detaillierte Inhalt von10 Tipps zur Entwicklung von Kiosk -Webanwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!