Kabza.pro

Jest jedna rzecz na świecie, która drażni mnie bardziej od braku coli w zasięgu ręki: niczym nieuzasadnione nazywanie siebie profesjonalistą. Powoduje to u mnie rany kłute ud (z powodu noża, który noszę w kieszeni) i liczne pręgi na twarzy od szlagu.

Dlatego też każdy nieostrożny adres, który nawinie mi się pod rękę i zdradza oznaki zdradzania profesjonalizmu, od razu trafia na stół sekcyjny i zostaje poddany serii brutalnych eskperymentów obiektywnych kryteriów. Dzisiaj taki los spotka stronę Kabza.pro.

• Kabza.pro brzmi dumnie. Ale po co się ograniczać? ICANN uwolniło ostatnio kilka ładnych, nowych domen gTLD i teraz można mieć adres Kabza.guru! Prawda, że ładniej? Też se chciałem taką kupić (jak pięknie brzmi Comandeer.guru…), ale nie stać mnie na aż tak mocne łechtanie ego.
• Sam adres jest ładny, dlatego wielka szkoda, że zostaję przekierowany na o wiele brzydszy, czyli Web.E-Kabza.pl. Skoro stawiamy na budowanie wizerunku profesjonalistów, to bądźmy konsekwentni.
• A co jest na E-Kabza.pl? Przekierowanie.
• Jest też Hosting.E-Kabza.pl do kompletu, chociaż – sądząc po nagłówku – czeka na wykończenie.
• Oczywiście wita mnie komunikat o cookies. Tym bardziej niezrozumiałe, że w stopce jest odpowiedni link.
• Przewijam sobie stronę i co? Większość treści jest po stopce, pod nagłówkiem „Artykuły do pozycjonowania”. Przecież to po prostu SEO-spam. Ba, WebKabza sama sobie wystawiła ocenę za jakość tychże tekstów… Chyba moja teza o łechtaniu ego domeną nie była przesadzona.
• I już na wstępie cała strona mnie do siebie całkowicie zraziła – zablokowano mi zaznaczanie tekstu i prawy przycisk myszy. No spoko, po co mi otwieranie poszczególnych linków w nowych kartach? Lepiej, żeby webmaster powiedział mi co i jak mam robić, bo jestem na tyle głupi, że zrobię sobie jeszcze krzywdę. Bardzo profesjonalne podejście – user ponad wszystko.
• Ok, udało mi się otworzyć stronę kontaktu w nowej karcie (na touchpadzie wygodniej mi jest użyć prawego przycisku myszy niźli kombinować z „środkowym” przyciskiem czy szukaniem ctrl na klawiaturze – nienawidzę gdy każe mi się zmieniać przyzwyczajenia). Teraz chciałbym sobie zapisać maila na później… Ach, zapomniałem – przecież nie da się go zaznaczyć. Przynajmniej formularz ma label i nie muszę trafić myszką bezpośrednio w pole. No i dzięki temu formularzowi (który jest pluginem) odkryłem dość ciekawą rzecz, ale o tym później 😉
• W świetle powyższych udogodnień, znaczek Firma przyjazna internautom wygląda dość sarkastycznie.
• Przykładowa oferta sprawdzenia zabezpieczeń strony WWW. Oprócz wymienienia kilkudziesięciu popularnych skryptów i rzuceniu kilku ogólników, nie ma tu żadnych konkretów. No i oczywiście znów jest ocena treści – a jak (w końcu tylko profesjonalista może ocenić profesjonalistę).
• Wydaje mi się, że tutaj każda treść jest ogólnikowa, np w artykule na blogu o HTML 5 i CSS 3 również padają same ogólniki. Pomijając już zupełnie błędną informację o tym, że Google jakoby nie czyta JS.
• Portfolio robi wrażenie (przynajmniej swoją wielkością).
• Co prawda widzę po czym TAB-uję, ale jest zakłócona kolejność focusowalnych elementów, np każda z usług w drzewku posiada 3 linki prowadzące w to samo miejsce. A przykładowe prace z portfolio odsyłają do portfolio a nie do konkretnej realizacji.
• Przejdźmy do kodu. Walidator pokazuje błędy.
• Outline to jakaś kpina. Chyba żaden z tych nagłówków nie powstał po to, by być nagłówkiem – wszystkie one są zakładnikami SEO. Hierarchia jest po prostu spłaszczona a każdy nagłówek zawiera pozycjonowane frazy. To jest spam.
• Każda firma SEO wie, że Google patrzy ostatnio też na szybkość strony. A w tej dziedzinie ciut słabo.
• Na dzień dobry dostajemy quirks, bo przed DOCTYPE są białe znaki.
• Z kolei sam DOCTYPE to Transitional, więc i tak dostalibyśmy co najwyżej tryb „prawie zgodności”.
• Język strony został określony jako pl-pl. Jak dla mnie zupełnie zbędne jest określanie odmiany języka polskiego (bo jest aż jedna).
• Na samym początku head 2 skrypty JS. Ktoś tu nie zna reguł gry.
• jQuery w wersji latest się nie ciągnie, bo nic się nie zyskuje. Ta wersja ma maksymalnie krótki czas cache (bo musi być przecież nonstop aktualna), więc de facto za każdym razem user musi ją ściągać na nowo.
• Deklaracja kodowania winna być 1. w head>. No i czemu stylem kodowania różni się od reszty kodu?
• Widać zastosowanie Dublin Core – szkoda, że w tak wąskim zakresie i jako SEO wspomagacz.

• <meta name="generator" content="CMS by KABZA - profesjonalne strony internetowe" />

  Śmiem się z tym nie zgodzić 😉 Kod wskazuje, że wykorzystano Joomlę. Wpadłem na to, patrząc skąd jest dociągany plugin formularzy – ścieżki typu /components/com* są typowe właśnie dla Joomli. Inne dowody? Na stronie istnieje globalny obiekt Joomla (mowa oczywiście o JS). No chyba, że to jakiś fork.

• <link href="/templates/web/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />

  To składnia typowa dla IE. Reszta nie potrzebuje słówka shortcut. Poza tym – można w ogóle pominąć ten tag, umieszczając /favicon.ico w głównym katalogu witryny.

• jQuery już było, to załączmy sobie MooTools! Przecież więcej znaczy lepiej, czyż nie?
• Znów dostajemy osobny arkusz z [media=print]. To marnowanie żądań HTTP. Mamy 2014 rok i media queries działają de facto wszędzie.

• A później jest zaciągany mały pliczek JS (który mógłby być zinlinowany!):

  document.ondragstart = protect;
  document.onselectstart = protect;
  document.oncontextmenu = protect;
  document.oncopy = protect;
  function protect() {
  return false
  }

  Czyli odwal się, userze, od mojej treści. Nie ma co – miło się mnie traktuje.

• Następnie są załączone dwa prawie identyczne kody statystyk – jedne to GA, a drugie to kabzowy Piwik. Ktoś nie wierzy Google?
• Jeden rzut oka na kod i od razu mogę stwierdzić divitis.

• <div class="logo"><img src="/images/main/logo_header.png" alt="KABZA" /></div>

  O nagłówkach już pisałem (to najczęściej ostatnio linkowana przeze mnie wszędzie rzecz…). Poza tym logo powinno być klikalne – to jedna z podstawowych, niepisanych zasad usability.

• [target] w menu. Po co?

• <div class="moduletablefirmynet">
  					
  
  <div class="customfirmynet"  >
  	<iframe src="http://web.e-kabza.pl/firmy-net"></iframe>
  </div>
  		</div>

  W taki sposób jest wstawiany przycisk „Firma przyjazna internautom”. Bo przecież wstawienie obrazka jest zbyt proste.

• <div class="message">
  <div id="system-message-container">
  </div>
  	</div>

  Pusty element to zbędny element.

• Później leci mega wstawka JS, z totalnie redundantnym kodem, powtarzana dla każdego elementu drzewka z osobna. Co ma robić? Podświetlić przy najechaniu myszką… Go CSS, man!

• A jak to jest zrealizowane? Tragiczno-komicznie.

  <a href="/oferta/wizytowka-www" rel="nofollow" class="no_move"><span onmouseover="wizytowkaNew(this)" onmouseout="wizytowkaNormal(this)" class="bg"></span></a>

  Dostajemy pusty link + pełno on... w kodzie. To podstawowe błędy dostępności i użyteczności! Puste elementy to zbędne elementy a puste interaktywne elementy to skrajnie bezsensowne elementy. To tak jakby kazać ślepemu studiować manuskrypt średniowieczny – to po prostu hipokryzja.

  Pomijając już zupełnie [rel=nofollow], które pojawia się na prawie każdym linku tutaj. Aż tak bardzo trzeba ratować pozycję w Google?

• <a href="/portfolio">
  <img src="/images/portfolio_gallery/gallery1/projekt-sklep-lavazza.png" alt="projekt-sklep-lavazza.png" width="185px" height="115" /></a>

  Pomijając już bzdurność odsyłania do głównej strony portfolio, to alt jest po prostu chamski. Po to między innymi aplikuje się opis obrazka, żeby AT nie czytały jego adresu. Co tu się robi? Zmusza AT do czytania adresu obrazka, który to nie mówi nic o tym, co ten obrazek oznacza. To jest ewidentne pisanie pod wygląd.

• Na tej stronie de facto używa się 4 znaczników: div, p, img i a. Sporadycznie pojawia się span i raz (totalnie bez sensu) iframe. Trochę ubogo.
• Stopka a później lecą szpalty tekstu SEO-owego. Naprawdę ktoś myśli, że to jeszcze działa?

• <div class="review">
  	<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review">
  		<div property="v:itemreviewed"><strong>KABZA</strong></div>
  		<div>Przez: <span property="v:reviewer">Web KABZA</span></div>
  		<div>Ocena: <span property="v:rating">9.9</span> / <span property="v:best">10</span></div>
  	</div>
  </div>

  To jest śmieszne i tyle. Ktoś, kto nie wie jak używać RDFa, używa go, by wyświetlić gwiazdki w Google. A i tak nie są wyświetlane, bo strona jest na zbyt niskiej pozycji…

• #header ul.menumainmenu li.active a:link

  Totalnie niepotrzebnie rozwlekły selektor. .menumainmenu .active a załatwia sprawę. Nie twórzmy specyficzności ponad miarę (to już druga brzytwa Comandeera!).

• background-image: linear-gradient(bottom, rgb(254,188,47) 12%, rgb(251,234,1) 55%);
  background-image: -o-linear-gradient(bottom, rgb(254,188,47) 12%, rgb(251,234,1) 55%);
  background-image: -moz-linear-gradient(bottom, rgb(254,188,47) 12%, rgb(251,234,1) 55%);
  background-image: -webkit-linear-gradient(bottom, rgb(254,188,47) 12%, rgb(251,234,1) 55%);
  background-image: -ms-linear-gradient(bottom, rgb(254,188,47) 12%, rgb(251,234,1) 55%);
  background-image: -webkit-gradient(
     linear,
     left bottom,
     left top,
     color-stop(0.12, rgb(254,188,47)),
     color-stop(0.55, rgb(251,234,1))
  );

  Pomijając już, że wersje bez prefiksów winny być ostatnie (bo to są oficjalne, zgodne ze standardami implementacje!), to jeszcze większość z tych prefiksów nie jest już potrzebna. A ostatnia wersja gradientu z Webkita jest już AFAIR usunięta z Chrome.

• A teraz najlepsze – skąd są wyciągnięte powyższe przykłady? Z arkuszu do druku. No tak, bo przecież gradienty się doskonale drukują. Arkusz do druku to po prostu ten sam arkusz co normalnie (jedynie lekko zmieniony), nawet style dla :hover są. Dobrze wiedzieć, że moja drukarka ma myszkę. A mówiąc jeszcze inaczej: zaciąga mi się de facto drugi, tak samo gigantyczny, arkusz, żeby pozwolić mi wydrukować. Wielkie dzięki, ale browser nie jest aż tak głupi i sam sobie podpina arkusz ze strony do wydruku (taka magia). Wskazówka na przyszłość: w tym arkuszu ma być tylko to, co potrzebne do druku.
• I na koniec na chwilę przejdę do podstrony „Kontakt”. E-mail jest oczywiście zapezpieczony przed spambotami. Chyba jednak ktoś zapomniał, że obecnie mamy dostęp do cudeniek takich jak PhantomJS, które biorą to, co jest w DOM, czyli innymi słowy – wstawiłeś ten mail na stronę, będę go miał. I tyle.

• I na koniec, taki oto kwiatuszek:

  <script type='text/javascript'>
   <!--
   document.write('<span style=\'display: none;\'>');
   //-->
   </script>Ten adres pocztowy jest chroniony przed spamowaniem. Aby go zobaczyć, konieczne jest włączenie w przeglądarce obsługi JavaScript.
   <script type='text/javascript'>
   <!--
   document.write('</');
   document.write('span>');
   //-->
   </script>

  Widziałem wiele sposobów ukrywania treści przy sytuacjach JS on/off, ale taki widzę 1. raz w życiu. Szkoda, że jest 3 razy dłuższy od użycia noscript.

Tyle na dziś…

A teraz do chirurga, wyciągać nóż!