A web system to engage people to reducing the environmental footprint of a school

. This paper describes the development study of a solution to promote the Eco-Schools program for a higher school (ESTIG). The solution should communicate the actions and results of the Eco-Schools program, raise awareness from school all members to environmental education and involve the school community to save resources and to make selective waste collection through their monitoring. This Web system is composed by a front-office and a back-office and was developed according to principles and techniques of the software engineering area. The front-office were validated through user tests with 23 participants. In general, for generic tasks participants found the system easy to use and it was efficient and effective. For a more complex tasks participants had more difficulties to use and the system didn’t present so efficient and effective. There is a space to improve this system in order to involve more school members to environmental protection and education extended to other schools.


Introduction
This paper reports the development study of a web system solution to promote and disseminate the Eco-School programme [1] in the ESTIG (Higher School of Technology and Management) together with school members and local community. The ESTIG is a higher school that is part of the Polytechnic Institute of Beja, in Portugal, and it was awarded by ABAE [2] with green flag of Eco-Schools since 2015.
To have success in the Eco-Schools program it's crucial to develop a participatory approach involving students, teachers, staff and the local community and raise awareness stakeholders to environmental education. The Eco-School programme has specific goals defined in eco-codes and several actions and initiatives that should be communicated, monitored and evaluated. It's important involve all the stakeholders through updated and reliable data about project actions and results. The aim of this project is to answer to those requirements that allows all the stakeholders to be informed and involved in this Eco-School programme. The Web technology was chosen because allows all target members to consume and share relevant information in the internet public space, also due to the familiarity of use and its interactive, fast and accessible way.
The Web system has two sub-system: a back-office and a front-office. This last one allows school members to explore programme information (action plans, ecocodes, among others) and relevant activities and events. In this sub-system, students, teachers and team members can also monitor relevant data about recycling collects done (e.g. plastic, paper and batteries), from resources consumption (e.g. water and electricity). The front-office should provide to school members some environmental educative games, as well, allows them to share suggestions and ideas to reducing the environmental footprint of the school. The back-office is used by responsible council members to manage data that feed the front-office. In particular, the more important task is to record data about resource consumptions and recycling collections. For each type of data should be possible to define the goals amount (defined in action plans) for certain time periods (e.g.: a month or a year). This helps community members to better perceive if the environmental goals for each school are been achieved. We argue the access to this data can improve the motivation of the school members to better save and use the school resources. This software project was developed on the waterfall methodology. The system analysis was the first phase were requirements were gathered and elicited from stakeholders (local eco-schools officials, school officials, teachers and students) and other sources using interviews and document analysis. After this, it was developed the system design composed by the specification of the data model, graphical user interfaces and software architecture based in standard guidelines for this kind of systems. The system implementation was supported on the Laravel PHP framework [3], database management system MySQL [4] and the Laragon Web server system [5]. The validation phase was focused in two parts: system requirements and usability. In the system testing was verified if each functionality of code is correct and according to the requirements. The usability test tried to check if the system is easy to use, efficient and effective for users.
The usability tests of the back-office were developed by a small number of users that are members of the ecoschool's program that are familiar with web interfaces. They found the system easy to use. Some new ideas and suggestions were expressed by those users and should be taken in account to improve the system. The front-office was tested by 23 students who developed three representative tasks on the system. For tasks where the goal is to get generic data from the website the participants found the system easy to use and their performance was efficient and effective. For a more complex tasks the system didn't allows users to be so efficient and effective as intended. When users were questioned about the importance of this system to promote eco-school program they did not respond enthusiastically about this issue. This suggests there is a long journey to stimulate school members to the environmental issues. This system can help all of them to wake up for this problematic and to participate actively in find solutions for a better environment. This paper has several six textual sections. The first one is the "Introduction" where is presented the problem and the solution provided. The "Background" section offers to reader some information about the Eco-School program. The "Project Design" section describes the data model, the user interfaces and software design. The "Implemented System" section describes the features of the front-office and back-office. The "System Validation" section describes the user tests performed and their main results. Finally, the Conclusions and Future Work summarize the main elements of this project.

Background
In this section it's presented the features of the Eco-Schools program.

