Consenso all'uso dei cookies

Perchè passare a Linux
Forum Majorana Informatica Benvenuti

Forum Majorana Informatica Videoguide Uso

Guida Pratica - Come passare al Software Libero, Open Source e Free, senza traumi per aziende e privati

Utilità web gratuite ordinate per categoria

Corso facile di informatica gratuito
Ubuntu Primi Passi - Videoguide italiane

EUCookieLaw - Personalizzare il Banner PDF Stampa E-mail
lunedì 06 luglio 2015

EUCookieLaw - Personalizzare il BannerLa normativa italiana sui cookies prevede che venga effettuato il blocco preventivo dei cookies di terze parti che sono quasi sempre di profilazione e/o anche dei cookies propri di profilazione. Abbiamo visto come utilizzare EUCookieLaw uno script open-source e gratuito che funziona benissimo. Vedremo adesso come personalizzare le azioni, la grafica ed il testo del banner di EUCookieLaw ...

Tralasceremo solamente la parte di codice lato server e ci dedicheremo al codice lato client ed al foglio di stile, ottenendo la personalizzazione del banner.
 
 

Materiale necessario da predisporre

Se usate il mio script Remix, avrete già le personalizzazioni grafiche:

Script EUCookieLaw-222-Remix. Scaricate il file:

EUCookieLaw-222-Remix.zip

Si tratta di un file compresso (zip), doppio click sullo steso ed estraetelo. Otterrete la cartella EUCookieLaw-222-Remix, al cui interno troverete quattro file:

eucookielaw.css

EUCookieLaw.js

eucookielaw-header.php

LEGGIMI.txt

I primi tre file sono quelli che dovrete caricare (upload) nel sito, mentre nel file LEGGIMI troverete i codici che dovete utilizzare per l'installazione dello script.

NOTA: lo script che ho chiamato Remix non è altro che lo script realizzato dall'amico e bravo Diego La Monica, da me leggermente modificato nella grafica, come indicato alla pagina: Blocco preventivo dei cookies come fare?

 



Personalizzare le azioni dello script

Per prima cosa andiamo a vedere le personalizzazioni più significative che possiamo ottenere direttamente dal CODICE 2 che inseriremo lato client. Il codice lo trovare nella versione remix dello script, dentro il file LEGGIMI. Riporto il contenuto del CODICE 2 con le indicazioni necessarie:

cookielaw immagine 12-06
Click sull'immagine per ingrandirla

- 1 -   message - potete inserire il testo dell'informativa breve che apparirà nel banner. Attenzione ai caratteri speciali (ad esempio '  / ecc..) che potete scrivere solo se prima di essi inserite \. Potete anche inserire il link diverso per l'informativa estesa. Nel codice trovate:  <a href=\"\/moduli/Informativa-cookies-privacy.htm\"><strong>  Potete sostituite la parte in blu con un URL completo, ad esempio http://www.istitutomajorana.it/nomeinformativa.html 

- 2 -   showBanner - serve per indicare che il banner dovrà essere mostrato (true = vero)

- 3 -   bannerTitle - potete modificare il testo del titolo del banner. Attenzione all'apostrofo (simbolo speciale) che deve essere preceduto da \, altrimenti non funziona.

- 4 -   agreeLabel - testo del bottone di accettazione dei cookie (potete modificarlo)

- 5 -   disagreeLabel - testo del bottone di rifiuto dei cookie (potete modificarlo). Nell'esempio la riga di codice è preceduta da // e quindi non verrà presa in considerazione. Se eliminate i due //, allora la riga di codice diventerà attiva ed otterrete anche il bottone del rifiuto.

- 6 -   agreeOnScroll - questa riga serve per abilitare l'accettazione dei cookies con lo scroll della pagina (scorrimento). Se non lo volete potete cancellare la riga o inserire i due caratteri iniziali // (disabilitazione della riga).

- 7 -   agreeOnClick - questa riga serve per abilitare l'accettazione dei cookies con un semplice click in qualsiasi punto della pagina web. Se non lo volete potete cancellare la riga o inserire i due caratteri iniziali // (disabilitazione della riga).

- 8 -   reload - questa riga serve per ricaricare la pagina immediatamente dopo l'accettazione dei cookies. Se non lo volete potete cancellare la riga o inserire i due caratteri iniziali // (disabilitazione della riga).

- 8 - reload - questa riga se- 8 - reload - questa riga se- 8 - reload - questa riga serve per ri- 8 - reload - questa riga serve per ri - 9 -   duration - questa opzione indica la durata, in giorni, che dovrà avere il cookie tecnico che scrive lo script. Nell'esempio sono 365 giorni. Significa che per un anno, tornando nel sito non vi apparirà più il banner di accettazione dei cookies. Potete cambiare la durata.  Se non lo volete potete cancellare la riga o inserire i due caratteri iniziali // (disabilitazione della riga). In questo caso il cookie sarà di sessione, significa che alle visite successive del sito vi ritroverete (ogni volta) il banner di accettazione.

Vi sarebbero altre opzioni possibili, ma reputo che queste siano le principali e più importanti.

 



Altezza dello scroll

Se avete abilitato lo scroll (accettazione dei cookies per scorrimento della pagina), precedente punto - 6 -  potete anche decidere di quanti pixel dovete scorre la pagina per l'accettazione dei cookie. Il valore di defaul è di 50 pixel che io reputo pochi, quindi ho modificato tale valore portandolo a 350 pixel. Se volete valori diversi ecco come fare. Aprite col blocco note di Windows (Gedit di Ubuntu, ecc...) il file EUCookieLaw.js (javascript), quindi dal menù Modifica / Trova... cercate con >50  Troverete il testo da modificare in due due diverse posizioni, modificatele entrambe e salvate il file. Nell'esempio sotto file della versione Remix modificato con valore >350:  

cookielaw immagine 12-05
Click sull'immagine per ingrandirla 




Personalizzazioni grafiche del banner

Per apportare modifiche alla grafica del banner dovrete agire sul file eucookielaw.css (foglio di stile). Aprite il file col blocco note di Windows (Gedit di Ubuntu, ecc...). Se il documento non si presenta ben incolonnato, allora aprite il file con Wordpad di Windows e salvatelo, adesso riaprendolo col blocco note lo avrete ben impaginato. Nella parte iniziale troverete le righe di codice relativo al  banner (.eucookielaw-banner). Il file originale prevede uno sfondo opaco scuro, riga cerchiata in blu. Le parti modificate (cerchiate in rosso) come mostrate nelle sottostanti immagini sono quelle presenti nella versione Remix, ma voi potete personalizzarle a piacimento. La versione Remix offre il banner semitrasparente (riga cerchiata in rosso), i valori 49, 47, 37 sono i valori del Red (rosso) Green (giallo) Blue (blu). Il quarto numero 0.9 è la trasparenza (canale Alfa) e può variare da 0 (massima trasparenza)  a 1 (nessuna trasparenza), con i valori decimali intermedi. Nella versione remix trovate il valore 0.9 (90% di opacità). Per trovare i valori RGB dei colori vi rimando alla pagina: RGB Color Codes Chart

cookielaw immagine 12-01
Click sull'immagine per ingrandirla

 

Scendendo verso il basso il contenuto del file, andate a trovare:

.eucookielaw-banner .well h1.banner-title dove dovete aggiungere la parte cerchiata in rosso, prima della parente graffa che deve restare in coda. Il codice aggiunto modifica il colore, la posizione (centrata) e la grandezza del testo del titolo del banner:

cookielaw immagine 12-02
Click sull'immagine per ingrandirla

 

Subito sotto ancora, trovate: .eucookielaw-banner .well p.banner-message dove dovete aggiungere la parte cerchiata in rosso, prima della parente graffa che deve restare in coda. Il codice aggiunto modifica la posizione (centrata) e la grandezza del testo del messaggi (informativa breve del banner):

cookielaw immagine 12-03
Click sull'immagine per ingrandirla

 

Subito sotto trovate: .eucookielaw-banner .well p.banner-agreement-buttons dove dovete aggiungere sostituire la riga cerchiata in blu con le tre righe cerchiate in rosso. Il codice aggiunto modifica la posizione (centrata), il grassetto e la grandezza del testo del bottone di accettazione del banner. 

cookielaw immagine 12-04
Click sull'immagine per ingrandirla

 

Ecco come apparirà il banner con le modifiche già contenute nella versione Remix, sopra illustrate:

Cookie informativa breve e banner come?

ATTENZIONE: ho aumentato la grandezza dei caratteri dei contenuti (testo) del banner per permettere una sufficiente leggibilità anche da smart e tablet. Ovviamente in un PC i caratteri potrebbero sembrare grandi, ma non lo sono per i piccoli schermi.

 


 

Indice del manualeCookies e  Privacy

Guida completa

INDICE

___________________________________________        

 

Punto 11 - Blocco preventivo dei cookies in generale

 

 

Per Commentare

EUCookieLaw come personalizzare il banner

 
Ultimo aggiornamento ( giovedì 09 luglio 2015 )
 

Ubuntu 14.04 Italiano Plus - Remix - 3D