WebKrytyk.pl

Dzisiaj ciut inny artykuł. Nie mam zamiaru ganić kolejnej strony rządowej, ale skupię się na innej, niezwykle ważnej instytucji użyteczności publicznej – szkole! Jak wiadomo, strona internetowa to okno na świat, dzięki któremu my możemy widzieć dalej, ale nas też można przez nie oglądać. Dlatego tak ważna jest jakość tej wizytówki, którą tak chętnie posługujemy się w globalnej wiosce. Postanowiłem sprawdzić tenże element na losowo wybranej, zupełnie się tego niespodziewającej stronie szkoły. A jest to strona Zespołu Szkół Ekonomicznych nr 3 im. Eugeniusza Kwiatkowskiego w Krakowie

Validator.
Zaliczyłem ROTFL-a Strona główna to ramki – menu.htm i zse3.htm.
Oczywiście nie ma mowy o jakiejkolwiek poprawności – brak DOCTYPE, niezamknięty noframes, kodowanie windows-1250…
Korzystają z Ogonki97. Strzelam, że to data powstania strony.
W menu 6 razy deklarowane jest kodowanie, podawany jest konwerter (wspomniane już Ogąki) i słowa kluczowe. Za to mamy DOCTYPE! Szkoda, że quirkowy.
1
2
<font face="Times New Roman" size="1">
<table height="70%">
Samo za siebie mówi.
Całe menu to tabelki, obrazki bez/z bezsensownym alt i font.
Awangardowy nowy znacznik:
1
<tablealign="center" width="60">[...]</tablealign="center">
Jak się powiększa czcionkę? big Jak się bardziej powiększa czcionkę?
1
<big><big>
Logiczne
Wakacyjne liczniki i mrugająca e-mailowa ikonka. Witamy w XXI wieku.
Ale, ale… Nie śmiejmy się – to menu ma swój arkusz stylów! Pomijając fakt, że nie powinien być parsowany przez przeglądarki, bo ma błędy składniowe (komentarze HTML-owe, znacznik style), to jednak jakiś powiew nowoczesności wnosi. Oczywiście dla IE 5+.
Jak już o arkuszu – powtarzane style dla poszczególnych pseudoklas odsyłaczy, źle zapisana nazwa czcionki, style specyficzne dla IE (cursor:hand).
Tyle o menu – teraz o głównej części strony. Otóż jest tu niby mini galeria ze zdjęciami ze szkoły… Właśnie – mini. Największe zdjęcie ma rozmiar 269×202. Nie, nie ma większej wersji. Ba, żadna miniaturka nie jest nawet klikalna.
Mamy tu 2 (słownie: DWA) arkusze stylów! Z tym, że drugi powtarza dokładnie te same style, co są w pierwszym. A – i jest zminifikowany!
1
<meta content="MSHTML 6.00.2900.3640" name="GENERATOR">
Pusty div rozumiem, ale pusty center?
Tabelki. Dla urozmaicenia ze stylami inline.
Jest sens w czymś takim?
1
<font size="+3"><small>
Albo powiększam czcionkę, albo chcę małą. Poza tym to winien być nagłówek.
Dane kontaktowe leżą sobie ot tak. Brak address czy jakiegokolwiek innego semantycznego znacznika.
Slider w JS. Atrybut language na script lubi problemy stwarzać. Poza tym pełno zmiennych globalnych, wykorzystanie konstruktora Array, prehistoryczny preloader obrazków, document.write, obrazki bez alt i title, pobieranie elementów po name, setInterval ze stringiem. Skrypt pewnie pamięta czasy Netscape 3.
Trzeba było zrobić ładną ramkę, to wsadzono tabelkę w tabelkę. Przemyślane rozwiązanie.
Lista szkół to oczywiście kilka br.
1
<a href="file:/www.zse-3.krakow.pl/www/cert.jpg">Szkoła z klasą</a>
Nie dość, że źle zapisany protokół, to jeszcze nie ten (file odnosi się do lokalnego systemu plików). Poza tym – certyfikat jakości, który nawet nie istnieje?
Woho! h1 w marquee. Przecież wiadomo, że nagłówek to najlepszy sposób powiększenia tekstu!
Jaki jest sens w big > big > small?
target="_blank" na linkach. Szczególnie tych do facebooka.
Kolejna tabelka i pojawia się nam h3. Bo oczywiście wcześniej było h2 i (sensowny) h1.
   Dobrze rozplanowany tekst.
Lista w h4, który tutaj zastępuje akapity. A co!
KRZYKI TEŻ SĄ DOZWOLONE W KODZIE.

I na sam koniec taki kwiatuszek:

1
2
3
4
5
6

