WeTestWeb

Bardzo często budując stronę internetową chcemy, aby była ładna, aby miała “fajne” funkcje i dużo “bajerów”. Często wzorujemy się na stronach, które nam się podobają. Niestety równie często zapominamy o tym, co w rzeczywistości jest najważniejsze – czego na stronie szukać będą nasi klienci/czytelnicy/użytkownicy,  jak będą to robić oraz kim są.

Świetnym przykładem takiej strony może być serwis internetowy wrocławskiej Straży Miejskiej. Zastanówmy się, jakich informacji mogą szukać odwiedzający tę stronę? Mnie przychodzą do głowy następujące rzeczy:

• informacje kontaktowe (przede wszystkim telefon alarmowy, który powinien być bardzo łatwy do znalezienia – w końcu jest telefonem alarmowym),
• instrukcje, jak, co i gdzie załatwić,
• jakiś kontakt z mieszkańcami (np. odpowiedzi na często zadawane pytania),
• ogłoszenia, aktualności, itd.

Przyjrzyjmy się zatem stronie http://strazmiejska.wroclaw.pl

Jak widać, na pierwszy rzut oka wszystko wygląda w porządku. Telefon alarmowy jest dość widoczny.

Niestety został on umieszczony w animowanym obrazku. Niby nie jest to żaden problem, gdyż animacja jest stosunkowo prosta i nie utrudnia odczytania numeru. Okazuje się jednak, że nie jest to do końca prawda.

W przypadku strony Straży Miejskiej istnieje dość spore ryzyko, że będziemy ją oglądać na telefonie komórkowym (jeśli chcemy skorzystać z telefonu alarmowego, to przecież nie będziemy czekać, aż znajdziemy się w pobliżu komputera). I tu właśnie pojawia się problem. Spora większość telefonów animacji tej nie wyświetla (a dokładniej wyświetla jej pierwszą klatkę – patrz obrazek obok).

Oczywiście nie ma jeszcze tragedii. Numer ten można znaleźć w innym miejscu. Sprawdź, jak szybko Ci się tu uda (najlepiej spróbuj za pomocą przeglądarki w telefonie). Aby dotrzeć do tej informacji wystarczy:

• wybrać pozycję “Kontakt” z menu (i poczekać, aż strona załaduje się nam ponownie – wyświetli się w zasadzie to samo, ale menu “Kontakt” będzie tym razem rozwinięte),
• wybrać pozycję “Adresy i telefony”,
• przejrzeć stronę z dość obszerną tabelką zawierającą wszystkie sposoby kontaktu i dostrzec, że na samym jej dole znajduje się poszukiwany numer 986.

Pomyśl teraz o własnej stronie internetowej. Zastanów się, czego szukają na niej użytkownicy. Odwiedź ją teraz sam i sprawdź, czy informacje te są łatwe do znalezienia. Jeśli istnieje taka możliwość, poproś o znalezienie tych informacji także kogoś innego (członka rodziny, znajomego, itd. – ktokolwiek będzie pod ręką). Obserwuj jak to robi, gdzie szuka i z czym ma problemy.

PS. Ciekawe, jak wiele osób odwiedzających stronę wrocławskiej Straży Miejskiej jest zainteresowana tym, ile osób aktualnie ją ogląda oraz ile osób odwiedziło ją danego dnia (informacja ta wyświetlana jest tuż pod głównym menu).

Niecałe dwa tygodnie temu gazeta.pl opisała przypadek konkursu organizowanego przez Ministerstwo Rozwoju Regionalnego. Za pomocą strony http://przymierzsie.pl można było zagłosować na najciekawszy projekt. Niestety internauci bardzo szybko zauważyli, że można dość łatwo oszukać i oddać znacznie więcej niż jeden głos.

Nie jest to pierwsza głośna wpadka internetowego głosowania. Kilka miesięcy temu Wrocław opublikował na swoich stronach internetowych sondę, w której mieszkańcy mogli wybierać, jak ma wyglądać nowy Tramwaj Plus. Sonda ta była trzykrotnie zdejmowana – za każdym razem z powodu wykrycia oszustw.

