Адаптация под 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.

265 lines
17KB

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <title>Fediverse или как стать Неуловимым Джо</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><a href="social.html">Соцсети</a></li>
  66. <li><a href="im.html">Мессенджеры</a></li>
  67. <li><a href="mail.html">Почта</a></li>
  68. <li class="active"><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/koshka.jpg);">
  81. <div class="overlay-gradient"></div>
  82. <div class="container-fluids">
  83. <div class="row">
  84. <div class="col-md-6 col-md-offset-3 slider-text slider-text-bg">
  85. <div class="slider-text-inner text-center">
  86. <div class="blurred-card">
  87. <h1><b>Знакомая картинка?</b></h1>
  88. <h2><b>Смешно или грустно? Постоянное опасение, что за любое неверно истолкованное
  89. слово "за вами придут", но с людьми в сети общаться хочется, хочется постить котиков и смешные
  90. картинки, хочется делиться своим творчеством и наслаждаться чужим, но без страха?</b> </h2>
  91. <div class="background-faker">
  92. <div style="background-image: url(images/social.jpg);"></div>
  93. </div>
  94. <div class="card-content">
  95. <h1><b>Знакомая картинка?</b></h1>
  96. <h2><b>Смешно или грустно? Постоянное опасение, что за любое неверно истолкованное
  97. слово "за вами придут", но с людьми в сети общаться хочется, хочется постить котиков и смешные
  98. картинки, хочется делиться своим творчеством и наслаждаться чужим, но без страха?</b> </h2>
  99. </div>
  100. </div>
  101. </div>
  102. </div>
  103. </div>
  104. </div>
  105. </li>
  106. </ul>
  107. </div>
  108. </aside>
  109. <div id="fh5co-about">
  110. <div class="row animate-box">
  111. <div class="col-md-8 col-md-offset-2 heading-section">
  112. <p>
  113. Забудьте. Хочется открыто высказывать своё мнение, и не попадать под цензуру администрации сети, просто
  114. за непопулярную там точку зрения? А может, вам ещё и не нравится быть товаром, да не штучным,
  115. а мелочью в крупнооптовой партии? А может, вы ещё и о тайне личной переписки мечтаете? <b>Забудьте</b>.
  116. </p>
  117. <p>
  118. В столь популярных нынче централизованных коммерческих сетях как Вконтакте (собственность Mail.ru Group
  119. Усманова) , Facebook, Instagram
  120. (собственность Facebook), YouTube, Twitter это невозможно по определению (один из множества примеров —
  121. <a href="https://habr.com/ru/news/t/405727/">Приложение ВК следит за пользователями</a>).
  122. В мессенджерах, таких как WhatsApp, Viber, Telegram, это невозможно по определению.
  123. Просто подумайте о том, сколько
  124. труда и денег вложено в эти продукты корпорациями, и почему столь дорогостоящая вещь для вас
  125. "бесплатна". Чем расплачиваются с программистами, администраторами, контентщиками, техподдержкой?
  126. Спойлер — Вами. Вы — товар. Смиритесь.
  127. </p>
  128. <p>
  129. Но, "даже, если вас сожрал лев, у вас есть как минимум два выхода". Так и здесь —
  130. <b>просто бегите оттуда</b>. Нет, никто не предлагает отключить соцсети, никто не предлагает
  131. отказаться от онлайн-общения. Вспомните — Интернет задумывался как объединение равных, равных в
  132. правах, равных полномочиях. Вы не обязаны отдавать свою переписку в "личных" сообщениях ВК на
  133. перлюстрацию любопытным админам. Вы не обязаны фотографироваться с паспортом на фоне странички,
  134. вы не обязаны отдавать свои личные данные и результаты своего творчества коммерческим структурам.
  135. </p>
  136. <p>
  137. <b>В этом нет никакой нужды</b>. Есть место (вернее будет назвать его "пространством"), которое
  138. люди создают для себя. Там не страшна цензура государств и корпораций, там не нужно продавать
  139. свою личность. И многие уже там. Имя этой вселенной — Fediverse (от англ. Federation —
  140. федерация, и Universe - Вселенная). И мы ждём вас там с распростёрыми объятиями. Всех без исключения.
  141. </p>
  142. <h4>Интересно?</h4>
  143. <p>
  144. Тогда позвольте рассказать, что мы готовы предложить любому пользователю — и творцу, и
  145. потребителю. У каждого есть свой предпочтительный формат общения — кто-то любит потоки
  146. молниеносных сообщений Твиттера, кто-то сложный формат взаимодействия ВК и Facebook, кто-то
  147. предпочитает видео или фото... Теперь представьте, что из Твиттера вы можете
  148. комментировать/лайкать/репостить посты YouTube, Instagram, ВК, а авторы, вещающие
  149. в удобном для них формате, оттуда вам отвечают, поддерживая полноценное общение,
  150. и никуда не надо перелогиниваться. <b>Удобно? У нас так можно</b>.
  151. </p>
  152. <p>
  153. А представьте, что у вас возник конфликт с администрацией вашей любимой сети, ваши сообщения
  154. удаляют, аккаунт блокируют. И заново зайти в привычный уже Вконтакте/Facebook — в лучшем случае
  155. через долгое унижение в чате техподдержки, фотографии паспорта и прочую дурь. Хотелось бы вам в
  156. этом случае просто по щелчку мышки зайти в "другой" ВК/FB и продолжить общение с теми же друзьями,
  157. обсуждать те же темы, но уже в недосягаемости от обозлённой администрации? <b>У нас так можно</b>.
  158. И даже больше — никто не мешает самому стать полновластным админом
  159. (при наличии минимальной технической подготовки).
  160. </p>
  161. <h4>Интересно?</h4>
  162. <p>
  163. Теперь, думаю, стоит рассказать, из чего состоит Fediverse. А состоит она из нескольких сетей,
  164. кажда из которых состоит из кучи независимых, но постоянно взаимодействующих серверов.
  165. Технические подробности будут в другой статье, здесь дадим небольшой обзор того, чем можно
  166. заменить популярные, но ужасающие по своей сути, сервисы.
  167. </p>
  168. <ul>
  169. <li>
  170. Twitter — местный аналог (ну, пожалуй несколько более продвинутый) его зовётся
  171. <a href="social.html#mastodon">Mastodon</a>
  172. Суть та же — обмен короткими постами (как правило, в пределах 500 символов), статусами,
  173. и комментариями. Наиболее популярная из всех, особенно среди мобильных пользователей.
  174. </li>
  175. <li>
  176. Facebook/Вконтакте — здесь у нас <a href="social.html#friendica">Friendica</a>.
  177. Полноразмерная соцсеть с большими постами, развёрнутыми дискуссиями и возможностью сложной вёрстки.
  178. </li>
  179. <li>
  180. Inastagram — ну а вместо него <a href="social.html#pixelfed">PixelFed</a>.
  181. Главная приятность по сравнению с Insta заключается в том, что нет никакой нужды использовать
  182. специальное приложение — все функции доступны из любого браузера, что мобильного, что десктопного.
  183. </li>
  184. <li>
  185. И, наконец, YouTube заменяется <a href="social.html#peertube">PeerTube</a> — видео здесь,
  186. как и сообщения перечисленных выше сетей, расходятся по всему Федивёрсу и доступны (при желании автора) всем.
  187. </li>
  188. </ul>
  189. <p>
  190. Ну и коль скоро мы затронули тему мессенджеров, стоит кратко упомянуть достойные альтернативы перечисленным в
  191. начале статьи корпоративным следилкам, радостно сотрудничающим со спецслужбами (или кто-то до сих пор верит, что
  192. коммерческая контора Telegram LLC будет тратить кучу ресурсов на защиту Васи от товарища майора? Подсказка —
  193. <a href="https://habr.com/ru/news/t/464855/">нет, не будет</a>).
  194. Мессенджеры
  195. непосредственно в Fediverse не входят, но в большинстве своём (речь опять же идёт о рекомендованных) основаны на
  196. принципах федерации либо на peer-to-peer. <a href="im.html">вот здесь</a> вы можете подобрать себе подходящую
  197. альтернативу.
  198. </p>
  199. <p>
  200. Смело проходите по ссылкам выше, мы ждём вас в Fediverse. Новичкам тут всегда помогут, а несогласных не забанят.
  201. Вливайтесь!
  202. </p>
  203. </div>
  204. </div>
  205. </div>
  206. <footer role="contentinfo">
  207. <div class="row">
  208. <div class="col-md-10 col-md-offset-1 text-center">
  209. <a href="http://creativecommons.org/licenses/by-sa/4.0/">Copyleft</a>
  210. какие-то люди. Использован также перевод оригинального английского текста
  211. <a href="https://switching.software">Switching.Social</a>. Дополнения принимаются <a href="https://git.macaw.me/Tolstoevsky/switching">здесь</a>.
  212. Поддержать деньгами можно <a href="https://www.patreon.com/tolstoevsky">на Patreon</a> или на <a href="https://ru.liberapay.com/tolstoevsky/donate">Liberapay</a>.
  213. </div>
  214. </div>
  215. </footer>
  216. </div>
  217. </div>
  218. </div><!-- END container-wrap -->
  219. </div>
  220. <div class="gototop js-top">
  221. <a href="#" class="js-gotop"><i class="icon-arrow-up2"></i></a>
  222. </div>
  223. <!-- jQuery -->
  224. <script src="js/jquery.min.js"></script>
  225. <!-- jQuery Easing -->
  226. <script src="js/jquery.easing.1.3.js"></script>
  227. <!-- Bootstrap -->
  228. <script src="js/bootstrap.min.js"></script>
  229. <!-- Waypoints -->
  230. <script src="js/jquery.waypoints.min.js"></script>
  231. <!-- Flexslider -->
  232. <script src="js/jquery.flexslider-min.js"></script>
  233. <!-- Magnific Popup -->
  234. <script src="js/jquery.magnific-popup.min.js"></script>
  235. <script src="js/magnific-popup-options.js"></script>
  236. <!-- Counters -->
  237. <script src="js/jquery.countTo.js"></script>
  238. <!-- Main -->
  239. <script src="js/main.js"></script>
  240. </body>
  241. </html>