Ci, którzy pracują w branży projektowania stron internetowych, porównują rozwój strony front-end do trójnożnego taboretu. Te trzy nogi - trzy warstwy rozwoju sieci - zawierają strukturę, styl i zachowania.
Dlaczego warto oddzielać warstwy?
Podczas tworzenia strony internetowej, jej struktura powinna zostać relegowana do kodu HTML, stylów wizualnych do CSS i zachowań względem skryptów. Niektóre zalety oddzielania warstw to:
- Współużytkowane zasoby: Podczas pisania zewnętrznego pliku CSS lub JavaScript dowolna strona w witrynie może korzystać z tego pliku. Jeśli chcesz dokonać zmiany w tym pliku, może zaktualizować niektóre style typograficzne w witrynie, każda strona korzystająca z tego arkusza stylów otrzyma zmianę. Nie ma potrzeby indywidualnej edycji każdej strony serwisu, co może być wyczerpującym przedsięwzięciem dla dużej strony internetowej.
- Szybsze pobieranie: Po pobraniu skryptu lub arkusza stylów przez klienta po raz pierwszy jest on buforowany przez przeglądarkę internetową. Ponieważ te udostępnione zasoby są teraz zawarte w pamięci podręcznej przeglądarki, inne strony żądane w przeglądarce ładują się szybciej, co poprawia ogólną szybkość i wydajność strony.
- Drużyny wieloosobowe: Jeśli masz więcej niż jedną osobę pracującą na stronie internetowej jednocześnie, możesz użyć systemów, które pozwalają na sprawdzanie i usuwanie plików, aby zapewnić, że wszyscy pracują z najnowszymi wersjami. Jest to znacznie trudniejsze, jeśli style i zachowania są powiązane z dokumentami struktury.
- SEO: Witryna, która ma wyraźne oddzielenie stylu i struktury, może lepiej działać w wyszukiwarkach, ponieważ może skuteczniej indeksować treści i zrozumieć stronę, nie zawracając sobie głowy wizualnymi stylami i zachowaniem.
- Dostępność: Zewnętrzne arkusze stylów i pliki skryptów są bardziej dostępne dla osób i przeglądarek. Oprogramowanie takie jak czytniki ekranu może łatwiej przetwarzać zawartość z warstwy struktury bez zajmowania się stylami, z których i tak nie mogą korzystać.
- Kompatybilność wsteczna: Witryna zaprojektowana z oddzielnymi warstwami programistycznymi jest prawdopodobnie zgodna z poprzednimi wersjami, ponieważ przeglądarki i urządzenia, które nie mogą używać niektórych stylów CSS lub mają wyłączoną obsługę JavaScript, nadal mogą wyświetlać kod HTML. Następnie możesz stopniowo ulepszać swoją witrynę dzięki funkcjom przeglądarek, które je obsługują.
HTML: Warstwa struktury
Struktura lub warstwa treści strony internetowej jest podstawowym kodem HTML tej strony. Tak jak rama domu tworzy mocne fundamenty, na których zbudowana jest reszta domu, solidna podstawa HTML tworzy platformę, na której można stworzyć stronę internetową.
Warstwa struktury to miejsce, w którym przechowujesz całą zawartość, którą klienci chcą przeczytać lub obejrzeć. Struktura HTML może składać się z tekstu i obrazów oraz hiperłączy, które użytkownicy będą używać do poruszania się po witrynie. Jest to zakodowane w HTML5 zgodnym ze standardami i może zawierać tekst, obrazy i multimedia (wideo, audio itp.).
Każdy aspekt zawartości witryny powinien być reprezentowany w warstwie struktury. Dzięki temu klienci, którzy mają wyłączoną obsługę JavaScript, lub którzy nie mogą wyświetlić dostępu CSS do całej witryny, jeśli nie wszystkie jej funkcjonalności.
CSS: Warstwa stylów
Ta warstwa określa, w jaki sposób uporządkowany dokument HTML będzie wyglądał dla odwiedzających witrynę i jest zdefiniowany przez CSS (Cascading Style Sheets). Pliki te zawierają instrukcje stylistyczne dotyczące sposobu wyświetlania dokumentu w przeglądarce internetowej. Warstwa stylu zwykle zawiera zapytania o media, które zmieniają ekran witryny na podstawie rozmiaru ekranu i urządzenia.
Wszystkie style wizualne witryny powinny znajdować się w zewnętrznym arkuszu stylów. Możesz użyć wielu arkuszy stylów, ale pamiętaj, że każdy plik CSS wymaga żądania HTTP, aby je pobrać, wpływając na wydajność witryny.
JavaScript: The Behavior Layer
Warstwa zachowania sprawia, że witryna jest interaktywna, co pozwala stronie reagować na działania użytkowników lub zmieniać ją w zależności od zestawu warunków. JavaScript jest najczęściej używanym językiem warstwy zachowania, ale CGI i PHP są również bardzo często używane.
Kiedy deweloperzy odwołują się do warstwy zachowania, większość z nich oznacza warstwę aktywowaną bezpośrednio w przeglądarce. Ta warstwa służy do bezpośredniej interakcji z DOM (Document Object Model). Zapisywanie prawidłowego HTML w warstwie treści jest ważne dla interakcji DOM w warstwie zachowania. Podczas budowania warstwy zachowania należy używać zewnętrznych plików skryptów, tak jak w przypadku CSS, w celu optymalizacji szybkości i wydajności.
