Browse Source

some styling, some screenshots

remotes/1596227858679827591/master
Blue 2 years ago
parent
commit
1ad1cfe592
  1. 19
      im.html
  2. BIN
      images/conversations.jpg
  3. BIN
      images/diaspora.png
  4. BIN
      images/dino.png
  5. BIN
      images/frendica.png
  6. BIN
      images/kaidan.png
  7. 0
      images/koshka.jpg
  8. BIN
      images/mastodon.png
  9. BIN
      images/movim.png
  10. BIN
      images/pixelfed.png
  11. BIN
      images/quicksy.png
  12. BIN
      images/signal.jpg
  13. 20
      index.html
  14. 10
      info.html
  15. 14
      mail.html
  16. 26
      main.css
  17. 15
      search.html
  18. 21
      social.html

19
im.html

@ -8,9 +8,19 @@
</head>
<body>
<div class="mainContainer">
<nav id="header">
<a href="index.html"><div>Главная</div></a>
<a href="social.html"><div>Социальные сети</div></a>
<a class="current" href="im.html"><div>Сервисы мгновенных сообщений</div></a>
<a href="mail.html"><div>Почтовые сервисы</div></a>
<a href="search.html"><div>Поисковые сервисы</div></a>
<a href="info.html"><div>Зачем?</div></a>
</nav>
<h1>Сервисы мгновенных сообщений</h1>
<h2>Альтернативы WhatsApp, Viber, Skype</h2>
<h3 id="xmpp">XMPP (он же Jabber)</h3>
<img src="images/conversations.jpg" class="margin" style="float: right;" width="560">
<p>
Широко используемый свободный и открытый стандарт интернет-сообщений.
Весьма прост в использовании — регистрируем аккаунт, устанавливаем приложение.
@ -29,6 +39,7 @@
<li><a href="https://404.city">404.city</a></li>
<li><a href="https://jabber.ru">jabber.ru</a></li>
</ul>
<img src="images/kaidan.png" class="margin" style="float: right;" width="560">
<h4>Приложения</h4>
<ul>
<li>
@ -64,6 +75,8 @@
</ul>
</li>
<li>
<img src="images/movim.png" class="margin" style="float: right;" width="560">
<h5>Mac</h5>
<ul>
<li><a href="https://apps.apple.com/us/app/beagleim-by-tigase-inc/id1445349494">BeagleIM</a></li>
@ -78,8 +91,10 @@
</ul>
</li>
</ul>
<hr style="clear: right">
<h3 id="quicksy">Quicksy</h3>
<img src="images/quicksy.png" class="margin" style="float: right;">
<p>
Очень простой в использовании чатик. Регистрация по номеру телефона.
</p>
@ -95,7 +110,9 @@
</ul>
</li>
</ul>
<hr style="clear: right">
<img src="images/signal.jpg" class="margin" style="float: right;" width="560">
<h3 id="signal">Signal</h3>
<p>
Популярное приложение для обмена сообщениями, голосовых- и видеозвонков, для регистрации нужен номер телефона.
@ -125,6 +142,7 @@
</ul>
</li>
</ul>
<hr style="clear: right">
<h3 id="jami">Jami (ранее Ring)</h3>
<p>
@ -158,6 +176,7 @@
</ul>
</li>
</ul>
<hr style="clear: right">
<h3 id="jitsi">Jitsi Meet</h3>
<p>

BIN
images/conversations.jpg

After

Width: 600  |  Height: 330  |  Size: 32 KiB

BIN
images/diaspora.png

After

Width: 1453  |  Height: 769  |  Size: 146 KiB

BIN
images/dino.png

After

Width: 2066  |  Height: 1122  |  Size: 332 KiB

BIN
images/frendica.png

After

Width: 1280  |  Height: 960  |  Size: 522 KiB

BIN
images/kaidan.png

After

Width: 824  |  Height: 632  |  Size: 219 KiB

