UX & Design

Artikel merken

Teil 2 – Eigene Webapplikation für das iPhone mit iUI entwickeln: Webentwicklung für das iPhone

Der erste Teil dieser Serie hat gezeigt, wie Sie eine bestehende Website für das iPhone optimieren können. Diesmal geht es darum, eine Website explizit für das iPhone zu entwickeln. Das ist besonders sinnvoll bei Webdiensten, die häufig von unterwegs aus angesurft werden, zum Beispiel der Abfahrtsplan der Nahverkehrsbetriebe oder die Website eines Taxiunternehmens. Aber auch „gewöhnliche“ Websites erleichtern ihren Besuchern die Navigation, wenn sie für das iPhone optimiert sind. Wir zeigen, wie Sie Ihrer Website mit iUI eine Benutzeroberfläche verpassen, die an native iPhone-Applikationen erinnert.

10 Min. Lesezeit

Das iPhone besitzt ein neuartiges Bedienkonzept und bietet dank kapazitivem Touchscreen eine außergewöhnliche Benutzeroberfläche. Viele Applikationen aus dem AppStore halten sich an die Designparadigmen aus Cuppertino. Warum also nicht auch Webapplikationen? Schließlich führt einen Besucher nichts besser durch eine Website als vertraute Mechanismen. Das heißt nicht, dass das eigene GUI-Design keine Individualität besitzen soll. Vielmehr geht es darum, den Besucher mit gewohnten Navigationskonzepten zu unterstützen. Wir zeigen, wie Sie einer Website mit der Bibliothek iUI das Look&Feel einer nativen iPhone-Applikation verpassen.

Neu eingekleidet

Am Anfang der Entwicklung steht das Design. Grundsätzlich stehen dabei zwei Ansätze zur Wahl: ein komplett eigenes Design oder ein Design, das sich am Look & Feel des iPhone-Betriebssystems orientiert. Für ersteres spricht sicherlich die bessere Integration der Firmen-CI. Der zweite Ansatz lockt mit einer einfacheren Bedienung, da die Nutzer diese schon gewohnt sind. Kombiniert mit eigenen Designelementen wie Farbe oder Logo, kann sich auch dieser Ansatz in das Firmen-CI einpassen.

###WORKAROUND###

Die in der Regel graue Hintergrundfarbe lässt sich leicht gegen die Hausfarbe tauschen, die Listenmenüs mit einem dezenten Hintergrundlogo aufhübschen und Buttons individuell gestalten. Doch wie immer sollte man genau abwägen, wie weit man geht – weniger ist hier oft mehr. Denn wenn der Besucher durch allerlei optische Spielereien den Überblick verliert, hilft es wenig, wenn die Bedienung ansonsten einer normalen Applikation ähnelt.

Mit dem Ziel, auf Basis von Standard-HTML iPhone-optimierte Navigationen und Oberflächen entwickeln zu können, wurde das Projekt iUI [1] von Joe Hewitt (Entwickler von Firebug und DOM Inspector) aus der Taufe gehoben. Dieses Framework bietet alles, was zur Gestaltung einer Website im iPhone-Style notwendig ist. Dazu gehören auch Animationen bei Seitenübergängen in Menüs. Mit der Einbindung von iUI ist es ein Leichtes, eine Website im iPhone-Style zu kreieren, da lediglich die Seitenstruktur und die Inhalte erstellt werden müssen. Um alles Weitere kümmert sich iUI.

Um eine Website mit iUI zu erstellen, müssen Sie zunächst das Framework einbinden, das lediglich aus einer CSS- und einer JavaScript-Datei besteht. iUI gibt es in einer unkomprimierten (17kB) und einer komprimierten Form (ca. 10 kB), die keine Zeilenumbrüche, Einrückungen und Kommentare enthält.

In der HTML-Datei werden dann nur noch die Struktur und der Inhalt bereitgestellt. Als Beispiel dient in diesem Artikel eine kleine Firmenwebsite. Diese besteht aus ein paar Produkten, einer Firmenpräsentation, Kontaktmöglichkeiten und einem Impressum. Um das folgende Beispiel besser nachvollziehen zu können, finden Sie sämtliche Dateien und Listings dieses Praxisartikels über den
am Ende des Artikels abgedruckten Softlink auf der T3N-Website.

HTML-Seitenstruktur 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>ACME Industries</title>
<!-- Der Viewport wird auf 320 Pixel Breite gesetzt. Der User darf nicht skalieren -->
	<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<!-- Einbinden der iUI-CSS- und JS-Dateien -->
	<style type="text/css" media="screen">@import "iui/iui.css";</style>
	<script type="application/x-javascript" xsrc="iui/iui.js" mce_src="iui/iui.js">
	</script>
</head>

<body>
<!-- Obere Seitenleiste mit Back-Button, Seitenname und Such-Button -->
	<div class="toolbar">
		<h1 id="pageTitle"></h1>
		<a id="backButton" class="button" href="#" mce_href="#"></a>
		<a class="button" href="#searchForm" mce_href="#searchForm">Search</a>
	</div>
<!-- Hauptmenü. Natürlich kann auch zu anderen Dateien verlinkt werden“ -->
	<ul id="home" title="ACME" selected="true">
		<li><a href="#about" mce_href="#about">&Uuml;ber uns</a></li>
		<li><a href="#produkte" mce_href="#produkte">Produkte</a></li>
		<li><a href="#kontakt" mce_href="#kontakt">Kontakt</a></li>
		<li><a href="#impressum“>Impressum</a></li>
	</ul>
<!-- Die Über-uns-Seite -->
	<div id="about" class=“panel“ title="&Uuml;ber uns">
		<h2>Gegründet 1999</h2>
		<p>ACME wurde 1999 von Vincent Vega und Jules Winnfield gegründet. Anfangs auf Fußmassagen spezialisiert, wurde ACME der führende Hersteller von Massageartikeln</p>
	</div>
<!-- Die Produktübersicht in Form eines weiteren Menüs -->
	<ul id="produkte" class=“panel“ title="ACME Produkte">
		<li>
			<a href="#schwamm" mce_href="#schwamm">Massageschwamm</a>
		</li>
		<li><a href="#liege" mce_href="#liege">Massageliege</a></li>
		<li><a href="#oele" mce_href="#oele">&Ouml;le</a></li>
	</ul>
<!-- Die einzelnen Produktseiten können beliebige Inhalte enthalten -->
	<div id="schwam" class=“panel“ title="Massageschwamm">
		<p>Dieser Schwamm wurde von Jules Winnfield entwickelt und auf die Bedürfnisse einer wohltuenden Massage abgestimmt</p>
	</div>
	<div id="liege" class=“panel“ title="Massageliege">
		<p>Unsere Liegen lassen sich stufenlos einstellen und versprechen eine optimale Liegeform die die Massage unterstützt</p>
	</div>
	<div id="oele" class=“panel“ title="&Ouml;le">
		<p>ACME &Ouml;le werden von unserem Mitarbeiter Taylor Durden selbst hergestellt. Die Rezeptur ist streng geheim, beinhaltet aber nur die besten Inkredenzien.</p>
	</div>
<!-- Der Suchdialog wird durch das Framework über die Seite eingeblendet -->
	<form id="searchForm" class="dialog" action="search.php">
		<fieldset>
			<h1>Produktsuche</h1>
			<a class="button leftButton" type="cancel">Cancel</a>
			<a class="button blueButton" type="submit">Search</a>
			<label>Produkt:</label>
			<input id="produkt" type="text" name="produkt"/>
			<label>Modell:</label>
			<input type="text" name="modell"/>
		</fieldset>
	</form>
<!-- Das Kontaktformular -->
	<form id="kontakt" action="contact.php" class="panel" title="Kontakt">
		<h2>Ihre Daten</h2>
		<fieldset>
			<div class="row">
				<label>Name</label>
				<input type="text" name="name" value="John Doe"/>
			</div>
			<div class="row">
				<label>E-Mail</label>
				<input type="text" name="email" value=""/>
			</div>
			<div class="row">
				<label>Nachricht</label>
				<textarea name="message" /></textarea>
			</div>
		</fieldset>
		<h2>Kontaktwunsch</h2>
		<fieldset>
			<div class="row">
				<label>Bitte Kontakt</label>
				<div class="toggle" onclick="">
					<span class="thumb"></span>
					<span class="toggleOn">ON</span>
					<span class="toggleOff">OFF</span>
				</div>
			</div>
			<div class="row">
				<input type="submit" value="absenden"/>
			</div>
		</fieldset>
	</form>
	<div id="impressum" title="Impressum">
		<p>ACME</p><p>Nixstr.33<br />80001 M&uuml;nchen</p>
	</div>
</body>
</html>

Listing 1

Wie man sieht, sind in der HTML-Vorlage keine gestalterischen Auszeichnungen enthalten. Alle Styles fügt iUI hinzu. Auch die Effekte, etwa das Sliden der Seite beim Übergang, steuert das Framework bei. Soll der Website ein wenig Individualität eingehaucht werden, kann der Entwickler die Datei „iui.css“ erweitern. Um die Update-Fähigkeit von iUI zu bewahren, sollten Entwickler ihre Änderungen allerdings in eine externe Datei auslagern.

Da in der HTML-Datei nur die Struktur abgebildet werden muss, lässt sich das Framework auch hervorragend mit Content Management Systemen wie TYPO3 verwenden. Eine Extension für TYPO3, die unter anderem iUI einbindet, befindet sich zurzeit in der Entwicklung.

Die Beispielseite demonstriert, dass es möglich ist, eine ganze Webpräsenz in einer einzigen Datei unterzubringen. Sinnvoll ist das aber angesichts ausufernder Übertragungszeiten nicht. Eine sinnvolle Aufteilung in mehrere Dateien verhindert unnötig lange Ladezeiten. Wenn Sie Ihre Seiten in mehreren Untermenüs verwalten, können Sie aber beispielsweise die gesamte Menüstruktur in einer Seite bündeln. Lediglich die eigentlichen Inhalte kommen dann aus separaten Dateien.

Um das Beispiel ausführen zu können, legen Sie in dem Verzeichnis, in dem die HTML-Datei liegt, ein Verzeichnis namens iUI an und kopieren Sie den Inhalt des iUI-Pakets hinein. Wenn Sie die komprimierten Dateien des Frameworks verwenden wollen („iuix.css“ und „iuix.js“), müssen Sie die Namen in den „Includes“ im Header-Bereich der HTML-Datei anpassen.

Die Abschnitte

Der Code beginnt mit dem head-Bereich, der die Doctype-Dekleration, den XML-Prolog und die Viewport-Einstellungen enthält und in dem das iUI-Framework eingebunden wird. Der Body beginnt ganz klassisch mit dem Kopfbereich der Webseite. Bei iPhone-Applikationen ist das in der Regel die Titelleiste, so auch hier. Die Titelleiste beinhaltet den Titel, den Zurück-Button und einen Button für die Suche. Die Leiste ist optional. Wenn Sie also gute Gründe haben, sie nicht anzuzeigen, können Sie die Titelleiste getrost weglassen.

Für den Such-Button kommt nur eine Grafik zum Einsatz, die mit CSS zerteilt wird. 

Für den Such-Button kommt nur eine Grafik zum Einsatz, die mit CSS zerteilt wird.

 

Das H1-Tag ist leer, da der Seitentitel von iUI via JavaScript in das H1-Tag gesetzt wird. Die Breite des Titels ist auf 150 Pixel beziehungsweise 250 Pixel im Querformat (Landscape-Modus) beschränkt, längere Titel werden mit „…“ abgeschnitten. Auch der Zurück-Button wird durch JavaScript erzeugt. Der Such-Button wird hingegen extra in den HTML-Code übernommen und kann durch beliebige andere Funktionalitäten ersetzt werden.

Der Button selbst wird mit CSS erstellt. Die Ränder des Buttons werden nicht, wie bisher üblich, mit mehreren Bildern erstellt. Stattdessen kommt ein Bild zum Einsatz, das durch die Angabe der Abstände von links, oben, unten und rechts in neun Teile zerlegt wird. Nur der Teil in der Mitte wird der Größe entsprechend angepasst, alle anderen Teile behalten ihre Größe. Verwendet wird dazu die Eigenschaft „webkit-border-image“.

Nun folgt das Hauptmenü, das aus einer klassischen ungeordneten Liste besteht, die allein über CSS gestylt wird. Die Liste enthält das Attribut „selected=true“, das dafür sorgt, dass diese Liste beim Aufruf der Seite angezeigt wird. Alle weiteren Navigationsebenen im Beispiel sind ebenfalls über Listen innerhalb der HTML-Datei realisiert und werden über Sprungmarken aufgerufen. Natürlich können sich im Menü statt internen Links auch Links zu anderen Seiten befinden.

Wird eine untergeordnete Navigationsliste aufgerufen, slidet die neue Navigationsliste animiert von rechts herein. Auch dieser Effekt wird durch das iUI-Framework ausgeführt. Wenn Sie Listenpunkte gruppieren möchten, beispielsweise nach Anfangsbuchstaben, können Sie dazu ein normales Listenelement verwenden, dem Sie die Klasse „group“ zuordnen. Im folgenden Beispiel werden Namen nach Anfangsbuchstaben gruppiert:

Listenelemente gruppieren 
<li class="group">A</li>
<li><a href="#anton">Anton</a></li>
<li><a href="#albert">Albert</a></li>
<li class="group">B</li>
<li><a href="#bob">Bob</a></li>

Listing 2

Wenn Sie eine Seite erstellen, die viele Untermenüs enthält, kann es problematisch sein, alle Menüs in einer Datei zu halten. Die Ladezeit kann dadurch erheblich länger werden. Abhilfe schafft hier das dynamische Nachladen von Menüs und Menüpunkten. Sehen wir uns einen normalen Menüpunkt noch einmal an:

HTML 
<li><a href="#anton">Anton</a></li>

Listing 3

Hier wird auf den Ankerlink „#anton“ verwiesen. Das Ziel ist also das Element mit der eindeutigen ID „anton“. Da es sich hier um ein Untermenü handeln soll, sieht das Ziel wie folgt aus:

HTML 
<ul id="anton" title="Anton">
	<li><a href="#profil">Profil</a></li>
	<li><a href="#adresse">Adresse</li>
	<li><a href="#mitteilung">Mitteilung</a></li>
</ul>

Listing 4

Es ist möglich, das Untermenü in eine eigene Datei auszulagern und über Ajax nachzuladen, wenn es benötigt wird. Dazu wird das Untermenü als solches in eine eigene Datei namens „anton.html“ geschrieben. Es befindet sich nur das ungeordnete Menü darin, keine Header oder Footer. In das übergeordnete Menü schreibt man nun einen geänderten Linkaufruf:

HTML 
<li><a href="#anton.html">Anton</a></li>

Listing 5

Darin wird der Name der externen Datei angegeben, aber mit dem #-Symbol davor. iUI erkennt dadurch, dass eine externe Datei nachgeladen werden soll und führt die Aufgabe mit Hilfe von Ajax durch. Auch einzelne, sehr lange Menüs können Sie mit Ajax in kleinere Happen aufteilen.

HTML 
<ul id="namen" Title="Personen">
<li class="group">A</li>
<li><a href="#anton">Anton</a></li>
<li><a href="#albert">Albert</a></li>
<li class="group">B</li>
<li><a href="#bob">Bob</a></li>
<li><a href="#biggi">Biggi</a></li>
<li><a href="cd.html" target="_replace">Weiter zu C und D</a></li>
</ul>

Listing 6

Die letzte Menüzeile weist als Besonderheit ein Target-Attribut mit dem Wert „_replace“ auf. Wird der Link aufgerufen, wird über Ajax die verlinkte Datei aufgerufen und die Zeile wird damit ersetzt. Da nur diese eine Zeile ersetzt wird, muss die Datei das selbe Format aufweisen wie die übrigen Listenpunkte:

HTML (cd.html) 
<li class="group">C</li>
<li><a href="#clemens">Clemens</a></li>
<li><a href="#christian">Christian</a></li>
<li class=“group“>D</li>
<li><a href="#dieter">Dieter</a></li>
<li><a href="#doris">Doris</a></li>
<li><a href="ef.html" target="_replace">Weiter zu E und F</a></li>

Listing 7

###WORKAROUND###

Nach dem Menü folgt in der Beispiel-HTML-Datei der Content. Ebenso wie die Submenüs, wird auch der Content über seine ID angesprochen. Die einzelnen Seiten sind in DIV-Container gekapselt und werden wie die Submenüs mit einer Animation geladen. Die DIV-Container besitzen die Klasse „panel“. Dadurch sind sie als Inhaltsseite gekennzeichnet. Innerhalb des Containers können Sie den Inhalt wie gewohnt formatieren, Bilder hinzufügen und Ihre Seite gestalten.

Formulare und Dialoge

Formulare und Dialoge helfen dabei, dem Besucher die Möglichkeit zur Interaktion zu bieten. Ein Formular oder Dialog kann aus verschiedenen Elementen wie Texteingabeboxen, Toggle-Boxen (als iPhone-Alternative zu Checkboxen) und Buttons bestehen.

###WORKAROUND###

Der Code für Toggle-Boxen ist etwas aufwändiger als für Checkboxen, sie sorgen aber für den richtigen Look auf dem iPhone. Das HTML ist dabei recht überschaubar:

Togglebox HTML 
<div class="toggle" onclick="">
	<span class="thumb"></span>
	<spanclass="toggleOn">ON</span>
	<span class="toggleOff">OFF</span>
</div>

Listing 8

Alle anderen Bestandteile des Kontaktformulars (siehe Beispiel-HTML-Datei) sind Standard-Input-Elemente. Das zugehörige Stylesheet ist dafür umso umfangreicher:

