Platforma MultiGenBank

Transkrypt

1 Platforma MultiGenBank Wersja dokumentu: 2.1 robocza Data wersji dokumentu: Opracował: firma UNOLD Comp. Strona 1 z 30

2 1 Metryka dokumentu 1.1 Historia zmian Data wersji Autor Wersja Opis Uwagi Olgierd Unold 1.0 Założenie dokumentu Wersja robocza Bogumił Konopka Konrad Rymczak Marcin Zagórski Bogumił Konopka Marcin Zagórski 1.2 Zatwierdzenie 1.1 Kompilacja dokumentu, formatowanie, dokumenty powiązane Wersja robocza 1.2 Standardy i założenia Wersja robocza 1.3 Zawartość projektu logotypu Wersja robocza 2.0 Referencje, załączniki Wersja robocza 2.1 Uwzględnienie uwag EPA/IITD, KBK/IITD, RP/PWr Imię i nazwisko Stanowisko/Firma Data Wersja Olgierd Unold Właściciel/UNOLD Comp robocza 2.0 Olgierd Unold Właściciel/UNOLD Comp robocza 2.1 Wersja robocza 1.3 Rozdzielnik Imię i nazwisko Stanowisko/Firma Data Wersja Katarzyna Bogunia- Kubik Ekspert dziedzinowy/iitd robocza 2.1 Barbara Wysoczańska Ekspert dziedzinowy/iitd robocza 2.1 Lidia Karabon Ekspert dziedzinowy/iitd robocza 2.1 Edyta Pawlak-Adamska Ekspert dziedzinowy/iitd robocza 2.1 Krzysztof Kuba Pawlik Ekspert dziedzinowy/iitd robocza 2.1 Agnieszka Korzeniowska-Kowal Ekspert dziedzinowy/iitd robocza 2.1 Roman Ptak Ekspert zewnętrzny/pwr robocza 2.1 Paweł Mackiewicz Ekspert zewnętrzny/uwr robocza 2.1 Strona 2 z 30

3 Dariusz Wójcik Koordynator Projektu robocza 2.1 Bogumił Konopka Analityk/UC robocza 2.1 Konrad Rymczak Główny programista/uc robocza 2.1 Marcin Zagórski Grafik/UC robocza 2.1 Olgierd Unold Właściciel/UC robocza 2.1 Strona 3 z 30

4 Spis treści Strona 1 Metryka dokumentu Historia zmian Zatwierdzenie Rozdzielnik 2 2 Wprowadzenie Cel dokumentu Dokumenty powiązane Wyłączenia z dokumentu 6 3 Streszczenie wymagań funkcjonalnych 6 4 Standardy i założenia Wykorzystane narzędzia: Metodologia: 7 5 Księga znaku 7 6 Projekt logotypu Zawartość projektu logotypu: 8 7 Makiety graficzne Moduł ImGen Moduł MicroB 20 8 Przykładowe realizacje elementów interfejsu w języku HTML 30 9 Referencje Załączniki 30 Strona 4 z 30

5 2 Wprowadzenie 2.1 Cel dokumentu Celem dokumentu jest przedstawienie specyfikacji graficznej platformy MultiGenBank. Specyfikacja graficzna platformy zostanie zdefiniowana przy użyciu następujących elementów: Księgi znaku Projektu logotypu Makiet graficznych ekranów Przykładowych realizacji elementów interfejsu w języku HTML W trakcie realizacji projektu możliwe są odstępstwa od niego zgodnie z wymaganiami zamawiającego. 2.2 Dokumenty powiązane W tabeli poniżej przedstawiono dokumenty mające związek z projektem graficznym oraz materiały, na bazie, których przygotowano niniejsze opracowanie (z wyłączeniem dokumentów powszechnie znanych i dostępnych, np. standardów) Dokument Autor Wersja Opis Uwagi Zapytanie ofertowe IITD Z dnia Specyfikacja funkcjonalna projektu w wersji 3.4 Ankieta wybór logotypu dla portalu MGB Ankieta wybór projektu graficznego Ankieta wybór projektu graficznego - dogrywka UC BK BK BK Z dnia Z dnia Z dnia Z dnia Księga znaku MZ Z dnia Dokument zawiera opis przedmiotu i zakresu zamówienia Dokument zawiera specyfikację funkcjonalną platformy MultiGenBank Dokument zawiera propozycje logotypów dla portalu Dokument zawiera propozycje szat graficznych dla portalu Dokument zawiera zmodyfikowane wersje najlepszych szat graficznych Dokument zawiera m.in. 2 warianty logotypu (układ), warianty mono- i achromatyczny W oparciu o rezultat ankiety wybrano logotyp portalu W oparciu o rezultat wybrano dwa najbardziej odpowiednie zestawy projektów graficznych W wyniku ankiety dokonano ostatecznego wyboru szaty graficznej portalu Strona 5 z 30

