Introducing 

Prezi AI.

Your new presentation assistant.

Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.

Loading…
Transcript

COME FARE UN CAROSELLO DI IMMAGINI IN CLAVIS

Sergio, Bibliovillapizzone

I vantaggi di un carosello

Un carosello ti permette di:

  • promuovere un'attività o un evento usando le immagini e poco spazio della pagina
  • è rapido e automatico, quindi l'utente non deve cliccare o cercare nulla

Perché un carosello?

Cosa promuovere

  • attività permanenti(laboratori con le scuole)
  • eventi
  • spazi (foto delle biblioteca)
  • iniziative
  • ecc...

Creare le immagini

Per creare le immagini che scorreranno nel carosello, bisogna:

  • cercare quelle che fanno al proprio caso
  • ridimensionarle in base alle proprie esigenze (tutte dovranno avere la stessa dimensione)

Dove cercare le immagini

Cercare

Per usare immagini non coperte da diritti d'autore, si possono utilizzare questi siti:

www.unsplash.com

www.pixabay.com

https://digitalcollections.nypl.org/

1

Come modificare le immagini

Creare 1

Per modificare le immagini puoi utilizzare questi due strumenti, tra i più semplici e gratuiti:

  • canva
  • gimp

Oppure, se puoi continuare ad utilizzare gli strumenti che conosci già per modificare le immagini. L'importante è che siano tutte delle stesse dimensioni in pixel.

2

Canva

Seleziona le dimensioni personalizzate e imposta i pixel più adatti per il tuo progetto. (Es. 852X210 px= 12 spazi di widget)

Modificare le immagini con canva

Posizionati nella sezione caricamenti, carica la tua immagine e inseriscila, trascinandola a destra

Modificare le immagini con canva

Ingrandisci o riduci l'immagine, trascinando i bordi

Inserisci una casella di testo, se ti serve, e modifica carattere, colore ecc..

Creare un banner con gimp

Creare 2

Dopo aver aperto con gimp l'immagine che vuoi utilizzare, copiala

e incollala

come un nuovo livello

nel banner che stai creando

3

Altre indicazioni essenziali

Altre indicazioni di base

  • Digita "m" per passare alla modalità di spostamento immagine
  • Digita CTRL+l per visualizzare i livelli dell'immagine
  • Digita "t" per inserire una casella di testo
  • Per scalare l'immagine, seleziona dal menù"Immagine", la voce "Scala immagine"
  • Per scalare l'immagine del livello attivo, seleziona dal menù "Livello", la voce "Scala livello"

Per maggiori indicazioni e strade alternative, consulta la guida di gimp.

Caricare le immagini

Carica le immagini su DNG, utilizzando la procedura consueta

Per ritrovare più rapidamente le immagini, ti consiglio di creare una sottocartella "Banner"

Come costruire il carosello

Costruire il carosello

I passaggi per far funzionare un carosello di immagini sono:

  • creare un widget html nella sezione in cui vuoi inserirlo
  • inserire il codice html
  • modificare il codice html, inserendo i link e le immagini che ci interessano
  • fare gli ultimi ritocchi

La prima volta crea un widget html prima in una pagina di bozza, poi dopo averlo testato, creane uno nella pagina che ti interessa e copia il codice html

Widget html

1

Inserisci nel widget html, copiandolo e incollandolo, il codice che trovi qui: https://goo.gl/4yTc2y

Codice html

2

Modificare il codice html

Ritrova il tuo banner

Copia il suo indirizzo url

Modificare l'html

Clicca con il tasto destro del mouse sull'immagine che ti interessa e copia l'indirizzo

Trova l'immagine banner che hai caricato nella sottocartella "Banner" dalla sezione "File&immagini" oppure "simulando" di caricare un'immagine dalla sezione testo della pagina, come in questa immagine

Inserisci i link delle immagini nell'hmtl dov'è indicato

Per ogni <img src="..."> inserisci il link di una sola immagine

3

Dopo aver inserito tutti i link delle immagini:

Fare gli ultimi ritocchi

