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

236 lines
16KB

  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. </head>
  27. <body>
  28. <div class="fh5co-loader"></div>
  29. <div id="page">
  30. <nav class="fh5co-nav" role="navigation">
  31. <div class="container-wrap">
  32. <div class="top-menu">
  33. <div class="row">
  34. <div class="col-xs-2">
  35. <div id="fh5co-logo"><a href="index.html">Fediverse</a></div>
  36. </div>
  37. <div class="col-xs-10 text-right menu-1">
  38. <ul>
  39. <li><a href="index.html">Главная</a></li>
  40. <li><a href="social.html">Соцсети</a></li>
  41. <li><a href="mail.html">Почта</a></li>
  42. <li><a href="im.html">Мессенджеры</a></li>
  43. <li><a href="extra.html">Доп. материалы</a></li>
  44. </ul>
  45. </div>
  46. </div>
  47. </div>
  48. </div>
  49. </nav>
  50. <div class="container-wrap">
  51. <aside id="fh5co-hero">
  52. <div class="flexslider">
  53. <ul class="slides">
  54. <li style="background-image: url(images/koshka.jpg);">
  55. <div class="overlay-gradient"></div>
  56. <div class="container-fluids">
  57. <div class="row">
  58. <div class="col-md-6 col-md-offset-3 slider-text slider-text-bg">
  59. <div class="slider-text-inner text-center">
  60. <div class="blurred-card">
  61. <h1><b>Знакомая картинка?</b></h1>
  62. <h2><b>Смешно или грустно? Постоянное опасение, что за любое неверно истолкованное
  63. слово "за вами придут", но с людьми в сети общаться хочется, хочется постить котиков и смешные
  64. картинки, хочется делиться своим творчеством и наслаждаться чужим, но без страха?</b> </h2>
  65. <div class="background-faker">
  66. <div style="background-image: url(images/social.jpg);"></div>
  67. </div>
  68. <div class="card-content">
  69. <h1><b>Знакомая картинка?</b></h1>
  70. <h2><b>Смешно или грустно? Постоянное опасение, что за любое неверно истолкованное
  71. слово "за вами придут", но с людьми в сети общаться хочется, хочется постить котиков и смешные
  72. картинки, хочется делиться своим творчеством и наслаждаться чужим, но без страха?</b> </h2>
  73. </div>
  74. </div>
  75. </div>
  76. </div>
  77. </div>
  78. </div>
  79. </li>
  80. </ul>
  81. </div>
  82. </aside>
  83. <div id="fh5co-about">
  84. <div class="row animate-box">
  85. <div class="col-md-8 col-md-offset-2 heading-section">
  86. <p>
  87. Забудьте. Хочется открыто высказывать своё мнение, и не попадать под цензуру администрации сети, просто
  88. за непопулярную там точку зрения? А может, вам ещё и не нравится быть товаром, да не штучным,
  89. а мелочью в крупнооптовой партии? А может, вы ещё и о тайне личной переписки мечтаете? <b>Забудьте</b>.
  90. </p>
  91. <p>
  92. В столь популярных нынче централизованных коммерческих сетях как Вконтакте (собственность Mail.ru Group
  93. Усманова) , Facebook, Instagram
  94. (собственность Facebook), YouTube, Twitter это невозможно по определению (один из множества примеров —
  95. <a href="https://habr.com/ru/news/t/405727/">Приложение ВК следит за пользователями</a>).
  96. В мессенджерах, таких как WhatsApp, Viber, Telegram, это невозможно по определению.
  97. Просто подумайте о том, сколько
  98. труда и денег вложено в эти продукты корпорациями, и почему столь дорогостоящая вещь для вас
  99. "бесплатна". Чем расплачиваются с программистами, администраторами, контентщиками, техподдержкой?
  100. Спойлер — Вами. Вы — товар. Смиритесь.
  101. </p>
  102. <p>
  103. Но, "даже, если вас сожрал лев, у вас есть как минимум два выхода". Так и здесь —
  104. <b>просто бегите оттуда</b>. Нет, никто не предлагает отключить соцсети, никто не предлагает
  105. отказаться от онлайн-общения. Вспомните — Интернет задумывался как объединение равных, равных в
  106. правах, равных полномочиях. Вы не обязаны отдавать свою переписку в "личных" сообщениях ВК на
  107. перлюстрацию любопытным админам. Вы не обязаны фотографироваться с паспортом на фоне странички,
  108. вы не обязаны отдавать свои личные данные и результаты своего творчества коммерческим структурам.
  109. </p>
  110. <p>
  111. <b>В этом нет никакой нужды</b>. Есть место (вернее будет назвать его "пространством"), которое
  112. люди создают для себя. Там не страшна цензура государств и корпораций, там не нужно продавать
  113. свою личность. И многие уже там. Имя этой вселенной — Fediverse (от англ. Federation —
  114. федерация, и Universe - Вселенная). И мы ждём вас там с распростёрыми объятиями. Всех без исключения.
  115. </p>
  116. <h4>Интересно?</h4>
  117. <p>
  118. Тогда позвольте рассказать, что мы готовы предложить любому пользователю — и творцу, и
  119. потребителю. У каждого есть свой предпочтительный формат общения — кто-то любит потоки
  120. молниеносных сообщений Твиттера, кто-то сложный формат взаимодействия ВК и Facebook, кто-то
  121. предпочитает видео или фото... Теперь представьте, что из Твиттера вы можете
  122. комментировать/лайкать/репостить посты YouTube, Instagram, ВК, а авторы, вещающие
  123. в удобном для них формате, оттуда вам отвечают, поддерживая полноценное общение,
  124. и никуда не надо перелогиниваться. <b>Удобно? У нас так можно</b>.
  125. </p>
  126. <p>
  127. А представьте, что у вас возник конфликт с администрацией вашей любимой сети, ваши сообщения
  128. удаляют, аккаунт блокируют. И заново зайти в привычный уже Вконтакте/Facebook — в лучшем случае
  129. через долгое унижение в чате техподдержки, фотографии паспорта и прочую дурь. Хотелось бы вам в
  130. этом случае просто по щелчку мышки зайти в "другой" ВК/FB и продолжить общение с теми же друзьями,
  131. обсуждать те же темы, но уже в недосягаемости от обозлённой администрации? <b>У нас так можно</b>.
  132. И даже больше — никто не мешает самому стать полновластным админом
  133. (при наличии минимальной технической подготовки).
  134. </p>
  135. <h4>Интересно?</h4>
  136. <p>
  137. Теперь, думаю, стоит рассказать, из чего состоит Fediverse. А состоит она из нескольких сетей,
  138. кажда из которых состоит из кучи независимых, но постоянно взаимодействующих серверов.
  139. Технические подробности будут в другой статье, здесь дадим небольшой обзор того, чем можно
  140. заменить популярные, но ужасающие по своей сути, сервисы.
  141. </p>
  142. <ul>
  143. <li>
  144. Twitter — местный аналог (ну, пожалуй несколько более продвинутый) его зовётся
  145. <a href="social.html#mastodon">Mastodon</a>
  146. Суть та же — обмен короткими постами (как правило, в пределах 500 символов), статусами,
  147. и комментариями. Наиболее популярная из всех, особенно среди мобильных пользователей.
  148. </li>
  149. <li>
  150. Facebook/Вконтакте — здесь у нас <a href="social.html#friendica">Friendica</a>.
  151. Полноразмерная соцсеть с большими постами, развёрнутыми дискуссиями и возможностью сложной вёрстки.
  152. </li>
  153. <li>
  154. Inastagram — ну а вместо него <a href="social.html#pixelfed">PixelFed</a>.
  155. Главная приятность по сравнению с Insta заключается в том, что нет никакой нужды использовать
  156. специальное приложение — все функции доступны из любого браузера, что мобильного, что десктопного.
  157. </li>
  158. <li>
  159. И, наконец, YouTube заменяется <a href="social.html#peertube">PeerTube</a> — видео здесь,
  160. как и сообщения перечисленных выше сетей, расходятся по всему Федивёрсу и доступны (при желании автора) всем.
  161. </li>
  162. </ul>
  163. <p>
  164. Ну и коль скоро мы затронули тему мессенджеров, стоит кратко упомянуть достойные альтернативы перечисленным в
  165. начале статьи корпоративным следилкам, радостно сотрудничающим со спецслужбами (или кто-то до сих пор верит, что
  166. коммерческая контора Telegram LLC будет тратить кучу ресурсов на защиту Васи от товарища майора? Подсказка —
  167. <a href="https://habr.com/ru/news/t/464855/">нет, не будет</a>).
  168. Мессенджеры
  169. непосредственно в Fediverse не входят, но в большинстве своём (речь опять же идёт о рекомендованных) основаны на
  170. принципах федерации либо на peer-to-peer. <a href="im.html">вот здесь</a> вы можете подобрать себе подходящую
  171. альтернативу.
  172. </p>
  173. <p>
  174. Смело проходите по ссылкам выше, мы ждём вас в Fediverse. Новичкам тут всегда помогут, а несогласных не забанят.
  175. Вливайтесь!
  176. </p>
  177. </div>
  178. </div>
  179. </div>
  180. <footer role="contentinfo">
  181. <div class="row">
  182. <div class="col-md-10 col-md-offset-1 text-center">
  183. <a href="http://creativecommons.org/licenses/by-sa/4.0/">Copyleft</a>
  184. Толстоевский, Попугай и компания. Использован также перевод оригинального английского текста
  185. <a href="https://switching.software">Switching.Social</a>. Дополнения принимаются <a href="https://git.macaw.me/Tolstoevsky/switching">здесь</a>.
  186. Поддержать деньгами можно <a href="https://www.patreon.com/tolstoevsky">на Patreon</a> или на <a href="https://ru.liberapay.com/tolstoevsky/donate">Liberapay</a>.
  187. </div>
  188. </div>
  189. </footer>
  190. </div>
  191. </div>
  192. </div><!-- END container-wrap -->
  193. </div>
  194. <div class="gototop js-top">
  195. <a href="#" class="js-gotop"><i class="icon-arrow-up2"></i></a>
  196. </div>
  197. <!-- jQuery -->
  198. <script src="js/jquery.min.js"></script>
  199. <!-- jQuery Easing -->
  200. <script src="js/jquery.easing.1.3.js"></script>
  201. <!-- Bootstrap -->
  202. <script src="js/bootstrap.min.js"></script>
  203. <!-- Waypoints -->
  204. <script src="js/jquery.waypoints.min.js"></script>
  205. <!-- Flexslider -->
  206. <script src="js/jquery.flexslider-min.js"></script>
  207. <!-- Magnific Popup -->
  208. <script src="js/jquery.magnific-popup.min.js"></script>
  209. <script src="js/magnific-popup-options.js"></script>
  210. <!-- Counters -->
  211. <script src="js/jquery.countTo.js"></script>
  212. <!-- Main -->
  213. <script src="js/main.js"></script>
  214. </body>
  215. </html>