WebKrytyk.pl

Ostatnio z Sobakiem zauważyliśmy, że strona sejmowa także uległa przebudowie. Może mamy mylne wrażenie, ale wreszcie zaczyna się coś dziać. Cieszmy się, że ktoś zainteresował się sprawą. Wreszcie witryna wygląda jak z XXI wieku, a nie jak jakiś twór z lat dziewięćdziesiątych. Przynajmniej można odnieść wrażenie, że żyjemy w cywilizowanym kraju, prawda? Pomijając grafikę musimy się także głębiej zastanowić nad kodem:

• Przyznamy plus za to, że strona działa także pod subdomeną www. (czas najwyższy)
• Validator krzyczy o jakiś błędach.
• Strona kontaktowa oraz informacyjna dla biur poselskich w starej wersji. Dlaczego?
• Odnośnie strony z posłami to byłoby miło aby istniała możliwość sortowania według partii politycznych (grupowanie wyników).
• Bardzo nieprzyjazne nazewnictwo linków.
• Zastanawiający jest anchor „www”. Dlaczego nie można było tego nazwać „przydatne witryny” albo „przydatne adresy stron WWW”?
• Dlaczego niedostępne są inne wersje językowe?
• Wyniki wyszukiwarki chyba nie do końca prawidłowo wyglądają. Po pierwsze brak informacji jeżeli nic nie znaleziono. Po drugie proszę wpisać słowo-klucz „ABW”. Coś wyskakuję ale nie można kliknąć
• Fajnie, że na stronie umieszczono informacje dotyczące praw autorskich. Nie zmienia to faktu, że możemy znaleźć link do ISAP. A tam przeczytamy coś takiego:

  Nie zezwala się na komercyjne używanie, kopiowanie i inne wykorzystywanie danych znajdujących się w bazie danych ISAP.

  Owa sprawa została poruszona miedzy innymi przez VaGla.pl.
• Ten kalendarz na stronie głównej powinien zostać poprawiony pod względem estetycznym.
• Jak zajrzycie do źródła strony to zauważycie, że całą strona zamieszona jest w tagu <form>.
• Dlaczego elementy tej listy są puste?

  1	<ul id="langs"><li class="pl"></li><li class="en"></li><li class="de"></li><li class="fr"></li></ul>

• Ktoś ogarnięty chce powiedzieć do czego to służy?

  1 2 3 4 5 6

  <input type="hidden" name="$$viewid" id="view:_id1__VUID" value="!d2auxb9mvh!"> <input type="hidden" name="$$xspsubmitid"> <input type="hidden" name="$$xspexecid"> <input type="hidden" name="$$xspsubmitvalue"> <input type="hidden" name="$$xspsubmitscroll"> <input type="hidden" name="view:_id1" value="view:_id1">

• Dosłownie masa encji, parametrów i innych dziwnych zabiegów. Z resztą kod to czysta sieczka. Nie wierzysz? Sprawdź! Bez Ognistego Żuka aka FireBug’a byłoby ciężko analizować źródła. onclick, onkeydown – dlaczego?
• Nie wiem jak Wam ale nam pierwsze co rzuca się w oczy to brak deklaracji strony kodowej.
• Ponadto zastanawialiście się nad takim zapisem?

  1 2 3 4

  <script type="text/javascript"> var BASE_URL = "/Sejm7.nsf/"; var WEB_ADDR = "http://10.1.2.79/Sejm7.nsf/"; </script>

• Z wyłączonym JS jedynie kalendarz nie jest dostępny.
• Strona bez grafiki niestety nie wygląda już tak pięknie natomiast strona bez ostylowania CSS (pomijając wyżej wymienioną listę) jest nadal czytelna.
• Pomimo używania HTML 4.01 Transitional, CSS mamy w wersji 3. Niestety validator mówi, że coś jest nie halo.

W dzisiejszym wpisie chcielibyśmy poddać ocenie drugą wersję strony Senatu. Zapowiedź poprawek dostaliśmy już w zeszłym roku przy okazji recenzowania poprzedniej wersji. Oto fragment poprzedniego wpisu.

Napisałem maila do webmastera strony z prośbą o poprawienie błędu wymienionego w pierwszym punkcie, czyli adres działający tylko z „www.”. Zostałem poinformowany, że sprawa ma niedługo zostać naprawiona. Przy okazji dowiedziałem się też, że do października br. jest planowane oddanie nowej, całkowicie przebudowanej strony Senatu. Trzymamy kciuki i z pewnością dołożymy swoje zdanie o wykonaniu przyszłej witryny

No to bez dalszego przeciągania lecimy z oceną:

• Szkoda, ale nadal nie poprawiono błędu z koniecznością podania subdomeny „www.”, wspomnianego w powyższym cytacie, mimo nadesłanych zapewnień
• Ogromna poprawa od strony wizualnej. Strona w końcu wygląda jak na XXI wiek.
• Dodanie wersji dla niedowidzących
• Część stron się waliduje, a część nie i jak na złość są to głupie błędy jak np. zjedzony średnik na końcu encji…
• Puste alt-y
• Zwiększanie i zmniejszanie tekstu działa tylko na niektórych partiach strony
• Przyciski do zmiany wielkości czcionki powinny być dodawane dynamiczne, aby nie było ich widać u użytkowników z wyłączonym JavaScriptem
• Duży plus za przyjazne linki

