XXVI Международный конкурс научно-исследовательских и творческих работ учащихся

Старт в науке

Создание макета веб-сайта «SchoolMax»

• Авторы
• Руководители
• Файлы работы
• Наградные документы

Кириченко М.Я. 1

---

1БМАОУ "Гимназия №5"

Гусева В.В. 1

---

1БМАОУ "Гимназия №5"

Работа в формате PDF

1.2 MB

Автор работы награжден дипломом победителя II степени

Диплом школьникаСвидетельство руководителя

ВВЕДЕНИЕ

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

Цель работы: разработать макет онлайн платформы, взяв в качестве образца тему по математике пятого класса, которая сможет предоставить условия для выбора системы получения образования школьникам всех возрастов и сделает доступнее альтернативу традиционной школьной программе обучения, дав учащимся всю необходимую информацию, материалы, задания и проверку по всем предметам, а также создаст инклюзии для детей с ограниченными возможностями.

Задачи:

• разработать интерфейс и дизайн сайта, который будет удобен и привлекателен для школьников разных возрастов;

• разработать функциональность сайта, позволяющий школьникам выбирать учебный предмет, чтобы получать соответствующие задания;

• создать раздел с теоретическим материалом, где школьники смогут изучать новые темы;

• обеспечить доступ к сайту как с компьютера, так и с мобильных устройств;

• провести тестирование сайта среди школьников разных возрастов и внести необходимые изменения и улучшения на основе полученной обратной связи.

Гипотеза: создание сайта, который даст альтернативу школьной программе, улучшит доступность образования, обеспечит индивидуальное обучение и повысит желание учеников получать новые знания и уровень их успеваемости.

Методы исследования:

• анализ конкурентов;

• анализ данных;

• дедукция;

• формализация; 

• опрос;

• беседа.

Актуальность работы: с ростом информационных технологий и интернета, традиционные методы обучения в школе становятся неактуальными и неэффективными для некоторой части учеников. Преимущества такого сайта очевидны, он позволяет обучающимся получать знания и информацию в любое удобное для них время и месте. Они могут просматривать лекции, выполнять задания и тесты в режиме онлайн, что особенно полезно для тех, кто развивается вне школы, ходя на различные кружки или проживает в удаленных районах.

ГЛАВА 1. Первый год работы

ТЕОРИЯ ВОПРОСА

ВЫБОР ЯЗЫКА И ТЕКСТОВОГО РЕДАКТОРА

Для создания веб сайта сначала необходимо определится с вопросом: Как мы будем его создавать? Мы можем воспользоваться специальным конструктором такими как Tilda Publishing или Mottor либо же писать все собственноручно. Разберем плюсы и минусы обоих вариантов:

Плюсы и минусы создания сайта собственноручно.

Плюсы и минусы создания сайта через конструкторы.

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

Следующее с чем нам нужно разобраться, это на чем писать? Поискав в интернете, выяснилось, что наиболее популярные языки для написания это:

• Java - используют как язык web-разработки в крупных финтех корпорациях.

• JavaScript - основной язык web-разработки, который используют фронтендеры.

• HTML - язык разметки, считываемый браузерами.

• CSS - язык стилей, который делает приложения и сайты визуально красивыми.

• PHP - Этот язык специально создали для web-разработки. На нем написано почти 78% всех сайтов в мире.

• Python - Язык со структурированным кодом и широкими возможностями.

• React - Отдельная библиотека для работы с сайтами в сети, которая базируется на JavaScript.

Больше всего у меня опыта в написании кодов на HTML, CSS и JavaScript, поэтому было принято решение писать на них. Этот проект очень масштабный, для того чтоб его делать сразу со всей функциональностью, поэтому для предотвращения неприятностей во время создания рабочего сайта, я начал работать над его макетом, где будут учтены все нюансы и недочеты, с целью их исправления во время создания конечного продукта.

И последний вопрос который нужно решить на данном этапе: в каком редакторе писать и хранить код. Вот самые популярные программы для этой задачи:

• Visual Studio Code;

• Sublime Text;

• Atom;

• WebStorm.

Также можно воспользоваться Notepad ++ или обычным блокнотом. Я предпочитаю работать в Visual Studio Code потому что она:

• Бесплатная;

• функциональная. В Visual Studio множество качественных плагинов. С их помощью можно расширить функциональность приложения и подключить другие языки;

• кроссплатформенная. Работает на MacOS, Ubuntu и Windows. Пока недоступен на Android и iOS;

• легковесная. Потребуется совсем мало ресурсов, чтобы приступить к работе с минималистичным VSC;

• легка для понимая новичкам (базовые функции).

Поэтому буду работать в данном редакторе, чтоб не терять время на разбор интерфейса других программ и решение проблем с их установкой и работоспособностью и не усложнять себе задачу поиском свободного места для посторонних ресурсов, а также чтоб не прибегать к лишним затратам.

ПОДГОТОВКА ДИЗАЙНА И ИНТЕРФЕЙСА

При создании такого проекта нельзя забывать про то что он должен нравится школьникам разных возрастов, а также быть легким в использовании, чтоб им мог пользоваться как ученик старших классов, так и дети, которые только пришли в школу. Для того чтобы сайт удовлетворял этим требованиям, нужно чтоб дизайн и интерфейс были взаимосвязаны, были одним организмом.

Школьная программа у меня ассоциируется со шкафом, в котором лежат большие папки (каждая папка олицетворяет все знания за год обучения), а данные в них отсортированы по предметам. Мною было принято решение создавать сайт исходя из этой ассоциации. Я создал несколько набросков на основе которых собирался работать над проектом (см. Приложение 1, рис.1 и рис.2).

Перейдем к цветовому оформлению. Прежде чем делать рабочий сайт нужно чтоб он при первом взгляде заинтересовал пользователя, ведь как говорится, встречают по одежке, а провожают по уму. Для того чтобы создать качественную палитру, рассмотрим несколько платформ, где ученик может получать новые знания.

• Учи.ру - Образовательная онлайн-платформа для школьников, их родителей и учителей.

• 99 балов - онлайн-школа по подготовке к ЕГЭ и ОГЭ по русскому языку, математике и другим предметам.

• Интернет-библиотека Алексея Комарова - одна из старейших и известнейших электронных библиотек Российского интернета, основана в 1996 году.

1) Учи.ру

Я считаю, что оформление платформы слишком детское, если учеников начальных классов данный дизайн завлекает, то у старшеклассников нет желания заниматься обучением, используя этот сайт. Скриншоты, подтверждающие мои слова, находятся в Приложении 1 (см. рис.3 и рис.4).

Как мы могли заметить лидирующие места занимают ученики начальной школы, в конце таблицы же находятся ученики средней и старшей школы.

2) 99 баллов

На мой взгляд, оформление данной платформы минималистичное, а большое количество свободного места сильно отвлекает от образовательного процесса. Дизайн сайта основан на контрасте цветов, что очень бросается в глаза и вместе с основным цветом фона заставляет наши глаза, а также восприятие постоянно находится в напряжении, следовательно, продуктивность быстро снижается (см. Приложение 1 рис.5).

3) Интернет-библиотека Алексея Комарова

Я считаю, что цветовая палитра данного сайта подобрана очень хорошо, все используемые цвета имеют одну тональность, что создает иллюзию отсутствия фона, взгляд цепляется только за текст, а посторонние детали либо скрываются, либо не перетягивают на себя внимание. Фон выбран тоже очень качественно, он ассоциируется с цветом страниц старых книг, что также позволяет забыть о том, что мы сидим за гаджетом, а не за реальной книгой (см. Приложение1 рис.6).

Теперь перейдем к интерфейсу. Интерфейс — это набор инструментов, который позволяет пользователю взаимодействовать с программой. В более широком смысле термин обозначает любые инструменты для соприкосновения между разными системами и сущностями. Так же рассмотрим интерфейс трех выше указанных сайтов, выделяя пункты, которые меня заинтересуют и которые учту в своей работе:

1) Учи.ру.:

• Наводясь на иконку, она увеличивается

• Структурированное меню – каждый раздел поделен на темы, которые в свою очередь поделены на микротемы (см. Приложение 1 рис.7)

• В заданиях есть подобные задания чтоб ученик, который не до конца разобрался с темой мог попрактиковать свои знания

• Ограничение по выполнению заданий – очень строгий лимит “энергии”, для продуктивности это очень мало.

• Платный контент – много платных услуг и мало бесплатных

2) 99 балов

• Удобная боковая панель меню

• Показ прогресса

• Есть база знаний и практика ко всем предметам (см. Приложение 1 рис.8)

• Помощь куратора если возникнет сложность

• Неграмотное использование пространства

3) Интернет-библиотека Алексея Комарова

• Есть поиск произведений по названиям или авторам

• Ссылки на непонятные слова

• Очень скудный интерфейс

Рассмотрев плюсы и минусы дизайна и интерфейса трех сайтов, можно преступать к выполнению практической части проекта, используя уже известную нам информацию и собирая новую, исходя из предпочтений предполагаемых пользователей.

ПРАКТИЧЕСКАЯ ЧАСТЬ РАБОТЫ

СОЗДАНИЕ ШАБЛОНА

Учтя слабые стороны 3-х вышеуказанных сайтов, принял решение создавать первый макет (см. Приложение 1 рис.1), так как визуально кажется, что пространства там больше и все внимание приходится на информационное поле, а не на второстепенные контейнеры. Цвета в разработке шаблона будут использоваться таким образом, чтоб видеть все контейнеры очень хорошо, не обращая на их привлекательность, то есть выделю их.

Для начала подготовим все необходимое для создания сайта. Создадим 2 папки на рабочем столе под названием “шаблон” и “сайт”. Ко второй папке вернемся позже, а сейчас займемся первой папкой. Мы будем работать на протяжении всего проекта с файлами двух расширений: .html и .css. Для этого создадим 2 текстовых документа и дадим им название index.html и styles.css. В первом мы будем хранить код сайта, а во втором – его оформление. Откроем эти документы при помощи VS Cod и начнем работу в документе с названием index.

Теперь немного познакомимся с HTML, чтоб лучше понимать, о чем идет речь. Весь код состоит из особых элементов или по-другому ключевых слов – тегов. Вот несколько тегов с которыми нам придется работать:

• <div> - Элемент-контейнер для разделов HTML-документа. Используется для группировки блочных элементов с целью форматирования стилями.

• <p>-<h6> - Создают заголовки шести уровней для связанных с ними разделов.

• <p> - Параграфы в тексте.

• <span> - Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов.

И так, посчитаем сколько минимум дивов потребуется нам для реализации данной страницы. Почему минимум? Потому что позже придется заключать одни контейнеры в другие, чтоб настроить правильное отображение всех элементов. У нас выходит 4 контейнера. Создадим их в документе. Как это все будет выглядеть можно увидеть в приложении 1 (см. рис.9).

Картина приняла такой вид, потому что по умолчанию у всех дивов стоит свойство display: block. Есть множество значений данного свойства, но вот те, которые используются чаще всего:

• inline: элемент становится строчным, подобно словам в строке текста.

• block: элемент становится блочным, как параграф.

• inline-block: элемент располагается как строка текста.

• flex: позволяет осуществлять гибкое позиционирование элементов.

Конечный результат с дополнительными настройками можно посмотреть в Приложении 1 (см. рис.10).

РАЗРАБОТКА ДИЗАЙНА

Говоря об оформлении сайта, нам надо разобраться как его настраивать. Есть два варианта: либо делать это непосредственно в html документе, что увеличивает его объем и затрудняет работу с ним, либо работать в отдельном документе где будут собраны только стили. Естественно второй вариант намного лучше, особенно если мы говорим об удобстве, так как VSC позволяет работать с множеством документов одновременно. Перед началом познакомимся с рядом свойств, с которыми мы будем чаще всего работать.

• Margin – отвечает за внешний отступ

