Kategorien
HTML/CSS Webdesign

Gitter voll im Griff: Firefox mit neuem Layout-Panel für CSS-Grids

Ordentliche, auf Raster beziehungsweise Gitter basierende Layouts waren bislang nur auf umständlichen Wegen möglich. Die neuen CSS-Grids, die in den neueren Versionen der bekannten Browser seit einiger Zeit möglich sind, erlauben endlich solche Layouts. Und im Firefox gibt es – zumindest in der Nightly-Version – ein neues Layout-Panel im Inspektor der Entwicklerwerkzeuge, welches dir den Umgang mit CSS-Grids vereinfacht.

Mit CSS-Grids zu besseren Layouts

Das neue Grid-Modell macht es endlich möglich, komplexe Layouts zu entwickeln, die auf der Grundlage eines selbst definierten Gitters bestehen. Dazu legst du per CSS Spalten und Reihen fest, bestimmst Abstände und Breiten. Anschließend werden beliebige Elemente innerhalb des Gitters platziert.

body {
  display: grid;
  grid-template-rows: 200px 1fr 100px;
  grid-template-columns: 25% 25% 25% 25%;
}

Für ein Grid-Layout muss die „display“-Eigenschaft zunächst per „grid“ auf das neue Layoutmodell umgestellt werden. Anschließend werden per „grid-template-rows“ und „grid-template-columns“ die Reihen und Spalten des Gitters definiert. Dabei sind absolute und relative Angaben möglich.

Für jede Reihe beziehungsweise Spalte wird ein Wert übergeben. Die Kombination von absoluten und relativen Werten ist möglich. So können wie im Beispiel Reihen feste Werte besitzen. Mit der Einheit „fr“ für „fraction“ lassen sich flexible Breiten und Höhen herstellen. Dabei füllt die Einheit „fr“ den freien Raum innerhalb des Gitters aus.

Zusätzlich kannst du per „grid-row-gap“ und „grid-column-gap“ Abstände zwischen den einzelnen Gitterzellen festlegen. So hast du die Möglichkeit, sehr individuelle und flexible Raster für deine Weblayouts zu entwickeln.

Ist das Raster festgelegt, müssen die einzelnen Inhalte platziert werden. Dazu wird angegeben, in welchen Zellen des Gitters der Inhalt positioniert werden soll.

header {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 1;
  grid-row-end: 2;
}

Mit „grid-column-start“ und „grid-column-end“ werden die Start- und Endpunkte innerhalb des Rasters angegeben. Analog dazu gibt es „grid-row-start“ und „grid-row-end“. Dank der vier Eigenschaften ergeben sich die Zellen, in denen das jeweilige Element stehen soll.

Das Prinzip des CSS-Grids ist also recht einfach. Die Auszeichnung ist hingegen nicht unbedingt leicht nachvollziehbar – gerade bei komplexen Rastern. Hier kommt das neue Layout-Panel des Inspektors von Firefox ins Spiel.

Neues Layout-Panel zeigt Raster

Das neue Panel sorgt zunächst einmal dafür, dass alle auf einer Seite definierten Raster dargestellt werden. Während das eigentliche Raster auf einer Website ja nicht sichtbar ist, stellt Firefox die einzelnen Spalten und Zeilen sowie gegebenenfalls die Zwischenräume dar, sodass es Entwickler einfacher haben, sich innerhalb des Gitters zurechtzufinden.

Das Layout-Panel erreichst du, indem du die Entwicklerwerkzeuge aufrufst und in den Inspektor wechselst. Dort findest du das Layout-Panel. Für jedes Grid-Element wird ein Button eingeblendet, der das für das jeweilige Element hinterlegte Raster einblendet. Im Browserfenster werden Rasterlinien über das Layout gelegt, die das von dir per CSS-Grids definierte Gitter hervorheben.

Zusätzlich wird das Raster auch im Panel selbst angezeigt. Bewegst du die Maus über dieses Raster, wird die entsprechende Zelle sowohl im Inspektor als auch im Browserfenster hervorgehoben.

Das Einblenden von Zeilennummern erleichtert dir zudem, einzelne Rasterzellen ausfindig zu machen. Die unendlichen Gitterlinien, die du optional dazuschalten kannst, führen die Linien des Rasters auch jenseits des jeweiligen Grid-Elementes weiter. Das kann mal nützlich, mal störend sein, weshalb das Ein- und Ausblenden dieser Option sinnvoll ist.

