|
|
@@ -0,0 +1,381 @@
|
|
|
+{
|
|
|
+# Отчёт о создании сайта «ВкусноЕд»
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+**Выполнила:** Пивоварова Анна
|
|
|
+
|
|
|
+**Ссылка на готовый сайт:** http://pivovale.beget.tech/
|
|
|
+
|
|
|
+**Дата сдачи:** 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`
|
|
|
+- Сенсорное управление играми для телефонов
|
|
|
+- Больше реальных фотографий блюд
|
|
|
+- Уведомления о статусе заказа
|
|
|
+- Мультиязычность (русский + английский)
|
|
|
+- Статистику заказов (админ-панель)
|
|
|
+- Личный кабинет пользователя
|
|
|
+- Онлайн-оплату через платёжные системы
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+### Приложение. Фрагмент кода (пример)
|
|
|
+
|
|
|
+```javascript
|
|
|
+// Пример функции добавления в корзину
|
|
|
+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. Это был вызов, но результат того стоил!
|
|
|
+
|
|
|
+Сайт «ВкусноЕд» — это полноценный проект, который демонстрирует мои навыки в веб-разработке. Он готов к использованию и может быть легко расширен в будущем.
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+*Отчёт подготовила: Пивоварова Анна*
|
|
|
+
|
|
|
+*Ссылка на готовый сайт:* http://pivovale.beget.tech/
|
|
|
+
|
|
|
+*Дата сдачи: 23 июня 2026 года*
|
|
|
+}
|