• Padding – устанавливает значение полей вокруг содержимого

• Backgroundcolor – отвечает за фон контейнера

• Color – отвечает за цвет текста

• Text-alight или justify content – позиционирует контент

Мы уже создали примерный шаблон страницы, теперь нужно добавить ей детали, поработать над дизайном. Для начала разберемся, а какое оформление больше нравится потенциальным пользователям.

П о результату опроса, выяснилось, что большая часть предпочитает темные и спокойные цвета, поэтому в качестве основного цвета оформления возьмем фон сайтом интернет библиотеки. Я считаю, что этот цвет лучше всего подойдет в качестве фона текстового поля.

Один из контейнеров уже имеет свой цвет, осталось еще три. Как показал опыт сайта 99 баллов, контраст очень плохая идея, поэтому цвета будем делать одного тона или даже одинаковыми и при этом он не должен конкурировать с цветом фона информационного контейнера. В поисках данного цвета я обратился к сайту Encycolorpedia.ru, где собрано множество цветовых оттенков. Рассматривая цвета мой взор зацепился на цвете #222330 . Я заменил изначальные заглушки на данный цвет и решил его так оставить, но все еще чего-то не хватало, а все оставшиеся три контейнера слились в один. Чтоб исправить эту проблему я сделал для них обводку. Картина преобразилась, но была далека от совершенства, еще предстояло поработать с цветами текста, обводки, а также подумать, как можно улучшить верхний заголовок с названием сайта. Как выглядит страница на данном этапе можно посмотреть в Приложении 1 (см. рис.11).

СОЗДАНИЕ ИЗ ШАБЛОНА МАКЕТА

У нас уже имеется шаблона сайта или так называемая “болванка”, и теперь мы можем создавать из нее полноценный проект, а дизайн доработаем в скором времени. В самом начале мы создали папку “сайт”. Перейдем к работе с ней.

Для удобства работы нужно структурировать материал. Я решил создавать макет сайта на основе пятого класса и предмета математика. Создаем папку 5 класс и в этой папке будет храниться папка математика. Мы это делаем для того чтобы в будущем не было монотонной работы такой как: создать папку класса, добавить в нее папки предметов, в эти папки добавить текстовые документы, в документы вставить исходный код. В дальнейшем нас ждет куча монотонной работы, но ее нужно уменьшить до минимума. В папку математика копируем текстовые документы с кодом сайта и стилями.

Теперь вернемся к дизайну. Так такового плана о цветовом оформлении обводки контейнеров у меня не было, поэтому я пошел методом подбора, пробовал все цвета, которые имеются в редакторе. Вскоре я нашел цвет, который, по моему мнению, идеально вписывался в остальное оформление. Так же сделал белый фон для названия заголовка, скруглил его и дал название сайту “SchoolMax”, убрал линию под ссылками на другие страницы и добавил им немного анимации, а также сделал предупреждение о том, что сайт может не корректно работать на телефонах. На этом работа с дизайном окончена. Результат можно увидеть в Приложении 1 (см.рис.12)

Все что нам теперь осталось это копировать папку математика и вставить столько раз, сколько у нас предметов, а позже переименовать их. Когда эта работа была выполнена, я сделал тоже самое, но уже с папкой 5 класс. Теперь у нас есть многостраничный сайт, который хранится только у нас на устройстве, т.е. мой ноутбук является его сервером, но из-за того, что км нему доступ есть только у меня, сайт тоже вижу только я. Теперь наша задача создать хоть какой-нибудь функционал. Этим мы сейчас и займемся.

РАЗРАБОТКА ФУНКЦИОНАЛЬНОСТИ САЙТА

В общем смысле функциональность — это набор возможностей (функций), которые предоставляет данная система, устройство или человек. В моей работе в качестве понятия разработка функциональности я подразумеваю создание навигационных страниц с информацией для ученика. Для этого нам нужно найти чем заполнить эти страницы. Я рассмотрел несколько учебников разных авторов и создал вот такой план занятий по математике:

I) Натуральные числа и арифметические действия с ними:

