infoschoolИнформатика в школеInformatics in school2221-1993Publishing House Education and Informatics10.32517/2221-1993-2021-20-5-49-54infoschool-559Research ArticleСРЕДСТВА ИКТ В УЧЕБНОМ ПРОЦЕССЕПрименение веб-тренажера по обучению CSS-анимации в рамках внеурочной деятельностиStuding the css animation with websimulator in extracurricuLar activitiesКармановаЕ. В.KarmanovaE. V.

Карманова Екатерина Владимировна, канд. пед. наук, доцент, доцент кафедры бизнес-информатики и информационных технологий

455000,  г. Магнитогорск, пр-т Ленина, д. 38

monitor81@mail.ruБезбородоваО. В.BezborodovaO. V.

Безбородова Олеся Васильевна, студентка 5-го курса кафедры бизнес-информатики и информационных технологий

 455000,  г. Магнитогорск, пр-т Ленина, д. 38

olesya.pshenichnaya.97@mail.ruМагнитогорский государственный технический университет им. Г. И. НосоваРоссияNosov Magnitogorsk State Technical UniversityRussian Federation202118072021054954Copyright © Карманова Е.В., Безбородова О.В., 20212021Карманова Е.В., Безбородова О.В.Karmanova E.V., Bezborodova O.V.Данная работа распространяется под лицензией Creative Commons Attribution 4.0.This work is licensed under a Creative Commons Attribution 4.0 License.https://school.infojournal.ru/jour/article/view/559

Статья посвящена вопросам обучения учащихся старших классов CSS-анимации (англ. Cascading Style Sheets — каскадные таблицы стилей) в рамках внеурочной деятельности с использованием метода геймификации. Рассмотрены актуальные проблемы преподавания веб-программирования в школе, выделены его основные компоненты: верстка HTML-страниц, программирование на клиентской и сер-верной сторонах. Представлен анализ существующих сервисов и онлайн-игр для обучения веб-верстке. В результате анализа трафика исследуемых сервисов был выявлен повышенный интерес пользователей интернета к веб-тренажерам, реализованным с использованием принципов геймификации. Однако на сегодняшний день имеется ограниченное количество подобных сервисов, кроме того, многие темы веб-программирования и верстки остаются до сих пор нереализованными с помощью подобных веб-тренажеров.

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

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

Авторами проведен эксперимент на базе учреждения дополнительного образования «Школа программирования KiberOne» среди учащихся десятых классов, результаты эксперимента показали эффективность использования разработанного веб-тренажера при обу-чении CSS-анимации.

The article is devoted to the issues of teaching high school students CSS animation (Cascading Style Sheets) in the framework of extracurricular activities using the gamification method. The current problems of teaching web programming at school are considered, its main components are highlighted: HTML page layout, programming on the client and server sides. The analysis of existing services and online games for teaching web layout is presented. As a result of the analysis of the traffic of the studied services, an increased interest of Internet users in web simulators, implemented using the principles of gamification, was revealed. However, today there are a limited number of such services, in addition, many topics of web programming and layout are still unrealized with the help of such web simulators.

The article describes a completed project of developing a web simulator for teaching the basic properties of CSS animation. When designing a web simulator, the requirements for the implementation of game mechanics and dynamics were considered, which will make it possible to organize the educational process in a dynamic, exciting and visual way. The article describes the key features of the web simulator, its functional requirements, provides a rationale for the choice of topics and design of the web simulator, and considers the algorithm of its operation. The topics that are studied as a result of passing tasks in the web simulator are listed. The risks associated with the implementation of the web simulator in the educational process are described.

The authors carried out an experiment on the basis of an additional education institution "KiberOne Programming School" among 10th grade students, the results of the experiment showed the effectiveness of using the developed web simulator in teaching CSS animation.

