Використання редактору Brackets на уроках інформатики

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

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

Використання редактору Brackets на уроках інформатики

А.В. Стьопкін, Т.В. Турка, М.С. Кузюра

У статті висвітлено сучасний стан проблеми використання вільнопоширюваного програмного забезпечення в загальноосвітніх закладах. Розглянуто програмне забезпечення, необхідне для проведення уроків web-програмування. Наведено основні переваги та недоліки використання різноманітного програмного забезпечення. Обґрунтовано доцільність використання спеціалізованих web- редакторів. Розглянуто найпопулярніші web-редактори. Проведено аналіз доцільності та можливості використання вільнопоширюваного web-редактору Brackets. у роботі вчителя інформатики.

Ключові слова: web-редактор, brackets, вільнопоширюване програмне забезпечення.

В статье рассмотрено современное состояние проблемы использования свободно распространяемого программного обеспечения в общеобразовательных заведениях. Рассмотрено программное обеспечение, необходимое для проведения уроков web-программирования. Приведены основные достоинства и недостатки использования различного программного обеспечения. Обоснована целесообразность использования специализированных web-редакторов. Рассмотрены популярные web-редакторы. Проведен анализ целесообразности и возможности использования свободно распространяемого web-редактора Brackets в работе учителя информатики.

Ключевые слова: web-редактор, brackets, свободно распространяемое программное обеспечение.

програмування урок brackets інформатика

Key words: Web-editor, Brackets, free software.

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

Вивчення інформатики в системі освіти з кожним днем стає все більш актуальнішим та важливішим за рахунок широкої комп'ютеризації, яка в свою чергу потребує постійно підвищувати комп'ютерну грамотність учнів, так як згодом вона перетворюється в комп'ютерну грамотність нашого суспільства. Варто відзначити, що й інтерес школярів до вивчення інформатики з кожним роком лише зростає. Однією з найважливіших рушійних сил цього процесу є інтерес до web-програмування. У більшості учнів є як потужна мотивація, так і здатність до освоєння необхідного матеріалу. Але, враховуючи те, що навіть мова розмітки гіпертексту HTML пропонується до вивчення лише в програмах з профільним та поглибленим рівнями вивчення інформатики, а каскадні таблиці стилів CSS та мова програмування JavaScript так і зовсім тільки в програмах з поглибленим вивченням, то стає зрозумілим, що витрачати час на роботу зі звичайними текстовими редакторами, такими як WordPad чи Блокнот, недоречно.

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

Ознайомившись з літературними джерелами [1-4], присвяченими впровадженню інформаційних технологій в навчальний процес, можна зробити висновок, що інтенсивність досліджень такого впровадження в навчальних закладах тільки зростає. Дослідження в даному напрямі досить широко проводилися М.І. Жалдаком [1-3]. В цілому ряді робіт започатковано сучасні комп'ютерно-орієнтовані методичні системи навчання, що орієнтовані на поєднання надбань традиційних методичних систем навчання і сучасних інформаційних технологій. Приймаючи до уваги закордонний та вітчизняний досвід (І.В. Роберт, І.Б. Софронова, П.І. Самойленко, Н.В. Апатова), можна зробити висновок, що новітні інформаційні технології доцільно застосовувати при вивченні будь-яких предметів [4].

Виділення раніше не вирішених частин загальної проблеми, котрим присвячується стаття. Якщо поцікавитись програмними засобами, які використовуються для web-розробки, то виявиться, що їх перелік досить значний і майже всі вони надають досить широкий спектр інструментів (якщо не брати до уваги звичайні офісні додатки, які в більшості випадків також можна використовувати як web-редактори) для роботи. Але всі програмні засоби мають як свої переваги, так і недоліки. Досить вагомою залишається саме проблема вибору оптимального програмного засобу, який в повній мірі забезпечить потреби вчителя та учнів при вивченні засобів web-розробки на уроках інформатики в школі. Тому мета нашої роботи полягає в пошуку найбільш оптимального, для використання в школі, web-редактора, який дозволяє зручно створювати web-сторінки та редагувати вже наявний код, створений за допомогою HTML, CSS та JavaScript, а також надає простий інтерфейс користувача зі зручним навігаційним меню; і, бажано, розповсюджуваний за ліцензією вільного програмного забезпечення.

Виклад основного матеріалу дослідження з повним обґрунтуванням отриманих результатів. Серед значної кількості web-редакторів, представлених в наш час, складно обрати оптимальний програмний засіб. Враховуючи ті випадки, коли в школі використовуються операційні системи сімейства Linux, а більшість учнів вдома використовує операційні системи сімейства Windows, стає зрозумілим, що для уникнення додаткових складностей та більш зручного користування, web-редактор має бути кросплатформенним, тобто суміснісний з операційними системами Mac, Windows і Linux, тому, наприклад, такі редактори як notepad++, coda та інші ми не розглядаємо. Також, зважаючи на те, що використовуватися редактор буде для навчання в загальноосвітніх школах, які в більшості випадків не можуть дозволити собі комерційне програмне забезпечення, то коло пошуку також зменшуємо до вільнопоширюваних програм, тим самим не розглядається можливість використання таких web- редакторів як Sublime Text, Adobe Dreamweaver та інші.

Одним з найвідоміших та найзручніших web-редакторів, який відповідає представленим вимогам є редактор з відкритим кодом Brackets. Він орієнтований на роботу з HTML, CSS і JavaScript [5], тобто повністю задовольняє потреби вчителя при вивченні розділів «Комунікаційні технології» та «Основи комп'ютерного проектування» в школах з поглибленим вивченням інформатики. За допомогою цих же технологій та з використанням Chromium Embedded Framework реалізовано сам редактор, що забезпечує його кросплатформенність. Brackets створений і розвивається Adobe Systems під ліцензією MIT License та підтримується на GitHub. В основі Brackets лежать такі проекти, як CodeMirror, jQuery, Bootstrap, Nodejs [6]. Середа розробки цілком стабільна - самі розробники IDE Brackets стали використовувати її у своїй повсякденній роботі вже досить давно. На сьогоднішній день існує безліч розширень для Brackets, що додають велику кількість необхідних інструментів для роботи, таких як система контролю версій Git [7], перегляд HTML-коду в браузері Chrome в реальному часі, синхронізація з FTP та інше.

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

- Є можливість розділення екрану на дві частини, що дозволяє одночасно переглядати та редагувати два документи, що значно спрощує редагування web-сторінок. Розділяти екран можна як по вертикалі, так і по горизонталі.

- Brackets підтримує мінікарту документу, що значно спрощує орієнтування в досить великих документах.

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

- Інтелектуальне автодоповнення коду. Завдяки новому API (application programming interface) автодоповнення працює з HTML, CSS, JavaScript (включаючи jQuery).

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

- Реалізовано «Inline Color Editor» для редагування кольору об'єкту без використання графічного редактору та таблиці кольорів, необхідно просто обрати колір із запропонованого спектру, і редактор сам додасть необхідний колір до коду [7].

- Швидкий доступ до файлів проекту. Існує панель швидкого переходу до файлів проекту.

- Живий попередній перегляд (Live Preview). За замовчуванням живий попередній перегляд працює завдяки локальному Nodejs серверу. Особливість цього перегляду в тому, що можна бачити результат в реальному часі. Варто зауважити, що ця функція працює тільки з браузером Chrome. Також при редагуванні HTML в Brackets в браузері підсвічується відповідний редагований елемент [6;7].

Основними недоліками Brackets є: відсутній зрозумілий механізм налаштування IDE, невелика швидкість завантаження програми і роботи деяких функцій (наприклад, inline-редагування JavaScript). При встановленні редактору за замовчуванням в ньому є проблема з відображенням кириличних шрифтів, але це швидко вирішується простою зміною шрифту за замовчуванням.

Висновки і перспективи подальших досліджень

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

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

Література

1. Жалдак М.І. Комп'ютер на уроках геометрії / М.І. Жалдак, О.В. Вітюк. - К.. РННЦ ДІНІТ, 2004. - 167 с.

2. Жалдак М.І. Комп'ютер на уроках математики / М.І. Жалдак. - К.: Техніка, 1997. - 304 с.

3. Жалдак М.І. Теорія ймовірностей і математична статистика з елементами інформаційної технології / М.І. Жалдак, Н.М. Кузьміна, С.Ю. Берлінська. - К.: Вища школа, 1996. - 352 с.

4. Рамский Ю.С. Информационное общество. Информатизация образования / Ю.С. Рамский // Компьютерно-ориентированные системы обучения. - К.: НПУ им. М.П. Драгоманова, 2003. - № 7. - С. 16-28.

5. Brackets: A modem, open source text editor that understands web design. -

6. Update about Extract for Brackets (Preview).

7. How to Use Brackets.

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