graph-shell.html 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title> Графическое окржение </title>
  5. <base href=".">
  6. <meta charset = "UTF-8"/>
  7. <link rel = "stylesheet" type = "text/css" href = "../css/graph-shell.css"/>
  8. <link href="../img/glider.ico" rel="icon" type="image/x-icon" />
  9. </head>
  10. <body>
  11. <center> <div class = "container">
  12. <header>
  13. <a href = "page-login.html" id = "button">
  14. Войти </a>
  15. <div id = "header-banner">
  16. <a href = "../main.html"> <img id = "logo" src="../img/logo-website.png"> </a>
  17. <p id = "text-header"> Руководство для начинающиего
  18. <span style = "color: red; font-size: 25px;">
  19. Линуксоида</span><span style = "color: #428bca;
  20. font-size: 20px">.org</span> <!-- #08FF28 -->
  21. </p>
  22. </div>
  23. </header>
  24. <a href = "../main.html" id = "button-prev"> Вернуться </a>
  25. <div class = "content">
  26. <h3 id = "content-header">
  27. Графическое окружение
  28. </h3>
  29. <br>
  30. <h3 id = "paragraph-head"> Как устроена графика в GNU/Linux?</h3>
  31. <p id="content-text">
  32. Данная тема очень сильно интересует продвинутых
  33. пользователей в GNU/Linux и почему же? А потому что это очень
  34. обширная и необычная тема для разговора. <br>
  35. Итак начнем! <br> <br>
  36. Выделяем три основных компонента и я перечислю их в порядке, как
  37. они запускаются при старте системы: <br> <br>
  38. 1. <i>DM (Display Manager)</i> <br>
  39. 2. <i>Display Server</i> <br>
  40. 3. <i>DE (Desktop Environment)</i> <br> <br>
  41. Дополнительно в качестве подпунктов у Desktop Environment: <br>
  42. * Apps Manager/Launcher/Switcher *<br>
  43. * WM (Window Manager) *<br>
  44. * различное ПО, поставляемое вместе со средой рабочего стола *<br> <br>
  45. Теперь подробно по каждому пункту... <br> <br>
  46. <h4 id="content-text" style = "text-align: center">
  47. DM (Display Manager)
  48. </h4>
  49. <p id="content-text">
  50. Это первое приложение, которое запускается при старте <графики>.
  51. По-русски оконный менеджер. Его основные задачи: <br>
  52. - спросить, каких пользователей пустить в систему, запросить аутентификационные
  53. данные (пароль, отпечаток пальца); <br>
  54. - выбрать, какую среду оформления рабочего стола запустить. <br> <br>
  55. На текущий момент в различных дистрибутивах широко используются: <br>
  56. * SDDM *<br>
  57. <img src="../img/sddm.png" style="width: 50%;
  58. height: 30%; margin: 14px 13px 0 15px;
  59. float: left; border-radius: 5px; border: 2px solid gray"> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
  60. * LightDM *<br>
  61. <img src="../img/lightdm.png" style="width: 50%;
  62. height: 30%; margin: 14px 13px 0 15px;
  63. float: left; border-radius: 5px; border: 2px solid gray"> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
  64. Главное, чтобы было понятно, что есть такое приложение,
  65. которое отвечает за запуск графики и допуск пользователя к этой графике, и
  66. есть разные реализации этого приложения, различающиеся внешним видом и немного
  67. функционалом.
  68. </p> <br>
  69. <h4 id="content-text" style = "text-align: center">
  70. Display Server
  71. </h4>
  72. <p id="content-text">
  73. Это некий фундамент графики, основная задача которого - работать с видеокартой,
  74. монитором и с различными устройствами ввода (клавиатура, мышь, тачпады). То есть
  75. приложению (например, браузер или текстовый редактор), которое отрисовывается в
  76. графике, не нужно знать, как напрямую работать с устройствами, не нужно знать про
  77. драйверы. Это все на себя берет <i>X Window</i>. <br>
  78. <center>
  79. <img src="../img/xorg.png" style="width: 40%;
  80. height: 30%; margin: 14px 13px 0 15px;
  81. border-radius: 10px; border: 2px solid gray"> <br> <br>
  82. </center>
  83. <p id="content-text">
  84. Когда говориться про Display Server, то много лет в GNU/Linux, да и в Unix имелось
  85. в виду приложение X Window System или в простонароде иксы.
  86. Сейчас во многих дистрибутивах внедряют Wayland.
  87. </p>
  88. </p>
  89. <h4 id="content-text" style = "text-align: center">
  90. Компоненты DE
  91. </h4>
  92. <p id="content-text">
  93. По факту DE это уже законченная графическая оболочка, с множеством различных
  94. плюшек, из которых собственно и состоит рабочий стол. <br>
  95. Значит пройдемся быстро по этим компонентам: <br>
  96. * кнопки пуск *<br>
  97. * докеры *<br>
  98. * службы, которые запускают приложения при нажатии горячих клавиш *<br>
  99. * меню-образные лаунчеры *<br>
  100. <center>
  101. <img src="../img/de.png" style="width: 40%;
  102. height: 30%; margin: 14px 13px 0 15px;
  103. border-radius: 10px; border: 2px solid gray"> <br> <br>
  104. </center>
  105. </p>
  106. <h4 id="content-text" style = "text-align: center">
  107. Оконный менеджер
  108. </h4>
  109. <p id="content-text">
  110. Это некое приложение, которое отвечает за управление окнами. Она добавляет
  111. возможность: <br>
  112. - перемещать окна по рабочему столу <br>
  113. - изменять размеры окон <br>
  114. - добавлять к интерфейсу окна заголовки и прочие элементы <br>
  115. - понятие, какое приложение находится в фокусе <br>
  116. <center>
  117. <img src="../img/wm.png" style="width: 40%;
  118. height: 30%; margin: 14px 13px 0 15px;
  119. border-radius: 10px; border: 2px solid gray"> <br> <br>
  120. </center>
  121. </p>
  122. <p id="content-text" style="text-align: center">
  123. Вот мы и рассмотрели основные понятие о графической среде. А подробнее вы можете
  124. узнать в интернете!
  125. </p>
  126. </p>
  127. </div>
  128. <div class = "clear"> </div>
  129. <footer >
  130. <div style = "padding: 5px">
  131. <div id = "left-bottom-hyper">
  132. <a href = "https://www.notabug.org/ZeroNe/MPKB">
  133. <img id = "pict-notabug2"
  134. src = "../img/notabug-logo.png">
  135. </a>
  136. <a href = "mailto:nik.pavlov.9191@inbox.ru">
  137. <img id = "pict-mail2"
  138. src = "../img/mail-logo.png">
  139. </a>
  140. </div>
  141. <p style = "font-family: FuturaRoundBold;
  142. font-size: 12px;
  143. margin: 4px 430px 0 430px;
  144. text-align: center;
  145. background: white;
  146. padding: 4px;
  147. border-radius: 15px; ">
  148. Автор сайта: Павлов Никита из гр. ИСП-932</p>
  149. <p style = "font-family:FuturaRoundBold;
  150. font-size: 12px;
  151. margin: -23px 35px 0 980px;
  152. text-align: center;
  153. background: white;
  154. padding: 4px;
  155. color: #428bca;
  156. border-radius: 15px; ">
  157. Версия сайта: 0.4 </p>
  158. </div>
  159. </footer>
  160. </div> </center>
  161. </body>
  162. </html>