Mało mi! Wziąłem pod lupę jeszcze stronę o patronie. I tu niespodzianka – nie ma już DOCTYPE :C
Całość znajduje się w niedomkniętym tagu a z atrybutem name.
Żeby dać nagłówek trzeba stworzyć nową tabelkę, wstawić do niej jeden font, po czym ubić tabelkę.
Żeby wyświetlić tekst należy stworzyć drugą tabelkę tylko po to, żeby móc w nią wstawić trzecią tabelkę!
Cały tekst znajduje się dodatkowo w niedomkniętym tagu blockquote. Czyżby miało to sugerować jakieś zapożyczenie tekstu?
Zapamiętać: akapity to tak naprawdę błędnie zapisane 2 br.
I do ważnych fragmentów tekstu jest b.
Lista (czyli zbiór li bez ul/ol) regulaminów to wszędobylskie klikalne „tutaj” i pliki DOC wspaniałomyślne wsadzone w ZIP-y. Bo przecież PDF to przeżytek.
Strona jest na bieżąco aktulizowana, jak np. poziom czytelnictwa czy też galerie z życia szkoły.

Wracając to mojej tezy, wysuniętej na początku tego dłuższego wywodu, mam nadzieję, że każdy wnioski wyciągnął już sam

Czytaj dalej...

stat.gov.pl/gus

28 marca 2012 przez Comandeer | Opublikowany w Krytyka

Tagi: Gniot, Krytyka

3

Świat to zbiór danych – nic więcej. Nic zatem dziwnego, że istnieją instytucje, których jedynym zadaniem jest agregacja i analiza tychże danych. Jedną z nich jest działający w Polsce Główny Instytut Statystyczny, odpowiedzialny m.in. za sławetne spisy ludności. Jednak czy doświadczenia w analizie danych równoznaczne są z umiejętnościami prezentacji tychże danych? Sprawdźmy!

Tradycyjnie, na sam początek, aby żyło się lepiej – Validator.
stat.gov.pl przekierowuje na stat.gov.pl/gus. Inteligentnie i pomysłowo.
Pierwsze, co się rzuca w oczy, to prezentacja w lewym górnym rogu, nie wiadomo po co machnięta we Flashu. W dodatku jest w rozmiarze XXS i moje -9 dioptrii ich nie dostrzega. A jak chciałem to cholerstwo wyłączyć, to się okazało, że magiczny „x” w prawym górnym rogu nie działa. Ot, taka ozdoba.
Podbudowany pierwszym wrażeniem, spoglądam w kod. I widzę XHTML 1.0 Transitional, czyli tryb prawie pełnej zgodności ze standardami. Prawie jak prawie gwałt.
1

IMO takich informacji nie powinno się pokazywać userom. Bo ktoś może znać RedDota i mieć złe zamiary
1
<meta name="Description" content="Główny Urząd Statystyczny - Portal Statystyki Publicznej" />
Polski minimalizm.
1
2
3
<meta http-equiv="Expires" content="0" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
Kolejni naiwni, którzy wierzą, że można tak ustawiać nagłówki HTTP.
Mają ładny zbiór plików RSS, na wszystkie okazje. Szkoda, że zabrakło wsparcia dla ATOM.
BTW czemu wszystkie strony mają w adresie takie dziwactwo jak _PLK_HTML? Rozumiem, że ma to podnieść przyjazność linków.
4 pliki JS w head ( z zdeprecjonowanym atrybutem language). O 1 za dużo. I powinny być na końcu body. Do tego dochodzi antyczna wersja jQuery i jQuery UI.
A później zaczyna się divitis. Najlepszym przejawem tego jest górne menu w nim, dodatkowo okraszone |. Oczywiście ikonki to img z toną stylów inline.
Później mamy wyszukajkę. Nikt nie wspomniał tu webmasterowi, że form też jest blokowy. O fieldset, label/placeholder też nikt. Nawet o tym, że align jest zdeprecjonowany też nikt nie powiedział!
Nagłówek strony? Podlinkowany obrazek w div – po co h1?
Gdyby ktoś jeszcze nie dostrzegł divitisu:
1
2
3
4
<div id="blok_main">
<div id="belkaNavi">
<div id="belkaNaviC1">
<ul id="belkaMenu1">
O dziwo główne menu na liście jest.
1
<div id="belkaNaviC2"></div>
:after też nieznane webmasterowi.
Kod na Flasha jest piękny po prostu, a już najbardziej to background-image:url().
Kolejny kwiatuszek:
1
<h1> </h1>
I tak, mamy tu totalnie skopany outline.
W 222 (!) linijce kodu kończą się elementy nawigacyjne. Jeśli nie masz przeglądarki wizualnej, grzęźniesz w tym bagnie.

1
2
3
4
5
6
7
8

<div align="center">
<p align="left"></p>
<p align="justify"></p>
<p align="left"><font size="2"><strong><font color="#328E32">Przypominamy!<br /></font><font color="#326332">Nadanie numeru REGON przez Główny Urząd Statystyczny jest BEZPŁATNE</font></strong></font> <a href="http://www.stat.gov.pl/bip/regon_PLK_HTML.htm"><strong>więcej informacji »</strong></a></p>
<hr />
<p align="left"><font color="#006400" size="2"><strong>Tu można potwierdzić tożsamość ankietera:</strong></font> <a href="http://form.stat.gov.pl/BadaniaAnkietowe/2012/index.htm"><strong>badania ankietowe »</strong></a></p>
</div>
<br />

