Kontrola kvality webovéhoprojektu

Ivan Potančok

CEO @ vibration.skCEO @ sellio.net

Obsah prednášky

• Úvod

• Typy kontroly

• Finálna kontrola - čo by mal obsahovať každýhotový web

• Formulár na stiahnutie

• Diskusia

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

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

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

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ámpingujú web pravidelne a keď sa vráti 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ámtvorca

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

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žalgrafického návrhukodé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, alebosplniteľ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

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

• …

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?

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

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žitie alebo bol zaškolený?

• Nemôže klient pokaziť vzhľad webu zmenou nastavení v administrácii?

• https://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ú 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á?

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?

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

• https://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 title?

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?

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?

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

• WP Debug mode – chyby a varovania

Zdroje

• Checklist aj s odkazmi na online nástroje

• http://webdevchecklist.com/

• Článok o validovaní WordPress šablón pre ThemeForest

Na stiahnutie

• http://vibration.sk/wordcamp2015/checklist.xlsx

• http://vibration.sk/wordcamp2015/checklist.pdf

Diskusia

• http://vibration.sk

• http://sellio.net