fuertigo.pl

Swego czasu Fuertigo.pl postanowiło rozpocząć projekt krytyki stron WWW i z czystej ciekawości zgłosiłem swoją stronę. Jak widać, otrzymała dość niezgorszy wynik. I wówczas sobie pomyślałem: ciekawi mnie czy strona Fuertigo.pl jest w stanie pobić mój wynik. W końcu to ich kryteria i bez problemu powinni zdobyć 100/100 punktów, czyż nie? Postanowiwszy to sprawdzić, zapomniałem o tym… aż do dziś.

Cała ocena oparta będzie na kryteriach oceny stosowanych przez Fuertigo. Co ciekawe, kryteria te istnieją tylko w tym poście na blogu, na oficjalnej stronie projektu żadnej wzmianki o nich (ani linka) nie zauważyłem.
Część testów przeprowadzona przez WebPageTest.org.

• Na początek mały screen z listy ocenionych stron. Trochu krzywo, prawda?
• Wygląd ogólny i kreatywność nigdy nie były moimi dobrymi stronami, dlatego też daję tutaj maksymalną ilość punktów. Ot, taki mały prezent.
• Jasność informacji – wchodzę i od razu rzuca mi się w oczy napis „Kursy HTML, CSS, Photoshop i więcej.”, więc teoretycznie wszystko w porządku. Ok, kolejne 5 punktów.
• Menu nawigacyjne jest wyróżnione i niezmienne – jest, 3 pkt.
• Czytelność – owszem, jest, ale czasami zdarzają się małe błędy. Dlatego przyznaję tylko 2 pkt.
• Przystosowanie do osób z zaburzeniami kolorów – 1pkt.
• Kompresja – obecna, zatem zgodnie z kryteriami 4 pkt.
• Skrypty JavaScript – 1 normalny + 4 asynchrony socjalne. Czyli w normie, 3pkt.
• Ilość arkuszy – 3 arkusze, zatem odejmujemy 0.5 pkt i otrzymujemy 1.5pkt. Ciekawe jest to, że arkusz dla retiny ma 3 regułki i z powodzeniem można go wcisnąć do głównego. No i AFAIR podanie media nic nie daje, bo browser i tak to ściąga.
• Style inline – brak, 2pkt.
• Optymalizacja CSS – co prawda selektory są zoptymalizowane, ale cały arkusz mógłby być skompresowany. Dodatkowo wiele reguł jest niewykorzystywanych. Dlatego przyznaję tylko 1 punkt.
• Wymiarowe grafiki – 2 pkt. Grafiki są zoptymalizowane.
• Optymalizacja grafiki – wg WebPageTest można zaoszczędzić dodatkowe 23.8 KB, stąd przyznaję tylko 1pkt.
• Czas ładowania strony – 26.419s do pełnego załadowania i 541KB do ściągnięcia. Zbyt długo jak na taką ilość danych. Na moim kompie natomiast każde kolejne wczytanie zabiera 12s, czyli wciąż za dużo. 0pkt.
• Keep-Alive włączone – wg WebPageTest nie jest włączone dla wielu zasobów, stąd 0pkt.
• Cache-expire – jest, ale o bardzo niedługich czasach, stąd tylko 1pkt.
• Umiejscowienie skryptów – na stronie projektu oceny witryn jest skrypt w head, dlatego przyznaję tylko 0.5pkt.
• Puste elementy – są i to w newralgicznych miejscach, stąd 0 pkt.

  <h1><a href="//www.fuertigo.pl" title="Strona główna" id="Fuertigo_Logo"> </a></h1>

  Niełamliwa spacja jest białym znakiem, a więc pustym miejscem. A nagłówek strony wręcz nie może być pusty.

• @import w stylach – brak, a więc 1pkt.
• Fallback JavaScript – tu nie ma za bardzo skryptów JS, więc nie za bardzo jest do czego fallbackować. Stąd 3pkt.
• Atrybut ALT przy obrazkach – no są. I to dość sensowne, zatem 3pkt.
• Własne strony 404, 500 i inne – są, ale takie nie do końca czytelne. Dlatego przyznaję tylko 2pkt.
• Użycie obrazków i tekstu w odpowiednich miejscach – co prawda niektóre obrazki winny być przerzucone do CSS jako, że są ozdobnikami, jednakże ogólnie użycie jest tutaj właściwe. Przyznam 2 pkt.

  <a href="//www.fuertigo.pl" class="index menu_home" title="Strona główna"><img src="//www.fuertigo.pl/images/icons/home_white.png" width="16" height="15" alt="Strona główna" />Strona główna</a>

• Budowa strona na DIVach – jest, 3pkt.
• Etykiety w formularzach – są i to z dodatkiem prawidłowo użytego placeholder. 1pkt.
• Kontrast elementów – jest, 1 pkt.
• Definiowanie kolorów tła – jest, 1pkt.
• Odpowiednie tytuły w atrybucie title – są, 1pkt.
• display: none – występuje w arkuszu, dlatego odejmuję pół punkta. 0.5pkt.

  .toolbar { display: none; }

• Tytuły w znacznikach title odzwierciedlają zawartość – odzwierciedlają, zatem 1pkt.
• Walidator – 8 błędów, czyli odejmujemy 2pkt i zostają nam 2pkt.
• Kodowanie znaków – UTF-8, ale bez określenia w kodzie HTML. Mimo wszystko wartałoby wrzucić ten metatag, stąd 1pkt.
• Odpowiednie użycie elementów w kodzie – na ten temat odnośnie tej strony napisać można elaborat… Co uczynię, skończywszy oceniać wg ich własnych kryteriów. 0pkt.
• Poprawność wyświetlania na przeglądarkach (IE8+, Chrome, Safari, Opera) – w moim chrome niektóre elementy się rozpadają (co widać na załączonych screenach), stąd odejmuję 2pkt.
• Dostosowanie do urządzeń mobilnych – niby działa, ale mogłoby się skalować, prawda? Stąd tylko 1 pkt.
• Dostosowanie witryny do wyświetlaczy HiDPI – coś tam niby jest, dlatego przyznaję 1pkt.

Łącznie, zgodnie ze swoimi kryteriami, Fuertigo otrzymuje punktów: 63.5. Gratuluję!

Teraz przystąpmy do elaboratu!

• Na niektórych stronach można znaleźć kwiatki typu:

  <meta name="description" content="" />
  	  <meta name="keywords" content="" />

•  <meta name="apple-mobile-web-app-capable" content="yes" />

  IMO nie jest to do końca prawdą (zwłaszcza, że strona się nie skaluje!).

• link[media] – w dobie media queries bez sensu. No i tworzy niepotrzebne arkusze – i to raptem po kilka reguł. Na produkcji spokojnie można słać jeden arkusz, zminifikowany choćby przez CSSMin.

• <h1><a href="//www.fuertigo.pl" title="Strona główna" id="Fuertigo_Logo"> </a></h1>

  O tym już pisałem, ale zaznaczę raz jeszcze jak bardzo jest to bez sensu 😉

• Nawigacja nie jest na liście. A powinna być. No i czemu dodatkowa nawigacja jest przed główną w kodzie- tym bardziej, że i tak jest wyświetlana po niej!

• <br /><br /><hr /><br />

• 
  	<h3>Nauka pisania stron jeszcze nigdy nie była taka łatwa. Projektowanie witryn www, pisanie profesjonalnych stron to wiedza w zasięgu Twojej ręki. </h3>

  To nie wygląda mi na nagłówek.

• <h3>1.Obejrzyj</h3>

  Coś co jest numerowane po kolei, ewidentnie jest listą numerowaną, prawda?

• <span id="presentation" class="index_info_image"> </span>

  Zmyślne, ale zupełnie nietrafione. Obrazek powinien być obrazkiem a nie niełamliwą spacją.

•  <a href="//www.fuertigo.pl/regulamin/" title="Regulamin serwisu szkoleniowego Fuertigo">Regulamin serwisu</a> | 

  Brzydkie. To powinna być lista. A | wstawiane przez CSS jako :after.

• Użycie nowych znaczników HTML5 też jest dziwne. Dostajemy raptem nav, section oraz footer. Dzięki temu otrzymujemy zupełnie bezsensowny outline. Tak, główny nagłówek wgl jest pusty, bo niełamliwa spacja oznacza nic.
• Poruszanie się po stronie za pomocą TAB jest utrudnione. Przydałoby się przypisać style z :hover również dla :focus.
• Przykro to stwierdzić, ale odnoszę wrażenie, że kod był pisany pod wygląd. Nie jest semantyczny (to divitis).
• Kod JS odnośnie cookies dodaje mi funkcje do globalnego scope. Brzydko. Posługuje się również window.onload. Jeszcze gorzej. No i nazwy funkcji są na tyle popularne, że nadpiszą na pewno coś u kogoś. Nieładnie.

Jak widać, tak jak w przypadku uzytecznastrona.pl, Fuertigo.pl ma problem z bezbłędnym spełnieniem swoich własnych kryteriów. No cóż – zwykle najciemniej jest zawsze pod latarnią.