facebook
youtube
linkedin
tweeter
instagram
behance

Alfa Laval

aplikacje webowe

02. 05. 2022

arrow


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:



Wr贸膰 do portfolio 聽聽 arrow