Sfi.org.pl

Dowiedziałem się, że już jutro (w zasadzie już dziś) w Krakowie ma odbyć się kolejny (10. – w sumie rocznica) Studencki Festiwal Informatyczny. Jako człowiek niezwykle zaangażowany w rozwój polskiej Sieci oraz student UJ (a tacy zawsze wspierają eventy organizowane na AGH, czyż nie?) postanowiłem dołożyć swoją cegiełkę (pustaczek…) do tego przedsięwzięcia, co też czynię w chwili obecnej.

• Oczywiście wita mnie floatujący z dołu komunikat o cookies. Kto jak kto, ale polska uczelnia (nie)polskiego prawa przestrzegać musi, prawda?
• Środkowa kolumna jest bardzo króciutka, dzięki czemu można odnieść wrażenie, po zescrollowaniu, że designer oszczędzał na miejsce i lubił je zostawiać puste (hint: niech ta kolumna floatuje/będzie włączona w prawą).
• Duże partie tekstu (zwłaszcza w nagłówkach) są niezaznaczalne. Widać, że nie dotarł tu jeszcze trend @font-face.
• Duży plus za to, że widzę po czym TAB-uję. Co prawda nie mamy tutaj ładnego przepisania stylów z :hover na :focus, ale domyślna ramka daje radę.
• Chciałem się zapisać do newslettera a tu zonk, bo popełniono prastary błąd dostępności i użyteczności.
• Formularz kontaktowy ma label. A niech cię AGH, wytrąciliście mi największy oręż z ręki!
• Rzecz stoi na WP a nie od dziś wiadomo, że jestem jego największym hejterem, dlatego też pozwolę sobie poużywać na biednym i Bogu ducha winnym kodzie tej strony.
• Na początku tradycyjnie – walidator + outline (tym razem razem, bo strona wykrzaczyła mój ulubiony outliner). Jak widać, jest kilka błędów a outline jest ciut płaskawy. Oczywiście brakuje głównego nagłówka strony, przez co nazywa się ona „Czwartek”. Struktura nagłówków jest totalnie spłaszczona i bezsensowna – poszczególni prelegenci są na równi z nagłówkiem „Prelegenci” a obydwa podlegają pod… „Aktualności”. Logiczne.
• Lecimy do źródła. Oczywiście HTML5 (a jakże by inaczej!). No i oczywiście brak oznaczenia języka (tutaj jest tym bardziej potrzebne, gdyż istnieje wersja anglojęzyczna).
• meta[http-equiv="X-UA-Compatible"] powinno być słane jako nagłówek HTTP (tak jak wszystkie nagłówki) a nie bruździć w kodzie.
• Strona jest responsywna (moja cegła to potwierdza), aczkolwiek wyłączenie skalowania nie jest najlepszym pomysłem. Paginacja robi się śmiesznie mała i ja moim palcem nigdy nie trafię w odpowiednią cyferkę. A szkoda. No i boczny pasek ciągnie się kilometrami w dół. A powinien zmienić orientację na poziomą, żeby zajmować mniej miejsca.

• <meta name="google-site-verification" content="IyC4ow7B0DGW9Jc7eWO_Ua7VL3rtYsFQYz3D6rU8WnQ" />

  Nie chodzi mi tutaj o to, że ten znacznik nie powinien się pojawić a o niekonsekwencję w stylu kodowania. Wszystkie inne znaczniki mają zamknięcie typowe dla HTML-a, jedynie ten ma to typowe dla XHTML-a. Oczywiście później wchodzą pluginy WP i robi się sajgon w tym względzie.

• http://sfi.org.pl/wp-content/plugins/sitepress-multilingual-cms/res/css/language-selector.css?v=3.0.1 – serio aż tyle CSS jest potrzebne do czegoś, czego nawet nie ma na stronie? IMO ktoś przegiął i to mocno. No i te hacki dla IE 5… Ludzie, mamy 2014 rok – Google porzuciło wsparcie dla IE 9 a my wspieramy IE 5?

• <link rel="icon" href="http://sfi.org.pl/wp-content/themes/SFI/img/favicon.ico">
  <link rel="shortcut icon" href="http://sfi.org.pl/wp-content/themes/SFI/img/favicon.ico">

  Zamiast produkować nadmiarowy kod HTML, starczy plik /favicon.ico.

• Za dużo JS i to w head – powinno być na końcu body. No i używanie wciąż jQuery migrate to trochu wstyd.

• <meta name="generator" content="WordPress 3.8.1" />
  <meta name="generator" content="WPML ver:3.0.1 stt:42,1;0" />

  To jaki w końcu? Poza tym – 0-days czekają.

• Muszę pochwalić za właściwe użycie [rel=alternate] w połączeniu z atrybutem [hreflang].
• Modernizr jako przedostatni skrypt w head? To nie ma sensu. On powinien być 1. i jedynym.
• Na oko już widać spory divitis.
• Formularz wyszukiwania nie ma label. Touché!
• Flagi od języków potraktowałbym jako listę (bo to przecież wyliczenie języków). No i brakuje nagłówka, że to wyliczenie języków jest (albo chociaż aria-label).

• <a class="logo" href="http://sfi.org.pl/" title="Studencki Festiwal Informatyczny" rel="home"><img src="http://sfi.org.pl/wp-content/themes/SFI/img/logo.png"  alt="Studencki Festiwal Informatyczny" /> </a>
  <a class="logoTxt" href="http://sfi.org.pl/" title="Studencki Festiwal Informatyczny" rel="home"><img src="http://sfi.org.pl/wp-content/themes/SFI/img/logo_napis_SFI.png"  alt="Studencki Festiwal Informatyczny" /> </a>

  To powinien być nagłówek (h1) z logo jako obrazkiem (z pustym alt) i tekst (@font-face). Dlaczego pusty alt? Bo obrazek znajduje się tuż obok odpowiedniego tekstu i AT czytałoby go dwa razy. A tak przeczyta raz. Oczywiście można zastosować aria-labelledby.

• <img src="http://sfi.org.pl/wp-content/themes/SFI/img/napis_dolacz_do_spolecznosci.png" alt="Dołącz do społeczności">

  Oczywiście to też jest nagłówek, który mógłby wykorzystać @font-face.

• <span class="dropdownButton"> </span>

  A to jest majstersztyk: przycisk, który nie jest przyciskiem a dodatkowo ma bezsensowną (nie)treść.

• Tajemniczy „Czwartek” to nagłówek dla harmonogramu… Czy nie lepiej brzmiałoby „Harmonogram: czwartek”, gdzie część „Harmonogram” byłaby ukryta przez technikę typu .visuallyhidden?
• Harmonogram to dana tabelaryczna i właśnie ją bym tutaj zastosował, bo semantycznie najbardziej pasuje. Divy tego nie oddają.
• No i czemu harmonogram jest w kodzie, skoro jest ukryty? Skoro ma się domyślnie pokazywać po countdownie, to niech będzie dociągnięty AJAX-em (ci bez JS i tak by go nie zobaczyli przeca!). Nie ślijmy danych ponad miarę! (Brzytwa Comandeera).

• <div class="topText">Do rozpoczęcia</div>
  <img src="http://sfi.org.pl/wp-content/themes/SFI/img/agenda_widget_napis_10sfi.png" />
  <div class="bottomText countdownRemains">zostało...</div>
  <div class="bigText countdownNumber"></div>
  <div class="bottomText countdownUnit"></div>

  Przekombinowane równo. Zamiast obrazka – @font-face + text-shadow. No i tutaj zasada odwrotna: ślijmy wszystkie potrzebne dane! Userzy bez JS zobaczą bezsensowny tekst. A AT i tak dostanie rzecz gorszą, bo obrazek nie ma alt.

  Do rozpoczęcia obrazek http://blahblah zostało… [jeśli jest JS to pada liczba, jeśli nie – nie pada nic]

  Słabo.

• <a class="newsletterIco" href="#" onclick="window.open('http://sfi.org.pl/zapiszsie/','popupwindow', 'scrollbars=yes,width=550,height=480')" title="Newsletter">Zapisz się na Newsletter</a>

  Image-replacement – już było tak dobrze a ktoś to zabił bezmyślnym popupem. To już napiętnowałem, ale dopowiem: link jest po to, żeby wskazywać na jakiś zasób. Jeśli na żaden nie wskazuje jest oszustem w stroju linka. Tyle. Jedyny przypadek, gdy [href=#] jest dozwolone, to link typu „Do góry”.

• W artykułach ładne używanie niełamliwej spacji, ale za to daty są źle oznaczone – winny być w time. No i użyłbym mikroformatu hAtom (lub microdata).
• Paginacja to dla mnie mimo wszystko lista.
• Co do sponsorów itd: to przecież jest ewidentnie lista. Czemu zatem nie jest to listą?

• <img width="180" height="42" src="http://sfi.org.pl/wp-content/uploads/2014/02/helion_logo-180x42.png" class="attachment-thumbCoop wp-post-image" alt="helion_logo" />

  Co dostanie AT? Bezsensowny alt. To powinna być nazwa partnera a nie opis stworzony po to, by być.

• a[target] to kolejny prastary błąd.
• W CSS natomiast czai się @import. Właśnie zabito parallel downloading.

• @charset "CP852";

  Wszystko, co nie jest UTF-8, jest niezalecane.

• /*&[target="_blank"]

  Tak to jest jak się używa LESS-a i nie zna różnicy między poszczególnymi komentarzami a na produkcję śle niezminifikowany CSS.

Ok, tyle pastwienia się. Strona do najlepszych nie należy (zdarzają się potknięcia zwłaszcza jeśli chodzi o użyteczność), ale też daleko jej to innych tutaj ocenianych cudów Internetu. Dlatego też dostaje się do pobłażliwej kategorii 50/50.

PS W moim alchemicznym podziemiu przygotowuję ciutkę ciekawą rzecz… Mam nadzieję, że jeszcze w tym roku uda mi się ją tutaj zaprezentować 😉