RELAZIONE PROGETTO. Eleonora Bilinski, Davide Cabbia, Marco Ceseracciu, Lorenzo Scorzato. Corso di Tecnologie Web Professoressa Ombretta Gaggi

Transcript

1 RELAZIONE PROGETTO Eleonora Bilinski, Davide Cabbia, Marco Ceseracciu, Lorenzo Scorzato Corso di Tecnologie Web Professoressa Ombretta Gaggi Account per Amministrazione: user admin password admin Indirizzo di riferimento:

2 Indice: 1. Introduzione 2. Struttura 3. Contenuto 4. Accessibilità 5. Suddivisione dei Compiti 6. Lista Dei File 1. Introduzione Il nostro progetto consiste nella creazione di un sito che fornisca ai visitatori tutte le informazioni su un Concessionario di automobili. Le pagine presenti sono: Informazioni sull'azienda Le locazioni dei vari punti vendita La lista delle auto in vendita Modi di contattare direttamente il venditore con possibilità di finanziamenti e assistenza dopo l'acquisto Maggiori informazioni sugli ultimi modelli dei marchi fornitori

3 Si ritiene che il sito possa venire visitato da un'ampia gamma di visitatori, chiunque con conoscenze informatiche di base non avrà problemi ad esplorarlo. 2. Struttura Abbiamo deciso di utilizzare 2 forme diverse all'interno del sito: la Home presenta un menù centrale molto spazioso, con collegamenti alle diverse aree del sito ma senza alcuna informazione aggiuntiva. Visto l'argomento del progetto abbiamo preferito puntare sul colpo d'occhio iniziale più che sulla rapida diffusione di informazioni. Nelle altre pagine, invece, è presente un menù a sinistra mentre il contenuto occupa il resto dello spazio. Sia nella Home che nelle pagine interne sono presenti Header e Footer: l'header contiene il logo dell'azienda, il suo motto e alcuni elementi per aiutare la navigazione (percorso della pagina corrente, link salta al contenuto non visibile nei browser visuali e link alla pagina di descrizione delle Access Key) mentre nel Footer si trovano il link di accesso per l'amministratore, i collegamenti per visitare eventuali canali del concessionario su Youtube, Facebook, LinkedIn, Twitter e Google+ (non funzionanti) e i certificati di validità w3c. I collegamenti ai canali usano Javascript per aprire i link in nuove finestre, così da non dover usare target = _blank e avere file validi. Abbiamo scelto di aprire i link in nuove tab percé consideriamo che sia il comportamento che l'utente si aspetta, e se non avesse Javascript i link semplicemente si apriranno nella pagina corrente. La pagina Lista auto, Aggiungi auto, Rimuovi auto e Login presentano la stessa disposizione delle altre pagine.

4 Attraverso la pagina di login, l'amministratore del sito può accedere alle opzioni di gestione del sito nelle pagine Aggiungi auto, Rimuovi auto. Illustrazione 1: Screenshot che mostra la struttura del sito. Preso da un computer del laboratorio con browser Firefox 15.0 per Linux 3. Contenuto 3.1 Parte Pubblica Nella pagina Home non è presente nessun effettivo contenuto, ma solo i collegamenti alle pagine interne del sito. Abbiamo scelto questo approccio, che si allontana dall'impostazione consigliata durante il corso, per rispecchiare il mercato delle automobili così come viene presentato in ambito pubblicitario dove anche un automobilina a pedali diventa un accessorio elegante e di lusso. La nostra Home Page vuole quindi essere una vetrina. Nella pagina Azienda vengono presentati i soci fondatori del Concessionario. In Dove Siamo si trovano tutte le informazioni riguardanti le diverse sedi di Concessionario, numeri di telefono, fax e indirizzo, oltre all'immagine che indirizza alla pagina di Google Maps; le informazioni sulle sedi sono raggiungibili direttamente dai link presenti nel Footer di ogni pagina.

