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ć 😉

3 myśli na temat “Sfi.org.pl”

  1. Kolejna, świetna ocena strony. Cieszy mnie fakt, że zaczynają się one pojawiać coraz częściej, oby nie na krótko 🙂

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *