LegalnaKultura.pl

Ostatnio, gdy włączyłem telewizor, ukazała mi się piękna reklama, gdzie nasi rodzimi artyści przekonują, abym wraz z nimi tworzył kulturę w sposób legalny (czyt. nie piracił). Czy ma to sens, nie będę wnikał – odpowiednie raporty odpowiednich instytucji były już publikowane nieraz. Mnie natomiast bardziej interesuje strona internetowa całej akcji. W końcu szczytny cel zasługuje na najlepszą jakość kodu, czyż nie?

  • Zanim zanurzę się w kod, garść takich uwag z pierwszego rzutu okiem. Otóż – możliwe, że z powodu przedłużających się upałów i osobistego, męczącego przemęczenia – odnoszę wrażenie, że ludzie z tego slidera na samej górze są dziwnie przymuleni (wory pod oczami, mętne spojrzenia).
  • Po tym subiektywnym wstępie spojrzałem na adres strony – http://legalnakultura.pl/pl. Jak na razie nie znalazłem, żeby istniała inna wersja językowa, więc nie wiem czemu jestem przekierowywany na taki adres.
  • Górne menu dropdown jest po prostu brzydkie. Sorry, ale prostokąt w kolorze fioletu, bez żadnych innych stylów, był dobry 5 lat temu.
  • Legalne źródła kultury to wszelkie miejsca, w których w różny sposób, zgodnie z prawem i z poszanowaniem praw twórców, są udostępniane ? odpłatnie lub bezpłatnie ? dobra kultury rozumiane jako utwory.

    Takie coś znajduje się w ramce z napisem „Co to jest legalne źródło?”. Jak dla mnie – za bardzo prawniczo. Nie można było napisać „Legalne źródła kultury to miejsca, gdzie dostaniesz utwór nie naruszając praw twórcy”. Dwa razy krócej, sens ten sam. Poza tym przycisk „Więcej prawa”, znajdujący się pod tym tekstem, skutecznie zniechęca do dalszego zwiedzania strony. A, i jeszcze jedno – zapytać prawnika można tylko z włączonym JS. W końcu w legalnej kulturze chodzi o niedyskryminowanie twórcy, nie użytkownika końcowego, prawda?

  • Spoglądam na listę legalnych źródeł kultury, w szczególności na filmy. BBC Entertainment, BBC Knowledge, BBC Lifestyle, BBC Wildlife… Kilka mniej znanych stron i niejakie Archiwum Entuzjastów, co to ma ładny, angielski logotyp, ale prezentuje filmy z komunistycznej Polski. Zresztą co tu będę dużo mówić, zarzucę częścią opisu:

    Jest ono wynikiem rozleglej kwerendy, prowadzonej wśród resztek tej rzeszy amatorskich klubów filmowych, jaka istniała w Polsce w czasach komunistycznych.

    Dokładnie ten sam tekst, słowo w słowo, pojawia się na stronie głównej Archiwum. Dopiero jak się kliknie w „Więcej wyników” (które też nie działa bez JS), pojawiają się bardziej rozpoznawalne strony, jak iplex.pl czy też ipla.pl

  • Dla bardziej wnikliwych – zauważcie, że żaden link z listy nie prowadzi bezpośrednio do opisywanego serwisu, wszystkie przechodzą przez adres typu http://legalnakultura.pl/pl/legalne-zrodla/:kategoria/catalog/:id,:id
  • Odnoszę wrażenie, że przyciski, dzięki którym user może coś zrobić, wgl nie działają bez JS. Zbieg okoliczności?
  • Dobra, idziemy do kodu. Validator nie jest zadowolony.
  • Oczywiście brak lang na html, mimo, że tak ładnie chwali się językiem w adresie.
  • Najważniejsza rzecz w head? Czcionka z Google Fonts. Co więcej, kod został po prostu bezmyślnie przekopiowany, na co wskazuje różnica w jego stylu ze stylem pisania reszty strony. link od Google jest pisany w stylu HTML-owym (bez slasha), natomiast reszta – w XHTML-owym (ze slashem). Inne są też cudzysłowy – apostrof vs normalny cudzysłów.
  • <meta name="keywords" content="Legalna kultura, legalne źródła, zasoby internetu, darmowe filmy, darmowe książki, darmowa muzyka, serwisy kulturalne, kultura w sieci, kultura online, kultura w internecie, serwisy kulturalne" />

    Bo w końcu po polsku piszemy.

  • 3 arkusze stylów – o 2 za dużo. Fancyboxa można spokojnie podpiąć pod główny arkusz. Zresztą nie widzę sensu arkusza colors.css. Osobny arkusz, żeby ustalić kolor czcionki? RLY? I w dodatku pełno !important i dziwnych nazw klas. Bezsens.
  • Mamy tu link[rel=icon] i link[rel="shortcut icon"]. Nie wiem po co to drugie, zwłaszcza, że używa się standardowego favicon.ico.
  • 4 pliki JS i to w head. Można przerzucić na koniec body. Do tego stara wersja jQ.
  • W body na samej górze – socialki, wepchnięte w div zamiast w listę. Do tego ze stylami inline i rel="new_window". Już bym walnął target, zwłaszcza, że w HTML5 (w którym niby piszą) jest dozwolony. Co nie oznacza, że warto używać. No i oczywiście te linki są puste – po co robić dostępną stronę? Przecież wszyscy mają włączone obrazki, wszyscy mają przeglądarki wizualne, wszyscy nie mają problemów ze wzrokiem…
  • <a href="#"><img src="http://legalnakultura.pl/tpl/img/icons/find.png" alt="Szukaj"/></a>

    Brak słów… NIGDY nie wysyła się formularza linkiem, nawet w JS. Po prostu nie robi się tak.

  • A pole wyszukiwanie ma value="_". Ani to nie ma sensu, ani ładnie wygląda. Poza tym – czemu nie placeholder?
  • Logo jest zwykłym linkiem, nie nagłówkiem bo po co? Outline dość ciekawie wygląda.
  • Menu dropdown w… tabelce. Nie dość, że brzydkie, to jeszcze kod spaprany. O dziwo działa bez JS.
  • <br class="clear" />

    Clearfix.

  • <a href="#" id="prev" rel="prev"><img src="http://legalnakultura.pl/tpl/img/sliderPrev.png" alt="Poprzedni" title="Następny"/></a>
    	<a href="#" id="next" rel="next"><img src="http://legalnakultura.pl/tpl/img/sliderNext.png" alt="Następny" title="Następny"/></a>
    		<div class="button">
    				<a class="active" id="rotate1" href="#"> </a>
    				<a class="" id="rotate2" href="#"> </a>
    				<a class="" id="rotate3" href="#"> </a>
    				<a class="" id="rotate4" href="#"> </a>
    				<a class="" id="rotate5" href="#"> </a>
    				<a class="" id="rotate6" href="#"> </a>
    				<a class="" id="rotate7" href="#"> </a>
    			</div>

    Ten kwiatuszek to z kodu slidera. Nie dość, że .button winno być listą, to mamy bezsensowne, de facto puste linki, które nie działają bez JS. Jeśli coś nie działa bez JS, powinno być wstawiane przez JS.

  • A pod kodem HTML slidera, kod JS slidera, czyli autorskie rozwiązanie. Tym bardziej wstyd.
  • Większość nagłówków pochodzi ze slidera, który nie degraduje się ładnie i bez JS widać tylko pierwszy slide. Nieładnie.
  • Lista źródeł – żadna kategoria nie ma nagłówka (jest za to p[class*=title]). Natomiast opis tej listy jest już nagłówkiem. Logiczne, nie?
  • Przycisk dodawania prowadzi do kotwicy #addCatalog. Poniżej w kodzie jest ten element. Zapewne wykorzystuje :target przy kliku – pomyślicie. Nic bardziej mylnego! Link nie działa bez JS. I tyle.
  • Trochu więcej o tym formularzu. Czysto AJAX-owy – bez JS nie wyślesz, zwłaszcza, że mamy link zamiast przycisku. Nie ma fieldset, a każde pole, wraz ze swoim label, wpakowane jest w… em. Dodatkowo każde pole ma value="_". Czy to ma imitować migający kursor do wprowadzania tekstu? Jeśli tak, to robi to niedobrze i jedynie wpieprza!
  • Wiecie co jest najlepsze? Te wszystkie przyciski otwierające jakieś okienka interaktywne dla usera są skryptowane osobno, tzn. dla każdego jest pisany oddzielnie kod, który następnie wsadzany jest do body bezpośrednio za elementem. Ktoś tu nie ogarnia potęgi jQ.
  • Później się zaczynają newsy, czyli zbiór kilkudziesięciu div, w których em służy do stylowania elementów, a p imituje listę z przyciskami.
  • Mamy jakiś skrypt paginacji, który pobiera mi więcej kolumn. Ale to dopiero jak se kliknę przycik „Więcej wyników”.
  • Pamiętacie mój cytat z początku?
    <h2>Co to jest legalne źródło?</h2>
    	<h4>Legalne źródła kultury to wszelkie miejsca, w których w różny sposób, zgodnie z prawem i z poszanowaniem praw twórców, są udostępniane – odpłatnie lub bezpłatnie – dobra kultury rozumiane jako utwory.</h4>
    	<p class="buttons">
    		<a href="#addAsk" id="askLawBtn">+ Zapytaj prawnika</a>
    		<a href="http://legalnakultura.pl/pl/baza-wiedzy/prawo-w-praktyce" class="last">więcej prawa</a>
    		<br class="clear" />
    	</p>
    • Nagłówki zwalone.
    • To h4 winno być po prostu akapitem (względnie blockquote, jeśli to wyjęte z jakiegoś kodeksu).
    • Encja zamiast ó. Polski tr&oacute;dna język.
    • Właściwe użycie niełamliwej spacji. Jestem w szoku. Szkoda, że ominęli takie „są” – jak wszystko, to wszystko!
    • I znów p imituje listę przycisków, z których pierwszy nie działa bez JS.
    • .last to tak naprawdę :last-child w CSS.
  • <a href="#" class="closeBox"><img src="http://legalnakultura.pl/tpl/img/closeBox.png" title="Zamknik"/></a>

    Zamknik?

  • Te okienka są zrobione na odpieprz. To może być spokojnie jedno UI okienka, a jego wnętrze wczytywane z poprawnego href linka-przycisku. Te linki łapane przez klasę, nie id i mamy. Oczywiście serwer taką stronę żądaną przez XHR powinien słać bez otoczki całego dokumentu, a tylko odpowiedni fragment. Aż takie to trudne?
  • Flash przez JS. Nie mam JS, de facto nie mam i Flasha.
  • Bannery z pustym alt.
  • <a href="body" class="scrollTo" id="goUp"><img src="http://legalnakultura.pl/tpl/img/goUp.png" alt="Do góry!"/></a>

    Po prostu genialne.

  • Menu w stopce to też tabelka i to jeszcze gorsza niż ta u góry. Nikt nie słyszał tutaj o dl z dt i dd oraz o display:inline-block/float?
  • Adres w liście – znośne, ale brakuje mi address.
  • Czemu na dole jest drugie ga? Jedno było na zakończenie head! Poza tym można zoptymalizować.
  • Lista źródeł w danej kategorii nie jest listą, ale to było do przewidzenia.

