|
|
@@ -1,415 +0,0 @@
|
|
|
-# ?? Отчёт о создании сайта «ВкусноЕд»
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-## ТИТУЛЬНЫЙ ЛИСТ
|
|
|
-
|
|
|
-```
|
|
|
-ОТЧЁТ
|
|
|
-о выполнении творческого проекта
|
|
|
-по веб-разработке
|
|
|
-
|
|
|
-Тема: «Создание сайта доставки еды "ВкусноЕд"»
|
|
|
-
|
|
|
-Выполнила: Пивоварова Анна
|
|
|
-Дата сдачи: 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 (делает скриншот всей страницы)
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-**Удачи с защитой проекта!** ??
|
