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