EU Horizon2020 MSCA ITN ETN ACROSSING

Transcription

1 Ref. Ares(2016) /04/2016 EU Horizon2020 MSCA ITN ETN ACROSSING 01 January December 2019 Deliverable D4.1 Project website and Mailing lists, Forum Deliverable Title Website Work Package WP4 Due Date 3/31/2016 Dissemination Level Public Main Author ISOIN Other Authors DMU Status of the Document Description Authors Review Date First draft Second draft Final Version José Antonio Carvajal, Elisa Jimeno, Miguel Ángel Estudillo José Antonio Carvajal, Elisa Jimeno, Miguel Ángel Estudillo, Liming (Luke) Chen José Antonio Carvajal, Elisa Jimeno, Miguel Ángel Estudillo Acrossing Partners 03/14/2016 Feng Chen 03/25/ /30/2016 Deliverable Summary This document corresponds to the Deliverable D4.1 Project website and Mailing lists, Forum of the Work Package 4 Dissemination and Exploitation. It describes, in the first place, the choice made for the implementation of the website compared to other technological options available. Next section describes the necessary modules to This project has received funding from the European Union s Horizon 2020 Research and Innovation Program, MSCA ITN ETN under grant agreement No

2 implement all the functionalities required for the website, with a special focus in accessibility requirements. Besides, theme selected for a responsive design, as well as different roles defined for the access to the website are also described. Next section provides an in-depth description about the content structure of the website, providing several snapshots to appreciate its look&feel. Finally and prior to the conclusions, there is a dedicated section for the other two main outcomes of the deliverable: mailing lists and forum. Disclaimer The sole responsibility for the content of this publication lies with the authors. It does not necessarily reflect the opinion of the European Commission. The European Commission is not responsible for any use that may be made of the information contained therein. Copyright This document may not be copied, reproduced, or modified in whole or in part for any purpose without written permission from the ACROSSING Consortium. In addition, an acknowledgement of the authors of the document and all applicable portions of the copyright notice must be clearly referenced. All rights reserved. This document may change without notice. P a g e 1 A C R O S S I N G D e l i v e r a b l e

3 Contents List of Acronyms... 3 Index of Figures Deliverable Description Content Manager or Conventional Website Necessary Modules File Browser Module CKEditor Module Captcha Module Drag & Drop Module Google Analytics Module Event Calendar Module Forum Module Other Modules Accessibility and Accessibility Modules Themes and Roles Content Structure Mailing Lists and Forum Mailing Lists Forum Conclusions Annex I. References P a g e 2 A C R O S S I N G D e l i v e r a b l e

4 List of Acronyms ACROSSING - API - Application Programming Interface CAPTCHA - Completely Automated Public Turing test to tell Computers and Humans Apart CCK - Content Construction Kit CMS - Content Manager Solutions ESR - Early Stage Researcher HTML - HyperText Markup Language SEO - Search Engine Optimization URL - Uniform Resource Locator WCAG - Web Content Accessibility Guidelines WYSIWYG - What You See Is What You Get P a g e 3 A C R O S S I N G D e l i v e r a b l e

5 Index of Figures Figure 1. Main requirements needed... 5 Figure 2. Mockup initial design of Acrossing Website... 5 Figure 3. View of the complete permissions list Figure 4. Website 7 Figure 5. Filebrowser module Figure 6. CKEditor module Figure 7. CKEditor interface Figure 8. Captcha module Figure 9. recaptcha module Figure 10. User Interface of the re-captcha module Figure 11. Drag&Drop module Figure 12. User Interface of the Drag&Drop module Figure 13. Google Analytics module Figure 14. User Interface of the Google Analytics module Figure 15. Event Calendar module Figure 16. Display of the calendar in large size Figure 17. Display of the calendar in smaller size Figure 18. CCK Accessibility module Figure 19. Accessibility modules Figure 20. Permissions for the FileBrowser module for the different roles defined Figure 21. Accessibility modules Figure 22. Selected theme: SIMPLECORP 7.X Figure 23. Website s main view Figure 24. Website s main menu Figure 25. diagram showing the navigation routes of Acrossing Website Figure 26. Home Section view Figure 27. Project Subsection view Figure 28. Rationale&Background Subsection view Figure 29. Research Subsection view Figure 30. Training Subsection view Figure 31. Consortium Section view Figure 32. Example of partner profile page Figure 33. Recruitment Section view Figure 34. Example of ESR vacancy Section view Figure 35. Gallery Subsection view Figure 36. Permanent Calendar Figure 37. News Section view Figure 38. Permanent News Figure 39. Contacts Section view Figure 40. Private Zone Figure 41. Repository of the Private Zone Figure 42. Website banners view P a g e 4 A C R O S S I N G D e l i v e r a b l e

