Krakow2022.org

Temat na czasie w ostatnich dniach. Chęć organizacji Zimowych Igrzysk Olimpijskich w Krakowie. W ostatnim czasie (m.in. na Wykopie) przewinęła się kwestia kolejnych pieniędzy wpakowanych w tą, delikatnie ujmując, niepewną inwestycję. Kwestie polityczne odłóżmy jednak na bok i porozmawiajmy o tym, co dotyczy tematyki WebKrytyka, strony krakow2022.org, czyli witryny promującej całe przedsięwzięcie. Strona została wykonana za kwotę 68 880zł przez firmę Eura7.

Po wejściu na stronę wita nas… a jakże! Komunikat o ciasteczkach, znak dzisiejszych czasów. O tym, co jest z nimi nie tak pisałem już na swoim prywatnym blogu.
Patrząc od góry – za dużo miejsca zajmuje treść mało istotna – logo i slider. Nawet na wysokich ekranach trzeba przewinąć stronę, aby dojść do rzeczywistej treści.
Ach, te przyciski do powiększania tekstu. Nie żeby coś, ale strona bez problemu daje się skalować w przeglądarce (ctrl+scroll albo ctrl i plus albo minus). Moim zdaniem zbędny dodatek,choć może niektórzy ludzie nie wpadną na możliwość powiększenia witryny u siebie na komputerze.
Nie ma to jak przyjazne strony błędów. W przypadku nieistniejącego katalogu otrzymujemy… białą stronę. W przypadku nieistniejącego pliku jest niewiele lepiej, bo otrzymujemy białą stronę z napisem „File not found”.
Czas na kod. Świetnie, doctype z HTML5. Szkoda tylko, że tak, jak w większości wypadków, wykorzystanie nowej wersji HTML kończy się właśnie na doctype, a dalej wszystko jest po staremu.
Atrybut lang dla html – bardzo dobrze. Szkoda, że na angielskiej wersji językowej także jest ustawiony na pl. To bardzo duży błąd! Wyobraźcie sobie screen reader czytający niewidomym angielską treść z polskim akcentem. Tylko współczuć.
Zaczyna się to o czym mówiłem. Mimo, że HTML5 udostępnia skróconą deklarację kodowania (obsługuje ją nawet IE6!), to strona nadal korzysta z niepotrzebnie wydłużonej wersji.
Metatag robots powinien zostać zastąpiony wpisem w pliku robots.txt. Swoją drogą ciekawe dlaczego ten wyłącza indeksowanie dla wszystkich wyszukiwarek – nieroztropne posunięcie, a ustawienia z pliku wykluczają się z ustawieniami w HTML.
Tag revisit-after w ogóle nie jest uznawany przez boty wyszukiwarek.
Pusty metatag keywords. Druga sprawa, że Google już w ogóle go nie bierze pod uwagę ze względu na liczne nadużycia i wątpliwą wiarygodność zawartych w nim informacji.
9 ładowanych plików CSS. O 8 za dużo. Minimalizacja ilości zapytań HTTP jest jednym z podstawowych sposobów na optymalizację witryny. Ponadto atrybut type="text/css" jest całkowicie zbędny w HTML5
To samo odnosi się do plików JS, z tym, że tam jest jeszcze gorzej. 26 zapytań zamiast kilku (biorę pod uwagę pliki JS z zewnętrznych serwerów, np. od Google). W dodatku wszystkie skrypty (poza szczególnymi wypadkami jak html5shiv) powinny być ładowane tuż przed tagiem zamykającym body. Zapobiega to opóźnianiu ładowania witryny lub jego całkowitym zatrzymaniem w wypadku zapętlonych skryptów. Atrybut type dla script także jest zbędny.
```
<body id="pl-index" class="home page page-id-88 page-template page-template-page_composer-php" style="font-size: 14px">
```
Znacie to skądś? Pachnie WordPressem, mimo, że inne miejsca tego nie potwierdzają. Plus styl inline, który z powodzeniem mógłby (i powinien) zostać przeniesiony do plików CSS.
Zaczyna się robić divitis (zbyt duża ilość divów) wykorzystujący niektóre z możliwości dołączonego wcześniej Bootstrapa. Plus należy się za wykorzystanie tagu nav i atrybutu role.
```
<a href="/pl" class="lang-pl" title="PL"></a>
<a href="/en" class="lang-en" title="EN"></a>
```
Link bez opisu nie spełnia swojej roli. Powinien zostać użyty image-replacement i normalny tekst, jeżeli już chcemy uniknąć tagu img, choć w tym miejscu nie byłby on błędem.
```

```
Elementy takie jak ten nie powinny w ogóle znajdować się w kodzie HTML. Skoro coś zakomentowujemy, to chcemy, żeby ludzie tego nie widzieli. Wystarczy wsadzić to w blok PHP i otoczyć ichnim komentarzem, albo zwyczajnie usunąć.
```
<img src="/_cache/slides/978-500/crop/logo_1.jpg"  alt=""/>
```
To, że przy pustym alt validator (przynajmniej ten oficjalny) nie krzyczy, nie zmienia to faktu, że jest on błędem. Jest to opis alternatywny i musi zostać dostarczony. Ponadto, przez takie zabiegi link de facto nie ma treści.

