updated article

added more images

src/_includes/layouts/article.njk

@@ -3,7 +3,7 @@ layout: base.njk
 ---
 
 <div class="row">
-    <div class="col-8 article-content">
+    <div class="col-lg-8 col-12 article-content">
         {% if tags %}
         <div class="mb-2">
             {% for tag in tags %}
@@ -13,7 +13,7 @@ layout: base.njk
         {% endif %}
         {{ content | safe }}
     </div>
-    <div class="col-4">
+    <div class="col-lg-4 col-12">
         {% if series %}
         <div class="tab-card">
             <div class="title">Alle Teile dieser Serie</div>

src/de/services/matrix/setup/part-1.md

@@ -14,63 +14,150 @@ tags:
 
 # Werde Teil der Matrix - Matrix Teil 1
 
-[Matrix](https://matrix.org) ist ein dezentraler Messenger. Dezentral bedeutet, es gibt nicht den einen Server, den alle verwenden müssen, sondern jede:r kann sich einen eigenen Matrix-Server aussuchen. In etwa so wie bei E-Mail.
+[Matrix](https://matrix.org) ist ein dezentraler Messenger. Dezentral bedeutet, es gibt nicht den einen Server, den alle
+verwenden müssen, sondern jede:r kann sich einen eigenen Matrix-Server aussuchen. In etwa so wie bei E-Mail.
 
-In diesem Beitrag möchte ich nun erklären, wie man sich dort anmelden kann und mit welchen Apps man mit seinen Liebsten in Kontakt treten kann. In den folgenden Artikeln dieser Serie werde ich auf weitere Themen, wie Ende-zu-Ende Verschlüsselung, Kontakt-Verifizierung und das Erstellen von privaten und öffentlichen Gruppen, eingehen.
+In diesem Beitrag möchte ich nun erklären, wie man sich dort anmelden kann und mit welchen Apps man mit seinen Liebsten
+in Kontakt treten kann. In den folgenden Artikeln dieser Serie werde ich auf weitere Themen, wie Ende-zu-Ende
+Verschlüsselung, Kontakt-Verifizierung und das Erstellen von privaten und öffentlichen Gruppen, eingehen.
 
 ## Anbieter wählen
 
-Zunächst muss man sich einen Server-Anbieter auswählen, bei dem man sich registrieren möchte. Im Matrix-Netzwerk spricht man auch vom Homeserver, also der Server, bei dem man "zu Hause" ist, bzw. sein Konto hat. Hierfür kann man im Internet suchen oder eine der folgenden öffentlichen Listen verwenden, um einen Provider zu finden, der den eigenen Vorstellungen entspricht:
+Zunächst muss man sich einen Server-Anbieter auswählen, bei dem man sich registrieren möchte. Im Matrix-Netzwerk spricht
+man auch vom Homeserver, also der Server, bei dem man "zu Hause" ist, bzw. sein Konto hat. Hierfür kann man im Internet
+suchen oder eine der folgenden öffentlichen Listen verwenden, um einen Provider zu finden, der den eigenen Vorstellungen
+entspricht:
 
 * [joinmatrix.org](https://joinmatrix.org/servers)
 * [hello-matrix.net](https://www.hello-matrix.net/public_servers.php)
 * [the-federation.info](https://the-federation.info/protocol/matrix)
 
-Wichtig hierbei ist auch, dass der Servername immer ein Teil der eigenen Matrix-ID sein wird, also dem Anmeldenamen, mit dem man sich anmeldet, oder über den Anderen mit dir in Kontakt treten können. (Also genau wie mit deiner E-Mail-Adresse auch.) Die Matrix-ID sieht also folgendermaßen aus:
+Wichtig hierbei ist auch, dass der Servername immer ein Teil der eigenen Matrix-ID sein wird, also dem Anmeldenamen, mit
+dem man sich anmeldet, oder über den Anderen mit dir in Kontakt treten können. (Also genau wie mit deiner E-Mail-Adresse
+auch.) Die Matrix-ID sieht also folgendermaßen aus:
 
 ```
 @[name]:[server]
 ```
 
-In diesem Beitrag werde ich [matrix.sp-codes.de](https://matrix.sp-codes.de) als Home-Server verwenden. Gerne kannst du dich auch dort registrieren. Da ich selber diesen Server nutze, ist meine Matrix-ID also diese: [@samuel-p:matrix.sp-codes.de](https://matrix.to/#/@samuel-p:matrix.sp-codes.de)
+In diesem Beitrag werde ich [matrix.sp-codes.de](https://matrix.sp-codes.de) als Home-Server verwenden. Gerne kannst du
+dich auch dort registrieren. Da ich selber diesen Server nutze, ist meine Matrix-ID also
+diese: [@samuel-p:matrix.sp-codes.de](https://matrix.to/#/@samuel-p:matrix.sp-codes.de)
 
 ## App wählen
 
-Da Matrix ein quelloffenes Netzwerk ist, kann jede:r dazu beitragen und eigene Apps entwickeln. Dadurch gibt es nicht die eine App, die zwingend verwendet werden muss. Ich möchte deshalb hier kurz zwei Apps vorstellen, die meiner Ansicht nach gut für den Einstieg geeignet sind:
+Da Matrix ein quelloffenes Netzwerk ist, kann jede:r dazu beitragen und eigene Apps entwickeln. Dadurch gibt es nicht
+die eine App, die zwingend verwendet werden muss. Ich möchte deshalb hier kurz zwei Apps vorstellen, die meiner Ansicht
+nach gut für den Einstieg geeignet sind:
 
 ### [Element](https://element.io/)
 
-Element ist die wohl am weitesten verbreitetste App im Matrix-Netzwerk. Die App ist für Android, iOS, PC und auch als Browser-Version verfügbar. Für Android kann Element über den [PlayStore](https://play.google.com/store/apps/details?id=im.vector.app) oder über [F-Droid](https://f-droid.org/packages/im.vector.app/) installiert werden. Für iOS kann die App über den [AppStore](https://apps.apple.com/app/vector/id1083446067) heruntergeladen werden. Um die Desktop-Version zu installieren, schau am besten auf der offiziellen [Seite](https://element.io/get-started) nach.
+Element ist die wohl am weitesten verbreitetste App im Matrix-Netzwerk. Die App ist für Android, iOS, PC und auch als
+Browser-Version verfügbar. Für Android kann Element über
+den [PlayStore](https://play.google.com/store/apps/details?id=im.vector.app) oder
+über [F-Droid](https://f-droid.org/packages/im.vector.app/) installiert werden. Für iOS kann die App über
+den [AppStore](https://apps.apple.com/app/vector/id1083446067) heruntergeladen werden. Um die Desktop-Version zu
+installieren, schau am besten auf der offiziellen [Seite](https://element.io/get-started) nach.
 
-Alle Versionen (Android, iOS, Desktop und Web) sind kostenlos und Open-Source. Das heißt, jede:r kann den Quellcode einsehen, Fehler melden und an Verbesserungen mitarbeiten.
+Alle Versionen (Android, iOS, Desktop und Web) sind kostenlos und Open-Source. Das heißt, jede:r kann den Quellcode
+einsehen, Fehler melden und an Verbesserungen mitarbeiten.
 
-Da der Quellcode frei verfügbar ist, können auch andere Apps erstellt werden, die auf Element basieren. Einer davon ist SchildiChat.
+Da der Quellcode frei verfügbar ist, können auch andere Apps erstellt werden, die auf Element basieren. Einer davon ist
+SchildiChat.
 
-[SchildiChat](https://f-droid.org/packages/de.spiritcroc.riotx/) ist ein Messenger, der auf Element basiert und ein paar kleinere Änderungen mit sich bringt. Darunter eine andere Darstellung der Chatverläufe mit Sprechblasen. SchildiChat ist nur für Android verfügbar.
+[SchildiChat](https://f-droid.org/packages/de.spiritcroc.riotx/) ist ein Messenger, der auf Element basiert und ein paar
+kleinere Änderungen mit sich bringt. Darunter eine andere Darstellung der Chatverläufe mit Sprechblasen. SchildiChat ist
+nur für Android verfügbar.
 
 ### [FluffyChat](https://fluffychat.im/)
 
-Eine andere, einfach zu bedienende App ist FluffyChat. Auch FluffyChat ist für [Android](https://play.google.com/store/apps/details?id=chat.fluffy.fluffychat), [iOS](https://testflight.apple.com/join/hL6Tyyaj), Desktop und als [Browser-Anwendung](https://web.fluffychat.im/) verfügbar. Um FluffyChat zu installieren, schau am besten direkt auf der Webseite [fluffychat.im](https://fluffychat.im/) vorbei. Wie Element, ist auch FluffyChat Open-Source. FluffyChat versucht sich in der Bedienung und im Design an herkömmlichen Messengern zu orientieren.
+Eine andere, einfach zu bedienende App ist FluffyChat. Auch FluffyChat ist
+für [Android](https://play.google.com/store/apps/details?id=chat.fluffy.fluffychat), [iOS](https://testflight.apple.com/join/hL6Tyyaj),
+Desktop und als [Browser-Anwendung](https://web.fluffychat.im/) verfügbar. Um FluffyChat zu installieren, schau am
+besten direkt auf der Webseite [fluffychat.im](https://fluffychat.im/) vorbei. Wie Element, ist auch FluffyChat
+Open-Source. FluffyChat versucht sich in der Bedienung und im Design an herkömmlichen Messengern zu orientieren.
 
 ### Mehr Apps
 
-Es gibt noch einige Apps mehr, die teilweise auch noch in der Entwicklung sind. Eine weitere Auswahl an Apps findest du auf der folgenden Seite: [https://matrix.org/clients/](https://matrix.org/clients/)
+Es gibt noch einige Apps mehr, die teilweise auch noch in der Entwicklung sind. Eine weitere Auswahl an Apps findest du
+auf der folgenden Seite: [https://matrix.org/clients/](https://matrix.org/clients/)
 
 ## Anmelden
 
-Nachdem du dich nun für einen vertrauenswürdigen Anbieter entschieden und eine App installiert hast, die dir zusagt, kannst du dir nun einen Account anlegen. Im Folgenden werde ich die App Element unter Android verwenden, das Vorgehen wird aber in anderen Apps ähnlich sein.
+Nachdem du dich nun für einen vertrauenswürdigen Anbieter entschieden und eine App installiert hast, die dir zusagt,
+kannst du dir nun einen Account anlegen. Im Folgenden werde ich die App Element unter Android verwenden, das Vorgehen
+wird aber in anderen Apps ähnlich sein.
 
-Nach der Startseite wählst du zunächst „Andere“ und gibst anschließend die Server-Adresse deines Anbieters ein. Nun wählst du deinen Anmeldenamen und ein sicheres Passwort, gibst beides in die entsprechenden Felder ein und schon wird dein Matrix-Account erstellt. Es kann sein, dass du während des Erstellens deines Accounts ein bisschen warten musst, das kann je nach Server-Auslastung ein bisschen dauern.
+Nach der Startseite wählst du zunächst „Andere“ und gibst anschließend die Server-Adresse deines Anbieters ein. Nun
+wählst du deinen Anmeldenamen und ein sicheres Passwort, gibst beides in die entsprechenden Felder ein und schon wird
+dein Matrix-Account erstellt. Es kann sein, dass du während des Erstellens deines Accounts ein bisschen warten musst,
+das kann je nach Server-Auslastung ein bisschen dauern.
+
+<div class="row">
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-1/1start.png">
+<img class="d-block w-100" src="/img/matrix/setup/part-1/1start.png">
+<span>Zuerst die App starten.</span>
+</a>
+</div>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-1/2anbieter.png">
+<img class="d-block w-100" src="/img/matrix/setup/part-1/2anbieter.png">
+<span>„Andere“ auswählen um einen eigenen Anbieter zu verwenden.</span>
+</a>
+</div>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-1/3server-name.png">
+<img class="d-block w-100" src="/img/matrix/setup/part-1/3server-name.png">
+<span>Die Server-Adresse des Anbieters eingeben und „Registrieren“ oder „Anmelden“ auswählen.</span>
+</a>
+</div>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-1/4anmelden.png">
+<img class="d-block w-100" src="/img/matrix/setup/part-1/4anmelden.png">
+<span>Benutzername und Passwort eingeben.</span>
+</a>
+</div>
+</div>
 
 ## Kontakte hinzufügen
 
-Nachdem du nun deinen Account erstellt hast, ist es an der Zeit, mit deinen Liebsten Kontakt aufzunehmen. Frage sie hierfür beispielsweise nach ihrer Matrix-ID. Gerne kannst du auch mir eine Nachricht zukommen lassen: [@samuel-p:matrix.sp-codes.de](https://matrix.to/#/@samuel-p:matrix.sp-codes.de)
+Nachdem du nun deinen Account erstellt hast, ist es an der Zeit, mit deinen Liebsten Kontakt aufzunehmen. Frage sie
+hierfür beispielsweise nach ihrer Matrix-ID. Gerne kannst du auch mir eine Nachricht zukommen
+lassen: [@samuel-p:matrix.sp-codes.de](https://matrix.to/#/@samuel-p:matrix.sp-codes.de)
 
-Um einen neuen Chat zu starten, tippe auf den grünen Button unten rechts und anschließend auf „Mit matrix-ID hinzufügen“. Nun gibst du die Matrix-ID deines:deiner Chatpartner:in ein, wählst den ersten Treffer aus der Liste aus und tippst anschließend auf „Erstellen“. Jetzt heißt es ein bisschen warten, bis dein:e Chatpartner:in deine Einladung angenommen hat.
+Um einen neuen Chat zu starten, tippe auf den grünen Button unten rechts und anschließend auf „Mit matrix-ID
+hinzufügen“. Nun gibst du die Matrix-ID deines:deiner Chatpartner:in ein, wählst den ersten Treffer aus der Liste aus
+und tippst anschließend auf „Erstellen“. Jetzt heißt es ein bisschen warten, bis dein:e Chatpartner:in deine Einladung
+angenommen hat.
+
+<div class="row">
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-1/6home.png">
+<img class="d-block w-100" src="/img/matrix/setup/part-1/6home.png">
+</a>
+</div>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-1/7neu.png">
+<img class="d-block w-100" src="/img/matrix/setup/part-1/7neu.png">
+</a>
+</div>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-1/8matrix-id.png">
+<img class="d-block w-100" src="/img/matrix/setup/part-1/8matrix-id.png">
+</a>
+</div>
+<div class="col-lg-3 col-sm-6 col-12">
+<a href="/img/matrix/setup/part-1/9chat.png">
+<img class="d-block w-100" src="/img/matrix/setup/part-1/9chat.png">
+</a>
+</div>
+</div>
 
 ## Wie geht’s weiter?
 
-Im [nächsten Artikel](http://localhost:8080/de/services/matrix/setup/part-2/) dieser Serie werde ich über Ende-zu-Ende-Verschlüsselung und Verifikation der Kontakte schreiben. Bis dahin viel Spaß beim Chatten.
+Im [nächsten Artikel](http://localhost:8080/de/services/matrix/setup/part-2/) dieser Serie werde ich über
+Ende-zu-Ende-Verschlüsselung und Verifikation der Kontakte schreiben. Bis dahin viel Spaß beim Chatten.
 
 Falls du jetzt schon weiter lesen willst, kann ich dir die folgenden Links empfehlen, allerdings teilweise auf Englisch: