Розробка адаптивного web-інтерфейсу для додатку керування особистими фінансами

Abstract

Мета роботи – створення адаптивного web-інтерфейсу для додатку керування та обліку особистих фінансів. Використовуються методи побудови web-інтерфейсів, мова розмітки гіпертексту (HTML), каскадна мова стилю сторінок (CSS), інструменти дослідження web-додатків. Проаналізовано вимоги до адаптивних web-інтерфейсів, що дозволяють використовувати їх на пристроях з різними параметрами екранів. Визначено складові елементи web-інтерфейсу додатку для обліку та аналізу використання особистих фінансів. Розроблено три варіанти компоновки цих елементів для екранів персональних комп’ютерів, планшетів та смартфонів. Запропоновані варіанти компоновки дозволяють уникнути появи горизонтальної прокрутки на екрані та працювати з інформацією без використання функції масштабування. Встановлено, що медіа запити, які входять до специфікації CSS3, дозволяють гнучко керувати взаємним розміщенням елементів інтерфейсу та їх зовнішнім виглядом. Перетворення табличної інформації у форму списків для відображення на вузьких екранах смартфонів здійснено за рахунок зміни HTML розмітки. Створено та розміщено у мережі Інтернет прототип запропонованого додатку. Проаналізовано можливості медіа запитів, що входять до специфікації CSS3, з точки зору керування взаємним положенням компонентів web-інтерфейсів. Розроблено прототип web-інтерфейсу додатку керування та обліку особистих фінансів, що дозволяє уникнути появи горизонтальної прокрутки на екрані та працювати з інформацією без використання функції масштабування.

Creation of an adaptive web interface for a personal finance management and accounting application. Methods of building web interfaces, hypertext markup language (HTML), cascading style page language (CSS), web application research tools are used. The requirements for adaptive web-interfaces, which allow their use on devices with different screen parameters, have been analyzed. The components of the application web interface for accounting and analysis of personal finances use are defined. Three layout options for these elements have been developed for the screens of personal computers, tablets and smartphones. The proposed layout options allow you to avoid the appearance of horizontal scrolling on the screen and work with information without using the zoom function. It has been established that media requests, which are included in the CSS3 specification, allows to flexibly manage the relative placement of interface elements and their appearance. The transformation of tabular information into the form of lists for display on narrow smartphone screens was carried out by changing the HTML markup. A prototype of the proposed application was created and placed on the Internet. The possibilities of media queries included in the CSS3 specification were analyzed from the point of view of managing the relative position of web interface components. A prototype of the personal finance web interface management and accounting application has been developed, which allows you to avoid the appearance of horizontal scrolling on the screen and work with information without using the zoom function.