Zadání pro stáž — Front-end úrovně 1

Fork repa, ve kterém budete pracovat

https://github.com/MinistryOfJusticeCZ/staz-fe-l1

Úkol

• Na základě přiložených wireframů¹ sestavit nefunkční prototyp webové chatu a ten zagitovat a deployovat
• Review kódu bude požadováno přes issues v daném Git nástroji
• Prototyp musí splňovat úroveň AA standardu WCAG 2.1
  • To znamená, nainstalovat aXe a společně Lighthousem otestovat, a prototyp podle výsledných doporučení opravit
• Prototyp bude oznamovat změny uživatelům s odečítačkami obrazovaky dle: https://accessibility.blog.gov.uk/2016/12/09/patterns-for-accessible-webchats/

Písemný úkol

Do konce stáže odpovědět na tyto otázky:

1. Výhody a nevýhody modálních oken:
   • uživatelský pohled
     • kdy je vhodné použít modální okno?
     • jaký je typický příklad takového okna?
   • pohled z hlediska přístupnosti
     • na co si dát pozor při stavění modálních oken?

Požadavky na kód

• CSS pre-processor: Sass
• CSS architektura: BEM
• Stránka postavena bez frameworků jako Bootstrap, UIkit apod.

Scénář (nepovinné)

https://userresearch.blog.gov.uk/wp-content/uploads/sites/102/2016/12/webchat-roleplay-photo-.png

Prerekvizita

Seznámení se s termíny:

• Git
• SOLID, KISS, YAGNI
• Licence
• Sémantické verzování
• SSH
• Design patterns
• Kódování znaků
• Dependence
• Deployment
• Node.js na https://www.youtube.com/watch?v=U8XF6AFGqlc a https://www.youtube.com/watch?v=fBNz5xF-Kx4
• A11Y

Nástroje, které se budou používat

• Figma
• Node.js + Express + npm
• Handlebars (případně jiný templatovací jazyk)
• Heroku
• HTML5 + Sass + JS
• GitHub
• aXe + Lighthouse
• Windows Narrator (Předčítání)

Footnotes

1. Na stránce Figma: https://www.figma.com/file/9W3JxMY38VFQ0rDUvoid0Y/justice_webchat?node-id=0%3A ↩