МАГИСТЪРСКА ТЕЗА Създаване на UI за онлайн приложение...

УНИВЕРСИТЕТ ПО БИБЛИОТЕКОЗНАНИЕ И ИНФОРМАЦИОННИ

ТЕХНОЛОГИИ

КАТЕДРА ”ИНФОРМАЦИОННИ СИСТЕМИ И ТЕХНОЛОГИИ”

СПЕЦИАЛНОСТ «ИНФОРМАЦИОННИ ТЕХНОЛОГИИ»

МАГИСТЪРСКА ТЕЗА

на тема:

Създаване на UI за онлайн приложение за управление

на семеен бюджет

Студент: Научен

Станислава Ефтимова ръководител:................................

дистанционно обучение (проф. д-р Иван Иванов)

Ф.№ it13_0110-imd

София

2015г.

1

Декларация на дипломанта

УНИВЕРСИТЕТ ПО БИБЛИОТЕКОЗНАНИЕ И ИНФОРМАЦИОННИ ТЕХНОЛОГИИ

ДЕКЛАРАЦИЯ

От Станислава Кирилова Ефтимова.................................................................................................................

(име, презиме и фамилия на студента)

Декларирам, че представената дипломна работа/магистърска теза е подготвена и изпълнена

самостоятелно от мен.

При откриване на плагиатство поемам съответната отговорност по смисъла на чл. 31 (1-3) от

Наредбата.

Дата:...05.10.2015г................. Подпис.................................

(дипломант)

2

Декларация за публикуване

УНИВЕРСИТЕТ ПО БИБЛИОТЕКОЗНАНИЕ И ИНФОРМАЦИОННИ ТЕХНОЛОГИИ

ДЕКЛАРАЦИЯ

От Станислава Кирилова Ефтимова.........................................................................................................

(име, презиме и фамилия на студента)

С настоящата отстъпвам х / не отстъпвам безвъзмездно право на УНИБИТ да публикува

представената моя авторска разработка (курсова работа, дипломна работа, магистърска теза) като

общодостъпен ресурс за безплатен публичен достъп чрез информационните системи на УНИБИТ.

Дата:.05.10.2015г.................. Подпис.................................

(дипломант)

Съгласен съм авторската разработка (курсова работа, дипломна работа, магистърска теза) да

бъде публикувана като общодостъпен ресурс за безплатен публичен достъп чрез информационните

системи на УНИБИТ.

Дата:............................ Научен ръководител .....................................

…………………………

(подпис)

3

РЕЗЮМЕ

Ефтимова, С. Създаване на UI за онлайн приложение за управление на семеен

бюджет. Научен ръководител проф. д-р Иван Иванов. С. 2015. Катедра

«Информационни системи и технологии». Магистърска програма

„Информационни технологии“. УНИБИТ.100 с. Брой източници – 30. Брой

приложения – 10.

Цел на магистърската теза e: Създаване на атрактивен и функционален UI на

приложение за управление на семейния бюджет.

Ключови думи са: уеб, приложение, финанси, бюджет, HTML, CSS, Javascript

4

Съдържание РЕЗЮМЕ .......................................................................................................................................................... 3

УВОД ................................................................................................................................................................. 5

I. Анализ на аналогични реални продукти ............................................................................................. 8

1.1 Калкулатор семеен бюджет - calculator.bg ........................................................................................ 8

1.2 Budgetpulse - budgetpulse.com .............................................................................................................. 13

1.3 Buxfer - buxfer.com ................................................................................................................................ 19

1.4 Clearcheckbook - clearcheckbook.com .................................................................................................. 23

II. Описание на проекта ....................................................................................................................... 29

2.1 Бизнес спецификация ........................................................................................................................... 29

2.2 Обща функционалност ........................................................................................................................ 32

2.2.1 Визия на приложението .................................................................................................................... 32

2.2.2 Форма за въвеждане на данни ........................................................................................................ 33

2.2.3 План за семеен бюджет .................................................................................................................... 36

2.2.4 Справки ............................................................................................................................................... 37

2.2.5 Инструмент Календар с напомняния ............................................................................................... 38

2.3 Допълнителни инструменти и препоръки ......................................................................................... 39

2.4 Административен панел ..................................................................................................................... 40

2.5 Използвани технологии ........................................................................................................................ 41

III. Реализиране на проекта .................................................................................................................. 42

3.1. Общо оформление на сайта ............................................................................................................... 42

3.2 Административен панел. .................................................................................................................... 54

3.2.1 Вход – страница Login.aspx. ............................................................................................................ 55

3.2.2 Форма за регистрация – страница Registration_form.aspx ........................................................... 59

3.2.3 Инструкции за употреба – страница Instructions.aspx. ................................................................ 62

3.2.4 Полезни връзки – страница Useful_links.aspx. ................................................................................ 63

3.2.5 Контакти – страница Contacts.aspx. ............................................................................................. 66

3.3 Основни екрани и функционалности ............................................................................................... 67

3.3.1 Въвеждане на данни – страница Main Page-data.aspx ................................................................. 67

3.3.2 План за семеен бюджет – страница ManageB.aspx ..................................................................... 74

3.3.3 Справки – страница Reports.aspx .................................................................................................... 78

3.3.4 Напомняния – страница Reminders.aspx ......................................................................................... 80

3.3.5 Калкулатори – страница Calculators.aspx ..................................................................................... 82

ЗАКЛЮЧЕНИЕ ............................................................................................................................................. 88

ИЗПОЛЗВАНИ ИЗТОЧНИЦИ ............................................................................................................................ 90

ПРИЛОЖЕНИЯ ................................................................................................................................................. 92

5

УВОД

Нарастващото влияние на глобализацията и формиращото се

информационно общество поставя нови изисквания към всички сфери на

социалния живот, включително и към домакинствата. Информационно-

техническата революция, разгръщаща се пред очите ни, определя движението на

съвършено нов тип общество – информационното, или както още го наричат,

общество на знанието. В съвременното информационно общество сме свидетели

на бързото развитие на човешката интелектуална дейност, в резултат на която се

получават уникални творчески резултати, продукти на персоналното творчество

и иновативността на човешкия индивид. Тук ключова роля играе средата на

индивида, тоест неговото семейството или домакинство.

Домакинствата са важен компонент на съвременното гражданско общество.

По пътя на развитие към информационно общество, изискванията към тях също

се повишават. Ускоряването на процесите за обработка на информацията и

придобиването на знания, предизвиква дълбоки качествени изменения във

всички сфери на живота. В съвременния динамичен свят съществува нещо, но

утре ще бъде създадено друго, много по-добро, много по-бързо и по-ефективно.

Затова може би едни от най-важните характеристики на съвременния свят са

интензивността, с която той се развива, глобализацията, динамичността на

процесите и непрекъснатата поява на нови технологии и открития. И точно тук е

важно предимствата, които този процес носи да се използват във всички сфери

на живота.

Съвременните домакинства се сблъскват с редица трудности в ежедневието

си. Много от тях произтичат от липсата или недостатъчността на средствата, с

които те разполагат. Използването на софтуерен продукт за управление на

малкия семеен бюджет, би могло значително да подобри финансовото състояние

на тези семейства. Много често недостатъчността на пари идва именно от

неправилното им разпределение и използване, от липсата на ясна представа къде

точно се изразходват най-много средства и къде те могат да се намалят.

6

В забързаното ежедневие хората нямат време да следят къде отива всяка

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

си и да ги разделя на категории, за да може да добие по-ясна представа за тяхното

изразходване. Хората могат например, да остават с впечатлението, че най-

голямото перо от бюджета са комуналните разходи, тъй като общите суми са

големи, заплащат се накуп и то всеки месец. Само че, след записване и

анализиране на потокът на парични средства, може да се окаже нещо съвсем

различно. Например, че по-голямата част от парите на семейството отиват за

осигуряване на храна или по-лошо, за на пръв поглед малки, но чести покупки,

на предмети, които не са от първа необходимост.

Използването на един леснодостъпен софтуерен инструмент за управление

на бюджета на домакинството, може да покаже реалната картина и значително

да подобри състоянието на финансите му. Добрата визуализация на отчетите от

месеца, чрез графики или чрез използването на различни цветове, ще даде ясна

представа на потребителя, за финансовите решения, които е взел през месеца и

за слабите звена в разпределението на разходите.

Много важен момент за тези приложения е тяхната визия и леснотата при

използването им. Потребителите към които са насочени, са хора с различни нива

на образование, икономически и информационни познания. Колкото по-сложен

е такъв продукт, толкова по-малък ще е кръгът на неговите потребители.

Именно липсата на такъв продукт на българския пазар, е основният мотив

за насочеността на настоящата магистърска теза.

Информационните технологии навлизат все по-бързо във всички аспекти на

съвременния живот. Използването им предоставя нови възможности, които

могат да бъдат добър помощник при разрешаване ежедневните проблеми на

потребителите, било то от битов или финансов характер. Този факт е безспорно

доказателство за актуалността на избраната темата.

Цел на разработката е създаването на атрактивен и функционален UI на

приложение за управление на семейния бюджет.

7

Задачите, които разработката си поставя са:

1. Да се проучат и анализират съществуващи продукти за подпомагане

управлението на семейния бюджет.

2. Да се определят техните основни предимсква и недостатъци.

3. На основа на направените изводи да се разработи продукт, подходящ за

българския потребител.

Обект на магистърската теза е потребителският интерфейс на

приложението за управление на бюджета.

Предмет е изграждането на функционален продукт, който да е ефективен

помощник при разпределянето на финансовите ресурси на семейството.

Подходът към постигане на поставената цел е намиране на подходящ

дизайн и възможна технология за реализирането му.

Методите, които са използвани са проучване, сравнителен анализ и

провеждане на тестове на софтуера, до определяне на най-подходящото решение.

При разработка на приложението са използвани актуални електронни

източници, предимно на английски език, като информационни сайтове, статии

и форуми. Това е обичаен подход в сферата на информационните технологии.

Крайният софтуерен продукт на разработката е предназначен за

средностатистическото българско семейство. Използването му няма да изисква

задълбочени финансови или технологични познания.

8

I. Анализ на аналогични реални продукти

1.1 Калкулатор семеен бюджет - calculator.bg

Един от най-опростените продукти, който може да бъде намерен в Интернет

е т.нар. калкулатор. Съществуват редица подобни калкулатори за различни

области – за изчисляване на разходите по кредит, за изчисляване на приходите

от инвестиция, за пресмятане на нетната работна заплата, дължимите

осигуровки, данък МПС, валутен калкулатор и дори калкулатори за пресмятане

на тегло и обем на храните.

Една от водещите дигитални медийни компании в България, подържа

специализиран сайт с разнообразен диапазон от подобни приложения. Xenium е

основана на 30.08.2007 г., като към момента месечният обхват на аудиторията й

включва 2,8 млн. уникални потребители, 38 млн. импресии. Xenium стартира с

малък екип от софтуерни специалисти - предприемачи и бързо израства като

компания. Днес хората са млади и образовани в областта, гъвкави и бързо

адаптивни към динамичния свят на дигиталните медии.

За 7 години на българския пазар Xenium успява да наложи 15 медийни

проекта, покриващи ключови сегменти сред потребителите на интернет. Сред

които са сайтове за култура и изкуство, за бизнес, финанси и право, образование

и наука, спорт и автомобили, кулинария и развлечения: Bmwpower-bg.net;

Bulevard.bg; Calculator.bg; Foods.bg; Hardwarebg.com; Kulinaria.bg; Mobile.de;

Mobility.bg; Nie-jenite.bg; Svejo.net; Termo.bg; Football24.bg

За своите клиенти Xenium предлага ефективност на рекламата чрез

индивидуални решения /брандинг, игри, видео/, подобряване на рекламата по

време на кампания, социален маркетинг и управление на Facebook групи с над 2

млн. фена, достъп до голяма аудитория и до нишови таргет групи, креативни

рекламни решения, придържане към установени световни стандарти. Медийната

философия на Xenium е основана на идеите за независимост, социална

отговорност и безпрекословно поддържане на свободата на словото. Компанията

отдава голямо значение на изкуството и духовните ценности.

http://www.calculator.bg/1/semeen_budjet.html

9

Калкулаторът за семеен бюджет е организиран в два основни раздела –

Доходи на домакинството и Разходи на домакинството. Всеки от тях изисква

въвеждане на данни на месечна база, като годишната стойност се изчислява

автоматично.

Доходите на домакинството от своя страна са разделени на осем категории

– от работна заплата, от пенсия, от предприемачество, от инвестиции, от

социални плащания, от лично стопанство, от продажба на собственост и други.

Фигура 1. Калкулатор за семеен бюджет – Доходи на домакинството

Разходите на домакинството са разделени на девет основни категории, в

следната последователност - Лично потребление. Храна и облекло, Жилище и

поддръжка на дома, Здравеопазване и осигуряване, Транспорт и съобщения,

Свободно време и образование, Данъци и такси, Влогове и инвестиции, Други

разходи. От потребителят отново се изисква въвеждане на месечните данни, а

годишните се изчисляват автоматично.

10

Фигура 2. Калкулатор за семеен бюджет – Разходи на домакинството

Отделните категории имат подробна част, в която могат да се въведат

детайлни данни. Например категорията Лично потребление. Храна и облекло е

разбита на шест подкатегории – храна и напитки, алкохол и тютюневи изделия,

облекло и обувки, издръжка на децата, други стоки и услуги, джобни.

Фигура 3. Калкулатор за семеен бюджет – Разходи на домакинството – категория

Лично потребление. Храна и облекло.

11

Непосредствено под калкулатора са поставени указания за неговото

използване. Те разясняват последователността на операциите, нужните стъпки за

извършване на изчисленията. Там където останат празни полета, калкулаторът

автоматично ги попълва. След въвеждане на входните данни в калкулатора и

натискане на бутона „Пресметни” се визуализира резултат, който показва:

• Общо доходи - за месец и за година

• Общо разходи - месец/година

• Разлика (резерв) - месец/година

При натискане на бутон "Подробности" се представя разбивка на разходите