6 oraz inne elementy zgodnie z wymaganiami Zamawiającego 2.3 Wyłączenia z dokumentu W dokumentacji nie zostaną omówione następujące zagadnienia: Projekt funkcjonalny platformy, Projekt techniczny platformy. 3 Streszczenie wymagań funkcjonalnych MultiGenBank jest dwujęzycznym, polsko-angielskim, systemem informatycznym, służącym do gromadzenia, przetwarzania i udostępniania danych o polimorfizmach genetycznych, immunogenetycznych oraz mikrobiologicznych. Użytkownikami systemu będą przedstawiciele przemysłu (głównie farmaceutycznego oraz biotechnologicznego), nauki (ośrodki badawcze, jednostki medyczne) oraz edukacji (wyższe uczelnie) na terenie całej Unii Europejskiej i poza jej granicami. Dostęp do zasobów systemu jest bezpłatny, jednak możliwość korzystania z pełnej funkcjonalności wymaga rejestracji i logowania. Strona 6 z 30

7 4 Standardy i założenia 4.1 Wykorzystane narzędzia: Adobe Illustrator Adobe InDesign Adobe Photoshop ArgoUML (diagramy UML) Balsamiq Mockup (Szkice interfejsu) Google Drive (Opracowane dokumenty, ankiety) 4.2 Metodologia: Wymagania zostały zgromadzone w wyniku spotkań z zespołami konsultantów odpowiedzialnymi za moduły ImGen i MicroB oraz do określenia preferencji wykorzystano również ankiety (głosowań) Projekty graficzne zostały opracowane w oparciu o uszczegółowione makiety ekranów. Opis funkcjonalności został wzbogacony o makiety interfejsu Interfejs ogólny został zaprojektowany w oparciu o standardowe komponenty Ekrany analityczne zostały zaprojektowane z uwzględnieniem danych przyjmowanych i zwracanych przez narzędzia Interfejs został zaprojektowany w oparciu o standardowe komponenty Bootstrap 3 [1]. Możliwości wybranych komponentów zostały rozszerzone za pomocą bibliotek JavaScript (select2 [2], bootstrap dual Listbox [3]) Bootstrap 3 [1] zapewnia ergonomiczność użytkowania oraz responsywność platformy. Wykorzystanie frameworka zapewnia jednolity wygląd na współczesnych przeglądarkach W projekcie wykorzystano pakiet ikon FontAwesome [4], dzięki czemu przeznaczenie elementów interfejsu jest bardziej intuicyjne 5 Księga znaku Księga znaku została udostępniona do pobrania, jako Załącznik 1 do niniejszego opracowania - Strona 7 z 30

