#7 Widżety HTML

Zobacz więcej...

Widżety HTML i ramki - wprowadzenie

Ramki HTML umożliwiają stworzenie strony WWW podzielonej na kilka okienek. Ramka to dodatkowe okienko, które często posiada własne suwaki do przewijania zawartości, a jest umieszczone bezpośrednio na stronie, wyświetlając inną stronę - można to określić jako "strona w stronie". W jednym dokumencie HTML można osadzić wiele takich okienek. Należy jednak pamiętać, że każde okienko wczytuje pełną stronę wraz ze wszystkimi multimediami, co może prowadzić do bardzo długiego czasu ładowania dokumentu, jeśli ramek jest zbyt wiele.

Zastosowanie ramek i widżetów

Ramki są szczególnie użyteczne dla twórców różnego rodzaju widżetów (ang. widgets), czyli specjalnych gotowych kodów. Przykładami takich widżetów mogą być filmiki z YouTube’a lub posty z Facebooka czy Twittera. Strony wyświetlane wewnątrz ramek nie przejmują sposobu formatowania (np. koloru, rozmiaru ani kroju czcionki) z dokumentu nadrzędnego, w którym zostały osadzone. Dzięki tej właściwości widżety wyglądają identycznie, niezależnie od strony, na której zostaną osadzone. Właściciele stron natomiast zyskują bezpieczeństwo, ponieważ zewnętrzny widżet nie może nic zmienić poza obrębem ramki, w której jest wyświetlany, co zapobiega "popsuciu" strony.

Widżety można również projektować samodzielnie, zarówno do udostępniania innym, jak i na własny użytek. W standardowym serwisie statycznym menu nawigacyjne musi być powtórzone na każdej podstronie. Jeśli chcemy dodać nowe podstrony, wymaga to mozolnej zmiany menu w każdym istniejącym dokumencie. Aby wyeliminować tę niedogodność, można stworzyć jeden wspólny widżet zawierający odnośniki menu i osadzić go na każdej podstronie. Dotyczy to także innych stałych elementów, takich jak nagłówek (wraz z logotypem) i stopka serwisu.

Ramki lokalne

Element <iframe> służy do osadzania innej strony internetowej wewnątrz bieżącego dokumentu HTML. Ramki lokalne są umieszczane bezpośrednio na stronie w postaci pojedynczych, pływających okienek (ang. inline) o różnych rozmiarach. W ramce lokalnej można wyświetlić tylko całą oryginalną zawartość dokumentu HTML; nie można nic dodać ani zmieniać, np. ustawić innego koloru tła. Nie ma możliwości wybrania tylko fragmentu z innego dokumentu HTML do wyświetlenia w ramce.

Podstawowa składnia <iframe>

<iframe src="lokalizacja"><a href="lokalizacja">Tekst alternatywny</a></iframe>

• "lokalizacja" to adres strony lub lokalizacja na dysku, która ma zostać wczytana do ramki.
• "Tekst alternatywny" jest wyświetlany tylko w przeglądarkach, które nie obsługują ramek lokalnych.
• Między znacznikiem otwierającym <iframe...> a zamykającym </iframe> można umieścić dowolny kod, który wyświetli się w przypadku, gdy przeglądarka nie obsługuje ramek lokalnych. Najprościej jest podać odsyłacz do tej samej strony, którą wczytujemy do ramki.
• Jeśli nie określi się koloru tła dokumentu wczytywanego, przeglądarka może przyjąć kolor tła strony, na której wstawiono ramkę.

Określanie rozmiaru ramki <iframe width height>

<iframe src="lokalizacja" width="x" height="y">...</iframe>

lub

<iframe src="lokalizacja" width="x%" height="y%">...</iframe>

• "x" to szerokość w pikselach, a "y" to wysokość w pikselach.
• "x%" oznacza szerokość w procentach całego ekranu (lub elementu nadrzędnego), a "y%" oznacza wysokość w procentach.
• Jeśli zawartość ramki przekroczy jej rozmiary, przeglądarka wyświetli suwaki do przewijania treści.

Wczytywanie strony do ramki lokalnej

Aby strony z menu wczytywały się do ramki umieszczonej w treści, używa się odsyłacza z dodatkowym atrybutem target="...".

<a target="cel" href="lokalizacja">opis</a>

• Atrybut target pozwala wczytać stronę do wybranej ramki, innej niż ta, w której znajduje się odnośnik.
• Dzięki temu treść w ramce może zmieniać się po załadowaniu strony.
• Wartością atrybutu target="..." powinna być nazwa ramki nadana w znaczniku <iframe> (atrybut name="...").
• Jeśli strona ma zostać wczytana do tej samej ramki, w której znajduje się odsyłacz, można pominąć atrybut target="...".
• Podanie nazwy nieistniejącej ramki spowoduje otwarcie nowej karty w przeglądarce.

Polecenia specjalne atrybutu target

• "_self": strona zostanie załadowana do bieżącej ramki (domyślnie).
• "_top": strona zostanie wczytana w miejsce głównego dokumentu w hierarchii, zmieniając adres w pasku przeglądarki.
• "_parent": strona zostanie wczytana w miejsce nadrzędnego dokumentu w hierarchii. Różnice między _top a _parent są widoczne przy większej liczbie zagnieżdżonych ramek (strona w stronie w stronie).
• "_blank": strona zostanie załadowana w nowej karcie przeglądarki.

Wczytanie stron do dwóch ramek jednocześnie

Za pomocą pojedynczego odsyłacza można wczytać nową stronę tylko do jednej ramki. Aby zmienić zawartość dwóch (lub więcej) ramek po kliknięciu odnośnika, należy użyć kodu JavaScript:

<a href="javascript:void(0)" onclick="parent.nazwaramki1.location.href = 'adres1.html'; parent.nazwaramki2.location.href = 'adres2.html'; return false">...</a>

• "nazwaramki1" i "nazwaramki2" to wartości atrybutów name="..." nadane znacznikom <iframe>.
• W niektórych przypadkach zamiast parent.nazwaramki trzeba użyć top.nazwaramki albo self.nazwaramki.
• Możliwe jest załadowanie więcej niż dwóch ramek poprzez dodanie kolejnych poleceń parent.nazwaramki.location.href = 'adres.html' oddzielonych średnikami (";").

Ostrzeżenie przed ramką

Sytuacja, w której użytkownik wczytuje stronę wchodzącą w skład struktury ramek bezpośrednio (np. poprzez wyszukiwarkę), bez strony startowej, powoduje, że strona wydaje się niekompletna (bez menu czy spisu treści). Aby zapobiec takim sytuacjom, możemy poinformować użytkownika, że spis treści znajduje się na innej stronie.

Wyświetlenie ostrzeżenia z odsyłaczem

Należy wstawić kod JavaScript bezpośrednio po znaczniku otwierającym BODY:

<script>if (self == parent) document.write('<div align="center"><b>UWAGA!</b> To jest tylko ramka - wróć do <a href="index.html"><b>STRONY GŁÓWNEJ</b></a></div><hr><br><br>');</script>

Jeśli strona zostanie wczytana poza ramkami, wyświetli się tekst z odsyłaczem do strony głównej (index.html). Przy poprawnym załadowaniu w ramce tekst się nie pojawi.

Automatyczne przekierowanie

Możliwe jest automatyczne przekierowanie użytkownika do strony głównej, jeśli dokument wczyta się poza ramką. Kod należy wkleić w treści nagłówkowej (w ramach <head>) dokumentu, który powinien wyświetlać się tylko w ramce:

<script>if (self == parent) location.href = "index.html";</script>

Szablon strony bez ramek (PHP/SSI)

W przypadku serwisów składających się z wielu podstron, powtarzające się elementy (nagłówek, menu, stopka) muszą być wstawione w każdym pliku. Ramki lokalne (<iframe>) mogłyby być teoretycznym rozwiązaniem, ale mają poważną wadę: w przypadku wczytywania podstron do ramki na pasku adresu wyświetla się cały czas ten sam adres. To powoduje problemy z dodawaniem podstron do ulubionych, przekazywaniem adresów oraz odświeżaniem, które zawsze prowadzi do strony głównej.

Alternatywą bez tych wad jest wydzielenie powtarzających się fragmentów strony (nagłówka i stopki szablonu) i zapisanie ich w osobnych plikach. Wprowadzenie zmian w powtarzających się elementach wymaga modyfikacji tylko jednego lub dwóch plików, a zmiany są widoczne na wszystkich podstronach. To rozwiązanie wymaga użycia języków skryptowych obsługiwanych po stronie serwera, np. PHP lub SSI. Obsługa tych skryptów wymaga specjalnej konfiguracji serwera WWW.

Szablon PHP (PHP Hypertext Preprocessor)

• Wszystkie pliki podstron serwisu muszą mieć rozszerzenie *.php (np. podstrona.php). Plik strony głównej musi nazywać się index.php.
• Nagłówek szablonu (np. head.php) oraz stopka (np. foot.php) są zapisywane w osobnych plikach i umieszczane w katalogu głównym konta WWW.
• Z nagłówka szablonu należy wyciąć elementy, które powinny być różne na każdej podstronie (np. znacznik <title>...</title>) i zastąpić je specjalnym kodem <?php include $_SERVER['SCRIPT_FILENAME'].'.html'; ?>.
• Każdy plik podstrony musi mieć następującą postać, wstawiając odwołanie do nagłówka i stopki:
  <?php include $_SERVER['DOCUMENT_ROOT'].'/head.php'; ?> Właściwa zawartość strony... <?php include $_SERVER['DOCUMENT_ROOT'].'/foot.php'; ?>
• Ponieważ element <title> jest różny na każdej podstronie, każdy dokument (np. podstrona.php) musi posiadać odpowiadający sobie plik z kodem nagłówkowym (np. podstrona.php.html) zawierający np. <title>Tytuł strony</title>.

Szablon SSI (Server Side Includes)

• Szablon SSI tworzy się analogicznie jak PHP, różnice dotyczą głównie rozszerzeń plików i poleceń dołączających.
• Wszystkie pliki podstron muszą mieć rozszerzenie *.shtml (np. podstrona.shtml). Plik strony głównej musi nazywać się index.shtml.
• Nagłówek szablonu (np. head.shtml) i stopka (np. foot.shtml) są umieszczane w katalogu głównym.
• Plik nagłówka head.shtml musi zawierać specjalny komentarz do dołączania różniącego się kodu nagłówkowego (np. tytułu):
  <!--#include virtual="${SCRIPT_NAME}.html" -->
• Każdy plik podstrony (np. podstrona.shtml) musi zawierać polecenia dołączające nagłówek i stopkę:
  <!--#include virtual="/head.shtml" --> Właściwa zawartość strony... <!--#include virtual="/foot.shtml" -->
• Podobnie jak w PHP, każdy dokument (np. podstrona.shtml) musi posiadać plik z różniącym się kodem nagłówkowym, nazwany identycznie z przyrostkiem .html (np. podstrona.shtml.html).