Scientific journal
Modern problems of science and education
ISSN 2070-7428
"Перечень" ВАК
ИФ РИНЦ = 1,006

DEVELOPMENT OF SKILLS CREATING SITE AT STUDENTS OF AVERAGE PROFESSIONAL EDUCATION

Bespalko A.A. 1 Vinnik V.K. 1 Sochneva N.A. 1
1 Lobachevsky State University of Nizhny Novgorod, Nizhny Novgorod
The article deals with the formation of the skills of creating websites for students of secondary vocational education. These skills relate to those practical skills, which in the future can be useful for the professional development of students in technical schools and colleges. Organization of training is represented on the example of the discipline "Development of web-applications." The authors propose to divide the study of discipline into a basic and variable part. The basic part includes the study of modules "HTML markup language", "Creation of interactive pages using DHTML and JavaScript". The variants include the "JQuery and Bootstrap frameworks" modules, "Creating server scripts using PHP", "Data exchange scenarios". In conjunction with these modules, task complexes have been developed. These tasks include simple projects for transferring and processing data from the form between pages, working with sessions, preparing data for writing to the database, creating and executing queries to the database. And only when each of the skills is obtained, the authors propose to develop an online store site. Thus, the methodology of problems of individual complexity makes it possible to reveal the inclinations of each student.
website
web-applications
student
secondary vocational education
modular training
individual tasks

Навыки создания сайтов, размещения их в сети Интернет и дальнейшего администрирования относятся к тем практическим умениям, которые в дальнейшем закладывают основу профессионального становления учащихся техникумов и колледжей по специальности 09.02.04 «Информационные системы» (по отраслям). Возможность зарабатывать созданием и продвижением сайтов является сильнейшим мотивационным толчком для многих студентов. Не говоря уже и о том количестве направлений в области сайтостроения, которые могут быть выбраны:

  1. Дизайн.
  2. Верстка.
  3. Программирование на стороне клиента.
  4. Программирование на стороне сервера.
  5. Оптимизация для поисковых систем.

Сложность обучения студентов разработке сайта заключается в огромном количестве технологий и подходов к созданию сайтов [1; 2]. Это и создание одностраничных сайтов – лендингов, и многостраничных сайтов - визиток, требующих оптимизации, и разработка интерактивных порталов, включающих обработку данных, и организация связи с СУБД. В этой связи крайне важно выбрать ту информацию, которая будет являться базовой для дальнейшего саморазвития будущего специалиста.

В 2016 году сама дисциплина включала в себя 134 часа, в том числе 50 часов лекций, 64 часа практики, 20 часов для подготовки к курсовой работе. Количество часов менялось на протяжении 10 лет, поэтому нами были выделены базовая и вариативная часть.

К базовой части нами отнесены модули «Язык разметки страницы HTML», «Создание интерактивных страниц средствами DHTML и JavaScript». К вариативной части относятся модули «Фреймворки JQuery и Bootstrap», «Создание серверных сценариев средствами PHP», «Сценарии обмена данными».

Модуль «Язык разметки страницы HTML» включает в себя следующие разделы:

  1. Разметка страницы, язык HTML.
  2. Управление стилями, каскадные стилевые таблицы (CSS).
  3. Создание «резиновых», фиксированных и адаптивных макетов.

В качестве расширения этого модуля добавляются разделы:

  1. Возможности HTML 5.
  2. Возможности CSS

Поясним, почему современные возможности верстки и оформления сайтов выносятся в учебной программе курса в качестве расширения. Дело в том, что не все браузеры поддерживают новые стандарты, поэтому базовое обучение предполагает создание кросс-браузерных сайтов, то есть корректно отображающихся в любом браузере любой версии. Поэтому в первых трех разделах учащиеся получают навыки базовые, составляющую основу данной дисциплины. Здесь применяются в основном такие методические приемы, как лекции, практические занятия, тренинги [3; 4]. При освоении четвертого и пятого разделов учащимся предлагается лишь часть информации из новых стандартов разработки сайтов и большое количество демонстрационных примеров – наглядных, ярких и красочных, показывающих основные возможности HTML 5 и CSS3. А дальше они самостоятельно отыскивают дополнительную информацию и учатся применять ее на практике [5]. Если в первом случае при изучении курса предусматривается создание учащимися сайта «с нуля», прописывая самостоятельно и разметку и стиль, то во втором случае им допустимо использовать готовые решения и интегрировать их в свою страницу. Это дает возможность подготовить будущих специалистов к освоению постоянно меняющихся и развивающихся технологий.

В сопровождение учебного процесса по данному модулю нами был разработан комплекс заданий, включающий:

  • первичные задания: создание и оформление ссылок, списков, таблиц, одностраничных сайтов на основе макета с фиксированной шириной, «резиновых» макетов, адаптивных макетов;
  • задания творческие: создание собственного сайта с использованием только разметки и стиля, разметка новыми элементами HTML 5, создание эффектов и переходов средствами CSS

Порядка 50% времени мы рекомендуем отвести на изучение первого модуля, так как он предполагает получение и освоение базовых знаний. На наш взгляд, целесообразно тратить на него порядка 70 часов.

Второй модуль «Создание интерактивных страниц средствами DHTML и JavaScript» также делится на основные и дополнительные разделы. К основным разделам мы относим следующие темы:

  1. Объектная модель браузера.
  2. Основы JavaScript и взаимодействие с объектной моделью.
  3. Возможности JavaScript.
  4. Регулярные выражения.

