Richtlinien für Web-Apps und HTML-Inhalte

Ihre Vorteile

Sie können Ihre Inhalte auf fantastische Weise präsentieren, um Kunden und Interessenten wirklich zu beeindrucken. Durch den Aufbau von interaktiven HTML5 Web-Apps innerhalb von Showpad können Sie Ihre Vertriebsmitarbeiter und ihre Interessenten auf interaktive Weise führen. Die folgenden Richtlinien sollten befolgt werden, um diesen HTML5-Inhalt in Showpad optimal zu nutzen.

Ein Beispiel ansehen

Hauptvorteile

• Erstellen Sie individualisierte HTML-Web-Apps, die Ihren Verkaufsanforderungen entsprechen.
• Beeindrucken Sie Kunden und Interessenten
• Erstellen Sie interaktive Tutorials und Konversationen
• Es funktioniert plattformübergreifend
• Verwenden Sie die App offline, wenn alle Ressourcen im Archiv verfügbar sind

Was Sie für den Erfolg benötigen

• HTML5-Kenntnisse
• In Ihrer benutzerdefinierten Web App zu verwendender Inhalt
• Kenntnisse im Umgang mit Javascript, CSS, Speicher und Bildverarbeitung
• Entwicklung von Tools wie XCode (iOS) zur Überprüfung der Speichernutzung Ihrer HTML-App

Der schnelle Weg zum Erfolg

• Es wird nur HTML5 mit Javascript, CSS und Bildern unterstützt
• Dynamische Programmiersprachen wie Ruby, PHP und .NET 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 eine ZIP-Datei
• Legen Sie die index.html im Stammverzeichnis der ZIP-Datei ab
• Verwenden Sie keine iFrames in Ihrer Anwendung
• Wir empfehlen die Verwendung von HTTPS in allen Hyperlinks
• Beachten Sie immer die Speichergrenzen von Mobilgeräten
• Sehen Sie sich die bewährten Verfahren von W3C für die Entwicklung von Web-Apps an

Sehen Sie sich dies Schritt-für-Schritt an

Allgemein

Nur HTML5 Web-Apps (unter Verwendung von Javascript, CSS, HTML, Bilder,...) werden unterstützt. Dynamische Programmiersprachen wie Ruby, PHP, .NET usw. erfordern eine bestimmte Serversoftware und können in der Showpad-App nicht ausgeführt werden.
Flash wird nicht vollständig unterstützt, da es sich um eine ältere Technologie handelt und die Seiten möglicherweise 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 Stamm oder im Stammverzeichnis befindet. Die "Haupt"-HTML-Datei sollte daher "index.html" heißen. Showpad wird das zip auspacken und die Web App veranlassen, ein Vorschaubild zu generieren und es für unsere Apps vorzubereiten. Die Miniaturansicht ist weiß, wenn die Datei index.html leer ist. Sie können dieses Problem lösen, indem Sie ein Bild im HTML-Inhaltspaket haben, das in den ersten Millisekunden wie ein Ladebildschirm sichtbar ist und dann für den tatsächlichen Inhalt umgeschaltet wird. Wir empfehlen Ihnen, alle von der App verwendeten Dateien (Javascript, CSS, Bilder,...) in die ZIP-Datei aufzunehmen, damit die App ordnungsgemäß ausgeführt wird, unabhängig davon, ob eine Internetverbindung besteht oder nicht.

Es ist möglich, Web-Apps in Showpad auszuführen, auch wenn keine Internetverbindung besteht. Voraussetzung dafür ist, dass alle Ressourcen im zip-Archiv verfügbar sind.

Um nützliche Statistiken über HTML5 App-Nutzung in Showpads Web App zu sehen, können Sie sich mit Google Analytics leistungsstarke Einblicke ansehen. HTML-Inhalt wird über HTTPS angefordert. Verwenden Sie HTTP daher nicht als Quellenskript, da die App dadurch in den meisten Browsern nicht ordnungsgemäß geladen werden kann.

Damit Google Analytics in HTML5-Apps sowohl in der Web App als auch in unseren mobilen Apps funktioniert, müssen Sie Folgendes verwenden:

ga('create', 'UA-ABCDE123465-1', 'auto'); / / Erstellen Sie den Tracker
ga('set', 'checkProtocolTask', null); // Lassen Sie den Tracker das Protokoll nicht überprüfen
ga ('set', 'checkStorageTask', null); // Lassen Sie den Tracker den Speicher nicht überprüfen
ga ('set', 'historyImportTask', null); // Lassen Sie den Tracker den Verlauf nicht überprüfen
ga ('send', 'pageview', '/ about');

Weitere Informationen finden Sie auf der Entwicklerseite von Google.

• Auf Showpad kann mit iOS, Android, Browser und Windows (8.1+) zugegriffen werden. Dies bedeutet, dass die Web App für mehrere Bildschirmgrößen geeignet sein sollte. Daher ist die Verwendung eines ansprechenden Designs eine gute Idee. Die verwendeten Technologien sollten zu diesen Geräten passen. Bei iOS / Android verwenden wir das Standard-Webkit (Safari / Chrome). Showpad Web unterstützt IE11, Edge, Chrome, Safari und Firefox. Für spezifische Windows-Richtlinien klicken Sie hier.
• Das domänenübergreifende Laden von Javascript kann zu Problemen führen. Überprüfen Sie die Problemumgehung.

