Bezstołowe projektowanie stron internetowych

Beztabelowe projektowanie stron internetowych (lub beztabelowe projektowanie stron internetowych ) to metoda projektowania stron internetowych , która pozwala uniknąć używania tabel HTML do celów kontroli układu strony . Zamiast tabel HTML do rozmieszczania elementów i tekstu na stronie internetowej używane są języki arkuszy stylów, takie jak kaskadowe arkusze stylów (CSS) .

Historia

HTML to język znaczników , którego wizualną prezentację pozostawiono początkowo użytkownikowi. Jednak gdy Internet rozszerzył się ze świata akademickiego i badawczego do głównego nurtu w połowie lat 90. i stał się bardziej zorientowany na media, graficy szukali sposobów kontrolowania wyglądu swoich stron internetowych. Jak spopularyzował zwłaszcza projektant David Siegel w swojej książce Tworzenie zabójczych witryn sieci Web , tabel i odstępników (zwykle przezroczystych jednopikselowych GIF-ów obrazy o wyraźnie określonej szerokości, wysokości lub marginesach) zostały użyte do stworzenia i utrzymania układów stron.

na rynku pojawiły się pierwsze dość wydajne edytory WYSIWYG , co oznaczało, że projektanci stron internetowych nie potrzebowali już technicznej znajomości języka HTML do tworzenia stron internetowych. Tacy redaktorzy pośrednio zachęcali do szerokiego stosowania zagnieżdżonych tabel do pozycjonowania elementów projektu. Gdy projektanci edytowali swoje dokumenty w tych edytorach, do dokumentu dodawany był zbędny kod i puste elementy. Ponadto niewykwalifikowani projektanci prawdopodobnie używali tabel częściej niż jest to wymagane podczas korzystania z edytora WYSIWYG. Ta praktyka często prowadziła do zagnieżdżania wielu tabel w tabelach, a także tabel z niepotrzebnymi wierszami i kolumnami. Korzystanie z edytorów graficznych z narzędziami do krojenia, które bezpośrednio wyświetlają kod HTML i obrazy, również promowało słaby kod z tabelami często mającymi wiele wierszy o wysokości lub szerokości 1 piksela. Czasami do renderowania treści użyto znacznie więcej wierszy kodu niż sama treść.

Poleganie na tabelach do celów układu spowodowało szereg problemów. Wiele stron internetowych zostało zaprojektowanych z tabelami zagnieżdżonymi w tabelach, co skutkowało powstaniem dużych dokumentów HTML, które zużywają więcej przepustowości niż dokumenty o prostszym formatowaniu. Ponadto, gdy układ oparty na tabelach jest linearyzowany, na przykład podczas analizowania przez czytnik ekranu lub wyszukiwarkę, wynikowa kolejność treści może być nieco pomieszana i myląca.

Kaskadowe arkusze stylów (CSS) zostały opracowane w celu poprawy oddzielenia projektu od treści i wrócić do semantycznej organizacji treści w sieci. Termin „projektowanie beztabelowe” oznacza użycie CSS zamiast tabel układu do pozycjonowania elementów HTML na stronie. Tabele HTML nadal mają swoje prawowite miejsce podczas prezentacji informacji tabelarycznych na stronach internetowych, a czasami są nadal używane jako narzędzia układu w sytuacjach których obsługa CSS jest słaba lub problematyczna, jak na przykład wyśrodkowanie elementu w pionie. Innym obszarem, w którym nadal używane są tabele, są programy do obsługi poczty e-mail, ponieważ wielu popularnych klientów poczty e-mail nie nadąża za nowoczesnym renderowaniem HTML i CSS. W takim scenariuszu złożone e- przesyłki pocztowe tracą część swojego strukturalnego i kreatywnego dopasowania.

Przyjęcie

Specyfikacja CSS1 została opublikowana w grudniu 1996 roku przez W3C w celu poprawy dostępności sieci i podkreślenia oddzielenia szczegółów prezentacji w arkuszach stylów od zawartości semantycznej w dokumentach HTML . CSS2 w maju 1998 (później poprawiony w CSS 2.1 i CSS 2.2) rozszerzył CSS1 o funkcje pozycjonowania i układu tabeli.

Preferencja używania tabel HTML zamiast CSS do kontrolowania układu całych stron internetowych wynikała z kilku powodów:

chęć wydawców treści do powielenia istniejących elementów projektu korporacyjnego na ich stronie internetowej;
ograniczenia w czasie obsługi CSS w przeglądarkach;
zainstalowana baza przeglądarek, które nie wspierały CSS;
nieznajomość standardów CSS przez nowych projektantów stron internetowych;
brak wiedzy lub obawy dotyczące powodów (w tym semantyki HTML i dostępności sieci ) do używania CSS zamiast tego, co było postrzegane jako łatwiejszy sposób szybkiego osiągnięcia zamierzonych układów, oraz
nowy rodzaj narzędzi do projektowania stron internetowych WYSIWYG , które zachęcały do tej praktyki.

Punkty zwrotne w przyjmowaniu układów opartych na CSS obejmują kampanię Web Standards Project dotyczącą aktualizacji przeglądarki z lutego 2001 r. oraz jednoczesne przeprojektowanie magazynu A List Apart dotyczącego projektowania stron internetowych , a następnie przeprojektowanie Wired w 2002 r. Witryna internetowa CSS Zen Garden , uruchomiona w 2003 roku, przypisuje się spopularyzowanie układów beztabelowych.

Racjonalne uzasadnienie

Zamierzonym i semantycznym celem tabel HTML jest prezentowanie danych tabelarycznych , a nie układanie stron. Korzyści wynikające z używania CSS do układu strony obejmują lepszą dostępność informacji dla szerszej gamy użytkowników przy użyciu szerokiej gamy programów użytkownika . Istnieją oszczędności przepustowości, ponieważ duża liczba semantycznie bez znaczenia <table> , <tr> i <td> tagi są usuwane z dziesiątek stron, pozostawiając mniej, ale bardziej znaczących nagłówków, akapitów i list. Instrukcje dotyczące układu są przenoszone do arkuszy stylów CSS obejmujących całą witrynę, które można pobrać raz i zapisać w pamięci podręcznej do ponownego wykorzystania, gdy każdy odwiedzający porusza się po witrynie. Witryny mogą stać się łatwiejsze w utrzymaniu, ponieważ cała witryna może zostać zmieniona lub zmieniona w jednym przebiegu, po prostu zmieniając znaczniki określonego CSS, wpływając na każdą stronę, która opiera się na tym arkuszu stylów. Nowa treść HTML może zostać dodana w taki sposób, że istniejące CSS natychmiast zastosuje do niej spójne reguły układu, bez żadnego dodatkowego wysiłku.

Zalety

Dostępność

Ze względu na szybki rozwój Internetu, rozszerzenie ustawodawstwa dotyczącego dyskryminacji ze względu na niepełnosprawność oraz coraz częstsze korzystanie z telefonów komórkowych i urządzeń PDA konieczne jest udostępnienie treści internetowych użytkownikom korzystającym z szerokiej gamy urządzeń poza stosunkowo jednolitym ekosystemem komputerów stacjonarnych i monitorów kineskopowych . sieć po raz pierwszy stała się popularna. Beztabelowe projektowanie stron internetowych znacznie poprawia dostępność sieci pod tym względem, ponieważ tabele zbyt szerokie na ekran muszą być przewijane na boki, aby można je było przeczytać w całości, podczas gdy tekst może się zawijać.

Czytniki ekranu i urządzenia brajlowskie mają mniej problemów z projektami beztabelowymi, ponieważ mają logiczną strukturę. To samo dotyczy robotów indeksujących wyszukiwarek internetowych , agentów programowych, które według większości wydawców witryn internetowych znajdują ich strony, dokładnie je klasyfikują, umożliwiając potencjalnym użytkownikom łatwe ich odnalezienie za pomocą odpowiednich wyszukiwań.

W wyniku rozdzielenia projektu (CSS) i struktury (HTML) możliwe jest również zapewnienie różnych layoutów dla różnych urządzeń, np. handheldów , telefonów komórkowych itp. Możliwe jest również określenie innego arkusza stylów do druku, np. w celu ukrycia lub modyfikacji wyglądu reklam lub elementów nawigacyjnych, które są nieistotne i uciążliwe w drukowanej wersji strony.

Wytyczne dotyczące dostępności treści internetowych W3C nr. 3 stwierdza „używaj znaczników i arkuszy stylów i rób to właściwie”. Punkt kontrolny 3.3 wytycznych, punkt kontrolny o priorytecie 2, mówi: „użyj arkuszy stylów do kontrolowania układu i prezentacji”.

Oszczędność przepustowości

Projekt beztabelowy tworzy strony internetowe z mniejszą liczbą tagów HTML używanych wyłącznie do pozycjonowania treści. Zwykle oznacza to, że same strony stają się mniejsze do pobrania. Filozofia zakłada przeniesienie wszystkich instrukcji dotyczących układu i pozycjonowania do zewnętrznych arkuszy stylów. Zgodnie z podstawowymi możliwościami protokołu HTTP , ponieważ rzadko się one zmieniają i mają wspólne zastosowanie do wielu stron internetowych, zostaną one zapisane w pamięci podręcznej i ponownie wykorzystane po pierwszym pobraniu. To dodatkowo zmniejsza przepustowość i czas pobierania w całej witrynie.

Łatwość konserwacji

Utrzymanie witryny internetowej może wymagać częstych zmian, zarówno małych, jak i dużych, w stylu wizualnym witryny, w zależności od celu witryny. W układzie opartym na tabelach układ jest częścią samego kodu HTML. W związku z tym bez pomocy edytorów wizualnych opartych na szablonach, takich jak edytory HTML , zmiana układu pozycyjnego elementów w całej witrynie może wymagać dużego nakładu pracy, w zależności od liczby wymaganych powtarzalnych zmian. Nawet zastosowanie sed lub podobnych globalnych narzędzi do znajdowania i zastępowania nie może całkowicie rozwiązać problemu.

W układzie beztabelowym wykorzystującym CSS informacje o układzie mogą znajdować się w dokumencie CSS. Ponieważ informacje o układzie mogą być scentralizowane, zmiany te mogą być domyślnie wprowadzane szybko i globalnie. Same pliki HTML mogą nie wymagać dostosowywania podczas wprowadzania zmian w układzie.

Ponadto, ponieważ informacje o układzie mogą być przechowywane poza kodem HTML, dodanie nowej treści w projekcie beztabelowym może być dość łatwe, niezależnie od tego, czy modyfikuje istniejącą stronę, czy dodaje nową stronę. Z kolei bez takiego projektu układ każdej strony może wymagać bardziej czasochłonnej ręcznej zmiany każdej instancji lub użycia globalnych narzędzi do znajdowania i zastępowania. Jednak właściciele witryn często chcą, aby poszczególne strony różniły się od innych w witrynie przez krótki lub długi czas. Często będzie to wymagało opracowania oddzielnego arkusza stylów dla tej strony. Zawartość strony (lub szablonu) zwykle może jednak pozostać niezmieniona, co nie ma miejsca w przypadku projektu opartego na tabelach.

Zobacz też

Linki zewnętrzne

Układ beztabelowy W3C HOWTO
13 powodów, dla których CSS jest lepszy od tabel w projektowaniu stron internetowych
Otwarte projekty (zbiór beztabelowych szablonów internetowych zgodnych z W3C)