doc/outils/matrix/installation/index.html
2023-02-12 22:00:57 +00:00

647 lines
20 KiB
HTML

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="canonical" href="https://tinternet.gitnet.page/doc/outils/matrix/installation/">
<link rel="prev" href="../">
<link rel="icon" href="../../../_static/img/logo.png">
<meta name="generator" content="mkdocs-1.4.2, mkdocs-material-9.0.12">
<title>Installation - Tinternet & cie</title>
<link rel="stylesheet" href="../../../assets/stylesheets/main.0d440cfe.min.css">
<link rel="stylesheet" href="../../../assets/stylesheets/palette.2505c338.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<script>__md_scope=new URL("../../..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
<meta property="og:type" content="website" >
<meta property="og:title" content="Installation - Tinternet & cie" >
<meta property="og:description" content="None" >
<meta property="og:image" content="https://tinternet.gitnet.page/doc/assets/images/social/outils/matrix/installation.png" >
<meta property="og:image:type" content="image/png" >
<meta property="og:image:width" content="1200" >
<meta property="og:image:height" content="630" >
<meta property="og:url" content="https://tinternet.gitnet.page/doc/outils/matrix/installation/" >
<meta name="twitter:card" content="summary_large_image" >
<meta name="twitter:title" content="Installation - Tinternet & cie" >
<meta name="twitter:description" content="None" >
<meta name="twitter:image" content="https://tinternet.gitnet.page/doc/assets/images/social/outils/matrix/installation.png" >
</head>
<body dir="ltr" data-md-color-scheme="slate" data-md-color-primary="light-blue" data-md-color-accent="">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#installation" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="../../.." title="Tinternet &amp; cie" class="md-header__button md-logo" aria-label="Tinternet & cie" data-md-component="logo">
<img src="../../../_static/img/logo.png" alt="logo">
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
Tinternet & cie
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Installation
</span>
</div>
</div>
</div>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
</button>
</nav>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
<div class="md-tabs__inner md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item">
<a href="../../.." class="md-tabs__link">
Accueil
</a>
</li>
<li class="md-tabs__item">
<a href="../" class="md-tabs__link md-tabs__link--active">
Outils
</a>
</li>
</ul>
</div>
</nav>
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--lifted" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="../../.." title="Tinternet &amp; cie" class="md-nav__button md-logo" aria-label="Tinternet & cie" data-md-component="logo">
<img src="../../../_static/img/logo.png" alt="logo">
</a>
Tinternet & cie
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../../.." class="md-nav__link">
Accueil
</a>
</li>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" checked>
<label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="0">
Outils
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_2">
<span class="md-nav__icon md-icon"></span>
Outils
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--active md-nav__item--nested">
<input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_1" checked>
<label class="md-nav__link" for="__nav_2_1" id="__nav_2_1_label" tabindex="0">
Matrix et Element
<span class="md-nav__icon md-icon"></span>
</label>
<nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_1_label" aria-expanded="true">
<label class="md-nav__title" for="__nav_2_1">
<span class="md-nav__icon md-icon"></span>
Matrix et Element
</label>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item">
<a href="../" class="md-nav__link">
Présentation
</a>
</li>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
Installation
<span class="md-nav__icon md-icon"></span>
</label>
<a href="./" class="md-nav__link md-nav__link--active">
Installation
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#telecharger-et-installer-le-client-element" class="md-nav__link">
Télécharger et installer le client Element
</a>
</li>
<li class="md-nav__item">
<a href="#creation-du-compte" class="md-nav__link">
Création du compte
</a>
</li>
<li class="md-nav__item">
<a href="#connexion-au-compte" class="md-nav__link">
Connexion au compte
</a>
</li>
<li class="md-nav__item">
<a href="#rejoindre-la-communaute-tinternet-cie" class="md-nav__link">
Rejoindre la communauté Tinternet &amp; cie
</a>
</li>
<li class="md-nav__item">
<a href="#sauvegarde-de-la-cle-de-securite" class="md-nav__link">
Sauvegarde de la clé de sécurité
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#telecharger-et-installer-le-client-element" class="md-nav__link">
Télécharger et installer le client Element
</a>
</li>
<li class="md-nav__item">
<a href="#creation-du-compte" class="md-nav__link">
Création du compte
</a>
</li>
<li class="md-nav__item">
<a href="#connexion-au-compte" class="md-nav__link">
Connexion au compte
</a>
</li>
<li class="md-nav__item">
<a href="#rejoindre-la-communaute-tinternet-cie" class="md-nav__link">
Rejoindre la communauté Tinternet &amp; cie
</a>
</li>
<li class="md-nav__item">
<a href="#sauvegarde-de-la-cle-de-securite" class="md-nav__link">
Sauvegarde de la clé de sécurité
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<h1 id="installation">Installation</h1>
<h2 id="telecharger-et-installer-le-client-element"><strong>Télécharger et installer le client Element</strong></h2>
<p>Element est une interface pour utiliser Matrix. Element se télécharge depuis&nbsp;: <a href="https://element.io/get-started#download">https://element.io/get-started#download</a></p>
<p>Vous avez également une application mobile sur Android et Iphone&nbsp;:</p>
<p><a class="md-button md-button--primary" href="https://play.google.com/store/apps/details?id=im.vector.app">Android</a>
<a class="md-button md-button--primary" href="https://apps.apple.com/fr/app/element-messenger/id1083446067">IOS</a></p>
<h2 id="creation-du-compte"><strong>Création du compte</strong></h2>
<p>Lancer Element.</p>
<p><strong>Changement du serveur&nbsp;:</strong></p>
<p>Pour s'inscrire sur le serveur de Tinternet, cliquer sur <code>Modifier</code> et renseigner <code>matrix.tinternet.net</code>&nbsp;:</p>
<p><img alt="" src="https://upload.deblan.org/u/2022-01/61e58b0a.png" /></p>
<p><strong>Formulaire d'inscription&nbsp;:</strong></p>
<p>Seuls le nom d'utilisateur et le mot de passe sont obligatoires. Cependant, nous vous conseillons de saisir votre adresse mail pour récupérer le mot de passe en cas de perte.</p>
<div class="admonition note">
<p class="admonition-title">Information technique</p>
<p>Afin de gérer les notifications par mail et par SMS lors de l'inscription, les données que vous fournissez sont transmises à element.io, un service géré par les développeurs du protocole Matrix.</p>
</div>
<p>Une fois le formulaire d'inscription validé, vous allez recevoir un mail avec un lien de confirmation&nbsp;: </p>
<p><img alt="" src="https://upload.deblan.org/u/2022-01/61e58c50.jpg" /></p>
<p>Votre identifiant complet est&nbsp;: <strong>@nom d'utilisateur:matrix.tinternet.net</strong></p>
<h2 id="connexion-au-compte">Connexion au compte</h2>
<p>Fermer et réouvrir Element et s'identifier&nbsp;:</p>
<p><img alt="" src="https://upload.deblan.org/u/2022-01/61e58cc9.jpg" /></p>
<p>Une fois connecté⋅e, vous verrez quelque chose de similaire à&nbsp;:</p>
<p><img alt="" src="https://upload.deblan.org/u/2022-01/61e58cf0.jpg" /></p>
<h2 id="rejoindre-la-communaute-tinternet-cie">Rejoindre la communauté Tinternet &amp; cie</h2>
<p>Pour faciliter les échanges avec Tinternet, on a de créé une communauté qui regroupe plusieurs salons de discussions. On va y trouver les nouveaux GTI.</p>
<p>Cliquer sur <code>Explorer les salons publics</code>, saisir <strong>#tinternet-et-cie:matrix.tinternet.net</strong> puis cliquer sur <code>Rejoindre</code>&nbsp;: </p>
<table>
<tr>
<td>
<a href="https://upload.deblan.org/u/2022-01/61e596b7.png">
<img src="https://upload.deblan.org/u/2022-01/61e596b7.png">
</a>
</td>
<td>
<a href="https://upload.deblan.org/u/2022-01/61e596e6.jpg">
<img src="https://upload.deblan.org/u/2022-01/61e596e6.jpg">
</a>
</td>
<td>
<a href="https://upload.deblan.org/u/2022-01/61e59703.jpg">
<img src="https://upload.deblan.org/u/2022-01/61e59703.jpg">
</a>
</td>
</tr>
</table>
<p>Vous avez à présent la possibilité de rejoindre les salons publics de Tinternet \&amp; cie. Des salons privés existent et sont accessibles sur invitation. Nous ne manquerons pas de vous inviter !</p>
<p>Si vous désirez échanger directement avec quelqu'un, cliquez alors sur le <code>+</code> à droite de <code>Personnes</code>. En cliquant sur <code>En voir plus</code>, vous verrez toutes les personnes de la communauté Tinternet.</p>
<h2 id="sauvegarde-de-la-cle-de-securite">Sauvegarde de la clé de sécurité</h2>
<p>La clé de sécurité est un mécanisme important pour valider une session. Nous verrons ensemble son intérêt. Pour le moment, il s'agit de la mettre en lieu sûr !</p>
<p>Ouvrir l'onglet <code>Sécurité et vie privée</code> puis sur cliquer sur <code>Configurer la sauvegarde sécurisée</code>&nbsp;:</p>
<table>
<tr>
<td>
<a href="https://upload.deblan.org/u/2022-01/61e59844.png">
<img src="https://upload.deblan.org/u/2022-01/61e59844.png">
</a>
</td>
<td>
<a href="https://upload.deblan.org/u/2022-01/61e598ac.png">
<img src="https://upload.deblan.org/u/2022-01/61e598ac.png">
</a>
</td>
</tr>
</table>
<p>Choisir <code>Générer une clé de sécurité</code> puis cliquer sur <code>Télécharger</code>. Il est impératif de garder cette clé de sécurité en lieu sûr. Lors d'une prochaine connexion avec un autre appareil, vous serez suceptible de devoir l'utiliser.</p>
<p>Une fois téléchargée, on peut passer à l'étape suivante qu'on validera avec le mot de passe du compte.</p>
</article>
</div>
</div>
</main>
<footer class="md-footer">
<nav class="md-footer__inner md-grid" aria-label="Footer" >
<a href="../" class="md-footer__link md-footer__link--prev" aria-label="Previous: Présentation" rel="prev">
<div class="md-footer__button md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
</div>
<div class="md-footer__title">
<div class="md-ellipsis">
<span class="md-footer__direction">
Previous
</span>
Présentation
</div>
</div>
</a>
</nav>
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": "../../..", "features": ["content.code.copy", "navigation.tabs", "navigation.footer"], "search": "../../../assets/javascripts/workers/search.db81ec45.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
<script src="../../../assets/javascripts/bundle.4b2c34cd.min.js"></script>
</body>
</html>