switching/social.html
2020-10-15 10:55:17 +03:00

377 lines
22 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE HTML>
<html>
<head profile="https://fedi.life">
<link rel="icon"
type="image/png"
href="favicon.png" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>У вас всегда есть выбор! — Соцсети</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/picnic.min.css">
<style>aside a.top {
font-size: 0;
position: fixed;
bottom: 0;
font-weight: bold;
width: 180px;
padding: .6em 0;
margin-bottom: 0;
border-radius: .3em .3em 0 0;
transition: all .3s ease;
}
aside a.top.visible {
font-size: 1em;
}
aside .links a.button {
text-align: left;
}
@media all and (max-width: 1000px) {
aside a.pseudo.top {
background: rgba(255, 255, 255, .8);
width: 100%;
left: 0;
text-align: center;
z-index: 100;
}
}
.documentation article > h2 {
margin: -2em 0 .6em;
padding: 3em 0 0;
line-height: 1;
}
.documentation article > h3 {
margin-bottom: .6em;
}
.documentation aside h2 {
margin-top: 0;
padding: 1.25em 0;
line-height: 1;
}
.documentation aside a.pseudo {
color: #0074D9;
margin: 0;
}
.documentation > section {
background: #fff;
text-align: left;
width: 90%;
max-width: 960px;
margin: 0 auto;
padding: 80px 0 0;
}
.documentation article > h1 {
margin: 0;
padding: 0.6em 0;
font-size: 2em;
line-height: 1.5;
}
.documentation aside a.button {
display: block;
}
.documentation pre[class*="language-"] {
margin-top: 10px;
margin-bottom: 40px;
}
.documentation .index pre {
margin: 0;
font-size: .9em;
}
</style>
</head>
<body>
<nav class="fedi">
<a href="https://fedi.life" class="brand">
<img class="logo" src="images/logo.png" />
<span>Fedi.Life</span>
</a>
<!-- responsive-->
<input id="bmenub" type="checkbox" class="show">
<label for="bmenub" class="burger pseudo button">menu</label>
<div class="menu">
<a href="mail.html" class="pseudo button">Почта</a>
<a href="im.html" class="pseudo button">Мессенджеры</a>
<a href="im.html" class="pseudo button">Соцсети</a>
<a href="search.html" class="pseudo button">Поисковики</a>
<a href="extra.html" class="pseudo button">Документы и агитматериалы</a>
<a href="info.html" class="pseudo button">Подробнее</a>
</div>
</nav>
<main id="home" class="documentation">
<section class="flex">
<article class="four-fifth-1000">
<header><h3>Социальные сети</h3></header>
<p>Ключевой инструмент взаимодействия в современной Сети. Познакомьтесь с альтернативами</p>
</article>
<article class="card four-fifth-1000">
<header>#вместотвиттера Mastodon</header>
<center><label for="modal_md"><img src="images/mastodon2.png" width="80%"></label> </center>
<div class="modal">
<input id="modal_md" type="checkbox" />
<label for="modal_md" class="overlay"></label>
<article>
<header>
<h3>Mastodon</h3>
<label for="modal_md" class="close">&times;</label>
</header>
<section class="content">
<img src="images/mastodon2.png" width="100%">
</section>
</article>
</div>
<span>На данный момент — самая популярная из этичных социальных сетей с миллионами пользователей.
Больше всего напоминает Твиттер, только с большим лимитом символов и более гибким интерфейсом.
</span>
<p>
Ваша учётная запись в Мастодоне позволяет общаться с пользователями
других распределённых сетей — например Friendica (см. ниже), PixelFed
(взамен принадлежащего корпорации Facebook сервиса Instagram), PeerTube (аналог YouTube) и многих других.
Это объединение альтернативных соцсетей называется Fediverse (Федивёрс)
(от federation - федерация и universe - вселенная).
</p>
<p>
Вы можете зайти в Мастодон, зарегистрировавшись на одном из сайтов, указанных ниже,
можете использовать эту учётную запись в одном из приложений Mastodon для вашего мобильника.
</p>
</span>
<center>
<div class="tabs two">
<input id='tab-1' type='radio' name='tabgroupB' checked />
<label class="pseudo button toggle" for="tab-1">Где зарегистрироваться</label>
<input id='tab-2' type='radio' name='tabgroupB'>
<label class="pseudo button toggle" for="tab-2">Приложения</label>
<div class="row">
<div><center><button class="warning"><a href="https://phreedom.tk">Свобода</a></button>
<button class="warning"><a href="https://mastodon.ml">Русский Мастодон</a></button>
<button class="warning"><a href="https://quey.org">Quey</a></button>
<button class="warning"><a href="https://lor.sh">LOR.sh</a></button>
<button class="warning"><a href="https://mstdn.netwhood.online/">Network Neighborhood</a></button>
</center></div>
<div><center><button class="pseudo"><a href="https://play.google.com/store/apps/details?id=app.fedilab.android"><img src="images/google.png">Fedilab (платно)</a></button><br>
<button class="pseudo"><a href="https://f-droid.org/packages/fr.gouv.etalab.mastodon/"><img src="images/fdroid.png">Fedilab (бесплатно)</a></button>
<button class="pseudo"><a href="https://itunes.apple.com/app/toot/id1229021451"><img src="images/apple.png">Toot!</a></button>
<button class="pseudo"><a href="https://itunes.apple.com/app/amarok-for-mastodon/id1214116200"><img src="images/apple.png">Amaroq</a></button>
</center></div>
</div>
</div>
</center>
</article>
<article class="card four-fifth-1000">
<header>#вместоВК Friendica</header>
<center><label for="modal_fr"><img src="images/friendica.png" width="80%"></label> </center>
<div class="modal">
<input id="modal_fr" type="checkbox" />
<label for="modal_fr" class="overlay"></label>
<article>
<header>
<h3>Friandica</h3>
<label for="modal_fr" class="close">&times;</label>
</header>
<section class="content">
<img src="images/friendica.png" width="100%">
</section>
</article>
</div>
<span>
<p> Альтернатива Вконтакте и Facebook, с теми же фишками, включая события и фотоальбомы</p>
<p>
Также, как и Мастодон, Friendica создана из множества мелких сайтов,
связанных воедино посредством федерации. Мелкие сайты, составляющие
Френдику, называются "нодами".
</p>
<p>
Френдика также связана с Мастодоном, Диаспорой, PixelFed, PeerTube и
всеми остальными альтернативными соцсетями, так что завести друзей
в этих сетях не составит труда.
</p>
</span>
<center>
<div class="tabs two">
<input id='tab-21' type='radio' name='tabgroupC' checked />
<label class="pseudo button toggle" for="tab-21">Где зарегистрироваться</label>
<input id='tab-22' type='radio' name='tabgroupC'>
<label class="pseudo button toggle" for="tab-22">Приложения</label>
<div class="row">
<div><center><button class="warning"><a href="https://nerdica.net">Nerdica</a></button>
<button class="warning"><a href="https://friendica.xyz">Friendica.xyz</a></button>
<button class="warning"><a href="https://venera.social">Venera</a></button>
<button class="warning"><a href="https://loma.ml">Loma</a></button>
</center></div>
<div><center><button class="pseudo"><a href="https://play.google.com/store/apps/details?id=app.fedilab.android"><img src="images/google.png">Fedilab (платно)</a></button><br>
<button class="pseudo"><a href="https://f-droid.org/packages/fr.gouv.etalab.mastodon/"><img src="images/fdroid.png">Fedilab (бесплатно)</a></button>
</center></div>
</div>
</div>
</center>
</article>
<article class="card four-fifth-1000">
<header>#вместоInstagram PixelFed</header>
<center><label for="modal_pf"><img src="images/pixelfed.png" width="80%"></label> </center>
<div class="modal">
<input id="modal_pf" type="checkbox" />
<label for="modal_pf" class="overlay"></label>
<article>
<header>
<h3>PixelFed</h3>
<label for="modal_pf" class="close">&times;</label>
</header>
<section class="content">
<img src="images/pixelfed.png" width="100%">
</section>
</article>
</div>
<span>
<p>Открытая распределённая альтернатива Instagram — с фильтрами, комментариями, лайками, репостами и так далее, но без рекламы и слежки.</p>
<p>
Сеть состоит из мелких независимых сайтов, способных общаться между собой,
так что вы можете свободно фолловить людей с других сайтов PixelFed,
зарегистрировавшись на любом из них. И не важно, на маленьком или
крупном сервере вы зарегистрируетесь — вся сеть в вашем распоряжении.
Любые другие сети (например, Mastodon и Friendica) также доступны для взаимодействия
</p>
<p>
В отличие от Instagram, для использования PixelFed не нужно специальное приложение — оно работает
в любом браузере на компьютере, телефоне или планшете.
</p>
</span>
<center>
<div class="tabs two">
<input id='tab-31' type='radio' name='tabgroupD' checked />
<label class="pseudo button toggle" for="tab-31">Где зарегистрироваться</label>
<input id='tab-32' type='radio' name='tabgroupD'>
<label class="pseudo button toggle" for="tab-32">Приложения</label>
<div class="row">
<div><center><button class="warning"><a href="https://pix.phreedom.tk">Phreedom Pix</a></button>
<button class="warning"><a href="https://pxlfd.me">pxlfd.me</a></button>
<button class="warning"><a href="https://pixelfed.tokyo">Tokyo</a></button>
<button class="warning"><a href="https://pixelfed.se">Pixelfed.se</a></button>
</center></div>
<div><center><button class="pseudo"><a href="https://play.google.com/store/apps/details?id=app.fedilab.android"><img src="images/google.png">Fedilab (платно)</a></button><br>
<button class="pseudo"><a href="https://f-droid.org/packages/fr.gouv.etalab.mastodon/"><img src="images/fdroid.png">Fedilab (бесплатно)</a></button>
</center></div>
</div>
</div>
</center>
</article>
<article class="card four-fifth-1000">
<header>#вместоyoutube PeerTube</header>
<center><label for="modal_pt"><img src="images/peertube.png" width="80%"></label> </center>
<div class="modal">
<input id="modal_pt" type="checkbox" />
<label for="modal_pt" class="overlay"></label>
<article>
<header>
<h3>PeerTube</h3>
<label for="modal_pt" class="close">&times;</label>
</header>
<section class="content">
<img src="images/peertube.png" width="100%">
</section>
</article>
</div>
<span><p>
PeerTube — открытая распределённая альтернатива YouTube (принадлежит Google).
Это соцсеть, приспособленная для распространения видео, без рекламы и слежки.
</p>
<p>
В отличие от YouTube, PeerTube состоит из множества независимых сайтов,
способных общаться между собой. Не имеет значения,
на каком вы зарегистрируетесь — вся сеть в вашем распоряжении.
Плюс вы можете встроить видео с PeerTube куда угодно (см. пример выше).
</p>
<p>
Ну и вишенкой на торте — PeerTube также использует стандарт ActivityPub,
и подписаться на ваш канал там смогут все пользователи PeerTube, Mastodon,
Friendica и так далее.
</p>
</span>
<center>
<div class="tabs two">
<input id='tab-41' type='radio' name='tabgroupE' checked />
<label class="pseudo button toggle" for="tab-41">Где зарегистр
ироваться</label>
<input id='tab-42' type='radio' name='tabgroupE'>
<label class="pseudo button toggle" for="tab-42">Приложения</label>
<div class="row">
<div><center><button class="warning"><a href="https://video.qoto.org">QOTO Peertube</a></button>
<button class="warning"><a href="https://video.tedomum.net">video.tedomum.net</a></button>
<button class="warning"><a href="https://peertube.linuxrocks.online">peertube.linuxrocks.online</a></button>
<button class="warning"><a href="https://share.tube">share.tube</a></button>
</center></div>
<div><center>
<div><center><button class="pseudo"><a href="https://play.google.com/store/apps/details?id=app.fedilab.
android"><img src="images/google.png">Fedilab (платно)</a></button><br>
<button class="pseudo"><a href="https://f-droid.org/packages/fr.gouv.etalab.mastodon/"><img src="images
/fdroid.png">Fedilab (бесплатно)</a></button>
<div><center><button class="pseudo"><a href="https://f-droid.org/en/packages/net.schueller.peertube/"><img src="images/fdroid.png">Thorium</a></button><br>
<button class="pseudo"><a href="https://https://play.google.com/store/apps/details?id=net.schueller.peertube"><img src="images/google.png">Peertube Player</a></button>
</center></div>
</div>
</div>
</center>
</article>
</article>
</article>
</section>
</main>
<section>
<hr>
<center>
<a href="https://tolstoevsky.ml"><img src="banner.gif"></a>&nbsp;|&nbsp;Created with <a href="https://picnicss.com/">PicniCSS</a>
</center>
</section>
</body>
</html>