Создание_сайта_для_Державинского_лицея

1. Создание сайта для Державинского лицея с акцентом на современное оформление

Работу выполнили:
Пажитных Артур, Попов Роман
Ученики 9-2 класса
Руководитель:
Мальцева Мария Владимировна
Учитель информатики

2. Актуальность

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

3. Цель

• Создать современный, удобный и
функциональный сайт для
Державинского лицея
Задачи
1.
Собрать необходимую теоретическую информацию и список литературы по
разработке backend и frontend частей веб-сайтов.
2.
Провести анализ существующих сайтов образовательных учреждений и выявить
лучшие практики.
3.
Спроектировать архитектуру сайта, его дизайн и структуру базы данных.
4.
Разработать backend и frontend сайта.
5.
Провести тестирование и устранить найденные ошибки.
6.
Подготовить проект к защите.

4. Теоретическая часть

5. ГЛАВА 1. ТЕОРЕТИЧЕСКИЕ ОСНОВЫ РАЗРАБОТКИ ВЕБ-САЙТА 1.1. Понятие веб-сайтa

ГЛАВА 1. ТЕОРЕТИЧЕСКИЕ ОСНОВЫ РАЗРАБОТКИ ВЕБСАЙТА
1.1. Понятие веб-сайтa
Веб-сайт - это набор связанных между собой веб-страниц, размещённых в интернете и
доступных по одному адресу.
В нашем проекте мы не касались этой внутренней начинки. Мы просто взяли за основу
структуру реального сайта, повторили её и наполнили страницы типовыми текстами и
картинками.
1.2 Школьный веб-сайт
Любой сайт, особенно школьный, обязан быть удобным. Чтобы сайт подходил всем, важно
продумать две вещи: насколько логично он устроен и насколько приятно выглядит. Для
оценки этих качеств используются понятия UI¹⁰ и UX¹¹.
UX-дизайн отвечает за логику поведения пользователя на сайте и удобство навигации. UIдизайн определяет визуальное оформление - цвета, шрифты, расположение элементов. В
нашей работе основной упор сделан именно на UI.
Так что школьный сайт - это полноценный канал связи между учебным заведением и всеми,
кто с ним связан, и от его качества напрямую зависит, насколько комфортно людям будет эту
связь поддерживать.

6. ГЛАВА 2. СОВРЕМЕННОЕ ОФОРМЛЕНИЕ И ТЕХНОЛОГИИ РАЗРАБОТКИ ВЕБ-САЙТОВ 2.1. СОВРЕМЕННОЕ ОФОРМЛЕНИЕ ВЕБ-САЙТОВ

Современный дизайн сайтов включает визуальные и технические решения,
которые помогают быстрее воспринимать информацию.
Главный принцип современного дизайна - минимализм. Это отказ от всего
лишнего, что отвлекает от содержания.
Для практической части проекта были изучены сайты ведущих образовательных
организаций и платформ. По их примеру выбраны основные приёмы,
применённые в макете для Державинского лицея.
2.2. Технологии разработки веб-сайтов
Любой современный сайт строится на трёх основных технологиях: HTML 6, CSS7 и
JavaScript8.
HTML формирует структуру страницы. С его помощью создаются заголовки, абзацы,
списки, формы и места для картинок.
CSS отвечает за внешний вид: цвета, шрифты, размеры элементов и их расположение. В
проекте помимо базового CSS кода мы использовали фреймворк Bootstrap.
JavaScript добавляет интерактивность. С его помощью реализуются выпадающие меню,
плавные переходы и другие динамические эффекты, которые делают работу с сайтом
удобнее.

7. Практическая часть

• Работа над созданием сайта проводилась поэтапно. В
реализации участвовали два человека: разработка
пользовательского интерфейса (фронтенд) и серверной части
(бэкенд). Для фронтенда использовались языки HTML, CSS и
JavaScript, а также библиотека Bootstrap. Серверная часть
строилась на языке Python с применением Flask и базы
данных SQLite3.

8. Этапы

1.
Анализ структуры существующего сайта лицея
2.
Проектирование структуры главной страницы
3.
Выбор инструментов разработки
4.
Создание пользовательского интерфейса сайта
5.
Реализация адаптивного дизайна
6.
Реализация переключения темы оформления
7.
Реализация навигации по странице
8.
Создание поиска внутри страниц
9.
Создание структуры раздела документов
10. Подготовка структуры для будущей системы публикации новостей
11. Размещение сайта на хостинге

9.

10.

11.

12.

13. Заключение

QR-код для перехода на сайт:

14. Список литературы

1.
MDN Web Docs. HTML: HyperText Markup Language [Электронный ресурс] - URL:
https://developer.mozilla.org/en-US/docs/Web/HTML
2.
MDN Web Docs. CSS: Cascading Style Sheets [Электронный ресурс] - URL:
https://developer.mozilla.org/en-US/docs/Web/CSS
3.
MDN Web Docs. JavaScript [Электронный ресурс] - URL: https://developer.mozilla.org/enUS/docs/Web/JavaScript
4.
Metanit. JavaScript [Электронный ресурс] - URL: https://metanit.com/web/javascript/
5.
Bootstrap 5.3 Documentation [Электронный ресурс] - URL:
https://getbootstrap.com/docs/5.3/getting-started/introduction/
6.
Python Documentation [Электронный ресурс] - URL: https://docs.python.org/3/
7.
Flask Documentation [Электронный ресурс] - URL: https://flask.palletsprojects.com/
8.
SQLite Documentation [Электронный ресурс] - URL: https://www.sqlite.org/docs.html
9.
Официальный сайт МБОУ «Державинский лицей» [Электронный ресурс] - URL:
https://mydl.ru/
10.
Google Fonts. Коллекция шрифтов [Электронный ресурс] - URL: https://fonts.google.com/

15. Спасибо за внимание!