mrnotbadguy.github.io/about.html at master · justtails/mrnotbadguy.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>О сайте</title>
    <link rel='stylesheet' href='css/style.css'>
  </head>
  <body>
    <div id='fixed-header'>
      <div id='header-rollup-sidebar-btn' class='img-rot' onclick='changeSidebarCond()'></div>
      <div id='site-name'>Учебные Материалы</div>
    </div>
    <div id='body-area'>
      <div id='center-area' class='clearfix'>
        <div id='left-area' class='center-area-block-style'>
          <div id='sidebar'></div>
        </div>
        <div id='right-area' class='center-area-block-style'>
          <div id='content'>
            <!-- Контент для каждой страницы будет создаваться вручную, но с помощью Markdown, а не HTML. -->
            <div id='html-output-area'></div>
          </div>
        </div>
      </div>
    </div>

    <!--input type="button" value="Convert" onclick="run()"-->
    <script src='https://cdn.rawgit.com/showdownjs/showdown/1.9.0/dist/showdown.min.js'></script>
    <script src='js/convertMdToHtml.js'></script>
    <script src='js/sidebar.js'></script>
  </body>
</html>

<noscript>
# Подробности о сайте
Ресурс был разработан в качестве курсовой работы по предмету "Компьютерные сети и Интернет-технологии" и представляет из себя набор HTML-страниц, разработанных самостоятельно.

Суть курсовой работы заключается в том, чтобы показать основы работы с сервисом [GitHub Pages](https://pages.github.com) на примере разработки простейшего сайта учителя, на котором он может размещать дополнительные материалы к урокам, дополнительные задания, материалы лекций и другие познавательные материалы.

Раньше я часто сталкивался с тем, что если преподавателю нужно было передать что-то объективно актуальное, что-то интересное, ему приходилось либо распечатывать материалы на принтере, либо давать учащимся ссылку на ресурс, с которого они могут что-то почерпнуть. Но актуальной информации может быть много, учебники в школах обновляются нечасто, учебные программы тем более, а в сфере информационных технологий что-то новое появляется постоянно. Распечатывать на принтере все это слишком затратно, давать списывать ссылки, мягко скажем, непрактично и несовременно. Гораздо проще иметь под рукой один ресурс, с которого можно получить все, что надо. Соответственно, создание подобного ресурса позволит разгрузить преподавателя.

Если говорить о разработке сайта, то тут можно пойти различными путями. Самым популярным будет, вероятнее, создать ресурс с использованием [WordPress](https://ru.wordpress.com/create-website) или [Wix](https://ru.wix.com), но тут нужно учесть много нюансов платформ. Например, если говорить о Wix и о WordPress на площадке разработчиков, то тут ограничения по кастомизации сайта, по доступу к его дополнительным функциям, по загружаемым файлам и вездесущая реклама, конечно же. Без дополнительной оплаты ограничения снять нельзя. А с ограничениями показывать такой сайт ученикам, как минимум, постыдно. К тому же некоторые социальные сети, такие как **ВКонтакте**, блокируют ссылки на подозрительные сайты, а ссылки на тот же Wix считаются подозрительными.
Если рассматривать [WordPress](https://ru.wordpress.org/download/) как отдельный шаблон, то этих всех ограничений можно избавиться и сделать такой сайт, какой пожелаешь, **НО**... Придется покупать хостинг и, желательно, нормальное доменное имя, а для учителя ежемесячные траты на сайт, на который не так уж и часто будут заходить, это расточительство.

Именно поэтому одновременно простым и дешевым (а если сказать точнее, то **совершенно бесплатным**), будет размещение сайта на хостинге [GitHub Pages](https://pages.github.com). На нем разрешено размещать сайты с потенциально небольшим трафиком, только статичные страницы (можно использовать **JavaScript**, но никакого **PHP** и обращений к серверной части) и возможность по-быстрому соорудить сайт с помощью генератора шаблонов статичных сайтов **Jekyll** (о том, как это сделать быстро и безболезненно, рассказано [здесь](https://frontender.info/build-blog-jekyll-github-pages/)).

Кстати, насчет Jekyll. Он по стандарту поддерживается GitHub Pages, поэтому ничего сверх не потребуется. Для него существует множество различных дизайнов шаблона, которые можно выбрать в том числе и на GitHub и поставить без серьезных изменений в коде. И это позволит развернуть достойный учебный сайт буквально за сутки. Гораздо быстрее, чем это сделал я...

А я сделал это самым диким и мучительным способом - создал все с нуля. Но тоже в принципе неплохо. Ибо и так тоже можно, не возбраняется.
Сайт вовсю использует:
* HTML5
* CSS3
* JavaScript (боковое меню составляется скриптом)
* Markdown в качестве разметки статей (по факту скрипт на JS конвертирует текст из этой разметки в код HTML5)

Для Markdown я использовал библиотеку [ShowdownJS](https://github.com/showdownjs/showdown) и [скрипт товарища Oscar Morrison](https://github.com/oscarmorrison/md-page). Оба творения используют **свободную лицензию MIT**, в данном проекте их авторские права и требования лицензии соблюдены.
</noscript>