Адаптация под responsive design, тексты переписаны под обладателей клипового мышления.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

395 lines
18KB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <title>Социальные сети</title>
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <!-- Animate.css -->
  9. <link rel="stylesheet" href="css/animate.css">
  10. <!-- Icomoon Icon Fonts-->
  11. <link rel="stylesheet" href="css/icomoon.css">
  12. <!-- Bootstrap -->
  13. <link rel="stylesheet" href="css/bootstrap.css">
  14. <!-- Magnific Popup -->
  15. <link rel="stylesheet" href="css/magnific-popup.css">
  16. <!-- Flexslider -->
  17. <link rel="stylesheet" href="css/flexslider.css">
  18. <!-- Theme style -->
  19. <link rel="stylesheet" href="css/style.css">
  20. <!-- Modernizr JS -->
  21. <script src="js/modernizr-2.6.2.min.js"></script>
  22. <!-- FOR IE9 below -->
  23. <!--[if lt IE 9]>
  24. <script src="js/respond.min.js"></script>
  25. <![endif]-->
  26. <script>
  27. /*
  28. @licstart
  29. The MIT License (MIT)
  30. Copyright JS Foundation and other contributors, https://js.foundation/
  31. Permission is hereby granted, free of charge, to any person obtaining
  32. a copy of this software and associated documentation files (the
  33. "Software"), to deal in the Software without restriction, including
  34. without limitation the rights to use, copy, modify, merge, publish,
  35. distribute, sublicense, and/or sell copies of the Software, and to
  36. permit persons to whom the Software is furnished to do so, subject to
  37. the following conditions:
  38. The above copyright notice and this permission notice shall be
  39. included in all copies or substantial portions of the Software.
  40. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
  41. EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
  42. MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
  43. NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
  44. LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
  45. OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
  46. WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  47. @licend The above is the entire license notice
  48. for the JavaScript code in this page.
  49. */
  50. </script>
  51. </head>
  52. <body>
  53. <div class="fh5co-loader"></div>
  54. <div id="page">
  55. <nav class="fh5co-nav" role="navigation">
  56. <div class="container-wrap">
  57. <div class="top-menu">
  58. <div class="row">
  59. <div class="col-xs-2">
  60. <div id="fh5co-logo"><a href="index.html">Fediverse</a></div>
  61. </div>
  62. <div class="col-xs-10 text-right menu-1">
  63. <ul>
  64. <li><a href="index.html">Главная</a></li>
  65. <li class="active"><a href="social.html">Соцсети</a></li>
  66. <li><a href="im.html">Мессенджеры</a></li>
  67. <li><a href="mail.html">Почта</a></li>
  68. <li><a href="info.html">Подробнее</a></li>
  69. <li><a href="extra.html">Доп. материалы</a></li>
  70. </ul>
  71. </div>
  72. </div>
  73. </div>
  74. </div>
  75. </nav>
  76. <div class="container-wrap">
  77. <aside id="fh5co-hero">
  78. <div class="flexslider">
  79. <ul class="slides">
  80. <li style="background-image: url(images/social.jpg);">
  81. <div class="overlay-gradient"></div>
  82. <div class="row">
  83. <div class="col-md-6 col-md-offset-3 slider-text slider-text-bg">
  84. <div class="slider-text-inner text-center">
  85. <div class="blurred-card">
  86. <h1>Распределённые социальные сети</h1>
  87. <h2>Ключевой инструмент взаимодействия в современной Сети. Познакомьтесь с альтернативами</h2>
  88. <div class="background-faker">
  89. <div style="background-image: url(images/social.jpg);"></div>
  90. </div>
  91. <div class="card-content">
  92. <h1>Распределённые социальные сети</h1>
  93. <h2>Ключевой инструмент взаимодействия в современной Сети. Познакомьтесь с альтернативами</h2>
  94. </div>
  95. </div>
  96. </div>
  97. </div>
  98. </div>
  99. </li>
  100. </ul>
  101. </div>
  102. </aside>
  103. <div id="fh5co-work">
  104. <div class="row">
  105. <div class="col-md-6">
  106. <a href="images/mastodon.png" class="image-popup">
  107. <img src="images/mastodon.png" alt="Мастодон — многоколоночный интерфейс, тёмная тема" class="img-responsive">
  108. </a>
  109. <a href="images/mastodon2.png" class="image-popup">
  110. <img src="images/mastodon2.png" alt="Мастодон - одноколоночный интерфейс, светлая тема" class="img-responsive">
  111. </a>
  112. <a href="images/mastodon3.png" class="image-popup">
  113. <img src="images/mastodon3.png" alt="Мастодон - настройки, светлая тема" class="img-responsive">
  114. </a>
  115. </div>
  116. <div class="col-md-4">
  117. <h2 id="mastodon">#вместотвиттера Mastodon</h2>
  118. <span>На данный момент — самая популярная из этичных социальных сетей с миллионами пользователей.
  119. Больше всего напоминает Твиттер, только с большим лимитом символов и более гибким интерфейсом.
  120. </span>
  121. <p>
  122. Ваша учётная запись в Мастодоне позволяет общаться с пользователями
  123. других распределённых сетей — например Friendica (см. ниже), PixelFed
  124. (взамен принадлежащего корпорации Facebook сервиса Instagram), PeerTube (аналог YouTube) и многих других.
  125. Это объединение альтернативных соцсетей называется Fediverse (Федивёрс)
  126. (от federation - федерация и universe - вселенная).
  127. </p>
  128. <p>
  129. Вы можете зайти в Мастодон, зарегистрировавшись на одном из сайтов, указанных ниже,
  130. можете использовать эту учётную запись в одном из приложений Mastodon для вашего мобильника.
  131. </p>
  132. </div>
  133. <div class="row">
  134. <div class="col-md-4">
  135. <h3>Где зарегистрироваться</h3>
  136. <ul>
  137. <li><a href="https://mastodon.ml">Russian Mastodon</a></li>
  138. <li><a href="https://phreedom.tk">Svoboda</a></li>
  139. <li><a href="https://va11hal.la">Valhalla</a></li>
  140. <li><a href="https://embracing.space">Embracing Space</a></li>
  141. <li><a href="https://quey.org">Quey</a></li>
  142. <li><a href="https://lor.sh">LOR.sh</a></li>
  143. <li><a href="https://mastodon.org.ua">Ukrainian Mastodon</a></li>
  144. <li><a href="https://mstdn.netwhood.online">Network Neighborhood</a></li>
  145. </ul>
  146. <h3> Мобильные приложения</h3>
  147. <ul>
  148. <li>
  149. <h4>Android</h4>
  150. <ul>
  151. <li><a href="https://play.google.com/store/apps/details?id=app.fedilab.android">Fedilab</a> (Платный)</li>
  152. <li><a href="https://f-droid.org/packages/fr.gouv.etalab.mastodon/">Fedilab</a> (Бесплатный на F-Droid)</li>
  153. <li><a href="https://play.google.com/store/apps/details?id=jp.juggler.subwaytooter">Subway Tooter</a></li>
  154. <li><a href="https://play.google.com/store/apps/details?id=com.keylesspalace.tusky">Tusky</a></li>
  155. </ul>
  156. </li>
  157. <li>
  158. <h4>iOS</h4>
  159. <ul>
  160. <li><a href="https://itunes.apple.com/app/toot/id1229021451">Toot!</a></li>
  161. <li><a href="https://itunes.apple.com/app/mast/id1437429129">Mast</a></li>
  162. <li><a href="https://itunes.apple.com/app/amarok-for-mastodon/id1214116200">Amaroq</a></li>
  163. </ul>
  164. </li>
  165. </ul>
  166. </div>
  167. </div>
  168. </div>
  169. <div class="row">
  170. <div class="col-md-6">
  171. <a href="images/frendica.png" class="image-popup">
  172. <img src="images/frendica.png" alt="Friendica" class="img-responsive">
  173. </a>
  174. </div>
  175. <div class="col-md-4">
  176. <h2 id="friendica">#вместоВК Friendica</h2>
  177. <span>
  178. Альтернатива Вконтакте и Facebook, с теми же фишками, включая события и фотоальбомы
  179. </span>
  180. <p>
  181. Также, как и Мастодон, Friendica создана из множества мелких сайтов,
  182. связанных воедино посредством федерации. Мелкие сайты, составляющие
  183. Френдику, называются "нодами".
  184. </p>
  185. <p>
  186. Френдика также связана с Мастодоном, Диаспорой, PixelFed, PeerTube и
  187. всеми остальными альтернативными соцсетями, так что завести друзей
  188. в этих сетях не составит труда.
  189. </p>
  190. <div>
  191. <h3>Где зарегистрироваться</h3>
  192. <ul>
  193. <li><a href="https://nerdica.net">Nerdica</a></li>
  194. <li><a href="https://friendica.xyz">Friendica.XYZ</a></li>
  195. <li><a href="https://venera.social">Venera</a></li>
  196. <li><a href="https://loma.ml">Loma</a></li>
  197. </ul>
  198. <h3> Мобильные приложения</h3>
  199. <ul>
  200. <li>
  201. <h4>Android</h4>
  202. <ul>
  203. <li><a href="https://play.google.com/store/apps/details?id=app.fedilab.android">Fedilab</a> (Платный)</li>
  204. <li><a href="https://f-droid.org/packages/fr.gouv.etalab.mastodon/">Fedilab</a> (Бесплатный на F-Droid)</li>
  205. </ul>
  206. </li>
  207. </ul>
  208. </div>
  209. </div>
  210. </div>
  211. <div class="row">
  212. <div class="col-md-6">
  213. <a href="images/pixelfed.png" class="image-popup">
  214. <img src="images/pixelfed.png" alt="Friendica" class="img-responsive">
  215. </a>
  216. </div>
  217. <div class="col-md-4">
  218. <h2 id="pixelfed">#вместоinstagram PixelFed</h2>
  219. <span>
  220. Открытая распределённая альтернатива Instagram — с фильтрами, комментариями, лайками, репостами и так далее, но без рекламы и слежки.
  221. </span>
  222. <p>
  223. Сеть состоит из мелких независимых сайтов, способных общаться между собой,
  224. так что вы можете свободно фолловить людей с других сайтов PixelFed,
  225. зарегистрировавшись на любом из них. И не важно, на маленьком или
  226. крупном сервере вы зарегистрируетесь — вся сеть в вашем распоряжении.
  227. Любые другие сети (например, Mastodon и Friendica) также доступны для взаимодействия
  228. </p>
  229. <p>
  230. В отличие от Instagram, для использования PixelFed не нужно специальное приложение — оно работает
  231. в любом браузере на компьютере, телефоне или планшете.
  232. </p>
  233. <div>
  234. <h3>Где зарегистрироваться</h3>
  235. <ul>
  236. <li><a href="https://pixelfed.de">pixelfed.de</a></li>
  237. <li><a href="https://pxlfd.me">pxlfd.me</a></li>
  238. <li><a href="https://pixelfed.tokyo">pixelfed.tokyo</a></li>
  239. <li><a href="https://pixelfed.se">pixelfed.se</a></li>
  240. </ul>
  241. <h3> Мобильные приложения</h3>
  242. <ul>
  243. <li>
  244. <h4>Android</h4>
  245. <ul>
  246. <li><a href="https://play.google.com/store/apps/details?id=app.fedilab.android">Fedilab</a> (Платный)</li>
  247. <li><a href="https://f-droid.org/packages/fr.gouv.etalab.mastodon/">Fedilab</a> (Бесплатный на F-Droid)</li>
  248. </ul>
  249. </li>
  250. </ul>
  251. </div>
  252. </div>
  253. </div>
  254. <div class="row">
  255. <div class="col-md-6">
  256. <a href="images/peertube.png" class="image-popup">
  257. <img src="images/peertube.png" alt="peertube" class="img-responsive">
  258. </a>
  259. </div>
  260. <div class="col-md-4">
  261. <h2 id="peertube">#вместоyoutube PeerTube</h2>
  262. <span>
  263. PeerTube — открытая распределённая альтернатива YouTube (принадлежит Google).
  264. Это соцсеть, приспособленная для распространения видео, без рекламы и слежки.
  265. </span>
  266. <p>
  267. В отличие от YouTube, PeerTube состоит из множества независимых сайтов,
  268. способных общаться между собой. Не имеет значения,
  269. на каком вы зарегистрируетесь — вся сеть в вашем распоряжении.
  270. Плюс вы можете встроить видео с PeerTube куда угодно (см. пример выше).
  271. </p>
  272. <p>
  273. Ну и вишенкой на торте — PeerTube также использует стандарт ActivityPub,
  274. и подписаться на ваш канал там смогут все пользователи PeerTube, Mastodon,
  275. Friendica и так далее.
  276. </p>
  277. <div>
  278. <h3>Где зарегистрироваться</h3>
  279. <ul>
  280. <li><a href="https://open.tube">open.tube</a></li>
  281. <li><a href="https://video.tedomum.net">video.tedomum.net</a></li>
  282. <li><a href="https://peertube.linuxrocks.online">peertube.linuxrocks.online</a></li>
  283. <li><a href="https://share.tube">share.tube</a></li>
  284. </ul>
  285. <h3>Мобильные приложения</h3>
  286. <h4>Android</h4>
  287. <ul>
  288. <li><a href="https://play.google.com/store/apps/details?id=app.fedilab.android">Fedilab</a> (Платный)</li>
  289. <li><a href="https://f-droid.org/packages/fr.gouv.etalab.mastodon/">Fedilab</a> (Бесплатный на F-Droid)</li>
  290. <li><a href="https://play.google.com/store/apps/details?id=net.schueller.peertube">PeerTube Player</a></li>
  291. </ul>
  292. </div>
  293. </div>
  294. </div>
  295. </div>
  296. </div>
  297. </div><!-- END container-wrap -->
  298. <div class="container-wrap">
  299. <footer role="contentinfo">
  300. <div class="row">
  301. <div class="col-md-10 col-md-offset-1 text-center">
  302. <a href="http://creativecommons.org/licenses/by-sa/4.0/">Copyleft</a>
  303. какие-то люди. Использован также перевод оригинального английского текста
  304. <a href="https://switching.software">Switching.Social</a>. Дополнения принимаются <a href="https://git.macaw.me/Tolstoevsky/switching">здесь</a>.
  305. Поддержать деньгами можно <a href="https://www.patreon.com/tolstoevsky">на Patreon</a> или на <a href="https://ru.liberapay.com/tolstoevsky/donate">Liberapay</a>.
  306. </div>
  307. </div>
  308. </footer>
  309. </div><!-- END container-wrap -->
  310. <div class="gototop js-top">
  311. <a href="#" class="js-gotop"><i class="icon-arrow-up2"></i></a>
  312. </div>
  313. <!-- jQuery -->
  314. <script src="js/jquery.min.js"></script>
  315. <!-- jQuery Easing -->
  316. <script src="js/jquery.easing.1.3.js"></script>
  317. <!-- Bootstrap -->
  318. <script src="js/bootstrap.min.js"></script>
  319. <!-- Waypoints -->
  320. <script src="js/jquery.waypoints.min.js"></script>
  321. <!-- Flexslider -->
  322. <script src="js/jquery.flexslider-min.js"></script>
  323. <!-- Magnific Popup -->
  324. <script src="js/jquery.magnific-popup.min.js"></script>
  325. <script src="js/magnific-popup-options.js"></script>
  326. <!-- Counters -->
  327. <script src="js/jquery.countTo.js"></script>
  328. <!-- Main -->
  329. <script src="js/main.js"></script>
  330. </body>
  331. </html>