5 La sezione Marchi contiene solo i collegamenti alle sottosezioni dei vari produttori che forniscono Concessionario, ovvero Fiat, Ferrari, Ford, Renault e Peugeot. Nelle sottosezioni vengono proposti i modelli di punta disponibili alla vendita. Per gli schermi di medio/grandi dimensioni è disponibile la funzione Gallery che si attiva cliccando su un' immagine. La funzionalità Gallery è visibile solo agli utenti con JavaScript attivo. Nella pagina Lista Auto è possibile effettuare ricerche tra le varie auto disponibili. Ogni auto possiede un ID univoco (non visibile dal sito). In Contatti sono presenti gli indirizzi di varie sezioni di Concessionario, quelle che si occupano di informazioni generiche, acquisto di modelli recenti, vendita o acquisto di auto usate, assistenza post-vendita e finanziamenti. 3.2 Parte Privata Il link Amministrazione presente nel footer di ogni pagina permette all'amministratore di raggiungere la pagina di Login e di autenticarsi all'interno del sito attraverso l'inserimento di username e password (impostate entrambe ad admin ). La pagina di login è dinamica perciò se l'utente ha già effettuato l'accesso questa presenterà la scelta fra le pagine utili all'inserimento o alla rimozione di un veicolo. Il login è gestito attraverso le sessioni, abbiamo deciso di optare per questo metodo dato che erano presenti solo due campi dati (username e password) e gli utenti che avranno possibilità di accedere a queste pagine sono, realisticamente, solo le persone all'interno dell'azienda che conoscono le credenziali. Questo piccolo numero di utenti assicurerà un carico del server estremamente basso, considerando anche che l'interprete perl gestirà solo le pagine di amministrazione e quelle di ricerca (parte pubblica). Le due pagine sottoposte alla procedura di login (anch'esse dinamiche poiché devono controllare lo stato di login) sono: Aggiungi: che permetterà di inserire un veicolo alla lista (idealmente un nuovo modello) Rimuovi: che come suggerisce il nome permetterà di rimuovere un veicolo. Entrambe le pagine agiranno di conseguenza sul file XML concessionario.xml Le pagine Aggiungi e Lista Auto mostrano delle form che vengono generate usando dati presenti su entrambi i file xml per maggiore estensibilità del sito (esempio aggiungere nuovi colori e tipologie di auto). Sia su Aggiungi che su Lista Auto vengono effettuati controlli per verificare che l'input dell'utente sia sensato. Questi controlli sono effettuati sia in JavaScript che in Perl, si è scelto di effettuarli due volte per avere i vantaggi di entrambe le possibilità: JavaScript migliora l'esperienza utente con controlli in tempo reale mentre abbiamo ritenuto indispensabile effettuare i controlli anche dal lato server. Infatti, nel caso Javascript non fosse disponibile, gli eventuali errori verranno notificati una volta che si invia la form. L'utente non ha la possibilità di inserire codice HTML poiché non è necessario per il tipo di dati trattati. 4. Accessibilità e Usabilità Il sito è accessibile anche a persone non vedenti o con difficoltà a utilizzare il mouse. A questo

6 scopo abbiamo utilizzato gli attributi AccessKey e TabIndex come mostrato a lezione, inoltre è presente una pagina di descrizione dei comandi Access Key accessibile dall'header di ogni pagina oltre che dal menù laterale presente nelle pagine interne. In ogni pagina è possibile la funzione Salta al Contenuto, accessibile con Tab, lo schema di colori è stato scelto con l'ausilio del tool (presente all'indirizzo ce permette di evitare accostamenti di colore problematici per persone affette da daltonismo; lo stesso tool è stato utilizzato nella selezione dei diversi colori dei link, rispetto allo standard: i link da visitare sono arancioni ( #ff9200), quelli già visitati gialli (#ffea00) e quello attivo azzurro ( #0ee8f0). Abbiamo utilizzato su tutte le pagine il validatore W3C. Gli unici errori rilevati riguardano comandi specifici per i diversi tipi di browser per effetti grafici (bordi arrotondati, le transizioni, le ombre dei box e i filtri). Sono disponibili fogli di stile CSS per piccoli schermi e per la stampa, più uno aggiuntivo per la funzionalità Gallery. Il sito è compatibile con i maggiori browser incluso Internet Explorer 7 come richiesto dalla consegna. Opera presenta un bug per cui il margine inferiore non viene considerato; per usabilità abbiamo inserito un padding al riquadro contenuto permettendo così la lettura del testo. In Mozilla Firefox la pagina mobile non si riduce oltre un certo limite di larghezza. IE non dispone di versione a schermo piccolo, poiché non può leggere il comando min-width nell'attributo media. Nella versione schermo normale il Footer è in posizione fixed poiché contiene collegamenti utili da tenere in evidenza. Nella versione a schermo piccolo, invece, sarebbe stato un elemento molto ingombrante e avrebbe rallentato la navigazione, per questo motivo si trova a fondo pagina.

7 5. Suddivisione Dei Compiti Tutte le decisioni riguardanti il progetto sono state prese di comune accordo. Le principali sezioni del progetto sono state suddivise tra i membri del gruppo, comunque c'è stata partecipazione di tutti alle diverse fasi della creazione del sito. Eleonora Bilinski e Marco Ceseracciu: sviluppo dei CSS. Davide Cabbia e Lorenzo Scorzato: sviluppo del codice PERL, XML e JavaScript. La relazione è stata scritta da tutti i membri del gruppo, così come le pagine HTML.

8 6. Lista Dei Files aggiungi.pl cancella.pl libreria.pl lista.pl login.pl logout.pl accesskey.html azienda.html contatti.html dovesiamo.html ferrari.html fiat.html ford.html home.html marchi.html peugeot.html renault.html index.css index_mobile.css index_print.css style.css style_mobile.css style_print.css gallery.css Check.js gallery.js concessionario.xml concessionario.xsd La cartella img inoltre contiene tutti i file di immagini utili al sito.