كيف تتخطى حجب المواقع ؟

هناك العديد من الطرق لتجاوز الحجب الحكومي للمواقع على اللإنترنت أبرزها استخدام المتصفح Tor والذي من خلاله تستطيع تصفح أي موقع من خلال التقنية المميزة التي تم تصميمها بغرض الحفاظ على المجهولية الرقميّة وتجاوز الرقابة, حيث تعمل هذه التقنية من خلال ما يتطلق عليه شبكة تور وهي عبارة عن آلاف الخوادم التي تعمل من خلال متطوعين حول العالم. حيث يقوم المتصفح باختيار ثلاث من عقد تور ويتصل بالانترنت عبرهم في كل مرة تقوم فيها بطلب اتصال بموقع ما و بهذه الطريقة يتم تعمية كل جزء من هذا المسار حتى أن العقد لا تعلم  المسار الذي ترسل وتستقبل البيانات عبره.

تستطيع تحميل البرنامج من خلال الموقع الرسمي للمتصفح تحميل متصفح Tor وفي حال قيام دولتك بحجب موقع المتصفح قم باستخدام إحدى الرابطين التاليين لتحميل المتصفح.

تحميل المتصفح Tor باللغة العربية   تحميل المتصفح Tor باللغة الإنجليزية

تثبيت متصفح تور على جهازك

بعد أن تقوم بتحميل إحدى الملفين افتح المجلد الذي قمت بتنزيل الملف عليه ستجد ملفاً باسم torbrowser-install-7.0.1_en-US.exe في حال قمت بتنزيله باللغة الإنجليزية أو torbrowser-install-7.0.1_ar.exe في حال قمت بتحميله باللغة العربية.

انقر مرتين على الملف, ستظهر لك رسالة تحذيرية تسألك عن مصدر البرنامج  يجب أخذ هذه التحذيرات بجدية دوماً والتأكد من ثقتك بالبرامج التي تريد تثبيتها ومن حصولك على نسخة أصلية من الموقع الرسمي وعبر اتصال آمن, قم بالنقر على الزر Run أو تشغيل

ستفتح لك نافذة جديدة بها عنصر اختيار من متعدد لتختار اللغة التي تريد استخدامها أثناء تنصيب البرنامج اختر اللغة ثم اضغط Ok أو موافق

سيظهر لك نافذة معالج التثبيت حيث تستخدم هذه النافذي لتحديد موقع تثبيت المتصفح,  إن سطح المكتب Desktop هو الموقع الافتراضي، ويمكنك تغيير ذلك إلى موقع آخر إن أردت، لكن من الأفضل أن تترك الإختيار الإفتراضي كما هو, بعد تحديد الموقع قم بالضغط على زر Install أو زر تثبيت

وعند الإنتهاء من تثبيت البرنامج ستظهر لك نافذة جديدة تحتوي على زر إنهاء التثبيت عند الضغط عليه سيبدأ العمل على المتصفح فوراً, كما سيتم إضافة إختصار (Start Tor Browser) إلى سطح المكتب Desktop وقائمة ابدأ Start Menu.

استخدام المتصفح

عند استخدام المتصفح لأول مرة، ستظهر نافذة تسمح لك بتعديل بعض الإعدادات, ربما تحتاج للعودة لتغيير بعض الإعدادات، ولكن ابدأ مباشرةً بالاتصال بشبكة تور وذلك بالضغط على زر الاتصال Connect.

 ستظهر لك نافذة بها شريط يحدد مدى تقدم الإتصال مع الشبكة, سيظهر هذا الشريط دائماً عند فتح المستعرض ولكن في أول مرة قد يستغرق الأمر قليلاً من الوقت اصبر قليلاً حتى ينتهي الإتصال بالشبكة.

مبروط الآن سيظهر لك المتصفح Tor مع رسالة تهنئة :)

(2) نظرة على تقنية الـ Canvas إحدى طرق الرسوميات في لغة HTML5

استكمالاً لما بدأناه في المقالة السابقة (1) نظرة على تقنية الـ Canvas إحدى طرق الرسوميات في لغة HTML5 سنكمل سوياً رحلتنا عبرعنصر الـ Canvas.

كيف أحدد نصاً ؟ How to Stroke a Text

