Quality control in web development.

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
s@ahnu@e
• Diskusia

3. Na
čo
je
dobrá
kontrola
kvality?
• Nájdenie
zabudnutých
úloch
• Nájdenie
nedostatkov
-­‐
odladenie
chýb
• Vylepšenie
SEO
• Zvýšenie
výkonnos@
webu
• Zlepšenie
použiteľnos@
• Zvýšenie
produk@vity
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
čas@
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
časR
-­‐
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á@
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
• Automa@zujte
kontrolu
(napr.
developer
validácia
kódu,
zbehnuté
testy)

11. kontrola
svojej
časE
diela
• počas
celého
projektu
• používanie
služieb
na
kolaboráciu
(git,
dropbox,
google
drive,
^p,
asana,
skype,
basecamp)
• dev
verzia
pod
loginom(wp
under
construc@on
• h_ps://wordpress.org/plugins/underconstruc@on/
• 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. ČasE
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-­‐ac@on
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
analy@cs
pre
eccomerce?
• …

16. Grafika
a
Použitelnosť
–
navigácia
• Dostanem
sa
kliknuRm
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é
• h_ps://econsultancy.com/blog/64669-­‐21-­‐first-­‐
class-­‐examples-­‐of-­‐effec@ve-­‐web-­‐form-­‐design/
• h_p://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ži@e
alebo
bol
zaškolený?
• Nemôže
klient
pokaziť
vzhľad
webu
zmenou
nastavení
v
administrácii?
• h_ps://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ú
@tle
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
grama@cky
a
štylys@cky
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
re@na
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?
• h_ps://developers.google.com/speed/
pagespeed/insights/
•

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

28. Kód
-­‐
SEO
• Je
vložený
google
analy@cs?
• 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ý
bu_on
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
pro@
cross
site
útokom?
• Je
zabezpečený
login
do
administrácie?

31. Kód
-­‐
Automa@zá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
• h_p://webdevchecklist.com/
• Článok
o
validovaní
WordPress
šablón
pre
ThemeForest

33. Na
sEahnuEe
• h_p://vibra@on.sk/wordcamp2015/
checklist.xlsx
• h_p://vibra@on.sk/wordcamp2015/
checklist.pdf

34. Diskusia
• h_p://vibra@on.sk
• h_p://sellio.net