Oggetto Galleria

La diffusione delle fotocamere digitali e dei servizi online rende straordinariamente semplice pubblicare e condividere intere collezioni di fotografie attraverso il Web. In questo modo è possibile pubblicare le foto di famiglia per farle vedere a parenti e amici lontani, oppure creare album e cataloghi per hobby o per lavoro.

Con WebSite X5 è possibile inserire stupefacenti Gallerie attraverso le quali far vedere non solo le proprie fotografie ma anche i propri video. Ogni Galleria adotta effetti e metodi di navigazione e visualizzazione diversi: possono, per esempio, presentare un barra di controllo, una sequenza o una griglia di miniature. A prescindere dalla tipologia, tutte le Gallerie utilizzano JavaScript e sfruttano specificatamente HTML5 e CSS3 per la realizzazione degli effetti di visualizzazione.

Alcune delle Gallerie disponibili propongono una griglia o una striscia di Miniature e utilizzano la finestra Show Box per la visualizzazione delle corrispondenti Immagini ingrandite. In questi casi, il Visitatore clicca su una Miniatura e apre l'Immagine o il Video corrispondente in un'apposita finestra sovrapposta alla Pagina principale. A questo punto, posizionando il mouse sull'Immagine richiamata, il Visitatore visualizza i pulsanti che gli permettono di passare direttamente all'Immagine precedente/seguente senza dover ritornare alle Miniature.

L'aspetto della finestra Show Box può essere completamente personalizzato attraverso le opzioni presenti al Passo 2 nella finestra Finestra a comparsa ShowBox.

I comandi necessari per procedere alla creazione di un Oggetto Galleria sono articolati nelle seguenti sezioni:

Elenco Stile Miniature

Le Gallerie possono essere lanciate anche attraverso un apposito collegamento inserito all'interno delle Pagine: per maggiori informazioni vedere Collegamento.

Tra gli Oggetti opzionali (vedi: finestra Gestione degli Oggetti) sono disponibili numerose altre tipologie di Gallerie e SlideShow che è possibile utilizzare all'interno delle Pagine.

7.7.1 Sezione Elenco

Attraverso i comandi di questa sezione si compone la lista di Immagini e Video che devono essere inseriti nella Galleria.

Tutti i file già importati vengono visualizzati nella Lista di file: selezionando un file fra quelli inseriti in tale lista se ne visualizzare l'anteprima nell'apposita finestra.

Nella Lista di file, per ogni Immagine e Video inserito, viene riportato: il percorso del file, l'effetto di comparsa eventualmente associato, un segno di spunta per indicare l'associazione di un collegamento e di una descrizione.

I comandi disponibili per comporre l'Oggetto Galleria sono:

Aggiungi... / Rim uovi: aggiungono nuovi file o rimuovono quelli selezionati fra quelli già inseriti. Possono essere importati file grafici in formato: .JPG, .GIF, .PNG, .PSD, .BMP, .TIF, .DIB, .PCX, .RLE, .TGA, .WMF. In più, possono essere importati file video in formato .MP4.

Cliccando sul triangolino presente sul pulsante Aggiungi... è possibile visualizzare un sotto-menu con le seguenti voci: Aggiungi Immagine..., Immagine da Libreria Online..., Aggiungi Video... e Aggiungi Video YouTube/Vimeo....

Tramite la finestra richiamata dal comando Immagine da Libreria Online... viene visualizzata una collezione di oltre 900.000 immagini royalty-free fra cui è semplice scegliere quelle da importare.

Tramite la finestra richiamata dal comando Aggiungi Video YouTube/Vimeo... è possibile specificare l'indirizzo URL del video già pubblicato su portali come YouTube™ o Vimeo che si vuole inserire.

Sposta sopra / Sposta sotto: agiscono sull'ordine di visualizzazione dei file già inseriti nella Lista dei file, spostando verso l'alto o verso il basso quello selezionato.

Modifica...: richiama l'Editor Immagine interno per modificare l'Immagine selezionata nella Lista dei file.

In base al tipo di Galleria scelta, per ciascun Immagine/Video inserito può essere possibile definire alcune Opzioni:

Collegam ento: imposta un link sull'Immagine/Video selezionato fra quelli presenti nella Lista di file. Cliccando sul pulsante viene richiamata la finestra Collegamento attraverso la quale è possibile scegliere il tipo di azione oltre che le relative opzioni. Nel

caso delle Gallerie che utilizzano le Miniature, il collegamento così impostato sostituisce quello con l'Immagine ingrandita anche se viene attivata l'opzione Mostra ingrandimento su click tramite ShowBox.

Effetto: imposta, attraverso la finestra Proprietà Effetto richiamata cliccando sul pulsante un effetto di entrata, movimento e zoom sull'Immagine/Video selezionato fra quelli presenti nella Lista dei file.

Su versioni del Brow ser che non supportano HTML5 e CSS3, le Gallerie in HTML5 funzionano correttamente ma potrebbero non venire riprodotti tutti gli effetti di visualizzazione impostati sulle immagini. In questi casi, gli effetti di visualizzazione non supportati vengono automaticamente sostituiti con l'effetto Dissolvenza.