0
koshka.jpg → images/koshka.jpg

Before

Width: 960  |  Height: 779  |  Size: 68 KiB

After

Width: 960  |  Height: 779  |  Size: 68 KiB

BIN
images/mastodon.png

After

Width: 1024  |  Height: 573  |  Size: 700 KiB

BIN
images/movim.png

After

Width: 1146  |  Height: 608  |  Size: 53 KiB

BIN
images/pixelfed.png

After

Width: 1174  |  Height: 981  |  Size: 175 KiB

BIN
images/quicksy.png

After

Width: 174  |  Height: 310  |  Size: 35 KiB

BIN
images/signal.jpg

After

Width: 664  |  Height: 591  |  Size: 82 KiB

20
index.html

@ -9,18 +9,18 @@
<body>
<div class="mainContainer">
<nav id="header">
<a href="index.html">Главная</a>
<a href="social.html">Социальные сети</a>
<a href="im.html">Сервисы мгновенных сообщений</a>
<a href="mail.html">Почтовые сервисы</a>
<a href="search.html">Поисковые сервисы</a>
<a href="info.html">Зачем?</a>
<a class="current" href="index.html"><div>Главная</div></a>
<a href="social.html"><div>Социальные сети</div></a>
<a href="im.html"><div>Сервисы мгновенных сообщений</div></a>
<a href="mail.html"><div>Почтовые сервисы</div></a>
<a href="search.html"><div>Поисковые сервисы</div></a>
<a href="info.html"><div>Зачем?</div></a>
</nav>
<h1>
Альтернативы есть.
Выбор есть.
Ваш выбор важен.
Вы важны
Альтернативы - есть.<br>
Выбор - есть.<br>
Ваш выбор - важен.<br>
Вы - важны!<br>
</h1>
</div>
</body>

10
info.html

@ -8,9 +8,17 @@
</head>
<body>
<div class="mainContainer">
<nav id="header">
<a href="index.html"><div>Главная</div></a>
<a href="social.html"><div>Социальные сети</div></a>
<a href="im.html"><div>Сервисы мгновенных сообщений</div></a>
<a href="mail.html"><div>Почтовые сервисы</div></a>
<a href="search.html"><div>Поисковые сервисы</div></a>
<a class="current" href="info.html"><div>Зачем?</div></a>
</nav>
<h1>Fediverse или как стать Неуловимым Джо</h1>
<h3>Чем плохи централизованные соцсети и сервисы? Почему ими опасно пользоваться? Почему они никогда не станут лучше? И - главное - что со всем этим делать?</h3>
<img src="koshka.jpg" style="float: left; width: 500px; margin: 20px"/>
<img src="images/koshka.jpg" class="margin" style="float: left; width: 500px"/>
<p>
Знакомая картинка? Смешно или грустно? Постоянное опасение, что за любое неверно истолкованное
слово "за вами придут", но с людьми в сети общаться хочется, хочется постить котиков и смешные

14
mail.html

@ -8,6 +8,15 @@
</head>
<body>
<div class="mainContainer">
<nav id="header">
<a href="index.html"><div>Главная</div></a>
<a href="social.html"><div>Социальные сети</div></a>
<a href="im.html"><div>Сервисы мгновенных сообщений</div></a>
<a class="current" href="mail.html"><div>Почтовые сервисы</div></a>
<a href="search.html"><div>Поисковые сервисы</div></a>
<a href="info.html"><div>Зачем?</div></a>
</nav>
<h1>Почтовые сервисы</h1>
<h2>Альтернативы Gmail/Яндекс.почте/mail.ru</h2>
@ -51,6 +60,7 @@
</ul>
</li>
</ul>
<hr style="clear: right">
<h3 id="proton">ProtonMail</h3>
<p>
@ -82,6 +92,7 @@
</ul>
</li>
</ul>
<hr style="clear: right">
<h3 id="posteo">Posteo</h3>
<p>
@ -120,6 +131,7 @@
</ul>
</li>
</ul>
<hr style="clear: right">
<h3 id="thexyz">Thexyz</h3>
<p>
@ -148,6 +160,7 @@
</ul>
</li>
</ul>
<hr style="clear: right">
<h3 id="kolab">Kolab now</h3>
<p>
@ -158,6 +171,7 @@
<ul>
<li><a href="https://kolabnow.com/">kolabnow.com</a></li>
</ul>
<hr style="clear: right">
<h3 id="mailbox">Mailbox.org</h3>
<p>

