Web-apps und HTML-Inhaltsrichtlinien

Was ist für Sie drin?

Sie können Ihre Inhalte auf fantastische Weise präsentieren, um Kunden und Interessenten wirklich zu beeindrucken. Durch die Erstellung interaktiver HTML5-Web-apps für Showpad können Sie Ihre Vertriebsmitarbeiter und ihre potenziellen Kunden auf interaktive Weise anleiten. Für die optimale Nutzung dieser HTML5-Inhalte in Showpad sollten Sie die folgenden Richtlinien befolgen.

Sehen Sie sich ein Beispiel an

Hauptvorteile

• Erstellen Sie maßgeschneiderte HTML-Webapps, die Ihren Verkaufsanforderungen entsprechen.
• Beeindrucken Sie Kunden und Interessenten
• Erstellen Sie interaktive Tutorials und Gespräche
• Es funktioniert plattformübergreifend
• Verwenden Sie die App offline, wenn alle Ressourcen im Archiv verfügbar sind

Sie benötigen dies, um erfolgreich zu sein

• HTML5-Kenntnisse
• Inhalt zur Verwendung in Ihrer benutzerdefinierten Web-app
• Kenntnisse in der Verwendung von Javascript, CSS, Speicher und Bildbearbeitung
• Entwicklungstools, wie XCode (iOS), um die Speichernutzung Ihrer HTML-app zu überprüfen
• Die maximale Dateigröße für Web- und HTML-apps beträgt 4 GB

Der schnelle Weg zur Faszination

• Es wird nur HTML5 mit Javascript, CSS und Bildern unterstützt
• Dynamische Programmiersprachen wie Ruby, PHP undNET werden nicht unterstützt
• Flash wird nicht auf allen Plattformen vollständig unterstützt und sollte vermieden werden
• Vermeiden Sie Leerzeichen in Datei- und Ordnernamen.
• Komprimieren Sie alle von der Web-app verwendeten Dateien in einer ZIP-Datei
• Legen Sie die index.html in den Stammordner der ZIP-Datei
• Verwenden Sie keine iFrames in Ihrer Anwendung
• Laden Sie Ihre HTML. zip-Datei in Ihre Showpad-Bibliothek hoch
• Wir empfehlen die Verwendung von HTTPS in allen Hyperlinks
• Berücksichtigen Sie immer die Speichergrenzen von mobilen Geräten
• Siehe W3C Best Practices für die Entwicklung von Web-apps

Sehen Sie sich dies Schritt für Schritt an

Allgemeines

Es werden nur HTML5-Web-apps (mit Javascript, CSS, HTML, Bildern, ...) unterstützt. Dynamische Programmiersprachen wie Ruby, PHP, NET usw. erfordern eine spezielle Serversoftware und können nicht in der Showpad-app ausgeführt werden.
Flash wird nicht vollständig unterstützt, da es sich um eine ältere Technologie handelt, was dazu führen kann, dass die Seiten nicht wie erwartet angezeigt werden.

Um Ihre Web-app für Showpad vorzubereiten, komprimieren Sie alle Dateien der App in eine .ZIP-Datei und stellen Sie sicher, dass sich eine index.html-Datei im Stammverzeichnis befindet. Die „Haupt“-HTML-Datei sollte also „index.html“ heißen. Showpad entpackt die ZIP-Datei und verarbeitet die Web-app, um ein Vorschaubild zu erstellen und es für unsere Appsbereitzustellen. Die Miniaturansicht ist weiß, wenn die Datei index.html leer ist. Sie können dieses Problem lösen, indem Sie ein Bild in das HTML-Content-Paket aufnehmen, das die ersten paar Millisekunden sichtbar ist, wie ein Ladebildschirm, und dann für den eigentlichen Inhalt umgeschaltet wird. Wir raten Ihnen, alle von der App verwendeten Dateien (Javascript, CSS, Bilder, ... ) in die .ZIP-Datei einzuschließen, damit die App auch bei bestehender Internetverbindung ordnungsgemäß ausgeführt werden kann.

Wenn Sie fertig sind, laden Sie Ihre HTML-.ZIP-Datei in Ihre Showpad-Bibliothek hoch! Lesen Sie hier mehr darüber, wie das geht.