1) Какими бывают числа и различие между числом и цифрой.

2) Сравнение натуральных чисел.

3) Арифметические операции с натуральными числами:

а) Сложение натуральных чисел. Особенности сложения.

б) Вычитание натуральных чисел. Особенности вычитания.

в) Умножение натуральных чисел. Особенности умножения.

г) Деление натуральных чисел.

4) Понятие степени числа.

5) Числовые и буквенные выражения.

6) Решение уравнений.

7) Комбинаторные задачи.

II) Знакомство с геометрией:

1) Основные формулы.

2) Учение о отрезке. Расчет длины отрезка.

3) Понятие плоскости и прямой.

4) Лучи. Координатный луч.

5) Изучение углов: разновидности и измерение.

6) Многоугольники:

а) Треугольники.

б) Прямоугольники.

7) Равные фигуры.

8) Ось симметрии.

9) Вычисление площади многоугольников.

10) Объемные фигуры:

а) Параллелепипед.

б) Пирамиды.

11) Объем фигур.

III) Дробные числа:

1) Понятие дроби. Разновидности дробей.

2) Смешанные числа и их применение.

3) Десятичная дробь.

4) Сравнение дробных чисел.

5) Арифметика с дробями:

а) Сложение дробей.

б) Вычитание дробей.

в) Умножение дробей.

г) Деление дробей.

6) Поиск среднеарифметического значения.

10) Проценты в математике:

а) Нахождение процентов от числа.

б) Нахождение числа по его процентам.

Такой план был сделан на основе того что эти темы наиболее часто встречаются в учебниках, по которым училось старшее поколение и по которым учится нынешнее поколение.

За основу интерфейса я взял страницу учи.ру, но все же внес небольшие изменения. После долгой работы, которая включала поиск картинок-заглушек, работу с отображением контента на странице, настройку анимации, структурирования всей информации по папкам и еще множества нюансов я получил удобный каталог, с делением информации на темы, которые подразделены на подтемы (результат см. Приложение 1 рис.13)

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

СОЗДАНИЕ ПЕРВОЙ ТЕМЫ ПЕРВОГО РАЗДЕЛА

Основная часть работы заключалась в поиске информации, ее систематизации и подготовки заданий. В качестве примера я взял эту же тему из учебника Мерзляка. Я выцепил оттуда всю нужную информацию и убрал множество примеров и “ходьбы вокруг да около”. Так же я добавил немного информации о том, что ученики будут изучать в дальнейшем. Когда все было готово и оформлено на листке, я стал превращать рисунок в код. Ничего сложного в этом не было, дольше всего я переписывал текст, дополняя его или сокращая в момент написания, чтоб читателю было легко понять суть написанного. Следующее над чем я думал, это как вписать решение практических заданий. Я решил это сделать при помощи тега <input>. Как этот тег работает: он получает информации от пользователя, которую тот вводит в специально отведенном для этого пространстве. У этого тега есть свои атрибуты и в зависимости от их значения, он может получать информацию разного рода, такую как:

• Текст

• Пароль

• Дата

• Время

• Цвет

• Шкала

После того как страница была закончена (см. Приложение 1 рис.14), нам остается поработать совсем чуть-чуть, чтоб оказаться на линии финиша. Этим мы сейчас и займемся.

СОЗДАНИЕ МЕНЮ ВХОДА И ВЫБОР ХОСТИНГА

И так, казалось бы, дизайн готов, интерфейс тоже, работу над функционалом мы недавно закончили, что же еще осталось? Нам нужно разработать стартовое меню и запустить наш сайт в Интернет. На данном этапе мы займемся созданием меню. Казалось бы, меню стартовое, а создаем мы его в конце. Это было сделано во избежание двойной работы. Основные темы всех страниц сайта должны совпадать, поэтому создавать страницу входа, раньше, чем основную, я посчитал не целесообразной и пустой тратой времени.

Когда у нас готово все выше перечисленное, с разработкой меню не создаст нам никаких проблем. Просмотрев стартовые страницы разных сайтов, я выявил несколько факторов которые должны быть учтены:

• скругленные углы меню;

• необходимо правильно вобрать масштаб меню;

• на взгляд более привлекательная картинка образуется, когда поле ввода подписано внутри, а не сверху;

• единая тема меню и страницы.

Особых проблем с созданием страницы не было, так как дизайн у нас готов, а разместить контейнеры в нужном порядке не составит труда. На работу с данным разделом у меня ушло не более 15 мин, с учетом многих поправок блока меню: изменение размеров текста, контейнеров, углов скругления, обводки. Конечный результат в Приложении 1 (см.рис.15)

Сейчас займемся выбором хостинга. Хостинг — это услуга по хранению сайта. Она нужна, чтобы пользователи интернета могли посещать его круглосуточно. Компания, которая предоставляет эту услугу, называется хостером, или хостинг-провайдером. Вот самые популярные хостинги:

• Beget;

• Timeweb;

• AdminVPS;

• Reg.ru;

• SprintHost.

У данных хостеров есть бесплатные услуги, но с ними очень много «заморочек» и ограничений, поэтому я решил использовать GitHub. GitHub — это облачный хостинг репозиториев Git, или папок, где Git отслеживает изменения, а также крупнейший веб-сервис для хостинга IT-проектов и их совместной разработки. Все что мне оставалось, это перенести папку с кодом сайта в облачное хранилище данного сервиса. На этом первая часть работы завершена. Сам сайт вы можете просмотреть по этой ссылке https://kirichmax.github.io/School-Max/ (Логин ScoolMax, пароль qwerty1234, работает вкладка математика).

ГЛАВА 2. Второй год работы

ТЕОРИЯ ВОПРОСА

ЧТО ТАКОЕ REACT?

React — это мощная JavaScript-библиотека для создания интерактивных пользовательских интерфейсов. Она позволяет строить интерфейс из независимых, легко поддерживаемых компонентов. Благодаря виртуальному DOM, React эффективно обновляет только те части интерфейса, которые изменились, обеспечивая высокую производительность. Это упрощает совместную разработку, позволяя командам и организациям легко объединять компоненты, созданные независимо. К известным проектам, созданным с помощью React, относятся, например, Facebook, Asana, Netflix и Airbnb.

Компоненты React — это функции JavaScript, принимающие данные (props) и возвращающие элементы, отображаемые на экране (JSX). Взаимодействие пользователя (например, ввод текста) приводит к обновлению данных, а React автоматически перерисовывает только необходимые компоненты, обеспечивая плавное и отзывчивое взаимодействие.

Ключевые преимущества React:

• Универсальность: Работает в различных средах: веб-браузерах, мобильных приложениях, умных устройствах (телевизоры, часы), VR-очках, консольных приложениях и даже чат-ботах.

• Гибкость: Позволяет использовать различные вспомогательные библиотеки и инструменты для маршрутизации, управления состоянием и других задач, предоставляя разработчикам свободу выбора.

• Читаемость и отладка: Разбиение приложения на компоненты значительно упрощает понимание кода и поиск ошибок.

React — это не просто библиотека, а целая экосистема, позволяющая создавать современные и масштабируемые приложения. Но у всего есть свои минусы и плюсы, давайте рассмотрим их в таблице.

Таблица 1.

Рассмотрев таблицу, мы можем заметить пункт, который упрощает нам создание сайта, а именно наличие JSX (в прошлом году был создан макет, написанный на HTML), а это значит, что нам остается только переписать уже существующий код под стилистику react. Также нам не придется работать над дизайном сайта, ведь все это было уже реализовано, а ближе ознакомится с процессом создания макета вы можете в главе 1.

ОСОБЕННОСТИ РАБОТЫ С REACT

Для того чтобы web-страница, написанная на react нам необходимо чтобы, были установлены 2-е очень важные вещи: Node.js и npm. Разберемся что это такое.

Node.js — это бесплатная кроссплатформенная среда выполнения JavaScript с открытым исходным кодом. Она создана на движке V8 от Google, который используется для преобразования JavaScript в компьютерный код.