Komentarz chyba zbędny.

Główna część strony to tabelki. Ba, jedna z nich jest ukryta dzięki display:none (bo nie można przecież jej po prostu nie wygenerować, prawda?)!
center,font,table, atrybuty border, background, align – machina czasu!
Nagłówki w treści jako b, a wcześniej to 10 h1 wstawione.
Puste komórki tabelki, wszędzie… 3/4 tego badziewnego kodu jest albo ukryta albo pusta…

Po bardzo długiej tabelce, mamy banerki po prawej.

1
2
3

W tym wypadku komentarz również zbędny.

I znowu lecą h1 – a co!
3/4 strony stanowią listy odnośników. Rządowa farma linków
Formularz subskrybcji z on w kodzie. I najgorszą imitacją placholder. Ot, klikasz w pole i kasuje wszystko, co tam jest. Wkurza. Mocno. Serio.
Tym razem zamiast listy odnośników, dostajemy tabelkę odnośników. Cudnie!
W stopce adres nie jest w address. Ale to chyba najmniejszy grzech tej strony.
W arkuszu stylów wszędzie walnięte float:left i position:relative
BoxGreen, a później definicjePojec. Totalny bajzel.
Nie przeglądam dalej – nie ma po co.

Może i agregować dane umieją, ale prezentować ich już nie. Porażka. Aż chce się powiedzieć: oceniaj książkę po okładce!

Czytaj dalej...

men.gov.pl

18 marca 2012 przez Comandeer | Opublikowany w Krytyka

Tagi: Gniot, Krytyka

1

Oto nadszedł czas długo wyczekiwanej zemsty! Za te wszystkie lata spędzone karnie w szkolnej ławce, wreszcie mogę się odpłacić! BUHAHAHA! I choć nie uda mi się ogniem piekielnym przypiec swych czcigodnych nauczycieli, to mogę smagnąć bitowym biczem stronę naszego ukochanego Ministerstwa Edukacji. Mam nadzieję, że będzie to smagnięcie bardzo bolesne.

Jak widać, nasze szkolnictwo sukcesywnie obniża poziom.
Transitional, czyli na nasz język – 30% na podstawie.
Jakieś gówniane meta od Facebooka. Nigdy nie umiem pojąć czemu ten cały OpenGraph nie może korzystać ze standardowych meta, albo jeszcze lepiej – microdata?
Jak widzę, tak jak w większości szkół, postanowiono ciąć wydatki i wykorzystać darmowe rozwiązania profesjonalne – w tym wypadku Joomlę.
Mamy 3 kanały informacji. Dwa RSS i jeden ATOM. Szkoda, że ich title są tak dużo mówiące, że nie wiem który do czego prowadzi.
7 script – oczywiście w head. Do tego niezoptymalizowany kod GA i asynchroniczny loader Facebookowego API z pustym div i jakąś funkcyjką w globalnym scope, mimo istnienia przestrzenii nazw FB (naprawdę tego API nie dało się ładniej napisać, panie Zuckerberg?!).
4 arkusze stylów + jeden specjalnie dla umarłego IE6. Żrecie mi niepotrzebnie transfer jedynie!
Dwa razy dodawana jest ta sama faviconka, oczywiście IE-ową składnią.
Kod strony przypomina program nauczania o języku HTML w szkołach: div w div + kilka ładnych tabelek.
Nieodzowny #wrapper, który – tak jak w 90% przypadków – jest zbędny.
Jak już wspomniałem, totalny divitis. Do wstawienia logo zużyto aż 2 divy, z których ani jeden tak naprawdę nie jest potrzebny. Oczywiście stwierdzono równocześnie, że niepotrzebne jest tu babranie się z h1, a obrazkowi najlepiej walnąć przestarzały atrybut border. Pomińmy fakt, że logo jest tak zaawansowane graficznie, iż można je z powodzeniem zamienić na zwykły tekst z borderem graficznym na dole.
Ktoś inteligentnie stwierdził, że na nawigację w topie najlepiej nadaje się tabelka. Ja tu widzę jedną listę + jakiś div co najwyżej. No ale może ja się nie znam.
Straszny szowinizm. BIP i Twitter nie mają target="_blank", a biedny Facebook ma!
Formularz wyszukiwania… Oczywiście tandentna JS-owa imitacja placeholdera (całe szczęście nie usuwa mi tego, co wpiszę!). Brak fieldset też nie dziwi. Ale to
1
<input type="image" value="Szukaj" class="buttonSearchModule" src="/images/M_images/searchButton.jpg" onclick="this.form.searchword.focus();"/>
już tak. Jeśli zastosowanie input[type=image] jeszcze jakoś zrozumieć mogę (chociaż button daje 3 razy większe możliwości), tak tego bezsensownego onclick nie mogę.
Wow, linki do powiększania czcionki są wstawiane przez JS! Szkoda, że przez document.write.
1
2
3
<div class="clr"></div>
<div id="stripe"></div>
<div class="clr"></div>
Ten #stripe to ten pasek z fajnym hasełkiem „Edukacja skuteczna, przyjazna i nowoczesna”. Rozumiem, że tekst ten jest aż tak zły, że należy ją ukryć przed wszystkimi, którzy nie oglądają obrazków, łącznie z Google?
Kod menu głównego to totalna porażka… Lista w trzech divach + wszędobylski span. Oczywiście przyjazne linki to też abstrakcja.

