КЛЮЧОВІ АСПЕКТИ ВИВЧЕННЯ FRONT-END ТЕХНОЛОГІЙ У ПРОЦЕСІ ПІДГОТОВКИ МАЙБУТНІХ УЧИТЕЛІВ ІНФОРМАТИКИ

УДК 378.011.3:004:424

МОСІЮК Олександр Олександрович –

кандидат педагогічних наук, старший викладач

кафедри прикладної математики та інформатики

Житомирський державний університет імені Івана Франка

ORCID ID 0000-0003-3530-1359

e-mail: [email protected]

Постановка та обґрунтування актуальності проблеми. В умовах інформаційного суспільства технологічна база у сфері створення сучасних інтерактивних web-сервісів змінюється майже кожного дня. Постійно оновлюються стандарти HTML, CSS, JavaScript; створюються нові фреймворки на базі таких мов програмування як Python, Ruby, Php тощо. Інструменти для проектування також зазнали значних змін. Якщо ще декілька років тому основним засобом для створення дизайну інтерфейсів сайтів та мобільних додатків був растровий графічний редактор Adobe Photoshop, то тепер найпопулярнішими програмами є Sketch і AdobeXD, а також он-лайн сервіс Figma.com. Також часто використовується інструментарій програм Balsamiq та Axure для розробки концептів сторінок.

Таке різноманіття засобів та технологій, висуває нові вимоги до підготовки майбутніх учителів інформатики, які повинні розуміти процес створення сучасних web-додатків. Зокрема вони мають розбиратися у особливостях проектування, програмування та тестуванням Internet-сервісів. Окрім цього, у навчальних програмах із предмету «Інформатика» для 10 – 11 класів передбачено вивчення теми «Web-дизайн», що є ще однією вагомою причиною докладного вивчення спеціалізованих засобів розробки сайтів [4, c. 109-124].

Зауважимо також, що у процесі опанування знань, умінь та навичок, необхідних для створення web-ресурсів, студенти мають навчитися: проектувати структуру сторінки, підібрати текстовий, графічний та відео контент, естетично оформляти сайти, верстати їх за допомогою HTML5 та CSS3, програмувати взаємодію з користувачем за допомогою мови програмування JavaScript, виконувати тестування розробленого інтерфейсу та його функціоналу тощо.

Аналіз останніх досліджень і публікацій. Вивчення технологій створення web-сайтів є важливим компонентом підготовки спеціалістів як майбутніх учителів інформатики так і фахівців з освітніх комп’ютерних технологій. Загалом процес вивчення відповідного спеціалізованого інструментарію у педагогічних закладів вищої освіти дозволяє забезпечити достатню комплексну підготовку педагогів, спеціальності 014 Середня освіта (Інформатика). Проте, враховуючи швидкість розвитку сучасних засобів для проектування і створення дизайну, верстки та програмування сайтів, відзначимо проблему із оновленням змістовного наповнення відповідних спеціалізованих навчальних предметів.

Вивчення інструментарію створення сайтів у педагогічних закладах вищої освіти розкривають у своїх працях Базурін В. М. [1], Ворожбит А. В., Рибак О. С. [2], Іваськів І. С., Рамський Ю. С., Олексюк В. П. [3], Пасічник О. Г., Пасічник О. В., Стеценко І. В. [7]. Для них характерним є висвітлення технологій, необхідних як для верстки сайтів так і засобів серверного програмування. Проте таке поєднання не є оптимальним, оскільки не враховує особливостей процесу розробки web-ресурсів і представляє його у спрощеному вигляді.

Серед закордонних авторів переважає висвітлення вузькоспеціалізованих технологій створення Internet-ресурсів (HTML5, CSS3, JavaScript, AngularJS, ReactJS тощо) у навчальних підручниках (Dackett J., Freeman A., Mardan A., Stefanow S. та інші) [9, 11, 12, 13].

Мета статті полягає у розкритті ключових аспектів вивчення сучасних front-end технологій у процесі підготовки майбутніх учителів інформатики, у контексті залучення новітніх практик для створення інтерфейсів web-сайтів.

Методи дослідження. У процесі дослідження були використані загальнонаукові та спеціальні теоретичні методи. Зокрема до них варто віднести аналіз наукових джерел, нормативних документів і навчальних програм приватних спеціалізованих ІТ-курсів; порівняння стану дослідження проблеми викладання інформаційно-комп’ютерних технологій у наукових публікаціях українських та закордонних авторів; узагальнення результатів тощо.

