- o tom jak optimálně nastavit spolupráci business a IT při implementaci portálového řešení. - zajímavá technická řešení platformy Liferay, která jsme využili na projektu portálu ČSOB. - zkušenosti s přechodem na plně responzivní web a další zajímavé vychytávky z projektu v Moneta Money Bank.

1. Internal
Firemní portály: rychle a moderně
30. 5. 2017

2. Internal
2
Kdo jsme
19 let
na trhu od
roku 1998
500 mil
(Kč) obrat
50+
významných
zákazníků
350+
zkušených
profesionálů
#2
CAD v ČR
(IDC 2017)
ČR
+ Evropa

3. Internal
3
Co umíme

4. Internal
4
Firemní portály: rychle a moderně
Program
› 08:30 - 09:00 Registrace, Coffee & Networking
› 09:00 - 09:35 Flexibilní LFR portál aneb jak nastavit spolupráci
business a IT – Jindřich Houska, Profinit
› 09:35 - 10:05 Elegantní technická řešení portálu (ČSOB) –
Tomáš Piňos, Aleš Podskalský - Profinit
› 10:05 - 10:35 Úplná mobilní responzivita a rebranding
(MONETA) – Daniel Remiš, Profinit
› 10:35 - 10:55 Přestávka
› 10:55 - 11:40 Digital Experiences with Liferay - Představení nové
generace portálového řešení Liferay DXP , Krisztian Rostas,
Liferay
› 11:40 - 12:00 Diskuse u kávy

5. Internal
Jindřich Houska 30. května 2017
Flexibilní LFR portál
aneb jak nastavit spolupráci
business a IT

6. Internal
6
Monolitický systém
› Dodávka celého systému od IT
– Funkcionalita
– Struktura stránek
– Menu
– Textace
– Obrázky
– …
› Dodávka dle release kalendáře
› Minimální konfigurovatelnost

7. Internal
7
Rozvoj monolitického systému
› Business definuje požadavky
› IT provádí analýzu, dodává změny, testuje, …
› Dodávka dle rel. kalendáře v řádu týdnů až půl roku
Funkcionalita
Obsah (struktura stránek, menu, textace, obrázky, …)
ImplementaceDesign TestováníAnalýza Dodávka
Specifikace
požadavků
02/2018 06/2018
ImplementaceDesign TestováníAnalýza Dodávka
Specifikace
požadavků
02/2018 06/2018

8. Internal
8
Systém pro správu obsahu (CMS)
› Portály, redakční systémy
› Výsledný web je složen z
– portletů
• webové aplikace
– obsahu
• stránky
• textace
• obrázky
› Velká konfigurovatelnost
› Vestavěné aplikace

9. Internal
9
Dodávka portálového řešení
› Rozdělená na portlety a obsah
› IT dodávka
– infrastruktura
– portlety
› Dodávka businessu
– struktura stránek
– menu
– textace
– obrázky
– …

10. Internal
10
Rozvoj portálového řešení
› Business definuje požadavky
› IT provádí analýzu, dodává změny a testuje pouze funkcionalitu
› Business provádí změny obsahu
Dodávka portletů dle rel. kalendáře
Dodávka obsahu v řádu hodin až týdnů
ImplementaceDesign TestováníAnalýza Dodávka
Specifikace
požadavků
02/2018 06/2018
Konfigur
ace
Testování
Detailní návrh
obsahu
02/2018 …

11. Internal
11
Ukázka portálu
Článek
Článek s šablonou
Portlet
Parametr stránky

12. Internal
12
Portlet
Článek
Portlet

13. Internal
13
Dopady na organizaci
› Přesun části zodpovědnosti z IT na business
– Definice požadavků souvisejících se
• správou
• konfigurovatelností
– Sestavení portálu (menu, stránky, obsah)
– Správa portálu

14. Internal
14
Technické a procesní dopady
› Rozřezání aplikace – menší vs. větší portlety
– Flexibilita návrhu webu
– Zvážení provázanosti a komunikace mezi aplikacemi
› Tvorba release – celý systém vs. portlety
– Jednodušší dodávka celého systému
– Nižší riziko rozbití prostředí při dodávce po portletech
› Pravidla využívání prostředí
– Obsah je konfigurace
– Přesun obsahu mezi prostředími

15. Internal
15
Shrnutí
› Portálové řešení
+ rychlejší a levnější dodávka změn v obsahu
+ větší flexibilita při změnách
+ rozdělení dodávky mezi více týmů
+ vestavěné aplikace
– vyšší nároky na business
– nutnost standardizace (postupy, grafika)

16. Internal
Diskuze

17. Internal
Elegantní technická
řešení – projekt portálu
ČSOB
Tomáš Piňos, Aleš Podskalský 30. května 2017

18. Internal
18
V čem je Liferay unikátní?
› Dynamický layout stránky a vnořené portlety
– Záložkový portlet
– Personifikace obsahu – podle jazyka, času nebo jiných podmínek
› Strukturované články
– CMS jako rychlé datové úložiště

