Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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 stiahnutie
...
Na čo je dobrá kontrola kvality?
• Nájdenie zabudnutých úloh
• Nájdenie nedostatkov - odladenie chýb
• Vylepšenie SEO
• Zv...
Typy kontroly
• Podľa času
• počas vývoja
• pri finalizovaní projektu
• po spustení
• Ďalšie typy
• kontrola po sebe
• kon...
počas vývoja
• po dokončení html+css šablón
• unit testy - pri developmentovaní
rozsiahlejších častí - plugin, šablónový e...
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...
priebežná kontrola
• správne nastavený webmaster tools - alert keď
nevie indexovať google
• ping servera - sú free služby,...
priebežná kontrola
príklady zoznamu:
• odovzdať správne pomenované psd súbory
• usporiadané zrozumiteľne v skupinách
• pri...
kontrola po sebe
• každú časť môže kontrolovať po sebe sám
tvorca
• treba mať vždy zoznam (na nič nezabudnem)
• je dobré m...
kontrola svojej časti diela
• počas celého projektu
• používanie služieb na kolaboráciu (git, dropbox, google
drive, ftp, ...
finálna kontrola
• je osvedčené, keď kontrolu robí osoba, ktorá
zodpovedá za odovzdanie diela
• napríklad u nás projekt ma...
uživateľské testovanie
• kontrolujeme, či sú zrozumiteľné kroky, alebo
splniteľné hlavné ciele
• či je zrozumiteľná navigá...
Časti 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-action k form...
Grafika a Použitelnosť – navigácia
• Dostanem sa kliknutím na logo na úvodnú
stránku?
• Je hlavné menu dostatočne viditeľn...
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 n...
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 ...
Grafika a Použitelnosť – tlač
• Vyzerá stránka ok bez štýlov?
• Dá sa stránka vytlačiť a vyzerá to dobre?
• Dá sa jednoduc...
Grafika a Použitelnosť – E-commerce
• Je košík stále viditeľný?
• Viem sa dostať na obchodné podmienky?
• Je proces objedn...
Grafika a Použitelnosť – Administrácia
• Má klient návod na použitie alebo bol
zaškolený?
• Nemôže klient pokaziť vzhľad w...
Obsah
• Obsah obsahuje copyright a odkaz na tvorcu web
stránky
• Je v obsahu stránky aspoň 100 slov?
• Majú title správny ...
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ýh...
Kód - Validácia
• Je HTML validné?
• Je CSS validné?
• Je javacsript bez erroru?
• Majú obrázky vložené alt tagy?
• Bola s...
Kód - Responzivita
• Je nastavený viewport?
• Funguje responzivita správne?
• Bola responzivita testovaná aj na iphone?
• ...
Kód - Rýchlosť načítania
• Je zapnuté cachovanie?
• Načítava sa stránka dostatočne rýchlo?
• Je veľkosť obrázkov prispôsob...
Kód - URL adresy
• Všetky linky ukazujú správne?
• Majú adresy URL správny tvar?
• Majú dôležité odkazy title?
Kód - SEO
• Je vložený google analytics?
• Existuje google sitemapa?
• Pridal si stránku do google web master tools?
• Je ...
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ú st...
Kód - Bezpečnosť
• Sú zabezpečené všetky polia proti cross site
útokom?
• Je zabezpečený login do administrácie?
Kód - Automatizácia
• Webmastertools – testovanie indexovaných
stránok
• Chrome code inspector – validácia javascriptu
• W...
Zdroje
• Checklist aj s odkazmi na online nástroje
• http://webdevchecklist.com/
• Článok o validovaní WordPress šablón pr...
Na stiahnutie
• http://vibration.sk/wordcamp2015/checklist.x
lsx
• http://vibration.sk/wordcamp2015/checklist.p
df
Diskusia
• http://vibration.sk
• http://sellio.net
Upcoming SlideShare
Loading in …5
×

Kontrola kvality webového projektu - Ivan Potančok - WordCamp2015

665 views

Published on

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

Published in: Technology

Kontrola kvality webového projektu - Ivan Potančok - WordCamp2015

  1. 1. Kontrola kvality webového projektu Ivan Potančok CEO @ vibration.sk CEO @ sellio.net
  2. 2. Obsah prednášky • Úvod • Typy kontroly • Finálna kontrola - čo by mal obsahovať každý hotový web • Formulár na stiahnutie • Diskusia
  3. 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. 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. 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. 6. pri finalizovaní projektu • checklist • užívateľské testovanie
  7. 7. po spustení • audit aktuálneho stavu webu • po aktualizácii systému – pokiaľ používate pluginy, je dobré skontrolovať funkčnosť webu
  8. 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. 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. 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. 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. 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. 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. 14. Časti kontroly 1. Ciele projektu 2. Grafika a Použiteľnosť 3. Obsah 4. Kód
  15. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 27. Kód - URL adresy • Všetky linky ukazujú správne? • Majú adresy URL správny tvar? • Majú dôležité odkazy title?
  28. 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. 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. 30. Kód - Bezpečnosť • Sú zabezpečené všetky polia proti cross site útokom? • Je zabezpečený login do administrácie?
  31. 31. Kód - Automatizácia • Webmastertools – testovanie indexovaných stránok • Chrome code inspector – validácia javascriptu • WP Debug mode – chyby a varovania
  32. 32. Zdroje • Checklist aj s odkazmi na online nástroje • http://webdevchecklist.com/ • Článok o validovaní WordPress šablón pre ThemeForest
  33. 33. Na stiahnutie • http://vibration.sk/wordcamp2015/checklist.x lsx • http://vibration.sk/wordcamp2015/checklist.p df
  34. 34. Diskusia • http://vibration.sk • http://sellio.net

×