6 1. Deliverable Description The present document belongs to the first task of the Work Package 4, Dissemination and exploitation, concerning the Task 4.1 Project website, mailing list and Forum. Thus, the main objective of the document is to present our work in order to create project awareness through Acrossing website platform and integrated tools for collaborative research (Forum). By the other hand it is described the mailing lists used in order to coordinate the work performed during the project. The purpose of Acrossing website is in the first place to provide open, precise and sufficient information of the project in general and specially regarding the 15 individual projects, where required knowledge and competences shall be explicitly described in personal and job specs. In the second place, the website must show overall project progress over time (in terms of deliverables, meetings, etc.). Finally in the third place, the website may show additional and information on tutorials, lectures and presentations from training and scientific events. When making a website, the first question to face is what is needed and what is required on the website. At first, from the above requirements, it is observed that it will have public content, user s administration (Partners) that will be able to make actions on the content of the website, and a private document manager (Figure1). Figure 1. Main requirements needed Once these initial set of requirements were gathered, and in order to accelerate the development process and validate the initial design of the website, several mock-ups were shared with the partners, as shown in Figure 2. Figure 2. Mockup initial design of Acrossing Website After the requirements and mock-up validation, next question was: Content manager or conventional website? The next section will solve this question. P a g e 5 A C R O S S I N G D e l i v e r a b l e

7 2. Content Manager or Conventional Website This section comprises the reasons for selecting Content Manager Systems (CMS) instead of a conventional website. Conventional website is more expensive since it has to be created from scratch. In the case of a content manager, there are inherent roles such as a user view, an administration view and some systems which make everything easier for different groups of people. As a result, it is concluded that the content manager is the best option for generating the website with low cost in staff and time. The next step is to select a content manager between the best solutions that are available in the market. From the most used content managers, we have chosen: Wordpress, Drupal and Joomla. As our experience and capability allow us to work easily with the three of them, Drupal has been chosen for the reasons explained below: Great control of roles and permissions: The permissions system specifies what could be done and by who in the site. Drupal has an extremely flexible permissions system. Drupal s modules, and every additional module installed in the site, add a series of permissions. There will be permission for access, creation and modification of the content and for the general administration of the site in several levels. Permissions will be linked to user roles. The administrator creates the roles, which are a combination of permissions, and then assign roles to the users. For example, there will be users that could access to restricted sectors; other users could modify some content but no other, etc. The permissions system is easily expanded through extern modules. Figure 3. View of the complete permissions list. Great Modules and theme community: There is a vast community of modules for Drupal: Captcha, repositories, etc. on the internet, as weel as a great community of developers (see Figure 4). The next section will address this issue. P a g e 6 A C R O S S I N G D e l i v e r a b l e

8 Figure 4. Website It is a CMS and at the same time a development frame, open source, developed in PHP. Its API and events model gives a wide adaptation and customization capability, making it very flexible on creating websites. Browser friendly. Drupal is user friendly to browse directly from the box (without additional modules), thanks to clean URLs and HTML code fulfilling the standard. There are modules for SEO (browser optimization). Nodes System / CCK / Views: Drupal content is inserted via nodes. A node is a content part. The nodes system in Drupal is robust and easily expandable (adding new fields and content types) using the Content Construction Kit (CCK). For every element included in the site it is possible to have a content type created. Some modules include predefined content types (i.e. the forums). For example, for a news site a type of content named news will be created with title and module and therefore additional fields as images and links will be added. Afterwards, the module Views could be used to show the lists or views of the content, combining the fields as wanted. Security. Nothing is 100% safe against hackers, but following Drupal s guides, it is possible to trust that the site is safe. Continuous security updates in Drupal s kernel and external modules are launched. Content categorization. Drupal s Taxonomy system is very sophisticated, flexible, and allows crossed and hierarchy categorization and free marked. With all these it is possible to create the structure of every site. Conclusion for choosing work with Drupal: Can I fill the necessities in a reasonably fast way with this content manager? Are there enough resources (documentation, community, extensions) to fulfill the previous requirements? As the answer for both questions is YES, Drupal will be selected. Next steps are: Choose a theme and obtain necessary modules for fulfilling the website necessities, paying attention to Accessibility and accessibility modules. P a g e 7 A C R O S S I N G D e l i v e r a b l e

9 3. Necessary Modules In this section the necessary modules to fulfill the website requirements will be listed. 3.1 File Browser Module A principal requirement is the documental management of the files of the project at a public and private level. After a detailed analysis of the different plugins available for this purpose, the module FILEBROWSER (Figure 5) has been selected due to its simplicity and quick use. This module permits the following cases of use regarding the documents stored: - Navigate between different folders and documents. - Create folders and subfolders. - Upload documents to a folder or to the root directory. - Download all the selected files in compressed mode. - Delete all selected files. - Rename files and folders. - Add a description. - Display date of creation and modification. 3.2 CKEditor Module Figure 5. Filebrowser module. Another module to be considered necessary is CKEditor (Figure 6), which improves user front-end. Figure 6. CKEditor module. The interface changes, in such way that now it has the following tool bar with several edition options as show in Figure 7: Figure 7. CKEditor interface. P a g e 8 A C R O S S I N G D e l i v e r a b l e

10 3.3 Captcha Module A captcha module has been included as shown in Figure 8, to prevent spam from our website.. Figure 8. Captcha module. Nevertheless, after some time, it was observed that there are programmed machines (aka, bots ) prepared to skip this module, so it was added a second captcha module named recaptcha (Figure 9). Figure 9. recaptcha module. The re-captcha module is also a captcha module created by Google that defines a much more advanced interface, as it is shown in Figure 10. P a g e 9 A C R O S S I N G D e l i v e r a b l e

11 Figure 10. User Interface of the re-captcha module. Once this latter module is aggregated to the website, spam mail was avoided and thus only proper s are received. 3.4 Drag & Drop Module In order to ease the use of ACROSSING platform, it was required a comfortable and simple interface, and this is the main reason to install de Drag & drop module (Figure 11). Figure 11. Drag&Drop module. P a g e 10 A C R O S S I N G D e l i v e r a b l e

12 For this purpose, the module allows us to drag documents or images to a certain part of the website in order to upload the file. Figure 12 is a snapshot of the user interface generated by this module: Figure 12. User Interface of the Drag&Drop module. This way, partners can quickly drag for instance 30 pictures of meeting so as to create a Gallery of the concrete meeting. 3.5 Google Analytics Module In order to perform a statistic control on the visits and their origin, among other relevant statistic aspects, the Google Analytics module was installed as shown in Figure 13: Figure 13. Google Analytics module. By means of the website and login with our , several statistical data is shown about the website of Acrossing (Figure 14). Figure 14. User Interface of the Google Analytics module. P a g e 11 A C R O S S I N G D e l i v e r a b l e

13 3.6 Event Calendar Module An important feature of the website is to mark the project meetings as well as other relevant events for the project, so for this matter the Event Calendar module was installed, which permits to aggregate evets in a determined date. This module also generated the necessary interfaces to display the events in different calendars. Next it is shown in Figure 15 how the interface is used to create an event in the calendar of ACROSSING. Figure 15. Event Calendar module. As it can be seen, the module has a title, a start date, and, optionally, a final date, as well as the event description. Once the event has been generated, it can be displayed in different ways through the calendar contained in the website as shown in Figure 16: P a g e 12 A C R O S S I N G D e l i v e r a b l e