Eco-school project
The Foundation for Environmental Education (FEE) [6] is the world's largest environmental education organization with members in 77 countries. Through five ground-breaking programmes, they empower people to take meaningful and purposeful action to help create a more sustainable world.
The Eco-Schools [1] is one of the five programmes managed by FEE. It's the largest global sustainable schools programme -it starts in the classroom and expands to the community by engaging the next generation in action-based learning. There are 51 000 schools and 67 countries that are partners of Eco-Schools program. In 2019, Eco-Schools celebrate 25 years of excellence in the field of Environmental Education and Education for Sustainable. The Eco-Schools intends to encourage young people to engage in their environment by allowing them the opportunity to actively protect it [7]. According to them, the education for environment should start in the classroom, which expands to the school and eventually promote changes in the community at large. Through the programme, young people can be able to help in environmental management policies of their schools, ultimately steering them towards certification and the prestige which comes with being awarded a Green Flag. The Eco-Schools programme is an ideal way for schools to improve the environment in both the school and the local community, and in their families, school staff and local authorities. The implementation of this programme intends to achieve different goals [7]: (1) Includes everyone in the community, (2) Improves School Environments, (3) Motivate students to present solutions to environmental problems Connects Globally, (4) Improves Attitudes in students for sense of responsibility and to cultivate a sustainable mindset, (5) Involves Communities like the local community from the very beginning, (6) Connects Globally not only in local level, but also with national and international institutions. The Eco-Schools programme consists of three structural elements -The Seven Steps Framework (SSF) [8], the Eco-Schools Themes, and Assessment for the Green Flag [7]. The seven steps framework can be visualized in the Figure 1. The first step intends to constitute an Eco Committee that drives all the Eco-Schools process and will represent the ideas of the whole school. The second step is to carry out a sustainability audit that helps the school to identify its current environmental and social impact and their strong and weak points. Based on the previous step, the third step should create an action plan of the Eco-Schools work in this area. The fourth step is to monitor and evaluate the project, to find out whether the action plan is followed. The fifth step is related to the curriculum work and try to link Eco-Schools activities to the curriculum. The sixth step intends to inform and involve getting everyone on the project. The work of this paper is integrated in this step because the proposed solution intends to improve the communication and engagement of all scholar members for this issue. In the seventh step must be produced an Eco Code as a statement that represents the school's commitment to sustainability. Usually schools can then apply for and be awarded the Green Flag if are compliant with the 7 steps during a time periods of one or more years country dependent.

Project design
The project design of this system followed the traditional methods from software engineering area [1]. The web system data should be organized in a structure that allows users to manage different content operations (create, read, update and delete). So, it was developed a data model that will support the physical model of the database. The user web interfaces were developed according to usability principles and rules of human computer interaction area [9] [10]. First, it was developed nonfunctional prototype composed by user interfaces wireframes to be validated by representative users in order to reach the final interfaces. The software design was supported by a classes structure that are aligned with the data entities because it was used the Object-Relation Mapping (ORM) technique. The classes diagram was developed using the unified modelling language (UML) language [9].

