Kontrola  kvality  webového  projektu  

Ivan Potančok

CEO @ vibration.sk CEO @ sellio.net

 

Obsah  prednášky  

•  Úvod  •  Typy  kontroly  •  Finálna  kontrola  -­‐  čo  by  mal  obsahovať  každý  hotový  web  

•  Formulár  na  s@ahnu@e  •  Diskusia  

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  

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    

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  

pri  finalizovaní  projektu  

•  checklist    •  užívateľské  testovanie  

po  spustení  

•  audit  aktuálneho  stavu  webu  •  po  aktualizácii  systému  

– pokiaľ  používate  pluginy,  je  dobré  skontrolovať  funkčnosť  webu  

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  

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  •  ...  

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)  

 

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  

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  

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  

ČasE  kontroly  

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

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?    •  …  

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?    

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  

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?      

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?    

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ý?  

•  ...  

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/  

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á?  

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?  

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?  

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  

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/  

•     

Kód  -­‐  URL  adresy    

•  Všetky  linky  ukazujú  správne?    •  Majú  adresy  URL  správny  tvar?    •  Majú  dôležité  odkazy  @tle?    

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?    

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?    

Kód  -­‐  Bezpečnosť    

•  Sú  zabezpečené  všetky  polia  pro@  cross  site  útokom?    

•  Je  zabezpečený  login  do  administrácie?    

Kód  -­‐  Automa@zácia  

•  Webmastertools  –  testovanie  indexovaných  stránok  

•  Chrome  code  inspector  –  validácia  javascriptu  •  WP  Debug  mode  –  chyby  a  varovania  

Zdroje  

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

Na  sEahnuEe  

•  h_p://vibra@on.sk/wordcamp2015/checklist.xlsx  

•  h_p://vibra@on.sk/wordcamp2015/checklist.pdf  

Diskusia  

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