14 Figure 16. Display of the calendar in large size. This calendar is shown in large occupying all the content of the web, but it can be displayed in a minor size in a lateral column that appears in all webpages of ACROSSING (see Figure 17), except when the previous calendar is shown. Figure 17. Display of the calendar in smaller size. The capability to add and/or erase an event of the calendar is only possible for a registered user with the role of partner, or for the website administrator. 3.7 Forum Module This functionality of the website is not currently developed but is planned to be delivered when the research of the ESR begins. However, a first approach to the development of the module has been carried out and two Drupal modules have been selected for future development (Advanced Forum and Forum Access), which provide different visual themes and a complete control to forum access. P a g e 13 A C R O S S I N G D e l i v e r a b l e

15 3.8 Other Modules Next, other less important but indispensable modules for the proper operation of the website are explained: - Contact module: this module generates contact form in the website to which the re-captcha modules is added. - Chaos tools module: this module does not create any user interface, but allows to ease the work for the programmer in order to generate the rest of the content. Besides, it has a module for Pages Management. - Date/time module: this module makes possible to have the Event Calendar modules, because it allows to have date views on the website. - Display Suite module: this module allow us to extend the display options for each type of entity. - MultiUpload file module: this module permits to attach several files at the same time. - Smtp Authentication module: this module allows the Drupal system to have a basic configuration in order to send and receive s. - Redirect module: this module permits to configure the flow among pages and indicate when a direct step page is required. - Rules module: this module allows configuring rules, based in actions, which meet some requirements. For instance, when an user enters the system, s/he must be sent to the page X, if it is the first time. - Views module: this is one of the most important modules, which is required by many of the others because it allows to create views for a certain kind of page, or to generate a view for a block. For instance, it can generate a list of News or Public Deliverables. P a g e 14 A C R O S S I N G D e l i v e r a b l e

16 4. Accessibility and Accessibility Modules Acrossing website follows Accesibility principles to provide an easy interaction and usage of the website. For this purpose, some accessibility modules have been implemented. Drupal s accessibility modules are aligned with the international guideline WCAG 2.0 which covers a wide range of recommendations for making Web content more accessible to people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity and combinations of these. The first module to add is CCK Accessibility shown in Figure 18, which provides the ability to make CCK fields accessible without breaking existing designs. Figure 18. CCK Accessibility module. Other interesting modules, among others, in this area are: Content accessibility module, to check the content accessibility on the web site; Accessibility WYSIWYG module (Figure 19) gives users instant feedback on accessibility problems and Accessibility Reporting module, to get reports on which pages have the most errors and other views that are helpful for human reviewers or content editors. Figure 19. Accessibility modules. In following section, the theme selection as well as roles defining process in Drupal will be described. P a g e 15 A C R O S S I N G D e l i v e r a b l e

17 5. Themes and Roles Theme selection is essential in a website, and it is related to the different profiles of users that are going to access to the website, regarding it is an H2020 project website. Roles: Three roles are defined: anonymous user, and registered users, namely partner and administrator. These roles have different permissions to interact with the Drupal modules included in the platform (see Figure 20), and in particular regarding the file browser module. The first role corresponds to a random user that visits the platform, which only have permissions to use the contact form, to view the published content and to use the search tool. The second role corresponds to a partner of the consortium, which in addition to the anonymous user s, has the following particular permissions within the file browser module: view directory listing, upload files, download archive, delete file, rename file, download files and create folders. Finally it is the administrator role, which has all the permissions for any Drupal module available. Thus, a requirement for the theme selected was to allow to display private zones of the website. Figure 20. Permissions for the FileBrowser module for the different roles defined. By the other hand, we look for a theme that can be configured and responsive, i.e., which can be displayed in different platforms as shown in Figure 21. Figure 21. Accessibility modules. In addition, the use of a clean font is recommended, with big titles and images with commented alternative text in order to comply with accessibility guidelines and recommendations. P a g e 16 A C R O S S I N G D e l i v e r a b l e

18 After a long comparative analysis of different themes that comply with the required conditions, the theme SIMPLECORP 7.X was selected (see Figure 22). And the theme view will be as shown in Figure 23: Figure 22. Selected theme: SIMPLECORP 7.X Figure 23. Website s main view Once the theme and all needed modules are finally selected, the next step consists in the introduction of the content in the website, which is detailed in the next section. P a g e 17 A C R O S S I N G D e l i v e r a b l e

19 6. Content Structure The site is organized in seven main sections, depicted in Figure 24, Figure 24. Website s main menu Figure 25 shows a hierarchy structure diagram with the overall navigation routes through the site. Figure 25. diagram showing the navigation routes of Acrossing Website P a g e 18 A C R O S S I N G D e l i v e r a b l e

20 Next, the content of each section is detailed separately. Home: in this section the Project main characteristics of the project are described, as well as the different targets are addressed (scientific, training and societal), as shown in Figure 26. Figure 26. Home Section view Project: this section shows in Figure 27the main objective of the project and how it is intended to be achieved. It has three sub-sections (rationale&background, research & training, depicted in Figures 28, 29 and 30) that provide further information about the state-of-art, the research methodological approach and the training programs to be developed during the project, respectively. P a g e 19 A C R O S S I N G D e l i v e r a b l e

21 Figure 27. Project Sub-section view Figure 28. Rationale&Background Subsection view P a g e 20 A C R O S S I N G D e l i v e r a b l e

22 Figure 29. Research Subsection view Figure 30. Training Subsection view Consortium: in this section, at the top, each of the beneficiaries partners is listed with their logo and a link to their personal page in the web. Besides, at the bottom, the associated partners are listed, also with direct links to their personal pages (see Figure 31). P a g e 21 A C R O S S I N G D e l i v e r a b l e

23 Figure 31. Consortium Section view Figure 32 shows an example of how the partners profile page is structured. At the top, it is the logo and presentation of the partner, describing its main capabilities and resources. Below, it is shown a direct link to the website of the partner. Finally, at the bottom, a short Bio of the responsible staff as well as his/her personal is displayed. Figure 32. Example of partner profile page P a g e 22 A C R O S S I N G D e l i v e r a b l e

24 Recruitment: this section shows at the top the eligibility criteria to apply for the Marie Curie scholarship promoted by the project. Below, it is shown a summary of the 15 ESR vacancies with direct links to a more detailed explanation (Figure 33). Figure 33. Recruitment Section view The following Figure 34 shows an example of one of the ESR vacancies. At the top it is the basic information of the ESR (duration, host location). Next, the objectives and expected results to be obtained by the ESR are detailed, together with the related planned secondments. Finally, at the bottom, specific instructions are provided to the candidates on how to apply for the ESR. Figure 34. Example of ESR vacancy Section view P a g e 23 A C R O S S I N G D e l i v e r a b l e

25 Dissemination: this section has up to four sub-sections corresponding to different types of dissemination activities that are expected in the project: Publications, Public Deliverables, Calendar Events, and Gallery of pictures related. Below, in he Figure 35, there is an example of the contents to be shown in this section: website logo, meeting photos from an important event, etc. Figure 35. Gallery Subsection view Besides, it must be noticed that the event calendar is permanently shown in the website in the right column (Figure 36), just at the top of the twitter plugin and below the search tool. Figure 36. Permanent Calendar News: this section plays an important role in the dissemination activities of the project, thus it will be updated during the course of the project with the achieved advances, as shown in Figure 37. P a g e 24 A C R O S S I N G D e l i v e r a b l e

26 Figure 37. News Section view Besides, the news are permanently shown in the website in the right column, just below the event calendar and the twitter plugin (Figure 38). Figure 38. Permanent News Contact: this section, as depicted in Figure 39, provides a contact form for visiting users, in order to provide further information upon request. It includes a captcha functionality to avoid spam. P a g e 25 A C R O S S I N G D e l i v e r a b l e

