BezpiecznyAutobus.gov.pl

Nasz rząd znany jest ze swych skutecznych i błyskotliwych działań. Nic zatem dziwnego, że ostatnia kampania MSW pod wdzięcznym tytułem Smutny autobus doczekała się żywego odbioru ze strony Internautów. Jakkolwiek by nie mówić o spocie, osiągnął swój cel – wszyscy o nim mówią!

Spot odniósł tak spektakularny sukces i osiągnął swój cel tak dobitnie, że nikt nawet nie zauważył co reklamuje (to się nazywa dobrze przeprowadzona kampania!). Udało mi się jednak rozszyfrować tenże zaszyfrowany przekaz podprogowy i dzisiaj przyjrzę się nieco bliżej stronie BezpiecznyAutobus.gov.pl.

  • Pierwsze, co rzuca się w oczy, to fakt, że strona wygląda na niedokończoną. Po prawej stronie formularza jest tak dużo białego, wolnego miejsca, że z powodzeniem można by tam wsadzić jakieś informacje o usłudze (albo po prostu wyśrodkować i rozszerzyć obecny formularz). Albo COI (autor strony, którego strona? jest stworzona przez firmę zewnętrzną; widać rozwijają bardziej pion usług desktopowych) stosuje nowatorskie podejście, albo naprawdę mają samych programistów jak Google.
  • Oczywiście wita nas również komunikat o cookies – link w stopce powinien najzupełniej wystarczyć.
  • Ikonka strony na karcie przeglądarki najprawdopodobniej miała przedstawiać ćwiartkę opony. Osobiście kojarzy mi się jednak z końcówką miotły.
  • Przeniosłem wzrok na pasek adresu. Chociaż nie wiem jeszcze czy mój autobus jest bezpieczny, wiem już, że ta strona jest – cały ruch jest szyfrowany przez TLS. Duży plus za to – w przypadku stron rządowych takie małe gesty bardzo znacząco podnoszą zaufanie (ale i tak się przyczepię, bo przecież można było od razu zastosować SPDY/HTTP 2.0). Jednak z resztą adresu nie jest już tak dobrze. Zupełnie bezsensowny jest fragment doklejany do głównego adresu – bezpieczny-autobus-web. Doskonale wiadomo, że strona traktuje o bezpiecznym autobusie i jest w Sieci. Całkowicie redundantny fragment, psujący dodatkowo przyjazność adresów.
  • Jak już jesteśmy przy adresach, wszystkie podstrony mają rozszerzenie .xhtml. Jedna z najbardziej zaawansowanych technicznie stron w Polsce? Nie, to perfidne kłamstwo – wszystko jest słane jako text/html (kto nie wierzy, niech spojrzy w odpowiednie miejsce w przeglądarce). W tym momencie .xhtml wywołuje jedynie uśmiech politowania.
  • Jeszcze o adresach: strona główna jest dostępna pod adresem https://bezpiecznyautobus.gov.pl/bezpieczny-autobus-web, jak i https://bezpiecznyautobus.gov.pl/bezpieczny-autobus-web/index.xhtml (na tę drugą wersję wskazuje link w logo). Pomijam już fakt, że to po prostu powinno być https://bezpiecznyautobus.gov.pl. Oczywiście wersja angielska znajduje się pod dokładnie tym samym adresem a to błąd.
  • Bardzo ciekawie wygląda też kwestia dostępności strony. Na samej górze mamy kontrolki do powiększania wielkości czcionki i przełączania do wersji z wysokim kontrastem (które to jest źle zrobione, ale o tym za chwilę). Przenoszę wzrok na formularz i co widzę? CAPTCHę, bez jakiejkolwiek pomocy dla osób niepełnosprawnych. Jesteś niedowidzący i dlatego używasz wersji kontrastowej? I tak nic z tego, bo nie odczytasz obrazka. Jak się już dba o dostępność, to dba się tam, gdzie należy a nie dodając zasłonę dymną.
  • Jak już mówiłem, wszystkie elementy u góry (powiększanie czcionki, przełączanie na wersję kontrastową i angielską) są źle zrobione. Powiększanie czcionki to akcja niepowodująca przejścia do następnej strony – zatem powinno zostać zrobione na przyciskach (button). Natomiast przełączanie na inną wersję strony jest przejściem na taką wersję, zatem powinno być linkiem odsyłającym do konkretnego zasobu. W obu przypadkach zastosowano bezsensowne, puste linki, jak za starych, dobrych czasów onclick. To rozwiązanie częściej nie działa niż działa (hint: ja lubię sobie otwierać wersję angielską w innej karcie – tutaj tego nie zrobię; zmuszanie usera do zmiany jego przyzwyczajeń to tak naprawdę strata tego usera).
  • Wpisałem do formularza losowy numer pojazdu. Oczywiście formularz wyświetlił błąd, że takiego pojazdu nie ma, ale pozostawił wypełnione pole od CAPTCHy. Zupełnie niepotrzebnie, bo przecież za każdym razem jest ona inna, więc muszę ręcznie opróżnić to pole.
  • Strona przykładowego raportu jest bardzo przejrzysta, ale link do pobrania go w formacie PDF znów odsyła w niebyt.
  • Oczywiście nie widać po czym TAB-uję (chociaż jest to prawdopodobnie problem związany z domyślnym stylowaniem pewnych przeglądarek – warto by to znormalizować) + dodatkowo zaburzono standardową kolejność bez jakiejkolwiek korzyści dla użytkownika. Dwa bardzo poważne błędy dostępności.
  • Przejdźmy do kodu. Walidator nie jest zachwycony.
  • Outline jest po prostu bezsensowny. Tak dużo niezatytułowanych sekcji wskazuje na to, że ktoś nie rozumie semantyki nowych elementów HTML5.
  • Język określony jest co prawda w kodzie strony, ale zawsze wskazuje na polski – nawet po zmianie na angielski.
  • W kodzie widać niekonsekwencje – część znaczników ma niepotrzebne atrybuty [type]. Tak samo niepotrzebnie wrzucony jest XML-owy slash (usprawiedliwienie dla dziwnego rozszerzenia?).
  • Wszystkie pliki CSS i JS są serwowane z http://bezpiecznyautobus.gov.pl/static-content/ – porównując to z adresem http://bezpiecznyautobus.gov.pl/bezpieczny-autobus-web mam wrażenie, że ktoś chciał zaimplementować CDN?
  • Kod ikonek zawsze mnie wkurza. Równie dobrze można je nazwać w standardowy sposób i wówczas browsery same je znajdą. No i jak już podajemy, to podajmy wszystkie.
  • Kolejna strona wsadzająca asynchroniczny kod GA do synchronicznie wczytywanego skryptu – skrajnie nielogiczne, chyba, że strona implementuje Content Security Policy. Specjalnie sprawdziłem nagłówki HTTP w poszukiwanie tego i nie znalazłem. W tym wypadku taki zabieg jedynie spowalnia stronę i jest przeciwko dobrym praktykom dołączania JS.
  • W nagłówkach HTTP natomiast znalazłem bardzo pozytywną niespodziankę – nagłówek Strict-Transport-Security, który wymusza używanie HTTPS. Bardzo duży plus – de facto to pierwsza strona, na której widzę to rozwiązanie.
  • W skrypcie załączającym GA dodatkowo znalazła się taka linijka:

    document.createElement('main');

    Czyżby ktoś używał starej wersji HTML5 Shiva? Nie, w shivie jest wpis o main? Ktoś chyba po prostu nie ogarnia.

  • Dla IE8- serwowany jest HTML5 Shiv przy pomocy tego kodu:

    <script src="/static-content/bezpieczny-autobus/html5.js" type="text/javascript"/>

    Ten kod spowoduje rozwałkę strony w IE, ponieważ taki sposób zamykania tagów jest charakterystyczny dla XHTML, którego te wersje IE nie rozumieją. To tak jakby próbować uratować samobójcę dając mu nóż.

  • Cały kod cierpi na poważny divitis.
  • Nagłówek strony nie ma? nagłówka. Dodatkowo ma bezsensowną sekcję, służącą jedynie do stylowania.
  • W logo natomiast brakuje? logo. Zamiast niego jest bzdurny, pusty element, który? zachowuje się jak obrazek. Bo wstawienie obrazka jest zbyt mainstreamowe.
  • <span class="font-label">Wielkość liter</span>

    Pomysł dobry, ale implementacja fatalna. Etykietka powinna być przed opisywanym elementem + dodatkowo połączona z nim poprzez atrybut [aria-labelledby].

  • <a id="headerForm:zmienJezyk" href="#" title="English" onclick="mojarra.jsfcljs(document.getElementById('headerForm'),{'headerForm:zmienJezyk':'headerForm:zmienJezyk','hash':''},'');return false" class="change-language">English</a>

    Najgorszy z możliwych typ linku. Dodatkowo tuż nad nim dołączany jest skrypt do jego obsługi. A wystarczy zrobić poprawny link i wszystkie problemy się rozwiązują.

  • Cały nagłówek strony jest wsadzony w formularz. Chora praktyka, przywodząca na myśl ASP.NET, ale po nazewnictwie podejrzewam tu Javę.
  • Formularz z opisem przypiętym przez [aria-labelledby] + CAPTCHA z [alt=captcha] wyglądają po prostu sarkastycznie.
  • main > section można sobie tutaj podarować. Wystarczy samo main.
  • Bezsensowna sekcja w stopce. Dodatkowo to element nawigacyjny posiadający więcej niż 1 element, więc nadaje się to na listę. No i oczywiście bezcelowy [target].
  • Odnośnie raportu przykładowego: o wiele czystszy i semantycznie poprawniejszy byłby kod z wykorzystaniem listy definicji. I w sumie tyle da się powiedzieć.
  • <a id="formPobraniePdf:pobierzRaportPdf" href="#" onclick="mojarra.jsfcljs(document.getElementById('formPobraniePdf'),{'formPobraniePdf:pobierzRaportPdf':'formPobraniePdf:pobierzRaportPdf'},'');return false" class="txt">Pobierz PDF</a>

    Oto kolejny przykład źle skonstruowanego linku. Bo przecież nie można zalinkować do PDF-a bezpośrednio.

  • A w CSS-ie style dla Fx 18. To jest jeszcze bardziej martwe niż IE 8, więc również proponuję nie wspierać.
  • Bardzo mnie ciekawi zastosowanie tego oto uroczego kodu:

    .ignore-br br{
        display: none;
    }

