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

172 lines
11KB

  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. <link rel="stylesheet" href="css/base.css">
  9. <link rel="stylesheet" href="css/menu.css">
  10. <link rel="stylesheet" href="css/popup.css">
  11. <link rel="stylesheet" href="css/btn.css">
  12. <script src="js/popup.js"></script>
  13. <script src="js/menu.js"></script>
  14. </head>
  15. <body>
  16. <div class="topnav" id="rtopnav">
  17. <a href="index.html">Главная</a>
  18. <a href="mail.html">Почта</a>
  19. <a href="im.html">Мессенджеры</a>
  20. <a href="social.html">Соцсети</a>
  21. <a href="search.html" class="active">Поисковики</a>
  22. <div class="dropdown">
  23. <button class="dropbtn">Ещё
  24. <i class="fa fa-caret-down"></i>
  25. </button>
  26. <div class="dropdown-content">
  27. <a href="extra.html">Документы и агитматериалы</a>
  28. <a href="info.html">Подробнее</a>
  29. </div>
  30. </div>
  31. <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="dropme()">☰</a>
  32. </div>
  33. <div class="textblock">
  34. <h2>Зачем вообще менять поисковик?</h2>
  35. <p>
  36. <img src="images/q.png" align="right" style="margin: 0px 0px 0px 10px;">
  37. Централизованные поисковые системы, ярчайшими (в негативном смысле) представителями которых являются
  38. Google, Bing и Яндекс, строят поисковую выдачу на анализе ваших предыдущих запросов, формируя
  39. так называемый "информационный пузырь", также известный как <b>"пузырь фильтров"</b>. Как следствие,
  40. получаемая вами информация в этих поисковых системах ограничена исключительно той, которую,
  41. <b>по мнению поисковика</b> вы предпочтёте увидеть. Ваше личное мнение никого не волнует — как раз наоборот,
  42. формируя поисковую выдачу должным образом, на ваше мнение очень легко повлиять. Таким образом,
  43. иснтрументы, создававшиеся для облегчения доступа к информации, превратились в инструменты
  44. зомбирования и манипуляции. Ну и не забывайте о вездесущей рекламе, порой залезающей в весьма интимные
  45. сферы вашей жизни.
  46. </p>
  47. </div>
  48. <div class="textblock">
  49. <h2>Альтернативные варианты</h2>
  50. <p>
  51. <img src="images/mag.png" align="right" style="margin: 0px 0px 0px 10px;">
  52. Поиск в море информации современной Сети — дело ресурсозатратное. Нужны огромные мощности для анализа и индексации
  53. всей мудрости и глупости Человечества. Как же совместить необходимость содержать громадные датацентры с безопасностью
  54. и неприкосновенностью личных данных, да ещё и обеспечить адекватную выдачу информации?
  55. </p>
  56. <p>
  57. Есть несколько вариантов. Вариант, выбранный Гуглом, Яндексом и подобными (к чёрту вашу приватность, будем торговать
  58. пользователями), нас не устраивает. Рассмотрим остальные.
  59. </p>
  60. <p>
  61. <h3>Вариант первый - открытый метапоиск</h3>
  62. Поисковые системы, избравшие этот вариант, используют выдачу поисковых гигантов, проксируя и обезличивая ваши запросы.
  63. Это не требует больших затрат вычислительных мощностей и позволяет обходиться пожертвованиями или нетаргетированной рекламой.
  64. </p>
  65. <div class="imgblock">
  66. <img src="images/searx.png" width=40% style="float:left; margin:1%;" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"/>
  67. <h4>Searx</h4>
  68. <p>
  69. Это метапоисковик с <a href="https://github.com/asciimoo/searx">открытым</a> исходным кодом, что позволяет каждому
  70. желающему поднять свой поисковый сервер. Обычный же пользователь может выбрать из множества уже существующих.
  71. Например, этих:<br>
  72. <a class="Button" href="https://search.stinpriza.org/">search.stinpriza.org</a>
  73. <a class="Button" href="https://a.searx.space/">a.searx.space</a>
  74. <a class="Button" href="https://searx.info">searx.info</a>
  75. <a class="Button" href="https://searx.be">searx.be</a> <br>
  76. (полный список доступен <a href="https://searx.space">здесь</a>)
  77. </p>
  78. <p>
  79. Он использует данные из множества источников, таких как Google, Yandex, DuckDuckGo, Bing, Yahoo!, Wikipedia...
  80. (Выбрать предпочтительные вы можете в настройках), что обеспечивает релевантную и гибко настраиваемую лично вами
  81. поисковую выдачу.
  82. </p>
  83. </div>
  84. <p>
  85. <h3>Вариант второй - гранты и общественные проекты</h3>
  86. В этом случае команда поддержки поисковика интегрируется с общественными движениям и делит финансирование от
  87. грантов и пожертвований наравне с доходами от неследящей рекламы в самой поисковой системе.
  88. </p>
  89. <div class="imgblock">
  90. <img src="images/ecosia.png" width=40% style="float:left; margin:1%;" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"/>
  91. <h4>Яркий пример — Ecosia</h4>
  92. <p>
  93. Этот поисковик направляет часть доходов от рекламы и грантов на посадку деревьев по всему миру. Задумка проста:
  94. хотите помочь озеленить планету — отключите блокировку рекламы на этом сайте и вперёд — сажайте
  95. деревья, просто используя поисковик!
  96. </p>
  97. <a class="Button" href="https://ecosia.org">Ecosia</a>
  98. </div>
  99. <p>
  100. <h3>Вариант третий - федерация</h3>
  101. Приверженцы этого подхода зашли с другой стороны. Основная проблема поиска — в огромных вычислительных ресурсах, необходимых
  102. для его нормальной работы, а купить датацентр может позволить себе далеко не каждый? Не проблема — мы просто распределим
  103. ресурсы. Каждый будет индексировать малюсенький кусочек сети со своего собственного слабого сервера и делиться результатами
  104. с остальными. И это действительно работает!
  105. <div class="imgblock">
  106. <img src="images/yacy.png" width=40% style="float:left; margin:1%;" onclick="openModal();currentSlide(3)" class="hover-shadow cursor"/>
  107. <h4>YaCy</h4>
  108. Этот вариант подойдёт продвинутым пользователям и системным администраторам, так как проект ориентирован
  109. в первую очередь на развёртывание инстанции "под себя". Всё достаточно просто — вы устанавливаете приложение,
  110. выбираете режим работы (P2P Mode — основной режим, при котором вы можете делиться своими результатами индексации
  111. и получать их от других по DHT, запрашивать и принимать запросы на удалённую индексацию, и многое другое;
  112. Search Portal — если вы уверены в своих силах и хотите составить свой собственный индекс Сети; Intranet — для поиска
  113. по локальному сайту или внутренней сети). Далее — индекируйте, всё, что вам вздумается, предоставляйте результаты
  114. сообществу, если хотите, а можете открыть свой портал остальным, например, друзьям и знакомым.
  115. <br>
  116. <a class="Button" href="https://yacy.net/">Yacy</a>
  117. </div>
  118. </div>
  119. <!-- gallery images block -->
  120. <div id="myModal" class="modal">
  121. <span class="close cursor" onclick="closeModal()">&times;</span>
  122. <div class="modal-content">
  123. <div class="mySlides">
  124. <div class="numbertext">Searx</div>
  125. <img src="images/searx.png" style="width:100%">
  126. </div>
  127. <div class="mySlides">
  128. <div class="numbertext">Ecosia</div>
  129. <img src="images/ecosia.png" style="width:100%">
  130. </div>
  131. <div class="mySlides">
  132. <div class="numbertext">YaCy</div>
  133. <img src="images/yacy.png" style="width:100%">
  134. </div>
  135. <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  136. <a class="next" onclick="plusSlides(1)">&#10095;</a>
  137. <div class="caption-container">
  138. <p id="caption"></p>
  139. </div>
  140. <div class="column">
  141. <img class="demo cursor" src="images/searx.png" style="width:100%" onclick="currentSlide(1)" alt="Searx">
  142. </div>
  143. <div class="column">
  144. <img class="demo cursor" src="images/ecosia.png" style="width:100%" onclick="currentSlide(2)" alt="Ecosia">
  145. </div>
  146. <div class="column">
  147. <img class="demo cursor" src="images/yacy.png" style="width:100%" onclick="currentSlide(3)" alt="YaCy">
  148. </div>
  149. </div>
  150. </div>
  151. </body>
  152. </html>