1
2
3
4
5
6
7
8
9
10
11
12

To coś wyświetla to: Przycisk RSS

Dalej mamy listę banerów wsadzoną bezwstydnie w divy, w dodatku z niepotrzebną klasą. Każdemu towarzyszy pusty div.clr.
Główna część – newsy wpakowana w tabelkę. Po prostu pięknie.
Każdy news to oddzielna tabelka. A tabelki oddzielane są tym
1
<span class="article_separator"> </span>

1
2

Przycisk do drukowania… Bo oczywiście nie istnieje w CSS coś takiego jak @media print, prawda?

O, a po treści kolejna divlista banerów! Cudnie! Oczywiście z target="_blank".
Wow! Nagle w środku kodu includujemy sobie jQuery w prehistorycznej wersji 1.2.3 i wstawiamy sobie słit banerki! So cute… Szkoda tylko, że jest tu też style, który psuje słodkość sytuacji.
Nawet jeden ze słit banerków jest wysokiej jakości flashem, którego można by na słabej jakości GIF-a przerobić.
Stopka – czyli powtarzamy menu + walimy tekst o copyrightcie.
Szybki rzut oka na JS (rozmiar.js) i już wiem, że (function(){}()) jest tu nieznane. Tak samo jak przestrzenie nazw i programowanie obiektowe w JS.
Najpierw wczytywane są style od JS (co de facto najpierw należałoby sprawdzić czy wgl trza wczytać), później coś z formów, a dopiero później podstawowe style. Inteligentnie.

Na deser – formularz dla interesantów.

1
2
3
4
5
6
7
8
9
10

Komentarz jest chyba zupełnie zbędny.

Aaaa, i jeszcze taka ciekawostka – na stronie nie ma ani jednego nagłówka.

Chała, panie, chała! Strona MEN-u doskonale oddaje stan naszej oświaty. Tyle.

Czytaj dalej...

premier.gov.pl

13 marca 2012 przez Comandeer | Opublikowany w Krytyka

Tagi: fifty-fifty, Krytyka

0

Skoro stronę głowy państwa już oceniliśmy, przyszła teraz kolej na stronę drugiej osoby w państwie – premiera! Po tym jakże fenomenalnym wstępie, przystąpmy od razu do meritum sprawy.

Strona od samego początku *ekhem*niczym rząd*ekhem* ciut nawala
Język dokumentu jest definiowany aż w trzech miejscach. Dwa pierwsze – standardowy i polecany lang na html i zupełnie zbędny meta[http-equiv="content-language"] wskazują na pl (międzynarodowy skrót od języka naszego). Natomiast trzeci – meta[name="language"] – wskazuje na… polish. W żadnym ISO o takowym skrócie języka nie przeczytałem.
Tytuł się zmienia na podstronach – fajnie. Szkoda tylko, że dla mnie niewidocznie. Dobry zwyczaj – pierwszy człon to nazwa aktualnej podstrony, a dopiero potem tytuł strony. Tak jest wygodniej.
Cóż za szowinizm crawlerowy! Tylko googlebot, Slurp i msnbot dostały swoje własne regułki, a resztę nieładnie potraktowano meta[name="robots"]!
A teraz z kolei szowinizm przeglądarkowy! Czemu IE dostaje swoje własne link[rel="shortcut icon"], a reszta link[rel="icon"]?!
Jest RSS – fajnie. Ale nie byłbym sobą gdybym nawet z pozytywa nie zrobił negatywa Toteż zapytuję: a gdzie ATOM?
3 arkusze stylów. O 2 za dużo. Poza tym media są feee… Teraz na topie znalazły się @media-queries.
No proszę, tu nawet zombiaków miło przyjmują – mamy arkusz specjalnie dla IE 6 i jeszcze starszych.
11 (sic!) plików JS. O 9 za dużo. I oczywiście radośnie sobie w head siedzą.
Stara wersja jQuery.
 w script po prostu śmieszy. To było dobre w IE5.