Niestety, strona nie robi takiego wrażenia jak kampania ją reklamująca? Nie mam ochoty rozerwać na strzępy osoby, która ją zrobiła a – co chyba jeszcze bardziej mnie zawiodło – strona na końcu nie popełnia samobójstwa.

Cóż, przynajmniej reklama jest na światowym poziomie.

6 komentarzy do “BezpiecznyAutobus.gov.pl”

  1. Użycie tego kodu
    document.createElement(’main’);
    jest zasadne

    HTML5 Shiv jest podpięty dla IE8 i starszych a tag MAIN nie jest obsługiwany przez IE11 i starsze.

    Jednocześnie nie ma sensu podpinać HTML5 Shiv dla IE11

    1. Hm, prawdę powiedziawszy nie wiedziałem. Ale raczej to nieobsługiwanie jest związane z brakiem odpowiedniego [role], bowiem IE9+ i tak styluje nieznane mu elementy. Zatem jeśli chcemy obsługi main w IE9+, to i tak raczej powinniśmy mu nadawać odpowiedni atrybut a nie po prostu wstawiać go do stylowania 😉
      Co do bzdurnego elementu: są ::before/::after i nie trzeba śmiecić pustymi elementami w kodzie. Tym bardziej, że tutaj sprawdzi się to znakomicie (ba, można wstawić logo jako tło i w tym momencie też mamy pełną kontrolę w CSS)

  2. „Bzdurny pusty element” w logo przechowuje logo po stronie CSS co umożliwia łatwą jego podmianę (bez dodatkowego requestu) na wersję w wysokim kontraście.

  3. I jeszcze słowo podsumowania.
    Poza tymi kilkoma niedociągnięciami technicznymi jest to bardzo dobry projekt w wykonaniu naszego kochanego państwa.
    Pod względem technicznym jak i merytorycznym.

    Jest to pierwszy duży krok w stronę służenia obywatelom a nie odwrotnie.

    Wszystkie (no może prawie wszystkie) bazy danych powinny mieć łatwy dostęp dla obywateli.

  4. Co do HistoriaPojazdu.gov.pl – serwis bliźniaczy, cierpiący na bardzo podobne problemy. Raczej nie widzę sensu powielania recenzji z jedynie zmienionym adresem.

    >Pod względem technicznym jak i merytorycznym
    Pod względem technicznym widzę źle zaprojektowaną stronę internetową. Pod względem merytorycznym… Cóż, jeśli za cały projekt uznajemy także reklamę, to wydaje mi się, że odpowiednie opinie zostały już wyrażone.

    >Jest to pierwszy duży krok w stronę służenia obywatelom a nie odwrotnie.
    Szkoda, że jak na razie wygląda to na krok trochę kulawego 😉 Niemniej – jest to faktycznie istotny przełom.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.