27 Figure 39. Contacts Section view Social Media: twitter, due to its huge extension and real-time engine, will be used as primary social network in order to communicate relevant news from the project, as well as other interesting information retweeted by the Acrossing twitter account. For this purpose, a twitter plugin has been inserted in the right column of the webpage, as it is shown in all the snapshots provided previously. Private zone: the previous sections described so far show the webpage of Acrossing as accessed by an anonymous user. Nevertheless, at the top-right of the page there is a login button that allows the login of a user with the role partner, and displays the private zone. This private zone (see Figure 40) permits partner users to access the features of the Filebrowser module in which they have permissions: they are allowed to upload photos to be inserted in the Gallery Section, to create Calendar Events, and to edit News, Public Deliverables and Publications. Moreover, there is a private document manager or repository where partners can up/down-load different kind of documents for daily work (administrative, deliverables, dissemination and financial material, meeting information, telco minutes, etc.). P a g e 26 A C R O S S I N G D e l i v e r a b l e

28 Figure 40. Private Zone Next it is shown in Figure 41 some images related to repository of the private zone, which is supported by the Filebrowser module. The first one details the folders structure currently defined. Next it is displayed a capture of the actions provided for the folder structure. In the third place, it is shown the options the user has in order to upload new files and create new folders in the folder structure. P a g e 27 A C R O S S I N G D e l i v e r a b l e

29 Figure 41. Repository of the Private Zone This way, partners could use the module as a private repository because it has been configured for placing all the files in a private area in the server and, in addition, it is required to be a user with partner role to access to this repository. Finally, a banner with the funding programmed is added at the bottom of the website as ii can be seen in Figure 42: Figure 42. Website banners view P a g e 28 A C R O S S I N G D e l i v e r a b l e

30 7. Mailing Lists and Forum 7.1 Mailing Lists ACROSSING will use mailing lists as one of the major communication means for project collaboration, management, dissemination and promotion inside and outside the consortium. Up to now two mailing lists have been created. One is the ACROSSING beneficiaries mailing list, which is used as the main channel for all beneficiaries to communicate, circulate and update each other on ACROSSING related events, collaborative research activities as well as public engagement and academic dissemination news. The members of the mailing include PIs and key team members from each beneficiary. The second mailing list is the associate partner mailing list which is mainly used to inform all associate partners of the latest events, activities, progress and also opportunities for them to participate. The mailing list includes the PIs and key members of all associated partners Finally, an ESR mailing list will be created once all ESRs are in place on due time. 7.2 Forum The Forum has the purpose of creating a common space to support the collaborative research of the ESR. For this purpose, in addition to the main forum page to be integrated in the Acrossing website, there will be specific forum containers for the different the ESR projects as well as the research application areas considered in the project. Besides, there will be messages and comments, which are the basic threads that the forum users are able to create when visiting the different forum topics. In order to manage the information introduced in the forum, there will be defined different roles to the users registered in it, which can be managed through the Forum Access module in order to control what user roles can view, edit, delete, and post to each forum. Finally, it will be defined a list of users who have administrative access on the forum (aka moderators), that will be in charge of a good performance of the forum, encouraging the participation and avoiding unacceptable behaviors (e.g. trolls). The Forum functionality will be aggregated to the website platform when the ESR recruitment has finished and the (D1.1, M9), and the career development plans (D1.2, M9) are defined for the selected candidates to start to work. P a g e 29 A C R O S S I N G D e l i v e r a b l e

31 8. Conclusions This document presents Acrossing website as part of a comprehensive dissemination strategy that specifies a common project reference identity, specific tools and activities adapted to the respective target groups (basically partners, ESR candidates and the general public), a clear communication policy and an internal assessment procedure. The project website described in the document therefore presents the overall process that will be followed by the consortium to optimize the awareness of the project s output as well as the dissemination of project results to all relevant stakeholders, both at a general level as well as at the level of each individual research outcome. To improve further the dissemination of the project, maintenance tasks are required to update input of information periodically, including the the collection of news, events, public documents, according to the project development. The website of the project will be available at least, two years after the finalization of the project. P a g e 30 A C R O S S I N G D e l i v e r a b l e

32 Annex I. References [1] [2] [3] [4] [5] [6] P a g e 31 A C R O S S I N G D e l i v e r a b l e