Vorheriger Artikel Nächster Artikel

Web-Apps entwickeln mit HTML, CSS3 und JavaScript

Aus dem
t3n Magazin Nr. 26

12/2011 - 02/2012

Web-Apps entwickeln mit HTML, CSS3 und JavaScript

Die Frage, ob man besser eine native App oder eine plattformunabhängige entwickeln sollte, wird aktuell rege diskutiert. Die Antwort darauf ist abhängig von der Komplexität und den Eigenschaften, die eine mobile Applikation aufweisen soll. Wir zeigen, was plattformunabhängige Web-Apps bereits können und welche Vor- und Nachteile sie gegenüber ihren nativen Geschwistern haben.

 

Foto: kimberrywood/iStock
Eine Web-App ist eine Website, die für mobile Endgeräte aufbereitet wird und dank der kommenden Internet-Standards HTML5 und sowie der Skriptsprache Eigenschaften einer nativen App erhält. Sie wird gewöhnlich mit dem internen Browser geöffnet und auf dem Homescreen verknüpft.

Die Entwicklung kann dabei auf verschiedene Arten erfolgen: Entweder entwickelt man eine Web-App programmatisch und hat die volle Kontrolle über den Quellcode. Oder man verwendet Frameworks, die durch ihre vordefinierten Templates und Funktionen die Entwicklung erheblich erleichtern (können).

Web-App in Handarbeit

Ein Vorteil der Web-App-Programmierung ist der einfache Einstieg für Web-Entwickler, da sie keine neue Programmiersprache erlernen müssen, sondern ihr bisheriges Wissen in die Entwicklung einer mobilen Website einfließen lassen können. So sieht eine einfache App, die ein Bild und eine Überschrift anzeigt, kaum anders aus als eine herkömmliche HTML-Seite. Allerdings wird diese später auch offline verfügbar sein.

Only for iPhone

Ruft man diese Website mit dem iPhone (ab iOS 3.0) auf, so wird, während die Inhalte der Startseite geladen werden, ein so genannter Splashscreen, also ein Lade-Bild, angezeigt („apple-touch-startup-image“). Das Meta-Tag „viewport“ legt die Auflösung fest, mit der die Seite vom Browser gerendert werden soll. Im Beispiel soll die Auflösung des Geräts verwendet werden. Zusätzlich wird die initiale Skalierung der Seite festgelegt und ob der Inhalt der Seite durch den User skaliert werden darf (etwa durch „Pinch to Zoom“).

Eine einfache Web-App

<?xml version=„1.0“ encoding=„utf-8“?>
<!DOCTYPE html>
< manifest=„config/cache.manifest“>
<head>
 <title>A simple Web-App</title>
 <meta name=„viewport“ content=„width=device-width, initial-scale=1.0, user-scalable=no“ />
 <meta name=„apple-mobile-web-app-capable“ content=„yes“ />
 <meta name=„apple-mobile-web-app-status-bar-style“ content=„black“ />
 <link rel=„apple-touch-icon“ href=„images/icon.png“ />
 <link rel=„apple-touch-startup-image“ href=„images/splashscreen.png“ />
 <link rel=„stylesheet“ href=„css/simple.css“ type=„text/css“ media=„screen,mobile“ />
 <script type=„text/javascript“ xsrc=„js/simple.js“></script>
</head>
<body>
 <header>
 <h1>Eine einfache Web-App</h1>
 </header>
 <section id=„content“>
 <img xsrc=„images/picture.jpg“ />
 </section>
</body>
</html>

Listing 1

Im Grunde ist eine Web-App nichts anderes als eine optimierte Webseite.
Im Grunde ist eine Web-App nichts anderes als eine optimierte Webseite.

Die drei Meta-Tags in Listing 1 werden derzeit nur von iOS interpretiert. Alle anderen mobilen Betriebssysteme ignorieren diese Tags, sodass sich keine Komplikationen dadurch ergeben.

Setzt man das Attribut „content“ beim Meta-Tag „apple-mobile-web-app-capable“ auf „yes“, so wird die Web-App nach dem Aufruf über den Homescreen im Vollbild-Modus ohne Browser-Leiste angezeigt. „apple-mobile-web-app-status-bar-style“ definiert das Aussehen der Status-Leiste und kann einen der folgenden Werte annehmen:

  • default (grau)
  • black (schwarz)
  • black-translucent (schwarz, transparent)