Cufon? Lepiej @font-face.
jQuerowe live już zdeprecjonowano.
Kod body strasznie nieczytelny (plus za kompresję ), ale DirtyMarkup pomógł.
O, menu służące do przeskakiwania do odpowiednich sekcji strony! Ładne, ładne. Szkoda, że tak rzadko je widać.
Moim bardzo skromnym zdaniem, pewien divitis.
Dobrze wykonany image-replacement na logo (h1 i a z ujemnym text-indent), chociaż istnieją lepsze techniki.
Uaa… name dla linków w menu? Nie można jakoś ładniej?
Wersja WAI nawet jest. Chociaż oprócz zwiększonego kontrastu za dużo zmian nie zauważyłem (szczerze to ta zmiana kontrastu jak dla mnie wręcz zmniejszyła czytelność).
Dawno nie widziałem label dla przycisku wyszukiwania… A gdyby ktoś pomyślał, to by tam wstawił button z image-replacement i normalne value zamiast tego input[type="submit"] i byłoby ładniej.
Ładny slider. Oczywiście tradycyjnie pusty element nawigacyjny wisi w próżni, zamiast być wstawiany przez JS.
Nie no! Wiadomości to lista! Połechtali mnie.
1
<img src="lay-gfx/baner-noc.jpg">
Ale tym już lekko poranili.
Stopka tak w połowie kodu się zaczyna
A czemuż to social linki nie są w liście jak przystało?
Mamy tu przykład bardzo rozbudowanej, użytecznej stopki, która spełnia ważną rolę nawigacyjną.
Ale ten adresik kancelarii to można by w address walnąć.
Czemu link „Zgłoś błąd” nie ma poprawnego href i działa tylko z JS? Jakaś aluzja polityczna?
I na samym końcu nie do końca zoptymalizowane GA i jakiś pusty element wymagany przez fejsa (czemu se tego sam nie wstawi? bezsens!).

A teraz CSS:

1
2