К дополнительным разделам можно отнести:

  1. Расширение объектов JavaScript и создание собственных объектов.
  2. Перехватчики событий и динамическое изменение структуры страницы.

Основные разделы позволяют получить навыки обращения к статическим элементам разметки как к объектам и изменение их состояния программным путем. Это позволяет создать ту самую интерактивность, которая так ценится в современном сайтостроении.

В практический блок включаются простые задачи:

  • открытие окон;
  • изменение элементов страницы;
  • изменение оформления элементов страницы;
  • создание функций и использование условий JavaScript для изменения страницы;
  • использование возможностей объектов String, Math, Date, Array языка JavaScript;
  • построение регулярных выражений для проверки правильности ввода данных в форму.

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

Модулю «Фреймворки JQuery и Bootstrap» по времени отводится совсем немного времени: буквально по 3-4 пары на каждый фреймворк. Мы считаем, что учащихся надо знакомить с их возможностями. На данном этапе уже сформированы основные навыки по созданию сайтов и все прекрасно понимают, как сложно создать устойчивую разметку и реализовать эффектный дизайн. Так что данные фреймворки становятся дополнительными инструментами, часто облегчающими жизнь разработчику.

Модули «Создание серверных сценариев средствами PHP» и  «Сценарии обмена данными» предполагают обучение навыкам создания не просто сайтов, а уже серьезных разработок – личный кабинет пользователя на сайте, площадка электронной торговли, портал.

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

Немаловажной частью последнего модуля является изучение возможностей AJAX. Это библиотека на JavaScript, которая позволяет реализовывать асинхронные запросы к серверу. Современные страницы достаточно тяжелы и занимают приличный объем памяти. Поэтому перезагрузка нежелательна, особенно если учесть плату за трафик. Обновление блока документа «на лету» является неотъемлемым требованием современной web-разработки. Самый простой пример – автоматический пересчет суммы заказа и отображение его на экране. Вместо полной перезагрузки всей страницы с меню, карточкой товара, фотографиями изменяется только подпись корзины. Аналогично выполняются и многие другие запросы – изменение корзины, статуса пользователя при авторизации и т.д.

В качестве дополнительного материала также дается небольшой обзор методов оптимизации и продвижения сайта. При разработке курсовой работы студенты могут самостоятельно выбрать направление, в котором будет вестись разработка. Это может быть полновесный информационный портал или электронный магазин либо же сайт-визитка или информационно-развлекательный ресурс, полностью оптимизированный под продвижение в поисковых системах.

Здесь рассматривается:

  1. Понятие валидности кода сайта.
  2. Роль тегов в продвижении.
  3. Понятие ключевых запросов.
  4. Виды запросов: низкочастотные, среднечастотные и высокочастотные.
  5. Обзор сервисов подбора ключевых запросов.
  6. Обзор инструментов, позволяющих автоматизировать некоторые виды работ по сайту.
  7. Системы управления контентом (WordPress, Joomla!, OpenCart и т.д.).

Эти знания позволят в дальнейшем учащимся самим определяться с выбором направления курсовой работы, выпускной квалификационной. В связи с вышесказанным становится понятно, что объем информации по всему курсу даже в виде справочников огромен. Поэтому необходима система, которая позволит структурировать ее. Серьезно облегчает организацию образовательного процесса применение систем дистанционного образования. В ННГУ им. Н.И. Лобачевского широко внедрены IT-технологии в учебный процесс и, как пример, электронная среда обучения на основе системы Moodle [6].

Основными достоинствами данной среды, на наш взгляд, является возможность:

  • создания полноценной образовательной среды с теоретическим материалом, практическим блоком и системой контроля знаний;
  • представления материала в виде иерархической структуры, которая интуитивно понятна;
  • открытия и закрытия доступа к блокам предмета, по мере необходимости или исходя из объема часов;
  • организации самостоятельной работы студентов, причем разной степени сложности;
  • реализации обратной связи, что позволяет обеспечить выбор последующего шага обучения в зависимости от результатов контроля усвоения предыдущей информации;
  • мониторинга активности студентов в образовательной среде.

Учебный курс «Разработка WEB-приложений» организован в виде иерархии тем, каждая из которых включает в себя:

  • текст лекции;
  • набор примеров;
  • презентацию в виде прикрепленного файла;
  • тест по теме;
  • контрольную работу.

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

Создание Вики (базы знаний) по данному предмету позволяет структурировать справочный материал и обеспечить быстрый доступ к нему. Справочник для пяти языков программирования найти достаточно сложно. А установка взаимосвязей между темами позволит сформировать у студентов целостное восприятие сайтостроения в целом.

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

Для организации деятельности преподавателя, в свою очередь, система также имеет ряд преимуществ. Например, централизованная проверка и выставление оценок. Прекрасная замена бумажному журналу. Каждый учащийся может увидеть свою успеваемость в любой момент. Размещение новостей, проведение онлайн-опросов, обмен мгновенными сообщениями – все это повышает эффективность обучения в разы.

Мы успешно пользуемся данными инструментами подходами на протяжении всего времени, что преподаем дисциплину «Разработка web-приложений», и можем отметить, что многие из учащихся находят себя в различных направлениях данного вида деятельности. Кто-то становится дизайнером, кто-то верстальщиком, кто-то web-программистом. Мы считаем, что методика использования индивидуальных задач различной сложности, в совокупности с использованием системы дистанционного обучения, дает возможность раскрыть наклонности каждого студента.