Quality control in web development. Finalisation of the web project, project checklist, project guideline and templates

1. Kontrola kvality webového
projektu
Ivan Potančok
CEO @ vibration.sk
CEO @ sellio.net

2. Obsah prednášky
• Úvod
• Typy kontroly
• Finálna kontrola - čo by mal obsahovať každý
hotový web
• Formulár na stiahnutie
• Diskusia

3. Na čo je dobrá kontrola kvality?
• Nájdenie zabudnutých úloh
• Nájdenie nedostatkov - odladenie chýb
• Vylepšenie SEO
• Zvýšenie výkonnosti webu
• Zlepšenie použiteľnosti
• Zvýšenie produktivity pri ďalších projektoch

4. Typy kontroly
• Podľa času
• počas vývoja
• pri finalizovaní projektu
• po spustení
• Ďalšie typy
• kontrola po sebe
• kontrola svojej časti diela
• finálna kontrola
• uživateľské testovanie

5. počas vývoja
• po dokončení html+css šablón
• unit testy - pri developmentovaní
rozsiahlejších častí - plugin, šablónový engine
• priebežné zasielanie náhľadu webu klientovi

6. pri finalizovaní projektu
• checklist
• užívateľské testovanie

7. po spustení
• audit aktuálneho stavu webu
• po aktualizácii systému
– pokiaľ používate pluginy, je dobré skontrolovať
funkčnosť webu

8. priebežná kontrola
• správne nastavený webmaster tools - alert keď
nevie indexovať google
• ping servera - sú free služby, ktoré vám
pingujú web pravidelne a keď sa vráti chyba,
tak pošlú email alebo SMS

9. priebežná kontrola
príklady zoznamu:
• odovzdať správne pomenované psd súbory
• usporiadané zrozumiteľne v skupinách
• pripraviť všetky písma
• kontrola kontrastu písma na podklade
• ...

10. kontrola po sebe
• každú časť môže kontrolovať po sebe sám
tvorca
• treba mať vždy zoznam (na nič nezabudnem)
• je dobré mať pripravené templaty projektu
(začiatok projektu je rýchlejší)
• Zaradťe kontrolu do template projektu
• Automatizujte kontrolu (napr. developer
validácia kódu, zbehnuté testy)

11. kontrola svojej časti diela
• počas celého projektu
• používanie služieb na kolaboráciu (git, dropbox, google
drive, ftp, asana, skype, basecamp)
• dev verzia pod loginom(wp under construction
• https://wordpress.org/plugins/underconstruction/
• po odovzdaní grafiky nekončí práca na webe
napríklad:
dizajnér by mal kontrolovať po html kodérovi, či sa držal
grafického návrhu
kodér kontroluje či je správne html a css implementované do
CMS

12. finálna kontrola
• je osvedčené, keď kontrolu robí osoba, ktorá
zodpovedá za odovzdanie diela
• napríklad u nás projekt manager
• Niekedy dizajnér, kodér a wp programátor v
jednom
• Niekedy nezaujatá osoba je lepšia

13. uživateľské testovanie
• kontrolujeme, či sú zrozumiteľné kroky, alebo
splniteľné hlavné ciele
• či je zrozumiteľná navigácia
• náročnejšie na čas
• často krát odhalí nezmysli, ktoré si
programátori neuvedomia

14. Časti kontroly
1. Ciele projektu
2. Grafika a Použiteľnosť
3. Obsah
4. Kód

15. Ciele projektu
• Je jasná cesta k cieľu stránky?
• Dajú sa ľahko nájsť kontakty?
• Je formulár alebo call-to-action k formuláru na
úvodnej stránke?
• Dá sa na telefóne kliknúť na telefónne číslo?
• Má stránka social share?
• Je nastavené meranie konverzií?
• Je nastavený google analytics pre eccomerce?
• …

16. Grafika a Použitelnosť – navigácia
• Dostanem sa kliknutím na logo na úvodnú
stránku?
• Je hlavné menu dostatočne viditeľné v hornej
lište?
• Je navigácia konzistentná?
• Sú odkazy a tlačítka s jasným označením?
• Nie je počet tlačidiel v menu prehnaný?
• Sú odkazy dostatočne výrazné a podčiarknuté?
• Sú na stránke breadcrumbs?

17. Grafika a Použitelnosť – formuláre
• Nie sú vo formulári zbytočné polia?
• Je vyhľadávanie s výrazným a jasným tlačidlom na
viditeľnom mieste?
• Sú správne zvolené input polia?
• Formuláre sú niekedy pekne zložité
• https://econsultancy.com/blog/64669-21-first-
class-examples-of-effective-web-form-design/
• http://www.amazon.com/Web-Form-Design-
Filling-Blanks/dp/1933820241

18. Grafika a Použitelnosť – kontrast
• Je dost veľký kontrast medzi písmom a
pozadím?
• Je veľkosť fontu dostatočne veľká na každom
mieste?
• Je font ľahko čitateľný?
• Vieme rozoznať všetky linky od textu?

19. Grafika a Použitelnosť – tlač
• Vyzerá stránka ok bez štýlov?
• Dá sa stránka vytlačiť a vyzerá to dobre?
• Dá sa jednoducho vytlačiť mapa?

20. Grafika a Použitelnosť – E-commerce
• Je košík stále viditeľný?
• Viem sa dostať na obchodné podmienky?
• Je proces objednávky a registrácie
jednoduchý?
• ...

21. Grafika a Použitelnosť – Administrácia
• Má klient návod na použitie alebo bol
zaškolený?
• Nemôže klient pokaziť vzhľad webu zmenou
nastavení v administrácii?
• https://wordpress.org/plugins/admin-menu-
editor/

22. Obsah
• Obsah obsahuje copyright a odkaz na tvorcu web
stránky
• Je v obsahu stránky aspoň 100 slov?
• Majú title správny tvar a hovoria o čom je daná
stránka?
• Je obsah na každej stránke?
• Je spomenutý názov stránky na úvodnej stránke?
• Sú úvodné, výrazné texty stručné a jasné?
Neobsahujú zbytočné slová?

23. Obsah
• Je na úvodnej stránke vysvetlené, čo je to „to”,
čo ponúkate?
• Sú na úvodnej stránke uvedené vaše
konkurenčné výhody?
• Text je gramaticky a štylysticky správne?

24. Kód - Validácia
• Je HTML validné?
• Je CSS validné?
• Je javacsript bez erroru?
• Majú obrázky vložené alt tagy?
• Bola stránka testovaná na ie?
• Bola stránka testovaná na opera?
• Bola stránka testovaná na firefox?
• Bola stránka testovaná na safari?
• Bola stránka testovaná na chrome?

25. Kód - Responzivita
• Je nastavený viewport?
• Funguje responzivita správne?
• Bola responzivita testovaná aj na iphone?
• Bola responzivita testovaná aj na ipade?
• Bola responzivita testovaná aj na androide?
• Je pripravený web na retina displaye?
• Bol web testovaný na rozlíšení 1024 x 768?
• Bol web testovaný na veľkom rozlíšení?
2560x1920

26. Kód - Rýchlosť načítania
• Je zapnuté cachovanie?
• Načítava sa stránka dostatočne rýchlo?
• Je veľkosť obrázkov prispôsobená pre 3G?
• https://developers.google.com/speed/pagesp
eed/insights/
•

27. Kód - URL adresy
• Všetky linky ukazujú správne?
• Majú adresy URL správny tvar?
• Majú dôležité odkazy title?

28. Kód - SEO
• Je vložený google analytics?
• Existuje google sitemapa?
• Pridal si stránku do google web master tools?
• Je pripojený robots.txt?
• Je nastavený google authorship pri autoroch?
• Sú v kóde použité rich snippets?

29. Kód - Iné
• Je na stránke favicon?
• Ide web bez www aj s www?
• Má každý button a link hover?
• Má stránka naštýlovanú stránku 404 not
found?

30. Kód - Bezpečnosť
• Sú zabezpečené všetky polia proti cross site
útokom?
• Je zabezpečený login do administrácie?

31. Kód - Automatizácia
• Webmastertools – testovanie indexovaných
stránok
• Chrome code inspector – validácia javascriptu
• WP Debug mode – chyby a varovania

32. Zdroje
• Checklist aj s odkazmi na online nástroje
• http://webdevchecklist.com/
• Článok o validovaní WordPress šablón pre
ThemeForest

33. Na stiahnutie
• http://vibration.sk/wordcamp2015/checklist.x
lsx
• http://vibration.sk/wordcamp2015/checklist.p
df

34. Diskusia
• http://vibration.sk
• http://sellio.net