Room 303

Internet ewoluował znacznie od stanu, kiedy FrontPage firmy z Redmond był topowym edytorem HTML. Coraz większy nacisk kładzie się obecnie nie tylko na wygląd, ale na samą strukturę dokumentu. Powracają stare, dobre czasy, kiedy to naturalną rzeczą było dzielenie pliku na sekcję (choćby dosowy edytor Tag tego wymagał) - w HTML służą do tego różnego poziomu nagłówki, coraz mniej pojawia się grafik czysto dekoracyjnych (takich, które nie niosą ze sobą informacji, np. bullety przy wypunktowaniu) - tutaj pomaga CSS. Grafiki informacyjne, jak nagłówki czy zdjęcia coraz częściej posiadają poprawnie wypełniony atrybut alt, a nierzadko i tytuł w atrybucie title. Powoli, małymi krokami znikają też serwisy wymagające przepisywania dziwnych kodów z obrazków o pstrokatym tle - zabezpieczenie to można w prosty sposób zastąpić odpowiednim skryptem po stronie serwera. Zwiększa się użyteczność serwisów, także względem użytkowników o specyficznych potrzebach, jak korzystający z przeglądarek tekstowych czy z lektorów w aural browsers. Sieć coraz bardziej skupia się na informacji, popularną formą czytania o nowościach jest subskrypcja blogów i ich strumieni RSS.

Z drugiej strony coraz bardziej uciążliwym problemem jest spam i niektórzy cierpią wręcz na paranoiczny zespół ochrony prywatności. Adresy email na stronach wstawiane są na przeróżne dziwne sposoby, począwszy od najprostszych i najbardziej eleganckich - usunięcie kropek i zastąpienie małpy napisem AT, przez stosowanie dziwnych zabiegów w CSS, JavaScript, a kończąc na zastępowaniu części lub całości grafiką. Pierwsza z metod ma tę przewagę, że jest skuteczna, prosta i jedyne, czego wymaga to przepisanie kilku znaków, działa też w każdej przeglądarce na każdym systemie operacyjnym, jaki sobie wymyślimy - od telefonu komórkowego do mikrofalówki. Pozostałe obarczone są mniejszym lub większym uszczerbkiem na użyteczności - CSS zależy mocno od możliwości przeglądarki, a na tym polu dominujący nam IE nie jest mocny, JavaScript może zostać wyłączony lub w ogóle może nie być zaimplementowany (choćby w urządzeniach przenośnych). Grafika generuje problemów najwięcej - przede wszystkim nie daje się zaznaczyć i skopiować, poza tym jej semantyczne umieszczenie na stronie wymagałoby wpisania w zawartość atrybutu alt adresu email, co stoi w konflikcie z naszymi intencjami.

W niektórych przypadkach zespół ochrony prywatności posuwa się jeszcze dalej - powstają serwisy typu Hidentity, gdzie zupełnie bezpłatnie można obfuskować za pomocą grafiki nie tylko swój adres poczty elektronicznej, ale tak poufne informacje jak numer GG czy login Skype. Oczywiście, żaden bot spamowy nie jest w stanie odróżnić ich na stronie (dla GG to zwykła liczba, dla Skype dowolny ciąg znaków), ale skoro da się je ukryć w obrazku, to czemu by nie. Wkrótce pojawią się zapewne serwisy informacyjne, publikujące całe artykuły w formacie wielowarstwowego pliku Adobe Photoshopa. Autorzy Hidentity poszli nawet o krok dalej - w celu zaoszczędzenia miejsca na stronie, dane prezentowane są w postaci animowanego pliku GIF z cykliczną rotacją. Nie przeszkadza im zapewne fakt, że próbując przepisać czyjś adres bądź numerek trzeba uciekać się do intuicyjnych rozwiązań z gatunku zrób screenshot, wklej do Painta. Na koniec wiele do życzenia pozostawia też sama graficzna forma tak przygotowanej informacji - wygląda jak typowy button reklamowy, co powoduje odruchowe pomijanie takich grafik - w identyczny sposób oko automatycznie pomija bannery reklamowe. Dla ciekawskich proponuję pochodzić po dużym portalu i po przejściu na kolejną stronę spróbować przypomnieć sobie, co reklamował banner na poprzedniej.

Ja ze swojej strony do walki ze spamem polecam automatykę. Spam Assassin i filtry Bayesa sprawują się bardzo sprawnie. Otrzymuję dziennie około 600 wiadomości pocztowych, z których około 100 to spam, do dziś tylko jedna wiadomość prześliznęła się przez regułki. Inną alternatywą jest konto na GMail, gdzie filtry spamowe działają niemal całkowicie bezbłędnie.

Dziś krótko o stylach.

CSS ma taką przemiłą cechę, że pozwala przypisać dowolnemu elementowi nieograniczoną liczbę klas. Definiuje się to rozdzielając nazwy klas za pomocą spacji:

<p class="pierwsza druga">Lorem ipsum, baby!</p>

O dziwo, działa to nawet w IE. Przynajmniej częściowo. Pewien nieznośny bug sprawia, że w przypadku wystąpienia kilku klas, IE zaczyna przypisywać je dość rozrzutnie, aplikuje mianowicie wszystkie klasy, których nazwa zaczyna się (a może zawiera) dowolną z wymienionych. Stąd jeśli do powyższego przykładu przypisze się poniższy arkusz, efekt może być dość nieoczekiwany:

.pierwsza
{
	color: #000;
}
.druga
{
	border: 1px solid #000;
}
.pierwszaNotka
{
	background: #000;
}

IE z ogromną radością zaaplikuje nam wszystkie trzy klasy, a efektem będzie czarny pasek. Czyż to nie przepysznie? Dlatego też należy unikać jak ognia sytuacji, kiedy nazwa jednej klasy jest jednocześnie prefiksem nazwy innej. Można też unikać aplikowania kilku klas do pojedynczego elementu.

Drugi problem dotyczy wielkości liter, standard definiuje nazwy klas i identyfikatorów jako rozróżniające duże i małe litery. IE z kretesem ignoruje te informacje. Są dwa przypadki, kiedy może nas to zaboleć. Pierwszy to arkusz styli zbudowany z myślą o IE (o ile można w ogóle budować arkusze styli z myślą o konkretnej przeglądarce). Jeśli bowiem nasz dokument jest serwowany jako XHTML, przeglądarka ma obowiązek ściśle przestrzegać tagów elementów pisanych małymi literami. Stąd poza IE poniższy styl nie ma żadnego zastosowania, jako że nie istnieje element <STRONG/>:

STRONG
{
	color: #f00;
}

Druga sytuacja to nazwy klas pisane jako pojedynczeSłowo (preferuję ten styl ze względu na czytelność arkusza):

<p class="loremIpsum">Lorem ipsum dolor sit amet</p>

.loremIpsum
{
	color: #f00;
}
.lOrEmIpSuM
{
	color: #00f;
}

Kto zgadnie, jakiego koloru będzie powyższy paragraf? Tutaj sprawa jest prosta, nazwy trzeba definiować z rozmysłem i konsekwentnie, wtedy taka sytuacja raczej nie będzie mieć miejsca. Stosuje się tu też powyższa uwaga - do testowania CSS (jako podstawowej przeglądarki) należy używać czegoś, co działa. Dopiero potem dostosowywać kod do IE.