к. фіз.-мат. н. Джавала Л.Л.

Національний університет "Львівська політехніка"

НН Інститут підприємництва та перспективних технологій

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

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

Метою дослідження є практична реалізація вищезгаданих ідей у поданні процесу розв’язування прикладів з дисципліни «Дискретна математика», що входить у блок фундаментальних дисциплін напряму підготовки «Комп’ютерні науки» за допомогою популярної зараз в ІТ-сфері веб-аплікації. Важливим фактором є незалежність аплікації від платформи, на якій вона запускається, оскільки відкривається за допомогою звичайних веб-оглядачів, що встановлені на усіх типах сучасних смартфонів і персональних комп’ютерів. Тому немає потреби встановлювати додаткові програми для перегляду аплікації, відсутній фактор ризику, який полягає в небезпеці заразити систему вірусом при встановленні маловідомої програми на свій комп’ютер.

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

Підготовлено робочий прототип веб-аплікації, яка допоможе студенту освоїти розв’язування однієї задачі з теми «Логіка висловлень» дисципліни «Дискретна математика».

Під час проектування дизайну велику увагу було приділено дотриманню основних правил розробки грамотного інтерфейсу, щоб дати можливість студентові максимальну увагу приділити аналізу процесу розв’язування задачі [1]. Продумана візуальна ієрархія допомагає відокремити найбільш важливі елементи від другорядних. Основні елементи інтерфейсу веб-аплікації розділено на кілька основних груп, кожна з своїм значенням і незмінним місцем розташування на сторінці (рис. 1). Цими елементами є таблиця істинності, умова задачі, основне поле для відображення ходу розв’язування прикладу, блок з навігацією покрокового процесу розв’язку і опис кожної дії в поточному кроці з кнопкою запуску цієї дії.

Рис. 1. Розміщення основних блоків у прототипі веб-аплікації.

Під час проектування дизайну і розробки інтерфейсу велику увагу було приділено анімації переходу стану елементів інтерфейсу при взаємодії з користувачем. За рахунок розвантажувальної інтерпретації змін в системі сприйняття інформації, анімація дозволяє користувачеві продовжувати думати про завдання без необхідності переносити контекст на інтерфейс. Виключаючи раптові візуальні зміни, анімація знижує можливість того, що користувач буде здивований. Коли людині передається величезна кількість даних, анімація допомагає робити сприймання цієї інформації краще, веде людину через взаємодії, допомагаючи зрозуміти зв’язки, структуру, причину і результат. Анімація є важливою частиною комунікації. При правильному використанні, анімація може вказувати на: причинно-наслідковий зв’язок - коли щось одне відбувається перед іншим, наш мозок усвідомлює, що ці дві речі пов’язані, і що перше призвело до другого; зворотній зв’язок - вказує на те, що дії користувача призвели до реакції; взаємодія - підкреслюються місця, де речі відносяться між собою ієрархічно. Анімація допомагає візуалізувати прогрес проходження будь-якого лінійного процесу [2].

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

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

Дана аплікація була побудована з використанням технологій HTML, CSS, javascript на основі фреймворку Twitter Bootstrap, який призначений для швидкого і кроссбраузерного створення прототипів веб-інтерфейсів, і бібліотеки jQuery для спрощення написання коду прототипу. Код веб-аплікації з метою ознайомлення викладений у вільний доступ у репозиторій на github [3].

Даний прототип ілюструє можливості використання сучасних інформаційних технологій в процесі навчання студентів природничих дисциплін (рис. 2). Після детального аналізу та опитування користувачів буде взятий за основу для розробки більш завершеного продукту.

Рис. 2. Інтерфейс веб-аплікації

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

Література:

1. «Хороший дизайн интерфейсов» [Електронний ресурс].– Режим доступу: http://www.uxfox.ru/goodui1/

2. «Веб-анимация в действии» [Електронний ресурс].– Режим доступу: http://www.uxfox.ru/web-animation-at-work/

3. Математична веб-аплікація [Електронний ресурс].– Режим доступу: http://dzhavala.github.io/mathApp/