App-Icon

Um die Web-App mit dem Homescreen des iPhones zu verknüpfen, wird ein Icon in der Größe 114x114 Pixel im Format PNG benötigt. An dieser Stelle besteht die Möglichkeit, mehrere „apple-touch-icons“ mit unterschiedlichen Größen anzugeben. Für das Beispiel wird die Icon-Größe des iPhone 4 verwendet, da die älteren iPhones dieses Icon in einer akzeptablen Qualität herunterrechnen können.

Android unterstützt App-Icons ab Version 2.1, das passende Tag heißt „apple-touch-icon-precomposed“. Wird ausschließlich dieses Tag verwendet, stellt das iPhone das App-Icon allerdings ohne die Standard-Effekte wie abgerundete Ecken, Schattierungen und Reflexionen dar; das Icon gilt dann als „precomposed“.

Icon für Android

<link rel=„apple-touch-icon-precomposed“ href=„icon_android.png“ />

Listing 2

Offline arbeiten

Eine wichtige Eigenschaft von Web-Apps ist es, Inhalte auch offline verfügbar machen zu können. HTML5 stellt Webseiten dafür einen sogenannten Application Cache zur Verfügung, mit dessen Hilfe Inhalte auch ohne Netzverbindung verwendet werden können. Die Einbindung dieses Caches ist recht einfach, da es sich hierbei um ein Manifest handelt, das in Form einer Textdatei vorliegen muss.

Application-Cache-Manifest

CACHE MANIFEST
# 2011-10-26 Version 1.0

CACHE:
index.html
css/simple.css
js/simple.js
images/splashscreen.png
images/picture.jpg

NETWORK:

FALLBACK:
*.html /offline.html

Listing 3

Die Web-App unterscheidet sich auf dem Homescreen nicht von den nativen Apps.
Die Web-App unterscheidet sich auf dem Homescreen nicht von den nativen .

Im CACHE-Bereich des Manifests werden alle Ressourcen angegeben, die vom Browser zwischengespeichert werden sollen. Unter NETWORK werden alle Ressourcen aufgelistet, die nicht speicherbar sind. Dazu zählen etwa Schnittstellen wie jene der Twitter-API. Sollten bestimmte Resourcen nicht verfügbar sein, so können im FALLBACK-Bereich Alternativen festgelegt werden. Im Beispiel wird festgelegt, dass für jede nicht vorhandene HTML-Seite die Datei „offline.html“ angezeigt werden soll.

Der Application Cache wird durch das Attribut „manifest“, das den Pfad zum Manifest enthält, im HTML-Tag aktiviert. Damit der Browser das Cache-Manifest interpretieren kann, muss dieses mit dem MIME-Type „text/cache-manifest“ vom Server ausgeliefert werden.

Cache aktualisieren

Um den Cache einer Web-App zu aktualisieren, leert der Benutzer entweder den Browser-Cache oder der Inhalt des Cache-Manifests ändert sich. Es reicht also nicht aus, dass sich der Inhalt einer Datei ändert. Im Beispiel-Manifest wird deshalb ein Datum und eine Versionsnummer in Form eines Kommentars verwendet. Ändert sich eine Datei, reicht es, im Manifest das Datum und die Version anzupassen, um der Web-App Änderungen mitzuteilen.

Design, Layout und UX

Um der Web-App einen nativen App-Look zu verpassen, kommen diverse CSS3-Eigenschaften zum Einsatz. CSS3 erfährt eine breite Unterstützung unter den mobilen Browsern, daher stellt es für Web-App-Entwickler ein äußerst nützliches Werkzeug dar. Einige der Eigenschaften im Überblick:

  • Eigene Schriftarten in eine Webseite zu integrieren ist eigentlich kein neues Feature von CSS3, denn „@font-face“ wurde bereits mit CSS2 eingeführt. In der neuen Version unterstützt „@font-face“ jedoch beliebige TrueType- oder OpenType-Schriftarten.
TrueType- und OpenType-Schriftarten mit CSS3

@font-face {
 font-family: Monospace;
 src: url('fonts/own_monospace.otf');
}

