Создание сайта портфолио достижений и работ ученика

1.

МУНИЦИПАЛЬНОЕ АВТОНОМНОЕ ОБРАЗОВАТЕЛЬНОЕ
УЧРЕЖДЕНИЕ СРЕДНЯЯ ОБЩЕОБРАЗОВАТЕЛЬНАЯ ШКОЛА № 22
Создание сайта портфолио достижений и работ ученика
Автор:
Фомин Кирилл Евгеньевич
Россия, Тюменская область, г.Тюмень
МАОУ СОШ № 22, 10 Д класс

2.

Что такое портфолио и его значение
Определение
Функции
Польза
Комплект материалов с личными
Оценочная, диагностическая,
Помогает осознать достижения,
достижениями в учебной,
мотивационная, развивающая,
выявить таланты и подготовиться к
творческой и других сферах.
презентационная и
будущему.
коммуникативная.

3.

Виды и структура портфолио
Творческое
Художественные работы,
Учебное
фотографии, стихи, рассказы.
Исследовательское
Научные проекты, гипотезы,
эксперименты, выводы.
Достижений
Образовательные достижения,
Дипломы, грамоты,
оценки, проекты, эссе.
сертификаты, благодарности.

4.

Структура эффективного портфолио
Главная страница
Информация об ученике: имя, возраст, класс, школа, увлечения.
Достижения
Дипломы, грамоты, сертификаты, подтверждающие успехи.
Работы и проекты
Учебные, творческие, исследовательские материалы.
Контакты
Возможность связаться с учеником или оставить отзыв.

5.

Технологии для создания сайта
HTML
CSS
Основной язык разметки
Язык стилей для оформления
страниц. Задаёт структуру сайта,
внешнего вида. Отвечает за
размещает заголовки, текст,
шрифты, цвета, расположение
изображения и ссылки.
блоков и анимацию.
JavaScript
Добавляет интерактивность. Позволяет создавать активные кнопки,
галереи работ и обработку форм.

6.

Планирование и проектирование сайта
Определение идеи
Формулировка основной задачи и целевой аудитории сайта.
Структурирование
Разработка логичной структуры с разделами для разных категорий информации.
Дизайн-концепция
Создание светлого, ненагруженного дизайна с фокусом на содержание.
Адаптивность
Планирование корректного отображения на разных устройствах.

7.

Разработка и реализация сайта
HTML-каркас
Создание основной структуры с шапкой, разделами и подвалом.
CSS-оформление
Стилизация внешнего вида, настройка цветов, отступов и размеров.
JavaScript-функции
Добавление интерактивных элементов и работы меню.
Тестирование
Проверка работы сайта в разных браузерах и устройствах.

8.

Результаты разработки
Главная страница
Раздел "Навыки"
Раздел "Достижения"
Приветственная информация с именем
Прогресс-бары для наглядной
Карточки с иконками трофеев и описанием
ученика и кратким вступлением.
демонстрации уровня владения навыками.
успехов ученика.

9.

Результаты разработки
Разработан Telegram-бот, который собирает информацию от ученика и
автоматически создаёт персональное портфолио-сайт.
Пользователь вводит:
• Имя, школу и класс
• Навыки и достижения
• Электронную почту
После ввода бот формирует готовый сайт на основе шаблона и
отправляет его в архиве. Всё происходит автоматически — быстро и
просто.

10.

Заключение
Проект создания сайта-портфолио позволил применить знания в веб-разработке, используя HTML, CSS и JavaScript. Разработанный
сайт эффективно представляет достижения и навыки ученика, обеспечивая удобную навигацию и адаптивный дизайн. Этот сайт служит
цифровой визитной карточкой, которая может быть расширена новыми функциональными возможностями в будущем. Полученные
навыки в процессе работы над проектом могут быть полезны для дальнейшего развития в сфере веб-разработки.
Спасибо за внимание