Es ist möglich, Web-apps innerhalb von Showpad auszuführen, auch wenn keine Internetverbindung besteht. Die Voraussetzung dafür ist, dass alle Ressourcen im Zip-Archiv vorhanden sind.

Um nützliche Statistiken über die Nutzung von HTML5-Apps in der Showpad-Web-app zu sehen, können Sie Google Analytics verwenden, um Ihnen leistungsstarke Einblicke zu geben. HTML-Inhalte werden über HTTPS angefordert. Achten Sie also darauf, dass Sie nicht HTTP als Quellskript verwenden, da die App sonst in den meisten Browsern nicht korrekt geladen wird.

Damit Google Analytics in HTML5-apps sowohl auf der Web-app als auch auf unseren Handy-apps funktioniert, müssen Sie Folgendes tun:

// Erstellen Sie den Tracker
ga(„erstellen“, „UA-ABCDE123465-1“, „auto“);

// Lassen Sie den Tracker das Protokoll nicht überprüfen.
ga(„einstellen“, „checkProtocolTask“, null);

// Lassen Sie den Tracker den Speicher nicht überprüfen.
ga(„einstellen“, „checkStorageTask“, null);

// Lassen Sie den Tracker den Verlauf nicht überprüfen.
ga(„einstellen“, „historyImportTask“, null);
ga(„senden“, „Seitenansicht“, „/über“);

Hinweis: Ändern Sie die UA ID mit der Immobiliennummer Ihres Unternehmens.

Sie können auch den Dienst gtag.js von Google verwenden. Wenn Sie mehr darüber erfahren möchten, finden Sie die Informationen hier:

• So verwenden Sie den globalen Website-Tag (gtag.js)
• Wie man von analytics.js zu gtag.js wechselt.

Allgemeine Informationen finden Sie auf der Entwicklerseite von Google.

• Auf Showpad können Sie über iOS, Android, Browser und Windows (8.1+) zugreifen. Das bedeutet, dass die Web-app für verschiedene Bildschirmgrößen geeignet sein sollte. Daher ist es eine gute Idee, ein reaktionsfähiges Design zu verwenden. Die verwendeten Technologien sollten zu diesen Geräten passen. Auf iOS/Android verwenden wir das Standard-Webkit (Safari/Chrome). Showpad Web unterstützt Edge, Chrome, Safari und Firefox. Für spezielle Windows-Richtlinien klicken Sie bitte hier.
• Das domänenübergreifende Laden von Javascript kann Probleme verursachen. Abhilfe prüfen.

Unter iOS gibt es oben links ein Symbol, mit dem Sie die Showpad-Navigation zum Verlassen der Web-app aktivieren können. Das bedeutet, dass dieser Platz für diese Schaltfläche reserviert werden sollte, und nicht für Aktionsobjekte der Web-app selbst.
In diesem Artikel finden Sie den vollständigen Bericht über die js-Funktionen, die wir für HTML-Inhalte anbieten.

Es ist möglich, den Zustand des Web-app lokal zu speichern, so dass Sie die App verlassen und zu diesem Zustand zurückkehren können. Denken Sie an ein ausgefülltes Formular, eine Sprachauswahl, usw.

Wenn Sie Ihre HTML5-Datei entwickeln, sollten Sie daran denken, dass Sie iFrames nicht für interne Links verwenden können, da diese auf iPad nicht funktionieren werden.