19. Internal
19
Cesta k záložkovému portletu
› Portlety se vkládají do stránky
– Drag & drop do drop zóny
– Drop zóna = div element s určenou třídou
– Rozmístění ve stránce dané layout šablonou
› Můžeme vložit portlet do portletu?

20. Internal
20
Layout stránky
column-1
column-2 column-3
column-4

21. Internal
21
Dynamický layout stránky
column-1
column-2
c
o
l
u
m
n
-
3
-
1
c
o
l
u
m
n
-
3
-
2
c
o
l
u
m
n
-
3
-
3
c
o
l
u
m
n
-
3
-
4
c
o
l
u
m
n
-
3
-
5
column-4

22. Internal
22
Záložkový portlet
› Konfigurovatelné záložky
– Jméno, url, časová platnost
– Layout šablona (různá)
› Výběr záložky určuje, jaký obsah se zobrazí

23. Internal
23
Záložkový portlet – vložení portletu
› Drag & drop portletu do záložky

24. Internal
24
Záložkový portlet – editace záložky

25. Internal
25
Další aplikace vnořených portletů
› Zobrazení obsahu podle jazyka
– Plné znění článku v češtině vs. obecné upozornění na nedostupnost
anglické verze
› Zobrazení obsahu podle obecné podmínky ~ personifikace
– Jde o přihlášeného uživatele?
– Jde o uživatele s aktivovanou zákaznickou kartou?
– Jde o uživatele s průměrným zůstatkem nad 50.000 Kč?

26. Internal
26
Příklad – fulltextové hledání pobočky
› Hledání názvu pobočky / prodejního místa

27. Internal
27
Strukturované články
› Liferay CMS jako úložiště dat ve formě strukturovaných článků
› Strukturované články
– Texty, HTML fragmenty
– Kolekce obrázků (malý pro seznam, velké pro banner na detailu)
– GPS pozice s Google našeptávačem
› Co získám hned
– Komfortní administrátorské rozhraní
– Kategorie, plánovaná publikace, přístupová práva
– API pro CRUD operace
– Newsletter s novinkami, RSS feed
› Prezentace
– Jednodušší - Jako obyčejný článek přes Web Content Display
– Složitější - ADT šablona
– Zvládne cokoliv – Portlet

28. Internal
28
Partnerský program

29. Internal
29
Partnerský program – detail akce
› Jiný pohled na stejná data

30. Internal
30
Partnerský program – seznam akcí

31. Internal
31
Partnerský program – editace akce

32. Internal
32
Partnerský program – struktura akce

33. Internal
Meziportletová
komunikace
• 30.5.2

34. Internal
34
Proč je důležité na to myslet
…
Služby
Validace
Přechody
Testování
FE Framework
MVP vs. MVC
…

35. Internal
35
Screen flow – začátek projektu
Portlet
Portlet
Portlet Portlet
Portlet
Portlet
Portlet
Portlet
Portlet
Portlet
Portlet
Portlet
Portlet
Portlet
Portlet
Portlet
Portlet
Portlet PortletPortlet

36. Internal
36
Screen flow – během projektu
Portlet
Portlet
Portlet
Portlet Portlet
Portlet
Portlet
Portlet
Portlet
Portlet
Portlet
Portlet
Portlet
Portlet PortletPortlet
Portlet
Portlet
Portlet
Portlet

37. Internal
37
Liferay Wiki
› web.liferay.com/community/wiki/-
/wiki/Main/Portlet+to+Portlet+Communication
› Portlet session
› Inter Portlet Communication Mechanisms
– Public Render Parameters – JSR168
– IPCEvent – JSR268
– Client-Side IPC – JSR268
› Cookies

38. Internal
38
Přístup v ČSOB - Session
› Předávání informací přes Session
– Nutnost pamatování si předchozích stavů
• Tlačítko zpět
– Vlastní řešení historie přechodů
Portlet B
Portlet C Portlet D
Portlet A

39. Internal
39
Přístup v ČSOB - URL
› Předávání přes URL
– Funkční tlačítko F5 a zpět
– Omezená délka URL
– Nutná serializace
– Bezpečnost - nutnost část URL šifrovat
https://banka.cz/?page=1191987984941561894189194798769411

40. Internal
Diskuze

41. Internal
Úplná mobilní
responzivita a rebranding
(MONETA Money Bank)
Daniel Remiš 30. května 2017

42. Internal
42
Agenda
› Náhled uskutečněných projektů
– Nový mobilní portál
– Rebranding mobilního portálu
– Responzivní landing pages
› Na co nezapomenout při zadávání grafických projektů
– Standardní zadání
– Responzivita
– Testovací zařízení
– Kontrola grafiky
– UX dokumentace
› Nástroje využívané k vývoji grafiky
– Resource Override
– PerfectPixel
– BrowserStack
– Další doporučení pro vývoj grafiky

43. Internal
Náhled uskutečněných
projektů

44. Internal
44
Nový mobilní portál

45. Internal
45
Rebranding mobilního portálu

46. Internal
46
Responzivní landing pages

47. Internal
Na co nezapomenout při
zadávání grafických
projektů

48. Internal
48
Zadávání implementace grafických projektů
› PSD
– Jeden návrh grafiky
– Žádné další informace
› Starší verze wireframu
– Změny nejsou vždy zaneseny
– Pouze komentáře o požadovaných rozdílech
› Požadavek kompatibility
– Napříč prohlížeči a platformami
– Každá varianta má stejnou váhu
› Implementace musí důsledně odpovídat návrhu
– Pixel-perfect požadavek
– Včetně zalomení a délky obsahu
› Vzhled musí být responzivní
– Po stranách nesmí být pruhy

49. Internal
49
Responzivita
› Určení bodů zlomu pro zobrazení
– Mobilní x tablet x desktop
– Například: 600px a 1000px
› Jeden grafický návrh nepostačuje
– Pro každé zobrazení musí být navržena grafika
› Popis chování elementů
– Změna rozložení bloků
• Skrývání a zalomení částí
– Každý element může mít jiné hraniční přechody

50. Internal
50
Testovací zařízení
› Funkčnost nelze garantovat univerzálně
› Je třeba určit priority pro vývoj a odladění
› Očekávatelné problémy:
– Variabilita rozlišení – responzivita – device-pixel-ratio
– Každá verze prohlížeče není dostupná na každou verzi OS
– Prohlížeče mají vlastní bugy (Firefox)
– Prohlížeče mají vlastní zápisy vlastností (IE, prefixové zápisy CSS3)
› Je třeba definovat (malou a smysluplnou) množinu testovacích
telefonů, verzi OS, verzi prohlížeče
– Ideálně na základě měření přístupů
– Konkrétní zařízení je třeba mít dostupná pro vývoj

51. Internal
51
Kontrola grafiky
› Návrh grafiky musí obsahovat i validační části (interaktivní prvky)
› Stávající funkcionalita musí být zachována
› Každá nová funkce musí mít navrženy potřebné bloky
› Grafika musí zohlednit „neoptimálnost“ obsahu
– Dynamicky měněný text
– Zarovnání hodnot (desetinná čárka)

52. Internal
52
UX dokumentace
› Strukturovaný textový popis základních myšlenek návrhu
(dokumentace grafického návrhu)
› Základní pravidla k dodržování pro změny při vývoji
› Popis chování (responzivita)
› Stylesheet
– Návrh základních struktur
• Header
• Menu
• Footer
– Nadpisy – H1, … Hx
– Odstavce, formátovaný text
– Formulářové prvky – input, selectbox, radiobutton, checkbox, button
– Nabídky, skryté bloky, validace

53. Internal
Nástroje

54. Internal
54
Resource Override
› Rozšíření, které umožní získat kontrolu nad zobrazovaným
obsahem – umožňuje nahrazovat a doplňovat načítaný obsah.
› Používáno pro:
– Nahrazení načítaných stylů lokální (upravenou) verzí
– Doplnění definice stylů – například definování nových fontů
– Nahrazení zdrojových URL obrázků a fontů
› Možnost definovat oddělená pravidla pro různé domény
› Umožní vývoj grafiky bez nutnosti opakovaného nasazování aplikací
– Pro vývoj grafiky postačuje pouze prohlížeč
– Není nutné mít lokální vývojové prostředí
› V případě nezměněné struktury webu je možné využití k náhledu
připravovaných změn na produkčních datech
› https://chrome.google.com/webstore/detail/resource-
override/pkoacgokdfckfpndoffpifphamojphii

55. Internal
55
Resource Override

56. Internal
56
PerfectPixel
› Pomoc při vývoji grafiky s požadavkem naprosto přesného
kopírování návrhu vzhledu
› Zobrazí průhledný obrázek jako horní vrstvu
– Je možné měnit průhlednost, pozici i velikost
› https://chrome.google.com/webstore/detail/perfectpixel-by-
welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi

57. Internal
57
BrowserStack
› Není nutné mít na lokálním stroji množství emulátorů
› Běží v prohlížeči
› Testování napříč platformami, systémy, prohlížeči a jejich verzemi
› Umožňuje testovat web běžící na lokálním prostředí
› Nabízí testování na reálných zařízeních
– Nepostradatelné pro vývoj mobilních (responzivních) verzí stránek
› Prohlížeče obsahují vývojové nástroje
› https://www.browserstack.com

58. Internal
58
Další doporučení pro vývoj grafiky
› Využití preprocesorů CSS – SASS/LESS
– Umožnění parametrizace a objektového přístupu
› Automatizace – Grunt task runner
– AutoS prefixer
• Doplnění prefixových notací pro slabě podporované vlastnosti
– Javacript a CSS minifikace
› Bower – správa zdrojů
– Dotahování JavaScript a CSS knihoven
› BrowserSync
– Pokročilé ladění grafiky včetně zjednodušené vzdálené konzole
› SVG – univerzál budoucnosti
– Vektorový formát grafiky pro web

59. Internal
59
Dotazy

60. Internal
Profinit EU, s.r.o.
Tychonova 2, 160 00 Praha 6 | Telefon + 420 224 316 016
Web
www.profinit.eu
LinkedIn
linkedin.com/company/profinit
Twitter
twitter.com/Profinit_EU
Facebook
facebook.com/Profinit.EU
Youtube
Profinit EU
Děkujeme
za pozornost