W roku szkolnym 2019/2020 Marcin Gontarczyk wziął udział w programie stypendialnym organizowanym na terenie Województwa Mazowieckiego dla uczniów szkół zawodowych. Temat projektu: "Stworzenie galerii zdjęć możliwej do przeglądania na różnych urządzeniach elektronicznych".

Wstęp

Głównym celem mojego projektu stypendialnego był rozwój wiedzy i umiejętności, z zakresu tworzenia w pełni responsywnych stron internetowych, prezentujących galerie zdjęć.

Mój projekt stypendialny dotyczył stworzenia jednej galerii zdjęć w formie strony internetowej, która dzięki automatycznemu dopasowywaniu swojego wyglądu, będzie możliwa do przeglądania na różnych urządzeniach elektronicznych takich jak laptopy, tablety lub smartfony. Na podstawie trzech różnych urządzeń elektronicznych, chciałbym zaprezentować jej działanie.


Galeria – odczyt na laptopie

Analizując wygląd galerii otwartej w laptopowej przeglądarce internetowej, możemy zobaczyć, że sekcja nagłówkowa zajmuje niemal całą wysokość okna przeglądarki. W jej środkowej części znajdują się tytuł i podtytuł napisane w języku angielskim, które jasno określają tematykę strony. Kontrast, a także zastosowanie czcionek Merienda, oraz Caveat sprawiają, że tekst jest przyjemny dla oka. Poniżej nagłówka znajdują się 3 kolumny zdjęć. Po kliknięciu w miniaturę któregokolwiek ze zdjęć, pokaże nam się ono w pełnym rozmiarze. W takim podglądzie mamy również możliwość przewijania zdjęć o jedno w przód, oraz tył, przy użyciu strzałek umieszczonych przy prawej i lewej krawędzi okna przeglądarki. Podgląd pojedynczych zdjęć możemy zamknąć klikając znak X w prawym górnym rogu okna przeglądarki, lub klikając gdziekolwiek poza powiększone zdjęcie. W dolnej części strony znajduje się minimalistyczna stopka wraz z informacjami o twórcy strony.

 laptop screen1
laptop screen2




Galeria – odczyt na tablecie

Stworzona przeze mnie strona internetowa z galerią zdjęć otwarta na urządzeniu typu tablet, wygląda bardzo podobnie do tej otwartej na laptopie. Zauważalną różnicą jest tutaj zmniejszona wielkość czcionki w sekcji nagłówka, oraz jego trochę inaczej skadrowane tło, które dopasowało się do wielkości okna, w którym strona jest wyświetlana. Poniżej znajdują się również 3 kolumny ze zdjęciami, lecz ich wielkość też jest inna, dopasowana. W dolnej części znajduje się stopka. Na urządzeniach mobilnych, takich, jak tablet, mamy możliwość pracy zarówno w orientacji pionowej, jak i poziomej. Strona ta została przystosowana do pracy w obu tych orientacjach, po obróceniu urządzenia, strona od razu wykrywa zmianę orientacji i przystosowuje do niej swoją wielkość.

tablet screen1
tablet screen2
tabletscreen3




Galeria – odczyt na smartfonie

Urządzenia mobilne, takie, jak smartfony, mają wyświetlacze o dużo mniejszej powierzchni oraz często sporą różnicę między ich wysokością a szerokością, stąd wielkość stworzonej przeze mnie galerii zdjęć musiała ulec sporej modyfikacji. Zawartość oraz układ strony pozostały niezmienne w stosunku do obu powyższych projektów, lecz wielkość czcionek, skadrowanie tła sekcji nagłówkowej, oraz wielkość elementów w kolumnach ponownie uległy przeformatowaniu. Podobnie, jak tablety, smartfony również umożliwiają pracę w orientacji pionowej i poziomej. Tutaj również strona automatycznie wykrywa orientację urządzenia i przystosowuje do niej wielkość wyświetlanych w sobie treści.

tel screen1
tel screen2
tel screen3





Podsumowanie:

Jak widać na powyższych przykładach, stworzona przeze mnie galeria zdjęć w formie strony internetowej jest w pełni responsywna. Stronę prezentującą galerię oraz zdjęcia w niej umieszczone możemy przeglądać na różnych urządzeniach elektronicznych, o różnych rozmiarach wyświetlaczy, zarówno w orientacji pionowej, jak i poziomej. Dzięki stypendium w ramach projektu “Mazowsze - stypendia dla uczniów szkół zawodowych” pozyskałem środki, które przeznaczyłem na rozwój umiejętności przydatnych mi w przyszłości na rynku pracy.Wiedza czerpana z zakupionych w ramach stypendium książek, kursów oraz sprzęt będą przydatne w dalszym rozwoju i zdobywaniu nowych umiejętności.

Zdjęcia użyte w sekcji nagłówkowej oraz stopce pochodzą z serwisu Pixabay – źródła udostępniającego zdjęcia wolne od praw autorskich. Wszystkie fotografie znajdujące się w kolumnach galerii zostały wykonane i obrobione przeze mnie.

Galerię można zobaczyć pod linkiem: https://crazybikeguy.github.io/

Opiekun: Bogusława Bogucka

Marcin Gontarczyk

 

0
0
0
s2smodern
powered by social2s