1) inserisci i link della pagina che vuoi associare ad ogni immagine nello spazio indicato da <a href="---------INSERIISCI QUI, TRA LE VIRGOLETTE, IL LINK DELL'EVENTO O DELLA PAGINA COLLEGATA AL BANNER--------"> oppure elimina l'intera riga

2) inserisci l'eventuale testo alternativo nello spazio indicat dopo l'attributo alt="..."

3) elimina tutte le sezioni che non ti interessano. Per sezione si intende questo:

<div class="item">

<a href="---------INSERIISCI QUI, TRA LE VIRGOLETTE, IL LINK DELL'EVENTO O DELLA PAGINA COLLEGATA AL BANNER--------">

<img src="---------INSERIISCI QUI, TRA LE VIRGOLETTE, IL LINK DELL'IMMAGINE--------" alt="---INSERISCI QUI IL TESTO ALTERNATIVO----"></img>

</a>

</div>

4

Prima di pubblicare...

Testare il carosello

La prima volta salva la pagina bozza che hai creato e visualizza le bozze per capire se funziona tutto

Se funziona tutto, allora crea un widget html nella pagina che ti interessa, copia il codice html della bozza e salva e pubblica.

In caso contrario, vediamo insieme gli errori più comuni:

Problemi più comuni

  • Il carosello finisce nel vuoto e non riparte dopo l'ultima immagine
  • Le immagini si sovrappongono
  • Il carosello non parte

Errori comuni

Il carosello non parte o non si vede

Questo problema è dovuto alla mancanza del tag <div class="item active">, probabilmente sostituito nella prima immagine da <div class="item">

Non parte

Immagini sovrapposte

Se il carosello, ti appare così:

Immagini sovrapposte

allora quasi sicuramente, manca un tag </div>, tra due sezioni di immagini:

Qui manca un tag </div>

<div class="item">

<a href="---------INSERIISCI QUI, TRA LE VIRGOLETTE, IL LINK DELL'EVENTO O DELLA PAGINA COLLEGATA AL BANNER--------">

<img src="---------INSERIISCI QUI, TRA LE VIRGOLETTE, IL LINK DELL'IMMAGINE--------" alt="---INSERISCI QUI IL TESTO ALTERNATIVO----"></img>

</a>

<div class="item">

<a href="---------INSERIISCI QUI, TRA LE VIRGOLETTE, IL LINK DELL'EVENTO O DELLA PAGINA COLLEGATA AL BANNER--------">

<img src="---------INSERIISCI QUI, TRA LE VIRGOLETTE, IL LINK DELL'IMMAGINE--------" alt="---INSERISCI QUI IL TESTO ALTERNATIVO----"></img>

</a>

</div>

Tutte le immagini sovrapposte

Se vedi le immagini tutte sovrapposte, probabilmente manca il tag <div class="carousel-inner"> , che dovrebber essere all'inizio dell'html del carosello, prima della sezione della prima immagine:

Tutte le immagini sovrapposte

<!-- Wrapper for slides -->

<div class="carousel-inner">

<div class="item active">

<a href="---------INSERIISCI QUI, TRA LE VIRGOLETTE, IL LINK DELL'EVENTO O DELLA PAGINA COLLEGATA AL BANNER--------">

<img src="---------INSERIISCI QUI, TRA LE VIRGOLETTE, IL LINK DELL'IMMAGINE--------" alt="---INSERISCI QUI IL TESTO ALTERNATIVO-----"></img>

</a>

</div>

Carosello nel vuoto

Vuoto

L'errore è dovuto alla cancellazione del tag </div>, dopo la sezione dell'ultima immagine.

La conclusione corretta deve essere questa con 2 </div>

<div class="item">

<a href="---------INSERIISCI QUI, TRA LE VIRGOLETTE, IL LINK DELL'EVENTO O DELLA PAGINA COLLEGATA AL BANNER--------">

<img src="---------INSERIISCI QUI, TRA LE VIRGOLETTE, IL LINK DELL'IMMAGINE--------" alt="---INSERISCI QUI IL TESTO ALTERNATIVO----"></img>

</a>

</div>

</div>

Learn more about creating dynamic, engaging presentations with Prezi