• 1	<form name="wyszukiwarka_3" action="/wyszukiwarka/szukaj.html" method="post" onsubmit="if($('input[type=text]', this).val() == 'szukana fraza...') $('input[type=text]', this).val('')">

  1	<input type="text" name="query" value="szukana fraza..." maxlength="128" accesskey="4" onfocus="if(this.value=='szukana fraza...') this.value='';" onblur="if(this.value=='') this.value='szukana fraza...';" />

  Skoro zmiana czcionki działa na zasadzie podpięcia akcji do elementu ID, to dlaczego nie można było tego zrobić w powyższym wypadku?
• Brak konsekwencji w nazewnictwie klas i ID (używanie podkreślenia albo myślnika do rozdzielenia wyrazów)
• <div class="clear"></div> – pusty DIV to zbędny DIV…

• 1 2 3

  <div class="lista-jezykow">                  <a href="/en/" title="English"><span>English<img src="/szablony/senat/images/flaga-en.png" width="16" height="13" alt="English" /></span></a>                </div>

  Pytanie egzystencjalne: czemu lista nie jest listą? Zbędny span postawiony najwyraźniej dla towarzystwa.

• 1 2	<div class="karuzela-pager">   <span class="aktywny">&nbsp;</span><span class="">&nbsp;</span><span class="">&nbsp;</span><span class="">&nbsp;</span> </div>

  Pomijając dzyndzelek z ostatniego wpisu znaleźliśmy kolejnego kwiatka, który wywołał uśmiech na naszych twarzach Przedstawiamy Wam Pana Karuzelę .
• JS powinien być ładowany przed samym zamknięciem <body>, bo w przeciwnym wypadku spowalnia lub może nawet zablokować jej wczytywanie

• 1 2 3 4 5 6 7

  <script type="text/javascript">  //<![CDATA[     $(window).bind('load', function(){   wysokosci56();  }); //]]> </script>

  Skoro Wy mówicie wysokości, to my mówimy „szerokości” drodzy kierowcy…
• Pusty title dla linków
• Menu w stopce zrobione na tabelce – You do it wrong…

• 1 2 3 4 5 6

  <div class="srodek">    <div class="stopka">     <div class="stopka-wewnatrz">      <div class="obramowanie">&nbsp;</div>      <div class="stopka-tresc">       <div class="stopka-prawa">

  Klasomania….
• Style inline
• Strona bez JS ma bardzo ograniczoną funkcjonalność

Zdajemy sobie sprawę, że firma Ideo prawdopodobnie nie zajmowała się „Wirtualną Wycieczką” udostępnioną na stronie. Jednak korzystając z okazji musimy powiedzieć, że mamy wrażenie, że lektor jest zbyt poważny, co może niektórym wywołać banana na twarzy.

Podsumowanie
Od strony wizualnej poprawa jest ogromna, strona jednego z najważniejszych organów państwa nie wygląda jak z początków internetu. Od strony kodu jednak jeszcze trochę można by poprawić, choć trzeba przyznać, że przy stronach jakie już recenzowaliśmy, ta wypada całkiem nieźle.

Ponad rok temu opisaliśmy na naszej platformie pierwszą wersję strony pokrzywdzeni.gov.pl. Niedawno zauważyliśmy, że witryna przeszła gruntowną transformację. Po krótkiej analizie doszliśmy do wniosku, że zostaliśmy pozytywnie zaskoczeni. Czyżby ktoś tam na górze wyciągnął wnioski? Najwyraźniej tak. Nawet w statystykach mamy adnotacje, że ktoś z wchodzi z różnych fajnych ministerstw. Widocznie komuś zależy na opinii. Ze względu na to, że święta się zbliżają pomyśleliśmy, że ten wpis będzie niczym prezent w imię boga. Z poziomu szarego użytkownika wygląd stanowczo się poprawił. Można wręcz powiedzieć, że jest bardzo odpowiedni i czytelny. Ktoś bardzo postarał się aby to miało ręce i nogi. Autorzy aplikacji dołożyli wszelkich starań i dbali o każdy detal jeżeli chodzi o kwestie graficzne. W kwestii kodu też jest bardzo duża poprawa, aczkolwiek do doskonałości jeszcze trochę brakuje.

• Na początku sugerujemy porównanie jakości starego i nowego logo.
• Duży plus od redakcji za ostylowanie „ramek” ważne i przykład na stronie dla dzieci.
• Drugi plus od nas za dobrze wykonany top strony pod względem estetycznym. Można też powiedzieć, że te grafiki w stopce są znacznie lepszej jakości niż te w poprzedniej wersji strony.
• Trzeci plus za „wylistowanie” punktów pomocy dla osób pokrzywdzonych na podstronie „Sieć pomocy”.
• Niestety plusy kończą się już na stronie estetycznej. Prosimy przetestować chociażby wyszukiwarkę, która nie reaguję na jakiekolwiek hasła. Jednym słowem wielka lipa.
• Dlaczego przed doctype znajdują się białe znaki?
• Dlaczego Transitional zamiast Strict?
• Masa zbędnych elementów w obszarze head! Część rzeczy nie respektuje Googlebot, część można zoptymalizować (np. 3 zewnętrzne arkusze stylów, masę bibliotek JS). Ktoś może wyjaśnić po co użytkownikowi ładuję się FCKEditor?
• Masa zbędnych stylów inline!!!
• Zastanawiającym jest fakt zawartości atrybutu alt:

  1	<img style="display: block;" src="/Themes/pokrzywdzeni/Images/opusc.png" alt="buba"/>

  Czy ktoś wie co on może znaczyć?
