D1.6 Project website, functional analysis POLYCARE Project

Transcription

1 D1.6 Project website, functional analysis POLYCARE Project Version: May

2 DOCUMENT CONTROL Title: Project website, functional analysis Date: May Author: Everis Distribution: European Commission and Polycare consortium Project: Polycare (GA ) Filename: _Polycare_REP_Project website_v01r00f DOCUMENT CHANGE RECORD Date Version Author Change Details April 29th Everis Initial version Page 2 of 38

3 TABLE OF CONTENTS 1 EXECUTIVE SUMMARY INTRODUCTION Purpose of this document Basics FRONT- END DISPLAY ANALYSIS Master page Head section Content area Footer area Home Page Video About section News section Calendar section Pilot sites section Contact us section About Overview Objectives Multimedia Gallery Project Work Plan Work Packages Publications Pilot Sites Impacts Results Consortium - Partners Events News BACK END FUNCTIONALITY Administration area login Administration area menu CK Editor contents Dynamic contents Page 3 of 38

4 1 EXECUTIVE SUMMARY This documents shows the functional analysis of the POLYCARE project website, although it is not consigned into the project description of actions, it is considered as a good idea to have a reference of what are the basics of the project website. This documents contains the needed sections to explain the website functional analysis and it may not follow the same structure than other committed project deliverables listed into the project description of actions. Page 4 of 38

5 2 INTRODUCTION 2.1 Purpose of this document This document deals with the necessary functionalities to be developed into the project website from the end - user point of view, also including the administration sections (back end). 2.2 Basics The website domains are and and will be hosted in a commercial solution (multihosting). All the different elements of the areas described into the document will be displayed according to three cuts: Desktop display Tablet display Mobile display Defined sizes are: from 768 a 992 pixels assigned to tablet display. Above of that corresponds to desktop display and below of that corresponds to mobile display. Following the European Commission criteria, the website will be compliant with the last web browsers. Page 5 of 38

6 3 FRONT- END DISPLAY ANALYSIS 3.1 Master page Elements described in this section will be included in all the website pages. A master page containing all these sections will be developed to optimize the development, so this master page will contain three differentiate areas: Head Content Footer Head section Head section could contain the following elements depending on the shown display type: a) Logo: project logo is included b) Menu: menu allowing the navigation between the different web sections: About, Project, Consortium, Calendar, News y Contact. This menu will be fixed when scrolling down. c) Finder: generic search about whatever content included into the website. DESKTOP view Figure 1 Menu Desktop view TABLET view Figure 2 Menu Tablet view MOBILE view Figure 3 Menu Mobile view Page 6 of 38

7 When clicking in the correspondent icon (working on tablet and mobile view), the user is allowed to insert some text as shown in the following image Content area Figure 4 Search Tablet/Mobile view This area comprises all the content of the pages which are explained in the next sections of this deliverable Footer area This area could contain the following elements depending on the view: a) Partner logo: all the partners logos of the POLYCARE project are included with the correspondent links to each website, - EVERIS - SERVICIO ARAGONÉS DE SALUD - Comarca del Somontano de Barbastro - FRAUNHOFER - Universitaetsklinikum Bonn - ECHOSANTÉ - Interactive4D - PLUX Wireless Biosignals b) Footer menu: menu showing the different access to each of the sections of the webpage. c) Social networks: Access icons to the different social networks created to the project are shown: Facebook, Linkedln, Twitter and Youtube. d) Logo: project logo e) H2020 logo: H2020 disclaimer is included. DESKTOP view Figure 5 Footer Desktop view Page 7 of 38

8 TABLET view Figure 6 Footer Tablet view MOBILE view Figure 7 Footer Mobile view Page 8 of 38

9 3.2 Home Page In the POLYCARE homepage the most important project sections will be presented to give the correspondent importance to each of them. It will displayed in three possible ways: A. DESKTOP view Figure 8 Home Page Desktop view Page 9 of 38

10 B. TABLET view Figure 9 Home Page Tablet view Page 10 of 38

11 C. MOBILE view Figure 10 Home Page Mobile view Page 11 of 38