по основни групи и какъв процент от бюджета заема всяка група.

Фигура 4. Калкулатор за семеен бюджет - подробности

12

Фигура 5. Калкулатор за семеен бюджет – резултат

13

Представеният продукт предоставя бърз и лесен начин за изчисляване на

семейния бюджет. От потребителя не се изискват специализирани знания в

областта на счетоводството и финансите. Основни негови предимства са

„customer friendly“ визуализацията, ясните и кратки указания, възможността за

избор на въвеждане на данните /подробно или общо/, подкатегориите от тип

„други“, които съществуват във всяка категория.

Недостатъци на продукта са липсата на сложни функционалности, липсата

на визуализация на резултатите под формата на графики и диаграми, както и

видимите с просто око грешки в изчисленията.

Като заключение може да кажем, че продуктът на фирма Xenium може да

бъде изключително полезен за българските потребители.

1.2 Budgetpulse - budgetpulse.com

Budgetpulse е създаден от екип специалисти, като безплатна онлайн

програма, която позволява управление на бюджета, чрез добре изграден

интерфейс и лесни за използване инструменти.

Една от добрите страни, подобряваща използването на приложението от

потребителите са дадените примери, за ситуации в които използването на този

продукт /или други като него/, биха били изключително полезни. Такива са

случаите, в които се купува нова кола, изплащане на студентски заеми,

намаляване на кредитните задължения, спестяване на средства за колеж, за нова

къща или за почивка. За придобиване на представа за използването и удобството

на приложението ще разгледаме подробно описанието на един от примерите, а

именно покупката на нова кола.

Важно е да отделите необходимото време, за да проучите покупката на

големи обекти. Поддържането на колата в продължение на много години и

изплащането на заемът за нея, колкото е възможно по-рано, са единствените

начини да си гарантирате, че сте получили максимална полза от изразходваните

14

пари. Но дори да е така, колата изисква постоянни разходи за поддръжка,

застраховки, данъци, затова е важно да се изчисли общата стойност на

превозното средство.

Първо трябва да се разбере какво всъщност можете да си позволи един

потребител. Използването на BudgetPulse означава, че ще може да се направи

предварителна оценка колко харчи потребителят днес и колко би харчили

следващият и по-следващият месец и т.н.. Знаейки средният си разход във всяка

една категория потребителят получава представа за областите, в които можете

да намалите разходите.

Освен това, така се получава и по-ясна картина за това дали изобщо е

възможно потребителят да си позволи изплащането на кола. След като

внимателно се прегледа бюджета може да се прецени реалната месечна вноска,

която може да отдели за тази покупка. Така на база на тази вноска и броят месеци,

които смята, че можете да я отделя, ще се даде представа за общата сума, която

потребителят е способен да платите за превозно средство.

Следващата стъпка е изчисляването на общата стойност на покупката,

включително текущите разходи. Освен цената, която е платена за колата, трябва

да се включат лихвите по заема, разходите за застраховка и данъци. Към общата

стойност трябва да се включат и регулярната смяна на масло, филтри, гуми,

чистачки и т.н. Ако навреме се направят необходимите проучвания, може да се

разбере колко наистина ще струва превозното средство месец за месец или на

годишна база. Докато колата ще губи от стойността си всяка година,

собственикът може да компенсира част от разходите си, чрез осигуряването на

съвестна поддръжка и рутинни грижи.

Последната стъпка е извършването на реалистична покупка. Всяка нова

кола загубва около 15-20% от стойността си в минутата, в която е изкарана от

автокъщата. Много пресметливи клиенти са на мнение, че покупката на

използвано превозно средство може да се окаже по-доброто финансово решение.

Ако използваната кола бъде проверена от доверен механик и ако бъде получена

цялата история на колата, купуването на употребяван автомобил често може да

15

е най-доброто решение. Лизингът има смисъл, само ако потребителят има

значителен разполагаем доход или когато някой друг плаща за него.

Реалистичната покупка включва първите две стъпки – да се осъзнае какво

точно може да си позволи купувача и каква е крайната цена на покупката.

BudgetPulse може да помогне в първата стъпка, а отношението и реалната

представа за ситуацията на потребителя, във втората. Реалистичната покупка

може да помогне в дългосрочната финансова картина.

За да бъде използвано приложението се изисква регистрация чрез валиден

е-майл адрес, както и съгласие с условията на ползване.

Фигура 6. Budgetpulse - регистрация

Потребителят получава е-майл за потвърждение и вече е готов да използва

приложението.

16

Фигура 7. Budgetpulse – първи стъпки

Друго предимство на приложението е възможността бързо и лесно да се

определят т.нар „спестовни цели“ за мечтания обект. Идеята е потребителят да

има възможността да направи изчисление за това дали може да си позволи

покупката на желан от него продукт или услуга и в същото време да получи

нужната мотивация.

Създаването на „спестовна цел“ ще го държи в течение относно неговия

прогрес и колко близо е той до желания резултат. Цветни графики ще показват

неговия спестовен прогрес и дали надвишава планираното време. Всичко е

организирано на едно място, така желаната цел да може да бъде постигната

навреме.

Използвайки лесния за употреба софтуер BudgetPulse, клиентът може да

управлява парите си, така че да намали своите дългове и едновременно с това да

продължи да спестявате за поставените цели. Всичко е интегрирано на едно

единствено място, което позволява на потребителя да управлява умело

17

финансите си и едновременно с това да се концентрира върху постигане на

крайните цели.

Спестовната цел може да бъде индивидуална или да изисква събиране на

пари от група хора. Предоставена е възможност тя да се запази поверителна или

да се получават директни постъпления от хората, на които е поискана финансова

помощ.

Който и път да бъде избран, това ще е първата стъпка към достигане до

мечтания смартфон, кола, пътуване, парти или каквато и да е друга желана цел.

BudgetPulse предоставя възможността да се събират плащания Paypal, Amazon

или и двете.

Фигура 8. Budgetpulse – спестовни цели

Друго предимство на приложението е публикуваното видео с инструкции и

обяснения. Това позволява на потребители, които срещат затруднения при

използването на приложението да получат реална картина на стъпките за работа.

18

Фигура 9. Budgetpulse – видео с инструкции

Освен това приложението разполага с инструменти за визуализация, под

формата на графики и диаграми. Например потребителят може лесно да

проследи движението на своите пари.

Фигура 10. Budgetpulse – проследяване на финансите

19

Фигура 11. Budgetpulse – финансови потоци

Като заключение може да кажем, че разгледания продукт е изключително

потребителски ориентиран, предоставя възможност за използването на редица

инструменти и всичко това безплатно. Освен това неговите създатели поддържат

и блог, който съдържа статии по актуални финансови въпроси.

1.3 Buxfer - buxfer.com

Според създателите на продукта, тяхната мисия е да помогнат на хората да

вземат по-добри решения за изразходване на средствата си. Те вярват, че няма

едно решение за всички проблеми, свързани с управлението на пари. Освен това

според тях добрият финансов мениджмънт не означава единствено генериране

на красиви графики. Добрият финансов мениджмънт трябва да се адаптира към

нуждите на потребителя, да дава контрол и гъвкавост за персонализиране според

личните нужди и да предоставя мъдри и реални съвети, за да помогне на

бъдещият финансов план.

Философията при изграждане на приложението е свързана с няколко

основни принципа - гъвкавост, но лесна употреба, мощни анализи и прозрения

20

относно паричните навици, предоставяне на навременни съвети за промяна на

поведението, окуражаване на проактивно планиране и поставяне на цели за

бъдещето.

Фигура 12. Buxfer – основна страница

Сред основните характеристики на приложението, според неговите

създатели е възможността за синхронизация. Банковите транзакции могат да

бъдат автоматично заредени в приложението, като се поддържат над 10 000

финансови институции по целия свят. Включително Bank of America, Wells

Fargo, Chase, American Express, Discover и много други. Освен това те гарантират

висока сигурност при процеса на синхронизация.

Форматът на банкови извлечения, които могат да се зареждат включва

Excel, MS Money и Quicken. Разработен е и инструмент за реконсилация на

извлеченията и ръчно въвежданите транзакции.

Друго предимство на продукта са инструментите за проследяване на

бюджета. Такива например са таговете /категория/, които могат да се добавят към

отделните транзакции. Няколко тага могат да се прикачат към една транзакция.

Предоставена е възможност да се създаде персонална структура, както и да се

направят автоматични настройки /правила/ за прибавяне на тагове към

транзакции.

21

Приложението притежава инструменти за разнообразна визуализация, както

на разходите, така и на приходите.

Този продукт може да бъде изключително полезен когато става въпрос за

планиране на бюджета и проследяване на изпълнението на плана. Инструментите

му позволяват да се направи предвиждане чрез текущо въвежданите данни, както

и да се определят очаквани бъдещи промени във финансите.

Изпълнението на плана може да бъде текущо проследявано. Тук

визуализацията отново играе съществена роля. Освен че разходите се разделят

по категории, всяко надвишаване на планирания бюджет се визуализира в

червено, за да напомни на потребителя да преразгледа изразходването на

средства в конкретната категория.

Подходящо е за използване от потребители с различен социален статус и

ниво на доходи, тъй като може да е еднакво полезно за намиране на вярното

темпо и степен на контрол на разходите. Получава се реална картина, която

стимулира правилната преценка и планиране, чрез маркиране на надвишените

разходи се подпомага процеса по осъзнаване на ненужни или непланирани

разходи, които могат да доведат до пасиви.

Фигура 13. Buxfer – финансови отчети

22

Фигура 14. Buxfer – проследяване на планирания бюджет

Продуктът притежава няколко интересни инструмента, които също могат да

бъдат изключително полезни за потребителите. Например напомняния за

плащания. Те могат да съдържат описание, крайна дата, настройки за честота на

аларма, сума, вид и други. Всички въведени напомняния могат да се проследяват

чрез календар.

Фигура 15. Buxfer – инструмент за напомняния

23

Фигура 16. Buxfer – списък с напомняния

Несъмнено разгледаният продукт притежава много предимства. Това, което

може да бъде определено като недостатък е, че пълната версия на приложението

е платена. Цената обаче е незначителна, на фона на ползите -парите, които могат

да бъдат спестени, благодарение на доброто управление на семейния бюджет.

1.4 Clearcheckbook - clearcheckbook.com

Clearcheckbook е изключително лесен начин за балансиране на разходите,

проследяване на „харчовете“, съставяне на бюджет, тоест лесен начин за

управление на финансите. При това онлайн приложение потребителя въвежда

касовите си бележки в сайта на продукта и ги свързва със сметка и към категория.

Освен това клиентът може да се върне назад към въведени вече транзакции и да

ги отбележи като разплатени. По този начин той винаги ще бъде наясно кои

разходи е изплатил на банката и с какви средства разполага.

Свързването на всяка транзакция към определена категория се използва са

генерирането на отчети, които могат да са изключително полезни при

управление на бюджета. Свързването към конкретна сметка позволява следене

на движенията само на ниво сметка.

https://www.clearcheckbook.com/

24

Регистрацията и използването на сайта са безплатни и изискват валиден e-

mail адрес. За употреба на допълнителни инструменти малки месечни суми се

заплащат.

Фигура 17. Clearcheckbook – основен екран

Създателите на web сайта са разработили специализирани приложения за

iPhone, iPad, Android и WebOS мобилни устройства. Тези приложения се

свързват директно със сайта, с което позволяват на потребителя да следи

финансите си по всяко време независимо къде се намира и с кое от тези

устройства разполага. Приложенията предоставят същите инструменти и

функционалности, както и оригиналния сайт на продукта.

Фигура 18. Clearcheckbook – устройства, чрез които може да се достъпи

25

Според създателите в на приложението в днешни дни управлението на

парите е по-важно от всякога. Хората се опитват да затегнат своите бюджети и

имайки мощен инструмент като този, те могат да следят всички свои разходи и

спестявания, чрез предоставените отчети.

На сайта на приложението е предоставено кратко описание на неговите

възможности и инструменти, чрез което потребителите да могат да добият

представа доколко то може да им бъде полезно и доколко отговаря на техните

лични нужди и изисквания.

Чрез първия таб от страницата Account Dashboard, потребителят може да

хвърли бърз поглед върху всеки аспект от неговите финанси. Може да добавя,

изтрива или премества различни джаджи, по същия начин, както на началната

страница на iGoogle. Тоест този таб може да бъде напълно персонифициран, по

начин, които потребителят предпочита.

Може да се направи всичко, от добавянето на транзакции, проверка на

баланса по чековата книжка/кредитната карта, да се разгледат различни отчети

или бюджетът, като цяло.

Фигура 19. Clearcheckbook – таб Account Dashboard

Следващият таб е Reports. Чрез него могат да се проследят разходите и

спестяванията. Ако потребителят иска да разбере къде отиват неговите пари, тази

секция на сайта може да помогне това да се случи по-много лесен и достъпен

26

начин. Потребителят може да избере отделна сметка или категория и да я

разгледа под формата на графика, диаграма или текстов отчет. По този начин

намирането на областите, в които могат да се намалят разходите, става

изключително лесно и като резултат може дори да се натрупат спестявания.

Фигура 20. Clearcheckbook – таб Reports

Следващата възможност, която това приложение предлага е балансиране на

чековата книжка. Чрез онлйн регистъра за чекови книжки, отделните транзакции

могат да бъдат маркирани като разплатени и по този начин потребителят винаги

ще знае точно колко пари има и за какво се е разплатил с банката.

Освен това има опция за калкулиране на общата сума разплатени и

неразплатени транзакции. По този начин клиентът никога няма да надвиши

средствата по своята сметка, а и ще може да провери дали банката отразява

коректно разплащанията.

Едно от предимствата на това приложение е следващият инструмент. Той

позволява да се създаде график и напомняния за бъдещи разплащания. По този

начин потребителят няма да забравя да плати навреме сметките си, освен това

той няма да е ангажиран да мисли за срокове и дати. Чрез регистрирането на

напомняне, когато дойде момента за плащане, клиентът ще бъде подсетен и няма

да пропусне крайния срок. Освен това тези напомняния могат да бъдат

