UP-26gr-2sem/2025-26/Отчеты/Отчет_Пивоварова.md

{

Отчёт о создании сайта «ВкусноЕд»

---

Выполнила: Пивоварова Анна
Дата сдачи: 23 июня 2026 года

---

1. Введение

В современном мире доставка еды стала неотъемлемой частью жизни многих людей. Целью данного проекта было создать полноценный сайт службы доставки еды «ВкусноЕд», который:

• работает без установки дополнительных программ
• открывается в любом браузере
• корректно отображается на компьютере и телефоне
• содержит интерактивные элементы: корзину, калькулятор калорий и мини-игры

В ходе работы были освоены базовые технологии веб-разработки: HTML, CSS и JavaScript.

---

2. Выбор платформы для создания сайта

Первоначальный план: конструктор сайтов

Изначально планировалось создавать сайт на конструкторе (Tilda, Wix или аналогичных платформах). Казалось, что это будет проще и быстрее.

Преимущества конструкторов:

• Не нужно программировать
• Визуальный редактор «перетащи и оставь»
• Много готовых шаблонов

Но были и недостатки:

• Ограниченный функционал в бесплатных версиях
• Сложно сделать что-то уникальное
• Платная подписка для полноценной работы
• Нельзя разместить на своём хостинге

Почему я выбрала ручную вёрстку и хостинг Beget

В процессе изучения вопроса я поняла, что хочу настоящий сайт, а не шаблонное решение. Поэтому приняла решение:

1. Научиться основам веб-разработки — HTML, CSS, JavaScript
2. Сделать сайт с нуля — полный контроль над дизайном и функционалом
3. Разместить на хостинге Beget — популярный российский хостинг с бесплатным тарифом для начала, удобным файловым менеджером, поддержкой PHP и баз данных, хорошей технической поддержкой

Сравнение подходов

Конструктор сайтов:

• Время создания: 1–2 дня
• Уникальность: низкая
• Гибкость: ограничена
• Стоимость: от 300 ₽/мес
• Навыки: не развиваются
• Переносимость: сложно

Ручная вёрстка + Beget:

• Время создания: 2–3 недели
• Уникальность: полная
• Гибкость: безгранична
• Стоимость: бесплатно
• Навыки: реальный опыт
• Переносимость: легко

Мой выбор: ручная вёрстка + Beget

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

---

3. Использование искусственного интеллекта

В процессе создания сайта я использовала искусственный интеллект (ИИ-ассистент Qwen) как инструмент помощи в разработке. ИИ помогал:

• Объяснять сложные технические понятия простым языком
• Писать и отлаживать код на HTML, CSS и JavaScript
• Находить ошибки в коде и предлагать решения
• Генерировать идеи для улучшения функционала
• Составлять структуру проекта и отчёта

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

---

4. Используемые технологии

HTML5 — структура сайта: заголовки, карточки, кнопки, страницы.

CSS3 — оформление: цвета, анимации, адаптивность, тени.

JavaScript — логика: корзина, переключение страниц, игры, калькулятор.

Canvas API — отрисовка игры «Тетрис».

Весь сайт состоит из одного файла index.html — стили и скрипты встроены внутрь. Это упрощает загрузку на хостинг и позволяет сайту работать офлайн.

---

5. Этапы разработки

Этап 1. Планирование

• Придумала название сайта: «ВкусноЕд»
• Определила целевую аудиторию: люди, заказывающие еду на дом
• Составила структуру: 3 страницы (Главная, Меню, О нас)
• Выбрала цветовую палитру
• Изучила возможности хостинга Beget

Этап 2. Изучение основ

• Посмотрела уроки по HTML и CSS для начинающих
• Разобралась с базовым синтаксисом JavaScript
• Изучила документацию по Canvas API для игр
• Почитала форумы о веб-разработке

Этап 3. Разработка структуры (HTML)

Создала «скелет» сайта:

• Шапка с логотипом и меню навигации
• Три страницы, переключающиеся без перезагрузки
• Блоки с блюдами, отзывами, информацией
• Всплывающая корзина
• Модальные окна для игр

Этап 4. Оформление (CSS)

Применила современный дизайн:

• Скруглённые углы (border-radius: 20px)
• Мягкие тени (box-shadow)
• Плавные анимации (hover, fade-in, shake)
• Адаптивность через медиа-запросы (@media)

Этап 5. Программирование (JavaScript)

Реализовала интерактивные функции:

• Массив из 25 блюд с данными (название, цена, калории, БЖУ)
• Функция переключения страниц showPage()
• Работающую корзину с подсчётом суммы
• Калькулятор калорий с прогресс-барами
• Фильтры блюд по категориям

Этап 6. Добавление игр

Создала три мини-приложения для получения скидок:

• Тетрис — классическая игра, скидка 50% за 500 очков
• Мемори — найди пары блюд за 30 секунд, скидка 20%
• Кликер — 50 кликов по пицце за 10 секунд, скидка 25%

Этап 7. Работа с изображениями

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

Этап 8. Тестирование и доработка

• Проверила работу на компьютере и телефоне
• Исправила ошибки с отображением картинок
• Добавила информацию о директоре (Пивоваровой А. С.)
• Протестировала все три игры

Этап 9. Подготовка к размещению на Beget

• Оптимизировала код
• Проверила все ссылки и пути к файлам
• Подготовила инструкцию по загрузке

---

6. Структура сайта

index.html (один файл, ~1500 строк)
├── <head>
│   ├── META-теги (кодировка, адаптивность)
│   └── <style> (весь CSS — около 500 строк)
│
── <body>
│   ├── Шапка (header) с навигацией
│   ├── Страница 1: Главная
│   │   ├── Hero-блок с фото
│   │   ├── Популярные блюда
│   │   ├── Преимущества
│   │   ├── Игры (Тетрис, Мемори, Кликер)
│   │   └── Отзывы (7 штук)
│   ├── Страница 2: Меню
│   │   ├── Фильтры по 7 категориям
│   │   ├── 25 карточек блюд
│   │   └── Калькулятор калорий
│   ├── Страница 3: Информация
│   │   ├── О компании
│   │   ├── Директор
│   │   ├── Отзывы
│   │   └── Доставка
│   ├── Корзина (выезжающая панель)
│   ├── Модальные окна (3 игры)
│   ── Футер
│
└── <script> (весь JS — около 600 строк)
    ├── Массив dishes (25 блюд)
    ├── Функции страниц
    ├── Логика корзины
    ├── Калькулятор калорий
    ├── Тетрис
    ├── Мемори
    └── Кликер

---

7. Дизайн и цветовая палитра

• Оранжевый (#FF6B35) — основной цвет, цены, кнопки
• Зелёный (#2ECC71) — калории, кнопки «В корзину», скидки
• Белый (#FFFFFF) — фон карточек
• Кремовый (#FFF8F0) — фон секций
• Тёмно-синий (#2C3E50) — основной текст, футер

Цвета заданы через CSS-переменные в блоке :root, что позволяет перекрасить весь сайт, изменив всего 5 строк кода.

---

8. Функциональные возможности

• Навигация — переключение между страницами без перезагрузки (SPA)
• Меню — 25 блюд с фильтрами по 7 категориям
• Корзина — добавление, изменение количества, подсчёт суммы
• Скидки — применяются автоматически к итоговой цене
• Калькулятор калорий — считает КБЖУ в реальном времени
• Отзывы — 7 развёрнутых отзывов с оценками
• Игры — Тетрис (50%), Мемори (20%), Кликер (25%)
• Адаптивность — корректное отображение на телефонах
• Анимации — hover-эффекты, тряска корзины, плавные переходы

---

9. Описание игр

Тетрис (скидка 50%)

Классическая игра с падающими фигурами. Нужно набрать 500 очков, чтобы получить максимальную скидку. Управление стрелками клавиатуры.

Мемори (скидка 20%)

Игра на память с карточками блюд. Нужно найти все 8 пар за 30 секунд. Карточки переворачиваются по клику.

Кликер (скидка 25%)

Динамичная игра на скорость. Нужно сделать 50 кликов по большой пицце за 10 секунд. При каждом клике пицца анимируется.

---

10. Возникшие проблемы и их решение

Проблема 1: Картинки не отображались

Причина: некоторые ссылки на изображения блокировались.
Решение: использовала стабильные ссылки с Unsplash и добавила автоматическую замену на эмодзи через onerror.

Проблема 2: Русские буквы превращались в «кракозябры»

Причина: неправильная кодировка при сохранении.
Решение: сохранила файл в кодировке UTF-8.

Проблема 3: Сложности с изучением JavaScript

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

Проблема 4: Адаптивность на мобильных устройствах

Причина: сайт «ломался» на маленьких экранах.
Решение: добавила медиа-запросы @media (max-width: 768px) для телефонов.

Проблема 5: Тетрис не работал корректно

Причина: ошибки в логике столкновений фигур.
Решение: тщательно протестировала каждую функцию и исправила баги.

---

11. Как запустить сайт

Локально (на своём компьютере)

1. Открыть файл index.html двойным кликом — запустится в браузере
2. Для редактирования — открыть в Блокноте или VS Code

На хостинге Beget

1. Зарегистрироваться на beget.com
2. Войти в панель управления
3. Открыть «Файловый менеджер»
4. Перейти в папку public_html
5. Загрузить файл index.html
6. Открыть свой домен — сайт доступен!

---

12. Источники изображений

Все фотографии взяты с бесплатного фотостока:

• Unsplash.com — высококачественные фото еды с лицензией для свободного использования

---

13. Выводы

В ходе работы над проектом я:

1. Освоила основы HTML, CSS и JavaScript
2. Научилась создавать адаптивные сайты
3. Поняла, как работает интерактивность в браузере
4. Создала работающий проект, который можно показать как портфолио
5. Разобралась с хостингом Beget и загрузкой файлов
6. Научилась работать с Canvas API для создания игр
7. Поняла разницу между конструкторами сайтов и ручной вёрсткой

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

Сайт получился ярким, функциональным и интересным для пользователей. Игровые элементы (Тетрис, Мемори, Кликер) повышают вовлечённость и мотивируют к заказу.

---

14. Планы на развитие

В будущем планирую добавить:

• Форму оформления заказа с вводом адреса и телефона
• Карту зон доставки (Яндекс.Карты API)
• Сохранение корзины и скидки в localStorage
• Сенсорное управление играми для телефонов
• Больше реальных фотографий блюд
• Уведомления о статусе заказа
• Мультиязычность (русский + английский)
• Статистику заказов (админ-панель)
• Личный кабинет пользователя
• Онлайн-оплату через платёжные системы

---

Приложения

Приложение 1. Скриншот главной страницы

[Вставить скриншот здесь]

Приложение 2. Скриншот страницы «Меню» с фильтрами

[Вставить скриншот здесь]

Приложение 3. Скриншот всплывающей корзины со скидкой

[Вставить скриншот здесь]

Приложение 4. Скриншот игры «Тетрис»

[Вставить скриншот здесь]

Приложение 5. Скриншот игры «Мемори»

[Вставить скриншот здесь]

Приложение 6. Скриншот игры «Кликер»

[Вставить скриншот здесь]

Приложение 7. Фрагмент кода (пример)

// Пример функции добавления в корзину
function addToCart(id) {
    const existing = cart.find(item => item.id === id);
    if (existing) {
        existing.qty++;
    } else {
        cart.push({ id: id, qty: 1 });
    }
    updateCart();
}

---

Что я узнала в процессе

Технические навыки

• Структура HTML-документа
• CSS-селекторы и свойства
• JavaScript функции и массивы
• Работа с DOM (Document Object Model)
• Canvas API для графики
• Адаптивная вёрстка
• Работа с хостингом

Мягкие навыки (soft skills)

• Умение искать информацию
• Решение проблем
• Терпение и настойчивость
• Работа с ошибками
• Тайм-менеджмент

---

Итог

Я довольна своим решением создать сайт вручную и разместить его на Beget. Это был вызов, но результат того стоил!

Сайт «ВкусноЕд» — это полноценный проект, который демонстрирует мои навыки в веб-разработке. Он готов к использованию и может быть легко расширен в будущем.

---

Отчёт подготовила: Пивоварова Анна
Дата сдачи: 23 июня 2026 года }