Alfa Laval

Projekt graficzny aplikacji

Zaprojektowanie UI oraz UX aplikacji

Zaprojektowanie layoutu odtwarzacza, uwzględnienie responsywnej - przygotowanie layoutów na urządzenia mobilne w tym na komórki oraz tablety. Dobór odpowiedniego fontu, kolorystyki, elementów graficznych - ikon do przycisków odtwarzacza. Wydzielenie miejsca na animacje 3D. Określenie rozmiarów czcionek i elementów interaktywnych w ramach dostępności odtwarzacza.

Funkcjonalność aplikacji webowej

Specyfikacja projektu

Aplikacja spełnia funkcję platformy e-learningowej z odtwarzaczem video. Jest to projekt wewnętrzny, wykonany do celów szkoleniowych.

Za pomocą aplikacji można:

• Obejrzeć animację instruktażową podzieloną na 4 działy po 12 krótkich animacji 3D.
• Kontrolować odtwarzanie animacji 3D co do sekundy.
• Kontrolować dźwięk multimediów.
• Oglądać animacje 3D w trybie pełnoekranowym.
• Animacje przełączają się po kolej, automatycznie.
• Przełączać odcinki oraz działy.
• Sprawdzić informacje na temat aplikacji.

Programowanie odtwarzacza

Proces powstania aplikacji

Zaprojektowane layouty zostały zaprogramowane wykorzystując HTML5 i CSS3. Dopracowane zostały zmienne odpowiedzialne za responsywność odtwarzacza. Funkcjonalność została oparta na interfejsie Web Media API opracowanego przez w3. Pozwala on na stworzenie dedykowanych elementów do kontroli pliku video. Całość funkcyjnych działań została wdrożona za pomocą JavaScript, w tym zmienianie się wcześniej przygotowanych animacji 3D, tryb pełnoekranowy, kontrola dźwięku, zatrzymywanie i wznawianie odtwarzania a także działanie menu i reszty przycisków aplikacji.

Wdrożenie aplikacji e-learning

Docelowa infrastruktura

Aplikacja stanowi projekt wewnętrzny, do szkolenia pracowników i została docelowo umieszczona na urządzeniach typu tablet. Jako, że została wgrana na urządzenia lokalne - nie trzeba było martwić się o serwer i jego konfigurację. Za to trzeba było poprawić odpowiednio format ścieżek adekwatnie do systemu operacyjnego urządzeń docelowych.