26
main.css

@ -28,12 +28,38 @@ nav > a {
font-weight: bold;
color: inherit;
text-align: center;
background-color: transparent;
transition: background-color 0.2s;
}
nav > a.current {
background-color: #5db9ef;
}
nav > a:hover {
background-color: rgba(0, 0, 0, 0.2);
}
nav > a.current:hover {
background-color: #5397ca;
}
nav > a:visited {
color: inherit;
}
.margin {
margin: 15px;
}
nav > a > div {
position: relative;
top: 50%;
transform: translateY(-50%);
overflow: hidden;
}
.thumbnails {
text-align: center;
overflow: hidden;

15
search.html

@ -8,6 +8,14 @@
</head>
<body>
<div class="mainContainer">
<nav id="header">
<a href="index.html"><div>Главная</div></a>
<a href="social.html"><div>Социальные сети</div></a>
<a href="im.html"><div>Сервисы мгновенных сообщений</div></a>
<a href="mail.html"><div>Почтовые сервисы</div></a>
<a class="current" href="search.html"><div>Поисковые сервисы</div></a>
<a href="info.html"><div>Зачем?</div></a>
</nav>
<h1>Поисковые сервисы</h1>
<h3 id="duckduckgo">DuckDuckGo</h3>
<p>
@ -41,6 +49,7 @@
</ul>
</li>
</ul>
<hr style="clear: right">
<h3 id="qwant">Qwant</h3>
<p>
@ -71,6 +80,7 @@
</ul>
</li>
</ul>
<hr style="clear: right">
<h3 id="searx">Searx</h3>
<p>
@ -103,6 +113,7 @@
<a href="https://github.com/asciimoo/searx/wiki/Searx-instances">Полный список</a>
</li>
</ul>
<hr style="clear: right">
<h3 id="startpage">StartPage</h3>
<p>
@ -129,6 +140,7 @@
<a href="https://www.startpage.com/">www.ptartpage.com</a>
</li>
</ul>
<hr style="clear: right">
<h3 id="yacy">Анонимная поисковая система Yacy</h3>
<p>
@ -155,8 +167,9 @@
<a href="https://yacy.net/">yacy.net</a>
</li>
</ul>
<hr style="clear: right">
<h3 id="other">список других поисковиков</h3>
<h3 id="other">Список других поисковых систем</h3>
<ul>
<li>
<a href="https://www.oscobo.com/">www.oscobo.com</a>

21
social.html

@ -8,10 +8,19 @@
</head>
<body>
<div class="mainContainer">
<nav id="header">
<a href="index.html"><div>Главная</div></a>
<a class="current" href="social.html"><div>Социальные сети</div></a>
<a href="im.html"><div>Сервисы мгновенных сообщений</div></a>
<a href="mail.html"><div>Почтовые сервисы</div></a>
<a href="search.html"><div>Поисковые сервисы</div></a>
<a href="info.html"><div>Зачем?</div></a>
</nav>
<h1>Социальные сети</h1>
<h2>Альтернативы Вконтакте/Facebook и Twitter</h2>
<h3 id="mastodon">Mastodon</h3>
<iframe style="float: right" width="560" height="315" sandbox="allow-same-origin allow-scripts" src="https://video.deadsuperhero.com/videos/embed/adffa7af-6063-4e09-8c1c-e8252167315d" frameborder="0" allowfullscreen=""></iframe>
<iframe class="margin" style="float: right" width="560" height="315" sandbox="allow-same-origin allow-scripts" src="https://video.deadsuperhero.com/videos/embed/adffa7af-6063-4e09-8c1c-e8252167315d" frameborder="0" allowfullscreen=""></iframe>
<p>
На данный момент — самая популярная из этичных социальных сетей с миллионами пользователей.
Выше приведено официальное англоязычное видео, объясняющее, как работает эта сеть.
@ -63,6 +72,7 @@
гуманитарию локальная лента может показаться скучноватой.
</p>
<h4>Приложения</h4>
<img src="images/mastodon.png" class="margin" style="float: right;" width="560">
<ul>
<li>
<h5>Android</h5>
@ -89,6 +99,7 @@
P.S.: Если Мастодон заинтересовал вас настолько, что вы готовы запустить
собственную инстанцию, став частью сети, вы можете сделать это в пару кликов на <a href="https://masto.host">masto.host</a>
</p>
<hr>
<h3 id="frendica">Friendica</h3>
<p>Альтернатива Вконтакте и Facebook, с теми же фишками, включая события и фотоальбомы.</p>
@ -97,6 +108,7 @@
связанных воедино посредством федерации. Мелкие сайты, составляющие
Френдику, называются "нодами".
</p>
<img src="images/frendica.png" class="margin" style="float: right;" width="560">
<p>
Френдика также связана с Мастодоном, Диаспорой, PixelFed, PeerTube и
всеми остальными альтернативными соцсетями, так что завести друзей
@ -123,8 +135,10 @@
</ul>
</li>
</ul>
<hr style="clear: right">
<h3>Diaspora</h3>
<img src="images/diaspora.png" class="margin" style="float: right;" width="560">
<p>
Одна из старейших альтернатив ВК и Facebook.
Диаспора также состоит из множества мелких сайтов,
@ -143,6 +157,7 @@
<li><a href="https://russiandiaspora.org">russiandiaspora.org</a></li>
<li><a href="https://pod.disroot.org">pod.disroot.org</a></li>
</ul>
<hr style="clear: right">
<h2>Альтернатива Instagram</h2>
<h3 id="pixelfed">Pixelfed</h3>
@ -152,6 +167,7 @@
Пример аккаунта — <a href="https://pixelfed.social/earth">https://pixelfed.social/earth</a> ,
пример поста — <a href="https://pixelfed.social/p/earth/22346">https://pixelfed.social/p/earth/22346</a>
</p>
<img src="images/pixelfed.png" class="margin" style="float: right;" width="560">
<p>
Сеть состоит из мелких независимых сайтов, способных общаться между собой,
так что вы можете свободно фолловить людей с других сайтов PixelFed,
@ -176,10 +192,11 @@
<li><a href="https://pix.tedomum.net">pix.tedomum.net</a></li>
<li><a href="https://pix.diaspodon.fr">pix.diaspodon.fr</a></li>
</ul>
<hr style="clear: right">
<h2>Альтернатива YouTube</h2>
<h3 id="peertube">PeerTube</h3>
<iframe style="float: right" width="560" height="315" sandbox="allow-same-origin allow-scripts" src="https://peertube.video/videos/embed/217eefeb-883d-45be-b7fc-a788ad8507d3" frameborder="0" allowfullscreen=""></iframe>
<iframe class="margin" style="float: right" width="560" height="315" sandbox="allow-same-origin allow-scripts" src="https://peertube.video/videos/embed/217eefeb-883d-45be-b7fc-a788ad8507d3" frameborder="0" allowfullscreen=""></iframe>
<p>
PeerTube — открытая распределённая альтернатива YouTube (принадлежащей Google).
Это соцсеть, приспособленная для распространения видео, без рекламы и слежки.