[www] Najgorsza strona Opcje

[kujawska]

www.worstsite.pl
Ranking stron pod względem ilości błędów w kodzie HTML.
Wprowadzony adres jest automatycznie walidowany przez W3C.
Dla stron z błędami odczytywane są ,także automatycznie, title
i description i w tej postaci publikowane w kolejności błędów.
Proszę o ocenę.

[thek]

oczywiście powinna się szybko ładować

... co jest wynikiem poprawnego kodu (IMG:style_emoticons/default/smile.gif) Niepoprany kod musi zostać przez przeglądarkę poprawiony i zinterpretowany, co zabiera niepotrzebnie czas. Poprawny kod jest od razu przekształcany do formy wyświetlanej, bez ingerencji przeglądarki w strukturę strony.

[Shili]

... co jest wynikiem poprawnego kodu (IMG:style_emoticons/default/smile.gif) Niepoprany kod musi zostać przez przeglądarkę poprawiony i zinterpretowany, co zabiera niepotrzebnie czas. Poprawny kod jest od razu przekształcany do formy wyświetlanej, bez ingerencji przeglądarki w strukturę strony.

Nie tylko.

Również ilości requestów (stąd popularne ostatnio sprite'y), optymalizacji grafiki, agregacji stylów i skryptów (znowu te requesty)
Stosowanie dyrektywy (skądinąd ostatnio dość popularnej) @import w stylach również spowalnia stronę, gdyż przeglądarka musi sparsować style.
Często też brak obecności plików powoduje, że strona wczytuje się wolniej gdy mamy przyjazne 404.
Sama szybkość odpowiedzi serwera też na to wpływa.

Odpowiednie sparsowanie strony przez przeglądarki to tylko kropla w morzu innych błędów.

Natomiast strona worstsite ma złą strukturę nagłówków (idziemy po kolei - od h1, przez h2, h3 do h4).

[HTML] pobierz, plaintext 
<a class="str"
 
href="java script:gData('paging_g.php','p=2')">następna</a>
[HTML] pobierz, plaintext 

Po to istnieją eventy (eventListener dla przykładu) aby nie było takich kwiatków.
Lepszy już jest atrybut onclick. To swoją drogą ni cholery nie jest link. <span> odpowiednio ostylowany byłby tutaj dużo lepszy.
A jeszcze lepsze <a> z odpowiednim href, które zadziała i bez js.

[PHP] pobierz, plaintext 
<p class="descr"></p>
[PHP] pobierz, plaintext 

Puste elementy powinny zniknąć. Coś o szybkości ładowania strony m.in.
Poza tym skoro element jest pusty, to w ogóle nie powinno go być.

Stanowczo zbyt dużo id i class. Wiąże się to ze zbyt małą wiedzą o CSS zapewne. I o tzw. kaskadzie.

[HTML] pobierz, plaintext 
 style="color:red;"
[HTML] pobierz, plaintext 

Style inline to też nie najlepszy pomysł.

[HTML] pobierz, plaintext 
<div id="footer">
 
<div id="stopka">
 
<a href="http://validator.w3.org/check?uri=referer">
 
<img id="xht" src="xhtmlblue.png" alt="Valid XHTML 1.0 Strict" /></a>
 
<a href="http://jigsaw.w3.org/css-validator/check/referer">
 
<img id="css" src="cssblue.png" alt="Poprawny CSS!" /></a>
 
<a  href="http://www.facebook.com/pages/WorstSitepl/216114041778225?sk=wall"><img id="fac" src="facebook.jpg" alt="Facebook" /></a>
 
&nbsp;&copy;&nbsp;worstsite.pl
 
</div>
 
</div>
[HTML] pobierz, plaintext 

Jeden element #footer lub #stopka zbędny

Dodaj stronę/gratulacje/uaktualnij - to powinien być label

Jak widać można wykonać stronę, która przechodzi walidację, natomiast jest niepoprawna z założeniami języka i zastosowaniami elementów. Sama walidacja to PIERWSZY krok do stworzenia dobrej strony.

Btw, style w pliku .css generują 6 ostrzeżeń.