Togglebox CS (im iUI Framework) 
.row > .toggle {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 100px;
    height: 28px;
}
.toggle {
    border: 1px solid #888888;
    -webkit-border-radius: 6px;
    background: #FFFFFF url(toggle.png) repeat-x;
    font-size: 19px;
    font-weight: bold;
    line-height: 30px;
}
.toggle[toggled="true"] {
    border: 1px solid #143fae;
    background: #194fdb url(toggleOn.png) repeat-x;
}
.toggleOn {
    display: none;
    position: absolute;
    width: 60px;
    text-align: center;
    left: 0;
    top: 0;
    color: #FFFFFF;
    text-shadow: rgba(0, 0, 0, 0.4) 0px -1px 0;
}
.toggleOff {
    position: absolute;
    width: 60px;
    text-align: center;
    right: 0;
    top: 0;
    color: #666666;
}
.toggle[toggled="true"] > .toggleOn {
    display: block;
}
.toggle[toggled="true"] > .toggleOff {
    display: none;
}

Listing 9

Manchmal ist es nötig, den Benutzer auf eine Aktion zu fixieren, damit nicht andere Dinge ihn ablenken. Dazu sind Dialoge sehr gut geeignet. Sie sind wie Formulare aufgebaut, als Klasse wird ihnen allerdings nicht „panel“, sondern „dialog“ zugewiesen. Dialoge legen sich über die aktuelle Seite und lassen diese noch ein wenig durchscheinen. Der Benutzer muss den Dialog ausfüllen oder abbrechen, bevor er die Seite wieder benutzen kann.

Fazit

Es ist relativ einfach, mit iUI eine für das iPhone optimierte Website zu erstellen. Das Framework stellt alles bereit, was für die Ajax-Requests, die Animationen und das Styling nötig ist. Der Entwickler kann sich also auf Struktur, Inhalt und Navigationskonzept konzentrieren. Um iUI in seiner vollen Leistungsfähigkeit nutzen zu können, kommt man allerdings nicht umhin, sich den Quellcode der CSS- und JavaScript-Datei genau anzusehen. Im Zusammenspiel mit einer serverseitigen Skriptsprache wie PHP oder Python, die Benutzereingaben auswerten kann, lassen sich leistungsfähige Anwendungen erstellen, die von nativen Applikationen nicht sehr weit entfernt sind.

Die weiteren Artikel der Serie erscheinen in den nächsten T3N-Ausgaben:
Teil 1 (T3N Nr. 13) Websites für das iPhone optimieren
Teil 2 (T3N Nr. 14) Eine iPhone-Applikation entwickeln (Design und iUI)
Teil 3 (T3N Nr. 15) iPhone-spezifische Features nutzen (CSS Transitions/Transformations, Video)
Teil 4 (T3N Nr. 16) Offline-Datenbankenanbindung (mit SQLite)

Mehr zu diesem Thema

Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

3 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

macwoern
macwoern

Hallo Ihr Beiden,

ich hätte da mal eine Frage an Euch:
Folgende Situation. Wir haben einen Web-Shop und dafür auch eine abgespeckte Form für mobile Geräte. Da für die Entwicklung für eine richtige App von unseren Gesellschaftern noch kein Geld zur Verfügung gestellt wird, denken wir drüber nach die abgespeckte Variante etwas „aufzuhübschen“ damit sie wenigsten so aussieht, als wäre es eine App.

Nun soll dabei auch die Titelleiste und die Fußleiste nicht zu sehen sein. Das geht, in dem man im HEAD den Eintrag hinzufügt und die Webseite dann als Icon auf dem Homescreen abspeichert.

Alles schön und gut. Aber jetzt hab ich festgestellt, daß wenn man auf einen Link auf dieser Seite klickt, bleibt die Anwendung nicht in der WebApp sondern macht Safari separat auf und öffnet dort die Seite – hat dann natürlich wieder die Titel- und Fußleiste.

Ich hoffe, Ihr bekommt das noch mit, da der Artikel ja schon recht alt ist….

Antworten
macwoern
macwoern

Mist! Da wurde oben der Meta-Tag ausgeblendet… ich lass mal die eckigen Klammern weg… müsste ihr euch dazudenken:

meta name=“apple-mobile-web-app-capable“ content=“yes“

Antworten
Alex Ebner
Alex Ebner

Hmm, das ist sonderbar. Normalerweise sollte sich der mobile Safari bei Links genaus verhalten wie jeder andere Browser. Sprich das aktuelle Fenster/Tab als Target wählen. Sind das relative oder absolute Pfade? Wenn es letztere sind, würde ich zum testen mal auf relative Pfade umstellen. Eventuell grätscht auch noch eine BaseURL rein. Ich hatte so ein ähnliches Problem, als ich die WebApp mit http://domain.de aufgerufen habe, und die BaseURL mit http://www.domain.de drin war. Mehr fällt mir im Augenblick auch nicht dazu ein.

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung

Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder