onair.sunshine.it

Inhaltsverzeichnis

Die Webseite https://onair.sunshine.it/ (die On-Air-Anzeige von Radio Sonnenschein) hat folgende Merkmale:

Bei dieser Seite handelt es sich um eine maßgeschneiderte, schlanke Webanwendung. Im Gegensatz zu großen Portalen nutzt sie kein schweres Content-Management-System (CMS) wie WordPress, Joomla, o.a., sondern ist gezielt für die Echtzeitanzeige des Radioprogramms optimiert. Es wird keine Datenbank wie MYSQL verwendet.

Hier ist die detaillierte Analyse der genutzten Technologien:

1. Das Fundament & Server

• Webserver & Infrastruktur: Die Seite läuft auf einem klassischen, hochperformanten Linux-Webserver (Nginx 1.30.6), der für das schnelle Ausliefern von statischen Dateien und einfachen Skripten optimiert ist. Die Domain ist als Subdomain direkt an die Hauptseite von Radio Sonnenschein – Sunshine (sunshine.it) angebunden.
• Verschlüsselung: Die Seite nutzt ein gültiges SSL/TLS-Zertifikat (HTTPS), um die Verbindung abzusichern.
onair.sunshine.it unterstützt HTTP/3 (h3).

Netzwerk-Tab (Network) – Browser-Entwicklertools, hier von Google Chrome. Die Zeitleiste oben nennt man Wasserfall-Diagramm (Waterfall/Timeline).
Öffnen mit F12 (oder Strg+Shift+I), dann auf “Netzwerk”. Die Filterleiste oben (Fetch/XHR, Doc, CSS, JS, Media …) filtert nach Anfragetyp.

2. Frontend (Das Design & die Oberfläche)

• HTML5 & CSS3: Die Struktur der Seite ist modernes HTML5. Die Benutzeroberfläche nutzt CSS-Media-Queries, um ein Responsive Design zu gewährleisten – die Seite passt sich also automatisch an Smartphones, Tablets und Desktop-Monitore an.
• Bootstrap / Custom CSS: Für das Layout und die Navigation (die Menüleiste oben) werden Styling-Klassen verwendet, die stark an moderne CSS-Frameworks wie Bootstrap angelehnt sind, um ein sauberes Grid-System zu erzeugen.

3. JavaScript & Echtzeit-Funktionen (Die Kerntechnik)

Da ein Radiosender sekündlich den aktuellen Song („Now On Air“) aktualisieren muss, ohne dass der Nutzer die Seite manuell neu laden muss, greift die Seite auf JavaScript zurück:
• AJAX / Fetch-Abfragen: Im Hintergrund läuft ein Skript, das in regelmäßigen Intervallen (z. B. alle 10 bis 30 Sekunden) eine kleine JSON- oder XML-Datei vom Server abfragt. In dieser Datei speichert das Radio-Automationssystem den aktuell laufenden Titel.
• jQuery: Für die einfache Manipulation der Webseiten-Inhalte (das Austauschen des Songtitels und des Album-Covers) wird die weit verbreitete JavaScript-Bibliothek jQuery genutzt.

4. Medien-Einbindung

• Audio-Streaming: Für den Live-Stream wird das native HTML5 <audio>-Tag genutzt. Der Stream selbst wird von einem externen Icecast- oder Shoutcast-Streaming-Server abgegriffen und direkt im Browser abgespielt.
• YouTube-API Integration: Unter der Unterseite /video/ wird die offizielle YouTube-Iframe-API genutzt, um youtube-Videos, Live-Webcams und Studio-Videos direkt einzubinden.
Zusammenfassung: Die Seite ist ein Beispiel für ein klassisches, schnelles Custom-Built-Webprojekt. Sie verzichtet auf unnötigen Ballast, um extrem kurze Ladezeiten zu garantieren und stabil die aktuellen Radiodaten auszugeben.

5. Warum ist HTTP/3 so genial?

HTTP/3 basiert nicht mehr auf dem alten TCP-Protokoll, sondern auf UDP. Für ein Live-Radio und die On-Air-Anzeige bringt das enorme Vorteile mit sich:
• Weniger Ladezeit-Verzögerung (Head-of-Line Blocking): Wenn bei HTTP/2 ein Datenpaket im Mobilfunknetz verloren geht, stoppt der gesamte Datenstrom. Bei HTTP/3 läuft der Rest der Seite (und der Musik-Stream) ungestört weiter, während nur das fehlende Paket neu geladen wird.
• Schnellerer Wechsel (Connection Migration): Wenn du mit dem Smartphone unterwegs bist und vom heimischen WLAN ins mobile LTE/5G-Netz wechselst, bricht die HTTP/3-Verbindung nicht ab. Der Songtitel aktualisiert sich nahtlos weiter, ohne dass der Browser die Verbindung komplett neu aushandeln muss.