Pliki zorganizowano w strukturze drzewiastej odzwierciedlając strukturę logiczną aplikacji:

Transkrypt

1 Technologia wykonania projektu: HTML5 Javascript: o jquery (1.9.1), o CreateJS (0.6.1): EaselJS, TweenJS, PreloadJS. Części funkcjonalne projektu: Strona internetowa pliki strony internetowej zlokalizowane są w katalogu głównym projektu. Pozostawiono możliwość zmiany treści na stronie poprzez edycję plików HTML, w szczególności: o /index.html strona główna projektu, o /tutor.html strona dla nauczyciela, o /age.html strona wyboru kategorii wiekowej (nie przewidywano modyfikacji). Aplikacja HTML5 uruchamiana po wyborze konkretnego modułu z kategorii wiekowej. Obsługuje wyświetlanie elementów multimedialnych projektu bez przeładowania ekranu (casum, tutorial, gra, muzyka, słowniki). Organizacja plików Pliki zorganizowano w strukturze drzewiastej odzwierciedlając strukturę logiczną aplikacji: 1. Poziom: Katalog główny (strona główna, dla nauczyciela, wybór kategorii wiekowej). 2. Poziom: Kategoria wiekowa (lista modułów). 3. Poziom: Moduł (aplikacja HTML5).

2 Schemat nawigacji w strukturze HTML Struktura plików:

3 Katalog główny: [bin] odpowiednie kategorie wiekowe (3-, 4-, 5-latki), [css] arkusze CSS strony internetowej, [images] grafiki strony internetowej, [js] skrypty Javascript strony internetowej, index.html strona główna, age.html ekran wyboru kategorii wiekowej, tutor.html ekran z informacjami dla nauczyciela. Kategoria wiekowa: [mod] odpowiednie moduły aplikacji (nr. modułu, kategoria wiekowa), [css] arkusze CSS aplikacji HTML5, [images] GUI aplikacji HTML5, [lib] biblioteki Javascript (silnik aplikacji HTML5), index.html ekran wyboru modułu (strona internetowa), config.txt plik konfiguracyjny aplikacji HTML5. Silnik aplikacji HTML5: h5engine.js podstawowy silnik aplikacji odpowiedzialny za wczytywanie i wyświetlanie niezależnych elementów modułu. globals.js dodatkowe funkcje globalne. pin.js logika obsługująca ekran logowania (Pin Layer) do modułu. Dodatkowe biblioteki zewnętrzne: o jquery (obsługa animacji oraz wczytywania plików przy pomocy AJAX), o EaselJS (tworzenie warstwy widoku aplikacji, obsługa interakcji), o TweenJS wraz z rozszerzeniem MovieClip (obsługa animacji), o PreloadJS (obsługa wczytywania manifestu plików wraz z informacją o postępie procesu wczytywania). Przewidziano możliwość aktualizacji bibliotek zewnętrznych na nowsze wersje (w momencie ich wydania) pod warunkiem zapewnienia kompatybilności wstecznej.

4 Moduł Moduły składają się z grup plików, których wczytywanie obsługiwane jest przez silnik aplikacji. Wszystkie wczytywane elementy wyświetlane są przy wykorzystaniu obiektu HTML5 <Canvas>. Mapa modułu: o home.html struktura HTML mapy, o home.js warstwa logiczna mapy, o [home] pliki graficzne mapy. Casum (animacja interaktywna): o casum.html struktura HTML animacji interaktywnej [1-5], o casum.js warstwa logiczna animacji interaktywnej [1-5], o [casum] warstwa widoku animacji interaktywnej [1-5]. Tutorial: o tutorial.html struktura HTML animacji [1-2], o [tutorial] pliki wideo [1-2]. Słowniki: o dictionary-pl.html struktura HTML słownika (wersja polska), o dictionary-pl.js warstwa logiczna słownika (wersja polska), o dictionary-en.html struktura HTML słownika (wersja angielska), o dictionary-en.js warstwa logiczna słownika (wersja angielska), o [dictionary] pliki graficzne słowników. Muzyka: o music.html struktura HTML ekranu muzycznego, o music.js warstwa logiczna ekranu muzycznego, o [music] warstwa widoku ekranu muzycznego wraz z materiałem audio. Gra: o game.html sturktura HTML gry, o game.js warstwa logiczna gry, o [game] pliki graficzne i audio. index.html tworzy strukturę HTML modułu, zapewnia dostęp do silnika aplikacji. pincode.txt plik tekstowy definiujący prawidłową kombinację kodu dostępu do modułu.