Podsumowując – jeśli legalna kultura dyskryminuje poszczególne grupy odbiorców, tak jak ta strona i przedstawia podobną jakość jak ta strona, to nic dziwnego, że piractwo się szerzy. Żeby ktoś za coś zapłacił, musi to być warte tej zapłaty. Jak na razie nie jest.

4 komentarze do “LegalnaKultura.pl”

  1. nie wygrałeś przetargu na tą stronę, że sie tak pieklisz ;)….stronoroby są wszędzie – nie ma się co unosić bo może ci żyłka pęknąć 😉

    1. Nie wytykamy błędów konkurencji, żeby pozyskać klientów 😉 Po prostu chodząc po Sieci wybieramy strony, które mają służyć społecznym celom i oceniamy je pod względem funkcjonalności, dostępności i użyteczności. Owszem, wybór stron jest zupełnie subiektywny, ale nie ma drugiego dna.

  2. „Bo w końcu po polsku piszemy.” no właśnie: „Już bym walnął target,” „jedynie wpieprza!”, „kod spaprany.” Gratuluje przepięknej polszczyzny:)

    Cóż taki już urok, naszego narodu:) Krytykować łatwo, ale jeśli się już coś zarzuca – warto samemu nie popełniać błędów:)

    1. Wydaje mi się jednak, że – mimo wszystko – fragmenty, które pokazałeś są poprawną polszczyzną.
      1) „spaprany” – przymiotnik, a raczej imiesłów przymiotnikowy bierny od słowa spaprać
      2) „wpieprza” – czas teraźniejsze, 3. osoba liczby pojedynczej czasownika wpieprzać
      3) „walnął” – walnąć, 10. na liście definicji
      Składnia „bym coś zrobił” też jest jak najbardziej poprawna przecież i równoznaczna „zrobiłbym coś”
      Ergo – nie popełniłem ani jednego błędu, chociaż użyłem języka potocznego. Nie jest to wszak rozprawa naukowa, żebym miał pisać jedynie górnolotnymi epitetami 😉

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.