• Tona albo nawet dwie niepotrzebnych span‘ów.
• Puste elementy – FUJ!!!

  1 2	<div class="menu-container-right float-left"></div> <div class="clear"></div>

• Przynajmniej użyto h1, h2 i h3. Normalnie szok!
• Ładna reklama i zabieg SEO w stopce odnośnie linku do CMS’a.
• A oto formularz kontaktowy bez haczyka i z haczykiem. Dostrzegacie różnice? Zwróćcie uwagę na ostatnią niebieską gwiazdkę. Tak, tak, tam jest checkbox.
• Od kiedy twarda spacja w paragrafie służy do tworzenia odstępów?

  1	<p>&nbsp;</p>

• Wszędzie gdzie występuje treść w kodzie widnieje magiczne:

  1	<p style="text-align: justify">

• Cieszy nas niezmiernie fakt użycia breadcrumbs jednakże można też doszukać się ciekawych nazw klas dla CSS:

  1	<div class="opakowanie-strony">

  1	<li class="dzyndzelek">

  Aż boimy się zapytać czym jest ów dzyndzelek
• Na stronie można policzyć ilość występowania atrybutu id na palcach jednej reki. Czy faktycznie wszystko potrzebuje klasy?
• Czy taki link jest dowodem na to, że system adresowania „wpisów” jest nie do końca przemyślany?
• Istna rzeźnia jeżeli chodzi o arkusz stylów CSS. Nie zauważyliśmy „globalnego zerowania marginesów” – ciekawe…
• Złym nawykiem jest też mieszanie polskiego i angielskiego nazewnictwa w HTML i CSS
• Strona główna bez grafiki wygląda tragicznie.

Pod względem strony wizualnej odbieranej przez przeciętnego użytkownika widać naprawdę dużą poprawę. Niestety kwestia zakodowania strony nadal pozostawia wiele do życzenia. A szkoda, dobrze byłoby napisać kiedyś całkiem pochlebną recenzję… Pozostaje nam czekać na kolejną wersję strony.

Dzisiejsza krytyka będzie poświęcona serwisowi o nieco luźniejszej tematyce, niż te wcześniej omawiane. Dziś, razem z CapaciousCorem wzięliśmy na przegląd stronę „demotopodobną” besty.pl. Oto krótki przegląd naszych spostrzeżeń:

• Białe znaki przed DTD – powoduje to to, że nasz ulubiony Internet Explorer wchodzi w tryb Quirks
• Tagu keywords nie uznaje praktycznie żaden robot sieciowy, nie mówiąc już o którymś z tych liczących się na rynku wyszukiwarek
• Zbędne rozbicie stylów CSS na kilka plików = więcej zapytań do serwera = dłuższe wczytywanie strony
• Pomimo tego, że strona posiada kilka arkuszy CSS, to nadal możemy na niej znaleźć masę stylów inline
• Pliki JS także rozbite na kilka części
• Skrypty JS występujące tuż po </head> mogą nawet zablokować wczytywanie strony
• Dołączanie jQuery z serwera code.jquery.com spowalnia wczytywanie strony. Czyżby forma oszczędności transferu?
• Paginacja nie działa bez włączonego JavaScript
• Paginacja oparta na tabelce? Przesada… Dałbym plusa za 6,66% szerokości dla td, ale to za mało.
• Górne menu nie działa bez CSS
• Strona blokuje prawy przycisk myszy. O tym trzeba się lekko rozpisać. Po pierwsze jest to całkowicie bezcelowe, bo jak ktoś będzie chciał to po prostu wyłączy JS albo zajrzy w źródło i będzie miał. Po drugie i najważniejsze: jest to tylko niepotrzebne utrudnianie życia użytkownikom. Przez takie prowizorki nie mogę np. ustawić preferencji dla danej witryny, bo w Operze ta opcja leży w menu kontekstowym.
• Brak altów w niektórych obrazkach, w niektórych są nie na temat
• <a href='/logowanie'>Zaloguj się</span> – gratulacje Bez komentarza.
• Znacznik <br> nie służy do tworzenia marginesów
• Ponadto w xHTML tagi muszą mieć zamknięcie, czyli powyższy zapis jest błędny. Poprawnym jest <br />
• Używanie pustych akapitów do tworzenia odstępów też nie jest przejawem geniuszu.
• Dużo niepotrzebnych pustych linii w kodzie. Nie dość, że marnuje transfer, to jeszcze nijak nie poprawia czytelności kodu. Najważniejsze jego fragmenty i tak są typową zbitką tagów
• outline: 0; dla linków. Osoby gorzej widzące mogą nie widzieć np. na którym aktualnie są linku podczas przemieszczania się za pomocą taba.

• Wszelkie treści w serwisie są generowane przez użytkowników i właściciel portalu besty.pl nie bierze za nie odpowiedzialności. Jeśli uważasz, że dodane treści naruszają jakiekolwiek prawo (w tym prawa autorskie) prześlij nam informację na ten temat.

  Zacna idea, gorzej, że autor skryptu ma na stronie nielegalnie umieszczone utwory

• /*+-+-+-+-+-+-+
  #|M|3|x|.|p|l|#
  +-+-+-+-+-+-+*/

  Autor nie wyrósł jeszcze z wieku p0k3m0ni@st3g0…
• #555555 można lepiej zapisać jako #555
• Jaki profesjonalizm przedstawia osoba, gdy wysyłamy jej wiadomości na np. kontakt@besty.pl, a odpowiedzi otrzymujemy z domeny gmaila?
• Na koniec validator. HTML: 26 błędów, 1 ostrzeżenie; CSS: 11 błędów, 26 ostrzeżeń;

Konkluzja

Witrynę można by znacznie poprawić gdyby tylko przysiąść nad nią na kilka godzinek. Na pewno poprawiło by to semantykę kodu i szybkość wczytywania strony. Niestety komuś się nie chciało. Chwalić się że na takim skrypcie stoją „setki stronek”, tak jak robi to autor skryptu? Nie ma czym…

Na początku chce zauważyć, iż sami używamy „kochanego” WordPress’a. Jako platforma blogowa sprawia się bardzo dobrze o ile na rynku są potrzebne wtyczki. Jeżeli ich nie ma to zaczynają się schody niestety.

Ostatnio miałem przyjemność pisania kilku modyfikacji i jednej wtyczki. Niestety strasznie zniechęciłem się. Zaczniemy od spraw technicznych.

W tabeli comments istnieje kolumna comment_author_IP, której typem jest varchar(100). Jak się domyślacie rozchodzi się o jej typ i długość. W czasach kiedy nie było IPv6 wystarczał varchar(15) i też nie do końca było to prawdą. Dlaczego? Ano dlatego, że optymalnie i wygodnie jest trzymać tą informacje w postaci int! Dla przykładu w MySQL wystarczy UNSIGNED INT + ip2long() i sprawa załatwiona.

Lecimy dalej odnośnie źle zaprojektowanej bazy danych jednej z największych dostępnych platform blogowych na świecie. W tabeli posts mamy kolumnę post_status. Z tego co mi wiadomo może ona przyjąć jedną z kilku możliwych opcji: draft, publish, pending, future oraz private. Całkowicie nie rozumiem dlaczego jej typem jest varchar(20). Np. w MySQL udostępniony jest specjalny typ ENUM() idealnie nadający się do takich sytuacji. Kolejną sprawą jest dokumentacja. Oceniam ja na 6,5 w dziesięciostopniowej skali.

Z poziomu edytora szablonu chciałem zobaczyć do czego służy funkcja get_template_part() i zostałem przeniesiony tutaj zamiast do prawidłowego adresu czyli tutaj.

Apropo dokumentacji to spróbujcie znaleźć w dokumentacji miejsce, w którym jest fragment kodu odpowiedzialny za filtrowanie i ustawianie menu dla funkcji wp_list_pages(). Mowa o argumencie exclude. Jeżeli występuję to w następstwie tego zostanie „wykonany telefon” do funkcji apply_filters(), której pierwszym parametrem będzie ciąg wp_list_pages_excludes. W API nie ma nigdzie mowy gdzie można kod tego filtru znaleźć. Literówki w tłumaczeniach pomijam bo zostały zgłoszone i obiecano mi, że zostaną poprawione.

Teraz drodzy czytelnicy wyjaśnijcie mi jak osoby niewidome mają skorzystać z możliwości ustawienia widgetów opartej na mechanizmie drag and drop? Nie widzę innej możliwości niż pomoc zewnętrznej osoby. To samo tyczy się ostatnio wprowadzonego wp_nav_menu()!

Według mnie powinna zostać udostępniona alternatywna metoda zarządzania takimi menu podobna do mechanizmu zarządzania kategoriami na forach dyskusyjnych typu phpBB, IPB, etc. Teraz wyobraźcie sobie sytuacje, w której klient żąda sortowanego według jego widzimisię. Ponadto wszystkie inne kategorie, w których się nie znajduje maja być zwinięte. Właśnie dlatego musiałem pisać wtyczkę. Nie wiem dlaczego brakuję parametru exclude w wyżej wymienionej funkcji. Najwyraźniej autorzy WP maja zbyt płytką wyobraźnię.

Ponadto mechanizm obrabiania danych przychodzących z interfacu zarządzania menu jest strasznie wolny i mocno obciąża maszynę! Wystarczy 300 pozycji w menu i trwa to wieczność… Dodawanie nowych pozycji do menu jest totalnie zbugowane w Operze. Dla przykładu paska przewijania nie da się ruszać jeżeli nie używamy strzałek. Ponadto search input blokuję się jeżeli dodaliśmy coś z checkbox listy. Postaram się na dniach nagrać film. Jeżeli komuś jest mało, to wspomnę tylko, że przy 300 elementach mechanizm drag and drop strasznie laguje w Operze. W innych przeglądarkach jest nieco płynniej natomiast zajmuje on stanowczo za dużo pamięci!

Wracając do kwestii IP. Nie wiem czy wiecie ale w WP jest mechanizm antyfloodowy i jeżeli dodamy zbyt dużo komentarzy z jednego IP to przez jakiś okres czasu nie będziemy mogli z niego dodać IP. Osobiście jak spotkam ciekawy blog to lubię komentować od góry do dołu wszystkie wpisy. Niestety ten bajer mi tylko utrudnia. Pół biedy jeżeli byłaby możliwość konfigurowania ilości komentarzy z danego IP przez określony czas. Niestety takiej opcji nie ma.

Na koniec wspomnę tylko, że aktualnie defaulowym szablonem proponowanym przez WP jest twentyeleven. Wszystko byłoby w porządku gdyby nie posiadał on kilku usterek powodujących błąd validatora. Grunt to pokazać się od złej strony.

Na koniec napomknę tylko o kilku różnych standardach kodowania. Można to zaobserwować jak obrabia się argumenty w starych i nowych plikach. Całkiem inny styl pisania. Jak się ustala standardy kodowania to powinny być jednolite dla każdego pliku i tego powinno się trzymać.

Dziś pod lupę pójdzie strona Komisji Nadzoru finansowego, znajdująca się pod adresem www.knf.gov.pl. Dlaczego tak podkreśliłem człon „www”? Otóż…

• Jest to kolejna strona rządowa, na którą nie da się wejść przez adres inny niż z „www” na początku. Pominięcie tej cząstki skutkuje błędem 404. Niezgodne z podstawową zasadą – życie użytkownikowi ma się ułatwiać, a nie utrudniać oraz faktem, że krótszy adres jest łatwiejszy do zapamiętania.
• xHTML w wersji Transitional, co pozwala na tworzenie fontowo-centerowej tagozupy z kodu. Transitional miał być formą przejściową, ustaloną w 2000 roku, dopóki przeglądarki nie zostaną dopracowane. Coś takiego nie może być dobre, prawda?

• 1	<link rel="alternate" type="application/rss+xml" title="KNF - aktualności" href="http://www.knf.gov.pl/aktualnosci/rss.xml"></link>

  wprawdzie takie zamknięcie jest poprawne, lecz całkowicie zbędne

• 1	<meta name="keywords" content="Stanisław Kluza "/>

  komuś się pomylił keywords z author… Aktualizacja (09.07.11): Jak wynikło z pobieżnego badania Sz. P. Stanisław Kluza to (za Wikipedią)

  polski ekonomista, podsekretarz stanu w Ministerstwie Finansów w rządzie Kazimierza Marcinkiewicza, od lipca do września 2006 minister finansów w rządzie Jarosława Kaczyńskiego, następnie przewodniczący Komisji Nadzoru Finansowego.

  Tak więc albo mamy ciekawy sposób reklamy przełożonych, albo KNF tnie koszta na webmasterach
• Tag robots nie jest respektowany przez prawie żadną wyszukiwarkę
• CSS rozrzucony po masie plików = więcej zapytań do serwera = większe obciążenie
• Style inline
• Używanie pozycjonowania absolutnego, to w 99% przypadków, złe i niepotrzebne wyjście

• 1	<li><a href="/regulacje/regulacje_prawne/index.html" rel="sc1_1b6719">REGULACJE <span>&nbsp;</span></a></li>

  te <span>&nbsp;</span> to po co tam?
• Powtarzanie bezsensownego style="color: #0b4fa4" dla linków zamiast ich ostylowania w arkuszu stylów.
• <input type="hidden" name="maxresults" size="4" value="1000"/> – po co atrybut size dla ukrytego pola?
• Dołączanie arkusza stylów w środku body
• Po wyłączeniu JavaScriptu nie działa górne menu
• Masa komentarzy i pustych linii w kodzie – wprawdzie nie żyjemy już w erze wszechobecnych modemów, ale po co marnować transfer użytkownika i swój?
• Angielska wersja strony nadal ma polski tytuł
• Podstrona słownik powinna być zrobiona na podstawie odpowiednio ostylowanej listy definicji, a nie masy DIV-ów nie mających żadnego znaczenia z punktu semantyki
• Na koniec tylko dobitne posumowanie tego co napisałem wyżej – walidacja. HTML – 15 błędów, 2 ostrzeżenia; CSS – 17 błędów; 265 ostrzeżeń.

Jak widać kolejna strona, która wszelkie standardy ma w głębokim poważaniu. Komentarz pozostawię Wam

W dzisiejszej krytyce przyjrzymy się stronie InternetStandard.pl, która w pięknym świecie zwanym teorią przez wzgląd chociażby na domenę, czy tematykę powinna reprezentować sobą jakiś standard. Jak jest?

• Walidacja leży i kwiczy. Jak na ironię część błędów jest spowodowana zamknięć <.../ > w HTML 4.01. Jest to kolejna witryna pisana w mixie kilku wersji HTML-a.
• Białe znaki przed DTD. Wiecie co to oznacza? Tak! To nasz ukochany quirks mode!
• Skrypty JavaScript wplatane w środek kodu oraz wewnętrzne arkusze stylów
• Szablon na tabelkach
• Masa stylów inline
• Ogromna część warstwy prezentacji robiona w HTML (zerowanie marginów w <body> itd)

  1	<body margintop=0 marginleft=0 marginwidth=0 marginheight=0 bgcolor=#434343>

