O stronie

Prezentowana strona internetowa została napisana zgodnie z najnowszym standardem języka HTML 5.0, który został połączony z Kaskadowym Arkuszem Stylów (z ang. Cascading Style Sheets) popularnie zwanym CSS.

Kaskadowy Arkusz Stylów (CSS), to najczęściej oddzielny dodatkowy dokument (plik) stworzony przez autora strony, w którym za pośrednictwem odpowiednich znaczników oraz komend pisanych w języku angielskim określony jest cały wygląd strony, tj. kolor tła strony, kolor tekstu, wygląd menu, rozmieszczenie poszczególnych elementów na stronie, itp. Odpowiednio utworzony plik z rozszerzeniem css zapisujemy na dysku twardym komputera i za pomocą odpowiedniej linii kodu HTML podłączamy go do każdego pliku z rozszerzeniem html. Siła a jednocześnie piękno i magia Arkuszy Stylów tkwi w ich kaskadowości, czyli hierarchii oraz zdolności dziedziczenia ustalonych przez nas cech strony, np. jeśli dla strony głównej ustalimy w CSS zielony kolor tła, to dla wszystkich podstron będzie on także zielony bez konieczności zmiany koloru na każdej z nich. Jeśli natomiast dla określonego akapitu ustawimy niebeski kolor tła, to wówczas ten jeden akapit będzie niebieski, bo w hierarchii akapit jest ważniejszy niż ogólne tło strony. Prostota, minimalizm, przejrzystość i ogromne możliwości stylizacji stron internetowych tkwiące w Kaskadowym Arkuszu Stylów sprawia, że technologia ta staje się niezastąpionym narzędziem wykorzystywanym przy ich budowie.

Nie od dziś wiadomo, że wygląd to nie wszysto, równie istotna jest treść strony. Przyszedł więc czas by w dużym skrócie i uproszczeniu wspomnieć o sercu, które zawiaduje niniejszą stroną internetową, czyli o najnowszym standardzie języka HTML w wersji 5.0. Zgodnie z założeniami tego standardu oglądana przez ciebie strona została w całości zamknięta w znacznikach semantycznych. Znaczniki semantyczne mimo, iż nie mają bezpośredniego wpływu na treść i na wygląd strony, są bardzo ważne z punktu widzenia pozycjonowania strony w wyszukiwarce internetowej. Dzięki nim robot indeksujący naszą stronę w wyszukiwarce dokładnie wie co i gdzie się na niej znajduje, a to z kolei w znacznym stopniu przekłada się na wysoką pozycję strony w wynikach wyszukiwania. Drugą bardzo ważną rolą znaczników semantycznych jest to, że ułatwiają one czytanie naszej strony programom dla osób niewidomych i niedowidzących. Dzięki nim program wie, który określony przez użytkownika fragment naszej strony ma przeczytać. W znacznikach semantycznych występujących w każdym pliku z rozszerzeniem html, znajdują się także przeźroczyste pojemniki zwane divami, których wielkość i położenie zdefiniowane jest we wspomnianym wyżej Kaskadowym Arkuszu Stylów. Zadaniem divów jest przechowywanie właściwego contentu (treści) strony widocznego dla osób, które ją odwiedzają.

Do tak skonstruowanego fundamentu strony składającego się z dwóch plików, tj. pliku HTML i CSS zostały zaimplementowane dodatki poprawiające jej wygląd oraz wygodę użytkowania, są to:

Lepkie menu (z ang. sticky menu) - to "klejący" się do górnej krawędzi ekranu pasek z menu głównym. Rozwiązanie to sprawia, że osoba przeglądająca stronę internetową zawsze widzi u góry ekranu menu główne i może z niego swobodnie skorzystać niezależnie od tego w którym miejscu strony aktualnie się znajduje.

Zakotwiczenie tekstu połączone z efektem scrollTo (przewiń do...) - automatyczne płynne przewijanie do wybranej części tekstu po kliknięciu jej tytułu w spisie treści i z powrotem.

Przeglądarka do zdjęć "Lightbox" - dzięki niej każda osoba czytająca zakładkę "O mnie", może po kliknięciu w znajdujące się tam zdjęcia przeglądać je w pełnym rozmiarze wraz z podpisem, a następnie bez problemu wrócić do czytanego tekstu klikając w dowolne miejsce poza zdjęciem.

Ikonki fontello - niemal na każdej stronie internetowej znajdują się ikonki prowadzące do kontaktu z autorem, Facebooka, Instagrama, itp. Rozwiązanie to można zrealizować na dwa sposoby - poprzez podłączenie do pliku z rozszerzeniem html typowych obrazków symbolizujących dany przycisk, lub pobranie obrazkowych czcionek fontello ze strony fontello.com. Przewaga między jednym a drugim rozwiązaniem polega na tym, że tradycyjne ikonki obrazkowe zajmują sporo miejsca na serwerze, dłużej się wczytują, nie są w żaden sposób dodatkowo konfigurowalne i często nie są bezpłatne. Natomiast czcionki fontello przede wszystkim są czcionkami a nie obrazkami, co sprawia, że zajmują o wiele mniej miejsca, a strona ładuje się szybciej. Ikonki fontello są w pełni konfigurowalne, możemy w szybki sposób zmienić ich kolor podstawowy, jak i kolor po najechaniu na nie kursorem myszy. Wisienką na torcie przemawiającą na korzyść czcionek jest to, że są one całkowicie darmowe.

Hover - efekt zmiany koloru przycisku po najechaniu na niego kursorem myszy stosowany w CSS. Komenda ta jest alternatywą dla stosowanego w języku HTML polecenia onmouseover i onmouseout.

Google Fonts - zapewne każda osoba przeglądająca jakiekolwiek strony internetowe nie raz spotkała na nich tekst, którego akapity bądź poszczególne słowa napisane były różnymi czcionkami, przez co jedne z nich bardziej przyciągały uwagę a inne mniej. Nic w tym dziwnego - wszak Internet to narzędzie, które nie znosi nudy - ale nie ma chyba osoby, która znałaby na pamięć wszystkie nazwy czcionek wykorzystywanych na stronach internetowych i wiedziałaby jakie do nich pasują. Jak zatem wybrać czcionkę, która da internautom komfort czytania strony internetowej i jednocześnie poczucie obcowania z czymś ekskluzywnym? Odpowiedzią na to pytanie jest wykorzystana przy budowie tej strony baza czcionek Google Fonts, z której wybiera się jedną lub kilka czcionek, a następnie pobiera się z niej wygenerowane kody tych czcionek i wkleja zarówno do Kaskadowego Arkusza Stylów, jak i do każdego pliku z rozszerzeniem html. Ja wybrałem czcionkę bez szeryfową o nazwie "Lato".

Biblioteka jQuery oraz język JavaScript. Biblioteka jQuery, to gotowy do pobrania z Internetu plik przy pomocy którego działają wspomniane wyżej trzy pierwsze komponenty prezentowanej strony internetowej, tj. "klejące" się do górnej krawędzi ekranu menu główne, automatyczne przewijanie do wybranego miejsca w tekście oraz przeglądarka "Lightbox". Za płynność automatycznego przewijania strony odpowiada natomiast język JavaScript, który znajduje się w "głowie strony", czyli w znaczniku hed, który znajduje się w każdym pliku HTML.

Kończąc pisanie o technologii wykonania niniejszej strony internetowej dodam tylko, że została ona napisana przeze mnie własnoręcznie w notatniku "Notepad++" w wersji 7.9.4. Mam nadzieję, że zastosowane tu i opisane wyżej technologie sprawiają, iż czyta się ją przyjemnie i komfortowo.