9A6A~1

1. Теоретические и практические основы проектирования информационного ресурса на примере разработки прототипа веб-сайта магазина

электроники
Студент: Брюханов Кирилл Антонович
Группа: 25КИС3
1

2. Актуальность, цель, объект, предмет

• Актуальность:
• 68% населения мира (5,5 млрд чел.) регулярно пользуются интернетом
• 75% покупателей ищут электронику онлайн перед покупкой
• Отсутствие сайта или устаревший дизайн отпугивает клиентов
• Цель: изучить теоретические основы проектирования и разработать прототип вебсайта магазина электроники
• Объект: процесс проектирования и разработки информационных веб-ресурсов
• Предмет: процесс разработки прототипа информационного ресурса (веб-сайта
магазина электроники)
2

3. Задачи работы

1. Изучить научно-техническую литературу по веб-разработке (HTML, CSS, JavaScript,
этапы создания сайта).
2. Выполнить анализ предметной области (магазин электроники), сформулировать
функциональные и нефункциональные требования.
3. Обосновать выбор программно-аппаратных средств (VS Code, Figma, браузер,
минимальные требования к ПК).
4. Разработать структуру сайта (логическую и физическую) и спроектировать
интерфейс — не менее 3 логических блоков.
3

4. Основные понятия

• Интернет – всемирная система объединённых компьютерных сетей (протокол
TCP/IP).
• Сайт – совокупность веб-страниц под одним доменным именем.
• HTML – язык гипертекстовой разметки (структура страницы: заголовки, абзацы,
изображения, ссылки).
• CSS – каскадные таблицы стилей (оформление: цвета, шрифты, расположение
блоков, адаптивность).
• JavaScript – язык программирования для интерактивности (фильтры, анимации,
обработка кликов без перезагрузки).
• Логическая структура – схема связей между страницами (понятна пользователю).
• Физическая структура – реальное расположение файлов и папок на сервере
(важна для разработчика).
4

5. Этапы разработки веб-ресурса

•Анализ требований – определение целей, аудитории, функций (для магазина: каталог, контакты).
•Проектирование – логическая схема, макеты в Figma, дизайн.
•Создание контента – тексты, фото товаров, характеристики.
•Техническая реализация – вёрстка HTML/CSS, программирование на JS (front-end).
•Тестирование – кроссбраузерность, адаптивность, скорость загрузки.
•Размещение и поддержка – хостинг, домен, обновление товаров, бэкапы.
5

6. Технологии и инструменты

• Языки:
• HTML5 – структура
• CSS3 – оформление (Flexbox/Grid для адаптивной сетки)
• JavaScript (ES6) – фильтрация товаров, меню-бургер
• Инструменты:
• Visual Studio Code – редактор кода (автодополнение, отладка, встроенный терминал)
• Figma – создание макетов страниц (онлайн, бесплатно)
• Google Chrome DevTools – тестирование, отладка, симуляция мобильных устройств
6

7. Анализ предметной области и целевая аудитория

• Магазин электроники – продажа смартфонов, ноутбуков, наушников, аксессуаров.
• Целевая аудитория:
• 18–35 лет – активно пользуются мобильными устройствами, следят за новинками
• 35–45 лет – ценят надёжность, качество, удобный поиск
• Основные конкуренты: М.Видео, Ситилинк, DNS, Ozon, Wildberries.
• Потребности пользователей:
• Быстрый поиск и фильтрация по цене/бренду
• Чёткие фото и характеристики товаров
• Контакты и адрес магазина
7

8. Функциональные требования

•Главная страница
– Приветствие, баннер с акцией («Скидки до 30%»)
– Блок «Популярные товары» (3–4 карточки с фото, названием, ценой)
– Навигационное меню, подвал с контактами
•Каталог
– Фильтр по категориям (смартфоны, ноутбуки, наушники) – реализован на JS
– Сетка товаров (минимум 6 карточек)
– Для каждого товара: название, цена, кнопка «Подробнее»
•Контакты
– Адрес, телефон, email, время работы
– Карта проезда (вставка Яндекс.Карт или статичное изображение)
– Форма обратной связи (демо, без реальной отправки)
8

9. Нефункциональные требования

• Производительность: загрузка страницы ≤ 3 секунд (при 1 Мбит/с).
• Доступность: 99,9% времени безотказной работы.
• Юзабилити:
– Интуитивная навигация, меню фиксировано при прокрутке
– Адаптивность под ПК, планшеты, смартфоны (320–1920px)
– Шрифт Century Gothic, заголовки 30px bold, основной текст 16px
• Цветовая схема:
– Белый фон (#FFFFFF)
– Чёрный/серый текст (#000000, #666666)
– Золотисто-жёлтые акценты (#f3bb2b) – кнопки, цены, логотип
• Безопасность: SSL-сертификат (HTTPS).
9

10. Выбор программно-аппаратных средств

• Visual Studio Code – бесплатный редактор:
– Подсветка синтаксиса HTML/CSS/JS
– Автодополнение кода (IntelliSense)
– Отладка, встроенный терминал, Git
• Figma – создание макетов:
– Онлайн-доступ, бесплатная версия
– Возможность создания кликабельных прототипов
• Минимальные требования к ПК разработчика:
– Процессор от 1,6 ГГц
– ОЗУ от 1 ГБ (рекомендуется 4 ГБ)
– 200 МБ свободного диска
• Со стороны пользователя: современный браузер (Chrome, Firefox, Safari).
10

11. Логическая структура сайта

• Схема:
Главная страница → Каталог → Контакты
Детализация каталога:
Каталог → Смартфоны / Ноутбуки / Наушники
11

12. Физическая структура

12

13. Дизайн. Логотип

• Описание логотипа:
• Слева – графический значок
• Справа – текст ELECTRO SHOP
• Цвет текста и значка – #f3bb2b (золотисто-жёлтый)
• Шрифт – строгий, без засечек, геометрический
13

14. Дизайн. Шрифты и цветовая палитра

• Шрифт: Century Gothic
• Заголовки (H1, H2) – bold, 30px
• Основной текст – normal, 16px
• Цены товаров – bold, 20px, цвет #f3bb2b
Назначение
Цвет
HEX
Фон основной
Белый
#FFFFFF
Фон карточек
Светло-серый
#F5F5F5
Заголовки
Чёрный
#000000
Основной текст
Тёмно-серый
#666666
Акценты (кнопки, цены,
лого)
Золотисто-жёлтый
#f3bb2b
Разделители
Серый
#CCCCCC
14

15. Макеты страниц

15

16. Заключение. Результаты работы

• Изучены теоретические основы веб-разработки (HTML, CSS, JS, этапы, инструменты)
• Проведён анализ предметной области магазина электроники
• Сформулированы функциональные требования (3 логических блока) и нефункциональные
требования (производительность, юзабилити, цвет, шрифт)
• Обоснован выбор программных средств (VS Code, Figma)
• Разработана логическая и физическая структура сайта
• Спроектирован интерфейс: логотип, шрифт Century Gothic, цветовая палитра (чёрный, белый,
серый, #f3bb2b)
• Созданы макеты главной страницы, каталога и контактов
• Цель достигнута, все задачи выполнены.
16

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

17