Platforma MultiGenBank Wersja dokumentu: 2.1 robocza Data wersji dokumentu: 27.02.2015 Opracował: firma UNOLD Comp. Strona 1 z 30
1 Metryka dokumentu 1.1 Historia zmian Data wersji Autor Wersja Opis Uwagi 9.02.2015 Olgierd Unold 1.0 Założenie dokumentu Wersja robocza 22.02.2015 Bogumił Konopka 23.02.2015 Konrad Rymczak 23.02.2015 Marcin Zagórski 23.02.2015 Bogumił Konopka 27.02.2015 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. 23.02.2015 robocza 2.0 Olgierd Unold Właściciel/UNOLD Comp. 27.02.2015 robocza 2.1 Wersja robocza 1.3 Rozdzielnik Imię i nazwisko Stanowisko/Firma Data Wersja Katarzyna Bogunia- Kubik Ekspert dziedzinowy/iitd 27.02.2015 robocza 2.1 Barbara Wysoczańska Ekspert dziedzinowy/iitd 27.02.2015 robocza 2.1 Lidia Karabon Ekspert dziedzinowy/iitd 27.02.2015 robocza 2.1 Edyta Pawlak-Adamska Ekspert dziedzinowy/iitd 27.02.2015 robocza 2.1 Krzysztof Kuba Pawlik Ekspert dziedzinowy/iitd 27.02.2015 robocza 2.1 Agnieszka Korzeniowska-Kowal Ekspert dziedzinowy/iitd 27.02.2015 robocza 2.1 Roman Ptak Ekspert zewnętrzny/pwr 27.02.2015 robocza 2.1 Paweł Mackiewicz Ekspert zewnętrzny/uwr 27.02.2015 robocza 2.1 Strona 2 z 30
Dariusz Wójcik Koordynator Projektu 27.02.2015 robocza 2.1 Bogumił Konopka Analityk/UC 27.02.2015 robocza 2.1 Konrad Rymczak Główny programista/uc 27.02.2015 robocza 2.1 Marcin Zagórski Grafik/UC 27.02.2015 robocza 2.1 Olgierd Unold Właściciel/UC 27.02.2015 robocza 2.1 Strona 3 z 30
Spis treści Strona 1 Metryka dokumentu 2 1.1 Historia zmian 2 1.2 Zatwierdzenie 2 1.3 Rozdzielnik 2 2 Wprowadzenie 5 2.1 Cel dokumentu 5 2.2 Dokumenty powiązane 5 2.3 Wyłączenia z dokumentu 6 3 Streszczenie wymagań funkcjonalnych 6 4 Standardy i założenia 7 4.1 Wykorzystane narzędzia: 7 4.2 Metodologia: 7 5 Księga znaku 7 6 Projekt logotypu 8 6.1 Zawartość projektu logotypu: 8 7 Makiety graficzne 8 7.1 Moduł ImGen 9 7.2 Moduł MicroB 20 8 Przykładowe realizacje elementów interfejsu w języku HTML 30 9 Referencje 30 10 Załączniki 30 Strona 4 z 30
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 2.02.2015 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 10.02.2015 Z dnia 11.02.2015 Z dnia 13.02.2015 Z dnia 17.02.2015 Księga znaku MZ Z dnia 22.02.2015 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
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
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 - http://sentry.eordo.pl/multigenbank/multigenbank_znak.pdf. Strona 7 z 30
6 Projekt logotypu Projekt logotypu został udostępniony do pobrania, jako Załącznik 2 do niniejszego opracowania - http://sentry.eordo.pl/multigenbank/mgb_logo.zip 6.1 Zawartość projektu logotypu: 6.1.1 Logotyp układ podstawowy - kolorystyka RGB i CMYK a) MGB_logo_RGB_podstawowe.ai b) MGB_logo_CMYK_podstawowe.ai 6.1.2 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 6.1.3 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 3 - http://sentry.eordo.pl/multigenbank/mgb_png.zip. Strona 8 z 30
7.1 Moduł ImGen 7.1.1 Strona informacyjna Strona 9 z 30
7.1.2 Formularz kontaktowy Strona 10 z 30
7.1.3 Okno wyszukiwania zaawansowanego a) WersjaA panel boczny Strona 11 z 30
b) Wersja B bez panel bocznego Strona 12 z 30
7.1.4 Okno wyników wyszukiwania a) Użytkownik niezalogowany Strona 13 z 30
b) Użytkownik zalogowany Strona 14 z 30
7.1.5 Okno przestrzeni użytkownika Strona 15 z 30
7.1.6 Okno importu danych Strona 16 z 30
7.1.7 Okno deponowania danych Strona 17 z 30
7.1.8 Okno analizy Strona 18 z 30
7.1.9 Okno weryfikacji danych nadzorca Strona 19 z 30
7.2 Moduł MicroB 7.2.1 Okno wyszukiwania a) Zakładki rozwinięte Strona 20 z 30
b) Zakładki zwinięte Strona 21 z 30
7.2.2 Okno wyników wyszukiwania Strona 22 z 30
7.2.3 Okno pojedynczego rekordu a) Użytkownik standardowy Strona 23 z 30
b) Użytkownik nadzorca Strona 24 z 30
7.2.4 Okno dodawania nowego rekordu a) Wszystkie zakładki rozwinięte Strona 25 z 30
b) Zakładki formularza Dodaj szczep zwinięte Strona 26 z 30
7.2.5 Okno wyników wyszukiwania BLAST Strona 27 z 30
7.2.6 Okno analizy CLUSTAL Strona 28 z 30
7.2.7 Przykładowe okno O projekcie ze zredukowaną stopką Strona 29 z 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 - http://sentry.eordo.pl/multigenbank/mgb_html.zip Plik ikony favicon (sygnet), wyświetlającej się w zakładce przeglądarki, został udostępniony do pobrania, jako Załącznik 5 - http://sentry.eordo.pl/multigenbank/favicon.ico 9 Referencje [1] Bootstrap 3, http://getbootstrap.com/ [2] Select2, http://select2.github.io/ [3] Bootstrap Dual List Box, http://www.virtuosoft.eu/code/bootstrap-duallistbox/ [4] Font Awesome, http://fortawesome.github.io/font-awesome/ 10 Załączniki Załącznik 1 - Księga znaku - http://sentry.eordo.pl/multigenbank/multigenbank_znak.pdf Załącznik 2 Projekt logotypu - http://sentry.eordo.pl/multigenbank/mgb_logo.zip Załącznik 3a - Graficzne opracowanie ekranów pliki *.png - http://sentry.eordo.pl/multigenbank/mgb_png.zip Załącznik 3b Graficzne opracowanie ekranów pliki *.psd - http://sentry.eordo.pl/multigenbank/mgb_psd.zip Załączniki 4 Przykłady realizacji ekranów w języku HTML http://sentry.eordo.pl/multigenbank/mgb_html.zip Załącznik 5 Plik ikony favicon - http://sentry.eordo.pl/multigenbank/favicon.ico Strona 30 z 30