Node.js подходит для разработки:

• Приложений, которые работают в режиме реального времени и поддерживают постоянное взаимодействие между клиентом и сервером. Примеры таких приложений — чаты, игры, видео-стриминг, инструменты для коллаборации.

• Высоконагруженных и высокопроизводительных веб-сервисов. Примеры: поисковые системы, социальные сети, облачные платформы.

• Приложений для интернета вещей. Node.js позволяет обрабатывать большие объёмы данных в реальном времени и взаимодействовать с разными протоколами и API.

• Образовательных платформ и инструментов. Для помощи студентам и преподавателям в изучении и преподавании программирования.

NPM (Node Package Manager) — менеджер пакетов для программной платформы Node.js. С его помощью можно устанавливать библиотеки, управлять зависимостями и редактировать метаданные проекта. Все пакеты хранятся в облачном репозитории на официальном сайте.

Так же очень важно инициализировать проект. Инициализация проекта React необходима для создания компонента с заданными реквизитами и состоянием по умолчанию. На этом этапе разработчик определяет реквизиты и начальное состояние компонента, обычно это делается в конструкторе компонента.

Для инициализации, установки библиотек и использования npm мы будем использовать терминал. Терминал в Visual Studio Code — это встроенная консоль, которая позволяет напрямую взаимодействовать с операционной системой компьютера. С помощью терминала можно выполнять различные команды, запускать скрипты, управлять файлами и папками, не покидая среду разработки.

ПРАКТИЧЕСКАЯ ДЕЯТЕЛЬНОСТЬ

СОЗДАНИЕ СТРУКТУРЫ САЙТА

Для начала работы нам потребуются Node.js и npm — без них дальнейшие шаги невозможны.

После установки Node.js и npm:

1. Создаем новую папку для вашего веб-сайта

2. Открываем эту папку в VS Code (или любом другом текстовом редакторе).

3. Инициализируем проект: во встроенном терминале VS Code выполняем команду npm init -y. Это создаст файл package.json, который будет хранить информацию о вашем проекте и его зависимостях.

4. После инициализации проекта устанавливаем необходимые библиотеки.

5. Создаем файлы и папки согласно определенной структуре проекта (эта структура будет описана в следующих главах).

6. После создания структуры проекта и установки всех необходимых библиотек, выполняем команду npm run start в терминале. Это запустит веб-сервер, и мы увидите пустую страницу по адресу `http://localhost:3000/`. Теперь мы можем начать разработку сайта.

СОЗДАНИЕ ОКНА ВХОДА И РЕГИСТРАЦИИ

У нас есть главная папка schoolmax, в ней создаем папки puplic и src. В первой папке будут храниться HTML-документ, который и будет являться основной страницей нашего сайта, а во второй папке создаем файл App.js и index.js. В App.js мы будем собирать все наши компоненты, а в index.js мы будем импортировать App.js.Также в эту папку добавим папку components, в которой мы будем хранить все наши компоненты. В HTML-документ добавляем данный код:

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="utf-8" />

<title>SchoolMax</title>

</head>

<body>

<div id="root"></div>

</body>

</html>

В index.js мы пишем такой код:

import React from 'react';

import ReactDOM from 'react-dom/client';

import './index.css';

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

<React.StrictMode>

<App />

</React.StrictMode>

);

Если в index.html запись кода стандартная и используется во всех проектах, то вот с index.js нужно разобраться.

В самом начале мы импортируем две библиотеки react, затем подключаем CSS файл со стилями, а в конце мы импортируем файл App.js. ниже мы создаем константу root и присваиваем ей значение в котором мы получаем доступ к элементу с индификатором root. Дальше мы отображаем компонент App на странице нашего сайта.

Перед тем как работать с файлом App.js давайте рассмотрим и проанализируем страницу входа старого макета.

Рис.1

