InternetStandard.pl (runda druga)

Ta strona już raz trafiła pod ostrze naszej krytyki. Wtedy nie poszło jej najlepiej. Ostatnio jednak ciut się zmieniła (no dobrze – nie wiem czy ostatnio, ale z ciekawości ją odwiedziłem i zobaczyłem, że jakaś inna jest), dlatego też postanowiłem dać jej drugą szansę. Zwykle nikomu jej nie daję, ale… Trochu zmieniłem obyczaje 😉

• Pierwsze wrażenie jest dość pozytywne. Strona sprawia wrażenie w miarę nowoczesnej i przejrzystej.
• Ale wygląd to nie moja działka. Ja zajmuję się kodem, semantyką & that other fancy words. Zacznijmy od walidatora, który wciąż jest mocno zawiedziony.
• Outline też nieciekawie wygląda. Dość skąpy i płaski jak na taką stronę. Brakuje też głównego nagłówka witryny.
• Strona ma DOCTYPE z XHTML 1.0 Transitional. Szkoda, bo to tylko tryb prawie pełnej zgodności ze standardami. A jak wiadomo – prawie robi kolosalną różnicę.
• Co prawda jest atrybut lang na html, ale odnoszę wrażenie, że to bardziej zasługa szablonów XHTML w Sieci a nie świadomości webmastera.
• Kod GA znajduje się tuż za tagiem head. Nie jest to błędem (według Zakasa jest nawet optymalnym miejscem na statystyki) – skrypt nie zablokuje strony, gdyż i tak zasysany jest asynchronicznie. A przy jak najszybszym odpaleniu statystyk mamy większą szansę złapać użytkownika (bo np coś mu się nie spodoba i zechce szybko uciec). Natomiast sam kod można by zoptymalizować.

• <link rel="icon" href="http://www.internetstandard.pl/favicon2013.ico"	type="image/x-icon" />
  	<link rel="shortcut icon" href="http://www.internetstandard.pl/favicon2013.ico"	type="image/x-icon" />

  W tym wypadku po prostu nazwałbym ten plik favicon.ico i zupełnie wywalił te tagi. [rel=icon] ma sens tylko wówczas, gdy serwujemy lepszą ikonkę dla wszystkiego, co nie przypomina IE (a przynajmniej gdy nie podajemy przy okazji [rel=shortcut] z taką samą ikonką).

• 6 skryptów JS w head. Te powinny być na końcu body i zostać zminifikowane+skonkatenowane. No i stara wersja jQuery (można pokusić się o nowszą).
• Style CSS są strasznie porozwalane (2 arkusze + kilka style, w tym w body!).

• function clickWrapper(link, url, hash) {
  			link.href = url+'?redirect='+''+hash;
  			link.target = '_blank';
  		}

  Ładne cudeńko. Ale jak dla mnie zupełnie bezsensowne. No i po co ten target?

• Kod akceptacji cookies jest żenującej jakości. strong robiące za pogrubienie i ten potwór:

  <a onClick="javascript:createCookie('cAkcept',1,365)" title="Zapoznałem się z informacją o stosowaniu cookies i akceptuję" class="cAkcept">X</a>

  Kłania się nieznajomość JS i encji ×.

• Kod obsługi cookies też niczego sobie. Korzysta z przestarzałego Date.prototype.toGMTString (zastąpionego obecnie przez Date.prototype.toUTCString) i wymaga jQuery, mimo, że całość operacji na dokumencie robi w „czystym” DOM. No i śmieszny jest $(document).ready w kodzie obsługi elementu, jeśli ten kod znajduje się tuż za tym elementem.

• <div id="div_welcomescreen" style="display: none; height: 1000px;"><div style="text-align:right;padding: 3px 5px 3px 5px;height:40px; border-bottom: 1px solid #dfdfdf;"><img src="http://g1.internetstandard.pl/istandard/logo_welcomescreen.gif" alt="internetSTANDARD" style="float:left;" /><div id="div_welcomescreen_link" style="display :none;"><a href="javascript:welcome_stop_is()" style="color:#000;font-size:10px;font-family: arial;" class="link">pomiń reklamę »</a></div></div><table width="100%"><tr><td align="center" style="padding-top:50px;"><div id="div_welcomescreen_flash"></div></td></tr></table></div>

  Nie mam zielonego pojęcia do czego ten element ma służyć, ale jego kod jest fenomenalny.

• #bilbo – czyżby lubili „Hobbita”?
• Kod to divy wsadzone w divy otoczone divami. Divitis jest tutaj potężny.

• <a id="logo" class="sprite" href="/"></a>

  Pusty element = zbędny element. Pusty link = bezsensowny element. Bez grafiki/CSS po prostu totalnie bezużyteczny. Do tego to jest logo, a więc powinien to być główny nagłówek całej witryny.

• Szukajka nie ma label a przycisk wyszukiwania treści. Webmaster powinien zaznajomić się z pojęciem image-replacement.
• #logowanie jest puste i czeka na wypełnienie poprzez AJAX-owe żądanie. Po co? Nie może od razu dostać tych danych z serwera?
• ¾ linków w menu ma target. Nieładnie. A samo menu w niepotrzebnym div.
• #lCentrum vs #main-photo-slider vs panelContainer vs scrollertop – mamy tutaj aż 4 konwencje nazewnicze w kodzie. O jakieś 3 za dużo. Do tego pełno stylów inline.
• .tytulTDnia oczywiście nie jest tytułem. To tak jak wyrób czekoladopodobny. Niby to samo, ale jednak nie bardzo.
• Ile divów potrzeba, żeby zrobić jeden slajd w sliderze? 6. Moje biedne slidery na liście mogą się schować.

• <div id="stripNavR0" class="stripNavR"><a href="#">Right</a></div>

  Strzałki w lewo nie ma. Jest za to w prawo, ale za to angielska.

• <div class="wyborNewsRed"></div>

  Bardzo dobry wybór newsów. Widzę wiele interesujących mnie tematów.

• Oczywiście nawigacja dla slidera nie jest na liście, tylko upchnięta w divach i ozdobiona obrazkami o wdzięcznej nazwie blank.png.
• Oczywiście tuż za sliderem jest wciśnięty kod JS go obsługujący. Ładnie zadeklarowane zmienne na początku, po czym… implikowana globalna. Nieładnie. Poza tym taka wstawka powinna być w zewnętrznym pliku.

• <div class="clear"></div>

  Od lat taka prymitywna technika nie musi być stosowana. Istnieje choćby o wiele lepszy clearfix.

• Pierwszy na stronie jest nagłówek h5 dla wiadomości. Tuż nad nim jest pusty link (ikonka RSS) a tuż po nim… lista z dwoma linkami (do najbardziej popularnych i komentowanych newsów). Skoro tutaj lista mogła być, to czemu dla slidera jej zabrakło?
• Tytuły newsów oczywiście nie są tytułami. Cały markup newsów jest mocno niepokojący. Semantyki zero. Nawet obrazek do newsa posiada pusty alt. A pogrubienie licznika newsów jako strong. Przydałoby się trochę mikroformatu hFeed. I oczywiście POSH. Ale sądząc po klasie to i tak ma być to mięso armatnie do masakrowania.
• Czy kod OpenX musi być wstawiony wraz z całym komentarzem z instrukcją obsługi? Dla mnie to marnowanie transferu.

• <div class="moreDzial"><a href="/news" class="sprite moreDzial" title="więcej aktualności"><span>więcej aktualności</span></a></div>

  To cudo tworzy maluteńki przycisk. Ktoś lubi produkować nadmiarowy kod.

• Mają nawet miniaturowego hobbita – #bilboMini.
• O dziwo pozostałe newsy to lista. Brakuje tylko nagłówka „Inne newsy” (oczywiście można ukryć przed wizualnymi). Natomiast klasy .rowA i .rowB – można bardzo ładnie to zrobić przy pomocy :nth-child(odd/even) z CSS3.
• W sumie kod jest pisany w dość logiczny sposób. CSS dla danego fragmentu kodu jest dołączany tuż przed tym fargmentem (bo a nuż nie trzeba będzie wyświetlać tego fragmentu, prawda?).
• Odstęp jest zrobiony dzięki pustemu divowi o klasie .h15. Jak sama nazwa klasy mówi, div ma 10 pikseli wysokości. Trzeba pochwalić za wybór tak profesjonalnej i niezawodnej metody – marginesy z CSS są znane z tego, że nie działają w IE3.
• Formularz subskrypcji ma co prawda label dla checkboxów, ale już dla pola służącego podaniu e-maila nie. W dodatku jest na nim najbardziej prymitywna i ohydna atrapa placeholder. Jeśli masz maila, który składa się z maksymalnej liczby znaków przewidywanej przez RFC, staraj się nie popełnić literówki. Inaczej będziesz musiał wpisywać go od początku. placeholder jest jednym z tych elementów, którego powinno się używać zawsze – nawet w zamian za błąd w walidacji. Oczywiście nie może być zastępstwem dla label, bo obydwa elementy służą do czegoś innego.
• Sonda – podobnie jak logowanie – jest dociągana przez AJAX-a. Dość dziwna praktyka.
• „Znajdziesz nas” to lista. Na pewno kod byłby prostszy niźli ta obecna divowa sieczka.
• Stopka składa się z kilku list linków. I nie są one powiązane z serwisem aż tak nadto. Natomiast menu w stopce już listą nie jest. Priorytety?
• Oczywiście dane kontaktowe nie sa w address.

Strona wygląda. I tyle. Kod jest pisany wyraźnie pod wygląd, bez patrzenia na semantykę czy dostępność. Zatem w przypadku InternetStandard zmienił się tylko krój garnituru – standardy pozostały takie same.