fuertigo.pl

17 czerwca 2013 przez Comandeer | Opublikowany w Strony WWW

Tagi: ,

0

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.
  • Walidator8 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ą.

Napisz komentarz

Uwaga! Uprasza się komentujących, którzy chcą obrazić autora, aby najpierw dokonali niezbędnego researchu jego osoby. Z góry dziękujemy za poświęcony czas.