Rasterbereiche benennen und darstellen

Mit der CSS-Eigenschaft „grid-areas“ hast du die Möglichkeit, Bereiche innerhalb deines Gitters zu benennen und somit zu einer Art Gruppe zusammenzufassen. Alle Zellen mit derselben Bezeichnung stellen somit eine Gruppe dar.

grid-template-areas:
  "header header header header"
  "nav content content content"
  "footer footer footer footer";

Über die Option „Display grid areas“ (ist in der aktuellen Nightly-Version noch nicht ins Deutsche übersetzt) werden dir diese Rasterbereiche im Browserfenster dargestellt. Dabei werden die einzelnen Bereiche durch eine dickere Linie im Gitter hervorgehoben. Zusätzlich wird die jeweilige Bezeichnung des Bereichs eingeblendet.

Bewegst du deine Maus im Layout-Panel über eine Gitterzelle, wird im Browser nicht nur die Zelle hervorgehoben, sondern auch der Bereich, dem die Zelle zugeordnet ist.

Transformierungen werden berücksichtigt

Dank der CSS-Eigenschaft „transform“ sind Drehungen, Skalierungen und Verzerrungen von Elementen möglich. Auch auf ein Gitter-Element lassen sich diese anwenden. Der Inspektor berücksichtigt alle per „transform“ gemachten Änderungen und passt das Gitter entsprechend an.

Das heißt, bei einem gedrehten Gitter-Element wird auch das Raster selbst mit gedreht.

Fazit

Das neue Layout-Panel im Inspektor von Firefox hilft dir dabei, deine Grid-Layouts besser zu verstehen und zu entwickeln. Die Hervorhebung der Gitterlinien und die Nummerierung helfen dabei, Elemente zu platzieren und einen visuellen Eindruck des Gitters zu bekommen.

Dabei werden alle Möglichkeiten wie Abstände zwischen den Rasterzellen und die Einteilung in Bereiche mit berücksichtigt. Insgesamt macht der neue Panel einen guten Eindruck. Dass sich das neue Grid-Layout durchsetzen wird, dürfte nur eine Frage der Zeit sein, weshalb diese neue Funktion sicher für viele Webentwickler eine große Erleichterung bei der Arbeit darstellen wird.

Wann es das neue Layout-Panel in den regulären Firefox schafft, steht noch offen. Aber wer schon einmal probieren möchte, kann sich die Nightly-Version herunterladen. Da es sich dabei um keine ausgereifte Version handelt, sollte man sie nur zu Entwicklungszwecken und die in einer Live-Umgebung nutzen.

Kategorien
(Kostenlose) Services Essentials Freebies, Tools und Templates

Mozilla Firefox per Shortcut: Alle Tastenkürzel in deutscher Sprache

Mozillas Firefox kann leicht über Tastenkombinationen ferngesteuert werden. So können Sie etwa mit Strg+Umschalttaste+R die Seite neu laden und den Cache überschreiben, über Strg+Umschalttaste+P den Privaten Modus ein- oder ausschalten und mit Strg+Umschalttaste+H die gesamte Chronik anzeigen lassen. Es gibt zahlreiche weitere Tastaturkürzel zu entdecken, weshalb wir alle Shortcuts in einer übersichtlichen Liste gesammelt haben.

teaser-ff

Aktion Tastaturbefehl Windows Tastaturbefehl OSX
Alles markieren Strg + A Befehlstaste (cmd) + A
Kopieren Strg + C Befehlstaste (cmd) + C
Ausschneiden Strg + X Befehlstaste (cmd) + X
Einfügen Strg + V Befehlstaste (cmd) + V
Löschen Entf Rückschritt bzw. Fn + Rückschritt
Wiederholen Strg + Y Befehlstaste (cmd) + Umschalttaste + Z
Rückgängig Strg + Z Befehlstaste (cmd) + Z
Abbrechen Esc Esc
Speichern Strg + S Befehlstaste (cmd) + S
Drucken Strg + P Befehlstaste (cmd) + P
Eine Seite zurück Alt + Pfeil nach links oder Rücktaste Befehlstaste (cmd) + Pfeil nach links
Eine Seite vor Alt + Pfeil nach rechts oder Umschalttaste + Rücktaste Befehlstaste (cmd) + Pfeil nach rechts
Startseite Alt + Pos1 Alt + Home
Datei öffnen Strg + O Befehlstaste (cmd) + O
Seite neu laden Strg + R oder F5 Befehlstaste (cmd) + R
Seite neu laden und Cache überschreiben Strg + Umschalttaste + R oder Strg + F5 Befehlstaste (cmd) + Umschalttaste + R
Zum Ende der Seite springen Ende Befehlstaste (cmd) + Pfeil nach unten
Zum Seitenanfang springen Pos1 Befehlstaste (cmd) + Pfeil nach oben
Bildlauf nach oben Pfeil nach oben Pfeil nach oben
Bildlauf nach unten Pfeil nach unten Pfeil nach unten
Nach unten scrollen Leertaste Leertaste
Zum nächsten Frame springen F6 F6
Zum vorherigen Frame springen Umschalttaste + F6 Umschalttaste + F6
Seite speichern unter… Strg + S Befehlstaste (cmd) + S
Hineinzoomen Strg + + Befehlstaste (cmd) + +
Herauszoomen Strg + – Befehlstaste (cmd) + –
Zoom zurücksetzen Strg + 0 Befehlstaste (cmd) + 0
Auf dieser Seite suchen Strg + F Befehlstaste (cmd) + F
Weitersuchen Strg + G Befehlstaste (cmd) + G
Rückwärts suchen Strg + Umschalttaste + G Befehlstaste (cmd) + Shift +G
Internet-Adresse eingeben Strg + L Befehlstaste (cmd) + L
Internet-Suche Strg + K Befehlstaste (cmd) + K
Suchmaschinen wählen oder verwalten Alt + Pfeil nach oben bzw. Alt + Pfeil nach unten – wenn die Suchleiste fokussiert ist Befehlstaste (cmd) + Pfeil nach oben bzw. nach unten – wenn die Suchleiste fokussiert ist
Neuer Tab Strg + T Befehlstaste (cmd) + T
Tab schließen Strg + W bzw. Strg + F4 Befehlstaste (cmd) + W
Tab nach Links verschieben Strg + Pfeil nach links bzw. Strg + Pfeil nach oben – wenn Tab fokussiert Befehlstaste (cmd) + Pfeil nach links bzw. Befehlstaste (cmd) + Pfeil nach oben
Tab nach Rechts verschieben Strg + Pfeil nach rechts bzw. Strg + Pfeil nach unten – wenn Tab fokussiert Befehlstaste (cmd) + Pfeil nach rechts bzw. Befehlstaste (cmd) + Pfeil nach unten
Tab an den Anfang verschieben Strg + Pos1 – wenn Tab fokussiert – / –
Tab an das Ende verschieben Strg + Ende – wenn Tab fokussiert – / –
Nächster Tab Strg + Tab bzw. Strg + Bild ab Befehlstaste (cmd) + Wahltaste (Alt) + Pfeil nach rechts
Adresse in neuem Tab öffnen Alt + Eingabetaste Wahltaste (Alt) + Eingabetaste
Vorheriger Tab Strg + Umschalttaste + Tab bzw. Strg + Bild auf Befehlstaste (cmd) + Wahltaste (Alt) + Pfeil nach links
Kürzlich geschlossene Tabs wiederherstellen Strg + Umschalttaste + T Befehlstaste (cmd) + Umschalttaste + T
Tab auswählen (1 bis 8) Strg + 1 bis 8 Befehlstaste (cmd) + 1 bis 8
Letzten Tab auswählen Strg + 9 Befehlstaste (cmd) + 9
Tab-Gruppen anzeigen Strg + Umschalttaste + E Befehlstaste (cmd) + Umschalttaste + E
Tab-Gruppen-Ansicht schließen Esc esc
Nächste Tab-Gruppe Strg + ` – / –
Vorherige Tab-Gruppe Strg + Umschalttaste + ` – / –
Neues Fenster Strg + N Befehlstaste (cmd) + N
Fenster schließen Strg + W Befehlstaste (cmd) + W
Kürzlich geschlossene Fenster wiederherstellen Strg + Umschalttaste + N Befehlstaste (cmd) + Umschalttaste + N
Chronik-Sidebar Strg + H Befehlstaste (cmd) + H
Gesamte Chronik anzeigen Strg + Umschalttaste + H Befehlstaste (cmd) + Umschalttaste + H
Alle Tabs als Lesezeichen setzen Strg + Umschalttaste + D Befehlstaste (cmd) + Umschalttaste + D
Diese Seite als Lesezeichen setzen Strg + D Befehlstaste (cmd) + D
Lesezeichen-Sidebar Strg + B bzw. Strg + I Befehlstaste (cmd) + B
Alle Lesezeichen anzeigen (Bibliothek) Strg + Umschalttaste + B – / –
Download-Fenster öffnen Strg + J Befehlstaste (cmd) + J
Add-ons Strg + Umschalttaste + A – / –
Web-Konsole Strg + Umschalttaste + K – / –
Untersuchen Strg + Umschalttaste + I – / –
Notizblock Umschalttaste + F4 – / –
Stil-Bearbeitung Umschalttaste + F7 – / –
Seitenquelltext Strg + U Befehlstaste (cmd) + U
Privaten Modus ein-/ausschalten Strg + Umschalttaste + P Befehlstaste (cmd) + Umschalttaste + P
Neueste Chronik löschen Strg + Umschalttaste + Entf Befehlstaste (cmd) + Umschalttaste + Entf
URL-Komplettierung bei www.*.com Strg + Eingabetaste Befehlstaste (cmd) + Eingabetaste
URL-Komplettierung bei www.*.net Umschalttaste + Eingabetaste Umschalttaste + Eingabetaste
URL-Komplettierung bei www.*.org Strg + Umschalttaste + Eingabetaste – / –
Markierten Formulareintrag löschen Entf Entf
Vollbild ein-/ausschalten F11 Befehlstaste (cmd) + Umschalttaste + F
Menüleiste einblenden (falls ausgeblendet) Alt bzw. F10 Wahltaste (Alt)
Add-on-Leiste ein-/ausblenden Strg + / – / –
Caret Browsing F7 – / –
Adressleiste auswählen Alt + D bzw. Strg + L Befehlstaste (cmd) + L

