Prezydent.pl

26 lutego 2012 przez Comandeer | Opublikowany w Strony WWW

Tagi: ,

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

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.