|
|
@@ -0,0 +1,415 @@
|
|
|
+# ?? Отчёт о создании сайта «ВкусноЕд»
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## ТИТУЛЬНЫЙ ЛИСТ
|
|
|
+
|
|
|
+```
|
|
|
+ОТЧЁТ
|
|
|
+о выполнении творческого проекта
|
|
|
+по веб-разработке
|
|
|
+
|
|
|
+Тема: «Создание сайта доставки еды "ВкусноЕд"»
|
|
|
+
|
|
|
+Выполнила: Пивоварова Анна
|
|
|
+Дата сдачи: 23 июня 2026 года
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 1?? ВВЕДЕНИЕ
|
|
|
+
|
|
|
+В современном мире доставка еды стала неотъемлемой частью жизни многих людей. Целью данного проекта было создать **полноценный сайт службы доставки еды** «ВкусноЕд», который:
|
|
|
+
|
|
|
+- работает без установки дополнительных программ
|
|
|
+- открывается в любом браузере
|
|
|
+- корректно отображается на компьютере и телефоне
|
|
|
+- содержит интерактивные элементы: корзину, калькулятор калорий и мини-игры
|
|
|
+
|
|
|
+В ходе работы были освоены базовые технологии веб-разработки: **HTML, CSS и JavaScript**.
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 2?? ВЫБОР ПЛАТФОРМЫ ДЛЯ СОЗДАНИЯ САЙТА
|
|
|
+
|
|
|
+### Первоначальный план: конструктор сайтов
|
|
|
+
|
|
|
+Изначально планировалось создавать сайт на конструкторе (Tilda, Wix или аналогичных платформах). Казалось, что это будет проще и быстрее:
|
|
|
+
|
|
|
+**Преимущества конструкторов:**
|
|
|
+- ? Не нужно программировать
|
|
|
+- ? Визуальный редактор «перетащи и оставь»
|
|
|
+- ? Много готовых шаблонов
|
|
|
+
|
|
|
+**Но были и недостатки:**
|
|
|
+- ? Ограниченный функционал в бесплатных версиях
|
|
|
+- ? Сложно сделать что-то уникальное
|
|
|
+- ? Платная подписка для полноценной работы
|
|
|
+- ? Нельзя разместить на своём хостинге
|
|
|
+
|
|
|
+### Почему я выбрала ручную вёрстку и хостинг Beget
|
|
|
+
|
|
|
+В процессе изучения вопроса я поняла, что хочу **настоящий сайт**, а не шаблонное решение. Поэтому приняла решение:
|
|
|
+
|
|
|
+1. **Научиться основам веб-разработки** — HTML, CSS, JavaScript
|
|
|
+2. **Сделать сайт с нуля** — полный контроль над дизайном и функционалом
|
|
|
+3. **Разместить на хостинге Beget** — популярный российский хостинг с:
|
|
|
+ - Бесплатным тарифом для начала
|
|
|
+ - Удобным файловым менеджером
|
|
|
+ - Поддержкой PHP и баз данных
|
|
|
+ - Хорошей технической поддержкой
|
|
|
+
|
|
|
+**Сравнение подходов:**
|
|
|
+
|
|
|
+| Критерий | Конструктор сайтов | Ручная вёрстка + Beget |
|
|
|
+|----------|-------------------|----------------------|
|
|
|
+| Время создания | 1–2 дня | 2–3 недели |
|
|
|
+| Уникальность | Низкая | Полная |
|
|
|
+| Гибкость | Ограничена | Безгранична |
|
|
|
+| Стоимость | От 300 ?/мес | Бесплатно |
|
|
|
+| Навыки | Не развиваются | Реальный опыт |
|
|
|
+| Переносимость | Сложно | Легко |
|
|
|
+| **Мой выбор** | ? | ? |
|
|
|
+
|
|
|
+**Вывод:** Хотя создание сайта вручную заняло больше времени, я получила **бесценный опыт** и **настоящий рабочий проект**, который можно развивать и улучшать.
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 3?? ИСПОЛЬЗУЕМЫЕ ТЕХНОЛОГИИ
|
|
|
+
|
|
|
+| Технология | Для чего использовалась |
|
|
|
+|------------|------------------------|
|
|
|
+| **HTML5** | Структура сайта: заголовки, карточки, кнопки, страницы |
|
|
|
+| **CSS3** | Оформление: цвета, анимации, адаптивность, тени |
|
|
|
+| **JavaScript** | Логика: корзина, переключение страниц, игры, калькулятор |
|
|
|
+| **Canvas API** | Отрисовка игры «Тетрис» |
|
|
|
+
|
|
|
+Весь сайт состоит из **одного файла** `index.html` — стили и скрипты встроены внутрь. Это упрощает загрузку на хостинг и позволяет сайту работать офлайн.
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 4?? ЭТАПЫ РАЗРАБОТКИ
|
|
|
+
|
|
|
+### Этап 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
|
|
|
+- Оптимизировала код
|
|
|
+- Проверила все ссылки и пути к файлам
|
|
|
+- Подготовила инструкцию по загрузке
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 5?? СТРУКТУРА САЙТА
|
|
|
+
|
|
|
+```
|
|
|
+index.html (один файл, ~1500 строк)
|
|
|
++-- <head>
|
|
|
+¦ +-- META-теги (кодировка, адаптивность)
|
|
|
+¦ L-- <style> (весь CSS — около 500 строк)
|
|
|
+¦
|
|
|
++-- <body>
|
|
|
+¦ +-- Шапка (header) с навигацией
|
|
|
+¦ +-- Страница 1: Главная
|
|
|
+¦ ¦ +-- Hero-блок с фото
|
|
|
+¦ ¦ +-- Популярные блюда
|
|
|
+¦ ¦ +-- Преимущества
|
|
|
+¦ ¦ +-- Игры (Тетрис, Мемори, Кликер)
|
|
|
+¦ ¦ L-- Отзывы (7 штук)
|
|
|
+¦ +-- Страница 2: Меню
|
|
|
+¦ ¦ +-- Фильтры по 7 категориям
|
|
|
+¦ ¦ +-- 25 карточек блюд
|
|
|
+¦ ¦ L-- Калькулятор калорий
|
|
|
+¦ +-- Страница 3: Информация
|
|
|
+¦ ¦ +-- О компании
|
|
|
+¦ ¦ +-- Директор
|
|
|
+¦ ¦ +-- Отзывы
|
|
|
+¦ ¦ L-- Доставка
|
|
|
+¦ +-- Корзина (выезжающая панель)
|
|
|
+¦ +-- Модальные окна (3 игры)
|
|
|
+¦ L-- Футер
|
|
|
+¦
|
|
|
+L-- <script> (весь JS — около 600 строк)
|
|
|
+ +-- Массив dishes (25 блюд)
|
|
|
+ +-- Функции страниц
|
|
|
+ +-- Логика корзины
|
|
|
+ +-- Калькулятор калорий
|
|
|
+ +-- Тетрис
|
|
|
+ +-- Мемори
|
|
|
+ -- Кликер
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 6?? ДИЗАЙН И ЦВЕТОВАЯ ПАЛИТРА
|
|
|
+
|
|
|
+| Цвет | HEX | Применение |
|
|
|
+|------|-----|-----------|
|
|
|
+| ?? Оранжевый | `#FF6B35` | Основной цвет, цены, кнопки |
|
|
|
+| ?? Зелёный | `#2ECC71` | Калории, кнопки «В корзину», скидки |
|
|
|
+| ? Белый | `#FFFFFF` | Фон карточек |
|
|
|
+| ?? Кремовый | `#FFF8F0` | Фон секций |
|
|
|
+| Тёмно-синий | `#2C3E50` | Основной текст, футер |
|
|
|
+
|
|
|
+Цвета заданы через CSS-переменные в блоке `:root`, что позволяет перекрасить весь сайт, изменив всего 5 строк кода.
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 7?? ФУНКЦИОНАЛЬНЫЕ ВОЗМОЖНОСТИ
|
|
|
+
|
|
|
+? **Навигация** — переключение между страницами без перезагрузки (SPA)
|
|
|
+? **Меню** — 25 блюд с фильтрами по 7 категориям
|
|
|
+? **Корзина** — добавление, изменение количества, подсчёт суммы
|
|
|
+? **Скидки** — применяются автоматически к итоговой цене
|
|
|
+? **Калькулятор калорий** — считает КБЖУ в реальном времени
|
|
|
+? **Отзывы** — 7 развёрнутых отзывов с оценками
|
|
|
+? **Игры** — Тетрис (50%), Мемори (20%), Кликер (25%)
|
|
|
+? **Адаптивность** — корректное отображение на телефонах
|
|
|
+? **Анимации** — hover-эффекты, тряска корзины, плавные переходы
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 8?? ОПИСАНИЕ ИГР
|
|
|
+
|
|
|
+### ?? Тетрис (скидка 50%)
|
|
|
+Классическая игра с падающими фигурами. Нужно набрать **500 очков**, чтобы получить максимальную скидку. Управление стрелками клавиатуры.
|
|
|
+
|
|
|
+### ?? Мемори (скидка 20%)
|
|
|
+Игра на память с карточками блюд. Нужно найти все **8 пар** за **30 секунд**. Карточки переворачиваются по клику.
|
|
|
+
|
|
|
+### ?? Кликер (скидка 25%)
|
|
|
+Динамичная игра на скорость. Нужно сделать **50 кликов** по большой пицце за **10 секунд**. При каждом клике пицца анимируется.
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 9?? ВОЗНИКШИЕ ПРОБЛЕМЫ И ИХ РЕШЕНИЕ
|
|
|
+
|
|
|
+### Проблема 1: Картинки не отображались
|
|
|
+**Причина:** некоторые ссылки на изображения блокировались.
|
|
|
+**Решение:** использовала стабильные ссылки с Unsplash и добавила автоматическую замену на эмодзи через `onerror`.
|
|
|
+
|
|
|
+### Проблема 2: Русские буквы превращались в «кракозябры»
|
|
|
+**Причина:** неправильная кодировка при сохранении.
|
|
|
+**Решение:** сохранила файл в кодировке **UTF-8**.
|
|
|
+
|
|
|
+### Проблема 3: Сложности с изучением JavaScript
|
|
|
+**Причина:** раньше не программировала.
|
|
|
+**Решение:** смотрела видеоуроки, задавала вопросы на форумах, практиковалась на простых примерах.
|
|
|
+
|
|
|
+### Проблема 4: Адаптивность на мобильных устройствах
|
|
|
+**Причина:** сайт «ломался» на маленьких экранах.
|
|
|
+**Решение:** добавила медиа-запросы `@media (max-width: 768px)` для телефонов.
|
|
|
+
|
|
|
+### Проблема 5: Тетрис не работал корректно
|
|
|
+**Причина:** ошибки в логике столкновений фигур.
|
|
|
+**Решение:** тщательно протестировала каждую функцию и исправила баги.
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## ?? КАК ЗАПУСТИТЬ САЙТ
|
|
|
+
|
|
|
+### Локально (на своём компьютере)
|
|
|
+1. Открыть файл `index.html` двойным кликом — запустится в браузере
|
|
|
+2. Для редактирования — открыть в Блокноте или VS Code
|
|
|
+
|
|
|
+### На хостинге Beget
|
|
|
+1. Зарегистрироваться на beget.com
|
|
|
+2. Войти в панель управления
|
|
|
+3. Открыть «Файловый менеджер»
|
|
|
+4. Перейти в папку `public_html`
|
|
|
+5. Загрузить файл `index.html`
|
|
|
+6. Открыть свой домен — сайт доступен!
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 1??1?? ИСТОЧНИКИ ИЗОБРАЖЕНИЙ
|
|
|
+
|
|
|
+Все фотографии взяты с бесплатного фотостока:
|
|
|
+
|
|
|
+- **Unsplash.com** — высококачественные фото еды с лицензией для свободного использования
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 1??2?? ВЫВОДЫ
|
|
|
+
|
|
|
+В ходе работы над проектом я:
|
|
|
+
|
|
|
+1. ? Освоила основы HTML, CSS и JavaScript
|
|
|
+2. ? Научилась создавать адаптивные сайты
|
|
|
+3. ? Поняла, как работает интерактивность в браузере
|
|
|
+4. ? Создала работающий проект, который можно показать как портфолио
|
|
|
+5. ? Разобралась с хостингом Beget и загрузкой файлов
|
|
|
+6. ? Научилась работать с Canvas API для создания игр
|
|
|
+7. ? Поняла разницу между конструкторами сайтов и ручной вёрсткой
|
|
|
+
|
|
|
+**Главный вывод:** Создание сайта вручную оказалось **сложнее, но намного интереснее**, чем использование конструктора. Я получила реальные навыки программирования, которые пригодятся в будущем.
|
|
|
+
|
|
|
+Сайт получился **ярким, функциональным и интересным** для пользователей. Игровые элементы (Тетрис, Мемори, Кликер) повышают вовлечённость и мотивируют к заказу.
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 1??3?? ПЛАНЫ НА РАЗВИТИЕ
|
|
|
+
|
|
|
+В будущем планирую добавить:
|
|
|
+
|
|
|
+- Форму оформления заказа с вводом адреса и телефона
|
|
|
+- ??? Карту зон доставки (Яндекс.Карты API)
|
|
|
+- Сохранение корзины и скидки в `localStorage`
|
|
|
+- ?? Сенсорное управление играми для телефонов
|
|
|
+- ??? Больше реальных фотографий блюд
|
|
|
+- ?? Уведомления о статусе заказа
|
|
|
+- ?? Мультиязычность (русский + английский)
|
|
|
+- ?? Статистику заказов (админ-панель)
|
|
|
+- ?? Личный кабинет пользователя
|
|
|
+- ?? Онлайн-оплату через платёжные системы
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## ?? ПРИЛОЖЕНИЯ
|
|
|
+
|
|
|
+### Приложение 1. Скриншот главной страницы
|
|
|
+*[Вставить скриншот здесь]*
|
|
|
+
|
|
|
+### Приложение 2. Скриншот страницы «Меню» с фильтрами
|
|
|
+*[Вставить скриншот здесь]*
|
|
|
+
|
|
|
+### Приложение 3. Скриншот всплывающей корзины со скидкой
|
|
|
+*[Вставить скриншот здесь]*
|
|
|
+
|
|
|
+### Приложение 4. Скриншот игры «Тетрис»
|
|
|
+*[Вставить скриншот здесь]*
|
|
|
+
|
|
|
+### Приложение 5. Скриншот игры «Мемори»
|
|
|
+*[Вставить скриншот здесь]*
|
|
|
+
|
|
|
+### Приложение 6. Скриншот игры «Кликер»
|
|
|
+*[Вставить скриншот здесь]*
|
|
|
+
|
|
|
+### Приложение 7. Фрагмент кода (пример)
|
|
|
+```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. Это был вызов, но результат того стоил!
|
|
|
+
|
|
|
+Сайт «ВкусноЕд» — это полноценный проект, который демонстрирует мои навыки в веб-разработке. Он готов к использованию и может быть легко расширен в будущем.
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+*Отчёт подготовила: **Пивоварова Анна***
|
|
|
+*Дата сдачи: **23 июня 2026 года***
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## ?? Советы по оформлению отчёта в Word
|
|
|
+
|
|
|
+Если нужно сдать отчёт в формате Word или PDF:
|
|
|
+
|
|
|
+1. **Шрифт:** Times New Roman, 14 пт
|
|
|
+2. **Межстрочный интервал:** 1.5
|
|
|
+3. **Поля:** левое 3 см, правое 1.5 см, верх/низ 2 см
|
|
|
+4. **Заголовки** — жирным, по центру или с абзацного отступа
|
|
|
+5. **Скриншоты** вставь прямо в документ с подписями: «Рисунок 1 — Главная страница»
|
|
|
+6. **Нумерация страниц** — внизу по центру
|
|
|
+7. Сохрани в двух форматах: `.docx` и `.pdf`
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## ?? Как сделать красивые скриншоты
|
|
|
+
|
|
|
+### Windows
|
|
|
+- Нажми `Win + Shift + S` > выдели область > вставь в Word (`Ctrl+V`)
|
|
|
+- Или используй программу «Ножницы» / «Snipping Tool»
|
|
|
+
|
|
|
+### Mac
|
|
|
+- `Cmd + Shift + 4` > выдели > файл появится на рабочем столе
|
|
|
+
|
|
|
+### Для полного экрана сайта
|
|
|
+- Расширение **«GoFullPage»** в Chrome (делает скриншот всей страницы)
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+**Удачи с защитой проекта!** ??
|
