Загрузить файлы '2025-26/Отчеты'

2025-26/Отчеты/Отчет Пивоварова.md

@@ -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 (делает скриншот всей страницы)
+
+---
+
+**Удачи с защитой проекта!** ??