Mezczyzna45plus.pl

Ostatnio w telewizji natknąłem się na reklamę, w której jakiś mężczyzna – mimo zachęt zarówno ze strony rodziny, znajomych, jak i samego kierowcy autobusu – nie korzysta z tego niezawodnego środka miejskiej komunikacji i postanawia dojść pieszo do pracy. Dzięki tej niezwykle dopracowanej reklamie dowiaduję się, że nawet najmniejsza dawka wysiłku fizycznego oddala ode mnie groźną wizję chorób układu moczowo-płciowego. A z racji tego, że w wieku 15 lat przeprowadzono ze mną ankietę na temat tego piekącego problemu, w której zdobyłem aż 0 punktów, zakwalifikowując się jednakowoż do grupy osób z lekkim przerostem prostaty (w końcu nie miałem żadnego objawu), postanowiłem dowiedzieć się czegoś więcej o tej akcji. A najwięcej informacji można znaleźć gdzie? Oczywiście na stronie internetowej!

  • Najbardziej uwagę przykuwa logo, czyli ręce złożone w serduszko i mające skrywać naszę cenną męską rzecz. Jest to oczywiste nawiązanie freudowskie, gdyż każdy szanujący się człowiek od razu dostrzeże związek pomiędzy sercem, a męską moszną (dla niewtajemniczonych – odwróćcie serce dołem do góry i zobaczcie jaki ma kształt). Ot, strzał w dziesiątkę. Tym bardziej czuję się rozczarowany, że logo całej akcji na stronie nie występuje! A przynajmniej nie w nagłówku – przewija się jedynie w miniaturkach w wiadomościach. Za to za logo strony robi… znaczek Ministerstwa Zdrowia. Tuż obok logo Centrum Onkologii.
  • Wersja dla słabowidzących jest bardzo czytelna, to fakt. Jednak nagłówki są według mnie zbyt duże w stosunku do właściwego contentu.
  • Jak dla mnie, breadcrumbs na stronie głównej nie są aż tak bardzo potrzebne. Jednak nie przeszkadzają.
  • O wyglądzie za dużo powiedzieć nie mogę. Ot, czysta, schludna, czytelna stronka.
  • Za to o kodzie poopowiadam troszkę 😉 Zacznę od validatora. Co ciekawe, większość błędów spowodowana jest niewłaściwym użyciem ampersandu w linkach. Na szczęście łatwo to poprawić.
  • Rozłożenie nagłówków również nie jest idealne. Jest raptem jeden poziom zagłębienia, a można wyróżnić co najmniej 2 (np. w aktualnościach). Poza tym outline pokazuje, że w kodzie są krzyki. A to ciut niekulturalne 😉
  • Transitional + białe znaki przed DOCTYPE, czyli mamy quirks.
  • <meta http-equiv="Content-Language" name="language" content="pl-PL" />
    		<meta http-equiv="Content-Script-Type" content="text/javascript" />
    		<meta http-equiv="Content-Style-Type" content="text/css" />

    Te metatagi są zupełnie zbędne. Język ustala się za pomocą atrybutu lang. Natomiast typy MIME arkuszy i skryptów i tak ustalają nagłówki HTTP. Metatagi nie mają tu nic do gadania.

  • Po przeczytaniu słów kluczowych zaczęło mnie ciut boleć 😉
  • meta[name=robots] można z powodzeniem zastąpić przez plik robots.txt.
  • link[rel=shortcut] to wymysł IE. Reszta spokojnie obsługuje link[rel=icon]. Poza tym bezpieczniej trzymać tę ikonkę w głównym katalogu.
  • Widzę, że wciąż jest tu wspierane IE < 8. Skoro IE 10 już praktycznie wyszło, to raczej nie ma sensu wspierać tak prehistorycznych przeglądarek.
  • Troszkę dużo JS. Jak chcemy go tak dużo wczytywać to albo przerzucamy na koniec body, żeby nam nie blokował wczytywania, albo dorabiamy atrybut async i modlimy się, żeby jQ wczytało się pierwsze 😉
  • Poza tym – przestarzała wersja jQ. Obecna gałąź to 1.7, a tu używa się 1.6.1.
  • Zamiast selektora .ulatwienia, #topKontener .tytul, #topKontener2 .tytul, .naSkroty .tytul, .kalendarz .tytul, .menuGraficzne .tytul, #stopkaKontener .tytul, .panelKontener .menu .tytul użyłbym po prostu .hidden i przypisał wszystkim tym elementom, które mają się pojawiać tylko dla AT. Ale ważne, że takie nagłówki wgl się pojawiają. To naprawdę bardzo duży plus. Czekam jeszcze na ARIA 😉
  • Ale ciut poniżej małe rozczarowanie. Każdy element nawigacyjny, który zawiera więcej niż jeden link (ok, jeszcze dwa czasami ujdą) powinien być listą. Poza tym – pusty .ulatwienia?
  • <form method="post" action="" name="dostepnosc" enctype="multipart/form-data" class="ulatwienia dostepnoscForm">
    	<input type="hidden" name="event" value="1" /><input type="hidden" name="formname" value="dostepnosc" />
    	<input type="hidden" name="niedowidzacy_hidden" id="niedowidzacy_hidden" />
    	</form>

    Może ktoś ma pomysł jak ten formularz zwiększa dostępność? 😉

  • Chętnie bym się podzielił stroną na FB, ale mi się obrazki wyłączyły i nie bardzo widzę przycisk.
  • Zgodnie z kodem, nazwa serwisu to „Centrum Onkologii”. Średnio trafione.
  • Patrząc na ten kod, mam dziwne wrażenie, że divów jest zdecydowanie za dużo.
  • Każdy link w menu ma swój własny id, więc można przypuszczać, że naprawdę jest ich prawie 5000.
  • Według kodu strony, ta czwórka szczęśliwych facetów reprezentuje Centrum Onkologii. Łącząc to z tematyką strony, można dość dziwne wnioski wysnuć 😀
  • Okruszki ładniej wyglądają na liście niż na span.
  • Później mamy kilka nudnych newsów, do których można zastosować mikroformat hAtom.
  • Formularz wyszukiwania. Fajnie, że ma label. Szkoda, że nie jest przypisany to jakiegokolwiek pola.
  • <input type="submit" class="inputButton" value="zapisz" onclick="document.forms['newsletter'].elements[0].value=1;return true"  />

    Nie dość, że on…w kodzie jest brzydkie, to jeszcze klik na przycisku zamiast akcji przy wysyłaniu formularza. Pomijając już nawet fakt, że ustawia się na 1 wartość pola formularza, którego domyślna wartość to 1. No i oczywiście w pobliżu jest kolejny osierocony label.

  • .ostatni, czyli pozostałość po technikach IE-owych, który nie rozumiał :last-child w CSS.
  • Nieśmiertelny target.
  • To teraz powróćmy do JS, a dokładnie do pliku funkcje.js:
    document.documentElement.className += " bezDOMny";

    Hmmm… Jak dla mnie klasa niepotrzebna. Czemu? Bo wystarczy przypiąć do html klasę ready. Poza tym, lepiej stylować elementy tak, jakby JS wgl nie było, a dopiero przy JS zmieniać ich wygląd (czyli zakładać, że wszystkie elementy są bezdomne). Wgl CSS dla elementów JS-owych można dociągać przez JS.

  • Jakieś zaczątki wersji językowych tu widzę. Ale coś chyba niedokończone
  • motywGraficzny = (jQuery('body').css('unicode-bidi') == 'bidi-override');

    Ciekawy sposób wykrycia, który CSS jest aplikowany.

  • Mamy funkcję inputyZTekstem i klasę InputyZTekstem. Ciekawa konwencja nazewnicza. Poza tym – Array to nie tablica asocjacyjna. Do tego służy Object.
  • Symulacja :hover pod IE? To nie te czasy…
  • Mieszanie natywnego DOM z jQuery IMO wygląda śmiesznie.
  • opcje.html ="<div id='komunikatKontener' class='komunikatUkryty'><div id='";
    	opcje.html +=opcje.tloId; opcje.html += "'></div><div id='";
    	opcje.html += opcje.trescId; opcje.html +="'>";
    	opcje.html += "</div></div>";

    Łączenie stringów to operacja dość kosztowna. Szybciej wychodzi łączenie elementów tablicy.

Strona działa tak jak reklamy – niby nie są złe, ale też nie są dobre. Ot, po prostu przeciętne.

2 myśli na temat “Mezczyzna45plus.pl”

  1. Rozbawiła mnie koncepcja logo, szczerze mówiąc nie skojarzyłem tego w ten sposób ;D Można było to lepiej wykorzystać. A sama stronka tak, jak napisał autor – dosyć przeciętna.

Dodaj komentarz

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