Alfa Laval

aplikacje webowe

02. 05. 2022

scroll

Aplikacja webowa
UV Reactor E-Learning Assemble Guide

Zaprogramowanie dedykowanego odtwarzacza video spełniającego funkcję oprogramowania e-learning, przeznaczonego do nauki montażu urządzeń UV Reactor, z wykorzystaniem JavaScript, css3, html5 oraz plików video z animacjami 3D. Projekt wewnętrzny, wgrywany na urządzenia lokalne, wykonany w języku angielskim.

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.

projekt graficzny aplikacji webowej 3D
Projekt layoutów aplikacji e-learning
Specyfikacja dedykowanej aplikacji webowej
Specyfikacja aplikacji e-learning

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.

Wykorzystane technologie:

hmtl

HTML5

CSS3

CSS3

javascript

JavaScript

animacje 3D

Animacje 3D

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.

Programowanie platformy e-learning 3D
Programowanie platformy e-learning z animacjami 3D
Wdrożenie aplikacji webowej e-learning
Wdrożenie aplikacji e-learning

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.



Oceń naszą pracę:

0

   





Odpowiedz na pytania i otrzymaj darmową wycenę usług. W naszej szerokiej ofercie znajdziecie Państwo takie usługi jak projektowanie graficzne, spersalizowane kalendarze książkowe, firmowe, ekologiczne gadżety reklamowe, wydruki, filmy i fotografie reklamowe oraz programowanie stron internetowych w tym e-commerce, aplikacji czy systemów AR oraz VR.



Pozostałe projekty:

Zabudowy targowe
Systemy wystawiennicze

Zabudowy targowe
22. 04. 2024

arrow
Spoty reklamowe
filmowanie

Spoty reklamowe
16. 04. 2024

arrow
Systemy wystawiennicze
Systemy wystawiennicze

Systemy wystawiennicze
20. 02. 2024

arrow

Wróć do portfolio    arrow