Galleria Immagini in Html

Parent Previous Next


  Galleria Immagini in Html


Gli strumenti presenti in questa finestra permettono di realizzare in pochi e semplici passi Gallerie Immagini in formato Html visualizzabili con qualsiasi browser, personalizzabili sia nell'aspetto che nelle funzionalità. Questo strumento si rivela particolarmente utile per realizzare velocemente archivi o cataloghi che si possano visualizzare facilmente e senza la necessità di installare altri software. Il codice in html, css e javascript necessario per la realizzazione delle pagine ha inoltre il vantaggio di occupare solo pochi kilobyte, rendendo più agevole anche la distribuzione del prodotto finito.









Panoramica dell'interfaccia utente:



A.  Pannello di Controllo dell'elaborazione

B.  Lista di lavoro

C.  Area di Anteprima


Strumenti:


1.   Opzioni Pagina Html

2.   Opzioni Miniature e Didascalie





A.  Pannello di Controllo dell'elaborazione


Il Pannello di Controllo dell'elaborazione posizionato nella parte superiore della finestra strumenti contiene un insieme di controlli che consentono di scegliere le opzioni di esportazione della Galleria Immagini in Html (cartella di destinazione, compressione Jpeg delle immagini, backup automatico, ecc.) e di avviare l'elaborazione delle immagini contrassegnate o di tutte le immagini presenti nella lista di lavoro.





 Pulsante menu principale


Questo pulsante visualizza il seguente menu:


   


In dettaglio il menu:



Cliccare qui per una descrizione dettagliata del menu






Scelta della cartella di destinazione:





Cliccare su questo pulsante per scegliere la cartella di destinazione della Galleria Html; sarà visualizzata la finestra di accesso alle risorse del computer (raffigurata nell'immagine sottostante) tramite la quale sarà possibile selezionare la cartella:





Dopo aver selezionato la cartella cliccare sul pulsante OK per confermare.

Nella stessa finestra è inoltre possibile creare immediatamente una nuova cartella, assegnarle un nome e utilizzarla come destinazione per la Galleria Html.

Il  percorso assoluto  della cartella selezionata sarà visualizzato nella casella sottostante al pulsante come indicato dalla freccia di colore rosso nell'esempio che segue:







Esplorazione della cartella di destinazione



Cliccare su questo pulsante per visualizzare il contenuto della cartella di destinazione tramite una finestra dell'Esplora Risorse del Sistema Operativo in uso.



Finestra di Esplora Risorse in Windows 7







È possibile scegliere nella lista a cascata il livello di compressione da applicare: il valore 10 offre una ridotta compressione e garantisce un'ottima qualità delle immagini. I valori inferiori a 10 applicheranno alle immagini una compressione maggiore con conseguente graduale perdita di qualità.






Abilitare questa casella di controllo inserendo il segno di spunta per attivare il backup automatico delle immagini originali (impostazione predefinita di Png ToolKit). L'applicazione creerà una copia esatta di ogni immagine originale elaborata, registrandola nella stessa cartella di origine con lo stesso nome, ma con l'aggiunta sia di un suffisso con la data e l'ora di realizzazione del backup sia dell'estensione _bak.

Per abilitare il backup posizionare il cursore del mouse sulla casella di controllo e cliccare il tasto sinistro; ripetere l'operazione per rimuovere il segno di spunta e disattivare il backup automatico.



     Nota Bene

Durante il periodo di apprendimento dell'applicazione è buona norma lasciare attiva questa opzione per evitare il più possibile la perdita accidentale di dati. Tuttavia è da ricordare che le ripetute creazioni delle copie di backup a seguito di numerose elaborazioni produrranno un incremento dello spazio occupato sul disco fisso dalle proprie immagini. Dovrà essere cura dell'utente rimuovere, se necessario e con cautela, i file di backup non più necessari e liberare di conseguenza spazio sul disco fisso.






È possibile usare questi due pulsanti per selezionare nella lista di lavoro l'immagine precedente o l'immagine seguente.





Questo pulsante consente di creare e visualizzare un'anteprima della Galleria in Html; essa sarà aperta in automatico dal browser predefinito.



     Nota Bene

Nessuna modifica sarà applicata ai file originali presenti nella lista di lavoro.






  Pulsanti di avvio elaborazione


I 2 pulsanti permettono di avviare l'elaborazione per generare la Galleria Html.



  Avvia l'elaborazione solo delle immagini contrassegnate



  Avvia l'elaborazione di tutte le immagini




     Nota Bene

Non è possibile apportare modifiche ad una Galleria Html generata, ma si dovrà riaprire il progetto in PNG ToolKit, modificare le opzioni e generare nuovamente la Galleria.







B.  Lista di lavoro


È l'elenco delle immagini inviate alla finestra strumenti per essere processate.

In questa finestra le immagini sono elencate mostrando il percorso assoluto di ogni file (cliccare qui per dettagli su nomi di file, estensioni, percorso assoluto).


Le liste di lavoro delle finestre strumenti presentano alcuni elementi in comune: per una panoramica dettagliata cliccare qui.





C.  Area di anteprima


In quest'area è possibile visualizzare l'anteprima dell'immagine selezionata nella lista di lavoro.






Panoramica sugli strumenti di questa finestra



Le opzioni disponibili per la creazione della Galleria Html sono state suddivise in 2 gruppi denominati rispettivamente: Opzioni Pagina Html, Opzioni Miniature e Didascalie.






1.   Opzioni Pagina Html


Opzioni relative alla scelta delle impostazioni generali del progetto e della pagina html: nome e destinazione del progetto, modello della Galleria, nome della pagina principale, set dei caratteri (charset), titolo da visualizzare nella pagina.





I primi 3 pulsanti in alto a sinistra relativi al progetto consentono rispettivamente (in ordine da sinistra a destra) di: creare un nuovo progetto, aprire un progetto esistente, salvare il progetto.





Scegliere nella lista a cascata il modello da applicare alla Galleria Html. Cliccando sull'immagine a destra è possibile visualizzare un'anteprima ingrandita del modello selezionato.

Attualmente PNG ToolKit offre i seguenti 3 modelli:



Simple




Responsive Html Gallery




Responsive Html5 Gallery




Cosa significa Responsive Html Gallery?


Le Gallerie Html sono dette "Responsive", cioè "Reattive", quando il loro aspetto è perfettamente compatibile e visualizzabile in qualsiasi dispositivo: desktop, tablet e smartphone.

Attraverso l'uso di istruzioni Html e CSS il contenuto della pagina Html si adatta e ridimensiona a qualsiasi risoluzione dello schermo.






Digitare nel campo di input il nome da assegnare alla pagina principale della Galleria Html. L'estensione ".html" sarà assegnata in automatico al nome del file e non è necessario digitarla.



     Nota Bene

Si ricorda che nei nomi di file non è consentito inserire i seguenti caratteri riservati al Sistema Operativo:

|    \    /    <    >    :    "    *    ?






Scegliere nella lista a cascata il Charset (set dei caratteri o insieme dei caratteri) da applicare per la codifica del testo visualizzato nella pagina html della Galleria.

Per visualizzare correttamente una pagina html è necessario indicare l'insieme di caratteri usati per la codifica del testo. Se non si sceglie il corretto charset sulla base della propria lingua alcuni caratteri potrebbero non essere visualizzati in modo corretto.


Esistono diversi standard di codifica dei caratteri: ASCII, ISO-8859, ANSI, UTF-8. In ognuno di essi ogni carattere è associato ad un numero (generalmente da 0 a 255).






È possibile personalizzare la pagina Html digitando un testo nella casella di input che sarà visualizzato come titolo della Galleria.







2.   Opzioni Miniature e Didascalie


Attraverso questo gruppo di opzioni sarà possibile personalizzare l'aspetto, le dimensioni, la distribuzione delle miniature e delle didascalie nella Galleria Html.



     Nota Bene

Alcune opzioni non sono disponibili in tutti i modelli di Galleria.





Miniature



Dimensione (px)

Dimensione delle miniature espressa in pixel con valori compresi tra 32 e 512 selezionabile attraverso il cursore scorrevole orizzontalmente.


Opacità (max 100)

In alcuni modelli di Galleria è possibile impostare il livello di opacità delle miniature; esse saranno visualizzate al livello massimo di opacità solo al passaggio del mouse.


Colonne

Permette di scegliere la quantità di colonne in cui suddividere e visualizzare le miniature.


Distanza

Nel modello di Galleria Responsive Html5 è possibile impostare la distanza tra le miniature selezionando un valore compreso tra 1 e 25 corrispondente ad un valore percentuale compreso tra lo 0,4% e il 2,8% dello spazio totale disponibile per le miniature.


Frame (%)

Il frame è la percentuale di spazio da dedicare alla visualizzazione delle miniature. Esso è un parametro disponibile solo nei modelli di Galleria Responsive.





Didascalie



Formato

Con questo parametro è possibile scegliere di visualizzare come didascalia il nome del file di ogni immagine oppure un numero progressivo.


Font (pt)

Dimensione del carattere delle didascalie espresso in punti


Caratteri max

Con questo parametro è possibile scegliere la quantità di caratteri da visualizzare nelle didascalie. Se si sceglie di visualizzare il nome del file come didascalia si potrà limitare la quantità totale di caratteri da mostrare per impedire che eventuali nomi di file molto lunghi possano causare problemi nella disposizione delle miniature; è anche possibile scegliere la direzione di troncatura del testo eccedente, rimuovendo i caratteri da destra o da sinistra.

Il valore 0 non rimuoverà alcun carattere dalla didascalia che sarà visualizzata per intero.




Al termine della scelta delle opzioni cliccare su uno dei 2 pulsanti disponibili nel Pannello di Controllo per avviare l'elaborazione e la creazione della Galleria Html come specificato nel punto A di questa pagina. cliccare qui per tornare al punto A