Listing 4

  • Dank CSS3 können Texte und Boxen mit einem Schatten versehen werden, ohne dafür spezielle Grafiken laden zu müssen. Das Rendering der Schatten ist allerdings sehr rechenintensiv, daher sollte sparsam mit diesen optischen Elementen umgegangen werden.
Schatten mit CSS3

/* Die erzeugten Schatten sind nach oben und rechts je zwei Pixel breit. Der dritte
* Parameter bestimmt den Blur-Effekt, der letzte die Farbe des Schattens. */
box-shadow: 2px 2px 2px #000;
text-shadow: 2px 2px 2px #000;

Listing 5

  • Auch abgerundete Kanten und Verläufe können mit CSS3-Bordmitteln realisiert werden. Aufgrund der neuen Tags sind auch hier die Grafiken überflüssig, was die Performance verbessert und damit die Ladezeit verkürzt.
Abgerundete Kanten mit CSS3

/* Vier Angaben im Uhrzeigersinn für jede Ecke */
border-radius: 5px 5px 5px 5px;

/* Zwei Angaben, wodurch die untere linke Ecke den Wert der oberen linken und die
* rechte untere Ecke den Wert der rechten oberen Ecke übernimmt */
border-radius: 5px 5px;

/* Eine Angabe für alle vier Ecken */
border-radius: 5px;

Listing 6

Farbverläufe mit CSS3

