Ostrożnie z ramkami
Mechanizm ramek (FRAMESET) narzuca się jako najlepsze rozwiązanie, gdy chcemy nadać serwisowi WWW stały układ (np. menu z lewej, inne menu u góry, treść pośrodku, jakaś stopka u dołu). Kuszące, jednak ... ramek należy unikać. Poniżej omawiam kilka problemów, które sprawiają ramki i podaję alternatywny sposób na uzyskanie takiego samego efektu wizualnego.
Problemy
Zacznijmy od powodów, dla których ramek nie należy używać.
Ramki nie pozwalają na sensowną adresację
Strony zbudowane przy pomocy ramek nie mają naturalnej adresacji. Powiedzmy, że nasz serwis WWW zbudowany jest z dwóch ramek - menu z lewej i treści z prawej. Główna strona wyświetla tę konfigurację, potem nawigacja następuje przez zmianę treści prawego okna. Działa. Niestety, oprócz głównej strony, wszystkie pozostałe nie mają swojego adresu!
Co ma zrobić biedny użytkownik, który znalazł gdzieś w głębi naszego serwisu interesującą stronę o jednym z produktów i chce ją zabookmarkować (czy też dodać do Ulubionych)? Zabookmarkować główną stronę? Ale on tego nie chce! Zabookmarkować samą wewnętrzną? Działa, ale po powrocie nie będzie miał możliwości przejścia do głównej strony serwisu!
A co zrobimy, chcąc podesłać klientowi należący do naszego serwisu URL na temat, który go interesuje? Podeślemy instrukcję: proszę otworzyć www.naszafirma.pl a następnie kliknąć Produkty, wybrać Oprogramowanie, wybrać ...?
Ten sam problem występuje, gdy chcemy jedną z wewnętrznych stron serwisu - a nie jego główną stronę - zgłosić do któregoś z ręcznie organizowanych serwisów wyszukiwawczych. Przykładowo, jak mógłbym zgłosić www.softax.com.pl/public/artykul_callcentre do www.interia.pl gdyby artykuł był zagnieżdżony w jakiejś ramce? Mógłbym oczywiście zgłosić samą stronę z treścią ale wówczas czytelnik trafi, przeczyta i nawet nie będzie wiedział w ramach czyjego serwisu było to udostępnione.
Ramki nie współdziałają z wyszukiwarkami
Przez pewien czas www.softax.com.pl było zrobione przy pomocy ramek. Efekt? Wpisanie hasła Softax w infoseeku owocowało następującą odpowiedzią (mniej więcej, cytuję z pamięci):
www.softax.com.pl
Ta przeglądarka nie obsługuje ramek. Serwis wymaga oglądania przy pomocy ...
To nie koniec problemów. Nadal mamy problemy z adresacją. Przy pewnym wysiłku zmusimy infoseek czy altavistę do zaindeksowania wewnętrznych stron serwisu (na głównej mamy parę słów więc przez wyszukiwarkę nikt na nią nie trafi). Tyle, że użytkownicy, którzy je znajdą, będą trafiali w samą wewnętrzną stronę. Zobaczą wyłącznie jej treść, bez naszego wspaniałego menu, często też bez możliwości przejścia na inne strony serwisu.
Ramki się nie odświeżają
Po parunastu minutach poszukiwań użytkownik znalazł w głębi oramkowanego serwisu interesującą go stronę. Niestety, użył kółka w myszce do jej przewinięcia i netscape co nieco ją zamazało. Klika więc Reload. Ląduje na głównej stronie serwisu i zirytowany rezygnuje.
Co więcej, przeglądarka może odświeżyć stronę także bez żądania użytkownika. Netscape robi to niekiedy przy zmianie rozmiaru okna przeglądarki. Znalazłem ciekawą stronę, chcę ją obejrzeć dokładniej, powiększam okienko, ...
Ramki umieją załadować się częściowo
Może się nam przydarzyć, że niektóre ramki się załadują a inne nie. Wynik nie wygląda zbyt ciekawie.
W tym wypadku mogę zaprezentować autentyczny interesujący zrzut ekranu z jednego z polskich systemów bankowości internetowej. Ponieważ obrazek jest duży, znajduje się na osobnej stronie.
Ramki psują wydajność
Załadowanie tej samej treści w ramach jednej strony nie jest tym samym, co załadowanie jej w 10 kawałkach rozrzuconych po 10 ramkach. Dla każdej ramki musi zostać zrealizowane osobne zlecenie HTTP. Sprawia to problemy tak po stronie klienta (np. starsze wersje Internet Explorera odpalały osobne wątki do ściągania każdej ramki zajmując pamięć), jak po stronie serwera (jeden klient może - zwłaszcza gdy korzysta z wolnego łącza - 'zapchać' 10 procesów serwera WWW).
Co zamiast
Tabelki
Układ strony identyczny jak zapewniany przez ramki może nam zagwarantować wykorzystanie tabelek. Przykładem jest (o ile nie zmieniłem jej od czasu spisywania tej porady) strona, którą właśnie czytasz. Nie ma tu żadnych ramek! Cała treść jest zorganizowana w oparciu o jedną tabelę, w której:
- pierwszy wiersz zawiera pustą komórkę z brązowym tłem a w ramach drugiej komórki podtabelkę z górnym menu;
- środkowy wiersz w lewej komórce zawiera podtabelkę z przyciskami nawigacyjnymi a w prawej komórce właściwą treść strony;
- dolny wiersz to w lewej komórce logo 'Powered by' a w prawej losowana sygnaturka.
Do głównej tabelki nie należy jedynie końcówka strony, z informacjami o moim autorstwie i datą ostatniej zmiany.
Z tabelkami wiążą się też dwa problemy:
- redundancja treści - np. na każdej stronie musimy skopiować ten sam fragment HTML z menu (o rozwiązaniu tego problemu piszę niżej);
- pewne spowolnienie ładowania strony - przeglądarka wyświetla tabelkę dopiero po załadowaniu całej jej treści.
Drugi problem nie jest szczególnie istotny przy stronach, na których dominuje tekst. A strony graficzne zazwyczaj wyglądają kiepsko załadowane do połowy, kto wie czy nie lepiej że są wyświetlane dopiero w całości.
Dynamiczne składanie stron
Popularność ramek wzięła się między innymi z zdrowej i godnej pochwały niechęci autorów serwisów WWW do powtarzania na każdej stronie tego samego kodu HTML odpowiadajacego np. za menu nawigacyjne, standardową główkę lub stopkę strony. Jeśli będziemy to wpisywać na każdej stronie, dodanie nowego przycisku do menu staje się szybko koszmarem! Z tym, że ramki nie są dobrym rozwiązaniem. Działają z niewłaściwej strony - u klienta. A poprawnym miejscem jest serwer.
Dobrym rozwiązaniem problemu jest wykorzystanie dowolnej metody dynamicznego generowania stron WWW. Serwis, który oglądasz, oparty jest o Zope, co nie tylko pozwoliło mi jeden jedyny raz napisać kod górnego i bocznego menu i automatycznie dołączać je do wszystkich stron ale także umożliwiło mi nadanie serwisowi pewnej dynamiki. U dołu strony pokazują się losowane cytaty, lista nowości automatycznie się dostosowuje po dodaniu nowej notki, podobnie działają poszczególne listy porad. Działa wyszukiwarka. Banner wyświetlany u dołu strony prezentowany jest z pewnym prawdopodobieństwem a docelowo będzie losowany z wielu możliwości - i nie muszę robić w tym celu łamańców z przezroczystymi GIF-ami 1x1.
Zope, to tylko jedno z wielu narzędzi - równie dobrze można się posłużyć PHP, HTMLperl-em, Masonem, Blade, Sun Java Server Pages (istnieją darmowe implementacje, np. Jakarta), Microsoft Active Server Pages (jak większość dobrych produktów Microsoftu, jest to produkt innej firmy, która została przez MS wykupiona) czy jeszcze innym z co najmniej kilkudziesięciu, w większości darmowych narzędzi obsługujących dynamiczne generowanie stron WWW (zachęcam do wizyty na freshmeat.net). Fakt, że produkty open-source wymieniłem przed komercyjnymi (JSP, ASP) nie jest przypadkowy. Mają lepszy support i są rozwijane w oparciu o faktyczne potrzeby a nie uwarunkowania marketingowe!
Gdy dynamiczne strony nie wchodzą w grę
Jeśli korzystamy z serwera, na którym nie mamy możliwości korzystania z żadnego z powyższych mechanizmów, możemy osiągnąć częściowy efekt po prostu generując ostateczne strony HTML jednorazowo na maszynie developerskiej i umieszczając tak opracowany wynik na serwerze dostawcy usług internetowych. Żegnamy w ten sposób dynamiczne liczniki, losowane części strony, formularze z pytaniami do użytkownika itp ale nadal możemy uniknąć ręcznego kopiowania tych samych fragmentów HTML w wiele miejsc.
Niektóre z mechanizmów dynamicznego generowania stron (np. Mason) posiadają wbudowaną możliwość wygenerowania 'statycznego obrazu' serwisu, dla innych stosunkowo łatwo można sobie poradzić "ściągając" własny serwis narzędziem typu wget i korygując w razie potrzeby (np. gdy trzeba zmienić wszystkie rozszerzenia na html) odsyłacze prostym skryptem perlowym.
Można też z góry założyć tego typu scenariusz i radzić sobie prostym skryptem, który odpowiednio pokonkatenuje przygotowane pliki źródłowe obejmujące poszczególne cząstki serwisu. Także w tym wypadku istnieją rozmaite gotowce ułatwiające tego typu działania, z żadnego z nich nie korzystałem więc zachęcam do samodzielnych poszukiwań na freshmeat.net.
komentarze obsługiwane przez Disqus