تقنية ملفات تعريف الإرتباط  ( الكوكيز ) تمكنك من إعطاء طابع تفاعلي لموقعك.
و بالتالي إمكانية تسجيل الدخول / التعليق / تسجيل الإعجاب . و غيره


و سواء كانت هاده التقنية مبرمجة على موقعك بشكل مباشر أو كانت مقدمة من أطراف أخرى ( كالخدمات الإعلانية أو المستظيف )
فإن قوانين الإتحاد الأوروبي لحماية خصوصية المستخدمين تلزمك بإخطار زوار الموقع من الإتحاد الأوروبي بإستخدامك لهده التقنية.

و قد تطرقنا في درس سابق لطريقة إستخدام هده التقنية في الموقع

الجلسات و ملفات تعريف الإرتباط في php . ج 1

الجلسات و ملفات تعريف الإرتباط في php . ج 2


1 - لمدا تلزم محكمة العدل الأوربية المواقع بإبلاغ زوارهم بإستخدام الكوكيز؟

للإجابة على هدا السؤال يلزم أولا فهم طبيعة و ماهية الكوكيز .

عند طلب أي صفحة من موقع ما عبر المتصفح فالمتصفح يرسل الطلب متضمنا نوع المتصفح / الجهاز . عنوان ip . و ملف الكوكيز ( تعريف الإرتباط ) إن وجد
إستجابة الموقع للطلب أيضا تكون وفقا لملف الكوكيز . و عليه يتم تحديد عدة تفضيلات للزائر كاللغة الإفتراضية و نمط العرض / الإعلانات و غيرها .


لدا فإن إرسال ملفات الكوكيز من الموقع إلى أجهزة المستخدمين _ الزوار _ يعني تتبع الموقع للزائر و جمع معلومات قد تكون حساسة عنه . الأمر اللدي يتنافى مع قوانين خصوصية المستخدم اللتي أقرتها محكمة العدل الأوروبية .
و بالتالي ستكون ملزما إدا كان لديك زوار من دول الإتحاد الأوروبي بإبلاغهم عن إستخدام موقعك لتقنية الكوكيز ( و في بعض الأحيان أخد موافقة مبدئية من كل زائر على حدى لإستخدام الكوكيز على جهازه )

طريقة الإبلاغ : يجب أن تكون الرسالة واضحة في الواجهة الرئيسية للموقع و مكتوبة باللغة الإفتراضية لموقعك و تظهر على جميع الصفحات ( إلا إدا إختار الزائر إخفاء الرسالة )
كما يجب أن تتضمن الرسالة رابط يشرح للزائر كيفية إستخدام الكوكيز على جهازه من طرف الموقع و نوع البيانات اللتي يتضمنها


2 - طريقة إدراج الرسالة 

سنستخدم ثلاتة تقنيات لإدراج الرسالة

html
لإدراج مربع و نص الرسالة

css
لتنسيق عرض الرسالة و ملائمته للصفحة

javascript
للتحكم التفاعلي بتنسيق css للرسالة ( عند ظغط الزائر على زر إخفاء الرسالة )

------------------------

1 ) محتويات مربع و نص الرسالة



بديهيا سيتضمن مربع الرسالة العنوان و نص الرسالة و زر الإغلاق ( لإخفاء الرسالة )

زر الإغلاق المقترح :

كود html



1 - زر الإغلاق
2 - نص الرسالة ( يفترض أن يتضمن رابط لصفحة تشرح فيها سياسة ملفات تعريف الإرتباط )


2 ) تنسيق css

سنقوم بإعطاء النمط لكل عنصر على حدا إستنادا إلى المعرف الخاص بالعنصر id

 I مربع الرسالة الرئيسي message


1 . التموضع : ثابت في إسفل اليسار
2 . خصائص الحواف
3 . المحاداة الخارجية
4 . الأبعاد ( العرض و الإرتفاع )
5 . لون الخلفية

النتيجة :



II زر الإغلاق

الخصائص المطلوبة :






النتيجة :





III مربع نص الرسالة :





الشكل النهائي للرسالة :



طبعا إلى هنا نكون قد أنهينا التصميم الخاص بهده الرسالة المنبثقة .
الآن نأتي للجزئ الأهم و هو آلية إخفاء الرسالة

3 ) التحكم بالظهور عبر javascript

هناك نقطتين أساسيتين في التحكم بظهور الرسالة سنعمل على برمجتهما عن طريق جافا سكريبت

1 - إخفاء الرسالة عند الضغط على الزر x
2 - عدم ظهور الرسالة مجددا عند تحديث الصفحة أو عودة الزائر بعد فترة


نضيف التوصيف onclick داخل وسم أيقونة الإغلاق ( close.png ) و نضع القيمة closewin()
طبعا هدا يعني أن دالة closewin ستعمل عند النقر على زر الإغلاق
سنقوم ببرمجة الدالة closewin داخل ملف جافا سكريبت منفصل




1 إسم الدالة اللتي سيتم تنفيدها عند الضغط على زر الإغلاق closewin
2 إسم ملف جافا سكريبت اللدي سنبرمج داخله الدالة js.js






كما قلنا فإن وضيفة زر الإغلاق ستكون إخفاء الرسالة بالإضافة إلى منع ظهور الرسالة مجددا

سنقوم بإخفاء الرسالة من خلال أنميشن  _ يعني لن تختفي الرسالة بشكل مفاجئ ولكن بشكل تدريجي و إنسيابي

إعطاء مواصفات الأنميشن لمربع الرسالة عن طريق جافاسكريبت

document.getElementById("message").style.animation = "animationclose 0.3s linear 0s 1 normal forwards";

1 إسم الأنميشن
2 مدة التنفيد
3 نمط الإنتقال / الحركة

شرح الأنميشن animation في لغة الأنماط الإنسيابية css

أنماط الإنتقالات animation في لغة الأنماط الإنسيابية css


برمجة الأنميشن داخل ملف css


عند النقر على زر الإغلاق ستختفي الرسالة تدريجيا أتناء إنتقالها للأسفل


لمنع ظهور الرسالة مجددا سنستخدم الكوكيز ( داخل دالة closewin )

 document.cookie ="closewin=1;expires=Thu, 18 Dec 2023 12:00:00 UTC; path='/'";

هدا الأمر سيعطي للكوكيز مدخل جديد بإسم closewin قيمته هي 1
طبعا expires هي تاريخ صلاحية الكوكيز يمكنك تعديله إن شئت


سنقوم بإخفاء الرسالة بشكل إفتراضي و إعتماد الكوكيز من أجل تحديد ما إدا كان يتوجب ظهورها أو لا

لإخفاء الرسالة عن طريق css