body{color:#282725;font:12px Arial;background:#fff url('../lay-gfx/bg-body.png') repeat-x;text-align:center;margin:0 auto;padding:0;line-height:16px;width:100%;}
body#sub {color:#282725;font:12px Arial;background:#fff url('../lay-gfx/bg-body.png') repeat-x;text-align:center;margin:0 auto;padding:0;line-height:16px;width:100%;}

Ma to sens?

Outline:none dla linków.
Nie korzysta się tu z kaskadowości i dziedziczenia. Style są często powtarzane.
Wiele nieefektywnych (i nieefektownych zarazem) selektorów typu id id.
1
#trailimageid {z-index:2000000000000;}
Hmmm
Jeśli chodzi o JS, to za dużo zdeprecjonowanego, niewydajnego jQuerowego live.
Spojrzenie w plik scripts.js wystarczy, żeby wiedzieć, że funkcje natychmiastowego wywołania i brak wycieków do globalnego scope są obce programiście.
Spojrzenie w fpheader.js tym bardziej utwierdza, że pojęcia te są obce, a często stosowane na oślep (albo funkcja anonimowa albo jej jQuerowy odpowiednik). Obca jest także skrótowa notacja deklaracji zmiennych, korzystająca z przecinka.

Jaka zatem będzie ocena końcowa? Od strony HTML nie jest najgorzej (ba, są elementy, które mnie wręcz zachwycają!), ale CSS i JS najwyższych lotów już nie są. Tragicznie nie jest, ale dobrze też nie. Na szczęście jest jeszcze czas, żeby poprawić wszelkie niedociągnięcia

Czytaj dalej...

mac.gov.pl

4 marca 2012 przez Comandeer | Opublikowany w Krytyka

Tagi: Gniot, Krytyka

0

Dziś przyjrzymy się dokładniej stronie Ministerstwa Administracji i Cyfryzacji. Jego misją – jak możemy przeczytać na stronie głównej, pod tekstem o pięknym tytule Ministerstwo w instalacji:

Chcemy to ministerstwo budować na Państwa oczach. I wykorzystać szansę, jaką dają nowoczesne technologie, by umożliwić obywatelom wgląd, ocenę i udział w tym, co robi władza.

No cóż, zobaczmy czy webmasterowi ten cel udało się zrealizować (albo – w myśl tytułu artykułu – realizować).

Validator zachwycony nie jest.
Podobnie jak ja pierwszym wizualnym wrażeniem. Prosto, szaro, nudno.
Ach, przejaw nowoczesnych technologii w jakże gorącym HTML5!
Ach, jakże piękny przejaw patriotyzmu w nieprzyznaniu się do naszego wspaniałego, rodzimego języka w nieobecnym atrybucie lang na html!
Nigdy nie pojmę dlaczego wszyscy, którzy piszą w HTML5 używają – de facto błędnej! – składni XML-owej /
Jeśli ma to być tak nowoczesna technologicznie, przyjazna i przejrzysta strona, to raczej tytuł strony powinien informować o jej zawartości, a ja wiem tylko, że jestem na stronie Ministerstwa Administracji i Cyfryzacji.
O, mamy link[rel="shortcut icon"] (IE-owa odmiana składni dla ikonki) i graficzkę w png, czyli w formacie nie do końca wspieranym przez IE. Gdzie tu logika?
Widzę, że wiedza o minifikacji JS istnieje, ale już na temat blokowania paralelnego ściągania zasobów poprzez umieszczenie script w head – nie.
Mój ulubiony minus – GA.

1
2
3
4
5

<div class="disclaimer"><div style="width:960px; margin:0 auto;"><small>Oglądasz testową wersję strony Ministerstwa Administracji i
Cyfryzacji<img src="http://mac.gov.pl/wp-content/themes/mac/img/close.jpg" style="float:right;" alt="close" /></small></div></div>
<script type="text/javascript">
$(".disclaimer").click(function(){$(this).hide();});
</script>

Czyż to nie jest piękne? Wygląda nie bardzo, działa nie bardzo (zamykanie na całym obszarze, a nie na iksie), style inline, niepotrzebny obrazek (o × oczywiście nie słyszeli). No i najważniejsze – wyświetla się przy każdym odświeżeniu strony. Wydaje mi się, że mam dobrą pamięć i nie muszą mi przypominać za każdym razem, że to tylko testowa wersja.

No i tu się kończą nowoczesne technologie… :C Nie ma nowych, fajnych znaczników z HTML 5 – są stare jak świat div-y D:
Niepotrzebnie pakuje się tu div.logo – odpowiednio przypisane style dla h1 i a załatwiłoby sprawę.
Czy tylko mnie się wydaje, czy ten orzełek naprawdę jakiś taki niewyraźny?
Czemu dla BIP wszyscy używają target="_blank"?
Ach, role="search" na formularzu… Powiało nowoczesnymi technologiami…
1
<label class="screen-reader-text" for="s">wyszukaj w serwisach MAC</label>
Nazwa klasy bardzo ładna… Szkoda, że tylko na nazwie się skończyło.
I uciekły nowoczesne technologie, bo pole wyszukiwania jest polem tekstowym, a nie typu search.
1
<input type="submit" id="searchsubmit" value="" />
A przed chwilą mieliśmy specjalną klasę dla czytników.
1
2
3
4
5
6
<script>
$(document).ready(function() {
var pathname = window.location.pathname;
$('.main-menu ul li').find('a[href="'+pathname+'"]').addClass('activem');
});
</script>
Pomocy – JS mi się wyłączył, pasek adresu znikł, a menu mi nie pokazuje gdzie jestem!

1
2
3
4
5
6
7

Raz, że to się w CSS robi, dwa, że w tym menu nie ma ani jednego span. Marnujecie mi CPU tylko!

1
<div class="slide hidden">[...]</div>

1
.hidden {display:none;}
Slider niedostępny bez JS? Mądre. Zresztą – treści nie powinno się ukrywać w ten sposób, a za pomocą position:absolute i ujemnych wartości top i left.
Czy tylko ja mam to wrażenie, że najbardziej nowoczesną rzeczą na tej stronie jest odwtarzacz Vimeo?
Fajny mają sposób na tworzenie nawigacji dla slidera. Jedyny minus takowy jest, że tylko w JS. A może by tak slider z fallbackiem do CSS-owego :target? To na serio nie jest dużo roboty.
Trochę konsekwencji! Albo używamy Unicodowego znaku (»), albo encji (», a później jeszcze nawet »)!
No, no – wiadomości na liście. Rzadko spotykane, a szkoda!

1	<a title="ACTA i leki generyczne, GMO oraz części <br/><a href="http://mac.gov.pl/dzialania/acta-pytania-o-polityke-panstwa-i-zasady-demokracji-czyli-czesc-v-odpowiedzi-na-pytania-zgloszone-w-czasie-debaty-6-lutego/" class="more" title="więcej »">więcej »</a>

Małe niedopatrzenie?

1
<div class="clear"></div>
Mało nowoczesne.
Adresik w stopce można by w address walnąć.
Wow, treści na licencji CC? Fajnie.
A w CSS co mamy? A np to:
1
a {text-decoration: none;} a:hover {text-decoration: none;}

I to:

1
2
3
4
5
6
7
8
9
10

/* style overrides for comments pagination */
.wp-paginate-comments {}
.wp-paginate-comments li {}
.wp-paginate-comments a {}
.wp-paginate-comments a:hover, .wp-paginate-comments a:active {}
.wp-paginate-comments .title {}
.wp-paginate-comments .gap {}
.wp-paginate-comments .current {}
.wp-paginate-comments .page {}
.wp-paginate-comments .prev, .wp-paginate-comments .next {}

Gdyby skasować wyrażenie „nowoczesne technologie”, to ocena strony byłaby zupełnie inna. Ale niestety to wyrażenie się pojawiło – i to nie byle gdzie, ale na stronie Ministerstwa Administracji i Cyfryzacji! – i trzeba przyznać, że w tym względzie mamy epic faila.

Czytaj dalej...

Prezydent.pl

26 lutego 2012 przez Comandeer | Opublikowany w Krytyka

Tagi: fifty-fifty, Krytyka

0

Dzisiaj przyjrzymy się uważniej stronie najważniejszego organu władzy wykonawczej w naszym kraju, a więc portalowi prezydenta RP. Od strony wizualnej pierwsze wrażenie jest całkiem niezłe, ale czy utrzyma się po zajrzeniu w mroczne odmęty kodu? Sprawdźmy!

Na sam początek, aby było radośnie – Validator!
Po tak radosnym początku, widzimy sobie trybik quirks (ach, te spacje i entery przed DOCTYPE).
Oczywiście XHTML 1.0 Transitional – po co nam pełna zgodność ze standardami?
Ja nie wiem czemu wszyscy pchają tą fejsową przestrzeń nazw (xmlns:fb)…
Dobry obyczaj każe deklarację kodowania dać jako pierwszą w head. Ale to tylko dobry obyczaj.
1
<meta name="language" content="pl" />
Zbędne. Od tego mamy atrybut lang.
Słowa kluczowe dla strony prezydenta? Hymn i mazurek dąbrowskiego – a jak! Rozumiem, że – zgodnie z opisem strony – są to elementy najbliższego otoczenia prezydenta?
3 pliki JS – max osiągnięty. Oczywiście tkwią radośnie w head zamiast rezydować na końcu body.
3 arkusze stylów – o 2 za dużo. Do tego trzeba doliczyć dwa kolejne dla IE6 i IE7 (ktoś jeszcze wspiera te starocie?).

1
2
3
4
5
6

Niepotrzebne komentarze (w XHTML jak już co to sekcje CDATA być powinny).
Browser sniffing i to jeszcze do wykrywania liska 2 (dziś mamy dziesiątkę). To jest jeszcze bardziej martwe niż IE6!
Kocham strony „XHTML-owe”, na których działa document.write.
Ach, linki dla osób korzystających z czytników ekranowych i przeglądarek tekstowych! Rzadkość widzieć to.
1
<span class="none">|</span>
A w CSS do tego display:none. Jaki to ma sens? No nie ma. To powinien być ozdobnik dodawany przez CSS (hint: :after).
Później w kodzie znajduje się belka górna z menu… Tylko, że w kodzie odnośniki są w kolejności odwrotnej niźli to, co się wyświetla. Daje to dość ciekawy efekt przy nawigacji klawiaturą (czytamy od prawej do lewej).
Wyszukiwarka nie działa bez JS. Bardzo duży fail.
I w wyszukiwarce znajdujemy kilka on: submit, blur i focus. A wszystko po to, żeby imitować placeholdera.
Przebiwszy się przez całe menu, dostajemy ładny napis, że to „Oficjalna strona Prezydenta Rzeczypospolitej Polskiej”. Szkoda, że powinno być to na samym początku, tak jak jest to wyświetlane na stronie.
1
<h1>Prezydent.pl</h1>
W CSS do tego dochodzi display:none dla h1. Niezły fail Ktoś tu nie rozumie pojęcia image-replacement (i pewnie nie zrozumie powodu banu w Google). BTW strona niby taka przyjazna osobom z czytnikami ekranowymi i tu coś takiego?
Poziome menu na szczęście i w kodzie, i w wyglądzie wyświetla się tak samo.
1
2
3
4
<div class="corner top-left"></div>
<div class="corner top-right"></div>
<div class="corner bottom-right"></div>
<div class="corner bottom-left"></div>
To fragment kodu slidera. Oczywiście nie działa on bez JS.
oncontextmenu="return false" na obrazkach
Divów się tu używa do wszystkiego. Nawet do oznaczania dat.
1
<div class="clear"></div>
Istnieją o wiele lepsze sposoby. Naprawdę.
Puste linki lub wypełnione   to tu normalka. Tak samo jak style inline dla nich.

1	<div class="image" style="background-image: url('/gfx/prezydent/pl/defaultgalerie/227/662/1//k010_kprp_20120216_wg_011.jpg'); height: 180px; cursor: pointer;" onclick="location.href = 'http://www.prezydent.pl/aktualnosci/zdjecia/galeria,662.html';">

To już jest przegięcie. Div imitujący linka?! A a przecież też może mieć wyświetlanie blokowe.

Social linki w tabelce i z target="_blank"… No cóż, można i tak.
Później w kodzie mamy… banery! Całe szczęście, że są to reklamy związane z działalnością prezydenta.
Menu w stopce podzielone na divy i listę. Ciekawe.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div id="jquery-content">
<h2>Opuszczasz oficjalny serwis Prezydenta Rzeczypospolitej Polskiej</h2>
 
<h3>Dziękujemy za odwiedzenie naszej strony.</h3>
Zapraszamy ponownie.

 

<form action="">
<div class="button1 c">
<div><label class="none" for="ok_go">OK</label>
<input id="ok_go" type="button" value="ok" /></div>
</div>
<div class="button1 c2">
<div><label class="none" for="anuluj_go">anuluj</label>
<input id="anuluj_go" type="button" value="anuluj" /></div>
</div>
</form></div>

A to co za wspaniały kwiatuszek?

Przejdźmy do CSS:
1
2
3
4
body, td {
font-family: Georgia, nimbus roman no9 l, Tahoma;
font-size: 12px;
}
To chyba pozostałość po erze tabelek. BTW ktoś zna drugą czcionkę, której nazwa jest źle zapisana?
Klasyczne czepianie się, ale 0px; można krócej zapisać.
1
2
3
4
5
6
h1 {font-size: 14px;}
h2 {font-size: 13px;}
h3 {font-size: 12px;}
h4 {font-size: 11px;}
h5 {font-size: 10px;}
h6 {font-size: 9px;}
Ach, te zróżnicowanie wielkości.
Klasa .clear jest deklarowana dwukrotnie w dwóch różnych arkuszach (base.css i layout.css).
Mają plusa za CSS sprites.
A teraz coś o JS. Oczywiście zacznijmy od super starej wersji jQuery.
1
2
var EditoStart = new Object();
EditoStart.functions = new Array();
Obydwie rzeczy uznaje się za złe techniki (możliwość nadpisania Object i Array). Lepiej zastąpić to {} i [].
1
2
3
4
for(var i = 0; i < EditoStart.functions.length; i++)
{
EditoStart.functions[i]();
}
Eeee?
Kilka $(document).ready() – zarówno w plikach JS, jak i rozrzucone po całym HTML.
1
2
3
4
function insertActiveX(html)
{
document.write(html);
}
Śmiech na sali.
Preload obrazków można w CSS machnąć. A żeby do zmiany obrazka używać wrappera do document.getElementById, to naprawdę trza się postarać.
Dekodowanie base64? A gdzie oni tego używają?
Albo babrzemy się w DOM, albo używamy jQuery. Po co to mieszać?
Kod banerów można napisać prościej i przejrzyściej.
Tak samo kod dla obsługi popupów (banery.js).

Podsumowując: nie jest źle, ale nie jest też dobrze. Dużo rzeczy trzeba poprawić. No, ale przynajmniej ładnie to wygląda.

Czytaj dalej...

psz.praca.gov.pl

12 lutego 2012 przez Comandeer | Opublikowany w Krytyka

Tagi: Gniot, Krytyka

4

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.
1
2
<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).
1
2
<META HTTP-EQUIV="Pragma" CONTENT="cache">

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.
1

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.
1
<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!
1

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 ~~kolumny~~tabelki.
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.
1
<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ę!