• Bezsensowne ID i klasy w stylu div_bodyhtmlall, moreKonf na klasę konferencji (Ja, ja! Engrish ist gut!).
• Atrybuty alt jeśli już występują, to w 90% są puste.
• Dużo zbędnych metatagów, których Google i tak nie trawi
• Część linków obsługiwana tylko przez onclick/onmouse. Obsługa niemożliwa przy wyłączonym JS
• Wartości atrybutów czasem ujmowane w cudzysłów, a czasem nie
• Kolory w stylu 666699 można zoptymalizować do 669
• Mapa odsyłaczy w stopce i w nagłówku, która jest obrazkiem. – Tak to jest jak ktoś nie umie pociętej grafiki złożyć
• Formularz newslettera to poezja . Nie sprawdza poprawności adresu (dwa newslettery na adres „wpisz e-mail” już zamówione), co więcej, formularz w ogóle nie musi być wypełniony. Wtedy zostajemy uraczeni pięknym, nieoszlifowanym błędem ASP.

  CDO.Message.1 error ’8004020c’ At least one recipient is required, but none were found. /subskrypcje/s.asp, line 484

  Takie rzeczy powinny być logowane do plików dla programistów, a nie dla zwykłych userów. Na deser: z newslettera nie da się wypisać.

• 1 2

  <p>Nie<WBR> tylko<WBR> z<WBR> dużymi<WBR> się<WBR> kontaktowali,<WBR> pytali<WBR> nawet<WBR> takie<WBR> średnie<WBR> sklepy,<WBR> jak<WBR> mój<WBR> Godi.pl].<WBR> Był<WBR> list<WBR> (ankieta)<WBR> z<WBR> prośbą<WBR> o<WBR> wyrażenie<WBR> swojego<WBR> zdania<WBR> -<WBR> tak<WBR> więc<WBR> zbadali<WBR> dość<WBR> dużą<WBR> część<WBR> rynku.</p> </div>

  WBR – Walidator Będzie Ryczał? Inne propozycje mile widziane
• <!--include virtual="/nws/include/podsumowanie2005.inc"--> – serwer nie obsługuje, tudzież głodny webmaster pożarł hasha, a jednak wygodniej zostawić, prawda?
• Data na górze strony i oczywiście… obrazkowa! A jakże inaczej… Obrazkowe są także tak skomplikowane obrazki jak np. ten. Jako tekst było za łatwo zrobić? I panie webmajster – czasy się panu pomyliły! Data na każdej podstronie już dawno wyszła z mody.
• IntenetStandard zawstydził HTML-a:

  1 2 3 4

  <meta property="fbage_id" content="262752488880" /> </div> </body> </html>

  Tylko oni potrafią wstawić meta tuż przed zamknięciem <body>
• Publikowanie adresów IP w komentarzach. Już nie jeden wyrok sądu potwierdził, że IP stanowi daną osobową, a publikowanie takich bez ich właścicieli jest zabronione.
• Wyszukiwarka: a) przycisk typu img doklejający paramy x i y do adresu (takie rzeczy robi się w CSS), b) masa innych niepotrzebnych parametrów, c) brak komunikatu przy pustym polu i d) dodatkowo ponownie obrazkowy nagłówek.
• Jak zrzec się odpowiedzialności zgodnie ze standardami:

  1 2 3

  p.odpowiedzialnosc {     display:none; }

  nic, tylko się uczyć. No i te powtórzone 1000 razy font-family – to wszystko, a nawet więcej tutaj

• 1	<script type="text/javascript" src="http://www.google.com/afsonline/show_afs_search.js"></script>

  - efekt? Wyszukiwarka, to kolejny element nie działający bez JS. Błędu dopatrzył się Delusion

I jako bonus kilka screenshotów: – stopka i nagłówek z grafiką – klik (to jest wycięte równo. Taka jest rzeczywista różnica w szerokości ) – i wspomniane elementy bez grafiki – klik 2 Diagnoza ogólna: po wywaleniu wszystkich zbędnych skryptów JS, komentarzy i masy sieczki HTML na rzecz DIV-ów, kod strony zmniejszyłby się co najmniej o 50%. Z kolei odstawienie tekstu napisanego na obrazkach na rzecz tekstu z odrobiną CSS mógłby pozwolić na odstawienie ich styranego dedyka do piwnicy.

Miło mi poinformować, że dzisiaj minął równy rok od startu projektu WebKrytyk, krytykującego polskie strony instytucji państwowych, a później także strony dużych firm. Wprawdzie miniony rok nie zaowocował taką aktywnością, jakiej byśmy sobie życzyli, ale było to spowodowane dużym natłokiem prac u założyciela projektu – CapaciousCore’a. Teraz jednak mamy team większy o dwie osoby, a w ostatnich dniach można zaobserwować ponowny rozwój projektu. Dołożymy wszelkich starań, aby ten trend utrzymał się jak najdłużej i aby móc żenować Was krytykami kolejnych „genialnych” stron w internecie.

Była już krytyka strony Sejmu RP. Teraz przyszedł czas na Senat. Poniższy wpis z powodu tego, że strona główna serwisu jest całkowicie inna od jego podstron (co też nie jest zalecane, bo użytkownik może się pogubić) będzie podzielony na dwie części.

