In diesem Dokument beschreiben wir, wie Sie am besten eine eigene Seite - einen sogenannten HTML-Webview - für Ihren Sender in den Radioplayer Apps aufbauen.

Ihre App-Seiten an den Radioplayer übermitteln (Mobile App Station Screen)

Die URL Ihrer Sender-App-Seite geben Sie bitte im Station Control Panel ein. Gehen Sie zum Profil Ihres Senders und dort auf den Tab "Devices". (Senderprofil eingeben)

Falls Sie uns die Metadaten per XML übermitteln, muss die URL für den Station Screen auch darin enthalten sein.

Unsere Empfehlung ist eine Arbeitsfläche mit mindestens 320px in der Breite zu erstellen, die sich jedoch auf die Größe unterschiedlicher Geräte anpasst. Die Höhe ist abhängig von vielen unterschiedlichen Größen der mobilen Endgeräte – vor allem bei Android Geräten. Für Geräte wie das iPhone empfehlen wir eine Breite von 380px. Behalten Sie im Kopf, dass dieser Screen Smartphone- und Tablet-Benutzern – sowohl in Hoch- als auch in Querformat gezeigt wird! Demnach ist responsive Design notwendig!

Wir empfehlen die Verwendung des ‚viewport‘ Metatags. Setzen Sie dabei die Breite auf ‚device-width‘. Dies erlaubt dem jeweiligen Gerät den Screen zu vergößern/verkleinern um die gesamte Breite des Gerätes auszunutzen. In unserem Beispiel zeigen wir Ihnen ebenfalls pinch/zooming bei Verwendung des folgenden Tags. Die Entscheidung, ob Sie das Zoomen erlauben, überlassen wir Ihnen: 

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Aufgrund der enormen Anzahl und kontinuierlichen Veränderung der Screengrößen der Geräte, empfehlen wir user-agent sniffing zur Erstellung komplexere Webviews zu verwenden. Dies macht vor allem dann Sinn, wenn ein responsive Design nicht umsetzbar ist. 

Sie können den Sender-Screen der mobilen App testen indem Sie in der mobilen App den zugehörigen Sendersuchen und auf die Senderseite gehen. Wenn Sie die bisherigen Schritte befolgt haben wird der Sender-Screen erscheinen. Beachten Sie: Es ist hier keine Developer Umgebung verfügbar! Alle Veränderungen, die Sie an der oben spezifizierten URL vornehmen werden sofort veröffentlicht. Einige Sender verwenden IP-Abfragen, die das Testen unterstützen – setzen Sie dabei die URL der Webview auf einen IP-Sniffer und leiten Sie Besucher zu der ‚live‘ Version und Ihre Angestellten zu der ‚dev‘ Version weiter.

Wir empfehlen eine Schutzzone von 20-30 Pixel am Rand der HTML-Seite um versehentliches Tippen auf Navigationselemente zu vermeiden.

Es gibt keine weiteren Empfehlungen bezüglich einer Schutzzone.

Interagieren mit der Radioplayer-App

Wir haben eine JavaScript API dokumentiert und bereitgestellt, die Sie zum Interagieren in der nativen Radioplayer-App verwenden können. Diese API ist plattformunabhängig und bietet Methoden zum Abfragen der nativen App, Anhören von gesendeten Events von der App und Befehlen an die App um unterschiedliche Dinge auszuführen.

Details finden Sie in dieser Dokumentation.

Regeln für die Verlinkung und internes verlinken

Links müssen in einem externen Gerätebrowser geöffnet werden! Dies geschieht aus Gründen der Sicherheit und zur Garantie eines optimalen User Interface.

Wenn Sie externe Links überschreiben möchten (z.B.: wenn Sie ein iFrame mit einem Ad inkludieren), können Sie einen speziellen String „rpwv-int“ in die URL inkludieren. Beim nativen App Niveau zeigt das Vorhandensein dieser Zeichenfolge im Link an, dass dieser auch in derselben Webview angezeigt werden kann:

• The link „http://www.mysite.com/#rpwv-int“ will open internally in the web-view
• The link „http://www.mysite.com/?linkstyle=rpwv-int“ will open internally in the web-view
• The link „http://www.mysite.com/rpwv-int/mypage.html“ will open internally in the web-view
• The link „http://www.mysite.com/“ will open externally

Weiter: Technische Dokumentation: Webview JS API