Виклад основного матеріалу дослідження. Вивчення технологій, пов’язаних із створенням сайтів, зазвичай відбувається у рамках таких предметів: «Web-технології та Web-дизайн», «Internet-програмування», «Програмування та підтримка Web-застосувань» тощо. Класичним для цих предметів є поєднання тем, які пов’язані із версткою, адмініструванням сайтів, програмуванням серверної частини, проектуванням бази даних, розробкою сценаріїв, необхідних для забезпечення інтерактивності web-сайтів. У той же час, якщо розбирати реальний процес розробки Internet-ресурсу, то умовно виділяють такі основні частини: проектування і створення дизайну користувацького інтерфейсу, front-end, back-end та етап тестування продукту. Серед наведених кроків важливо роз’яснити сутність таких термінів як «Front-end» і «Back-end». Литвиненко О. у своїй статті на сайті DOU.UA наступним чином подає трактування цих понять. «Front-end і Back-end – це терміни програмної інженерії, які розділяють відповідно до принципу розмежування відповідальності між користувацьким рівнем та рівнем доступу до даних користувачів. Фактично front-end є інтерфейсом взаємодії між користувачем та апаратною частиною back-end» [7]. Тобто люди, які займаються створенням інтерактивних інтерфейсів вважаються спеціалістами із front-end розробки, а back-end розробник займається серверним програмуванням сайтів.

На даний час обсяг знань, які необхідно для кожного із фахівців є достатньо значним і не повинен охоплювати рамки одного курсу, оскільки студенти сприйматимуть поверхнево складний навчальний матеріал. Доречніше розділяти вивчення інструментарію у відповідності до поділу обов’язків, який спостерігається при виконанні реальних проектів.

Спираючись на практичний досвід, переважна більшість приватних освітніх установ, які навчають людей сучасним інформаційно-комп’ютерним технологіям та засобам розробки програмного забезпечення намагаються створити вузькоспеціалізовані курси. Зокрема компанії (ITEA, Main Academy, Web Academy) пропонують програми для опанування таких спеціалізацій як front-end і back-end розробка із урахуванням різних мов програмування [5, 5, 9]. Окремо виокремлюють дисциплін пов’язані із дизайном та тестуванням web-ресурсів. Ще однією особливістю таких освітніх послуг є орієнтація на практичні завдання, які необхідно вирішувати у рамках комерційних проектів.

Далі розкриємо більш детально ключові аспекти вивчення саме front-end технологій у процесі підготовки майбутніх учителів інформатики. У першу чергу слід зауважити, що знання отримані при вивченні відповідного інструментарію є важливими при побудові інтерфейсів Internet-ресурсів.

Проаналізувавши актуальні на сьогодні технології для програмування інтерфейсів web-ресурсів, варто виділити перелік засобів, які необхідно засвоїти майбутнім учителям інформатики для повноцінного розуміння процесів розробки сайтів.

Отже першочерговими є знання мови гіпертекстової розмітки HTML5 і каскадних таблиць стилів CSS3 Важливими є уміння, що необхідні для створення адаптивної верстки, яка враховує коректне відображення контенту на різних за розміром екранах. Окрім цього значущим є засвоєння основ блочної верстки із застосуванням таких CSS властивостей як float та display. Також педагогам-інформатикам варто освоїти верстку за допомогою Flex та CSS Grid технологій, які є одними із визначальних засобів при створенні сучасних web сайтів.

Незамінною частиною для підготовки майбутніх фахівців із інформаційних технологій, є вивчення скриптової мови програмування JavaScript. Саме вона дозволяє додати інтерактивність до статичного сайту зверстаного за допомогою HTML5 та CSS3. При цьому необхідно враховувати декілька значних проблемних ситуацій, які можуть виникнути у студентів при її опануванні. Так JavaScript є мовою програмування, у якої не має строгої типізації змінних. Таким чином вона відрізняється від таких мов програмування як C++, C#, C, Java, Pascal і є більш схожою до Php або Ruby. Тобто у будь-який момент глобальна змінна може бути переозначена, не залежно від того, які дані у ній зберігалися. Важкими для сприймання студентами є питання, пов’язані із вивченням масивів, рядків, концепцій функціонального та об’єктно-орієнтованого програмування, робота із об’єктами DOM тощо.

Значну увагу необхідно приділити вивченню бібліотеки jQuery, яка дозволяє швидко додавати анімацію до елементів інтерфейсу сайту.

За можливості, тим, хто здобуває професії вчителя інформатики, варто також запропонувати вивчення одного із найвідоміших JS фреймворків (Angular JS, React JS, Vue JS тощо). Окрім цього вартий уваги і такий інструментарій розробки як Node JS, який дозволяє створювати за допомогою мови JavaScript додатки, які будуть виконуватися на сервері.

Не менш важливим аспектом опанування майбутніми вчителями технологій front-end розробки є набуття навичок роботи із системами контролю версій. На даний час найбільш популярною є технологія git і сервіси github.com та gitlub.com. Вони дозволяють організувати процес написання коду командою, контролювати версії та, у випадку необхідності, повернутися до попередніх версій з найбільш ефективно працюючим коду програми.

Загалом обсяг і тематика курсів пов’язаних із front-end може варіюватися, оскільки розвиток технологій не стоїть на місці. Серед перспективних засобів варто виділити застосування SVG та векторної графіки, інструментарію тривимірного програмування за допомогою бібліотеки WebGL, засобів для створення віртуальної реальності тощо.

Окрім запропонованих тем для вивчення, варто виділити ще один аспект підготовки майбутніх учителів інформатики у процесі освоєння інструментів front-end розробки. А саме, щоб студенти за допомогою зазначених технологій розробляли проекти освітнього спрямування. Особливо ефективним буде процес, якщо вони працюватимуть у групах над певним командним завданням. Це допоможе їм отримати навички командної роботи, навчитися планувати свій робочий час, розподіляти обов’язки, синхронізувати розробку коду тощо.

Висновки з дослідження і перспективи подальших розробок. Підводячи підсумок зауважимо, що питання пов’язані із навчанням студентів технологій front-end розробки є багатокомпонентною проблемою, яка має включати не тільки засвоєння основних технологій створення сучасних web-ресурсів, а й можливість розробки студентами освітніх проектів із використанням зазначених засобів.

При побудові навчальних програм відповідних предметів необхідно врахувати швидкість впровадження різних новітніх технологій, для того щоб зміст відповідав сучасним тенденціям. Але існують засоби, які є базовими для створення сайтів, без яких неможливо створити будь-який web-ресурс. Саме на основі їх необхідно напрацьовувати ключові підходи до організації навчання.

Серед подальших перспектив дослідження варто виділити такі: систематизація підходів до викладання web-дизайну, web-програмування та програмування серверних додатків; напрацювання педагогічних технологій, для удосконалення навчальної діяльності із цих предметів та поліпшення методик проектної роботи студентів тощо.

СПИСОК ДЖЕРЕЛ

1. Базурін В. М. Особливості навчання веб-програмування мовою JavaScript студентів-математиків. Вісник Житомирського державного університету. 2014. Випуск 1 (73). С. 79–83.

2. Ворожбит А. В., Рибак О. С. Огляд курсу за вибором «Основи верстки та веб-програмування». Фізико-математична освіта. Вип. 1 (15). 2018. С. 20–27.

3. Іваськів І. С., Рамський Ю. С., Олексюк В. П. Програмний комплекс «Денвер»: можливості використання у процесі вивчення основ Web-програмування. Науковий часопис НПУ ім. М.П. Драгоманова, серія 2. Комп’ютерно-орієнтовані системи навчання. К.: НПУ імені М.П. Драгоманова, 2006. № 4 (11). С.66–69.

4. Інформатика. Програми для профільного навчання та допрофільної підготовки. Київ: Видавнича група BHV, 2009. 400 с.

5. Курс. Розробка Front-End. Офіційний сайт MainAcademy. URL: https://mainacademy.ua/ua/kursi/ front-end-developer/# (дата звернення: 30.03.2019).

6. Курси Frontend development. Офіційний сайт ITEA. URL: https://itea.ua/uk/courses_itea/mark_up/ (дата звернення: 30.03.2019).

7. Литвиненко О. Что такое Front-end? URL: https://dou.ua/forums/topic/16734/ (дата звернення: 30.03.2019).

8. Пасічник О. Г., Пасічник О. В., Стеценко І. В. Основи Web-дизайну: навчальний посібник. К.: Вид. група BHV. 2009. 336 с.

9. Программирование Front-end с нуля. Официальный сайт Web Academy. URL: https://web-academy.com.ua/study/web/html-css-javascript (дата звернення: 30.03.2019)..

10. Duckett J. HTML and CSS: Design and Build Websites. Wiley, 2014. 512 p.

11. Freeman A. Pro AngularJS (Expert's Voice in Web Development). Apress, 2014. 688 p.

12. Mardan A. React Quickly: Painless web apps with React, JSX, Redux, and GraphQL. Manning Publications, 2017. 528 p.

13. Stefanov S. React: Up & Running: Building Web Applications. O'Reilly Media, 2016. 222 p.

REFERENCES

1. Bazurin,V.M. (2014), Osoblyvosti navchannia web-prohramuvannia movoiu JavaScript studentiv-matematykiv [Features of teaching students-mathematicians web programming in JavaScript language] Visnyk Zhytomyrskoho derzhavnoho universytetu, 1 (73). 79 – 83.

2. Vorozhbyt,A.V. and Rybak,O.S. (2018), Ohliad kursu za vyborom «Osnovy verstky ta veb-prohramuvannia» [Course overview on «Basics of Web Designing and Web Designing»] Fizyko-matematychna osvita, 1 (15). 20 – 27.

3. Ivaskiv,I.S., Ramskyi,Yu.S. and Oleksiuk,V.P. (2006) Prohramnyi kompleks «Denver»: mozhlyvosti vykorystannia u protsesi vyvchennia osnov Web-prohramuvannia [Denver software package: the possibilities to use in the process of studying the basics of Web-programming] Naukovyi chasopys NPU im. M.P. Drahomanova, seriia 2. Kompiuterno-oriientovani systemy navchannia. NPU imeni M.P. Drahomanova, K., Ukraine, № 4 (11), 66–69.

4. Informatyka. Prohramy dlia profilnoho navchannia ta doprofilnoi pidhotovky (2009) [Computer Science. Programs for profile education and pre-professional training]. Vydavnycha hrupa BHV, Kyiv, Ukraine.

5. Kurs. Rozrobka Front-End [Course. FrontEnd developement] Ofitsiinyi sait MainAcademy. Аvailable at: https://mainacademy.ua/ua/kursi/ front-end-developer/# (Accessed 30 March 2019).

6. Kursy Frontend development [Ofitsiinyi sait ITEA]. Аvailable at: https://itea.ua/uk/courses_itea/mark_up/ (Accessed 30 March 2019).

7. Litvinenko,O. Chto takoye Front-end? [What is Front-end?] Аvailable at: https://dou.ua/forums/topic/16734/ (Accessed 30 March 2019).

8. Pasichnyk,O.H., Pasichnyk,O.V., Stetsenko,I.V. (2009) Osnovy Web-dyzainu: [Fundamentals of Web Design]. Vyd. hrupa BHV, K., Ukraine.

9. Programmirovaniye Front-end s nulya. [Front-end programming from the zero.] Ofitsialnyy sayt Web Academy. Аvailable at: https://web-academy.com.ua/study/web/html-css-javascript (Accessed 30 March 2019).

10. Duckett, J. (2014), HTML and CSS: Design and Build Websites. Wiley. 512 p.

11. Freeman, A. (2014), Pro AngularJS (Expert's Voice in Web Development). Apress. 688 p.

12. Mardan, A. (2017) React Quickly: Painless web apps with React, JSX, Redux, and GraphQL. Manning Publications, 2017. 528 p.

13. Stefanov, S. (2016), React: Up & Running: Building Web Applications. O'Reilly Media. 222 p.

ВІДОМОСТІ ПРО АВТОРА

МОСІЮК Олександр Олександрович – кандидат педагогічних наук, старший викладач кафедри прикладної математики та інформатики Житомирського державного університету імені Івана Франка.

Наукові інтереси: використання інформаційно-комп’ютерних технологій для створення спеціалізованих навчальних матеріалів, комп’ютерна графіка, технології проектування UX та UI, тривимірне комп’ютерне моделювання.

СВЕДЕНИЯ ОБ АВТОРЕ

МОСИЮК Александр Александрович – кандидат педагогических наук, старший преподаватель кафедры прикладной математики и информатики Житомирского государственного университета имени Ивана Франко.

Научные интересы: использование информационно-компьютерных технологий для создания специализированных учебных материалов, компьютерная графика, технологии проектирования UX и UI, трехмерное компьютерное моделирование.

INFORMATION ABOUT THE AUTHOR

MOSIIUK Oleksandr Oleksandrovych – Phd in pedagogics, senior lecturer of Department of Applied Mathematics and Computer Science, Zhytomyr Ivan Franko State University.

Circle of research interests: using of information and computer technology for the creation of specialized training materials, computer graphics, UX and UI design technologies, three-dimensional computer modeling.

МОСІЮК Олександр Олександрович. КЛЮЧОВІ АСПЕКТИ ВИВЧЕННЯ FRONT-END ТЕХНОЛОГІЙ У ПРОЦЕСІ ПІДГОТОВКИ МАЙБУТНІХ УЧИТЕЛІВ ІНФОРМАТИКИ.

Анотація. У статті піднімається питання викладання дисциплін, пов’язаних із розробкою Web-ресурсів у процесі підготовки майбутніх учителів інформатики. Також аналізуються та розглядаються наукові джерела, присвячені відповідній тематиці, програми приватних освітніх установ, які займаються підготовкою фахівців із інформаційно-комп’ютерних технологій. Наголошується на важливості врахування при удосконаленні навчального процесу із предметів «Web-технології та Web-дизайн» та «Програмування та підтримка Web-застосувань» сучасних підходів до проектування та розробки Web-сайтів. Окремо розглядаються аспекти пов’язані із вивченням технологій front-end розробки. Наголошується на докладному вивченні технологій верстки Web-сторінок (HTML5, CSS3) і особливостей виконання різних типів верстки. Зауважується на важливості опануванні мови програмування JavaScript, а також бібліотек та фреймворків, створених на її основі.

Ключові слова: front-end технології, підготовка вчителів інформатики, верстка web-сторінки, HTML5, CSS3, JavaScript, фреймворк, система контролю версій git.

МОСИЮК Александр Александрович. КЛЮЧЕВЫЕ АСПЕКТЫ ИЗУЧЕНИЯ FRONT-END ТЕХНОЛОГИЙ В ПРОЦЕССЕ ПОДГОТОВКИ БУДУЩИХ УЧИТЕЛЕЙ ИНФОРМАТИКИ.

Аннотация. В статье поднимается вопрос преподавания дисциплин, связанных с разработкой web-ресурсов в процессе подготовки будущих учителей информатики. Также анализируются и рассматриваются научные источники, посвященные соответствующей тематике, программы частных образовательных учреждений, занимающихся подготовкой специалистов по информационно-компьютерным технологиям. Отмечается важность учета современных подходов к проектированию и разработке Web-сайтов при совершенствовании учебного процесса с предметов «Web-технологии и Web-дизайн» и «Программирование и поддержка Web-приложений». Отдельно рассматриваются аспекты, связанные с изучением технологий front-end разработки. Делается акцент на подробном изучении технологий верстки Web-страниц (HTML5, CSS3) и особенностей выполнения различных типов верстки. Отмечается важность овладения языком программирования JavaScript, а также библиотеками и фреймворками, которые созданные на его основе.

Ключевые слова: front-end технологии, подготовка учителей информатики, верстка web-страницы, HTML5, CSS3, JavaScript, фреймворк, система контроля версий git.

MOSIIUK Oleksandr Oleksandrovych. KEY ASPECTS OF STUDYING FRONT-END TECHNOLOGIES IN THE PROCES OF TRAINING FUTURE COMPUTER SCIENCE TEACHERS.

Abstract. Technological foundation in the world, which used for creating interactive web services is dynamic. Developers use technologies such as HTML5, CSS3, JavaScript, Python, Ruby, Php libraries and frameworks. In addition, the school curriculum in computer science includes topics which related to the design and development of sites. Therefore, the author of the article emphasizes the importance of modernization the educational process of computer science teachers' training depence with actual trends.

It paves the way to a basic understanding of main aspects of studying the front-end technologies in the process of training future teachers in IT. In the article, the author describes the differences in meaning of terms like front-end and back-end. Also the he describes the experience of private educational institutions specializing in the training of information and computer technology specialists. He notes that for these education centers include typical clear training division of specialists for design, frontend development, backend development and QA (Quality assurance). Therefore, future IT teachers will have to study in detail HTML5 and CSS3, Flex and CSS Grid technologies, JavaScript programming language, jQuery library based on it, and well-known frameworks (Angular JS, React JS, Vue JS, Node JS etc) for high-quality front-end specialization. The author determines the knowledge of git technologies like an important condition for improving programming skills in the team. He also notes, that working in the team is very important for success of the project.

In conclusion, the author points out that issues related to teaching future computer science teachers is a multicomponent problem. An important part of it is the students' understanding of the modern processes of site development. According to the author, it is necessary to consider the speed of implementation of various new technologies, when constructing training programs of the relevant subjects. Among the further perspectives of the study, the author notes the following: systematization of approaches to teaching such subjects as web design, web programming and programming of server applications, the development of pedagogical technologies for the organization of training activities on these subjects and the implementation of project work of students, etc.

Keywords: frontend technology, computer science teachers training, web page layout, HTML5, CSS3, JavaScript, framework, git version control system.