Zapewne dziwisz się, jak to możliwe, że nawet tak spore przedsięwzięcia nie radzą sobie z tak (mogłoby się wydawać) prostym problemem. Okazuje się jednak, że zagadnienie to wcale nie jest takie trywialne.

Gdzie tkwi trudność?

Żeby uniemożliwić oddanie drugiego głosu, sonda musi zapamiętać, że ta osoba już głosowała. Oczywiste, prawda? Jednak właśnie ta czynność wcale nie jest taka prosta, gdyż przeglądarka nie informuje strony internetowej, że to właśnie Ty oddałeś głos. Dostępne są jedynie informacje o tym, że:

• głos został oddany z komputera o danym adresie IP – może być wspólny dla wielu komputerów (zdarza się to dość często w sieciach osiedlowych), może być zmienny (np. jeśli korzystamy z neostrady),
• za pomocą danej przeglądarki internetowej i systemu operacyjnego – można mieć jednocześnie kilka przeglądarek i systemów operacyjnych na jednym komputerze.

Ponadto, jeśli użytkownik na to pozwoli, możemy ustawić mu tzw. ciasteczko. Użytkownik może je jednak w każdej chwili usunąć (musi jedynie wiedzieć, jak to zrobić).

Jeśli nie całkowicie, to może choć trochę?

Teraz zapewne domyślasz się już, że bardzo trudno jest sprawić, aby użytkownik mógł oddać tylko jeden głos oraz by jednocześnie każdy mógł zagłosować. Korzystając tylko z powyższych informacji jest to wręcz niemożliwe.

Ważne zatem, aby zabezpieczyć się przed najpoważniejszym zagrożeniem – automatami oddającymi głosy. W tym celu możesz wykorzystać np. captchę (na pewno spotkałeś się już z różnego typu nieczytelnymi obrazkami, których zawartość należy przepisać).

Dość dobrze jest także bazować na czymś więcej niż tylko ciasteczku (część użytkowników ma je po prostu wyłączone).

Gdy jednak postanowisz zapisywać w bazie danych jakieś informacje o użytkownikach, warto zabezpieczyć się przed kontrolą z GiODO. Ponieważ jednak wcale nie musimy umieć odczytać, z jakich adresów IP i za pomocą jakich przeglądarek oddano głosy, wystarczy, że zapamiętamy jakiś kod wygenerowany na podstawie tych danych. Powinien on zapewniać, że z bardzo dużym prawdopodobieństwem nie uzyskamy tego samego kodu dla różnych danych oraz że znając kod, nie będziemy umieli odgadnąć z jakich danych powstał. Na szczęście nie musimy sami wymyślać takiego mechanizmu. Znane są bowiem tzw. funkcje haszujące (np. md5, sha1, itd.).

W przypadku bardzo ważnych głosowań możemy posunąć się o jeszcze jeden krok dalej i prosić użytkownika o zarejestrowanie się lub potwierdzenie oddanego głosu za pomocą kliknięcia w link otrzymany emailem (na pewno nie raz już otrzymałeś takiego emaila). W takim przypadku warto jedynie uważać na serwisy typu mailinator.com.

Świadomość niedoskonałości

Teraz już wiesz, że Twoje sondy także przekłamują wyniki. Ważne jednak, by sprawić, że będą one jak najmniej odbiegały od rzeczywistości.

Śmiało – sprawdź teraz, w jaki sposób działają Twoje sondy. Jeśli nie jesteś w stanie sprawdzić tego sam, zapytaj o to ich twórców.

Niemożliwe? Przyjrzyjmy się zatem stronie SunsetSuits.pl. Aby ułatwić Ci zadanie, poniżej zamieściłem trzy zrzuty ekranu. Pokazują one tę właśnie stronę, otwartą w przeglądarce w trzech różnych rozdzielczościach ekranu:

• 1200×1600 (monitor w proporcjach 4:3 ustawiony pionowo),
• 1600×1200 (typowy monitor o proporcjach 4:3),
• 1280×800 (rozdzielczość popularna w dzisiejszych laptopach).

Ciekawe, czy domyślasz się już, z jakiego monitora korzystają osoby odpowiedzialne za tę stronę.

A czy Ty sprawdziłeś kiedykolwiek, jak wygląda Twoja strona w różnych rozdzielczościach? Czy jesteś pewien, że nie ukrywa ona części informacji (na przykład loga Twojej firmy) przed częścią odwiedzających?

W poprzednim wpisie obiecałem Ci, że pokażę, jak sprawdzić poprawność kodu html strony internetowej. Zapewniam – nie jest to nic trudnego. Zapraszam do obejrzenia poniższego filmiku.

Teraz z pewnością poradzisz już sobie z przetestowaniem poprawności swojej strony internetowej. Powodzenia!

W poprzednim wpisie zwróciłem Twoją uwagę na to, jak ważne jest sprawdzenie, czy Twoja strona wygląda tak samo w różnych przeglądarkach. Posłużyła mi do tego calu strona SprzedawcaInternetowy.pl, która nie tylko znacznie różniła się wyglądem, lecz także w niektórych przeglądarkach (na przykład w Chrome) znacznie utrudniała czytelnikowi zapoznanie się z treścią (czarne litery na granatowym tle).

Po nieco dokładniejszym przyjrzeniu się tej stronie, okazało się, że powodem całego zamieszania są błędy w kodzie html strony – innymi słowy – strona się nie walidowała.

Najprawdopodobniej wiesz, że to, jak wygląda Twoja strona opisane jest za pomocą kodu html i arkuszy stylów css. Na podstawie tych kodów przeglądarka generuje obraz, który pokazywany jest odwiedzającym stronę. To, w jaki sposób należy wyświetlić odpowiedni fragment kodu, opisane jest standardami (przeglądarki nie do końca je spełniają, ale nie jest też tragicznie i większość twórców stron umie sobie z tym radzić). Gdy jednak w kodzie pojawią się błędy, zachowanie przeglądarki nie jest określone, co sprawia, że każda przeglądarka może zrobić to, co chce.

Tak też było w przypadku SprzedawcyInternetowego. Fakt, że strona dobrze wyglądała w Firefoksie wynikał tylko i wyłącznie z tego, że przeglądarka ta stara się poprawiać błędne kody stron (i tym razem jej się udało).

Pamiętaj także, że błędny kod strony może utrudnić życie nie tylko osobom odwiedzającym Twoją stronę, lecz także wszelkim automatom (np. crawlerom – co może mieć znaczny wpływ na pozycję strony w wynikach wyszukiwania).

Czy sprawdzałeś poprawność kodu Twojej strony? Jeśli nie, zrób to teraz. Jeśli nie wiesz, jak się za to zabrać, nie martw się – wkrótce Ci o tym opowiem.

“Cóż za głupie pytanie – oczywiście, że wiem, jak wygląda!” Mniej więcej takie słowa za pewne przebiegły przez Twoją głowę po przeczytaniu tytułu tego wpisu. Czy jednak jesteś tego pewien?

Mimo, że internet, html i css istnieją już od dłuższego czasu, przeglądarki nadal nie do końca spełniają wszystkie standardy. Oznacza to, że Twoja strona może świetnie wyglądać w przeglądarce, z której korzystasz na co dzień, a jednocześnie straszyć odwiedzających w innej.

Przykładem takiej strony może być SprzedawcaInternetowy.pl. Poniżej możesz zobaczyć porównanie tego, jak wyświetlana jest ta strona w Google Chrome i Mozilla Firefox 3.5.

W tej chwili prawdopodobnie masz już ochotę sprawdzić, jak Twoja strona prezentuje się w innych przeglądarkach. Jednak na jakie przeglądarki warto zwrócić uwagę? Najlepiej, gdybyś mógł sprawdzić te, z których korzystają odwiedzający Twoją stronę (praktyczie wszystkie systemy statystyk potrafią podać takie zestawienie). Na większości stron, do których statystyk mam dostęp, popularnymi przeglądarkami są (według malejącej popularności): Firefox, Internet Explorer (7, 6 i 8), Opera i Chrome.

Jeśli jeszcze nie sprawdzałeś, jak wygląda Twoja strona w innych przeglądarkach, zrób to teraz. Podziel się z nami wynikami tych testów.