Data model
The model data was designed according to the requirements of the project and supported in relational approach. It was developed a relation entity diagram (RED) to specify the main data entities and the relations between them. The Figure 2 shows one part of the relation entity diagram where are identified the entities "User", "Event", "Activity", "Partner" and "Media".
The "user" entity represents the user data such as the password and username required to authenticate him in the system. Also, all the publications of events and activities contain the user reference to create these contents. The "Event" entity describes the events promoted and developed by the partners of our ecoschools or by other external entities. These events can be public sessions, symposiums, ceremonies and other moments defined for a predefined time period. The "activity" entity defines the set of actions and steps to achieve some goals related to the eco-schools. One example of activity is the development of a campaign to collect electrical and electronic equipment from students, teachers and staff of the school. Both events and activities entities have a relationship with the "Partner" entity because these elements can be promoted by one eco-school partner. The "Partner" entity represents the external institutions who joined the project and share common goals and resources to its success. The events and activities contents created in the web system can also be published in the social media networks, like Facebook or Twitter. So, there is a one to one relationship between the "Media" entity and the "Event" and "Activity" entities. One can also see that there are a one to many relationships between the "user" and "event" or "activity" because one user can create several events and activities, but one of these entities is only created by one user. Other important part of the data structure is composed by the entities "Resource", "Recyclable", "Goal" and "School" as exhibited in the Figure 3.
The "Resource" entity describes the materials and objects to recycling collect for each school, like paper or plastic. That entity can also represent other resources like electricity or water that school wants to save or reduce its consumptions. The "Goal" entity defines the goals about the collected resources amount or resource consumptions for a certain time period. There is a one to many relationships between the "Resource" and "Goal" because one resource can have several goals for different times and one goal has only one resource associated. The "Collection" entity defines the amount of one resource that are collected for the system to be recycled or the quantity the consumed resource, for a certain time period. There is a one to many relationships between the "Resource" and "Collection" because one resource can have several records of collected resources for different times and one resource should have only one Collection associated. The "School" entity describes the different schools that compose the higher education institution. So, each school can define its own goals to collect resources or saving consumptions. Each school records its own collected or consumed resources. In this way there is a one to many relationships between the "School", and "Collection" and "Goal", respectively, because each school can have several records of collected resources for different times and can have various goals. On the other side, one goal or one collected resource can only be associated for a one school. Each school has own council to manage the eco-school programme. Also, it's possible to user send messages to a specific email contact in each school. In the Figure 4 is possible to analyze the "Council_Member", "Contact" and "Message" entities, as well the described previously entity "School".
Each school council has several members with different positions and functions. This is reflected by a one to many relationships between the "School" and "Council_Member" entities. On other hand, the relationship between the "School" and "Contact" entity is one to one because each echo-school has just one contact address and recipient. The system allows user to send messages by email and at same time will be recorded in system database. So, there is a one to many relationships between the "Contact" and "Message" entities.
After the validation of this data model occurred the normalization process of database to support its physical model.

