D4.4 Prototype demonstrator applications at Zaragoza · 2018-03-20 . Ready for internal review : UPM ZGZ . 0.9.1 2018-03-21 Data Management in Section 4 UPM, ZGZ 0.9.2 : 2018-03-23

D4.4

This project has received funding from the European Union’s Horizon 2020 research and innovation programme under grant agreement No 693319. Disclaimer: This document reflects the views of the authors only and the Research Executive Agency (REA) is not responsible for any use that may be made of the information it contains.

D4.4 Prototype demonstrator applications at Zaragoza

Project acronym: Mobile-Age

Project full title: Mobile-Age

Grant agreement no.: 693319

Responsible: UPM

Contributors: UPM, ZGZ, FTB, AUTH

Document Reference: D4.4

Dissemination Level: PU

Version: FINAL

Date: 05/06/2019


© Copyright 2018 – Universidad Politecnica de Madrid

History

Version Date Modification reason Modified by

0.1 2018-03-09 Initial draft UPM

0.9

2018-03-20

Ready for internal review

UPM

ZGZ

0.9.1 2018-03-21 Data Management in Section 4 UPM, ZGZ

0.9.2 2018-03-23 Revision from FTB and AUTH UPM

1.0 2018-03-29 Final reviewed deliverable ULANC

Contributors to this document

Document Chapter

List of Sections

Contributors Information

Name Affiliation

1. Introduction 1.1, 1.2, 1.3,

1.5, 1.6 Frank Berker Frank Reins

FTB FTB

1. Introduction 1.4 Christopher Bull ULANC-SCC

2. The Mobile-Age Ecosystem: Stakeholders and Users

All

Michail Papamichail Manolis Falelakis

AUTH AUTH

3. Demonstrator: Zaragoza – Collaborative Maps

All

Freddy Priyatna Laura Fernando Victor Morlan

UPM ZGZ ZGZ

4. Demonstrator: Zaragoza – Website for Senior Citizens

All

Freddy Priyatna Laura Fernando Victor Morlan

UPM ZGZ ZGZ

4. Conclusion All Freddy Priyatna UPM



Table of Contents

History ................................................................................................................................... 2

Contributors to this document .............................................................................................. 2

Table of Contents .................................................................................................................. 3

List of figures ......................................................................................................................... 7

List of tables .......................................................................................................................... 8

List of abbreviations .............................................................................................................. 9

Executive summary ............................................................................................................. 10

1 Introduction ........................................................................................................... 11

1.1 Objectives of WP4 ...................................................................................................11

1.2 Use cases scenarios across the four field sites .........................................................11

1.3 Objectives of this document ....................................................................................12

1.4 Scope and Relationship with other deliverables .......................................................12

1.5 Document Structure ................................................................................................14

2 The Mobile-Age Ecosystem: Stakeholders and Users ............................................. 15

3 Demonstrator Application at Zaragoza: Collaborative Maps ................................. 18

3.1 Introduction ............................................................................................................18

3.2 Key features ............................................................................................................18

3.2.1 Collaborative ....................................................................................................18

3.2.2 Responsive Design ............................................................................................18

3.2.3 Accessible .........................................................................................................18

3.3 Architecture ............................................................................................................19

3.3.1 Used data sources ............................................................................................19

3.4 Description of pages ................................................................................................19

3.4.1 Registration Page ..............................................................................................20

3.4.1.1 Description .................................................................................................20

3.4.1.2 Screenshot .................................................................................................21

3.4.1.3 Data Service Requests ................................................................................21

3.4.2 Login page ........................................................................................................22

3.4.2.1 Description .................................................................................................22

3.4.2.2 Screenshot .................................................................................................22


3.4.3 List Existing Maps .............................................................................................23

3.4.3.1 Description .................................................................................................23



3.4.3.2 Screenshots................................................................................................24


3.4.4 View Map .........................................................................................................25

3.4.4.1 Description .................................................................................................25

3.4.4.2 Screenshots................................................................................................26


3.4.5 Create New Map ...............................................................................................27

3.4.5.1 Description .................................................................................................27

3.4.5.2 Screenshots................................................................................................28


3.4.6 My Maps ..........................................................................................................29

3.4.6.1 Description .................................................................................................29

3.4.6.2 Screenshots................................................................................................30


3.4.7 Add Point ..........................................................................................................31

3.4.7.1 Description .................................................................................................31

3.4.7.2 Screenshots................................................................................................32


3.4.8 Add Line ...........................................................................................................34

3.4.8.1 Description .................................................................................................34

3.4.8.2 Screenshot .................................................................................................34


3.4.9 Add Polygon .....................................................................................................35

3.4.9.1 Description .................................................................................................35

3.4.9.2 Screenshots................................................................................................36


3.4.10 Complementary pages – Privacy Policy .............................................................37

3.4.10.1 Description.................................................................................................37

3.4.10.2 Screenshot .................................................................................................38


3.4.11 Complementary pages – Terms and Condition ..................................................38

3.4.11.1 Description.................................................................................................38

3.4.11.2 Screenshot .................................................................................................39


3.4.12 Complementary pages – Accessibility ...............................................................39

3.4.12.1 Description.................................................................................................39

3.4.12.2 Screenshot .................................................................................................40




3.5 Data Management ...................................................................................................41

3.6 Link to the demonstrator application .......................................................................43

4 Demonstrator Application at Zaragoza: Website for Senior Citizens ..................... 44

4.1 Introduction ............................................................................................................44

4.2 Key Features ............................................................................................................44

4.2.1 Relevance .........................................................................................................44

4.2.2 Responsive Design ............................................................................................44

4.2.3 Accessible .........................................................................................................44

4.3 Architecture ............................................................................................................45

4.4 Description of Pages ................................................................................................46

4.4.1 List Procedures (Tramites) ................................................................................46

4.4.1.1 Description .................................................................................................46

4.4.1.2 Screenshot .................................................................................................46

4.4.1.3 Data Service Request .................................................................................47

4.4.2 View Procedure ................................................................................................47

4.4.2.1 Description .................................................................................................47

4.4.2.2 Screenshot .................................................................................................47


4.4.3 List Programs (Programas) ................................................................................48

4.4.3.1 Description .................................................................................................48

