CC BY
75
Scientific journal PHYSICAL AND MATHEMATICAL EDUCATION
Has been issued since 2013.
Науковий журнал Ф1ЗИКО-МАТЕМАТИЧНА ОСВ1ТА
Видасться з 2013.
http://fmo-journal.fizmatsspu.sumy.ua/
Ворожбит А.В., Рибак О.С. Огляд курсу за вибором «основи верстки та веб-програмування». Ф'/зико-математична oceima. 2018. Випуск 1(15). С. 20-27.
Vorozhbyt A., Rybak O. Rewiew course by choice «the basic of layout and web-programming». Physical and Mathematical Education. 2018. Issue 1(15). Р. 20-27.
УДК 37.016:004.77
А.В. Ворожбит1, О.С. Рибак2
^-Нацюнальний педaгoгiчний ун/верситет iMeHi М.П. Драгоманова, Украна
kuzmenko.dtl@gmail.com
2Техн/чнийл'/цейм. Киева, Украна rybak. dtl@gmail. com DOI 10.31110/2413-1571-2018-015-1-003
ОГЛЯД КУРСУ ЗА ВИБОРОМ «ОСНОВИ ВЕРСТКИ ТА ВЕБ-ПРОГРАМУВАННЯ»
Анотаця. В статтi розглянуто зм'/ст курсу за вибором «Основи верстки та веб-програмування» для здобувач'/в осв'/ти старшихклас'/в закладу загальноiсередньоiосв'/ти. Збтьшення в Укран/ останн/ми роками iнmереcу учн/в, як вже волод'/ють навичками роботи на комп'ютер'/, до 1нтернет iвеб-дизайну спричиняенеобх'/дн'/сть надання додатковоi осв'/ти з веб-mехнoлoгiй. Зм'/ст курсв iнфoрмamичнoгo спрямування потребуе подальшого розвитку, оск'/льки в старш'/й школ'/ узм'/ст'/ iнформатики в'/дсутн'/ теми вивченнярозм'/тки та грaфiчнoгo дизайну веб-стор'шок, каскадних таблиць стил/'в, технологи веб-програмування (кл'/ентське та серверне програмування), верстка пол/граф/чно)' продукцИ тощо. Створення курciв за вибором для старшокласник'/в у напрям'/ вивчення iнфoрмaцiйних mехнoлoгiй, програмування таких як «Основи верстки та веб-програмування» е потребою сусп/льства. Метою статт'/ е огляд i пояснення щодо зм/сту курсу за вибором «Основи верстки та веб-програмування» для вчител'/в iнформатики щодо можливост'/ використання у осв'/тньому процес/.
Програму розраховано для навчання у старш'/й школ'1 закладу загальноi середньоi осв'/ти. Вона е лоячним продовженням вивчення iнформатики базовоi школи та ор/ентована на класи, що працюють за навчальними планами
з академ'/чним р/внем навчання iнформатики. Програму складено з двох зм/стових л/н/й: основ верстки та дизайну пол/граф/чно)' продукцИ i основ верстки та дизайну сайт/в з вивченням основ веб-програмування. Описано пояснення щодо вибору роздл/в: дво- та тривим'/рноi комп'ютерноi граф/ки та ан'/мацП, верстки пол/граф/чноi продукцИ, мови г/пертекстовоi розм'/тки, таблиць каскадних стил/в; основ кл'/ентського та серверного програмування, системи управл/ння базами даних. Для забезпечення вивчення курсу необх'/днi програмнi засоби як/ е безкоштовними i в'/льно поширюваними. Курс може бути рекомендованим для використання у закладах загальноi середньоi осв'/ти. Курс за вибором «Основи верстки та веб-програмування» е важливим кроком для вивчення сучасних iнформац/йних технолог/й, алгоритм'/зацПi програмування та сприятиме визначенню напряму розвитку отриманих навичок п/д час подальшоiосв'/ти старшокласниками.
Ключов! слова: курс за вибором; заклад загальноi середньоi осв'/ти; iнформац/йнi технологи; верстка; веб-програмування; граф/ка; ан'/мац/я.
Постановка проблеми. Hapa3i Ытерес до мережi 1нтернет, що став невщ'емною частиною життя бтьшосп людей усього свп^у, продовжуе зростати. Яюсний сайт стае важливим, а у деяких галузях - единим засобом досягнення економiчних, полтичних, сощальних, рекламних та шших цтей. Звкно, для створення яккного веб-продукту потрiбна плщна робота висококвалiфiкованих спещалюлв 3i знанням усього спектру веб-технолопй.
Вщповщно до розпорядження кабшету м^с^в Укра!ни про затвердження плану заходiв з пщтримки розвитку шдустрп програмно! продукцп Украши, уряд передбачае наступи заходи:
- удосконалення освп>лх програм з шформатики для учыв 10-11 клаав закладiв загально! середньо! освiти з метою збтьшення обсягу викладання основ алгорт^зацп i програмування;
- збтьшення обсяпв державного замовлення на тдготовку фахiвцiв за спе^альностями "Прикладна математика", "Комп'ютерн науки та шформацшы технологи", "lнженерiя програмного забезпечення", "Комп'ютерна iнженерiя" тощо.
Збтьшення в Укра'н остаными роками Ытересу учыв, ям вже волод^ть навичками роботи на комп'ютер^ до 1нтернет i веб-дизайну спричиняе необхщысть надання додатково! освти з веб-технолопй. Учн у мистецв веб-дизайну здатн вщобразити свм внутршый свп-, знайти новi можливост для спткування з однолпжами в усьому свт.
ISSN 2413-158X (online) ISSN 2413-1571 (print)
Тому створення курав за вибором для старшокласникiв у напрямi вивчення шформацшних технологiй, програмування таких як «Основи верстки та веб-програмування» е потребою суспiльства та сприятиме вибору майбутньо''' спецiалiзацií у вищому навчальному закладГ
Аналiз актуальних дослiджень. Питання впровадження шформатики в школi пов'язане з такими науковцями як А. П. £ршов, М. I. Жалдак, О. О. Кузнецов, В. С. Леднев, В. М. Монахов, Н. В. Морзе, Ю. С. Рамський, С. I. Шварцбурд та ш.
Дослщженнями проблем пщготовки фахiвцiв для IТ-галузi в розрiзi забезпечення належно''' якостi ix навчання в системi освiти займалися П. Дж. Деншг, Д. Е. Кнут, Т. В. Морозова, Ю. В. Нiкольський, В. I. Павлов, В. В. Паачник, М.О. Сщоров, З. С. Сейдаметова, С. О. Семертов, В. О. Сухомлш, А. А. Терехов, Ю. М. Щербина та iншi.
Проблемам пщготовки майбутнix учителiв до професшно''' орiентацií учнiв присвяченi дослiдження В.В. Востртово''', Д. Ж. Завiтренко, В. П. Зшченко, В. Ф. Моргун, М. В. Опачко, Н. О. Пономарьово', Б. О. Федоришина та шших.
Авторами програм i навчальних поабни^в з iнформатики, зокрема, е М. О. Войцехкький, Т. Г. Проценко, С.М. Дзюба, С. П. Параскевич, Н. С. Павлова, I. Л. Семещук, Т. Г. Крамаренко, О. Г. Кузьмшська, Л. В. Грамбовська, О.П. Зеленяк В. В. Ребрина, В. О. По^енко, О. А. Фурман, В. В. Шакотько, Л. А. Чернтова тощо.
В основу курсу шформатики сучасно''' школи покладений розвивально-компетентысний пiдxiд, що передбачае формування предметних та ключових компетентностей, а також розвиток мислення, насамперед алгори^чного мислення. Навчання в школi не мае бути в^рваним вщ життя. Так М. В. Гвозденко було проаналiзовано стан ринку прац Укра'ни та обГрунтовано пiдвищення ролi вивчення iнформацiйниx теxнологiй вже у загальноосвiтнix навчальних закладах з метою задоволення потреб держави i у IT-фаxiвцяx, i у фаxiвцяx шших галузей, якi зможуть використовувати шформацшы технологи у сво'й фаxовiй дiяльностi [1]. Дослiдник стверджуе, що сучасн школярi та студенти, використовуючи комп'ютер, проводять багато часу, проте спткування в соцiальниx мережах, комп'ютернi ^ри та навiть завантаження неякiсниx беззмктовних рефератiв чи творiв, не можна назвати роботою на комп'ютерi. Таким чином вивчення роботи з офкними додатками, основ захисту даних, сервiсiв Iнтернет та основ програмування на уроках шформатики мотивуе учыв до вивчення шформацмних теxнологiй. А мотиващя очевидна - це i переваги працевлаштування, i високий рiвень доxодiв i престижнiсть знань i навичок роботи на комп'ютерi i основне - бурхливий розвиток IT-теxнологiй i постiйне зростання потреби ринку прац в IT-фаxiвцяx.
Федорчук А. Л. [2] розглянуто основнi теоретичнi та методичн проблеми: органiзацiя навчання, прюритети розвитку старшокласникiв при вивченнi предмету «Ыформатика» у класах фiзико-математичного профтю. Автор стверджуе, що збiльшення ктькосп годин, еднiсть всix тем курсу, формування знань, умшь та навичок щодо ефективного застосування комп'ютерних технологш у подальшiй професiйнiй дiяльностi вплине на загальноосвпшю пiдготовку учнiв, подальше навчання i професiйну дiяльнiсть.
Аналiзуючи сучаснi проблеми шкiльного курсу шформатики, Руденко В. Д. [3] стверджуе, що основний шлях профЫзаци шформатики - це курси за вибором. Тому автор очтуе подальшого зростання таких курав i розширення 'х тематики.
Аналiз джерел засвiдчуе, що змкт курсiв iнформатичного спрямування потребуе подальшого розвитку, осктьки в старший школi у змiстi iнформатики вщсуты теми вивчення розмiтки та графiчного дизайну веб-сторiнок, каскадних таблиць стилiв, технологй веб-програмування (^ентське та серверне програмування), верстка полiграфiчноi продукцй тощо.
Мета статл. Огляд i пояснення щодо змкту курсу за вибором «Основи верстки та веб-програмування» для вчителiв шформатики щодо можливост використання у освпшьому процесi.
Виклад основного матерiалу.
Основою курсу за вибором «Основи верстки та веб-програмування» [4] став поабник «Вивчення Web-програмування в школЬ> [5]. Також слiд зазначити програми курав за вибором «Основи !нтернет» [6] та «Основи веб-дизайну» [7], як формують в учыв розумiння принципiв органiзацií веб-ресурав, розвиток навичок роботи з програмними засобами розробки веб-сторшок, а також виховання культури оформлення сайтiв й умшь структурування даних, розмiщениx на них. Проте в цих курсах за вибором не розкрито питання застосування каскады таблиц та технолопю створення динамiчниx веб-сторшок не включено.
Створення програми «Основи верстки та веб-програмування» обумовлене вщсутыстю програм шформацмно-технолопчного профтю шктьно''' освiти, напрямлених на вивчення основ веб-програмування i комп'ютерно! верстки. Програму розраховано для навчання у старшш школi закладу загально' середньо' освiти. Вона е лопчним продовженням вивчення iнформатики базово'' школи та орiентована на класи, що працюють за навчальними планами з академiчним рiвнем навчання шформатики.
Курс розраховано на тижневе навантаження у 4 академiчнi години за рахунок 2 годин, вщведених для вивчення шформатики на академiчному рiвнi, та додаткових 2 годин, передбачених типовими навчальними планами на вивчення предмету «Технологй'». Проте, враховуючи рiзнорiвневе вивчення шформатики у старший школ^ кожен роздт програми можна використовувати окремо або обрати ктька роздЫв, наприклад HTML, CSS та JavaScript. Розподт годин мiж змiстовими л^ями визначаеться вчителем, що може залежати вщ кiлькостi годин, якi вщводяться на вивчення iнформатики, i рiвня пiдготовки класу.
В програмi передбачено резерв навчального часу, який рекомендовано використовувати для проведення тематичного опитування або пщсумкових контрольних заxодiв в кшц навчальних семестрiв.
Програма складаеться з двох змiстовиx лiнiй: основи верстки та дизайну полiграфiчноi продукцй' та основи верстки та дизайну сай^в з вивченням основ веб-програмування. На рис. 1 зображено взаемозв'язок тем програми з темами базово! школи.
Л^я верстки та дизайну полiграфiчноi продукцй' передбачае:
- знайомство з дво- та тривимiрною графтою та аыма^ею;
- роботу у редакторах растрово'' та векторно'' графти;
- верстку полiграфiчноí продукцй.
Л^я верстки та дизайну сай^в передбачае опанування:
- мови ппертекстово'|' розмп^ки;
- таблиць каскадних стилiв;
- основ клiентського програмування;
- системи управлшня базами даних MySQL;
- основ серверного програмування.
Рис. 1. Взаемозв'язок тем курсу за вибором «Основи верстки та веб-програмування» з основними темами базовоï школи
Перший роздт, який вивчатиметься це - «Графта», що складаеться з трьох тем: растрова графта, векторна графта, аыма^я.
Першою темою, яка вивчаеться, е редактор растровоУ графти. Саме за його допомогою учн зможуть опрацьовувати зображення, як в подальшому будуть використан при створеннi сайту або полiграфiчноï продукцй. Окремо опрацьовуються iнструменти трансформаций Певнi навички роботи у середовищах графiчних редакторiв учнi мають тсля засвоення курсу iнформатики основноУ школи. Будь-який редактор мктить iнструменти для малювання та редагування зображень, проте наголос в даый програмi на них не робиться, осктьки хист до малювання мають далеко не ва учнi. Щодо поглиблено!' роботи в графiчних редакторах, то це е предметом саме курав з опанування комп'ютерноУ графти. Учнi ознайомляться з колiрними моделями, що в подальшому також буде використано для сайтобудування; з форматами паперу та видами полiграфiчноï продукцй, особливостями Ух пщготовки до друку. Також старшокласники навчаться створювати засобами растрового редактора багатошаровi зображення та Ух композицп для дизайну web-сторiнки та полiграфiчноï продукцй (листiвка, буклет, календар тощо).
Що стосуеться векторноУ графти, то учнi дiзнаються про способи перетворення та групування об'ек^в; принципи створення складних композицiй векторних об'ек^в. Вiдводиться час на знайомство з таким поняттям як фiрмовий стиль, розглядаються брендбуки компанiй. На практик учнi самi зможуть розробити логотип та дизайн елеметчв фiрмового стилю компанп (вiзитка, бланк, буклет).
Робота у редакторi для створення аымацп е важливою темою, осктьки е популярним створення анiмованих зображень для реклами, а вихщ на екрани мультиплтацшних фiльмiв у великш кiлькостi е звичним явищем. Учн зможуть створювати анiмацiю для web-сайтв, анiмацiйний ролик, gif-банери. Звичайно, для сай^в за допомогою HTML5 зручнше створювати динамiчний контент, проте, можливо, знайомство i основы принципи роботи редакторiв для ашмацп е теж необхщним.
Наступний роздiл - це «Веб-технологи», до якого входять теми: мова ппертекстово''' розмп^ки, каскаднi таблиц стилiв, основи JavaScript, основи PHP, СУБД MySQL.
При розробц i створены сайту кнуе кiлька етатв [8]:
- web-дизайн (розробка та створення проектування сайту),
- верстка сторшок та шаблонiв,
- програмування на сторон клiента та сервера (штегрування у систему управлiння контентом).
За означенням [9] веб-дизайн (вщ англ. Web design) - галузь веб-розробки i рiзновид дизайну, до завдань яких належить проектування призначених для користувача веб-штерфейав для сай^в або веб-програм. Веб-дизайнер проектуе структуру веб-сторшок, продумуе зручн рiшення подачi даних, а також займаеться художым оформленням веб-проекту, що передбачае володшня iнструментами графiчних редакторiв.
Затверджений дизайн передаеться html-верстальнику для створення Ь^т1-сторшки. В результатi створюеться код, який можна переглядати за допомогою браузера. За означенням [9] html-верстальник - це фахiвець з верстання, тобто з компонування текстових, тюстративних i допомiжних елеметчв на веб-сторшцГ До завдань верстальника веб-сторiнок входить створення HTML-коду веб-сторшки, позицiонування i оформлення елемен^в сторiнки за допомогою вбудованих засобiв мови розмiтки та за допомогою каскадних таблиць сл/^в.
Термш «верстка» багатозначний, адже це i процес формування сторшок видання, i сам результат - уже зверстаний текст, тип комплектування тюстрацм на смузк За означенням верстка - процес формування сторшок та смуг (у видавничм справi та пол^рафп). Н. М. Фiголь провiв дослiдження щодо особливостей та вимог до верстки електронних видань. Дослщник вщзначае, що верстка друкованого та електронного видання (як процес та як результат) суттево рiзниться через вщмшносп у фoрмi цих видань, хоча й мае деяк сптьы принципи [10]. Автором розглянуто загальноприйнят типи верстки.
Для друкованого видання кнуе кiлькa типiв комплектування тюстрацш на смузi в залежностi вщ розмiщення iлюстрацiй (при якiй тюстращя рoзмiщуеться зверху або знизу смуги або в одному з м кутiв; текст прикривае iлюстрaцiю зверху i знизу; тюстращя пoвнiстю займае смугу; тюстращя з усiх сторш прикрита текстом тощо; або комбшована верстка). Також на смузi можуть бути колонцифри, кoлoнлiнiйки, колонтитули, сигнатура та норма. Вщповщно до програми тема верстки друкованого видання за допомогою видавничо!' системи винесена для розгляду тсля вивчення веб-програмування.
Електронн видання послуговуються принципами та видами html-верстки. Можна говорити про iснувaння таких видiв html-верстки як фiксoвaнa (елементи веб-сторшки вщповщно мають фiксoвaнi рoзмiри), «резинова» (вiднoснi рoзмiри елементiв веб-сторшки), пбридна (включае в себе як фтсоваы, так i вiднoснi рoзмiри елементiв) та еластична верстка (вщносна величина елементiв щодо рoзмiрiв шрифту).
Отже, основою для вивчення 1нтернет-технолопй е вивчення мови ппертекстово''' розмп^ки HTML. Учн набудуть практичних умшь створення iлюстрованих Web-сторiнок у формам HTML-документiв, що мiстять форматований текст, списки, таблицу гiперпосилання, графiчнi зображення.
Слщ зазначити, що знання мови ппертекстово''' розмп^ки замало для створення повноцшно! сторiнки, тому учнi далi вивчатимуть особливостi створення та використання таблиць каскадних стилiв для оформлення web-сторшок. Практично учнi навчаться створювати web-сторшки з боксовою структурою, найпроспшу анiмацiю для елементiв web-сайтiв.
Наступним кроком стане знайомство з веб-програмуванням. Веб-програмування можна умовно подтити на два основы види: серверне i ^ентське. Серверы скрипти виконуються на сторон сервера (комп'ютера, на якому розмщено сайт) ще до завантаження сторшок сайту на комп'ютер користувача. У свою чергу, ^ентськ скрипти виконуються на комп'ютерi клiента вже тсля завантаження сторшки iз сервера й не вимагають и додаткового перезавантаження.
Журнал IEEE Spectrum, що видаеться 1нститутом iнженерiв електротехнiки та електроыки (IEEE), опублiкував нову редак^ю рейтингу популярностi мов програмування [11]. При розрахунку рейтингу IEEE Spectrum враховуеться 12 метрик, отриманих вщ 10 рiзних джерел (рис. 2). Мови програмування JavaScript та PHP входять до першо' десятки.
Language Rank Types Spectrum Ranking
1. Python © 5 100.0
2. С Ü?» 3. Java 99.7
99.4
4. С++ D^* 5. 0# © 0 5 97.2
88.6
6. R Q 7. JavaScript © ^ 00.1
35.5
e. php © 9. Go © Q 81.4
76.1
io. Swift Q (p 75.3
Рис. 2. Рейтинг мов програмування IEEE Spectrum
Звкно, найбтьший рейтинг за наведеними даними мае мова Python, як уыверсальна мова програмування, але вщповщно до рейтингу мов програмування вщ компанп RedMonk [12], побудованому на основi оцiнки популярностi на GitHub i активностi обговорень на Stack Overflow, десятка лiдерiв виглядае таким чином: JavaScript займае перше мкце, а PHP - четверте.
JavaScript е прототипно-орiентованою ^ентською мовою програмування, що робить сторiнки сайту динамiчними. Код програми може знаходитись в HTML-документi, а браузер штерпретуе його. Сценарш Javascript пiдтримуються рiзними додатками, якi призначенi для розробки дизайну сайту. Вважаеться, що Javascript е найпопуляршшою м1ентською мовою.
Учн можуть мати чiтке уявлення про основы алгоритмiчнi конструкцп (слiдування, розгалуження, повторення) при вивченн програмування мовами Паскаль або С++ раыше. В такому випадку варто звернути увагу учнiв на особливостi реалiзацiï вказаних алгоритмiчних конструкцiй мовою JavaScript, тобто |'х синтаксис, який значно вiдрiзняеться вiд синтаксису мови Паскаль. Слщ зазначити, що в оновленiй програмi з iнформатики 5-9 клас велика увага придтяеться роздiлу алгоритмiзацiя i програмування. У методичних рекоменда^ях 2017-2018 н. р. зазначаеться, що тематичний подт дае змогу вщводити 2 семестр на вивчення алгоритмiзацiï та програмування, а курс шформатики подтено на 2 концентричнi рiвнi: пропедевтичний (5-7 класи) та рiвень повноцшного формування компетентностей (8-9 класи). Вчителю даеться можливкть обрати для вивчення алгоритмiзацiï i програмування довiльну мову, тому, якщо учнi вивчали мову С++, то варто звернути |'х увагу на вщмшносп у структурi програми на JavaScript i С++ (у програмi на JavaScript вщсутня декларативна частина, оголошення змiнних вщбуваеться пiд час Ух iнiцiалiзацiï, тип змшних не вказуеться явно, введення i виведення здмснюеться у втна prompt, confirm або елементи форм) [13]. Якщо ж мова JavaScript вивчаеться як перша, то подальше вивчення таких мов як C++, Java не викличе у старшокласни^в ыяких труднош^в, хоча доведеться враховувати особливост синтаксису, звикати до явно!' тишзацм, до особливостi об'ектно-орiентованоï складовоУ.
Для створення динамiчних сайтiв обрана мова РНР, осктьки вона широко вщома i активно застосовуеться завдяки простой синтаксису, високiй швидкодп, пщтримц з боку бiльшостi хостингiв. Сценарш PHP просто вставляеться в код HTML-сторшки [14].
Учнi навчаться самостiйно встановлювати локальний сервер; створювати рЬф-файли з використанням конструкцiй мови РНР; використовувати власш та стандартнi функцп в рhр-блоцi; порiвнювати користувацькi i стандарты функцп. Передбачаеться створення власних проек^в на РНР для розробки динамiчного веб-сайту.
В подальшому учш вивчатимуть основи роботи з базою даних MySQL та створюватимуть зв'язок динамiчного вебсайту з базами даних за допомогою мови програмування php.
До продовження роздту «Графта» включено теми тривимiрноï графiки та верстки полiграфiчноï продукцп.
Тривимiрна графта надзвичайно актуальна у сучасному свт, з ïi допомогою створюють майже ус iгри, мультфiльми, вiдображають науковi данi, моделюють системи, об'екти та явища. Також популярною вона е i в веб-дизайы. 3D графта додае особливий ефект в дизайн сай^в, дозволяючи у рази яскравше виокремити рiзноманiтнi елементи. Пiд час виконання практичних робп- учнi створюватимуть тривимiрнi об'екти та сцени iз використанням технологiй побудови тривимiрних каркаав, накладання вiртуальних матерiалiв (текстур), встановлюватимуть камери огляду та режими перспективи, розмЩуватимуть джерела свiтла, створюватимуть рiзнi ефекти тощо.
При вивченнi теми верстка учн отримають навички створення маке^в друкованоУ продукцп (рекламний каталог, дитяча книжка) за допомогою насттьних видавничих систем.
Остання тема з роздту «веб-технологи» - це системи управлшня контентом (CMS). Учн отримають основы поняття i навички проектування сай^в зп допомогою системи керування контентом.
Сьогодн кнуе велика ктьюсть iнструментiв для побудови сайтiв, якими можна скористатися. До них належать рiзноманiтнi CMS та конструктори сай^в. За допомогою таких конструкторiв сай^в, як Wix, uKit, Nethouse, Jimdo, Umiх можна створити сайт-вiзитку. Перевагами таких конструкторiв можна зазначити простоту у використаны, набiр дизайнерських шаблоыв, наявнiсть готових шаблонiв макетiв, легюсть завантаження зображень тощо. Проте, як правило, зробити змши у CSS не можливо. Запропонувати роботу в цих конструкторах можна тим учням, ям мають початковий рiвень знань.
Використання деяких систем управлшня контентом дае можливкть здшснювати управлшня шформацмними ресурсами на веб-сай^ за допомогою зручноУ панелi iнструментiв для опрацювання, збереження та публтаци цих ресурав [15]. До них можна вщнести такi CMS як Ucoz, WordPress, Joomla!, Drupal. CMS Joomla! - це втьнопоширювана система управлiння вмктом сайту безпосередньо на серверi. Стандартний пакет системи Joomla! може бути легко i швидко встановлений користувачем. Пкля встановлення та запуску системи Joomla! за ÏÏ допомогою можна редагувати вмкт сторшок та поповнювати його, зокрема завантажувати картинки i коригувати даы [15].
Завершуеться курс створенням власного проекту, узагальнюючи ва теми курсу.
Метою курсу за вибором «Основи верстки та веб-програмування» е формування компетентностей особистосп у процеа опанування веб-програмування i комп'ютерноУ верстки.
Мета курсу за вибором:
- пщготовка учня до рiвня верстальника полiграфiчноï продукцГ|' та сай^в;
- забезпечення належного рiвня вмшня опрацювання графiчних об'ектiв, пiдбору кольоровоУ гамми та створення професiйних веб-сторшок;
- формування абстрактного аналiтичного мислення, необхщного для оперування сучасними технолопями i засвоення основ програмування;
- отримання професiйних навичок шдивщуально'|' та командноУ роботи над проектами;
- пщготовка учнiв до учасп у конкурсах, змаганнях i олiмпiадах;
- формування мотивацiйних факторiв для вибору подальшого напряму навчання в учыв старших класiв.
Як зазначаеться у методичних рекоменда^ях 2017-2018 н. р. щодо вивчення шформатики у школ^ i з опором на оновлену програму з шформатики, компетентысш завдання та задачi мають застосовуватися нас^зно через увесь
навчальний курс (компетентнкы задачi з шформатики можна розглядати як тип технолопчних задач, для яких обов'язковим е застосування 1Т, як засобу 'х розв'язування). Розв'язанню саме цих задач i сприяе програма ««Основи верстки та веб-програмування»».
Так до теоретично' бази знань вщносяться:
- оргаызащя та можливосп глобально' мережi 1нтернет;
- поняття про мову розмiтки гiпертексту;
- особливосп створення та використання каскадних таблиць сл^в (CSS) на веб-сторшках;
- основнi поняття алгоритмiзацií;
- основи прототипно-орiентованого i функцiонального програмування;
- поняття про систему управлшня базами даних MySQL;
- принципи включення кодiв JavaScript та PHP до HTML-документiв;
- пошук рацюнальних шляхiв написання веб-сторiнки;
- сучасн тенденцГ'' у веб-дизайнi та основы вимоги до розробки сайтв;
- основи верстки полiграфiчноí продукцГ'';
- основы поняття i навички при проектуванн системи керування контентом (CMS);
- використання рiзних аымованих та графiчних об'ектiв при розробцi проек^в. До практичних навичок належать:
- використання можливостей браузерiв для перегляду кодiв веб-сторiнок;;
- створення веб-сторшок, що мiстять коди форматування тексту, графiчнi об'екти, гiперпосилання, списки, таблиц^
- створення та використання каскадних таблиць стилiв для оформлення веб-сторшок;
- створення та редагування зображень у графiчних редакторах;
- створення аымацп для елементiв веб-сайтiв;
- включення кодiв JavaScript та PHP до HTML-документiв;
- створення i опрацювання бази даних MySQL;
- використання редакторiв HTML коду;
- створення 3D об'ектв;
- розробка веб-сайтв;
- верстка полiграфiчноí продукцп (листiвка, буклет, каталог);
- проектування сайту за допомогою системи управлшня контентом (CMS).
Для забезпечення вивчення курсу необхщы там программ засоби (окремо можна зазначити, що вс вони безкоштовн i вiльнопоширюванi):
1.редактор растрово'' графiки (GIMP, Paint.Net);
2.редактор векторно' графiки (Inkscape, Synfig Studto);
3.редактор 3D графiки (Blender);
4.редактор HTML коду (Sublime Text); 5.збiрка веб-сервера (XAMPP, OpenServer); 6.видавнича система (Scribus).
Вiдповiдно до даних джерела [16] в таблиц 1 представлено чотири професп з категорп IT, комп'ютери та 1нтернет та вимоги до базових знань для кожно' з них. Необхщно зазначити, що учы, якi мають достатнiй i високий рiвень досягнень при навчанн за програмою «Основи верстки та веб-програмування» вже отримали основи необхщних знань для цих професiй i визначились з напрямками розвитку отриманих навичок пщ час подальшо'' освiти. Незважаючи на те, то шформацшш технологГ'' поширюються в усi сфери життя, а, вiдповiдно, перелiк професш розширюеться i поглиблюеться, деякi учн можуть впевнено знаходити для себе невелим проекти, за сво'м смаком i, вщповщно, здiбностями, i устшно 'х виконувати.
Таблиця 1.
Вимоги до базових знань для веб-орieнтованих професш
и X и Веб-дизайнер т о 'i а
и и р о
л ат л j р р
тс р е со ^ u t ® X со п -б е со
Видавничi системи +
Растровi редактори + + +
Векторы редактори + + +
HTML + + +
CSS + + +
Серверна мова програмування + +
^ентська мова програмування + +
Бази даних + +
При прийо/^ на роботу роботодавц в основному звертають увагу на портфолю i, вiдповiдно, досвщ роботи, у яких проектах брав участь претендент i якi профеайы навички i знання вiн мае. Навчаючись, старшокласник виконуе безлiч проекпв власноруч - в^д домашнiх завдань з шформатики, шдивщуальних творчих завдань, конкурсних робп\ Учнi беруть участь у конкурсах (Intel Техно, 1Т Арена, Весела наука тощо), олiмпiадах (програмування, веб-дизайн, графiка, анiмаuiя).
Також до портфолю учня можна додати сертифтати, дипломи, грамоти. Тому вже у шктьы роки формування власного портфолю - ефективний споаб професiйноï реалiзацiï юного фахiвця.
Висновки. Вивчення шформацшних технологiй мае стати прiоритетним у сучаснш системi освiти. Це потребуе перегляду освп>лх програм у бт збiльшення кiлькостi годин на вивчення шформацшних технологiй, алгоритмiзацiï i програмування.
Курс за вибором «Основи верстки та веб-програмування» е важливим кроком для вивчення сучасних технологш в галузi 1Т i може бути рекомендованим для використання у закладах загальноУ середньоУ освiти. Програму складено з двох змктових лiнiй: основи верстки та дизайну полiграфiчноï продукцп та основи верстки та дизайну сай^в з вивченням основ веб-програмування Здобувачi освiти, якi матимуть достатнiй i високий рiвень досягнень при навчанн за цiею програмою, зможуть визначились з напрямками розвитку отриманих навичок пщ час подальшоУ освiти та опанувати професи веб-дизайнера, веб-програмiста тощо.
Список використаних джерел
1. М. В. Гвозденко, "Вивчення шформацшних технологш як споаб пщвищення конкурентоспроможност учня на сучасному ринку прац Украши", Педагогiка формування творчоУ особистост у вищiй i загальноосвiтнiй школах, №33, с.471-474, 2013.
2. А. Fedorchuk, "Оргаыза^я навчання старшокласникiв предмету «шформатика» у класах фiзико-математичного профтю", lнформацiйнi технологи i засоби навчання, № 43, с. 118-127, 2014.
3. В. Д. Руденко, "Шктьна шформатика: сучасн проблеми та погляд у майбутне", Комп'ютер у школi та амЧ, № 5, с. 3-7, 2009.
4. А. В. Кузьменко, О. С. Рибак, "Основи верстки та веб-програмування (програма курсу за вибором)", Комп'ютер у школi та ам% № 5, с. 41-47, 2017.
5. Ю. С. Рамський, I. С. 1вась^в, О. Ю. Ыколаенко, "Вивчення Web-програмування в школг Навчальний поабник", Тернопiль: Навчальна книга - Богдан, 200 с., 2004.
6. Ю. О. Дорошенко, I. О. Завадський, Н. С. Прокопенко, "Програма курсу за вибором «Основи 1нтернет»", 1нформатика та шформацшш технологи в навчальних закладах, №4-5, с. 41-48, 2006.
7. I. О. Завадський, Н. С. Прокопенко, "Програма курсу за вибором «Основи Веб-дизайну»", 1нформатика та шформацшш технологи в навчальних закладах, №4-5, с. 48-55, 2006.
8. М. О. Маврша, I. Ю. Корж, "Основы тенденци та перспективы технологи web-розробки", Новiтнi шформацшш системи та технологи, № 5, с.37-43, 2016.
9. В. В. Борисов, "Веб-дизайн як складова фаховоУ пщготовки майбутшх учт^в технологш", Науковi записки [Нацюнального педагопчного унiверситету iм. М. П. Драгоманова]. Сер. : Педагопчш та юторичш науки, № 107, с. 1218, 2012.
10. Н. М. Ф^оль, "Особливост верстки електронних видань", [Online]. URL: http://storage.library.opu.ua/online/periodic/iopktXXI/064-074.pdf. [Accessed: 05- Aug- 2017].
11. "The 2017 Top Programming Languages", IEEE Spectrum: Technology, Engineering, and Science News, 2017. [Online]. Available: http://spectrum.ieee.org/computing/software/the-2017-top-programming-languages. [Accessed: 18- Jul- 2017].
12. S. O'Grady, "The RedMonk Programming Language Rankings: June 2017", tecosystems, 2017. [Online]. Available: http://redmonk.com/sogrady/2017/06/08/language-rankings-6-17/. [Accessed: 22- Oct- 2017].
13. В. М. Базурш "Особливост навчання веб-програмування мовою JavaScript студен^в-математимв", Вкник Житомирського державного ушверситету, №1(73), - с. 79-83, 2014.
14. П. Глухшчук, "Сучасш пщходи до веб-програмування та веб-розробки", Наука. Освп^а. Молодь. Студентський вюник УДПУ iм. П. Тичини, №1, с. 97-98, 2016.
15. В. М. Франчук, О. В. Галицький, "Вибiр системи управлшня вмктом сайту", Науковий часопис НПУ iменi М.П. Драгоманова. Серiя № 2. Комп'ютерно-орiентованi системи навчання: Збiрник наукових праць, №14 (21), с. 1928, 2014.
16. "Каталог професш - IT, комп'ютери та !нтернет", Education.ua, 2017. [Online]. Available: https://www.education.ua/ua/professions/it/. [Accessed: 08- Jul- 2017].
References
1. M. V. Hvozdenko, " Study of information technologies as an element of competitiveness on the current labor market of Ukraine ", Pedahohika formuvannia tvorchoi osobystosti u vyshchii i zahalnoosvitnii shkolakh, №33, s.471-474, 2013 (in Ukrainian).
2. Fedorchuk, "Organization of upper-formers education of «informatics» in the physical and mathematical profile classes", Information Technologies and Learning Tools, № 43, s. 118-127, 2014 (in Ukrainian).
3. V. D. Rudenko, " School Informatics: Modern Problems and Looking to the Future ", Kompiuter u shkoli ta simi, № 5, s. 3-7, 2009 (in Ukrainian).
4. V. Kuzmenko, O. S. Rybak, "The basic of layout and web-programming (the program of course by choice)", Kompiuter u shkoli ta simi, № 5, s. 41-47, 2017 (in Ukrainian).
5. Iu. S. Ramskyi, I. S. Ivaskiv, O. Yu. Nikolaienko, " Studying Web-Programming at School: A Tutorial", Ternopil: Navchalna knyha - Bohdan, 200 s., 2004(in Ukrainian).
6. Iu. O. Doroshenko, I. O. Zavadskyi, N. S. Prokopenko, "The program of the course on the choice "Fundamentals of the Internet", Informatyka ta informatsiini tekhnolohii v navchalnykh zakladakh, №4-5, s. 41-48, 2006 (in Ukrainian).
7. O. Zavadskyi, N. S. Prokopenko, "Web Design Course Basics»", Informatyka ta informatsiini tekhnolohii v navchalnykh zakladakh, №4-5, s. 48-55, 2006 (in Ukrainian).
8. M. O. Mavrina, I. Yu. Korzh, " Main tendencies and perspective technologies of web-development ", Novitni informatsiini systemy ta tekhnolohii, № 5, s.37-43, 2016 (in Ukrainian).
9. V. V. Borysov, " Web-design as a constituent of professional preparation of future teachers of technologies", Naukovi zapysky [Natsionalnoho pedahohichnoho universytetu im. M. P. Drahomanova]. Ser. : Pedahohichni ta istorychni nauky, № 107, s. 1218, 2012 (in Ukrainian).
10. N. M. Fihol, "Features of layout of electronic publications", [Online]. Available: http://storage.library.opu.ua/online/periodic/iopktXXI/064-074.pdf. [Accessed: 05- Aug- 2017] (in Ukrainian).
11. "The 2017 Top Programming Languages", IEEE Spectrum: Technology, Engineering, and Science News, 2017. [Online]. Available: http://spectrum.ieee.org/computing/software/the-2017-top-programming-languages. [Accessed: 18- Jul- 2017] (in English).
12. S. O'Grady, "The RedMonk Programming Language Rankings: June 2017", tecosystems, 2017. [Online]. Available: http://redmonk.com/sogrady/2017/06/08/language-rankings-6-17/. [Accessed: 22- Oct- 2017] (in English).
13. V. M. Bazurin " Features of Teaching Web Programming Students-Mathematicians in JavaScript Language", Visnyk Zhytomyrskoho derzhavnoho universytetu, №1(73), - s. 79-83, 2014 (in Ukrainian).
14. P. Hlukhinchuk, " Modern approaches to web programming and web development", Nauka. Osvita. Molod. Studentskyi visnyk UDPU im. P. Tychyny, №1, s. 97-98, 2016 (in Ukrainian).
15. V. M. Franchuk, O. V. Halytskyi, "Choice of site content management system", Naukovyi chasopys NPU imeni M.P. Drahomanova. Seriia № 2. Kompiuterno-oriientovani systemy navchannia: Zbirnyk naukovykh prats, №14 (21), s. 19-28, 2014 (in Ukrainian).
16. "Kataloh profesii - IT, kompiutery ta Internet", Education.ua, 2017. [Online].
Available: https://www.education.ua/ua/professions/it/. [Accessed: 08- Jul- 2017] (in Ukrainian).
REWIEW COURSE BY CHOICE «THE BASIC OF LAYOUT AND WEB-PROGRAMMING»
Alla Vorozhbyt
National Pedagogical Dragomanov University, Ukraine Olga Rybak Technical Lyceum of Kyiv, Ukraine Abstract. The article considers the content of the course "basics of HTML and web programming" for job seekers education high school institutions of General secondary education. The increase in Ukraine in recent years, the interest of students who already have the skills to work on the computer to the Internet and web design is the need of providing additional education with web technology. The course content includes information of the direction requires further development, since high school in the Informatics content of the missing issues of layout and graphic design of web pages, cascading style sheets, technology, web programming (client and server-side programming), layout of printed products and the like. Create elective courses for high school students towards the study of information technology, programming such as "basics of HTML and web programming" is the need of the society. The purpose of this article is an overview and explanations on the content of the course "basics of HTML and web programming" for computer science teachers for use in the educational process.
The program is designed to teach high school institutions of General secondary education. It is a logical continuation of the study of computer science basic school and focused on classes, working on curriculum with the academic level of teaching science. The program is composed of two meaningful lines: the basics of layout and design of printed products and basics of layout and design of sites with learning the basics of web programming. Described explanation of the choice sections: two - and three-dimensional computer graphics and animation, layout, printing products, hypertext markup language, cascading style sheets; the basics of client and server programming, database management system. To ensure course learning the necessary software tools that are free and freely distributable. The course may be recommended for use in institutions of secondary education. The course "basics of HTML and web programming" is an important step for the study of modern information technology, algorithmization and programming and will contribute to determining the direction of the acquired skills in further education students.
Keywords: course of choice; high school; general educational institution; Information Technology; layout; web programming; graphics; animation.
