Galeria Fotografii – w zasadzie trudno sobie wyobrazić stronę bez niej. Ale czym tak naprawdę jest w całej strukturze serwisu?
Z punktu widzenia odbiorcy, galeria może pełnić szereg zupełnie różnych funkcji:
- Galeria, jako strona wejściowa do serwisu.
- Galeria, jako rozszerzona prezentacja pojedynczego zdjęcia w treści.
- Galeria, jako baner reklamowy produktu.
- Galeria, jako prezentacja multimedialna, np. na stoisku targowym.
- Galeria, jako część funkcjonalna strony internetowej (nie tylko dodatek, ale element interfejsu).
- Czy wreszcie galeria, jako miejsce do przeglądania zdjęć (np. rodzinnych, z wyprawy, itp.
Z pewnością nie wymieniłem tu wszystkich możliwości, ale widzimy, że bez galerii nie ma życia, a dobra galeria może nam to życie bardzo ułatwić.
Czym jest z kolei galeria fotografii widziana od strony kodu strony internetowej?
Żeby odpowiedzieć na to pytanie wymienię i scharakteryzuję najpierw cztery podstawowe technologie internetowe w to „zamieszane”:
- HTML – niektórzy mówią, że to język programowania. Nie - to nie jest język programowania. To jest język (czyli zbiór zasad i w przypadku HTML-a również znaczników), za którego pomocą opisujemy wygląd strony internetowej. Z faktu, że nie jest to język programowania wynika np. to, że w HTML-u nie możemy używać zmiennych. Czyli coś co jest wpisane w kod strony nie może być (za pomocą tego języka) zmieniane. Więc żeby zmienić wpisaną w kod strony nazwę pliku ze zdjęciem trzeba albo stronę przeładować, albo użyć prawdziwego języka programowania.
- PHP – to jest język programowania, który ma za zadanie zrobić jedną rzecz – wygenerować (na podstawie różnych danych - pobieranych z baz danych, ze skryptów, plików tekstowych, itp.). kod strony HTML. Relacja między tymi dwoma językami jest następująca: Serwer PHP HTML Przesył danych HTML Przeglądarka. Przeglądarka jest w stanie wyświetlić kod HTML (nie PHP). Serwer jest w stanie wykonać kod PHP, w wyniku czego powstanie kod HTML. Przez sieć przepływa strumień danych już w języku HTML.
- JavaScript (JS) – to język programowania, który operuje na kodzie HTML. To
JavaScript jest w stanie zmienić w sposób dynamiczny nazwę zdjęcia wpisanego w kod strony HTML.
Uwaga! JavaScript zawsze wykonuje się po stronie klienta (czyli w przeglądarce).
Ale – kod JavaScript jest również przesyłany z serwera do przeglądarki, przy czym możliwe są tu dwa warianty: albo kod JavaScript jest wpisany w kod strony HTML i jest przesyłany z nią razem, albo – jest wydzielony do osobnego pliku i jest przesyłany jako osobny plik.
Pierwsze rozwiązanie jest mniej efektywne (bo jeśli zmieni się zawartość strony i strona musi być przesłana ponownie, to zawarty na niej kod JS będzie również przesłany ponownie). W drugim rozwiązaniu, raz przesłany kod może być wykorzystywany wielokrotnie.
- CSS – to jest język (ale nie programowania) służący do opisu wyglądu tych elementów, które są wyświetlane w przeglądarce za pomocą języka HTML (można porównać go do stylów znanych z programów DTP).
Te cztery elementy ze sobą współpracują przy tworzeniu większości galerii, przy czym język PHP może być w dalszych rozważaniach pominięty, bo wszystko co robi PHP możemy w zasadzie zrobić ręcznie, odpowiednio większym nakładem pracy. Np. jeśli mamy stronę, na której ma się znaleźć galeria z pięćdziesięcioma zdjęciami, to możemy albo te pięćdziesiąt nazw plików wpisać ręcznie, albo może to za nas zrobić program w języku PHP, który np. automatycznie przejrzy zawartość katalogu i znalezione tam zdjęcia „wpisze” do pliku.
Pozostałe trzy elementy (tj.: HTML, CSS i JavaScript) będą ze sobą współdziałały w różnym stopniu dając nam lepsze lub gorsze efekty wizualne.
Przejdźmy wobec tego do galerii. Z punktu widzenia kodu strony, galeria to program i dane. Program – to kod napisany w języku JavaScript. A dane – to zbiór zdjęć. Ten zbiór zdjęć może być po prosty wpisany (wkomponowany) w kod strony. Wtedy kod programu działa na zdjęciach zawartych na stronie. Lub też – inne rozwiązanie – kod programu ma przypisany dodatkowy plik ze zbiorem danych, pobiera te dane i wyświetla je na stronie. To drugie rozwiązanie jest oczywiście dużo wydajniejsze, bo to galeria steruje co i kiedy ma być pobrane z serwera. W rozwiązaniu pierwszym, cała strona (wraz z ukrytymi zdjęciami) jest pobierana, a program galerii „odkrywa” tylko to zdjęcie, które chce pokazać.
Jak widzimy sprawa choć z pozoru prosta, wymaga rozsądnego podejścia. Na co więc zwrócić uwagę wybierając i decydując się na konkretne rozwiązanie? Wybór nie jest prosty, zwłaszcza w dzisiejszym świecie, kiedy wiele rozwiązań jest za przysłowiowe „darmo”.
Spróbujmy uporządkować temat i wypunktować te elementy, na które wg mnie warto zwrócić uwagę:
- Czy galeria korzysta z tzw. wtyczek lub bibliotek. Jakie problemy z tym się wiążą, jak to wpływa na wydajność (szybkość ładowania, obciążenie pamięci).
- W jaki sposób galeria jest wkomponowana w kod strony internetowej. Co w ogóle musimy zrobić, jakich dokonać przeróbek w naszej stronie, żeby taką galerię uruchomić w naszym serwisie.
- Jaka jest podatność (łatwość) galerii na jej modyfikacje (dodawanie, usuwanie slajdów, zmiany parametrów wyświetlania). Ogólnie rzecz ujmując – jakim nakładem pracy osiągniemy zadowalające nas rezultaty.
- Jaka jest elastyczność rozwiązania, na które już się zdecydowaliśmy. Innymi słowy, czy stosując jakieś rozwiązanie w określonym celu (np. galerii jako baner) nie będziemy musieli za chwilę rozpoznawać innego rozwiązania, bo inny cel stosowania galerii wymaga innego „silnika”.
Na pytania postaram się odpowiedzieć w kolejnych artykułach.
Zespół 3n, Koszalin, luty 2019