Richtlinien für Web-Apps und HTML-Inhalte

Ihre Vorteile

Sie können Ihre Inhalte auf großartige Weise präsentieren, um Kunden und Interessenten wirklich zu beeindrucken. Durch den Aufbau der interaktiven HTML5 Web-Apps zur Verwendung innerhalb Showpad, können Sie Ihre Vertriebsmitarbeiter und ihre Aussichten 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 individuelle HTML - Web - Apps, die Ihren Umsatz Bedürfnisse anzupassen.
• Kunden und Interessenten beeindrucken
• 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
• Inhalt, den Sie in Ihrer Benutzerdefinition für die Web App verwenden können
• Kenntnisse in der Verwendung von Javascript, CSS, Arbeitsspeicher 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 einer 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
• Schauen Sie sich die W3C Best Practices 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, Bildern, …) 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 Stammverzeichnis oder im Stammordner befindet. Die "Haupt" HTML-Datei sollte daher "index.html" heißen. Showpad wird die zip-Datei entpacken und die Web App verarbeiten um 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 Google Analytics verwenden, um Ihnen leistungsstarke Einblicke geben. HTML-Inhalt wird über HTTPS angefordert. Verwenden Sie daher HTTP 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'); // Erstelle 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 nicht den Verlauf überprüfen
ga('send', 'pageview', '/about');

Weitere Informationen finden Sie auf der Entwickler-Website von Google.

• Auf Showpad kann unter 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. Unter 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.

Unter iOS gibt es oben links ein Symbol, um die Showpad-Navigation zu aktivieren und die Web App zu beenden. 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.
  Unter 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 Angle verwenden, müssen Sie sicherstellen, dass Angle 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.
  
• Berührungs-Ereignisse
  In diesem Blog finden Sie weitere Informationen dazu, was bei Touch-Ereignissen für den Metro-Modus unter Windows zu berücksichtigen ist.

Für die Verwendung in der Showpad Web App, benutzen Sie bitte den <a href=""> Tag zur Verlinkung von Assets.

Für den Einsatz in der Showpad Web App verwenden Sie bitte die < a href =““ > 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.
• Kennen Sie Ihre externen Bibliotheken! Sie bieten Ihnen einfach zu verwendende APIs, können jedoch bei nicht korrekter Verwendung mit Performance-Kosten verbunden sein -> jQuery: `$ ()` ist teuer, cachen Sie Ihre Selektoren, 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 Ihr DOM so sauber wie möglich. Nicht verwendete Elemente ausblenden/entfernen.
• Das Vorabladen 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 stellen Sie sicher, dass sie die richtigen Cache-Header haben (oder Sie führen gar kein Vorabladen durch)
• Test im Showpad.
• Entwickeln Sie nicht für ein festes Ansichtsfenster. Nicht alle Geräte sind 1024×768, und Geräte können gedreht werden. Wenn Sie eine App entwickeln, die Entweder im Quer- oder Hochformat sein muss, stellen Sie sicher, dass Sie den Nutzer bei Falschverwendung informieren.
• Wenn Sie einen HTML-Inhalt für einen Client 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 in 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 extern unter iOS 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 zuzulassen. 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 die UIWebview, um Inhalte in unsere iOS-App einzubetten. Abhängig von den von Ihnen verwendeten Befehlen kann die Leistung von UIWebView etwas geringer sein.

  Hinweis: UIWebview wird nicht mehr unterstützt und wir werden in einem kommenden Update der Plattform zu WKWebview wechseln.

• Die Erweiterung "index.htm" funktioniert nicht und Sie sollten stattdessen.html verwenden.
• Vermeiden Sie die Verwendung von Verknüpfungsordnern (Symlinks) in Ihrer Site-Struktur.

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