(dpe)

Kategorien
JavaScript & jQuery Programmierung

Peer.js: Peer-to-Peer mit WebRTC und JavaScript im Browser

WebRTC ist eine mächtige Idee. Echtzeitkommunikation im Browser will sie ermöglichen. Google, Mozilla und Opera unterstützen das Projekt, die API wird derzeit von Chrome und den Nightlies von Firefox unterstützt. Das ist ja schon eingeschränkt genug. Das JavaScript-Projekt Peer.js ist noch eingeschränkter. Es läuft derzeit nur in Chrome Dev und Canary. Interessant ist es allemal.

peer
Ähm. Nein, um den hier geht es nicht… (Credits am Ende des Beitrags)

Peer.js – Clientside mit Server-Komponente

Peer.js setzt auf WebRTC auf und ermöglicht Peer-Verbindungen zwischen zwei Clients auf der Basis eindeutiger IDs. Das System wird sowohl auf der Server-Seite (mittels node.js), wie auch auf der Client-Seite als Library installiert. Der PeerServer dient dabei nur der Herstellung der Verbindung. Ist diese Verbindung einmal stabil, findet jeglicher Datentransfer lediglich zwischen den Clients statt.

peerjs-homepage

Aufgrund der miesen Implementation von WebRTC auch im Chrome kann Peer.js nur als Experiment bezeichnet werden. Allerdings ist es eines, dessen Erfolg nur eine Frage der Zeit ist.

Aktuell kann das Projekt nur eine Demo eines Chats vorweisen. Dieser wiederum funktioniert so, dass man eine ID eines Users eingeben muss, um die Verbindung herzustellen. Grundsätzlich ist die Thematik der ID-Übergabe natürlich mittels Programmierung zu regeln. Da es aber derzeit lediglich Demos gibt und das Projekt erst seit kurzem verfügbar ist, sollten wir die Geringfügigkeit der Belege verzeihen.

Peer.js – das Grundprinzip

Die Einbindung der Peer.js-Lösung ist einfach. Das größere Problem stellt der PeerServer dar. Auf der Client-Seite funktioniert das Grundprinzip so. Zunächst wird das Script eingebunden:

Der Peer wird so definiert:


Ein Peer mit Verbindungswunsch definiert sich so:


Wer sich erst einmal sanft dem Thema nähern möchte, will sicherlich nicht direkt Aufwand in die Errichtung eines eigenen PeerServers stecken. Da kommt es gerade recht, dass die Entwickler einen entsprechenden Cloud Service, kostenlos für Entwickler, im Angebot haben.

Wer nun glaubt, er könne so einen schicken eMule-Ersatz bauen, wird enttäuscht. Die maximale Größe aktuell tauschbarer Daten liegt bei ungefähr 1 Kilobyte, was wiederum im Wesentlichen an der Browserimplementierung von WebRTC liegt. Zudem wird bei „großen“ Dateien, also um 1 kB, die Zuverlässigkeit der Übertragung zum Glücksspiel.

Peer.js wird programmiert von zwei Studenten der Berkeley Universität in Kalifornien, Michelle Bu und Eric Zhang. Zhang war Mitgründer des Startups Flotype, welches mittlerweile anders heißt. Zhang ist dort nicht mehr Teil des Teams. Natürlich ist er dennoch immer noch ein fähiger JavaScript-Entwickler.

Links zum Beitrag:

(Bildquelle für das Artikelbild: dirk@vorderstrasse.de via photopin cc)

Kategorien
Design HTML/CSS

CSS3: Native Feature-Detection mit @supports

Wer mit CSS3 arbeitet, läuft immer Gefahr, dass ein Browser bestimmte CSS-Eigenschaften nicht interpretieren kann. Das betrifft nicht nur ältere Browser, wie der aktuelle Internet Explorer beweist. Dienste wie Modernizer erkennen, welche Eigenschaften ein Browser versteht und welche nicht. Mit der „@supports“-Regel gibt es jedoch auch eine native Feature-Detection – derzeit allerdings nur für Opera.

CSS-Eigenschaften mit „@supports“ definieren

Mit der „@supports“-Regel ist es möglich festzustellen, ob ein Browser eine bestimmte CSS-Eigenschaft beherrscht. Nur wenn dies der Fall ist, werden die CSS-Regeln, die innerhalb von„@supports“ definiert sind, auch ausgeführt:

@supports (box-shadow: 5px 5px 10px 10px black) {
  div {
    box-shaow: 5px 5px 10px 10px black;
  }
}

Die Eigenschaft in der runden Klammer gibt die zu prüfende Eigenschaft an. Alles, was in der geschwungenen Klammer steht, wird ausgeführt, wenn der Browser die zu prüfende Eigenschaft versteht. Interessant wird die Funktion natürlich erst, wenn man auch eine Alternative ausgeben kann – für den Fall, dass der Browser die Eigenschaft eben gerade nicht unterstützt:

@supports not (box-shadow: 5px 5px 10px 10px black) {
  div {
    border: 1px black;
  }
}

Im Beispiel wird für den Fall, dass ein Browser die Eigenschaft „box-shadow“ nicht unterstützt, ein einfacher schwarzer Rahmen gezeichnet.

Komplexe Abfragen mit AND und OR

Mit der „@supports“-Regel sind auch Abfragen mehrerer Eigenschaften gleichzeitig möglich. Dazu gibt es die beiden Operatoren AND und OR, die sich beliebig kombinieren lassen, um komplexe Abfragen realisieren zu können:

@supports (text-shadow: 5px 5px 5px black) and (box-shadow: 5px 5px 10px 10px black) {
  div {
    text-shadow: 5px 5px 5px black;
    box-shadow: 5px 5px 10px 10px black;
  }
}

@supports (text-shadow: 5px 5px 5px black) and not (box-shadow: 5px 5px 10px 10px black) {
  div {
    border: 1px black;
    box-shadow: 5px 5px 10px 10px black;
  }
}

Wie man es aus Programmiersprachen kennt, ist es möglich, mehrere AND- und OR-Abfragen zu verschachteln, indem man sie in runde Klammern setzt.

Browser-Unterstützung

Derzeit unterstützt nur Opera ab Version 12.10 die „@supports“-Regeln. Mozillas Firefox soll mit der Version 17 folgen. Da beide Browser bereits einen Großteil aktueller CSS-Eigenschaften unterstützen, wird man die „@supports“-Regel erst zukünftig sinnvoll einsetzen können – wenn es mit CSS4 wieder neue Eigenschaften gibt.

