uzytecznastrona.pl

Przeglądając Internet, na jednej ze stron natknąłem się na ikonkę certyfikatu „Użyteczn@ Strona”. Z racji tego, że strona naprawdę była użyteczna, ikonka klikalna nie była, toteż musiałem nieco poszperać w Google, aby odnaleźć wydawcę tegoż certyfikatu. Co ciekawe, na hasło „Użyteczn@ strona” nie udało mi się odnaleźć czyja to sprawka, dopiero inteligentne wpisanie „Użyteczna strona” doprowadziła mnie do odkrycia strony uzytecznastrona.pl. Nie mogąc się powstrzymać, rzuciłem okiem na kod i ogólnie poszperałem tu i ówdzie. No cóż… Nie sądzę, żeby uzytecznastrona.pl była aż tak… użyteczna 😀 Czemu? Już mówię.

• Założenie jest takie, że strona powinna spełniać 10 zasad (heurestyk) Jakoba Nielsena. Zamiar dobry, ciekawe jak z wykonaniem 😉
• Na początek może punkt 5. z powyższej listy, na kilku malutkich screenach:
  • 
    Ten błąd pokazuje nam się przy próbie ściągnięcia podręcznika o użyteczności. Ciekawe czy ta publikacja ma podobną jakość 😉
  • 
    A to widzimy gdy chcemy się dowiedzieć czegoś więcej o użyteczności 😉
  • 
    Chromusiowa konsola. 6 błędów.
• Punkt 4. – standardy. No cóż, nie przechodzi nawet walidacji XHTML Transitional (o Strict nie wspominając). Owszem, to jeden błąd, ale za to brak alt na obrazku. Użyteczność bez dostępności? Ciekawa koncepcja. Kolejny używany tutaj standard to oczywiście CSS, który też nie przechodzi walidacji.
• Dalej punkt 4., tym razem spójność. Można bowiem zbadać stronę i wziąć udział. Warto też zwrócić uwagę co mamy w adresie, co na belce tytułowej, a co w nagłówku na stronie. Spójność na 100%!.
• Nie wiem pod który punkt to podciągnąć, ale chyba 3. Otóż czemu tekst na stronie głównej, czyli cytat z Nielsena o użyteczności (który de facto określa rzeczywisty cel użyteczności promowanej na tejże stronie), jest obrazkiem? Chcemy sobie skopiować, wkleić do schowka, walnąć jako motto i 4 litery. Z obrazkiem nie da się robić takich fajnych rzeczy jak z tekstem! I nie zmienia tutaj tego fakt, że to jest image-replacement. Akurat w tym wypadku zastosowanie go jest po prostu śmieszne.
• Punkt 10 chyba wgl został zignorowany, pomijając opcję kontaktu 😉 Tu trzeba pochwalić – można wybrać opcję oddzwonienia w ciągu godziny (nie wiem jak to działa w praktyce, nie sprawdzałem ;)). Co jednak ciekawe formularz „Masz pytania? Oddzwonimy” ze strony głównej pozwala tylko na kontakt telefoniczny (jedyne pole formularza to to na telefon), podczas gdy formularz na podstronie kontaktu pozwala już na podanie maila. Znika tam natomiast opcja oddzwonienia w ciągu godziny 😉 Co ciekawe, w przypadku formularza kontaktowego obligatoryjne jest podanie nazwy firmy, choć i tak chodzi przecież tylko i wyłącznie o telefon zwrotny. Teraz pytanie: czemu raz do kontaktu starcza sam numer telefonu, a w innym wypadku trza podać inne dane, w tym personalne? Znów – zasada nr 4. Poza tym zasada 7 – elastyczność i efektywność. IMO bardziej efektywny jest formularz na stronie głównej (mniej danych, jedno pole). Zatem po co tworzyć do de facto tego samego celu zupełnie inny formularz? Także punkt 9 – skuteczna obsługa błędów. Sorry, ale okienko z jQuery UI na całą stronę, które w 95% jest puste i nic mi nie mówi oprócz tego, że „pole [nazwa z labela] nie może być puste”, to nie jest skuteczna obsługa błędów. To jest obsługa błędów zrobiona na odpieprz!
• Dobra, to teraz trochę o kodzie. Spacje przed DOCTYPE – mamy quirks w IE.

• new String('.WqVTyedyP8QMXbHgV031cRp7KPKcCydsP4Z37TQYOr.Q7');

  Bo oczywiście ciąg znaków nie jest ciągiem znaków, dlatego trzeba z niego taki ciąg zrobić.

• 10 script oczywiście w head, prehistoryczna wersja jQuery i jQuery UI. Do tego wstawki inline w nieśmiertelnych <!-- i -->, niemające prawa działać w prawdziwym XHTML.
• 4 link do arkuszy, do tego główny przez import i szlag trafia parallel downloading (jak kto nie wierzy, może zaglądnąć w odpowiednią zakładkę w konsoli). Oczywiście są do tego style w head i pełno inline. Punkt 7. – pełna elastyczność i efektywność.
• Kodowanie ISO-8859-2, czyli standardowo polskie. Bardziej eleastyczne wydaje się UTF-8.

• <div id="okienkoConfirm" title="Uwaga"></div>
  
  <div id="slowoReklama" style="display:none;position:absolute;z-index:9;background:white;" onmouseover="slowoRekShow()" onmouseout="slowoReklamaUkryj()"></div>

  Znów punkt 7. on... jest cholernie nieelastyczne. Tak samo nieefektywne jest trzymanie w HTML porcji kodu, które i tak nie działają bez JS.

• Social ikonki z nofollow. Ciekawe 😉
• Patronaty są zbiorem divów, a nie listą. I też mają nofollow.
• Menu w kodzie ma wszystkie submenu. Niestety, user ich nie widzi, dopóki nie wejdzie na daną podstronę. Punkty 3.i 7., czyż nie?
• Flash przez JS. A jak ja chcę Flasha bez JS? Punkt 7.
• Tabelka do wyświetlenia treści po prawej stronie flasha. Do tego lista odnośników, która nie jest listą. Punkt 4., bo strona nietabelkowa to już standard!

• <div class="clear"></div>

  Pusty element=zbędny element.

• Slider z laureatami. Przy wyłączonym JS rozwala stronę de facto. Użyteczne jak cholera.

• <div class="us-box-jSza-gora">
                    <table><tr><td class="us-box-jSza-lg"></td><td class="us-box-jSza-tlog"> </td><td class="us-box-jSza-pg"></td></tr></table>
                </div>

  Ładny kwiatek.

• Cytaty przy filmikach nie są cytatami, ale akapitami.
• Tak samo jak cytaty ekspertów.
• 60 linijek komentu. Co tam transfer.
• Formularz na tabelce. Super dostępne i użyteczne.
• W stopce dane adresowe nie są w address.
• Nie ma co – divitis.

Uff, to tyle. 4/10 zasad, wg których jest przyznawany certyfikat „Użyteczna Strona” jest pogwałconych przez… wystawcę tego certyfikatu. No ale mając patronat Ministerstwa Gospodarki, można więcej.