Richtlinien für Web-Apps und HTML-Inhalte

Was ist für Sie drin?

Sie können Ihre Inhalte auf fantastische Weise präsentieren, um Kunden und Interessenten wirklich zu beeindrucken. Durch den Aufbau der interaktiven HTML5 Web-Apps, die innerhalb von Showpad verwendet werden können, 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.

Sehen Sie sich ein Beispiel an

Hauptmerkmale

• Erstellen Sie angepasste 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

Sie benötigen dies, um erfolgreich zu sein

• HTML5-Kenntnisse
• Inhalte zur Verwendung in Ihrer benutzerdefinierten Web-app
• 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 zur Großartigkeit

• 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
• Platzieren Sie index.html im Stammordner der ZIP-Datei
• Verwenden Sie iFrames nicht in Ihrer Anwendung.
• Wir empfehlen die Verwendung von HTTPS in allen Hyperlinks.
• Berücksichtigen Sie immer die Speichergrenzen mobiler Geräte.
• Lesen Sie die besten Vorgehensweisen für W3C zum Entwickeln von Web-Apps

Sehen Sie sich dies Schritt für Schritt an

Allgemeines

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 werden in der Showpad-App nicht ausgeführt.
Flash wird nicht vollständig unterstützt, da es sich um eine ältere Technologie handelt. Dies kann dazu führen, dass die Seiten nicht wie erwartet angezeigt werden.

Um Ihre Web-app für Showpad vorzubereiten, komprimieren Sie alle Dateien der App in einerZIP-Datei und stellen Sie sicher, dass sich eine index.html Datei im Stamm oder Stammordner befindet. Daher sollte die HTML-Hauptdatei "index.html" heißen. Showpad entpackt die Zip-Datei und verarbeitet die Web-app, um ein Miniaturbild zu erstellen 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 sichtbar ist, z.B. ein Ladebildschirm, und dann für den tatsächlichen Inhalt umgeschaltet wird. Wir empfehlen Ihnen, alle von der App verwendeten Dateien (Javascript, CSS, Bilder,...) in derZIP-Datei zu inkludieren, 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-appzu sehen, können Sie Google Analytics verwenden, um leistungsstarke Einblicke zu erhalten. HTML-Inhalte werden über HTTPS angefordert. Verwenden Sie daher nicht HTTP als Quellenskript, da die App dadurch in den meisten Browsern nicht korrekt geladen wird.

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

// Den Tracker erstellen
ga('create', 'UA-ABCDE123465-1', 'auto');

// Lassen Sie den Tracker nicht das Protokoll überprüfen
ga('set', 'checkProtocolTask', null);

// Lassen Sie den Tracker nicht den Speicher überprüfen
ga('set', 'checkStorageTask', null);

// Lassen Sie den Tracker nicht den Verlauf überprüfen
ga('set', 'historyImportTask', null);
ga('send', 'pageview', '/about');

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

Sie können auch den Google-Dienst gtag.js verwenden. Um mehr darüber zu erfahren, finden Sie die Informationen hier:

• Verwendung des globalen Site-Tags (gtag.js)
• So wechseln Sie von analytics.js zu gtag.js

Allgemeine Informationen finden Sie auf der Entwickler-Webseite von Google. 

• Auf Showpad kann über iOS, Android, Browser und Windows (8.1+) zugegriffen werden. Das bedeutet, dass die Web-App für verschiedene Bildschirmgrößen geeignet sein sollte, weshalb die Verwendung eines ansprechenden Designs eine gute Idee ist. Die verwendeten Technologien sollten zu diesen Geräten passen. Auf 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 Probleme verursachen. Sehen Sie sich die Problemumgehung dafür an.

Unter iOS befindet sich oben links ein Symbol, um die Showpad-Navigation zum Verlassen der Web-App zu aktivieren. Dies bedeutet, dass dieser Bereich für diese Schaltfläche und keine Aktionsobjekte der Web-app selbst reserviert werden sollte.
In  diesemArtikel finden Sie  den vollständigen Bericht über JS-Funktionen, die wir in HTML-Inhalten anbieten.

Es ist möglich, den lokalen Speicher zum Sichern des Status einer Web-app zu verwenden, sodass Sie die App verlassen und zu diesem Status zurückkehren können. Denken Sie an ein ausgefülltes Formular, eine Sprachauswahl usw.

Bei der Entwicklung Ihrer HTML5-Datei sollten Sie berücksichtigen, 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, Folgendes: 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 10 sind möglicherweise einige JS-Funktionen blockiert. Ü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, daher beginnen alle URIs mit ms-local-stream://. Wenn Sie Angular verwenden, müssen Sie sicherstellen, dass Angular dies in seinem Kompilierungsanbieter als sicheres Protokoll behandelt. Wenn Sie dies nicht tun, behandelt Angular diese URIs als unsicher und gibt ihnen das Präfix ,,unsafe:", was dazu führt, dass das Webview-Element den angeforderten Artikel nicht laden kann.
• Touch-Events
  In diesem Blog finden Sie weitere Informationen dazu, was bei Touch-Events für den Metro-Modus unter Windows zu beachten ist.

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

Für die Verwendung in der Showpad Web-app benutzen Sie bitte die <a href=„“> Tag-Methode für Hyperlinks. 
Beachten Sie auch, dass Showpad Inhalte über das https-Protokoll lädt und Hyperlinks auch über https geladen werden müssen.
Beachten Sie auch Abschnitt 2 über die Skriptquelle, wenn Sie auf externe Seiten verlinken.

• Behalten Sie Ihre Hardware-Grenzen im Sinn, es ist kein Raumschiff, auf dem Sie den Code ausführen.
• Sie sollten Ihre externen Bibliotheken im Auge behalten. Sie bieten Ihnen zwar einfach zu verwendende APIs, aber sie können die Leistung beeinträchtigen, wenn sie nicht richtig verwendet werden-> jQuery: `$()` ist teuer, zwischenspeichern Sie Ihre Selektoren, verketten Sie Ihre Aktionen/Methoden.
• Verwenden Sie keine JS-Animationen und festgelegtes Timeout, verwenden Sie entweder CSS-Animationen (vorzugsweise 3d, damit die GPU die Berechnungen übernimmt, nicht die CPU) oder verwenden Sie requestAnimationFrame.
• Halten Sie Ihr DOM so sauber wie möglich. Blenden Sie Elemente aus oder entfernen Sie sie, wenn Sie sie nicht verwenden.
• Das Vorladen von Assets ist nur dann interessant, wenn sie aus dem Netzwerk stammen, nicht wenn sie auf dem Gerät gespeichert sind. Außerdem bewahren Sie sie nicht in Ihrem DOM auf und stellen Sie sicher, dass sie die richtigen Cache-Header haben (oder es wird überhaupt kein Vorladen passieren)
• Testen Sie in Showpad.
• Entwickeln Sie nicht für einen festen Darstellungsbereich, 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, sollten Sie eine Meldung hinzufügen, wenn sie nicht korrekt verwendet wird.
• Wenn Sie HTML-Inhalte für einen Client (Sammlungssbetrachter) freigeben, wird der HTML-Inhalt in einem iFrame angezeigt. Stellen Sie sicher, dass die Abmessungen und der Überlauf Ihres Ansichtsfensters korrekt eingerichtet sind.
• Wenn Sie eine Schaltfläche implementieren, die eine location.reload () mit einem Klick-Handler in JS ausführt, funktioniert dies in der Web-app nicht. Versuchen Sie im iframe, 'document.location.href =' anstelle von window.location.reload() festzulegen.
• Wir empfehlen die Verwendung von HTTPS für HTML-Apps, die unter iOS extern kommunizieren. Wenn Sie Probleme bei der Anpassung haben, empfehlen wir Ihnen, auf 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 erlauben. Diese Ausnahme funktioniert nur ab iOS Version 10.1.
  Auf 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 Seiten-Struktur.

Für weitere Informationen wenden Sie sich bitte an unseren Kundendienst.