12 Sections below described correspond to the content area of the master page (section of this document) Video Is the area which the project presentation video is embedded. Elements depending on the view are: a) Play video: it includes a button to play the video in a different browser window. b) Social networks: it contains all the social networks icons created to the project: Facebook, Linkedln, Twitter y Youtube. When scrolling up/down these icons stay and remain visible floating along all the webpage sections. This functionality does not exist on the mobile view. The defined view are: DESKTOP /TABLET view MOBILE view Figure 11 Home Page - Video section - Desktop/Tablet view Figure 12 Home Page - Video section - Mobile view About section This section shows a short summary of the About page described afterwards. The shown information will be extracted from the database and consigned from the webpage administration area. Elements of this area are: a) Summary: short summary of one of the main topics of the project established from the administration area. b) Main image: image configured from the administration area for this section. c) View more: link to the About section The predefined views are: Page 12 of 38

13 DESKTOP view Figure 13 Home Page - About section - Desktop view TABLET /MOBILE view News section Figure 14 Home Page - About section - Tablet/Mobile view This area will show the three last news selected from the contents administration area of the webpage Shown elements of this area are: a) News: three last news of the information stored into the database will be shown to the user. For every new an area containing an image, first 200 text characters and a read link to access to the entire new is reserved. All this information is stored into the table PW_News b) View more: link to the entire content of the News section Defined views are: Page 13 of 38

14 DESKTOP view Figure 15 Home Page - News section - Desktop view TABLET view Figure 16 Home Page - News section - Tablet view Page 14 of 38

15 MOBILE view Calendar section Figure 17 Home Page - News section - Mobile view This section shows the next events created from webpage administration area. Several area are shown: a) Calendar: calendar in which the days containing events are marked is shown. b) Event: at the calendar right side, an area containing some info regarding the selected day is shown. By default the shown info will correspond to the next event (closest to the actual day), the information title will be used as access link to the entire information of the event. The background image of this section will be the event image configured from the administration area. c) View more: link to the entire content of the Calendar section Defined views are: Page 15 of 38

16 DESKTOP view Figure 18 Home Page - Calendar section - Desktop view TABLET view Figure 19 Home Page - Calendar section - Tablet view Page 16 of 38

17 MOBILE view Pilot sites section Figure 20 Home Page - Calendar section - Mobile view This section contains all the information regarding the three different pilots (Proof of Concepts) which will be developed in POLYCARE project. An European Union map is used to select each of the pilot. When selecting each of them, a short summarize can be read and clicking on view more all the information of each pilot will be offered to the user. Defined view are: DESKTOP view Figure 21 Home Page - Pilot Sites section - Desktop view Page 17 of 38

18 TABLET view Figure 22 Home Page - Pilot Sites section - Tablet view MOBILE view Figure 23 Home Page - Pilot Sites section - Mobile view Page 18 of 38

19 3.2.6 Contact us section This section is intended to the user to be able to put in contact with the POLYCARE project management team. A contact form requesting some information (name, mail and comment) is shown to the user and the written information will be sent to info@polycare-project.com when clicking on Send it. DESKTOP /TABLET /MOBILE views Figure 24 Home Page - Contact Us section Page 19 of 38

20 3.3 About Coming from the master page, this page will contain into the content area the previously established contents from the administration area of the webpage. Three possible views should be taken into account: DESKTOP view Figure 25 About Page - Desktop view Page 20 of 38

21 TABLET view Figure 26 About Page - Tablet view Page 21 of 38

22 MOBILE view Figure 27 About Page - Mobile view Three different information areas: Overview, Objetives y Multimedia Gallery, will be shown as in the previous images in a menu located into the upper side. Page 22 of 38

23 3.3.1 Overview This section will show the information previously established from the administration area to the About-Overview section as follows: The webmaster will be able to modify the layout using the CK Editor plugin. DESKTOP view Figure 28 Overview Page - Desktop view TABLET view Figure 29 Overview Page - Tablet view Page 23 of 38

24 MOBILE view Figure 30 Overview Page - Mobile view Objectives This section will show the information previously established from the administration area to the About-Objetives section as follows: DESKTOP view Figure 31 Objectives Page - Desktop view Page 24 of 38

25 TABLET view Figure 32 Objectives Page - Tablet view Page 25 of 38

26 MOBILE view Figure 33 Objectives Page - Mobile view POLYCARE project objectives stored into the database will be shown, following by an image summarizing the way of achieving this objectives. The webmaster will be able to modify the layout using the CK Editor plugin Multimedia Gallery This section will show the content previously established from the administration area to the About-Multimedia Gallery section as follows: Page 26 of 38

