www.Projektowanie-WWW.com.pl

Dzisiaj bardziej ciekawostka archeologiczna niż pełnoprawna krytyka – www.projektowanie-www.com.pl. Prawdę mówiąc myślałem, że tego typu strony w roku 2018 praktycznie już nie istnieją.

Wygląd i działanie

• Pierwsze wrażenie po wejściu na stronę? Kurczę, chyba cofnąłem się do roku 2000…. Układ strony jest identyczny, jak wówczas powstających stron. Ba, przecież to słynny Święty Graal webdesignu!
• Czcionka jest zdecydowanie za mała i przy mojej wadzie wzroku odczytanie czegokolwiek nie jest łatwe. Dodatkowo nie pomaga zdecydowanie za mały kontrast (szary na szarym i jasnoszary na białym).
• Niektóre elementy strony są podkreślone, mimo że nie są linkami.
• O dziwo nawigowanie po stronie przy pomocy klawiatury nie nastręcza żadnych trudności. Przyczepić można się jedynie do wskaźnika focusu, który w niektórych miejscach zlewa się z tłem strony.
• Adresy podstron mogłyby być zdecydowanie przyjaźniejsze, np. zamiast http://www.projektowanie-www.com.pl/?decyzja – http://www.projektowanie-www.com.pl/zanim-zapadnie-decyzja.
• Niełatwo zorientować się, na jakiej podstronie jesteśmy, bo na stronie nie ma żadnego nagłówka dla treści, a jedynym oznaczeniem jest zmiana koloru mikroskopijnego linku w menu.
• Oczywiście strona nie jest responsywna. Gdyby była, to byłbym naprawdę, ale to naprawdę zdziwiony.
• Brakuje też SSL.

Kod

HTML

• Strona jest napisana w HTML 4.01 Transitional. Użyty DOCTYPE z kolei powoduje renderowanie w trybie quirks.
• Znacznikowi html brakuje atrybutu [lang], określającego język treści.
• Deklaracja kodowania powinna być pierwsza w head. Dodatkowo trzeba używać UTF-8.
• meta[http-equiv="Content-Language"] jest całkowicie niepotrzebne; zamiast niego wypada użyć atrybutu html[lang].
• Stary dobry urchin.js od Google Analytics. Data wewnątrz pliku wskazuje, że jest to wersja z… 2007 roku.

• <table align="center" width="760" cellspacing="0" cellpadding="0" border="0">

  Stare, dobre tabelki. Cała strona jest wsadzona w tabelę. To sprawia choćby to, że czytniki ekranowe muszą się przetrawić przez całą strukturę tabeli, żeby przekazać użytkownikowi treść. Można to nieco poprawić, dodając [role=presentation] do table.

• <td width="5" class="d01">
  |
  </td>
  <td width="78" class="m00">
  	<a href="?home" class="m00" title="Home page" rel="nofollow"><b>Home page</b></a>	</td>
  <td width="5" class="d01">
  |
  </td>

  Tak z kolei prezentuje się menu. Widać tu szereg przestarzałych/złych praktyk:

  • Oczywiście najgorsza jest ta tabela, która powinna być listą.
  • Duplikacja zawartości linku w atrybucie [title] nie ma sensu.
  • Oznaczanie wewnętrznych linków przez [rel=nofollow] też nie ma sensu (bo niby czemu nie chcielibyśmy przekazywać mocy w obrębie danego serwisu).
  • Fajki (|) można spokojnie wstawić jako pseudoelementy.
  • Nazwy klas absolutnie nic nie mówią.
  • No i to b też się wydaje zbędne i powinno zostać zastąpione odpowiednim stylowaniem.

• <td width="196" height="70" class="g01">
  	<img src="images/spacer.gif" border="0" alt="Madex - Projektowanie stron www">
  </td>
  <td width="182" class="g02">
  	<img src="images/spacer.gif" border="0" alt="Madex - Tworzenie stron www">
  </td>
  <td width="186" class="g03">
  	<img src="images/spacer.gif" border="0" alt="Madex - Prezentacje multimedialne">
  </td>
  <td width="196" class="g04">
  	<img src="images/spacer.gif" border="0" alt="Madex - strony www">
  </td>

  A to prehistoryczna technika zapełniania wolnej przestrzeni na stronie przezroczystymi GIF-ami. Dzięki temu można było przesuwać elementy strony o odpowiednią liczbę pikseli w prawo. Tutaj dodatkowo zastosowano dość chamskie faszerowanie słowami kluczowymi.

• Drugie menu jest wsadzone bezpośrednio do komórki, bez żadnej struktury – ot, linki obok siebie. To też pokłosie dawnego sposobu pisania stron, gdy liczył się wyłącznie wygląd. To też czasy, gdy Google indeksował wszystko jak leci, nie mając dostępu do dzisiejszych zaawansowanych algorytmów czy sztucznej inteligencji.

• <div style="color: #666666"><h2><u>Wizytówka www</u></h2></div>

  W taki sposób tworzone są nagłówki boksów znajdujących się nad treścią.

• Kolejnym znakiem czasu jest fakt, że główna treść jest umieszczona bezpośrednio w komórce tabeli, nie zaś – w akapitach. Przejścia do nowej linii natomiast realizowane są przez podwójne br.

CSS

Tutaj po prostu wystarczy pokazać to:

td.sg01 {
 font-family: Verdana, Arial, Courier, Serif;
 font-weight: normal;
 text-align: left;
 vertical-align: top;
 font-size: 9px;
 color: #999999;
 padding-top: 8px;
 padding-left: 5px;
 padding-right: 5px;}

td.sg02 {
 background: #CCCCCC;
 font-family: Verdana, Arial, Courier, Serif;
 font-weight: normal;
 text-align: left;
 vertical-align: top;
 font-size: 9px;
 color: #666666;
 padding-top: 8px;
 padding-left: 5px;
 padding-right: 5px;}

Nic więcej dodawać nie trzeba. Na początku XXI wieku niemal każdy kod CSS tak wyglądał, ponieważ praktycznie nie istniały wówczas żadne dobre praktyki jego tworzenia ani nawet nie bardzo miał je kto tworzyć.

Nie będę oceniał tej strony, bo ewidentnie widać, że jest zabytkiem z dawnych czasów. Mrocznych czasów, w których nawet mnie zdarzało się popełniać podobne dzieła. Zostawię to po prostu jako małą okazję do refleksji nad tym, jak bardzo zmieniła się Sieć przez ostatnie 18 lat.