УДК 004.771
Разработка информационного ресурса для группы коррекционной направленности МАДОУ «Детский сад №8» г. Балаково с использованием системы WordPress
Горшков Евгений Александрович – кандидат технических наук, зав. кафедрой Гуманитарных и естественно-научных дисциплин Балаковского филиала Российской академии народного хозяйства и государственной службы при президенте Российской Федерации.
Малышев Денис Вячеславович – студент кафедры Гуманитарных и естественно-научных дисциплин Балаковского филиала Российской академии народного хозяйства и государственной службы при президенте Российской Федерации.
Аннотация: В статье рассматриваются особенности реализации информационного ресурса для группы коррекционной направленности МАДОУ «Детский сад №8» г. Балаково с использованием инструментального средства WordPress.
Ключевые слова: CMS, WordPress, редактор кода, языки программирования, JavaScript.
Информационный ресурс является важнейшим элементом информационной политики современного образовательного учреждения. Также бывают ситуации, когда учреждению нужен дополнительный, узконаправленный информационный ресурс, например, информационный ресурс для группы коррекционной направленности.
Группа коррекционной направленности – группа для детей с ограниченными возможностями. В настоящее время в России насчитывается более двух миллионов детей с ограниченными возможностями, что составляет 4,5% от общего числа детей, посещающих учебные заведения, при этом специальные условия для получения образования предоставляется только 1/3 этих детей в специальных образовательных учреждениях, некоторые дети вообще не посещают образовательные учреждения.
Важным звеном помощи детям с проблемами развития, является поддержка их родителей. Одной из основных форм работы педагога с родителями детей с ОВЗ является консультирование, оказание помощи в воспитании и обучении ребенка с ОВЗ. Информационный ресурс поможет не прерывать образовательный процесс детям, которые по каким-то причинам временно не могут посетить детский сад, а также поможет родителям и детям с ОВЗ, не посещающим образовательные учреждения.
МАДОУ «Детский сад №8» г. Балаково является развивающимся дошкольным учреждением, работающим в инновационном режиме. Группа коррекционной направленности — это группа для детей дошкольного возраста, имеющих ограниченные возможности здоровья (ОВЗ), в котором созданы условия для всестороннего развития, лечения и коррекции таких детей.
Информационный ресурс в виде Интернет-сайта для группы коррекционной направленности - информационного вида. Вдобавок к этому, управлять сайтом будет человек, не имеющий знаний в области программирования, поэтому у сайта должна быть полноценная панель администрирования с человек понятным интерфейсом. Исходя из этого, лучшей технологией для создания сайта группы коррекционной направленности будет CMS. Из всего многообразия CMS, был выбран WordPress. Его главные преимущества, это: открытый код; не требует финансовых вложений; большое сообщество людей, которые сотрудничают и вносят свой вклад; русскоязычная документация; большое количество бесплатных плагинов и тем; очень легкая, пятиминутная установка. Так же для реализации информационного ресурса применялись языки HTML, CSS, JS, а также API WordPress.
Необходимым условием разработки информационного ресурса является выбор темы сайта. Тема – это набор файлов, которые определяют внешний вид сайта. Рассмотрим процесс редактирования темы сайта. Для этого необходимо пройти в консоль WordPress, вкладка «Внешний вид», «Темы». В окне появится таблица всех тем, которые уже доступны для использования. Нужно нажать на «Добавить новую тему». В появившимся списке выбираем подходящую тему. Для сайта группы коррекционной направленности была выбрана тема Lovecraft, это минималистичная тема с адаптивным дизайном.
Далее рассмотрим процедуру установки шрифтов. Пройдем на сайт GoogleFonts и выбирем необходимые шрифты. Для заголовка сайта был выбран шрифт Pattaya, для основного текста был выбран шрифт Roboto. Нужно загрузить шрифты на сервер в папку fonts. Далее нужно открыть файл Genericons.css, в этот файл нужно подключить шрифты. Код подключения изображен на рисунке 1.
|
@font-face { font-family: 'Robot'; src: url('../fonts/robot/Roboto.woff') format( 'woff' ); } @font-face { font-family: 'Pattaya'; src: url('../fonts/pattaya/Pattaya.woff') format( 'woff' ); } |
Рисунок 1. Код подключения шрифтов.
Теперь можно использовать шрифты для редактирования сайта. Нужно поменять шрифт в заголовке, для этого нужно найти нужный селектор при помощи консоли разработчика, в нашем случае это .blog-title, далее проходим в файл style.css и меняем значение свойства font-famely у селектора .blog-title на Pattaya. Аналагичные действи нужно сделать и с остальными селекторами в которых есть свойство font-famely.
Теперь рассмотрим процесс установки слайдера. Для начала воспользуемся сервисом CodePen и выбираем подходящий слайдер. После этого нужно установить слайдер на сайт. Для этого зайдем в папку assets/css и создадим файл slider.css. В этот файл нужно скопировать код из сервиса CodePen. В файл header.php нужно вставить следующий код, рисунок 2.
Зайдем в папку assets/js и создадим там файл slider.js, в этот файл копируем код из CodePen. Теперь нужно подключить файлы slider.css и slider.js к сайту. Для этого в файле functions.php нужно прописать следующий код, рисунок 3.
|
<div class="sim-slider"> <ul class="sim-slider-list"> <li class="sim-slider-mask"><img src="http://pvbk.spb.ru/inc/slider/imgs/no-image.gif" alt="screen"></li> <!-- этоэкран --> <li class="sim-slider-element"><img src="/ " alt="screen"><li> <li class="sim-slider-element"><img src="/ " alt="screen"><li> <li class="sim-slider-element"><img src="/ " alt="screen"><li> </ul> <div class="sim-slider-arrow-left"><img src="http://pvbk.spb.ru/inc/slider/sim-files/sim-arrow-left.png"></div> <div class="sim-slider-arrow-right"><img src="http://pvbk.spb.ru/inc/slider/sim-files/sim-arrow-right.png"></div> <div class="sim-slider-dots"></div> </div> |
Рисунок 2. Код слайдера в файле header.php.
|
add_action( 'wp_enqueue_scripts', 'lovecraft_scripts' ); function lovecraft_scripts() { wp_enqueue_style( 'slider', get_template_directory_uri() . '/assets/css/slider.css' ); wp_enqueue_script( 'slider', get_template_directory_uri() . '/assets/js/slider.js', '1.0.0', true ); |
Рисунок 3. Код подключения стилей и скрипта slider.
Далее нужно сделать возможным добавление слайдов из панели WordPress, для этого нужно в файл functions.php добавить специальный код. Теперь нужно настроить вывод слайдов на сайт. Для этого откроим файл header.php, найдем строчки вывода слайдов <li class="sim-slider-element"> <img src="/" alt="screen"><li>. Удалим лишние и пропишем код для вывода постов. Пример этого кода можно взять с сайта Wp-Kama. Ниже представлен переработанный код для слайдера, рисунок 4.
|
<li class="sim-slider-mask"><img src="http://pvbk.spb.ru/inc/slider/imgs/no-image.gif" alt="screen"></li><!--этоэкран--> <?php global $post; $query = new WP_Query( [ 'posts_per_page' => 6, 'post_type' => 'elem_slider',]); if ( $query->have_posts() ) { while ( $query->have_posts() ) { $query->the_post(); ?> <li class="sim-slider-element"><?php the_post_thumbnail('full');?></li> <?php } } wp_reset_postdata();?> |
Рисунок 4. Измененный код слайдера в header.php.
Для вывода слайдов нужно прописать название типа записи elem_slider в 'post_type'. Теперь можно зайти в раздел «Слайды» на панели управления WP и создадим новый слайд загрузив фото в соответствующее поле, опубликуем запись.
Разработанный при помощи системы WordPress информационный ресурс в виде Интернет-сайта по адресу https://def-grup.ru/ для группы коррекционной направленности МАДОУ «Детский сад №8» г. Балаково представлен на рисунке 5.
Рисунок 5. Информационный ресурс для группы коррекционной направленности МАДОУ «Детский сад №8» г. Балаково.
Данный информационный ресурс позволит наиболее эффективно предоставлять образовательные и консультационные услуги родителям и близким детей с ОВЗ. Кроме того, возможность менять динамическое содержимое сайта значительно расширит возможности дальнейшего обслуживания Интернет-ресурса и, соответственно, отвечать требованиям современного пользователя и разработчика.
Список литературы
- Фримен, Э Изучаем программирование на JavaScript / Э. Фримен, Э. Робсон. - М. : Питер, 2019. - 637 с.