1
2
3
4
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
Nie ma jak korzystanie ze skracania cech i zerowych wartości.
1
2
3
/*
#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.
1
/*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.

Czytaj dalej...

sejm.gov.pl [druga wersja]

17 stycznia 2012 przez CapaciousCore | Opublikowany w Krytyka

Tagi: fifty-fifty, Krytyka

1

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

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.

Czytaj dalej...

senat.gov.pl [druga wersja]

2 stycznia 2012 przez Sobak | Opublikowany w Krytyka

Tagi: Krytyka, trzy czwarte

2

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"> </span><span class=""> </span><span class=""> </span><span class=""> </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

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.

Czytaj dalej...

pokrzywdzeni.gov.pl [wersja druga]

14 grudnia 2011 przez CapaciousCore | Opublikowany w Krytyka

Tagi: Gniot, Krytyka

3

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> </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.

Czytaj dalej...

Losowy wpis

premier.gov.pl

2 maja 2012 przez Comandeer | Opublikowany w Krytyka

Tagi: Gniot, Krytyka

2

28 marca 2012 przez Comandeer | Opublikowany w Krytyka

Tagi: Gniot, Krytyka

3

18 marca 2012 przez Comandeer | Opublikowany w Krytyka

Tagi: Gniot, Krytyka

1

13 marca 2012 przez Comandeer | Opublikowany w Krytyka

Tagi: fifty-fifty, Krytyka

0

4 marca 2012 przez Comandeer | Opublikowany w Krytyka

Tagi: Gniot, Krytyka

0

26 lutego 2012 przez Comandeer | Opublikowany w Krytyka

Tagi: fifty-fifty, Krytyka

0

12 lutego 2012 przez Comandeer | Opublikowany w Krytyka

Tagi: Gniot, Krytyka

4

17 stycznia 2012 przez CapaciousCore | Opublikowany w Krytyka

Tagi: fifty-fifty, Krytyka

1

2 stycznia 2012 przez Sobak | Opublikowany w Krytyka

Tagi: Krytyka, trzy czwarte

2

14 grudnia 2011 przez CapaciousCore | Opublikowany w Krytyka

Tagi: Gniot, Krytyka

3

Kategorie

Archiwum