Zastanawiałeś lub zastanawiałaś się kiedyś, jakie technologie stoją za działaniem stron internetowych? Jeśli nigdy nie udało Ci się mieć styczności z programowaniem, a w szczególności technologiami webowymi, ten wpis jest dla Ciebie!
Jako „technologie webowe” rozumiemy zazwyczaj języki znaczników, języki programowania, bazy danych, systemy CMS oraz frameworki i inne technologie, które umożliwiają tworzenie stron internetowych, aplikacji, sklepów. Osoby, które się tym zajmują, nazywane są web developerami lub webmasterami.
Front-end i back-end
Wyróżniamy dwa rodzaje technologii webowych. Pierwsze – tak zwane front-endowe – to te, które odpowiedzialne są za wygląd strony internetowej, są na niej widzialne, działają w przeglądarce użytkownika. Do takich technologii zaliczamy m.in. HTML, CSS, JavaScript. Drugi rodzaj technologii webowych – back-endowe – działają na serwerze i służą do przetwarzania danych. Ich działanie jest dla użytkownika zazwyczaj niewidzialne – widoczne są jedynie wprowadzone dane lub akcje wykonane na stronie oraz wynik tych danych lub akcji. Cały proces wykonawczy zachodzi więc poza przeglądarką.
Co to jest serwer?
Serwerem nazywamy urządzenie, które zajmuje się świadczeniem usług na rzecz innych urządzeń. Serwerem może być każdy komputer, ważne jest jednak, by był dobrze zabezpieczony, odpowiednio wydajny i podłączony do sieci komputerowej. Przy tworzeniu stron internetowych korzysta się zazwyczaj z serwerów zewnętrznego dostawcy usług – hostingu, serwerów VPS lub dedykowanych dla naszego projektu.
W jaki sposób działa serwer? W ogromnym uproszczeniu – gdy wpisujesz adres jakiejś strony internetowej, przykładowo www.apricity.pl, Twój komputer, smartfon lub inne urządzenie przesyła do serwera, na której umieszczona jest ta strona, prośbę o jej pobranie. Jeśli komunikacja na linii klient-serwer zostanie nawiązana, serwer prześle kod strony internetowej na Twój komputer. Przeglądarka internetowa przetworzy go, a Ty po chwili zobaczysz w pełni gotową witrynę. Komunikacja między klientem, a serwerem zachodzi także podczas korzystania ze strony internetowej – przykładowo, jeśli wprowadzisz swoje dane i wiadomość w formularzu kontaktowym, zostanie on wysłany od Twojego urządzenia do serwera w celu przetworzenia. Ty natomiast dostaniesz z serwera informację zwrotną w formie, przykładowo, wiadomości „Wysłano!”. Na tym przykładzie widać także rolę omówionych już front-endu i back-endu przy korzystaniu ze stron internetowych.
HTML
Pojęcie znane także wielu osobom, które nie mają z technologiami webowymi nic wspólnego. Ten tak zwany język znaczników (nie język programowania!) służy do tworzenia struktury strony i jej zawartości. Pozwala zadeklarować znajdujące się na niej elementy, a także wprowadzić dane opisujące stronę, takiej jak tytuł. HTML składa się ze znaczników (tagów), kktórych używa się do zamknięcia, opakowania różnych części treści, tak aby wyglądały i działały w określony sposób.
Oczywiście, możliwe jest tworzenie stron internetowych przy wykorzystaniu samego kodu HTML. Niestety, nie pozwoli to na stworzenie naprawdę ładnej (w dzisiejszym internecie to naprawdę ważne!) i funkcjonalnej strony internetowej. W tym celu wykorzystujemy pozostałe technologie webowe.
W celu ułatwienia zrozumienia całości, posłużę się alegorią: HTML mówi: jest kot.
CSS
Czyli Kaskadowe Arkusze Stylów. Umożliwiają one ubranie zadeklarowanych wcześniej poprzez HTML elementów strony w atrakcyjny wygląd. Pozwala także dodać animacje i efekty, oraz – a może przede wszystkim – ułożyć elementy wyświetlane na stronie. Jest to możliwe także z wykorzystaniem HTML-a, ale w bardzo ograniczonym zakresie. Korzystając z niego możemy przykładowo wycentrować element, ale nie uda się nam go jednocześnie wycentrować i umieścić na samym dole witryny – tu właśnie przychodzi CSS, którego możliwości stylowania i organizacji treści są niemalże nieograniczone.
Tak więc do wcześniejszego, HTML-owego, jest kot, dodajemy teraz CSS i wychodzi nam: jest czarny kot z białymi łapkami, który siedzi na kanapie umieszczonej w salonie.
JavaScript
Ten skryptowy język programowania bardzo często mylony jest z innym językiem – Javą – ze względu na zbieżność nazw. Stało się tak nawet w jednym z odcinków Familiady, zupełnie nieprawidłowo. Java służy do pisania programów komputerowych i aplikacji m.in. na system Android. JavaScript natomiast wykorzystywany jest przy budowie stron internetowych. Umożliwia on dodanie do nich dynamicznej zawartości np. małych gier, rozbudowanych animacji, pasków postępu, dynamicznego stylowania (zmiany CSS-u zależnie od okoliczności) odpowiedzi po naciśnięciu przycisku… Podobnie, jak w przypadku poprzedniej technologii, możliwości JavaScript wydają się być ograniczone tylko wyobraźnią twórcy. Język ten stał się w dzisiejszych czasach niezwykle popularny, znaleźć go możemy w kodzie niemalże każdej strony internetowej. Ważne jest jednak, aby nie przesadzać – ciężkie, skomplikowane skrypty skutecznie spowalniają stronę i utrudniają korzystanie z niej.
JavaScript słynie z gigantycznej ilości tzw. frameworków – szkieletów służących do budowy stron i aplikacji internetowych. Inaczej mówiąc, frameworki stanowią wzór, zebranie w jedną całość pewnych powtarzających się zagadnień. Pozwala to uprościć i ustandardyzować budowę pewnych elementów witryn. Do najpopularniejszych należą Angular, Vue oraz React – świat JavaScriptu jest jednak niezwykle dynamiczny, a co chwilę pojawiają się nowe frameworki, które lepiej rozwiązują problemy programistów.
Po dodaniu JavaScriptu to naszego symbolizującego stronę internetową kota mamy więc: jest czarny kot z białymi łapkami, który siedzi na kanapie umieszczonej w salonie. Kot ten obecnie macha ogonem, ale zacznie mruczeć, gdy go pogłaszczesz.
Back-end
O ile na front-endzie wykorzystuje się praktycznie zawsze HTML-a, CSS i JavaScript, tak na back-endzie istnieje znacznie większa wolność wyboru. Najpopularniejszym back-endowym językiem programowania jest dziś PHP, który został stworzony specjalnie w celu wykorzystania na stronach internetowych. Nic nie stoi jednak na przeszkodzie, by wykorzystać inne, znacznie bardziej uniwersalne języki – do popularnych możliwości należą Python, Java, C#, C++. Do back-endu zaliczamy także bazy danych, które pozwalają, jak sama nazwa mówi, przechowywać różnego rodzaju dane. Dane mogą być wprowadzane i odczytywane za pomocą języka zapytać, którym właściwie zawsze jest język SQL. Do zarządzania bazami danych służą specjalne systemy, takie jak MySQL, czy MariaDB. Aby ułatwić zarządzanie danymi stworzono specjalne narzędzia, które pozwalają zaprezentować dane w czytelny, graficzny sposób – przykładowo, phpMyAdmin.
Aby bardziej obrazowo wytłumaczyć działanie technologii back-endowych, musimy niestety porzucić alegorię kota. Wyobraź sobie, że chcesz zalogować się na jakimś forum. Wpisujesz nazwę i hasło i… Co się dzieje? Przesłane na serwer dane są sprawdzane. Napisany w którymś z back-endowych języków programowania skrypt pyta bazę danych, czy taki użytkownik istnieje oraz czy podane hasło jest prawidłowe. Jeśli tak – skrypt pozwala użytkownikowi się zalogować. Jeśli nie – wyświetli informację, że podana nazwa lub hasło są nieprawidłowe.
Skrypt oraz baza danych są niewidoczne dla użytkownika – w przeciwnym wypadku, mógłby on przecież wykraść nazwy i hasła innych użytkowników, którzy założyli konta na danym forum.
CMS
Systemy Zarządzania Treścią służą do ułatwienia tworzenia, aktualizacji oraz publikowania treści w serwisie internetowym. Dzięki prostocie użytkowania i rozbudowanym funkcjom, pozwalają znacznie ułatwić prowadzenie strony internetowej. Jednym z systemów CMS jest oczywiście WordPress – to właśnie jego wykorzystujemy przy budowie naszych stron internetowych. Dlaczego jest naszym zdaniem najlepszy? Dowiesz się tego tutaj.
Podsumowanie
Jak widzisz, budowa strony internetowej oznacza wykorzystanie wielu różnych technologii o odmiennym znaczeniu. Na powyższej liście nie wymieniono oczywiście wszystkich – technologie webowe to niezwykle dynamicznie rozwijająca się dziedzina programowania, za którą niekiedy trudno nadążyć.
Jeśli jesteś zainteresowany lub zainteresowana stworzeniem strony internetowej – od najprostszego bloga, czy strony wizytówki, aż po sklep internetowy – zapoznaj się z naszą ofertą!
