Przegląd podstawowych technologii internetowych

Podstawowe technologie webowe - logotypy

Świat technologii webowych od wielu lat nieustannie i dynamicznie się rozwija. Każdego dnia powstają nowe możliwości, nowe frameworki a niektóre z rozwiązań z czasem odchodzą do lamusa i tracą na znaczeniu. Jednak istnieją technologie podstawowe, które na stałe zagościły w sieci Internet i obecny świat technologii webowych nie mógłby istnieć czy funkcjonować a szansa na ich odejście w niebyt jest niska. W tym wpisie przedstawiam 5 podstawowych technologii, które można spotkać na prawie każdej stronie internetowej z czego dwie pierwsze są do ich istnienia właściwie niezbędne.

Co znajdziesz w tym wpisie?

Język HTML – narzędzie prezentacji treści

Najbardziej rozpowszechnioną i chyba najważniejszą technologią webową jest język HTML. Wbrew niektórym opiniom i i może mylącej nazwie język HTML nie jest językiem programowania a językiem znaczników! Co to oznacza i jaka jest różnica? Otóż język HTML służy przede wszystkim do prezentacji treści i jej usystematyzowania a nie do jej generowania.

Wykres popularności wyszukiwania hasła HTML w Google Trends
Popularność frazy HTML w wyszukiwarce na przestrzeni 15 lat według Google Trends

Oznacza to, że za pomocą HTML można w bardzo uporządkowany sposób przedstawić treść wywołanej strony internetowej i to on sam w sobie odpowiada w dużej mierze jak ona (treść) jest odbierana wizualnie przez użytkowników. Ten język w swojej konstrukcji opiera się na kontenerach zawierających się jeden w drugim. Czyli w wielkim pudełku, które roboczo można nazwać Dokument HTML, umieszczone są dwa mniejsze o nazwach HEAD oraz BODY.

W pierwszym z nich (head) umieszcza się informacje ogólne na temat zawartości, na przykład nazwę dokumentu (tak jakby pojedyncza teczka albo raport posiadał swój tytuł).

Natomiast w drugim (body) prezentowana jest rzeczywista treść danego dokumentu, na przykład treść wypracowania czy zawartość jakiegoś raportu.

Oczywiście jest to spore uproszenie, niemniej język HTML jest zbiorem odnoszących się do siebie pudełek (taki zbiór można opisać za pomocą grafu jakim jest drzewo DOM) i może on schematycznie wyglądać na przykład tak:

<html>

<head>

<title>Nazwa istotnego raportu</title>

</head>

<body>

Bla bla bla.

Inne istotne bla bla bla, bo …

bla bla bla.

</body>

</html>

Natomiast samą treść, która ma się znaleźć w takim dokumencie jest generowana i pobierana przez języki programowania a za prezentację wizualną raportu odpowiada CSS.

CSS – sposób na upiększanie treści

CSS czyli Kaskadowe Arkusze Stylów to język, który powstał trochę później niż HTML. Jego podstawowym zadaniem było i nadal jest odseparowanie struktury dokumentu od jego sposobu prezentacji.

Wykres popularności wyszukiwania hasła CSS w Google Trends
Popularność frazy CSS w wyszukiwarce na przestrzeni 15 lat według Google Trends

To za pomocą CSS obecnie nadaje się wielkość fontów, kolor poszczególnych elementów, marginesy, czy nawet położenie elementów pomiędzy sobą na stronie. To trochę tak, jakby tworzyć dokument (na przykład wniosek o wydanie dowodu osobistego) za pomocą czystego tekstu bez żadnych ozdobników a następnie za pomocą osobnego pliku CSS opisywać, które fragmenty mają być zmodyfikowane wizualnie – pogrubione, które podkreślone a jakie napisane większą czcionką.

Taki zabieg pozwala na jedną podstawową rzeczy. W momencie gdy wygląd dokumentu (niech będzie to wciąż wniosek o dowód) będziemy chcieli lub zmuszeni ustawami zmienić to nie musimy tworzyć go od nowa i ingerować w kod (tak jakby korektorem dokonywać zmian) a wystarczy podmienić osobny plik opisujący jak ma dany dokument wyglądać. Wygodne prawda? (szkoda, że tak nie ma w rzeczywistości biurokracyjnej)

SQL – pobieranie zawartości z baz danych

SQL to w uproszczeniu język zapytań do obsługi baz danych. Za jego pomocą można z bazy danych pobierać informacje, które mają się wyświetlić na stronie. Dzięki nim przy pomocy odpowiedniego języka programowania można te dane umieścić w strukturze kodu HTML a następnie za pomocą CSS’a nadać stronie odpowiedni wygląd i formatowanie.

Wykres popularności wyszukiwania hasła SQL w Google Trends
Popularność frazy SQL w wyszukiwarce na przestrzeni 15 lat według Google Trends

Brzmi zawile i zastanawiasz się czemu to wszystko jest robione na raty? Powróćmy do przykładu wniosku o dowód. Mając dostęp do bazy danych mógłbyś cały dokument i wszystkie stosowne rubryczki wypełnić właściwie automatycznie (w sumie to się robi, bo ludzi mózg jest swego rodzaju bazą danych). W przypadku jednego dokumentu nie widać wielkiego zysku, ale jak jeszcze wypełnisz za pomocą tak pobranych danych PIT, wniosek o urlop, wniosek o zapomogę losową i tak dalej to korzyści klarują się same.

Zaletę tego rozwiązania widać gdy zmienią się dane dodawane do dokumentów. Dzięki automatycznemu pobieraniu ich z bazy danych, gdy zmienisz adres zamieszkania, zostanie on podmieniony we wszystkich dokumentach jednocześnie! (w rzeczywistym świecie trzeba napisać osobne wnioski). Reasumując: SQL pobiera z bazy danych informacje, które mają być wstawione na stronie.

XML – usystematyzowana koperta z danymi

Język XML czyli w wolnym tłumaczeniu Rozszerzalny Język Znaczników tak jak nazwa wskazuje ma bardzo wiele wspólnego z językiem HTML. Zarówno XML i HTML oparte są na jednym przodku i wykorzystują znaczniki do magazynowania, systematyzowania i porządkowania danych.

Wykres popularności wyszukiwania hasła XML w Google Trends
Popularność frazy XML w wyszukiwarce na przestrzeni 15 lat według Google Trends

Zasadnicza różnica polega na tym, że najważniejszym celem HTML jest wizualna prezentacja danych a XML służy do przechowywania danych wraz z odniesieniem do tego co opisują oraz ich przesyłaniem.

Za jego pomocą można pobrać dane z zewnętrznego źródła a dzięki utrzymaniu standardu XML nie ma większego znaczenia w jakim środowisku będzie pracować system, z którego są pobierane dane. Oznacza to, że jeśli chcielibyśmy wyświetlać na stronie notowania giełdowe udostępnione przez inny serwis to jeśli zostaną ode udostępnione w formacie XML to możemy bezproblemowo je przetwarzać i na przykład wyświetlać na naszej stornie. Oczywiście te dane trzeba pobrać przy pomocy odpowiedniego języka programowania ale to już osobna historia. Istotne jest to, że nie ma znaczenia w jakich językach czy technologiach zostały napisane strony wymieniające dane.

XML a SEO

Znaczącym zastosowaniem technologii XML w świecie SEO zwłaszcza dla dużych stron są mapy witryn XML (tak zwane sitemap.xml). Zwyczajowo w pliku na nazwie sitemap.xml osadzonym w katalogu głównym (na przykład twojaulubionastrona.pl/sitemap.xml) umieszcza się w usystematyzowany sposób podstrony danego serwisu. Jest to pomocne między innymi dla robotów odpowiedzialnych za algorytmy Google w tym przede wszystkim Googlebota w trafianiu na podstrony bardziej schowane w strukturze strony (do których trudniej dotrzeć). Dzięki udostępnieniu mapy witryny w ten sposób jest szansa, że robot będzie częściej odwiedzał poszczególne podstrony witryny i indeksował je w wyszukiwarce.

JSON – sposób na szybki opis pobieranych danych

JSON czyli Javascript Object Notation tak samo jak XML służy do przesyłania danych. Co prawda XML jest bardziej niezależny od technologii niż JSON, jednak obecnie praktycznie w każdym języku można w dość łatwy sposób posługiwać się JSON’em.

Wykres popularności wyszukiwania hasła JSON w Google Trends
Popularność frazy JSON w wyszukiwarce na przestrzeni 15 lat według Google Trends

Różnica pomiędzy nimi tkwi w rozmiarze przesyłanych danych i ich formacie. JSON przesyła dane w formie tekstowej a nie znaczników jak XML. Oznacza to, że każda paczka danych opisana JSON’em jest lżejsza niż ta opisana XML.

Ponieważ JSON bazuje na języku JavaScript występującym obecnie na każdej stronie internetowej jego obsługa zwłaszcza w obrębie jednej witryny jest też dużo łatwiejsza zwłaszcza w połączeniu z technologią AJAX (asynchroniczne pobieranie danych bez przeładowania dokumentu).

Mimo to, że wiele argumentów przemawia za JSON’em to XML sprawuje się bardzo dobrze w dużych aplikacjach i przy przesyłaniu dużych porcji danych, zwłaszcza gdy ten sposób może z czasem się zmieniać (można powiedzieć, że XML jest bardziej korpo).

JSON a SEO

Najpopularniejszym zastosowaniem JSON’a w SEO są dane strukturalne. Te instrukcje, czy też dodatkowe opisy strony specjalnie przygotowane dla robotów, aby lepiej rozumiały co jest na stronie można implementować na kilka sposobów. Jednym z nich jest dodawanie atrybutów do elementów HTML. Jednak, aby rozgraniczać warstwy prezentacji i danych od siebie i nie tworzyć dodatkowych problemów, gdy zajdzie potrzeba przebudowy kodu HTML można zastosować format JSON-LD. Za jego pomocą można do danej podstrony wstrzyknąć / wkleić kawałek kodu niezależny od reszty i tyle.

Podsumowanie – czyli czy to wszystkie technologie webowe?

Wykorzystanie przedstawionych technologii webowych wystarcza do stworzenia prostych stron internetowych a właściwie dwie pierwsze HTML i CSS. Jednak świat stron internetowych jest dużo bardziej obfity w narzędzia i oprócz technologii dotyczących samego sposobu przesyłania danych czy działania sieci WWW (jak na przykład obsługa protokołów) potrzebne jest wykorzystanie języków programowania, które w tym artykule nie zostały w ogóle uwzględnione.

Jednak webowe języki programowania wykorzystywane na stronach internetowych to zupełnie inna historia. Istotą tego wpisu było pokazanie, że Internet na dzień obecny przynajmniej w teorii nie jest uzależniony w 100% od jednego języka programowania i właściwie można wybrać go dowolnie.

Czy nie jest to piękna kwintesencja wolnego (przynajmniej w swoich założeniach) Internetu?

Może Ci się również spodoba

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *