Kilka dni temu na ForumWeb.pl pojawiło się kilka postów odsyłających do strony Gmurowski.com. Postanowiłem zatem rzucić na nią okiem.
Wygląd i działanie
- Strona wydaje się nie do końca kompletna. Brakuje jakichkolwiek danych kontaktowych, mimo że krótki tekst zachęca, aby się skontaktować.
- Linki na stronie są stylowane w sposób, który de facto uniemożliwia ich odróżnienie od reszty treści, zwłaszcza dla osób z zaburzeniami widzenia. Zgodnie z wymogami WCAG, informacja nie może być przekazywana wyłącznie przy pomocy koloru. Dodatkowo kontrast linków w stosunku do tła jest zbyt mały.
- Bardzo słabo widoczny jest też focus.
- Tak po prawdzie to te loga PHP i MySQL w stopce nie pasują. Nie ma żadnego powodu, żeby tam były… a są.
- Strona jest responsywna, niemniej odnoszę wrażenie, że niektóre elementy mogłyby dostać nieco więcej oddechu.
- Strona nie działa z HTTPS – a szkoda, bo to obecnie standard.
-
Strona jest dostępna pod czterema adresami:
http://Gmurowski.com
,http://www.Gmurowski.com
,http://Gmurowski.com/index.php
,http://www.Gmurowski.com/index.php
Powinno być to jakoś znormalizowane i strona powinna być dostępna tylko pod jednym adresem.
- Dodatkowo serwer jest źle skonfigurowany i pozwala na wywoływanie dowolnych ścieżek, np.
http://www.Gmurowski.com/index.php/hublabubla
wciąż wyświetli stronę główną. -
W konsoli widnieje błąd:
Uncaught ReferenceError: jQuery is not defined at yii.js:344
Dzięki temu błędowi wiemy od razu, jaki framework znajduje się w backendzie strony.
Kod
HTML
-
<meta name="csrf-param" content="_csrf"> <meta name="csrf-token" content="a2hMeWU3TGclLi4KKlIdVT8HfR4gXHg1PAwUEQN0DRQBECMPE0Z6AQ==">
Ten kod wskazuje, że do generowania strony jest wykorzystywany framework backendowy. Pytanie brzmi: po co? Taką stronę o wiele wydajniej byłoby generować przy pomocy statycznych generatorów.
- 3 arkusze stylów. Akurat w tym wypadku można spokojnie zmniejszyć ich liczbę do jednego. Dodatkowo dołączanie resetu nie ma sensu, bo Bootstrap ma wbudowany.
- Na stronie panuje niesamowity divitis. Z nagłówka strony można spokojnie wyrzucić praktycznie wszystkie
div
– nie są całkowicie potrzebne. -
<div id="logo-bottom"> <h2 id="specialty">Programista PHP i specjalista SEO</h2> </div>
-
<img id="sphere" src="http://gmurowski.com/images/layout/kula.png" alt="strony internetowe">
To ewidentnie jest ozdobnik na stronie, więc powinien mieć pusty
[alt]
. -
<h1 class="header-2">Programista PHP i specjalista SEO</h1>
-
<img class="card-img-top" src="./images/portfolio/www_serwis_okien_waw_pl.jpg" alt="STOL - KAM konserwacja, renowacja, naprawa okien i drzwi"> <div class="card-body"> <p class="card-text">STOL - KAM konserwacja, renowacja, naprawa okien i drzwi</p>
Przy takim układzie obrazek powinien mieć pusty
[alt]
, ponieważ jego treść jest powtarzana w najbliższym sąsiedztwie. -
<a class="btn btn-sm" href="http://www.serwis-okien.waw.pl">zobacz</a>
Ten link nie ma sensu poza kontekstem. Dlatego o wiele lepiej byłoby zrobić coś takiego:
<a class="btn btn-sm" href="http://www.serwis-okien.waw.pl">zobacz <span class="visuallyhidden">stronę serwis-okien.waw.pl</span></a>
Technika
.visuallyhidden
jest obecnie najbardziej polecanym sposobem umieszczania dodatkowej treści, która powinna być ukryta przed wizualnymi przeglądarkami. Dzięki temu użytkownicy poruszający się wyłącznie po linkach lub posługujący się dodatkami do przeglądarek, które je wyciągają z treści strony w postaci listy, będą w stanie zrozumieć, dokąd dany link prowadzi. - Przy okazji listę wykonanych stron można by przedstawić jako listę.
- Strona zupełnie nie jest podzielona na sekcje. A przecież każdy nagłówek oznacza de facto sekcję.
- Niektóre elementy mają style inline – zupełnie nie wiadomo po co.
- Na samym końcu znajduje się pełno wykomentowanego kodu – po co?
- A jeszcze niżej, na już naprawdę samym końcu, jest dołączany cały, niezminifikowany kod yii.js, czyli pochodzący z frameworka PHP Yii. Ten skrypt nie jest nigdzie wykorzystywany, a w dodatku nie działa, bo brakuje jQuery.
CSS
#top-bt-left ul#contact li
– takie selektory nie powinny istnieć.-
border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; margin: 20px 220px 10px 0;
Ten kod jest niewłaściwy z kilku powodów. Najważniejszym jest fakt, że wersje bez prefiksów nie są potrzebne od wieków (Firefox nawet swoją wersję z prefiksem już dawno usunął). Dodatkowo wersje z prefiksami powinny być umieszczone przed wersją bez prefiksów, ponieważ wersja z prefiksem oznacza eksperymentalną implementację – a taka niekoniecznie musi być zgodna ze standardem. Dokładnie taka sytuacja miała miejsce z
-moz-border-radius
.
Niby mała, prosta i przyjemna stronka, a jakże dużo tajemnic w sobie skrywała…
Ale w zakomentowanym kodzie można znaleźć brakujące dane kontaktowe! 😀