Jeśli zajmujesz się kodowaniem wyglądu stron www lub dopiero zaczynasz się tego uczyć to zapewne spotkałeś się z metodą wprowadzenia interakcji do elementów nawigacji, tak aby reagowały w odpowiedni sposób np. na najechanie kursora myszy.
Jeśli chcesz wiedzieć więcej to zapraszam do czytania….

Specyfikacja css’a daje nam możliwość korzystania z zawartych w jego strukturze pseudoklas, które nie wymagaja wcześniejszej deklaracji, one poprostu istieją i są dostępne dla każdego dokumentu (x)html jaki tworzysz. Przedstawia je poniższy listing.

• :first-child
• :link
• :visited
• :hover
• :active
• :focus
• :lang(n)

–
Czary z linkami – ożywianie nawigacji.

Korzystając z kilku z wymienionych selektorów możemy dostosować wygląd oraz zachowanie naszych linków na stronie, oto one:

• a:link – określa elementy, które są zwykłymi linkami
• a:visited – selektor dla linków odwiedzonych
• a:hover – ta dyrektywa mówi jak zachowa się najechany link (kursor nad polem tekstowym)
• a:active – linki aktywne.

I teraz czas na sekret stosowania powyższych selektorów, aby poprawnie działały i były interpretowane zgodnie z naszym zamysłem należy deklarować je w odpowiedniej kolejności. Najpierw ustalamy właściwość dla elementu a: a {}, następnie a:link, a:visited, a:hover, a:active. W innym razie może wystąpić konfikt deklaracji i nasz kod nie będzie funkcjonował jak należy.

Jednak to nie koniec css’owych czarów, wymienione znczniki można stosować w kombinacjach, ale pod jednym warunkiem, że zostanie zachowania kolejność jaką podałem akapit wyżej. Dla przykładu napiszmy jak to może wyglądać:

• a:link, a:visited { text-decoration: underlined; }
  
• a:hover, a:active { background-color: #000; }

Każdy element , który jest odwiedzonym (klikniętym wcześniej) linkiem zostanie podkreślony, a linki najechane i będące aktualnie wyświeltane otrzymają czarne tło (#000 == black).Z wymienionych na samym początku selektorów pozostałe oznaczają:

• :focus – tyczy się elementów np. pól formularza, które są aktywne
• :first-child – pierwsze dziecko, w kaskadzie określonej kolejnośćią DOM’u
• :lang(pl) – nada wygląd elementom dla których została zadeklarowany atrybut lang jako pl.

To wszystko, na ten temat, do usłyszenia.

~Michał Kowalski 2008

Metoda podstawowa.

Wyświetlanie aktualnego statusu jest udostępnione w postaci skryptu CGI pod adresem URL : http://www.gadu-gadu.pl/users/status.asp wprost z serwisu GG. Aby uzyskać efekt należy przekazać do skryptu status.asp dwa parametry, jako pierwszy ‘id‘, który zawiera nasz numer w sieci gadu gadu, oraz drugi ‘styl‘ oznaczający sposób wyświetlania zwracanego stanu. Po przekazaniu do zmiennej ‘styl‘ wartości 1 nasz status będzie wyświetlał się w postaci słoneczka, natiomiast 2 da efekt opisowy.

Przechodząc do praktyki jaka płynie z powyższej teorii możemy wyświetlić status dla numeru 000000, za pomocą słoneczka (styl=1), wystarczy wstawić w odpowiednie miejsce na stronie poniższy kod (x)html:

<img src=”http://www.gadu-gadu.pl/users/status.asp?id=000000&styl=1″ />

i — gotowe

Dla mocno zamyślonych lub równie mocno co beznadziejnie zakochanych dodam, że zamiast 000000 wstawiamy własny numer gadu- gadu.

Wersja podrasowana – korzystamy z własnych miniaturek statusu za pośrednictwem php.

Jeśliuważasz, że domyśne obrazki jakie oferuje gg nie pasują do layout’u Twojej strony, możesz w łatwy sposób podmienić je wykorzystując do tego prosty kod php:

<?php
$plik=fopen ("http://www.gadu-gadu.pl/users/status.asp?id=00000&styl=2", "r"); $status=fgets($plik, 2);
switch ($status) {
   case 1: echo '<img src="niedostepny.jpg" mce_src="niedostepny.jpg" />'; break;
   case 2: echo '<img src="dostepny.jpg" mce_src="dostepny.jpg" />'; break;
   case 3: echo '<img src="wracam.jpg" mce_src="wracam.jpg" />'; break;
   default: //opcja domyślna: echo '<img src="error.jpg" mce_src="error.jpg" />'; break;
}
fclose($plik);
?>

–

To co robią powyższe instrukcje:

1. fopen — pobieramy status w postaci strony www
2. petla swich – sprawdza co zwróciło zapytanie i przypisuje odpowiedni obrazek
3. fclose — zamyka nasz plik operacyjny zawierający wartość statusu

Oczywiście należy utworzyć odpowiednie pliki miniaturek w formacie jpg i umieścić w miejscu dostępnym dla podanego kodu.

Zakończenie.

Kolejny prosty, aczkolwiek mocno praktyczny sposób na wzmocnienie dostępności Twoich usług oferowanych na stronie. Mam nadzieję, że komuś to ułatwi życie.

~Michał Kowalski 2008 

Tagi meta, bardzo często są wykorzystywane z brakiem zrozumienia ich funkcji i używane w sposób przynoszący więcej szkody niż pożytku. Co więcej silniki wyszukiwarek nie biorą ich często pod uwagę – tak twierdzą niektórzy twórcy witryn www. W tym miejscu zebrałem wszystkie prawdy i mity odnośnie konkretnych znaczników oraz dzielę się moimi rekomendacjami odnośnie ich stosowania (bądź odradzam jeśli są przesłanki aby uznać konkretną funkcję za przestarzałą). Do dzieła…

Definicja – czym są meta tags ?

Dla niewtajemniczonych wyjaśniam, że są umieszczane w kodzie strony (x)html pomiędzy znacznikami <head></head> i stanowią definicyjno-informacyją część kodu. Oznacza to tyle, że umieszczamy tam informacje dla serwerów www odpowiedzialnych za interpretacje kodu strony oraz aplikacji typu przeglądarki oraz wyszukiwarki (crawler’y google, msn, yahoo).

Zostały stworzone w latach dziewiędziesiątych wraz z coraz szybszym przyrostem ilości dokumentów hipertekstowych w sieci i miały dodać funkjonalność porządkującą zasoby pod względem typu, języka, treści. Oczywiście towarzyszyły temu liczne nadużycia, czyli niepoprawne stosowanie tagów sekcji meta aby oszukać algorytmy wyszukiwarek. Przeładowanie tagu “keywords” słowami niewystępującymi w treści strony, etc… Spowodowało to zdegradowane znaczenia meta tagów i aktualnie niektórzy twierdzą, że są bezwartościowe z punktu widzenia SEO. Moim zdaniem nie należy o nich zapominać. Przyjrzyjmy się im z bliska.

Zalecane (wymagane) meta-tagi.

• Meta Content Language

Tag informujący o języku w jakim została napisana treść lokalizacji, stosowany przez roboty wyszukiwarek na etapie kategoryzacji pod względem języka. Zalecany do strosowania wyłącznie na stronach innych niż anglojęzyczne, pomagają skierować treść strony do odpowiedniej grupy internautów (np. polskich).

Przykład:

<META HTTP-EQUIV=”Content-Language” CONTENT=”pl-PL”>

• Meta Content Type

Służy deklaracji sposobu wyświetlania znaków na stronie – musi się zgadzać z faktycznym kodowaniem użytym na stronie! Niepoprawne użycie może spowodować problemy z wyświetlaniem treści strony – doskonale znane wszystkim “krzaki” zamiast polskich znaków diakrytycznych. Zalecane stosowanie - zgodne z wykorzystaną deklaracją przestrzeni nazw DTD. (więcej o dtd w odrębnym artykule już wkrótce). Wybór kodowania zależy od preferencji, polecane to utf-8/iso-8859-2 dla polskich znaków.

• Meta Description

Pozwala zamieścić opis strony, jej przeznacznie oraz przybliżyć tematykę jaką porusza zgromadzona zawartość. Stosowana przez roboty, google często używa tego meta-tag’u do wyświetlenia opisu w wynikach wyszukiwania. Nie jest to reguła, jednak podejrzewając, że tag description będzie wyświetlany jako etykieta, należy mu poświęcić odpowiednią uwagę i dopracować go możliwie najdokładniej.

• Meta Language

Ustawia język wykorzystany na stronie – brany pod uwage przez roboty, należy go stosować wyłącznie w przypadku stron pisanych w innym języku niż angielski internacjonalny.

Opcjonalne znaczniki (niewymagane).

• Meta Abstract

Pierwotnie stanowił podsumowanie opisu (description) czyli podkreślał główne znaczenie dokumentu, jego meritum. Stosowany był głównie w prezentacjach akademickich, które zawierały dysertacje i prace na temat. Czasami warto z niego korzystać jeśli specyfika strony tego wymaga (np. dla wyodrębnienia części w obszernej dokumentacji).

• Meta Author

Niesie informację o autorze strony – jeśli zależy nam na sławie w dziedzinie tworzenia stron możemy śmiało się pokusić o umieszczenie naszego nazwiska w tego typu deklaracji. Ściśle niepolecane jest umieszczanie tu adresu e-mail, oczywiście z powodu ryzyka spamu.

• Meta Copyright

Stosowany dla umieszczenia praw autorskich, informacji o znakach zastrzeżonych, bądź numeracji patentowej. Czyli wszelkich adnotacji odnoszących się bezpośrednio do własności intelektualnej. Stosowanie raczej nie zalecane, tylko jeśli wiemy co robimy.

• Meta Designer

Mówi o twórcy kodu strony – mocno opcjonalny tak jak w przypadku tagu author.

• Meta Google

Opcje skierowane na potrzeby współpracy z robotami wyszukiwarki google,  dopuszczalne są dyrektywy:

googlebot: noarchive – nie pozwala na wyświetlanie zindeksowanej zawartości
googlebot: nosnippet – nie pozwala na wyświetlanie zindeksowanej oraz fragmentarycznej części zawartości
googlebot: noindex – nie pozwala na indeksowanie danej strony
googlebot: nofollow – nie pozwala robotom na podążąnie za linkowanymi stronami, mówi aby nie uwzględniać ich znaczenia do Page Rank.

Zalecenie: opcjonalne, wyłacznie jeśli chcemy aby google robiło coś bardzo specyficznego z zawartością naszej strony.

• Meta Keywords

Służy przedstawieniu słów kluczowych jakie zostały zawarte w treści danej strony, stosowanie jest wskazane. Należy zachować specyfikę stosowanych key-words, tak aby w miarę dokładnie oddawały słowa zawarte w treści dokumentu. Stosowanie słowa w tagu, które nie występuje w treści jest kiepskim pomysłem i z góry to odradzam!

• Meta MSN (No ODP)

Tag stosowany w kontekście wyszukiwarki MSN i służy wskazaniu preferowanego opisu srony jeśli chcemy aby był inny niż podany w DMOZ. Stosowanie wyłącznie w uzasadnionych przypadkach.

• Meta Title

Należy stosować z rozwagą, jednak osobiście nie zalecam – robi praktycznie to samo co tagi <title></title> wyrażone explicite. Wspominam o nim raczej ze względów sentymentalnych niż praktycznych
Przykład: <META NAME=”Title” CONTENT=”Page Title Here”>

Niezalecane do stosowania znaczniki.

• Meta Content Script Type
• Meta Content Style Type
• Meta Distribution
• Meta Expires
• Meta Generator
• Meta MS Smart Tags
• Meta Publisher
• Meta Rating
• Meta Refresh
• Meta Reply-To
• Meta Resource Type
• Meta Revisit After
• Meta Robots
• Meta Set Cookie
• Meta Subject
• Meta VW96.ObjectType

Zakończenie – trafna konkluzja.

Aby nie być posądzonym o ignorancję, każdy profesjonalny oraz nawet zajmujący się tworzeniem kodu html hobbistycznie webmaster powinien dowiedzieć się podstaw na temat tej części języka, jaką stanowią meta-tagi. Dodatkowo jeśli nasza strona www ma za zadanie spełniać wymagania marketingowe (sprzedaż, promocja usług) dobrze jest pisać kod przyjazny wyszukiwarkom. Sprawia to, że nasze lokalizacje są skuteczne i wydajne a my śpimy spokojniej …  

P.S. Ładny przykład:

<head>

<title>Oto przykład stosowania meta-tag’s.</title>
<meta name=”keywords” content=”meta, tag, meta-tags, stosowanie” />
<meta name=”description” content=”Dowiedz się jak stosować meta tagi!” />
<meta name=”robots” content=”all” />
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
<meta http-equiv=”content-language” content=”en” />

</head>

Michał Kowalski 2007

Napewno nie raz natrafiłeś na teksty zawierające słowo ’semantyka’, jeśli nie jesteś jeszcze ekspertem w dziedzinie webmasteringu/seo to możesz nie wiedzieć co ono właściwie oznacza. Formalnie jest to określenie dziedziny wiedzy, która bada relacje pomiędzy znakami a przedmiotami do których się one one odnoszą, a jak to jest w przypadku, który nas najbardziej interesuje?

 Jak to się ma do kodu strony? Czytaj wyjaśnienie…

xHTML czy inny język służący do tworzenia dokumentów hipertekstowych to zbiór znaczników które opisują strukturę prezentacji danych. Inaczej mówiąc aby na stronie umieścić jakieś informacje (np. ten tekst) należy je zapisać przy użyciu odpowiednich tagów, tak aby przeglądarka mogła dokonać interpretacji i zgodnie z naszą intencją rozmieścić w logiczny sposób na karcie wyświetlanego dokumentu. I tutaj przychodzi czas odwołania do naszej semantyki. Określa ona w jaki sposób używać wspomnianych tagów, aby oznaczały dokładnie to do czego zostały powołane. Abyśmy wiedzieli jaki był zamysł twórców danego języka, powstał standard, stworzony oraz rozwijany pod skrzydłami Światowego Konsorcjum W3C (Word Wide Web Consortium). Stosując się do standardów tworzymy przejrzysty oraz poprawny pod względem składniowym dokument, który posiada dodatkową zaletę – mianowicie jest zrozumiały dla maszyn;) Co to znaczy? Kod semantyczny prezentuje dane, które rozumiemy my – ludzie, jednak w taki sposób aby również przeglądarki, aplikacje przetwarzania danych, etc mniej więcej wyczuwały nasze intencję… To spora zaleta z punktu widzenia seo/pozycjonowania. Dlaczego ? To proste! Roboty wyszukiwarek są aplikacjami, przeglądając naszą stronę www robot ma nadzieję, że jej twóra wiedział co robi. Dlatego właśnie semantyczne strony jako “lekkostrawne” są lepiej traktowane przez crawlery i pająki.

Jakie to może nieść korzyści?

Korzyść w głównej mierze odnosi się do lepszych pozycji strony w wynikach wyszukiwania przeglądarek. Oczywiście samo stworzenie poprawnej strony nie załatwia samo w sobie sprawy jednak bardzo pomaga. Przekonałem się o tym, kiedy po optymalizacji strony Efrenzy Interactive uzyskałem w google 3 miejsce pod frazą ‘webdesign seo’ bez linkowania – zupełnie sote. To dobry wynik, zważywszy na fakt ilości powiązanych wyników dla tej frazy (spośród około9,300,000). Niestety nie udało się prześcignąć Bielaka ;)

Może następnym razem….

M.K.