Мы можем разбить данную страницу на два компонента: заголовок и панель входа. Создаем в папке components два файла: Header.js и LoginForm.js, и заполняем их кодом или же подругому занимаемся версткой, далее импортируем их в компонент App.js. Далее нам нужно создать две страницы, на одну из которых нас будет переносить на главную страницу сайта при нажатии кнопки вход, а вторая будет открываться при нажатии кноки регистрация. Для этого создадим папку pages и добавим туда два файла Dashboard.js и RegisterPage.js. К созданию страницы регистрации мы вернемся чуть позже, покаже воссоздадим основную страницу.

ДОРАБОТКА ОСТАЛЬНЫХ СТРАНИЦ

Дальнейшая наша работа будет заключаться в том чтобы переписать HTML-код синтаксисом React. В ходе работы были добавлены такие новшества как: вызов и скрытие меню предметов нажатием на кнопку, проверка наличия пользователя в базе данных. Когда верстка сайта была закончена, нам остается выложить наш сайт в открытый репозиторий GitHub https://kirichmax.github.io/schoolmax/ (Логин ScoolMax, пароль qwerty1234, работает вкладка математика)

ЗАКЛЮЧЕНИЕ

Работа была закончена и теперь нам нужно подвести итоги, узнать насколько продуктивной была наша работа. Начнем по порядку. Цель работы – создать макет онлайн платформы была выполнена. Теперь рассмотрим задачи.

Первой задачей у нас была разработка интерфейса и дизайна сайта. С ней мы справились, опираясь на анализ похожих сайтов, а также ориентируясь на предпочтениях наших потенциальных пользователей.

Разработка функциональности сайта была наша вторая задача и она была успешно достигнута, путем поиска, анализа и структурирования необходимых тем всего предмета.

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

Мы предоставили доступ к сайту как с телефона, так и с компьютера. Оптимизация на некоторых марках смартфонов еще хромает, но сама задача выполнена, так как заниматься на телефонах возможно, хоть и не совсем удобно.

Последней задачей для нас был опрос пользователей. Мы узнали их предпочтения и внесли коррективы в дизайн и интерфейс сайта.

На данном этапе мы не можем ни опровергнуть, ни доказать гипотезу, но в ходе разговоров с учениками различных возрастов, выяснилось, что они бы были рады появлению в открытом доступе столь полезного сайта.

СПИСОК ИСПОЛЬЗУЕМОЙ ЛИТЕРАТУРЫ

1. Node.js — основы : [Электронный ресурс] // Эльбрус буткемп. — URL: https://elbrusboot.camp/blog/node-js/

2. Node.js // Википедия : свободная энциклопедия. — URL: https://ru.wikipedia.org/wiki/Node.js

3. React : [Электронный ресурс] // React. — URL: https://react.dev/

4. Node.js : [Электронный ресурс] // Node.js. — URL: https://nodejs.org/

5. npm : руководство по командной строке (v8) : [Электронный ресурс] // npm. — URL: https://docs.npmjs.com/cli/v8/commands/npm/

6. Алгебра и начала анализа: Учеб. для 10-11 кл. сред. шк. / А. Н. Колмогоров, Ю. М. Колягин, М. В. Ткачева и др.; Под ред. А. Н. Колмогорова, А. М. Абрамова, Ю. П. Дудницына. – М.: Просвещение, 1989.

7. Математика: Учебник для IX класса незавершенного лицея / Б.Г. Зив, А.С. Шварцбурд. – М.: Просвещение, 1995.

8. Математика: Учебник для 10-11 классов общеобразоват. учреждений / В.В. Голобородько, А.В. Ленев. – М.: Мнемозина, 2002.

9. Математика: Учебник для 10-11 классов: базовый и углубл. уровни / М.К. Потапов, М.А. Шабунин. – М.: Просвещение, 2010.

10. Федеральный государственный образовательный стандарт среднего общего образования (ФГОС СОО). - М.: Министерство образования и науки Российской Федерации, 2012.

Приложение 1

ИЛЛЮСТРАЦИИ К РАБОТЕ

Рис.1

Рис.2

Рис.3

Рис.4

Рис.5

Рис.6

Рис.7

Рис.8

Рис.9

Рис.10

Рис.11

Рис.12

Рис.13

Рис.14

Рис.15