Bei iOS gibt es oben links ein Symbol, mit dem die Showpad-Navigation die Web App beenden kann. Dies bedeutet, dass dieser Platz für diese Schaltfläche und keine Aktionsobjekte der Web App selbst reserviert sein sollte.
In  diesem Artikel finden Sie den vollständigen Bericht über die JS-Funktionen, die wir in HTML-Inhalten anbieten.

Mithilfe des lokalen Speichers können Sie den Status einer Web App speichern, sodass Sie die App verlassen und zu diesem Status zurückkehren können. Denken Sie an ein ausgefülltes Formular, eine Sprachauswahl usw.

Beachten Sie beim Entwickeln Ihrer HTML5-Datei, dass Sie iFrames nicht für interne Links verwenden können, da diese auf dem iPad nicht funktionieren.

• Webview-Element.
  Beachten Sie beim Erstellen von HTML-Inhalten, auch als Web-Apps bezeichnet, die in der Showpad-Windows-App verwendet werden, dass die Windows Store-App das Webview-Element (https://msdn.microsoft.com/en-us/library/windows/apps/dn301831.aspx) zum Anzeigen der HTML-App verwendet.
  Bei Windows 10 sind möglicherweise einige JS-Funktionen blockiert. Überprüfen Sie Ihre Protokolle, um sicherzustellen, dass sie über ausreichende Berechtigungen verfügen, um ausgeführt zu werden.
  
  Die vollständige App wird zuerst auf das Gerät heruntergeladen und dann mit dem Protokoll ms-local-stream von der Festplatte geladen, sodass alle URIs mit ms-local-stream:// beginnen. Wenn Sie Angular verwenden, müssen Sie sicherstellen, dass Angular dies als sicheres Protokoll in seinem Compile-Provider behandelt. Wenn Sie dies nicht tun, werden diese URIs als unsicher behandelt und mit dem Präfix "unsicher": versehen, sodass das Webview-Element das angeforderte Element nicht laden kann.
• Touch Ereignisse
  In diesem Blog finden Sie weitere Informationen dazu, was bei Touch-Ereignissen für den Metro-Modus unter Windows zu berücksichtigen ist.

Zur Anwendung in der Showpad Web App verwenden Sie bitte die <ahref=""> Tag-Methode für Asset-Links.

Für den Einsatz in der Showpad Web App verwenden Sie bitte <ahref=""> Tag-Methode für Hyperlinks. 
Beachten Sie auch, dass Showpad Inhalte über das https-Protokoll lädt und Hyperlinks ebenfalls über https geladen werden müssen.
Beachten Sie auch Abschnitt 2 zur Skriptquelle, wenn Sie auf externe Seiten verlinken.

• Kennen Sie Ihre Hardware-Grenzen, es ist kein Raumschiff, auf dem Sie den Code ausführen.
• Wenn Sie Ihre externen Bibliotheken kennen, stellen sie Ihnen einfach zu bedienende APIs zur Verfügung, aber sie können mit den Kosten der Leistung verbunden sein, wenn sie nicht korrekt verwendet werden -> jQuery: `$()` ist teuer, speichern Sie Ihre Auswahlmöglichkeiten, verketten Sie Ihre Aktionen/Methoden.
• Verwenden Sie keine JS-Animationen und setTimeout. Verwenden Sie entweder CSS-Animationen (vorzugsweise 3D, damit die GPU die Berechnungen übernimmt, nicht die CPU) oder verwenden Sie requestAnimationFrame.
• Halten Sie Ihre DOM so sauber wie möglich. Blenden Sie nicht verwendete Elemente aus / entfernen Sie sie.
• Das Vorladen von Assets ist nur dann interessant, wenn sie aus dem Netzwerk stammen, nicht wenn sie auf dem Gerät gespeichert sind. Bewahren Sie sie auch nicht in Ihrem DOM auf und vergewissern Sie sich, dass sie die richtigen Cache-Header haben (oder Sie führen gar keine Vorladevorgänge durch)
• Test in Showpad.
• Entwickeln Sie kein festes Ansichtsfenster. Nicht alle Geräte sind 1024*768, und Geräte können gedreht werden. Wenn die App, die Sie entwickeln ein Nutzer sein muss im Quer- oder Hochformat, stellen Sie sicher, dass Sie bei falscher Verwendung eine Nachricht hinzufügen.
• Wenn Sie HTML-Inhalt für einen Kunden freigeben (Sammlungsbetrachter), wird der HTML-Inhalt in einem Iframe angezeigt. Stellen Sie sicher, dass die Abmessungen Ihres Ansichtsfensters und der Überlauf korrekt eingerichtet sind
• Wenn Sie eine Schaltfläche implementieren, die location.reload () ausführt, und einen Click-Handler in JS verwenden, funktioniert dies nicht auf der Web App. Versuchen Sie im iframe die Einstellung 'document.location.href =' anstelle von window.location.reload().
• Wir empfehlen die Verwendung von HTTPS für HTML-Apps, die bei iOS extern kommunizieren. Wenn Sie Probleme mit der Anpassung haben, empfehlen wir Ihnen, auf iOS Version 10.1 oder höher zu aktualisieren. Um sicherzustellen, dass diese URLs und HTML-Apps auf iOS funktionieren, haben wir eine Ausnahme hinzugefügt, um die HTTP-Kommunikation in unseren Webansichten zuzulassen. Diese Ausnahme funktioniert nur ab 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 Verwendung der Erweiterung "index.htm" funktioniert nicht und Sie sollten stattdessen .html verwenden.
• Vermeiden Sie die Verwendung von Verknüpfungsordnern (Symlinks) in Ihrer Seitenstruktur.

Für weitere Informationen wenden Sie sich bitte an unser Support-Team.