Tak zwane portale startowe (nazwa portal też nie jest przypadkowa, bo nawiązywała do drzwi [porta]) stanowiły niegdyś pokaźny wycinek w internetowym torcie. W ten sposób zaczynał między innymi portal onet.pl. Tak jak inne strony tego typu prezentował w założeniu przydatne użytkownikom linki do witryn różnego typu, wyszukiwarki itd. Dziś chciałbym przyjrzeć się właśnie jednej ze stron tego typu. Na przykładzie omawianego dziś portalu start24.pl widać, że stara jest nie tylko idea, ale także (w tym wypadku) jej wykonanie.
- Na początek krótko o wyglądzie strony. Nigdy nie czułem się osobą obdarzoną szczególnym zmysłem artystycznym i uprawnioną do wydawania różnych sądów na temat tej subiektywnej warstwy strony, jednak nie będzie przesadą, gdy powiem, że wygląd strony jest… niedzisiejszy. To po prostu od razu rzuca się w oczy… i daje podejrzenia wobec tego, co możemy spotkać pod maska 😉
- Doctype strony odpowiada jej wyglądowi i prawdopodobnemu wiekowi. Mamy na powitanie HTML w wersji 4.01. To w zasadzie żaden problem, gorzej że w wariancie transitional, czyli niepełnej zgodności ze standardami.
- Wprawdzie mamy znacznik meta z prawidłowo zdefiniowanym content language, jednak mimo wszystko nie zaszkodziłby atrybut
langdlahtmlw celu uniknięcia np. sytuacji, gdy czytnik stron próbuje czytać polską treść z angielskim akcentem – nic przyjemnego. - Meta description w całości pokrywa się tytułem strony. Nie trudno zatem o wniosek, że któreś z nich ma nieprawidłową zawartość, gdyż generalnie tytuł nie jest opisem.
- Kolejnym znacznikiem w sekcji
headjest linkshortcut icon, który de facto nie jest poprawnym znacznikiem i został wprowadzony poprzez panowanie starego IE. Poprawna opcja torel icon, przy czym sprawa przedstawia się tak, że w wypadku dzisiejszych przeglądarek spokojnie wystarczy plik/favicon.ico(czyli w głównym katalogu strony), a wszystkie dodatkowe znaczniki można pominąć. - Niżej mamy zadeklarowany wewnątrz dokumentu styl CSS. Zapamiętajcie ten moment, gdyż więcej na tej stronie się nie powtórzy 😉 Autor owego kodu CSS popełnił zasadniczy błąd – klasy nie opisują stylowanej zawartości tylko nadawany wygląd. Jeżeli ktoś nie wie w czym problem: załóżmy, że nadajemy guzikowi do rejestracji klasę
.red_button. W momencie gdy chcemy zmienić przycisk na niebieski trzeba by zmienić klasę nadaną w kodzie HTML – tak być nie powinno, dlatego lepiej użyć np..register_button. -
<base target="_blank">Prawdę mówiąc na początku zastanawiałem się cóż to za magiczny wynalazek, nie przypominam sobie, abym spotkał się z tym wcześniej. Otóż jest to ucieleśnienie bardzo dużego błędu – powoduje ono, że każdy link kliknięty na stronie otworzy się w nowej karcie/oknie. Żeby nie powtarzać ponownie tego samego, zalinkuję do artykułu pornela.
- Co niżej? Funkcja JS mająca tworzyć… rollover. Nikomu chyba nie muszę już przypominać, że takie rzeczy robi się w CSS.
- Kolejny skrypt JS przed nami. Pytanie brzmi: czemu do zdefiniowania nowej funkcji został stworzony kolejny znacznik
script? Ponadto mamy tutaj stycznosć, z dziś już prawie niespotykanym atrybutemlanguage, rarytas 😉 - Jeden pozytyw w temacie JS – strona działa bez jego obsługi w pełni poprawnie.
- Udało się, przebrnęliśmy przez sekcję
headdokumentu. Mimo wszystko przyjdzie nam się jeszcze zatrzymać na samym otwarciubody.<body link="#2332BA" vlink="#2332BA" alink="#FF0000" topmargin="0" leftmargin="0" bgcolor="#FFFFFF" text="#000000" background="bodyg.gif">Ustawienie tła, kolorów czcionek i marginesów… w HTML.
- Co? Kolejny skrypt? Nie ma to jak konsekwencja. Wszystkie ze wspomnianych skryptów JS powinny znaleźć się zaraz przed znacznikiem zamykającym
body. -
<div align="center"> <center>Krótki komentarz: CSS.
- I otóz to! Design na tabelkach przed państwem! Niezgodne z przeznaczeniem użycie znacznika, nadmiarowy i trudny w zarządzaniu kod – oto co dostajemy, gdy opieramy szablon naszej strony o tabelki.
- Wszechobecne nadawanie wyglądu poprzez HTML –
center,font, atrybutyalignitd. O tym dlaczego jest to szkodliwe, powiem krótko w podsumowaniu. - Aktualna data – podważyć należy przede wszystkim przydatność takiego elementu. Coś, co tak mocno kojarzy się ze starymi stronami WWW jest całkowicie niepotrzebne. Przecież każdy z nas ma zegarek i datę gdzieś pod ręką w systemie. A także kolejne niepotrzebne rozbicie na dwa znaczniki
script. - Formularz służący do wyszukiwania w Google został zamknięty z literówką w nazwie tagu –
</from>. Natomiast prawidłowo zapisany znacznik zamykający można znaleźć duużo niżej w kodzie, mam wątpliwości czy należy on w ogóle do tego formularza. -
<input type="radio" CHECKED value name="lr">Bardzo intrygujący zapis…
-
<td width="234" class="s10" bgcolor="#F0F3F7" height="18" style="border-right:1px solid #808080; border-left:1px solid #808080; ">Mamy tu niezły mix. Odwołanie się do jednej z nielicznych stworzonych na tej stronie klas, styl inline, a także HTML-owe atrybuty nadające wygląd – widać silne przywiązanie webmastera do tych ostatnich.
-
<td onmouseover="this.style.backgroundColor='#E6E7DA'" onmouseout="this.style.background='none'" align="center">Oto JS-owy „zastępca”
:hover. Nie warto. -
<td width="15" rowspan="2"> </td>„Uroki” budowania szablonów na tabelach.
-
<a name="01">Dawno niestosowany sposób tworzenia kotwic. W dodatku bez zamknięcia.
- Pojawiła się nawet ramka
iframe(dwie, jeśli liczyć tą od Facebooka) – to chyba dla dopełnienia ekipy. - Po przebrnięciu dużej ilości podobnego kodu (między innymi pozagnieżdżane tabelki) docieramy do stopki strony. Po nie pierwszym tak zamotanym fragmencie kodu stwierdzam, że webmaster musiał być bardzo zmęczony pisząc go:
Copyright © od 2001 roku || Kontakt <a href="http://start24.pl/forum/index.php?topic=6" style="color: #2332BA; text-decoration: none"> || <b><a href="reklama.htm" style="color: #2332BA; text-decoration: none">Tania i skuteczna reklama</a></b></font></td>Wygląda na to, że kontakt w ogóle nie został podlinkowany, a podwójny pipe został niechcący (a może jednak umyślnie?) podlinkowany do forum. Forum serwisu było chyba jedynie chwilą ulotną dla naszego webmastera ponieważ możemy zobaczyć tam jedynie świeżą instalację Simple Machines Forum bez zmienionego domyślnego stylu i z powitalnym postem w powitalnym dziale 😉
- Tuż przed zamknięciem
bodyjeszcze taki kwiatek, na pożegnanie:<p align="center"> </p>Po pierwsze wiadoma sprawa, budowanie odstępów za pomocą niełamliwych spacji to zło. Pytanie dodatkowe brzmi jednak: po co tam ten
align? 😀 - To teraz w ramach zmiany kolejności i podsumowania: Validator.
Na koniec troszkę luźnych informacji i podsumowanie. Tak, zdaję sobie sprawę, że serwis posiada wersję mobilną (start24.pl/mobi) jednak stanowi ona na tyle odrębną część (przynajmniej pod względem kodu), że jeżeli zostanie opisana, to będzie temu poświęcony osobny wpis.
Teraz mała ciekawostka: praktycznie identyczna kopia serwisu znajduje się pod adresem start24.republika.pl. Dlaczego o tym mówię? Daje to bowiem informację (a przynajmniej pozwala mieć uzasadnione przypuszczenia), że cały serwis został napisany bez użycia żadnej technologii działającej po stronie serwera (republika nie obsługuje bowiem nawet PHP). Napisanie ponad tysiąca linijek kodu HTML „z palca” daje pewne wytłumaczenie dla tak licznych literówek czy źle pozamykanych znaczników.
Strona, mimo tego, że stara, jest modelowym przykładem na to, co tracimy, gdy nie używamy CSS. Pomyślcie tylko, jak bardzo można by zmniejszyć jej rozmiar, gdyby przypisywane co chwilę kolory czy czcionki opisać odpowiednimi selektorami. Znacznie zmniejszyłby się kod HTML, a cały kod CSS byłby załączony w zewnętrznym pliku, który byłby ściągnięty wyłącznie jednorazowo, a potem skeszowany. To samo powinno zresztą dotyczyć tutaj JavaScriptu.
Potraktujcie to jako lekcję a także małą wycieczkę do przeszłości 🙂
Mam propozycję strony do oceny: e-gierki.com 🙂
Całkiem zgrabna próba reklamy. Powiedz mi tylko, co Twoja strona ma do założeń projektu WebKrytyk? Skupiamy się na ocenie stron tworzonych za pieniądze publiczne, bądź takich które są popularne, albo ze względu na swoja tematykę powinny szczególnie zwracać uwagę na kwestie poprawności (choćby strony dotyczące webmasteringu). Przykro mi, ale Twoja strona nie łapie się pod żaden z tych punktów. Nie wyróżnia się szczególnie złą jakością kodu (choć to akurat zaleta ;)), w związku z tym nie ma powodu, aby zająć się także Twoją stroną, przykro mi.
Niech ta sytuacja będzie sugestią dla innych potencjalnych spammerów – nie ma sensu 🙂 Szkoda Waszego i naszego czasu na takie zabawy.
Cześć, sorka, po prostu myślałem, że ocenicie tą stronę. Nie należy do ona do mnie.
Nie zmienia to faktu, że strona nadal nie łapię się w żaden sposób pod to, co oceniamy. Nie jest oczywiście bezbłędna, bo takich stron praktycznie nie ma, ale patrząc na przekrój tego co było prezentowane przez nas wcześniej, to strona nie wybija się jakoś szczególnie niskim poziomem kodu lub użyteczności (co, jak mówiłem wcześniej, należy brać za zaletę).
Jesteśmy oczywiście otwarci na sugestie, ale gdybyśmy brali każdą stronę, która posiada jakieś niedoróbki i błędy, to sądzę, że ilością ocenionych stron musielibyśmy dogonić Google 🙂
W sumie co racja co racja 🙂 Mam nadzieję, że wpisy będą pojawiać się częściej, bo naprawdę przyjemnie się je czyta.