27

използвани в планирането на бюджета, тъй като ще покажат на потребителя

какви сигурни разходи предстоят през идните месеци.

Фигура 21. Clearcheckbook – график на транзакциите и напомняния

Следващият инструмент е за проследяване на сметките. Той показва на

потребителя кога неговите сметки са просрочени и дали има предстоящи сметки

за заплащане. Инструментът съхранява и исторически данни за вече платените

сметки, което позволява на клиента да получи представа как те са се изменили

през времето. Дали са се повишили или са се намалили.

Друга функция на инструмента е опцията въведените в него данни да се

прехвърлят и автоматично регистрират като напомняния. А след като те бъдат

платени, също автоматично да се прехвърлят в регистъра на транзакциите.

Основна функция на приложението е определянето на лимит на разходите в

бюджета. Този лимит обаче, може да е както на ниво сметка, така и на ниво

категория или общо за бюджета. Веднъж определени, те могат да се редактират

по всяко време. Инструментът позволява и проследяване на развитието им във

времето, отново по категория, сметка или общо. Това е друг начин за

потребителя да добие представа в коя област може да намали разходите си и да

натрупа спестявания.

Други предимства на приложението са допълнителните инструменти.

Достъп до тях се получава след заплащането на малък месечен абонамент. Те

28

включват показване на работно салдо по сметките, автоматично архивиране,

история на транзакциите, персонализирани полета, история на лимитите,

свързването на няколко потребителя с една сметка, импортиране на CSV

файлове, преглед на отчети отпреди повече от 12 месеца.

В сайта на приложението са публикувани 2 видеа с представяне както на

основните инструменти, така и на допълнителните. Липсва обаче друга форма на

инструкции за употреба.

Фигура 22. Clearcheckbook – видео с инструкции

Представеният продукт разполага с редица функции, които могат да бъдат

изключително полезни за потребителя. Едни от основните му предимства са

възможността да се персонализира основният екран, както и да се разглеждат

исторически данни. Друга характеристика, която го отличава от останалите

продукти е определянето на лимити на разходите, по категория, сметка или общо

за бюджета. Като недостатък можем да отбележим цялостната визия на

приложението, която изглежда сложна и трудна за възприемане от обикновения

потребител.

29

II. Описание на проекта

2.1 Бизнес спецификация

Обща идея

След направен анализ на съществуващи приложения беше установено, че на

българския пазар липсва продукт, който да предоставя достатъчно възможности

на потребителите. Тенденцията за намаляване на финансовата култура на

населението, както и влошените икономически условия, предполагат нуждата от

разработване на приложение, което да помага в трудната задача за управление на

семейния бюджет.

Идеята на настоящият продукт е той да бъде създаден като безплатно web

приложение. Реализацията му ще бъде изцяло на български език, тъй като голяма

част от населението не знае или не се чувства удобно в употребата на английски

език. Целта е да се изгради опростен, лесен за използване продукт, който ще

разчита повече на ясната си визуализация, отколкото на сложни инструменти и

изчисления.

Всички данни в приложението ще се въвеждат ръчно от потребителите. С

това ще отпадне проблемът със сигурността при импортиране на реални

финансови данни /банкови извлечения от сметки и кредитни карти/.

Отговорност на клиента ще бъде коректното и редовно попълване на приходите

и разходите на домакинството.

Като резултат от изчисленията, на потребителя ще се предлагат различни

финансови решения. Като например предложение за намаляване на разходите в

дадена област или при наличието на свободни средства – предложение за

откриване на депозит, предсрочно погасяване на някои от кредитите или

връщане на дълг към приятели и роднини.

Освен спестяванията си, потребителят ще може да следи и дълговете си по

кредити, кредитни карти и други, като дългове към роднини и приятели. Ще се

създаде инструмент, който да позволява наблюдение на бъдещите вноски по

кредити или други предстоящи големи разходи. Естествено, за да може да се

30

възползва от предимствата на този инструмент, клиентът ще трябва да въведе

дата на събитието, описание и сума.

Към разработвания продукт няма да са налични допълнителни инструменти,

които да изискват заплащане на месечен абонамент. Всичко, което съдържа

приложението ще бъде достъпно безплатно, освен това инструментите ще бъдат

лесни за употреба, без да изискват каквито и да е било специализирани познания.

Към приложението ще бъде добавен материал с инструкции за употреба, под

формата на текст. В него ще се обяснят както основните стъпки за работа, така и

възможностите на инструментите на продукта. В отделна секция ще се

предоставят контакти на лицата, които поддържат сайта и към които могат да

бъдат задавани въпроси за неговото функциониране. Ще бъдат добавени и

линкове, към сайтове с финансова и друга полезна информация.

Предимства

Основно предимство на продукта ще бъде леснотата при неговото

използване. От потребителя няма да се изискват специални икономически и

счетоводни познания, нито пък високо ниво на владеене на съвременните

технологии. Въвеждането на данните ще става бързо, като ще е предоставена

възможност за коригиране, както на текущата, така и на предходна информация.

Друго предимство ще бъде структурата на продукта. Той ще е разделен на

два основни раздела – приходи и разходи. Сумите за приходите и разходите ще

са на месечна база или годишна база. Всеки от отделите ще съдържа отделни

категории, като за създаването им ще бъдат взети под внимание както добрите

световни практики, така и характеристиките на местното потребление. Във всяка

категории ще има и секция от типа „други“, която да позволява въвеждане на

непредвидена от разработчика информация.

Всички приходи и разходи ще се въвеждат в зависимост от предпочитанията

на потребителя – на месечна или на годишна база, като е предвидено

31

автоматично изчисляване. Тоест, ако клиент въвежда сумите, като месечен

приход или разход, годишната величина ще се изчислява едновременно с това.

Ще се създадат функционалности за изчисляването на редица справки. Те

ще дават ясна и красноречива представа на потребителя, за движението на

неговите пари. Към тях ще бъдат налични и цветни графики, чрез които още по-

категорично да показват финансовата картина на бюджета. Например, основите

източници на приходи или главната насоченост на разходите. Допълнително,

като резултат от изчисленията, на потребителя ще се предлагат финансови

решения, който могат еднозначно да насочат домакинството към едно по-

ефективно управление на семейният бюджет.

Приложението ще поддържа исторически данни. От началото на

регистрация до момента. Като ще бъде възможно въвеждане и на информация за

предходни месеци. Промяната на месеца и годината, за които клиентът иска да

попълни своите приходи и разходи, ще става максимално лесно, след избор от

падащо меню.

Ще се предостави възможност за планиране на финансовите потоци през

бъдещите месеци. По този начин потребителят ще може да добие представа до

какъв финансов резултат ще доведат приходите и разходите, които той смята, че

ще има през конкретния месец. Получавайки подобна информация, той ще може

да вземе обосновано решение за промяна в една или друга част от бюджета. След

въвеждане на реалните данни, приложението ще визуализира разликата с плана.

Било то положителна или отрицателна. За засилването на потребителското

възприятие, минусовите суми ще са оцветени в червен цвят.

Едно от най-големите предимства на продукта ще бъде фактът, че той ще е

напълно безплатен и няма да изисква нищо повече от регистрация с валиден e-

mail адрес. Дори няма да се изисква потвърждение след получаване на писмо по

електронната поща.

32

2.2 Обща функционалност

2.2.1 Визия на приложението

Настоящият продукт ще се разработи като опростено web базирано

приложение, което ще бъде с приятен и интуитивен интерфейс. Целта му е на

българския потребител да се предостави софтуерен продукт за управление на

семейния бюджет, което да е лесно за употреба и да не изисква специфични

икономически или технически знания и умения. Частта, която обхваща

регистрацията с e-mail, както и записването в база данни е предмет на отделен

проект и ще бъде специфицирана отделно. Текущото описание ще обхване

клиентската страна, web дизайна на приложението, както и описание на

допълнителните инструменти и функционалности, който могат да се използват

от клиентите.

Спецификацията ще бъде условно разделена на 3 части. Първата ще обхване

визията и формите за въвеждане на данни от потребителя, както и самият дизайн

на приложението. Втората част ще съдържа функционалностите при изчисления

и въвеждане на данните. Третата ще описва допълнителните инструменти, които

клиентът може да използва за по-добро управление на своя семеен бюджет.

Спецификацията ще представи визията на продукта, без да се стреми към

изчерпателност. В процеса на изработване на приложението ще се навлезе в

детайлите на изпълнението. Освен това могат да настъпят изменения в

първоначално описаната функционалност, които да произтичат от по-добри идеи

или намирането на по-добри практики за реализацията на подобни софтуерни

продукти.

Накратко ще бъдат описани и технологиите, които ще се използват

при създаване на продукта, без да се навлиза в детайли относно техните

възможности и специфики.

33

2.2.2 Форма за въвеждане на данни

Формата ще се визуализира на основния екран на приложението. Тя ще

бъде разделена на 2 основни секции – Приходи и Разходи. Секция Приходи ще

бъде разположена в ляво и ще заема половината от отворения екран. Ще съдържа

списък с източници на приход. В дясно от тях ще са разположени полетата,

отворени за попълване на данни от потребителя.

В секцията Приходи потребителят ще има възможност да въвежда

информация за месечните си или годишни постъпления. Като при въвеждане на

месечните, годишните ще се изчисляват и визуализират автоматично. Това ще

едновременно с попълването на данните.

Ще се реализира и обратната функционалност, тоест при въвеждане на

годишните данни, месечните ще се изчисляват и визуализират автоматично.

Приходите ще бъдат разделени на няколко основни категории:

- Приходи от трудов договор;

- Приходи от бонуси;

- Приходи от граждански договор;

- Приходи от пенсия;

- Приходи от социални плащания;

- Приходи от наеми;

- Приходи от лихви;

- Приходи от инвестиции;

- Приходи от продажба на собственост;

- Други;

Всички данни трябва да се въвеждат в BGN, с точност до два знака след

десетичната запетая. При приходи в друга валута, потребителят ще може да

използва Валутен калкулатор, който ще е достъпен на отделна страница в


34

Секция Разходи ще бъде разположена в дясно на основния екран и ще заема

половината от него. Имената на полетата ще са описани по същия начин , както

при секция Приходи, като клиентът отново ще има възможност да въвежда

информация за месечните или годишни си плащания. Като при въвеждане на

месечните, годишните ще се изчисляват и визуализират автоматично,

едновременно с попълването на предишните. Както и обратното, при въвеждане

на годишните данни, месечните ще се изчисляват и визуализират автоматично.

Категории в секция Разходи ще са:

- Разходи за наем;

- Разходи за изплащане на жилище;

- Разходи за сметки към жилището;

- Разходи за храна;

- Разходи за облекло;

- Разходи за здравеопазване;

- Разходи за допълнително осигуряване;

- Разходи за Транспорт;

- Разходи за образование;

- Разходи за домашни любимци;

- Разходи за хоби и свободно време;

- Вноски по кредити;

- Данъци и такси;

- Други разходи;

Използването на тази функционалност от приложението няма да изисква

нищо повече от въвеждане на данни, съгласно избраната от потребителя времева

база. Няма да се изисква дори регистрация с e-mail, ако желанието на клиента е

единствено да получи елементарни изчисления на приходите и разходите в

семейния бюджет.

35

Калкулирането ще се осъществява след използване на бутон „Пресметни“,

разположен в долния десен край на основния екран. Резултатът от изчисленията

ще се визуализира в отделно поле, под формата за въвеждане на данни. Той ще

бъде опростен и лесен за възприемане.

Резултатната секция ще съдържа следната информация:

- Обща сума на Месечните приходи;

- Обща сума на Годишните приходи;

- Обща сума на Дневните разходи;

- Обща сума на Месечните разходи;

- Обща сума на Годишните разходи;

- Разлика Приход/Разход на месечна база;

- Разлика Приход/Разход на годишна база;

- Най-голямо перо в разходите;

След генериране на определен резултат, потребителя ще може да извърши

корекции във въведените данни и по този начин да получи представа как лекото

намаляването на разхода в дадена категория, би се отразило на цялостната

картина. Или да провери до какъв резултат би довело взимането на кредит за

придобиване на желана покупка. Как размерът на месечната вноска ще се

отразила на семейния бюджет.

Възможен и другият вариант. Потребителят лесно ще разбере какво би

станало със семейния бюджет, ако бъдат увеличени приходите, с малка или по-

голяма месечна сума. Например, след инвестиция в допълнителна образователна

квалификация.

По този начин, без използването на допълнителни инструменти, клиентът

ще може да експериментира с движението на финансовите средства на

семейството и да придобие реална визия, до какво би довела всяка една промяна,

било то и на пръв поглед малка.

36

2.2.3 План за семеен бюджет

Един от основните инструменти на приложението ще бъде Планът за семеен

бюджет. Той ще може да се използва след регистрация.

Категориите за приходи и разходи на тази страница ще бъдат същите, както

в първоначалния екран, но клиентът ще има възможност да избере дали иска да

планира своя бюджет или да въведе реални данни. Чрез падащи менюта ще се

посочват конкретен месец и година, за които се отнася информацията. Няма да

се налага ограничение на времевия период, когато става въпрос за реални данни,

но първоначално приложението ще бъде разработено с възможност за избиране

на месеци от началото на 2010г. до края на 2021г.

Относно планирането, на клиентът ще се предоставя възможност за

планиране само на месеци, последващи текущия След генерирането на плана,

потребителят ще има възможност да променя информацията. Например да

увеличи размерът на очакваните разходи в някое перо или обратното, да ги

намали. Корекции обаче ще могат да се правят само преди настъпване на месеца,

за който е изготвен плана. Като това ще се постига чрез повторно избиране на

същият месец и година и повторно нанасяне на съответните данни.

Веднъж генериран, планът остава в базата данни на потребителя и може да

бъде преглеждан във всеки един момент, чрез специално създадена справка.

Основен обаче ще бъде планът за текущият месец. Когато потребителят избере

да въведе реалните разходи за текущия месец, автоматично изчисляване ще

предоставя информация за текущото състояние на бюджета, спрямо планираното

