Biurokratyczne ciasteczka

Tak to jest gdy na siłę chce się ludziom pomagać. Wczorajszego dnia wszedł w życie nowy przepis wymuszający na każdym właścicielu strony umieszczenie na niej widocznej informacji dotyczącej ciasteczek.

Wraz z pojawieniem się tych przepisów pojawiło mi się kilka pytań.

  1. Czy powtarzana na każdej stronie informacja o ciasteczkach sprawi, że ludzie nie ogarnięci w internecie będą bardziej bezpieczni?
  2. Czy serwisy za każdym razem będą informować o wszystkich informacjach zapisywanych za pomocą ciasteczek czy będzie to tylko ogólna nformacja?
  3. Jak traktować iframe na stronie? Czy będzie ono traktowane za część naszej strony? Czy będzie ono brane za oddzielną stronę wyświetlaną w iframe? Jeżeli to pierwsze to informacja o ciasteczkach będzie mogła być „wspólna”, ale to oznaczało by, że serwisy takie jak wykop są właścicielami większości internetu. Jeżeli to drugie, to takie iframe powinny wyświetlać nam swoje powiadomienia…
  4. Czy nie powinno się wprowadzić podobnych przepisów które regulowały by używanie starodawnych awaryjnych przeglądarek (które to w praktyce jest groźniejsze od ciasteczek)?
  5. W końcu najważniejsze – jak będzie wyglądała egzekucja tego prawa i ile będzie kosztowała obsługa takiej egzekucji. Czy spowoduje to powstanie nowych stanowisk pracy w urzędach?

No cóż. Pewnie usłyszymy jeszcze nie jedną i nie dwie dyskusje na ten temat.
Zapewne za kilkanaście dni każdy użytkownik internetu będzie miał wykutą na pamięć regułkę, która będzie się pokazywać na każdej stronie. Może też za kilka dni powstanie stosowny „block” który będzie z automatu usuwał te mało przydatne popupy, bary i inne śmieci, albo pojawią się stosowne dodatki do przeglądarek – coś w stylu RSS?

W każdym bądź razie nas webmasterów powinien zainteresować zapis:

Art. 173 ust. 1 ustawy Prawo telekomunikacyjne

2. Abonent lub użytkownik końcowy może wyrazić zgodę, o której mowa w ust. 1 pkt 2, za pomocą ustawień oprogramowania zainstalowanego w wykorzystywanym przez niego telekomunikacyjnym urządzeniu końcowym lub konfiguracji usługi.

http://www.trustedshops.pl/wiadomosci/6691-nowe-przepisy-dotyczace-plikow-cookies-ciasteczka-cz-i.html

Jak wynika z powyższego zapisu, nie musimy dawać użytkownikowi możliwości wyboru czy chce używać ciasteczek czy nie. Wystarczy tylko pokazać stosowną informację (najczęściej z linkiem do podstrony, na której problem ciasteczek jest omówiony bardziej dogłębnie). Wyboru dokonujemy instalując przeglądarkę, lub zmieniając odpowiednie opcje w jej ustawieniach.

Kodujemy informacyjną belkę

Na koniec tego wątpliwego artykuliku stworzymy prostą belkę która przyklejona do góry ekranu będzie męczyć użytkowników.

<div class="cookie-bar">
     <div>
         W ramach naszej witryny stosujemy pliki cookies, aby ułatwić Ci korzystanie z naszego serwisu oraz do celów statystycznych i marketingowych. 
         Korzystanie z witryny bez zmiany ustawień dotyczących plików cookies oznacza zgodę na ich użycie oraz zapisanie w pamięci urządzenia. 
         Możesz samodzielnie zarządzać cookies i dokonać zmiany ustawień w swojej przeglądarce.<br>
         Więcej informacji w naszej <a href="#">Polityce prywatności</a>. 
     </div>
     <span title="Zamknij (ESC)">Zamknij</span>
</div>

Środkowy div służy do wycentrowania treści w poziomie, bo cały cookie-bar będzie rozciągał się na całą szerokość ekranu. Nasz pasek będzie miał stałą pozycję fixed, która dla mobilnych urządzeń przyjmie wartość relative (bo fixed tragicznie jest tam obsługiwana). I właściwie tyle co ciekawszych informacji.

Stylowanie dla naszej belki nie jest jakieś super trudne.

