radioplayer

Technische Dokumentation: Webview Guidelines

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 der Sender-App-Seite auch darin enthalten sein.

Wie Sie den Sender-Screen der mobilen App in Situ testen

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.

Beispiel für den mobilen Sender-Screen

Laden und bearbeiten Sie zu Beginn die HTML-Seite des default Station Screen der mobilen App. Wenn Sie diese in einem Desktop-Browser öffnen, sieht die Seite eigenartig aus, da Sie lediglich für die Verwendung in einer mobilen App konzipiert ist. Die App bietet der Seite relevante Metadaten, die sie zum Leben erwecken.

Wir haben ebenfalls kleine Beispiel Webviews gebaut, welche die API einer nativen App demonstrieren (Anmerkung: Diese werden NICHT wie erwartet außerhalb der radioplayer App funktionieren). Bitte sehen Sie sich das JavaScript am Ende der Seite an, um zu sehen, wie dies funktioniert.

  • Beinhaltet eine mobile Werbung
  • Up-selling zu einer eigenen Radiosender App nach einer Minute des Hörens

Links zu den Beispielen finden Sie am Ende dieses Artikels.

 

Größen zum Arbeiten

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!

Die kleines Screengröße die wir unterstützen ist für das QVGA HTC Wildfire, welches 240px breit und 230px hoch ist.

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.

Minimale Geräteliste

Die radioplayer App wurde für folgende Geräte entwickelt (dies sind die Testgeräte und illustrieren die minimalen Spezifikationen auf welchen Geräten die App funktionieren soll):

iOS

  • iPhone 3GS – 320 x 480 px
  • iPhone 4 – 640 x 960 px
  • iPhone 4S – 640 x 960 px
  • iPad – 1024 x 768 px
  • iPad 3 – 2048 x 1536 px

Android

  • HTC Hero – HVGA – 320 x 480 px
  • HTC Wildfire – QVGA – 240 x 320 px
  • Samsung Galaxy S2 – WVGA800 – Android v2.3.5 – 480 x 800 px
  • HTC One X – 720 x 1280 px
  • Nexus S – WVGA800 – 480 x 800 px

Schutzzone

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 wie Sie die API verwenden finden Sie in dieser Dokumentation.

 

Regeln für die Verlinkung und internes verlinken

Wir haben uns entschieden, in dieser Version der radioplayer App, dass Links in einem externen Gerätebrowser geöffnet werden müssen! Dies ist aus sicherheitstechnischen Gründen und zur Garantie eines guten 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
Stay up to date!