4.4.3.2 Screenshot .................................................................................................49


4.4.4 View Program ...................................................................................................50

4.4.4.1 Description .................................................................................................50

4.4.4.2 Screenshot .................................................................................................51


4.4.5 List Activities (Actividades) ................................................................................52

4.4.5.1 Description .................................................................................................52

4.4.5.2 Screenshot .................................................................................................52


4.4.6 List News Articles (Actualidad) ..........................................................................53

4.4.6.1 Description .................................................................................................53

4.4.6.2 Screenshot .................................................................................................54


4.4.7 View News Article .............................................................................................55

4.4.7.1 Description .................................................................................................55



4.4.7.2 Screenshot .................................................................................................56


4.4.8 List Community Centers (Centros) .....................................................................57

4.4.8.1 Description .................................................................................................57

4.4.8.2 Screenshot .................................................................................................58


4.4.9 View Community Center ...................................................................................58

4.4.9.1 Description .................................................................................................58

4.4.9.2 Screenshot .................................................................................................59


4.5 Data Management ...................................................................................................61

4.5.1 Data Management of Procedures .....................................................................61

4.5.2 Data Management of Programs ........................................................................62

4.5.3 Data Management of Activities .........................................................................62

4.5.4 Data Management of News Articles ..................................................................63

4.5.5 Data Management of Community Centers ........................................................63

4.6 Link to the Demonstrator Application ......................................................................64

5 Conclusions and Outlook ....................................................................................... 65



List of figures

Figure 1: Mobile-Age Work Package structure and interrelationships .....................................13 Figure 2: Overview of the Mobile Age users and stakeholders in co-creation of open data-

based public services .............................................................................................15 Figure 3: MADE users and end users ......................................................................................16 Figure 4: CIDER Users ............................................................................................................17 Figure 5: Navigational Flow diagram of all pages of the app ..................................................20 Figure 6: Screenshot of the Registration page ........................................................................21 Figure 7: Screenshot of the Login page ..................................................................................22 Figure 8: Screenshot of List Existing Maps page .....................................................................24 Figure 9: Screenshot of View Map page .................................................................................26 Figure 10: Screenshot of Create New Map page .....................................................................28 Figure 11: Screenshot of My Maps page ................................................................................30 Figure 12: Screenshot of Add Point page ................................................................................32 Figure 13: Screenshot of Add Line page ..................................................................................34 Figure 14: Screenshot of Add Polygon page ...........................................................................36 Figure 15: Screenshot of the Privacy Policy page ....................................................................38 Figure 16: Screenshot of the Terms and Conditions page........................................................39 Figure 17: Screenshot of the Accessibility page ......................................................................40 Figure 18: ER Diagram of Collaborative Maps ........................................................................41 Figure 19: Architecture of Website for Senior Citizens ............................................................45 Figure 20: Screenshot of List Procedures page ........................................................................46 Figure 21: Screenshot of View Procedure page .......................................................................47 Figure 22: Screenshot of List Programs page ..........................................................................49 Figure 23: Screenshot of View Program page .........................................................................51 Figure 24: Screenshot List of Activities page ...........................................................................52 Figure 25: Screenshot of List News Articles page ....................................................................54 Figure 26: Screenshot of View News Article page ...................................................................56 Figure 27: Screenshot of List Community Centres page...........................................................58 Figure 28: Screenshot of View Community Centre page ..........................................................59 Figure 29: ER Diagram of Procedures .....................................................................................61 Figure 30: ER Diagram of Activities ........................................................................................62 Figure 31: ER Diagram of News Articles .................................................................................63 Figure 32: ER Diagram of Community Centres ........................................................................63



List of tables

Table 1: Overview of the use cases covered by the field sites .................................................11 Table 2: Sources of data used Zaragoza demonstrator...........................................................19 Table 3: Data Service Request – User Registration .................................................................21 Table 4: Data Service Request – Login ...................................................................................22 Table 5: Data Service Request – List Existing Maps ................................................................25 Table 6: Data Service Request – View Map ............................................................................27 Table 7: Data Service Request – Create New Map..................................................................29 Table 8: Data Service Request – View User Maps ...................................................................31 Table 9: Data Service Request – Add Point .............................................................................33 Table 10: Data Service Request – Add Line.............................................................................35 Table 11: Data Service Request – Add Polygon ......................................................................37 Table 12: Data Service Request – List Procedures...................................................................47 Table 13: Data Service Request – View Procedure ..................................................................48 Table 14: Data Service Request – List Activities ......................................................................53 Table 15: Data Service Request – List News Articles ...............................................................55 Table 16: Data Service Request – View News Article ..............................................................57 Table 17: Data Service Request – List Community Centres .....................................................58 Table 18: Data Service Request – View Community Centre ....................................................60



List of abbreviations

<Abbreviation> <Explanation> API Application Programming Interface

AUTH Aristotle University of Thessaloniki

BEM Block Element Modifier Methodology

CC-By-SA Creative Commons by Attribution-ShareAlike

CMS Content Management System

CSS Cascading Style Sheets

DOM Document Object Model

FTB Forschungsinstitut Technologie und Behinderung

GIS Geographic Information System

HTML Hyper Text Markup Language

ifib Institut für Informationsmanagement Bremen

JSON JavaScript Object Notation

NGO Non-Governmental Organization

OGS Open Geospatial Consortium

OS Operating System

OSCPSEP Open Senior Citizen Public Service Engagement Platform

OSM OpenStreetMap

PaaS Platform as a Service

POI Point of Interest

RCM Region of Central Macedonia

SaaS Software as a Service

SASS Syntactically Awesome Stylesheets

SCC School of Computing and Communications (Lancaster University)

SDK Software Development Kit

UI User Interface

ULANC University of Lancaster

UPM Universidad Politécnica de Madrid

URI Uniform Resource Identifier

W3C World Wide Web Consortium

WCAG Web Content Accessibility Guideline

WFS Web Feature Service

WMS Web Map Service

WP Work Package

XML Extensible Markup Language

ZGZ City of Zaragoza



Executive summary

This deliverable consists of the two demonstrator applications for the field site of Zaragoza: collaborative maps and a website for senior citizens.

The first demonstrator application is designed to empower citizens to create collaborative maps. There are two types of collaborative maps:

- Read-only map: in which only the creator can update the contents of the map and other users can only see.

- Read-write map: maps that can be updated by the creator as well as other users.

A collaborative map can be either read-only or read-write. Both of them permit the owner of the map to publish it so that others may benefit from the contents. While read-only maps can only be modified by the owner, read-write maps allow other citizens to contribute contents, such as point of interests or area. In addition to collaborative maps, a user may also create a private map, that only visible to herself.

The second demonstrator application is a website for senior citizens. This website has been designed and created so that senior citizens can use it as a portal having relevant contents for their activities and daily life.

This document is closely linked with deliverable D3.4 “Senior Citizen Engagement Report Zaragoza”, in which we describe the process of engaging senior citizens in Zaragoza in the process of creating friendly routes for senior citizens. Friendly routes are those routes having the following characteristics: useful in sense that they are routes that are taken by senior citizens in daily basis; safe and accessible in sense that those routes pose no threat to senior citizens and are easily accessible by people with reduced mobility; and consensus in sense that those routes are those that are selected and developed by senior citizens themselves. In addition to that, that aforementioned deliverable also describes the process of designing the website for senior citizens together with its evaluation.



1 Introduction

1.1 Objectives of WP4

WP4 relates to the development of • demonstrator applications for the co-creation processes in the four field sites (a)

Bremen (b) South Lakeland (c) Zaragoza (d) Central Macedonia and

• a set of generic mobile front-end components designed and built for accessibility and the needs of older adults

The objectives of WP4 are as follows: • Identifying the requirements for the demonstrator applications

• Preparing design studies, mock-ups and prototype as an input to the co-creation process

• specifying and building generic front-end components

• specifying the demonstrator applications under consideration of the requirements of the co-creation process

• building the demonstrator applications reusing generic front-end components

The work in WP4 is divided into tasks. This deliverable describes the demonstrators as the result of the tasks T4.3 and T4.4.

1.2 Use cases scenarios across the four field sites

The following table gives an overview of the use cases covered by the four Mobile-Age field sites. It contains a brief description of the initially planned service and the connection to the problem domain and the relevant data sets.

Table 1: Overview of the use cases covered by the field sites

Use Case ID

Socio-spatial Aspects of Social Inclusion

Extending Independent Living through Reducing Loneliness and Social Isolation

A Safe and Accessible City for Elderly People

Personal Health Information

Mobile Services

Map-based social networking and mobile open information services

Assessing the needs of older adults to extend independent living

Map-based data curation and collaborative map creation

Health-related open data information services for older adults

Problem Domain

Connecting people, open data & place through social networking for older adults

Assessing and tracking the service provision for older adults to support their independent

Empowering older adults to create collaboratively maps with accessible

Consuming open data feeds for older adults



Use Case ID

Socio-spatial Aspects of Social Inclusion

Extending Independent Living through Reducing Loneliness and Social Isolation

A Safe and Accessible City for Elderly People

Personal Health Information

living routes, alert city

Related public services

“Elderly care” services

“Elderly care” services

Services for older adults

Health services

Datasets

• Health service

• Social security

• Day-to-day activities

• Leisure & culture

• Living

• Government services

• NGO services

• Transportation

• City equipment

• Streets

• Agenda

• Suggestions and Complaints

• Open311

• Health Data

• Transportation Data

• Environmental

Trial Sites

Bremen, Germany

South Lakeland, UK

Zaragoza, Spain

Thessaloniki, Pilaia, Kalamaria and Thermi, Greece

1.3 Objectives of this document

This document is an enclosed document to deliverable D4.4. It describes the demonstrator application prototypes build for the field site of Zaragoza. The description will focus on:

• the different pages of the app,

• the used data services,

1.4 Scope and Relationship with other deliverables

As illustrated in Figure 1, Work Package 4 consists of five tasks. This deliverable is the result of work performed within Task 4.3 “Design studies and mock-ups for co-creation purposes”, and Task 4.4 “Development of mobile front-ends for demonstrator applications”. The functionality, as well as the look and feel of the delivered applications were elaborated and iterated during the co-creation activities performed in Work Package 3, which are reported in D3.4 “Senior citizen engagement report Zaragoza“. This deliverable is a counterpart to D4.5 “Prototype demonstrator application at Central Macedonia”; the trial site at Central Macedonia has been creating demonstrator applications in parallel to Zaragoza. Other prototype application demonstrators at the remaining two trials sites (Bremen and South Lake) have been reported in other deliverables (D4.2 and D4.3, respectively).



This deliverable builds directly upon the technical requirements and specifications reported in D4.1. The use of analytics within this demonstrator prototypes also means that this deliverable relates to deliverable D2.4 “Behaviour Analytics & Workflow Software Components”.

Figure 1: Mobile-Age Work Package structure and interrelationships

In February 2018 the Task 3.6 "Mobile Service Evaluation" will start to evaluate the developed demonstrator applications. It is planned to incorporate the evaluation results in another version of the demonstrators. That means that the described stage of the demonstrators in this document will not reflect the final versions at the end of the project. During the evaluation of the application by the older adults, it is to be expected that some bugs or problems may be reported. The improvement of the app will be continued, of course; so the content and the look of the app may change slightly in the future.



1.5 Document Structure

Chapter 1 introduces this deliverable. Chapter 2 describes roles of the different users and stakeholders in the Mobile-Age ecosystem. Chapter 3 describes the first demonstrator: collaborative maps. Chapter 4 describes the second demonstrator: a website for senior citizens. Chapter 5 ends this deliverable with the conclusion and consequences for the further development of the demonstrator apps.



