index.html - master - levchenko_ka/Presentation

index.html
595 строк26 KB
levchenko_ka
Create: index.html
30 июл 2026, 05:48
30 июл 2026, 05:48c95321e
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Защита паспорта методической разработки</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #333;
            line-height: 1.6;
        }
        
        .slide {
            width: 100vw;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 40px 60px;
            background: white;
            page-break-after: always;
            position: relative;
            overflow: hidden;
        }
        
        .slide:nth-child(odd) {
            background: #f8f9ff;
        }
        
        .slide-number {
            position: absolute;
            top: 20px;
            right: 30px;
            font-size: 42px;
            font-weight: bold;
            color: #667eea;
            opacity: 0.3;
        }
        
        h1 {
            font-size: 38px;
            color: #2d3748;
            margin-bottom: 25px;
            text-align: center;
            line-height: 1.3;
        }
        
        h2 {
            font-size: 30px;
            color: #667eea;
            margin-bottom: 20px;
            border-bottom: 3px solid #667eea;
            padding-bottom: 10px;
        }
        
        h3 {
            font-size: 22px;
            color: #4a5568;
            margin: 15px 0 10px 0;
        }
        
        .subtitle {
            font-size: 20px;
            color: #718096;
            margin-bottom: 30px;
            text-align: center;
        }
        
        .content-box {
            background: white;
            padding: 25px;
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            max-width: 1000px;
            width: 100%;
            margin: 12px 0;
        }
        
        .info-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-top: 15px;
        }
        
        .info-item {
            padding: 12px 15px;
            background: #edf2f7;
            border-radius: 8px;
            border-left: 4px solid #667eea;
        }
        
        .info-label {
            font-weight: bold;
            color: #4a5568;
            font-size: 13px;
            text-transform: uppercase;
            margin-bottom: 4px;
        }
        
        .info-value {
            color: #2d3748;
            font-size: 16px;
        }
        
        .problem-list {
            list-style: none;
            padding: 0;
        }
        
        .problem-list li {
            padding: 12px 18px;
            margin: 8px 0;
            background: #fff5f5;
            border-left: 4px solid #fc8181;
            border-radius: 0 8px 8px 0;
            font-size: 16px;
            line-height: 1.5;
        }
        
        .problem-list li:before {
            content: "⚠️ ";
            margin-right: 8px;
        }
        
        .stage-list {
            counter-reset: stage;
            list-style: none;
            padding: 0;
        }
        
        .stage-list li {
            counter-increment: stage;
            padding: 15px 15px 15px 70px;
            margin: 10px 0;
            background: white;
            border-radius: 10px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            position: relative;
            font-size: 15px;
            line-height: 1.5;
        }
        
        .stage-list li:before {
            content: counter(stage);
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            width: 40px;
            height: 40px;
            background: #667eea;
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 18px;
        }
        
        .stage-time {
            color: #667eea;
            font-weight: bold;
            float: right;
            font-size: 14px;
        }
        
        .metrics-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-top: 15px;
        }
        
        .metric-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
        }
        
        .metric-value {
            font-size: 42px;
            font-weight: bold;
            margin-bottom: 8px;
        }
        
        .metric-label {
            font-size: 14px;
            opacity: 0.95;
            line-height: 1.4;
        }
        
        .checklist {
            list-style: none;
            padding: 0;
        }
        
        .checklist li {
            padding: 8px 12px;
            margin: 6px 0;
            background: #f0fff4;
            border-radius: 6px;
            border-left: 4px solid #48bb78;
            font-size: 15px;
        }
        
        .checklist li:before {
            content: "✓ ";
            color: #48bb78;
            font-weight: bold;
            margin-right: 6px;
        }
        
        .highlight {
            background: linear-gradient(120deg, #ffeaa7 0%, #ffeaa7 100%);
            padding: 2px 6px;
            border-radius: 4px;
            font-weight: bold;
        }
        
        .two-columns {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            width: 100%;
            max-width: 1100px;
        }
        
        .column {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        
        .column h3 {
            color: #667eea;
            margin-top: 0;
            font-size: 20px;
        }
        
        .column ul li {
            padding: 6px 0;
            font-size: 15px;
        }
        
        .landing-link {
            display: inline-block;
            padding: 12px 25px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            text-decoration: none;
            border-radius: 8px;
            font-size: 18px;
            font-weight: bold;
            margin-top: 15px;
            transition: transform 0.2s;
        }
        
        .landing-link:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.2);
        }
        
        .product-description {
            font-size: 17px;
            line-height: 1.7;
            text-align: center;
            max-width: 850px;
        }
        
        @media print {
            body {
                background: white;
            }
            .slide {
                height: 100vh;
                page-break-after: always;
                padding: 30px 40px;
            }
        }
        
        @media screen and (max-width: 1200px) {
            .slide {
                padding: 30px 40px;
            }
            
            h1 {
                font-size: 32px;
            }
            
            h2 {
                font-size: 26px;
            }
            
            .info-grid,
            .metrics-grid,
            .two-columns {
                grid-template-columns: 1fr;
            }
            
            .stage-list li {
                font-size: 14px;
            }
        }
        
        @media screen and (max-width: 768px) {
            .slide {
                padding: 20px;
                height: auto;
                min-height: 100vh;
            }
            
            h1 {
                font-size: 26px;
            }
            
            h2 {
                font-size: 22px;
            }
            
            .content-box {
                padding: 15px;
            }
        }
    </style>