var c = document.getElementById("myCanvas");

 var ctx = c.getContext("2d");

 ctx.font = "30px Arial"; 

ctx.strokeText("Hello World",10,50); 

الجديد هنا هو الخاصية font والتي من خلالها نقوم بتمرير حجم ونوع الخط الذي نريد أن نقوم برسمه على صفحة الويب الخاصة بك. أما بخصوص التابع strokeText فيقوم برسم النص الذي يأخذه كأحد الباريميترات التي نقوم بتمريرها من خلاله.

الفرق بين التابع Stroke والتابع Fill يقوم التابع Stroke برسم الأشكال التي تريدها من خلال تحديد إطار لها أما التابع Fill فإنه 

يقوم بملئ هذه الأشكال..

var c = document.getElementById("myCanvas");

 var ctx = c.getContext("2d");

 ctx.beginPath();

 ctx.arc(95,50,40,0,2*Math.PI);

 ctx.fillStyle = "red";

 ctx.fill();

كيف أرسم لوناً متدرجاً ؟ How to draw Linear Gradient

var c = document.getElementById("myCanvas");

 var ctx = c.getContext("2d");

 var grd = ctx.createLinearGradient(0,0,200,0);

 grd.addColorStop(0,"red"); 

grd.addColorStop(1,"white"); 

ctx.fillStyle = grd; 

ctx.fillRect(10,10,150,80); 

حتى تستطيع القيام بتلوين العناصر لديك بأسلوب الـ Gradient عليك أن تقوم بعدة خطوات أولاً عليك القيام بتعريف متغير خاص الـ Gradient باستخدام التابع createLinearGradient الموجود ضمن المتغير الذي سنستخدمه للرسم من خلاله داخل العنصر canvas وهو ctx context.createLinearGradient(x0,y0,x1,y1); ثانياً ستقوم بإضافة الألوان التي سيتكون منها الـ Gradient الخاص بك باستخدام التابع addColorStop الموجود في المتغير grd الذي عرفناه للتو, المتغيرات التي نستخدمها لهذا التابع: الأول قيمة رقمية (حقيقة) من الصفر 0 وحتى الواحد الصحيح أما الباراميتر الثاني فهو اللون الذي تريد استخدامه بإمكانك كتابة اسم اللون مباشرة أو استخدام إحدى صيغ الألوان كالـ Hexadecimal, RGB, RGBA, HLS, HLSA, لمزيد من المعلومات حول صيغ الألوان زيارة هذا الرابط , هذا وسوف نقوم قريباً بالتحدث عن صيغ الألوان المستخدمة في تطوير وتصميم صفحات الويب, الخطوة قبل الأخيرة أن نقوم بتعيين الخاصية fillStyle بقيمة المتغير grd الذي عملنا عليه في الأسطر السابقة, أما الخطوة الأخيرة فهي باستخدام التابع fillRect الذي يستخدم الباريميترات التالية: context.fillRect(x,y,width,height);

كيف أرسم لوناً متدرجاً بشكل دائري؟ How to draw Circular Gradient 

var c = document.getElementById("myCanvas"); 

var ctx = c.getContext("2d"); 

var grd = ctx.createRadialGradient(75,50,5,90,60,100); grd.addColorStop(0,"red");

 grd.addColorStop(1,"white"); 

ctx.fillStyle = grd; 

ctx.fillRect(10,10,150,80); 

المختلف هناعن الكود السابق هو التابع createRadialGradient والذي يحتوي على الباريميترات التالية: context.createRadialGradient(x0,y0,r0,x1,y1,r1);

(1) نظرة على تقنية الـ canvas إحدى طرق الرسوميات في لغة HTML5

Canvas

ماهو: عنصر جديد في HTML 5 يستخدم من أجل الرسم على صفحة الويب Web Page باستخدام لغة JavaScript.

لماذا استخدمه: في الصورة التالية ستجد أربعة أشياء تستطيع فعلها باستخدم الوسم Canvas وهناك أيضاً المزيد.

مالذي أستطيع أن أقوم به باستخدام هذه التقنية: إليك بعض الإمكانيات التي يوفرها الـ Canvas :

باستخدامك للـ Canvas ستستطيع أن تقوم برسم المسارات paths, المربعات والمستطيلات boxes, الدوائر circles, النصوص text, بالإضافة إلى الصور images.

