Spaces:
Running
Running
🐳 06/05 - 18:53 - замени везде ГБОУ СОШ № 625 на Школа №625 Невского района Санкт-Петербурга
80a2baa verified | <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Презентация проекта - Модернизация сайта музея «Боевое братство»</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| @media print { | |
| .slide { | |
| page-break-after: always; | |
| height: 100vh; | |
| padding: 40px; | |
| } | |
| } | |
| .slide { | |
| min-height: 600px; | |
| padding: 40px; | |
| margin-bottom: 20px; | |
| border: 2px solid #e5e7eb; | |
| border-radius: 8px; | |
| background: white; | |
| } | |
| .slide-title { | |
| font-size: 32px; | |
| font-weight: bold; | |
| color: #7f1d1d; | |
| margin-bottom: 24px; | |
| border-bottom: 4px solid #eab308; | |
| padding-bottom: 12px; | |
| } | |
| .slide-content { | |
| font-size: 18px; | |
| line-height: 1.6; | |
| } | |
| .highlight-box { | |
| background: #fef3c7; | |
| border-left: 4px solid #f59e0b; | |
| padding: 16px; | |
| margin: 16px 0; | |
| border-radius: 4px; | |
| } | |
| .tech-tag { | |
| display: inline-block; | |
| background: #7f1d1d; | |
| color: white; | |
| padding: 4px 12px; | |
| border-radius: 12px; | |
| font-size: 14px; | |
| margin: 4px; | |
| } | |
| .two-column { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 24px; | |
| } | |
| .image-placeholder { | |
| background: #f3f4f6; | |
| border: 2px dashed #d1d5db; | |
| height: 200px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: #6b7280; | |
| border-radius: 8px; | |
| } | |
| ul.checklist { | |
| list-style: none; | |
| padding-left: 0; | |
| } | |
| ul.checklist li { | |
| padding-left: 28px; | |
| position: relative; | |
| margin-bottom: 12px; | |
| } | |
| ul.checklist li:before { | |
| content: "✓"; | |
| position: absolute; | |
| left: 0; | |
| color: #059669; | |
| font-weight: bold; | |
| } | |
| .status-badge { | |
| display: inline-block; | |
| padding: 4px 12px; | |
| border-radius: 12px; | |
| font-size: 14px; | |
| font-weight: bold; | |
| } | |
| .status-done { | |
| background: #d1fae5; | |
| color: #065f46; | |
| } | |
| .status-progress { | |
| background: #fef3c7; | |
| color: #92400e; | |
| } | |
| .status-todo { | |
| background: #fee2e2; | |
| color: #991b1b; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 p-8"> | |
| <!-- СЛАЙД 1: Титульный --> | |
| <div class="slide"> | |
| <div class="text-center h-full flex flex-col justify-center"> | |
| <div class="mb-8"> | |
| <span class="bg-red-900 text-white px-4 py-2 rounded-full text-sm font-bold">ПРОЕКТНАЯ РАБОТА ПО ИНФОРМАТИКЕ</span> | |
| </div> | |
| <h1 class="text-4xl font-bold text-gray-900 mb-6"> | |
| Модернизация веб-сайта<br> | |
| школьного музея<br> | |
| <span class="text-red-800">«Боевое братство»</span> | |
| </h1> | |
| <p class="text-xl text-gray-600 mb-12 max-w-2xl mx-auto"> | |
| Перенос устаревшего сайта на CMS WordPress с разработкой | |
| адаптивного дизайна и подготовкой системы к наполнению контентом | |
| </p> | |
| <div class="grid grid-cols-3 gap-4 max-w-3xl mx-auto text-left mt-8"> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p class="text-sm text-gray-500">Учащийся</p> | |
| <p class="font-bold">10 «А» класса</p> | |
| <p class="text-sm text-gray-600">[ФИО]</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p class="text-sm text-gray-500">Руководитель</p> | |
| <p class="font-bold">Учитель информатики</p> | |
| <p class="text-sm text-gray-600">[ФИО]</p> | |
| </div> | |
| <div class="bg-gray-50 p-4 rounded-lg"> | |
| <p class="text-sm text-gray-500">Год</p> | |
| <p class="font-bold">2025-2026</p> | |
| <p class="text-sm text-gray-600">Школа №625 Невского района Санкт-Петербурга</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- СЛАЙД 2: Актуальность --> | |
| <div class="slide"> | |
| <h2 class="slide-title">Актуальность проблемы</h2> | |
| <div class="slide-content"> | |
| <div class="two-column"> | |
| <div> | |
| <h3 class="text-xl font-bold text-red-800 mb-4">Проблемы старого сайта (2012 г.):</h3> | |
| <ul class="list-disc pl-5 space-y-2 text-gray-700"> | |
| <li>❌ Нет адаптации под мобильные устройства</li> | |
| <li>❌ Устаревший дизайн (HTML 2010-х)</li> | |
| <li>❌ Невозможно обновлять без программиста</li> | |
| <li>❌ Нет онлайн-записи на экскурсии</li> | |
| <li>❌ Не соответствует современным стандартам</li> | |
| </ul> | |
| <div class="highlight-box mt-6"> | |
| <p class="font-semibold">Музей «Боевое братство» — единственный в Невском районе школьный музей, посвящённый истории Афганистана и Чечни (200+ экспонатов)</p> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold text-green-800 mb-4">Зачем нужен новый сайт:</h3> | |
| <ul class="checklist"> | |
| <li>Сохранение памяти о воинах-интернационалистах</li> | |
| <li>Патриотическое воспитание через цифровые технологии</li> | |
| <li>Доступ к экспонатам 24/7 для учащихся</li> | |
| <li>Онлайн-запись на экскурсии для школ района</li> | |
| <li>Возможность самостоятельного обновления</li> | |
| </ul> | |
| <div class="mt-6 p-4 bg-blue-50 rounded-lg border-l-4 border-blue-600"> | |
| <p class="text-blue-900 font-semibold">Целевая аудитория:</p> | |
| <p class="text-blue-800">Учащиеся школы № 625, гости из других школ Невского района, ветераны, краеведы</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- СЛАЙД 3: Цели и задачи --> | |
| <div class="slide"> | |
| <h2 class="slide-title">Цели и задачи проекта</h2> | |
| <div class="slide-content"> | |
| <div class="bg-red-50 border-2 border-red-200 p-6 rounded-xl mb-6"> | |
| <h3 class="text-2xl font-bold text-red-900 mb-2">Главная цель:</h3> | |
| <p class="text-lg text-gray-800"> | |
| Разработка современного веб-сайта для школьного музея «Боевое братство» | |
| на базе CMS WordPress для повышения доступности информации и упрощения | |
| организации экскурсий. | |
| </p> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-800 mb-4">Задачи проекта:</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="flex items-start gap-3"> | |
| <div class="w-8 h-8 bg-red-900 text-white rounded-full flex items-center justify-center font-bold flex-shrink-0">1</div> | |
| <p>Провести аудит существующего сайта и анализ потребностей аудитории</p> | |
| </div> | |
| <div class="flex items-start gap-3"> | |
| <div class="w-8 h-8 bg-red-800 text-white rounded-full flex items-center justify-center font-bold flex-shrink-0">2</div> | |
| <p>Разработать структуру нового сайта с учётом специфики музея</p> | |
| </div> | |
| <div class="flex items-start gap-3"> | |
| <div class="w-8 h-8 bg-red-700 text-white rounded-full flex items-center justify-center font-bold flex-shrink-0">3</div> | |
| <p>Установить и настроить CMS WordPress с необходимыми плагинами</p> | |
| </div> | |
| <div class="flex items-start gap-3"> | |
| <div class="w-8 h-8 bg-yellow-600 text-white rounded-full flex items-center justify-center font-bold flex-shrink-0">4</div> | |
| <p>Создать адаптивный дизайн (красно-золотая гамма музея)</p> | |
| </div> | |
| <div class="flex items-start gap-3"> | |
| <div class="w-8 h-8 bg-yellow-700 text-white rounded-full flex items-center justify-center font-bold flex-shrink-0">5</div> | |
| <p>Обеспечить возможность самостоятельного обновления контента</p> | |
| </div> | |
| <div class="flex items-start gap-3"> | |
| <div class="w-8 h-8 bg-gray-700 text-white rounded-full flex items-center justify-center font-bold flex-shrink-0">6</div> | |
| <p>Подготовить систему к наполнению реальными фото экспонатов</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- СЛАЙД 4: Технологии --> | |
| <div class="slide"> | |
| <h2 class="slide-title">Используемые технологии</h2> | |
| <div class="slide-content"> | |
| <div class="two-column"> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-3">Платформа:</h3> | |
| <div class="mb-4"> | |
| <span class="tech-tag">WordPress 6.4</span> | |
| <span class="tech-tag">PHP 8.1</span> | |
| <span class="tech-tag">MySQL 8.0</span> | |
| </div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-3">Конструктор:</h3> | |
| <div class="mb-4"> | |
| <span class="tech-tag">Elementor Pro</span> | |
| <span class="tech-tag">Astra Theme</span> | |
| </div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-3">Плагины:</h3> | |
| <div class="mb-4"> | |
| <span class="tech-tag">WPForms</span> | |
| <span class="tech-tag">Yoast SEO</span> | |
| <span class="tech-tag">Envira Gallery</span> | |
| <span class="tech-tag">WP Super Cache</span> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold text-gray-800 mb-3">Преимущества выбора:</h3> | |
| <ul class="checklist"> | |
| <li>Бесплатное ПО (Open Source)</li> | |
| <li>Простое управление без программирования</li> | |
| <li>Адаптивность под все устройства</li> | |
| <li>SEO-оптимизация для поисковиков</li> | |
| <li>Возможность расширения функционала</li> | |
| </ul> | |
| <div class="highlight-box mt-4"> | |
| <p class="text-sm"><strong>Локальный сервер:</strong> OpenServer 5.4 для разработки и тестирования перед переносом на хостинг школы</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- СЛАЙД 5: Структура сайта --> | |
| <div class="slide"> | |
| <h2 class="slide-title">Структура и функционал сайта</h2> | |
| <div class="slide-content"> | |
| <div class="grid grid-cols-2 gap-6"> | |
| <div class="space-y-4"> | |
| <div class="border-l-4 border-red-900 pl-4"> | |
| <h4 class="font-bold text-lg">Главная страница</h4> | |
| <p class="text-gray-600 text-sm">Слайдер с экспонатами, описание музея, быстрые ссылки</p> | |
| </div> | |
| <div class="border-l-4 border-red-800 pl-4"> | |
| <h4 class="font-bold text-lg">Экспонаты (Каталог)</h4> | |
| <p class="text-gray-600 text-sm">Фильтрация по категориям: Афганистан, Чечня, Личные вещи, Документы</p> | |
| </div> | |
| <div class="border-l-4 border-yellow-600 pl-4"> | |
| <h4 class="font-bold text-lg">Историческая справка</h4> | |
| <p class="text-gray-600 text-sm">История создания музея (2012 г.), миссия, контакты с ветеранами</p> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="border-l-4 border-blue-800 pl-4"> | |
| <h4 class="font-bold text-lg">Мероприятия</h4> | |
| <p class="text-gray-600 text-sm">Календарь событий, онлайн-запись на экскурсии и встречи</p> | |
| </div> | |
| <div class="border-l-4 border-gray-700 pl-4"> | |
| <h4 class="font-bold text-lg">Документы</h4> | |
| <p class="text-gray-600 text-sm">Устав, положение, свидетельство о регистрации (PDF)</p> | |
| </div> | |
| <div class="border-l-4 border-green-700 pl-4"> | |
| <h4 class="font-bold text-lg">Контакты</h4> | |
| <p class="text-gray-600 text-sm">Яндекс.Карта, адрес (ул. Джона Рида, 6), телефон, форма связи</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 bg-gray-100 p-4 rounded-lg"> | |
| <p class="text-center text-gray-700"> | |
| <strong>Особенность:</strong> Сайт адаптирован для просмотра на смартфонах, планшетах и компьютерах (Responsive Design) | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- СЛАЙД 6: Этапы разработки --> | |
| <div class="slide"> | |
| <h2 class="slide-title">Этапы разработки</h2> | |
| <div class="slide-content"> | |
| <div class="space-y-6"> | |
| <div class="flex gap-4"> | |
| <div class="w-32 flex-shrink-0"> | |
| <span class="status-badge status-done">ВЫПОЛНЕНО</span> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg">1. Подготовительный этап (сен-окт 2025)</h4> | |
| <p class="text-gray-600">Установка OpenServer, развёртывание WordPress, аудит материалов музея, разработка структуры БД</p> | |
| </div> | |
| </div> | |
| <div class="flex gap-4"> | |
| <div class="w-32 flex-shrink-0"> | |
| <span class="status-badge status-done">ВЫПОЛНЕНО</span> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg">2. Технический этап (ноя-дек 2025)</h4> | |
| <p class="text-gray-600">Установка темы Astra и Elementor, настройка цветовой схемы (#7f1d1d, #eab308), создание шаблонов страниц, адаптивность (320px-1920px)</p> | |
| </div> | |
| </div> | |
| <div class="flex gap-4"> | |
| <div class="w-32 flex-shrink-0"> | |
| <span class="status-badge status-progress">В ПРОЦЕССЕ</span> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg">3. Наполнение контентом (янв-май 2026)</h4> | |
| <p class="text-gray-600">Фотосъёмка экспонатов (требуется камера и штатив), обработка изображений, сканирование документов, написание текстов</p> | |
| </div> | |
| </div> | |
| <div class="flex gap-4"> | |
| <div class="w-32 flex-shrink-0"> | |
| <span class="status-badge status-todo">ЗАПЛАНИРОВАНО</span> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg">4. Внедрение (май-июнь 2026)</h4> | |
| <p class="text-gray-600">Перенос на хостинг школы (625school.ru), обучение куратора, публикация пресс-релиза</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- СЛАЙД 7: Текущий статус --> | |
| <div class="slide"> | |
| <h2 class="slide-title">Текущие результаты (Beta v0.9)</h2> | |
| <div class="slide-content"> | |
| <div class="two-column"> | |
| <div> | |
| <h3 class="text-xl font-bold text-green-800 mb-4">✓ Готово (90%):</h3> | |
| <ul class="checklist"> | |
| <li>Установка и настройка WordPress</li> | |
| <li>Адаптивный дизайн (все устройства)</li> | |
| <li>Структура всех разделов</li> | |
| <li>Формы обратной связи</li> | |
| <li>Интеграция Яндекс.Карт</li> | |
| <li>SEO-оптимизация базовая</li> | |
| <li>Система резервного копирования</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold text-yellow-800 mb-4">⚠ В процессе (15%):</h3> | |
| <ul class="list-disc pl-5 space-y-2 text-gray-700"> | |
| <li>Фотосъёмка экспонатов (200+ предметов)</li> | |
| <li>Обработка изображений (цветокоррекция)</li> | |
| <li>Сканирование документов (А4, А3)</li> | |
| <li>Написание исторических справок</li> | |
| <li>Видео-интервью с ветеранами</li> | |
| </ul> | |
| <div class="highlight-box mt-4"> | |
| <p class="text-sm"><strong>Важно:</strong> Сейчас на сайте используются временные изображения-заглушки (placeholders). Требуется замена на реальные фото из фондов музея.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- СЛАЙД 8: Социальная значимость --> | |
| <div class="slide"> | |
| <h2 class="slide-title">Социальная значимость</h2> | |
| <div class="slide-content"> | |
| <div class="grid grid-cols-3 gap-4 mb-6"> | |
| <div class="bg-blue-50 p-4 rounded-lg text-center"> | |
| <div class="text-3xl mb-2">👨🎓</div> | |
| <h4 class="font-bold text-blue-900">Для учащихся</h4> | |
| <ul class="text-sm text-left mt-2 space-y-1 text-blue-800"> | |
| <li>• Доступ к истории 24/7</li> | |
| <li>• Подготовка проектов</li> | |
| <li>• Цифровые навыки</li> | |
| <li>• Патриотическое воспитание</li> | |
| </ul> | |
| </div> | |
| <div class="bg-green-50 p-4 rounded-lg text-center"> | |
| <div class="text-3xl mb-2">🏫</div> | |
| <h4 class="font-bold text-green-900">Для школы</h4> | |
| <ul class="text-sm text-left mt-2 space-y-1 text-green-800"> | |
| <li>• Автоматизация записи</li> | |
| <li>• Статус в районе</li> | |
| <li>• Самостоятельное обновление</li> | |
| <li>• Сохранение документов</li> | |
| </ul> | |
| </div> | |
| <div class="bg-red-50 p-4 rounded-lg text-center"> | |
| <div class="text-3xl mb-2">🎖️</div> | |
| <h4 class="font-bold text-red-900">Для общества</h4> | |
| <ul class="text-sm text-left mt-2 space-y-1 text-red-800"> | |
| <li>• Сохранение памяти</li> | |
| <li>• Доступ для ветеранов</li> | |
| <li>• Краеведческая база</li> | |
| <li>• Цифровой архив</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 text-white p-6 rounded-xl"> | |
| <h3 class="text-xl font-bold mb-3 text-yellow-400">Цитата</h3> | |
| <p class="italic text-lg"> | |
| «Современные технологии позволяют сохранить память о прошлом тем способом, | |
| который понятен и доступен сегодняшнему поколению. Этот сайт — не просто | |
| интернет-страница, это цифровой мемориал, который будет жить и развиваться | |
| вместе с нашей школой.» | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- СЛАЙД 9: Планы --> | |
| <div class="slide"> | |
| <h2 class="slide-title">Планы развития</h2> | |
| <div class="slide-content"> | |
| <div class="space-y-4"> | |
| <div class="flex items-center gap-4 p-4 bg-gray-50 rounded-lg"> | |
| <div class="w-16 text-center font-bold text-gray-500">2026</div> | |
| <div> | |
| <h4 class="font-bold">Запуск и наполнение</h4> | |
| <p class="text-gray-600 text-sm">Добавление 50+ экспонатов, перенос на хостинг, обучение персонала</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-4 p-4 bg-gray-50 rounded-lg"> | |
| <div class="w-16 text-center font-bold text-gray-500">2027</div> | |
| <div> | |
| <h4 class="font-bold">Расширение функционала</h4> | |
| <p class="text-gray-600 text-sm">Виртуальный тур по залам, раздел «Воспоминания ветеранов» (видео)</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-4 p-4 bg-gray-50 rounded-lg"> | |
| <div class="w-16 text-center font-bold text-gray-500">2028+</div> | |
| <div> | |
| <h4 class="font-bold">Интеграция</h4> | |
| <p class="text-gray-600 text-sm">Связь с порталом «Боевое братство», мультиязычная версия, мобильное приложение</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center"> | |
| <p class="text-gray-600">Ожидаемый охват аудитории: <strong>500+ посетителей сайта в месяц</strong></p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- СЛАЙД 10: Заключение --> | |
| <div class="slide"> | |
| <h2 class="slide-title">Заключение</h2> | |
| <div class="slide-content text-center"> | |
| <div class="max-w-3xl mx-auto"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-6">Итоги проекта</h3> | |
| <div class="grid grid-cols-2 gap-6 text-left mb-8"> | |
| <div class="bg-green-50 p-4 rounded-lg border-l-4 border-green-600"> | |
| <h4 class="font-bold text-green-900 mb-2">Достигнуто:</h4> | |
| <ul class="text-sm space-y-1 text-green-800"> | |
| <li>✓ Современная техническая база (WordPress)</li> | |
| <li>✓ Адаптивный дизайн для всех устройств</li> | |
| <li>✓ Структура для 200+ экспонатов</li> | |
| <li>✓ Возможность самоуправления контентом</li> | |
| </ul> | |
| </div> | |
| <div class="bg-yellow-50 p-4 rounded-lg border-l-4 border-yellow-600"> | |
| <h4 class="font-bold text-yellow-900 mb-2">Впереди:</h4> | |
| <ul class="text-sm space-y-1 text-yellow-800"> | |
| <li>⚡ Фотосъёмка всех экспонатов</li> | |
| <li>⚡ Оцифровка документов</li> | |
| <li>⚡ Запись видео-воспоминаний</li> | |
| <li>⚡ Перенос на школьный хостинг</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="bg-red-900 text-white p-6 rounded-xl mb-6"> | |
| <p class="text-lg font-bold mb-2">Beta-версия 0.9</p> | |
| <p class="text-red-200">Техническая часть: 90% | Контент: 15%</p> | |
| <p class="text-sm mt-2 text-red-300">ГБОУ СОШ № 625 Невского района Санкт-Петербурга</p> | |
| </div> | |
| <p class="text-gray-600 text-sm"> | |
| Проектная работа по информатике | 2025-2026 учебный год | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center text-gray-500 text-sm mt-8 no-print"> | |
| <p>Для копирования в PowerPoint: выделите содержимое каждого слайда (блока с классом "slide") и скопируйте на отдельный слайд презентации</p> | |
| <p class="mt-2">Или используйте функцию "Сохранить как PDF" в браузере для печати</p> | |
| </div> | |
| </body> | |
| </html> |