[v11] Consenso all'uso dei cookies

[lemonsong]

Apportando alcune modifiche allo script di questo sito cookiechoices.org abbiamo realizzato questo esempio:

http://lemonsong.altervista.org/test_cookiechoices/

Il sito presenta due modalità di notifica: in showbox (schermata iniziale) oppure in una barra orizzontale posizionata in alto. Noi ci siamo occupati solo della seconda modalità.

Questi sono i passi da seguire:

1. scaricare il file .js modificato da QUI. Lo script imposta un cookie con una durata di 30 giorni. Se si desidera modificare il periodo in cui il browser conserva il cookie, bisogna cambiare il valore 30 presente in questa riga di codice:

[ Guests cannot view attachments ]

2. al Passo 4 - Statistiche, SEO e Codice - Esperto - Prima della chiusura del tag BODY, incollare questo codice:

<script src="files/cookiechoices.js"></script>
<script>
$(function () {
    cookieChoices.showCookieConsentBar('Questo sito fa uso di cookies. Continuando la navigazione se ne autorizza l\'uso.', 'OK', 'Info', 'privacy.html');
});
</script>

Le parti in rosso sono da personalizzare:

Questo sito fa uso di cookies. Continuando la navigazione se ne autorizza l\'uso. (il messaggio che apparirà nella barra - se nella frase ci sono apici, anteporre il backslash)

OK (testo del link per approvare l'uso dei cookies)

Info (testo del link che rimanda ad una pagina contenente maggiori informazioni)

privacy.html (URL relativo o assoluto della pagina informativa)


3. sempre al Passo 4 - Statistiche, SEO e Codice - Esperto - Prima della chiusura del tag HEAD, incollare questo CSS per personalizzare l'aspetto della nostra barra:

<style>
/* div barra */
#cookieChoiceInfo{
    color:white;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:14px;
    line-height:28px;
    background-color: rgb(88, 88, 88); /* per IE7/8 */
    background-color: rgba(88, 88, 88, 0.9);
    top:0; /* bottom:0; per avere la barra in basso */   
    text-align:center;
    padding:20px 0 20px 0;
}
/* links */
    #cookieChoiceInfo a{
    text-decoration:none;
    padding:8px;
    background-color:white;
    font-size:12px;
    border-radius:6px;
    color:#585858;
}
/* link pagina informativa */
    a#more-info{
    margin-left:12px;
}
/* link accettazione */
    a#cookieChoiceDismiss{
    margin-left:24px;
    padding:8px 11px;
}
</style>

Il codice, ovviamente, è tutto personalizzabile.

4. non dimentichiamo di allegare il file cookiechoices.js nella cartella files

[Fabio B.]

Sentitamente ringrazio entrambi ed auguro uno splendido Natale 
Credo che lo userò sempre, che serva oppure no: http://christour.890m.com/

[lemonsong]

http://christour.890m.com/

Hai richiamato due volte il file cookiechoices.js e questo provoca un errore javascript.
Probabilmente hai collegato il file da programma; il file va richiamato nel body come è stato scritto al punto 2.

Inoltre, visto che hai il blog, devi inserire il percorso assoluto della pagina informativa e del richiamo del file cookiechoices.js

Puoi anche scrivere i percorsi, per esempio, così: ../files/cookiechoices.js

Buon Natale pure a te

[Fabio B.]

Grazie di nuovo Lemon; vedi ancora qualcosa da sistemare ora?
A proposito: casualmente ho notato che la sovrapposizione della strip sul menù é strategicamente ottima per impedire che venga ignorata senza darle soddisfazione (lo so che ci sono anche altri links nella pagina come il menù in fondo, ma perché un visitatore dovrebbe ricorrere a stratagemmi elusivi complicandosi la navigazione invece di usare un agevole menù principale?)
Magari si potrebbe fare in modo, via css, che questa sovrapposizione sia voluta (qualunque sia la posizione e l'altezza del menù orizzontale).Grazie ancora.

[lemonsong]

Devi modificare anche il percorso della pagina informativa:

devi inserire il percorso assoluto della pagina informativa

Oppure, come già detto, con ../

[Fabio B.]

giusto; avevo corretto solo ../files/cookiechoices.js 

[lemonsong]

Una piccola correzione:

/* div barra */
#cookieChoiceInfo{
    bla bla bla...
   
    background-color: rgb(88, 88, 88); /* per IE7/8 */
    background-color: rgba(88, 88, 88, 0.9);
   
     bla bla bla...
}

Sostituire quelle due righe con queste:

/* div barra */
#cookieChoiceInfo{
    bla bla bla...
   
    background-color: #585858; /* per IE8 */
    background-color: rgba(88, 88, 88, 0.9);
    *background-color: #585858; /* per IE7 */
   
     bla bla bla...
}

Altrimenti possiamo usare un'immagine png con trasparenza.

[Fabio B.]

done

[Fabio B.]

 http://cirenei.altervista.org/
se uso la visualizzazione flessibile di FF per ridurre la finestra  come da cellulare il messaggio si visualizza correttamente su due righe; se però lo guardo su cell resta tutto su riga singola impedendo la lettura completa; perché?
   

[lemonsong]

Premesso che per testarlo correttamente su dispositivi mobile dovresti renderlo responsive, prova ad aggiungere/modificare così questa regola:

#cookieChoiceInfo {

    bla bla bla...

    padding: 20px; /* modificato */
    box-sizing: border-box; /* aggiunto */
   
}

[Fabio B.]

ciao Lemon, avevo già provato a manipolare quelle due proprietà, ma non va; avevo provato anche con width: device-width ma nulla;
ora ho risolto modificando il viewport con quello script che mi avevi dato:

<script>
//change meta name viewport
$(document).ready(function () {
$("meta[name='viewport']").attr("content", "width=device-width, initial-scale=1");
});
</script>

Grazie infinite 

[pintoff]

Come si allega il file  cookiechoices.js?

[lemonsong]

Con WebSite X5.

Con la 11: Impostazioni Avanzate - Statistiche, SEO e Codice - Esperto - File allegati al codice

File allegati al codice: permette di comporre la lista dei file che è necessario collegare affinchè il codice personalizzato inserito nella pagina funzioni correttamente. Tutti i file collegati vengono visualizzati attraverso una tabella riassuntiva in cui, oltre al nome del file, viene riportato anche il Percorso relativo su Server.

[Massimo]

Ma scusate, con uno script gratuito come questo http://demo.cookieconsent.silktide.com , postato sul forum ufficiale dal team di website x5, non si risolve tutto?
Sembra ben fatto, rispetta appieno la legge ed è facile da implementare (vedi video: http://sitebeam.net/cookieconsent/code/ )


Lemonsong, ma non è un po' esagerato oscurare tutto ( compreso lemonsong.altervista.org da cui tanto imparavamo )  ? 

[lemonsong]

Lemonsong, ma non è un po' esagerato oscurare tutto ( compreso lemonsong.altervista.org da cui tanto imparavamo )  ? 

La legge sui cookies è solo l'ultima delle cause che mi ha fatto prendere la decisione di sospendere (forse) temporaneamente il sito su Altervista.
Comunque, la maggior parte degli esempi di quel sito sono descritti anche qui sul forum.

Per quanto riguarda gli script, ognuno è libero di usare quello che ritiene più valido.