Konwertowane znaki

Już na samym początku można wyróżnić dwa rodzaje linków: wewnętrzne i zewnętrzne. Wewnętrzne to najczęściej nagłówek, menu, stopka, czyli elementy najczęściej identyczne na wszystkich podstronach, do których użytkownik może w każdej chwili się odwołać. Linki zewnętrzne to z kolei te, prowadzące użytkownika poza stronę, na której się znajduje. Najczęściej występują one w zasadniczej treści strony.

Wygląd linków

Ważne jest, aby linki różniły się od otaczającego je tekstu. Użytkownik powinien wiedzieć, że w tym miejscu znajduje się link i może w niego kliknąć. Powszechnie przyjętą metodą oznaczania linków jest używanie podkreślonego tekstu. W rzadkich przypadkach używa się linków pisanych pogrubioną czcionką.

Często stosowane są pseudoklasy CSS, aby oznaczyć linki znajdujące się w trakcie interakcji z użytkownikiem. Odpowiednio można oznaczyć linki po najechaniu na nie kursorem (:hover), kliknięciu (:active) i odwiedzione już wcześniej (:visited). Najczęściej przyjmowanymi zmianami wyglądu linka w odpowiedzi na którąś z akcji jest zmiana koloru czcionki i ewentualnie usunięcie podkreślenia (w pseudoklasach :hover lub :active).

Co się stanie?

Ważną rzeczą jest poinformowanie użytkownika o tym, co stanie się po kliknięciu przez niego w dany link. Oczywiście, nie chodzi o dodanie do każdego linka opisu “jeśli tu klikniesz, zostaniesz przeniesiony na stronę…”, ale o odpowiednie opisanie treści, do której dany link prowadzi. Często stosowaną praktyką jest umieszczenie na stronie odnośnika w taki sposób:

Kliknij tutaj, aby przejść na stronę z kotkami.

Przez co użytkownik chcący szybko znaleźć informację, gdzie prowadzi dany link, musi przeczytać całe zdanie. Dużo lepszym sposobem jest zrobienie tego w ten sposób:

Strona z kotkami

Użytkownik od razu wie, co go czeka :)

Tytuły

W wielu dokumentach dotyczących użyteczności w sieci, jest mowa o używaniu atrybutu title do opisywania linków na stronie. Moim zdaniem jest to przydatne, jeżeli treść linku, z powodu kontekstu w jakim jest umieszczona, nie może powiedzieć użytkownikowi zbyt wiele o samej stronie za odnośnikiem. Na przykład, kiedy powołujemy się w tekście na jakieś źródło:

Źródła mówią, że udział zwierząt parzystokopytnych w tej sprawie jest marginalny.

Ważną rzeczą jest to, że podany w atrybucie title tekst pojawia się użytkownikowi po najechaniu kursorem na link, a także jest odczytywany przez przeglądarki głosowe, używane przez użytkowników niewidomych.

Jednak użycie tego atrybutu nie zawsze jest korzystne. Kiedy na przykład treść odnośnika mówi nam wszystko i nie mamy pomysłu dodania żadnego nowego opisu, nie ma sensu powielać treści tylko po to, aby mieć atrybut title.

Ikony

Kolejną rzeczą ułatwiającą użytkownikowi zrozumienie linku są ikony. Na przykład widoczne na screenie po lewej stronie, informują w systemie DokuWiki o linku zewnętrznym. Można ich również użyć do oznaczenia linków prowadzących do określonych typów plików np. zip, odt, doc, pdf. Stworzenie takich linków jest bardzo proste przy użyciu CSS3 – na przykład dla dokumentów pdf:

Nawiasy kwadratowe [] oznaczają, że wewnątrz nich znajduje się warunek odnoszący się do atrybutów danego tagu, $= oznacza, że wartość danego atrybutu ma się kończyć podanym po nim ciągiem znaków.

Z kolei linki zewnętrzne możemy oznaczyć w taki sposób:

Tutaj ^= działa podobnie, jak $= w poprzednim przykładzie i oznacza, że wartość atrybutu ma się zaczynać podanym ciągiem znaków.

Otwieranie linków zewnętrznych

Istnieją tutaj dwie szkoły. Pierwsza z nich, nakierowana na użytkowników mniej biegłych w obsłudze komputera, mówi że linki zewnętrzne powinny być otwierane w nowym oknie (atrybut target=”blank”), tak aby użytkownik nie był zaskoczony trafiając nagle na zupełnie inną stronę niż był przed chwilą. Druga szkoła opowiada się za otwieraniem wszystkich linków w ten sam sposób, ponieważ otwieranie ich domyślnie w nowym oknie blokuje możliwość otwarcia ich w tym samym oknie, co zawęża użytkownikowi możliwość wyboru.

Wybór pomiędzy jedną z dwóch szkół zależy tutaj od tego, czego oczekują nasi użytkownicy. Powinniśmy przeanalizować ich sposób korzystania z komputera (chociażby przewidywany) i dostosować do niego zachowanie strony.

Linki wewnętrzne

Jeśli znajdują się one wewnątrz treści strony, tak jak większość linków zewnętrznych, to stosują się do nich te same zasady. Szczególnym rodzajem linków wewnętrznych, który wyłamuje się większości reguł, są linki znajdujące się w nagłówku, menu i stopce strony. Ich wygląd jest ściśle uzależniony od grafiki strony. Bardzo często same w sobie są one specjalnie zaprojektowanymi elementami graficznymi strony. Z tego powodu nie jest przy nich konieczne podkreślenie, ani inne elementy wyróżniające je spośród tekstu strony. Regułą, od której nie ma wyjątków, jest aby użytkownik wiedział, że są to linki i że może z nich skorzystać (inaczej stają się tylko tłem, bez wpływu na interakcję użytkownika ze stroną).

Często spotykaną w menu wersją pośrednią pomiędzy w pełni rysowanymi linkami, a linkami tekstowymi, są linki tekstowe z ikonami opisującymi w sposób symboliczny, gdzie one prowadzą. Może być to na przykład dom przy linku do strony głównej lub ikona telefonu przy linku do strony z informacjami kontaktowymi.

Przykłady takich rozwiązań:

O czym warto pamiętać

Przede wszystkim linki na stronie, nieważne czy mówimy o linkach wewnętrznych czy zewnętrznych, powinny być dla użytkowników pomocą w nawigacji. Użytkownik nie powinien zastanawiać się, co robi dany link, powinien wiedzieć to już po pierwszym rzucie oka.

• jako tło strony z parametrem background-position:center;
• z wykorzystaniem position:absolute;left:50%;margin-left:-50px;
• z wykorzystaniem margin-left:auto;margin-right:auto;

Podobnie jak w poprzednim odcinku, przygotowałem stronę testową. Zgodnie z intuicją wszystkie trzy kwadraty powinny ułożyć się jeden nad drugim i dać jeden prostokąt o wymiarach 100×300px.

Firefox 3.5, Opera, IE8

Powyższe trzy przeglądarki wyświetliły wszystko zgodnie z przewidywaniami: kwadraty jeden pod drugim, równo i bez problemów. Miłą niespodzianką było to, że Internet Explorer 8 wyświetlił wszystko poprawnie. W tych trzech przeglądarkach pozycja wyśrodkowanego tła i wyśrodkowanych elementów przekształcana jest do liczby całkowitej jednym sposobem (w FF3.5 przez zaokrąglenie, w Operze i IE8 – przez obcięcie części ułamkowej).

Firefox 3.0, IE7

Zaskoczeniem okazał się Firefox 3.0, który wyświetla wyśrodkowane tło przesunięte o 1px w lewo w stosunku do pozostałych kwadratów. Związane jest to z tym, że pozycja tła w jest wyliczana przez obcięcie części ułamkowej, a pozycja elementu na stronie – przez zaokrąglenie. Oczywiście przesunięcie występuje tylko wtedy, kiedy szerokość okna przeglądarki (bez elementów interfejsu: paska przewijania, brzegów okna) jest liczbą nieparzystą.

Safari, Chrome

W przeglądarkach na silniku webkit występuje odwrotny problem niż w FF3.0 i IE7 – pozycja tła tworzona jest przez zaokrąglenie, a pozostałych elementów przez obcięcie, co przy nieparzystej szerokości strony tworzy przesunięcie tła o 1px w prawo.

IE6

Ta przeglądarka jest, oczywiście, klasą samą w sobie. Dla tła w ogóle nie działa automatyczne wyśrodkowanie przez co nie znalazło się ono na screenie (wyświetlone było w lewym górnym rogu strony testowej), z kolei element wyśrodkowany przez position:absolute został ustawiony przez zaokrąglenie, a przez margin:auto – przez obcięcie.

Rozwiązanie

Tutaj, niestety, nie ma optymistycznych wieści. Wprawdzie można mieć nadzieję na nową wersję webkita, która naprawi problem w Safari i Chrome, a także na wyjście z użycia IE6, IE7 i FF3.0, ale trzeba założyć, że nie nastąpi to szybko. Jedynym sensownym rozwiązaniem wydaje się omijanie tego problemu i umieszczanie wyśrodkowanego tła strony tylko wtedy, gdy nie szkodzi nam jednopikselowe przesunięcie w jedną lub drugą stronę, a także wyśrodkowywanie elementów na stronie przy użyciu tylko jednej, wybranej metody.

Na pierwszy ogień pójdzie jednak tradycyjnie Internet Explorer zaczynając od szóstki, a na ósemce kończąc, a w kolejnym odcinku pojawi się test porównawczy pozycjonowania kwadratu o określonej szerokości (100px) na środku strony za pomocą trzech metod:

• jako tło strony z parametrem background-position:center;
• z wykorzystaniem position:absolute;left:50%;margin-left:-50px;
• z wykorzystaniem margin-left:auto;margin-right:auto;

Nie lubię PNG

Oczywiście ja bardzo je lubię i czynią one tworzenie stron dużo efektywniejszym. Niestety, nie lubi ich Microsoft i do dziś występują problemy z ich wyświetlaniem we wszystkich Internet Explorerach.
Aby zaprezentować problem, stworzyłem testową białą stronę, na której wyświetliłem kwadrat o rozmiarach 100×100px w kolorze #808080 (w założeniu) na cztery sposoby:

1. png w kolorze czarnym (#000000) z 50% przeźroczystością (dodatkowo jego lewy górny róg ustawiłem na pełną przeźroczystość)
2. png w kolorze #808080 bez przeźroczystości
3. gif w kolorze #808080
4. div z ustawionym kolorem tła na #808080

Nowoczesne przeglądarki

W nowoczesnych przeglądarkach (Firefox, Opera, Safari, Chrome – na takich testowałem) efekt jest przewidywalny: prostokąt 400×100px z pustym kwadratem 50×50px w lewym górnym rogu.

Internet Explorer 5 i 6

Na początek przykład najbardziej drastyczny. Wszystkie próby użycia przeźroczystości w plikach PNG oznaczane są niebieskim cieniem. Dodatkowo wszystkie pliki PNG (nawet te bez przeźroczystości) wyświetlane są odrobinę ciemniejsze niż powinny (w tym przypadku wyświetlany kolor to #757575 zamiast #808080). Z tego, co udało mi się znaleźć, związane jest to z błędem obsługi filtru gamma.

Jedynym sposobem na uzyskanie poprawnego wyglądu jest całkowita rezygnacja z PNG i zapisywanie wszystkich grafik w innych formatach.

Internet Explorer 7 i 8

Tutaj uczyniono pewien postęp. Nie ma już niebieskiego cienia nad przeźroczystymi obrazami, aczkolwiek kolory dalej są przekłamane ze względu na błędną obsługę filtru gamma (błąd niepoprawiony przez 11 lat i 4 wersje programu!). Pierwszy kwadrat wyświetlony jest w kolorze #7F7F7F, drugi w #757575.

Tu również najlepszym sposobem na poprawny wygląd jest całkowita rezygnacja z PNG. Przy pewnej dozie tolerancji można by przyjąć, że wersja z użytą przeźroczystością nie różni się aż tak bardzo od oczekiwanego rezultatu i stosować PNG do obrazów z przeźroczystościami, a pozostałe formaty do obrazów bez, ale jest to dziwny kompromis, skoro w innych przeglądarkach nie trzeba go stosować.

Stop IE!

Jak widać nawet najnowsza wersja Internet Explorera nie jest wolna od błędów i na wersję 9.0 wypada patrzeć z nadzieją, że dostosuje się ona do standardów stosowanych przez pozostałe przeglądarki, a jednocześnie z obawą, czy przypadkiem nie będzie to kolejna wersja IE do wspierania w zupełnie inny sposób niż poprzednie i zupełnie inaczej niż pozostałe przeglądarki.

Jako ciekawostka: od pierwszego marca Google przestaje wspierać IE6 w swoich aplikacjach.

A jako optymistyczny akcent najnowsze statystyki przeglądarek w polskim internecie.

Pierwszy wpis po dłuższej przerwie związanej ze sprzyjającą aurą :-)

Jak widać nad i pod wpisem, postanowiłem umieścić na blogu linki do najpopularniejszych stron social bookmarking (ogólnie rzecz biorąc, bo nie wiem, czy na przykład twittera i facebooka można do nich zaliczyć). Przy okazji stworzyłem spis polskich i zagranicznych serwisów tego typu łącznie z odnośnikami do umieszczenia na swojej stronie. Zapraszam do korzystania.

Serwisy polskie

	http://blip.pl/dashboard?body=[message]
	http://co-robie.pl/home/?add=[message]
	http://flaker.pl/add2flaker.php?url=[link]&title=[title]
	http://www.garnuch.pl/dodaj?adres=[link]&tytul=[title]
	http://www.gwar.pl/DodajGwar.html?u=[link]
	http://www.linkologia.pl//link-add/?url=[link]&title=[title]&notes=[description]
	http://onmedia.pl/submit.php?url=[link]
	http://www.vala.pl/dodaj/?title=[title]&url=[link]
	http://www.wahacz.pl/submit.php?url=[link]
	http://wyczaj.to/api/external/add_external.html?full_url=[link]&title=[tytuł]&description=[opis]
	http://www.wykop.pl/dodaj?url=[link]l&title=[title]&desc=[description]
	http://youbookmarks.com/api/quick_add.php?version=1&url=[link]&title=[title]

Serwisy zagraniczne

	http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url=[link]&Title=[title]
	http://blogmarks.net/my/new.php?mini=1&title=[title]&url=[link]
	http://buddymarks.com/add_bookmark.php?bookmark_title=[title]&bookmark_url=[url]
	http://www.citeulike.org/posturl?url=[link]&title=[title]
	http://del.icio.us/post?url=[link]&title=[title]“
	http://digg.com/submit?phase=2&url=[link]&title=[title]
	http://www.diigo.com/post?url=[link]&title=[title]
	http://www.dzone.com/links/add.html?url=[link]&title=[title]
	http://www.facebook.com/share.php?u=[link]&t=[title]
	http://friendfeed.com/?title=[title]&url=[link]
	http://www.google.com/bookmarks/mark?op=edit&bkmk=[link]&title=[title]
	http://www.linkagogo.com/go/AddNoPopup?title=[title]&url=[link]
	http://linkroll.com/insert.php?url=[link]&title=[title]
	http://www.maple.nu/cgi-bin/search6/usa/ss_submit.cgi?fct=100&url=[link]&title=[title]
	http://www.mister-wong.com/index.php?action=addurl&bm_url=[link]&bm_description=[title]
	http://www.netvouz.com/action/submitBookmark?url=[link]&title=[title]
	http://www.newsvine.com/_wine/save?popoff=0&u=[link]&h=[title]
	http://www.onlywire.com/b/?u=[link]&t=[title]
	http://www.plugim.com/submit?url=[link]&title=[title]&trackback=
	http://www.reddit.com/submit?url=[link]
	http://simpy.com/simpy/LinkAdd.do?note=[title]&href=[link]
	http://www.spurl.net/spurl.php?url=[link]&title=[title]
	http://www.stumbleupon.com/submit?url=[link]&title=[title]
	http://www.tagtooga.com/tapp/db.exe?c=jsEntryForm&b=fx&title=[title]&url=[link]
	http://twitter.com/home?status=[message]

Przy zapisie linków przyjąłem następującą konwencję zapisywania fragmentów do uzupełnienia przez nas:

• [link] — link do danego artykułu na naszej stronie,
• [title] — tytuł artykułu,
• [description] — krótkie streszczenie artykułu,
• [message] — wiadomość do serwisów nie będących wprost social bookmarking; np. Czytam artykuł: [link].

Fragmenty te każdy może zastąpić zgodnie z własnym systemem, na którym działa strona. Można również użyć javascriptu do zamiany odpowiednich fragmentów na przykład w ten sposób: