Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
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
Próxima SlideShare
Cargando en…5
×

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

672 visualizaciones

Publicado el

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

Publicado en: Tecnología

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

×