Strona internetowa firmy

W 2018 roku miałem okazję zrealizować stronę internetową dla wrocławskiej firmy zajmującej się obróbką i wykonywaniem konstrukcji stalowych. Dotychczasowa strona firmy została wykonana z użyciem nieaktualnych na dzień dzisiejszy technologii. Do moich zadań należało utworzenie nowej responsywnej strony internetowej na podstawie już istniejącej.

Prezentacja wykonanej strony internetowej

Wykonana strona zawiera pokaz slajdów, galerię zdjęć, responsywną strukturę, responsywną nawigację, mapkę dojazdu. Można na niej przeczytać o działalności firmy, znaleźć dane kontaktowe, zobaczyć do tej pory wykonane konstrukcje stalowe.

Technologie i narzędzia

Projekt zrealizowałem kilka miesięcy po zakończeniu kursu na studiach omawiającego podstawy technologii webowych. Z tego powodu, aby lepiej poznać technologie internetowe, zdecydowałem się na ograniczenie wykorzystywania dodatkowych bibliotek i napisaniu arkuszów styli oraz skryptów samodzielnie.

Wykorzystane przeze mnie technologie to: HTML, CSS, SCSS, JavaScript. Do pokazu slajdów skorzystałem z niewielkiej biblioteki Glider.js. Mapka dojazdu korzysta z Leaflet.js. Cały projekt przechowałem w repozytorium Git. Wykorzystałem narzędzia deweloperskie, takie jak: NPM oraz Gulp.js.

Galeria zdjęć

Poprzednia odsłona strony zawierała tylko kilka zdjęć. Wszystkie pliki graficzne były niewielkiej rozdzielczości, przystosowane do przepustowości internetu kilkanaście lat temu. Poza programowaniem strony dokonałem obróbki zdjęć, tak aby były odpowiednio dopasowane do galerii liczącej kilkadziesiąt zdjęć.

Galerię zdjęć wykonałem samodzielnie, wykorzystując możliwości Flex oraz używając techniki “lazy loading”, stąd zdjęcia w galerii ładowane są na stronie za pomocą skryptu. W miejsce nieściągniętych jeszcze plików graficznych wyświetlana jest animacja.

Nawigacja po pojedynczej stronie

Napisałem responsywną nawigację na górze strony, przystosowaną do wyświetlaczy urządzeń mobilnych. Cała strona składa się tylko z jednego pliku HTML. Zdecydowałem się na takie rozwiązanie, ponieważ struktura strony miała mieć formę “wirtualnej wizytówki”. Osobie odwiedzającej stronie prawdopodobnie wygodnie jest zjeżdżać w dół pojedynczej strony, czytając kolejne informacje o działalności firmy. Zaletą tego rozwiązania jest pobieranie wszystkich miniatur w galerii zdjęć od pierwszych chwil pobytu na stronie internetowej.

Dalszy rozwój strony

Strona doczekała się pomniejszych aktualizacji w 2019 i 2020 roku, przy okazji przedłużania serwisu hostingowego. Zostały dodane nowe zdjęcia do galerii, ale także dokonano poprawek wykrytych niedoskonałości strony.

Jeżeli miałbym realizować podobny projekt raz jeszcze to prawdopodobnie wykorzystałbym system WordPress, ponieważ umożliwia on szybsze dodawanie treści do strony czy chociażby wsparcie dla optymalizacji SEO.