5 Konstrukcja modułu GUI Główny interfejs graficzny aplikacji składa się z sekcji nawigacyjnych zrealizowanych za pomocą składni HTML. Do animacji oraz elementów GUI wykorzystano bibliotekę jquery, która również realizuje obsługę zdarzeń kliknięcia przycisków. Wczytywanie treści do modułu odbywa się w technologii AJAX (bez przeładowania strony). W zależności od rodzaju wyświetlanej treści odpowiednie elementy GUI są pokazywane lub ukrywane. Pin Layer Po zaczytaniu modułu rozstrzygane jest, czy użytkownik powinien wprowadzić kod dostępu. Jest to funkcjonalność opcjonalna i może zostać wyłączona z poziomu pliku konfiguracyjnego. Kod dostępu zapisywany jest w plikach cookie. Jeśli kod został wprowadzony w poprzedniej sesji, plik cookie jest aktualny, a kod wciąż jest prawidłowy (nie został zmieniony przez administratora), wówczas krok ten jest automatycznie pomijany przez aplikację. Ekran kodu dostępu zrealizowany jest przy pomocy obiektu HTML5 <Canvas>, który przesłania ekran modułu łącznie z wszystkimi elementami GUI (z wyłączeniem przycisku powrotu). Użytkownik nie ma możliwości kliknięcia elementów GUI do czasu wprowadzenia prawidłowej kombinacji. Wówczas ekran kodu dostępu jest w całości usuwany z kodu HTML.

6 Wykorzystano bibliotekę CreateJS do konstrukcji widoku realizowanego na obiekcie HTML5 <Canvas>, włączając w to interakcje oraz animacje. Wczytywanie treści Proces wczytywanie treści realizowany jest przez silnik aplikacji w oparciu o bibliotekę jquery (AJAX). W momencie rozpoczęcia procesu wczytywania inicjalizowany jest widok ekranu wczytywania. W celu zilustrowania przebiegu procesu użyto biblioteki PreloadJS, której zadaniem jest przekazanie informacji na temat postępu wczytywania plików w postaci tzw. paska postępu. Uwaga: W przypadku wykrycia braku obsługi zdarzeń wymaganych do wyświetlenia informacji dotyczących procesu wczytywania przez konkretną platformę, na której uruchomiona jest aplikacja, pasek postępu zostaje automatycznie ukryty (informacja o trwającym procesie wczytywania pozostaje, aż do ukończenia). Aplikacja jest w stanie wczytać i wyświetlić dowolny dokument HTML, Javascript oraz zagnieżdżone w nich pliki graficzne i multimedialne. Wczytywana treść działa niezależnie od silnika aplikacji. Komunikacja pomiędzy treścią, a silnikiem ograniczona jest do metod dot. rozpoczęcia i zakończenia pracy zaczytanego materiału. Zdecydowana większość treści wyświetlana jest przy pomocy obiektu HTML5 <Canvas> z wykorzystaniem biblioteki CreateJS. Wyjątkiem są tutoriale, które są plikami wideo zagnieżdżonymi w dokumencie HTML5. Wykorzystany został w tym przypadku obiekt HTML5 <Video>, który dostarcza pliki wideo w kilku możliwych do odczytu formatach. Przeglądarka decyduje o formacie, który zostanie użyty. Takie rozwiązanie gwarantuje multiplatformowość aplikacji.

7 Mapa modułu W momencie uruchomienia modułu, automatycznie zaczytywana jest mapa modułu. Podobnie jak wszystkie inne animacje interaktywne, tutoriale, czy gry, jest to niezależny element treści zaczytywany przez silnik aplikacji. Mapa komunikuje się z silnikiem, który obsługuje zdarzenia kliknięć poszczególnych elementów mapy i reaguje wczytując pożądaną treść.

8 Migracja i utrzymanie Projekt wykonany został wykonany zgodnie z zamówieniem w technologii HTML5. 1. W celu zapewnienia właściwego działania wszystkie pliki projektu należy umieścić na serwerze WWW zachowując strukturę katalogów. 2. Lokalizacją projektu może być katalog główny lub dowolny podkatalog, np.: 3. Nie zaleca się zagnieżdżania projektu w ramkach. 4. [opcjonalnie] W każdej kategorii wiekowej należy otworzyć plik config.txt i ustawić parametr pin_required (nie używamy średnika). a. pin_required=0, jeśli logowanie do modułu ma zostać pominięte. b. pin_required=1, jeśli logowanie do modułu jest wymagane. 5. [opcjonalnie] W każdym module należy otworzyć plik pincode.txt i podać kod wartości liczbowych (1-4) oddzielonych przecinkiem (nie używamy średnika), które reprezentują kolejne symbole kodu logowania do modułu: 1) kwadrat, 2) koło, 3) trójkąt, 4) rąb. Np.: 4,3,2,4 Uwaga: Brak pliku pincode.txt automatycznie ustawia wymagany kod na wartość 1,1,1,1. Uwaga: Pin nie jest wymagany, jeśli w pliku konfiguracyjnym config.txt wartość pin_required została ustawiona na 0. Dopuszcza się możliwość aktualizacji zewnętrznych bibliotek Javascript pod warunkiem zapewnienia kompatybilności wstecznej. Zaleca się aktualizację pakietu biblioteki CreateJS wraz z pojawianiem się nowych edycji pod warunkiem spełnienia powyższego warunku. Jest to biblioteka wspierana przez Adobe, co gwarantuje jej szybki jej rozwój. Uwaga: Każda kategoria wiekowa posiada własny, niezależny zestaw bibliotek w katalogu lib/.