геймификациявеб-программированиеCSS-анимациявеб-тренажеробразованиеобучениеgamificationweb programmingCSS animationweb simulatoreducationtrainingReferencesБахметьева И. А., Яйлаева Р. Н.Игрофикация в образовании // Colloquium-journal. 2019. № 21-3 (45). С. 10–12.Бахметьева И. А., Яйлаева Р. Н.Игрофикация в образовании // Colloquium-journal. 2019. № 21-3 (45). С. 10–12.Борисов Н. А., Харюнин А. С.Использование геймификации при обучении школьников основам программирования // Образовательные технологии и общество. 2018. № 1. С. 469–476.Борисов Н. А., Харюнин А. С.Использование геймификации при обучении школьников основам программирования // Образовательные технологии и общество. 2018. № 1. С. 469–476.Гаврилова И. В.Геймификация как средство повышения эффективности онлайн-курсов // Образование и проблемы развития общества. 2018. № 1 (5). С. 14–23.Гаврилова И. В.Геймификация как средство повышения эффективности онлайн-курсов // Образование и проблемы развития общества. 2018. № 1 (5). С. 14–23.Дединский И. Р.Аналитический подход к довузовскому преподаванию программирования // Сайт методики довузовского обучения программированию и проектной деятельности в информатике. 2011. http://ded32.net.ru/news/2011-04-03-58Дединский И. Р.Аналитический подход к довузовскому преподаванию программирования // Сайт методики довузовского обучения программированию и проектной деятельности в информатике. 2011. http://ded32.net.ru/news/2011-04-03-58Думиньш А. А., Зайцева Л. В.Компьютерные игры в обучении и технологии их разработки // Образовательные технологии и общество. 2012. № 3 (15). С. 534–544.Думиньш А. А., Зайцева Л. В.Компьютерные игры в обучении и технологии их разработки // Образовательные технологии и общество. 2012. № 3 (15). С. 534–544.Заславский И. М.Педагогические аспекты геймификации школьного образования: что нужно знать современному учителю о дидактической игре // Известия Тульского государственного университета. 2019. № 2. С. 50–56.Заславский И. М.Педагогические аспекты геймификации школьного образования: что нужно знать современному учителю о дидактической игре // Известия Тульского государственного университета. 2019. № 2. С. 50–56.Исупова Н. И., Суворова Т. Н.Геймификация учебного процесса с использованием технологии «перевернутый класс» // Перспективы науки и образования. 2019. № 5 (41). С. 412–427.Исупова Н. И., Суворова Т. Н.Геймификация учебного процесса с использованием технологии «перевернутый класс» // Перспективы науки и образования. 2019. № 5 (41). С. 412–427.Карманова Е. В., Старков А. Н., Викулина В. В.Возможности применения технологии геймификации при реализации электронного обучения в вузе // Перспективы науки и образования. 2019. № 4 (40). С. 462–472. DOI: 10.32744.2019.4.35Карманова Е. В., Старков А. Н., Викулина В. В.Возможности применения технологии геймификации при реализации электронного обучения в вузе // Перспективы науки и образования. 2019. № 4 (40). С. 462–472. DOI: 10.32744.2019.4.35Коваль Н. Н.Геймификация в образовании // Педагогическая наука и практика. 2016. № 2 (12). С. 25–29.Коваль Н. Н.Геймификация в образовании // Педагогическая наука и практика. 2016. № 2 (12). С. 25–29.Локалов В. А., Миронов А. С.Развитие абстрактного мышления школьников в процессе обучения основам программирования // Общество: социология, психология, педагогика. 2020. № 1. С. 82–88.Локалов В. А., Миронов А. С.Развитие абстрактного мышления школьников в процессе обучения основам программирования // Общество: социология, психология, педагогика. 2020. № 1. С. 82–88.Минкин А. В., Старостин В. А. Использование онлайн-игр при изучении программирования // Интернет журнал «Мир науки». 2018. № 4. https://mir-nauki.com/PDF/62PDMN418.pdfМинкин А. В., Старостин В. А. Использование онлайн-игр при изучении программирования // Интернет журнал «Мир науки». 2018. № 4. https://mir-nauki.com/PDF/62PDMN418.pdfМосалев П. М., Седаева А. С.Обучение программированию в игровой форме // Вестник Московского государственного университета печати. 2016. № 4. С. 11–16.Мосалев П. М., Седаева А. С.Обучение программированию в игровой форме // Вестник Московского государственного университета печати. 2016. № 4. С. 11–16.Педагогов научат использовать элементы игр в дистанционном обучении // Тюменская линия. 15.07.2020. https://t-l.ru/286621.htmlПедагогов научат использовать элементы игр в дистанционном обучении // Тюменская линия. 15.07.2020. https://t-l.ru/286621.htmlПутин поручил установить приоритет математики и информатики в школах // Коммерсантъ. 04.01.2021. https://www.kommersant.ru/doc/4638730Путин поручил установить приоритет математики и информатики в школах // Коммерсантъ. 04.01.2021. https://www.kommersant.ru/doc/4638730Романов П. Ю., Ратц А. Э.Развитие творческих способностей обучающихся с использованием дидактических игр // Актуальные проблемы современной науки, техники и образования. 2016. Т. 2. С. 322–325.Романов П. Ю., Ратц А. Э.Развитие творческих способностей обучающихся с использованием дидактических игр // Актуальные проблемы современной науки, техники и образования. 2016. Т. 2. С. 322–325.Тамарская Н. В.Геймификация образования для поколения Z // Известия Балтийской государственной академии рыбопромыслового флота: психолого-педагогические науки. 2018. № 4 (46). С. 27–29.Тамарская Н. В.Геймификация образования для поколения Z // Известия Балтийской государственной академии рыбопромыслового флота: психолого-педагогические науки. 2018. № 4 (46). С. 27–29.Цыплакова Е. О. Геймификация — мотивационная практика или механизм тотального контроля над трудовым процессом? // Экономическая социология. 2016. № 3 (17). С. 82–108.Цыплакова Е. О. Геймификация — мотивационная практика или механизм тотального контроля над трудовым процессом? // Экономическая социология. 2016. № 3 (17). С. 82–108.Черноусов И. Игры с разумом. Как геймификация используется в образовании // Российская газета. 17.11.2020. https://rg.ru/2020/11/17/kak-gejmifikaciia-ispolzuetsia-vobrazovanii.htmlЧерноусов И. Игры с разумом. Как геймификация используется в образовании // Российская газета. 17.11.2020. https://rg.ru/2020/11/17/kak-gejmifikaciia-ispolzuetsia-vobrazovanii.htmlШабалина О. А., Давтян А. Г., Катаев А. В., Алимов А. А. Адаптивные обучающие игры как тренд развития обучающего ПО // ИТНОУ: информационные технологии в науке, образовании и управлении. 2018. № 4. С. 11–16.Шабалина О. А., Давтян А. Г., Катаев А. В., Алимов А. А. Адаптивные обучающие игры как тренд развития обучающего ПО // ИТНОУ: информационные технологии в науке, образовании и управлении. 2018. № 4. С. 11–16.Cheng Meng-Tzu, Rosenheck L., Lin Chen-Yen, Klopfer E. Analyzing gameplay data to inform feedback loops in The Radix Endeavor // Computers & Education. 2017. No. 111. P. 60–73. https://www.sciencedirect.com/science/article/pii/S0360131517300702Cheng Meng-Tzu, Rosenheck L., Lin Chen-Yen, Klopfer E. Analyzing gameplay data to inform feedback loops in The Radix Endeavor // Computers & Education. 2017. No. 111. P. 60–73. https://www.sciencedirect.com/science/article/pii/S0360131517300702Gomes L. M., Martins F., Guerra H. Teaching web programming using the MEAN stack // Auer M., Hortsch H., Sethakul P. (eds) The Impact of the 4th Industrial Revolution on Engineering Education. ICL 2019. Advances in Intelligent Systems and Computing. 2020. Vol. 1135. Springer, Cham. DOI: 10.1007/978-3-030-40271-6_26Gomes L. M., Martins F., Guerra H. Teaching web programming using the MEAN stack // Auer M., Hortsch H., Sethakul P. (eds) The Impact of the 4th Industrial Revolution on Engineering Education. ICL 2019. Advances in Intelligent Systems and Computing. 2020. Vol. 1135. Springer, Cham. DOI: 10.1007/978-3-030-40271-6_26Hossein-Mohand H., Trujillo-Torres J.M., GómezGarcía M., Hossein-Mohand H., Campos-Soto A. Analysis of the use and integration of the flipped learning model, project-based learning, and gamification methodologies by secondary school mathematics teachers // Sustainability. 2021. No. 13 (5). DOI: 10.3390/su13052606Hossein-Mohand H., Trujillo-Torres J.M., GómezGarcía M., Hossein-Mohand H., Campos-Soto A. Analysis of the use and integration of the flipped learning model, project-based learning, and gamification methodologies by secondary school mathematics teachers // Sustainability. 2021. No. 13 (5). DOI: 10.3390/su13052606Kenwrigh B. Interactive web-based programming through game-based methodologies. Paper presented at the ACM SIGGRAPH 2020 Educator’s Forum, SIGGRAPH 2020. DOI: 10.1145/3388530.3407243Kenwrigh B. Interactive web-based programming through game-based methodologies. Paper presented at the ACM SIGGRAPH 2020 Educator’s Forum, SIGGRAPH 2020. DOI: 10.1145/3388530.3407243

The authors declare that there are no conflicts of interest present.