CC BY
8
Чеснокова О. В.,
Нижнетагильский государственный социально-педагогический институт, (филиал) ФГБОУ ВО «Российский государственный профессионально-
педагогический университет» Россия, Нижний Тагил Разработка сайта-портфолио учителя информатики
Аннотация
В настоящее время интернет стал неотъемлемой частью образовательного процесса. В связи с ситуацией в мире почти весь мир учился онлайн, а в сфере школьного образования выросла потребность в использовании интернет-ресурсов. Создание веб-сайтов является важнейшей технологией разработки в Интернете, поэтому в статье уделено внимание разработке сайта-портфолио учителя информатики. Данное портфолио должно включать основную информацию о учителе и его образовании, достижения, увлечения. Помимо этого, нужна фотогалерея и ссылки на различные социальные сети для удобной связи. Сайт разработан с помощью технологий: HTML, CSS, JavaScript, PHP; для создания макета использовалась программа для дизайна Figma.
Ключевые слова: сайт-портфолио, учитель, веб-разработка, информатика.
Website development-portfolio of a computer science teacher
Abstract
Currently, the Internet has become an integral part of the educational process. Due to the situation in the world, almost the entire world studied online, and in the field of school education, the need to use Internet resources has increased. Website creation is the most important development technology on the Internet, so the article focuses on the development of a portfolio website for a computer science teacher. This portfolio should include basic information about the teacher and his education, achievements, and hobbies. In addition, you need a photo gallery and links to various social networks for easy communication. The
site was developed using technologies: HTML, CSS, JavaScript, PHP; Figma design software was used to create the layout.
Keywords: portfolio website, teacher, web development, informatics.
Введение. В современном мире интернет — неотъемлемая часть образовательного процесса. В проекте профессионального стандарта педагога (учителя), указано, что «в области цифровизации учителя должны: <...> владеть ИКТ-компетентностями, включая использование ресурсов информационной образовательной среды и цифровых технологий» [1]. В данной статье рассматривается процесс проектирования и разработки сайта-портфолио учителя информатики.
Цель исследования заключается в разработке одностраничного сайта-портфолио учителя информатики.
Материалы и методы исследования. В ходе исследования были использованы следующие материалы и методы:
— анализ научных статей и публикаций по теме «Разработка сайтов», «Разработка макета», «Проектирование»;
— изучение существующих решений в сети интернет;
— проектирование сайта-портфолио в соответствии с выявленными критериями;
На основе анализа двух сайтов выявили отличительные черты:
Таблица 1
Анализ сайтов
Сайт
Достоинства
Недостатки
СП
и
М «
о «
о о о к
о «
к л
Оформление в приятных тонах
Расположение сайта по
центру
Присутствует
фотогалерея
Представлены
различные дипломы
Представлена
информация об учителе,
месте работы,
образовании_
Реклама на сайте (обусловлено бесплатным тарифом сайта-конструктора) Отсутствие адаптивной версии сайта (для планшетов и мобильных приложений) Отсутствие подвала с контактными данными
На нескольких страницах текст не виден Ссылки на социальные сети найти сложно, для них выделена специальная страница Интерактивные элементы (на которые можно нажать) не оформлены Сложная навигация (много ссылок)_
сч
й о в о л з о
«
Представлена полная информация об учителе Представлены данные об образовании, повышении квалификации Представлены дипломы за награды учеников и личные награды
Реклама на стартовой странице Отсутствие адаптивной версии сайта (для планшетов и мобильных приложений) Контактные данные отсутствуют Отсутствует визуальное представление наград и дипломов (фотографий) Размер шрифта отличается Цветовая гамма не соответствует теме образования
При пролистывании страницы вниз меню справа в столбце становится не видно_
Проанализировав два сайта, можно убедиться в том, что на сайт необходимо добавить полную информацию об учителе, фотогалерею. Необходимо тщательно продумать дизайн, а в частности цветовую гамму. Следуя современным тенденциям сайтостроения, добавить адаптивные версии сайта для различных экранов.
Сравнительная таблица сайтов по выделенным критериям (табл. 2).
Таблица 2
Сравнение сайтов
Критерии оценивания Сайт Кривоносовой Е. В Сайт Козловой Л. Л.
Оформление + -
Понятное меню - +
Удобная навигация - -
Небольшое количество пунктов меню - +
Критерии оценивания Сайт Кривоносовой Е. В Сайт Козловой Л. Л.
Полная информация об учителе + +
Наличие обратной связи + +
Наличие мобильной версии - -
На основе этих данных пришли к выводу, что для учителя будет достаточно создать одностраничный сайт с удобной навигацией по разделам. Если преподаватель захочет сделать на сайте не просто информацию о себе, а дополнительные материалы, тесты и т.д., то нужно создать дополнительную страницу, на которой будут все материалы.
Выделим критерии, которым должен удовлетворять сайт учителя. Первое, на что обращают внимание посетители сайта — его оформление. Оригинальный дизайн — это не главная цель сайта учителя. Прежде всего каждый элемент должен выполнять свою функцию. Часто можно увидеть на сайтах буйство красок. Творческий подход — это хорошо, но в данном случае это будет лишним. Лучше выбрать единую цветовую гамму, причем подходящую к теме образования. Следующий критерий - понятное меню и удобная навигация. Желание педагога разместить как можно больше информации на сайте приводит к тому, что пользоваться сайтом не удобно. К основным разделам можно отнести: визитная карточка (фотография, место работы и учебы, личные увлечения), увлечения преподавателя или интересные факты, достижения и грамоты, достижения детей и фотогалерея.
Для реализации сайта была выбрана технология разработки с помощью языков программирования, потому, что конструкторы сайтов не могут решить все задачи и выбор дизайнерский решений для них ограничен, CMS так же не подходит, ведь нам нужно сделать только одностраничный сайт, а не разрабатывать полноценный блог. Для данного способа требуются знания в первую очередь языка гипертекстовой разметки HTML, так же CSS — формального языка описания внешнего вида документа (каскадные таблицы
стилей). Для взаимодействия пользователя со страницей и добавления интерактивности на сайт используется язык программирования JavaScript. PHP в свою очередь используется для связывания frontend с backend частями. Выбранная цветовая палитра сайта представлена на рисунке 1.
Рис. 1. Цветовая палитра На рисунке 2 отражены задачи и последовательность их выполнения для успешной реализации проекта.
13.04 23. 05 13.05 23.05 02.06 12.06 22.06
Анализ сайтов учителей 2 Выбор тематики сайта 2
Разработка макета десктопной версии 13
Разработка макета мобильной версии 7
Написание html и ess кода 14
Написание адаптивной версии под телефоны и планшеты Написание JavaScript Настройка отправки писем Тестирование и доработка
т
в
вя
Рис. 2. Диаграмма Ганта Так же для планирования разработки создана карта сайта, показывающая расположение блоков одностраничного сайта и его основные структурные элементы (рис. 3).
Рис. 3. Карта сайта
Разработка.
Макет сайта, адаптированный для мобильных устройств представлен на рисунке 4.
Рис. 4. Макет сайта для мобильной версии
Обратная связь реализована с помощью тега form (рис. 5), где обязательно нужно указать имя и email, и не обязательно — сообщение. Отправка формы реализована с помощью почтовой программы PHPMailer [1)4], главная часть кода представлена на рисунке 6.
<form method="post" action="serd.php" class="fonm_form">
<h3 class=,,hidden-title">06paThafi связь</ЬЗ>
<input name="name" type="text" class="iripu1:,r placeholder^ "Имя" i"equired>
<input name="email" type="email" class="input input-email" placeholder="Email" required>
<textarea class="input-textarea" name= "message" placeholder^" Ваше сообщение"></textarea>
<button type="button" class="form_button">ОТПРАВИТЬ</button>
</foi"ir>
Рис. 5. HTML код формы обратной свяОи
//flepeMeHHbiej которые отправляет пользователь $name = $_POST [' name' ]; $eniail = i_POST['email']; $message = $_POST['message'];
// Формирование самого письма
$title = "Новое письмо [с] вашего сайта!"; $body = "
<h2>npniiLno сообщение:</h2> <Ь>Имя:</Ь> $name<br> <b>Email:</b> $email<brxbr> <p>imessage</p>";
// Настройки PHPNaiLer
$mail - new PHPMailer\PHPMailer\PHPMailer(); try {
$tiiail->isSMTP(); $tnail->CharSet = "UTF-8"; $tiiail->SMTPAuth - true; // $maiL->SMTPDebug - 2;
$tnail->Debugoutput = function(istrj $level) {$GLOBALS[' status'] [] = $str;};
// Настройки вашей почты $tiiail->Host = 'smtp.inbox.ru';
itnail-MJsername = '[email protected]";
$ttiail->Password = {password; $ttiail->SMTPSecure = 'ssl'; $inail->Port = 465;
// Адрес самой почты и имя отправителя
$iriail->setFrom(' oksana ovchinnikova^inbox. ru", 'Оксана Овчинникова');
// Получатель письма
$ttiail->addAddress( 'ovchinnikovaoksana456@gmail. com'); Т,,ё один // Отправка сообщения $iriail->isHTML(true); imail->Subject = $title; $ttiail->Body = $body;
Рис. 6. Настройка и отправка писем с помощью PHPMailer Так же на сайте присутствует плавная прокрутка, реализована с помощью метода scroШntoView (рис. 6).
const scrollLight =(}=>{
const itemMeriu - document.querySelectorAll("a.scroll");
itemNlenu .forEach(item => {
item.addEventl_istener(' click', (e) => { closeMenuQ; e.preventDefanIt(};
const id - item.getAttribute("href");
document.querySelector(id).scrollIntoView({ behavior: "smooth",
blocks: "start", »;
});
});
scrollLight{);
Рис. 6. Реализация плавной прокрутки В ходе работы был проведен анализ сайтов практикующих учителей предметников. В ходе анализа выявлены достоинства и недостатки информационных ресурсов, а также определены основные информационные блоки ресурсов.
Для сайта разработан уникальный цветовой стиль и дизайн. Разработаны две версии сайта просмотра на компьютере и на мобильном устройстве. Сайт разработан, успешно функционирует и размещен в сети интернет.
Литература
1. Информационно-правовой портал Гарант.РУ. [Электронный ресурс]: Проект Приказа Министерства труда и социальной защиты РФ "Об утверждении профессионального стандарта "Педагог (педагогическая деятельность в сфере начального общего, основного общего, среднего общего образования) (учитель)". URL: https://www.garant.ru/products/ipo/prime/doc/56809182/ (дата обращения: 24.05.2022)
2. Сайт учителя информатики Козловой Л. Л. [Электронный ресурс] URL: https://informatik-kll.ucoz.ru/index/0-2 (дата обращения: 10.05.2022)
3. Сайт учителя информатики Кривоносова Е. В. [Электронный ресурс] URL: https://kri-elena.wixsite.com/krivonosova (дата обращения: 10.05.2022)
4. Шкрыль А. А. PHP — это просто. Программируем для веб-сайта. СПб: БХВ-Петербург, 2006. 368 с.
