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

6

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

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

7

Multidimenziálny obsah

8

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

Foto a video

9

Responzívny dizajn

10

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

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

15

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

Zoznam aktivít

16

Foto a video galérie

17

INFO PORTÁL - Projekty

18

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

Detail projektu

19

GRAP - Grantový portál NDS

20

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)

21

Technológie v pozadí – výkon a škálovateľnosť

2

1

Databáza

Aplikačný

server

Tapestry 5

(Java)

Portál pre grantistov Portál pre verejnosť

NoSQL - MongoDB

MySQL

Glassfish Netty

Play

(Scala)

Angular JS Twitter Bootstrap

Klient HTML 5 Twitter Bootstrap

Ď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