Achieving near Zero and Positive Energy Settlements in Europe using Advanced Energy Technology H2020-678407 D9.2 IMPLEMENTATION OF PROJECT WEBSITE Author: Katharina Langosch (TUM), Wen Pan (TUM)
Deliverable nature: DEC - website Dissemination level: Public Contractual delivery date: July 2016 Delivery date: July 2016 Version: 1.0 Number of pages: 20 Keywords: Website, broadcasting Lead beneficiary 2 TUM Participating beneficiaries: 1 UoA 2 TUM 3 BGU 4 UNIPG 5 OBU 6 CYI 7 TUC 8 ABB 9 ANERDGY 10 FIBRAN 11 ARCA 12 ECO 13 OPAC38 14 VASSILIOU 15 CONTEDIL 16 - JRHT Page 2 of 20
History of changes Version Date Change Page 1.0 25.07.2016 Final Version 20 Page 3 of 20
Executive Summary The dissemination and exploitation of project results plays a major role in the Horizon 2020 program. Today, an internet presence is the best way to reach the widest possible audience, including both stakeholders and the public. Interested parties can follow the development of the project in detail through reports and live broadcasts published on the website. For this reason, the ZERO-PLUS (Achieving near Zero and Positive Energy Settlements in Europe using Advanced Energy Technology) website was set up by the Technical University of Munich (TUM) in order to keep interested parties informed about the project s vision, objectives, partners, technologies, case studies, news, and outputs. TUM created a multilingual website to match the European scope of the project: 16 international partners and implementation in four different countries (France, Italy, Cyprus, and the United Kingdom). The following report introduces the structure of the website, with special attention paid to the broadcasting demonstration feature, through which the construction and monitoring progress can be observed in real-time. This will enable future residents and visitors from around the world to inform themselves about the project, their new neighborhood or their own future residences. This report documents the current state of the website. As the project develops, the individual web pages will be adjusted accordingly. Page 4 of 20
Table of Contents Executive Summary... 4 Table of Contents... 5 List of figures... 6 1. Introduction... 7 2. Implementation of a multilingual website... 7 2.1 General structure of the homepage... 8 2.2 The navigation bar and the main content area... 12 3. Broadcasting demonstration sites... 17 3.1 Real-time viewing of the project realisation... 17 3.2 Communication among stakeholders... 18 3.3 Real-time monitoring/supervision of the applied building energy technologies... 19 4. References... 20 Page 5 of 20
List of figures Figure 1. The structure of the ZERO-PLUS homepage... 8 Figure 2. The navigation bar of the ZERO-PLUS homepage... 10 Figure 3. ZERO-PLUS on Facebook (left) and Twitter (right)... 11 Figure 4. The footer of the ZERO-PLUS homepage... 12 Figure 5. Partner information on the ZERO-PLUS website... 13 Figure 6. Technologies information on the ZERO-PLUS website... 14 Figure 7. Case Studies on the ZERO-PLUS website... 14 Figure 8. Newsletter web page (above) and the first two digital newsletters of the ZERO- PLUS Project (below)... 15 Figure 9. Implementation of the RSS Feed on the ZERO-PLUS website... 16 Figure 10. The broadcasting demonstration site... 17 Page 6 of 20
1. Introduction A significant part of Horizon 2020 projects is the dissemination and exploitation of project results to all relevant stakeholders (project owners, building users, experts, architects, engineers, industry, SME, etc.) as well as the general public. The internet is the most effective means for disseminating information today. Having a website can facilitate connections to a large number of end users and interested parties not only in Europe, but worldwide, thereby maximising the impact of the project. For this reason, TUM created the multilingual ZERO-PLUS project website to make available all the relevant information about the project, the partners, the technologies, the case studies, news, outputs, and so forth. In this way, the project partners can report their work processes, announce events and news, as well as enable stakeholders and the public to inform themselves about new developments and applications. Moreover, through the broadcasting feature, visitors will be able to follow the construction and monitoring process of the ZERO-PLUS settlements. This report, Deliverable D9.2, documents the structure and features of the multilingual website in Section 2. Section 3 explains the broadcasting demonstration feature in more detail. 2. Implementation of a multilingual website The Technical University of Munich (TUM) set up the ZERO-PLUS project website using the open-source software Joomla! [1]. It is presently available at http://www.zeroplus.org and distributes information about the project, including the involved partners, technologies, case studies, outputs, news, etc. The website provides a platform for the project partners to report their work and to inform interested parties about the project and the near Zero and Positive Energy Settlement in each of the four case studies. The project website is thus an important part of the dissemination activities. Before designing the website, TUM compared a number of existing websites, including those of other EU projects, to identify the aspects of website construction most important to an effective project internet presence. Section 2.1 describes the general structure of the website in more detail, and the content and the structure of each navigation button is explained in Section 2.2. Page 7 of 20
2.1 General structure of the homepage The domain http://www.zeroplus.org was chosen for its recognisability and easy access via search engines. Upon accessing the website, the homepage appears as shown in Figure 1. The homepage displays basic elements such as 1) the background, 2) the project logo, 3) the navigation bar, 4) language selection, 5) the main content area, 6) a news feed, 7) a service area, 8) social media links, and 9) a footer. The ZERO-PLUS website is designed as a dynamic website, meaning that it adjusts automatically to the browser configuration of each individual visitor. 2 3 5 4 1 6 8 7 9 Figure 1. The structure of the ZERO-PLUS homepage Page 8 of 20
2.1.1 Background / Layout As the header, TUM used an image of a real settlement in the UK near the area where the ZERO-PLUS UK settlement will be built in order to highlight the ZERO-PLUS project's commitment to designing entire settlements. The background colour and the header image are static elements that remain constant when navigating the different pages on the website. Furthermore, the green colour scheme of the headlines emphasises the project's dedication to renewable and environmentally friendly energy, see Figure 1. It is important that visitors associate the website with the project, and as such, recognition value is essential. To further this goal, the website layout is also used for further media presentations as well as for the design of the newsletter. 2.1.2 The ZERO-PLUS logo By far the most important recognition feature of a project is the logo. For this reason, the ZERO-PLUS project had its own logo designed, see the top left of Figure 1. The ZERO-PLUS logo is a static element that always appears in the same location while navigating between the pages. As the logo alone does not reveal much about the project, the project title appears directly under the logo to communicate the goal of the project. 2.1.3 Navigation bar Most websites have a navigation bar that the visitor can use to access individual pages on the website. The navigation bar divides the website into broad topics accessible through the click of a button. The ZERO-PLUS website navigation bar has buttons leading to Home, About, Partners, Technologies, Case Studies, News, Outputs, and Contact, see Figure 1 and Figure 2. The navigation bar is located in the header and is always available while switching between the web pages. The current navigation button is highlighted in green, allowing visitors to easily recognize which page they are currently viewing, e.g. the page Outputs, as shown in Figure 2. Page 9 of 20
Figure 2. The navigation bar of the ZERO-PLUS homepage 2.1.4 Language selection English, French, Italian and Greek The ZERO-PLUS project is an international consortium of 16 partners from academia and industry (technology providers and case study owners). The project partners are from Greece, Germany, Israel, Italy, UK, Cyprus, Switzerland and France. The project case studies are located in Cyprus, Italy, UK and France. To provide information to as many stakeholders as possible, the ZERO-PLUS website is provided in the four languages of the case study countries. As English is one of these languages, a global audience can be reached. The icons for the language selection the flags of the four countries remain visible while switching between the web pages, see Figure 1 and Figure 2. 2.1.5 Main content area The central component of a website is the main content area, which displays the relevant text and images and is usually placed at the center of the page. On the ZERO- PLUS website, the main content area has a white background that makes it stand out from the rest of the page, see Figure 1. The content changes depending on the selected navigation button. 2.1.6 Latest news On the ZERO-PLUS website, the headlines of the latest news are placed on the right side on the page and remain visible while switching between pages, see Figure 1. In this way, news, events or recent activities can be announced centrally and quickly. By clicking on the Read More button, the visitor is directed to the web page containing detailed information about the news, event or activity in question. Page 10 of 20
2.1.7 Service area The service area of a website typically provides individualised access to the website. On the ZERO-PLUS website, the service area consists of the Gallery, the Login block and the subscription form for the Newsletter. It is located below the main content area and remains visible on all the pages of the website, see Figure 1. The Gallery consists of a slide show with one image per case study and a Read More - link to the page of each respective case study. The Login block is reserved for selected internal members of the ZERO-PLUS partners who can publish news on the website. The subscription area contains the registration form for the newsletter. All interested persons can subscribe to the website newsletter, which is released every four months. Subscriber information is stored in the database of the ZERO-PLUS Content Management System (CMS), making it possible to collect data to estimate the interest in the project. However, this method is not perfect, as subscribers can forward the newsletter to people not registered in the system. 2.1.8 Social media Today, information exchange often takes place via social media and therefore most websites have links to these new media platforms. By using social media, the project can reach a larger number of interested parties, in particular younger audiences. For this reason, the ZERO-PLUS website has links to Facebook, Twitter and Google+, where the project has already been announced, see Figure 1 and Figure 3. Figure 3. ZERO-PLUS on Facebook (left) and Twitter (right) Page 11 of 20
2.1.9 Footer The footer of a website forms the bottom part of a page and usually contains a copyright notice and/or reference to legal information. The footer is a static element on the website and is thus always visible. The footer on the ZERO-PLUS website includes information about the funding authority as well as the grant agreement number. Moreover, since the ZERO-PLUS website is hosted in Germany, an impressum and a privacy protection notice, both in German, are linked to in the footer. At the very bottom, a link to the ZERO-PLUS Cloud provided by owncloud [2] connects the project intranet (ZERO-PLUS Cloud) with the project website, see Figure 1 and Figure 4. Each partner can access this cloud platform from anywhere in the world, using a personal user name and password provided exclusively to project members. Figure 4. The footer of the ZERO-PLUS homepage 2.2 The navigation bar and the main content area Each selected page follows the same structure. At the top of the main content area, the title of the current web page is highlighted in green letters in a larger font size than the rest of the content. The respective content appears below. In the top right corner are the printer and envelope icons. Clicking the printer icon exports the main content area into a print version that the visitor can save as a PDF-file or print out. Using the envelope icon, a link to the current page can be sent to another person via email. At the bottom of the main content area, Next and/or Previous -buttons allow the visitor to navigate to the previous or next page within a section. The following subsections introduce the contents of each section. Page 12 of 20
2.2.1 Home Upon entering the ZERO-PLUS website, the navigation button Home is highlighted in green. In the main content area, the visitor is introduced to the project and its main goal, as well as the three parallel strategies for achieving this goal, see Figure 1. 2.2.2 About The next navigation button, About, contains two sub-categories: Vision and Objectives. On these web pages, visitors can inform themselves in detail about the vision and objectives of the ZERO-PLUS project. 2.2.3 Partners The Partners -page presents the international consortium which consists of 16 partners from academia and industry (technology providers and case study owners). After a short, general introduction to the consortium, all the partners are listed along with their logos. By clicking on the logo of a partner, the visitor is taken to a page with detailed information about each specific partner and its role in the project, see Figure 5. Figure 5. Partner information on the ZERO-PLUS website 2.2.4 Technologies The Technologies -page displays a synoptic diagram of all the components in the ZERO-PLUS project. Below this, all the renewable technologies used in ZERO-PLUS are presented. When clicking on an image, information about the specific technology appears on the next page, see Figure 6. Page 13 of 20
Figure 6. Technologies information on the ZERO-PLUS website 2.2.5 Case Studies The Case Studies -page follows the same structure as the previous categories. A representative image of each of the building types provides an overview of the project. When clicking on an image, the visitor receives information about each case study on the next page, see Figure 7. Figure 7. Case Studies on the ZERO-PLUS website Page 14 of 20
2.2.6 News Newsletter Activities The navigation button News contains News, Newsletter and Activities. On the News -page, all current news and events appear as they are published. The project partners can provide TUM with information about their events or news, and TUM publishes them on this page. By clicking on the Newsletter -button, a list of all published digital newsletters appears. As of the time of this writing, two newsletters have already been distributed to subscribers. The digital newsletter follows the same style as the website to establish recognition value. Since all the released digital newsletters are archived on the website, visitors can read past issues at their leisure, see Figure 8. Figure 8. Newsletter web page (above) and the first two digital newsletters of the ZERO-PLUS Project (below) Page 15 of 20
Activities or events can likewise be found in the News -section. This page is used to publish information about past, present or future activities and events, for instance the Kick-Off Meeting and the 1 st progress meeting. Moreover, an announcement about the new CIB Commission - TG93 Building Zero Energy Settlements - is located on this web page. All partners can announce further events by sending the relevant information to TUM. Since the News -content will be updated on a regular basis, these pages include a so-called RSS (Really Simple Syndication) Web-Feed, see Figure 9. The RSS-Feed automatically informs the visitor about any updates once the visitor has subscribed to the feed. To do so, the subscriber only needs to click on the RSS Feed-icon located next to the language selection. When subscribed, the user's browser regularly monitors the website and informs the user if new content is published, thus obviating the need to check the website manually. This monitoring system is implemented for the categories News, Newsletter and Activities. RSS for monitoring of the updates Figure 9. Implementation of the RSS Feed on the ZERO-PLUS website 2.2.7 Outputs The results of the ZERO-PLUS project are presented as reports. All finished public reports are accessible on the web page under Outputs. Visitors have the opportunity to download the public reports for free to learn about the current state of the project. 2.2.8 Contact The Contact -page contains an email address (info@zeroplus.org) which was set up by TUM for the ZERO-PLUS project. The visitors can use this project email address or the website contact form to send enquiries to the project team. The message is first sent to the web administrator (TUM). Depending on the nature of the enquiry, TUM Page 16 of 20
forwards the message to the appropriate person from the ZERO-PLUS consortium, who then replies. 3. Broadcasting demonstration sites As part of the ZERO-PLUS project framework, renewable energy technologies will be incorporated into the settlements. The performance of these technologies, i.e. demand, consumption, and technology interactions, will be monitored during the project, and then later evaluated and optimised. In addition, the construction process will also be broadcast online. Interested stakeholders and the general public thus have the opportunity to follow the construction and monitoring process of the integrated renewable technologies and their performance. Since the project is not yet in the construction phase, no measurements are running at present. Nevertheless, the broadcasting and data reporting functionalities have already been implemented on the website. Each case study has a Live View -link. By clicking on the link, the visitor is automatically directed to a page transmitting pictures and/or measured data, see Figure 10. Figure 10. The broadcasting demonstration site 3.1 Real-time viewing of the project realisation Once construction starts, web cameras installed on-site will provide a near real-time picture feed. Currently, the details concerning the installation and operation of the web cameras are being discussed among the partners, in particular the case study owners. The following questions still need to be clarified: 1. What are the general conditions for the installation of the web camera on site? Where can the web cameras be installed? (house, pylon or similar?) Page 17 of 20
Is there any steady electrical connection to run the web cameras available onsite? Do the web cameras require protection against e.g. the water? (installation indoor or outdoor) How can the web camera be fixed in a certain position? 2. How can installation and maintenance be managed on-site? Who can install the web cameras on-site? Who can provide maintenance for the web cameras on-site? 3. How can the webcam data be transferred to the server of the website? Is there any WiFi available on site? 4. What are the specific regulations concerning data protection in each of the four case studies? Will people agree to be filmed as part of the construction and monitoring process? What kind of data can or should be viewed on the web page? 5. When is the best time to start transmitting the webcam data? 3.2 Communication among stakeholders Both stakeholders and the public can use the contact form to pose questions to the project partners and receive specific information about the project, where and when this additional information is available and not confidential. In addition, the project also supports the exchange of information among the interested parties through social media. These platforms, in particular Facebook and Twitter, provide members of the public with the opportunity to voice their opinions and to create discussion groups about the project. The decision to outsource this user-to-user chat functionality was taken because German law states that the chatroom provider is legally responsible for the content written by users. Page 18 of 20
3.3 Real-time monitoring/supervision of the applied building energy technologies After the initial stage of construction work is complete and the renewable energy technologies come into operation, they will be monitored for a certain duration. As already mentioned above, the broadcasting and data reporting functionalities have already been implemented on the website. Each case study has a Live View -link. By clicking on the link, the visitor is automatically directed to a page transmitting pictures and/or measured data, see Figure 10. Figure 10The precise nature of the data to be transmitted is yet to be finally decided upon. Page 19 of 20
4. References [1] Joomla! software https://www.joomla.de/ [2] owncloud software https://owncloud.org/ Page 20 of 20