Удалить '2025-26/Отчеты/Отчет Пивоварова.md'

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

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