{"id":10359,"date":"2026-04-06T16:04:28","date_gmt":"2026-04-06T15:04:28","guid":{"rendered":"https:\/\/anb030.de\/a\/?p=10359"},"modified":"2026-04-06T16:11:37","modified_gmt":"2026-04-06T15:11:37","slug":"webapp-aurativi","status":"publish","type":"post","link":"https:\/\/anb030.de\/a\/webapp-aurativi\/","title":{"rendered":"WebApp: Wenn aus einem WebTV-Experiment eine echte UI-Perle namens auraTiVi wird"},"content":{"rendered":"
\n
\"Titelbild:<\/figure>\n<\/div>\n\n\n

Was passiert, wenn man den Minimalismus einer Web-App mit dem haptischen Erlebnis einer Highend-TV-Fernbedienung kombiniert? Mitte 2024 startete ich mit dem Projekt \u201eanb030 webTV\u201d einen kleinen privaten Versuch. Heute, einige Zeit sp\u00e4ter, ist daraus auraTiVi<\/strong> geworden: eine Streaming-Oberfl\u00e4che, die zeigt, wie viel Charme in gerade einmal 38 Kilobyte Code stecken kann. Die Grundidee von auraTiVi ist seit dem 1. Juli 2024 unver\u00e4ndert: Ich wollte eine nicht-kommerzielle<\/strong> Streaming-L\u00f6sung f\u00fcr die \u00f6ffentlich-rechtlichen Sender, die keine Installation, kein langes Setup und keine Store-G\u00e4ngelung ben\u00f6tigt. Ein Klick im Browser der Wahl oder als Web-App auf dem Home-Bildschirm gen\u00fcgt, und der Stream l\u00e4uft. Doch w\u00e4hrend die Basis simpel blieb, hat sich das \u201eDrumherum\u201d massiv gewandelt.<\/p>\n\n\n\n\n\n\n

\n
\"auraTiVi<\/figure>\n<\/div>\n\n\n

Mit der Version 2.26x hat das Projekt seinen finalen Feinschliff erhalten. Es geht nicht mehr nur darum, dass ein Videostream abgespielt wird, sondern auch darum, wie er pr\u00e4sentiert wird. Der Reiz der sch\u00f6nen Einfachheit. Wie bereits erw\u00e4hnt, ist es ein nicht-kommerzielles Projekt, das einfach zu bedienen ist und datenschutzkonform keine Nutzerdaten sammelt. Besonders stolz bin ich auf die vielen kleinen Details, die manch einer erst auf den zweiten Blick entdeckt. So befindet sich unter den Kanalwahltasten links bspw. eine kleine Art Display-Anzeige f\u00fcr die nachgezeichneten Senderlogos im Glasmorphismus-Stil. Es sind genau diese optischen Ankerpunkte, die daf\u00fcr sorgen, dass sich auraTiVi<\/strong> nicht wie ein austauschbarer Webplayer, sondern wie ein eigenst\u00e4ndiges Gadget anf\u00fchlt.<\/p>\n\n\n\n

Das Design: Glasmorphismus trifft auf Retro-Feeling<\/h2>\n\n\n
\n
\"auraTiVi<\/a><\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

Beim neugestalten von Icon und Benutzeroberfl\u00e4che hatte ich eine klare Vision: Es sollte modern und fast schon wie eine premium Oberfl\u00e4che wirken, aber nicht \u00fcberladen. Das neue Icon mit seinen leuchtenden Linien in Teal-Blue, angelehnt an das Cosmic-Orange des iPhone 17 Pro, bildet eine stilisierte TV-Silhouette und gibt einen kleinen Vorgeschmack auf das, was einen in der WebApp erwartet.<\/p>\n\n\n\n

In der Nutzeroberfl\u00e4che selbst setzte ich konsequent auf Tiefe. Die Oberfl\u00e4che ist dunkel und arbeitet stark mit Licht und Schattenw\u00fcrfen (Neumorphismus l\u00e4sst gr\u00fc\u00dfen). Dadurch wirken die Buttons nicht wie flache Grafiken, sondern wie physische Bedienelemente, die man am liebsten sofort dr\u00fccken m\u00f6chte. Ein dezentes Aufleuchten hier, ein gezielter Farbakzent dort \u2013 so werden Highlights gesetzt. Das Ergebnis ist eine UI, die Ruhe ausstrahlt, den Videoplayer ins Zentrum r\u00fcckt und eine logische, intuitive Steuerung erm\u00f6glicht. <\/p>\n\n\n\n

Die dynamische Kanalleiste zum Wischen und Antippen am unteren Rand f\u00fcgt sich dabei nahtlos ein und erlaubt schnelle Wechsel, ohne das Bild zu st\u00f6ren. Da mein Fokus klar auf der mobilen Nutzung lag, war es mein Ziel, die Benutzeroberfl\u00e4che bestm\u00f6glich auf gr\u00f6\u00dfere Displays, wie bspw. das iPad oder den Desktop, zu \u00fcbertragen, damit das Projekt auch dort gut aussieht.<\/p>\n\n\n\n

Unter der Haube: Schlank, flexibel und ehrlich<\/h2>\n\n\n
\n
\"So<\/figure>\n<\/div>\n\n\n

Technisch gesehen ist auraTiVi<\/strong> ein Leichtgewicht. Das gesamte Projekt kommt ohne ein schwerf\u00e4lliges Backend aus. Es wird lediglich eine HTML-Datei und eine externe M3U-Datei ben\u00f6tigt. Okay, die selbst gestrickten Sender-Logos und das App-Icon kommen nat\u00fcrlich auch noch dazu, damit hat das gesamte Projekt eine Gr\u00f6\u00dfe von fast 2 MB. Die Sender-Streams werden dabei beim Start dynamisch aus der m3u-Datei geladen. Das macht die Wartung extrem einfach: \u00c4nderungen an der Senderliste k\u00f6nnen direkt in der m3u-Datei vorgenommen werden, ohne dass der Haupt-Code angefasst werden muss. Hier muss man nat\u00fcrlich ehrlich sein: Die Nutzung solcher M3U-Listen und die Einbindung von Senderlogos bewegen sich oft in einer rechtlichen Grauzone. Ich greife hierbei auf frei zug\u00e4ngliche Open-Source-Quellen zur\u00fcck, wie sie bspw. auf GitHub f\u00fcr M3U\u2019s<\/a> und Logos<\/a> zu finden sind. Es ist ein Community-getriebener Ansatz, der dadurch meine WebApp flexibel h\u00e4lt.<\/p>\n\n\n\n

Apropos: Um auch rechtlich auf der sicheren Seite zu stehen, habe ich mich gegen die Nutzung urheberrechtlich gesch\u00fctzter Original-Senderlogos entschieden und stattdessen einen kreativen Umweg gew\u00e4hlt. Ich habe s\u00e4mtliche Sender-Logos neu interpretiert. Mithilfe der iOS-App \u201eGoDaddy Studio\u201d sind die Icons in einem modernen Glasmorphismus-Comic-Stil entstanden. Um die Performance der auraTiVi-WebApp nicht zu gef\u00e4hrden, habe ich diese Entw\u00fcrfe \u00fcber meine eigens daf\u00fcr entwickelte WebApp \u201eWebPify<\/a>\u201d gejagt. Das Ergebnis: Meine klobigen Original-PNGs wurden durch hochoptimierte WebP-Dateien ersetzt. Diese verleihen auraTiVi nicht nur einen einzigartigen Look, sondern halten auch die Ladezeiten minimal.<\/p>\n\n\n

\n
\"Die<\/figure>\n<\/div>\n\n\n

Die Wiedergabe selbst l\u00e4uft \u00fcber HLS (HTTP Live Streaming) und ist auf Stabilit\u00e4t ausgelegt. Ein Feature, das mir besonders am Herzen lag, ist der eigens entwickelte Vollbildmodus. Anstatt die Standardl\u00f6sung des Smartphone-Browsers zu nutzen, habe ich eine eigene Logik implementiert. Das macht besonders auf dem Smartphone den Unterschied: Das Ger\u00e4t ist frei drehbar und die Oberfl\u00e4che passt sich geschmeidig an \u2013 echtes TV-Feeling eben. <\/p>\n\n\n\n

Am Desktop kann selbstverst\u00e4ndlich auch die Tastatur zur Bedienung genutzt werden. So kann man bspw. mit den \u201ePfeiltasten\u201c durch die Kan\u00e4le wechseln. Der Ton l\u00e4sst sich per \u201eM\u201c-Taste ein- oder ausschalten, die Untertitel per \u201eU\u201c-Taste. Die Wiedergabe bzw. Pause kann \u00fcber die \u201eLeertaste\u201c gesteuert werden und das Vollbild kann \u00fcber die \u201eF\u201c-Taste ge\u00f6ffnet und mit der \u201eEsc\u201c-Taste wieder geschlossen werden.<\/p>\n\n\n\n

<\/p>\n\n\n

\n
\"F\u00fcr<\/figure>\n<\/div>\n\n\n

Zusammengefasst: klein, offen und auf GitHub.<\/h2>\n\n\n\n

Mit Version 2.26x f\u00fchlt sich auraTiVi f\u00fcr mich zum ersten Mal wirklich \u201erund\u201c an. Sie ist der Beweis, dass eine WebApp nicht gro\u00df sein muss, um eine hochwertige User Experience zu bieten. Trotz aller optischen Spielereien ist meine Anwendung schlank geblieben und hat ihren Fokus dabei nicht verloren. Am Ende ist auraTiVi genau das, was ich mir am Anfang vorgestellt hatte: eine digitale Fernbedienung f\u00fcr den Browser, die verdammt gut aussieht und einfach funktioniert. <\/p>\n\n\n\n

Wer mein Projekt privat verwenden m\u00f6chte, findet es auf GitHub<\/a>. Es liegt dort mit einer von mir gew\u00e4hlten Creative-Commons-Lizenz (CC BY-NC 4.0<\/a>). <\/p>\n\n\n\n

\"Mein<\/a><\/figure>\n\n\n\n


auraTiVi ist eine Web-App zur Wiedergabe externer Streaming-Quellen. Im Mittelpunkt stehen die technische Machbarkeit sowie die Demonstration einer modernen, plattform\u00fcbergreifenden Umsetzung im Web mit einer ansprechenden Benutzeroberfl\u00e4che. F\u00fcr Demonstrationszwecke nutzt das Projekt externe, \u00f6ffentlich zug\u00e4ngliche Open-Source-Datenquellen, die von der Community gepflegt werden. Die Verarbeitung erfolgt ausschlie\u00dflich exemplarisch im Rahmen dieser Machbarkeitsstudie. F\u00fcr die Inhalte der verwendeten externen Datenquellen \u2013 einschlie\u00dflich communitygepflegter Open-Source-Listen auf Plattformen wie GitHub \u2013 sind ausschlie\u00dflich die jeweiligen Anbieter verantwortlich.
<\/em><\/p>\n\n\n\n

<\/p>\n\n\n\n

<\/p>\n\n\n\n

\n\n\n\n

<\/p>\n\n\n\n

Ich bin ein \u201eEin-Personen-Betrieb\u201c, arbeite hauptberuflich im Gesundheitswesen und betreibe diese Seite als Hobbyprojekt in meiner Freizeit. Wenn Ihnen meine Arbeit gef\u00e4llt (die Beitr\u00e4ge, die Hintergrundbilder, mein allgemeines Auftreten \u2026 einfach alles), so d\u00fcrfen Sie gerne in Erw\u00e4gung ziehen, mir eine kleine Spende f\u00fcr zum Beispiel einen Caf\u00e9 \u2615\ufe0f per PayPal.com<\/a><\/strong> zukommen zu lassen! Ihre Beteiligung ist unglaublich wertvoll und tr\u00e4gt viel zur Unterst\u00fctzung und Erhalt dieser werbefreien Seite bei!<\/p>\n\n\n\n

<\/p>\n\n\n\n

\n
\"PayPal Unterst\u00fctzen<\/a><\/div>\n<\/div>\n\n\n\n
<\/div>\n\n\n\n
\n \"Author\n

Andr\u00e9 K. ist der Autor dieses Blogartikels. <\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Was passiert, wenn man den Minimalismus einer Web-App mit dem haptischen Erlebnis einer Highend-TV-Fernbedienung kombiniert? Mitte 2024 startete ich mit dem Projekt \u201eanb030 webTV\u201d einen kleinen privaten Versuch. Heute, einige Zeit sp\u00e4ter, ist daraus auraTiVi geworden: eine Streaming-Oberfl\u00e4che, die zeigt, wie viel Charme in gerade einmal 38 Kilobyte Code stecken kann. Die Grundidee von auraTiVi […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[488,387,480],"tags":[437,388,390,389,396,391,456],"class_list":["post-10359","post","type-post","status-publish","format-standard","hentry","category-ipad","category-iphone_ios","category-streaming","tag-github","tag-ios","tag-ipad","tag-iphone","tag-online","tag-safari","tag-webapp","gallery-content-unit"],"_links":{"self":[{"href":"https:\/\/anb030.de\/a\/wp-json\/wp\/v2\/posts\/10359","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/anb030.de\/a\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/anb030.de\/a\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/anb030.de\/a\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/anb030.de\/a\/wp-json\/wp\/v2\/comments?post=10359"}],"version-history":[{"count":40,"href":"https:\/\/anb030.de\/a\/wp-json\/wp\/v2\/posts\/10359\/revisions"}],"predecessor-version":[{"id":10491,"href":"https:\/\/anb030.de\/a\/wp-json\/wp\/v2\/posts\/10359\/revisions\/10491"}],"wp:attachment":[{"href":"https:\/\/anb030.de\/a\/wp-json\/wp\/v2\/media?parent=10359"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/anb030.de\/a\/wp-json\/wp\/v2\/categories?post=10359"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/anb030.de\/a\/wp-json\/wp\/v2\/tags?post=10359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}