2 The Mobile-Age Ecosystem: Stakeholders and Users Here we provide an overview of the roles of Mobile Age users. Please note that their roles may be overlapping. Local/regional governments: These can be managing the co-creation activities, define features of the applications, and serve as experts for a specific service domain. In many cases, local governments are also the data owners. Software developers: These can be independent developers or companies, or working for IT- departments in public authorities or civil society organisations such as the Open Knowledge Foundation. They develop the applications using the platform and they participate in the co- creation activities, adjusting the applications to accommodate for the participants’ requests and demonstrating the results in an iterative process. Older adults: They are a key stakeholder of Mobile Age and the main users of the mobile applications being developed. They may participate in the core project group or engage in the broader co-creation activities. Service providers such as government, social welfare organisations, religious congregations or NGOs may be part of the core project group or engaged for specific input. Some of the service providers may also provide (open) data. Intermediaries include professionals and non-professionals that may support the co-creation activities by providing input for specific tasks in the co-creation process. They may become users of the applications developed. Facilitators are experienced individuals in the work with older adults and/or groups. They support the co-creation activities through e.g. running workshops, focus groups, interviews. Other organisations & individuals comprise for example senior citizen organisations, senior citizens’ clubs (e.g. computer clubs) but also media and journalists that may report about the co-creation activities, and thereby support engagement as well as dissemination. Figure 2 provides an illustration of these roles.

Figure 2: Overview of the Mobile Age users and stakeholders in co-creation of open data-based public services



Applications

Older Citizens

Software Developers

Local Government

Mobile Age Deployment Environment

Intermediaries (professionals/

non-professionals) Service

Providers

Facilitators

App X

Software Developers

Other Organizations and Individuals

Based on how these entities interact with the Mobile Age ecosystem, they can be categorized in two main groups: • MADE Users: These are users that make direct use of the platform and consist of the

following:

• Software Developers

• Service Providers

• End Users: These are users of the prototype mobile applications developed using the Mobile Age platform.

• Older adults

• Local /regional governments

• Intermediaries (professional and non-professional)

• Facilitators

• Other Organizations and Individuals

Figure 3 illustrates this categorization. On the other hand, CIDER has been designed to be used by all of the previous stakeholder categories, as depicted in Figure 4.

Figure 3: MADE users and end users



Older Citizens

Software Developers

Local Government

Service Providers

Software Developers

Figure 4: CIDER Users

Co-creation Information

Documentation EnviRonment

Other Organizations and Individuals

Intermediaries

Facilitators



3 Demonstrator Application at Zaragoza: Collaborative Maps

3.1 Introduction

The Zaragoza Mobile-Age demonstrator application is designed to empower citizens to create collaborative maps. A collaborative map can be either read-only or read-write. Both of them permit the owner of the map to publish it so that others may benefit from the contents. While read-only maps can only be modified by the owner, read-write maps allow other citizens to contribute contents, such as points of interest or areas.

Furthermore, the collaborative maps are used by senior citizens to create friendly routes for senior citizens. The process of creating such routes is reported in deliverable D3.4 “Senior Citizen Engagement Report Zaragoza”. Friendly routes are those routes having the following characteristics:

• Useful: They are routes that are taken by senior citizens in daily basis.

• Safe and accessible: Those routes pose no threat to senior citizens and are easily accessible by people with reduced mobility.

• Consensus: Friendly routes are those that are selected and developed by senior citizens themselves.

3.2 Key features

3.2.1 Collaborative

The most important element in the demonstrator application is the collaborative aspect. There are two types of collaborative maps:

• Read-only map: this type of collaborative maps allows everyone to see the contents of the map but only the owner can modify the contents.

• Read-write map: this type of collaborative maps allows everyone to see the contents of the maps as well as modify them.

Only registered users are able to create a collaborative map. The types of information that can be added to a collaborative map are: points, lines and polygons.

3.2.2 Responsive Design

The demonstrator application for the demonstrator is built as a HTML based collaborative map application using the technologies HTML5, JavaScript and CSS. The application is responsive and can be displayed in any mobile or desktop browser environment with all common display resolutions.

3.2.3 Accessible