(dpe)

Kategorien
Webdesign

Die besten Browsererweiterungen für die Webentwicklung

Bei der Entwicklung von Webseiten ist der Browser ein wichtiges Hilfsmittel geworden. Früher waren Browser ausschließlich reine Seitenbetrachter, was sich über die Jahre stark geändert hat. Heutzutage gibt es für fast jeden Vertreter seiner Gattung tausende mehr oder weniger nützliche Erweiterungen, die nicht nur dem Developer das Leben leichter machen wollen. In dieser Masse verliert man schnell die Übersicht. Vor allem, wenn man mit mehr als einem Weltnetz-Blätterer arbeitet. Deswegen haben wir die Sammlungen der drei beliebtesten Browser durchforstet und für jeden ein paar Highlights heraus gesucht.

Firebug (Firefox), Developer Tools (Chrome), Dragonfly (Opera)
Firebug ist das Urgestein der Entwickler-Tools und wurde zum Vorbild für andere Browserhersteller, die ähnliche Tools fest in den Browser integrierten. Im Chrome heißen sie schlicht Developer Tools. Diese machen ihrem Namen alle Ehre und bieten – wie Firebug – ein gutes Set an Werkzeugen. Bei Opera heißt das ähnlich funktionsreiche Pendant Dragonfly.

 

Web Developer (Firefox, Chrome),  Developer Briefcase (Opera)
Hier erhalten Sie eine Erweiterung, die nahezu alles bietet, was man bei der Erstellung brauchen kann. Eine einfache Farbpipette, ein Bildschirmlineal und weitere Tools sind vorhanden. Die Opera-Version des Web Developers bietet zwar etwas weniger Werkzeuge, aber immer noch genug Funktionen, den Alltag zu erleichtern.

 

Pendule (Chrome)
Pendule ähnelt Web Developer, bietet allerdings einen etwas kleineren Umfang. Dadurch wirkt die Erweiterung etwas aufgeräumter und übersichtlicher.

 

YSlow (Firefox, Chrome, Opera)
Manchmal ist die eigene Webseite relativ langsam und es ist nicht immer leicht, die Bremsen zu finden. Hier kommt Yslow ins Spiel. Das Tool erstellt eine kleine Analyse und zeigt in einer Liste ein paar Tipps zu weiteren Optimierungsmöglichkeiten.

 

Colorzilla (Firefox, Chrome)
Anfangs war Colorzilla eine einfache Farbpipette. Mittlerweile hat es sich zu einem praktischem Allround-Farbwerkzeug entwickelt. So lassen sich jetzt auch CSS3-Verläufe generieren.

 

Dust-me Selectors (Firefox, Opera)
Bei der Entwicklung bleiben öfters nicht benötigte CSS-Selektoren übrig. Duster durchsucht alle verlinkten Stylesheets nach Selektoren, vergleicht sie mit den auf der aktuellen Seite verwendeten und zeigt, welche nicht benötigt werden. Leider gilt das Ergebnis nur für die aktuelle Seite und nicht das ganze Projekt.

 

CSScan (Chrome)
Einmal aktiviert, liefert CSScan die relevanten Informationen zu jedem Element, das mit der Maus berührt wird.

 

IE Tab (Chrome, Firefox)
Will oder muss man testen, ob die frisch entwickelte Seite im Internet Explorer korrekt dargestellt wird, eignet sich diese Erweiterung. Sie lädt die gewünschte Seite mit der Engine des Internet Exploders ( IE7 – IE9 ) in einem neuen Tab.

 

FireFTP (Firefox)
Ein schlichter FTP-Client, der direkt im Browser integriert ist und optional direkt mit allen ftp:// links verknüpft werden kann.
Für kleinere Aufgaben ist das Tool durchaus nützlich, jedoch würde ich für die Arbeit einen vollwertigen FTP-Client empfehlen.

 

Tilt 3D (Firefox)
Tilt ist eine einzigartige Erweiterung, die mit WebGL eine topografische 3D-Darstellung liefert, die sich frei drehen und zoomen lässt und die einzelnen Elementarten farblich kennzeichnet. Kollege Dieter Petereit schrieb schon mal ausführlicher für das T3N Magazin darüber.

(dpe)