Programowanie webowe | 00. Technologie tworzenia witryn

Front-end: HTML, CSS, JavaScript

Mirosław Zelent

Mianem front-endu określa się technologie webowe, których kody źródłowe wykonywane są przez procesor po stronie klienta (czyli w praktyce przez przeglądarkę internetową lokalnego komputera). Jako że pliki te muszą na nasz lokalny komputer trafić z serwera przed ich wykonaniem, to rzecz jasna do tych kodów można zupełnie otwarcie zajrzeć – są one, jak to mówimy: jawne. Do front-endowych technologii zaliczymy przede wszystkim: HTML, CSS i JavaScript. Przy czym przeznaczenie każdej z tych front-endowych  technologii webowych jest nieco inne.

HTML

Jest to język opisowy, w którym przy pomocy znaczników (tagów) określamy co zawiera dana podstrona – mogą to być hiperłącza, obrazki, pola edycyjne, przyciski, tabele, listy numerowane, pojemniki na zawartość, akapity tekstu, nagłówki itd. Przykładowe elementy zdefiniowane na stronie głównej Facebooka przedstawiono na ilustracji poniżej, wraz z zaznaczeniem jak wygląda znacznik generujący konkretny komponent witryny w kodzie źródłowym:

Nie przejmuj się, jeżeli nie rozpoznajesz jeszcze poszczególnych znaczników – przyjdzie na to pora już niebawem! Oprócz zawartości strony, w HTML określamy także istotne parametry witryny – tytuł i opis w rezultatach wyszukiwania Google, język i zestaw znaków właściwy dla danego kraju (u nas poprawnie należy zakodować polskie ogonki: ą, ę, ś, ć, ź, ł itd).

Uwaga – znaczna część autorytetów i autorów podręczników uważa, iż HTML nie jest językiem programowania – to głównie dlatego iż nie potrafi on podejmować decyzji czy wykonywać pętli, instrukcji wyboru etc. Stąd przyjęło się uważać, iż jest on jedynie tzw. językiem opisowym.

CSS

Są to tak zwane kaskadowe arkusze stylów (ang. Cascading Style Sheets). Służą one do opisania wyglądu elementów witryny, zdefiniowanych uprzednio w HTML. W arkuszach stylów odnajdziemy zapisy w postaci: właściwość – dwukropek – wartość (zobacz na ilustracji poniżej):

Nie przejmuj się, jeżeli nie rozumiesz jeszcze zapisu koloru #47639E – wszystko w swoim czasie! Jedno możemy przyznać na pewno – idea prostego określania wyglądu elementu przy pomocy zestawu atrybutów wydaje się intuicyjna i prosta. Ta belka jest niebieska, a te pola edycyjne używają czcionki Arial – naprawdę trudno w życiu o coś prostszego! Oczywiście używanie arkuszy stylów CSS oznaczać będzie także zrozumienie czym są tzw. klasy, identyfikatory, potomkowie, hovery, itd. ale na to jeszcze nie pora na tym etapie. Kodem CSS możemy także wpływać na położenie elementów i wzajemne relacje między nimi – czeka na nas zatem w kursie cały szereg atrakcji!

A dlaczego są to kaskadowe arkusze stylów? Kaskada to rodzaj wodospadu, mającego budowę schodkową. Jest to wyraźna aluzja do potężnego mechanizmu "schodkowego" właściwości, który niejednokrotnie zaoszczędzi nam wiele pracy, jednak teraz nie zaprzątaj tym sobie głowy – po prostu teraz jesteś świadomy skąd się wzięła litera C w akronimie CSS.

Nasz dociekliwy umysł zadaje sobie jeszcze jedno nurtujące pytanie: skąd wzięła się ta (dziwaczna na pozór) idea rozdzielenia zawartości witryny od warstwy jej wyglądu? Otóż ma to duży sens praktyczny – odczujemy to na przykład w momencie, gdy jednym wpisem w arkuszu CSS uda nam się zmienić kolor wszystkich przycisków w witrynie. Stało się to możliwe, gdyż wszystkie podstrony w serwisie używały tego samego arkusza stylów, podpiętego do każdej z nich. To potężny i genialny w swojej prostocie mechanizm, naturalna ewolucja od czasów gdy wygląd określało się w HTML, na przykład z wielokrotnym użyciem tagów <font>. Na szczęście te czasy bezpowrotnie minęły.

JavaScript

Jest to pełnoprawny, skryptowy język programowania, w którym możemy stosować cały repertuar klasycznych konstrukcji językowych (instrukcje warunkowe, pętle, zmienne, tablice, instrukcje wyboru, własne funkcje, klasy itd.). JavaScript (nie mylić z językiem Java, to co innego) to potężny front-endowy kombajn, za pomocą którego możemy tworzyć wyjątkowe od strony designu i interfejsu witryny.

Na samym początku swojej przygody z webdeveloperką, JS używamy najczęściej do ulepszenia interfejsu strony, wzbogacając ją o dodatkowe funkcjonalności, niedostępne w HTML czy CSS. Skrypty JS pozwolą nam tworzyć efektowne slidery, animowane galerie zdjęć, wyskakujące panele z nawigacją, interaktywne menu, zegary, animacje itd.

JavaScript umożliwia (po załadowaniu się strony do przeglądarki) podmianę wybranego fragmentu kodu HTML czy CSS, bez potrzeby ponownej komunikacji z serwerem. Na ekranie może zmienić się slajd, zegar będzie kontynuować odliczanie co sekundę, galeria fotek z wakacji pokaże nam widok pełnego zdjęcia po kliknięciu na jego miniaturkę, a panel z nawigacją w animowany sposób rozwinie się przed nami ujawniając dodatkowe możliwości interakcji.

JavaScript potrafi podejmować decyzje w zależności od zaistniałych okoliczności, stąd często w kontekście JS mówi się o programowaniu zdarzeniowym. Takim zdarzeniem (ang. event) może być upływ zadanej ilości czasu czy kliknięcie czegoś. Zadaniem programisty jest okodować odpowiednią obsługę takiego zdarzenia.

Wyobraźmy sobie YouTube’a – co innego musi się zdarzyć kiedy na przykład:

• klikniemy przycisk Pause na pasku narzędziowym odtwarzania filmu,
• damy łapkę w górę pod filmem spod znaku Pasja informatyki,
• prześlemy komentarz o treści: „Pierwszy!” albo „Darude – Sandstorm”,
• zasubskrybujemy kanał HowToBasic,
• klikniemy miniaturkę nowego teledysku Gangu Albanii,
• zmienimy rozmiar okna przeglądarki, znacząco je zawężając

O tak, najlepsze witryny w sieci zdecydowanie są interaktywne i żywo reagują na nasze poczynania. I dlatego właśnie potrzebujemy potężnego front-endowego kombajnu, który weźmie na siebie obsługę tego wszystkiego, co zrobić można lokalnie. Cały mechanizm responsywności stron też jest podszyty JavaScriptem.  intuicyjne w obsłudze – do tego dążymy jako webdeveloperzy. I całe szczęście, że to właśnie JavaScript i pochodna JS biblioteka jQuery wyparły z rynku ciężką i toporną technologię Flash.

Niemniej jednak nie wszystko przecież można zrobić po stronie klienta. Na przykład fakt oddania łapki w górę pod filmem powinien jednak zostać zapisany w bazie danych na serwerze. Podobnie subskrypcja kanału – serwer musi wiedzieć, że taki fakt miał miejsce. Podobnie kiedy logujemy się w jakimś serwisie, niech będzie Facebook – ten login i hasło trzeba przecież wysłać na serwer, aby tam w serwerowej bazie danych potwierdzić swoją tożsamość. Dopiero po tej weryfikacji można wczytać listę znajomych tego użytkownika, otrzymane wiadomości, powiadomienia oraz wpisy na tablicy. I tu dochodzimy do potrzeby istnienia drugiej strony komunikacji – strony już nie klienckiej, a serwerowej. I tu na scenę wkracza ważny zawodnik – nazywa się: Back-end.