224 lines
9.5 KiB
Vue
224 lines
9.5 KiB
Vue
<script setup lang="ts">
|
|
import { useMembers } from "~/composables/useMembers";
|
|
|
|
useHead({
|
|
title: 'Informazioni sul Progetto - Visione',
|
|
})
|
|
|
|
const { sortedMembers } = useMembers();
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div class="it-hero-wrapper it-primary">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-12 text-center">
|
|
<div class="it-hero-text-wrapper p-4">
|
|
<h1 class="text-white font-weight-bold">Il Progetto "Visione"</h1>
|
|
<p class="text-white mt-3 lead font-weight-semibold">
|
|
La piattaforma digitale della Città Metropolitana di Bari per la partecipazione attiva,
|
|
la trasparenza e la gestione condivisa del territorio.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container my-5 py-3">
|
|
<div class="row">
|
|
<div class="col-12 col-lg-8 offset-lg-2">
|
|
<h2 class="mb-4 font-weight-bold">Un nuovo dialogo tra Cittadini ed Ente</h2>
|
|
<p class="lead text-muted">
|
|
Il progetto nasce dall'esigenza di digitalizzare e ottimizzare i flussi di comunicazione tra la cittadinanza
|
|
e la Pubblica Amministrazione. Sostituisce i tradizionali canali non tracciabili con un unico punto di
|
|
accesso telematico.
|
|
</p>
|
|
<p>
|
|
L'adozione della piattaforma persegue un triplice obiettivo strategico: ridurre drasticamente i tempi di
|
|
risposta
|
|
dell'Ente nella risoluzione dei disservizi (quali buche stradali, illuminazione guasta o degrado urbano),
|
|
responsabilizzare la <strong>cittadinanza attiva</strong> tramite meccanismi di partecipazione diretta e
|
|
fornire
|
|
agli organi competenti un quadro analitico costantemente aggiornato e geolocalizzato delle criticità del
|
|
territorio.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-light py-5">
|
|
<div class="container">
|
|
<h2 class="text-center mb-5 font-weight-bold">Come si articola l'ecosistema digitale</h2>
|
|
<div class="row">
|
|
|
|
<div class="col-12 col-md-4 mb-4">
|
|
<div class="card-wrapper card-space h-100">
|
|
<div class="card card-bg h-100">
|
|
<div class="card-body">
|
|
<BIIcon class="mb-3" color="primary" name="it-user" size="xl"/>
|
|
<h3 class="card-title h5 font-weight-bold">I Cittadini</h3>
|
|
<p class="card-text text-muted">
|
|
L'accesso è garantito attraverso l'autocompletamento anagrafico e il supporto ai sistemi di identità
|
|
digitale
|
|
nazionali (<strong>CIE</strong>).
|
|
<br><br>
|
|
Il cittadino può compilare form guidati inserendo descrizioni, documentazione fotografica e
|
|
posizione esatta (GPS).
|
|
Per incentivare la partecipazione, è previsto il conferimento di "<strong>Punti di Cittadinanza
|
|
Attiva</strong>"
|
|
per ogni segnalazione validata e risolta dall'Ente.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-md-4 mb-4">
|
|
<div class="card-wrapper card-space h-100">
|
|
<div class="card card-bg h-100">
|
|
<div class="card-body">
|
|
<BIIcon class="mb-3" color="primary" name="it-tool" size="xl"/>
|
|
<h3 class="card-title h5 font-weight-bold">Squadre Operative</h3>
|
|
<p class="card-text text-muted">
|
|
Gli operatori tecnici e logistici dell'Ente prendono in carico la segnalazione per l'immediata
|
|
istruttoria.
|
|
<br><br>
|
|
La piattaforma provvede a instradare automaticamente l'intervento alla squadra specializzata di
|
|
turno in base alla
|
|
categoria del problema e all'area geografica, garantendo un canale diretto per le comunicazioni di
|
|
servizio e aggiornando in tempo reale lo stato dei lavori.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-12 col-md-4 mb-4">
|
|
<div class="card-wrapper card-space h-100">
|
|
<div class="card card-bg h-100">
|
|
<div class="card-body">
|
|
<BIIcon class="mb-3" color="primary" name="it-settings" size="xl"/>
|
|
<h3 class="card-title h5 font-weight-bold">L'Amministrazione</h3>
|
|
<p class="card-text text-muted">
|
|
Gli amministratori dispongono del controllo completo sulle operazioni, con privilegi di gestione dei
|
|
profili e assegnazione delle nomine agli operatori.
|
|
<br><br>
|
|
L'Ente utilizza funzioni di ricerca avanzata e filtraggio per area geografica per prevenire le
|
|
duplicazioni
|
|
e si avvale di strumenti analitici per il monitoraggio continuo dei tempi medi di risoluzione e
|
|
dell'efficienza dei servizi.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container my-5 py-4">
|
|
<div class="row align-items-center">
|
|
<div class="col-12 col-lg-7 mb-4 mb-lg-0">
|
|
<h2 class="font-weight-bold mb-4">Sicurezza, Centralità e Conformità</h2>
|
|
<p class="mb-4">Per soddisfare gli elevati standard richiesti da un Ente Pubblico, il sistema adotta precise
|
|
scelte organizzative e architetturali:</p>
|
|
<ul class="it-list">
|
|
<li class="d-flex align-items-start mb-3">
|
|
<BIIcon class="me-3 mt-1 flex-shrink-0" color="primary" name="it-pa"/>
|
|
<div>
|
|
<strong>Modello Centralizzato:</strong> Tutta la gestione logica e la persistenza dei dati risiedono
|
|
lato server, garantendo tracciabilità totale dei passaggi di stato e convalida rigorosa dei permessi
|
|
utente.
|
|
</div>
|
|
</li>
|
|
<li class="d-flex align-items-start mb-3">
|
|
<BIIcon class="me-3 mt-1 flex-shrink-0" color="primary" name="it-lock"/>
|
|
<div>
|
|
<strong>Sicurezza e Privacy:</strong> Tutte le comunicazioni sono interamente cifrate (tramite rigidi
|
|
protocolli crittografici) per garantire la massima conformità alle normative sulla protezione dei dati
|
|
personali.
|
|
</div>
|
|
</li>
|
|
<li class="d-flex align-items-start mb-3">
|
|
<BIIcon class="me-3 mt-1 flex-shrink-0" color="primary" name="it-mail"/>
|
|
<div>
|
|
<strong>Accesso Operatori:</strong> Il personale tecnico comunale accede al sistema tramite un approccio
|
|
sicuro basato su One-Time Password (OTP) inviata sull'e-mail aziendale.
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="col-12 col-lg-4 offset-lg-1">
|
|
<div class="callout callout-highlight callout-note">
|
|
<div class="callout-title">
|
|
<BIIcon name="it-info-circle"/>
|
|
Customer Satisfaction Integrata
|
|
</div>
|
|
<p>
|
|
La piattaforma non si esaurisce con l'intervento tecnico, ma chiude il ciclo con un modulo dedicato alla
|
|
<strong>Valutazione della Qualità</strong>.
|
|
<br><br>
|
|
A risoluzione avvenuta, il cittadino viene invitato a esprimere un riscontro sulla tempestività e
|
|
sull'efficacia
|
|
del lavoro svolto, assicurando all'amministrazione un controllo qualità costante.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container mb-5 pb-5">
|
|
<div class="card-wrapper card-space">
|
|
<div class="card card-bg border-start border-primary border-5">
|
|
<div class="card-body">
|
|
<div class="row align-items-center">
|
|
<div class="col-12 col-md-6 mb-4 mb-md-0">
|
|
<h4 class="h5 font-weight-bold text-primary mb-2">Il Team di Sviluppo</h4>
|
|
<p class="mb-1">
|
|
Questo portale è stato ideato e sviluppato per facilitare il percorso di transizione digitale
|
|
e modernizzare l'infrastruttura telematica a disposizione della cittadinanza.
|
|
</p>
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
<div class="d-flex flex-wrap justify-content-md-end justify-content-center gap-4">
|
|
<div
|
|
v-for="member in sortedMembers"
|
|
:key="member.name"
|
|
class="d-flex flex-column align-items-center text-center"
|
|
style="max-width: 90px;"
|
|
>
|
|
<img
|
|
:alt="member.name"
|
|
:src="member.image"
|
|
class="rounded-circle mb-2 shadow-sm"
|
|
style="width: 72px; height: 72px; object-fit: cover; border: 2px solid #0066cc;"
|
|
>
|
|
<span class="font-weight-bold small" style="line-height: 1.2;">{{ member.name }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.it-list {
|
|
list-style-type: none;
|
|
padding-left: 0;
|
|
}
|
|
|
|
h2 {
|
|
text-align: center;
|
|
}
|
|
</style>
|