Grantový portál - príklad modernej webovej aplikácie Juraj Červeň Softec
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
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
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
Sekcie projektu, číselníky, príručka 5
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
Kalendár aktivít stráži pravidlá 7
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
Foto a video 9
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
Responzívny dizajn - ukážka 11
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
Konfigurácia GP 13
Dotazník v projekte 14
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
Zoznam aktivít 16
Foto a video galérie 17
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
Detail projektu 19
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
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
Ďakujem za pozornosť Diskusia Môžete si vyskúšať: http://nds.nds.sk/stream/ http://nds.nds.sk/stream/activities http://nds.nds.sk/stream/projects 22