لوحة المتصدرين

يمكنك تنفيذ البرامج الموجودة ضمن هذه السلسلة (كما وسبق أن ذكرنا في المقدّمة) بطريقتين مختلفتين: الأولى هي تحميل وتنصيب بيئة التطوير المجّانيّة Visual Studio 2015 Community من مايكروسوفت. توفّر هذه البيئة خدمات عظيمة للمطوّر وتسهّل عمليّة كتابة البرامج إلى حدّ كبير. ويمكنك الاستفادة من مزايا تنقيح الأخطاء debugging المتقدّمة التي يوفّرها المنقّح debugger المرفق ضمن هذه البيئة. يمكنك تحميل نسختك المجّانيّة من هنا. الطريقة الثانية هي في استخدام الموقع NET Fiddle. الذي يوفّر مزيّة تنفيذ البرامج التي تكتبها على خادم خاص به، ومن ثمّ يعرض لك خرج البرنامج، بدون أن تمتلك نظام تشغيل ويندوز حتى. البرنامج الأول سنبدأ بمثال عمليّ لنسبر سريعًا أغوار هذه اللغة. شغّل برنامج Visual Studio 2015 Community ثم من القائمة File اختر الأمر New > Project. من نافذة مشروع جديد New Project، اختر من القسم الأيسر #Visual C ومن القسم الأيمن اختر Console Application. اكتب HelloWorld ضمن حقل الاسم Name في القسم السفلي، ثم اضغط زر OK. انظر الشكل التوضيحي التالي: قد تبدو الصورة مختلفة بعض الشيء لديك بحسب إعدادات الإظهار التي اخترتها. سيعمل Visual Studio على إنشاء هذا التطبيق وفتح ملف مُجهّز خصيصًا لك اسمه Program.cs. امسح محتويات هذا الملف بالكامل ثم انسخ الشيفرة التالية ضمنه: 1 using System; 2 3 namespace HelloWorld 4 { 5 class Program 6 { 7 static void Main(string[] args) 8 { 9 Console.WriteLine("Hello World!"); 10 } 11 } 12 } اضغط المفتاحين Ctrl+F5 معًا لتبدأ عملية بناء build البرنامج وتنفيذه لتحصل على العبارة Hello World! في خرج البرنامج (أو من القائمة Debug > Start Without Debugging). رغم أنّ البرنامج السابق بسيط جدًّا إلًا أنّه يحتوي على الكثير من المفاهيم الجديدة التي سنتناولها تباعًا في هذه السلسلة. يبدأ هذا البرنامج بتعريف نطاق اسم namespace (السطر 3) اسمه HelloWorld وهو نفس الاسم الذي زوّدناه للبرنامج، سنتكلّم عن نطاقات الأسماء في درس لاحق، ولكن يكفيك أن تعرف الآن أنّ نطاقات الأسماء هي وسيلة لتنظيم الأصناف ضمن مجموعات مترابطة منطقيًّا. يأتي بعد ذلك تعريف صنف class جديد اسمه Program (السطر 5). يحتاج أيّ برنامج مكتوب بالسي شارب إلى نقطة دخول entry point لكي يبدأ تنفيذه. نقطة الدخول يجب أن تكون عبارة عن تابع method اسمه Main (السطر 7)، تكون التوابع عادةً ضمن الأصناف، يكفيك الآن أن تفهم التابع على أنّه شبيه بالدّالة function في لغات البرمجة الأخرى. أي هو جزء من الشيفرة يمكن استدعاؤه لتنفيذ ناحية وظيفيّة مُحدّدة في البرنامج وقد يُرجع قيمة ما أو لا يُرجع أيّ شيء. العبارة الموجودة في السطر 9 هي عبارة برمجّية قياسيّة في لغة سي شارب. وظيفة هذه العبارة استدعاء التابع WriteLine من الصنف Console وتمرير النص "!Hello World" له لكي يُظهر النص !Hello World في خرج البرنامج. أيّ عبارة برمجيّة في سي شارب يجب أن تنتهي بفاصلة منقوطة (;)، وقد تكون العبارة البرمجيّة مجرّد استدعاء تابع أو أن تكون عمليّة إسناد إلى متغيّر، أو قد تكون مزيجًا بينهما. إذا كانت لديك معرفة سابقة بلغات برمجة مثل C أو ++C أو Java ستلاحظ أنّ الصيغة النحويّة syntax للغة سي شارب تشبه إلى حدٍّ كبير الصيغة النحويّة لهذه اللّغات. حيث تُستخدم الحاضنات { } مثلًا لتحديد البداية والنهاية للتابع method وللصنف class ولنطاق الاسم namespace. وحتى أنّهما يشكّلان حدود أيّ بنية برمجيّة في لغة سي شارب مثل العبارات التكراريّة. انظر على سبيل المثال إلى السطر 6 لتجد الحاضنة "{" الخاصّة بالصنف Program وإلى السطر 12 لتجد حاضنة الإغلاق "}" له. كما ينبغي التنبّه أيضًا إلى كون لغة سي شارب حسّاسة لحالة الأحرف كما هو الحال في لغات البرمجة C و ++C و Java. ملاحظة يمكن استخدام المفتاح F6 في بيئة Visual Studio (أو من القائمة Build > Build Solution) لبناء البرنامج دون تشغيله (تنفيذه) وذلك اعتبارًا من الشيفرة والحصول على ملف تنفيذي منه له الامتداد exe في حال كان البرنامج لا يحتوي على أيّ خطأ. برنامج بسيط لجمع عددين صحيحين لنعمل الآن على برنامج عمليّ أكثر. سنكتب برنامج يعمل على جمع عددين صحيحين وإظهار النتيجة للمستخدم. اتبع نفس الخطوات التي أجريناها في البرنامج السابق لإنشاء برنامج جديد باسم SumTwoNumbers، انسخ محتويات الشيفرة التالية إلى الملف Program.cs: 1 using System; 2 3 namespace SumTwoNumbers 4 { 5 class Program 6 { 7 static void Main(string[] args) 8 { 9 int a; 10 int b; 11 int c; 12 13 a = 3; 14 b = 4; 15 16 c = a + b; 17 18 Console.WriteLine("3 plus 4 equals: " + c.ToString()); 19 20 } 21 } 22 } يُقدّم هذا البرنامج البسيط مفهوم التصريح عن المتغيّرات والتعامل معها. صرّحنا في الأسطر من 9 إلى 11 عن ثلاثة متغيّرات a و b و c من النوع int. يجب التصريح في لغة سي شارب عن كل متغيّر قبل استخدامه في البرنامج. لاحظ أنّ التصريح عن متغيّر يتمّ بذكر نوعه ومن ثمّ اسمه. يستطيع المتغيّر من النوع int استيعاب أي عدد صحيح (دون فاصلة عشريّة) يقع بين 2,147,483,648- و 2,147,483,647. لاحظ أنّه قد أسندنا القيمتين 3 و 4 إلى المتغيّرين a و b على الترتيب، وذلك في السطرين 13 و14. نجري عملية الجمع والإسناد إلى المتغيّر c في السطر 16. وفي السطر 18 نعرض رسالة للمستخدم. يمكن إسناد قيمة للمتغيّر مباشرةً عند التصريح عنه. فمن الممكن مثلًا إسناد القيمتين 3 و 4 للمتغيّرين a و b على الترتيب عند التصريح عنهما وذلك بالشكل التالي: int a = 3; int b = 4; كما يمكن استخدام عبارة تصريح واحدة للتصريح عن عدّة متغيّرات بنفس الوقت. فمثلًا كان من الممكن التصريح عن المتغيّرات a و b و c السابقة بعبارة برمجيّة واحدة على الشكل التالي: int a, b, c; في الواقع هناك شكلان من أنواع المتغيّرات تدعمهما منصّة دوت نت. أنواع القيمة value types والأنواع المرجعيّة reference types. سنتحدّث عنهما لاحقًا. يُعتبر النوع int نوع قيمة. يجب إجراء عمليّة إسناد واحدة على الأقل إلى متغيّر قيمة قبل القراءة منه. وإلّا سنحصل على خطأ. جرّب حذف العبارة البرمجيّة الموجودة في السطر 16 والمسؤولة عن إسناد قيمة المجموع إلى المتغيّر c. نفّذ البرنامج وستحصل على الخطأ التالي: Use of unassigned local variable 'c' سبب ذلك أنّنا حاولنا قراءة المتغيّر c في السطر 18 دون أن نُسند أيّ قيمة له. العبارة البرمجيّة الموجودة في السطر 18 مسؤولة عن عرض الرسالة إلى المستخدم كما أسلفنا. ستلاحظ أنّنا مرّرنا التعبير expression التالي إلى التابع WriteLine: "3 plus 4 equals: " + c.ToString() التعبير البرمجي هو مفهوم موجود في جميع لغات البرمجة تقريبًا، وهو ببساطة ناتج عمليّة برمجيّة باستخدام عامل operator واحد أو أكثر، أو استدعاء إلى تابع أو مزيج بينهما. نسمّي عمليّة معالجة التعبير بتقييم التعبير expression evaluation. العامل المُستخدم هنا هو عامل ضمّ النصوص (+)، ولعلّك تستغرب لماذا أدعوه بعامل ضمّ النصوص رغم أنّه يشبه عامل الجمع العادي الذي يجمع عددين مع بعضهما (انظر السطر 16). يعود السبب في ذلك إلى نوع المُعامِلَين operands الموجودين على طرفيه. يمكنك أن تلاحظ بسهولة أنّ المعامل الأيسر هو النص: "3 plus 4 equals: " أمّا المعامل الأيمن فهو: c.ToString() وهو أيضًا نص ويعود سبب ذلك إلى استدعاء التابع ToString من المتغيّر c المعرّف أصلًا أنّه متغيّر من نوع int. ولكنّ استدعاء هذا التابع من المتغيّر c يؤدّي إلى الحصول على التمثيل النصّي للقيمة العددية الموجودة ضمنه أصلًا. فإذا كان المتغيّر c يحمل القيمة العددية 7، فإنّ التابع ToString سيُرجع النص "7"، الذي يعمل عامل الضم + على ضمّه مع النص الذي يسبقه لتكون نتيجة التعبير ككل هي: "3 plus 4 equals: 7" سيُمرّر هذا النص إلى التابع WriteLine لعرضه للمستخدم. أعتقد أنّك قد بدأت بفهم طريقة الوصول إلى التوابع واستدعائها في لغة سي شارب. فنحن نستخدم اسم الصنف (أو الكائن object كما سنرى لاحقًا) الذي يحوي التابع المراد استدعاؤه متبوعًا بنقطة ثم باسم التابع المطلوب، وبعد ذلك قوسين هلاليّين نمرّر بينهما الوسائط التي يطلبها التابع إذا اقتضت الضرورة لذلك. برنامج محسن أكثر لجمع عددين لقد تعلّمنا العديد من المفاهيم الجديدة من خلال البرنامجين السابقين. ولكن لعلّك قد لاحظت من برنامج جمع العددين السابق أنّ البرنامج جامد بعض الشيء. فهو يجمع عدّدين مُحدّدين سلفاً. سنعمل في هذه النسخة المطوّرة من البرنامج على استقبال العددين المراد جمعهما من المستخدم ومن ثمّ إجراء عمليّة الجمع عليهما وعرض النتيجة على المستخدم، مع بعض التحسينات الإضافيّة الأخرى. أنشئ مشروعًا جديدًا باسم EnhancedSumTwoNumbers ثمّ استبدل محتويات الملف Program.cs بالشيفرة التالية: 1 using System; 2 3 namespace EnhancedSumTwoNumbers 4 { 5 class Program 6 { 7 static void Main(string[] args) 8 { 9 string str1, str2, result; 10 double num1, num2, sum; 11 12 //prompt user to get input for first value. 13 Console.Write("Input first number: "); 14 str1 = Console.ReadLine(); 15 16 //prompt user to get input for second value. 17 Console.Write("Input second number: "); 18 str2 = Console.ReadLine(); 19 20 //convert the input values to double numbers. 21 num1 = double.Parse(str1); 22 num2 = double.Parse(str2); 23 24 //perform sum operation. 25 sum = num1 + num2; 26 27 /*concatenate strings to form output 28 message which contains the result.*/ 29 result = num1.ToString() + " + " + num2.ToString() + " = " + sum.ToString(); 30 31 Console.WriteLine(result); 32 33 } 34 } 35 } نفّذ البرنامج بضغط المفتاحين Ctrl+F5 معًا. سيطلب منك البرنامج في البداية إدخال قيمة العدد الأوّل. أدخل القيمة المرغوبة ثم اضغط مفتاح الإدخال Enter. بعد ذلك سيطلب منك البرنامج إدخال قيمة العدد الثاني. أدخلها واضغط Enter. سيعرض البرنامج بعد ذلك النتيجة المطلوبة على شكل رسالة مناسبة. تحتوي هذه النسخة من برنامج جمع الأعداد على عدّة تحسينات: أصبح برنامجنا يدعم جمع أعداد تقبل فاصلة عشرية من خلال التصريح عن متغيّرات من النوع double (انظر السطر 10). والنوع double هو النوع الذي يقبل أعدادًا ذات فاصلة عائمة مزدوجة الدقّة. مجال الأعداد التي يقبلها يقع بين ±5.0*10-324 حتى ±1.7*10308. أصبح بإمكان مستخدم البرنامج أن يُدخل الأعداد المراد جمعها مباشرة من لوحة المفاتيح، وذلك من خلال التابع ReadLine من الصنف Console (انظر السطرين 13 و 16) يُوقف هذا التابع تنفيذ البرنامج وينتظر المستخدم أن يُدخل قيمة ما ويضغط مفتاح الإدخال Enter ليتابع البرنامج التنفيذ. أضفنا تعليقات توضيحيّة ضمن البرنامج. هذه التعليقات لا يكترث بها المترجم، ووظيفتها هي جعل الشيفرة البرمجيّة مقروءةً وسهلة الفهم والتعديل لاحقًا. في الحقيقة تُعتبر عمليّة كتابة التعليقات البرمجيّة فنًّا بحد ذاته، وأنصح أن يمارسها كلّ مبرمج بأيّ لغة برمجة كانت. في الواقع ليس مطلوبًا كتابة التعليقات البرمجيّة قبل كلّ عبارة برمجيّة، فعلى المرء أن يكون حكيمًا في استخدامها بالشكل الذي يحافظ فيه على التوازن بين جعل الشيفرة واضحة ومقروءة، وعدم الإفراط في كتابة التعليقات بدون ضرورة. تدعم لغة سي شارب نوعين من التعليقات: التعليقات على مستوى السطر، حيث يتجاهل المترجم compiler كلّ ما يقع على يمين الرمزين//. والتعليقات التي تمتد على عدّة أسطر، حيث يتجاهل المترجم المحتوى الموجود بين الرمزين /* والرمزين */. انظر الأسطر 12 و 16 و 20 و 24 من أجل التعليقات على مستوى السطر، والسطرين 27 و 28 من أجل التعليقات التي تمتدّ على عدّة أسطر. استخدمنا التابع Write بدلًا من التابع WriteLine (انظر السطرين 13 و 17)، والسبب في ذلك هو أنّنا نريد أن يطلب البرنامج من المستخدم إدخال القيمة على نفس السطر الذي تُعرَض فيه الرسالة وليس على سطرٍ منفصل. فالتابع Write يعرض النص المُمرّر إليه ولا يُحدِث سطرًا جديدًا. في حين يسلك التابع WriteLine نفس سلوك التابع Write ولكن ينتقل إلى سطر جديد بعد عرض النص. يمكنك أن تجرّب استبدال التابع WriteLine بالتابع Write لترى الفرق. جعلنا عمليّة تشكيل النص الذي سيُعرض على المستخدم ضمن سطر منفصل (السطر 29) وأسندنا هذا النص إلى المتغيّر result من النوع string. الهدف من هذا الأمر هو جعل الشيفرة نظيفة وواضحة وسهلة للقراءة. النوع string هو من الأنواع المرجعيّة reference types ويُستخدم للتعبير عن النصوص. ولكن تبقى هناك بعض العيوب التي لم نعالجها والتي قد تسبّب توقّف البرنامج عن العمل: تُعتبر القيم التي يدخلها المستخدم بواسطة التابع ReadLine أنّها قيم نصيّة. وحتى نستطيع التعامل معها كأعداد تقبل فاصلة عشريّة يجب تحويلها إلى قيم عددية من النوع double. نستطيع ذلك بسهولة من خلال التابع Parse من الصنف double. يقبل هذا التابع أن نُمرّر إليه قيمة نصيّة ليعيد إلينا التمثيل العددي لها من النوع double. ولكنّ السؤال هنا أنّه ماذا لو أدخل المستخدم بشكل غير مقصود (أو مقصود) القيمة النصيّة التالية "abc" للعدد الأوّل؟ عندما يصل تنفيذ البرنامج إلى السطر 21 سيعمل التابع Parse على تحويل القيمة "abc" إلى التمثيل العددي من النوع double وهذا ما لا يمكن حدوثه بالطبع، لذلك فسيرمي التابع Parse استثناءً Exception سيؤدّي إلى توقّف البرنامج عن العمل فورًا! سنتحدّث عن الاستثناءات في درس لاحق. وعلى أيّة حال يمكن حلّ هذه المشكلة بطريقتين مختلفتين سنتحدّث عنهما لاحقًا في هذه السلسلة. ولكنّ المغزى هنا هو أنّه لا تثق بمدخلات المستخدم مطلقًا. تُعتبر عملية ضم النصوص التي أجريناها في السطر 29 غير عمليّة وعادة برمجيّة غير جيّدة. يتعلّق هذا الأمر بالحقيقة طريقة تعامل سي شارب مع النصوص، سأترك الحديث عن هذه المشكلة وطرق حلّها عندما نتحدّث عن النصوص والتعامل معها في الدرس السادس. تمارين داعمة تمرين 1 اكتب برنامجًا يطبع العبارات التالية كما يلي على الشاشة: Today is Sunday. Tomorrow is Monday. Yesterday is Saturday. تمرين 2 اكتب برنامجًا يطلب من المستخدم إدخال قيمتين عدديتين، ومن ثمّ يوجد حاصل الضرب لهما (استخدام العامل *) وبعرض النتيجة على الشاشة. يجب أن يدعم البرنامج الأعداد ذات الفاصلة العشرية. الخلاصة تعرّفنا في هذا الدرس على الشكل الأساسيّ لأيّ تطبيق مكتوب بلغة سي شارب. كما تعاملنا مع ثلاثة برامج بسيطة للغاية وضّحت مبادئ كتابة برنامج باستخدام سي شارب. سنتناول في الدرس القادم موضوع المتغيّرات وأنواعها والعوامل والتعابير expressions بتفصيل أكبر.

سأقدِّم لك أداةً رائعةً للتصميم: أرأيت؟ ألم ترَ؟ إنها الفراغات البيضاء! حسنًا، ربما مزاحي لم يكن في محلّه، أعترف بذلك. أنا آسف. صحيحٌ أنَّ تعريفي للفراغات البيضاء لك لم يكن مثاليًا، لكن الفراغات البيضاء هي من أهم الأدوات في تصميم الويب، ولكن يغفل عنها الناس معظم الوقت. أعلمُ أنَّ من الممتع العمل على عناصر أخرى من تصميم الويب، مثل سمة الألوان، أو الخطوط، أو التخطيط العام للصفحة… خصوصًا عندما تُنشِئ مشروعًا لعميلٍ ما (ملاحظة شخصية: لا أظن أنَّ هنالك عميلًا في العالم يلقي بالًا لطريقة تحسين الفراغات البيضاء لموقعه الجديد!). ومع ذلك، قد تستفيد من الفراغات البيضاء خيرَ استفادة إن استطعت استخدامها استخدامًا صحيحًا. وسأتطرّف في هذا الدرس إلى آلية فعل ذلك. لماذا الفراغات البيضاء مهمة في تصاميم الويب بدايةً، الفراغات البيضاء ليست مفهومًا جديدًا في عالم التصميم، إذ استعمِلَت لقرون كالأداة رقم 1 لإعطاء تركيز على العناصر المهمة في التصميم. والأمر سيانٌ في يومنا هذا. على سبيل المثال، إذا كانت لديك لوحةٌ جميلةٌ وتريد أن تُظهِر اهتمامك بها، فإن أفضل طريقة هي: (1) وضع إطار حولها، و (2) ألّا تضع أيَّ شيءٍ آخر على ذاك الجدار (انظر الصورة أدناه). وبشكلٍ مشابه، أفضل طريقة لإعطاء أولوية لأحد عناصر صفحة الويب هي عدم وضع أي شيء حوله، وكلما قلَّت الأشياء التي حول ذاك العنصر، كلما كان ذلك أفضل. ما رأيك أن ترى مثالًا بدلًا من إطالة الكلام (الصورة خيرٌ من ألف كلمة). هذا موقعٌ تدخل إليه يوميًا: يستعمل موقع Google هذا المظهر منذ سنوات، وربما أصبح شكله مألوفًا، لهذا قد لا تفكّر في تصميم الصفحة كثيرًا. لكن دعنا نتوقف قليلًا ونفكِّر كم أنَّ من السهل أن تضع Google بعض الأشياء الإضافية في الصفحة. إذ يستطيعون تضمين الأخبار (من Google News) وسيكون بعض الأشخاص سعداء بذلك. ويستطيعون أيضًا تضمين مربع لبريد Gmail لكي يتمكن الجميع من التحقق من الرسائل التي تأتيهم على بريدهم مباشرةً. أو أن يضعوا مربعًا لتقويم Google، وهلم جرًا… الاحتمالات والإمكانيات غير محدودة، إلا أنَّ Google قرروا عدم وضع أيّا من تلك الاحتمالات في الصفحة الرئيسية؛ إذ قرروا أنَّ يضعوا حقل البحث فقط (بالإضافة إلى الشعار، وبعض الأشياء في الركن العلوي الأيمن إن سجَّلتَ دخولك). لكن لماذا؟ لماذا وضعوا حقل البحث فقط؟ الجواب بسيطٌ للغاية، وإنّي واثقٌ أنَّك تعرفه مسبقًا: بوضع حقل البحث في الصفحة بمفرده، فسيظهر الغرض من الصفحة جليًا أمامك. فسيعلم زائر الصفحة بعد دخوله إليها مباشرةً ما الغرض منها وكيف يستعملها، فلا يضيع وقته بمحاولة «فهم» ما الذي يجري في الصفحة. وهذا يتوافق تمامًا مع هدف Google الرئيسي. يريدونك أن تستعمل محرك البحث الخاص بهم، وتُشكِّل الفراغات البيضاء أحد الأشياء التي يستعملها مطورو Google لكي يحثوك على فعل ذلك. لتلخيص ما سبق، يمكن للفراغات البيضاء المُستعمَلة استعمالًا صحيحًا أن: تساعد في حثّ المستخدم على القيام بأمرٍ معيّن تساعد على التركيز على أحد العناصر تساعد في توضيح الغرض من الموقع تعطي تركيزًا على الأشياء المهمة تجعل الأشياء التي ليست مهمة جدًا بأولوية منخفضة تساعد الزائر على المسح البصري للصفحة وتقرير ما الذي يهمه مباشرةً سنتحدث الآن عن كيفية استعمال الفراغات البيضاء بفعالية، بعد بأخذ كل ما سبق بعين الاعتبار. كيف تستعمل الفراغات البيضاء بفاعلية في تصاميم الويب لنتحدث عن الفراغات البيضاء من ناحية منهجية التعامل معها، وبعض المعلومات التقنية الأساسية لكيفية إنشاءها (لكنا لن نشرح الأدوات والطرق المستعملة لذلك). أولا: استعمل الفراغات البيضاء لتدعيم الهدف الأساسي من موقعك حسنًا، هنالك هدفٌ من إنشاء كل صفحةٍ أو كل موقعٍ على الويب. ومن الممكن أن يكون هنالك هدفٌ وحيدٌ لكل صفحات الموقع، أو أن يكون لكل صفحةٍ هدفٌ خاصٌ بها. أيًّا كان، يمكنك أن تستعمل الفراغات البيضاء لجعل تلك الأهداف واضحةً كالبدر في الليلة الصافية. على سبيل المثال، لنلقِ نظرةً على الصفحة الرئيسية لموقع Bigcommerce: من الواضح أنَّ الهدف الرئيسي من الصفحة هو إقناعك -أي الزائر- أن تُسجِّل تجريبيًا في Bigcommerce. وفي الواقع، لا يوجد أيٌ شيءٍ في الصفحة سوى عنوان بخطٍ كبير الذي يحاول إقناعك، بالإضافة إلى فراغات بيضاء كبيرةٍ حوله. حسنًا، تُمثِّل الصورة مثالًا عن المنتج، لكنها موجودةٌ في مركز الصفحة، مما يزيد في إضفاء الأهمية على العنوان. لم يسبق لي التّعامل مع Bigcommerce، إلا أنني متأكدٌ أنَّهم يستطيعون إضافة أشياءٍ كثيرةٍ في الصفحة الرئيسية؛ إلا أنَّهم قرروا عدم فعل ذلك. لماذا؟ لتدعيم الغرض الرئيسي من الصفحة. ثانيا: استعمل الفراغات البيضاء للحث على القيام بإجراء معين هذه إحدى قواعد التصميم الجيد للويب: افترض دومًا أنَّ الزائر لا يعرف ماذا عليه أي يفعل في الخطوة القادمة. أنَّى لهم أن يعلموا؟ لا تنسَ أنهم لم يصمموا أو يبرمجوا الصفحة، وإنما أتو لتوهم إليها … ربما عن طريق الخطأ! استعمل الفراغات البيضاء لمساعدة الزوار ليعلموا ماذا عليهم أن يفعلوه. الفكرة بسيطة: إذا لم يكن هنالك الكثير من الأشياء في الصفحة فيمكن للزائر أن يتفاعل مع الأشياء القليلة المتبقية في الصفحة. هذا مثالٌ من Crazy Egg: قد نعتبر أنَّ الصفحة السابقة فارغة تقريبًا، إذ أنَّ التصميم شبيهٌ جدًا بتصميم صفحة Google الرئيسية؛ لكنه يوضِّح ماذا يستطيع أن يفعل المستخدم. حتى لو لم تتعامل مع Crazy Egg من قبل، فيمكنك أن تعرف ماذا عليك أن تفعل بسرعة. حيث يوجد حقل إدخالٍ فيه تلميحة ("Your website URL") وزر يقول "Show Me My Heatmap". الغرض من هذه الصفحة واضحٌ ألا وهو حثّ المستخدم على اتخاذ إجراء، وتساعد الفراغات البيضاء بذلك، وتجعل الصفحة أكثر "نظافةً". ثالثا: ليس من الضروري أن تكون الفراغات البيضاء "بيضاء" ربما هذه اللحظة مناسبة لكي أصحِّحَ لبسًا في المفاهيم: ليس من الضروري أن يكون لون الفراغات البيضاء هو اللون الأبيض. بأبسط الكلمات، الفراغات البيضاء تعني عدم وجود أي عناصر ذات محتوى، ولا تعني أنَّ تلك الفراغات لونها أبيض. بهذا الخصوص، تستطيع استخدام مختلف العناصر كفراغات بيضاء. يمكنك أن تستعمل الألوان التي تحبها، على سبيل المثال Marshall: أو يمكنك أن تستعمل خلفية مشوشة (blurred) أو نقوش. مثالٌ من Zapier: في النهاية، يمكنك أن تخاطر باستخدام صور غير مشوشة لطالما كان هنالك تباينٌ كبيرٌ بينها وبين محتوى الصفحة. يمكنك رؤية مثالٍ عمليٍ عنها في موقع Grammarly: رابعا: استخدم الفراغات البيضاء في القسم العلوي للصفحة شاعت في الآونة الأخيرة ما نسميه أقسام hero‏ (hero sections) أو صور hero ‏(hero images) التي هي الأقسام التي تظهر في أول الصفحة والتي تسترعي انتباه الزوار. ترويسة الموقع أو قسم hero هو المكان الملائم لاستخدام الفراغات البيضاء. حيث ستجد أنَّه من السهل جدًا استعمال الفراغات البيضاء في تلك الأماكن، وستعطيك مكانًا رائعًا للتحدث فيه عن خدمتك التي تقدمها. الذي أقصده هو أنَّ هذا القسم في أعلى الصفحة وسيراه كل زائر… حيث لا يمرر إلى أسفل الصفحة إلا القليلون، بينما سيرى جميع الزوار القسم العلوي منها. لذا ركِّز على هذا وتأكّد أن تستغل الفراغات البيضاء جيدًا في هذا القسم. على سبيل المثال، إحدى صفحات موقع Teespring: سنرى الكثير من العناصر في القسم الذي يلي قسم hero مع فراغات بيضاء قليلة. إلا أنَّ المنطقة العلوية تقوم بعملها على أتم وجه بدعم بتدعيم الهدف الرئيسي من الصفحة وتوضيح الأمور للزائر. خامسا: استخدم الفراغات البيضاء للتلاعب بالمشاعر هنالك الكثير من الأدوات بحوزتك إن كنت تسعى خلف التأثير عاطفيًا على الزائر فيمكنك أن تستعمل الألوان، أو صورة جيدة، أو قد تستفيد من الفراغات البيضاء! جميع العناصر السابقة لها دورٌ عندما يأتي الأمر إلى إنشاء استجابة عاطفية، لكن الفراغات البيضاء تضفي لمسةً من «الدراما» إلى الموقف. فبنفس الطريقة التي تستطيع الفراغات البيضاء تدعيم هدف الصفحة، ستستطيع أن تدعِّم العاطفة التي تود التأثير عليها عند الزائر. لننظر إلى هذا المثال من Todoist: Todoist هو أداة لإنشاء قائمة بالمهام. لكن باستخدامهم للمسافات البيضاء استخدامًا جيدًا حول العنوان الرئيسي، جعلوا الصور بارزةً وأضفت بعض المشاعر الإيجابية. فبدلًا من عرض صورة للمنتج نفسه، عرضوا صورةً لشخصٍ سعيدٍ يبدو أنَّه يستمتع بيومه، بعد أن أنهى مجموعةً من المهام الموكلة إليه. سادسا: حارب نزعة المصمم لملء الفراغات حسنًا، نحن البشر نحب أن نملأ الفراغات؛ فعندما نرى مكانًا فارغًا، سنفكر -لا إراديًا- كيف نستطيع أن نملأه. لكن هذه العقلية -الطبيعية جدًا- قد تسبب مشكلةً للمصمم. فعلى عكس رفوف المكتبة، ليس عليك في تصميم الويب أن تطمح إلى ملء جميع الفراغات. لذا ابدأ هكذا: ضع هدفًا للصفحة واختر عنصرًا وحيدًا يستطيع تحقيق ذاك الهدف؛ الذي يمكن أن يكون «عنوانًا رئيسيًا + دعوةً إلى إجراءٍ ما». ضع ذاك العنصر في منتصف التصميم. ضع فراغات حوله. أضف عناصر أخرى حول تلك الفراغات. سابعا: فكر بما تستطيع حذفه، لا بما تستطيع إضافته هذه النقطة مرتبطةٌ بالنقطة التي تسبقها؛ لكن بالمقلوب. بعد أن تنتهي من تصميمك، قد تشعر أنَّ هنالك أشياءً كثيرةً هنا وهناك، وستبدأ بالتفكير بالعناصر التي تستطيع حذفها من الصفحة والتي لا تؤثر تأثيرًا سلبيًا على الهدف الرئيسي. فكلما قللت العناصر، كلما كان ذلك أفضل. ويمكنك أن تعتبر أنَّ تصميمك كاملٌ إن لم يبقَ شيءٌ تستطيع حذفه، لا إضافته. ثامنا: كلما كبر حجم الخط، كلما احتجت إلى فراغ أكبر العناوين الكبيرة أصبحت "موضة" في هذه الأيام، وخصوصًا في عصر التصميمات المسطحة والعقلية السائدة المؤيدة لها. لكن الخطوط الكبيرة تحتاج إلى مساحة للتنفس؛ فإن لم تكن هنالك فراغات كافية حول العناوين الضخمة في تصميمك، فستخسر قوتها وستبدو كأنها صعبة القراءة… بغض النظر أنَّها لم تعد فعالةً. لذا ستكون القاعدة كالآتي: استخدم نصًا كبيرًا إذا ما استطعت توفير فراغات بيضاء كبيرة حوله. انظر هذا المثال من Dior: لاحظ حجم الخط الكبير جدًا للعنوان، وكمية الفراغات البيضاء التي حوله. الفراغات البيضاء على الهواتف المحمولة؟ كن حذرًا هنا. صحيحٌ أنَّ القواعد والمبادئ العامة تنطبق على تصاميم مواقع الهواتف المحمولة، ومن المحتمل أن تستفيد من الفراغات البيضاء فيها؛ إلا أنَّ هنالك حدًا دقيقًا فاصلًا بين "الاستخدام الجيد للفراغات البيضاء" وبين "ترك فراغات كثيرة بين العناصر". يكون الحد الفاصل عادةً هو عدِّة بكسلات في أحد الاتجاهات، ومن السهل جدًا أن تنتقل من تجربةٍ رائعةٍ للمستخدم إلى واجهةٍ صعبة التصفح نتيجةً لوجود الكثير من الفراغات. أرى أن تحاول جعل كل كتلة من المحتوى المهم (مثل العنوان + عبارة لحث المستخدم على اتخاذ إجراء) تملأ شاشة الهاتف بأكملها، وإن كانت هذه المهمة صعبةً في بعض الأحيان. على سبيل المثال، انظر إلى هذا التصميم من Evernote عندما يُعرَض على هاتفٍ محمول: ستُعرَض الكتلة الرئيسية من المحتوى على كامل الشاشة، ومن ثم سيبدأ المستخدم بالتمرير إلى الأسفل ليرى ماذا تحتوي بقية الصفحة. النقطة الصعبة هنا هي أنَّه عليك أن تتعامل مع أجهزةٍ مختلفةٍ، وفي حين أنَّك تستطيع اختبار التصميم على أكثر الأجهزة شيوعًا، إلا أنَّه من المستحيل أن يبدو تصميمك بشكلٍ صحيح على كل الأجهزة. أضف إلى ذلك أنَّك تريد أن يُعرَض عرضًا سليمًا على الحواسيب أيضًا؛ مما يزيد التعقيد كثيرًا. الرسالة الرئيسية التي أريد أن أوصلها لك هنا هي أن تبقى حذرًا، والزم المبادئ العامة لآلية استغلال الفراغات البيضاء دون الإفراط باستخدامها، وسيكون الأمر على ما يرام. ترجمة -وبتصرّف- للمقال The Importance of Whitespace in Web Design لصاحبه Karol K.