Krakow2022.org

3 kwietnia 2014 przez Sobak | Opublikowany w Strony WWW

Tagi: ,

2

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.

  • <!--<a href="/sk" class="lang-sk" title="SK"></a>
    <a href="/fr" class="lang-fr" title="FR"></a>-->

    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.

Komentarze 2 komentarze

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

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

Napisz komentarz

Uwaga! Uprasza się komentujących, którzy chcą obrazić autora, aby najpierw dokonali niezbędnego researchu jego osoby. Z góry dziękujemy za poświęcony czas.