[POST] Téléconférence (premier jet)

content/posts/011-teleconference.md

@@ -0,0 +1,364 @@
+---
+draft: true
+date: 2020-04-03T08:04:59+02:00
+title: "Le confinement et les outils de téléconférence"
+description: "Aperçu des outils de téléconférence disponibles en cette période de confinement."
+images: []
+tags: ["Informatique", "Visioconférence", "Téléconférence", "Audioconférence"]
+categories: ["Informatique"]
+externalLink: ""
+series: []
+---
+
+Pendant cette période de confinement obligatoire,
+nous devons apprendre à nous réorganiser.
+Que cela soit pour un emploi rémunéré,
+pour du bénévolat ou encore simplement pour partager des moments
+de plaisir avec d'autres personnes,
+la communication textuelle, audio et vidéo est un outil nécessaire.
+
+Il convient à chaque groupement de personnes de définir ses besoins,
+mais ensuite quelles sont les différences entre les logiciels disponibles?
+
+
+# Les outils de communication textuelle
+Les outils uniquement textuels sont les moins attrayants pour la majorité
+des utilisateurs et utilisatrices,
+mais il ne faut pas oublier que ce sont des outils extrêmement performants
+et qui ont fait leurs preuves depuis de nombreuses années.
+
+Ce mode de communication nécessiterait un article précis.
+Pour ne pas encombrer celui-ci, je vais uniquement vous conseiller
+de vous tourner vers
+[IRC](https://fr.wikipedia.org/wiki/Internet_Relay_Chat "Internet Relay Chat").
+
+# Les outils de communication audio
+En général, les outils sont cumulatifs.
+La grande majorité des logiciels de communication audio contiennent un
+logiciel de communication textuelle, communément appelé un tchat.
+
+Je choisis d'exclure **WhatsApp** car il peut faire des appels vidéo de groupe
+mais limité à quatre personnes uniquement.
+
+## Skype
+
+<span class="logo">
+
+![Logo Skype][skype]
+
+</span>
+
+[Skype][urlSkype] est le logiciel de téléphonie par Internet de Microsoft.
+Il permet de faire des appels de groupe vocaux jusqu'à 25 personnes.
+
+Il est utilisable sur la majorité des systèmes d'exploitation mais souffre
+apparemment de problèmes de latence ainsi que d'une charge importante
+pour le processeur.
+Il nécessite également à chacun de créer un compte sur la plateforme
+de Microsoft.
+
+## Mumble / TeamSpeak
+
+<span class="logo">
+
+![Logo Mumble][mumble]
+![Logo TeamSpeak][ts]
+
+</span>
+
+Ces deux logiciels, [Mumble][urlMumble] et [TeamSpeak][urlTS],
+nécessitent la configuration d'un serveur,
+ce qui implique quelques connaissances informatiques
+et de posséder / louer un serveur.
+En revanche, l'utilisation est très simple, il suffit d'installer le
+client et de se connecter au serveur.
+Il est ensuite possible de créer autant d'espaces de discussion que vous
+voulez et n'est que limité par la configuration que vous aurez choisie.
+Bien évidemment, ces logiciels sont utilisables sur tous les systèmes
+d'exploitation principaux.
+Leur utilisation a été éprouvée,
+*Mumble* datant de 2005 et *Teamspeak* de 2001.
+
+Après avoir utilisé les deux logiciels,
+je conseille d'utiliser *Mumble* qui est un logiciel libre.
+Il permet également de s'authentifier avec un certificat ce qui est pratique
+et sécurisé.
+
+Ces deux logiciens ne souffrent d'aucun problème de latence
+et implique une très faible charge sur votre processeur.
+
+Ils sont également très facilement configurables,
+que ce soit pour régler la gestion de son propre micro ou
+augmenter le volume d'un protagoniste.
+Il y a également moyen de définir des droits et donc d'avoir de la modération,
+ce qui n'est pas un luxe lors de discussions à plusieurs.
+
+## Discord
+
+<span class="logo">
+
+![Logo Discord][discord]
+
+</span>
+
+[Discord][urlDiscord] est le petit nouveau, sa première version datant de 2015.
+
+Il est fortement orienté gaming et se comporte de manière semblable à un
+réseau social, avec une gestion de contacts
+et leur suivi (de leur présence en ligne ou de leur activité).
+
+Il a l'avantage d'avoir, en plus d'une application dédiée,
+une application web qui fonctionne donc
+sans rien installer sur sa propre machine.
+Cette dernière étant cependant moins pratique d'utilisation et
+moins configurable.
+*Discord* ne souffre apparemment d'aucun problème de latence.
+
+Pour l'utiliser, il suffit de se créer un compte sur leur site et
+de se connecter avec ses amis,
+c'est une solution extrêmement rapide à mettre en place.
+Cela peut être déconseillé dans le cadre où vous désirez communiquer
+avec des personnes qui se trouvent en dehors de votre cercle d'amis.
+
+# Les outils de communication vidéo
+Comme précisé précédemment, si l'outil fait de la vidéo,
+il comporte un support de l'audio et du texte.
+
+Cette fois, je choisis d'exclure **Skype** car il peut faire des appels vidéo
+de groupe mais limité à dix personnes et également limité dans la durée.
+
+Les fonctionnalités que je juge nécessaires à ce genre d'applications sont
+les suivantes:
+
+* la discussion audio et vidéo,
+* un tchat textuel,
+* la possibilité de partager son écran, ou des parties de son écran,
+* permettre à chacun·e de demander la parole,
+* avoir un système de modération.
+
+
+Je rajoute des fonctionnalités qui me paraissent utiles:
+
+* faire des sondages,
+* avoir un tableau blanc,
+* diffuser une présentation (et écrire dessus),
+* sécuriser l'accès par un mot de passe.
+
+
+Je n'ai pas connaissance de services ne nécessitant pas de passer
+par un serveur pour héberger le système.
+Dans ce domaine il y a vraiment énormément de choix,
+selon la [page de comparatif Wikipedia][wikiCompa],
+il y a une trentaine de prétendants.
+Je vais donc m'attarder uniquement sur les quatre logiciels suivants:
+
+* [Nextcloud Talk](#nextcloud-talk)
+* [Zoom](#zoom)
+* [Jitsi Meet](#jitsi-meet)
+* [BigBlueButton](#bigbluebutton)
+
+## Nextcloud Talk
+
+<span class="logo">
+
+![Logo Nextcloud][nextcloud]
+
+</span>
+
+[*Nextcloud*][urlNextcloud] est un logiciel libre de site d'hébergement de fichiers.
+À la base utilisé uniquement pour cela,
+en concurrence à des solutions privées comme *Dropbox*,
+il contient maintenant plusieurs plugins très intéressant,
+dont celui en rapport avec ce billet, *Nextcloud Talk*.
+Le principal avantage de cette option est que si vous avez déjà accès à
+un serveur Nextcloud, l'installation du plugin est sans encombres,
+il suffit de l'activer et cela fonctionne.
+Aucun besoin de configuration, on peut directement l'utiliser.
+
+C'est le logiciel le plus basique des quatre.
+Il ne remplit pas tout à fait les conditions que j'ai énoncées,
+il lui manque un système de demande de parole.
+Dans le cas d'une utilisation avec une équipe qui a l'habitude de travailler
+ensemble, cela n'est pas forcément un problème,
+mais dans le cas d'un cours / formation,
+les soucis risquent d'arriver rapidement.
+
+Il est également possible d'avoir une sécurité par mot de passe ou
+d'ouvrir le salon uniquement sur invitation.
+
+En dehors de cela, il fonctionne a merveille.
+
+## Zoom
+
+<span class="logo">
+
+![Logo Zoom][zoom]
+
+</span>
+
+[Zoom][urlZoom] est un logiciel de téléconférence complet.
+Il répond à tous les critères indispensables que j'ai énuméré et permet
+en plus de faire des sondages.
+En revanche il ne me semble pas permettre de partager une présentation ou
+un tableau blanc.
+
+Avec l'utilisation d'un compte gratuit,
+la durée des communications est limitée à 40 minutes
+et à 100 participant·e·s[^limitPart].
+Il est bien évidemment possible de payer pour augmenter ces limites.
+
+
+## Jitsi Meet
+
+<span class="logo">
+
+![Logo Jitsi][jitsi]
+
+</span>
+
+[*Jitsi*][urlJitsi] est également un logiciel dédié à la téléconférence,
+mais complètement libre cette fois.
+Comme *Zoom*, il remplit parfaitement les critères indispensables.
+Il permet également de sécuriser l'accès par un mot de passe.
+
+Il est possible de créer une conférence sur le site officiel directement,
+mais également, comme tout bon logiciel libre,
+d'installer son instance sur son propre serveur.  
+[Framasoft][framasoft] propose également son instance, [Framatalk][framatalk].
+
+## BigBlueButton
+
+<span class="logo">
+
+![Logo BigBlueButton][bbb]
+
+</span>
+
+[*BigBlueButton*][urlBBB] est également un logiciel libre.
+C'est le logiciel de téléconférence le plus abouti que je connaisse.
+Il permet de faire tout ce que j'ai listé, indispensable ou non.
+
+En créant un compte sur leur site,
+il y a moyen de tester avec des réunions non-enregistrables et
+limitées à une heure.
+Mais comme c'est un logiciel libre,
+il est possible d'installer son instance perso sur son propre serveur,
+et donc de contrôler complètement les capacités.
+
+
+# Notre empreinte numérique
+Une chose à garder à l'esprit est le volume de donnée nécessaire
+pour chacune des technologies.
+Sans rentrer dans les détails, voici le poids de différents formats[^poids]:
+
+* 1000 mots au format texte[^lipsum], 6.7 Ko
+* 1 minute de format audio avec une compression destructrice[^destr], 1 Mo
+* 1 minute de format audio avec une compression non-destructrice[^ndestr], 4 Mo
+* 1 minute de format audio sans compression, 8 Mo
+* 1 minute de format vidéo DVD avec un bon algo de compression, 10 Mo
+* 1 minute de format vidéo HD avec un bon algo de compression, 16 Mo
+
+Une comparaison que j'aime bien,
+la totalité des articles anglophones de Wikipedia représente environ 15 Go,
+soit l'équivalent d'une dizaine d'heures de vidéos HD sur votre plateforme
+de vidéo préférée.
+Même en conservant l'historique de modification et les discussions
+le poids de l'encyclopédie est
+seulement multiplié par dix[^comparaison].
+
+# La confidentialité et la vie privée
+Lors de l'utilisation de n'importe quelle plateforme,
+il est important de savoir ce que cette dernière va pouvoir récupérer
+comme informations et ce qu'elle en fera.
+C'est une chose assez aisée lors de l'utilisation de [logiciels libres][urlLL],
+mais c'est vite compliqué de savoir ce que fait un logiciel dont le code
+n'est pas connu.
+Je ne vais pas m'étendre ici sur les risques encourus,
+mais il est toujours bon de savoir qu'il y a des risques de fuites
+d'informations privées ou confidentielles lors de l'utilisation de chaque
+logiciel et que les logiciels libres sont les seuls qui permettent
+d'avoir des garanties à ce niveau-là.
+Pour les autres, la parole des développeurs et des développeuses est la
+seule chose sur laquelle nous pouvons nous appuyer.
+
+Il y a un autre point sur lequel porter son attention c'est la
+confiance que nous mettons dans le serveur qui héberge notre service.
+Par exemple, si j'héberge mon serveur *Mumble* sur une machine qui m'appartient,
+ou appartient à une association / société que je connais
+et à qui je fais confiance,
+j'ai de bonnes raisons de ne pas m'inquiéter.
+En revanche, le même serveur *Mumble* hébergé sur la machine de quelqu'un
+en qui je n'ai pas confiance peut être utilisé pour espionner ses utilisateurs
+et utilisatrices.
+
+C'est pourquoi je conseille **toujours** d'utiliser des logiciels libres
+et hébergés chez des personnes de confiance.
+
+# La charge sur les serveurs
+Comme tous les services,
+la téléconférence n'est pas gratuite en termes de consommation de ressources
+informatique.
+Les gros serveurs (Google, Microsoft, Zoom, etc.) ont les épaules pour
+tenir des centaines de salons, des milliers d'utilisateurs et d'utilisatrices.
+Ce n'est pas le cas de tout le monde et ça a un coût.
+Ce coût est répercuté sur les utilisateurs et les utilisatrices,
+soit par des abonnements (la bonne manière),
+soit par de la pub (la manière *meh*),
+soit en vendant des informations personnelles (la mauvaise manière).
+
+Les associations comme *Framasoft* ne peuvent pas absorber la charge
+générée par des crises comme celle du COVID-19,
+c'est pourquoi il est important de monter ses propres instances,
+de s'organiser en association,
+de rémunérer correctement les fournisseurs.
+Nous avons tendance à croire que tout est gratuit sur Internet,
+c'est un mythe, il nous faut réapprendre à payer pour des services
+que nous ne sommes pas capables de mettre en place.
+
+[^lipsum]: Générés par [Lorem Ipsum](https://www.lipsum.com),
+	une suite de mots sans signification utilisée pour calibrer une mise en page.
+[^destr]: La compression destructrice est utilisée entre autres par les formats
+	*mp3* et *ogg*. Elle supprime une partie des informations jugées pas ou peu
+	pertinentes pour l'oreille humaine.
+[^ndestr]: La compression non-destructrice ne supprime aucune information.
+	Dans le monde audio il y a les formats *flac* et *alac* par exemple.
+	Le format *zip* est un format non-destructeur, une fois l'archive
+	décompressée, tous les documents s'y trouvant sont retrouvés intacts.
+[^poids]: Les outils de compression sont extrêmement dépendants du fichier
+	source, les poids donnés ici sont uniquement indicatifs.
+[^comparaison]: On peut voir ici également l'effet de la compression
+	sur du texte, la totalité de Wikipedia,
+	articles et suivi des modifications inclus,
+	en date du 2 juin 2015, représentait environ 100 Go alors
+	que la version non-compressée représente 10 To, à savoir 100 fois plus.
+	[Source Wikipedia][wikiSize]
+[^limitPart]: La limitation du nombre de participant·e·s me paraît largement
+	suffisante. Le but est d'avoir des interactions, à plus de 100 personnes
+	cela commence à devenir difficile.
+
+[urlSkype]: https://www.skype.com/ "Website de Skype"
+[urlMumble]: https://www.mumble.com/ "Website de Mumble"
+[urlTS]: https://teamspeak.com/ "Website de TeamSpeak"
+[urlDiscord]: https://discordapp.com/ "Website de Discord"
+[urlZoom]: https://www.zoom.us/ "Website de Zoom"
+[urlJitsi]: https://jitsi.org/ "Website de Jitsi"
+[urlBBB]: https://bigbluebutton.org/ "Website de BigBlueButton"
+[urlNextcloud]: https://nextcloud.com/ "Website de Nextcloud"
+[urlLL]: https://fr.wikipedia.org/wiki/Logiciel_libre
+	"Wikipedia - Logiciel libre"
+[framasoft]: https://framasoft.org "Site de Framasoft"
+[framatalk]: https://framatalk.org "Site de Framatalk"
+
+[wikiSize]: https://en.wikipedia.org/wiki/Wikipedia:Size_of_Wikipedia#Size_of_the_English_Wikipedia_database
+	"[EN]La taille de Wikipedia"
+[wikiCompa]: https://en.wikipedia.org/wiki/Comparison_of_web_conferencing_software
+	"[EN]Page de comparatif des logiciels de conférence web Wikipedia"
+
+[skype]: /images/011-skype.svg "Logo de Skype"
+[mumble]: /images/011-mumble.svg "Logo de Mumble"
+[ts]: /images/011-teamspeak.svg "Logo de TeamSpeak"
+[discord]: /images/011-discord.svg "Logo de Discord"
+[zoom]: /images/011-zoom.svg "Logo de Zoom"
+[jitsi]: /images/011-jitsi.svg "Logo de Jitsi"
+[bbb]: /images/011-bigbluebutton.png "Logo de BigBlueButton"
+[nextcloud]: /images/011-nextcloud.svg "Logo de Nextcloud"

static/images/011-discord.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 245 240" style="enable-background:new 0 0 245 240;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#7289DA;}
+</style>
+<path class="st0" d="M104.4,103.9c-5.7,0-10.2,5-10.2,11.1s4.6,11.1,10.2,11.1c5.7,0,10.2-5,10.2-11.1
+	C114.7,108.9,110.1,103.9,104.4,103.9z M140.9,103.9c-5.7,0-10.2,5-10.2,11.1s4.6,11.1,10.2,11.1c5.7,0,10.2-5,10.2-11.1
+	S146.6,103.9,140.9,103.9z"/>
+<path class="st0" d="M189.5,20h-134C44.2,20,35,29.2,35,40.6v135.2c0,11.4,9.2,20.6,20.5,20.6h113.4l-5.3-18.5l12.8,11.9l12.1,11.2
+	l21.5,19V40.6C210,29.2,200.8,20,189.5,20z M150.9,150.6c0,0-3.6-4.3-6.6-8.1c13.1-3.7,18.1-11.9,18.1-11.9c-4.1,2.7-8,4.6-11.5,5.9
+	c-5,2.1-9.8,3.5-14.5,4.3c-9.6,1.8-18.4,1.3-25.9-0.1c-5.7-1.1-10.6-2.7-14.7-4.3c-2.3-0.9-4.8-2-7.3-3.4c-0.3-0.2-0.6-0.3-0.9-0.5
+	c-0.2-0.1-0.3-0.2-0.4-0.3c-1.8-1-2.8-1.7-2.8-1.7s4.8,8,17.5,11.8c-3,3.8-6.7,8.3-6.7,8.3c-22.1-0.7-30.5-15.2-30.5-15.2
+	c0-32.2,14.4-58.3,14.4-58.3c14.4-10.8,28.1-10.5,28.1-10.5l1,1.2c-18,5.2-26.3,13.1-26.3,13.1s2.2-1.2,5.9-2.9
+	c10.7-4.7,19.2-6,22.7-6.3c0.6-0.1,1.1-0.2,1.7-0.2c6.1-0.8,13-1,20.2-0.2c9.5,1.1,19.7,3.9,30.1,9.6c0,0-7.9-7.5-24.9-12.7l1.4-1.6
+	c0,0,13.7-0.3,28.1,10.5c0,0,14.4,26.1,14.4,58.3C181.5,135.4,173,149.9,150.9,150.6z"/>
+</svg>

static/images/011-nextcloud.svg

@@ -0,0 +1,103 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 133.89203 94.627347"
+   enable-background="new 0 0 196.6 72"
+   xml:space="preserve"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="nextcloud-logo-white-transparent.svg"
+   width="133.89201"
+   height="94.62735"
+   inkscape:export-filename="nextcloud-logo-white-transparent.png"
+   inkscape:export-xdpi="300.09631"
+   inkscape:export-ydpi="300.09631"><metadata
+     id="metadata20"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs18" /><sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="2560"
+     inkscape:window-height="1359"
+     id="namedview16"
+     showgrid="false"
+     inkscape:zoom="4"
+     inkscape:cx="43.021274"
+     inkscape:cy="53.386932"
+     inkscape:current-layer="Layer_1"
+     fit-margin-top="10"
+     fit-margin-left="10"
+     fit-margin-right="10"
+     fit-margin-bottom="10"
+     inkscape:window-x="0"
+     inkscape:window-y="240"
+     inkscape:window-maximized="1"
+     units="px"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:snap-bbox-midpoints="true"
+     inkscape:snap-page="true" /><path
+     style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#0082c9;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:5.56589985;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+     d="m 67.032801,9.9999701 c -11.80525,0 -21.81118,8.0031799 -24.91235,18.8465899 -2.69524,-5.75151 -8.53592,-9.78093 -15.26337,-9.78093 -9.25183,0 -16.85708,7.60525 -16.85708,16.85708 0,9.25182 7.60525,16.86054 16.85708,16.86054 6.72745,0 12.56813,-4.03188 15.26337,-9.78439 3.10117,10.84422 13.1071,18.85006 24.91235,18.85006 11.71795,0 21.67286,-7.8851 24.85334,-18.60701 2.74505,5.62192 8.513439,9.54134 15.145329,9.54134 9.25183,0 16.86055,-7.60872 16.86055,-16.86054 0,-9.25183 -7.60872,-16.85708 -16.86055,-16.85708 -6.63189,0 -12.400279,3.91696 -15.145329,9.53788 C 88.705661,17.88243 78.750751,9.9999701 67.032801,9.9999701 Z m 0,9.8954999 c 8.91163,0 16.03073,7.11564 16.03073,16.02724 0,8.9116 -7.1191,16.03071 -16.03073,16.03071 -8.91158,0 -16.02722,-7.11911 -16.02722,-16.03071 0,-8.9116 7.11564,-16.02724 16.02722,-16.02724 z m -40.17572,9.06567 c 3.90437,0 6.96504,3.05718 6.96504,6.96157 0,3.90438 -3.06067,6.96504 -6.96504,6.96504 -3.90439,0 -6.96158,-3.06066 -6.96158,-6.96504 0,-3.90439 3.05719,-6.96157 6.96158,-6.96157 z m 80.174389,0 c 3.9044,0 6.96504,3.05718 6.96504,6.96157 0,3.90438 -3.06066,6.96504 -6.96504,6.96504 -3.90437,0 -6.96156,-3.06066 -6.96156,-6.96504 0,-3.90439 3.05721,-6.96157 6.96156,-6.96157 z"
+     id="XMLID_107_"
+     inkscape:connector-curvature="0" /><g
+     id="g4571"
+     transform="matrix(0.47038519,0,0,0.47038519,21.389201,50.75959)"
+     style="opacity:1;fill:#0082c9;fill-opacity:1"><path
+       id="XMLID_121_"
+       d="m 37.669669,48.9 c 5.9,0 9.2,4.2 9.2,10.5 0,0.6 -0.5,1.1 -1.1,1.1 l -15.9,0 c 0.1,5.6 4,8.8 8.5,8.8 2.8,0 4.8,-1.2 5.8,-2 0.6,-0.4 1.1,-0.3 1.4,0.3 l 0.3,0.5 c 0.3,0.5 0.2,1 -0.3,1.4 -1.2,0.9 -3.8,2.4 -7.3,2.4 -6.5,0 -11.5,-4.7 -11.5,-11.5 0.1,-7.2 4.9,-11.5 10.9,-11.5 z m 6.1,9.4 c -0.2,-4.6 -3,-6.9 -6.2,-6.9 -3.7,0 -6.9,2.4 -7.6,6.9 l 13.8,0 z"
+       inkscape:connector-curvature="0"
+       style="fill:#0082c9;fill-opacity:1" /><path
+       id="XMLID_119_"
+       d="m 76.9,52.1 0,-2.5 0,-5.2 c 0,-0.7 0.4,-1.1 1.1,-1.1 l 0.8,0 c 0.7,0 1,0.4 1,1.1 l 0,5.2 4.5,0 c 0.7,0 1.1,0.4 1.1,1.1 l 0,0.3 c 0,0.7 -0.4,1 -1.1,1 l -4.5,0 0,11 c 0,5.1 3.1,5.7 4.8,5.8 0.9,0.1 1.2,0.3 1.2,1.1 l 0,0.6 c 0,0.7 -0.3,1 -1.2,1 -4.8,0 -7.7,-2.9 -7.7,-8.1 l 0,-11.3 z"
+       inkscape:connector-curvature="0"
+       style="fill:#0082c9;fill-opacity:1" /><path
+       id="XMLID_117_"
+       d="m 99.8,48.9 c 3.8,0 6.2,1.6 7.3,2.5 0.5,0.4 0.6,0.9 0.1,1.5 l -0.3,0.5 c -0.4,0.6 -0.9,0.6 -1.5,0.2 -1,-0.7 -2.9,-2 -5.5,-2 -4.8,0 -8.6,3.6 -8.6,8.9 0,5.2 3.8,8.8 8.6,8.8 3.1,0 5.2,-1.4 6.2,-2.3 0.6,-0.4 1,-0.3 1.4,0.3 l 0.3,0.4 c 0.3,0.6 0.2,1 -0.3,1.5 -1.1,0.9 -3.8,2.8 -7.8,2.8 -6.5,0 -11.5,-4.7 -11.5,-11.5 0.1,-6.8 5.1,-11.6 11.6,-11.6 z"
+       inkscape:connector-curvature="0"
+       style="fill:#0082c9;fill-opacity:1" /><path
+       id="XMLID_115_"
+       d="m 113.1,41.8 c 0,-0.7 -0.4,-1.1 0.3,-1.1 l 0.8,0 c 0.7,0 1.8,0.4 1.8,1.1 l 0,23.9 c 0,2.8 1.3,3.1 2.3,3.2 0.5,0 0.9,0.3 0.9,1 l 0,0.7 c 0,0.7 -0.3,1.1 -1.1,1.1 -1.8,0 -5,-0.6 -5,-5.4 l 0,-24.5 z"
+       inkscape:connector-curvature="0"
+       style="fill:#0082c9;fill-opacity:1" /><path
+       id="XMLID_112_"
+       d="m 133.6,48.9 c 6.4,0 11.6,4.9 11.6,11.4 0,6.6 -5.2,11.6 -11.6,11.6 -6.4,0 -11.6,-5 -11.6,-11.6 0,-6.5 5.2,-11.4 11.6,-11.4 z m 0,20.4 c 4.7,0 8.5,-3.8 8.5,-9 0,-5 -3.8,-8.7 -8.5,-8.7 -4.7,0 -8.6,3.8 -8.6,8.7 0.1,5.1 3.9,9 8.6,9 z"
+       inkscape:connector-curvature="0"
+       style="fill:#0082c9;fill-opacity:1" /><path
+       id="XMLID_109_"
+       d="m 183.5,48.9 c 5.3,0 7.2,4.4 7.2,4.4 l 0.1,0 c 0,0 -0.1,-0.7 -0.1,-1.7 l 0,-9.9 c 0,-0.7 -0.3,-1.1 0.4,-1.1 l 0.8,0 c 0.7,0 1.8,0.4 1.8,1.1 l 0,28.5 c 0,0.7 -0.3,1.1 -1,1.1 l -0.7,0 c -0.7,0 -1.1,-0.3 -1.1,-1 l 0,-1.7 c 0,-0.8 0.2,-1.4 0.2,-1.4 l -0.1,0 c 0,0 -1.9,4.6 -7.6,4.6 -5.9,0 -9.6,-4.7 -9.6,-11.5 -0.2,-6.8 3.9,-11.4 9.7,-11.4 z m 0.1,20.4 c 3.7,0 7.1,-2.6 7.1,-8.9 0,-4.5 -2.3,-8.8 -7,-8.8 -3.9,0 -7.1,3.2 -7.1,8.8 0.1,5.4 2.9,8.9 7,8.9 z"
+       inkscape:connector-curvature="0"
+       style="fill:#0082c9;fill-opacity:1" /><path
+       sodipodi:nodetypes="ssssssssssscccccsss"
+       style="fill:#0082c9;fill-opacity:1"
+       inkscape:connector-curvature="0"
+       d="m 1,71.4 0.8,0 c 0.7,0 1.1,-0.4 1.1,-1.1 l 0,-21.472335 C 2.9,45.427665 6.6,43 10.8,43 c 4.2,0 7.9,2.427665 7.9,5.827665 L 18.7,70.3 c 0,0.7 0.4,1.1 1.1,1.1 l 0.8,0 c 0.7,0 1,-0.4 1,-1.1 l 0,-21.6 c 0,-5.7 -5.7,-8.5 -10.9,-8.5 l 0,0 0,0 0,0 0,0 C 5.7,40.2 0,43 0,48.7 l 0,21.6 c 0,0.7 0.3,1.1 1,1.1 z"
+       id="XMLID_103_" /><path
+       style="fill:#0082c9;fill-opacity:1"
+       inkscape:connector-curvature="0"
+       d="m 167.9,49.4 -0.8,0 c -0.7,0 -1.1,0.4 -1.1,1.1 l 0,12.1 c 0,3.4 -2.2,6.5 -6.5,6.5 -4.2,0 -6.5,-3.1 -6.5,-6.5 l 0,-12.1 c 0,-0.7 -0.4,-1.1 -1.1,-1.1 l -0.8,0 c -0.7,0 -1,0.4 -1,1.1 l 0,12.9 c 0,5.7 4.2,8.5 9.4,8.5 l 0,0 c 0,0 0,0 0,0 0,0 0,0 0,0 l 0,0 c 5.2,0 9.4,-2.8 9.4,-8.5 l 0,-12.9 c 0.1,-0.7 -0.3,-1.1 -1,-1.1 z"
+       id="XMLID_102_" /><path
+       inkscape:connector-curvature="0"
+       id="path4165-9"
+       d="m 68.908203,49.235938 c -0.244942,0.0391 -0.480102,0.202589 -0.705078,0.470703 l -4.046875,4.824218 -3.029297,3.609375 -4.585937,-5.466796 -2.488282,-2.966797 c -0.224975,-0.268116 -0.479748,-0.414718 -0.74414,-0.4375 -0.264393,-0.02278 -0.538524,0.07775 -0.806641,0.302734 l -0.613281,0.513672 c -0.536232,0.449952 -0.508545,0.948144 -0.05859,1.484375 l 4.048828,4.824219 3.357422,4 -4.916016,5.857421 c -0.0037,0.0044 -0.0061,0.0093 -0.0098,0.01367 l -2.480469,2.955078 c -0.449952,0.536232 -0.399531,1.100832 0.136719,1.550782 l 0.613281,0.511718 c 0.536231,0.449951 1.022704,0.33701 1.472656,-0.199218 l 4.046875,-4.824219 3.029297,-3.609375 4.585938,5.466797 c 0.003,0.0036 0.0067,0.0062 0.0098,0.0098 l 2.480469,2.957032 c 0.44995,0.536231 1.012595,0.584735 1.548828,0.134765 l 0.613282,-0.513671 c 0.536231,-0.449952 0.508544,-0.948144 0.05859,-1.484376 l -4.048828,-4.824218 -3.357422,-4 4.916016,-5.857422 c 0.0037,-0.0044 0.0061,-0.0093 0.0098,-0.01367 l 2.480469,-2.955078 c 0.449952,-0.53623 0.399532,-1.10083 -0.136719,-1.550781 l -0.613281,-0.513672 c -0.268115,-0.224976 -0.522636,-0.308636 -0.767578,-0.269531 z"
+       style="fill:#0082c9;fill-opacity:1" /></g></svg>

static/images/011-skype.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><title>Skype_64x</title><circle cx="21.5" cy="21.5" r="14.5" fill="#28a8ea"/><circle cx="42.5" cy="42.5" r="14.5" fill="#28a8ea"/><circle cx="32" cy="32" r="24" fill="#28a8ea"/><path d="M25.77592,31.54432a7.29374,7.29374,0,0,1-2.28723-2.415,6.67189,6.67189,0,0,1-.78349-3.3355,5.99471,5.99471,0,0,1,1.41226-4.03715A8.501,8.501,0,0,1,27.79893,19.296a14.21815,14.21815,0,0,1,4.82059-.81108,18.72034,18.72034,0,0,1,3.20766.24605,11.57926,11.57926,0,0,1,2.22351.57416,4.31175,4.31175,0,0,1,1.74061,1.11177,2.25009,2.25009,0,0,1,.53761,1.49465,2.1653,2.1653,0,0,1-.565,1.55841,1.88118,1.88118,0,0,1-1.42159.5924,2.559,2.559,0,0,1-1.057-.23707,19.13418,19.13418,0,0,0-2.51525-.92035,9.13,9.13,0,0,0-2.42384-.3007,5.53217,5.53217,0,0,0-3.0346.77456,2.52514,2.52514,0,0,0-1.21193,2.26921,2.28147,2.28147,0,0,0,.62869,1.59478,5.73381,5.73381,0,0,0,1.69507,1.21207q1.06626.52886,3.18023,1.40349a3.29562,3.29562,0,0,1,.45571.18231,22.58883,22.58883,0,0,1,3.9366,2.02313,7.93733,7.93733,0,0,1,2.424,2.4879,6.5598,6.5598,0,0,1,.87481,3.45388,6.94754,6.94754,0,0,1-1.21209,4.16482A7.20362,7.20362,0,0,1,36.693,44.6857a14.28813,14.28813,0,0,1-5.09406.82934,16.04982,16.04982,0,0,1-6.94368-1.31234,3.77906,3.77906,0,0,1-1.43069-1.11178,2.49947,2.49947,0,0,1-.4648-1.51289,1.97735,1.97735,0,0,1,.61043-1.54015,2.25168,2.25168,0,0,1,1.57647-.55589,4.02856,4.02856,0,0,1,1.8407.47386q1.05675.52889,1.66771.793a8.38192,8.38192,0,0,0,1.43986.4556,8.23265,8.23265,0,0,0,1.84963.19129,4.93708,4.93708,0,0,0,3.10757-.82919A2.73661,2.73661,0,0,0,35.9,38.29732a2.41166,2.41166,0,0,0-.656-1.65869,6.97453,6.97453,0,0,0-1.93178-1.40334q-1.276-.67429-3.59055-1.64043a22.24428,22.24428,0,0,1-3.94578-2.05054" fill="#fff" fill-rule="evenodd"/><path d="M26.03,7.73a14.15275,14.15275,0,0,0-1.94-.5A26.07514,26.07514,0,0,0,7.23,24.09a14.15918,14.15918,0,0,0,.5,1.94A10.98246,10.98246,0,0,0,8.4,27.7,23.94743,23.94743,0,0,1,27.7,8.4,10.9902,10.9902,0,0,0,26.03,7.73Z" fill-rule="evenodd" opacity="0.1"/><path d="M26.03,7.73a25.01918,25.01918,0,0,0-18.3,18.3A10.98246,10.98246,0,0,0,8.4,27.7,23.94743,23.94743,0,0,1,27.7,8.4,10.9902,10.9902,0,0,0,26.03,7.73Z" fill-rule="evenodd" opacity="0.1"/><path d="M56.27,37.97a10.98178,10.98178,0,0,0-.67-1.67A23.94736,23.94736,0,0,1,36.3,55.6a10.984,10.984,0,0,0,1.67.67,14.15275,14.15275,0,0,0,1.94.5A26.07514,26.07514,0,0,0,56.77,39.91,14.16142,14.16142,0,0,0,56.27,37.97Z" fill-rule="evenodd" opacity="0.1"/><path d="M55.6,36.3A23.94736,23.94736,0,0,1,36.3,55.6a10.984,10.984,0,0,0,1.67.67A25.01909,25.01909,0,0,0,56.27,37.97,10.98178,10.98178,0,0,0,55.6,36.3Z" fill-rule="evenodd" opacity="0.1"/></svg>

static/images/011-teamspeak.svg

@@ -0,0 +1,83 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   viewBox="0 0 122.13062 119.59734"
+   xml:space="preserve"
+   sodipodi:docname="011-teamspeak.svg"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   width="122.13062"
+   height="119.59734"><metadata
+   id="metadata39"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs37" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1920"
+   inkscape:window-height="1025"
+   id="namedview35"
+   showgrid="false"
+   inkscape:zoom="0.832"
+   inkscape:cx="125.20192"
+   inkscape:cy="59.781477"
+   inkscape:window-x="0"
+   inkscape:window-y="31"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="g32"
+   fit-margin-top="0"
+   fit-margin-left="0"
+   fit-margin-right="0"
+   fit-margin-bottom="0" />
+<style
+   type="text/css"
+   id="style2">
+	.st0{fill:#1C2437;}
+</style>
+<g
+   id="g32"
+   transform="translate(-1,-1.1841384)">
+	
+	<path
+   class="st0"
+   d="M 1.2,65 C 1.4,63.1 1,60.9 1.4,58.6 2,54.9 4.1,52 7.4,50.4 8.2,50 8.6,49.6 8.8,48.5 c 1.4,-8 4.7,-15.4 9.5,-22 0.6,-0.8 1,-1.2 0.2,-2.3 C 17.7,23 18.3,21.7 19.1,20.7 25.9,13.1 33.9,7.5 43.4,4.4 66.2,-2.8 86.2,2.1 103.5,19 c 1.6,1.6 3.7,3.1 1.6,5.8 -0.4,0.4 0.2,0.8 0.6,1.2 4.9,6.8 8.2,14.4 9.7,22.6 0.2,0.8 0.8,1.2 1.4,1.6 4.1,2.1 6.2,5.6 6.2,10.3 0,4.1 0.4,8.2 -0.2,12.3 -1,6 -7,10.1 -12.8,8.8 -1.6,-0.4 -2.3,-1.6 -2.3,-3.3 0,-6.8 0.2,-13.6 0,-20.4 C 107.1,39.6 99.1,25.8 83.2,17 57,2.6 23,18.9 17.3,48.7 c -1,5.1 -0.8,10.5 -0.8,15.6 0,4.9 0,9.7 -0.2,14.6 0,1.6 -1,2.7 -2.9,2.7 C 5.9,82 1,77.3 1,69.7 1.2,68.5 1.2,67 1.2,65"
+   id="path24"
+   inkscape:connector-curvature="0"
+   style="fill:#1c2437" />
+	<path
+   class="st0"
+   d="m 53.1,89 c 2.7,-1 4.7,-2.9 5.3,-6 C 59,79.9 55.5,75.6 50.8,71.1 45.9,66.4 39.5,61.4 36,59.6 c -5.1,-3.1 -9.9,-0.4 -10.9,5.6 -1.2,6.6 0,12.8 3.5,18.3 2.5,3.9 6,5.6 10.3,6 2.4,-0.1 12.1,0.4 14.2,-0.5"
+   id="path26"
+   inkscape:connector-curvature="0"
+   style="fill:#1c2437" />
+	<path
+   class="st0"
+   d="m 75.1,90.9 c 3.1,0.4 6,1 9.1,1.2 4.1,0.2 7.2,-1 9.5,-3.5 2.9,-3.1 4.3,-7 4.1,-11.1 -0.2,-4.3 -3.7,-6.8 -8.4,-6 -4.3,0.6 -8,2.5 -11.9,3.9 -3.5,1.4 -6.6,3.1 -9.1,5.3 -3.5,3.3 -1.6,7.8 3.9,9.5 0.7,0.3 1.7,0.5 2.8,0.7"
+   id="path28"
+   inkscape:connector-curvature="0"
+   style="fill:#1c2437" />
+	<path
+   class="st0"
+   d="m 107.8,87.2 c -0.6,-0.6 -1.6,-0.2 -2.1,0.6 -1.9,6 -10.7,26.1 -40.7,28.2 -35.4,2.5 18.9,10.1 34.4,-1.4 5.3,-4.1 11.3,-8.2 11.1,-20 0,-2.3 -1.1,-6.2 -2.7,-7.4"
+   id="path30"
+   inkscape:connector-curvature="0"
+   style="fill:#1c2437" />
+</g>
+</svg>

static/images/011-zoom.svg

@@ -0,0 +1 @@
+<svg width="85" height="20" xmlns="http://www.w3.org/2000/svg"><path d="M69.012 6.414c.324.559.43 1.195.465 1.91l.046.953v6.664l.047.954c.094 1.558 1.243 2.71 2.813 2.808l.949.047V9.277l.047-.953c.039-.707.144-1.355.473-1.918a3.806 3.806 0 0 1 6.59.012c.324.559.425 1.207.464 1.906l.047.95v6.667l.047.954c.098 1.566 1.238 2.718 2.813 2.808l.949.047V8.324a7.62 7.62 0 0 0-7.617-7.62 7.6 7.6 0 0 0-5.715 2.581A7.61 7.61 0 0 0 65.715.703c-1.582 0-3.05.48-4.266 1.309-.742-.828-2.402-1.309-3.355-1.309V19.75l.953-.047c1.594-.105 2.746-1.226 2.808-2.808l.051-.954V9.277l.047-.953c.04-.719.14-1.351.465-1.914a3.816 3.816 0 0 1 3.297-1.898 3.81 3.81 0 0 1 3.297 1.902zM3.809 19.704l.953.046h14.285L19 18.8c-.129-1.566-1.238-2.71-2.809-2.812l-.953-.047h-8.57l11.426-11.43-.047-.949C17.973 1.98 16.817.837 15.238.75l-.953-.043L0 .703l.047.953c.125 1.551 1.25 2.719 2.808 2.809l.954.047h8.57L.953 15.942l.047.953c.094 1.57 1.227 2.707 2.809 2.808zM54.355 3.491a9.523 9.523 0 0 1 0 13.469 9.53 9.53 0 0 1-13.472 0c-3.719-3.719-3.719-9.75 0-13.469a9.518 9.518 0 0 1 6.73-2.789 9.525 9.525 0 0 1 6.742 2.79zM51.66 6.188a5.717 5.717 0 0 1 0 8.082 5.717 5.717 0 0 1-8.082 0 5.717 5.717 0 0 1 0-8.082 5.717 5.717 0 0 1 8.082 0zM27.625.702a9.518 9.518 0 0 1 6.73 2.79c3.72 3.718 3.72 9.75 0 13.468a9.53 9.53 0 0 1-13.472 0c-3.719-3.719-3.719-9.75 0-13.469a9.518 9.518 0 0 1 6.73-2.789h.012zm4.035 5.484a5.717 5.717 0 0 1 0 8.083 5.717 5.717 0 0 1-8.082 0 5.717 5.717 0 0 1 0-8.082 5.717 5.717 0 0 1 8.082 0z" fill="#2D8CFF" fill-rule="evenodd"/></svg>