body {
     margin:0;
}
.cookie-bar {
    position:relative;
    background:#eee;
    overflow:hidden;
    box-shadow:inset 0 -1px 1px rgba(0, 0, 0, 0.2);
}
.cookie-bar > div {
    font:11px Arial, sans-serif;
    color:#444;
    max-width:960px;
    margin:10px auto;
    text-align:left;
    padding-left:10px;
    padding-right:100px;
}
.cookie-bar a {
    text-decoration:none;
    color:#1373cc;
    text-decoration:underline;
}
.cookie-bar .close {
    font:bold 12px/28px Arial, sans-serif;
    color:#fff;
    position:absolute;
    top:50%;
    margin-top:-15px;
    right:10px;
    cursor:pointer;
    background:#666;
    display:inline-block;
    border-radius:3px;
    height:30px;
    width:60px;
    display:block;
    text-align:center;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
.cookie-bar .close:hover {
    background:#555;
}

Dodatkowo dla urządzeń mobilnych zmieńmy nieco wyglad, tak by guzik zamykania był możliwy do trafienia paluchem, a belka miała pozycję relatywną:

@media only screen and (max-width: 400px) {
    .cookie-bar > div {
        padding-left:10px;
        padding-right:10px;
        margin:15px 0;
    }
    .cookie-bar .close {
        position:relative;
        display:block;
        width:96%;
        margin:5px 2%;
        top:0;
        right:0;
    }
}

Pokaż demo

Po stworzeniu wyglądu czeka nas najlepsza zabawa, czyli oskryptowanie tego dziadostwa. Co musimy zrobić? Po kliknięciu na przycisk OK chowamy naszą belkę, a po chowaniu ustawiamy… ciasteczko, które będzie w przyszłości określało, czy pozywać belkę czy nie.

Aby ustawić ciasteczko, musimy obsłużyć zapisywanie go w js. Hej! Już to kiedyś robiliśmy. Pamiętacie te przygody? Jak nie, to zapraszam do tego artykułu. Tym razem jesteśmy już na emeryturze i skorzystamy z gotowego pluginu do jQuery, którego cały kod wygląda tak:

$.cookie = function(name, value, options) {
    if (typeof value != 'undefined') { //set cookie
        options = options || {};
        if (value === null) {
            value = '';
            options.expires = -1;
        }
        var expires = '';
        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
            var date;
            if (typeof options.expires == 'number') {
                date = new Date();
                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
            } else {
                date = options.expires;
            }
            expires = '; expires=' + date.toUTCString();
        }

        var path = options.path ? '; path=' + (options.path) : '';
        var domain = options.domain ? '; domain=' + (options.domain) : '';
        var secure = options.secure ? '; secure' : '';
        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
    } else { //get cookie
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
};

Reszta skryptu jest już dziecinnie prosta.

function destroyCookie() {
     $('.cookie-bar').remove();
     $.cookie('hideCookieBar', 1, {expires: 100, path: '/'}); //na 100 dni
}

$(function() {
     //pokazujemy lub usuwamy belkę
     if ($.cookie('hideCookieBar')) {
          $('.cookie-bar').remove();
     } else {
          $('.cookie-bar').show();
     }

     //obsługa zamknięcia belki
     $(document).keyup(function(e) {
         e.preventDefault();
         if (e.keyCode == 27) {
             $('.cookie-bar .close').click();             
         }
     });

     $('.cookie-bar .close').on('click', function(e) {
         e.preventDefault();
         $(this).parents('.cookie-bar').animate({'top' : -100}, function() {
              destroyCookie();
         });
     });
})

Na początku wykonujemy wspomniane sprawdzenie i w zależności od niego pokazujemy lub usuwamy naszą belkę. Kolejna część to obsługa zamknięcia belki. Aby użytkownik miło wspominał naszą pracę, ułatwimy mu zamknięcie za pomocą obsługi klawisza ESC.

Zakładając ciasteczko pamiętajmy by użyć parametru path (patrz kod). Inaczej może być tak, że ciasteczka będą zakładane dla każdej z podstron z osobna.

W niektórych przypadkach potrzebne będzie także użycie parametru domain=”…”. Określa on domenę dla której zakładamy ciasteczka. Jeżeli na swojej stronie linkujesz do swoich podstron stosując linki z www i bez www, to zapewne będziesz musiał skorzystać z tego parametru. Więcej na ten temat dowiesz się pod tym linkiem: http://stackoverflow.com/questions/1062963/how-do-browser-cookie-domains-work

Wykrywanie ciasteczka w js możemy zamienić na odpowiednik w PHP:

<?php if (!isset($_COOKIE['cookieInfo'])): ?>
<div class="cookie-bar">
     <div>
         Na wielu stronach internetowych, także u nas, wykorzystywane są cookies (ciasteczka). Służą ona m.in. do tego, by ... <br>
         Nowe regulacje prawne zobowiązują nas do poinformowania Cię o tym w wyraźniejszy, niż dotąd, sposób.<br>
         Lorem ipsum poczytaj sobie o tym na naszej <a href="">polityce prywatności</a>
         <span title="Zamknij (ESC)">Zamknij</span>
     </div>
</div>
<?php endif; ?>

Zastosujemy tutaj „popupową technikę” mistrza Szamsona. Obługujemy więc zdarzenie keyup dla całego dokumentu i wykrywamy w nim kod klawisza. Po wykryciu odpowiedniego kodu (w naszym przypadku 27 czyli ESC) „klikamy” (czyli wywołujemy kliknięcie) na elemencie który zamyka popup:

$(document).keyup(function(e) {
     e.preventDefault();
     if (e.keyCode == 27) {
         $('.popup .close').click(); //wywołujemy poniższe zdarzenie
     }
});

$('.popup .close').on('click', function(e) {
    //...zamykamy popup - np:
    $(this).closest('.popup').fadeOut(function() {
       $(this).remove(); //po zniknięciu usuwamy popup
    });
});

Ot cała magiczna technika. W poprzednim skrypcie właśnie z niej korzystamy.

Oczywiście po zamknięciu belki musimy ustawić odpowiednie ciasteczko. Robi to dla nas funkcja destroyCookie() (nazwy funkcji zawsze powinny mówić nam co dana funkcja robi…). Jak będziesz testował powyższy skrypt lokalnie za pomocą Chrome (np z pulpitu), wtedy możesz mieć problem z zapisaniem ciasteczka. Dlatego lepiej jest przenieść testy na serwer lokalny albo zdalny. To tak nawiasem mówiąc…

I właściwie to tyle. Całość pracy możecie zobaczyć pod poniższym linkiem:

Pokaż demo

Tutaj możesz sobie ściągnąć gotowy kod, który po umieszczeniu na początku kodu strony wygeneruje ci powyższą belkę. Pamiętaj by zmienić ścieżki do linków oraz podłubać w samym tekście informacyjnym :)

Komentarze