Descrizione: campo per digitare un testo di descrizione per l'Immagine o il Video selezionato nella Lista dei file. Il testo di descrizione viene riportato in calce nella finestra che visualizza l'Immagine o il Video ingrandito.

7.7.2 Sezione Stile

Attraverso i comandi di questa sezione si sceglie il tipo di Galleria da realizzare e se ne definiscono le impostazioni generali.

Le Gallerie disponibili sono le seguenti:

SlideShow Classico

È una Galleria in cui le Immagini e i Video vengono presentati in sequenza, uno dopo l'altro: se impostato, la modalità di visualizzazione delle Immagini dipende dal tipo di effetto di entrata. Il passaggio da un'Immagine all'altra può essere gestito attraverso i comandi della Barra Controlli. All'interno della Barra Controlli è possibile prevedere la visualizzazione di piccole Miniature per permettere al Visitatore di aprire subito le Immagini o i Video di suo interesse.

Galleria Orizzontale

In questa Galleria viene proposta una serie di Miniature, posizionate in orizzontale sopra o sotto l'Immagine in primo piano. È sufficiente posizionare il mouse sopra le Miniature perché queste scorrano verso destra/sinistra:

cliccando su una Miniatura, l'Immagine o il Video corrispondente viene visualizzato in primo piano. Le Immagini ingrandite vengono visualizzate in base all'effetto di entrata eventualmente impostato.

Galleria Verticale

Analoga alla precedente, questa Galleria si distingue solo per il fatto che le Miniature vengono visualizzate in verticale, a destra o a sinistra rispetto all'Immagine in primo piano.

Miniature

Anche in questa Galleria viene presentata una griglia con tutte le Miniature: cliccando su una Miniatura, l'Immagine o il Video corrispondente viene aperto in primo piano attraverso la finestra Show Box.

Miniature su più schede

Questa Galleria è analoga alla precedente ma, soprattutto nel caso in cui le Immagini da includere siano molte, permette di dividerle in schede permettendo di impostare il numero massimo di righe di Miniature da visualizzare: il Visitatore potrà passare da una scheda all'altra, rimanendo sempre nella stessa Pagina del Sito, attraverso un'apposita pulsantiera.

Miniature Orizzontale

In questa Galleria viene visualizzata un'unica striscia orizzontale di Miniature. Cliccando su una Miniatura, l'Immagine o il Video viene visualizzato attraverso la finestra Show Box.

Miniature Verticale

Analoga alla precedente, questa Galleria si distingue solo per il fatto che le Miniature vengono visualizzate in verticale.

A seconda del tipo di Galleria selezionato, vengono proposte Impostazioni e opzioni per gestire i Comandi di navigazione diverse.

Le Impostazioni che possono essere presentate sono:

Dim ensioni m assim e: definisce le dimensioni massime in pixel della larghezza e dell'altezza che le Immagini possono assumere. Cliccando sull'icona del lucchetto, nell'impostare le dimensioni viene mantenuta inalterata la proporzione fra la larghezza e l'altezza.

Miniature visibili: imposta il numero di Miniature che devono essere visualizzate.

Posizione Miniature: definisce dove devono essere visualizzate le Miniature rispetto all'Immagine principale.

Font descrizione: specifica il Tipo di carattere, le dimensioni e lo Stile del testo. Il menu a tendina propone: il comando per applicare il Font di default (definito dallo Stile dell'elemento Testo della Pagina nella finestra Stile dei Testi); la lista dei Safe Fonts, ovvero dei font presenti su tutti i dispositivi e per i quali, quindi, non è necessaria alcuna pubblicazione; tutti i Google Fonts e i Web Fonts aggiunti attraverso la finestra Aggiungi Web Font richiamata dal comando Altri tipi di carattere. Queste formattazioni vengono utilizzate per le didascalie create con il campo Descrizione presente nella Sezione Elenco.

Colonna Sonora: imposta un file musicale (file in formato .MP3) da riprodurre come colonna sonora durante la visualizzazione della Galleria.

Avvia autom aticam ente: fa in modo che la riproduzione di Immagini e Video parta automaticamente non appena la Galleria viene visualizzata.

Riproduci in ordine casuale: fa in modo che le Immagini e i Video vengano proposti non in base all'ordine di inserimento ma in base a una sequenza determinata casualmente.

Num ero di righe per scheda: imposta il numero di righe della matrice in cui le Miniature vengono organizzate.

Mostra descrizione su com parsa: fa in modo che al passaggio del mouse su una Miniatura venga visualizzata tramite Tooltip l'eventuale descrizione (opzione disponibile nella sezione Elenco) associata all'Immagine o al Video che presenta. Alla Tooltip viene applicato lo stile definito nella finestra Tooltip su passaggio del mouse.

Mostra ingrandim ento su click tram ite Show Box: attiva sulle Miniature il collegamento per la visualizzazione nella finestra Show Box dell'Immagine o del Video corrispondente.

Dim ensioni m assim e: disponibile solo nel caso in cui sia attiva l'opzione Mostra ingrandimento su click tramite ShowBox, definisce le dimensioni massime in pixel della larghezza e dell'altezza della finestra Show Box. Cliccando sull'icona del lucchetto, nell'impostare le dimensioni viene mantenuta inalterata la proporzione fra la larghezza e l'altezza.

Mostra le m iniature nello Show Box: attiva di default, aggiunge all'interno della finestra Show Box una lista di miniature delle Immagini e dei Video inclusi. In questo modo, il Visitatore non è vincolato a una consultazione sequenziale ma può visualizzare subito le Immagini o i Video che più gli interessano.

Stile pulsanti: definisce lo stile dei pulsanti visualizzati direttamente ai lati dell'Immagine principale della Galleria, scegliendo fra le grafiche proposte.

Invece, le opzioni riguardanti i Comandi di navigazione che possono essere presentate sono:

Visualizzazione pulsanti: definisce se e come devono essere visualizzati dei pulsanti di navigazione direttamente ai lati dell'Immagine principale della Galleria per permettere al Visitatore di passare alla precedente/successiva. È possibile fare in modo che questi pulsanti siano Sempre visibili, Non visibili o Visibili su passaggio del mouse.

Stile pulsanti: definisce lo stile dei pulsanti visualizzati direttamente ai lati dell'Immagine principale della Galleria, scegliendo fra le grafiche proposte.

Mostra Barra Controlli: attiva di default, imposta la visualizzazione su passaggio del mouse di una Barra Controlli attraverso la quale il Visitatore può gestire la navigazione fra le Immagini e i Video della Galleria. Di base, la Barra Controlli presenta i pulsanti

Avvia presentazione, Immagine precedente e Immagine successiva.

Colore: specifica il colore di sfondo della Barra Controlli.

Abilita visualizzazione a pieno scherm o: aggiunge il pulsante nella Barra Controlli che viene visualizzata su passaggio del mouse: cliccando su questo pulsante, il Visitatore può visualizzare la Galleria a pieno schermo, ovvero in modo che occupi l'intera finestra del Brow ser.

Visualizza Miniature nella Barra Controlli: attiva di default, aggiunge una lista di miniature delle Immagini della Galleria nella Barra Controlli che viene visualizzata su passaggio del mouse. In questo modo, il Visitatore non è vincolato a una consultazione sequenziale ma può visualizzare subito le Immagini o i Video che più gli interessano.

Mostra Indicatore di posizione: fa in modo che alla Galleria venga sovrapposto un indicatore grafico che informa l'Utente sul numero e/o la posizione delle immagini che lo compongono.

Stile pulsanti: disponibile nel caso sia stata attivata l'opzione Mostra Indicatore di posizione, consente di scegliere fra set grafici diversi per determinare l'aspetto dell'Indicatore stesso.

Allineam ento: disponibile nel caso sia stata attivata l'opzione Mostra Indicatore di posizione, consente di scegliere come allineare l'Indicatore rispetto alle immagini della Galleria.

7.7.3 Sezione Miniature

Attraverso i comandi di questa sezione si definisce l'aspetto grafico delle Miniature delle Gallerie che le prevedono.

La Miniatura è una versione rimpicciolita dell'Immagine o del Video inserito nella Galleria e viene creata automaticamente dal Programma. Per essere più belle, le Miniature vengono presentate all'interno di telai che le rendono simili a diapositive, fotogrammi di una pellicola, post-it, ecc.

Per definire l'aspetto delle Miniature si può utilizzare:

Im m agine predefinita: propone una lista di telai predefiniti fra cui è possibile selezionare quello da applicare alle Miniature.

Im m agine personalizzata: richiama il file grafico (in formato .JPG, .GIF, .PNG, .BMP, .PSD, .TIF, .DIB, .PCX, .RLE, .TGA, .WPG) corrispondente al telaio che si intende utilizzare.

Per creare un nuovo telaio è sufficiente preparare l'immagine e salvarla in un apposito file: è preferibile che l'immagine del telaio sia quadrata e, se è necessario mantenere una trasparenza esterna, salvarla in formato .PNG.

Per le Miniature è anche possibile agire sulle seguenti Opzioni:

Margine esterno alle m iniature: definisce il margine che deve essere mantenuto fra una Miniatura e l'altra.

Margine esterno all'im m agine (%): definisce il margine che deve essere mantenuto fra l'Immagine della Miniatura e il telaio circostante.

Attiva variante di colore: specifica il colore verso il quale deve virare il telaio delle Miniature. In pratica, viene applicato un effetto "colorize" sull'immagine del telaio in modo da virarla verso il colore desiderato.

L'effetto relativo alla variante di colore può essere utilmente impiegato solo su telai che non siano di colore nero o bianco: in questi casi, infatti, il "colorize" non apporta alcuna variazione di tinta.