MatteiDEV – Realizzazioni degli studenti

Sito associazione sermirr di Recanati

logo

Studente: Gabriele De Bartolomeo

IL SERMIRR

Il SERMIRR (Servizio Missionario Redentore Recanati) è un’Associazione di Volontariato che opera attraverso i propri aderenti e volontari, in particolare attraverso lo strumento del sostegno a distanza, in favore di gruppi svantaggiati, in particolare minori, donne e malati nel Sud del mondo.

Tutto inizia nel 1962, quando 13 vescovi indiani presenti al Concilio, visitano Tolentino per venerare la reliquia di San Tommaso da Tolentino, morto martire a Bombay nel 1321. Questi vescovi chiedono una mano a favore dei poveri delle loro comunità. Antonietta Bartolozzi (una donna di Tolentino tutta impegnata a fare del bene ai più bisognosi) concretizza la richiesta dei vescovi dando vita alle “adozioni a distanza” di bambini indiani. Durante i campi-scuola del gruppo diocesano del Movimento Lavoratori di AC di Tolentino, dopo una visita al SERMIG di Torino, alcuni volontari di Tolentino, su impulso di Don Rino Ramaccioni, allora parroco della Cattedrale di Tolentino, pensano di passare dalle parole di solidarietà ai fatti e dànno vita ad un gruppo missionario. Nel 1992 nasce il SERMIT (Servizio Missionario Tolentino) Onlus, che già a partire dal 1982 realizzava le prime adozioni a distanza in India, Africa e America Latina. Nel 1998, i contatti avuti tra alcuni sacerdoti indiani e Don Rino Ramaccioni, divenuto parroco della Parrocchia Cristo Redentore di Recanati, e la credibilità dei rapporti avviati col SERMIT, incoraggiano alcuni volontari di Recanati a dar vita al gruppo SER.MI.R.R., che partendo dalla collaborazione col SERMIT nelle adozioni/sostegni a distanza realizza diversi altri progetti di solidarietà in India, Africa, America Latina e Palestina. Oggi il SER.MI.R.R., costituitosi in Onlus nel 1999, ha superato le 600 adozioni a distanza annuali.

 

IL VECCHIO SITO INTERNET

L’ associazione ha realizzato un sito web nei primi anni 2000, scegliendo lo stile di allora ed adattato alla visualizzazione da Internet Explorer. Lo spazio di hosting era, e rimane tutt’ora, di 50 MB.

01

Come si può vedere dall’ immagine, lo stile era molto semplice e le funzionalità erano ridotte alla sola pubblicazione di contenuti testuali statici, nelle pagine “Chi Siamo”, “Come Operiamo”, ”Dove Operiamo”,”Progetti in Corso”,”Come Sostenerci”,”Dove Siamo”,”Contatti”. Le ultime notizie venivano invece visualizzate nel ‘carosello’ del riquadro sulla destra.

Analizzando il codice html e css si potevano trovare delle imperfezioni di struttura.

 

IL NUOVO SITO
L’ associazione ha ritenuto necessario rinnovare il loro portale con un nuovo layout grafico e con nuove funzioni, dai seguenti requisiti funzionali:
• Grafica rinnovata
• Possibilità di inserire gli album fotografici dei viaggi
• Adattamento delle pagine alla dimensione dello schermo (Responsive Design)

 

WORDPRESS

Per realizzare il nuovo sito web è stato usato WordPress,uno dei CMS(Content Management System) più diffusi al mondo. Un CMS è un’interfaccia grazie alla quale si possono creare un siti senza bisogno di saper programmare.In pratica è un sito web già pronto  grazie al quale si è in grado di realizzare un altro sito web.Vanta di supporto continuo da parte di milioni di utenti. Si possono trovare migliaia di plugin e template per WordPress, gratis e a pagamento, da poter modificare a seconda delle proprie esigenze.
Quando si realizza un sito con un CMS,tutti i dati relativi ai contenuti di testo, ma anche le impostazioni e i riferimenti alle immagini (nome del file, posizione sul server, ecc.) vengono memorizzati all’interno di un database MySql, accessibile dall’ interfaccia PHPMyAdmin. Il database è memorizzato all’interno di un server MySQL. L’installazione di WordPress crea le tabelle relative a tutte le pagine ed agli articoli pubblicati, alla configurazione di plugin e template,alla gestione degli utenti ed alle impostazioni generali del CMS.
( http://www.webmasterconwordpress.it/manutenzione-e-sicurezza/cms-e-siti-dinamici-il-database/ )

450_0001

 

450_0002

 

I servizi di hosting adatti all’ installazione di WordPress hanno in genere sistema operativo Unix/Linux.
Il server web deve contenere/supportare:

  • PHP versione 4.3 o superiore
  • MySQL versione 4.1.2 o superiore
  • Supporto al protocollo FTP

Il servizio di hosting scelto dall’ associazione è presso Rem-graphics.com, dove è installata anche l’ interfaccia Cpanel, dalla quale poter effettuare l’ installazione del CMS ,le modifiche al db MySql ed il trasferimento di file.

La piattaforma WordPress basa il suo funzionamento sull’ interazione tra i dati del server MySql e file di codice php,html,css,javascript, per la creazione in modo dinamico della grafica dell’ interfaccia utente(menù di amministrazione) ,delle vere e proprie pagine che compongono il sito e della gestione degli utenti.
Una volta portata a termine l’ installazione e quindi aver specificato l’ indirizzo del database a cui puntare, ho definito il mio utente amministratore ed ho proseguito con la scelta del template.
Dopo diverse prove,ho optato definitivamente per  “Luminescence Lite”, di StyledThemes
gratuito, Responsive e con un’ ampia possibilità di personalizzazione di base.
http://demo.styledthemes.com/pages/luminescence-lite.html

 

PAGINE CONTENUTE NEL MENU DI NAVIGAZIONE

HOME :

Pagina dinamica dove si pubblicano nuovi articoli,categorizzati in “news” o “progetti”,dove si devono visualizzare un massimo di 5 elementi.Ogni articolo contenuto in questa pagina può avere un’immagine di intestazione(immagine “in evidenza”).

450_0003

 

CHI SIAMO:
pagina statica con contenuto testuale,con la storia dell’ associazione.Inserimento di alcune foto.

450_0004
DOVE OPERIAMO:
pagina statica con integrazione di Google Maps.Si visualizza una mappa con marker posizionati sui Paesi interessati dall’associazione.Vicino ad ogni marker c’è un’etichetta con il nome del Paese su cui è posizionato.Cliccando su un marker si apre una nuova scheda,relativa al Paese interessato,che si va a sostituire a quella dela mappa.Inserimento di link per tornare indietro alla mappa.
Ho trovato all’ indirizzo http://fiddle.jshell.net/bTujZ/

Segue Il codice della mappa, opportunamente modificato:

 

1 – si definisce che la mappa deve essere responsive

 

<meta name="viewport" content="width=device-width,initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>

2 – si richiamano le API javascript specifiche di Google Maps

 

<script type="text/javascript" src="http://www.sermirr.com/wp/wp-content/mappa.js">
</script>

3 – si richiama il file ‘mappa.js’, dove risiedono i comandi per la creazione della mappa

 

<center>
<div id="map_canvas" style="width: 600px; height: 400px"></div>
</center>

Il codice del file ‘mappa.js’:

 

var locations =[
['Ecuador',-1.583161, -78.633677, 12,'http://sermirr.com/wp/?page_id=99'],
['India', 22.150181, 79.439332, 11,'http://sermirr.com/wp/?page_id=103'],
['Palestina',31.782681, 35.221731, 10,'http://sermirr.com/wp/?page_id=107'],
['Uganda',1.260895, 32.226337, 9,'http://sermirr.com/wp/?page_id=155'],
['Burundi', -3.460130, 29.922727, 8,'http://sermirr.com/wp/?page_id=95']
];

//Betlemme 31.782681, 35.221731
//India 22.150181, 79.439332
//Uganda 1.260895, 32.226337
//Burundi -3.460130, 29.922727
//Ecuador -1.583161, -78.633677

function setMarkers(map, locations)
{
var shape = {       //???opzioni layout mappa???
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};

for (var i = 0; i < locations.length; i++)
{
//****caratteristiche immagine del marker
var smile = new google.maps.MarkerImage(

//'http://www.sermirr.com/wp/wp-content/uploads/2014/03/copia.png',
//new google.maps.Size(91, 89),
//new google.maps.Point(0,0),
//null,
//new google.maps.Point(0, 19)

'http://googlemaps.googlermania.com/google_maps_api_v3/en/Google_Maps_Marker.png',
new google.maps.Size(37, 34),
new google.maps.Point(0,0),
new google.maps.Point(0, 19)
);
//*******

//***posizionamento marker
var place = locations[i]; //carico le coordinate dal vettore

var myLatLng = new google.maps.LatLng(place[1], place[2]);//prendo le coordinate una per una

var marker = new google.maps.Marker
(
{
position: myLatLng,
map: map,
icon: smile,
shape: shape,
title: place[0],
zIndex: place[3],
url: place[4]
}
);
//*********
google.maps.event.addListener(marker, 'click', function() {
// alert('go to ' + this.url);
window.location.href = this.url;
});
}

}

window.onload=function initialize()
{
var myOptions =
{
center: new google.maps.LatLng(0,0) ,
zoom: 1,
mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
setMarkers(map, locations);
}

Qui sotto il confronto tra la vecchia e la nuova pagina “Dove Operiamo”:

 

450_0007
450_0008

 

SOSTIENICI:
Pagina statica di contenuto testuale,con indicazione dei metodi di sostegno economico da parte di esterni.

450_0009

 

CONTATTI:
pagina statica con contenuto testuale,dove si indicano indirizzo, numero di telefono ed e-mail dell’ associazione e come arrivare alla sede centrale. Anche qui ho usato una Google Map, con il plugin
“WP FlexibleMap”.Per poter disegnare la mappa bisogna inserire lo shortlink specifico del plugin all’ interno nle codice html della pagina, che in questo caso è :

<div style="float: right;">[flexiblemap address="Via Brodolini 1,62019, Recanati(MC), Italy" locale="it" region="IT" directions="false" scrollwheel="true" width="400px" heigth="320px" hidestreetview="false"]</div>

 

 

450_0010

 

 

PROGETTI e NEWS :
qui vengono raccolti tutti gli articoli, pubblicati sotto la categoria “Progetti” e “News”, ragguppati per data di realizzazione.

450_0011

 

IN EVIDENZA:
pagina in cui vengono raccolti tutti gli articoli pubblicati sotto
l’ omonima categoria ,nella quale vengono riportati i nuovi eventi e le nuove iniziative più importanti,dove anche collaboratori esterni possono partecipare volontariamente.

 

450_0012

 

FOTO:

Raccolta di album fotografici,divisi viaggio per viaggio. Cliccando su un’anteprima si apre la pagina relativa all’album.Le fotografie sono state compresse e migliorate per l’ upload e la visualizzazione web.Tramite la funzione “Automatizzazione” del programma “Photofiltre”ho attuato il ridimensionamento allo standard 1024×768 pixel di ciascuna foto. Le anteprime degli album sono state inserite con la creazione di classi all’ interno del file “style.css” del template.

Anche le anteprime si riadattano allo schermo,grazie alle regole del Responsive Web Design.

450_0013

 

PAGINE RELATIVE AI PAESI IN CUI OPERA L’ASSOCIAZIONE
(BURUNDI,UGANDA,PALESTINA,INDIA,ECUADOR)
Contenuto testuale,con inserimento di qualche foto,in cui si indicano i luoghi e le strutture su cui si appoggiano i volontari e cosa si fa/si è fatto in quel particolare Paese,raccontandone la realtà della vita delle persone che vi abitano. Ho aggiunto un riferimento per tornare alla Google Map riepilogativa di tutti i Paesi.

450_0014

 

ALTRI CONTENUTI E CARATTERISTICHE

  • Commenti completamente disabilitati
  • Barra di ricerca nel menu di navigazione, con la quale cercare risultati interni al sito
  • Pulsante  per mettere “Mi Piace”  alla pagina Facebook “Sermir Recanati Onlus”.

 

450_0015

 

 

Nel Footer sono presenti link che rimandano al sito dell’ IIS di Recanati e all’associazione “MatteiDev” dell’ istituto, oltre che i riconoscimenti allo sviluppatore.

 

450_0016

Grazie al plugin ”WP Lightbox 2”, le foto si aprono in un riquadro in overlay.
Si passa rispettivamente alla foto precedente o successiva a quella corrente qualora si clicchi sul lato sinistro o destro del riquadro, o con la pressione dei tasti
← (sinistra)  (destra) →  della tastiera.
E’presente anche un link per il download della foto che si sta visualizzando.

450_0017

 

METODO DI LAVORO
Nello sviluppo del sito ho seguito la tecnica di consultazione step by step con il socio di riferimento, ovvero la così detta tecnica “AGILE”, ampiamente usata nel business planning.
In sostanza c’è un continuo dialogo tra committente e sviluppatore, nel quale si discute sui vari punti di avanzamento del lavoro, con un continuo scambio di nuove idee.

Prima di pubblicare il sito online, sono state fatte le prime prove in locale.
Il server web, il server con database MySql e la compatibilità php sono stati possibili con l’ installazione del software multipiattaforma “XAMPP” https://www.apachefriends.org/it/index.html

 

RINGRAZIAMENTI

Ad Alessandro Cucchiarelli, Fabrizio Francescangeli e Antonio Pinelli, del dipartimento di “Ingegneria Informatica e dell’ automazione” dell’ Università Politecnica delle Marche “UNIVPM” di Ancona, che mi hanno seguito e dato utilissimi consigli sulla costruzione del sito, introducendomi alla tecnica AGILE ed al Responsive Web Design durante il periodo di stage scolastico dello scorso febbraio 2014.

 

Al professore Marco Vita, docente di riferimento del progetto “MatteiDev” del IIS “E.Mattei” di Recanati(MC), nonché supervisore nella realizzazione di tutto il sito e della presente relazione.

 

A tutti i soci di SERMIRR (SERvizio Missionario Redentore Recanati), ed in particolare Giovanni Capriati, Emilio Gasparrini e Beatrice Brugia, per avermi offerto la possibilità di collaborare con loro, facendomi fare una nuova esperienza nell’ ambito dell’ informatica e per la loro gentilezza, pazienza e collaborazione.

Back to Top