Grantový portál - príklad modernej webovej aplikácie. Juraj Červeň Softec

Transkript

1 Grantový portál - príklad modernej webovej aplikácie Juraj Červeň Softec

2 Agenda Očakávania od modernej webovej aplikácie Praktický príklad realizácie požadovaných vlastností Portál pre grantistov Info portál pre informovanie verejnosti GRAP Technológie v pozadí Diskusia 2

3 Očakávania od modernej webovej aplikácie Príjemný používateľský zážitok (UX) Rýchla odozva Vysoká dynamika stránok Intuitívne ovládanie Prehľadná organizácia obsahu Snaha predchádzať chybným vstupom Multimediálny obsah Príťažlivý dizajn Prístup z rôznych zariadení od stolných počítačov cez notebooky a tablety až po mobilné telefóny Flexibilita a konfigurovateľnosť Veľké množstvo informácií na malej ploche Integrácia so sociálnymi sieťami Využitie verejných služieb (napr. Google mapy) Vysoký výkon, dostupnosť i škálovateľnosť 3

4 Formulár žiadosti o grant Rýchla odozva veľká časť funkčnosti v prehliadači používateľa HTML5, Javascript frameworky Vysoká dynamika stránok rozbaľovateľné komponenty viacúrovňové číselníky Intuitívne ovládanie príručka pre používateľa integrovaná priamo do formulára žiadosti o grant Prehľadná organizácia obsahu sekcie na spôsob mapy dokumentu v MS Word 4

5 Sekcie projektu, číselníky, príručka 5

6 Kalendár aktivít Snaha predchádzať chybným vstupom od používateľa namiesto dodatočnej kontroly chýb predchádzať chybným vstupom Kalendár aktivít stráži pravidlá definované v grantovom programe min a max trvanie projektu interval kedy môže projekt začať prehľadné farebné odlíšenie 6

7 Kalendár aktivít stráži pravidlá 7

8 Multidimenziálny obsah Foto a obrazové prílohy browse alebo drag & drop zobrazené priamo vo formulári automatické zmenšovanie rozlíšenia fotografií na serveri YouTube video fyzicky je uložené na YouTube nezaťažuje databázu hrá priamo na stránke portálu 8

9 Foto a video 9

10 Responzívny dizajn Prispôsobenie aplikácie rôznym zariadeniam od stolných počítačov cez notebooky a tablety až po mobilné telefóny realizované pomocou CSS bez potreby vytvárať rôzne varianty aplikácie 10

11 Responzívny dizajn - ukážka 11

12 Flexibilita a kofugurovateľnosť Systém riadený metadátami Grantový program (GP) spravuje ho manažér GP každý GP má svoje pravidlá číselníky a parametre univerzálny dotazník príručka pre grantistu šablóny zostáv (zmluva, príloha,...) 12

13 Konfigurácia GP 13

14 Dotazník v projekte 14

15 INFO PORTÁL - Aktivity Prehľadná organizácia obsahu Multimediálny obsah Integrácia so sociálnymi sieťami Aktivity, pozvánky a propagácie inšpirácia Twitterom súvislý prúd správ nekonečný scroll foto a video galérie možnosť zdieľať príspevky na sociálnych sieťach Tag Cloud multifilter 15

16 Zoznam aktivít 16

17 Foto a video galérie 17

18 INFO PORTÁL - Projekty Veľké množstvo informácií na malej ploche Využitie verejných služieb (napr. Google mapy) Projekty infografika podrobnejšie údaje o projekte adresa zobrazená v Google mape 18

19 Detail projektu 19

20 GRAP - Grantový portál NDS Nadácia pre deti Slovenska Jedna z najväčších mimovládnych neziskových organizácií s celoslovenskou pôsobnosťou so zameraním na pomoc deťom a mladým ľuďom Podpora celého životného cyklu grantového programu: podávanie projektov (žiadostí) pozývanie hodnotiteľov individuálne hodnotenie (3 hodnotitelia na projekt) skupinové hodnotenie rozhodnutie správnej rady 2. verzia projektov (upravené podľa požiadaviek NDS) generovanie a podpis zmlúv výplata 1. splátky (záloha) priebežné dokumentovanie projektových aktivít záverečná projektová a finančná správa výplata 2. splátky (vyúčtovanie) 20

21 Technológie v pozadí výkon a škálovateľnosť Portál pre grantistov Portál pre verejnosť Klient Angular JS HTML 5 Twitter Bootstrap Twitter Bootstrap Aplikačný server Glassfish Tapestry 5 (Java) Netty Play (Scala) Databáza NoSQL - MongoDB 2 21 MySQL

22 Ďakujem za pozornosť Diskusia Môžete si vyskúšať: