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.