Zapewne nie raz spotkałeś się z nazwą PayPal. Być może nawet korzystałeś z tego systemu. Jeżeli jednak nie wiesz za bardzo, czym to jest, to się nie martw – na potrzeby tego wpisu wystarczy wiedzieć, że jest to system obsługujący płatności za pomocą karty kredytowej. Niewątpliwie zatem domyślasz się już, że jego sukces w znacznej mierze zależy od zaufania, jakim darzą go klienci. Przecież nie powierzyłbyś swoich pieniędzy byle komu.

Spójrz zatem na fragment listu, który niedawno dostałem (po dokonaniu płatności) od PayPala (kliknij w obrazek, aby powiększyć):

Jeśli nie zauważyłeś w nim nic dziwnego, to przyjrzyj się dokładniej znajdującym się w nim linkom.

Oczywiście można uznać, że nic wielkiego się nie stało. Jest to przecież tylko email potwierdzający (którego i tak prawie nikt nie czyta). Skoro jednak w takim miejscu pojawia się błąd, to skąd mam (jako użytkownik) mieć pewność, że część systemu odpowiedzialna za wykonywanie i księgowanie przelewów jest ich pozbawiona?

Tego typu błąd nie spowoduje oczywiście, że PayPal “padnie”, gdyż serwis ten zdobył już zaufanie wielu klientów. Jednak w przypadku mniejszych systemów, szczególnie na początku działalności, należy bardzo uważać na tego typu wpadki.

Od 7 lat (jak ten czas szybko leci) zajmuję się zawodowo tworzeniem oprogramowania. W okresie tym związany byłem z czterema firmami. W jednej z nich zostało mi powierzone zadanie utworzenia zespołu odpowiedzialnego za zapewnianie jakości (tzw. testroomu).

Od pewnego czasu rozwijam własną firmę programistyczną, zajmującą się głównie rozwiązaniami webowymi. Dzięki temu udało mi się nawiązać bezpośredni kontakt z klientami i zapoznać się z ich, nieco innym kątem widzenia.

W ciągu tych kilku lat poznałem także trochę innych firm oraz ludzi w nich pracujących (zazwyczaj programistów) i z przykrością muszę przyznać, że większość z nich nadal nie przywiązuje zbyt wielkiej wagi do odpowiedniego przetestowania dostarczanej klientowi aplikacji.

Zjawisko to jest szczególnie dobrze widoczne w przypadku aplikacji webowych. Przyczyn zapewne jest wiele. Niektóre z nich to:

• bardzo szybko rosnąca popularność rozwiązań webowych – prawie każdy chce, aby stworzyć mu jakiś serwis; bardzo często klient nie jest przygotowany merytorycznie do swojej roli;
• krótsze terminy i mniejsze budżety – każdemu się spieszy i zależy na cięciu kosztów, a jakiś wykonawca na pewno zgodzi się na proponowane warunki.

Niestety zazwyczaj prowadzi to do:

• niskiej jakości kodu (co znacznie zwiększa koszty jego utrzymania i rozwijania),
• braku pełnej świadomości prawnej (co naraża właściciela na różne nieprzyjemności),
• luk w systemie zabezpieczeń (mogące doprowadzić do kradzieży danych lub przejęcia kontroli nad oprogramowaniem),
• niepełnej funkcjonalności (za której wykonanie przecież klient zapłacił),
• braku optymalizacji pod względem usability (prostoty użycia) lub SEO.

Czy jednak aby na pewno jesteś skazany na niską jakość oprogramowania? Czy jako klient jesteś w stanie samodzielnie sprawdzić, czy otrzymujesz to, za co płacisz? Czy jako firma tworząca oprogramowanie możesz zapewnić lepszą jakość dostarczanych produktów, nie nadwyrężając nadto budżetu i nieprzekraczając terminu?

Właśnie na tego typu pytania postaramy się odpowiedzieć w najbliższych wpisach. Przybliżymy Ci temat testowania oprogramowania. Wskażemy często popełniane błędy oraz sposoby na to, jak się przed nimi uchronić. Postaramy się także przekonać Cię, że inwestycja w zapewnienie jakości zawsze jest dobrą inwestycją.

Jeśli zatem jesteś klientem firm programistycznych lub też pracownikiem (tudzież właścicielem) jednej z nich i chciałbyś pogłębić swoją wiedzę na temat zapewniania jakości, z pewnością znajdziesz tu coś dla siebie.