/като положителна или отрицателна разлика/.

Тоест ако за определен месец, в секция Разходи за облекло, са планирани

500 BGN и към средата на месеца потребителят е въвел реално изразходвани 200

BGN, в дясно от полето в актуалния план, ще се визуализира разликата – в случая

300 BGN. Ако резултатът е отрицателен, той ще бъде оцветен в червено, за да

покаже на клиента, че той е вече е надвишил планираната сума и трябва да

преосмисли разходите си за месеца.

37

2.2.4 Справки

Следващият основен инструмент на приложението ще бъдат справките.

Те ще са в отделна секция, тоест на отделна страница. Тяхното използване

също ще е възможно само след регистрация за употреба на продукта, както и след

наличието на въведени реални данни за поне един календарен месец. Изборът на

конкретна справка ще става чрез чек бутони, като ще са изброени всички

възможности.

Страницата ще съдържа разнообразни справки, като визуализацията им ще

бъде под формата таблица. Целта им е потребителят да може да получи визуална

представа за движението на неговите финанси. Понякога представянето на

цифровите данни под формата на многоцветна графика води до по-дълбоко и по-

цялостно възприемане на информацията. Тъй като се очаква потребителите на

приложението да бъдат с различна степен на образовани, социален статус и

икономически познания, този тип представяне на данните може да бъде

изключително полезен и да изпълни една от основните цели на приложението. А

именно по-доброто осъзнаване и управление на средствата на семейния бюджет.

Поради тази причина ще се добавят и графични изображения.

Справките отново ще могат да бъдат генерирани на месечна или годишна

база, като това ще зависи изцяло от избора на клиента, чрез падащите менюта. За

дневните разходи, такива не са предвидени. Ще могат да се генерират справки за

приходите, за разходите или общо балансово състояние на семейния бюджет.

За генерираните от потребителите справки няма да се записва информация

в базата данни. Това е така, тъй като към всеки един момент ще е възможно

повторното им създаване и затова няма необходимост за тяхното съхраняване.

По желание, клиентът може да пренесе резултатът на своето локално устройство,

при което няма да е необходимо повторно генериране чрез приложението.

38

2.2.5 Инструмент Календар с напомняния

Друг инструмент на приложението, който е считан за основно предимство

са така наречените Напомняния или Календар с напомняния. Те ще са

разположени на следващия страницата от приложението. Ще се достъпни след

регистрация на потребителя.

Основната цел на този инструмент ще е на клиентът да се предостави

възможност за въвеждане на очаквани бъдещи разходи, датата за плащане, както

и техния размер. По този начин едновременно ще бъдат постигнати няколко

резултата.

На първо място, в деня предхождащ плащането, както и в текущият ден, на

потребителят ще се визуализира напомняне /аларма/, което да го подсети за

изтичащият срок. Това напомняне може да бъде създадено чрез ръчно въвеждане

на необходимите данни от потребителят, като от него ще зависи какви детайли

за напомнянето ще се визуализират. Само текст с описание, сума или някаква

допълнителна детайлна информация, която клиентът смята за важна.

Напомнянията ще са полезни не само за финансови цели, но и за лични

такива. Например, регистриране на събития като рождени дни, годишнини или

други празници. Необходимо условие обаче, ще е попълването на поле „сума“,

било то с фиктивна цифра.

Въвеждането на ново напомняне ще става изключително лесно - чрез избор

на дата от приложения календар и посочване на конкретните параметри. При

създаване на събитие ще може да се посочи еднократно съобщаване или

повторение във времето на месечна или годишна база, като се въведе брой на

желани напомняния.

Друго предимство на този инструмент е, че прегледът на предстоящи

събития ще е лесно достъпен. Необходимо ще е единствено избиране на

конкретна дата от календара. Всички събития, свързани с тази дата, ще се

визуализират в долната част на екрана.

39

2.3 Допълнителни инструменти и препоръки

Към приложението ще се разработят и няколко допълнителни инструмента,

който да подпомагат управлението на семейният бюджет.

Такива ще са:

- Стандартен калкулатор;

- Валутен калкулатор;

- Кредитен калкулатор;

- Депозитен калкулатор;

Последните два инструмента ще предоставят допълнителни

функционалности на потребителите. Чрез използването например на кредитния

калкулатор, клиентът може да въведе условията по текущите си задължения и да

изчисли оставащият срок и размерът на вноските. След като направи това, той

има опцията да се съхрани тази информация в индивидуалната си база данни. По

този начин ще се реализират два резултата – автоматично въвеждане на

бъдещите вноски в планирания бюджет, както и динамично съхранение на

главницата по кредита.

Подобно приложение ще има и Депозитният калкулатор. След съхраняване

на данните в индивидуалната база данни, потребителят ще може да получи

текуща информация за натрупаните спестявания.

Тези инструменти могат да намерят приложение и в препоръките, които

потребителят получава относно управлението на семейния бюджет. Тези

препоръки ще се генерират при приключване на месец, за който предварително

е създаден план. Такава препоръка би могло да бъде предложението за

предсрочно погасяване на кредит, като на клиента се покаже до какво ще доведе

това или пък предложение за отделяне на по-голяма сума към спестяванията,

като потребителят получи представа за новата по-голяма лихва, която

ежемесечно ще де добавя към неговите приходи.

40

2.4 Административен панел

Административният панел ще е разположен от двете страни на екрана и ще

съдържа няколко важни елемента, подредени вертикално един под друг.

Първият от тях ще е Вход – той ще предоставя връзка със страницата за

влизане в системата. При успешна автентикация в неговото пространство ще се

визуализира потребителското име на клиента, както и бутон за изход от


Вторият ще е Форма за регистрация. В него ще се изисква въвеждане

информация за потребителя, както и e-mail адрес, който в последствие ще служи

като потребителско име. След посочване на парола за достъп и потвърждение на

регистрацията, данните за потребителя ще се записват в базата данни на

приложението. Тази регистрация ще предоставя достъп до всички инструменти

на приложението.

Следващият елемент ще съдържа инструкции за употреба на продукта. Те

ще са в текстови формат и ще са разделени на няколко секции – за основната

форма, за основните инструменти, за допълнителните инструменти. Ще са

предоставени и няколко примера за улеснение на потребителите. Няма да има

инструкции под формата на видео.

Четвъртият елемент ще съдържа информация за лицата, които поддържат

сайта и към които следва да се задават въпроси за неговото използване. Ще се

посочват и e-mail адреси за връзка.

В последната част от административния панел ще бъдат посочени други

сайтове с информация, която би била полезна на потребителите на


41

2.5 Използвани технологии

За разработката на клиентската страна на приложението ще се използват

следните технологии:

- HTML - стандартна технология за разработване на уеб сайтове и онлайн

приложения. Тя в комбинация с Javascript и CSS предоставя възможност за лесно

и бързо създаване на динамично съдържание, което се изпълнява на клиентската

страна;

- CSS – технология за стилизиране на HTML. Предлага разнообразни

възможности и непрекъснато бива допълвана и подобрявана;

- JavaScript – клиентски скриптов език, предназначен за работа с HTML

елементи. Може лесно да бъде интегриран със сървърна обработка, в лицето на

C Sharp;

- ASP.NET – технология, която позволява интеграция между

горепосочените технологии с бази данни и сървърна обработка, от типа на C

Sharp;

42

III.Реализиране на проекта

3.1. Общо оформление на сайта

Добра практика при стартирането на всеки ИТ проект е предварителното

планиране на работата, стъпка по стъпка, както и определянето на крайни цели и

времеви периоди за изпълнение. Изграждането на уеб сайт не прави изключение,

но поради специфичните характеристики на този тип разработки, не винаги е

възможно това да бъде направено.

Много често например, клиентът не знае какво точно очаква като краен

резултат или надгражда първоначалните си изисквания, по време на процеса.

Друг вариант е самите изпълнители да променят дизайна или

функционалностите, поради нови идеи, възможности или проблеми. Въпреки

това, един от задължителните елементи при изработката на подобен продукт е

изясняването на първоначалния дизайн или поне очертаването на неговата

структурна форма. Тоест определянето и изграждането на разделите /секциите/

на основната страница и мястото, където ще бъдат позиционирани

допълнителните страници.

Поради тази причина, разработката на настоящото приложение започва с

изграждане първо на рамката, а след това и на съдържанието на основната

страница /т.нар. Master Page/.

За да бъде осигурено реализирането на специфичния дизайн на

приложението, основният елемент body е стилизиран. Приложено е селектиране

по елемент:

body { -webkit-perspective:2000px; perspective:2000px; -moz-perspective:2000px; background-image:url('/Images/backg.gif'); background-repeat:no-repeat; background-size:100%;

}

43

Изпълнението на рамката е решено чрез div - ID greenboard. Който от своя

страна също е стилизиран, но чрез селектиране по ID:

#greenboard { border: 20px solid; border-image: url('/Images/board.gif') 30% round; margin: 0px; top: 0px; left: 0px; position: absolute; box-sizing: border-box; width: 100%; background-color: #006427;

}

Рамката на елемент „greenboard“ служи и за визуална рамка на целия сайт.

За основен цвят на приложението е избран „#006427“ /нюанс на зелено/.

За съхранението на изображенията от горните две стилизации, както и за

всички които ще бъдат използвани впоследствие, в проекта е създадена отделна

папка - Images.

Данните за CSS са изнесени в отделен файл „StyleSheet.css“. Връзката към

него е посочена в head частта на сайта:

<link type="text/css" rel="stylesheet" href="StyleSheet.css" />

В head частта е поставено и заглавието на приложението:

<title>ПОМОЩНИК ЗА ТВОЯ СЕМЕЕН БЮДЖЕТ</title>

След като основната форма е постигната, предстои разделяне на главната

страница на секции. В тях ще бъдат разположени отделните части на

приложението – административен панел, потребителско меню, съдържание на

страниците. За целта са използвани 5 елемента:

- aside ID menu_left – разположено е в лявата част на екрана и заема 13% от

ширината и 100% от дължината на формата. Ще се използва за

позициониране на основната част на административия панел.

44

- aside ID menu_right – разположен е в дясната страна на екрана и отново

заема 13% от ширината и 100% от дължината на формата. В него ще се

постави спомагателната част на административния панел.

- div ID menu_top – намира се в горната централна част на екрана. Заема 74%

от ширината и 10% от дължината на div greenboard. Както става ясно от

наименованието на елемента, той ще съдържа основното потребителско

меню.

- div ID content – в този div ще се визуализира съдържанието на

допълнителните страници на сайта. Тоест в него се намира

ContentPlaceHolder1. Той заема 74% от ширината и 80% от дължината на

формата. Разположен е в средата на страницата.

- footer ID ft – това е последната основна секция, която се намира в долната

централна част на страницата. Размерът ѝ е аналогичен на основното

потребителско меню. В него ще бъдат поставени два елемента. Линк към

сайта на Университет по библиотекознание и информационни технологии,

както и картинка, чрез която ще се извършва част от дизайнерската

функционалност на приложението.

Фигура 23. Подреждане на основната страница, чрез div елементи

Така изброените елементи са стилизирани чрез селектиране по ID, като

размерите и характеристиките им са определени, съгласно резултати от тестване

на приложението в три браузъра:

- Google Chrome;

- Internet Explorer;

- Mozilla Firefox;

45

Освен това стремежът е да се запазят формите на рамката на сайта, както и

на изображенията. Тоест промяната в размера на страниците да води до

минимално изменение в потребителското възприемане. Поради тази причина на

отделните секции е даден размер в проценти.

Стилизация на основните елементи:

#menu_left{ width:13%; height:100%; margin-top:5%; margin-bottom:1%; float:left; background-color:#006427; }

#menu_right{ width:13%; float:right; background-color:#006427; margin-top:5%; }

#content{ width:74%; height:80%; float:left; background-color:#006427;

}

#menu_top { width: 74%; height: 10%; margin-top:2%; background-color: #006427; float: left; }

#ft{ height:10%; width:74%; background-color:#006427; margin-left:300px; margin-right:20px; float:left; margin-bottom:15px; }

46

Представен графично, сайтът ще притежава следната структура:

Фигура 24.Структурно изображение на приложението

Следващата стъпка в разработката представлява създаване и подреждане на

елементите в двете основни менюта на сайта – административно и

потребителско.

Административното меню е разделено на две части, разположени в лявата и

дясната част на екрана. Причината за това е характеристиката на отделните

връзки, които ще бъдат поставени в него. Лявата част, която визуално попада по-

често пред погледа на потребителя, ще съдържа основнител. Това са „Вход“,

„Форма за регистрация“ и „Инструкции за употреба. В дясната част ще бъдат

поставени две допълнителни връзки, към страниците „Контакти“ и „Полезни

връзки“. Тъй като посещаването на тези линкове не е задължително и

потребителят може да използва приложението без никога да отвори

съдържанието им, те са поставени така че да не заемат пространство в основната

част на сайта.

Двете странични менюта са стилизирани аналогично, като за целта са

създадени следните класове. Първият от тях - „sticky“ ще бъде използван за div

елементите, а вторият „leftmenu“ за линковете поставени в тях:

47

.leftmenu { color: #0d0d0d; font-size: 18px; font-family: 'Buxton Sketch'; font-weight: normal; font-style: normal; background-color: transparent; border-color: transparent; margin-top: 40px; margin-left: -30px; text-align: center;

}