27 DESKTOP view Figure 34 Multimedia Gallery Page - Desktop view TABLET view Figure 35 Multimedia Gallery Page - Tablet view Page 27 of 38

28 MOBILE view Figure 36 Multimedia Gallery Page - Mobile view A list of twelve images will be shown. By clicking on each of them the user could increase the visualization of these images. Figure 37 Multimedia Gallery Page Detail Mobile view Using the View more button the user will be able to see more images in groups of twelve elements. Page 28 of 38

29 3.4 Project As in the previous section ( About ), coming from the master page, this page will contain into the content area, the previously established contents from the webpage administration area. Several areas of information will be shown: Work Plan, Work Packages, Publications, Pilot Sites, Impacts and Results. The user will be able to select each of them using the menu located into the upper side Work Plan Defined Work plan methodology into the project description of actions will be shown Work Packages Defined Work Packages with their tasks and deliverables will be listed. A link allowing the public deliverables download will be included Publications A list containing all the publications (papers, research articles ) related to the POLYCARE project as well as their correspondent links will be presented Pilot Sites Pilot sites content will show the contents coming from the database using the following views:: DESKTOP view Figure 38 Pilot Sites Page Desktop view Page 29 of 38

30 TABLET view Figure 39 Pilot Sites Page Tablet view Page 30 of 38

31 MOBILE view Figure 40 Pilot Sites Page Mobile view Page 31 of 38

32 3.4.5 Impacts The previously established content (from the administration webpage area) to the Impacts section will be shown as follows: DESKTOP view Figure 41 Impacts Page Desktop view Page 32 of 38

33 TABLET view Figure 42 Impacts Page Tablet view Page 33 of 38

34 MOBILE view Figure 43 Impacts Page Mobile view Page 34 of 38

35 3.4.6 Results This section will contain the established results in the project and obtained through the work package WP8 Pilot Sites so it is needed to agree all the information to be shown into this section prior to publish it. This is why this section will be empty when publishing the webpage. 3.5 Consortium - Partners This section will show the information concerning to each of the POLYCARE partners stored into the database and established from the webpage administration area. 3.6 Events Coming from the master page, a calendar showing the created events from the administration area will displayed in a similar way that in the homepage. Firstly, the closest event will be shown and a list of future events created from the administration area will be displayed as follows: DESKTOP view Figure 44 Events Page Desktop view Page 35 of 38

36 TABLET view Figure 45 Events Page Desktop view MOBILE view Figure 46 Events Page Mobile view Page 36 of 38

37 Calendar behaviour on the mobile view will be as follows: 3.7 News Figure 47 Events Page Detail Mobile view Coming from the master page, a calendar showing the created news from the administration area will displayed in a similar way that in the homepage. Page 37 of 38

38 4 BACK END FUNCTIONALITY Inside the POLYCARE website an administration area to be able to manage the website contents will be created ( Overall, the website contents could be divided into two groups: a) Contents which will be modified only by the webmaster (administrator) to change the layout or the styles. They already exist so new entries into the database won t be created (i.e. Project Work Packages ). These contents will be managed with CK Editor. b) Dynamic contents which will be created along the project lifecycle (i.e: News, Events, Multimedia Gallery ). These contents will have their own administration forms which are explained into this document. With the aim of simplify this development, the administration area will have one unique view (desktop view) as it is supposed to be managed mainly from desktop personal computers. 4.1 Administration area login User/password pair will be used to enter to the website administration area. There will be a Cancel button which re-initializes the user and password fields and an Accept button performing the checking of the user/password pair. If this checking is right the content management areas will be shown, otherwise the message User/password are not right will be shown to the user coming back to the login display. 4.2 Administration area menu Once the user is logged, a welcome page will be shown, allowing the user the access to each of the manageable contents of the POLYCARE website. Each of these sections will contain different options following the considerations written in the previous sections of this document CK Editor contents Created contents to the website, which can be only modified (style, text) from the administration side (no created). This modification will be performed using a text editor, CK Editor. Manageable pages corresponding to this group are: Overview, Objectives, Work Plan, Work Packages, Pilot Sites, Impacts, Results and Consortium Dynamic contents These are life contents along the Project lifecycle so the webmaster (or administrator) will be able to create, modify and eliminate them consequently. Web forms to get all the information needed on each content will be developed to manage all the information in the more agile and easily way. Manageable contents will be: Multimedia Gallery, Publications, Events and News. Page 38 of 38