psz.praca.gov.pl

Dziś pod tępe ostrze krytyki dostała się (raczej) mało znana strona – Portal Publicznych Służb Zatrudnienia. Trzeba przyznać, że dość enigmatyczna nazwa, która nastręczyła Google aż 0,3 s kłopotów. Zgodnie z artykułem „Czym są publiczne służby zatrudnienia” termin znaczy ten nie mniej, ni więcej tylko:

Publiczne służby zatrudnienia to ogólnie rzecz biorąc wszystkie urzędy i instytucje w państwie, które są odpowiedzialne za obsługę osób bezrobotnych.

Rozwiązawszy tą zagadkę, postanowiłem sprawdzić jak nasze kochane państwo traktuje potencjalną siłę roboczą. Otóż pierwsze wrażenie powalające nie było i od razu przywiodło na myśl stare, poczciwe strony z lat 90., kiedy to królowały tabelki. Po takim zachęcającym wstępie, czas na ocenę:

• Validator wyrzuca marne 524 błędy.
• Tytuł strony jest bardzo czytelny i informacyjny. Mając otwarte więcej niż 5 tabów, widzę wiele mi mówiące MPiPS.
• Dostajemy wspaniały tryb quirks, bo komuś się chciało pisać w Transitional.
• DOŚĆ dziwny MAJĄ styl PISANIA html.
• Czytnik ekranowy? Zapomnij! Nie przebije się przez gąszcz tabelek, a poza tym – nikt nie pokwapił się dodać atrybutu lang dla html.

• <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">

  Zapewne odnoszą duże sukcesy w pozycjonowaniu 😉

• Strona polskiego rządu, toteż trąci polską zaściankowością i mamy kodowanie ISO-8859-2 (i tak lepiej niźli windows-1250).

• <META HTTP-EQUIV="Pragma" CONTENT="cache">
    <!--<META HTTP-EQUIV="Expires" CONTENT="-1"> -->

  To raczej nieskuteczne jest. Dobrze, że to drugie przynajmniej wykomentowali. Bo w końcu nie wiem kto by chciał odwiedzać stronę, która zawsze jest nieaktualna.

• 4 pliki JS. O 2 za dużo. No i oczywiście ładowane w head, a nie na końcu body jak przystoi. Zresztą – 3 pliki są od kalendarza, którego na stronie głównej nie bardzo widać.
• Kocham on... w kodzie. Szczególnie te puste, totalnie bezsensowne, przyczepione do body, bo a nuż się przyda.

• <!--#EBE6C8#99964A,#A8A555-->

  Ciekawe czego to są kolory? I co robią w kodzie HTML?

• I później zaczyna się piekło. Tabelki w tabelkach w jednej wielkiej tabelce… Brrr
• Oczywiście wszystkie elementy, które powinny być tłami obrazkowymi, są wstawione jako img w poszczególnych komórkach tabeli. O alt zapomnieć też można.

• <td width="5px;">

  To nie CSS…

• Nagłówek to niebędący nagłówkiem nieklikalny obrazek bez alt.
• Menu górne oczywiście w tabelce i na obrazkach bez alt, doprawionymi stylami inline – a co!

• <!--<td class="top_link"><a href="#" class="top_menu_link"><img src="/WEB-INF/views/layouts/mgipmainpage/img/link_3_topmenu.gif"  valign="top" style="border: 0px none;"> pomoc</a></td>-->

  Hmmm… 😉

• Formularz logowania jest przykładem doskonałej tabelkowej incepcji, która osięgnęła 5 poziom. Gratuluję!
• Co ciekawe nie ma label, fieldset, ale autocomplete="off" jest 😉
• Wyszukiwarka też niczego sobie. I oczywiście w obu formularzach przyciski graficzne wstawione jako input[type=image], mimo znanych problemów z tą techniką.
• Listę języków osiągnięto dzięki opanowanej do perfekcji umiejętności użycia  .
• Oczywiście te dwa super jakości obrazki w nagłówku, powalające z nóg swą niezwykłą animacją, są niczym innym, jak wspaniałą animacją Flash, bo – jak wiadomo – GIF-y nie pozwalają uzyskać tak porażających efektów!
• Górne prawe menu w połowie jest menu, a w połowie ozdobnikiem. Ciekawe czemu pracodawcy i szukający pracy nie mogą z niego skorzystać?
• Udało nam się przejść do contentu! HURRA! Podczas gdy ja jeszcze dycham, mój czytnik ekranowy już dawno padł.
• Oczywiście content podzielony jest na dwie kolumnytabelki.
• I oczywiście nagłówki zastąpione są obrazkami.
• Jeśli linki w półmenu górnym jeszcze prezentowały jakiś poziom przyjazności, tak te w contencie robią wszystko, aby zdawać się nieprzystępnymi. mod_rewrite to dla tej strony równie czarna magia, co dostępność.
• Lewa część contentu podzielona jest na boxy: nagłówek + lista linków. W praktyce dostajemy linki opakowane kilkoma tabelkami, z fajną strzałeczką w img.
• Rozumiem, że strony rządowe nie mają ograniczonego transferu i mogą pozwolić sobie na marnotrastwo komentując co najmniej 1/2 wysyłanego kodu.
• Prawa strona contentu prezentuje newsy. Każdy news to – a jakże by inaczej! – osobna tabelka.

• <tr height="40"><td style="text-align:right;padding-right:15px"><a href="http://www.webbox.pl/"><img src="/WEB-INF/views/layouts/mgipmainpage/img/powered1.jpg" border="0"></a></td>

  Ja bym się wstydził 😉

• Jak wyglądają podstrony? Podobnie, tylko, że tam content podzielony jest na 3 części: lewą – menu, środkową – główny content i prawą – archiwum wiadomości. No i są dwa magiczne przyciski: Powrót (of course history.back()) i Drukuj. Obydwa korzystają z najgorszego z możliwych onclick.

To teraz trochę CSS na dokładkę!

• margin-left: 0px;
  	margin-top: 0px;
  	margin-right: 0px;
  	margin-bottom: 0px;

  Nie ma jak korzystanie ze skracania cech i zerowych wartości.

• /*
  #Verdana, Arial, Helvetica, sans-serif; 
  */

  Ładny komentarz. Szkoda, że zamiast przypisać to do body, to przypisuje się to do wszystkich możliwych selektorów.

• Dziedziczenie tu nie istnieje. Dla każdego możliwego stanu linku wszystkie style są pisane od nowa. Ba, tu się chyba nawet nie wie co robi przecinek przy selektorach.
• Większość arkuszy stylów to style linków. Bo oczywiście klasa dużo zmienia.

• /*data w naglowku szczego??w newsa*/

  Nie ma jak poprawne kodowanie.

• Gdyby wywalić wszystkie powtarzające się style, ten arkusz skurczyłby się o 3/4.

Tak na marginesie: dostałem się tu z Praca.gov.pl, które – jak widać – tym bardziej trzyma się standardów wszelakich.