8 6 Projekt logotypu Projekt logotypu został udostępniony do pobrania, jako Załącznik 2 do niniejszego opracowania Zawartość projektu logotypu: Logotyp układ podstawowy - kolorystyka RGB i CMYK a) MGB_logo_RGB_podstawowe.ai b) MGB_logo_CMYK_podstawowe.ai Folder RGB a) Logotyp układ podstawowy w formacie JPG w kolorystyce RGB b) Logotyp układ podstawowy w formacie PNG w kolorystyce RGB c) Pakiet logotypów w układzie podstawowym w wariantach: kolor, achromatyczny, monochromatyczny w formatach *.ai, *.eps, *.pdf w kolorystyce RGB d) Folder z układami dodatkowymi - pion i poziom w formacie JPG i PNG oraz pakiety wariantów kolor, achromatyczny, monochromatyczny w formatach *.ai, *.eps, *.pdf w kolorystyce RGB Folder CMYK a) Logotyp układ podstawowy w formacie JPG w kolorystyce CMYK b) Logotyp układ podstawowy w formacie PSD w kolorystyce CMYK c) Pakiet logotypów w układzie podstawowym w wariantach: kolor, achromatyczny, monochromatyczny w formatach *.ai, *.eps, *.pdf w kolorystyce CMYK d) Folder z układami dodatkowymi - pion i poziom w formacie JPG i PSD oraz pakiety wariantów kolor, achromatyczny, monochromatyczny w formatach *.ai, *.eps, *.pdf w kolorystyce CMYK 7 Makiety graficzne Makiety graficzne interfejsu zostały umieszczone w niniejszym dokumencie. Dodatkowo wszystkie makiety zostały udostępnione w archiwum *.zip, jako Załączniki Strona 8 z 30

9 7.1 Moduł ImGen Strona informacyjna Strona 9 z 30

10 7.1.2 Formularz kontaktowy Strona 10 z 30

11 7.1.3 Okno wyszukiwania zaawansowanego a) WersjaA panel boczny Strona 11 z 30

12 b) Wersja B bez panel bocznego Strona 12 z 30

13 7.1.4 Okno wyników wyszukiwania a) Użytkownik niezalogowany Strona 13 z 30

14 b) Użytkownik zalogowany Strona 14 z 30

15 7.1.5 Okno przestrzeni użytkownika Strona 15 z 30

16 7.1.6 Okno importu danych Strona 16 z 30

17 7.1.7 Okno deponowania danych Strona 17 z 30

18 7.1.8 Okno analizy Strona 18 z 30

19 7.1.9 Okno weryfikacji danych nadzorca Strona 19 z 30

20 7.2 Moduł MicroB Okno wyszukiwania a) Zakładki rozwinięte Strona 20 z 30

21 b) Zakładki zwinięte Strona 21 z 30

22 7.2.2 Okno wyników wyszukiwania Strona 22 z 30

23 7.2.3 Okno pojedynczego rekordu a) Użytkownik standardowy Strona 23 z 30

24 b) Użytkownik nadzorca Strona 24 z 30

25 7.2.4 Okno dodawania nowego rekordu a) Wszystkie zakładki rozwinięte Strona 25 z 30

26 b) Zakładki formularza Dodaj szczep zwinięte Strona 26 z 30

27 7.2.5 Okno wyników wyszukiwania BLAST Strona 27 z 30

28 7.2.6 Okno analizy CLUSTAL Strona 28 z 30

29 7.2.7 Przykładowe okno O projekcie ze zredukowaną stopką Strona 29 z 30

30 8 Przykładowe realizacje elementów interfejsu w języku HTML Przykładowe realizacje najistotniejszych elementów interfejsu w formie testowej strony internetowej, zostały udostępnione do pobrania, jako Załączniki 4 do niniejszego opracowania - Plik ikony favicon (sygnet), wyświetlającej się w zakładce przeglądarki, został udostępniony do pobrania, jako Załącznik Referencje [1] Bootstrap 3, [2] Select2, [3] Bootstrap Dual List Box, [4] Font Awesome, 10 Załączniki Załącznik 1 - Księga znaku - Załącznik 2 Projekt logotypu - Załącznik 3a - Graficzne opracowanie ekranów pliki *.png - Załącznik 3b Graficzne opracowanie ekranów pliki *.psd - Załączniki 4 Przykłady realizacji ekranów w języku HTML Załącznik 5 Plik ikony favicon - Strona 30 z 30