<div id="bx-pager">
    <a data-slide-index="0" href="" title="slajd 0"></a>
    <a data-slide-index="1" href="" title="slajd 1"></a>
    <a data-slide-index="2" href="" title="slajd 2"></a>
</div>

Plus za atrybut data-* i w sumie chyba tylko za to. Ponownie puste linki! No i paginacja wyraźnie jest listą, więc właśnie te znaczniki powinny zostać użyte.

```
<img width="222" height="160" src="/_cache/news/222-160/crop/panczenistki.jpg" alt="Natalia Czerwonka (druga z lewej) fot. PKOl">
```
Należy się plus za bardzo dobry alt i użycie atrybutów width i height. Ich wykorzystanie gwarantuje, że nawet, gdy obrazek nie zostanie jeszcze wczytany, na stronie zostanie odpowiednia ilość pustego miejsca – nie będzie przeskoku po załadowaniu grafiki.
Tutaj widać niekonsekwencję. HTML5 pozwala na kończenie pojedynczych tagów metodą zwykłą (>) i XML (/>), ale obrany sposób powinien być stosowany konsekwentnie w całym dokumencie. Swoją drogą lepiej użyć pierwszego, bo po co marnować dodatkowe bajty.
Można by się pokusić o użycie znacznika time przy datach artykułów. Dostarcza on dodatkowych informacji np. dla wyszukiwarek.
```
<div class="clearfix"></div>
```
Pusty element = zbędny element. Od takich rzeczy mamy pseudoselektory :before i :after w CSS.
```
<a href="javascript:void(0)" id="showResultsButton">Wyniki</a>
```
Coś, co ma aktywować zdarzenie JS i działać tylko przy nim nie jest poprawnym linkiem.
```
© Kraków 2022
```
Nie rozumiem. Deklarują kodowanie UTF-8, a wciąż używają encji, które nie są potrzebne
Skrypt poza znacznikiem body w oczywisty sposób wysypuje walidację.
Zakładka kontakt: dobrze, że dane są w address, ale ich struktura aż prosi się o listę definicji.
Sam formularz kontaktowy: plus za poprawne użycie label, ale gdzie się podział atrybut action?

Podsumowując – tragedii nie ma. Widzieliśmy gorsze strony i nie raz opisywaliśmy je w tym serwisie. Mimo wszystko, za 69 tysięcy złotych przeznaczone na promocję naszego kraj można się spodziewać czegoś więcej.

2 komentarze do “Krakow2022.org”

x-dred pisze:

4 kwietnia 2014 o 06:56

„Sam formularz kontaktowy: plus za poprawne użycie label, ale gdzie się podział atrybut action?”

Może to formularz ajaxowy? Jeśli tak, to atrybut action nie jest konieczny.

Odpowiedz
1. Comandeer pisze:
  
  4 kwietnia 2014 o 08:18
  
  Jeśli formularz AJAX-owy nie działa bez JS to znaczy, że jest niepoprawnie zaprojektowany. Podstawowa funkcjonalność strony winna działać bez JS.
  Zasada jest prosta: jeśli coś odwołuje się do zasobu Sieci to winno posiadać jego poprawny URI.
  Poza tym w dzisiejszych czasach AJAX i tak najczęściej jest po prostu nakładką na REST-a (i dobrze).
  
  Odpowiedz