CC BY
68Литература:
1. Nilson, Linda Burzotta. Teaching at its best: a research-based resource for college instructors / Linda B. Nilson. - 3rd ed.p. cm. ISBN 978-0-470-40104-0 (pbk.), p. 107.
2. Как правильно сформулировать цели и задачи урока? [Электронный ресурс] // Образовательный портал «Инфоурок», 2021. - URL: https://infourok.ru/ (дата обращения 10.02.2020).
3. Махмутов, М.И. Избранные труды: в 7 т. / Т.4: Современный урок и педагогические технологии развития мышления / М.И. Махмутов / Сост. Д.М. Шакирова, - Казань: Магариф - Вакыт, 2016. - С. 79-80.
4. Обществознание. Поурочные разработки. 11 класс: пособие для учителей общеобразоват. организаций: базовый уровень / Л.Н. Боголюбов, А.Ю. Лазебникова, Н.Ю. Басик и др. - М.: Просвещение, 2014. - 256 с.
5. Педагогика: Учебник / Л.П. Крившенко, М.Е. Вайндорф-Сысоева и др.; Под ред. Л.П. Крившенко. -М.: Изд-во Проспект, 2010. - C. 421.
6. Проектирование учебных заданий по таксономии Блума [Электронный ресурс] // Образовательный портал «Инфоурок», 2021. - URL: https://infourok.ru/material.html?mid=105125 (дата обращения 18.02.2020).
7. Сиденко, Е.А. Мастер-класс: «Целеполагание: от осмысления к деятельности» // Эксперимент и инновации в школе, 2010. - № 5. - С. 42-49.
8. Федеральные государственные образовательные стандарты [Электронный ресурс] // Национальная ассоциация развития образования и науки, 2021. - URL: https://fgos.ru/ (дата обращения 12.11.2020).
Педагогика
УДК 378.011.33:004.738.1
кандидат педагогических наук, доцент Власова Наталья Сергеевна
ФГАОУ ВО «Российский государственный профессионально-педагогический университет» (г. Екатеринбург) ОСОБЕННОСТИ ПОДГОТОВКИ ВЕБ-РАЗРАБОТЧИКОВ В ВЫСШЕЙ ШКОЛЕ
Аннотация. В статье обобщен опыт подготовки бакалавров в области веб-разработки в высшей школе. Выявлены основные этапы создания веб-сайта и функции специалистов по созданию сайтов, на основе этого определены модули обучения, направленные на формирование определенной компетенции в сфере веб-дизайна или веб-программирования, сформулированы особенности и педагогические условия. В заключении делается вывод о необходимости дальнейших исследований подготовки компетентных специалистов в области веб-разработки, так как эта сфера остается очень перспективной для выпускников вузов.
Ключевые слова: веб-разработка, проектный метод обучения, модули обучения, компетенция, Ворлдскиллс, веб-школа.
Annotation. The article summarizes the experience of training bachelors in the field of web development in higher education. The main stages of creating a website and the functions of specialists in creating websites are identified, on the basis of this, training modules aimed at forming a certain competence in the field of web design or web programming are defined, features and pedagogical conditions are formulated. In conclusion, it is concluded that further research is needed to train competent specialists in the field of web development, since this area remains very promising for university graduates.
Keywords: web development, project training method, training modules, competence, WorldSkills, web school.
Введение. Профессия веб-разработчика входит в список самых высокооплачиваемых по данным портала по поиску работы HeadHunter [6]. В России подготовка веб-программистов осуществляется в рамках подготовки бакалавров по IT-направлениям. Освоение веб-технологий при изучении дисциплин «Web-дизайн», «Web-программирование» и т.п., которые предусмотрены в учебных планах таких направлений, недостаточно для получения объема знаний и навыков для «входа» в профессию веб-разработчика. Возможно поэтому активно развиваются различные онлайн школы в области веб-технологий, также многие IT-компании открывают собственные курсы и школы, в которые отбирают лучших претендентов из талантливых учеников школ, студентов, или всех желающих пройти отбор, и готовят веб-программистов с последующим их трудоустройством в этих же компаниях.
Специфика подготовки веб-разработчика состоит в том, что охватывает очень большой стек технологий, которые необходимо знать хотя бы на базовом уровне, чтобы в будущем выбрать более узкую специализацию.
В данной статье обобщен опыт подготовки бакалавров в области веб-разработки в Российском государственном профессионально-педагогическом университете (ФГАОУ ВО «РГППУ» г. Екатеринбург), где студенты разных направлений изучают дисциплины «Web-дизайн», «Web-программирование» или «Web-технологии». Данный опыт был представлен в нескольких научных статьях на различных конференциях [2, 3, 4]. Обучение веб-разработке построено на идее, что у студента формируется веб-компетенция, которая включает структурно-функциональный, художественный и технологический компоненты при проектировании и создании веб-сайта [5].
Изложение основного материала статьи. Для исследования нами был проведен анализ литературных источников. В своих работах ведущие отечественные веб-дизайнеры, такие как А. Лебедев и Д. Кирсанов рассматривают тенденции развития веб-дизайна.
В научных диссертациях по методике обучения в основном рассматривается подготовка в области веб-дизайна и в меньшей степени в области веб-программирования. Так Корзина М.И. в своей диссертации рассматривает комплексный подход к проектированию веб-сайта, как объекта графического дизайна и как информационной системы, т.е. необходимо учитывать «художественно-эстетическую и техническую составляющие сайтов» [8].
Кузнецова Н.И. рассматривает веб-дизайн в качестве инструмента моделирования виртуального пространства современной культуры [9].
Блуднов Г.П. в своей диссертации делает акцент на том, что «...веб-дизайн в настоящее время еще не нашел свое достойное место в практике обучения студентов педагогических учебных заведений.», а также отмечает, что «. педагогическое значение Веб-дизайна и Интернет технологий никем не изучались. Также
отсутствуют специальные исследования, посвященные содержанию и методике обучения Веб-дизайну учащихся школ и студентов педагогических вузов» [1].
За последние десять лет ситуация мало изменилась. Нам не удалось найти отечественных педагогических исследований по подготовке веб-разработчиков полного цикла. Необходимость таких исследований заключается в том, что в настоящее время тесно взаимосвязаны функции веб-дизайнера и веб-программиста. Раньше веб-дизайнеры проектировали макеты и осуществляли графическое наполнение верстки, сейчас они также привлекаются к frontend разработке, т.е. реализуют графический дизайн сайта в HTML-макет, создают анимацию, таким образом активно участвуют в разработке кода, в свою очередь веб-программисты используют в своей работе инструменты дизайна для обеспечения интерактивности интерфейса.
Мы проанализировали рынок труда и разделение функций веб-разработчиков в веб-студиях на предмет необходимых знаний и умений. Также в ходе исследования были использованы различные методы анализа литературы по педагогике, литературы по обучению созданию сайтов, по компьютерной графике и дизайну в рамках проблемы исследования. Был изучен отечественный опыт преподавателей веб-технологий, проведены беседы со студентами, анкетирование обучаемых по окончании прохождения учебной дисциплины, проводились различные педагогические эксперименты с применением проектного метода обучения, анализ выполненных проектов в рамках лабораторных работ, курсовых проектов и в рамках выпускных квалификационных работ.
Был проанализирован процесс разработки сайта в веб-студии, на основе которого были выявлены следующие этапы создания сайтов.
Этап 1. Анализ технического задания на создание сайта от заказчика.
Этап 2. Создание информационной архитектуры web-сайта. На данном этапе составляется логическая структура сайта и изображается в виде схемы, затем проектируется физическая структура сайта максимально приближенная к логической структуре.
Этап 3. Сбор содержимого (контента). Сбор текстов, изображений, аудио, видеоматериалов и др.
Этап 4. Определение технологий, которые будут использоваться. Если сайт небольшой до 10 страниц и не подразумевает интерактивность с пользователем, можно использовать статические технологии. В других случаях и чаще всего используются динамические технологии.
Этап 5. Создание макета сайта. Макет - это внешний вид сайта, который видит пользователь, когда сайт открыт в браузере. Макет создается в каком-либо графическом редакторе.
Этап 6. Создание шаблона средствами HTML и CSS. Должен получиться интерфейс, максимально приближенный к макету. Такая страница является шаблоном для всех остальных.
Этап 7. Сборка структуры. Заключается в создании файловой системы (физической структуры) на основе логической структуры сайта.
Этап 8. Наполнение контентом. Верстка текстов, изображений и т.д. Возможна параллельная оптимизация веб-страниц для продвижения в Интернет.
Этап 9. Регистрация доменного имени и размещение сайта на хостинге.
Этап 10. Поддержка сайта и продвижение в сети Интернет.
На основе этапов создания сайта были определены основные функции различных веб-разработчиков:
• веб-дизайнер (UX/UI- дизайнер) - создает дизайн сайта и интерфейсов;
• веб-верстальщик - переводит дизайн сайта в HTML-шаблон. Такого специалиста также называют frontend-разработчик;
• веб-программист - программирует функционал сайта. Такого специалиста называют backend-разработчик;
• контент менеджер - наполняет сайт контентом;
• SEO-оптимизатор - занимается продвижением сайта в сети Интернет.
Многие из этих функций могут объединятся в рамках должностных обязанностей веб-разработчика. Например, контент менеджер может не только наполнять сайт информацией, но и заниматься продвижением сайта в Интернет, т.е. выполнять функции SEO-оптимизатора. Или, например, frontend-разработчик и backend-разработчик могут быть в одном лице, тогда такой специалист называется fullstack-разработчик.
Определение функций веб-разработчиков позволило предположить, что полный цикл подготовки таких специалистов в высшей школе можно разделить на следующие модули с перечислением основных технологий, которыми необходимо овладеть в результате прохождения модуля.
Модуль «UX/UI-дизайн». Термин «UX/UI-дизайн» постепенно вытесняет термин «Веб-дизайн», так как помимо создания дизайна сайтов включает изучение технологий прототипирования и создания дизайна веб-интерфейсов, к которым также относится интерфейс веб-сайта. В рамках этого модуля студенты изучают основные программы и сервисы прототипирования, создание макета сайта в графическом редакторе или онлайн-сервисе Figma, композицию сайта, дизайны элементов сайта, анимацию и интерактивность различных элементов.
Модуль «Frontend разработка» включает изучение базовых технологий гипертекста HTML5 и стилевых описаний CSS3, язык программирования JavaScript, адаптивную верстку макетов будущих сайтов из форматов графических редакторов или графического сервиса Figma. В последние годы требования к знаниям frontend специалиста расширились, сюда добавилось требования к знанию методологии верстки БЭМ, знание препроцессоров CSS (LESS, Sass, Stylus и т.п.), фреймворка Bootstrap и ему подобных, умение работать с технологиями командной работы средствами Git, понимать принципы работы сборщика проекта Webpack и иметь представление о Node.js, который работает на стороне сервера (в отличие от JavaScript).
Модуль «Backend разработка» посвящен изучению языков веб-программирования PHP в связке с базой данных MySQL, языку C#, самостоятельному проектированию системы управления сайтом (CMS) и программирование различных модулей и плагинов к наиболее популярным CMS, таким как, WordPress, Joomla и «посадку» HTML-макета на CMS.
Модуль «Контент менеджер». Работа контент менеджера не связана ни с версткой, ни с программированием, более того, на этапе «посадки» HTML-макета на CMS сайта одним из главных условий является то, чтобы контент менеджеру вообще не приходилось обращаться к исходному коду.
Для того, чтобы претендовать на вакансию контент менеджера на рынке труда, необходимо хорошо уметь писать тексты, находить необходимую информацию, обрабатывать изображения, знать наиболее
популярные CMS такие как WordPress, Joomla, OpenCart, Bitrix и др. Поэтому подготовка по этому модулю направлена на изучение перечисленных компонентов.
Модуль «SEO-оптимизация и продвижение в сети Интернет» включает изучение подготовки веб-документа к продвижению в сети Интернет, изучение систем статистики, таких как Яндекс Директ и Google Analytics, различные методы продвижения веб-ресурса, анализ и интерпретация результатов оптимизации и изменения позиций веб-страниц в выдаче результатов поисковых машин.
В ходе исследований и апробации нами были выявлены несколько особенностей подготовки веб-разработчиков в высшей школе.
Одной из особенностей подготовки веб-разработчика является проектный метод обучения. Процесс разработки веб-сайта включает несколько этапов, поэтому процесс создания итогового проекта можно разбить на блоки согласно этим этапам. Например, ставим задачу - разработать корпоративный веб-сайт. Разбиваем задачу на подзадачи согласно этапам реализации проекта:
• формулировка технического задания на разработку проекта;
• разработка прототипа;
• реализация дизайна согласно прототипу;
• верстка макетов главной и типовой страницы средствами HTML5 и CSS3;
• «посадка» макета на систему управления сайтом;
• реализация структуры сайта на CMS, программирование необходимых дополнительных модулей или плагинов;
• наполнение контентом;
• оптимизация для продвижения в сети Интернет.
Следующая особенность подготовки веб-разработчика - формирование определенной компетенции согласно этапам реализации проекта:
• компетенция «UX/UI-дизайнер» формируется на этапе разработки прототипа и реализации дизайна согласно прототипу;
• компетенция «Frontend разработчик» - верстка макетов главной и типовой страницы средствами HTML5 и CSS3;
• компетенция «Backend разработчик» - «посадка» макета на систему управления сайтом и реализация структуры сайта средствами веб-программирования;
• компетенция «Контент менеджер» - наполнение сайта информацией;
• компетенция «SEO-специалист» - оптимизация и продвижение сайта в сети Интернет.
Следующая особенность подготовки веб-разработчиков - участие в движении Ворлдскиллс.
Высокий интерес у студентов, интересующихся веб-разработкой, является участие в чемпионате Ворлдскиллс. Задания чемпионата охватывают различные области деятельности веб-разработчика, такие как: создание адаптивного макета сайта на основе графического эскиза в формате Photoshop или Figma, создание интернет-магазина, написание различных скриптов.
Студенты РГППУ несколько раз участвовали в чемпионатах Ворлдскиллс достаточно успешно, в связи с этим в РГППУ было проведено обучение преподавателей, ведущих дисциплины веб-разработки, на курсах повышения квалификации по программе «Технологии фронтенд разработки (с учетом стандарта Ворлдскиллс по компетенции «Веб-дизайн и разработка»)». В рамках программы преподавателям представилась уникальная возможность актуализировать свои знания и умения при создании современных веб-продуктов:
• создание прототипа макета лэндинга в программе подготовки интерфейсов, или в графической программе, или вручную на бумаге с использованием чертежных инструментов по желанию;
• реализация дизайна лэндинга на основе разработанного прототипа в онлайн сервисе Figma, основные инструменты которого аналогичны таким графическим редакторам, как Adobe Illustrator и CorelDRAW;
• создание адаптивного HTML-макета средствами HTML5 и CSS3 на основе технического задания для лэндинга, содержащего десять информационных блоков разного назначения, включая слайдер, фильтр товаров по разным критериям, форму обратной связи, включение в макет карты Google;
• реализация интернет-магазина средствами CMS WordPress с использованием готовой темы WordPress. В данном блоке также предусмотрено выполнение контрольной работы строго по индивидуальному варианту - создание интернет-магазина с элементами, обязательными для веб-продукта данной категории: несколько разделов товаров с фотографиями, описаниями, ценами для каждого товара, наличие корзины покупателя, фильтр товаров по цене, по бренду, по скидке, а также наличие слайдера с отзывами и формы обратной связи;
• курсы заканчивались демонстрационным экзаменом по стандартам Ворлдскиллс, аналогичном при проведении чемпионатов Ворлдскиллс, в которых принимают участие студенты учебных заведений. Следует отметить высокую сложность демонстрационного экзамена, когда за очень ограниченное время необходимо создать полноценный адаптивный лэндинг фирмы по техническому заданию и по стандартам W3C (Консорциум Всемирной паутины (англ. World Wide Web Consortium, W3C), которые описывают требования к валидности HTML и CSS кода макетов сайтов и веб-приложений. На наш взгляд, это очень полезный и эффективный тренинг для преподавателей в плане скорости и корректности набора кода, применения современных инструментов разработки веб-сайтов, и погружения в профессиональную среду веб-программирования.
Следующая особенность подготовки веб-разработчиков - создание необходимых педагогических условий. Нами сформулированы следующие педагогические условия.
1. Формирование определенной компетенции в рамках каждого модуля. Освоение каждого модуля должно быть ориентировано на получение знаний и умений, которые дадут возможность обучаемому претендовать на соответствующую вакансию. Например, изучив модуль «UX/Ul-дизайнер», обучаемый мог начать работать дизайнером интерфейсов или веб-дизайнером. Освоив модуль «Frontend разработка», обучаемый может претендовать на должность HTML-верстальщика или frontend-разработчика и т.д.
2. Проектный метод обучения - реализация одного сквозного проекта в ходе изучения всех модулей. Выполнение единого проекта на протяжении нескольких модулей, позволит обучаемому лучше понять полный цикл разработки веб-сайта или приложения, наблюдать постепенную реализацию идеи в готовый
продукт, осознать необходимость тщательной проработки предыдущего этапа прежде, чем перейти к последующему. Тестирование итогового продукта позволит выявить недостатки и недоработки на каждом из предыдущих этапов реализации проекта.
3. Моделирование профессиональной среды в ходе выполнения сквозного проекта. Применение проектного метода обучения приближает обучаемого к реальной профессиональной среде в веб-студии. Стоит отметить, что в реальных компаниях по разработке сайтов чаще всего присутствует разделение труда, и редко, когда сайт от идеи до внедрения разрабатывает один человек. Выполнение всех стадий проектов самостоятельно позволяет студенту почувствовать себя в роли разработчика на каждом этапе, лучше осознать специфику работы такого исполнителя, осознать свою будущую более узкую специализацию в области веб-разработки. Активное участие в защите проекта перед группой, а также участие в конкурсах веб-сайтов, олимпиадах и чемпионатах по веб-разработке способствует приобретению нового профессионального опыта самопрезентации, повышению самооценки, осознанию собственных слабых сторон.
4. Обеспечение содержательного и контролирующего блоков цифровым контентом. Все модули курса должны быть обеспечены электронными материалами, которые возможно разместить в информационно-образовательной среде учебного заведения. Цифровой образовательный контент стал не только необходимостью современной системы обучения, но и нашел широкую поддержку в среде обучаемых, «.85% респондентов считают возможной замену традиционных курсов на онлайн-курсы и только 15% не согласны с данным утверждением.» [7].
5. Привлечение преподавателей-практиков и экспертов Ворлдскиллс для курирования проекта и контроля усвоения знаний. На защиту проекта целесообразно приглашать сторонних специалистов, например, преподавателей-практиков, которые кроме учебного процесса работают в реальных коммерческих проектах по веб-разработке, представителей веб-студии или экспертов чемпионатов Ворлдскиллс для конструктивной критики, выявления ошибок, обмена опытом, профессиональной беседы, приглашения на стажировки и т.п. Все это, на наш взгляд, позволяет обучаемым более близко познакомиться с профессиональной областью веб-разработки и осознать возможности выбора своей будущей профессиональной деятельности.
Следующая особенность подготовки веб-разработчиков - организация веб-школы в рамках дополнительного образования в вузе. Студенты и обучаемые, которые предполагают после окончания вуза работать в области веб-разработки, уже во время обучения в вузе интересуются различными дополнительными курсами в этой области, самостоятельно изучают литературу и различные проекты по веб-разработке. В таком случае целесообразно в рамках учебного заведения организовать веб-школу не только для студентов, но и для всех желающих. В рамках такой школы обучаемые могут пройти как отдельные модули и получить по окончании свидетельство о повышении квалификации, так и полный курс обучения и получить после этого документ о профессиональной переподготовке.
Выводы. Таким образом, подготовка полноценного специалиста в области создания веб-сайтов и веб-приложений в рамках дисциплин, предусмотренных учебным планом, сможет сформировать только самые базовые знания. Более углубленную подготовку можно предложить в качестве дополнительных модулей обучения в рамках дополнительного образования в стенах этого же вуза, преддипломную практику в реальной веб-студии, и выполнение продукта для заказчика в рамках выпускной квалификационной работы.
Обобщая опыт исследования, можно сказать, что изучение методики подготовки бакалавров в области веб-разработки остается очень актуальной, т.к. эта сфера на сегодняшний день остается очень перспективной для выпускников вузов благодаря привлекательности самой профессии, высокой востребованности специалистов в данной области, высокой оплате труда и гарантии трудоустройства при наличии компетенций в области веб-дизайна и веб-программирования.
Литература:
1. Блуднов Г.П. Веб-дизайн как средство специальной подготовки студентов художественно-графических факультетов: дис. ... канд. пед. наук: 13.00.02. М., 2004. 186 c. URL: http://www.lib.ua-ru.net/diss/cont/105062.html (дата обращения: 26.02.2021).
2. Власова Н.С. Возможности веб-школы в рамках дополнительного образования // Новые информационные технологии в образовании и науке. 2019. № 2. С. 104-107.
3. Власова Н.С. Особенности подготовки веб-дизайнера в рамках дополнительного образования // Наука. Информатизация. Технологии. Образование : материалы XIII междунар. науч.-практ. конф., Екатеринбург, 24-28 февраля 2020 г. Екатеринбург, 2020. С. 272-280.
4. Власова Н.С. Формирование цифрового контента для подготовки веб-разработчиков // Наука. Информатизация. Технологии. Образование: материалы XIII междунар. науч.-практ. конф., Екатеринбург, 2428 февраля 2020 г. Екатеринбург, 2020. С. 18-24.
5. Власова Н.С. Научно-методическое обеспечение подготовки студентов вузов в области web-дизайна: дис. .канд. пед. наук: 13.00. Екатеринбург, 2010. 243 с.
6. ИТ: обзор рынка вакансий и топ-15 специальностей. URL: https://ekaterinburg.hh.ru/article/24562 (дата обращения: 26.02.2021).
7. Киуру К.В., Попова Е.Е. Использование цифрового контента в образовательном процессе вуза как ответ на вызовы визуального поворота // Вестник Челябинского государственного педагогического университета. 2018. № 2. С. 91-102. URL: https://cyberleninka.ru/article/n/ispolzovanie-tsifrovogo-kontenta-v-obrazovatelnom-protsesse-vuza-kak-otvet-na-vyzovy-vizualnogo-povorota/viewer (дата обращения: 22.02.2021).
8. Корзина М.И. Дизайн-технология разработки интернет-сайтов: дис. ... канд. техн. наук: 17.00.06. СПб., 2014. 161 c. URL: https://www.dissercat.com/content/dizain-tekhnologiya-razrabotki-internet-saitov (дата обращения: 26.02.2021).
9. Кузнецова Н.С. Веб-дизайн как инструмент моделирования виртуального пространства современной культуры: дис. ... канд. культурологии: 24.00.01. Саранск, 2010. 171 c. URL: http://www.dissercat.com/content/veb-dizain-kak-instrument-modelirovaniya-virtualnogo-prostranstva-sovremennoi-kultury (дата обращения: 26.02.2021).