The demonstrator application follows the Web Content Accessibility Guidelines (WCAG) version 2.0 (https://www.w3.org/TR/WCAG20/) at level AA. Following this guidelines ensures that this demonstrator application is also accessible to people with disabilities.

http://www.w3.org/TR/WCAG20/)



3.3 Architecture

The collaborative maps system uses Leaflet (http://leafletjs.com/) to visualize interactive maps, IDEZAR’s dataset as the data source and Oracle 11g to store the contents of collaborative maps.

3.3.1 Used data sources

The main data source that is used in the demonstrator application is the dataset of IDEZAR (La Infraestructura de Datos Espaciales de Zaragoza). IDEZAR is the infrastructure of spatial data of Zaragoza whose main objective is to facilitate the citizens of Zaragoza accessing spatial information of the city and presenting it on a map and allowing the citizens to provide added value to the information that has been provided by the City of Zaragoza.

Table 2: Sources of data used Zaragoza demonstrator

Data set

Category

Source

IDEZAR’s dataset Spatial data Local government

3.4 Description of pages

This section describes the different kinds of pages of the demonstrator. Figure 5 shows a diagram giving an overview of all pages and the connections between the pages. The descriptions are supplemented by screenshots and a description of the used data services.

http://leafletjs.com/)



Figure 5: Navigational Flow diagram of all pages of the app

3.4.1 Registration Page

Only a registered user can contribute to a collaborative map. The registration page can be seen in Figure 6, in which a user can register herself by providing her name, username to be used in the platform, email and password.

3.4.1.1 Description

The registration page gives a description regarding the benefits of registration, such as to collaborate on collaborative maps, asking question and visualize activities. There are several fields that a user has to fill: full name, username, email, password and confirm-password.



3.4.1.2 Screenshot

Figure 6: Screenshot of the Registration page

3.4.1.3 Data Service Requests

Table 3: Data Service Request – User Registration

Purpose Register a user

Description A service to add a new user

Endpoint POST https://www.zaragoza.es/api/recurso/users/addentra/new

Parameters

name: Name of the user

email: Email of the user

password: Password provided by the user

screen_name:

Username provided by the user

Example

Bob is registering through the login page. He provides his email address ([email protected]) and his password (mypassword) and a username bob.

Request/ curl -X POST \ https://www.zaragoza.es/api/recurso/users/addentra/new \

http://www.zaragoza.es/api/recurso/users/addentra/new

http://www.zaragoza.es/api/recurso/users/addentra/new



Purpose Register a user Example -F

-F -F

-F

'name=Bob' \ [email protected] password=mypassword \ screen_name=bob

\

3.4.2 Login page

Once a user has registered, she may enter the system in the login page by providing her credentials (the combination of email and password) that were provided during the registration process. The login page can be seen in Figure 7 Once the system verifies the provided credentials, a registered user will be able to create a collaborative map and put the following information: point, line or polygon.

3.4.2.1 Description

The login page has only two fields for a user to fill with the combination of their email and password. In addition to the two fields, there is also a checkbox that has to be ticked in order to make sure that the page is accessed by a human and not by a bot.

3.4.2.2 Screenshot

Figure 7: Screenshot of the Login page


Table 4: Data Service Request – Login

mailto:email%[email protected]




Purpose Login

Description A service to let an authenticated user enter the system

Endpoint POST https://www.zaragoza.es/api/recurso/users/addentra/

Parameters

email: Email of the user

password:

Password of the user

Example After successfully register himself, Bob tries to enter the system with his credentials ([email protected], password=mypassword).

Request/ Example

curl -X POST \ https://www.zaragoza.es/api/recurso/users/addentra/ \ -F [email protected] \

-F password=mypassword

3.4.3 List Existing Maps

This page shows a list of existing maps that have been created by the users of the application.

3.4.3.1 Description

A list of collaborative maps is shown in this page. For every row in the list, the name of the corresponding map is displayed and a blue-ribbon style sign that indicates whether the map is a read-only or read-write.

http://www.zaragoza.es/api/recurso/users/addentra/

mailto:(email%[email protected]

http://www.zaragoza.es/api/recurso/users/addentra/




3.4.3.2 Screenshots

Figure 8: Screenshot of List Existing Maps page




Table 5: Data Service Request – List Existing Maps

Purpose List Existing Maps

Description A service to obtain all collaborative maps that have been created by the users.

Endpoint GET: http://www.zaragoza.es/api/recurso/mapas-colaborativos.json

Parameters

ids: To obtain maps based on their ids (use comma for multiple maps)

title: Obtain maps whose title matches with title

start_date: Obtain maps that were created after start_date

end_date: Obtain maps that were created before end_date

type:

Filter maps based on their type (read-only or read-write)

Example A user wants to see all collaborative maps that are available.

Request/ Example

GET: http://www.zaragoza.es/api/recurso/mapas-colaborativos.json

3.4.4 View Map

Once a user has selected a map, the contents of the map will be displayed on View Map page.

3.4.4.1 Description

The top of this page displays the name of the selected map. Next to the name, there is a red button “Colabora!” that invites the user to collaborate on this map by providing additional content. The map itself occupies the majority of the page. On the bottom of the map, there is a text field whose content can be used to embed this map in an external page.

http://www.zaragoza.es/api/recurso/mapas-colaborativos.json

http://www.zaragoza.es/api/recurso/mapas-colaborativos.json



3.4.4.2 Screenshots

Figure 9: Screenshot of View Map page




Table 6: Data Service Request – View Map

Purpose Get the details of a map

Description This service retrieves the details of a particular map

Endpoint GET: http://www.zaragoza.es/api/recurso/mapas-colaborativos/id.json

Parameters

id: The id of map whose details are to be obtained.

Example A registered user has selected one of the maps presented and the id of the

selected map is m456.

Request/ Example

GET: http://www.zaragoza.es/api/recurso/mapas-colaborativos/m456.json

3.4.5 Create New Map

A registered user is able to create a collaborative map. There are two types of a collaborative map: read-only (which can be viewed by other citizens) and read-write (which can be viewed and modified by other citizens).

3.4.5.1 Description

In the top of Create New Map page are several fields that the user has to fill in with the information regarding the new map, such as: name (nombre) of the map, type (tipo), category (categoria) such as culture, sport, education, etc. and icon (icono). The map occupies the majority of the page.

http://www.zaragoza.es/api/recurso/mapas-colaborativos/id.json

http://www.zaragoza.es/api/recurso/mapas-colaborativos/m456.json



3.4.5.2 Screenshots

Figure 10: Screenshot of Create New Map page




Table 7: Data Service Request – Create New Map

Purpose Create a new map

Description This service allows a registered user to create a new collaborative map.

Endpoint POST https://www.zaragoza.es/api/recurso/mapas- colaborativos/user/account_id.json(?srsname=wgs84|utm30n)

Parameters

account_id: The id of the user

srsname: The standard of the new map, either wgs84 or utm30n. By default, if no value specified, wgs84 will be used.

type: Whether the created map will be private (private), read-only (public) or read- write (collaborative).

Example The registered user Bob (user id = u123) wants to create a new map having

wgs84 as its standard.

Request/ Example

curl -X POST \ 'https://www.zaragoza.es/api/recurso/mapas-

colaborativos/user/u123.json?srsname=wgs84' \ -F type=collaborative

3.4.6 My Maps

On this page a user will be able to see all the maps that she has created.

3.4.6.1 Description

On this page a list of maps that have been created by the user are displayed as a list. Each row contains the name of the map and an icon that indicates the type of the map (read-only or read-write).

http://www.zaragoza.es/api/recurso/mapas-




3.4.6.2 Screenshots

Figure 11: Screenshot of My Maps page




Table 8: Data Service Request – View User Maps

Purpose View User Maps

Description A service to obtain all collaborative maps owned by a user

Endpoint GET: http://www.zaragoza.es/api/recurso/mapas- colaborativos/user/account_id.json

Parameters


Example Bob (whose id is u123) wants to see all collaborative maps that he owns.

Request/ Example

GET: http://www.zaragoza.es/api/recurso/mapas- colaborativos/user/u123.json

3.4.7 Add Point

This page lets a user add a point into the selected map.

3.4.7.1 Description

This page contains two text fields that are used to provide the name and description of the new point, a select box that allows the user to choose the corresponding icon, and a red button “Guardar” that is used to save the changes.





3.4.7.2 Screenshots

Figure 12: Screenshot of Add Point page




Table 9: Data Service Request – Add Point

Purpose Add Point

Description A service to add a point into a map.

Endpoint PUT https://www.zaragoza.es/api/recurso/mapas- colaborativos/user/account_id/id.json(?srsname=wgs84|utm30n)

Parameters

account_id: The id of the user id: The id of the map

srsname:

The projection standard of the map, either wgs84 or utm30n

Example Bob (whose id is u123) wants to add a new point into map m456. PUT https://www.zaragoza.es/api/recurso/mapas- colaborativos/user/u123/m456.json?srsname=wgs84

With body { "id": "671",

Request/ "title": "new point", "description": "new point",

Example "geometry": { "type": "Point",

"coordinates": [ -0.9298811327357448, 41.65260966067856 ] } }





3.4.8 Add Line

This page lets a user add a new line into a collaborative map.

3.4.8.1 Description

This page contains two text fields that are used to provide the name and description of the new line, a colour picker to choose the colour of the line, and other two text fields that are used to provide the width and opacity of the line, together with a red button “Guardar” to save the line.

3.4.8.2 Screenshot

Figure 13: Screenshot of Add Line page




Table 10: Data Service Request – Add Line

Purpose Add a new line into a map

Description This service adds a new line into an existing map


Parameters


id: The id of the map

srsname:

The standard of the map, either wgs84 or utm30n

Example Bob (whose id is u123) wants to add a new point into map m456. PUT https://www.zaragoza.es/api/recurso/mapas- colaborativos/user/u123/m456.json?srsname=wgs84

With body { "id": "675",

Request/ "title": "Recurso tipo linea", "description": "Descripcion de recurso tipo linea",

Example "strokeColor": "#e34242", /* Color de borde */ "strokeOpacity": "0.5", /* Opacidad de color de borde */

"strokeWidth": "4", /* Ancho del color de borde */ "geometry": { "type": "LineString", /* Tipo linea */ "coordinates": [[-0.8856868743896484,41.651879827111344],[- 0.8856868743896484,41.65608036234462]] }

3.4.9 Add Polygon

This page lets a user to add a new polygon into a collaborative map.

3.4.9.1 Description

This page contains two text fields that are used to provide the name (nombre) and description (descripcion) of the new polygon, a colour picker to set the colour of the polygon’s border (color borde), a text box to provide the width (ancho) of the border, a text box to provide the opacity (opacidad) of the polygon, a colour picker to set the fill colour (color relleno) and a text box to provide the opacity (opacidad) of the polygon and a red button “Guardar” to save the polygon.





3.4.9.2 Screenshots

Figure 14: Screenshot of Add Polygon page




Table 11: Data Service Request – Add Polygon

Purpose Add a new polygon into a map

Description This service adds a new polygon into an existing map


Parameters


id: The id of the map

srsname:

The standard of the map, either wgs84 or utm30n

Example Bob (whose id is u123) wants to add a new polygon into map m456. PUT https://www.zaragoza.es/api/recurso/mapas- colaborativos/user/u123/m456.json?srsname=wgs84

With body { "id": "670", "title": "Recurso tipo poligono", "description": "Descripcion de recurso tipo poligono", "fillColor": "#0ca550", /* Color de relleno */ "fillOpacity": "0.3", /* Opacidad de color de relleno */

Request/ Example

"strokeColor": "#e34242", /* Color de borde */ "strokeOpacity": "0.5", /* Opacidad de color de borde */ "strokeWidth": "4", /* Ancho del color de borde */

"geometry": { "type": "Polygon", /* Tipo poligono */ "coordinates": [[[- 0.8856868743896484,41.651879827111344],[- 0.8856868743896484,41.65608036234462],[- 0.8751726150512694,41.65608036234462],[- 0.8751726150512694,41.651879827111344],[- 0.8856868743896484,41.651879827111344]]] } }

3.4.10 Complementary pages – Privacy Policy

A page with some legal information like a declaration of privacy policy.

3.4.10.1 Description

The page can be called from the start page by selecting the link “Politica de privacidad” on the bottom of the page.





3.4.10.2 Screenshot

Figure 15: Screenshot of the Privacy Policy page


No data services are requested.

3.4.11 Complementary pages – Terms and Condition

A page with some legal information like terms and conditions of use.


The page can be called from the start page by selecting the link “Aviso Legal” on the bottom of the page.



3.4.11.2 Screenshot

Figure 16: Screenshot of the Terms and Conditions page



3.4.12 Complementary pages – Accessibility

A page with that explains that the application has followed the Web Content Accessibility Guidelines v2.0


The page can be called by selecting the link “Accesibilidad” on the bottom of the page.



3.4.12.2 Screenshot

Figure 17: Screenshot of the Accessibility page





3.5 Data Management

The information of collaborative maps is stored in an Oracle 11g database. We have created several tables that can be seen in the figure below.

Figure 18: ER Diagram of Collaborative Maps



Some of the relevant tables are: • PARTICIPATION.POI_AGRUPACION. This table corresponds to the maps. Column

NOMBRE, GCZ_PUBLICADO stores the name and the type of the map, correspondingly.

• PARTICIPATION.POI_CATEGORIA. This table stores the available categories (cultures, economy, health, etc.) that can be associated to a map.

• PARTICPATION.POI.AGRUPACION_CATEGORY. This table relates PARTICIPATION.POI_AGRUPACION and PARTICIPATION.POI_CATEGORIA, that is to say, stores the relationship between a map and its categories.

• PARTICIPATION.POI_INFO. This table stores the contents of the map.

• PARTICIPATION.POI_ETIQUETA. This table stores the available types (point, line and polygon) that can be associated to content.

• PARTICIPATION.POI_VALOR_ETIQUETA. This table stores the relationship between PARTICIPATION.POI_INFO and PARTICIPATION.POI_ ETIQUETA, that is to say, the value and type for each content in the map.



3.6 Link to the demonstrator application

Mobile-Age Demonstrator Application at Zaragoza

Welcome to the mobile-friendly collaborative maps page of Zaragoza. With this page you can check out existing

collaborative maps that have been created by other citizens, contribute to them, or create your own map.

Visit the collaborative maps page here: http://www.zaragoza.es/sede/servicio/mapa-colaborativo

http://www.zaragoza.es/sede/servicio/mapa-colaborativo



4 Demonstrator Application at Zaragoza: Website for Senior Citizens

4.1 Introduction

This section reports the website for senior citizens that has been developed by City of Zaragoza. Unlike the general version, this demonstrator application is designed to accommodate the special needs of senior citizens. A study on such needs has been reported in deliverable D4.1 “Technical requirements and specification of demonstrator applications”.

4.2 Key Features

Below are the main key features that the City of Zaragoza has considered important to be included in the website for senior citizens.

4.2.1 Relevance

The contents in the website have to be relevant for senior citizens. The City of Zaragoza has decided to put the following contents for the website:

• Procedures

• Publications

• Featured Activities

• News

• Network Centres

The description, screenshot and the corresponding data service request for each type of the contents will be described in Section 4.4.

4.2.2 Responsive Design

The demonstrator application is built as a HTML based collaborative map application using the technologies HTML5, JavaScript and CSS. The application is responsive and can be displayed in any mobile or desktop browser environment with all common display resolutions.

4.2.3 Accessible

The demonstrator application follow the Web Content Accessibility Guidelines (WCAG) version 2.0 (https://www.w3.org/TR/WCAG20/). Following this guidelines ensures that this demonstrator application is also accessible to people with disabilities.

http://www.w3.org/TR/WCAG20/)



4.3 Architecture

Figure 19: Architecture of Website for Senior Citizens

The figure above illustrates the architecture of the website for senior citizens that shows the interactions of the website’ infrastructure components. The main components are:

• Database System (BBDD). The website is powered by Oracle 11g to store relational data and Virtuoso 7 to store RDF data

• Hibernate. Hibernate to map relational data and Java object.

• Static Files (Ficheros Estaticos, WS, etc.). Static files such are images or videos are stored as files of operating system

• SPARQL endpoint (Punto SPARQL). SPARQL endpoint is used to query RDF data stored in Virtuoso

• SOLR. Apache Solr is used to support full-text search

• API REST. The website provide web services that is REST compliance and can be used both internally and externally by third party application (APPS terceros)

• Portals (114 Portales). At the moment of writing, the website contains 114 portals.

• Data sources (104 conjunto de datos). At the moment of writing, the website contains 104 data sources

• Contents (Agenda, Catalogo de Tramites). The contents of the website (programs and catalogue of procedures)

• Management System (Sistema de Gestion). This component is responsible for various business logic such as generates outputs in the format that is requested by a user



(HTML, XML, CSV, JSON, etc.) and authentication and authorization of activities that are performed by a user, depending on the user’s role.

4.4 Description of Pages

4.4.1 List Procedures (Tramites)

The List Procedures page displays all the administrative procedures that are relevant to senior citizens.

4.4.1.1 Description

This page display a list of administrative procedures. Each row in the list contains the name of the procedure together with the corresponding icons indicating how the procedure can be proceeded (in-person, phone, email)

4.4.1.2 Screenshot

Figure 20: Screenshot of List Procedures page



4.4.1.3 Data Service Request

Table 12: Data Service Request – List Procedures

Purpose Get list of procedures

Description This service returns the list of procedures oriented to a certain segment of people

Endpoint

GET https://www.zaragoza.es/sede/portal/sectores/personas- mayores/servicio/tramite/dirigido/id.json

Parameters

id: identifier of type

Example Return the list of paperworks oriented to elderly people

Request/ Example

GET https://www.zaragoza.es/sede/portal/sectores/personas-

mayores/servicio/tramite/dirigido/17.json

4.4.2 View Procedure

Once a procedure has been selected, the website will display the details of the selected procedure.

4.4.2.1 Description

The View Procedure page contains the following information: summary, requirements, steps to apply, description and the corresponding entity of the selected paperwork.

4.4.2.2 Screenshot

Figure 21: Screenshot of View Procedure page

http://www.zaragoza.es/sede/portal/sectores/personas-





Table 13: Data Service Request – View Procedure

Purpose Get details of a procedure

Description This service returns the details of a procedure

Endpoint GET https://www.zaragoza.es/sede/portal/sectores/personas-

mayores/servicio/tramite/id.json

Parameters

id:

identifier of paperwork

Example

Access data associated with paperwork “Alta en el Servicio de Ayuda a Domicilio”

Request/ Example

GET https://www.zaragoza.es/sede/portal/sectores/personas- mayores/servicio/tramite/179.json

4.4.3 List Programs (Programas)

This page shows a list of available programs that are oriented to senior citizens.

4.4.3.1 Description

The list of available programs occupies most of the page. For each row of the list, a promotional poster and its name are presented.





4.4.3.2 Screenshot

Figure 22: Screenshot of List Programs page




Data Service Request – List Publications

Purpose Get list of publications

Description This service returns the list of programs

Endpoint GET http://www.zaragoza.es/docs- api_sede/#/Ayuntamiento:_Catalogo_de_publicaciones

Parameters

Example

Request/ Example

4.4.4 View Program

This page shows the details of the selected program.

4.4.4.1 Description

In the upper part of the page is the promotional poster. Below the promotional poster are the sponsors and description of the program.

http://www.zaragoza.es/docs-



4.4.4.2 Screenshot

Figure 23: Screenshot of View Program page


Data Service Request – View Program

Purpose Get details of publications

Description This service returns the details of a program

Endpoint GET http://www.zaragoza.es/docs- api_sede/#/Ayuntamiento:_Catalogo_de_publicaciones

Parameters

Example




4.4.5 List Activities (Actividades)

4.4.5.1 Description

This page displays a list of community centres and a list of activities that are offered by each community centre. Once a community centre is selected, the page will display the details of the community centre (map and contact details), see Section 4.4.9 (View Community Centre).

4.4.5.2 Screenshot

Figure 24: Screenshot List of Activities page




Table 14: Data Service Request – List Activities

Purpose Get list of activities

Description

This service returns the list of activities oriented to a certain kind of people

Endpoint

GET https://www.zaragoza.es/sede/portal/sectores/personas- mayores/servicio/cultura/evento.solrjson?fq=dirigidoa_smultiple:(%22orien

ted%22)

Parameters

oriented:

population sector

Example

List activities oriented to elderly people

Request/ Example

GET https://www.zaragoza.es/sede/portal/sectores/personas- mayores/servicio/cultura/evento?fq=dirigidoa_smultiple:(%22Personas+Mayor

es%22)

4.4.6 List News Articles (Actualidad)

This page shows a list of news articles that are relevant to senior citizens.

4.4.6.1 Description

The list of news occupies most of the page. For each row in the list, the thumbnail and title of the news are displayed.





4.4.6.2 Screenshot

Figure 25: Screenshot of List News Articles page




Table 15: Data Service Request – List News Articles

Purpose Get list of news articles

UI Element -

Component -

Description

This service returns the list of news articles oriented to a certain kind of people

Endpoint

https://www.zaragoza.es/sede/portal/sectores/personas- mayores/servicio/noticia/list.solrjson?fq=temas_smultiple%3A(%22oriented% 22)

Parameters

oriented:

population sector

Example

List news oriented to elderly people

Request/ Example

https://www.zaragoza.es/sede/portal/sectores/personas- mayores/servicio/noticia/list.solrjson?fq=temas_smultiple%3A(%22Personas%

20Mayores%22)

4.4.7 View News Article

This page shows the detail of a news article.

4.4.7.1 Description

This page is divided into two parts. The upper part of the page is a photo related to the news followed by the news title and tags below the photo. There is also an option just below the tags to share the article via email or social networks. The bottom part of the page contains the actual content of the article.





4.4.7.2 Screenshot

Figure 26: Screenshot of View News Article page




Table 16: Data Service Request – View News Article

Purpose Get details of a news

Description This service returns the detail of a news article

Endpoint GET https://www.zaragoza.es/sede/portal/sectores/personas- mayores/servicio/noticia/id.json

Parameters

id:

identifier of the news

Example

Get the details of the news article “El Ayuntamiento de Zaragoza expone sus herramientas para influir positivamente en la alimentación de la ciudadanía”

(whose id is 226791)

Request/ Example

https://www.zaragoza.es/sede/portal/sectores/personas- mayores/servicio/noticia/226791.json

4.4.8 List Community Centers (Centros)

4.4.8.1 Description

This page is divided into two sections. The first section that occupies the upper part of the page shows the community centres in a map while the second section on the bottom part shows them in a list view.





4.4.8.2 Screenshot

Figure 27: Screenshot of List Community Centres page


Table 17: Data Service Request – List Community Centres

Purpose Get list of community centres

Description This service returns list of community centres

Endpoint GET http://www.zaragoza.es/docs- api_sede/#/Equipamientos_y_movilidad:_Recursos_de_la_ciudad

Parameters

Example

Request/ Example

4.4.9 View Community Center

Once a community centre has been selected, the website will display the details of the selected paperwork.

4.4.9.1 Description

The page of View Community Centre contains the following information: map that displays the location of the community centre, photos and its contact details.




4.4.9.2 Screenshot

Figure 28: Screenshot of View Community Centre page




Table 18: Data Service Request – View Community Centre

Purpose Get details of a community centre

Description This service returns the details of a community centre

Endpoint GET https://www.zaragoza.es/sede/portal/sectores/personas- mayores/servicio/equipamiento/id.json

Parameters

Example

Get the data associated with the centre “Centro de Convivencia para Mayores Alfocea” (whose id is 499)

Request/ Example

https://www.zaragoza.es/sede/portal/sectores/personas- mayores/servicio/equipamiento/499.json





4.5 Data Management

In this section we describe how the information about every entity (procedures/news/activities/program/community centers) presented in the previous section is stored.

4.5.1 Data Management of Procedures

Figure 29: ER Diagram of Procedures

The main table that stores the information about procedures is INTRA.PROCEDIMENTO. This table is accompanied with four other tables that add information on how to do the corresponding procedure. Those four tables are:

• INTRA.TRAMCORREO for procedure that is done via email,

• INTRA.TRAMLINEA for procedure that is done via online webpage,

• INTRA.TRAMPRES for procedure that is done via online presence,

• INTRA-TRAMTEL for procedure that is one via phone.



4.5.2 Data Management of Programs

The information about programs is not stored in a database but as file systems.

4.5.3 Data Management of Activities

Figure 30: ER Diagram of Activities

The main table for activities,ACTIVIDADES.ACTOS. Table ACTIVIDADES.TEMAS stores the available categories and table ACTIVIDADES.ACTO_TEMA stores the relationship between an activity with its categories. In a similar way, table INTRA.API_EQUIPAMIENTO stores the available places and table ACTIVIDADES.ACTO_LUGAR stores the relationship between an activity with the places where the activity is being held.



4.5.4 Data Management of News Articles

Figure 31: ER Diagram of News Articles

The main table that stores news articles is NOTICIAS.NOTICIA. Every news article belongs to a section and table NOTICIAS.ESPACIO stores all available sections. A news article may have multiple categories/tags. A list of available categories/tags is stored in table NOTICIAS.TEMA and table NOTICIAS.TEMA_NOTICIA stores the relationship between a news article and its categories/tags.

4.5.5 Data Management of Community Centers

Figure 32: ER Diagram of Community Centres

Table INTRA.CENTRO_SERVICIOS stores the information about community centres. A community centre may be located in several buildings (INTRA.EDIFICIO) and the relationship between a community centre and the buildings where it is located is stored in table INTRA.UBICACION.



4.6 Link to the Demonstrator Application

Mobile-Age Demonstrator Application at Zaragoza Welcome to the website for senior citizens of Zaragoza. With this page you can access relevant activities, news and publications.

Visit the website here: https://www.zaragoza.es/sede/portal/sectores/personas-mayores/

http://www.zaragoza.es/sede/portal/sectores/personas-mayores/



5 Conclusions and Outlook In this deliverable we have described two demonstrator applications at Zaragoza: collaborative maps and website for senior citizens. The collaborative maps demonstrator application is used to create senior friendly routes that are collaboratively created by the participating senior citizens. The demonstrator application has been developed as a web- based application that is responsive (can be rendered well on a variety of devices and screen sizes) and follows the Web Content Accessibility Guidelines (WCAG) version 2.0 at level AA, so that the content of the application can be accessed by people with disabilities without bigger issues. The website for senior citizens demonstrator application provides relevant information for senior citizens, such as activities, community centres and news.

Note that the demonstrator applications at Zaragoza do not use the Mobile-Age platform. Zaragoza is a governmental partner of Mobile-Age and has their own infrastructure, in fact, Zaragoza contributes its datasets to the platform.

Documents

D4.4 Prototype demonstrator applications at Zaragoza · 2018-03-20 . Ready for internal review : UPM ZGZ . 0.9.1 2018-03-21 Data Management in Section 4 UPM, ZGZ 0.9.2 : 2018-03-23