W tym dokumencie przedstawiamy zalecenia dla autorów tworzących strony WWW dla oddziałów Generalnej Dyrekcji Dróg Krajowych i Autostrad. Opracowanie powstało w roku 1999. Od tej pory postało kilka witryn - w tym witryna główna GDDKiA - która została zaprojektowana z pominięciem umieszczonych w tym artykule zaleceń. Koniecznie odwiedz tę stronę. Przekonasz się osobiście, do czego prowadzi łamanie zasad dobrego projektowania stron. Celem tego artykułu jest omówienie pewnego standardu tworzenia takich stron, które
Dokument ten nie jest podręcznikiem jezyka HTML. Początkującym autorom stron polecamy podręcznik "Po prostu HTM 3.2" Elisabeth Castro, Helion 1997. Bardzie zaawansowanym autorom stron WWW polecamy książkę "Sekrety HTML i publikacji WWW" Jim Heid'a, Wydawnictwo PLJ, Warszawa 1998.
Restrykcyjność zaleceń sprowadza się głównie do unikania rozwiązań specyficznych dla konkretnych przeglądarek. Jedną z głównych zalet Internetu jest jego otwartość, co miedzy innymi oznacza, że jego zasoby powinny być dostepne z dowolnych platform sprzętowych. Należy zatem unikać stosowania tych rozszerzeń jezyka HTML wprowadzanych przez pojedyncze firmy, które nie zostały zaimplementowane w produktach innych czołowych firm zajmujacych sie budową przeglądarek. Dobrze znanym przykładem takiego niestandardowego rozszerzenia jest znacznik <CENTER>.
W dokumencie wyróżniamy trzy poziomy zaleceń:
Reguła
Sugestia 
Zalecenie Stroną nazywamy pojedynczy zbiór HTML. Zbiór wszystkich stron znajdujących się na jednym serwerze nazywamy witryną. Podwitryną nazywamy podzbiór witryny skaładający się ze wszystkich dokumentów z wyróżnionego podkatalogu. Słowo odnośnik stosujemy w znaczeniu: hiperłącze, łącze. Dokumentem nazywamy zbiór stron połączonych tematycznie i połaczonych ze sobą liniowo łącznikami "Pierwszy", "Poprzedni", "Nastepny", "Ostatni". Tak więc pojedyncza strona może być dokumentem, ale nie musi. Użytkownikiem strony nazywamy internautę który ją przegląda.
Duża część formułowanych w tym dokumencie zaleceń oraz podział zaleceń na wymienione wyżej trzy kategorie pochodzi z artykułu "System Magic HTML Style Guide" ze strony http://www.sysmag.com.web/html-style-old.html. Wiele sformułowanych tutaj uwag jest wynikiem lektury wspomnianej wyżej książki J. Heida.
Witryny wszystkich oddziałów GDDKiA powinny być skierowane na obsługę informatyczną użytkownika dróg Krajowych i Autostrad. Dla takiego użytkownika mało istotne są sprawy wewnętrzne GDDKiA, takie jak struktura organizacyjna, czy też to kto jest kierownikiem jakiegoś działu. Tym niemniej witryna Oddziału może zawierać strony poświęcone swoim sprawom wewnetrznym.
Najważniejszym zadaniem które mają spełniać witryny oddziałów GDDKiA jest rzetelne informowanie użytkowników o sytuacji na drogach Krajowych i Autostrad. Dlatego główny wysilek podczas budowania stron należy położyć na aktualność informacji, łatwość dostępu do nich, na wygodę nawigowania po witrynie oraz na łatwość wyszukiwania potrzebnych informacji. Znacznie mniejszą rolę odgrywa w nich szata graficzna projektowanych stron.
Jest wielce prawdopodobne, że przejrzyście zrealizowane strony znacznie ułatwią pracę w oddziałach, gdyż po pewnym czasie klienci GDDKiA zostaną przyzwyczajeni do korzystania z usług internetowych, co może zmniejszyć ilość wyjasnień udzielanych telefonicznie.
Główna strona witryny Oddziału powinna być zrealizowana jako Punkt
Informacji Drogowej (PID) Oddziału.
Musię sie ona nazywać "index.html" (lub "index.htm" - to zalezy
od ustawien serwera). Sprawom
wewnętrznym Oddziału powinna być poświęcona podwitryna,
znajdująca się w podkatalogu. Strona główna oddziału
również musi nazywać się "index.html".
Każda strona witryny Oddziału powinna mieć na samej górze
umieszczone logo Punktu Drogowego bądź logo Oddziału. Oto
przykłady tych obiektów stosowane w GDDKiA:
Firma ProMat posiada pliki w formacie GIF z logo dla wszystkich Oddziałów GDDKiA. Każde samodzielnie projektowane logo powinno zostać oparte na znaku graficznym GDDKiA.
Strona główna PID Rejonu Dróg powinna mieć
odnośnik do strony głównej PID Oddziału. Podobnie,
strona główna PID Oddziału powinna mieć odnośnik
do strony głównej GDDKiA.
Strona główna podwitryny Rejonu Dróg poświęcona
sprawom wewnętrznym RD powinna mieć odnośnik do odpowiedniej
strony Oddziału. Podobnie, strona Oddziału
poświęcona sprawom wewnętrznym powinna mieć
odnośnik do analogicznej strony GDDKiA.
Odnośniki do innych stron powinny znajdować się na dole
strony. W przypadku dłuższych stron należy je umieścić
również na początku strony, bezpośrednio po logo.
Każda strona która zawiera informacje zmienne w czasie (np.
strona zawierająca listę aktualych utrudnień w ruchu drogowym)
musi zawierać datę ostatniej aktualizacji.
Do budowania stron uzywaj standardu HTML 3.2. Jeśli korzystasz z
konstrukcji występujących w rozszerzeniu tego języka, to rób
to ostrożnie. Sprawdź, czy konstrukcje te działają w
standardowych przegladarkach.
Obowiązującym
w Internecie standardem kodowania polskich znaków diakrytycznych
jest ISO-8859-2, zwany również ISO Latin 2. Do
określenia sposobu kodowania strony służy znacznik meta
umieszczony w sekcji HEAD dokumentu.
<meta
http-equiv="Content-Type" content="text/html;
charset=iso-8859-2">
Uwaga 1. Firma MicroSoft próbuje narzucić do kodowania stron polskich standardu Windows-1250 zwanego w Polsce stroną kodową Windows. Korzystając z tego kodowania ogranicza się grupę odbiorców poprawnie interpretujących strony do użytkowników systemu Windows.
Uwaga 2. Jeśli posługujesz się do budowania stron WWW programem FrontPage Express firmy MicroSoft, to w panelu "Kodowanie HTML" parametry "Do wyświetlania tej strony" oraz "Do kodowania tej strony" należy ustawić na "Środkowoeuropejski (ISO 8869-2)". [Podczas edycji dokumentu naciśnij na prawy przycisk myszy i z podręcznego menu wybierz "Właściwości strony"]
Uwaga 2. Pewne niedogodności podczas przygotowywania dokumentów HTML mogą mieć autorzy projektujący strony w środowisku Windows, którzy do kodowania używają standardu Windows. Przed opublikowanie dokumentu powinni oni przekonwertować dokument do standardu ISO Latin 2. Zrobić to można za pomocą pularnego w Polsce programem Ogonki97. Program ten można znaleźć na Polskiej Stronie Ogonkowej (htpp://www.agh.edu.pl/ogonki/pl.html). Darmowy tłumacz znajduje się również na stronie freewaru Promatu.
Strona główna ma mieć nazwę "index.html" (lub "index.htm").
Stosuj nazwy średniej długości. Nie nazywaj dokumentu
"aud.html", bądź
"Aktualne-Utrudnienia-Drogowe.html" lecz na przykład
"AktUtr.html". Stosuj znaczące nazwy kartotek .
Struktura kartotek powinna odzwierciedlać strukturę miejsca
WWW.
Stosuj wyłącznie adresowanie względne w
obrębie swojego miejsca. Używaj przy tym najkrótszej możliwej
metody adresowania, na przykład:
Stosowanie tych reguł znacznie redukuje ilosć połączeń sieciowych.
Każda strona musi mieć odnośnik do strony głównej
oraz do swojej nadrzędnej strony tematycznej.
Odnośniki te są z reguły umieszczane na końcu strony i są
realizowane za pomocą tekstu bądź obrazka. Zasadę tę
stosujemy, gdyż wielu użytkowników ma zwyczaj "skakania
bezpośrednio do środka witryny".
W każdym
katalogu twojego miejsca powinien znajdować się zbior o
nazwie "index.html" (lub "index.htm"). W ten sposób
umożliwiamy użytkownikom ręczne obcinanie długich URL'ów
Każda strona musi posiadać sensowny tytuł, zdefiniowany za
pomocą znacznika TITLE w sekcji HEAD. Tytułem
tym będzie posługiwał się użytkownik, gdy zaznaczy stronę
jako "BookMark" (lub "Ulubione") . Nazwa ta
jest również wyświetlana w górnym pasku większości
przeglądarek. W zwiazku z tym nazwa ta powinna być
bezkontekstowa. Złą nazwą jest "Struktura
organizacyjna". Lepszą jest "Struktura
organizacyjna GDDKiA".
Stosuj ramki z rozwagą.
Pamietaj, że przeglądarka
użytkownika może nie obsługiwać takiej podwitryny. Ramki
narzucają płaską nawigację po podwitrynie. Stosuj je więc
tylko wtedy, gdy podwirtyna jest płaska - nie zawiera
"pod-pod-witryn" oraz nie ma znaczenia kluczowego dla
całej witryny.
Każdy dokument powinien mieć odnośnik typu "mailto:"
na końcu strony z zachęceniem do skomentowania zawartości
strony.
Nie
dziel dokumentu na zbyt dużo stron. Kilkustronicowe
(tzn. rozbite na oddzielne pliki) dokumenty trudno się drukuje,
a wielu użytkowników ma zwyczaj drukowania dłuższych
dokumentów. Każda ze stron jest oddzielnie wczytywana, co
wzmaga przeciażenie sieci. Stosuj raczej wewnętrzne kotwice
("#nazwa") do usprawnienia nawigacji po dokumencie.
Stosuj podział dokumentu na strony wtedy kiedy to ma sens. Na
przykład jeśli sie spodziewasz, że użytkownik bedzie chciał
drukować tylko małą częśc dokumentu.
Używaj znacznika <META> do określenia słów
kluczowych i opisu strony. Informacjami tymi posługuja
się roboty do automatycznej indeksacji stron. Oto przykład
użycia tych znaczników:
<meta
name="keywords" content="roads, poland,
administration, drogi, GDDKiA, PID">
<meta name="description" content="Main page of
the Information Center of the Polish Public Road Administration,
Strona główna Punktu Informacji Drogowej GDDKiA">
Nie twórz stron których rozmiar (bez grafiki)
przekracza 40K. Dłuższe teksty rozbij na mniejsze strony.
Rozważ też możliwość dołączenia dłuższych tekstów w
postaci skompresowanych zbiorów.
Grafika
nieistotna nie powinna zajmować więcej niż 25KB.
Grafika nieistotną nazywamy tę grafikę której usunięcie nie
powoduje utraty informacji. Wiekszośc grafiki jest nieistotna.
W wiekszości przypadków grafika nieistotna nie powinna
przekraczać 10KB
Dobrze zrobiona strona powinna mieć nie więcej niż 5KB grafiki
nieistotnej. Można to osiągnąć jeśli się używa małej
ilości kolorów.
Grafika
istotna nie powinna zajmować więcej niż 100KB.
Grafiką istotną nazywamy grafikę niosącą informację która
powinna zostać wyświetlona na stronie - na przykład mapę,
zdjecie omawianego obiektu, ikonę zjawiska.
Do wyświetlania fotografi używaj formatu JPEG.
Jeśli rysunek zbudowany jest z dużej ilości linii i z małej
ilości kolorów stosuj format GIF. Jeśli masz
wątpliwości którą metodę kompresji stosować, spróbuj
użyć obu metod i wybierz tą która daje lepszą kompresję.
Próbuj odpowiednio dobrać wspólczynnik kompresji Q plików
JPEG.
W przypadku obiektów graficznych o rozmiarach przekraczająych 60KB należy zastosować technikę obrazu alternatywnego ("LOWRESOLUTION") lub przeplotu.
Przy
każdym obiekcie graficznym o rozmiarze przekraczajacym 1KB
podane muszą być jego wymiary (atrybuty WIDTH i HEIGHT
znacznika IMG). Umożliwia to przegladarce szybkie wyświetlenie
tekstu strony i następnie na doładowywanie grafiki.
Zawsze używaj atrybutu ALT do każdego obrazka.
Jeśli twoja strona nie traci na czytelności bez jakiegoś
obrazka, to ALT powinien być pusty (ALT=""). Jeśli
tego nie zrobisz, to przegladarka bez grafiki (lub z wyłączoną
grafiką) wyswietli napis [IMAGE].
Korzystaj z bufora przegladarki użytkownika.
Jeśli ten sam zasób grafczny jest wykorzystany w kilku
miejscach witryny, to nie kopiuj go do różnych katalogów, lecz
posłuż się względnym URL. Jeśli tak zrobisz, to przegladarka
użytkownika bedzie znacznie szybciej ładowała kolejne strony.
Nie korzystaj z map graficznych gdy możesz prosto
zastosować inne rozwiazanie.. Istnieje szereg powodów do
unikania tej techniki. Są one całkowicie nieużyteczne dla
przeglądarek tekstowych. Nowoczene telewizory z obsługa
Internetu ich nie obsługują. Nie obsługują ich roboty i
programy indeksujące. Zamiast map graficznych można rozbić
obraz na oddzielne obrazki. Do właściwego rozmieszczenia
grafiki i tekstu możma zastosować tabelę z niewidocznymi
krawędziami.
Używaj koloru przeźroczystego zawsze, gdy jest to możliwe.
Jedynym przypadkiem gdy obraz ma być prostokatny jest ten, gdy
on rzeczywiście jest prostokątny.
Tło nie powinno być wieksze niż 10K. Jeśli jest wieksze,
wczytuje sie za długo i po wczytaniu nastąpi nieprzyjemne
mignięcie obrazu. Jeśli stosuje się tło, to należy
samodzielnie ustawić wszystkie kolory, nawet jeśli chcemy użyć
kolorów "domyślnych".
Każdy akapit należy zaczynać od znacznika <p> i
kończyć go znacznikiem </p> (mimo iż jest on znacznikiem
opcjonalnym)
Nigdy
nie używaj znacznika <BLINK>. Jest to znacznik
niestandardowy i nawet jeśli będzie prawidłowo wyświetlony to
spowoduje, że reszta strony stanie sie nieczytelna.
Oprócz tego - po wydrukowaniu
strony efekt migotania zanika.
Nigdy nie używaj znacznika <FONT> do zmiany czcionki.
Używaj go tylko do zmiany koloru, lecz lepiej nie rób nawet i
tego.
Używaj znacznika <EM> zamiast <I> oraz
<STRONG> zamiast <B>
Nie uzywaj znacznika <BLOCKQUOTE> do
ustawiania marginesów.
Do specjalnych fragmentów tekstu używaj wyspecjalizowanych
znaczników takich jak <ADDRESS>, <CITE> czy
<DL>. Znacznie lepiej jest przekazywac przegladarce
znaczenie tekstu niż sposób jego wyświetlania.
Stosuj <HR> do podziału tekstu na logiczne jednostki. Nie
zmieniaj grubości ani szerokości linii poziomej - zostaw te
parametry domyślnymi.
Używaj naglówki (<H1>, <H2>, ...) zaczynając od
<H1> w porzadku malejącym. Zasada ta pozwoli przegladarkom
oraz robotom automatycznie zanalizować strukturę dokumentu. Nie
uzywaj nagłówków tylko do wytłuszczania tekstu.
Pisz poprawnie. Publikowanie strony WWW nie różni sie wiele od
pisania artykułu czy też od pisania książki. Oto kilka
zaleceń:
Nie
nadużywaj odnośników. Oko człowieka koncentruje się na
wyróżnionych fragmentach tekstu. Zbyt duża ich ilość
utrudnia rozumienie tekstu. Nie ma potrzeby używania
odnośników przy każdym użyciu specjalistycznego terminu.
Wystarczy to zrobić za pierwszym razem.
Nigdy
nie stosuj frazy "Kliknij tutaj"
na odnośniku. Po pierwsze, nie każdy ma mysz. Po drugie, ten
fragment tekstu nie ma żadnego sensu na wydrukowanej stronie.
Tekst wewnątrz znacznika <A> powinien być pełnym opisem
odnośnika, będącym tak zwięzłym jak tylko jest to możliwe.
Podczas wstępnego przeglądania strony oko koncentruje sie na
wyróżnionych fragmentach tekstu. Jeśli napiszesz "Możesz
przejrzeć aktualne utrudnienia w ruchu drogowym na oddzielnej
stronie", to użytkownik będzie musiał cofnąć
się, aby zrozumieć tekst. Lepszym rozwiazaniem jest:
"Możesz przejrzeć aktualne utrudnienia w
ruchu drogowym na oddzielnej stronie".
Każda strona musi zawierać sekcję
<HEAD> </HEAD> i <BODY> </BODY> oraz
zaczynać się znacznikiem <HTML> i konczyć </HTML>.
Oto pełna struktura strony:
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<meta name="keywords" content=" GDDKiA, .... ">
<meta name="description" content="... ">
<TITLE> .... </TITLE>
</HEAD>
<BODY>
....
</BODY>
</HTML>
Przemyśl dobrze nazwy publikowanych stron (plików). Nazwy po
opublikowaniu ich nie powinny podlegać już żadnym zmianom.
Zaprojektowaną stronę przeglądnij na kilku różnych
przegladarkach (minimum przyzwoitości to MS Internet Explorer
oraz Netscape Navigator). Najlepiej jest posiadać również ich
stare wersje.
Nie
używaj automatycznego odświeżania strony z czasem
odświeżania mniejszym od pięciokrotnego przewidywanego czasu
pełnego ładowania strony na słabym sprzęcie.
Jacek Cichoń
Jeśli masz uwagi, komentarze lub pytania, to napisz do jci@promat.com.pl.