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
orazfooter
. 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ą.