• Webview-Element.
  Bei der Erstellung von HTML-Inhalten, auch bekannt als Web-apps, die in der Showpad-Windows-app verwendet werden, sollten Sie Folgendes beachten: Die Windows Store-app verwendet das Webview-Element (https://msdn.microsoft.com/en-us/library/windows/apps/dn301831.aspx), um die HTML-app anzuzeigen.
  Unter Windows 10können einige JS-Funktionen blockiert sein! Überprüfen Sie Ihre Protokolle, um sicherzustellen, dass sie genügend Berechtigungen haben, um ausgeführt zu werden.
  
  Die vollständige App wird zunächst auf das Gerät heruntergeladen und dann mit dem Protokoll ms-local-stream von der Festplatte geladen, so dass alle URIs mit ms-local-stream:// beginnen. Wenn Sie Angular verwenden, müssen Sie sicherstellen, dass Angular dieses Protokoll in seinem Compile-Provider als sicheres Protokoll behandelt. Wenn Sie dies nicht tun, wird Angular diese URIs als unsicher behandeln und ihnen das Präfix „unsicher:“ voranstellen, was dazu führt, dass das Webview-Element nicht in der Lage ist, das angeforderte Element zu laden.
• Touch-Events
  In diesem Blog finden Sie weitere Informationen darüber, was Sie bei Touch-Ereignissen für Metro Mode unter Windows beachten müssen.

Für die Verwendung in der Showpad Web-app verwenden Sie bitte die <a href=“”> Tag-Methode für Asset-Links.

Für die Verwendung in der Showpad Web-app verwenden Sie bitte die <a href=""> Tag-Methode für Hyperlinks.
Denken Sie auch daran, dass Showpad Inhalte über das https-Protokoll lädt und dass Hyperlinks ebenfalls über https geladen werden müssen.
Denken Sie auch an Abschnitt 2 über die Skript-Quelle, wenn Sie auf externe Seiten verlinken.

• Kennen Sie die Grenzen Ihrer Hardware. Das Gerät, auf dem Sie den Code ausführen, ist kein Raumschiff.
• Kennen Sie Ihre externen Bibliotheken. Sie bieten Ihnen einfach zu verwendende APIs, aber sie können bei unsachgemäßer Verwendung zu Lasten der Leistung gehen -> jQuery: „$()“ ist teuer, stellen Sie Ihre Selektoren in den Cache, verketten Sie Ihre Aktionen/Methode.
• Verwenden Sie keine JS-Animationen und setTimeout, sondern entweder CSS-Animationen (vorzugsweise 3d, damit die GPU die Berechnungen übernimmt und nicht die CPU) oder verwenden Sie requestAnimationFrame.
• Halten Sie Ihre DOM so sauber wie möglich. Nicht verwendete Elemente ausblenden/entfernen.
• Das Vorladen von Assets ist nur dann interessant, wenn sie aus dem Netzwerk kommen, nicht wenn sie auf dem Gerät gespeichert sind. Außerdem sollten Sie sie nicht in Ihrer DOM aufbewahren und sicherstellen, dass sie die richtigen Cache-Header haben (oder Sie werden überhaupt kein Vorladen haben).
• Testen Sie in Showpad.
• Entwickeln Sie nicht für ein festes Ansichtsfenster, nicht alle Geräte sind 1024*768 und Geräte können gedreht werden. Wenn die App, die Sie entwickeln, im Hoch- oder Querformat verwendet werden muss, fügen Sie unbedingt eine Meldung hinzu, wenn sie nicht korrekt verwendet wird.
• Bei der Weitergabe von HTML-Inhalten an einen Client (Sammlungsbetrachter) wird der HTML-Inhalt in einem iframe angezeigt. Stellen Sie sicher, dass die Abmessungen Ihres Ansichtsfensters und der Überlauf korrekt eingestellt sind.
• Wenn Sie eine Schaltfläche implementieren, die ein location.reload() ausführt, und dabei einen Click-Handler in JS verwenden, funktioniert dies nicht in der Web-app. Versuchen Sie innerhalb des iframe, „document.location.href = “ anstelle von window.location.reload() einzusetzen.
• Wir empfehlen die Verwendung von HTTPS für HTML-apps, die unter iOS extern kommunizieren. Wenn Sie Probleme mit der Anpassung haben, empfehlen wir Ihnen, auf die iOS-Version 10,1 oder höher zu aktualisieren. Um sicherzustellen, dass diese URLs und HTML-apps unter iOS funktionieren, haben wir eine Ausnahme hinzugefügt, um die HTTP-Kommunikation in unseren Webansichten zu ermöglichen. Diese Ausnahme funktioniert nur ab der iOS-Version 10.1.
  Unter iOS 10.0 führen HTTP-URLs oder HTML-apps, die HTTP zum Laden externer Ressourcen verwenden, zu leeren oder halb geladenen Seiten.
• Wir verwenden WKWebview, um Inhalte in unsere iOS-app einzubetten.
• Die Erweiterung „index.htm“ funktioniert nicht und Sie sollten stattdessen .html verwenden.
• Vermeiden Sie die Verwendung von Verknüpfungsordnern (Symlinks) in Ihrer Site-Struktur.