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.

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 *