Урок "Інструменти веб-розробника"

Тема уроку: Інструменти веб-розробника

Мета уроку:

Навчальна. Сформувати знання учнів щодо інструментів веб-розробника; сформувати в учнів поняття інструменти веб-розробника; формувати науковий світогляд та діалектичне мислення.

Розвивальна. Розвивати творчий підхід до навчання як засіб виховання стійкого інтересу до предмета.

Виховна. Виховувати уважність, зібраність, спостережливість.

Тип уроку: урок засвоєння нових знань.

Хід уроку

І. ОРГАНІЗАЦІЙНИЙ ЕТАП

II. АКТУАЛІЗАЦІЯ ОПОРНИХ ЗНАНЬ ТА ВМІНЬ

Дайте відповідь на запитання:

1) Що таке інформаційна структура сайту?

2) Назвіть параметри складності структури. Як вони розрізняються?

3) Яка структура характерна для будь-якого сайту?

4) Що таке посадкова сторінка? Яка мета її створення?

5) Чим відрізняється front-end від back-end?

6) Що таке CMS? Назвіть функції систем керування вмістом.

7) Що таке шаблон сторінки?

8) Що таке адміністрування сайту?

9) На які види поділяється робота з адміністрування сайту?

10) Які послуги надаються у плані технічного адміністрування?

IІІ. ВИВЧЕННЯ НОВОГО МАТЕРІАЛУ

Усі веб-сайти будуються з допомогою мови розмітки HTML та каскадних таблиць стилів CSS.

Редактор коду - це перший інструмент веб-розробника. Сучасні редактори надають широкий асортимент інструментів, які полегшують і прискорюють процес розробки коду.

Розглянемо найбільш поширені нині редактори коду:

1) Visual Studio Code - це безкоштовний крос-платформний редактор коду, розроблений корпорацією Microsoft. Виходячи з опитування, проведеного Stack Overfl ow у 2019 році, Visual Studio Code є одним із найпопулярніших редакторів коду, ним користуються понад 55 % розробників. Програма має відкритий вихідний код. Вона оснащена доступним набором інструментів для редагування й налаштування, легко інтегрується з іншими сервісами, її властивості можна легко розширити;

2) Notepad++ - розвинутий редактор коду, випущений у 2003 році і доступний лише на платформі Windows. Виходячи з опитування, проведеного Stack Overfl ow у 2019 році, Notepad++ займає другу позицію в рейтингу популярних редакторів коду. Ним користуються понад 30 % розробників. Програма дуже швидка, підтримує зовнішні плагіни, включаючи макроси, її інтерфейс передбачає редагування в різних вкладках, є опція перетягування для початківців. Notepad++ підтримує повноекранний режим, робить автоматичні відступи та автодоповнення, має дуже продумане підсвічування синтаксису. Програма дозволяє здійснювати пошук і заміну тексту, перевірку правопису з порівнянням файла, використовувати фолдинг (функціонал згортання);

3) Sublime Text 3 - це крос-платформний редактор коду, що має як преміум-версію, так і безкоштовну версію, яку можна завантажити на офіційному сайті. Існує багато редакторів коду, які підтримують чорний фон для розширеного перегляду.

4) Atom - це безкоштовний крос-платформний редактор із відкритим вихідним кодом. Це розробка GitHub. Інтерфейс Atom виглядає як клон редактора Sublime Text, проте працювати в ньому набагато комфортніше, оскільки він більш простий і зрозумілий. Крім того, у випадку коли розробник під час програмування стикається з труднощами, спільнота GitHub досить активно розв’язує цю проблему.

5) Vim - це редактор (від англ. vi improved - покращений vi), який уперше був випущений наприкінці 1991 року Брамом Мооленааром. Справжню міць Vim демонструє під час роботи з структурованими текстами та є незамінним для програмістів і верстальників, його використовує кожен четвертий веб-девелопер.

6) Brackets - це редактор коду, створений з нуля спеціально для веб-дизайнерів і фронтенд-розробників, які працюють переважно з JavaScript, HTML і CSS.

ІV. ЗАКРІПЛЕННЯ НОВИХ ЗНАНЬ І ВМІНЬ

У 9 класі створювали сайт за допомогою Google Sites. Чи можна вважати цей інструмент CMS? Обгрунтуйте свою відповідь.

На малюнку наведено логотипи інструментів веб-розробника. Знайдіть в Інтернеті відомості про ці інструменти. Створіть класифікацію зазначених інструментів.

V. ПІДБИТТЯ ПІДСУМКІВ УРОКУ

Бесіда за питаннями:

1) У чому полягає різниця між роботою веб-дизайнера і веб-розробника?

2) Якими інструментами користується в роботі веб-розробник?

3) Яке призначення редактора коду?

4) Назвіть найпопулярніший, на вашу думку, редактор коду.

5) Що об’єднує всі редактори коду?

VI. Домашнє завдання

Опрацювати § 11.6 (сторінки 154-158) підручника Інформатика для 11 класу (автори Руденко В. Д, Речич Н. В., Потієнко В. О.)

Список використаної літератури для складання уроку:

1. Ісак Л.М. Інформаційні технології. Лабораторний практикум: [навч. пос. для студ., які здобувають ОКР «бакалавр» спец. 014 Середня освіта (Українська мова)] / Л.М. Ісак. - Переяслав-Хмельницький: Домбровська Я. М., 2018. - 91 с.

2. Пасічник О.Г. Основи веб-дизайну: [пос.] / О.Г. Пасічник, О.В. Пасічник, І.В. Стеценко. - К.: BHV, 2009. - 333 с.

3. Руденко В. Д. Інформатика (профільний рівень): підруч. для 11 кл. закл. загал. серед. освіти / В. Д. Руденко, Н. В. Речич, В. О. Потієнко. - Харків: Вид-во «Ранок», 2019. - 256 c. : іл.

4. Слюсаренко В. В. Інтернет-технології та веб-дизайн: Навчально-методичний посібник. - Кропивницький: Видавництво ТОВ «КОД», 2018. - 104 с.

5. Томашевський О.М. Інформаційні технології та моделювання бізнеспроцесів: [навч. посіб.] / О.М. Томашевський, Г.Г. Цегелик, М.Б. Вітер, В.І. Дубук. - К.: Центр учб. л-ри, 2012. - 296 с.