User interfaces
The user interfaces of the front-office were developed in iterative way and user centered. It was applied principles and rules [10] [11] of the interfaces design with usability and according to the project requirements.
The main principles applied in the design process were learning, robustness and flexibility. The first one should allow each user to learn using easily the system without requiring great memory overload for short time or longer time tasks. The robustness allows user to understand easily the system status, with quickly responses, as well, allowing user to recover from errors. The flexibility can offer different ways to develop the same task, as well, can personalize the interface. Before to design the user interfaces it was developed a task and user analysis to better understand the tasks, use context and the different user profiles. The system should be used by eco-school members and other visitors and by data admins. The first ones can develop tasks to visualize different contents, like events, activities, collected materials and resource consumptions, by time periods, among other relevant information. The data admins can create, update and delete different contents and change parameters of the system. After the tasks, users and context specification it was developed some use scenarios for the most relevant and complex tasks. These scenarios are stories that allowed eco-schools managers to better check if the tasks are according to their requirements. At the same time are useful for designers to validate the main elements that will be applied in the user interfaces. After that validations, it was developed a nonfunctional prototype supported on fidelity medium wireframes for the main and representative web pages.
In this section, are presented two examples of the most representative wireframes that were developed from the front-office. The first one is the homepage proposal as one see the Figure 5. The layout of all the pages of the website is similar, including the homepage. In a top there is the header containing on the left the eco-school logotype, after the title and aside the main menu. This has the main options to develop the intended tasks, like getting contents about the project, monitor the collected and consumed resources, the events and activities, eco-games and contacts. In the page bottom there is the footer containing the address and contact of each eco-school project, as well, the logotypes of each project partner. Below the header is the contents area. In this first proposed interface is exhibited one image carrousel like a slide show where are shown the last developed events and activities. Below its are the different options to get monitoring different school resources according to the goals of each eco-school project. This interface was object of analysis by eco-school members that recommended some changes mainly in the position of some contents. The most complex and rich task in the system is the monitoring of collected and consumed resources for a chosen time. In the Figure 6 is exhibited the wireframe of the monitoring page. This interface shows the consumed water for each month (first column in the

Figure 4 -Part three of the RED model
is in 3 rd column and the money cost in the last column. In the 4 th Column is presented the variation in percentage between the goal for each month and the effectively collected or consumed value for the same time. Above the data table there are the widgets to control the time period. By default, is showed the data for the months of the current year that have collected and consumed resources. In this case, the user has the flexibility to choose the intended data according to his preferences.

Figure 6 -The wireframe of the monitoring page
Eco-school members analyzed this interface and proposed some changes. The lack of the goal information in the data table was the most commented. That information for each month is very important for user understand the distance between the executed actions and the initially forecasted. All the other wireframes were analyzed by eco-school members and were also proposed changes that were considered in the final interfaces design.

Software design
The software system was developed on the web framework that uses oriented programming language and follows the Model-View-Controller (MVC) pattern. In this way, it was modeled an UML classes diagram of the MVC model layer. The model classes have two main functions: access to persistent data layer and manage the business rules. Most of these classes were mapped from the data entities described in previous section 3.1 because it is used the Object-Relation Mapping (ORM) technique. Beyond those classes it was designed other classes that supports important parts of the system functionality. This classes were derived from the process of normalization of the database. The classes properties were obtained from the data entities attributes and the designed methods were obtained from the respective business rules and from the CRUD (create, read, update, and delete) operations with persistent data.

The Implemented System
The system was developed on the Laravel Development Framework [3] coded with PHP language. This platform applies the MVC development pattern and ORM mapping, as system requirement. The "ecoschool" database is hosted in the database management system MySQL [4]. The views that produce the web pages are interpreted by the Blade [10] views engine. The views were coded with client languages HTML, JavaScript and CSS. It were developed different software components for the front-office and back-office of this web system. The back-office was developed on the Backpack for Laravel package [3]. This project supports an admin panel generator and it has a convenient structure of separate packages: Base, CRUD, LogManager, BackupManager, among others. The Backpack is suitable for the admin CRUD operations relatively to project data. The front-office was developed using software components and modules on one Laravel framework instance.

Front-office
The front-office provides the user web interfaces where can be develop the intended tasks. The contents to visualize are divided in three main categories: (i) echoschool project and team, (ii) events and activities developed and (iii) actions to collect materials to recycle or to reduce consumption for certain resources. The page carrousel component proposed in design phase was changed by a text section that introduces the ecoschool project and the list of the last events and activities is positioned in the final of contents area. One typical example of one page where user can search data about resources consumption is evidenced in the Figure 8. This case is about water consumption for year 2018.

Figure 8 -Page to search water consumption
The web interface in Figure 8 shows in 2 nd column of the data table the year goal amount of water that is planned to consume in 2018 for the ESTIG school. The value is 608m 3 . At the end of the year, as exhibited in 3 rd column, the total consumed was 615m 3 . The variation is shown in the 5 th column in percentage. For this case was 101,15% which means that water consumption was unfortunately higher than the goal for the school in 2018. It's possible user to visualize also the information in graphical mode, disaggregate by months. Looking at the chart we found that February and December are the months with more consumption and August and September are the smallest. This makes sense because the school is in holidays all the August month and half of September.

Backoffice
The Figure 9 shows the layout from the back-office divided into two parts: main menu on the left and data manager area on the right. The main menu has the options to access interfaces where admin can perform CRUD operations on the data entities, like resources, goals, collection, user, events, activities, among others. In that Figure, is exhibit the data manager where each row on that table represents one record. Each one represents a resource consumption or collect to recycling described by the following properties: amount, cost, "from" and "to" dates. The last two columns provide the widgets to edit or delete the respectively record. Above the data table is positioned the add widget that allows admin to create a new record.

Figure 9 -Example page of the back-office
The Figure 10 shows a page example with a web form to edit a record, in this case the goal for the plastic recycling collect between dates. In this form, admin must choose the respective resource, the school affected, the goal amount (quantity) for a certain time period between "from" and "to" dates. The web form to create one goal record is like the edit form.

Figure 10 -Example page of a form to edit a record
These interfaces should be easy to use because are supported in common widgets on web pages like datepicker and dropdownbox. The fields of the forms are automatically validated when admin submits that data. There are validated the required fields, data formats (e.g. date fields) or data type (numeric fields don't allows to insert alphanumeric characters).

System Evaluation
The back-office and front-office systems were validated with users. The back-office was validated in an informal way using as participants three members of the ecoschool council program. These participants performed some traditional back-office tasks related to resources, collections and goals management, as well, the publication of events and activities records. Some problems or difficulties were detected during the tests, based on the tasks observation and comments expressed by users. All the problems were recorded and were fixed in the system. The front-office was formally tested by 23 participants that are all students from the ESTIG school. It was developed a user tests in a classroom using their own computer. The average age was 24,9 (min. 20 and max. 43), 21 males and 2 females. Before the user test some questions were asked. From the 23 users only 5 knew the ESTIG eco-school program. Twenty participants consider themselves to be advanced users in the web technologies and three are considered themselves medium. Regarding to browsers, 5 users used Firefox, 4 used Opera and 14 used Chrome. It was proposed for users to perform 3 different tasks. For each one, user must first read the task statement in paper guide provided by the test moderator. Each task starts from the homepage (starting point) until the requested information is found. When finished the task, each participant should record on the guide the time spent to develop the task, the answer with the found information and rate the question "how easy was to find the asked content" in a scale 1 (less easy) to 5 (most easy). The statement of the first task was to find in the system the student name that is eco-school council member in representation of the Multimedia graduation program. In average users spent 52,26" to perform the task (min. 25'' and max. 125"). The common time to develop this task is until 40". The average value is bigger due to two outliers' users. Twenty-one users answered correctly the student name and two of them missed. Users rated the question about ease of use in average to 3.57. These results show that great majority of users develop easily and effectively this task on the system. The statement of the second task was find what is the recipient to put the cigarette butts when people are in school campus according to the eco-code of the curricular year 2016/2017. In average users spent 33.65" to perform the task (min. 17'' and max. 120"). The common time to develop this task is until 40" which is aligned with the obtained average value. All answered correctly about the recipient to put the butts. Users rate the question about ease of use in average to 3.48. These results show all users develop easily and effectively this task. The statement of the third task was find the amount of water spent in the ESTIG school in May of year 2018. In average users spent 104.78" to perform the task (min. 48'' and max. 210"). The common time to develop this task is until 60". In this case users spent much more time than the normal. Fourteen users answered correctly the spent water amount and nine of them missed. Users rate the question about ease of use in average to 2.61. These results show users had difficulties to perform the task. The main problem is related to the Firefox and Opera browsers that doesn't allow these users to control correctly the date controls to choose May of year 2008. These nine users that used those browsers didn't get the correct answer. This problem should be quickly corrected because this task is the richest of this system and is the most complex to operate by user. After all the tasks had been performed each user were asked about three general questions to be rated in a scale 1 (less concordance) to 5 (most concordance). The questions were the following: (1) what is the importance level assigned to a one web system that provides information about your eco-school program for environmental education? (ii) what is the importance level assigned to a one web system that provides data about recycling collection in your school? (iii) Do you consider that online data about recycling collections and savings and wastes consumptions should motivate scholar members to better achieve environmental goals? The questions (1), (2) and (3) were rated in average respectively to 3.87, 3.74 and 3.52. These responses are surprising for us. Although the values are considered good (between 3.5 and 4.0), we would expect higher values. This shows that the student population needs to be more aware of the importance of environmental issues in order to be more involved in programs such as ecoschools.

Conclusions and Future Work
This paper described the development study of a solution to promote the Eco-Schools program for a higher school. The digital solution should allow communicate the actions and results of the Eco-Schools program, raise awareness from school all members to environmental education and involve the school community to save resources and to make selective waste collection through their monitoring. A Web system composed by a front-office and a backoffice was developed according to principles and techniques of the software engineering area. The frontoffice was validated through user tests with 23 participants. For generic tasks the participants found the system easy to use and it was efficient and effective. For a more complex tasks like getting data from the water consumption for a specific month and year participants had more difficulties to use it and the system didn't allow task to be so efficient and effective as intended.
When participants were questioned about the importance of this system to promote eco-school program and to monitoring relevant data that motivated them to good environmental practices they did not respond enthusiastically. This shows that the student population of the school is still not aware of the environmental protection issues and should be more motivated by the eco-school program mainly using this improved digital tool. For the future it's necessary to improve the system, continuing to audit the user feedback and expand this system to be used by the other 3 schools of the Polytechnique Institute.

Technical
Conference entitled Environmental Engineering, Photogrammetry, Geoinformatics -Modern Technologies and Development Perspectives" funded by the Polish National Agency for Academic Exchange under the International Academic Partnerships Programme.