Prezydent.pl

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.
  • <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?).
  • <script type="text/javascript">// <![CDATA[
    			if(BrowserDetect.browser = 'Firefox' && BrowserDetect.version < 3)
    			{
    				document.write('	<link href="/szablony/prezydent/styles/ff2.css" rel="stylesheet" type="text/css" media="all" />');
    			}
    // ]]></script>
  • 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.
  • <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.
  • 
    <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.
  • 
    <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.
  • 
    <div class="clear"></div>
    

    Istnieją o wiele lepsze sposoby. Naprawdę.

  • Puste linki lub wypełnione &nbsp; to tu normalka. Tak samo jak style inline dla nich.
  • <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.
  • 
    <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:
    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ć.
  • 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.
  • 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 [].

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

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Wymagane pola są oznaczone *

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