</head>
<body>

    <!-- Slide 1: Title -->
    <div class="slide">
        <div class="slide-number">01</div>
        <h1>От идеи к боту: реализуем помощника по расписанию уроков</h1>
        <p class="subtitle">Междисциплинарный проект для 7-8 классов</p>
        
        <div class="content-box">
            <div class="info-grid">
                <div class="info-item">
                    <div class="info-label">Предметы-партнёры</div>
                    <div class="info-value">Информатика + Математика и модуль ВИС</div>
                </div>
                <div class="info-item">
                    <div class="info-label">Класс / возраст</div>
                    <div class="info-value">7-8 класс</div>
                </div>
                <div class="info-item">
                    <div class="info-label">Где проходит</div>
                    <div class="info-value">Компьютерный класс</div>
                </div>
                <div class="info-item">
                    <div class="info-label">Формат и объём</div>
                    <div class="info-value">Серия из 2 занятий по 1 часу</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Slide 2: Problem -->
    <div class="slide">
        <div class="slide-number">02</div>
        <h2>Проблема</h2>
        <p class="subtitle">Реальный вызов, на который отвечает занятие</p>
        
        <div class="content-box">
            <ul class="problem-list">
                <li>Ученики и преподаватели регулярно сталкиваются с необходимостью оперативно узнавать расписание уроков, но информация хранится в разрозненных источниках (бумажные дневники, заметки в телефоне, сообщения в чатах)</li>
                <li>Уведомления могут не приходить из-за настроек телефона, сбоев сети или отключённых оповещений — важная информация об изменениях рискует остаться незамеченной</li>
                <li>Необходимость формирования цифровой грамотности: дети должны учиться осознанно взаимодействовать с ИТ-инструментами, понимать, как они устроены</li>
            </ul>
            
            <div style="margin-top: 25px; padding: 18px; background: #ebf8ff; border-radius: 8px; border-left: 4px solid #4299e1;">
                <h3 style="margin-top: 0; color: #2b6cb0; font-size: 20px;">Проектный вопрос:</h3>
                <p style="font-size: 19px; font-style: italic; color: #2d3748; margin-top: 8px;">
                    «Как создать ИИ-помощника, который за 3 секунды найдёт любой урок в школьном расписании?»
                </p>
            </div>
        </div>
    </div>

    <!-- Slide 3: Concept -->
    <div class="slide">
        <div class="slide-number">03</div>
        <h2>Замысел</h2>
        <p class="subtitle">Как информатика + предмет-партнёр вместе решают проблему</p>
        
        <div class="two-columns">
            <div class="column">
                <h3>Информатика</h3>
                <ul style="list-style: none; padding: 0;">
                    <li>✓ Алгоритм (последовательность шагов)</li>
                    <li>✓ Промпт — инструкция для ИИ</li>
                    <li>✓ Структура данных (строка=урок, столбец=признак)</li>
                    <li>✓ Обработка естественного языка</li>
                    <li>✓ Условие (логическое выражение)</li>
                </ul>
            </div>
            
            <div class="column">
                <h3>Математика / ВИС</h3>
                <ul style="list-style: none; padding: 0;">
                    <li>✓ Частота изменений расписания</li>
                    <li>✓ Корреляция (визуальная)</li>
                    <li>✓ Прогнозирование сдвигов</li>
                    <li>✓ Координаты и графики функций</li>
                    <li>✓ Линейные уравнения, проценты</li>
                </ul>
            </div>
        </div>
        
        <div class="content-box" style="margin-top: 25px;">
            <h3 style="text-align: center; margin-bottom: 12px; font-size: 20px;">Совместное решение</h3>
            <p style="font-size: 16px; text-align: center; line-height: 1.6;">
                Ученики берут неструктурированные данные из чатов и дневников, превращают их в строгую <span class="highlight">CSV-таблицу</span>, а затем пишут <span class="highlight">системный промпт</span> для ИИ. 
                ИИ-бот за секунды фильтрует массив данных по запросу ученика и выдаёт точный ответ, опираясь на заданные алгоритмом ограничения.
            </p>
        </div>
    </div>

    <!-- Slide 4: Stages -->
    <div class="slide">
        <div class="slide-number">04</div>
        <h2>Этапы</h2>
        <p class="subtitle">Что делает команда детей на каждом этапе</p>
        
        <div class="content-box" style="max-width: 1100px;">
            <ol class="stage-list">
                <li>
                    <span class="stage-time">10 мин</span>
                    <strong>Погружение и распределение ролей</strong><br>
                    Мозговой штурм: фиксируют 3 типичные проблемы с расписанием на стикерах. Распределяют роли в команде (Дата-инженер, Сценарист, Промпт-инженер, QA).
                </li>
                <li>
                    <span class="stage-time">20 мин</span>
                    <strong>Сбор и структурирование данных</strong><br>
                    Выписывают реальное расписание класса на 1 неделю из чата/дневника. Дата-инженер заносит данные в Google Таблицу в формате CSV. Команда проверяет данные на дубли и опечатки.
                </li>
                <li>
                    <span class="stage-time">30 мин</span>
                    <strong>Проектирование логики и написание промпта</strong><br>
                    Сценарист рисует 3-4 экрана бота. Формулируют 5 типовых запросов и ответов. Пишут промпт по шаблону с ролью, контекстом, задачей и ограничениями. Проверяют в нейросети.
                </li>
                <li>
                    <span class="stage-time">30 мин</span>
                    <strong>Сборка прототипа и подготовка к демонстрации</strong><br>
                    Связывают промпт и данные в конструкторе ботов (PuzzleBot, Botpress) или создают имитацию в Notion. Готовят 3 тестовых сценария: обычный день, выходной, отмена урока.
                </li>
                <li>
                    <span class="stage-time">30 мин</span>
                    <strong>Тестирование и демонстрация «заказчику»</strong><br>
                    QA-инженер прогоняет бота по чек-листу из 5 пунктов. Команда проводит питч перед учителем/администрацией. Собирают обратную связь методом «Сэндвич».
                </li>
            </ol>
        </div>
    </div>

    <!-- Slide 5: Product and Landing -->
    <div class="slide">
        <div class="slide-number">05</div>
        <h2>Продукт и лендинг</h2>
        <p class="subtitle">Что появляется у учеников</p>
        
        <div class="content-box">
            <h3 style="text-align: center; margin-bottom: 15px; font-size: 20px;">Что получает ученик на выходе</h3>
            <p class="product-description">
                Работающий <span class="highlight">чат-бот</span> (в GigaChat или мессенджере), подключённый к таблице-расписанию. 
                В состав продукта входят: <span class="highlight">база данных уроков</span> (электронная таблица), 
                <span class="highlight">текстовый промпт для ИИ</span>, 
                <span class="highlight">тестовый сценарий</span> из 10 запросов с ответами бота.
            </p>
            
            <div style="margin-top: 25px; padding: 18px; background: #f0fff4; border-radius: 8px;">
                <h3 style="color: #2f855a; margin-bottom: 12px; font-size: 20px;">Критерий готовности продукта:</h3>
                <ul class="checklist">
                    <li>Работает на реальных данных, не на примере из методички</li>
                    <li>Можно запустить и увидеть результат за &lt; 1 минуты</li>
                    <li>Ученик может объяснить каждую часть своими словами</li>
                    <li>Отвечает на запрос и находит кабинет за &lt; 3 секунд</li>
                </ul>
            </div>
            
            <div style="text-align: center; margin-top: 25px;">
                <h3 style="margin-bottom: 12px; font-size: 20px;">Лендинг занятия</h3>
                <a href="https://robikrobi.gitverse.site/learning_site/index.html" class="landing-link" target="_blank">
                    🌐 Открыть лендинг
                </a>
            </div>
        </div>
    </div>

    <!-- Slide 6: Evaluation -->
    <div class="slide">
        <div class="slide-number">06</div>
        <h2>Как оценим</h2>
        <p class="subtitle">Метрика и чек-лист эффективности занятия</p>
        
        <div class="metrics-grid">
            <div class="metric-card">
                <div class="metric-value">≥80%</div>
                <div class="metric-label">Доля учеников, внесших данные в общую таблицу расписания</div>
            </div>
            <div class="metric-card">
                <div class="metric-value">≥75%</div>
                <div class="metric-label">Доля команд, чей продукт прошёл проверку по чек-листу «работающий продукт»</div>
            </div>
            <div class="metric-card">
                <div class="metric-value">≥3</div>
                <div class="metric-label">Среднее число тестовых сценариев на команду (обычный день, выходной, отмена)</div>
            </div>
            <div class="metric-card">
                <div class="metric-value">≥90%</div>
                <div class="metric-label">Доля учеников, проверивших результат ИИ и зафиксировавших правки</div>
            </div>
        </div>
        
        <div class="content-box" style="margin-top: 25px;">
            <h3 style="margin-bottom: 12px; font-size: 20px;">Чек-лист оценки занятия:</h3>
            <ul class="checklist">
                <li>Продукт работает на реальных данных</li>
                <li>Каждый этап завершился наблюдаемым результатом</li>
                <li>Команда может объяснить решение без учителя</li>
                <li>Метрика измерена до и после занятия</li>
                <li>Бот корректно реагирует на стресс-кейсы (выходной, отмена)</li>
            </ul>
        </div>
    </div>

    <!-- Slide 7: Scaling -->
    <div class="slide">
        <div class="slide-number">07</div>
        <h2>Куда дальше</h2>
        <p class="subtitle">Масштабирование и внедрение</p>
        
        <div class="two-columns">
            <div class="column">
                <h3>🏫 Один класс</h3>
                <p style="font-size: 15px;"><strong>Что нужно:</strong></p>
                <ul style="padding-left: 20px; margin-top: 8px; font-size: 15px;">
                    <li>Интернет, доступ к ИИ-сервисам (GigaChat/Алиса)</li>
                    <li>Табличный редактор (Google Sheets/Excel)</li>
                    <li>Время учителя на подготовку: 2-3 часа</li>
                </ul>
            </div>
            
            <div class="column">
                <h3>🏢 Параллель / школа</h3>
                <p style="font-size: 15px;"><strong>Что меняется:</strong></p>
                <ul style="padding-left: 20px; margin-top: 8px; font-size: 15px;">
                    <li>Готовый лендинг и методичка</li>
                    <li>Может быть проведён как школьная проектная неделя или хакатон</li>
                    <li>Обучение коллег по готовым материалам</li>
                </ul>
            </div>
            
            <div class="column">
                <h3>🌍 Район / регион</h3>
                <p style="font-size: 15px;"><strong>Условия для внедрения:</strong></p>
                <ul style="padding-left: 20px; margin-top: 8px; font-size: 15px;">
                    <li>Курсы повышения квалификации для учителей по базовой работе с ИИ</li>
                    <li>Доступ к оборудованию (компьютерные классы)</li>
                    <li>Методическая поддержка через лендинг</li>
                </ul>
            </div>
            
            <div class="column">
                <h3>⚠️ Риски и решения</h3>
                <p style="font-size: 15px;"><strong>Основные риски:</strong></p>
                <ul style="padding-left: 20px; margin-top: 8px; font-size: 15px;">
                    <li>Блокировка или сбой ИИ-сервисов</li>
                    <li><strong>Решение:</strong> В материалах заложена замена — «Имитация бота» через гиперссылки в Google Документах/Notion и бумажные блок-схемы алгоритмов</li>
                    <li>Качество компетенций не теряется</li>
                </ul>
            </div>
        </div>
        
        <div class="content-box" style="margin-top: 25px; text-align: center;">
            <p style="font-size: 17px; font-style: italic; color: #4a5568; line-height: 1.6;">
                💡 <strong>Отчуждаемость разработки:</strong> благодаря лендингу и подробному рабочему листу любой учитель информатики в регионе сможет скачать материалы и провести этот спринт у себя в школе без дополнительной подготовки.
            </p>
        </div>
    </div>

</body>
</html>