Федеральное агентство связи ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ

ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ «САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ ТЕЛЕКОММУНИКАЦИЙ ИМ. ПРОФ. М. А. БОНЧ-БРУЕВИЧА» (СПбГУТ)

Факультет инфокоммуникационных сетей и систем Кафедра программной инженерии и вычислительной техники

КУРСОВАЯ РАБОТА

по дисциплине «Web-технологии»

на тему «Популярное программное обеспечение»

Выполнил: студент 3-го курса дневного отделения группы ИКПИ-85

Коваленко Леонид Александрович Преподаватель:

профессор, к. т. н. Бузюков Лев Борисович

Санкт-Петербург

2020

2

1. Введение Целью работы является изучение литературы по заданной теме и

формирование сайта на основе собранного материала.

В процессе достижения цели необходимо решить ряд следующих задач:

•ознакомиться с современными технологиями и по возможности использовать их в своей разработке;

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

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

•ознакомиться с основными правилами и рекомендациями по разработке и созданию веб-сайтов и принципиально следовать им в своей практике;

•определиться со структурой веб-страниц;

•выбрать стратегию разработки и создания веб-сайта.

2. Постановка задачи Задача курсового проекта заключается в создании сайта, посвященного

популярному программному обеспечению, со следующими страницами:

•главная страница с каталогами-категориями программного обеспечения;

•динамическая страница каталога-категории с соответствующим ей списком программных обеспечений;

•динамическая страница программного обеспечения с информацией по нему.

Атакже на каждой странице будут присутствовать:

•верхняя навигационная панель (меню сайта) с поиском и переходом к каталогам-категориям по операционным системам;

•нижняя панель (подвал сайта) с email-адресом для обратной связи и копирайтом.

3

3.Используемое ПО

3.1HTML

При помощи текстового редактора Sublime Text 3 создается абстрактная модель на основе тегов HTML.

3.2 CSS

После создания абстрактной модели можно перейти к назначению каждому элементу некоторых классов CSS, которые могут быть как уже готовыми (Bootstrap Framework, см. ниже), так и ещё не разработанными.

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

После прописывания каждому элементу некоторых классов CSS можно переходить к написанию тех стилей CSS, что ещё не были разработаны. Для этого также используется текстовый редактор Sublime Text 3.

3.3 JavaScript

После создания статичных страниц можно добавить некоторую динамику. Например, коллапсирующую динамику «аккордеон» (раскрывающийся список) в меню сайта для удобной навигации с телефона. Для этого потребуется javascript-библиотека jQuery.

3.4 PHP

После реализации frontend-части веб-сайта можно добавить backendчасть на PHP для организации работы с базой данных. Для этого потребуется выделенный сервер. Воспользуемся бесплатным веб-хостингом InfinityFree (https://infinityfree.net/) — получим веб-сайт: http://ikpi85.rf.gd/. Проект поместим в каталог PopSoftware (т. е. http://ikpi85.rf.gd/PopSoftware/).

Для написания PHP-кода используем Sublime Text 3.

Базу данных создадим и настроим при помощи одного из сервисов выбранного веб-хостинга InfinityFree — «MySQL Databases».

4

4. Планирование Сайт ориентирован на ту часть целевой аудитории, которой нужно

скачать определенное программное обеспечение или получить какую-либо информацию по нему (в том числе перейти на страницу разработчика).

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

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

Этап планирования можно разделить на несколько пунктов:

•создание идеи;

•разработка структуры проекта;

•проработка макета проекта.

4.1Создание идеи

На данном этапе выбрана тема проекта «Популярное программное обеспечение». Далее, в соответствии с выбранной темой, собраны соответствующие материалы: текстовые и графические.

4.2 Разработка структуры проекта Структура проекта подразумевает под собой разделы сайта, в

соответствии с которыми будет формироваться навигационное меню и строиться дизайн проекта. Отдельные категории файлов помещены в свои папки: картинки в папку img, стили в папку css. В корне лежат основные страницы сайта:

•index.php — главная страница с каталогами-категориями программного обеспечения;

•catalog.php — страница каталога-категории с соответствующим ей списком программных обеспечений;

5

• software.php — страница программного обеспечения с информацией по нему.

Также вспомогательные файлы, которые подключаются во всех основных страницах сайта:

•файл меню сайта;

•файл подвала сайта.

4.2.1 Объектная модель

Объектная модель файла header.php представлена на рис. 4.1.

Рисунок 4.1 — Объектная модель файла header.php Объектная модель файла index.php представлена на рис. 4.2.

Рисунок 4.2 — Объектная модель файла index.php Объектная модель файла catalog.php представлена на рис. 4.3.

6

Рисунок 4.3 — Объектная модель файла catalog.php Объектная модель файла software.php представлена на рис. 4.4.

Рисунок 4.4 — Объектная модель файла software.php Объектная модель файла footer.php представлена на рис. 4.5.

Рисунок 4.5 — Объектная модель файла footer.php 4.2.2 Структура сайта

Структура сайта приведена на рис. 4.6.

Рисунок 4.6 — Структура сайта 7

4.3 Проработка макета проекта Макет может быть фиксированным и адаптивным. Фиксированный

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

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

8

5. Страницы сайта Главная страница сайта приведена на рис. 5.1.

Рисунок 5.1 — Главная страница сайта Каталог сайта «Офисное ПО» приведен на рис. 5.2.

Рисунок 5.2 — Каталог сайта «Офисное ПО»

9

Каталог сайта «Мультимедиа» приведен на рис. 5.3.

Рисунок 5.3 — Каталог сайта «Мультимедиа» Каталог сайта «Разработка» приведен на рис. 5.4.

Рисунок 5.4 — Каталог сайта «Разработка»

10

Каталог сайта «Интернет» приведен на рис. 5.5.

Рисунок 5.5 — Каталог сайта «Интернет» Каталог сайта «Безопасность» приведен на рис. 5.6.

Рисунок 5.6 — Каталог сайта «Безопасность»

11

Каталог сайта «Утилиты» приведен на рис. 5.7.

Рисунок 5.7 — Каталог сайта «Утилиты» Страница программного обеспечения (пример) приведена на рис. 5.8.

Рисунок 5.8 — Страница программного обеспечения «CCleaner Portable» Пример поиска по запросу приведен на рис. 5.9.

12