Introduzione

Continua la nostra esplorazione di Tees X5 Store, il Sito Web di esempio che abbiamo creato con l’intento di spiegare tutte le nuove funzioni introdotte con la versione 9 di WebSite X5.

Abbiamo già visto come abbiamo fatto per creare il modello grafico [http://answers.websitex5.com/post/4458 ] e abbiamo già anche spiegato come siamo riusciti a fare in modo che il template sia sempre a pieno schermo e abbia uno sfondo diverso in base alla pagine/sezioni [http://answers.websitex5.com/post/4448 ], ma abbiamo ancora molte cose interessanti da dire sul template prima di archiviare l’argomento. Quindi, non perdiamo tempo e iniziamo!

Parola d’ordine: Personalizzazione

Dopo aver scelto il modello grafico da applicare o, come nel nostro caso, averlo creato attraverso il Modello Personalizzato, abbiamo la possibilità di sfruttare l’editor interno per aggiungere nell’Intestazione e/o nel Piè di Pagina del template tutti gli elementi che ci servono.

ATTENZIONE: Non sottovalutiamo l’importanza di questa fase del lavoro! Il template non è solo grafica, non è un semplice sfondo che deve rendere carino il nostro Sito. Certo la resa estetica è fondamentale ma il template definisce anche una parte importante dell’interfaccia attraverso la quale le persone potranno interagire con il nostro Sito e quindi dovrà essere anche chiaro, completo e funzionale, oltre che bello.   

Dunque, considerando che Intestazioni e Piè di Pagina del modello sono sezioni che, a differenza dei contenuti, non cambiano durante la navigazione fra le pagine, incominciamo ad aggiungere alcuni elementi essenziali per comporre l’interfaccia utente del nostro Sito.

Intestazione: Logo e slogan

Di sicuro, uno degli elementi che non può mancare nell’Intestazione di un Sito, così come sulla copertina di un libro, è il titolo. Se nel caso di un Sito personale il titolo può corrispondere con il nome dell’autore, nel Sito di un’attività commerciale occorrerà prevedere un logo, un nome e, se disponibile, uno slogan. A meno che questi tre elementi non siano già stati combinati in un’unica immagine, possiamo inserirli anche come immagini e testi diversi.

Per il Sito Tees X5 Store, attraverso la sezione Intestazione della finestra Modifica del Modello, abbiamo fatto le seguenti operazioni:

• Attraverso il comando Inserisci Immagine abbiamo importato il file logo.png e lo abbiamo posizionato adeguatamente. Abbiamo scelto un file in formato .PNG in modo da poter sfruttare la gestione della trasparenza: in questo modo la scritta si fonde perfettamente sullo sfondo del template. In alternativa, avremmo comunque potuto attivare la trasparenza su un colore attraverso l’apposita opzione messa a nostra disposizione dal programma.
• Attraverso il comando Inserisci Testo abbiamo, invece, composto lo slogan (Your Favourite Tee Store). Nell’impostare il colore del testo abbiamo sfruttato lo strumento Contagocce della finestra Colore in modo da riprendere esattamente lo stesso rosso usato nell’immagine del logo. Abbiamo poi scelto fra gli effetti disponibili e impostato un’ombra in modo da dare un po’ di profondità alla scritta.

La scelta di posizionare logo e slogan di fianco al viso della ragazza ritratta nell’immagine di sfondo del template non è casuale: il nostro sguardo è naturalmente attratto dai visi e, in particolare, dagli occhi. In più, siamo abituati a partire a leggere dall’angolo superiore sinistro della pagina (o dello schermo). Dunque il punto in cui abbiamo posizionato logo e slogan è un’area particolarmente calda, su cui cadrà molta dell’attenzione dei lettori. Questo è solo un esempio di come dobbiamo ragionare quando lavoriamo al nostro Sito: considerazioni come queste dovrebbero guidarci nella scelta degli elementi, delle posizioni, dei colori … di tutto ciò che determina l’aspetto finale delle nostre pagine.

Intestazione: Campo di ricerca

Se il nostro Sito Web è ricco di contenuti, ha un Blog con un gran numero di post interessanti o un carrello di e-commerce con un assortito catalogo di prodotti, non possiamo dimenticarci di prevedere un Motore di ricerca interno. Non dimentichiamo, infatti, che non tutte le persone utilizzano i menu di navigazione per esplorare un Sito: molti sfruttano di più i link interni al testo e tanti non vogliono perdere tempo ma arrivare dritti a ciò che interessa loro e per questo tendono a usare un Motore di ricerca. Dunque, uno dei nostri obiettivi dovrebbe essere quello di consentire a ognuno di ottenere l’informazione che cerca nel modo che preferisce.

Con WebSite X5 prevedere un Motore di ricerca interno al Sito è veramente molto semplice. Per il Sito Tees X5 Store, attraverso la finestra Modifica del Modello | Intestazione, abbiamo fatto così:

• Innanzi tutto abbiamo inserito un Campo di Ricerca cliccando sull’omonimo pulsante.
• Dal momento che volevamo dare una grafica particolare al campo di ricerca , lo avevamo già disegnato come parte dell’immagine usata per comporre il template. Abbiamo quindi ridimensionato il campo di ricerca inserito (portandolo a 168x21 px) e lo abbiamo posizionato in modo da sovrapporlo al campo disegnato (coordinate 775,14).
• Per rendere invisibile il campo di ricerca inserito abbiamo reso Trasparente lo Sfondo del Campo e del Pulsante. 
• Per rendere leggibile il testo digitato nel campo di ricerca, abbiamo impostato il bianco come colore del testo. 
• Per ottenere un pulsante “Cerca” trasparente che si sovrappone alla lente di ingrandimento già presente nell’immagine di sfondo abbiamo sostituito il testo  immesso per l’opzione Etichetta Pulsante con tre punti di sospensione e, scegliendo con lo strumento Contagocce il colore del Testo per il Pulsante, abbiamo fatto in modo che fossero dello stesso grigio dell’elemento grafico su cui sono posizionati.

Per attivare il Motore di ricerca interno non dobbiamo fare altro. Considerate che con l’aggiornamento alla versione 9.0.4 il Motore di ricerca è stato notevolmente potenziato. Vi rimando a questa FAQ per maggiori informazioni in merito: http://answers.websitex5.com/post/6648

Ancora un piccolo EXTRA: Banner in rotazione nell’Intestazione del Template

Una possibilità molto interessante che avremmo potuto sfruttare nel Sito Tees X5 Store è quella di creare un carosello di banner e di fare in modo che ciascuno di essi sia visualizzato solo in determinate pagine: in questo modo avremmo potuto, per esempio, prevedere un banner che pubblicizza bigiotteria nelle pagine dello Shop che propongono magliette da donna e un banner che pubblicizza utensili da lavoro per le pagine che propongo magliette da uomo.

Per ottenere questo risultato dovremmo aprire la finestra Modifica del Modello | Intestazione e agire come segue:

• Cliccando sull’omonimo pulsante, inserire uno SlideShow.
• Anche attraverso gli appositi pulsanti, importare tutte le immagini necessarie per comporre tutti i banner che vogliamo visualizzare nel Sito (considerate che un banner può corrispondere a una singola immagine ma può anche essere composto da una breve sequenza di immagini) e ordinarle correttamente.
• Una per volta, selezionare ogni immagine inserita nello SlideShow e, attraverso la finestra richiamata dal pulsante Effetto, definirne: l’effetto di comparsa e il tempo di visualizzazione (Tab Tipo di Effetto);  un’eventuale zoom/spostamento (Tab Zoom e Posizione); le pagine per le quali dovrà essere visualizzata (mettendo un segno di spunta accanto al nome delle pagine sulla mappa proposta nel Tab Pagina).
• Se necessario possiamo anche impostare un collegamento specifico su ogni singola immagine dello SlideShow: per far questo è sufficiente selezionare l’immagine, cliccare sul pulsante Associa un Collegamento e, dalla finestra richiamata, impostare l’azione desiderata.

Piè di pagina: Pulsanti sezioni

Attualmente il Piè di Pagina dei Siti è una sezione a cui viene riservata particolare cura: lo si capisce dalle dimensioni sempre più importanti che assume, dalle informazioni che presenta e dalle funzioni che assolve.

Nel piè di pagina del nostro Sito Tees X5 Store abbiamo scelto di inserire 4 grossi pulsanti che dovrebbero funzionare da scorciatoia per permettere agli utenti di arrivare subito a ciò che è di nostro interesse (ovvero, lo Shop e le offerte speciali) o a ciò che è di suo interesse (ovvero l’Help e la pagina Facebook).

Per creare ciascuno di questi 4 pulsanti abbiamo fatto in questo modo:

• Prima di tutto, per ciascun pulsante abbiamo preparato due immagini: una relativa al pulsante nello stato rilasciato e una relativa al pulsante nello stato premuto.
• In Modifica del Modello | Piè di Pagina abbiamo cliccato sul pulsante Inserisci Immagine e importato il file shop.png relativo allo stato rilasciato del primo pulsante.
• Mantenendo la selezione sull’immagine shop.png, abbiamo utilizzato l’opzione File immagine su passaggio del mouse per importare l’immagine shop_hover.png: in questo modo abbiamo impostato l’effetto di mouseover sul pulsante.
• Infine abbiamo cliccato sul pulsante Associa un Collegamento e, dalla finestra richiamata, impostato l’azione (nel caso particolare, un collegamento con Pagina del Sito che porta alla pagina Shop).
• Abbiamo posizionato il pulsante e, in maniera del tutto analoga, creato gli altri tre pulsanti mancanti.

Piè di pagina: Credits e Policy

Il Piè di Pagina è il posto giusto per mettere una serie di informazioni che su un Sito Web non possono mancare (anche perché, in alcuni casi, sono richieste per legge) come per esempio: il Nome e la P.IVA dell’azienda a cui appartiene il Sito, le Policy che regolano l’utilizzo del Sito, il funzionamento dello store online e il trattamento dei dati ai fini della tutela della Privacy, basilari informazioni di contatto.

Nel Piè di Pagina del nostro Sito Tees X5 Store, a parte alcune informazioni che abbiamo inserito direttamente nell’immagine usata come sfondo del template, abbiamo creato dei semplici link testuali sia per la URL del Sito ufficiale di Incomedia, sia per le diverse Policy.

Nel caso specifico delle Policy abbiamo scelto di inserirle come documenti PDF e quindi abbiamo impostato il collegamento sfruttando l’azione File o URL e selezionando il file pdf da File locale su PC. 

Conclusioni

Il nostro modello sta via via prendendo forma e diventando sempre più completo e interessante. Rispetto al Sito di esempio pubblicato (http://tees.websitex5.com ), nell’Intestazione mancano ancora alcuni elementi: i pulsanti per la scelta della lingua, i pulsanti per il login e il contatore dinamico dei prodotti già inseriti nel carrello. Non vi preoccupate:  affronteremo anche questi punti quando parleremo di siti multi-lingua, area riservata e gestione degli utenti e impostazione del carrello di e-commerce.

Alla prossima!

Anche questa volta potete verificare nella pratica tutto quello di cui abbiamo parlato, scaricando questo progetto: http://bit.ly/utEjit

Dopo aver scaricato il file .iwzip dovete semplicemente importarlo in WebSite X5 Evolution 9: prima di farlo ricordatevi però di fare gli aggiornamenti alla versione 9.0.4.