a.sticky { background-image: url('/Images/stickynote.gif'); width: 150px; height: 150px; margin-left: 1%; float: left; background-color: #006427; text-decoration:none; }

a.sticky:link { background-image: url('/Images/stickynote.gif'); width: 150px; height: 150px; margin-left: 1%; float: left; background-color: #006427; text-decoration:none; } a.sticky:hover { background-image: url('/Images/stickynote1.gif'); width: 150px; height: 150px; margin-left: 1%; float: left; background-color: #006427; } a.sticky:active { background-image: url('/Images/stickynote2.gif'); width: 150px; height: 150px; margin-left: 1px; float: left; background-color: #006427; }

Една от основните цели, към които приложението се стреми е изчистен и

опростен дизайн, който да подпомага работата на потребителя, а не да го

натоварва с цветни и движещи се изображения. Тъй като идеята на сайта е той да

бъде използван като помощник при изчисляване на семейния бюджет, основната

публика към която е насочен са средно статистическите български семейства.

Така, предполагаемата възраст на потребителите изключва децата, чиито

предпочитания са за ярки движещи се картинки.

48

Поради тези причини, приложението е изградено с опростен, но все пак

нестандартен дизайн. Включени са промени в изображенията, която да направи

сайта привлекателен за потребителите. Първата от тях е постигната чрез

използването на 3 близки, но различни картинки. Всяка от които, се прилага в

зависимост от събитието. Това е постигнато чрез използването на псевдо класове

- :link, :hover; :active.

Мишката е извън пространството на div елемнта /:link/;

Мишката е върху div-a /:hover/;

Мишката е върху div-а с натиснат ляв бутон /:active/;

Визуалният ефект е изваждане и връщане обратно на червеното пинче, което

раздвижва дизайна на приложението. Използване е една и съща картинка, която

е обработена чрез Photoshop. Така се постига липса на разминаване в размерите

или цветовете на изображенията и гладко преминаване между тях, което създава

илюзия за плавно движение.

След създаване на класовете се пристъпва към изграждане на менюто с

връзки към допълнителните страници. Петте елемента от административния

49

панел са с последователни ID-та– sticky1, sticky2 и т.н., както и с аналогичен

дизайн.

<a href="Registration_form.aspx" class="sticky"> <div id="sticky2" > <div class="leftmenu"> Форма за <br /> регистрация </div> </div>

</a>

По този начин е постигнато визуално отделяне на съществената

съдържателна част на приложението от менютата. За целта допринасят

разположението и дизайна на основното потребителско меню. Както беше

посочено по-горе, то е разположено в горната централна част на екрана. Отново

е изградено от 5 аналогични елемента. Така се постига симетрия във визуалното

представяне на сайта. Използван е бял цвят, което допринася за получаването на

по-изчистен и ненатрапчив вид. Освен това представя и идеята за писане с бял

тебешир, която е част от дизайнерската визия на приложението.

Фигура 25. Дизайн на елементите от потребителското меню

Елементите са стилизирани чрез прилагането на два класа:

.topmenu { color: #fff; font-size: 20px; font-family: 'Buxton Sketch'; font-weight: normal; font-style: normal; background-color: transparent; border-color: transparent; margin-top: 18px; margin-left: -50px; text-align: center; }

- използва се за оформление на текста;

.chalk:link { background-image: url('/Images/chalk2.gif');

width: 180px; height: 100px;

float: left; background-color: #006427; text-decoration: none;

}

50

a.chalk:hover { background-image: url('/Images/move_chalk.gif'); width: 180px; height: 100px; float: left; background-color: #006427; text-decoration: none; } a.chalk:active { background-image: url('/Images/chalk1.gif'); width: 180px;

height: 100px; float: left; background-color: #006427; text-decoration: none;

}

- използва се за оформление на div-овете, като отново са приложени псевдо

класове. Чрез тях се постига промяна в елементите и визуално раздвижване на

сайта. Като допълнение картинка „move_chalk.gif'“ представлява подвижно

изображение:

Фигура 26. Подвижно изображени в потребителското меню

Целта при избора на тази техника е да се покаже разнообразието от

възможности, при изработката на уеб сайт.

Друг вариант тук е използването на CSS3 animations1. Недостатък обаче е

поддържането на анимацията само от някои и то по-нови версии браузъри, както

и необходимостта от различно дефиниране при Explorer, Chrome, Firefox и т.н.

Тоест:

animation

-webkit-animation

-moz-animation

1 Технологията е подробно описана в сайта на w3schools - www.w3schools.com/css/css3_animations.asp/.

51

Последният псевдо клас се прилага когато мишката е поставена върху div-a

и е с натиснат ляв бутон. На екрана остава следното изображение:

Фигура 27. Прилагане на псевдо клас a.chalk:active

В потребителското меню ще бъдат поставени връзки с основните

съдържателни страници на „Помощник за твоя семеен бюджет“. А именно -

„Въвеждане на данни“, „План за семеен бюджет“, „Справки“, „Напомняния“ и

„Калкулатори“. Първата и последната от тях ще могат да бъдат използвани от

всеки потребител, докато останалите три, само след предварителна регистрация.

Съдържанието и функционалностите на всяка една от страниците ще бъдат

разгледани подробно в точка 3.3. от настоящата разработка.

Последният елемент от дизайна на основната страница е т.нар. „footer“.

Както беше споменато по-горе, в него ще бъдат разположени два елемента.

Първият представлява линк към сайта на Университет по библиотекознание и

информационни технологии:

<a class="usefullinks" href="http://www.unibit.bg/" target="_blank">ДИЗАЙН -

УНИВЕРСИТЕТ ПО БИБЛИОТЕКОЗНАНИЕ И ИНФОРМАЦИОННИ ТЕХНОЛОГИИ </a>

Стилизиран е чрез новосъздаден клас и псевдо класове:

.usefullinks { margin: 0px; color: #0d0d0d; font-size: 20px; font-family: 'Buxton Sketch'; font-weight: normal; font-style: normal;

} a.usefullinks:link {

margin: 0px; color: #0d0d0d; font-size: 20px; font-family: 'Buxton Sketch'; font-weight: normal; font-style: normal;

}

52

a.usefullinks:hover { margin: 0px; color: #fff; font-size: 20px; font-family: 'Buxton Sketch'; font-weight: normal; font-style: normal;

}

Визуалният ефект е промяна в цвета на надписа, при позициониране на

курсора върху текста и отместването му встрани.

Вторият елемент е изображение, към което има приложени две функции:

<img src="Images/sponge.gif" onclick ="move_board2()" onmouseover="move_board()" />

<script>

function move_board() { document.getElementById("greenboard").style.WebkitTransform = "rotateY(0deg)"; document.getElementById("greenboard").style.transform = "rotateY(0deg)"; document.getElementById("greenboard").style.mozTransform = "rotateY(0deg)"; } function move_board2() { document.getElementById("greenboard").style.WebkitTransform = "rotateY(45deg)"; document.getElementById("greenboard").style.transform = "rotateY(45deg)"; document.getElementById("greenboard").style.mozTransform = "rotateY(45deg)";

}

</script>

Използван е Javascript, като целта е завъртане на елемента „greenboard“ с 45

градуса, при събитието „onclink“ и връщането му в начална позиция, при

събитието „onmouseover“. Трансформацията на елемента се извършва

посредством замяна на приложения CSS клас.

Поради различната поддръжка в отделните браузъри са дефинирани:

WebkitTransform – работи за Google Chrome;

Transform – за Internet Explorer;

mozTransform – за Mozilla Firefox;

Поради същата причина са използвани и три отделни дефиниции към

елемента „body“:

-webkit-perspective;

perspective;

moz-perspective;

53

Целта е div „greenboard“ да бъде завъртян в перспектива. Слeд което пред

потребителят да се открие фоновото изображението. По този начин дизайнът

цели завършване на цялостната идея на приложението. А именно – стая със

зелена учебна дъска, пред която семейството се събира, за да разгледа и обсъди

бюджета си. Връщането към училище може да бъде оригинален начин за

разрешаване на финансовите проблеми на порасналите деца. Свежите цветове на

приложението целят да подсилят усещането за игра и развлечение. Понякога

сложните задачи могат да бъдат решени значително по-лесно, когато са

представени като забавление. Тази техника навлиза все по-бързо в съвременните

компании. Известна е като „gamefication“.

След завършване на „footer“-а, основната страница на сайта изглежда по

следния начин:

Фигура 28. Основна страница на приложението

54

При завъртане на зелената дъска:

Фигура 29. Скрита функционалност на сайта

Това е и последната стъпка от изграждане формата на сайта. Следва

съставяне и стилизиране на отделните страници към административното и

потребителско менюта.

3.2 Административен панел.

Както беше описано по-горе, административното меню ще бъде разделено

на две симетрични части. Те ще са поставени в лявата и дясната част на екрана,

като приложените към тях стилове са аналогични.

Менюто ще се състои от следните 5 страници:

- Вход;

- Форма за регистрация;

- Инструкции за употреба;

- Полезни връзки;

- Контакти;

В следващите точки всяка от тях ще бъде разгледана подробно.

55

3.2.1 Вход – страница Login.aspx.

Това е основна страница, която ще бъде използвана за връзка с базата данни

на приложението. Естествено, ще е необходима само за предварително

регистрирани потребители. Общата идея на сайта е той да може да се използва

от всеки, но голяма част от функционалностите ще са достъпни само след

регистрация. По този начин се цели стимулиране на редовното използване на

приложението, което е много по-полезно при наличието на потребителски

профил. Създаването на навик в потребителите да следят финансите си

ежемесечно може да спомогне значително за управлението на техния бюджет.

Наличието на исторически данни и възможността за планиране, също ще

допринесат за добиването на по-ясна представа за състоянието на семейните

парични средства.

Страницата е реализирана чрез изграждането на основен div елемент, който

ще бъде стилизиран чрез селектиране по ID:

#login_page{ margin-top:10%; margin-left:200px; margin-bottom:15%; }

Основната цел на оформлението е правилното позициониране на формата за

вход, така че тя да е разположена на централно място в страницата.

За по-голяма прегледност отделните полета са подредени в таблица. По този

начин не е необходимо допълнително посочване на размери или положение в

пространството. Цялата страница е осъществена по следния начин:

<div id="login_page"> <asp:Table ID="Table1" runat="server"> <asp:TableHeaderRow> <asp:TableCell><p class="main">ВХОД ЗА РЕГИСТРИРАНИ ПОТРЕБИТЕЛИ</p></asp:TableCell> </asp:TableHeaderRow> <asp:TableRow ID="login_email" runat="server"> <asp:TableCell><p class="main">Потребитлеско име/e-mail</p></asp:TableCell> <asp:TableCell><input id="ime" value="e-mail" type="text" class="whitefields" runat="server"/></asp:TableCell> </asp:TableRow>

56

<asp:TableRow ID="login_password" runat="server"> <asp:TableCell><p class="main">Парола</p></asp:TableCell> <asp:TableCell><input id="logi_password" type="password" class="whitefields" runat="server"/></asp:TableCell> </asp:TableRow> </asp:Table> <div id="div_vhod" class="div_button"> <asp:Button runat="server" ID="vhod" CssClass="button" Text="ВХОД" OnClick="vhod_Click"></asp:Button> </div> </div>

За вход в системата няма да се изисква нищо повече от потребителско име

и парола. Тъй като за първото ще се използва е-mail адрес, на инпут полето „ime“

е зададена стойност „e-mail“. По този начин се подсказва на потребителя какво

трябва да бъде въведено. Полето за парола е от тип „password“, чрез който

въвежданите данни се скриват, а вместо тях на екрана се визуализират

маскиращи символи. Често използвана техника за повишаване на сигурността

срещу недоброжелателни наблюдатели.

За стилизиране на инпут полетата е създаден клас:

.whitefields { background-color: #fffb9c; border-color: #cf492b; width: 150px; height: 22px; color: #0d0d0d; font-size: 20px; font-family: 'Buxton Sketch'; }

Използва се основният шрифт на сайта, който ще бъде „Buxton Sketch“.

Изборът му не е случаен, тъй като той е разновидност на ръкописен почерк и

визуализацията му подсилва усещането на потребителя за писане върху

ученическа дъска.

Бутонът за вход в системата също е поставен в отделен div, като за него и за

самият бутон са създадени два нови класа. Те ще бъдат използвани при

стилизирането и на други аналогични елементи в приложението.

.div_button{ margin-left:15%; margin-bottom:10%; margin-top:5%; }

57

.button { width: 200px; height: 30px; border-color: #cf492b; background-color: #fffb9c; font-family:'Buxton Sketch'; font-size:20px; } .button:hover { width: 200px; height: 30px; border-color: #fffb9c; background-color: #cf492b; }

Тук отново се използва псевдо клас. Целта е промяна в цвета на бутона, при

позициониране на мишката върху него. Така се подобрява визуалното

изпълнение на сайта. Освен това, промяната в цвета подсказва на потребителя,

че зад елемента се крие действие.

- мишката не е върху бутона;

- псевдо клас :hover;

Използвани са два от основните цветя, които ще присъстват в

приложението. Това са „fffb9c“ – бледо жълто и „cf492b“ – ярко червено. Те са

избрани от картинките „sticky“, като по този начин се цели синхрон във

визуализацията на сайта. Цветовете са меки, но достатъчно изразителни, за да

привличат погледа на потребителя.

58

След оформянето на последния елемент, страница „Вход“ изглежда по

следния начин:

Фигура 30. Страница Вход

При влизане в системата, името на страницата в административното меню

се заменя с поздравително съобщение и бутон за изход:

Фигура 31. Поздравително съобщение след вход в системата

Идеята е потребителят да чувства лично отношение при вида на

потребителското си име, изписано на екрана. Да му се внуши мисълта, че

приложението е създадено точно за него и неговото семейство. Като и да добие

ясна представа как може да излезе от системата.

След осигуряване на функционалността за вход и изход /чрез ASP.NET –

предмет на отделна разработка/, страницата ще бъде готова за използване от

всеки, които е пожелал да се регистрира чрез „Форма за регистрация“.

59

3.2.2 Форма за регистрация – страница Registration_form.aspx

Както става ясно от наименованието ѝ, тази страница ще служи за

регистрация на нови потребители. Поради стремежът на приложението да бъде

максимално опростено и изчистено, информацията която се изисква за

регистрация ще бъде съвсем основна. Формата ще съдържа 7 полета, две от които

с потребителско име и парола. Няма да се изискват подробни данни за семейно

положение, месторабота или други детайли, който някои сайтове събират като

статистическа информация.

Оформлението на страницата е постигнато чрез поставяне в отделен div,

стилизиран чрез селектиране по ID:

#reg_form{ margin-bottom:9%; margin-left:200px; }

Полетата са подредени в таблица, за постигане на желания визуален ефект.

Въпреки отричането на тази практика напоследък, използването ѝ в случая

допринася за по-бързото и по-красиво изграждане на страницата. Другите

варианти, като използване на множество div елементи, биха усложнили излишно

оформянето.

Към полетата тип инпут е приложен съществуващият клас „whitefields“, а за

оформяне на текстовите полета е създаден клас „main“, които ще бъде използван

на различни места в приложението. Той е дефиниран с основния избран шрифт,

с нюанс на черния цвят:

.main { margin: 0px; color: #0d0d0d; font-size: 20px; font-family: 'Buxton Sketch'; font-weight: normal; font-style: normal; }

За полетата с падащо меню се използва следния клас, който осигурява

визуална прилика с останалите контроли за въвеждане на данни в страницата:

60

.dropdownl { background-color: #fffb9c; border-color: #cf492b; width: 155px; height: 27px; color: #0d0d0d; font-size: 20px; font-family: 'Buxton Sketch'; }

Данните, които потребителят трябва да попълни са:

- Име – не е въведено ограничение в езикът за въвеждане:

<input id="ime" type="text" class="whitefields" runat="server"/>

- Фамилия – също липсва ограничение:

<input id="familiq" type="text" class="whitefields" runat="server" />

- Пол – падащо меню с избор на опция:

<asp:DropDownList ID="polselect" runat="server" class="dropdownl"> <asp:ListItem>Мъж</asp:ListItem> <asp:ListItem>Жена</asp:ListItem> </asp:DropDownList>

- Възраст:

<input id="vuzrast" type="text" class="whitefields" runat="server"/>

- Ниво на образование – падащо меню с избор на опция:

<asp:DropDownList ID="obrazovanie" runat="server" class="dropdownl"> <asp:ListItem>Основно</asp:ListItem> <asp:ListItem>Средно</asp:ListItem> <asp:ListItem>Висше-бакалавър</asp:ListItem> <asp:ListItem>Висше-магистър</asp:ListItem> </asp:DropDownList>

- Е-mail адрес:

<input id="email" type="text" class="whitefields" runat="server" />

- Парола – тип „password“, за повишаване на сигурността:

<input id="password" type="password" class="whitefields" runat="server" />

Причината да се изискват данни за възраст и ниво на образование е

събирането на информация, която да се използва при бъдещо подобряване на

приложението. Много често възрастта е определяща за визуалните възприятия

на хората, както и за техните цветови предпочитания. Тъй като стремежът на

сайта е да бъде максимално потребителски ориентиран, на база на събраната

информация могат да бъдат извършени промени в дизайна, които да осигурят по-

добро усещане и приемане на приложението.

Информацията за образование, от своя страна, ще даде по-ясна представа за

масовите потребители на продукта. По този начин ще могат да бъдат обмислени

61

и проучени възможностите за опростяване или усложняване на финансовата

страна на приложението. Разликата в нивото на образование може да е решаваща

при изграждането на финансовата култура на потребителя. Затова и

възможностите на сайта могат да бъдат допълнени или променени, в зависимост

от данните за масовия клиент.

След успешна регистрация, потребителят ще може да влезе в системата и да

работи по управлението на своя бюджет. Регистрация обаче няма да може да се

осъществи без попълване на всички посочени данни. Ако клиентът не желае да я

предостави, би могъл да използва страници „Въвеждане на данни“ и

„Калкулатори“, но по този начин ще се лиши от голяма част от функционалните

предимства на приложението.

Фигура 32. Форма за регистрация

62

3.2.3 Инструкции за употреба – страница Instructions.aspx.

Не случайно връзката към тази част от приложението е позиционирана

веднага след формата за регистрация. Целта е тя да бъде прочетена от всеки

потребител, било то регистриран или не, тъй като представлява основна

информационна страница за продукта.

Инструкциите за употреба съдържат описание на функционалностите на

приложението, както и основни правила за работа. Идеята е тази страница да

отговори на евентуалните въпроси на потребителите, както и да спомогне за

реклама на приложението.

В тази секция ще бъдат описани последователно всички страници и ще

бъдат представени възможностите, които се предоставят на потребителите, както

и начинът те да бъдат използвани.

Страницата е оформена чрез използване на елементи „<h5>“ и „<p>“. Към

които са приложени 2 различни класа, за да се подобри визуалното възприятие и

по-лесно да се открива търсеният въпрос.

Фигура 33. Инструкции за употреба

63

3.2.4 Полезни връзки – страница Useful_links.aspx.

Предназначението на настоящата страница е да предостави на

потребителите, по лесен и достъпен начин, кратък списък с връзки към други

сайтове. Приложението представлява финансов помощник, но тъй като не може

да обхване всички въпроси, свързани с управление на бюджета, тази страница

предлага допълнителни възможности, които могат да бъдат изключително

полезна в определени моменти.

Тъй като целта не е заливането на потребителите с огромно количество

информация, са включени само следните 5 сайта:

- Мойте пари БГ- съдържа актуални данни за депозитни и кредитни

продукти, калкулатори, новини и дори финансови съвети и възможност за

дискутиране на конкретни проблеми;

- Калкулатор БГ – сайтът предлага голям асортимент от калкулатори,

разделени според своята насоченост. Например калкулатори свързани с

работата, с банката или с автомобила;

- Лични финанси, Старт БГ – списъци с връзки към разнообразна

информация, като Съвети за управление на личните финанси, Контрол над

личните финанси, Финансови консултанти и други;

- Дир БГ – Банки – Каталог на банките в България, новини от сферата на

бизнеса, банките и инвестициите;

- БНБ – сайтът на Българска народна банка. Би могъл да бъде полезен в

редица отношения – актуална финансова информация, текущи валутни

курсове, закони и наредби и много други.

Страницата е организирана в стилизиран div и използването на таблица:

<div id="useful_links"> <asp:Table runat="server"> <asp:TableRow> <asp:TableCell><img src="Images/lady.gif" class="lady" /> </asp:TableCell> <asp:TableCell> <p class="main"> <br /><br /> <br /><br /> <br /><br /><br /><br />ПОЛЕЗНИ ВРЪЗКИ <br /><br /> Мойте пари - <a href="http://www.moitepari.bg/" class="usefullinks">http://www.moitepari.bg/</a> <br />

64

Калкулатор БГ - <a href="http://calculator.bg/" class="usefullinks">http://calculator.bg/</a> <br /> Старт БГ - Лични фин. - <a href="http://lichnifinansi.start.bg/" class="usefullinks">http://lichnifinansi.start.bg/</a> <br /> Дир БГ - Банки - <a href="http://banks.dir.bg" class="usefullinks">http://banks.dir.bg/</a> <br /> Българска народна банка - <a href="http://www.bnb.bg/" class="usefullinks">http://www.bnb.bg/</a> </p> </asp:TableCell> </asp:TableRow> </asp:Table> </div>

За оформяне визуализацията на връзките е използван съществуващият клас

„usefullinks”. Чрез него цветът на текстът се променя при позициониране на

мишката върху линка.

За повишаване на визуалното представяне на страницата е използвано

изображение, което увеличава размерът си при поставяне на мишката отгоре.

Използван е нов клас, както и CSS3 transition2:

.lady { margin-top:0px; height: 201px; width: 167px; transition: width 1s, height 1s; -webkit-transition: width 1s, height 1s; -moz-transition: width 1s, height 1s;

} .lady:hover {

height: 251px; width: 217px;

}

Направено е дефиниране, което да осигури еднакъв резултат при трите

браузъра – Internet Explorer, Google Chrome и Mozilla Firefox. Ефектът

представлява визуално приближаване на избраната картинка. В двата случая

страницата изглежда по следния начин:

2 Подробно описание на функцията е налично на адрес: www.w3schools.com/css/css3_transitions.asp/

65

Фигура 34. Страница Полезни връзки - Мишката не е позиционирана върху

изображението

Фигура 35. Страница Полезни връзки - Уголемяване на изображението, чрез CSS3

transition

66

3.2.5 Контакти – страница Contacts.aspx.

Целта на страница Контакти е да предостави детайли за създателите на

приложението, както и актуални e-mail адреси за връзка. Освен това е включен и

линк към сайта на Университет по библиотекознание и информационни

технологии.

Тази секция е организирана без излишна информация или натрапващи

изображения. Състои се от div, в който данните са разделени в параграф и

таблица. Div-ът е стилизиран чрез селект по ID:

#contacts{ margin-left:150px; padding-left:25px; background-image:url('Images/Notebook.gif'); background-repeat:no-repeat; background-size:70% 100%;

}

Другият клас, приложен към текстовите елементи е „main“.

Фигура 36. Страница Контакти

Тъй като предназначението и е изцяло информативно и тя не изпълнява

функционалност на приложението, дизайнът ѝ е изчистен, като разчита на

използваното изображение. Страницата е достъпна както за регистрирани, така

и за нерегистрирани потребители. Тя е и последната част от административното

меню. След съставянето ѝ може да се премине към функционалната част на

приложението или т.нар. потребителско меню.

67

3.3 Основни екрани и функционалности

3.3.1 Въвеждане на данни – страница Main Page-data.aspx

„Въвеждане на данни“ е главната страница на „Помощник за твоя семеен

бюджет“ и първият елемент на потребителското меню. Може да бъде използвана

както от регистрирани, така и от нерегистрирани потребители, като няма разлика

във функционалностите, които се предоставят.

Връзката към нея е разположена в горната лява част на екрана, така че да

бъде достъпвана бързо и лесно. Освен това, след вход в системата, потребителят

бива насочен автоматично към тази част на приложението и може да започне с

анализа на семейния си бюджет. Страницата е разделена в две таблици. Първата

организира пространството за въвеждане на данни, а втората - резултатът от

финансовите изчисления.

След като главната цел на приложението е да предоставя лесен начин за

пресмятане и анализиране състоянието на бюджета, логично е страницата да

бъде разделена на двата основни финансови сегмента – Приходи и Разходи.

Всеки от тях представлява списък от възможни пера на произход или

предназначение. На потребителя е оставен изборът дали да въведе месечна или

годишна стойност за съответното перо. Като изчисляването на второто се

извършва напълно автоматично, чрез Javascript:

function year_month(obj) { var id = obj.id; var curr_ele = document.getElementById(id).value; var check = id.slice(-1); if (check != "g") { var text = id + "g"; var rez = curr_ele * 12; document.getElementById(text).value = rez.toFixed(2); } else { var text = id.slice(0, -1);

var rez = curr_ele / 12; document.getElementById(text).value = rez.toFixed(2); } }

68

Функцията се извиква при събитие „onkeyup“, прикачено към всички полета

за въвеждане на потребителски данни – приходи или разходи. За входящ

параметър се използва конкретният обект, който я е задействал, като след това

се проверява дали полето е с месечни или годишни данни, чрез неговото ID. По

този начин се прилага коректното изчисление на сумата и записването ѝ на

правилното място.

Идеята е да се осигури гъвкавост при въвеждането на информация. Всеки

може да предпочете начинът, който е по-удобен за него. Освен това чрез

визуализиране на годишните данни, потребителят получава по-цялостна

представа за състоянието на своя бюджета и ефективно да получи отговор на

въпросите откъде идва „минусът“ или на какво се дължи „плюсът“ в семейния

портфейл.

Допълнителна функция осигурява закръгляването на сумите, попълнени от

потребителя. Тя се задейства при събитието „onblur“ /разфокусиране/:

function round(obj) {

var id = obj.id; var round = parseFloat(document.getElementById(id).value);

document.getElementById(id).value = round.toFixed(2); }

Функцията изследва обекта и закръглява стойността му до втория знак след

десетичната запетая.

Към страницата е предвидено и процентно изчисляване на разходите, което

се визуализира едновременно с финансовите резултати, като се използва същата

Javascript функция. Стремежът е клиентът да придобие по-ясна представа за

начина, по който се изразходват семейните средства. Представянето им като

процент от общата сума би могло да помогне при взимане на решение за това в

кое перо може да се достигне намаление или при необходимост увеличение.

Организирана по описания начин, страницата придобива следния вид:

69

Фигура 37. Страница Въвеждане на данни

За стилизиране на текстовите полета е използван клас „main“, а за инпут

полетата е създаден нов:

.infields{ background-color: transparent; border-bottom-color: #0d0d0d; border-bottom-width: thin; border-bottom-style:dotted; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; width: 90px; height: 17px; color: #fff; font-size: 18px; font-family: 'Buxton Sketch'; text-align:right; }

За процентното представяне на разходите, тоест за последната колона на

таблицата също е създаден отделен клас:

.planrezult { background-color: #006427; border-color: transparent; width: 90px; height: 17px; }

70

Целта е да се получи визуално разделяне от полетата за въвеждане на данни,

както и по-лесното им разпознаване при последващите изчисления. Полетата за

инпут също трябва да бъдат разграничавани лесно. Това е осъществено чрез

специфичните им ID-та. А именно, всички полета за месечни приходи започват

с „pri“. Всички полета за годишни приходи започват с „pri“, но имат добавено

„g“ в своя край. ID-тата за разходите започват с „raz“, като годишните завършват

с „g“, а процентните с „p“. Например съответстващото месечно поле на Приходи

от трудов договор е с ID „pritrdoc“, годишното с „pritrdocg“ и т.н.

След създаване на основната таблица, се пристъпва към осигуряване на

функционалната част на страницата – пресмятане и визуализиране на 8 елемента.

Този процес е реализиран чрез Javascript функция, която се задейства при

избиране на бутона „Пресметни“, посредством популярното събитие „onclick“.

Калкулирането се осъществява чрез следния процес. Първо се извършва

селектиране на всички полета за въвеждане на данни, като елементите се

разпознават по класа „infields“. При последващата обработка, разграничаването

става на базата на специфичното им ID, чрез низова обработка и използването на

ключовите знаци от тях. Посредством цикъл се обхождат всички селектирани

полета и се разпределят към съответните сумарни променливи /разходи и

приходи/. От така получените променливи се извеждат и останалите финансови

резултати.

Функционалността на приложението включва изчисляването на следните

данни:

- Обща сума на месечните приходи;

- Обща сума на годишните приходи;

- Обща сума на дневните разходи;

- Обща сума на месечните разходи;

- Обща сума на годишните разходи;

- Разлика Приход/Разход на месечна база;

- Разлика Приход/Разход на годишна база;

71

- Най-голяма перо в разходите;

Текстовите полета са стилизирани чрез клас „main“. Резултатните

представляват нестилизирани елементи „label“. Целта е разграничаването им от

останалите полета в страницата. ID-тата им изпълняват същата роля, като

започват с „rezpri“ или „rezraz“. По този начин изчислените стойности се подават

за визуализиране към съответното резултатно поле.

Същата функция се използва и за изобразяването на процентните размери

на разходите, като се създава отделен масив. В него се съхраняват резултатите в

процентно изражение, които посредством цикъл, биват визуализирани в

съответните полета. За идентифицирането на тези полета също се създава масив,

към когото се присвоят всички елементи от клас „plan_rezult“.

Финансовите резултати от изчисленията, не се визуализират до

приключване нанасянето на данните. Те остават скрити за потребителя, за да не

повлияят по някакъв начин на информацията, която той въвежда.

Позиционирани са в отделен div „rezult“, който се появява едновременно с

изчисляването на данните. Реализира се като последно действие на функцията

„calculate“ и промяна на характеристиките на div елемента. За целта са създадени

следните два класа:

.rezult_hide{ margin-left:150px; margin-bottom:50px; display:none; } .rezult_show{ margin-left:150px; margin-bottom:50px; }

<div id="rezult" class="rezult_hide">

Първият от тях скрива елемента, чрез дефинирането на атрибут „display“.

Във вторият тази дефиниция липсва и при прилагането му div-ът се появява на

екрана.

72

Освен обикновени изчисления, допълнителна забавна функционалност на

страницата е визуализирането на съвет към потребителя. Той се появява

непосредствено под изчисленията, като е оцветен в използвания в приложението

червен цвят. Текстът му се определя от месечната балансова сума на бюджета.

Тази функционалност е реализирана чрез Javascript, като е използван условният

оператор „switch“. Той е включен към функцията за изчисляване на финансовите

резултати „calculate“. Вариантите за съвет към потребителя са следните:

- Сума под „-2000“ - Продажбата на собственост е добро решение за

балансиране на бюджета Ви!;

- Сума между „-2001“ и „-1000“ - "Помислете за допълнителни доходи";

- Между „-1001“ и „-500“ - Преосмислете внимателно своя бюджет;

- От „-501“ до „0“ - Опитайте се да намалите месечните си разходи;

- Между „0“ и „500“ - Вие управлявате добре своя семеен бюджет!;

- От „501“ до „1000“ - Помислете за откриване на депозит.;

- Между „1001“ и „2000“ - Заслужавате мечтана почивка!;

- От „2001“ до „4000“ - Инвестирайте! Например в нов автомобил.;

- Над „4001“ - Проучете възможностите за инвестиция!

73

Примерен резултат след изчисления:

Фигура 38. Пример за съвет към потребителя

74

3.3.2 План за семеен бюджет – страница ManageB.aspx

Тази страница е основна за приложението, но може да бъде използвана само

от регистрирани потребители. Чрез нея се осъществяват следните дейности:

- планиране на приходи и разходи за бъдещ период;

- въвеждане на данни за текущ период;

- визуализиране на разликата между планирани и реални данни;

Полетата са подредени в таблица, като за тези с текстови описания е

приложен клас „main“. Тези за въвеждане на данни, които са от тип „инпут“, са

стилизирани чрез „infields“. Освен това към тях е прикрепена функцията

value_check, която осигурява въвеждането на коректни данни /числови

стойности/. Тя се извиква при събитието „onblur“:

function value_check(obj) { var value = parseFloat(document.getElementById(obj.id).value); if (isNaN(value)) { window.alert('Vavedete korektna stoinost!'); document.getElementById(obj.id).focus(); } else { document.getElementById(obj.id).value = value; } }

Функцията използва стойността на обекта, който я е извикал, като прави

проверка дали тя не е число. Ако потребителят е въвел символи, които не

отговарят на проверката, системата не позволява преминаване към други полета

или функционалности в приложението.

За визуализиране на разликата между планирани и реални приходи и

разходи е създаден нов клас:

.planrezult { background-color: #006427; border-color: transparent; width: 90px; height: 17px; }

Страницата изглежда по следния начин:

75

Фигура 39. План за семеен бюджет

За да отбележи дали иска да попълни данни за бъдещ период или реални

такива, потребителят трябва да използва „checkbox“ – „план“. При избирането

му се задейства Javascript функция „plan_hide“, която скрива полетата „Разлика

от плана“.

function plan_hide() { if (document.getElementById("cb_plan1").checked == true) { document.getElementById("hide_plan1").style.display = "none"; document.getElementById("hide_plan2").style.display = "none"; } else { document.getElementById("hide_plan1").style.display = ""; document.getElementById("hide_plan2").style.display = ""; } PageMethods.check_date(); }

При стартиране на функцията се проверява дали е отбелязан„checkbox“-а.

Ако е така системата скрива div елемента, като променя стойността на атрибута

„display“.

Чрез две падащи менюта потребителят избира месец и година, за които иска

да попълни информация. Този избор е ограничен до месец следващ текущият,

когато става въпрос за планиране. Това се реализира чрез C Sharp.

76

След нанасяне на всички необходими данни, клиентът трябва да задейства

бутон „Пресметни“, които извиква следната Javascript функция:

function calculate_budget() { var pera = document.getElementsByClassName("infields"); var pri_all = 0; var raz_all = 0; for (i = 0; i < pera.length; i++) { var id = pera[i].id; var idPR = id.slice(0, 23); var val_b = document.getElementById(id).value; if (!val_b) { val_b = "0"; } if (idPR == 'ContentPlaceHolder1_pri') { pri_all = pri_all + parseFloat(val_b); } else if (idPR == 'ContentPlaceHolder1_raz') { raz_all = raz_all + parseFloat(val_b); } } document.getElementById("rezmpri").innerHTML = pri_all; document.getElementById("rezgpri").innerHTML = raz_all; }

Чрез нея се изчисляват и визуализират обща сума на приходите и обща сума

на разходите.

Функцията селектира всички елементи с клас „infields“, след което ги

обхожда и прави проверка към кое перо принадлежат – разходи или приходи.

Този процес се извършва чрез изследване на първите 3 знака от ID атрибута на

всяко поле. Използват се променливи за натрупване на двете пера, които в

последствие се визуализират на съответните места в екрана, след обхождане на

всички полета от цикъла.

Ако регистрирания потребител желае да запише въведената информация в

индивидуалната си база данни, той трябва да задейства бутона „Запази“.

Пренасянето се осъществява чрез ASP.NET C Sharp.

За стилизация на бутоните са използвани класове „button“ и

„div_button_center“. При визуализацията на общите суми е приложен клас

„advice“, който е в познатия червен цвят.

77

Полезна функционалност на тази страница е визуализирането на разликата

между планирани и реални данни. Тя се изписва в допълнителните колони

„Разлики от плана“, като изчислението се задейства от бутон „Пресметни“.

За подобряване на потребителското възприятие, отрицателните суми са

оцветени в червено. Това е реализирано чрез следната Javascript функция:

function color_b() { var rezult_b = document.getElementsByClassName("planrezult"); for (i = 0; i < rezult_b.length; i++) { if (rezult_b[i].value < 0) { rezult_b[i].style.color = "red"; } } }

Функцията селектира всички полета с клас „planrezult“ и проверява

стойността им. Ако тя е отрицателна, прилага стил „червено“ към тях.

Фигура 40. Разлика между планирани и реални данни

Стартирането на страница „ManageB“ задейства:

function initialize()

{

color_b();

calculate_budget();

plan_hide();

}

Тя извиква описаните по-горе 3 функции.

78

3.3.3 Справки – страница Reports.aspx

Това е една от най-полезните части на приложението. Тя може да бъде

използвана само от регистрирани потребители. Страницата съдържа списък с 6

справки, който предоставят разнообразна информация за данни на съответния

семеен бюджет.

Фигура 41. Страница Справки

Страницата е структурирана като параграф, включващ текстови полета и

„checkbox“. Към всяка отделна справка има създаден елемент div, който съдържа

таблица, в която ще се представи резултата. Чрез дефиниране на:

style="display:none"

тези елементи са скрити по подразбиране. За визуализиране на

съответстващия на справката div се използват CSS и Javascript. Към всички

„checkbox“ е приложен клас „c_report“, а към div елементите – клас „d_report“.

Събитието „onchange“ към всеки „checkbox“, задейства функция:

function show_report(a) { var report_id = a.id; var divid = report_id + 'd'; var checkboxes = document.getElementsByClassName("c_report"); var reports = document.getElementsByClassName("d_report"); for (i=0; i < checkboxes.length; i++) {

79

var curr_id = checkboxes[i].id; if (curr_id == report_id && a.checked == true) { document.getElementById(divid).style.display = ""; } else if (curr_id == report_id && a.checked == false) { document.getElementById(divid).style.display = "none"; } else { checkboxes[i].checked = false; var otherdiv = curr_id + 'd'; document.getElementById(otherdiv).style.display = "none"; } } }

Чрез нея се извършва проверка кой „checkbox“е отбелязан и стилът на

свързаният с него div се променя на

display = ""

Всички останали div-ове стават скрити /ако са били визуализирани преди

това/, както и всеки друг „checkbox“ се променя на

checked == false

След като влезе в системата, потребителят може да избере справката, която

желае да използва. Информацията, която те предоставят съответства на

наименованието им. Тоест клиентът има възможността да провери въведени

реални данни или такива за планиран период. Да провери баланса на своя

бюджет, на месечна или годишна база. Както и да види сумарните стойности на

своите приходи или разходи за конкретна година.

Фигура 42. Справка - баланс на семейния бюджет

80

Изборът на период става чрез две падащи менюта. След като използва

дадена справка, потребителят може да я замени с друга изключително лесно.

Необходимо е единствено промяна на избраният „checkbox“.

Друга полезна функционалност на справките е визуализирането на данните

чрез графика. Реализирано е посредством ASP.NET контролата <asp:Chart>.

Фигура 43. Пример за графично представяне на резултат от справка

3.3.4 Напомняния – страница Reminders.aspx

Идеята на тази страница е реализирането на допълнителна

функционалността на приложението, която да му даде предимство пред

конкурентните продукти. Чрез нея потребителите ще имат възможността да

въвеждат събития, за които ще получат напомняне при влизане в системата, в

текущ или предходен ден.

Дизайнът на страницата е съобразен с основните цветове на приложението

– зелено, жълто и червено.Структурирането ѝ е извършено чрез таблица.

Използвани са и два div елемента. Първият съдържа полетата за въвеждане на

81

ново събитие. Вторият - тези за визуализиране на попълнени предходни данни,

по дати.

За подобряване на потребителското преживяване е добавен календар.

Използван е елементът „<asp:Calendar>“, като неговите характеристики са

съобразени с цялостната визия на приложението. Текстовите полета са

стилизирани с клас „main“, а полетата за въвеждане на данни с клас „whitefields“.

Фигура 44. Страница Напомняния

Когато потребителят желае да въведе ново напомняне, той трябва да избере

дата от календара. Тя се зарежда автоматично в полето по-долу. Събитията могат

да бъдат както от финансов /вноски по кредити и депозити, заплащане на данъци

и сметки/, така и от личен характер /рождени и имени дни, годишнини и т.н./.

Въвеждането на сума е задължително, но потребителят може да попълни

произволна цифра, за да запази събитие без финансово изражение.

Клиентът има възможност да избере едно повторение на напомнянето, чрез

отбелязване на „checkbox“ – Еднократно /реализирано чрез ASP/ или да избере

период на повторенията, посредством падащо меню и въвеждане на конкретен

брой. Бутонът добави събитие, записва информацията в индивидуалната база

82

данни, което в последствие води до появата на съобщения за наличието на

актуални напомняния.

Друга функционалност на страницата е възможността да се проверят

въведени събития. Тя се реализира чрез избиране на конкретна дата от календара.

Списък с всички събития за нея се визуализира в долната част на екрана.

Фигура 45. Събития - по дата

3.3.5 Калкулатори – страница Calculators.aspx

Тази част от приложението може да бъде използва както от регистрирани,

така и от нерегистрирани потребители. Целта ѝ е да предостави допълнителна

помощ при управлението на семейния бюджет. Идеята е осъществена чрез

създаването на четири калкулатора:

- Стандартен;

- Валутен;

- Депозитен;

- Кредитен;

Те са позиционирани в четири последователни div-а. Като формата и

стилизацията на първия са различни, докато на останалите три са идентични.

Реализирани са в основните червен, жълт и черен цвят, които се използват в

сайта. Ще разгледаме всеки от тях поотделно.

Стандартният калкулатор може да бъде използван от потребителите за

подпомагане на пресмятанията по точните суми на приходите и разходите. Той

съдържа само основните операции – събиране, изваждане, умножение и деление,

тъй като се избягва допълнително усложняване и се запазва изчистеният дизайн

на страницата.

83

Елементът е построен чрез HTML и CSS, а за осигуряване на

функцонирането му е използван Javascript3.

- част HTML:

h5 class="main">СТАНДАРТЕН КАЛКУЛАТОР</h5> <div id="calculator"> <div id="top" class="top"> <input id="display" type="text" readonly="" size="17"/> </div> <div id="keys" class="keys"> <p> <input type="button" class="button_c" value="7" onclick='v("7")'/> <input type="button" class="button_c" value="8" onclick='v("8")'/> <input type="button" class="button_c" value="9" onclick='v("9")'/> <input type="button" class="button_znak" value="+" onclick='v("+")'/> </p> <p> <input type="button" class="button_c" value="4" onclick='v("4")'/> <input type="button" class="button_c" value="5" onclick='v("5")'/> <input type="button" class="button_c" value="6" onclick='v("6")'/> <input type="button" class="button_znak" value="-" onclick='v("-")'/> </p> <p> <input type="button" class="button_c" value="1" onclick='v("1")'/> <input type="button" class="button_c" value="2" onclick='v("2")'/> <input type="button" class="button_c" value="3" onclick='v("3")'/> <input type="button" class="button_znak" value="*" onclick='v("*")'/> </p> <p> <input type="button" class="button_c" value="0" onclick='v("0")'/> <input type="button" class="button_c" value="." onclick='v(".")'/> <input type="button" class="button_c" value="C" onclick='c("")'/> <input type="button" class="button_znak" value="/" onclick='v("/")'/> </p> <p> <input type="button" class="button_e" value="=" onclick='e()'/> </p>

</div>

Дисплеят на калкулаторът е оформен чрез отделен div, а бутоните са

разделени на три основни групи:

- button_c – такива са всички цифри;

- button_znak - операции;

- button_e – използва се за знак „=“ и чрез него се извършват изчисленията;

3 http://www.codeproject.com/Tips/631525/Creating-Calculator-using-HTML-CSS-and-JavaScript

84

След стилизация с няколко селекции чрез ID, калкулаторът придобива

следният вид:

Функционалността му се осигурява чрез следните 3 функции:

function v(val) { document.getElementById("display").value += val; } function c(val) { document.getElementById("display").value = val; } function e() { try { var rezult = eval(document.getElementById("display").value); document.getElementById("display").value = rezult; } catch (e) { c('Грешка') }

}

Първата от тях се задейства при събитие „onclick“ на бутон с цифра или знак

за операция и десетичният знак. Това което тя прави е да прибави към дисплея

стойността на обекта, който я е извикал.

Функция „c(val)“ е прикрепена към бутон „C“ и при задействането си,

подава към дисплея неговата стойност, която е дефинирана като (""). По този

начин екранът на калкулатора се изчиства.

85

Последната функция извършва математическите пресмятания и подава

резултата към дисплея. Ако бъде намерена грешка в подадените за изчисление

значи, се визуализира съобщение за грешка. function e() се задейства при

събитието „onclick“ на бутон „=“.

За оформление на следващите три калкулатора са създадени следните

класове:

.calculator_drugi { width:400px; height:250px; background-color:#fffb9c; border:#cf492b solid 3px; border-radius: 10px; margin: 50px auto; }

.title { text-align:center; margin-top:3px; font-family:'Buxton Sketch'; color:#0d0d0d; font-size:17px; font-weight: normal; font-style: normal; }

Те осигуряват една и съща визия на трите елемента, което подобрява

потребителското усещане и улеснява привикването към работа с тях.

Идеята на валутният калкулатор е да предостави възможност за по-ясно

възприемане на стойността на една левова сума, превалутирана в различни

валути. Тук валутният курс трябва да бъде въведен ръчно, като освен това

превалутирането е еднопосочно – от лева към друга валута. Причините за това

са, че този калкулатор трябва да бъде възприеман като помощно средство, за по-

лесно възприемане. Например, когато потребителят желае да открие депозит в

друга валута или се нуждае от средства за заплащане на почивка. В интернет

пространството съществуват други сайтове и приложения, които позволяват

превалутиране с актуален валутен курс.

86

Фигура 46. Валутен калкулатор

Функционалността му е реализирана чрез следната функция:

function cur_calc() { var sum = document.getElementById("curr_suma").value; var kurs = document.getElementById("curr_kurs").value; var type = document.getElementById("curr_type").value; var rezult = parseFloat(sum * kurs).toFixed(2) + (" ") + (type); document.getElementById("cur_rezult").value = rezult; }

Резултатната сума се закръглява до втория знак след десетичната запетая.

Следващият калкулатор от приложението е Депозитен. Той също изисква

ръчно въвеждане на лихвения процент. Времевият период се избира чрез падащо

меню. Резултатът от изчисленията представлява обща сума след изтичане на

депозита, тоест главница плюс лихви.

Функцията, която е приложена е следната:

function dep_calc() { var sum = document.getElementById("dep_suma").value; var lihva = document.getElementById("dep_lihva").value; var srok = document.getElementById("dep_srok").value; var lihva_suma = ((sum * lihva) / 12 / 100) * srok; var rezult = parseFloat(lihva_suma) + parseFloat(sum); document.getElementById("dep_rezult").value = rezult.toFixed(2);

}

Специфичното при тези изчисления е превръщането на лихвения процент от

годишен в месечен. Резултатът отново се закръгля до втория знак след

десетичната запетая. Идеята на депозитния калкулатор е потребителят да добие

представа каква крайна сума може да получи при откриването на депозит. Данни

87

за лихвените проценти могат да бъдат открити както на сайтове на конкретната

банка, така и на други места в Интернет.

Последният калкулатор, който страницата предлага е Кредитен. Той би

могъл да бъде изключително полезен на потребителите, при взимане на решение

за допълнително набавяне на средства. Сумата и лихвения процент се въвеждат

ръчно, докато падащо меню осигурява възможност за избор на времеви период.

Резултатът, който се визуализира представлява сума на месечната вноска

/главница плюс лихва/.

Фигура 47. Кредитен калкулатор

Така след като клиентът прецени от какво финансиране се нуждае и за какъв

срок смята, че може да го изплати, той може да провери размерът на месечната

си вноска и да добие представа дали може да си я позволи. Често, когато хората

желаят да осъществят конкретна покупка, те взимат спонтанни решения, без да

вникнат в финансовите резултати, до които те биха довели.

Чрез използването на Кредитния калкулатор, много бързо и лесно може да

бъде пресметната реалната сума, която потребителят ще трябва да отделя всеки

месец от бюджета си /главница плюс лихва/. Разбирайки размерът ѝ, той може

да въведе данните при планиране на бъдещите си разходи и по този начин да

получи представа за това как евентуалната покупка би се отразила на семейния

бюджет.

88

ЗАКЛЮЧЕНИЕ

Настоящата магистърска теза е разделена на три основни глави. В първата

част са разгледани и анализирани четири софтуерни продукта, които могат да

бъдат използвани при управление на бюджета. Накратко е представен техният

дизайн. Описани са характеристики им, както и основните им предимства и

недостатъци. По този начин са постигнати първата и втората задачи, които са

поставени в магистърската теза. Последната задача е решена в останалите две

части.

На база на направените изводи от анализа на съществуващи приложения, е

изготвена подробна спецификация на продукта, който следва да бъде разработен.

Тя е поместена във втора глава и е разделена на пет основни части. Описание на

бизнес спецификацията, общата спецификация, допълнителните инструменти,

административния панел и кратко резюме на технологиите, които ще бъдат

използвани.

Третата глава от магистърската теза е нейната основна част. Тя представлява

подробро описание на стъпките по изработване на потребителския интерфейс.

Представени са дизайнът на приложението, както и начинът по който той е

реализиран. Включено е обяснение на функционалностите на продукта, както и

на конкретните решения, с които те са постигнати. Нагледно е показан

резултатът след реализирането на отделните части от сайта, като

последователността следва стъпките при разработката на приложението. Така е

постигната и поставената цел на магистърската теза.

Основните изводи, които могат да бъдат направени са:

1. Информационните технологии са неделима част от съвременния живот,

като тяхното използване може да бъде полезно на всеки един потребител,

независимо от нивото на неговото образование или компютърни познания.

2. Наличните технологии предлагат различни възможности за разработване

на софтуерни продукти. Освен това те непрекъснато се актуализират и

подобряват. Използването на HTML, CSS и Javascript при изработката на сайта,

позволяват нестандартен дизайн и включване на подходящи функционалности.

89

3. Изборът на конкретна технология и визия на продукта са решение на

разработчиците на софтуера, което обаче трябва да бъде съобразен с желаните

крайни цели.

Софтуерният продукт, който е резултат от настоящата разработка

представлява интересна възможност за управление на семейния бюджет.

Неговите инструменти могат да досенат реална полза на потребителите и да

бъдат помощник в ежедневната борба за по-добро разпределение на финансовите

средства.

90

ИЗПОЛЗВАНИ ИЗТОЧНИЦИ

1. Иванов, Иван. Стойков, Петър Информационни системи в бизнеса.

Ръководство за дистанционно обучение – УНИБИТ, София, 2010

2. Наков и др. Програмиране за .NET Framwork. – София: Faber, 2006.

3. Стоянов, Николай. Защита на информацията – УНИБИТ, София: За

буквите-о писменехь, 2014

4. Тотев, Васил. Лекции по дисциплина Разработване на уеб

приложения с Javascript, УНИБИТ, София, 11.10.2013г

5. Burnstein, Ilene. Practical software testing: a process-oriented approach. -

New York: Springer, 2003.

6. MacDonald, M. Adam Freeman. Pro ASP.NET 4 in C# 2010. – USA:

APRESS, 2010.

7. Software Testing. / edt. By Wikipedians. - PediaPress.

8. http://www.asp.net/ - The Official Microsoft ASP. NET Site

9. http://bg.xenium.bg/ - сайт на фирма Ксениум ООД

10. https://www.budgetpulse.com/ - софтуерен продукт за изчисляване на

семеен бюджет, 30.01.2015

11. https://www.buxfer.com/ - приложение за изчисляване на бюджет,

30.01.2015

12. http://www.calculator.bg/1/semeen_budjet.html - онлайн приложение за

изчисляване на семеен бюджет, 30.01.2015

13. https://www.clearcheckbook.com/ - приложение за следене на баланса

и разходите по разплащания, 30.01.2015

14. http://www.codeproject.com/Tips/631525/Creating-Calculator-using-

HTML-CSS-and-JavaScript - интернет форум, 09.2015

15. https://developer.mozilla.org/en-US/ - сайт за работа с Mozilla, 09.2015

16. https://en.wikipedia.org/wiki/Cascading_Style_Sheets#CSS_3 -

Уикипедиа, Свободната енциклопедия, 10.08.2015

17. https://en.wikipedia.org/wiki/HTML5 - Уикипедиа, Свободната

енциклопедия, 09.08.2015

http://www.asp.net/

http://bg.xenium.bg/

https://www.budgetpulse.com/

https://www.buxfer.com/

http://www.calculator.bg/1/semeen_budjet.html

https://www.clearcheckbook.com/

http://www.codeproject.com/Tips/631525/Creating-Calculator-using-HTML-CSS-and-JavaScript

http://www.codeproject.com/Tips/631525/Creating-Calculator-using-HTML-CSS-and-JavaScript

https://developer.mozilla.org/en-US/

https://en.wikipedia.org/wiki/Cascading_Style_Sheets#CSS_3

https://en.wikipedia.org/wiki/HTML5

91

18. http://www.htmldog.com/guides/css/beginner/ - информационен сайт за

HTML, CSS и Javascript, 09.2015

19. http://www.novini.bg/news/190314-eksperti-bylgarite-nqmat-finansowa-

kultura.html - новинарски сайт, статия, 07.04.2014

20. https://softuni.bg/trainings/1087/Web-Fundamentals-HTML-CSS-Feb-

2015 - Софтуерен университет, лекционен материал, 09,2015

21. http://stackoverflow.com/ - интернет форум, 09.2015

22. https://technet.microsoft.com/en-US/ - Технет, 09.2015

23. https://www.techopedia.com/definition/26002/web-based-application -

Технопедия, 08.2015

24. http://www.tutorialspoint.com/html/ - Tutorialspoint, Просто и лесно

научаване, 08.2015

25. http://www.tutorialspoint.com//internet_technologies/javascript.htm -

Tutorialspoint, Просто и лесно научаване, 08.2015

26. http://webdesignfromscratch.com/ - интернет форум, 09.2015

27. http://windows.microsoft.com/bg-bg/internet-explorer/go-explore-ie -

сайт на компанията Microsoft., USA. – 08.2015

28. http://www.w3schools.com/css/default.asp - w3schools,

информационен сайт на консорциум w3, CSS, 09.2015

29. http://www.w3schools.com/html/default.asp - информационен сайт на

консорциум w3, HTML, 09.2015

30. http://www.w3schools.com/js/default.asp - информационен сайт на

консорциум w3, Javascript, 09.2015

http://www.htmldog.com/guides/css/beginner/

http://www.novini.bg/news/190314-eksperti-bylgarite-nqmat-finansowa-kultura.html

http://www.novini.bg/news/190314-eksperti-bylgarite-nqmat-finansowa-kultura.html

https://softuni.bg/trainings/1087/Web-Fundamentals-HTML-CSS-Feb-2015

https://softuni.bg/trainings/1087/Web-Fundamentals-HTML-CSS-Feb-2015

http://stackoverflow.com/

https://technet.microsoft.com/en-US/

https://www.techopedia.com/definition/26002/web-based-application

http://www.tutorialspoint.com/html/

http://www.tutorialspoint.com/internet_technologies/javascript.htm

http://windows.microsoft.com/bg-bg/internet-explorer/go-explore-ie

http://www.w3schools.com/css/default.asp

http://www.w3schools.com/html/default.asp

http://www.w3schools.com/js/default.asp

92

ПРИЛОЖЕНИЯ

Приложение №1 Регистриране на нов потребител.

93

Приложение №2 Вход в системата.

94

Приложение №3 Екран Въвеждане на данни – пример за изчисление

95

Приложение №4 Страница План за сем. Бюджет

Планиране на бюджета

Изчисления след въвеждане на реални данни за същия период

96

Приложение №5 Справки – примери

Данни за планирани месеци

97

Сума на разходи по години и пера

98

Приложение №6 Страница Напомняния - въвеждане на ново събитие.

Списък със съществуващи събития към дата

99

Приложение №7 Събщение за събитие при вход в системата.

100

Приложение №8 Стандартен и валутен калкулатор – примери за използване

Въвеждане на данни

Резултат от изчисленията

Валутен калкулатор

101

Приложение №9 Депозитен калкулатор – примери за използване.

102

Приложение №10 Кредитен калкулатор - примери за използване.

МАГИСТЪРСКА ТЕЗА Създаване на UI за онлайн приложение...

Documents

Transcript of МАГИСТЪРСКА ТЕЗА Създаване на UI за онлайн приложение...