Strona główna

1. Jeszcze jeden serwis, gdzie podanie adresu bez „www.” kończy się błędem 404.
2. Kolejna strona, która nie może się zdecydować… Deklaruje HTML 4.01, raz używając <br>, a raz <br />
3. Walidacja (41 błędów, 6 ostrzeżeń)
4. Cały kod CSS i JS umieszczony w pliku HTML. Nawet menu strony jest zrobione jako zmienna w JS.
5. Strona działa w całości na JavaScript. Po jego wyłączeniu jest dysfukcjonalna.
6. Szablon strony na tabelkach
7. Puste DIVy

Podstrony

1. Podstrony całkowicie różnią się designem i nawigacją od strony głównej, co na początku może zdezorientować użytkownika
2. Podstrona archiwum pokazuje nam prawdziwie archiwalny doctype – HTML 3.2 Final. Byłem przekonany, że urodziłem się za późno, aby zobaczyć takie antyki, ale Polscy specjaliści ratują sprawę. HTML 3.2 został zarekomendowany 14 stycznia 1997 roku, co czyni go niecały rok młodszym od autora tego wpisu . Dodatkowo wszystkie podstrony archiwum są wstawione w jedną ramkę na całe wymiary ekranu, a było co w niej ukrywać…
3. Nie przejść walidacji HTML 3.2? Zaiste gratulujemy…

4. 1	<div onmouseover="chc('#777',this);" onmouseout="chc('#dedede',this);"><a href="/k6/arch.htm" class="punkt">Senat 6 kadencji</a></div>

   , czyli kolejna rządowa metoda na efekt rollover bez CSS.
5. Każdy element menu jest osobnym DIV-em zamiast elementem listy nieuporządkowanej.

6. 1	<IMG SRC="/gr/archet.jpg" WIDTH="630" HEIGHT="420" BORDER="0" ALT="Rozmiar: 53263 bajtów">

   - no tak… Przecież wiadomo, że niewidomi użytkownicy przeglądarek będą czekać właśnie na informację o rozmiarze obrazka, którego nawet nie ładują, bo go nie widzą. Na co niewidomym w ogóle wiedza, co taki obrazek przedstawia… Bez dalszego komentarza.
7. Bardzo ciekawa zawartość znacznika <noframes> -

   1	<P>Twoja przeglądarka nie akceptuje ramek. Przykro mi...</P>

   Mówiąc brutalnie: jakby Sz. P. webmaster ruszył cztery litery, i by zrobił stronę porządnie, to by jemu i osobom odwiedzającym nie było przykro.

Strona Kancelarii Senatu

Uznałem, że ta strona zasługuje na oddzielną listę.

1. Adres strony – http://www.senat.gov.pl/kancelar/indext.htn. Kolejna wojskowa technologia, tym razem z rozszerzeniami. Zapraszam do ciekawych rozwinięć skrótu HTN w komentarzach
2. Kiedy jednak strona się już wyświetli widok też nie jest zbyt wesoły. Cały tekst jako obrazek, który dodatkowo zmienia się po najechaniu. Webmaster nie pokusił się nawet o ukryciu kodu JS, tak więc w pasku adresu otrzymujemy dokładnie kod JavaScript odpowiedzialny za podmianę.

Materiały

Pokazywałem Wam już stronę Senatu bez JS. Teraz przyszedł czas na inne widoczki:

1. Strona bez grafiki też wygląda uroczo – klik
2. A wyłączenie grafiki i JS daje naprawdę ostre combo
3. 2 heady, 2 charsety… No, wiadomo, co dwa, to nie jedno…

Podsumowanie Cała strona jest dla mnie lekko mówiąc żenująca, ale pkt. szósty z „Podstron” po prostu mnie zdenerwował. Moim zdaniem jest to po prostu olewanie osób niepełnosprawnych. Poza tym pragnę zwrócić uwagę na jedną rzecz: kod przedstawionych tutaj podstron różnił się nawet w headzie, co oznacza, że strona nie ma żadnej automatyki. Aktualizacja materiałów, na których brak ta strona nie narzeka musi być dla administratora prawdziwym rajem… Aktualizacja (22.02.2011) Napisałem maila do webmastera strony z prośbą o poprawienie błędu wymienionego w pierwszym punkcie, czyli adres działający tylko z „www.”. Zostałem poinformowany, że sprawa ma niedługo zostać naprawiona. Przy okazji dowiedziałem się też, że do października br. jest planowane oddanie nowej, całkowicie przebudowanej strony Senatu. Trzymamy kciuki i z pewnością dołożymy swoje zdanie o wykonaniu przyszłej witryny

Dawno nic nie pisałem to pomyślałem sobie, że przyszedł czas żeby znowu wyprodukować jakiś wpis W tym miejscu chciałbym podziękować Panu o nicku Maks, który to zasugerował ową stronę do analizy. Analiza wstepna Na pierwszy rzut oka wygląd strony jest bez żadnych zastrzeżeń. Miły, ciepły kolor przyjazny dla oka wizytatora. Treści w przystępnej formie. Wszystkie odnośniki odpowiednio wyeksponowane. Po prostu jest w czym wybierać i co czytać. Zarzuty i krytyka

• Czy anchor Publikacje jest tym samym co Dokumenty w URL’u?
• Jaki jest sens linku Dla pracowników LP, który wskazuje na adres IP w puli prywatnej?
• Dlaczego adres do strony kontaktowej nazywa się t-kontakt, a nie kontakt po prostu?
• Gdy kliknę szybko w input wyszukiwarki a następnie wyjdę z niej to pojawia się taki oto efekt: Jest jeszcze jedno niedopatrzenie, mianowicie brakuje chyba ikon:
• Czy tak rozbudowana mapa strony powinna posiadać paginację, ponieważ dość długo ładuje się?
• Przełączam na angielską wersje strony i co widzę? Raptem jeden wpis zamiast przetłumaczonej całej strony? No i jak jestem na angielskiej wersji, to powinien być link (chociażby niezalecana flaga?) do polskiej wersji.
• W kalendarzu każdy dzień tygodnia mógłby posiadać identyczną szerokość, bo wychodzi trochę niesymetrycznie.
• Mechanizm powiększania/pomniejszania treść wpisu ma tylko dwa stopnie. Wielkość liter wewnątrz linku sugerujący taki mechanizm powinna być rożna, a wydaje się być taka sama. Ponadto taki link nie powinien pojawiać się przy wyłączonym JS (bezużyteczność), czyli innymi słowy mówiąc powinien być doklejany przez JS.
• Przy wyłączonym JS obok wyszukiwarki pojawia się taki siwy pasek.
• Strona nie do końca użyteczna przy wyłączonych obrazkach. W wielu miejscach brakuje odpowiedniego opisu przy pomocy atrybutu alt.
• Przy wyłączonej grafice i JS ten slideshow newsów wygląda na totalną sieczkę.
• Te tło pod główną zawartością strony powinno być chyba na całej szerokości strony, prawda?
• Przy wyłączonym JS te menu z linkami do Aktualności, Piszą o nas, Poczytaj i Multimedia są bezużyteczne, bo są źle zaadresowane!
• Komunikat o błędzie 404 powinien chyba być też w języku polskim?
• Duży minus za niekontrolowane używanie dużej ilości stylów z uwzględnieniem komentarzy warunkowych dla kochanego inaczej IE.
• Nie rozumiem w jakim celu użyto class dla kontenera body. Mam na myśli ten sajgon:

  1	<body class="template-front_page portaltype-plone-site icons-on" dir="ltr">

• Niestety muszę klepnąć minus za puste DIV’y i SPAN’y.
• Odnoszę dziwne wrażenie, że przeglądarka IE jest wprowadzana w tryb Quirks ze względu na spacje przed doctype białe znaki.
• Znowu minus za to, że czasami w kodzie występują dziwnie długie id dla obiektów.
• Ogólnie przydałoby się trochę porządku w kodzie, bo jest sporo zbędnego miejsca i braku tabulacji uniemożliwiając przy tym swobodne poruszanie się po źródle strony. Rozumiem, że to może być efekt wygenerowanego szablonu, jednak taka sieczka… przekracza moje wyobrażenia.
• Zastanawia mnie co ten arkusz wewnętrzny

  1 2 3 4 5 6 7 8 9 10

  <style type="text/css"> #slideshow6873 {    background-image:url('http://www.lasy.gov.pl/obrazki/obrazki-w-portletach/obrazki-w-portlecie-galerii/zwolnij-zwierze-na-drodze');    background-repeat: no-repeat;    background-attachment: related;    background-position: center center;    width: 195px  !important;    height:128px; } </style>

  robi na końcu dokumentu?
• Odnośnie użycia headerów to jest to fifty-fifty. Nie jestem do końca przekonany, czy taki schemat powinien zostać użyty. Cieszy mnie niezmiernie fakt, że przynajmniej ktoś się starał.
• Strona nie przechodzi walidacji HTML (kilka błędów) – warto poprawić.
• Bardzo fajnie, że użyto tzw. breadcrumbs, czyli okruszków chleba.
• Przydałby się jakiś ogólny formularz kontaktowy w wiadomym miejscu rzecz jasna.
• Ogólnie bardzo ładnie i dużo treści co mnie zachwyca, bo jest co czytać i dowiedzieć się czegoś nowego.

Zapewne kilka rzeczy przeoczyłem ale to normalne moim zdaniem. Najbardziej czepiłem się rzeczy, które rzucają się w oczy. Wniosek dla mnie i dla wszystkich powinien być prosty. Jak się chce, to można choć trochę się przyłożyć nie robiąc przy tym totalnej fuszerki. Strona nie do końca jest prawidłowo zrobiona, ale i tak odbiega od reszty genialnie napisanych rządowych stron WWW. PS Analizowałem tylko lasy.gov.pl nie zagłębiając się w serwisy funkcjonujące na subdomenach. Myślę, że to tylko kwestia czasu aż się do nich dorwę Aha i chciałbym z tego miejsca przeprosić za moją długą nieaktywność, która była podyktowana dużą ilością pracy i małymi problemami w domu. Wiem, wiem mało Was to interesuje ale chciałem się publicznie wyspowiadać. A nuż trafi mi się ksiądz na widowni.