عندما تقوم باستخدام الـ Canvas فإنه يقوم برسم مساحة مستطيلة بدون حدود لذلك لن تستطيع أن ترى شيئاً حتى تقوم بكتابة بعض أكواد الـ JavaScript أو على الأقل وضع إطار باستخدم لغة الـ CSS كما في المثال التالي:

<canvas height="100" id="myCanvas" style="border: 1px solid #000000;" width="200"></canvas>

كيف أرسم خطاً ؟ How to draw a line







<!DOCTYPE html>
<html>
<body>
 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
  Your browser does not support the HTML5 canvas tag.
 </canvas>
 <script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.moveTo(0,0);
  ctx.lineTo(200,100);
  ctx.stroke();
 </script>
</body>
</html>

مالذي حدث؟

قمنا بتعريف عنصر من نوع Canvas وعرفنا له الخاصية id بالقيمة myCanvas, هذا الجزء الأول أما الجزء الثاني فهو كود للغة الـ Javascript, فيما يلي شرح مفصل لهذا الكود: 

var c = document.getElementById("myCanvas");  قمنا هنا بتغير متغير Variable باسم c ثم اسناد قمية العنصر myCanvas إليه باستخدام التابع getElementById الموجود في المكتبة document.

 var ctx = c.getContext("2d"); قمنا هنا بتغير متغير Variable باسم ctx وهو المتغير الذي سنستخدمه للرسم من خلاله داخل العنصر canvas, ثم قمنا باسناد قمية له باستخدام المتغير c اللذي قمنا بتعريفه في السطر السابق من خلال التابع getContext. 

ctx.moveTo(0,0);هنا سوف نبدأ بعملية الرسم حيث قمنا بإعطاء أمر للمتغير ctx بالبدء بتحديد نقطة البداية وهي القيمة صفر أفقياً وصفر عامدياً وهي النقطة العلوية اليسارية لعنصر الرسم canvas.

 ctx.lineTo(200,100); في هذا الأمر نقول للكود أن يتحرك باتجاه النقطة 200 أفقياً و 100 عامودياً. 

ctx.stroke(); هذا آخر أمر في الكود وهنا نخبر البرنامج أن يبدأ بالرسم.

 

كيف أرسم دائرة ؟ How to draw a Circle

فلننظر إلى الكود التالي:

var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d");
 ctx.beginPath();
 ctx.arc(95,50,40,0,2*Math.PI);
 ctx.stroke(); 
هناك فقط سطران جديدان, هما
  ctx.beginPath(); والذي نخبر فيه البرنامج بأننا سوف نقوم برسم مسار وهو أمر ضروري للبدء برسم الدائرة
ctx.arc(95,50,40,0,2*Math.PI); في هذا الأمر نقوم باخبار البرنامج برسم دائرة وفق بعض الباراميترات Parameters وهي كالتالي:
 التابع arc: يستخدم لرسم قوس أو منحنى أو دائرة أو جزء من الدائرة, ويكتب بالصيغة التالية:
context.arc(x, y, r, sAngle, eAngle, counterclockwise);

إليك قاعدة تساعدك على رسم الدوائر دائما ,,,,, قم بوضع قيمة زاوية البداية Start Angle بالرقم صفر, وقيمة زاوية النهاية End Angle بالقيمة 2*Math.PI

ماهي الخاصية Math.PI من إحدى المكتبات الموجودة في لغة الـ JavaScript  هي Math و تحتوي على مجموعة من التوابع والخصائص الحسابية الجاهزة, أما PI فهي قيمة رقم ثابت الرياضيات وهو يساوي تقريباً (3.14159) أو 22/7, ويسمى باي أو طـ ويرمز له بالشكل التالي المأخوذ من المحارف الإغريقية : π للمزيد من المعلومات اضغط لزيارة الرابط

تبدأ نقطة البداية في رسم الدائرة أو الأقواس من اليمين إلى اليسار باتجاه عقارب الساعة, كما يوضح الرسم التالي:

النقطة الحمراء تحمل القيمة صفر هي نقطة البداية sAngle و النقطة الزرقاء هي نقطة النهاية eAngle, لذلك عليك دائماً الإنتباه أين تبدأ وأين تنتهي في رسم الأقواس والدوائر.