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

Размещено на http://www.allbest.ru/

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

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

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

кандидат педагогічних наук,

старший викладач кафедри прикладної

математики та інформатики

Постановка та обґрунтування актуальності проблеми

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

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

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

Зауважимо також, що у процесі опанування знань, умінь та навичок, необхідних для створення 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-програмування. Науковий часопис НПУ ім. М.П. Драгоманова. Комп 'ютерно-орієнтовані системи навчання. К.: НПУ імені М.П. Драгоманова, 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, Kyiv, Ukraine, № 4 (11), 66-69.

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

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

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

7. Litvinenko, O. Chto takoye Front-end? [What is Front-end?]. Available 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, Kyiv, Ukraine.

9. Programmirovaniye Front-end s nulya. [Front end programming from the zero.] Ofitsialnyy sayt Web Academy. Available 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.

Размещено на Allbest.ru