COOKIES-PRIVACY - Norme EUCookieLaw - Personalizzare il Banner | EUCookieLaw - Personalizzare il Banner |
|
|
|
| lunedì 06 luglio 2015 | |
|
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 Script EUCookieLaw-222-Remix. Scaricate il file: 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: 
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: 
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 
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:
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): 
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. 
Click sull'immagine per ingrandirla
Ecco come apparirà il banner con le modifiche già contenute nella versione Remix, sopra illustrate: 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.
Guida completa INDICE ___________________________________________
Punto 2 - Quali cookies installa il mio Sito Web? Punto 3 - Rispettare le norme sui cookies - Come fare? Punto 11 - Blocco preventivo dei cookies in generale Punto 12 - Personalizzare il banner (grafica e testo)
|
|
| Ultimo aggiornamento ( giovedì 09 luglio 2015 ) |
La 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 ...
(sei qui) 
