ERGONOMIA COGNITIVA - SCHEDA TECNICA. STUDENTE: Carmine D Avino

Transcript

1 ERGONOMIA COGNITIVA - SCHEDA TECNICA RISTORANTE: L ETTO STUDENTE: Carmine D Avino INSEGNATE: Maurizio Caporali.

2 Lo scopo del mio gruppo di lavoro è stato creare un sito internet per un ristorante, la scelta è caduta sull Etto, primo ristorante a peso di Napoli, posizionato nel centro storico della città. Dopo aver registrato il dominio su Altervista, il passo successivo è stato quello di utilizzare la piattaforma software WordPress. Questa consente di realizzare siti internet personalizzati, interattivi e continuamente aggiornabili. WordPress è diviso in più sezioni e sottosezioni inerenti alla gestione del sito (articoli, media, pagine, widget, plugin ecc.), l interfaccia ha una buona accessibilità e usabilità ed è possibile apprenderne velocemente le funzioni di base, tenendo anche conto che il web è pieno di tutorial, anche in italiano, su come usarlo al meglio. Una volta appreso il funzionamento di WordPress, bisogna decidere l aspetto del sito. Facendo delle ricerche, abbiamo notato diversi siti internet di ristoranti sotto forma di one page site, cioè siti in cui vengono fornite tutte le informazioni necessarie e utili in un'unica pagina divisa in più blocchi. Su WordPress è possibile usare un gran numero di temi, il modo migliore in cui procedere è cercarne uno che somigli il più possibile alla tipologia di sito che si vuole costruire, in modo da dover effettuare un minor numero di modifiche alla pagina. Molti temi, sono già salvati nella apposita sezione di WordPress, ma è possibile caricarne altri salvati sul proprio pc e scaricabili dal web, alcuni sono gratuiti e altri a pagamento. Abbiamo deciso di usare Avada, un tema ottimo per le one page site e completo di un utile documentazione online che spiega come effettuare diverse modifiche tramite codici forniti dal team di sviluppo del tema, da copiare nelle pagine che intendiamo modificare. La prima cosa che abbiamo cambiato nel tema è stato lo sfondo della schermata Home, usando una semplice immagine presa dal web (black wood) e utilizzando l apposito codice all interno dell unica pagina usata per il sito : [fullwidthmenu_anchor="home"backgroundcolor="#f8f8f8"backgroundimage="http: //alessiaromano.altervista.org/wpcontent/uploads/2014/04/black-wood-texture- 900x1600.jpg"alt="Black-Wood-Texture-900x1600" width="1600" height="900" class="aligncenter size-full wp-image-4284" />" alt=" " width="1920" height="1200" class="alignleft size-full wp-image-469" />" backgroundrepeat="norepeat"backgroundposition="topleft"backgroundattachment="f ixed" paddingbottom="0px"] La sezione usata per la home è stata divisa in due parti tramite il codice: [one_half last="no"] [/one_half] (prima metà) [one_half last="yes"] [/one_half] (seconda metà)

3 Qui abbiamo posto il primo slider con la presentazione dei simboli principali del locale, disegnati usando il programma Illustrator. Per applicare gli slider abbiamo usato il plugin Revolution slider, si è rivelato utilissimo per l intera realizzazione del sito, poiché anche altre sezioni presentano degli slider. Tramite questo plugin è possibile gestire tutti gli slider creati. Una volta installato compare direttamente tra le opzioni del menu principale di WordPress, da lì è possibile modificarne: posizione, immagini di riferimento, tempi e ordine di comparsa delle immagini, metodo di comparsa, dimensioni e altri tipi di modifiche.

4 Anche la sezione Chi siamo del sito è stata divisa in due parti, a sinistra abbiamo posizionato le foto del locale, a destra la descrizione. Tra questa sezione e quella dedicata al menu abbiamo dedicato uno spazio a un illustrazione il misuratore di appetito e a frasi che sono presenti su una parete del locale. Una volta ottenuto il disegno l abbiamo impostato come sfondo e, usando revolution slider, abbiamo fatto in modo che le scritte comparissero in un determinato ordine e con una specifica tempistica. Anche la sezione Menu, divisa in tre parti, presenta degli slider, tre per l esatezza, che servono alla presentazione delle foto dei piatti serviti nel ristorante, posizionati su uno sfondo che dovrebbe ricordare una lavagna. La sezione ricettario è divisa in due parti, a destra abbiamo posizionato dei video presi da youtube tramite il codice: [slider width="100%" height="100%" ] [slide type="video"][youtubeid="z1anzjzusvo" width="600" height="450"][/slide] [slide type="video"][youtube id="bvha6qiecai" width="600" height="450"][/slide] [slide type="video"][youtubeid="z1anzjzusvo" width="600" height="450"][/slide] [/slider] In questa sezione abbiamo aggiunto anche dei collegamenti ai maggiori social network (facebook, twitter e google plu): [social_links colorscheme="light" linktarget="#_blank" facebook="#_parent" twitter="#_parent" google="#_parent"] La seconda metà è dedicata al piatto che deve essere votato dal cliente e alle video ricette. Dopo aver modificato lo sfondo è stato necessario usare un nuovo plugin, Powr, trovato facendo ricerche sul web, utile per stilare sondaggi e votazioni, che arrivano tramite mail al responsabile del sito. Per la sezione Dove siamo, abbiamo usato il plugin Comprehensive google maps, con cui è possibile posizionare, nel proprio sito, una finestra di google maps interattiva, impostando un indirizzo a nostra scelta, ovviamente abbiamo impostato l indirizzo del ristorante.

5 La mappa è stata posizionata nella prima metà della pagina, nella seconda è stata posizionata una semplice immagine con sopra gli orari del ristorante. Come sfondo abbiamo usato la foto di una cucina. Segue la sezione Contattaci. Abbiamo usato il plugin Contact us form per costruire una sezione contattaci, da mettere nella propria pagina web. Nella schermata del plugin si può impostare la grandezza, la posizione e viene fornito un codice captcha.

6

7 Una volta compilato il risultato è questo : Nella parte destra della pagina vengono indicati mail e numero di telefono del ristorante usando il codice html: <h1 style="text-align: center; font-size: 30px!important;"> Oppure contattaci tramite:</h1> <p style="text-align: center; margin-top: -10px; font-size: 17px!important; lineheight: 24px!important;" > info@kiletto.it </p> <p style="text-align: center; margin-top: -10px; font-size: 17px!important; lineheight: 24px!important;">telefono: </p> Per collocarli in maniera ordinata è stato necessario dividere la sezione in quattro parti. L ultima sezione riguarda lo Shop, dove gli utenti possono comprare il merchandising del ristorante. Abbiamo usato il plugin WooCommerce, molto usato per la creazione di negozi online.

8 Una volta installato il plugin nel menu di WordPress compare una opzione, Products, con cui bisogna mettere le immagini dei prodotti da vendere, impostando anche descrizione e prezzo. In un'altra sezione del plugin invece è possibile settare: paese, moneta e metodo di pagamento, controllare gli ordini, e le vendite periodiche (giornaliera, nell ultima settimana, mese e anno) In fondo alla pagina è stato posto un Sidebar con i widget di Facebook e Tripadvaisor grazie alla apposita sezione di WordPress ( Appearence Widget).