/* Parameter eins legt fest, ob der Verlauf linear oder radial verläuft.
* X- und Y-Koordinaten legen den Start- und Endpunkt (2. und 3. Parameter) fest.
* Die beiden letzten Parameter schließlich definieren die beteiligten Farben. */
-webkit-gradient(linear, 0 0, 0 100%, from(#FFFFFF), to(#0000FF);

Listing 7

Jetzt kommt Bewegung ins Spiel

Animationen und Transformationen zwischen zwei Seiten werden in nativen Apps sehr gerne verwendet und sind mit CSS3 auch innerhalb des Browsers möglich. Dieses Thema ist jedoch verhältnismäßig komplex und wird etwa von Rich Bradshaw [1] und im Webstandard-Blog [2] ausführlich behandelt.

Für jeden das richtige Stylesheet

Von vielen nativen Apps ist man gewohnt, dass sich das Aussehen der App an die Orientierung des Geräts anpasst. Seit iOS 4.0 verstehen iPhone, iPod Touch und das iPad das „orientation“-Attribut beim Einbinden der CSS-Dateien im Head-Bereich der Seite. Auch Android-Geräte verarbeiten dieses Attribut korrekt.

Orientierungs-abhängiges Einbinden der Stylesheets

<!-- Einbinden im Hochformat -->
<link rel=„stylesheet“ href=„css/simple_portrait.css“ type=„text/css“ media=„screen and (orientation:portrait)“ />

<!-- Einbinden im Querformat -->
<link rel=„stylesheet“ href=„css/simple_landscape.css“ type=„text/css“ media=„screen and (orientation:landscape)“ />

Listing 8

Es ist auch möglich, das Stylesheet von der Display-Größe, respektive der Breite, abhängig zu machen.

Breiten-abhängiges Einbinden der Stylesheets

<!-- Einbinden, wenn das Display schmaler als 480 Pixel ist -->
<link rel=„stylesheet“ href=„simple_mobile.css“ type=„text/css“ media=„screen and (max-width: 480px)“ />

<!-- Einbinden, wenn das Display breiter als 480 Pixel ist -->
<link rel=„stylesheet“ href=„simple_default.css“ type=„text/css“ media=„screen and (min-width: 481px)“ />

Listing 9

Berühren erlaubt

Was „touchbar“ sein soll, sollte eine gewisse Größe haben, damit es keine Rolle spielt, ob ein Benutzer große oder kleine Finger hat. Laut Apple hat ein „Tap“ eine Auflagefläche von 44x44 Pixeln. Daher sollten Icons und Buttons eine Mindest-Größe von 32x32 Pixeln haben, um inklusive Padding auf diese Größe zu kommen.

Mit jQuery Mobile erhält man bereits mit ein paar Zeilen Code imposante Ergebnisse.
Mit jQuery Mobile erhält man bereits mit ein paar Zeilen Code imposante Ergebnisse.

Es geht auch anders: Dank zahlreicher Frameworks muss man das Rad nicht ständig neu erfinden. Da sich die Frameworks in ihrer Handhabung nur mäßig voneinander unterscheiden, wird an dieser Stelle jedoch nicht auf alle eingegangen.

jQuery Mobile

jQuery Mobile basiert auf dem bekannten JavaScript-Framework jQuery. jQuery Mobile optimiert die Seiten für die verschiedenen Geräte und Betriebssysteme und kümmert sich um die Darstellung im Hoch- und Querformat.

Um das Framework mit all seinen Eigenschaften verwenden zu können, müssen sowohl jQuery als auch jQuery Mobile über die entsprechenden CSS-Dateien im HTML-Template eingebunden werden. Anschließend kann die Seite in Abschnitte eingeteilt und jedem Abschnitt können bestimmte Funktionen zugewiesen werden. Das folgende Beispiel enthält einen Header, eine horizontale Navigationsleiste, einen Inhaltsbereich und einen Footer mit zwei Buttons.

Der Nachteil bei der Verwendung von Frameworks liegt meistens in der Größe. Initial werden alle Funktionen und Styles geladen, auch wenn diese in der Web-App nicht verwendet werden. Bei jQuery Mobile beträgt die Größe des Frameworks inklusive CSS aktuell rund 60 KByte; dafür werden wiederum alle wichtigen mobilen Betriebssysteme unterstützt, darunter iOS, Android, Windows Phone und BlackBerry.

jQuery Mobile verwenden

<!DOCTYPE html>
<html>
<head>
 <title>A much simpler Web-App</title>
 <meta name=„viewport“ content=„width=device-width, initial-scale=1.0, user-scalable=no“ />
 <meta name=„apple-mobile-web-app-capable“ content=„yes“ />
 <meta name=„apple-mobile-web-app-status-bar-style“ content=„black“ />
 <link rel=„stylesheet“ href=„css/jquery.mobile-1.0rc2.css“ />
  <link rel=„stylesheet“ href=„css/simple.css“ />
 <script type=„text/javascript“ xsrc=„js/jquery-1.6.4.min.js“></script>
 <script type=„text/javascript“ xsrc=„js/jquery.mobile-1.0rc2.min.js“></script
</head>
<body>
 <div data-role=„page“>
 <div data-role=„header“>
 <h1>jQuery Mobile</h1>
 </div>
 <div data-role=„navbar“>
  <ul>
 <li><a href=„index.html“>Start</a></li>
 <li><a href=„contact.html“>Kontakt</a></li>
 </ul>
 </div>
 <div data-role=„content“>
 <img xsrc=„images/picture.jpg“ />
 </div>
 <div data-role=„footer“>
 <a href=„index.html“ data-role=„button“ data-icon=„arrow-u“>Hoch</a>
 <a href=„index.html“ data-role=„button“ data-icon=„arrow-d“>Runter</a>
 </div>
 </div>
</body>
</html>

Listing 10

Geräte-spezifische Funktionen

Der Zugriff auf Geräte-spezifische Funktionen via Browser ist derzeit noch stark eingeschränkt. Durch HTML5 ist es zwar schon jetzt möglich, Daten in einer Datenbank abzulegen, die Koordinaten eines Benutzer durch die Geo-Location-Funktion zu bestimmen oder Videos direkt im Browser abzuspielen. Viele Funktionen, wie der Zugriff auf die Kontakte oder die integrierte Kamera, sind jedoch nativen Apps vorbehalten.

Hybrid-Apps

Um mit einer Web-App dennoch auf die Geräte-APIs zugreifen zu können, muss aus einer Web-App eine sogenannte Hybrid-App gemacht werden. Das ist nichts anderes, als eine Web-App, die in eine native App eingebettet ist.

Eine solche Hybrid-App wird mithilfe eines Frameworks wie PhoneGap erstellt. PhoneGap ist ein JavaScript-Framework, das den Zugriff auf Gerätefunktionen bereitstellt. PhoneGap benötigt zur Erstellung einer Hybrid-App natürlich das jeweilige SDK des mobilen Betriebssystems, unterstützt dafür aktuell auch alle gängigen Systeme – Android, BlackBerry, iOS und andere.

Framework Anmerkungen
jQTouch jQuery-Erweiterung für Android und iOS
jQuery Mobile jQuery-Derivat für Android, iOS, BlackBerry etc.
PhoneGap Hybrid-App-Framework für Android, iOS, BlackBerry etc.
Rhodes App-Framework für Ruby on Rails und HTML5
Sencha Touch Web-App-Framework für Android, iOS und BlackBerry
Titanium Mobile Hybrid-App-Framework für Android und iOS

Vertriebsmöglichkeiten

Aktuell besteht die Möglichkeit, Web-Apps über den OpenAppMkt [3] anzubieten. Der Entwickler kann seine Web-App dort entweder kostenlos anbieten oder kommerziell vertreiben. Von den Verkaufserlösen behält der Anbieter der Plattform allerdings 20 Prozent ein.

Um seine Web-App kommerziell und/oder reichweitenstark zu vertreiben, muss man den Weg über die oben genannte Hybrid-App gehen. Allerdings sind die Nutzer bei Hybrid-Apps sehr kritisch; es gilt daher, darauf zu achten, dass die dahinter liegende Web-App bei Leistung und Usability mit einer nativen App konkurrieren kann.

Fazit

Dank HTML5 und CSS3 lassen sich bereits heute Web-Apps bauen, die mit ihren nativen Konkurrenten problemlos mithalten können. Es gibt Bereiche, in denen die nativen Apps noch unschlagbar sind, etwa bei 3D-Spielen. Durch den rasanten Fortschritt in der mobilen Welt und Techniken wie WebGL kann aber vielleicht schon bald auch dieser Bereich von den Web-Apps erobert werden.

Größtes Manko der Web-Apps ist momentan noch der Vertrieb, denn eine zentrale Plattform im Internet gibt es aktuell nicht. Dieser Nachteil lässt sich aber durch das Erstellen einer Hybrid-App wettmachen.

Ebenfalls für Web-Apps spricht die Wartung: Im Gegensatz zur nativen App können Änderungen direkt und ohne Review-Prozess durchgeführt und implementiert werden. Sogar bei Apple.

Es bleibt abzuwarten, ob sich Web-Apps tatsächlich bei den Nutzern durchsetzen. Für Entwickler sind sie in jedem Falle ein Gewinn. Und zahlreiche Firmen und Verlage sind bereits auf den Zug der plattformunabhängigen Anwendungen aufgesprungen.

Abonniere jetzt t3n-News über WhatsApp und bleib mobil auf dem Laufenden!
t3n-News via WhatsApp!
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
6 Antworten
  1. von sec0nd am 26.04.2012 (16:13 Uhr)

    "Dank HTML5 und CSS3 lassen sich bereits heute Web-Apps bauen, die mit ihren nativen Konkurrenten problemlos mithalten können."

    Dem kann ich leider nicht zustimmen. Selbst einfache Seitenübergänge, z. B. durch jQery mobile generiert, ruckeln vor sich hin. Und jqTouch legt beim Tap gewisse Denkpausen ein, bevor was passiert. Sitze gerade an einem Projekt und die Kiste läuft nur auf einem iPad 2 flüssig. iPhone 3/4 sind so lala. Ist leider (noch?) traurige Realität.

    Javascript ist halt immer nur so schnell wie die Engine und die Hardware. Vielleicht ist das Geruckel in 2 Jahren mit Quadcore CPUs Geschichte. Aktuell ist es frustrierend.

    Ich bin deswegen am Überlegen, ob ob ich mir nicht doch noch Objective-C antue.

    Antworten Teilen
  2. von Erik am 26.04.2012 (16:25 Uhr)

    Bald kommt Mozillas Boot to Gecko, und gut ist :)
    Wir erwarten ja auch nicht dass Internetanwendungen für Windows, Linux und Applezeug extra angepasst werden. Stellt euch das mal vor: hey coole Webseite, leider hab ich keinen Windowsrechner, deswegen läufts bei mir nicht richtig (oder halt umgekehrt, egal...).
    Ist vielleicht noch ein Weg dahin, aber der wird immer stärker gegangen werden, das ist halt der eigentliche Sinn der Idee vom Internet.

    Antworten Teilen
  3. von Jochen Seelig am 26.04.2012 (16:56 Uhr)

    Passend zu diesem Thema veranstalten wir am 16.Mai ein Webinar über:

    Mobiles Umdenken - HTML5-Apps für Businessanwendungen

    Das Webinar wird präsentiert von Martin Schröder (Developer bei der Mayflower GmbH).
    Bis dahin kann man sich schon einen Podcast über WebApps als Einstimmung anhören.

    Link zum Podcast: http://blog.mayflower.de/archives/864-Mayflower-Podcast-004.html
    Anmeldung für das Webinar: http://bit.ly/webinar-mobiles-umdenken

    Viel Spaß mit dem Input!
    Jochen

    Antworten Teilen
  4. von ursaberlin am 27.04.2012 (12:18 Uhr)

    Schaut euch mal Enyo an. http://enyojs.com/ War früher die Basis von webOS und jetzt der erste Teil von Open webOS. Klasse JS Bibliothek um Cross-Plattform web apps zu bauen. Und mit Phonegap kombiniert auch mobile apps.

    Antworten Teilen
  5. von YUHIRO.DE am 31.05.2014 (08:08 Uhr)

    Danke für den informativen Artikel. In den letzten Jahren und Monaten haben sich die Möglichkeiten für die Entwicklung mit Plattform um einiges verbessert.

    Zum Beispiel kann man jetzt auch die Offline Konsumierung von Inhalten ermöglichen. Das war lange Zeit nicht möglich.

    Hier auch ein paar Informatien zum Thema: http://www.yuhiro.de/web-app-entwicklung-mit-html5/

    Wir können nur hoffen, das sich HTML5, in den nächsten Jahren weiterentwickelt und man eventuell von den Nativen Programmierungen wegkommen. Woran derzeit natürlich noch nicht zu denken ist.

    Antworten Teilen
    • von Johanna.g am 23.01.2015 (17:25 Uhr)

      Vielen Dank für den interessanten Beitrag. Obwohl er schon etwas älter ist, ist das Thema weiterhin aktuell. Vor allem durch die Bekanntgabe von W3C im Oktober letzten Jahres, in der HTML5 nun offiziell zum Standard erklärt wurde. Wir sind ein Unternehmen, dass sich auf App-Entwicklung mit HTML5, CSS3 und JS spezialisiert hat und gehen dabei sogar noch ein bisschen weiter. Wir entwickeln Apps mit hybridem Ansatz. Der Vorteil ist hier die Möglichkeit der Speicherung von Daten, also dem offline-verfügbar-machen und der Nutzung von Hardware-Komponenten des mobilen Endgerätes, bei gleichbleibender Flexibilität der Anwendung auf den unterschiedlichen Geräten und Betriebssystemen.
      Trotzdem haben Hybrid-Apps immer noch einen schlechten Ruf. Zu unrecht, wie ich finde. Warum, dass erklären wir einmal genauer in diesem Bericht:

      http://www.flyacts.com/hybrid-app-2.0-status-quo-hybrider-entwicklungsansaetze

      Ich hoffe ich kann euch damit ein wenig weiter helfen und freue mich sehr über Feedback.

      Beste Grüße
      Johanna

      Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Aktuelles aus dem Bereich Web-App
Mit Bubble funktionierende Web-Apps ohne eine Zeile Code bauen
Mit Bubble funktionierende Web-Apps ohne eine Zeile Code bauen

Mit dem Baukasten Bubble sollt ihr auch komplexere Web-Apps einfach zusammenklicken können. Wir haben uns das Tool für euch angeschaut. » weiterlesen

iOS-App im Web entwickeln: Das kann AppStarter
iOS-App im Web entwickeln: Das kann AppStarter

Mit AppStarter entwickelt ihr funktionierende App-Prototypen für iOS direkt im Browser. Wir haben uns das Tool für euch angeschaut. » weiterlesen

Mac-Boilerplate für HTML und CSS: Mit Photon schicke Mac-Apps erstellen
Mac-Boilerplate für HTML und CSS: Mit Photon schicke Mac-Apps erstellen

HTML, CSS und JavaScript bedienen schon lange nicht mehr nur Webseiten. Schon seit längerer Zeit können Desktop-Apps auf Basis von Web-Technologien erstellt werden. Damit das auch hübsch … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?