Grantový portál príklad modernej webovej aplikácie › wp-content › uploads ›...
Transcript of Grantový portál príklad modernej webovej aplikácie › wp-content › uploads ›...
![Page 1: Grantový portál príklad modernej webovej aplikácie › wp-content › uploads › juraj-cerven.pdfTag Cloud multifilter . Zoznam aktivít 16 . Foto a video galérie 17 . INFO PORTÁL](https://reader034.fdocument.pub/reader034/viewer/2022042408/5f23a7b2a37aa2276e1d142f/html5/thumbnails/1.jpg)
Grantový portál - príklad modernej
webovej aplikácie
Juraj Červeň
Softec
![Page 2: Grantový portál príklad modernej webovej aplikácie › wp-content › uploads › juraj-cerven.pdfTag Cloud multifilter . Zoznam aktivít 16 . Foto a video galérie 17 . INFO PORTÁL](https://reader034.fdocument.pub/reader034/viewer/2022042408/5f23a7b2a37aa2276e1d142f/html5/thumbnails/2.jpg)
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
![Page 3: Grantový portál príklad modernej webovej aplikácie › wp-content › uploads › juraj-cerven.pdfTag Cloud multifilter . Zoznam aktivít 16 . Foto a video galérie 17 . INFO PORTÁL](https://reader034.fdocument.pub/reader034/viewer/2022042408/5f23a7b2a37aa2276e1d142f/html5/thumbnails/3.jpg)
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
![Page 4: Grantový portál príklad modernej webovej aplikácie › wp-content › uploads › juraj-cerven.pdfTag Cloud multifilter . Zoznam aktivít 16 . Foto a video galérie 17 . INFO PORTÁL](https://reader034.fdocument.pub/reader034/viewer/2022042408/5f23a7b2a37aa2276e1d142f/html5/thumbnails/4.jpg)
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
![Page 5: Grantový portál príklad modernej webovej aplikácie › wp-content › uploads › juraj-cerven.pdfTag Cloud multifilter . Zoznam aktivít 16 . Foto a video galérie 17 . INFO PORTÁL](https://reader034.fdocument.pub/reader034/viewer/2022042408/5f23a7b2a37aa2276e1d142f/html5/thumbnails/5.jpg)
Sekcie projektu, číselníky, príručka
5
![Page 6: Grantový portál príklad modernej webovej aplikácie › wp-content › uploads › juraj-cerven.pdfTag Cloud multifilter . Zoznam aktivít 16 . Foto a video galérie 17 . INFO PORTÁL](https://reader034.fdocument.pub/reader034/viewer/2022042408/5f23a7b2a37aa2276e1d142f/html5/thumbnails/6.jpg)
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
![Page 7: Grantový portál príklad modernej webovej aplikácie › wp-content › uploads › juraj-cerven.pdfTag Cloud multifilter . Zoznam aktivít 16 . Foto a video galérie 17 . INFO PORTÁL](https://reader034.fdocument.pub/reader034/viewer/2022042408/5f23a7b2a37aa2276e1d142f/html5/thumbnails/7.jpg)
Kalendár aktivít – stráži pravidlá
7
![Page 8: Grantový portál príklad modernej webovej aplikácie › wp-content › uploads › juraj-cerven.pdfTag Cloud multifilter . Zoznam aktivít 16 . Foto a video galérie 17 . INFO PORTÁL](https://reader034.fdocument.pub/reader034/viewer/2022042408/5f23a7b2a37aa2276e1d142f/html5/thumbnails/8.jpg)
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
![Page 9: Grantový portál príklad modernej webovej aplikácie › wp-content › uploads › juraj-cerven.pdfTag Cloud multifilter . Zoznam aktivít 16 . Foto a video galérie 17 . INFO PORTÁL](https://reader034.fdocument.pub/reader034/viewer/2022042408/5f23a7b2a37aa2276e1d142f/html5/thumbnails/9.jpg)
Foto a video
9
![Page 10: Grantový portál príklad modernej webovej aplikácie › wp-content › uploads › juraj-cerven.pdfTag Cloud multifilter . Zoznam aktivít 16 . Foto a video galérie 17 . INFO PORTÁL](https://reader034.fdocument.pub/reader034/viewer/2022042408/5f23a7b2a37aa2276e1d142f/html5/thumbnails/10.jpg)
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
![Page 11: Grantový portál príklad modernej webovej aplikácie › wp-content › uploads › juraj-cerven.pdfTag Cloud multifilter . Zoznam aktivít 16 . Foto a video galérie 17 . INFO PORTÁL](https://reader034.fdocument.pub/reader034/viewer/2022042408/5f23a7b2a37aa2276e1d142f/html5/thumbnails/11.jpg)
Responzívny dizajn - ukážka
11
![Page 12: Grantový portál príklad modernej webovej aplikácie › wp-content › uploads › juraj-cerven.pdfTag Cloud multifilter . Zoznam aktivít 16 . Foto a video galérie 17 . INFO PORTÁL](https://reader034.fdocument.pub/reader034/viewer/2022042408/5f23a7b2a37aa2276e1d142f/html5/thumbnails/12.jpg)
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
![Page 13: Grantový portál príklad modernej webovej aplikácie › wp-content › uploads › juraj-cerven.pdfTag Cloud multifilter . Zoznam aktivít 16 . Foto a video galérie 17 . INFO PORTÁL](https://reader034.fdocument.pub/reader034/viewer/2022042408/5f23a7b2a37aa2276e1d142f/html5/thumbnails/13.jpg)
Konfigurácia GP
13
![Page 14: Grantový portál príklad modernej webovej aplikácie › wp-content › uploads › juraj-cerven.pdfTag Cloud multifilter . Zoznam aktivít 16 . Foto a video galérie 17 . INFO PORTÁL](https://reader034.fdocument.pub/reader034/viewer/2022042408/5f23a7b2a37aa2276e1d142f/html5/thumbnails/14.jpg)
Dotazník v projekte
14
![Page 15: Grantový portál príklad modernej webovej aplikácie › wp-content › uploads › juraj-cerven.pdfTag Cloud multifilter . Zoznam aktivít 16 . Foto a video galérie 17 . INFO PORTÁL](https://reader034.fdocument.pub/reader034/viewer/2022042408/5f23a7b2a37aa2276e1d142f/html5/thumbnails/15.jpg)
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
![Page 16: Grantový portál príklad modernej webovej aplikácie › wp-content › uploads › juraj-cerven.pdfTag Cloud multifilter . Zoznam aktivít 16 . Foto a video galérie 17 . INFO PORTÁL](https://reader034.fdocument.pub/reader034/viewer/2022042408/5f23a7b2a37aa2276e1d142f/html5/thumbnails/16.jpg)
Zoznam aktivít
16
![Page 17: Grantový portál príklad modernej webovej aplikácie › wp-content › uploads › juraj-cerven.pdfTag Cloud multifilter . Zoznam aktivít 16 . Foto a video galérie 17 . INFO PORTÁL](https://reader034.fdocument.pub/reader034/viewer/2022042408/5f23a7b2a37aa2276e1d142f/html5/thumbnails/17.jpg)
Foto a video galérie
17
![Page 18: Grantový portál príklad modernej webovej aplikácie › wp-content › uploads › juraj-cerven.pdfTag Cloud multifilter . Zoznam aktivít 16 . Foto a video galérie 17 . INFO PORTÁL](https://reader034.fdocument.pub/reader034/viewer/2022042408/5f23a7b2a37aa2276e1d142f/html5/thumbnails/18.jpg)
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
![Page 19: Grantový portál príklad modernej webovej aplikácie › wp-content › uploads › juraj-cerven.pdfTag Cloud multifilter . Zoznam aktivít 16 . Foto a video galérie 17 . INFO PORTÁL](https://reader034.fdocument.pub/reader034/viewer/2022042408/5f23a7b2a37aa2276e1d142f/html5/thumbnails/19.jpg)
Detail projektu
19
![Page 20: Grantový portál príklad modernej webovej aplikácie › wp-content › uploads › juraj-cerven.pdfTag Cloud multifilter . Zoznam aktivít 16 . Foto a video galérie 17 . INFO PORTÁL](https://reader034.fdocument.pub/reader034/viewer/2022042408/5f23a7b2a37aa2276e1d142f/html5/thumbnails/20.jpg)
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)
![Page 21: Grantový portál príklad modernej webovej aplikácie › wp-content › uploads › juraj-cerven.pdfTag Cloud multifilter . Zoznam aktivít 16 . Foto a video galérie 17 . INFO PORTÁL](https://reader034.fdocument.pub/reader034/viewer/2022042408/5f23a7b2a37aa2276e1d142f/html5/thumbnails/21.jpg)
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
![Page 22: Grantový portál príklad modernej webovej aplikácie › wp-content › uploads › juraj-cerven.pdfTag Cloud multifilter . Zoznam aktivít 16 . Foto a video galérie 17 . INFO PORTÁL](https://reader034.fdocument.pub/reader034/viewer/2022042408/5f23a7b2a37aa2276e1d142f/html5/thumbnails/22.jpg)
Ď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