Akademia Sztuki w Szczecinie

Akademia Sztuki portfolio 1

Strona internetowa Akademi Sztuki przygotowywana została z wielką dokładnością. Wspierana przez studentów z uczelni, wykładowców oraz Marię Heś (odpowiedzialną za design strony intenretowej). Wspiera najnowsze technologie frontendowe oraz jest w pełni responsywna na wszystkie urządzenia, włącznie z ekranami wysokiej rozdzielczości (powyżej 4000 px).

Na stronie głównej jak widać na załączonym zrzucie widać literki działów na stronie:
- "K" (Kierunki)
- "R" (Rekrutacja)
- "S" (Skontaktuj się)
- "Q" (Quiz)
- "O" (O wydziale)

Literki przygotowane są w technologii parallax-u i dzięki temu przy ruchach myszką ruszają się razem z nią. Co więcej kilkając na wybraną z nich strona przesuwa się do aktualnie klikanej sekcji dzięki funkcjonalności Smooth Scrolling.

Po wybarniu kierunku i określonej spcejalności można zobaczyć bardzo miłą dla oka prezentację danego kierunku. Zaczyna się ona od krótkiego opisu wraz z filmem promocyjnym każdej ze specjalności z osobna. Po czym można zobaczyć na stronie spis przedmiotów, przykładowych wykładowców, opinie absolwentów, spis pracowni wraz z ich galerią i wiele innych ciekawych rzeczy. Wszystko na stronie ładnie ubrane kolorystycznie, by stanowiło jedną całość.

W serwisie internetowym wykorzystywane są animację poruszających się box-ów z tekstami w formie kodu CSS. Poruszają się na tyle powoli, by nadać stronie trochę ruchu, animacji, ale też by istaniała możliwość bez problemu przeczytania tekstu, który się na nich znajduje.

Przy zdjęciach wykorzystana jest funkcjonalność Lightbox, dzięki której wybierając jedno ze zdjęć mamy możliwość jego powiększenia i przyjżeniu się z bliska.

W galerii zdjęć przy wybranych projektach specjalności wszystkie ze zdjęć wyświetlają się czerno białe, dopiero po najechaniu na wybrany z nich robią się kolorowe. Nadaje to stronie swój osobisty charakter i oddaje jakość fotografii.

Akademia Sztuki portfolio 2
Akademia Sztuki portfolio 3

Głównym atutem tej strony jest zakładka Quiz, w której znajdują się pytania na podstawie których każdy może dowiedzieć się która ze specjanlności najbardziej jest mu pisana i na którą się nadaje. Przy każdym z pytań jest potrójna odpowiedź w formie fotografii, tak jak wspominałem wcześniej po najechaniu wybranej można ją zobaczyć, w tym wypadku trzeba ją kliknąć, tym samym wybierając odpowiedź.

Jak działa quiz? Jest to skrypt wykonany w formie języka PHP, który bada ile poprawnych odpowiedzi z danej specjalności zostało wybranych i bada na tej podstawie która specjalność powininna zostać wybrana. W skrypcie istnieje wada, że w czasie wybierania pytań istnieje możliwość wybrania takiej samej ilości odpowiedzi do dwóch różnych specjalności. Takich połączeń są aż trzy. Problem został rozwiązany polubowanie, do każdej z trzech opcji była wybierana jedna specjalność. Na tej podstawie każda ze specjalności ma takie same prawdopodobieństwo wybrania jej.

Każda z fotografii była rysowana ręcznie przez wybrane do tego studentki z Akademii Sztuki, za co z góry dziękujemy za pomoc.

Kolejną ciekawą podstroną jest strona kontaktu. Tam z góry można zauważyć fotografie wybranych studentów z określonych działów. Jednego chyba brakuje? W rzeczywistości nie brakuje. Po najechaniu na wybrane zdjęcia są animowane i pokazują jakąś wybraną minę danego studenta. Taki oto efekt chcieliśmy uzyskać tworząć animację na podstawie wykonanego filmu.

Jak to działa? Po najechaniu na wybrany film uruchamia się skrypt napisany w JQuery, który powoduje start wybranego wideo, przy czym jeżeli strzałka od myszki zostanie poza obszarem filmu, jest on pauzowany i przechodzi w stan spoczynku, po ponownym najechaniu jest wznawiany od punktu zatrzymania.

Jest to bardzo ciekawy efekt który daje poczucie większego ruchu na stronie, w dodatku jest on mało spotykany na stronach internetowych. Pod danymi kontaktowymi znadują się najczęstsze zadawane pytania w formie "harmonijki", można je rozwijać i zobaczyć wybrany opis kilkając wybraną z nich.

Akademia Sztuki portfolio 4