PRACTICE - УКРАЇНОМОВНИЙ ОНЛАЙН РЕДАКТОР ДЛЯ ВИВЧЕННЯ HTML, CSS, JAVASCRIPT

Чернієвський Юрій Всеволодович

Центр дитячої та юнацької творчості

Краснопільської селищної ради

Керівник гуртка «WEB-MIDITAUR»

PRACTICE - УКРАЇНОМОВНИЙ ОНЛАЙН РЕДАКТОР ДЛЯ ВИВЧЕННЯ HTML, CSS, JAVASCRIPT.

Актуальність розробки

Цифрове інформаційне середовище розвивається шаленими темпами. Онлайн редактори коду стають найважливішими компонентами, які надають можливість працювати та вчитися з будь-якого місця нашої планети. Комунікаційні засоби майбутнього оцифрованого світу будуть мати за основу web інтерфейси. Вивчати web технології становиться вже не питанням якогось витонченого специфічного вибору, а питанням актуальним і важливим для будь-кого, хто хоче мати достойну роботу в майбутньому цифровому світі!
Тому дуже актуальним стало питанням наявності доступного, якісного інструменту, який стане в нагоді при вивченні основ сайтобудування. Виникла ідея створити онлайн редактор коду з українським інтерфейсом, який допомагав би цікаво, просто, комфортно і швидко вивчати основи html, css, JavaScripts кодування, навчитися писати сайти, був би легкий у використанні і освоєнні, забезпечував можливість редагувати HTML, CSS та JavaScript-код, а також відразу – в режимі реального часу переглядати результат у своєму браузері. 

Ключові слова

Practice, WEB, HTML, CSS, JavaScript, конструктор

Мета та завдання

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

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

Під час розробки до web-конструктора «Practice» ставилися певні вимоги. Він повинен бути:

•                 Швидкий, не створювати навантаження на хостинг.
•                 Простий в освоєнні і використанні.
•                 Мати інтуїтивний інтерфейс.
•                 Забезпечити можливість вивченняі DHTML.
•                 Бути добре зрозумілим навіть маленьким дітям.
•                 Безкоштовним.

Аналіз останніх публікацій

Ідея сама по собі не нова, адже з успіхом використовується на платформі w3school. Але в результаті бажання та спроби створити україномовний інструмент - не гірше англомовного аналога , з’явився на світ web-конструктор «Practice». Враховуючи той фактор, що за базовий компонент w3school редактор коду використовувався CodeMirror, було вирішено продемонструвати учасниками гуртка, що можна створити подібний україномовний редактор, а назву вони придумали самі під час виконання  практичної роботи за допомогою його бета версії. Редактор відразу сприйнявся легко учнями різних вікових категорій і тому питання бути чи не бути Practice вже не підлягало сумніву.

Виклад основного матеріалу

Базова реалізація

За базове ядро редактора було вибрано бібліотеку універсального текстового редактора CodeMirror, який має велику кількість режимів та доповнень, що дозволяють реалізувати більш досконалі функції редагування. Популярний JavaScript компонент універсального текстового редактора – CodeMirror  забезпечує реалізацію редактора коду в браузері, який можна вбудовувати у веб-сторінки. Основна бібліотека забезпечує лише компонент редактора, без супровідних кнопок, автоматичного завершення чи інших функцій IDE. Він надає багатий API (Application Programming Interface - Прикладни́й програ́мний інтерфе́йс (інтерфейс програмування застосунків, інтерфейс прикладного програмування)), завдяки якому така  функціональність може бути реалізована теж доволі широко.

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

З англійської назва редактора PRACTICE українською мовою перекладається - “ПРАКТИКА”. Саме для виконання практичних робіт і створювався перший варіант редактора PRACTICE.

ВЕРСІЇ PRACTICE

Онлайн редактор “PRACTICE”  розвивається в чотирьох напрямках, що відображається на гілках версій редактора.  Має три робочі версії, які відповідають навчальній програмі з позашкільної освіти технічного напряму гуртка “WEB-Технології” основному рівню, 3х річному навчанню, та полегшену  версію редактора - Practice Version for Examples (Версія для демонстрації прикладів). Про версії більш детально можна дізнатися за посиланням: https://www.practice.net.ua/2021/01/practice_15.html

Він може бути дуже корисним також вчителям інформатики загальноосвітніх закладів під час вивчення тем, присвяченим створенню web сайтів.

За допомогою онлайн редактора “PRACTICE” можна без проблем тестувати, досліджувати HTML, CSS, JavaScript код як дітям, так і дорослим. Можна створювати повноцінні Веб-сторінки і зберігати їх локально. Функції таймера показують як поточний час так і час виконання роботи з редактором. Що може бути корисним у разі необхідності фіксації факту виконання практичних робіт у вигляді скріншотів. Інтуїтивне меню редактора виконує суто практичні функції - очищення робочого вікна редактора, зберігання та завантаження файлів, переходу на головний сайт гуртка.

Редактора PRACTICE має наступні можливості:

•                 Підсвічування коду
•                 Автоматична нумерація рядків
•                 Підказка для HTML
•                 Підказка для CSS (у версіях 2.0.0 і вище)
•                 Відображення результату в реальному часі
•                 Автозаповнення
•                 Зміна тем оформлення
•                 Дадавання тегів форматування тексту за допомогою кнопок
•                 Обгортання тексту HTML тегами його форматування за допомогою кнопок
•                 Відміна та поверненя операцій
•                 Очистка текстових вікон редактора
•                 Включення та відключення нумерації рядків
•                 Завантаження файлів з локального комп’ютера
•                 Збереження файлів локально на комп’ютер
•                 Автоформат коду у привабливий вигляд
•                 Обгортання виділеного тексту HTML тегами коментаря
•                 Видалення з виділеного тексту тегів коментаря
•                 Без проблем обробляє великі об’єми коду та документи в тисячі рядків

Полегшена версія

Розроблена також полегшена версія редактора - Practice Version for Examples (Версія для демонстрації прикладів). Знаходиться за посиланням: https://www.ex.practice.net.ua/. Дана версія має лише необхідні для відображення прикладів модулі.

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

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

Структура типу - приклад:

Тип урок містить три основних інформаційних розділів.

1.               Навігаційне меню.
2.               Ліве вікно редагування коду, яке містить готовий приклад коду.
3.               Праве вікно редактора відображає в режимі реального часу результат зміни коду в лівому вікні.

Структура типу - урок:

Тип урок містить п’ять основних інформаційних розділів.

1.               Розділ навчальної програми, номер уроку, назва (тема) уроку.
2.               Навігаційне меню з кнопкою «Друк».
3.               Навчальний матеріал.
4.               Середнє вікно редагування коду.
5.               Праве вікно редактора відображає в режимі реального часу результат зміни коду в середньому вікні.

Структура типу - практикум:

Тип практикум містить шість основних інформаційних розділів.

1.               Назва (тема) практикуму.
2.               Завдання практикуму.
3.               Ліве вікно редагування коду містить базові теги завдання практикуму, які можуть потребувати доповнення або редагування, - в залежності від завдання практикуму.
4.               Праве вікно редактора відображає в режимі реального часу результат зміни коду в лівому вікні.
5.               Розділ «Вказівки до здачі результатів практикуму» містить вказівки на дії, які необхідно виконати для завершення практикуму. Необхідно виконати кілька операцій, які допоможуть зберегти результати практикуму у вигляді локального файлу.
6.               Розділ функціональних кнопок призначений для візуальної локалізації практикуму у вигляді графічного зображення, або pdf файлу. Рекомендується використовувати кнопку друку для більш повного відображення практикуму.

Висновки

Карантинні обмеження та дистанційна форма навчання теж посприяла своєрідній обкатці редактора Practice при синхронних онлайн заняттях. Онлайн редактор “PRACTICE” став у нагоді саме в період карантину. Він добре зарекомендував себе як чудовий інструмент дистанційного навчання. PRACTICE зручний для демонстрації прикладів під час синхронних занять. Діти легко сприймають просту форму демонстрації тегів форматування тексту, та готових прикладів. Редактор PRACTICE з успіхом пройшов апробацію як іноваційний інструмент гурткової роботи напрямку WEB-Технологій під час реальних синхронних дистанційних занять.

З ним працювали діти віком від 9 до 17 років і процес набуття навичок роботи з редактором був доволі простим і легким. Достатньо кількох хвилин для пояснення основних принципів роботи з редактором і діти починали з ним працювати.

Вихованці гуртка “WEB-MIDITAUR” позитивно оцінили можливості редактора “PRACTICE” і за допомогою нього створили доволі цікаві практичні роботи.

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