ابراهيم الخضور

نتحدث في مقالنا عن أمثل الطرق ﻹعداد وتصدير الأصول أو الموجودات assets من بليندر Blender إلى محرّك اﻷلعاب جودو Godot، ونغطي خلاله العمل مع الخامات texture والتعامل مع قنوات لونية مختلفة، وبعض الإعدادات الشائعة لملفات المشاهد ثلاثية اﻷلعاب gLTF، ثم نتحدث عن فعالية استخدام هذه التنسيق. إعداد الخامة Texture عليك بداية إعداد الخامة texture، لهذا يمكنك الانتقال فورًا إلى التحرير اللوني shading، وقد تلاحظ وجود كائنين. والسبب في ذلك أننا سنستعرض تقنيتين مختلفتين لهما فائدة كبيرة جدًا، وستلاحظ أن معاملات الكائن اﻷول جاهزة وفي مكانها. وفي الفقرات التالية نوفر لك دليلًا سريعَا يوضح الدمج مع بقية الأصول التصميمية في ملف gLTF الذي سنصدّره والذي يستخدم لنقل وتحميل النماذج ثلاثية الأبعاد. القناة Alpha وخريطة Albedo تمثّل Albedo الخريطة اللونية التي يمكن سحبها إلى القاعدة اللونية Base Color. وإن وجدت القناة Alpha، سيتوجب عليك سحبها إلى مكانها. أما خريطة Albedo فهي الخريطة اللونية التي تحتاجها وبإمكانك سحبها إلى القاعدة اللونية. وبالعودة إلى قناة Alpha، وإن كان لديك أية قناة قد هيأتها سابقًا، فعليك وضعها ضمن القسم Alpha. وإن أردتها أن تعمل ضمن محرك اﻷلعاب الذي تريده، انتقل إلى المواد material وبعدها إلى وضع المزج blend mode وغيّرها إلى اقتصاص ألفا Alpha clip. وتذكر أن الطريقة التي تُعد فيها القناة هنا هي نفسها التي ستظهر عندما يتطلب اﻷمر تغيير بعض اﻹعدادات. ستجد في لوحة المواد لديك نمطًا للمزج تصل إليه كالتالي viewport display ثم settings ثم Blend Mode، وسيؤثر ذلك على طريقة عرض محرك اﻷلعاب لخرائطك: واضح Opaque: وهو اﻹعداد الافتراضي، تُرى فيه المواد بشكل كامل ولا يسمح بأي وضع شفاف، أي يتجاهل هذا الخيار أية معلومات تقدمها القناة Alpha ويتعامل مع المواد على أنها ظاهرة تمامًا. اقتصاص ألفا Alpha clip: ويُعرف هذا النمط أيضًا باختبار ألفا Alpha Test أو الاقتصاص Cutout، ويستخدم معلومات قناة Alpha ﻹنشاء فصل ثنائي واضح بين المناطق كاملة الوضوح وكاملة الشفافية. وهذا أمر مثالي للكائنات التي تتمتع بشفافية محددة بدقة مثل الأسوار وأوراق اﻷشجار أو القصاصات الورقية، إذ لا تريد حينها مناطق نصف شفافة. تظليل ألفا Alpha Hashed: يسمح هذا النمط باﻷوضاع نصف الشفافة للمواد، ويعطي أفضل النتائج عند تجميع الكائنات الشفافة فوق بعضها على شكل طبقات. يستخدم نمط التشويش العشوائي dithered pattern لمحاكاة الشفافية، وينتج عنه خامة مشوشة لكنها تعطي توزيعًا أفضل عمومًا للسطوح الشفافة مقارنة بنمط مزج ألفا Alpha Blend. مزج ألفا Alpha Blend: يسمح هذا النمط بالوضع نصف الشفاف الكامل، وهو مثالي لمواد مثل الزجاج أو السوائل، إذ يمزج قناة Alpha مع القناة اللونية ليعطي تمثيلًا دقيقًا للشفافية. مع ذلك قد يواجه هذا النمط مشاكل مع توزيع العمق اللوني وخاصة عند تتداخل عدة كائنات شفافة. المظهر المعدني والخشونة يستخدم مخطط عمل يعتمد على التصيير الفيزيائي Physical Based Rendering ليحاكي المواد الحقيقة في محركات اﻷلعاب ثلاثية اﻷبعاد. الخرائط المعدنية تحدد الخرائط المعدنية Metallic Maps أية أقسام من نموذجك لها مظهر معدني وتلك التي ليس لها هذا المظهر. ففي الخامة ذات التدرجات الرمادية، تعبر القيمة (1.0) للون اﻷبيض أن السطح معدني، بينما تعبر القيمة (0.0) عن سطح غير معدني. وعليك الانتباه إلى أن هذه الخاصية قد تكون ثنائية وغير متدرجة في أغلب اﻷحيان، فإما أن يكون السطح معدنيًا أو غير معدني. لهذا سيكون لهذه الخريطة قيم سوداء تمامًا أو بيضاء تمامًا غالبًا، ونادرًا ما تستخدم قيم تدريجية (رمادية). خرائط الخشونة تتحكم خرائط الخشونة Roughness Maps بتفصيل نعومة أسطح المواد وتحدد مدى الخشونة أو النعومة التي تبديها. ففي هذه اﻷرضية ذات التدرج الرمادي، تشير قيم اللون اﻷبيض إلى سطح خشن، يعكس الضوء باتجاهات مختلفة، معطيًا مظهرًا ليس لامعًا. بينما تشير قيم اللون الأسود إلى سطح ناعم يعكس الضوء باتجاهات محددة أكثر، معطيًا مظهرًا لامعًا. لكن كيف يمكن تصدير كل ذلك؟ كيف تُنفّذ هذه الإعدادات لتصديرها لاحقًا من الجيد فصل اﻷرضيات التي تحجب محيط الكائن وخرائط الخشونة والمظهر المعدني (ORM اختصارًا) وإسنادها إلى القناتين اللونيتين الزرقاء والخضراء وهو طريقة جيدة في حزم اﻷرضيات لجعلها أكثر فعالية. وعندما يكون لديك عدة خرائط متصلة مع خرائط ORM ستُجمّع كلها ضمن خامة ORM واحدة. وتأكد من ضبط خرائط الخشونة والمظهر المعدني والخرائط النمطية normal map على قيم غير لونية كي يكون الفضاء اللوني صحيحًا وبالتالي ستنقل البيانات بشكل صحيح. وتذكر أيضًا أن أية تغييرات تجريها على اﻷرضيات ستُصدّر أيضًا. حجب محيط المادة إن حجب المحيط Ambient Occlusion عملية مزعجة للكثيرين، وخاصة عند تصديرها من بليندر. والحل اﻷبسط هو تحديد عقدة الخامة ومضاعفتها بالضغط على المفتاحين Shift + D، ثم تجميعها بالضغط على المفتاحين CTRL + G والذي يُنشئ مجموعة من اﻷرضيتين في الوسط. احذف الخريطة الموجودة في الوسط: ستجد على اليمين المدخلات inputs والمخرجات outputs ضمن النافذة الفرعية "Group": أزل المدخلات فلن نحتاجها، ثم غيّر اسم الشعاع Vector تحت المدخلات إلى Occlusion وغيّر نوعه إلى float اضغط على Tab وستظهر عقدة مجموعة جديدة: غيّر اسم العقدة إلى "glTF Settings" كما في الصورة التالية تمامًا، فأي خطأ سيمنعه من العمل: صل اﻵن خريطة الحجب إلى عقدة المجموعة "glTF Settings": تصدير الخريطة النمطية الخريطة النمطية normal map هو نمط من اﻷرضيات المستخدمة في النماذج ثلاثية اﻷبعاد لمحاكاة التفاصيل الصغيرة للسطح مثل النتوءات دون الحاجة ﻹضافة مضلعات جديدة في النموذج. تُعد الخريطة النمطية بسيطة، واحرص على عدم استخدام قيم لونية عند ضبطها ثم صلها مع عقدة الخرائط النمطية وبعدها إلى normal. هذه هي الطريقة اﻷبسط لتصديرها. إعدادات إضافية أخرى ستجد في نافذة اﻹعدادات settings الخيار "Backface Culling" (ويعني إخفاء الوجه عند النظر من الخلف)، فإن فعّلته هنا سيُفعّل في محرًك اﻷلعاب الذي تنقل ملف اﻹعدادات إليه. عند تفعيل هذا الخيار، يتحقق محرك الرسوميات من توجّه كل مضلّع، فغن كان مواجهًا للكاميرا فسيُصيّر بشكل اعتيادي، وإن كان معاكسًا لها، سيتجاوزه محرّك الألعاب ولن يصيّره. ولهذا الأمر إيجابيات على اﻷداء، فهو يقلل عدد المضلعات التي يجدر بالمحرّك معالجتها بشكل واضح. ولكي تعمل هذه التقنية جيدًا، ينبغي أن يكون النموذج مغلقًا بالشكل الصحيح، أي لا يحتوي أية ثقوب تسمح بالنظر من خلالها إلى الوجه الخلفي لمضلعات أخرى. فإن فّعلّ خيار إخفاء الوجه عند النظر من الخلف وكان هناك ثقوب، فستظهر بعض أجزاء النموذج وكأنها مفقودة عند النظر من زاوية معينة. ومن المهم الانتباه إلى أن تفعيل هذا الخيار ليس محبذًا النماذج المسطحة والرقيقة مثل اﻷوراق او غيرها من المواد الشفافة أو نصف الشفافة والتي يمكن أن يُرى منها وجهي المضلع، بعد ذلك يمكنك تصدر الكائن بالانتقال إلى File ثم Export GLTF. ما الذي يجب تذكره عند تصدير GLTF؟ ينبغي الانتباه إلى عدة أشياء عند تصدير GLTF، لهذا سنناقش إعدادات تصدير النموذج ثلاثي اﻷبعاد بصيغة GLTF: التنسيق Format: أكثر التنسيقات استخدامًا هو صيغة GLB الثنائية، لأنها تضم النموذج ثلاثي اﻷبعاد واﻷرضيات في ملف واحد. مع ذلك يعطيك تنسيقا (glTF(GLTF + BIN + textures و glTF Embedded تحكمًا أوسع لأنهما يفصلان بين المكونات. ويُعد تنسيق (glTF(GLTF + BIN + textures مفيدُا إن أردت مشاركة اﻷرضيات مع كائنات أخرى. التضمين include: تحدد في هذا القسم أية أجزاء من ملف بلندر ستصدره. فالخيار "خيارات منتقاة Selected Options" يُصدّر فقط النماذج التي اخترتها، وجميع الخيارات في المجموعة الفعّالة حاليًا في حال اخترت "المجموعة الفعالة Active Collection". التحويل transform: إن كنت تواجه مشاكل مع توجّه النموذج في محرّك اﻷلعاب، بإمكانك تغيير المحورين "أعلى Up" و "للأمام Forward". وتذكّر اختلاف التوجّهات في محركات الألعاب المختلفة. تصدير المواد Material Export: عليك التأكد من تفعيل هذا الخيار. الصور Images: بإمكانك اختيار صيغة الصور التي تريدها من هذا القسم. هندسة النموذج Geometry: يتضمن هذا القسم خيارات التصدير المتعلقة بهندسة النموذج، فإذا كان نموذجك يستخدم ألوان Vertex فعّل الخيار المتعلق به وإلا فقم بتعطيله، اما خيار Apply Modifiers فهو يطبق جميع المعدلات على النموذج الخاص بك قبل التصدير. التحريك Animation: يساعدك هذا القسم في تصدير الرسوم المتحركة، وبإمكانك تصدير الرسوم المتحركة النمطية normal animations ومفاتيح الشكل shape keys ورسوم اﻷغلفة skinning كي تتحكم بها في محرّك اﻷلعاب الذي تريد. إدراج ملف glTF في محرك اﻷلعاب جودو عند اكتمال تصدير الملف، افتح محرّك اﻷلعاب جودو واستورد هذا الملف. وتأكد أن الصور المضمّنة في تنسيق glTf Embedded قد ضُبطت على "استخراج اﻷرضيات". ومن المفترض أن يتلائم الملف المصدّر جيدًا. في حالتنا الموضحة بالصور التالية، اخترنا اقتصاص ألفا Alpha clip عند التصدير، لكنه ظهر في محرك ألعاب جودو على شكل مقص ألفا Alpha Scissor. لاحظ كيف ظهرت الخرائط بالشكل الصحيح في جودو! وقد تلاحظ كيف تبدو غريبة ومليئة بألوان زاهية، يُدعى هذا اﻷمر خامة ORM أي أن اﻷرضيات قد حُزّمت ضمن خرائط مختلفة وأقنية مختلفة للخامة مما يجعل هذه الخرائط أكثر فعالية. وقد تلاحظ أيضًا ظهور قسم الانبعاثات Emision والخريطة النمطية Normal Map أيضًا. الخلاصة باتباعك الخطوات التي شرحناها في هذا المقال، ستتمكن من تصدير عناصر أو أصول الألعاب الخاصة بك بفعالية من بليندر إلى جودو Godot. لا تتردد في ترك أية تساؤلات أو اقتراحات في قسم التعليقات أسفل الصفحة لتعم الفائدة لجميع المهتمين بتصميم الألعاب الإلكترونية. ترجمة -وبتصرف- لمقال: How to Efficiently export Assets from Blender to your game engine اقرأ أيضًا مطور الألعاب: من هو وما هي مهامه بلندر للمبتدئين: كيف تصمّم وتحرّك روبوت - نمذجة الجسم والرأس كيف تصمّم وتحرّك روبوت: خامات بلندر ومفاتيح الشكل إنشاء مجسم ثلاثي الأبعاد لشجرة باستخدام برنامج بلندر

يواجه المديرون في السنوات الأخيرة تحديات في تقييم رضا فريق العمل بالأعمال الموكلة إليهم، خاصةً بعد انتشار أسلوب العمل عن بعد. ولحسن الحظ، تساعد بعض الحلول في التخفيف من المشكلة مثل منصات استطلاع الرأي التي تقيس مقدار انخراط موظفيك في أعمالهم وتقرّب المسافة التي تفصلك عنهم وتمنحك فكرةً عميقةً عن مشاعرهم حيال عملهم. وعلى خلاف استطلاعات الرأي التقليدية على الإنترنت التي تبدو جافةً ومعممة، يمكن لاستطلاع رأي الموظفين أن يحوّل نقاط النقاش إلى عمل فعلي له نتائجه الملموسة. ما الغاية من استطلاع رأي الموظفين إنّ الغاية الأساسية من استطلاع آراء الموظفين قبل كل شيء هي تحديد سلوك العمل لديهم من حيث مستويات التحفيز والالتزام بعملهم معك وقناعتهم بشركتك وبيئة العمل التي تحيطهم بها. لقد أظهر استبيان لموقع "Officevibe" أنّ: 37% من الموظفين لا يشعرون بأنهم مقربون من مديريهم. 31% من الموظفين يرغبون بالتواصل أكثر مع مديريهم. قرابة %96 من الموظفين يعتقدون بضرورة تلقي تنبيهات وردود أفعال من مديريهم بانتظام. كما أشارت البيانات إلى رغبة الكثيرين في التواصل المفتوح مع قادة شركاتهم، لكن الأمر غير متاح غالبًا، وقد يكون السبب هو عدم انتباه مشرفيهم إلى حاجتهم للتواصل. قد تنبه التعليقات أو الآراء مخفية المصدر (التي تنتج عن استطلاعات رأي الموظفين) مديري الشركات إلى طريقة تأسيس تقنية تواصل جيدة بينهم وبين موظفيهم وبين الموظفين أنفسهم. سيساعدك استثمار وقتك وجهدك في هذه الاستطلاعات على التخلص من الخيارات غير المدروسة عند بناء الفريق، ويمنحك المعلومات اللازمة لتنمية بيئة عمل مكتبية مريحة؛ كما تمكنك استطلاعات الرأي من تقييم رضا الأشخاص وتساعدك في بناء مسار تواصل جديد في شركتك، فتأسيس حلقة تواصل ضمن الشركة ستعمق معرفتك بالأوضاع وتُشعر الموظفين بقيمتهم وتدفعهم للالتزام بالعمل لديك مستقبلًا. فوائد تجنيها من استطلاع آراء الموظفين ستكون استطلاعات الرأي التي تشجع موظفيك على التعبير عن رضاهم بالعمل لديك وترشدك إلى طرق تحسين ثقافة التعاون، بمثابة مفتاح للحفاظ على موظفيك وزيادة إنتاجيتهم. وعندما تستخدم هذه الاستطلاعات بطريقة منهجية وفعالية ستتمكن من: 1. تحسين الروح المعنوية للموظفين تشير الدراسات إلى تقدير الناس للتواصل المستمر والالتزام به. وعندما تتواصل مع موظفيك متبادلًا الآراء معهم، فسيشعرون بأنك مصغ ومهتم. يمكن للمديرين أن يقيّموا مدى مشاركة الموظفين الفعالة في نشاط الشركة والمخاطر المحتملة في كل قسم على حدى من خلال استطلاعات الرأي، فقد تشير المعلومات الناتجة عن تحليل استطلاعات آراء الموظفين إلى شعورهم حيال أسلوب إدارتك وغيرها من النقاط؛ كما قد تدلك على النجاحات والإنجازات التي تحققت دون أن يلحظها أحد. وحتى لو لم تستطع الاستجابة لكل ما يرد في تلك الاستطلاعات مباشرةً، إلا أنك قادر على معالجة النقاط التي يمكن إنجازها على المدى القريب وتعم فائدتها على المدى الأطول. عزز الروح المعنوية للموظفين من خلال استطلاع آرائهم، وناقش نتائج تقييم انخراطهم في العمل وكيفية إبداع طرق وأساليب جديدة في تنمية روح الفريق. يمكن لاستطلاع آراء الموظفين أن يلقي الضوء على النجاحات والإنجازات التي تحققت دون أن يلحظها أحد، وقد تعطي الفرصة لحل بعض الخلافات أو إطلاق نقاشات أساسية حول الأداء والإنتاجية. وعندما تكون على دراية تامة بما يحدث حولك وتستمر في تجميع ردود أفعال موظفيك والاطلاع على آخر المستجدات، ستكون قادرًا على إبراز فريق العمل عندما يقدم أداءً ملفتًا، وهي طريقة ممتازة لتعزيز الروح المعنوية، خاصةً إن استمريت في تنفيذها. عندما تتقن إدارة الحالة النفسية لموظفي شركتك، ستكون قادرًا على تعزيز بيئة عمل متعاونة تشجع الناس وتزيد في انخراطهم بشغف في أعمالهم. ستزوّدك المعلومات التي تحصل عليها من استطلاعات الرأي المخصصة في إيجاد جملة من المواضيع الجديدة التي لا بدّ من تتبعها لفهم فريقك أكثر. 2. استدراك الثغرات المعرفية يمكن أن تحدد نتائج استطلاعات الرأي الثغرات المعرفية المحتملة على المستوى الفردي أو مستوى الفريق. هل فهم الجميع مثلًا جميع الأهداف التي عرضت في آخر اجتماع؟ هل عرف كل شخص الدور الذي سيلعبه للمساهمة في تحقيق الأهداف؟ هل الجميع مهيأ لتنفيذ المهمة المطلوبة؟ يمكن للقادة تنفيذ استطلاع رأي للتعمق في تفاصيل مهمة أو عمل ما، وستقودهم النتائج بسرعة إلى النقاط التي قد تسبب أخطاءً مكلفة، سواءً كانت نقصًا في الاستيعاب الكامل، أو نقصًا في المهارة. وبالتالي ستتمكن من حل هذه النقاط باكرًا إن عرفتها باكرًا من خلال التمرين أو المتابعة أو إجراء مقابلات خاصة وجهًا لوجه. 3. تحسين الصحة النفسية للموظفين تشير الدراسات إلى أنّ ضعف التواصل بين المدير والموظف قد تزيد من التوتر والاكتئاب، بما في ذلك الشعور بالعزلة الاجتماعية. هل أخذت بالحسبان يومًا تأثير الصحة النفسية على أداء الموظفين؟ هل كانت أخطاؤهم مجرد أخطاء صرفة أم أنها نتيجةً لذهن شارد أو شعور بالوحدة أو عدم الرغبة في الانخراط بالعمل؟ إنّ أهم ما تقدمه لك استطلاعات الرأي هو مناخ النقاش المفتوح في الشركة، فقد يساعدك طرح بعض الأسئلة الخاصة التي يمكن للموظفين الإجابة عليها بحرية على منح الكثير من الموظفين طريقة آمنة للتعبير عن الأفكار التي تثقل كاهلهم. نشعر جميعنا بأنّ وجود الإدارة المتعاطفة سيصب في مصلحتنا. وعندما تُجري استطلاعات الرأي فأنت تفتح بذلك مساحة تدعو إليها موظفيك للتواصل المباشر معك، وقد يساعدك ذلك في تخفيف شعورهم بالعزلة وزيادة رضاهم عن عملهم وتحسين صحتهم النفسية. 4. موظفين أكثر سعادة عندما تتبنى شركتك ثقافةً تشجع على التواصل المفتوح، فأنت تشجع موظفيك على البوح بما يجول في خاطرهم وتبعد فكرة طردهم عند ارتكابهم الأخطاء، وبهذا ستنمو الثقة بين الموظفين عندما يتبادلون النصائح أو الانتقادات البناءة، لأنها ستُفهم في سياق التآزر والتعاطف. تشير الدراسات إلى أن %83 من الموظفين سيقدّرون رأي الآخرين بما يقدّمون، سواءً كانت آراؤهم إيجابيةً أو سلبية؛ لذلك ينبغي أن تحرص على إيجاد فرصة لتوجيه ملاحظاتك أيًا كانت إلى موظفيك، وذلك من خلال الأقنية الرسمية وغير الرسمية لتنمي المشاعر الجيدة اتجاه مكان العمل. تساعد التوجيهات المستمرة الموظف على أداء واجباته دون ضغوطات أو مشاعر سلبية ناتجة عن سوء الفهم؛ فعندما يتيح الموظف لمديره مادةً يفتتح من خلالها الاتصال، فستعم الفائدة الشركة بأكملها؛ كما أنّ التعبير عما يتوقعه كل طرف من الآخر سيزيد من الصراحة والوضوح اللازمين لأداءٍ أفضل. 5. تعزيز عامل السلامة عند الموظفين قد تتفاجأ بأنّ الانخراط الفعال لموظفيك في عملهم يؤثر في سلامتهم المهنية، فقد أظهرت الدراسات أنّ الاجتهاد في العمل يزيد من إدراك الموظف لمحيطه، مما يقلل عدد حوادث العمل التي قد تؤثر على سلامتهم. وكما يعزز التواصل مع موظفيك الروح المعنوية لديهم، فقد تمنحك البيانات التي تقدمها استطلاعات الرأي إضاءات لأسلوب العمل الذي يزيد من حماسهم إلى العمل، والذي سيقود بدوره إلى سلامة مهنية أعلى. وستكون النتيجة بيئة عمل أكثر سعادةً وصحة، وتوفيرًا للوقت والمال نظرًا لانخفاض المخاطر. تلعب الصحة النفسية أيضًا دورًا مفتاحيًا، فقد أظهرت الدراسات أنّ %20 من أعضاء الفريق يخشون طرح أفكار جديدة؛ فعندما تفتح للموظفين أقنية للتواصل، فأنت تمنحهم منصةً ليفصحوا عما يجول في خواطرهم وستفتح الطريق أمام إبداعات فكرية وابتكارات جديدة. 6. زيادة رضا الموظفين يتطلب إيجاد عمل مقنع عن بعد (من المنزل) انسجامًا مع العمل نفسه والأشخاص القائمين عليه مثل المديرين والزملاء والعملاء وغيرهم من أصحاب الأعمال، إذ يحدُّ التخاطب مع أشخاص ترى وجوههم فقط من خلال شاشة الحاسوب من التواصل البشري، وسيشعر الناس بأنهم غرباء وفاقدي الحافز أو الرغبة في إنجاز أعمالهم عندما يقل التواصل وجهًا لوجه، كما قد ينعكس ذلك سلبًا على مستوى الرضا عن العلاقة مع المشرفين. تساعدك أدوات استطلاعات الرأي الشاملة على قياس مؤشرات الانخراط في العمل، مثل الرضا عن العمل، بالإضافة إلى مؤشرات أخرى تتعلق بالعلاقة مع الزملاء وإرادة العمل والتوتر والانحياز إلى الشركة وغيرها. وبمراجعة نتائج استطلاع الرأي والإجابات المقدمة، ستتمكن من الإحاطة بعمل فريقك ومن ثم اتخاذ التدابير اللازمة لتعزيز رضا الموظفين عن الأعمال التي ينجزونها، كما ستتمكن من خلال تحديد مستويات رضا الموظفين من تتبع وتحليل نتائج جهودك التي تبذلها لتحسين واقع العمل مع الوقت. 7. المحافظة على موظفيك لا يمكن للمدراء دائمًا أن يعرفوا ما يجول في خاطر الموظفين، وليس من السهل الإحساس بالآخرين عندما يشعرون بقلة التقدير أو عدم الاستفادة من قدراتهم في إنجاز العمل؛ فإهمال تقدير الأشخاص يُعَد واحدًا من أهم الأسباب التي تؤدي إلى ترك الموظفين لعملهم. عندما لا يرى الموظف أنّ ما يقدمه من مساهمات للشركة محط اهتمام، فسيبحث عن بيئة عمل تقدر ما يفعل؛ لذلك لا بد من التأكد أنّ أصوات موظفيك مسموعة وأنّ مخاوفهم محط اهتمامك، وهنا قد تساعدك استطلاعات آراء الموظفين في استشعار الجو العام ومن ثم التصرف بسرعة قبل وقوع المشاكل أو التحديات المحتملة. 8. زيادة ولاء الموظفين لشركتك لن يترك الموظف العمل لديك إن كان متحمسًا للعمل وملتزمًا بإنجاز الأهداف الموكلة إليه ويشعر بتقديرك له، فكيف ستتمكن إذًا بصفتك مديرًا أن توفر كل المتطلبات السابقة لموظفيك؟ الجواب هو قياس المشاركة الفعالة للموظفين في الأعمال بانتظام. عندما تجد وسيلةً توصل بها إليك أصوات موظفيك، فهذه إشارة إلى اهتمامك بهم وبما يشعرون به حيال استطلاعات الرأي التي تطلقها. اسألهم عن التفاعل فيما بينهم، وعن ضغط العمل وعما يمكن أن تفعله كي يقدم لهم كل الدعم من خلال المبادرات القادمة، فالاستطلاعات هي بمثابة وسيلة لاتخاذ الإجراءات التالية. تُبنى العلاقات على الأخذ والعطاء، فإن أبدت الشركة اهتمامها بموظفيها، فسيرد الموظفون الاهتمام بالمثل. 9. تحسين خدمة العملاء هل جرّبت أن تقدّم المساعدة للعميل وأنت في مزاج سيّئ؟ من الصعب أن تُبقي على هيئتك الودودة لكسب رضا العميل وأنت محبط. ينطبق هذا الأمر تمامًا على موظفي الشركات، فإن استطاعت الإدارة خلق مساحة للتعبير عن الآراء والمشاعر، فستزيح بعض الإحباط الذي قد يشعر به الموظفون وستشهد الشركة تحسنًا شاملًا في مزاج موظفيها وأدائهم ورضاهم، وهذه خطوة جيدة في الاتجاه الصحيح. 10. تنشئ رافعة للتغيير تساعد استطلاعات الرأي على تجميع المعلومات التي تكشف المخاوف غير المعلنة. وحالما تحسّن الظروف المحيطة بالعاملين وتستمع إلى مخاوفهم، ستُحدث نقلة نوعية في ثقافة عمل الشركة ويستفيد الجميع، إذ يستمر الموظفون في العمل لديك إن كانوا سعداء، ويبذلون جهدًا أكبر وتتحسن بيئة العمل بأكملها. هل تحسن استطلاعات آراء الموظفين حماستهم في العمل؟ لاستطلاعات الرأي القدرة على إحياء روح الحماسة تجاه العمل، لكن بالطبع لن ينفع استطلاع واحد! لا بدّ في واقع الأمر من تبني ثقافة تبادل الرأي وتلقي ردود الأفعال وأساسها الاستطلاعات، ومن ثم العمل على نتائجها لتحفيز وتشجيع الموظفين. لا حدود للإمكانيات التي سيوفرها الانخراط الناجح والفعال لموظفيك في أعمالهم، لكنك سترى فقط التغيرات السلوكية إن حاولت العمل على نتائج استطلاعات الرأي؛ فقد تجد مثلًا أنّ ما يقلق فريقك هو نقص التواصل والتشجيع، وسيكون الحل عندها التعاون مع فريقك لتطوير منظومة تبادل آراء أفضل، كما يمكنك العمل مع فريق نشيط لتقديم دعم أفضل أو أسلوب لمكافأة العامل المتميز والاستفادة من الإمكانات الفردية أو زيادة ما ينفع الموظفين. ما الفائدة من استطلاع آراء الموظفين؟ تساعد استطلاعات الرأي المدراء على فهم النواحي التي يعاني فيها فريق العمل أو يشعر بالغبن فيها، أو يحتاج فيها إلى مساعدة أكبر؛ ففهم حاجات موظفيك هو إحدى مزايا القائد الجيد، واستطلاعات الرأي هي إحدى الأدوات التي قد تساعدك وتساعد فريقك على تحقيق النجاح. ترجمة -وبتصرف- للمقال 10‎ benefits of employee engagement surveys لصاحبته Rachel Steben. اقرأ أيضًا أهمية تبادل الآراء مع الموظفين ما يتوقعه الموظفون من المديرين وفقا لآراء الموظفين هل يشعر الموظفون بالراحة عند إعطاء آرائهم؟

نتحدث في هذا المقال عن استخدام محرر قواعد البيانات SQLite للعمل مع جودو، ونعرض بداية اﻷسباب التي تدفع مطوري اﻷلعاب للعمل مع محرر قواعد بيانات أصلًا، ونتعرف بعدها على محرر قواعد البيانات SQLite والذي يُعد قاعدة بيانات مضمّنة صغيرة تسمح للمستخدم تخزين البيانات والاستعلامات ضمنها. لكن لماذا على استخدام قاعدة بيانات هذه؟ إن الميزة المفيدة لهذه القاعدة هو قدرتها على استيعاب كل البيانات في منطقة واحدة، واﻷهم من كل ذلك هو القدرة على الحصول على البيانات بأبسط طريقة. حتى تبدأ العمل معنا في هذا المقال، افتح محرك الألعاب جودو وأنشئ مشروعًا جديدًا. إعداد قاعدة البيانات إذا كنت مطور ألعاب إلكترونية فقد تحتاج لاستخدام قواعد البيانات في لعبتك من أجل تخزين بيانات اللاعبين وحفظ المستوى أو النقاط التي حصلوا عليها، ولتجهيز قاعدة البيانات SQLite التي سنستخدمها في هذا المقال، حمّل متصفح قواعد البيانات DB Browser for SQLite الذي يساعدك في إدارة قاعدة البيانات من خلال واجهة رسومية يمكنك من خلالها إنشاء قاعدة البيانات وتحريرها بسهولة. سنبدأ بإنشاء قاعدة بيانات جديدة، لهذا افتح متصفح قاعدة البيانات وانقر على النافذة "قاعدة بيانات جديدة New Database". وانتقل بعد ذلك إلى المجلد الذي يضم مشروع جودو الذي أنشأته سابقًا وأنشئ ضمنه مجلدًا جديدًا يحمل الاسم "datastore"، فلنختر الاسم "data" لقاعدة بياناتنا الجديدة. تظهر بعد ذلك نافذة "تحرير تعريف الجدول Edit table definition"، اختر عندها الاسم "Scoreboard" لهذا الجدول وسنخزن في هذا الجدول نتيجة كل لاعب أو عدد النقاط التي حصل عليها في اللعبة. لنبدأ بإنشاء أول اﻷعمدة "id" بالنقر على الزر "Add"، وستكون عناصره من النوع الصحيح INTEGER وانقر على الخيارات "غير فارغ NN" و"تزايد تلقائي AI"، مما يسمح له بأن يكون مرجعًا لنا للحصول على البيانات من الجدول أو إلحاق بيانات أخرى. أنشئ تاليًا حقلًا field نصيًا TEXT وسمه "name" وذلك لتخزين اسم المستخدم الذي نريد معرفة نتيجته. ويستخدم النوع السابق لتخزين أكثر من ا تيرابايت من البيانات النصية، فانتبه إلى ذلك! ثم أنشئ أخيرًا حقل النتيجة "score" واجعله من النوع الصحيح INTEGER. انقر اﻵن على الزر "موافق OK" وانتقل إلى مشاهدة قاعدة البيانات من خلال النقر على "تصفح البيانات Browse Data"، وسترى جدولك وقد ظهر. بإمكانك اﻵن من هذه النافذة أن تدخل البيانات يدويًا إن أردت، وذلك بالنقر على أيقونة اﻹضافة ومن ثم إدخال ما تريد. إن انتقلنا إلى "تنفيذ استعلام execute SQL"سترى المكان الذي تنفذ فيه الاستعلامات التي نريد على قاعدة البيانات. سنجرّب الاستعلامات بإدخال بعض البيانات، لهذا اكتب الاستعلام التالي: insert into scoreboard (name,score) values ('nori',50),('finepointcgi',20) عند تنفيذ هذا الاستعلام على النحو التالي: سترى النتيجة التالية: وعند تنفيذ الاستعلام Select * from scoreboard، سترى نتيجة عملك. ولننتقل اﻵن إلى محرك الألعاب جودو من أجل استكمال عملية ربطه مع قاعدة البيانات SQLite. تنزيل اﻹضافة الخاصة بقاعدة البيانات SQlite لننتقل اﻵن إلى جودو ثم نفتح النافذة الفرعية "مكتبة الأصول أو مكتبة الموجودات Asset library" التي تمثل مستودعًا لأي أدوات أو موارد إضافية تريد تضمينها في اللعبة، ثم اكتب sqlite واختر الإضافة التي تملك الرقم 2shady4u فهي إضافة جيدة وذات أداء مستقر. جرّب بعد ذلك تثبيتها وانتظر لحين اكتمال التنزيل. سنضيف تاليًا عقدة، لهذا سننشئ سكريبت ونسمّيه "MainSystem.gd" وسيحتوي هذا الملف على كافة السكريبتات والتعليمات التي تتفاعل مع البيانات، لذا علينا تحميل أن نقوم بتحميل قاعدة البيانات في بدايته، وكي تتمكن من القيام بالتحميل المسبق للبيانات عليك استخدام الدالة preload مع تمرير العنوان التالي لوسيط لهذه الدالة: res://addons/godot-sqlite/bin/gdsqlite.gdns إدخال بيانات إلى قاعدة البيانات الآن انسخ الشيفرة التالية إلى ملف السكريبت الذي أنشأته في الخطوة السابقة: const SQLite = preload("res://addons/godot-sqlite/bin/gdsqlite.gdns") var db var db_name = "res://DataStore/database" func _ready(): db = SQLite.new() db.path = db_name func commitDataToDB(): db.open_db() var tableName = "PlayerInfo" var dict : Dictionary = Dictionary() dict["Name"] = "this is a test user" dict["Score"] = 5000 db.insert_row(tableName,dict) ننشئ في الكود أعلاه المتغيرين db و db_name بعد تحميل قاعدة البيانات، ونسند للثاني عنوان قاعدة البيانات "res://DataStore/database". ومن أجل تهيئة قاعدة البيانات، نستدعي التابع ()SQLite.new داخل الدالة ()ready ونسند قيمته إلى المتغير db، وسيُهيئ ذلك صنفًا لإعداد قاعدة البيانات. نحتاج بعد ذلك إلى ضبط مسار قاعدة البيانات كالتالي db.path= db_name ونضيف بعدها دالة جديدة تُدعى ()commiteDataToDB سنستخدمها ﻹيصال البيانات إلى قاعدة البيانات. ننشئ ضمن الدالة ()commiteDataToDB قناة اتصال مع قاعدة البيانات لهذا نستدعي التابع ()db.open_db الذي يهيئ قناة الاتصال مع قاعدة البيانات ويسمح لنا بتنفيذ استعلامات عليها. ولاختيار اسمٍ للجدول، نعرّف متغيرًا بالاسم tablename ونضبطه قيمته على "PlayerInfo". ثم ننشئ قاموسًا dict يحدد المعلومات التي نريد إدراجها في قاعدة البيانات، ويكون مفتاح القاموس بمثابة العمود والقيمة بمثابة الصف عند إضافة معلومات القاموس إلى قاعدة البيانات من خلال التعليمة INSERT. نستدعي أخيرًا الدالة (db.insert_row(tableName,dict ﻹضافة القاموس (الذي يمثل المُدخل الجديد) إلى قاعدة البيانات. قراءة البيانات من قاعدة البيانات كما هو الحال عند الكتابة إلى قاعدة البيانات، لا بد من فتح قناة اتصال مع قاعدة البيانات واختيار الجدول الذي نريد القراءة منه. ثم ننشئ بعد ذلك الاستعلام الذي نريد باستدعاء التابع ()db.query وكتابة تعليمات الاستعلام ضمنه كمعامل نصي. وبمجرد استدعاء هذا التابع سيتصل مع قاعدة البيانات وينفذ الاستعلام ويخزن النتيجة ضمن المصفوفة query_result. لا بد بعد ذلك من التنقل بين عناصر المصفوفة من العنصر 0 وصولًا إلى آخر عنصر الذي تمثله الخاصية size للمصفوفة query_result للحصول على الكائنات الموجودة في قاعدة البيانات، ومن ثم طباعة النتيجة. func readFromDB(): db.open_db() var tableName = "PlayerInfo" db.query("select * from " + tableName + ";") for i in range(0, db.query_result.size()): print("Qurey results ", db.query_result[i]["Name"], db.query_result[i]["Score"]) الخلاصة هذا هو اﻷمر برمّته! فقد تعلمنا في مقال اليوم طريقة إضافة البيانات إلى قاعدة بيانات ومن ثم تعاملنا معها. ولعللك لاحظت أن استخدام قواعد البيانات أسهل وأسرع من استخدام الملفات لتخزين البيانات في لعبتك الإلكترونية. وتسمح لك باسترجاع البيانات التي تحتاجها فقط بدلًا من قراءة الكثير من الملفات. وعندما ترى أن بياناتك أضخم من عدة ملفات، من الجيد عندها الانتقال إلى قاعدة بيانات. ترجمة وبتصرف للمقال: Setting up Godot to work with SQLite اقرأ أيضًا تعرف على أهمية صناعة الألعاب الإلكترونية مدخل إلى محرك الألعاب جودو تعرف على محرر محرك اﻷلعاب جودو Godot كيف ومتى نستخدم SQLite

تشير الإحصاءات إلى أنّ موظفًا من بين خمسة غير راضٍ عن عدد المرات التي يتبادل فيها الآراء مع مديره المباشر، وأن قرابة %30 من الموظفين يتمنون تجاوبًا أكبر من زملائهم! يُعَد التجاوب مع الموظفين وتبادل الآراء أمرًا شديد الأهمية لما له من أثر إيجابي على شعور الموظف بأنه جزء مهم من منظومة أكبر، فعندما يشعر الموظفون بأنهم جزء من الشركة، يزداد نشاطهم وحماسهم لتنفيذ رؤية الشركة وتمثّل قيمها. أيضًا، يُعَد تبادل الرأي جزءًا أساسيًا لتعزيز المشاركة في نشاط الشركة، فالتواصل المثمر هو ما يبني العلاقات الراسخة ويحافظ على المواهب والكفاءات ويوسع قاعدة العملاء ويحافظ عليها، ويرفع من قيمة العلامة التجارية للشركة. ما أهمية الاستماع لآراء الموظفين؟ لآراء الموظفين عندما تُقدّم بطريقة بنّاءة أهمية كبيرة لأنها: تمكّن التنمية المستدامة. تساعد في تحديد وإزالة العوائق في طريق الوصول إلى الأهداف. تقوي العلاقة بين الموظفين والمدير، وكذلك بين الموظفين أنفسهم. يشعر الموظفون بالدعم عند أداء واجباتهم. تساهم هذه الفوائد بمجملها في الانخراط الإيجابي للموظفين في نشاطات شركتهم، كما يُعدّ تبادل الآراء مع الموظفين مهمًا على مستوى الشركة ككل لما له من أثر على الموارد البشرية وعلى مؤشرات الأداء، مثل الاحتفاظ بالموظفين والروح المعنوية لهم، وثقافة الشركة، وبناء المهارات. لنلق نظرةً أقرب على هذه المؤشرات فيما يلي! زيادة قدرة الشركة على إبقاء الموظفين يزيد تبادل الآراء مع الموظفين من احتمال المحافظة عليهم ضمن قوام الشركة، إذ سيقدّر الموظف ذلك عندما تبدي رأيك بعمله إيجابًا أو سلبًا بطريقة صحّية، وقد يدفعهم ذلك إلى استثمار إمكاناتهم ووقتهم في تنمية أعمالك، كما قد يدفعهم حتى إلى رفض فرص عمل في شركات أخرى. يقدّر القادة في هذه الأيام الثمن المكلف لخسارة موظف واستبداله بآخر، وذلك في معركة استقطاب الكفاءات، فقد تخسر الشركة الآلاف عند كل عملية توظيف جديدة، وبالمقابل، تساهم المناصب الشاغرة أو المستبدلة في ضعف انخراط الموظفين في العمل بالشكل المطلوب. وعندما يضطر الموظف إلى تحمل أعباء أكبر في العمل، سيزيد الشعور بالإرهاق والسخط وترتفع مؤشرات ترك العمل وتدخل منظومة العمل في دائرة الخطر. ارتفاع الروح المعنوية للموظفين ترفع ردود الفعل الإيجابية التي يبديها المدير الروح المعنوية للموظف، فعندما يعرف أنّه أدى عملًا ممتازًا، فسيشعر غالبًا براحة نفسية وضغوطات أقل؛ كما سينعكس تعزيز الروح المعنوية للموظف إيجابًا على عائدات الاستثمار، فالموظفون السعداء أكثر إنتاجًا ومشاركةً في العمل. بناء ثقافة إيجابية للشركة ستساهم ثقافة العمل الإيجابية التي تسود الفريق في رفع مستويات أدائه وكفائته، وستجد موظفيك بلا شك مقتنعين بوظائفهم. يتطلب بناء جو العمل الإيجابي الكثير من الثقة والنزاهة، ويساعد إيجاد طريقة فعّالة لتبادل الآراء وتقييم العمل في بناء ثقافة عمل يزدهر فيها موظفوك. اطلع بمساعدة فريقك على آراء موظفيك حول ما يساعدهم في تمثّل القيم الجوهرية للشركة، لأنّ ردودهم قد تساعد في تطوير سير العمل وسياسات الشركة. بناء يد العمل الماهرة يساعد التعلم المستمر الموظفين على تطوير مسيرتهم المهنية (وهذا مؤشر مهم على الانخراط في العمل والمحافظة على اليد العاملة). كما تساعد البرامج التدريبية على تحسين الأداء الكلي للشركة، لأنّ رفع المهارات يدفع قدرات موظفيك وإبداعهم إلى الأمام، وستكون النتيجة خدمات أكثر وتطوير منتجات أكثر وكسب المزيد من الأرباح. ادعم مبادرات التعلم والتطوير بردود أفعال وآراء قابلة للتطبيق، فإن لم يتعلم موظفوك شيئًا جديدًا ولم يستفيدوا من البرامج التدريبية، فما الغاية منها أصلًا! ماهي فوائد تبادل الآراء مع الموظفين تظهر فائدة تبادل الآراء في توضيح ما هو متوقع ويساعد الموظفين على التعلم من أخطائهم، لكن طريقة إنجاز الأمر ليست سهلة، وفوق كل ذلك لا بدّ من الموضوعية واحترام آراء الآخرين لتعم فائدة النقاش. إبداء الرأي أو تقييم عمل موظف يدفع إبداء رأيك بموظفيك إلى زيادة ثقتهم في أدائهم والتزامهم بإظهار سلوك إيجابي، فعندما توجههم ليدركوا مهاراتهم ونقاط قوتهم، ستعزز مكانتهم في بيئة العمل، وهذا هو مفتاح النجاح. يساعد تقييم موظفيك وإبداء رأيك بما ينجزون على تطوير المسيرة المهنية لكل يد عاملة في الشركة. يشير مقال كتبه "Netsuite’s Barnyard" إلى أنّ معظم الذين ينتمون إلى الجيل الجديد (10-25 عامًا) تكيفوا مع إصدار أحكام سريعة، وبالتالي يمكن للمديرين تحاشي إصدار آراء متسرعة وغامضة مباشرة بعد انتهاء مشروع وتأجيلها حتى المراجعة التالية للأداء. باستخدام التقنيات والموارد المناسبة، يمكن التأسيس لثقافة تبادل آراء محورها الموظفون كي يستطيعوا تبادل الآراء بحرية مع زملائهم ومديرهم. الحصول على آراء الموظفين إنّ الاستماع إلى آراء وردود فعل الموظفين هي الطريقة الأسرع لتحسين قدراتك القيادية. فعندما تأخذ وقتك في سماع آراءٍ بناءة من موظفيك، ستلمّ أكثر بما يجري في شركتك على جميع المستويات وستكون قادرًا على اتخاذ قرارات واعية؛ كما أنها ستحل الخلافات التي قد تقع في بيئة العمل قبل وقوعها حتى. بصفتك مدير، عليك مدير أن تقود النقاش الصحيح في بيئة العمل. وعندما تقع النزاعات، استفد من الآراء التي جمعتها لدعم النقاش، ولا تجادل أو تتحيز إلى أي طرف؛ فعندما يفهم الموظف كيفية إبداء الرأي بشكل مؤثر، ستتعزز ثقافة عرض الاختلافات والتعامل معها مباشرةً مهما كانت حساسة، فالصراحة في التواصل هي المفتاح لعلاقات عمل هادئة. أنواع التقييمات أو الآراء الموجهة للموظفين هنالك ثلاثة أنواع رئيسية من التقييمات والآراء الموجهة للموظفين، تتمثل في الآتي. رد الفعل الإيجابي: تبرز هذه الردود نقاط القوة في موظفيك وتدل على إنجازاتهم. فالغاية منها هي تعزيز سلوك العمل الإيجابي لدى الموظفين كما قد تزيد من ثقتهم، مثل: رد فعل سلبي: تضيء هذه الردود على السلوك الذي يجب أن يتوقف كي لا يؤثر سلبًا على الأداء أو فريق العمل، مثل: ردود فعل بناءة: وتوجه إلى شخص محدد للإشارة إلى نقاط الضعف في أدائه تليها طريقة لتقويم الأمر. تفيد هذه الآراء في تقديم حالات أو أمثلة يمكن للموظف أن يتمثلها مع بعض النقد البناء، مثل: كيف تسأل الموظف عن رأيه؟ بعد أن عرضنا فوائد تبادل الآراء وتوجيه رسائل مختلفة للموظفين، علينا استيعاب موضوع لا يقل أهمية عن ذلك ويتعلق بطريقة جمع آراء وإفادات الموظفين بالشكل الصحيح. اطلب رأي فريقك عندما تطلب رأيًا، اجعل جوابه مفتوحًا؛ كأن تسأل فريقك "كيف يمكن أن أحسّن اللقاءات الأسبوعية للفريق؟"، أو حاول أن تسأل أسئلةً محددةً من قبيل "هل تريد أن أساعدك في إعداد تقرير المبيعات الشهري؟". اطلب الآراء بانتظام لا يجد الناس صعوبةً في تبادل الآراء نظرًا لافتقارهم إلى الخبرة، بل لعدم تكرار الأمر، لذا لا تنتظر الوقت المحدد لمناقشة الأداء حتى تستمتع إلى الآراء وتجمّع ردود الأفعال، بل كن سباقًا وتحقق من ردود أفعال من حولك، خاصةً عندما تصل إلى منعطف مهم أو في منتصف مشروع ضخم. يساعد التحقق المستمر على الإجابة بسرعة قبل أن يغدو الأمر أكثر تعقيدًا، كما يعزز الحصول المستمر على الآراء انفتاحًا أوسع ويوطد أكثر علاقات العمل. لا تنس عبارة الشكر بعد أن تتلقى التقييم قد يكون من الصعب في بعض الأحيان أن تتلقى تقييمًا لك، وخاصةً في ما يتعلق بالنقد البناء، مع ذلك فكرّ بالأمر دائمًا على أنه لصالحك؛ وكما تعلم، إبداء رأي صريح ليس أمرًا سهلًا، لذلك عليك أن تقدّر هذه الآراء عند وصولها. حلقة تبادل الآراء مع الموظفين فعّل منظومة تبادل الآراء من خلال حلقات العمل المتتالية، إذ عليك إدراج النقاط التي نوقشت في آخر تقييم لطاقمك واستدركها في اللقاء التالي. تذكر أن تبقى موضوعيًا إن أردت تأسيس حلقة تبادل آراء مع موظفيك، وتدرب على الاستماع الفعّال لتأخذ صورة كاملة عن الموضوع. قابل موظفيك شخصيًا ليكون تبادل الرأي ذا صبغة خاصة وشفافًا، إذ سيساعدك هذا -حتى لو كان افتراضيًا-، فسيساعدك في توضيح نقاط وملاحظات الاختلاف، والتي لا يمكن فعلها عن طريق البريد الإلكتروني أو المحادثة الكتابية. ما الفرق الذي يحدثه تبادل الآراء مع الموظفين؟ تنبع أهمية تبادل الآراء من منطلق تأثيرها المباشر على تقرير المديرين والعلاقات وعلى الشركة عمومًا. ولا بد من معرفة فوائد تبادل الآراء وأنواع ردود الفعل على سلوكهم المهني ومتى ينبغي إبداء الرأي أو ردة الفعل إن قررت أن تنشئ منظومةً ناجحةً لتبادل الآراء في شركتك. إسأل أخيرًا موظفيك عن آرائهم، وكوّن حلقات لتبادل الآراء في مكانها الصحيح لأنها أمور حاسمة لتأسيس علاقات عمل جيدة مع طاقمك وحيويّة لنجاح شركتك. ترجمة -وبتصرف- للمقال Importance of employee feedback لصاحبته Rachel Steben. اقرأ أيضًا الدليل الشامل للمديرين حول كيفية إعطاء الملاحظات للموظفين كيف تمنح الموظفين التقييم السلبي دون أن تثبط اندفاعهم مجموعة أفكار فعالة لتحسين مشاركة الموظفين والتواصل معهم ما يتوقعه الموظفون من المديرين وفقا لآراء الموظفين

نتحدث في هذا المقال عن بعض المشاكل التي يتعرض لها مستخدمو محرك الألعاب جودو Godot 4 عند محاولة العمل على عتاد لا يدعمه محرّك اﻷلعاب. فإن كنت تعمل على أجهزة حواسيب مصنّعة قبل عام 2013، فقد لا تملك برامج تشغيل العتاد Vulkan حيث تدعم هذه الأجهزة OpenGL 3.0 فقط من أجل عرض الرسومات ثلاثية الأبعاد على حاسوبك. وبالتالي إذا حاولت تشغيل محرك الألعاب جودو 4 ضمن بيئة عمل وهمية VirtualBox، ففي هذه الحالة قد تصادفك بعض العقبات. وسنوضح لك في هذا المقال طريقة للالتفاف على تلك المشاكل والعقبات وسبل حلها، فإذا كانت لديك أي مشكلات في التعامل مع إقلاع محرك ألعاب جودو 4 على جهازك تابع معنا قراءة هذا المقال. أين تكمن المشكلة في جودو 4؟ لنفترض أن ثبّت محرك ألعاب جودو 4 وأنت متحمس بالفعل لبدء العمل على صناعة لعبتك الإلكترونية، ثم نقرت نقرة مزدوجة على أيقونة البرنامج، وفوجئت بطهور رسالة خطأ تخبرك بفشل تهيئة برنامج تشغيل بطاقة الفيديو لديك لأنها لا تدعم Vulkan أو OpenGL كما هو موضح في الصورة التالية: لحل هذه المشكلة أمامك خيارات سنشرحهمها في الفقرات التالية. تحديث برامج تشغيل العتاد أو الالتفاف على الموضوع لديك اﻵن خياران، الأول هو أن تحدّث برنامج تشغيل بطاقة الفيديو لديك من خلال التوجه إلى موقع الويب الخاص بمصنع بطاقة العرض لديك، ومن ثم تنزيل وتثبيت آخر إصدار لهذه البطاقة. وفي حال لم يكن الخيار الأول متاحًا لديك، يمكن في هذه الحالة فتح محرر سطر اﻷوامر Command prompt أو الطرفية على جهازك ثم تكتب الأمر Godot، بعدها ابحث عن الملف التنفيذي للمحرك جودو، ثم شغله بعد إضافة الوسيط التالي لأمر التشغيل كما يلي: >Godot_v4.2.1-beta3_mono_win64.exe --rendering-drive opengl3 كما هو هو مبين في الشاشة التالية: ستعمل هذه الحيلة في أغلب اﻷحيان وسيُحمّل برنامج جودو ويعمل بشكل صحيح على جهازك. حل مشكلة النقر على زر التشغيل Play قد يبدو كل شيء على ما يرام حتى الآن، لكن قد تفاجئ بعد أن تنقر على زر التشغيل، بظهور رسالة الخطأ نفسها من جديد. لا تقلق يمكنك أيضًا إصلاح هذا الأمر من خلال الانتقال إلى القائمة مشروع Project ثم اختيار إعدادات المشروع Project Settings وبعدها ثم بتفعيل الخيار إعدادات متقدمة Advanced Settings كما في الصورة التالية. بعد أن تظهر لك النافذة أعلاه انتقل ذلك إلى قسم المحرر Editor ثم اختر الخيار تشغيل Run ثم اجعل قيمة المتغير Main Run Arguments كما يلي: rendering-drive opengl3-- وانقر بعد ذلك على زر إغلاق Close ومن المفترض أن يعمل زر التشغيل بشكل صحيح ودون أي مشكلات. خطوات إضافية للعمل على VitrualBox أو على جهاز محدد إن كنت تعمل على الجهاز الافتراضي VirtualBox، أو لم تنجح الخطوات السابقة لحل المشكلة، عليك في هذه الحالة اتباع بعض الخطوات الإضافية. انتقل إلى المتصفح وحمّل برامج تشغيل العتاد Mesa dist Windows في حال كان نظام تشغيل حاسوبك هو ويندوز Windows، أما إن كنت تعمل على إحدى توزيعات نظام التشغيل لينكس Linux فلن تحتاج إلى ذلك. حمّل اﻹصدار MingW من برنامج تشغيل العتاد Mesa وبرنامج ضغط الملفات 7-Zip الذي سوف تحتاجه لاستخراج ملفات برنامج تشغيل العتاد. عند اكتمال عملية التنزيل انتقل إلى مجلّد تنزيلات downloads، ثم استخرج الملفات باستخدام البرنامج 7-zip ثم افتح المجلد الناتج وشغّل الملف System Wide Deploy الذي سيخبرك بأنه سيثبّت برامج تشغيل العتاد OpenGL الخاص بالحواسب المكتبية. اختبار برامج تشغيل العتاد عليك تاليًا اختبار كلا برنامجي تشغيل العتاد OpenGL الخاص بسطح المكتب، ومايكروسوفت OpenGL على DirectX 3D12. سيعمل برامج تشغيل العتاد الأول على المعالج المركزي CPU وسيحاول الثاني العمل على المعالج الرسومي GPU. تشغيل جودو 4 عد مجددًا إلى محرر سطر اﻷوامر واكتب الأمر التالي: Godot –rendering-driver opengl3 ويجب أن يعمل جودو كما هو مطلوب، وتذكر أن ما فعلناه هنا هو الالتفاف حول المشكلة، فلا تتوقع أداءً استثنائيًا! لكن على اﻷقل ستشغّل محرك ألعاب جودو 4 بصورة صحيحة. أما إن كنت تعمل على توزيعة لينكس منت Mint، فلن تحتاج لعملية الالتفاف تلك، وسيعمل جودو حتى على العتاد غير المدعوم لأن برنامج تشغيل العتاد Mesa مضمّن معه. الخلاصة قد يكون تشغيل محرك الألعاب جودو 4 على عتاد لا يدعمه أمرًا صعبًا على مطور الألعاب الإلكترونية، لكن حل هذه المشكلة ليس مستحيلًا! كل ما عليك هو تجربة الخطوات التي شرحناها في المقال وتستأنف العمل على جودو، وإن واجهتك أي مشكلة في التعامل مع محرك الألعاب جودو لا تتردد في طرحها في قسم التعليقات أسفل المقال لنساعدك على حلها. ترجمة -وبتصرف- للمقال Making Godot 4 work on (some)unsupported hardware اقرأ أيضّا مدخل إلى محرك الألعاب جودو Godot تعرف على محرر محرك اﻷلعاب جودو Godot تعرف على أشهر محركات الألعاب Game Engines

يبدي مجال التجارة الإلكترونية تنافسيةً واضحةً في هذه الفترة، لهذا لابد من تطوير استراتيجية عصرية لتسويق علامتك التجارية كي تبرز عن بقية منافسيك. إذ في حال لم تُعِر انتباهًا كافيًا لأهمية علامتك التجارية، فسيغدو متجرك الإلكتروني نسخةً عن بقية المتاجر الأخرى؛ بينما سيمنح التسويق الجيد لعلامتك الخاصة متجرك هويةً فريدةً ويساعدك على بناء حلقة مستقرة من المتابعين مقارنةً ببقية منافسيك. وبالطبع ستكمن صعوبة الأمر في التطبيق. يُعَد الترويج لعلامة تجارية من أصعب نواحي إدارة الأعمال والتسويق. ونظرًا لتوجّه العملاء افتراضيًا إلى التسوق الإلكتروني مقارنةً بالتقليدي في أيامنا هذه، فلا بد أن تُعزز المتاجر الإلكترونية وجودها من خلال إرساء علامات تجارية قوية وفريدة وإيصال الرسائل المناسبة. سيقودك هذا الدليل عبر عملية ربط متجرك بعلامة تجارية إلكترونية خطوةً بخطوة، وسيمنحك الأساس اللازم لتكوين علامة ناجحة. 1. سوّق للمنتجات التي تثق بها لن يكون من السهل تطوير رؤية واثقة وفعّالة لعلامة تجارية ما لم تكن مقتنعًا ومتحمّسًا للمنتجات التي تبيعها. لهذا من الضروري عندما تخطط لإطلاق علامتك التجارية الإلكترونية أن تفكّر مليًا بما ستبيعه وكيف. وتأكد أن زوار وعملاء متجرك سيشعرون بك عندما لا تكون متحمسًا للمنتجات التي تسوقها، وعندما ينتابهم هذا الشعور، سيحجمون غالبًا عن الشراء. إنّ أهمية تقييم إمكانية تصريف المنتجات توازي في الأهمية فكرة ثقتك بما تسوّق؛ فلا يمكنك حرفيًا أن تطلق متجرًا إلكترونيًا لتبيع ما لا يريده أحد. لن يؤثر ذلك سلبًا على قدراتك المالية، بل سيجعل تجربتك مكلفةً وبلا جدوى، ولهذا السبب لا بد أن تكون منتجاتك مناسبةً لك وللسوق الذي تخطط للتوجه إليه، سواءً بعت منتجات من تصميمك أو اختراعك، أم سوّقت لمنتجات مزوّد آخر، وهنا عليك أن تتأكد من قدرتك على الوثوق بجميع الأطراف التي تعتمد عليها. مغزى الكلام، أنه لا بد من تفحّص سلسلة التوريد التي تزوّدك بالمنتجات بعناية، بغية التأكد من جودتها ابتداءً بمرحلة التصنيع وصولًا إلى يد المستهلك. 2. حدد السوق الذي تستهدفه إنّ أهمية تحديد الفئة التي تستهدفها لعرض منتجاتك لا تقل أهميةً عن فهمك لطبيعة المنتجات التي تبيعها، فالأسواق المختلفة تتطلب مقاربات تسويقية مختلفة، وستخفق في تحقيق الأثر المطلوب إن لم تدرك تمامًا في مقاربتك الخصائص المميزة للسوق المستهدف وسماته؛ فكلما جمعت معلومات أكثر عن الفئة المستهدفة، ستركّز بفعالية أكبر على طريقة التسويق التي تتبناها. لبعض المنتجات سوق واضح خاص بها، فهناك مثلًا منتجات قد تكون خاصة بالرجال وأخرى بالنساء، لكن الأمر ليس بهذا الوضوح دائمًا. إن كانت منتجاتك متاحةً في سوق واسع التنوع، فمن الأفضل أن توجّه نشاطك التسويقي وعلامتك التجارية لتختص بفئة محددة من العملاء، وستكون هذه المقاربة شديدة الأثر لأنها تضعك في مركز السوق الذي تلبي متطلباته. يسعى بعض المسوقين الإلكترونيين في البداية إلى بيع منتجاتهم إلى أوسع شريحة ممكنة من العملاء، ثم يجرون بعد ذلك بعض الأبحاث ليحددوا الفئة التي يبيعونها. وبصرف النظر عن الطريقة التي تحدد بها الشريحة التي تستهدفها من العملاء، عليك أن تركز على الميزات الخاصة لهذه الشريحة بمجرد أن تكوّن فكرة كاملة عن تكوينها. ونقولها مجددًا: كلما عرفت أكثر، سهل عليك عملك. من أهم المعايير التي ينبغي الانتباه لها في الفئة المستهدفة ستجد العمر والجنس ومعدّل الدخل. ستحدد هذه المعايير الثلاثة أكثر من غيرها أشكال التسويق التي يستجيب لها العملاء، ونوع المنتجات التي يُرجَّح أن يشتروها. وحالما تتفهم هذه المعايير، ستتمكن من البحث بعمق عن ميزات أخرى لهذه الفئة، مثل القيم التي يؤمنون بها واهتماماتهم والأمور التي تُعَد مصدر إلهام لهم. ستساعدك هذه السمات على توجيه علامتك التجارية التي تختارها لمتجرك الإلكتروني بدقة أكبر. 3. أبدع الأفكار الجديدة عندما تقرر طبيعة المنتجات التي تسوق لها وكيف ستبيعها، يمكن أن تبدأ عملك بثقة. يجد الكثير من المهتمين في هذا المجال أنّ تحديد الفئة المستهدفة والتحقق من سلامة السلسلة التي تسلكها المنتجات أمرًا مرهقًا، لكنه ضروري. عندما تنهي الخطوات السابقة، ستكون مستعدًا لما يُدعى بالتفكير الإبداعي والترويج بالطريقة الأكثر فاعلية لبيع منتجاتك إلى السوق المستهدف. وتُعَد لوحة تجميع الأفكار mood board بمثابة الخطوة المنهجية الأولى للانطلاق في عملية الترويج. وهذه اللوحة هي بشكلها الأساسي مجموعة من الملصقات التي تعرض طبيعة الأفكار والعناصر التي تريد دمجها في علامتك التجارية، علمًا أنّ التصميمات الرقمية للّوحة كثيرة الاستخدام هذه الأيام. تساعد لوحة تجميع الأفكار على البحث عن مصادر إلهام دون أن تضطر لاعتماد أي منها في خلق علامتك الفريدة، بعدها عليك أن تستقي من اللوحة عند اكتمالها شيئًا فريدًا وخاصًا بمتجرك الإلكتروني، لكن ما عليك فعله الآن هو تجميع الأفكار لكي تستخدمها لاحقًا. قد تجد فائدةً في تصميم عدة لوحات لتجميع الأفكار، فالأولى مثلًا تضم جميع العناصر التي تحتاجها لعلامتك التجارية بشكلها النهائي، والثانية لتجميع العناصر التي تحتاجها لتحديد السوق المستهدف، وهكذا. تضم لوحة تجميع الأفكار الخاصة بالسوق المستهدف ما قد يناسب الفئة المستهدفة وليس ما يناسبك شخصيًا من أفكار وتصورات. 4. صمم شعار علامتك التجارية حالما تنتهي من لوحة تجميع الأفكار واثقًا من إدراكك لما ستفعله، سيكون تصميم شعار هو الخطوة التالية. قد يكون التصميم صورةً صغيرةً وبسيطةً ومعبّرةً دون الخوض في التعقيدات، ولا بد أن تضع في بالك كل الأشياء التي تعلمتها من المراحل السابقة. قد لا يتسع شعار واحد لكل الأفكار والمفاهيم التي تراها مهمةً في تعريف طبيعة عملك وتأسيس علامتك التجارية الفريدة، لكنك تستطيع بشيء من التفكير المتأني أن تدمج الكثير منها. إنّ اختيار الشعار هو الخطوة الأكثر تأثيرًا من خطوات الترويج لعلامة تجارية، ومن الضروري أن تنجزها بالشكل الصحيح. لا تخشَ وضع تصاميم مختلفة ومن ثم تختار من كل تصميم ما تراه مميزًا ليكون جزءًا من التصميم النهائي. وإن رأيت بأنك لن تستطيع أن تصمم بنفسك شعارًا مؤثرًا، فلا تتردد باستشارة مختصين في هذا المجال. وإذا لاحظت، حتى الشركات الضخمة مستعدة لإنفاق ملايين الدولارات في تصميم شعارات قد لا تبدو للعين غير الخبيرة معقدة أبدًا. بالرغم من أنه حتى أبسط الشعارات في واقع الأمر هي نتيجة لعدد هائل من المداولات والتقييمات. 5. صمم موقع ويب متميز سيكون لموقع الويب الذي تصممه وقع خاص على الطريقة التي يتقبل بها الناس العلامة التجارية لموقعك، إذ ينبغي أن يكون شعار المتجر دائمًا في مقدمة موقعك ويشغل مركز الصفحة وأن يكون مرئيًا دائمًا دون أن يزعج الزوّار. تذكر أن الغاية الرئيسية من تأسيس علامة تجارية هو التميز عن منافسيك، فإن كان موقعك نسخةً عن متجر إلكتروني آخر أو كان له مظهرًا نمطيًا شائعًا، فسيقل الاهتمام بعلامتك التجارية أو ستخسرها إلى الأبد. إن لم تكن واثقًا من قدرتك على بناء موقع ويب بنفسك، يمكنك البحث في العديد من المنصات التجارية الإلكترونية التي تتيح لك إمكانية إنشاء متجر دون أي معرفة مسبقة بكتابة الشيفرات وتصميم المواقع. وسواءً اخترت تصميم موقعك بنفسك أو من خلال منصات التجارة الإلكترونية، لا بد من تصميمه بما يتلاءم مع خصائص العلامة التجارية لمتجرك، وتذكر أنّ العلامة التجارية أكثر من مجرد مفهوم بصري وأنّ الشعار جزء هام جدًا منها، لكنه يبقى جزءًا فقط. لا بد أيضًا من تنسيق الكلمات التي تتقدم بها إلى جمهورك وطريقة عرض منتجاتك بما يتلائم مع علامتك التجارية، فلا تقلل أبدًا من التأثير الكبير الذي قد تحدثه العلامة التجارية على نجاح متجرك الإلكتروني. تذكر دائمًا أن المتاجر التي لا يستغرق التخطيط لإطلاقها وتحديد مزاياها وعلامتها التجارية الوقت الكافي ستختفي بسرعة. لهذا ميّز نفسك عن منافسيك بإبداعك علامة تجارية قوية ومستقلة. ترجمة -وبتصرف- للمقال E-Commerce Store Branding- A step-by-step Guide. اقرأ أيضًا الخطوات الابتدائية لإنشاء متجرك الإلكتروني: عنوان المتجر وحجز النطاق (Domain) العلامة التجارية وأهميتها في قرار الشراء - مكونات العلامة التجارية كيفية تأسيس علامة تجارية وأساسيات تسويقها

تحدثنا في مقال سابق عن التنسيقات الأساسية للنصوص وخطوط الكتابة في CSS، وسنتعمق في مقالنا هذا في استكشاف خطوط الكتابة المستخدمة في الويب وتفاصيلها، وكيفية استخدام خطوط مخصصة في صفحاتك لتجعلها أكثر تنوعًا وخصوصية. ننصحك قبل إكمال قراءة المقال أن تطلع على أساسيات لغة HTML ومقال التنسيقات الأساسية للنصوص وخطوط الكتابة في CSS. مراجعة سريعة لعائلات خطوط الكتابة يمكن التحكم بالخط المستخدم في كتابة محتوى HTML باستخدام الخاصية font-family التي تأخذ اسم عائلة خط واحد أو أكثر كقيم لها. وبهذا يبحث المتصفح عند عرض صفحة الويب ضمن قائمة الخطوط المتوفرة في نظام التشغيل حتى يجد العائلة المطلوبة: p { font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif; } تعمل هذه الطريقة دون مشاكل، لكن خيارات المطورين محدودة عادةً؛ فهنالك عدد محدود جدًا من الخطوط التي يمكن أن تضمن وجودها في جميع أنظمة التشغيل والتي تُعرف بخطوط الويب الآمنة. لهذا بإمكانك وضع قائمة من الخطوط التي تشاء تتبعها بالبدائل الآمنة ومن ثم الخط الافتراضي لنظام التشغيل، لكن سيزيد ذلك طبعًا حمل العمل نظرًا للاختبارات المطلوبة للتأكد من عمل تصميمك وفقًا لكل خط تضعه. خطوط الويب هناك بديلٌ يعمل جيدًا ويعتمد على CSS التي تسمح بتخصيص ملفات لخطوط كتابة تجدها على الويب، بحيث يمكنك تنزيلها واستخدامها مع موقعك، ويعني ذلك أن جميع المتصفحات التي تدعم ميزة CSS هذه ستعرض المحتوى بالخط الذي اخترته تمامًا. نستخدم أولًا الخاصية @font-face في بداية ملف CSS، وتحدد ملف أو ملفات الخطوط التي ينبغي تنزيلها: @font-face { font-family: "myFont"; src: url("myFont.woff2"); } ثم نستخدم بعد ذلك اسم عائلة الخط التي خصصناها ضمن font-face@ كي نطبق الخط المخصص أينما نشاء وبالطريقة التقليدية: html { font-family: "myFont", "Bitstream Vera Serif", serif; } قد تغدو هذه الطريقة أعقد قليلًا، وهذا ما سنناقشه تاليًا. إليك بعض النقاط المهمة التي ينبغي تذكرها جيدًا: لا تكون ملفات الخطوط مجانية غالبًا، وعليك أن تدفع ثمنها أو أن تخضع لشروط رخصة الاستخدام كأن تشير إلى صاحب الخط في شيفرتك أو موقعك، لهذا لا تحاول سرقة الخطوط واستخدامها دون الإشارة الواضحة إلى مصدرها. تدعم كل المتصفحات الرئيسية ملفات الخطوط من نوع WOFF/WOFF2 (خطوط ويب مفتوحة التنسيق بنسختيها الأولى والثانية)، وتدعم كذلك المتصفحات الأقدم مثل IE9 (المنتشر منذ عام 20111) ملفات الخطوط WOFF. تدعم خطوط WOFF2 مواصفات TrueType و OpenType كاملةً بما في ذلك الخطوط المتغيرة variable fonts والخطوط الملونة chromatic fonts ومجموعات الخطوط font collections. طريقة ترتيب ملفات الخطوط مهمة، فلو زوّدت المتصفح بعدة ملفات للخطوط كي ينزّلها، سيختار المتصفح أول ملف قادر على تفسيره، لهذا لا بُد من وضع الخطوط التنسيقات المفضّلة في البداية -أي WOFF2- تليها التنسيقات الأقدم. فعندما لا يفهم المتصفح تنسيقًا، سينتقل إلى التنسيق الذي يليه في القائمة. إذا أردت العمل مع المتصفحات القديمة، عليك تضمين التنسيق EOT (النمط المفتوح المضمّن Embedded Opentype) أو التنسيق TrueType Font -أو اختصارًا TTF- أو تنسيق SVG. وسنتعلم في هذا المقال استخدام Fontsquirrel Webfont Generator للحصول على الملفات المطلوبة. ملاحظة يمكنك استخدام محرّر خطوط فايرفوكس Firefox Font Editor لفحص وتغيير الخطوط المستخدمة في صفحتك فيما ومعرفة إن كانت خطوط ويب صالحة أم لا. تطبيق عملي: مثال عن استخدام خطوط ويب سنحاول بناء مثال توضيحي عن استخدام خطوط ويب. من الصعب طبعًا توضيح ذلك من خلال مثال تفاعلي مدمج، لهذا نطلب منك اتباع الخطوات التي نوردها تاليًا كي تفهم فكرة العملية. حمّل الملفين web-font-start.html و web-font-start.css واستخدمهما بمثابة نقطة انطلاق، ثم ضِف شيفرتك ضمنها (اطلع على المثال المباشر). انسخ الملفين السابقين إلى مجلد جديد على حاسوبك. ستجد في الملف بعض قواعد CSS التي تنسّق التخطيط الأساسي وتنسيق الكتابة في المثال. إيجاد خطوط للكتابة نستخدم في مثالنا خطين من خطوط الويب، أولهما للعناوين والآخر لمتن الصفحة، وعلينا بدايةً إيجاد الملفات التي تضم هذه الخطوط. تُصنع الخطوط من قبل مختصين وتُخزّن ضمن ملفات بتنسيقات مختلفة، وستجد الخطوط ضمن المواقع التالية عمومًا: موزعي الخطوط المجانية: وهي مواقع تتيح للمستخدمين تنزيل خطوط مجانية (مع وجود بعض شروط لترخيص الاستخدام أحيانًا، كأن تشير إلى مصمم الخط). من هذه المواقع نجد: Font Squirrel, [dafont و Everything Fonts. موزعي الخطوط المدفوعة: وهي مواقع تقدم خطوطًا مدفوعة الثمن مثل fonts.com أو myfonts.com ، ويمكنك أيضًا شراء الخطوط من منتجيها مباشرةً، مثل Linotype، أو Monotype، أو Exljbris. خدمات خطوط الكتابة عبر الإنترنت: وهي مواقع تخزّن الخطوط وتسمح لك باستخدامها، مما يسهل العملية برمتها. ابحث الآن عن بعض الخطوط في موقع Font Squirrel وانتقي خطين الأول للعناوين (لا بأس بالخطين nice display أو slab serif font) والآخر أقل لمعانًا وأوضح قراءةً للفقرات. انقر على زر التنزيل عندما تجد الخطوط المناسبة وخزّن الملفات ضمن المجلد نفسه الذي وضعت فيه ملفات الشيفرة. لا تكترث إذا كانت الملفات بتنسيق TTF أو تنسيق Open Type Fonts -أو اختصارًا OTF. فُكَّ ضغط الملفات من حزمتي الخطوط، إذ توزّع ملفات الخطوط عادةً مثل ملفات مضغوطة ZIP تضم ملفات الخطوط ومعلومات الترخيص. وقد تجد ضمن الحزمة أكثر من خط، إذ توزّع بعض الخطوط مثل عائلة واحدة مع عدة توزيعات، مثل الخط الرفيع أو النحيف thin والمتوسط medium والغامق bold والمائل italic والمائل النحيف thin italic وهكذا. ولا نريد منك في هذا التطبيق سوى اختيار خطين مناسبين. ملاحظة: يمكنك في موقع Font Squirrel أن تختار الخطوط من خلال الفئات المتوفرة تحت قسم "إيجاد الخطوط Find fonts" كي تقلل عدد الخيارات المتاحة. توليد الشيفرة المطلوبة نحتاج الآن إلى توليد الشيفرة اللازمة وتنسيقات الخط، لهذا اتبع التعليمات التالية لكل خط: تأكد من أنك حققت متطلبات الترخيص، إذا كنت ستستخدم الخط في مشروع تجاري أو مشروع ويب. انتقل إلى موّلد خطوط الويب Webfont Generator من Fontsquirrel. ارفع ملفات الخطوط باستخدام زر "Upload Fonts". فعّل زر التحقق الذي يحمل العنوان "Yes, the fonts I'm uploading are legally eligible for web embedding". انقر زر "Download your kit" لتنزّل مجموعتك. بعد إكمال المولّد معالجة الملفات، ينبغي أن تكون الملفات جاهزة للتنزيل بتنسيق ZIP، نزّلها في نفس مجلد CSS و HTML، وإذا أردت دعم المتصفحات القديمة، اختر النمط "خبير Expert" في موّلد خطوط ويب، ثم اختر التنسيقات SVG و EOT و TTF قبل تنزيل المجموعة. تحدد خدمات ويب التي تولّد الخطوط حجمًا محددًا للملفات، لهذا فكّر باستخدام أحد الأدوات التالية: sfnt2woff-zopfli للتحويل من ttf إلى woff. fontforge للتحويل من ttf إلى svg. batik ttf2svf للتحويل من ttf إلى svg. woff2 للتحويل من ttf إلى woff2. استخدام الشيفرة في مثالنا استخرج الملفات من الملف المضغوط الذي نزّلته، وستجد ضمن المجلد الناتج العناصر المفيدة التالية: نسختين من كل خط على شكل ملفين يحملان اللاحقتين woff. و woff2. ملف HTML تجريبي لكل خط. حمّل هذه الملفات في متصفحك لترى كيف سيبدو الخط في السياقات المختلفة. ملف تنسيق stylesheet.css يضم شيفرة font-face@ الموّلدة والتي تحتاجها. لاستخدام الخطوط في مثالك، اتبع الخطوات التالية: أعد تسمية المجلد المستخرج من الملف المضغوط باسم بسيط سهل التذكر مثل "fonts". افتح الملف "stylesheet.css" وانسخ القاعدة font-face@ إلى ملف التنسيق "web-font-start.css" الذي أنشأته، وتذكر أن تكون في أعلى الملف وقبل أي قاعدة CSS أخرى، إذ لا بد من إدراج الخطوط قبل أن تتمكن من استخدامها في موقعك. تشير كل دالة من الدوال ()url إلى ملف خط نريد إدراجه ضمن ملف CSS، ولا بد من التأكد من صحة المسار إلى ملف الخط المطلوب، لهذا أضِف العبارة /fonts قبل بداية كل مسار (عدّل ما تراه مناسبًا). يمكنك الآن استخدام هذه الخطوط مثل أي خط ويب آمن أو خط من خطوط نظام التشغيل. إليك مثالًا: @font-face { font-family: "zantrokeregular"; src: url("fonts/zantroke-webfont.woff2") format("woff2"), url("fonts/zantroke-webfont.woff") format("woff"); font-weight: normal; font-style: normal; } font-family: "zantrokeregular", serif; ينبغي أن ينتهي بك المطاف إلى صفحة تجريبية تعرض بعض الخطوط الجميلة، ولأن الخطوط المختلفة قد صُممت بقياسات مختلفة، قد يكون عليك تعديل حجمها والفراغات فيما بين الأحرف والكلمات. ملاحظة: إذا واجهتك أية مشاكل في تنفيذ الأمر بالشكل الصحيح، قارن بين نسختك مع ملفاتنا المكتملة web-font-finished.html و web-font-finished.css. كما يمكنك تحميل الشيفرة من غيت هب GitHub أو تشغيل المثال المنتهي مباشرةً. استخدام خدمات خطوط الكتابة عبر الإنترنت تخزّن خطوط الكتابة عبر الإنترنت خطوط الكتابة وتقدمها لك دون الحاجة إلى استخدام شيفرة font-face@ فكل ما يتطلبه الأمر عادةً هو إدراج سطر بسيط أو اثنين من الشيفرة ضمن موقعك حتى يعمل كل شيء على ما يرام. من الأمثلة على هذه الخدمات نجد Adobe Fonts و Cloud.typography. تعتمد معظم هذه الخدمات على مبدأ الاشتراك ما عدا Google Fonts فهو استثناء عنها كونه خدمة مجانية وخاصة لأعمال الاختبارات السريعة وكتابة الأمثلة التوضيحية Demos. من السهل استخدام معظم هذه الخدمات، لهذا لن نتحدث عنها مطوّلًا، بل سنلقي نظرة على خدمة Google Fonts كي تفهم الفكرة. استخدم لهذا الغرض الملفين "web-font-start.html" و "web-font-start.css" أيضًا بمثابة نقطة انطلاق. انتقل موقع Google Fonts. ابحث عن خط الكتابة الذي تفضله، أو استخدم المرشحات filters أعلى الصفحة لعرض أنواع الخطوط التي ترغب في انتقاء بعضها، ثم اختر خطين منها. لاختيار عائلة خط، انقر على زر العرض ثم انقر على الزر ⊕ إلى جانب الخط. عندما تختار عائلات الخطوط، انقر على زر عرض عائلات الخطوط المختارة "View your selected families" في أعلى يمين الصفحة. انسخ سطر HTML الذي يظهر على الشاشة ثم الصقه في ترويسة ملف HTML. ضعه فوق العنصر <link> الموجود أصلًا كي يجري إدراج الخط قبل أن تستخدمه بواسطة CSS. عليك الآن نسخ تصريحات CSS الموجودة ضمن ملف CSS كما تراه ملائمًا حتى تُطبّق الخط على عناصر HTML. ملاحظة: ستجد نسخةً مكتملةً على google-font.html و google-font.css إذا أردت التحقق من نسختك بالمقارنة مع نسختنا (ألق نظرةً على عملها). تفاصيل أكثر عن قاعدة font-face@ لنستكشف صياغة font-face@ التى ولّدها موقع Fontsquirrel، ستبدو إحدى مجموعات القواعد على النحو التالي: @font-face { font-family: "zantrokeregular"; src: url("zantroke-webfont.woff2") format("woff2"), url("zantroke-webfont.woff") format("woff"); font-weight: normal; font-style: normal; } لنرى ما هو دور كل تصريح: font-family: يُخصّص هذا التصريح لاختيار اسم مناسب يشير إلى الخط، وقد يكون أي شيء تريده طالما أنك تستخدمه بنفس الطريقة ضمن ملف CSS. src: يُخصص هذا التصريح لتحديد المسار إلى موقع ملف الخط الذي تريد إدراجه ضمن شيفرة CSS (الجزء url منه)، ولتحديد تنسيق ملف الخط (الجزء format منه)، أما الجزء الأخر في كل حالة فهو اختياري لكنه تصريح مفيد لأنه يسمح للمتصفحات أن تحدد بسرعة أي خط يمكنها استخدامه. يمكن أن نبني أيضًا قائمةً من التصريحات تفصل بينها الفاصلة ,، ومن المفيد ترتيب هذه التصريحات ابتداءً من التنسيق الأكثر تفضيلًا مثل WOFF2، لأن المتصفح سيحاول تطبيق التصريحات على نحوٍ متسلسل ابتداءً من التصريح الأول. font-weight/font-style: يخصص هذان التصريحان سماكة الخط إضافةً إلى كونه مائلًا أو لا؛ فإذا أدرجت عدة سماكات للخط نفسه، يمكنك حينها تخصيص سماكة ونمط محددين ثم استخدام الخاصيتين font-weight/font-style للتبديل بين السماكات والأنماط المختلفة الأخرى. ملاحظة: يمكنك تخصيص قيم محددة للخاصيتين font-variant و font-stretch من أجل خطوط الويب، كما يمكنك -في المتصفحات الحديثة- تخصيص قيمة للخاصية unicode-range وهي مجال محدد من المحارف التي ترغب في استخدامها خارج مجموعة محارف خط الويب وذلك في المتصفحات التي تدعم ذلك، وستُنزّل حينها هذه المحارف فقط تحاشيًا لتنزيل ما لا حاجة له. الخطوط المتغيرة توجد تقنية جديدة للخطوط تدعمها المتصفحات وتُدعى الخطوط المتغيرة variable fonts، وهي خطوط تسمح بتشارك عدة توزيعات لواجهة خط الكتابة في ملف واحد بدلًا من وجود ملف مستقل لكل اتساع أو سماكة أو نمط. هذا الموضوع متقدم ولن نناقشه في مقالنا. الخلاصة بهذا المقال نكون قد أنهينا سلسلة المقالات التي تتعلق بأساسيات تنسيق النصوص باستخدام CSS. لا تتردد في المشاركة وطرح الأسئلة حول النقاط التي تعتقد أنها غامضة في قسم التعليقات أسفل كل مقال من مقالات السلسلة. ترجمة -وبتصرف- لمقال Web fonts. اقرأ المزيد المقال السابق تنسيق الروابط باستخدام CSS. تنسيق نصوص صفحات الويب باستخدام CSS. التنسيقات الأساسية للعناصر في CSS. أساسيات لغة CSS.

نناقش في هذا المقال طريقة تنسيق الروابط في لغة CSS ونعرفك على طرق مختلفة لتحسين مظهرها على موقع الويب الخاص بك، ونعرفك على الحالات المختلفة للروابط وطريقة تنسيقها بفعالية أكبر بالاستفادة من آلية استخدام الأصناف الزائفة pseudo classes في CSS، ونناقش تنسيق الروابط في المواضع المألوفة المختلفة مثل روابط قوائم التنقل، والتبويبات الفرعية tabs. ننصحك قبل إكمال قراءة المقال أن تطلع على أساسيات لغة HTML ومقال التنسيقات الأساسية للنصوص وخطوط الكتابة في CSS. لنلق نظرة على بعض الروابط التشعبية اطلعنا في مقال سابق على أفضل الطرق المتبعة في إنشاء وإضافة الروابط التشعبية إلى صفحات HTML، وسنتابع في هذا المقال استعراض أفضل الممارسات المتبعة في تنسيق هذه الروابط. حالة الرابط لا بد قبل كل شيء من فهم مصطلح "حالة الرابط link state" والذي يدل على الحالات المختلفة التي يكون عليها الرابط. إذ يجري تنسيق الرابط وفقًا لحالته باستخدام الأصناف الزائفة: حالة الرابط Link: وهي الحالة التي يكون فيها للرابط وجهة (وليس مجرد مربط anchor باسم محدد). تُنسّق هذه الحالة من خلال الصنف الزائف link:. حالة رابط جرت زيارته Visited: وهي الحالة التي نُقر فيها على الرابط وخزّن ذلك في ذاكرة المتصفح. تُنسّق هذه الحالة باستخدام الصنف الزائف visited:. حالة رابط عند مرور مؤشر الفأرة Hover: تُنسّق هذه الحالة باستخدام الصنف الزائف hover:. إضافة أيقونات إلى الروابط حالة تركيز الدخول إلى الرابط Focus: وذلك من خلال الانتقال إليه عبر الضغط المتكرر على زر Tab في لوحة المفاتيح أو برمجيًا باستخدام ()HTMLElement.focus وتُنسّق هذه الحالة باستخدام الصنف الزائف focus:. حالة الرابط الفعّال Active: وهي الحالة التي يُنقر فيها على الرابط وتُنسّق باستخدام الصنف الزائف :active. التنسيقات الافتراضية يعرض المثال التالي الطريقة التي يبدو عليها الرابط وطريقة سلوكه الافتراضي، إذ تقوم لغة CSS بتكبير حجم النص وتجعله في المنتصف كي يبرز ويصبح أكثر وضوحًا. ستتمكن في هذا المثال من مقارنة السلوك أو المظهر الافتراضي لروابطك مع سلوك ومظهر الروابط الأخرى المنسّقة باستخدام خاصيات CSS إضافية، إذ يكون للروابط ذات التنسيق الافتراضي الخصائص التالية: تحتوي خطوطًا أسفلها. تكون الروابط التي لم تُزر بعد زرقاء اللون. تكون الروابط التي جرت زيارتها بنفسجية اللون. يغيّر تحريك مؤشر الفأرة فوق الرابط أيقونة الفأرة إلى أيقونة على شكل يد. يحيط إطار بالروابط التي اكتسبت تركيز الدخل. يمكنك نقل التركيز على رابط في الصفحة بالضغط المتكرر على زر Tab (في نظام ماك لا بد من الضغط على زري Option و Tab معًا). تكون الروابط الفعالّة حمراء اللون. حاول أن تنقر وتستمر بالضغط على الرابط. تكون شيفرة HTML للرابط كما يلي: <p><a href="#">A simple link</a></p> أما شيفرة CSS فهي كالتالي: p { font-size: 2rem; text-align: center; } لتعطي النتيجة التالية: ملاحظة: تنقلك جميع روابط الأمثلة إلى أعلى الصفحات التي تضمها، وتُستخدم الأجزاء الفارغة "#"=href لإنشاء أمثلة بسيطة والتأكد أن الأمثلة المعروضة والمحتواة ضمن إطار <iframe> تعمل جيدًا. بقيت هذه التنسيقات كما هي منذ الأيام الأولى للمتصفحات خلال تسعينات القرن الماضي، إذ يتوقع المستخدمون سلوك هذه الروابط بناءً على تلك الألوان وسيؤدي تغييرها إلى إرباك الكثيرين. ولا يعني هذا طبعًا التخلي عن تنسيق الروابط نهائيًا، بل عدم المغالاة في تنسيقها إلى درجة بعيدة عما هو متوقع، فعليك على الأقل أن: تستخدم خط أسفل الرابط فقط للرابط وليس لأية أغراض أخرى، وإن لم تشأ وضع هذا الخط حاول تظليل الرابط بطريقة أخرى. تمنح الرابط طريقةً يتفاعل فيها مع تمرير مؤشر الفأرة فوقه أو عندما ينتقل تركيز الدخل إليه، وأن تجد طريقةً مشابهةً ليتفاعل الرابط عند تفعيله. يمكنك تغيير أو إلغاء هذه التنسيقات باستخدام خاصيات CSS التالية: color: لتلوين نص الرابط. cursor: لتنسيق مؤشر الفأرة، ولا تحاول إلغاء هذا التنسيق ما لم يكن السبب وجيهًا. outline: لتنسيق الإطار المحيط بالكتابة. والإطار أمر مشابهة للحواف borders، إلا أن الحواف ستشغل مساحة من صندوق العنصر على عكس الإطار الذي يتوضّع فوق الخلفية فقط، وللإطار فائدة في تحسين شمولية الوصول، ولا ينبغي إلغاؤه ما لم تجد طريقة أخرى لتدل على رابط تركيز focused link. ملاحظة: لست مضطرًا إلى التقيد بالخاصيات السابقة فقط، بل يمكنك استخدام أية خاصيات تجدها مناسبة لتنسيق الروابط. تنسيق بعض الروابط بعد أن اطلعنا على التنسيقات الافتراضية بشيء من التفصيل، سنلقي نظرةً على مجموعة من التنسيقات النمطية التي نتخذها بمثابة قاعدة انطلاق ثم نملؤها بالقواعد التي نريد: a { } a:link { } a:visited { } a:focus { } a:hover { } a:active { } لترتيب القواعد في الشيفرة السابقة أهميته لأن تنسيقات الروابط تُبنى فوق بعضها بعضًا؛ إذ ستُطبّق مثلًا التنسيقات ضمن القاعدة الأولى على كل القواعد التي تليها، وعندما يُفعّل الرابط، يستجيب غالبًا إلى تمرير مؤشر الفأرة. لهذا، لو وضعت القواعد بترتيب خاطئ وحاولت تغيير نفس الخاصيات في كل قاعدة، فلن يعمل التنسيق كما تتوقع. إليك هذه العبارة لتتذكر الترتيب الصحيح لكتابة القواعد "LoVe Fears HAte" حيث يشير حرف L إلى حالة الرابط Link وحرف V إلى الحالة Visited …إلخ. لنضع الآن بعض التنسيقات ضمن القواعد التي رتبناها قبل قليل: body { width: 300px; margin: 0 auto; font-size: 1.2rem; font-family: sans-serif; } p { line-height: 1.4; } a { outline: none; } a:link { color: #6900ff; } a:visited { color: #a5c300; } a:focus { text-decoration: none; background: #bae498; } a:hover { text-decoration: none; background: #cdfeaa; } a:active { background: #6900ff; color: #cdfeaa; } إليك شيفرة HTML البسيطة التالية كي نطبّق عليها التنسيقات: <p> There are several browsers available, such as <a href="#">Mozilla Firefox</a>, <a href="#">Google Chrome</a>, and <a href="#">Microsoft Edge</a>. </p> ستكون النتيجة على النحو التالي: ما الذي فعلناه إذًا؟ يبدو مظهر الروابط مختلفًا عن التنسيق النمطي، لكنه يقدّم تجربةً مماثلة يفهم من خلالها الزائر ما الذي يحدث: لن نناقش أول قاعدتين فهما واضحتان تمامًا. تستخدم القاعدة الثالثة المحدد a للتخلص من إطار الرابط، والذي يختلف التعامل معه من متصفح لآخر. استخدمنا بعد ذلك المحددين a:link و a:visited لضبط بعض التغييرات اللونية للروابط التي زارها المستخدم والتي لم يزرها بعد ليستطيع التمييز بينهما. استخدمنا في القاعدتين التاليتين المحددين a:focus و a:hover كي لا يظهر خط أسفل الروابط التي يتحرك مؤشر الفأرة فوقها أو تكتسب تركيز الدخل مع تغيير لون الخلفية. استخدمنا أخيرًا المحدد a:active لمنح الرابط لونًا معاكسًا عند تفعيله كي يظهر أن أمرًا مهمًا قد حدث. تطبيق عملي: نسق روابطك الخاصة نطلب إليك في هذا التطبيق العملي أن تستفيد من مجموعة القواعد الفارغة التي تعاملنا معها سابقًا كي تضيف التنسيقات الخاصة بك كي تعرض الروابط بطريقة جميلة. استخدم مخيلتك وابتكر تنسيقات جديدة، فقد تصل إلى شيء جديد جميل ومفيد بقدر ما فعلناه. إذا ارتكبت خطأً يمكنك النقر على الزر "Reset"، وإذا لم تتمكن من فعل شيء، ألق نظرةً على الحل بالنقر على زر "Show solution". إضافة أيقونات إلى الروابط من الممارسات الشائعة عند إنشاء الروابط تزويدها بأيقونة تشير إلى طبيعة المحتوى الذي يقود إليه كل رابط، لهذا سنلقي نظرةً على مثال بسيط يضيف أيقونة إلى رابط خارجي (يقود إلى موقع آخر). يبدو شكل هذه الأيقونة عادةً مثل سهم يشير إلى خارج الصندوق، وسنستخدم أيقونة من موقع icon8.com. إليك شيفرة HTML و CSS التي ستساعدنا على عرض الفكرة: شيفرة HTML: <p> For more information on the weather, visit our <a href="#">weather page</a>, look at <a href="https://en.wikipedia.org/">weather on Wikipedia</a>, or check out <a href="https://www.nationalgeographic.org/topics/resource-library-weather/"> weather on National Geographic</a>. </p> شيفرة CSS: body { width: 300px; margin: 0 auto; font-family: sans-serif; } p { line-height: 1.4; } a { outline: none; text-decoration: none; padding: 2px 1px 0; } a:link { color: blue; } a:visited { color: purple; } a:focus, a:hover { border-bottom: 1px solid; } a:active { color: red; } a[href^="http"] { background: url("external-link-52.png") no-repeat 100% 0; background-size: 16px 16px; padding-right: 19px; } النتيجة: ما الذي حدث إذًا؟ سنتجاوز توضيح أغلب شيفرة التنسيقات لأننا تحدثنا عنها قبل قليل وننتقل إلى القاعدة الأخيرة المهمة. لقد وضعنا صورة خلفية مخصصة للرابط وهي أيقونة الموقع الخارجي، وبنفس الطريقة التي اتبعناها في إضافة نقاط مخصصة إلى القوائم في المقال السابق. لكننا استخدمنا هنا الخاصية المختصرة background بدلًا من ضبط كل خاصية على حدى، كما ضبطنا مسار الصورة واستخدمنا القيمة no-repeat كي لا تظهر سوى نسخة واحدة من الصورة. ضبطنا كذلك موقع الصورة كي يكون 100% إلى يمين النص دون أن يكون لها هامش علوي 0px. استخدمنا أيضًا الخاصية background-size لتحديد أبعاد الصورة. ومن الأفضل عمليًا أن نختار صورة أكبر ثم نعيد ضبط أبعادها كما يتطلبه صفحات ويب المتجاوبة. لن تعمل هذه الطريقة طبعًا على المتصفحات الأقدم من IE9، لهذا عليك أن تغير أبعاد الصورة بنفسك ثم تستخدمها، إذا أردت دعم تلك المتصفحات. ضبطنا أخيرًا قيمة الحاشية من جهة اليمين باستخدام الخاصية padding-right كي نعطي صورة الخلفية مساحة كافية لتظهر دون أن تتداخل مع النص. كلمة أخيرة: كيف لنا أن تختار فقط الروابط الخارجية لتنسيقها بهذا الشكل مع وجود روابط داخلية؟ إذا كتبت عناوين روابط HTML بالشكل الصحيح، عليك في هذه الحالة استخدام عناوين URL المطلقة للروابط الخارجية، وسيكون من المفيد استخدام العناوين النسبية للروابط الداخلية (كما في الرابط الأول في المثال السابق). لهذا السبب ستظهر العبارة "http" في العناوين الخارجية فقط (كما في العنوانين الثاني والثالث في المثال السابق)، وعندها يمكننا استخدام محدد الخواص التالي ["a[href^="http الذي يحدّد عن عناصر <a> ولكن فقط التي تمتلك الخاصية href مع قيمة تبدأ بالكلمة http، وهذا كل مافي الأمر. حاول أن تعود إلى التطبيق العملي السابق وأن تطبق هذه التقنية. ملاحظة: قد تبدو قيمة الخاصية href في مثالنا غريبة فقد استخدمنا روابط وهمية لا تنقلك إلى أي مكان، والسبب في ذلك أنك ستتمكن من تحميل هذه الروابط ضمن المحرر التفاعلي لو كانت حقيقية وبالتالي ستفقد الشيفرة الموجودة. ملاحظة: لا تقلق إن لم تكن لديك معرفة بالخلفيات أو بتصميم الويب المتجاوب فقد شرحناها في مقالات أخرى يمكنك الاطلاع عليها. تنسيق الروابط على هيئة أزرار يمكنك استخدام الأساليب التي خبرتها حتى الآن في مقالنا بطرق أخرى، حيث يمكنك استخدام حالة تمرير مؤشر الفأرة مع عناصر أخرى مثلًا وليس بالضرورة مع الروابط، وقد ترغب أن تتفاعل الفقرات وعناصر القوائم وغيرها مع مرور مؤشر الفأرة فوقها. ومن الشائع أيضًا تنسيق الروابط لتبدو مثل الأزرار في بعض الحالات، كما في قائمة التنقل ضمن الموقع، إذ تُوصّف عناصر القائمة على هيئة روابط وتُنسّق بعدها لتبدو مثل مجموعة من أزرار التحكم التي تنقل المستخدم من صفحة إلى أخرى في الموقع نفسه. لنرى كيف نفعل ذلك. إليك شيفرة HTML: <nav class="container"> <a href="#">Home</a> <a href="#">Pizza</a> <a href="#">Music</a> <a href="#">Wombats</a> <a href="#">Finland</a> </nav> وشيفرة CSS: body, html { margin: 0; font-family: sans-serif; } .container { display: flex; gap: 0.625%; } a { flex: 1; text-decoration: none; outline: none; text-align: center; line-height: 3; color: black; } a:link, a:visited, a:focus { background: palegoldenrod; color: black; } a:hover { background: orange; } a:active { background: darkred; color: white; } ستكون النتيجة على النحو التالي: نُعرّف في شيفرة HTML عنصر قائمة التنقل <nav> التي تمتلك صنف التنسيق "container". تضم هذه القائمة الروابط المطلوبة، بينما تُنسق شيفرة CSS القائمة والروابط معًا. تنص القاعدة الثانية على ما يلي: الحاوية هي Flexbox: أي أن العناصر ضمنها مرنة، وتتوضع على نحوٍ متجاور حتى تملأ المساحة المخصصة لها. ستكون المسافة بين العناصر 0.625% من اتساع القائمة. تُنسِّق القاعدة الثالثة الروابط: يعني التصريح flex: 1 أن اتساع العناصر سيكون مضبوطًا كي تشغل جميعها المساحة المخصصة للحاوية. ألغينا الخط أسفل الرابط text-decoration والإطار الذي يحيط به outline عند انتقال التركيز إليه، كي لا يفسدا مظهر الأزرار. تُستخدم التصريحات الثلاثة الأخيرة لتوسيط النص ضمن الرابط، وضبط ارتفاع العنصر على القيمة 3 عبر الخاصية line-height لمنح الرابط بعض الارتفاع والمساعدة على توسيط النص عموديًا، وأخيرًا ضبط لون النص ليكون أسودًا. الخلاصة نأمل أن تكون المعلومات التي قدمناها في مقالنا قد لامست فعلًا ما تحتاجه في تنسيق الروابط، وسننتقل في المقال التالي إلى تفصيل طريقة استخدام خطوط الكتابة المخصصة (أو خطوط الويب كما هو شائع) ضمن موقعك. ترجمة -وبتصرف- للمقال- Styling Links اقرأ المزيد المقال السابق تنسيق القوائم في CSS. HTML و CSS للمبتدئين: مقدمة إلى تنسيقات CSS. أساسيات لغة CSS. تأثيرات حركية على عناصر قوائم HTML باستخدام CSS

لا تختلف القوائم lists في سلوكها عن النصوص في المجمل، لكنك ستجد بعض خاصيات CSS مخصصة للقوائم لا بد من الإطلاع عليها، والاطلاع على أفضل الممارسات في تنسيقها وهذا ما سيعرضه هذا المقال. ننصحك قبل إكمال قراءة المقال أن تطلع على أساسيات لغة HTML ومقال التنسيقات الأساسية للنصوص وخطوط الكتابة في CSS. مثال عن قائمة بسيطة حتى نبدأ العمل سنعرض مثالًا عن قائمة بسيطة، وخلال تقدم المقال سنلقي نظرةً على القوائم المرتبة وغير المرتبة وقوائم الوصف التي تتمتع بميزات تنسيقية متشابهة إضافةً إلى ميزات مخصصة لكل منها. يمكنك الوصول إلى المثال بشكله الأصلي غير المنسّق عبر غيت هب GitHub والحصول على الشيفرة المصدرية. <h2>Shopping (unordered) list</h2> <p> Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference. </p> <ul> <li>Hummus</li> <li>Pita</li> <li>Green salad</li> <li>Halloumi</li> </ul> <h2>Recipe (ordered) list</h2> <p> Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference. </p> <ol> <li>Toast pita, leave to cool, then slice down the edge.</li> <li> Fry the halloumi in a shallow, non-stick pan, until browned on both sides. </li> <li>Wash and chop the salad.</li> <li>Fill pita with salad, hummus, and fried halloumi.</li> </ol> <h2>Ingredient description list</h2> <p> Paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference, paragraph for reference. </p> <dl> <dt>Hummus</dt> <dd> A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients. </dd> <dt>Pita</dt> <dd>A soft, slightly leavened flatbread.</dd> <dt>Halloumi</dt> <dd> A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk. </dd> <dt>Green salad</dt> <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd> </dl> إذا عرضت الشيفرة ضمن متصفح، ثم تصفّحت قائمة العناصر باستخدام أدوات مطوري ويب ستلاحظ بعض التنسيقات الافتراضية المطبّقة: للقائمة غير المرتبة <ul> والمرتبة <ol> هوامش علوية وسفلية بحجم 16px (أو 1em)، وحاشية يسارية padding-left بحجم 40px (أو 2.5em). في حال ضُبطت الخاصية dir من اليمين إلى اليسار right-to-left أو rtl للعناصر ul و ol، سيظهر تأثير الحاشية اليمنية padding-right والتي لها القيمة الافتراضية 40px (أو 2.5em). لا تملك عناصر القائمة <li> مجموعة تنسيقات افتراضية. للعنصر <dl> هوامش علوية وسفلية بحجم 16px (أو 1em) لكن دون حواشي. للعنصر <dd> هامش يساري margin-left حجمه 40px (أو 2.5em). للعنصر <p> الذي أضفناه على سبيل الموازنة هوامش علوية وسفلية بحجم 16px كما هو حال الأنواع المختلفة للقوائم. التعامل مع التباعد في القوائم لا بد من ضبط تنسيق القوائم بطريقة تحافظ على نفس التباعد مع العناصر المحيطة بها مثل الفقرات والصور، وهو ما يُعرف بالتناسق العمودي vertical rhythm، وتحافظ على نفس التباعد الأفقي مع بعضها. يمكنك الاطلاع على المثال الجاهز على غيت هب وتنزيل الشيفرة المصدرية. إليك شيفرة CSS المستخدمة في تنسيق النص وتنسيق التباعد: /* General styles */ html { font-family: Helvetica, Arial, sans-serif; font-size: 10px; } h2 { font-size: 2rem; } ul, ol, dl, p { font-size: 1.5rem; } li, p { line-height: 1.5; } /* Description list styles */ dd, dt { line-height: 1.5; } dt { font-weight: bold; } تعرِّف القاعدة الأولى خط كتابة لكامل الموقع حجمه الأساسي 10px، وترث هذه القاعدة جميع عناصر الصفحة. تعرّف القاعدتين الثانية والثالثة حجم خط نسبي (مقاس بواحدة em) مخصص للعناوين <h> ولأنواع القوائم المختلفة (يرثها أبناء عناصر القائمة) والفقرات. أي سيكون لكل قائمة وفقرة حجم الخط نفسه ونفس التباعد من الأعلى والأسفل مما يحافظ على التناسق العمودي. تخصص القاعدة الرابعة نفس ارتفاع السطر line-height في الفقرات وعناصر القوائم أي سيكون التباعد نفسه بين أسطر الفقرات وعناصر القوائم، ويساعد ذلك في الحفاظ على التناسق العمودي. تُطبَّق القاعدتان الخامسة والسادسة على قوائم الوصف وتعطي نفس ارتفاع السطر بين عناصر القائمة والوصف كما هو الحال بين عناصر القوائم السابقة والفقرات. كما جعلنا الخط سميكًا في الوصف ليتميز عن عناصر القائمة. خاصيات التنسيق المخصصة للقوائم بعد أن ألقينا نظرة على التقنيات المتبعة في تحديد التباعد في القوائم، ننتقل إلى استكشاف بعض الخاصيات التي خصصت لتنسيق القوائم. هناك ثلاث خاصيات لا بد من الاطلاع عليها بدايةً ويمكن أن تُطبّق على القوائم المرتبة <ol> أو غير المرتبة <ul>: list-style-type: تضبط نوع النقاط المستخدمة في القائمة كأن تكون دائرية أو مربعة مثلًا في القوائم غير المرتبة، أو أن تكون أرقامًا أو أحرفًا في القوائم المرتبة. list-style-position: تضبط موضع النقاط في عناصر القائمة إن كانت ستظهر داخل القائمة أو خارجها. list-style-image: تسمح باستخدام صورة مخصصة في قوائم التعداد النقطي بدلًا من المربع أو الدائرة النمطية. تنسيق قوائم التعداد النقطي تُستخدم الخاصية list-style-type كما أشرنا سابقًا لضبط نمط النقاط المستخدمة في القوائم النقطية. وفي مثالنا، سنضبط القائمة المرتبة لتعرض ترقيمًا رومانيًا بأحرف كبيرة: ol { list-style-type: upper-roman; } ستكون النتيجة على النحو التالي: بإمكانك إيجاد خيارات أكثر من خلال الاطلاع على صفحة الخاصية list-style-type على موسوعة حسوب. موضع النقاط تحدد الخاصية list-style-position إن كانت النقاط ستظهر داخل عناصر القائمة أو خارجها قبل بداية كل عنصر. تأخذ الخاصية القيمة الافتراضية outside التي تجعل النقاط خارج عناصر القائمة كما في الصورة السابقة، لكن إن ضبطنا قيمة الخاصية على inside على النحو التالي: ol { list-style-type: upper-roman; list-style-position: inside; } ستكون النتيجة مشابهة للشكل التالي: استخدام صور مخصصة للنقاط تسمح الخاصية list-style-image باستخدام صور مخصصة لنقاط القائمة، وبطريقة بسيطة جدًا: ul { list-style-image: url(star.svg); } لكن هناك محدودية في استخدام هذه الخاصية من ناحية التحكم بموقع النقاط وحجمها وغيرها، لهذا ننصحك باستخدام مجموعة الخاصيات المتعلقة بالخلفية background والتي تعرفنا عليها في مقال سابق، وإليك كيفية استخدامها: ul { padding-left: 2rem; list-style-type: none; } ul li { padding-left: 2rem; background-image: url(star.svg); background-position: 0 0; background-size: 1.6rem 1.6rem; background-repeat: no-repeat; } ما فعلناه في الشيفرة السابقة هو كالتالي: ضبطنا قيمة الحاشية اليسارية padding-left للعنصر <ul> على 20px بدلًا من القيمة الافتراضية 40px، وطبقنا نفس الحاشية على عناصر القائمة غير المرتبة كي تبقى بمحاذاة عناصر القائمة المرتبة وقائمة الوصف على الرغم من وجود حاشية لصور الخلفية ضمن كل عنصر، ولو لم نفعل ذلك، ستتداخل صور الخلفية مع نص العنصر ويبدو الأمر فوضويًا. ضبطنا الخاصية list-style-type على القيمة none كي لا تظهر النقاط بشكلها الافتراضي لأننا سنستخدم خاصيات الخلفية background للتعامل معها. وضعنا نقطة مخصصة قبل كل عنصر في القائمة غير المرتبة، وإليك الخاصيات التي استخدمناها لتخصيص هذه النقطة: background-image: تعطي مرجعًا إلى مسار ملف الصورة التي نستخدمها بصفتها نقطة. background-position: تضبط مكان ظهور الخلفية ضمن العنصر وقد جعلناها في حالتنا 0 0 مما يعني أن النقطة ستظهر أعلى يسار العنصر. background-size: تضبط حجم صورة الخلفية، ومن الناحية العملية لا بد أن يكون حجم صورة الخلفية بحجم عنصر القائمة (أو أكبر أو أصغر بشيء بسيط)؛ وطالما أننا نستخدم الحجم 1.6rem (أو 16px) والذي يتناسب تمامًا مع حجم حاشية مقدارها 20px يمكن أن نضع النقاط ضمن عنصر القائمة دون مشاكل، سيجعل مجموع 16 بكسل مع 4 بكسل من الفراغ الذي يحيط بالنقطة الأمر مناسبًا. background-repeat: تتكرر الصورة افتراضيًا حتى يمتلئ الفراغ المتاح لها، وطالما أننا نحتاج إلى نسخة واحدة من الصورة التي تمثل النقطة، ضبطنا قيمة الخاصية على no-repeat. ستكون نتائج عملنا كما في الصورة التالية: الخاصة المختصرة list-style يمكنك ضبط الخاصيات الثلاث السابقة باستخدام الخاصية المختصرة list-style، إذ تستطيع مثلًا أن تستبدل الشيفرة التالية: ul { list-style-type: square; list-style-image: url(example.png); list-style-position: inside; } بالشيفرة المختصرة التالية: ul { list-style: square url(example.png) inside; } يمكن أن ترتب القيم الثلاث بأية طريقة، كما يمكنك استخدام إحداها أو اثنتين منها أو ثلاثتها. توضع القيم الافتراضية التالية: disc و none و outside في حال لم تُحدد قيمتها صراحة. إذا استُخدمت الخاصية type مع الخاصية image، سيُستخدم النوع type إن لم ينجح تحميل الصورة المحددة. التحكم بطريقة ترقيم القوائم قد تحتاج أحيانًا إلى تطبيق طريقة تعداد مختلفة للقوائم المرتبة المختلفة، كأن تبدأ الترقيم بالرقم 3 مثلًا أو أن تعد مثنى مثنى، لهذا تتيح لك HTML و CSS بعض الطرق لتنفيذ ذلك. الخاصية start تتيح لك الخاصية start الخاصة بعنصر القائمة المرتبة <ol> أن تحدد الرقم الذي تبدأ منه التعداد. إليك مثالًا: <ol start="4"> <li>Toast pita, leave to cool, then slice down the edge.</li> <li> Fry the halloumi in a shallow, non-stick pan, until browned on both sides. </li> <li>Wash and chop the salad.</li> <li>Fill pita with salad, hummus, and fried halloumi.</li> </ol> ستكون النتيجة على النحو التالي: الخاصية reversed تجعل الخاصية reversed التعداد عكسيًا ابتداءً من قيمة محددة. إليك مثالًا: <ol start="4" reversed> <li>Toast pita, leave to cool, then slice down the edge.</li> <li> Fry the halloumi in a shallow, non-stick pan, until browned on both sides. </li> <li>Wash and chop the salad.</li> <li>Fill pita with salad, hummus, and fried halloumi.</li> </ol> ستكون النتيجة على النحو التالي: ملاحظة: إن كان عدد عناصر القائمة أكبر من القيمة التي تحددها الخاصية start عند استخدام التعداد العكسي، فسيستمر التعداد نحو الصفر ومنه إلى القيم السالبة. الخاصية value تسمح لك الخاصيةvalue بتخصيص رقم لكل عنصر من عناصر القائمة. إليك مثالًا: <ol> <li value="2">Toast pita, leave to cool, then slice down the edge.</li> <li value="4"> Fry the halloumi in a shallow, non-stick pan, until browned on both sides. </li> <li value="6">Wash and chop the salad.</li> <li value="8">Fill pita with salad, hummus, and fried halloumi.</li> </ol> ستكون النتيجة على النحو التالي: ملاحظة: حتى لو استخدمت تعدادًا ليس رقميًا للخاصية list-style-type، ستحتاج إلى استخدام القيم الرقمية المكافئة ضمن الخاصية value. تطبيق عملي نطلب منك في هذا التطبيق العملي الاستفادة من الأفكار التي طرحناها في المقال لتنسيق قائمة متداخلة. ستجد ضمن المحرر التفاعلي التالي شيفرة HTML الخاصة بالقائمة ونريد منك أن: تعطي القائمة غير المرتبة تعدادًا نقطيًا. تعطي عناصر القائمة غير المرتبة والمرتبة ارتفاع سطر يعادل 1.5 من حجم خطها. تعطي عناصر القائمة المرتبة نقاط تعداد على شكل أحرف لاتينية صغيرة. تحاول تعديل تنسيق القوائم كما يحلو لك. إن ارتكبت خطأً انقر على زر "reset" ليعود كل شيء كما كان، وإن أردت إظهار الحل الصحيح انقر على الزر "show solution". الخلاصة من السهل تنسيق القوائم إن اعتدت التعامل مع أساسياتها وخاصياتها المميزة، وسننتقل في المقال التالي إلى شرح طريقة تنسيق الروابط التشعبية. ترجمة -وبتصرف- للمقال Styling lists. اقرأ المزيد المقال السابق التنسيقات الأساسية للنصوص وخطوط الكتابة في CSS تنسيق القوائم (Lists) في CSS تعرف على أساسيات لغة CSS هيكلية لغة CSS

نحاول في هذا المقال أن نضعك على الطريق الصحيح لإتقان تنسيق النصوص باستخدام CSS. لهذا سنطلعك تدريجيًا وبالتفصيل على أساسيات التنسيق بما في ذلك ضبط حجم الخط وعائلته وتنسيقاته، إضافةً إلى الخاصيات المختصرة، ومحاذاة النصوص وغيرها من التأثيرات، كما سنتعلم ضبط التباعد بين الأسطر والحروف. ننصحك قبل إكمال قراءة المقال أن تطلع على أساسيات لغة HTML وأساسيات لغة CSS. ما الذي يتضمنه تنسيق النصوص من خلال CSS؟ إذا عملت على ملفات HTML أوCSS مسبقًا، فأنت تعرف حتمًا أن النص الموجود داخل العنصر يُوضع ضمن صندوق المحتوى الخاص بالعنصر، إذ يبدأ النص من الزاوية اليسارية العليا لمنطقة المحتوى (أو من اليمينية العليا في اللغات التي تُكتب من اليمين إلى اليسار) وينساب نحو نهاية السطر. حالما يصل النص إلى نهاية السطر ينتقل تلقائيًا إلى سطر جديد وينساب نحو نهاية السطر من جديد وهكذا حتى يُكتب كامل النص ضمن صندوق المحتوى المخصص. إذًا، يسلك المحتوى النصي سلوك سلسلة من العناصر السطرية المتجاورة المرتبة في سطور، ولا تُطبق عملية الانتقال إلى سطر جديد حتى بلوغ نهاية السطر، أو أن تجبرها يدويًا على الانتقال إلى سطر جديد باستخدام العنصر <br>. ملاحظة: إذا لم تكن على دراية عن الأفكار التي طرحتها في الفقرة السابقة، عد إلى مقال نموذج الصندوق Box Model كي تتزود ببعض المعلومات المفيدة عن نظرية النموذج الصندوقي قبل المتابعة في هذا المقال. يمكن تقسيم خاصيات CSS المستخدمة في تنسيق النصوص ضمن فئتين أساسيتين، سنلقي نظرةً عليهما تباعًا في هذا المقال: تنسيقات خطوط الكتابة Font styles: وهي الخاصيات التي تؤثر مباشرةً على خط الكتابة، مثل نوع الخط المطبّق وحجمه وسماكته وغير ذلك. تنسيقات تخطيط النص Text layout styles: وهي الخاصيات التي تؤثر على مقدار المساحات الفارغة وغيرها من ميزات تخطيط النص، التي تسمح مثلًا بتغيير المسافة الفارغة بين الأسطر والحروف، ومحاذاة النص ضمن الحيز المحدد للمحتوى. ملاحظة: تذكّر أن النص الموجود ضمن عنصر سيتأثر بالخاصيات وكأنه كيان واحد، وبالتالي لن تتمكن من اختيار جزء من النص ثم تنسيقه على نحوٍ مختلف إذا لم تغلف هذا الجزء ضمن عنصر مناسب مثل <span>، أو أن تستخدم عنصر زائف مخصص لاستهداف النصوص مثل first-letter::، الذي يختار الحرف الأول من النص الذي يحتويه عنصر ما، أو first-line::، الذي يختار السطر الأول من نص ضمن عنصر، أو selection::، الذي يستهدف النص الذي جرى تحديده من خلال مؤشر الفأرة. خطوط الكتابة سننتقل مباشرةً الآن إلى خاصيات تنسيق خطوط الكتابة من خلال المثال التالي الذي نطبق خلاله بعض خاصيات CSS على شيفرة HTML التالية: <h1>Tommy the cat</h1> <p>Well I remember it as though it were a meal ago…</p> <p> Said Tommy the Cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat. Many a fat alley rat had met its demise while staring point blank down the cavernous barrel of this awesome prowling machine. Truly a wonder of nature this urban predator — Tommy the cat had many a story to tell. But it was a rare occasion such as this that he did. </p> بإمكانك إيجاد المثال في حالته النهائية على غيت هب GitHub، كما يمكنك تنزيل الشيفرة المصدرية أيضًا. الألوان تضبط الخاصية color لون الخلفية لمحتوى العنصر الذي تختاره، وهو عادةً نص، كما تتضمن أشياء أخرى، مثل لون الخط الذي يمر من وسط النص، أو أسفله والذي تضبطه الخاصية text-decoration. تقبل الخاصية color قيمًا بأية وحدات لونية تعرّفها CSS: p { color: red; } تجعل الشيفرة السابقة النص في الفقرة باللون الأحمر بدلًا من اللون الأسود الذي يستخدمه المتصفح افتراضيًا لعرض الفقرات لتظهر بالشكل التالي: عائلات الخطوط يمكنك استخدام الخاصية font-family التي تسمح لك بتخصيص خط أو مجموعة خطوط كي يطبقها المتصفح على عنصر تختاره، ويجب الانتباه إلى أن المتصفح لن يطبق أي خط كتابة ما لم يكن موجودًا على الجهاز الذي يستضيف موقع الويب، وإلا سيستخدم خط الكتابة الافتراضي. إليك هذا المثال البسيط: p { font-family: arial; } تطبق الشيفرة السابقة نوع الخط "arial" على جميع الفقرات النصية في الصفحة، وهو خط كتابة موجود على أي حاسوب. خطوط الكتابة الآمنة على الويب هناك عدد محدد من أنواع الخطوط التي تتوفر عادةً في جمع الأنظمة، وبالتالي يمكن استخدامها دون أن نقلق من تجاهل المتصفح لها. لهذا، دُعيت هذه الخطوط بخطوط الويب الآمنة safe web fonts. يرغب مطورو الويب غالبًا بتخصيص الخطوط التي يستخدمونها لعرض المحتوى النصي في الصفحات، وتكمن المشكلة في إيجاد طريقة معرفة أن خطًا معينًا سيكون متوفرًا على الجهاز الذي يستضيف الصفحة. لن نتمكن من معرفة هذه المعلومة تحديدًا في كل الحالات، لكن تُعرف خطوط الكتابة الآمنة في الويب بأنها متاحة في جميع نسخ أنظمة التشغيل تقريبًا بما في ذلك ويندوز وماك أو إس ومعظم توزيعات لينكس المعروفة وأندرويد وأي أو إس iOS. تتغير قائمة خطوط الكتابة الآمنة مع تغيير أنظمة التشغيل، لكن من المنطقي أن تفكر باستخدام خطوط ويب الآمنة التالية وعلى الأقل حاليًا، إذ زادت شعبية الكثير منها بفضل مبادرة مايكروسوفت التي دُعيت Core fonts for the Web في أواخر التسعينات وبداية الألفية الجديدة: الاسم النمط الأساسي ملاحظات Arial sans-serif يُعدّ أيضًا اختيار نوع الخط "Helvetica" بدلًا من "Arial" من الممارسات الأفضل على الرغم من أن وجهي الخطين متطابقين تمامًا، لكن "Helvetica" يعطي خطًا أكثر وضوحًا رغم كونه أقل توفرًا. Courier New monospace لبعض أنظمة التشغيل نسخة بديلة (ربما أقدم) من الخط "Courier New" يُدعى "Courier". لهذا من الممارسات الأفضل أن تستخدم كليهما مع تفضيل للنوع "Courier New". Georgia serif Times New Roman serif لبعض أنظمة التشغيل نسخة بديلة (ربما أقدم) من الخط "Times New Roman" يُدعى "Times". لهذا من الممارسات الأفضل أن تستخدم كليهما مع تفضيل للنوع "Times New Roman". Trebuchet MS sans-serif لا بد من الانتباه عن استخدام هذا الخط، فهو منتشر بصورةٍ واسعة ضمن أنظمة تشغيل الهواتف المحمولة. Verdana sans-serif ملاحظة: ستجد في كثير من المصادر ومنها cssfontstack.com قوائم لخطوط الويب الآمنة المتاحة على ويندوز وماك أو إس وبالتالي تساعدك في اتخاذ قرار بنوع الخط الذي تستخدمه في صفحاتك. ملاحظة: هناك طريقة لتنزيل خطوط مخصصة لصفحة ويب تسمح لك بتخصيص الخطوط في صفحتك بالطريقة التي تراها مناسبة. هذا الأمر معقد قليلًا وسنناقشه لاحقًا. الخطوط الافتراضية تعرّف CSS خمسة أسماء معممة لأنواع الخطوط هي: serif و sans-serif و monospace و cursive و fantasy. هذه الأسماء معممة جدًا ويمكن أن تختلف واجهات خطوط الكتابة المُستخدمة من هذه الأسماء من متصفح لآخر، ومن نظام تشغيل لآخر. يمثّل هذا الوضع ما يُسمى "سيناريو الحالة الأسوأ worst case scenario"، إذ سيحاول المتصفح جاهدًا في انتخاب خط الكتابة الأكثر قربًا من الخطوط الموجودة، وفعلًا من السهل التعامل مع الخطوط serif و sans-serif و monospace فهي متوقّعة وستكون النتيجة التي يعرضها المتصفح معقولة، بينما يصعب توقع سلوك المتصفح مع الخطين cursive و fantasy لهذا يجدر الحذر عند استخدامها، واختبار العمل باستمرار. تُعرّف الأسماء الخمسة للخطوط على النحو التالي: المصطلح التعريف serif وهي خطوط تنتهي فيها حواف الحروف بنتوءات (وهي تفاصيل صغيرة تظهر في نهاية خطوط الحروف) sans-serif وهي الخطوط التي لا تنتهي حواف الحروف بنتوءات. monospace وهي خطوط يكون لكل المحارف فيها الاتساع ذاته، وتُستخدم عادةً في كتابة وتنظيم الشيفرة، أي لضبط المحاذاة. cursive وهي الخطوط التي يُنوى استخدامها لمحاكاة خط اليد، من ناحية الإنسياب وترابط الأحرف. fantasy وهي الخطوط المُستخدمة لأغراض التزيين. قوائم الخطوط طالما أننا لن نضمن توفر جميع الخطوط التي ننوي استخدامها عن تصميم الصفحات (فحتى خطوط ويب الآمنة قد تخفق أحيانًا)، يمكنك اختيار قائمة من الخطوط font stack ليختار المتصفح منها خطًا. يتضمن ذلك اختيار مجموعة من القيم للخاصية font-family تفصل بينها فواصل ,. p { font-family: "Trebuchet MS", Verdana, sans-serif; } في هذه الحالة، يبدأ المتصفح باختيار الخط الأول من القائمة ليرى إن كان متاحًا على الجهاز فيطبّقه، فإن لم يكن كذلك ينتقل إلى التالي وهكذا. من الجيد تزويد المتصفح بأسماء خطوط معممة مناسبة في نهاية القائمة، فإن لم يكن أي خط من الخطوط التي تريدها متاحًا، يمكن للمتصفح أن يختار حينها على الأقل ما يشابهها. لتوضيح هذه الفكرة، تأخذ الفقرات النصية خط المتصفح الافتراضي "serif" إن لم تكن بقية الخيارات في قائمة الخطوط متوفرة، وهذا الخط غالبًا "Times New Roman"، وهذا لن يخدمك إن كنت تريد خطًا من النوع "sans-serif". ملاحظة: لا بد من إحاطة أسماء خطوط الكتابة المكونة من أكثر من كلمة (أي تحتوي على مسافات بيضاء) بإشارات تنصيص مزدوجتين "" مثل "Trebuchet MS". تحذير: ينبغي اقتباس أي اسم عائلة خطوط يمكن تفسيره عن طريق الخطأ على أنه اسم عائلة معمّم أو كلمة مفتاحية على مستوى CSS. يمكن تضمين أسماء عائلات الخطوط مثل <custom-ident> أو <string>، لكن لا بُد من تضمين أسماء عائلات الخطوط التي من الممكن أن يكون لها نفس قيمة خاصية CSS، مثل خاصية initial أو inherit، أو CSS التي لها نفس أسماء الخطوط المعممة، مثل sans-serif أو fantasy، على أنها سلاسل نصية، وإلا سيُفسّر اسم عائلة الخط على أنه كلمة CSS مفتاحية أساسية مكافئة أو اسم عائلة معمّم. لدى استخدام أسماء العائلات على أنها كلمات مفتاحية، يجب عدم اقتباس أسماء العائلات المعمّمة مثل serif و sans-serif و monospace و cursive وكذلك الأمر بالنسبة لكلمات CSS المفتاحية العامة، إذ لا تُفسّر السلاسل النصية على أنها كلمات CSS مفتاحية. مثال عن قائمة خطوط لنضف إلى مثالنا السابق الخطوط من النوع المعمم "sans-serif": p { color: red; font-family: Helvetica, Arial, sans-serif; } وستكون النتيجة على النحو التالي: حجم الخط اطلعنا في مقال قيم ووحدات CSS على وحدات الطول والحجم التي نستخدمها، ورأينا أن الخاصية font-size التي تضبط حجم الخط قد تأخذ قيمًا من معظم وحدات القياس المستخدمة (بما في ذلك النسب المئوية). لكن أكثر ما ستصادفه من وحدات القياس في تقدير حجم النصوص هي: البكسل px: وهو عدد البكسلات التي تقيس ارتفاع النص، وهي وحدة مطلقة تنتج دائمًا القيمة نفسها لارتفاع الخط في جميع الحالات تقريبًا. em: عندما نضبط حجم الخط على1‎ em، فهذا يعني أننا نختار للعنصر الذي ننسقه نفس حجم الخط للعنصر الأب (وبدقة أكبر، اتساع الحرف M في الخط المستخدم في تنسيق العنصر الأب). سيكون الأمر مربكًا إذا كانت هناك الكثير من العناصر المتداخلة والمنسقة بخطوط كتابة مختلفة، ومع ذلك فالأمر قابل للتنفيذ كما سنرى تاليًا. لماذا عليّ ذلك؟ سيكون الأمر عاديًا بمجرد أن تعتاد عليه، وستتمكن من استخدام في تحديد أبعاد أي شيء وليس النصوص فقط، ويمكن استخدام واحدة القياس em لتقدير أبعاد جميع العناصر في الصفحة مما يُسهّل الصيانة. rem: وهي واحدة مشابهة لواحدة em، إلا أن ‎1 rem ستعادل في هذه الحالة حجم الخط المستخدم لتنسيق العنصر الجذري root element وليس العنصر الأب. يسهّل هذا الأمر الحسابات المستخدمة في تقدير الأبعاد المختلفة، لكن قد تعاني إن أردت دعم المتصفحات الأقدم، فلا يقبل المتصفح إنترنت إكسبلور 8 وما دون هذه الواحدة مثلًا. يرث العنصر حجم الخط من العنصر الأب، وتبدأ الوراثة انطلاقًا من العنصر الجذري للصفحة ككل <html>. ويُعد 16px القياس الافتراضي لحجم خط العنصر الجذري في جميع المتصفحات، إذ ستأخذ جميع الفقرات النصية، أو أية عناصر أخرى لا يعطيها المتصفح قيمةً افتراضيةً مخصصة ضمن العنصر الجذري قياسًا نهائيًا قيمته 16px، وتأخذ عناصر أخرى قيمًا افتراضية مختلفة مثل العنصر <h1> الذي يأخذ القياس 2em افتراضيًا وسيكون قياسه النهائي 32px. ستأخذ الأمور منحًى مربكًا أكثر عندما تبدأ تغيير حجم الخط لعناصر متداخلة؛ فلو كان لديك العنصر <article> في صفحتك وضبط حجم الخط فيه على 1.5em (يقابل 24px)، وأردت أن تجعل حجم خط الفقرات ضمن هذا العنصر 20px فما هو الحجم المناسب مقاسًا بواحدة em؟ <!-- 16px القياس الأساسي للعنصر الجذري--> <article> <!-- 1.5em إن كان القياس في هذا العنصر--> <p>My paragraph</p> <!-- 20px كيف أحسب القياس --> </article> لا بد أن تجعل القيمة على النحو 20/24em أي ‎0.8333 em. فإجراء العمليات الحسابية قد يكون مربكًا بعض الشيء، لهذا عليك الإنتباه عند تنسيق الأشياء. من الأفضل إذًا استخدام rem حيثما أمكن لتبقي الأمور بسيطة وتفادى ضبط حجم الخط font-size للعناصر الحاوية ما أمكن. تنسيق الخطوط وثخانتها وتحويل حالة حروف النصوص وتزيينها تزودنا CSS بمجموعة من الخاصيات التي تغيّر ثخانة النص وتبرزه نذكر منها: font-style: تُستخدم لتحويل النص إلى الشكل المائل أو العكس، وتأخذ القيم التالية (نادرًا ما تستخدمها، إلا إن أردت فعلًا جعل الخط مائلًا لسبب وجيه): normal: يجعل الخط نمطيًا (يلغي الإمالة). italic: يجعل الخط مائلًا إن كان الخط يدعم ذلك، بينما يجعله منحرفًا قليلًا oblique إن لم يدعم الخط ذلك. oblique: يقلّد الإمالة نوعًا ما بجعل الأحرف منحرفة قليلًا عن الوضع النمطي. font-weight: تحدد هذه الخاصية مقدار سماكة أو ثخانة الخط، ولها عدة قيم: "light-" و "normal-" و "bold-" و "extrabold-" و "black-" في حال احتجت إلى ذلك، لكنك لن تستخدم عمليًا سوى "normal" و "bold": normal و bold: تجعل الخط سميكًا أو طبيعيًا. lighter و bolder: تجعل الخط أسمك أو أخف بدرجة واحدة من سماكة العنصر الأب. 100 – 900: قيم عددية لمقدار سماكة خط الكتابة وتقدم طريقة لتحكم أفضل بالسماكة بدلًا من الكلمات المفتاحية. text-transform: تساعدك على تحويل حالة الحروف في النص: none: تمنع أية تحويلات. uppercase: تحوّل جميع الحروف إلى حروف كبيرة. lowercase: تحوّل جميع الحروف إلى حروف صغيرة. capitalize: تحوّل الأحرف الأولى من الكلمات إلى حروف كبيرة. full-width: تكتب أي حرف ضمن مربع ثابت الاتساع (أي يشغل كل حرف نفس المساحة) مما يسمح بمحاذاة المحارف المختلفة مثل اللاتينية والآسيوية مثلًا. text-decoration: تمكّن أو تلغي تزيين النص (تُستخدم غالبًا في إزالة الخط الموجود تحت الروابط التشعبية عند تنسيقها): none: إزالة أي تزيين في النص. underline: يضع خطًا تحت النص. overline: يضع خطًا فوق النص. line-through: يضع خطًا وسط النص. تقبل الخاصية text-decoration قيمًا متعددة إذا أردت إضافة عدة تزيينات في الوقت عينه. إليك مثالًا: text-decoration: underline overline ولا بد من الإشارة إلى أن text-decoration هي خاصية مختصرة للخاصيات text-decoration-line و text-decoration-style و text-decoration-color، لهذا يمكنك استخدام توليفة من هذه التنسيقات لإظهار الأثر المطلوب. إليك مثالًا: text-decoration: line-through red wavy لنلق نظرةً على المثال التالي الذي يضيف خاصيتين من الخاصيات السابقة معًا: html { font-size: 10px; } h1 { font-size: 5rem; text-transform: capitalize; } h1 + p { font-weight: bold; } p { font-size: 1.5rem; color: red; font-family: Helvetica, Arial, sans-serif; } إليك النتيجة: إلقاء الظلال على النصوص يمكن إلقاء الظل على النص باستخدام الخاصية text-shadow التي تأخذ حتى أربعة قيم كما يظهر في المثال التالي: text-shadow: 4px 4px 5px red; أما القيم الأربعة فهي: الإزاحة الأفقية للظل عن النص الأصلي: وتأخذ معظم وحدات قياس الطول والأبعاد المتاحة في CSS، لكن ما ستستخدمه عادةً هو px. تزيح القيم الموجبة الظل نحو اليمين والسالبة إلى اليسار، ولا بد من استخدام هذه القيمة. الإزاحة العمودية للظل عن النص الأصلي: تشابه من ناحية الوظيفة الإزاحة الأفقية إلا أنها للأعلى والأسفل وليست لليمين واليسار، ولا بُد من استخدام هذه القيمة. نصف قطر التمويه blur: وتشير القيم الأعلى إلى أن الظل أوسع انتشارًا، وتأخذ القيمة 0 إن لم تُستخدم (لا يوجد إماهة). يمكن أن تأخذ هذه القيمة أية وحدات لقياس الطول أو الأبعاد في CSS. اللون الأساسي للظل: ويأخذ جميع القيم اللونية في CSS. وإن لم تُستخدم، فسيكون لون الظل افتراضيًا هو اللون الحالي المأخوذ من الخاصية color للعنصر. الظلال المتعددة يُمكن تطبيق عدة ظلال على النص باستخدام عدة قيم منفصلة عن بعضها بفواصل: h1 { text-shadow: 1px 1px 1px red, 2px 2px 1px red; } إذا طبقنا هذا التنسيق على العنصر <h1> على مثالنا السابق ستكون النتيجة على النحو التالي: تخطيط النص لنلقِ نظرةً الآن على الخاصيات التي تؤثر على تخطيط layout النص: محاذاة النصوص تُستخدم الخاصية text-align في محاذاة النصوص ضمن صندوق الحاوية. تأخذ الخاصية القيم التالية التي تعمل بنفس الطريقة التي تستخدمها المحررات النصية النمطية: left: تُحاذي النص إلى اليسار. right: تُحاذي النص إلى اليمين. center: تجعل النص في وسط الحاوية. justify: تجعل النص ممتدًا ذو فراغات مختلفة الأحجام ليجعل اتساع جميع الأسطر في النص متساويًا. قد يبدو مظهر النص سيئًا وخاصةً إذا احتوى فقرات تضم الكثير من الكلمات الطويلة؛ فإذا كنت ستستخدم هذه الخاصية، لا بد من استخدام خاصية أخرى هي hyphens لتوزيع بعض الكلمات الطويلة على سطرين. إذا طبقنا الخاصية text-align: center على العنصر <h1> في مثالنا السابق: html { font-size: 10px; } h1 { font-size: 5rem; text-transform: capitalize; text-shadow: 1px 1px 1px red, 2px 2px 1px red; text-align: center; } h1 + p { font-weight: bold; } p { font-size: 1.5rem; color: red; font-family: Helvetica, Arial, sans-serif; } ستكون النتيجة على النحو التالي ارتفاع السطر تضبط الخاصية line-height ارتفاع كل سطر من أسطر النص، وتأخذ جميع وحدات القياس في CSS إضافةً إلى قيم بدون وحدات unit-less تعمل مثل مضاعفات وهي عمليًا أفضل الخيارات. عند استخدام قيم بلا وحدات سيُحسب جداء حجم الخط font-size في هذه القيمة وتكون النتيجة هي ارتفاع الخط. سيبدو النص أفضل وأسهل قراءة عندما تتباعد الأسطر عن بعضها، ويكون عادةً الفراغ المزدوج (1.5-2) هو التباعد المناسب بين الأسطر، وكي نجعل التباعد بين الأسطر في مثالنا بقيمة 1.6 ما علينا سوى كتابة الشيفرة التالية: p { line-height: 1.6; } وعند تطبيقها على عنصر الفقرة <p> في مثالنا السابق: html { font-size: 10px; } h1 { font-size: 5rem; text-transform: capitalize; text-shadow: 1px 1px 1px red, 2px 2px 1px red; text-align: center; } h1 + p { font-weight: bold; } p { font-size: 1.5rem; color: red; font-family: Helvetica, Arial, sans-serif; line-height: 1.6; } ستكون النتيجة على النحو التالي: الفراغات بين الحروف والكلمات تسمح الخاصيتان letter-spacing و word-spacing بضبط الفراغات بين الحروف والكلمات في النص. لن تستخدمهما كثيرًا، لكنك قد تحتاجهما لإعطاء النص مظهرًا مخصصًا، أو لتحسين مظهر خطوط معينة ذات طبيعة متراصة. تأخذ هذه الخاصية معظم وحدات قياس الأبعاد والأطوال. لإظهار طريقة عمل هاتين الخاصيتين سنطبق تباعدًا بين كلمات وأحرف أول سطر من العنصر <p> في مثالنا السابق: p::first-line { letter-spacing: 4px; word-spacing: 4px; } ثم نصيّر شيفرة HTML التالية: html { font-size: 10px; } h1 { font-size: 5rem; text-transform: capitalize; text-shadow: 1px 1px 1px red, 2px 2px 1px red; text-align: center; letter-spacing: 2px; } h1 + p { font-weight: bold; } p { font-size: 1.5rem; color: red; font-family: Helvetica, Arial, sans-serif; line-height: 1.6; letter-spacing: 1px; } ستكون النتيجة على النحو التالي: خاصيات أخرى تستحق الملاحظة تعطيك الخاصيات التالية فكرةً عن طريقة تنسيق النصوص في صفحات الويب، لكن هناك الكثير غيرها. سنغطي هنا أكثر الخاصيات أهمية، لهذا لا بد من استكشاف طريقة عملها بمجرد أن تتقن الخاصيات التي شرحناها سابقًا: خاصيات تنسيق الخط: font-variant: تبدّل بين الأحرف الصغيرة والنص العادي. font-kerning: تبدل بين وضع التداخل kerning والوضع الطبيعي. font-feature-settings: تبدّل بين ميزات الخطوط من النوع OpenType. font-variant-alternates: تتحكم باستخدام المحارف البديلة لواجهة خط كتابة معين. font-variant-caps: يتحكم باستخدام بدائل المحارف الكبيرة. font-variant-east-asian: تتحكم باستخدام المحارف البديلة لخطوط كتابة اللغات الشرق آسيوية مثل اليابانية والصينية. font-variant-ligatures: تُستخدم للتحكم بكيفية استخدام المحارف المترابطة (محرفين مرتبطين على شكل محرف واحد) والمحارف ذات الحركات. font-variant-numeric: تتحكم باستخدام بدائل محارف الأرقام والأعداد الكسرية وعلامات الترتيب. font-variant-position: تتحكم باستخدام بدائل المحارف التي تشغل مواقع أصغر مثل المحارف التي تُكتب منخفضة أو مرتفعة. font-size-adjust: تعديل الحجم المرئي للخط بمعزل عن حجمه الحقيقي. font-stretch: تُستخدم للتبديل بين النسخ الممتدة stretched الممكنة لخط معين. text-underline-position: يحدد موقع الخط الذي يُرسم أسفل النص عند استخدام القيمة underline للخاصية text-decoration-line. text-rendering: تحاول أن تحسّن في النص عند تصييره. خاصيات تخطيط النص: text-indent: تحدد مقدار الفراغ الأفقي الواجب تركه قبل بداية السطر الأول من النص. text-overflow: تعرّف طريقة تنبيه المستخدم عندما لا يُعرض المحتوى في حالة الطفحان overflow. white-space: تعرّف كيفية التعامل مع المسافات الفارغة وعناصر الانتقال إلى سطر جديد ضمن العناصر. word-break: تحدّد إذا ما كان مسموحًا تجزئة الكلمة عند الانتقال إلى سطر جديد. direction: تعرّف اتجاه خط الكتابة. يتعلق الأمر عادةً بلغة الكتابة ومن الأفضل ترك الأمر للغة HTML كي تتعامل مع هذا الجزء لارتباطه بسياق النص. hyphens: تفعّل أو تعطّل تجزئة الكلمات على سطرين في اللغات التي تدعم ذلك. line-break: تشدد أو تتسامح بالانتقال إلى سطر جديد في اللغات الآسيوية. text-align-last: تحدد محاذاة آخر سطر من كتلة أو أي سطر قبل أن يُجبر النص على الانتقال إلى سطر جديد. text-orientation: تحدد جهة انسياب الكلمات ضمن السطر. overflow-wrap: تحدد إن كان يُسمح للمتصفح أن ينتقل بالنص إلى سطر جديد لتفادي طفحان المحتوى أو لا. writing-mode: تحدد إن كان اتجاه الأسطر أفقي أو عمودي واتجاه انسياب الأسطر اللاحقة. الخاصيات المختصرة لتنسيق خط الكتابة يمكن ضبط الكثير من قيم خاصيات تنسيق النصوص من خلال الخاصية المختصرة font، وتكتب قيمها وفق التسلسل التالي: font-style و font-variant و font-weight و font-stretch و font-size و line-height و font-family. وتُعد الخاصيتين font-size و font-family ضروريتان فقط (يجب تحديد قيمهما). لا بد من الإشارة إلى ضرورة وضع شرطة أمامية مائلة "/" بين الخاصيتين font-size و line-height كما في المثال التالي: font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif; تطبيق عملي: حاول أن تتدرب على تنسيق النصوص نريد منك في هذا التطبيق أن تستخدم محرر الشيفرة التفاعلي التالي لتتدرب على استخدام خاصيات تنسيق النصوص وتكتشف طريقة عملها وما يمكن أن تقدمه من فائدة. بإمكانك أن تستخدم ملفات HTML/CSS التي نزّلتها أو العمل على شيفرتك الخاصة. إن ارتكبت خطأً، انقر على زر "مسح Reset" لإلغاء كل ما فعلته والعمل من جديد. الخلاصة نأمل أن تكون قد استمتعت واستفدت مما قدمناه في مقالنا عن تنسيق النصوص في CSS، وسنتابع العمل في المقال القادم على تنسيق قوائم HTML. ترجمة -وبتصرف- للمقال Fundamentals text and font styling اقرأ المزيد المقال السابق تنظيم الشيفرة في CSS. تعرف على أساسيات لغة CSS توثيق لغة CSS العربي. تنسيق نصوص صفحات الويب باستخدام CSS. التنسيقات الأساسية للعناصر في CSS.

تنظيم شيفرة CSS حالما تبدأ العمل على ملفات تنسيق ضخمة ومشاريع كبيرة ستكتشف أن صيانة ومتابعة ملفات التنسيق الضخمة ليس أمرًا سهلًا، لهذا سنلقي نظرةً في هذا المقال على بعض أفضل الممارسات التي ينبغي اتباعها في كتابة تنسيقات CSS لتسهيل الصيانة والتعديل وبعض الحلول التي يستخدمها الآخرون وتحسّن القدرة على متابعة وصيانة شيفرات التنسيق. ننصحك قبل المتابعة في قراءة هذه المقال أن: تطلع على أساسيات استخدام الحاسوب وتصفح الويب. تحضّر بيئة عمل بسيطة كما تحدثنا مسبقًا في المقال تثبيت البرمجيات الأساسية، وتتفهم طريقة إنشاء وإدارة الملفات كما شرحناها في مقال التعامل مع الملفات. تطلع على أساسيات HTML كما شرحناها في سلسلة المقالات مدخل إلى HTML. تتفهم أساسيات CSS كما شرحناها في سلسلة المقالات خطواتك الأولى في CSS. نصائح لترتيب شيفرات CSS إليك بعض الاقتراحات العامة لطرق تنظيم وترتيب ملفات شيفرة CSS: هل هناك نموذج محدد في تنسيق شيفرة المشروع؟ إذا كنت تعمل ضمن فريق على مشروع موجود مسبقًا، عليك أن تتحقق أولًا من وجود دليل خاص بتنسيق شيفرة CSS ضمن المشروع، إذ لا بد أن تلتزم بالإرشادات الموجودة في الدليل بدلًا من تطبيق ما تفضّله أنت من القواعد. لا توجد غالبًا معايير لتحديد ما هي الطريقة الصحيحة أو الخاطئة لتنفيذ المطلوب، لكن ما يهم فعلًا هو التناسق consistency. الحفاظ على التناسق إذا كنت تعمل وفق قواعد خاصة بمشروع أو كنت تعمل وحيدًا، لا بد من المحافظة على تناسق أسلوب العمل. يمكنك أن تضمن التناسق بطرق عدة، كأن تستخدم نفس أسلوب تسمية الأصناف، أو اتباع طريقة ثابتة في وصف الألوان، أو المحافظة على الأسلوب ذاته في كتابة الشيفرة، كأن تستخدم مفتاح الجدولة Tab دائمًا لإزاحة الشيفرة ضمن الملف، أو تستخدام مفتاح المساحة الفارغة Space بدلًا عنه وفي حال استخدمت المساحة الفارغة ما هو مقدار المساحة الفارغة الذي تعتمده. يساعدك وجود قواعد ثابتة وموحدة تتبعها باستمرار على تقليل العبء الفكري عند كتابة CSS نظرًا لوجود قراراتٍ قد اتخذتها مسبقًا. تنسيق قواعد CSS لتكون سهلة القراءة يستخدم المطورون طريقتين أساسيتين في كتابة شيفرات CSS أحدها كتابة جميع القواعد على نفس السطر على النحو التالي: .box {background-color: #567895; } h2 {background-color: black; color: white; } بينما يفضل آخرون كتابة كل قاعدة على سطر جديد كما يلي: .box { background-color: #567895; } h2 { background-color: black; color: white; } لن يؤثر ذلك على تنفيذ تلك القواعد، لكن من الواضح أن كتابة كل خاصية وإلى جوارها قيمتها ضمن سطر جديد أسهل قراءةً. التعليقات على الشيفرة تساعد التعليقات التي تضيفها إلى الشيفرة أي مطوّر سيعمل مستقبلًا على شيفرتك، كما تساعدك أيضًا في تذكر ما كتبته عند عودتك إلى العمل على ملف التنسيق بعد انقطاع. /*CSS هذا مثال عن التعليقات في يمكن كتابة التعليق على أكثر من سطر */ من النصائح المفيدة في هذا الصدد هي كتابة كتلة من التعليقات بين الأقسام المنطقية في ملف التنسيق أيضًا كي يتسنى لك الوصول إلى أي منها بسهولة عند قراءة ملفك أو استخدامها مثل عبارات للبحث عن القسم المطلوب من شيفرة CSS. إذا استخدمت نصًا لا يظهر ضمن الشيفرة، يمكن الانتقال من قسم يبدأ بالمحرفين || إلى آخر بالبحث عن هذين المحرفين. /* || تنسيقات عامة */ /* … */ /* || تنسيق خطوط الكتابة */ /* … */ /* || تنسيق الترويسات وعناصر التنقل الرئيسية */ /* … */ لا حاجة إلى كتابة تعليقات حول كل ما تفعله شيفرتك، فالكثير من القواعد تشرح نفسها بنفسها، لكن ما تحتاج إلى التعليق عليه هو عادةً نقاط محددة اتخذت قرارًا عندها لأسباب خاصة، فقد تستخدم خاصية محددة بطريقة معينة لتحاشي مشكلات التوافق مع المتصفحات الأقدم. إليك مثالًا: .box { background-color: red; /* fallback for older browsers that don't support gradients */ background-image: linear-gradient(to right, #ff0000, #aa0000); } قد تستخدم كذلك قواعد تنسيق وجدتها في دورة تعليمية لكنها ليس واضحة تمامًا أي لا تشرح نفسها بنفسها، لذا من الأفضل في هذه الحالة إضافة تعليق يضم عنوان URL لتلك الدورة التعليمية. ستدرك أهمية ذلك عندما تعود إلى هذا الملف بعد فترة طويلة محاولًا تذكر أنك تعلمت شيئًا من دورة تعليمية مميزة حول موضوع تحتاجه ولا تتذكر أين اطلعت عليها. تقسيم ملف CSS إلى أقسام منطقية من الجيد أن تضع التنسيقات العامة الأكثر شيوعًا في بداية الملف، ونقصد بذلك جميع التنسيقات التي تطبّق على العناصر عمومًا ما لم ترد تخصيص قواعد محددة لعنصر محدد، وستضع غالبًا قواعد لتنسيق العناصر التالية: متن صفحة الويب body. الفقرات p. العناوين الرئيسية h1, h2, h3, h4, h5. القوائم المرتبةul وغير المرتبة ol. خصائص الجداول table. الروابط التشعبية. نضع في هذا القسم من ملف الشيفرة التنسيق الافتراضي لعناصر الموقع مثل تنسيقات جداول البيانات والقوائم وهكذا: /* || قواعد تنسيق عامة */ body { /* … */ } h1, h2, h3, h4 { /* … */ } ul { /* … */ } blockquote { /* … */ } يمكن أن نعرّف بعد هذا القسم مجموعةً من الأصناف المساعدة، مثل الأصناف التي تزيل تنسيق بعض القوائم التي نعرضها بأكثر من طريقة، فإذا أردت استخدام خيارات تنسيق متعددة وتعرف أنك ستغيّر تنسيق العديد من العناصر المختلفة لإنجاز كل خيار، من الأفضل إذًا وضع قواعد كل خيار في صنف خاص في هذا القسم. /* || الأصناف المساعدة */ .nobullets { list-style: none; margin: 0; padding: 0; } /* … */ نضع بعد ذلك كل التنسيقات التي تُستخدم على كامل الموقع، مثل تخطيط الصفحات الأساسي والترويسات وتنسيق أدوات التنقل وما شابه في قسم خاص: /* || تنسيقات كامل الصفحات */ .main-nav { /* … */ } .logo { /* … */ } نخصص أخيرًا قسمًا يضم تنسيقات CSS لأغراض مخصصة، أو ما يمكن أن يتغير مع سياق الصفحة، أو لصفحات معينة، أو حتى لمكوّنات معينة: /* || صفحات المخزن */ .product-listing { /* … */ } .product-box { /* … */ } يساعدك هذا الترتيب على الأقل في تكوين صورة عن المكان الذي تبحث فيه ضمن ملف الشيفرة عن شيءٍ ما تريد تغييره أو استبداله. تجنب استخدام محددات شديدة التخصيص عندما تبني محددًا مخصصًا جدًا، ستجد أنك ستعيد استخدام فقرات من شيفرتك مرارًا لتطبيق نفس قواعد هذا المحدد على عناصر أخرى، فلو أردت بناء محدد يستهدف الفقرات <p> التي تمتلك الصنف box وتتواجد ضمن العناصر <article> التي تمتلك الصنف main على النحو التالي: article.main p.box { border: 1px solid #ccc; } وأردت أن تكرر نفس القواعد على عناصر لا تمتلك الصنف main أو على عنصر آخر غير، فعليك حينها إضافة محدد جديد إلى هذه القواعد، أو بناء مجموعة جديدة من القواعد. يمكنك بدلًا من ذلك استخدام محدد بسيط box. لتطبيق قواعدك على أي عنصر يمتلك الصنف box: .box { border: 1px solid #ccc; } لاشك أن قد تضطر أحيانًا إلى إنشاء محدد شديد التخصيص، لكن هذا الأمر استثنائي عمومًا وليس شائعًا. تقسيم ملفات التنسيق الكبيرة إلى ملفات أصغر في الحالات التي تحتاج فيها إلى تنسيقات مختلفة جدًا لأجزاء محددة من موقعك، قد ترى ضرورة وجود ملف يتضمن القواعد العامة، إضافةً إلى ملفات أصغر تضم قواعد مخصصة لتنسيق تلك الأجزاء، ويمكنك طبعًا ربط أي صفحة باكثر من ملف تنسيق، إذ تنص قواعد التعاقب أن التنسيقات الموجودة في آخر ملف يربط مع الصفحة ستطبّق أولًا. لنفترض على سبيل المثال أن قسمًا من موقعك هو متجر إلكتروني ويحتاج إلى الكثير من القواعد المختلفة لتنسيق قوائم المنتجات والنماذج الخاصة بعمل المتجر، فمن المنطقي هنا وضع تلك القواعد في ملف تنسيق خاص يرتبط فقط مع صفحات المتجر، وهذا يسهل ترتيب شيفرتك وتنظيمها أكثر، وفي الحالات التي يعمل فيها أكثر من مطوّر على كتابة التنسيقات، ستقل منطقيًا عدد الحالات التي يُضطر فيها أكثر من مطور للعمل على الملف ذاته. أدوات أخرى قد تساعد في تنظيم شيفرة CSS ليس لدى تنسيقات CSS طريقةً خاصةً كي تُنظّم، لهذا يعتمد مستوى تناسقها عليك في المقام الأول. لقد طوّرت مجتمعات الويب أدوات كثيرة ونُهجًا تساعدك في إدارة مشاريع CSS الضخمة، وقد تصادف بعضها عند العمل مع آخرين، وطالما أنها مفيدة غالبًا، سنتحدث عن بعضها باختصار. أساليب CSS بدلًا من ابتكار قواعد خاصة في كتابة CSS، قد تستفيد من أحد النهج التي صممها مجتمع الويب واختبرها في مشاريع كثيرة. أساليب CSS هي أساسًا دليل لكتابة التنسيقات تتخذ نهجًا مهيكلًا في كتابة الشيفرة وتنظيمها. تميل هذه الأساليب إلى تصيير CSS مطوّلًا مقارنةً بما قد تفعله إذا كتبت وحسّنت كل محدد ليضم مجموعةً مخصصةً من القواعد لتنسيق المشروع. قد تكون هيكلية الملفات أضخم عند اعتماد أحد هذه الأساليب، وطالما أن الكثير منها واسع الاستخدام، فقد يفهم المطورون الآخرون هذا النهج ويستخدمونه لكتابة شيفرات CSS بنفس الأسلوب بدلًا من محاولة فهم أسلوبك الخاص. أسلوب OOCSS تدين معظم النهج التي ستواجهها بالفضل إلى مبدأ تنسيقات CSS غرضية التوجه Object Oriented CSS -أو اختصارًا OOCSS، وهو نهج اشتهر نتيجةً لأعمال نيكول سوليفان Nicole Sullivan. تنص الفكرة الأساسية لهذا النهج على فصل شيفرة CSS إلى كائنات يمكن استخدامها من جديد في أي مكان تريده في موقعك، ومن الأمثلة النموذجية لنهج OOCSS هو النمط الذي يوصف بأنه كائن الوسائط المتعددة Media Object، ويتكون هذا النمط من صورة ثابتة الحجم أو فيديو أو غيرها من العناصر من ناحية، كما يضم حاوية مرنة للمحتوى من ناحية أخرى. يُستخدم هذا النمط كثيرًا ضمن مواقع الويب لعرض التعليقات أو القوائم وغيرها. إذا لم تستخدم نهج OOCSS، لربما ستنشئ قواعد CSS مخصصة للأجزاء المختلفة التي استًخدم فيها هذا النمط، إذ قد تنشئ مثلًا صنفين أحدهما يُدعى comment ويضم جملةً من القواعد التي تنسق أجزاء المكوّن، والآخر يُدعى list-item ويضم نفس القواعد التي يضمها الصنف مع استثناءات بسيطة، إذ يضم الصنف list-item حافةً سفلية وليس لصورته حواف بينما لصور الصنف comment حواف على محيطها. .comment { display: grid; grid-template-columns: 1fr 3fr; } .comment img { border: 1px solid grey; } .comment .content { font-size: 0.8rem; } .list-item { display: grid; grid-template-columns: 1fr 3fr; border-bottom: 1px solid grey; } .list-item .content { font-size: 0.8rem; } في المقابل، ستنشئ إذا اعتمدت نهج OOCSS نمطًا واحدًا يُدعى media يضم كل التنسيقات المشتركة بين النمطين السابقين، وسيكون صنفًا أساسيًا يضم الأشياء التي تحدد كائن الوسائط المتعددة عمومًا، ثم يمكن إضافة صنف إضافي للتعامل مع الاختلافات البسيطة، وهذا ما يوسّع التنسيق السابق من عدة نواحٍ: .media { display: grid; grid-template-columns: 1fr 3fr; } .media .content { font-size: 0.8rem; } .comment img { border: 1px solid grey; } .list-item { border-bottom: 1px solid grey; } إذ ستحتاج إلى تطبيق كلا الصنفين media و comment ضمن شيفرة HTML: <div class="media comment"> <img src="" alt="" /> <div class="content"></div> </div> وكذلك ستحتاج إلى كلا الصنفين media و list-item لتنسيق عناصر القائمة: <ul> <li class="media list-item"> <img src="" alt="" /> <div class="content"></div> </li> </ul> ما فعلته نيكول سوليفان عند توصيف هذا النهج وتطويره هو دفع الأشخاص الذين لا يتبعون تمامًا نهج OOCSS لإعادة استخدام CSS عمومًا بهذا الأسلوب، وبالتالي أثرت على طريقة فهمنا لتنظيم شيفرات التنسيق. أسلوب BEM هو اختصار لعبارة Block Element Modifier وبالعربية معدّل عنصر الكتلة. تُعرّف الكتلة في BEM على أنها كيان قائم بذاته، مثل الأزرار والقوائم والشعارات. العنصر هو شيء ما، مثل عناصر القائمة أو العنوان الذي يرتبط ارتباطًا وثيقًا بالكتلة ويقع داخلها؛ أما المُعدّل modifier فهو راية تشير إلى تغيّر في تنسيق الكتلة أو العنصر. ستميز الشيفرة التي تستخدم هذا النهج من الاستخدام المكثف للشرطة السفلية والشرطة العادية ضمن أصناف CSS. يمكن على سبيل الاطلاع رؤية الأصناف المطبّقة على شيفرة HTML الخاصة بالصفحة BEM Naming conventions: <form class="form form--theme-xmas form--simple"> <label class="label form__label" for="inputId"></label> <input class="form__input" type="text" id="inputId" /> <input class="form__submit form__submit--disabled" type="submit" value="Submit" /> </form> تتشابه الأصناف الإضافية هنا مع تلك المستخدمة في مثال OOCSS، لكنها تستخدم الأسلوب الصارم في تسمية الأصناف وفق BEM. يُستخدم BEM كثيرًا في مشاريع ويب الأضخم، ويكتب الكثيرون تنسيقات CSS وفق هذا الأسلوب. من المؤكد أنك ستواجه الكثير من الأمثلة والدورات التعليمية التي تستخدم صياغة BEM دون أن تذكر سبب هيكلة CSS فيها بهذا الشكل. بعض الأنظمة الشائعة الأخرى لتنسيق شيفرة CSS هناك الكثير من الأنظمة الشائعة الأخرى، بما في ذلك معمارية CSS القابلة للتوسع والتقسيم Scalable and Modular Architecture for CSS -أو اختصارًا SMACSS- التي أنشأها جوناثان سنوك Jonathan Snook، و ITCSS لمؤلفها هاري روبيرتس Harry Roberts، و Atomic CSS (ACSS) من إنتاج ياهو أساسًا. إذا واجهتك بعض المشاريع التي تستخدم أيًا من الأساليب السابقة، ستجد لحسن الحظ العديد من المقالات والأدلة التي ترشدك إلى طريقة كتابة الشيفرات وفقها، لكن الناحية السلبية فيها هي التعقيد الزائد وخاصة عند كتابة تنسيقات لمشروعات صغيرة. الأنظمة الجاهزة لكتابة CSS من الطرق الأخرى المستخدمة في تنظيم شيفرة CSS هي استغلال بعض الأدوات المتاحة لمطوري الواجهات الأمامية، والتي تتيح نهجًا قريبًا من النهج البرمجي لكتابة CSS. فهناك العديد من الأدوات التي نشير إليها على أنها أدوات معالجة أولية pre-processors أو نهائية post-processors؛ إذ تعمل المعالجات الأولية على الملفات الخام وتحوّلها إلى ملفات تنسيق؛ بينما تعمل المعالجات النهائية على ملفات التنسيق الجاهزة، ربما لتحسينها كي تُحمّل بسرعة أكبر. لا بد أن تكون بيئة التطوير التي تستخدمها قادرةً على تنفيذ سكربتات المعالجات الأولية والثانوية قبل أن تفكر في استخدام تلك الأدوات. تدعم الكثير من محررات الشيفرة هذه الأمور، كما تستطيع تثبيت أدوات تعتمد على أسطر الأوامر لمساعدتك في ذلك. من أكثر المعالجات الأولية شعبيةً هي Sass. لن نتوسع في شرح هذا المعالج بل سنكتفي بتوضيح بعض الأشياء التي يقدمها Sass، فهي مفيدة حقًا من باب تنظيم شيفرة التنسيق حتى لو لم تستخدم أية ميزات أخرى تقدمها. وإذا أردت تعلم المزيد، يمكنك العودة إلى توثيق Sass على موسوعة حسوب. تعريف متغيرات تمتلك CSS حاليًا خاصيات مخصصة أصيلة، مما يقلل أهمية ميزة المتغيرات، لكن من الأمور الجيدة التي تقدمها Sass في هذا الصدد هي القدرة على تعريف جميع الألوان والخطوط المستخدمة في المشروع على شكل إعدادات، ثم استخدام المتغيرات ضمن كامل المشروع، فلو أدركت مثلًا أنك استخدمت الدرجة الخاطئة من اللون الأزرق، عليك عندها تغييرها في مكان واحد فقط. عند استخدام متغير يُدعى base-color$ على سبيل المثال كما في السطر الأول من الشيفرة التالية، يمكننا عندها استخدامه في أي مكان من ملف الشيفرة نحتاج فيه إلى هذا اللون: $base-color: #c6538c; .alert { border: 1px solid $base-color; } عندما تُصرّف شيفرة Sass سينتهي بك الأمر إلى شيفرة CSS التالية: .alert { border: 1px solid #c6538c; } تصريف ملفات تنسيق المكونات رأينا سابقًا أن أحد طرق تنظيم CSS هي تقسيم الملف إلى ملفات أصغر، وعند استخدام Sass، يمكنك الاستفادة من هذا الأسلوب إلى حد بعيد وسينتج لديك الكثير من الملفات الصغيرة جدًا إلى درجة وجود ملف منفصل لكل مكوّن. ستتمكن عند استخدام الوظيفة "partials" المدمجة مع Sass من تصريف جميع هذه الملفات إلى عدد أقل بكثير من الملفات النهائية التي تربطها بموقع الويب، فقد يكون لديك مثلًا عدة ملفات تنسيق ضمن مجلد واحد، ولتكن foundation/_code.scss و foundation/_lists.scss و foundation/_footer.scss و foundation/_links.scss وغيرها، يمكنك حينها استخدام القاعدة use@ لتضمينها ضمن ملفات أخرى: // foundation/_index.scss @use "code"; @use "lists"; @use "footer"; @use "links"; إذا جرى تحميل جميع الأجزاء ضمن الملف "index" كما حدث في الشيفرة السابقة، يمكن حينها تحميل كامل المجلد ضمن ملف آخر بخطوة واحدة: // style.scss @use "foundation"; ملاحظة: من السهل تجريب Sass باستخدام موقع CodePen، إذ ستتمكن من تمكين Sass عند العمل مع شيفرة CSS عن طريق إعدادات "Pen"، وعندها سيشغّل CodePen محلل Sass كي ترى نتيجة عملك وكأنك طبقت قواعد CSS نمطية. قد ترى أحيانًا أن دورات تعليم CSS تستخدم Sass بدلًا من CSS النمطية في أمثلتها المكتوبة عن طريق CodePen، لهذا سيفيدك الإطلاع على ذلك قليلًا. تحسين الشيفرة باستخدام أدوات المعالجة النهائية إذا كنت تقلق من زيادة حجم ملفات CSS بزيادة كمية التعليقات مثلًا أو زيادة المساحات الفارغة، فخطوة المعالجة النهائية مفيدة هنا في التخلص من أي شيء غير ضروري في نسخة الإنتاج. من الأمثلة على أدوات المعالجة النهائية هو cssnano. الخلاصة هذا هو المقال الأخير ضمن مجموعة المقالات التي تغطي وحدات بناء CSS، وكما ترى يمكنك اتباع أساليب عدة في متابعة رحلتك في استكشاف CSS انطلاقًا من هذه النقطة. ترجمة -وبتصرف- للمقال Organizing your CSS اقرأ أيضًا تنسيقات المتصفحات المخصصة ودعمها وأداءها في CSS مدخل إلى Sass مواضيع متقدمة في CSS أنواع محددات التنسيق في CSS

يشيع استخدام مصطلح صفحة هبوط Landing Page لتسمية صفحات ويب محددة في مجال التجارة الإلكترونية وهي عادة تلك الصفحات التي تنقلنا إليها روابط دعائية أو صور المنتجات التي يجري تسويقها. ونظرًا لأهمية هذه الصفحات في عالم التسويق الإلكتروني والتجارة الإلكترونية، لابد من الاهتمام بتصميمها بأسلوب عصري فعّال قادر على جذب العميل وتوفير كل المعلومات التي يحتاجها بطريقة سهلة وواضحة، وهذا ما نهدف إليه في هذا المقال. ما هي صفحات الهبوط صفحات الهبوط هي صفحات محددة ضمن موقع ويب أو متجر إلكتروني تخدم غاية واحدة تتمثل في تحويل الزائر إلى عميل أو إلى عميل محتمل عندما ينقر على رابط دعائي أو صورة منتج في نفس الموقع أو في مواقع أخرى ويقوده ذلك إلى هذه الصفحة. وحتى نقول أن صفحة ويب ما هي صفحة هبوط لا بد من توافر الميزات التالية فيها: أن تتمكن هذه الصفحة من الحصول على بيانات ومعلومات عن الزائر طواعية مقابل اطلاعه على العرض الذي تقدمه له، وقد يكون ذلك عن طريق ملء نموذج أو تنزيل استبيان والإجابة عليه ثم تحميله من جديد. أن يكون الغرض الوحيد من هذه الصفحة تحويل الزائر إلى عميل محتمل، لذلك لا بد من تصميم صفحة الهبوط على هذا النحو دون أي تشويش على الهدف الرئيسي. كيف تعمل صفحات الهبوط تبدأ العملية عندما يشاهد الزائر رابطًا إلى الصفحة ضمن موقع إلكتروني ما. قد يكون هذا الرابط صورة أو زر أو عبارة تدفع الزائر بأسلوب جذّاب للنقر عليه ويصل به الأمر إلى صفحة الهبوط (تُدعى هذه الصور أو الأزرار بمحفزات اتخاذ القرار Call Of Action). تضم صفحة الهبوط غالبًا شرحًا مقتضبًا عن الموضوع بخط جلي وأسلوب محفّز، مع وجود زر مميز يسترعي انتباه الزائر ويدفعه للنقر عليه. سيصل الأمر بالزائر بعد النقر إلى نموذج من حقول عدة يطلب منه ملؤها بالبيانات الشخصية، وقد تطلب منه الصفحة قبل النقر على الزر أن يضع بريده الإلكتروني، ولهذا الأمر أهميته لأنها تمكن صاحب الموقع من الحصول على البريد الإلكتروني للزائر إذا قرر لاحقًا عدم المتابعة في تقديم بياناته الشخصية. إن قدّم الزائر بياناته الشخصية أو بريده الإلكتروني على الأقل، فسترسل الصفحة هذه البيانات إلى التخزين ضمن قواعد بيانات العملاء والأدلاء lead database. وستكون الخطوة التالية استهداف هذا العميل المحتمل بعروض تتناسب مع بياناته، وخاصة عند تجميع معلومات عن نوع العروض التي تحفّز هذا الشخص. تُدعى هذه التقنية بتكوين العميل المحتمل lead nurture، والعميل المحتمل الذي هُيّئ بهذا الشكل، لن يستغرق وقتًا حتى يصبح عميلًا فعليًا وهذا ما سينعكس إيجابًا على أعمالك. ترى الفلسفة الكامنة وراء صفحات الهبوط أن تقديم لزائر بياناته طوعيًا للاطلاع على العرض المقدم في هذه الصفحة يدل على أهمية هذا المنتج أو الخدمة بالنسبة له، وهذه البيانات في المقابل قيّمة جدًا بالنسبة للمسوقين وستكون النتيجة ربحًا لكلا الطرفين. ما الفرق بين صفحات الهبوط والمواقع الإلكترونية تتكون المواقع الإلكترونية مهما اختلفت أنواعها وحجومها والغاية منها من عدد محدود من صفحات الويب، ولكل صفحة ويب هدف معين سواء كان عرض محتوى معين، أو التفاعل مع المستخدم، أو تقديم خدمة معينة. وصفحات الهبوط ليست استثناءً، فهي صفحات ويب تشبه تمامًا من ناحية التصميم والبرمجة بقية صفحات الويب لكنها تنفرد بوظيفة محددة وبالتالي يجب أن يراعي تصميمها هذه الميزة. تستخدم المواقع الإلكترونية وخاصة تلك التي تروّج للشركات والأعمال العديد من صفحات الهبوط، وعليك أن تفكّر بصفحات الهبوط في هذه الحالة بأنها جزء من الموقع قد يصله الزائرون دون الدخول إلى موقعك مباشرة بل عن طريق روابط خارجية لمتابعة عروضك الخاصة، فهي بمثابة بطاقات دعوة أو اشتراك من قبلك تقدمها لزوّارك بغية الحصول على بياناتهم وولائهم لعلامتك التجارية ولمنتجاتك في مراحل قادمة. ما هي أنواع صفحات الهبوط تنقسم صفحات الهبوط إلى ثلاثة أنواع رئيسية: صفحات هبوط مستقلة standalone كصفحات التمهيد click through وصفحات اصطياد العميل lead capture. المواقع المصغّرة microsites وهي مواقع صغيرة مكونة من عدة صفحات وتأتي عادة مكملة لموقع رئيسي. صفحات هبوط داخلية وهي صفحات هبوط تعريف بالمنتجات ضمن الموقع الإلكتروني نفسه. لنتعرف على أبرز مميزات الأنواع المختلفة لصفحات الهبوط والفرق بينها. صفحات التمهيد تُعد صفحات التمهيد click through من أبسط أنواع صفحات الهبوط، وتكون غايتها الأساسية توضيح تفاصيل العرض المقدّم وميزاته بأسلوب قادر على إقناع الزائر اتخاذ قرار الشراء أو المشاركة. إذًا مهمتها فقط شرح العرض ثم النقر على الزر المخصص للانتقال بك إلى موقع الشركة لإكمال العملية. صفحات اصطياد العملاء إن المهمة الأساسية لهذه الصفحات هي استخلاص بيانات الزوار وخاصة الاسم والبريد الإلكتروني لهذا تُعرف أحيانًا بصفحات العصر squeeze pages. تصمم هذه الصفحات بأسلوب يمنعك من التراجع إلى الصفحة السابقة ولا تضم أية روابط أو عناصر تنقل بل زر إرسال البيانات فقط. تستخدم الشركات هذا النمط من الصفحات لبناء قوائم بريد إلكتروني للعملاء المحتملين للعمل على تحويلهم إلى عملاء فعليين. صفحات الإعلانات وهي بمثابة الأقنية الإعلامية لعالم التسويق الإلكتروني وتتميز بأنها مليئة بالإعلانات عن عروض كثيرة. إذ تستمر بالتمرير إلى الأسفل لتجد المزيد والمزيد من العروض وترى نفسك غارقًا في متابعة وقراءة شروحات ومزايا براقة تدفعك إلى معرفة المزيد عن هذا العرض. وحتى لو بدأت تشكك في مصداقيته، لكنك ستحاول معرفة نهاية العرض سواء لمجرد الفضول أو آملًا أن يكون العرض صحيحًا. قد تستخدم الشركات هذه النوع من الصفحات لكي تُعرف منتجاتها على أوسع نطاق. صفحات الهبوط سريعة الانتشار تُستخدم صفحات الهبوط سريعة الإنتشار Viral land pages من قبل الشركات لنشر اسم الشركة ومنتجاتها ضمن أكبر قدر ممكن من المواقع. تضم هذه الصفحات عادة بعض الألعاب أو مقاطع الفيديو أو الطرائف الجميلة مع رابط إلى الشركة التي أنشأت هذه الصفحة على شكل شعار صغير أو مع عبارة تشير إلى دور الشركة في أسفل الصفحة. تنتشر هذه الصفحات بسرعة عن طريق تقديم محتوى خفيف ومميز ضمن مواقع يكثر متابعينها أو عن طريق إضافة روابط لمواقع التواصل الاجتماعي كي يتمكن معجبو هذه الصفحات بمشاركتها على أوسع نطاق ممكن. المواقع المصغرة وهي مواقع جانبية تكمّل الموقع الرئيسي للشركة وتضم محتوىً خاصًا يتعلق بحملة إعلانية ولفترة محدودة. على الرغم من أنها تضم أكثر من صفحة لكنها تعد صفحات هبوط لأنها تستقطب الزوار والعملاء المحتملين من كل مكان ضمن شبكة ويب. وكمثال عليها صفحة هبوط لتعريف بمنتج جديد أو الدعاية لفرع محلي يقدم خدمات لعملاء الشركة وهكذا. تستخدم هذا النوع من صفحات الهبوط الكثير من الشركات المعروفة التي تهتم بتخصيص محتوى مميز لتسويق منتج أو خدمة. صفحات هبوط لعرض تفاصيل المنتج وهي صفحات ويب نمطية ضمن موقع الويب تضم كل المعلومات المتعلقة بالمنتج الذي تسوّقه الشركة. فهي صفحات غير مخصصة كليًا للتعريف بالمنتج أو تقديم العرض بل هي جزء من الموقع لهذا لن تكلّف كثيرًا من ناحية التصميم لكنها ستضم بالتأكيد بعض المحتوى الذي يشتت تركيز الزائر كونها جزء من الموقع مثل الترويسة وأزرار التنقل. أفكار لتصميم وبناء صفحات هبوط ناجحة إن الغاية الأساسية من صفحات الهبوط كما أسلفنا هي تحويل الزوار إلى عملاء، لهذا لا بد من الاهتمام ببعض التفاصيل عند بناء صفحات الهبوط نستعرضها في الفقرات القادمة. 1. استخدم عناوين ملفتة لا بد من جذب انتباه الزائر مباشرة إلى العنوان الأساسي لصفحة الهبوط، فهو أول ما تقع عينا الزائر عليه عند وصوله إلى هذه الصفحة. فإن كان العنوان واضحًا ومشجعًا ومباشرًا سيدفع الزائر إلى إكمال قراءة العرض ليعرف التفاصيل ويزداد احتمال طلبه للعرض أو مشاركة الصفحة مع غيره. فإن كان عرضك هو حسم على منتج معين فاكتب عنوانًا ينص عن مقدار هذا الحسم وعلى أية منتج بخط كبير مستخدمًا لونًا يبرز العنوان بوضوح عن الخلفية مع بعض المساحات الفارغة حوله. 2. أعلم الزائر بفائدة عرضك مباشرة دون مواربة عليك صياغة محتوى صفحة الهبوط صياغةً واضحةً تنقل فكرة عرضك والفوائد التي سيجنيها الزائر من المشاركة. لا تخبئ للزائر أية مفاجئات ولا تجعله يتخبط فيما يقرأ ولا تدع مجالًا للغموض في المفردات المستخدمة كأن تشير إلى تخفيضات مميزة دون ذكر قيمة هذه التخفيضات وأنواع المنتجات التي تُطبق عليها. حاول أن تستخدم قائمة من النقاط لتشرح عرضك باختصار لأن الزائر سيفقد اهتمامه بالصفحة إن وجد محتواها كثيفًا ولن يتابع القراءة بكل تأكيد. 3. فكر جيدا قبل تصميم نموذج استخلاص بيانات الزائر النموذج هو مجموعة من الحقول التي يملؤها الزائر ببياناته ثم ينقر على زر الإرسال لتنقل هذه البيانات وتخزن في المكان المناسب. تأكد قبل كل شيء من نوع صفحة الهبوط، فإن كانت تمهيدية، لا تزد عدد حقول النموذج عن حقلين الأول للاسم والثاني للبريد الإلكتروني وإن استخدمت حقلًا واحدًا فقط للبريد الإلكتروني فهذا أفضل غالبًا. فإن قرر الزائر الانتقال إلى صفحة المشاركة في العرض، ليكن عدد حقول البيانات متناسبًا مع المرحلة التي وصل إليها الزائر في رحلة الشراء أو المشاركة. أي بعبارات أخرى لا تصدم الزائر بعدد كبير من الحقول التي عليه ملؤها، فسيؤدي ذلك إلى مغادرته دون المشاركة. 4. تحاشى استخدام قوائم التنقل والروابط إلى خارج الصفحة قوائم التنقل هي أزرار تنقلك إلى الصفحة التالية أو السابقة، وبما أن الغاية الرئيسية من صفحات الهبوط هو أسر الزائر بالمحتوى أو العرض الذي توصله، لهذا فوجود مثل هذه القوائم ستشتت الزائر وقد تدفعه مباشرة إلى النقر عليها والخروج دون المشاركة. لا تضع مثل هذه القوائم أو أية روابط تسمح للزائر بالخروج من الصفحة سوى بالانتقال إلى المشاركة عن طريق النقر على زر أو رابط المشاركة CTA أو Call To Action وهذا ما يدفعه إلى قراءة العرض. فإما أن يتابع لأن العرض قد يعجبه، وإما أن يتابع ليجد طرقًا للخروج! 5. استخدم صور مناسبة تأكد من استخدام صورة واضحة وملائمة لطبيعة العرض الذي تقدّمه كي تجذب انتباه الزائر. فأغلب الظن أن الزائر سيبقى أطول في صفحتك إن لفتت الصورة انتباهه وقدمت له تفاصيل سواء مرسومة أو مكتوبة بطريقة ملفتة. 6. استخدم أيقونات المشاركة على مواقع التواصل الاجتماعي على الرغم من انها روابط بشكل أو بآخر إلا أنها مفيدة لمشاركة العرض مع آخرين ينشطون على مواقع التواصل الاجتماعي. لكن انتبه عند استخدام هذه الأيقونات بأن تفتح نافذة جديدة تقود مباشرة إلى مشاركة عرضك مع آخرين، لا أن تنقل الزائر من صفحتك إلى صفحة أخرى. 7. قد يفيدك استخدام شهادات الآخرين أو الإشارة إلى شركاء موثوقين من الجيد أن تشتري شيئًا أو تترك بخدمة يشيد بها الآخرون بعد تجريبها، لهذا إن وجدت أن بعض الآراء التي تشيد ببعض مزايا منتجك مفيدة فافعل ذلك دون أن يكون الأمر فجًا. وإن كان منتجك قد حصل على جائزة ما أو شهادة جودة فمن الجي الإشارة إلى ذلك عن طريق صورة صغيرة معبرة أسفل العرض، كأن يكون منتجك قد حصل على شهادة ايزو للجودة مثلًا! 8. اجعل صفحة الهبوط متجاوبة واختبر صحة عملها تأكد من أن الصفحة متجاوبة مع الهواتف الجوالة وأنها تعمل كما هو مطلوب وأن النقر على زر الدعوة لاتخاذ إجراء CTA سينفّذ العمل المطلوب منه دون أخطاء فهو المفصل الأهم في صفحات الهبوط. من المهم أيضًا أن تبقى تفاصيل العرض كاملة واضحة ضمن صفحة واحدة كي لا يضطر الزائر إلى التنقل نحو الأسفل لمتابعة القراءة فهذا سيسبب إلهاءً له، ونستثني من ذلك صفحات الإعلانات فهي مخصصة لهذا الغرض. وأخيرًا، ابق صفحة الهبوط ظاهرة بأكملها على شاشة جهاز المستخدم لا أن يكون جزءًا منها فقط ظاهرًا. لهذا السبب لابد من تصميم صفحة الهبوط بشكل متجاوب أي أن تتمكن من عرضها جيدًا على أي جهاز قد يستخدمه الزائر سواء حاسوب أو هاتف محمول. كيف تصمم صفحة هبوط يتعلق جواب هذا السؤال بك أولًا وأخيرًا، فإن كان هدفك استخدام قوالب جاهزة وتعديلها بما يناسبك حاجتك، ستجد ضالتك في الكثير من التطبيقات التي تساعدك على ذلك. أما إن أردت أن تحترف بناء صفحات الهبوط وتكون قادرًا على التعبير عن أفكارك بكل حرية وصولًا إلى مرحلة تصميم وبناء قوالب الصفحات وبيعها فعليك أن تتعلم تصميم صفحات الويب. استخدام تطبيقات لبناء صفحات الهبوط ستجد الكثير من تطبيقات أو مواقع ويب أو تطبيقات سطح المكتب التي تساعدك على بناء صفحة هبوط تشمل: صفحات لترقب العروض. صفحات لعرض منتجات. صفحات لتنسيق المناسبات والمؤتمرات والأحداث. قوالب جاهزة لنماذج استخلاص بيانات الزوار. قوالب جاهزة لتحضير صفحات الهبوط التمهيدية. تأتي الكثير من هذه التطبيقات مع واجهة مستخدم سهلة التعلم والاستخدام وتتيح عروض مجانية لاستضافة هذه الصفحات لكنها بالطبع محدودة من ناحية عدد الصفحات أو حجمها. نذكر من هذه التطبيقات Wix و SITE123 و Jimdo و ConvertKit و Carrd و ConvertFlow و Canava وغيرها الكثير. تصميم وبناء صفحات الهبوط من الصفر قد لا تتيح لك التطبيقات والقوالب الجاهزة جميع الإمكانات التي تتوقعها أو تطمح في تصميمها لإيصال أفكارك بالطريقة التي تريدها، لهذا لا بد من تعلم تصميم وتنسيق صفحات الويب. كما يتيح لك تعلم أساسيات تطوير الواجهات الأمامية لموقع الويب (واجهات المستخدم) الخبرات والأدوات اللازمة لتصمم وتبني أقوى وأفضل صفحات الهبوط ولن تجد بعدها صعوبة في تطبيق جميع الأفكار التصميمية التي تعزز عمل صفحاتك وتجعلها احترافية. تعلم تصميم صفحات الويب وصفحات الهبوط عبر أكاديمية حسوب تقدم أكاديمية حسوب دورة تطوير واجهات المستخدم والموجّه إلى الراغبين في دخول عالم تصميم وبرمجة واجهات المستخدم من الصفر دون الحاجة لخبرة مسبقة على مدى 66 ساعة فيديو تدريبية مع متابعة مستمرة لتطور مسيرتك من قبل مشرفين مختصين وتحصل في نهاية مسارات الدورة على شهادة معتمدة من أكاديمية حسوب. تعتمد الدورة على التطبيق العملي لبناء مشاريع حقيقية حتى تصبح مؤهلًا كمطوّر واجهات مستخدم وصفحات ويب وصفحات هبوط ومتاجر إلكترونية محترف. تضم الدورة المسارات التالية: أساسيات تطوير ويب. بناء واجهة مستخدم متطورة تشبه واجهة موقع YouTube. بناء صفحات الهبوط. تطوير متجر إلكتروني. تطوير موقع شركة. تطوير لوحة تحكم بالموقع. فإن كنت لا تمتلك خبرة مسبقة في مجال تطوير المواقع وواجهات المستخدم وصفحات الهبوط وتريد الانطلاق بثقة، أو كنت تمتلك خبرة بسيطة وترغب في صقل مهاراتك بالتعلّم الذاتي فهذه الدورة هي الخيار المثالي لك. خاتمة صفحات الهبوط هي صفحات ويب بميزات خاصة تساعد على ترويج منتجاتك التجارية وخدماتك من جهة وتوفير قاعدة بيانات تضم معلومات عن الزوار المهتمين بالعروض التي تقدمها وطبيعة ونوع هذه العروض وبالتالي ستتمكن من العمل بطريقة منهجية لكي تحولهم إلى عملاء. تحدثنا في هذا المقال عن أنواع صفحات الهبوط وكيف يعمل كل منها وتحدثنا عن أهم الممارسات التي يجب تعودها عند تصميم صفحات الهبوط والطرق المتاحة لتصميم صفحاتك سواء باستخدام تطبيقات جاهزة أو بتعلم تصميم صفحات الويب لتكون قادرًا على إيصال منتجاتك إلى أوسع شريحة من المهتمين وتزيد الوعي بعلامتك التجارية. اقرأ أيضًا 9 مبادئ لتصميم صفحة هبوط احترافية لماذا يجب استخدام صفحات الهبوط في التسويق عبر البريد الإلكتروني؟ ما الفرق بين تصميم المواقع الإلكترونية وتطوير المواقع الإلكترونية؟ تصميم مواقع الإنترنت وصفحات الهبوط لإنجاح التسويق الإلكتروني

قد تجد أن شيفرة CSS أحيانًا لا تنفّذ ما هو متوقع منها، فقد تعتقد أن محددّا ما لا بد وأن يطابق العنصر الذي تريده، لكن لا شيء يحدث، أو قد يكون الحجم الذي تريده لصندوق ما أكبر مما هو متوقع. لهذا سنرشدك في هذا المقال كيف تتعامل وتنقح اخطاءً كهذه في CSS، كما سنتحدث عن طريقة استخدام أدوات مطوري ويب DevTools الموجودة في كل المتصفحات الحديثة لتقصي المشاكل التي تواجهك. ننصحك قبل المتابعة في قراءة هذه المقال أن: تطلع على أساسيات استخدام الحاسوب وتصفح الويب. تحضّر بيئة عمل بسيطة كما تحدثنا مسبقًا في المقال تثبيت البرمجيات الأساسية، وتتفهم طريقة إنشاء وإدارة الملفات كما شرحناها في مقال التعامل مع الملفات. تطلع على أساسيات HTML كما شرحناها في سلسلة المقالات مدخل إلى HTML. تتفهم أساسيات CSS كما شرحناها في سلسلة المقالات خطواتك الأولى في CSS. الوصول إلى أدوات مطوري ويب عبر المتصفحات ستجد في مقال سابق بعنوان "أدوات مطوري ويب المدمجة في المتصفحات" دليلًا حديثًا يصف كيفية الوصول إلى أدوات مطوري ويب في متصفحات ويب ومنصات متعددة، وطالما أنك ستختار غالبًا متصفحًا محددًا عندما تبدأ تطوير المواقع، فستألف التعامل مع الأدوات المدمجة معه، لكن من المهم أن تعرف كيف تصل إلى هذه الأدوات في متصفحات أخرى، وهذا ما يساعدك على تكوين صورة واضحة عن الطريقة التي تصيّر فيها المتصفحات المختلفة صفحات الويب. سترى أيضًا كيف تركز المتصفحات على نقاط مختلفة عندما تبني أدوات تطوير الويب الخاصة بها، إذ يقدم لك متصفح فايرفوكس مثلًا أدوات ممتازة للتمثيل المرئي لتخطيطات CSS تسمح لك بتفحص وتحرير تخطيط الشبكة Grid Layouts أو الصندوق المرن Flexbox أو الأشكال Shapes وغيرها. وتمتلك معظم المتصفحات عمومًا الأدوات الأساسية نفسها كالأدوات المستخدمة في تفحّص الخاصيات وقيمها المطبقة على عناصر صفحة الويب، إضافةً إلى توفير إمكانية لتغيير هذه القيم من خلال نافذة المحرر. سنلقي نظرةً في هذا المقال على بعض الميزات المفيدة التي تقدمها أدوات مطوري ويب المدمجة مع متصفح فايرفوكس والمخصصة للتعامل مع CSS، لهذا السبب سنستخدم ملفًا معدًا لهذا الغرض، ويمكنك تحميله في نافذة جديدة ضمن المتصفح إذا أردت العمل عليه ومتابعة قراءة المقال في نفس الوقت، لكن لا تنسَ أن تفتح أدوات مطوري ويب كما أوردنا في المقال الذي أشرنا إليه قبل قليل. أسلوب شجرة DOM مقابل أسلوب عرض المصدر قد يثير الفرق بين ما تراه عند عرض الشيفرة المصدرية لصفحة الويب أو إلقاء نظرة على ملف HTML الموجود على الخادم، وما يمكن أن تراه في نافذة HTML Pane الموجودة ضمن أدوات مطوري ويب القلق لديك لاسيما إذا كنت حديث العهد بأدوات مطوري ويب DevTools، فعلى الرغم من أنهما متشابهتان نوعًا ما إلا أن هناك بعض الاختلافات. عندما يصيّر المتصفح ملف HTML ويبني شجرة DOM، قد يسوّي بعض شيفرات HTML، كأن يصحح تلقائيًا بعض الأخطاء أو الشيفرات المكتوبة خطأ؛ فعندما تغلق عنصرًا بطريقة خاطئة كأن تنهي الوسم <h2> بالوسم <h3/>، سيكتشف المتصفح ما تعنيه ويصحح ذلك تلقائيًا ضمن شجرة DOM، كما ستعرض شجرة DOM أية تغيرات ناتجة عن تطبيق شيفرة جافا سكريبت. تمثّل في المقابل الشيفرة المصدرية شيفرة HTML المخزّنة على الخادم، وهذا ما تعرضه شجرة HTML الخاصة بأدوات مطوري ويب، وهكذا ستبقى في صورة ما يجري في الواقع. استعراض قواعد CSS المطبقة على الصفحة اختر عنصرًا من عناصر صفحتك بالنقر عليه بالزر الأيمن ثم اختر " استعراض Inspect" من القائمة، أو اختر العنصر من شجرة HTML إلى يسار أدوات مطوري ويب. حاول اختيار العنصر الذي يمتلك الصنف box1 وهو أول عنصر في الصفحة ويحيط به صندوق رسمت حوله حواف. سترى إذا نظرت إلى "عارض القواعد Rules view" إلى يمين شيفرة HTML قواعد CSS المطبقة على العنصر مع قيمها بما في ذلك القواعد المطبقة مباشرةً من خلال المحدد box1 وتلك الموروثة من العنصر الأب وهو <body> في حالتنا. لهذا فائدته في التحقق من قواعد مطبقة لم تتوقع وجودها والتي قد تكون موروثة من العنصر الأب وتحتاج إلى إلغائها وفقًا لموضع العنصر في سياق الصفحة، كما تفيد في توسيع الخاصيات المختصرة لفهم آلية تطبيقها كما هي حال الخاصية المختصرة margin في مثالنا. انقر على زر السهم الصغير لتوسيع عرض الخاصيّة المختصرة كي ترى الخاصيات المختلفة التي تضمها وقيمها، كما يمكنك تغيير القيم في لوحة عارض القواعد إذا كانت مفعّلة. عندما تنقر على الخاصية بالفأرة وتطيل النقر، ستظهر صناديق تحقق لجميع القواعد ويمكنك عندها تفعيل أو إلغاء تفعيل أي قاعدة. يمكنك استخدام الطريقة السابقة للمقارنة بين حالتين تُطبق قواعد معينة في إحداها ولا تطبق في الثانية، كما تساعدك في التنقيح كأن تتحقق مثلًا من عدم استخدام الخاصية border-radius التي يسبب وجودها أخطاءً في تطبيق التخطيط الذي تعتمده. تعديل قيم الخاصيات يمكنك أيضًا من خلال أدوات مطوري ويب تعديل قيم الخاصيات أيضًا إضافةً إلى تفعيلها أو تعطيلها، فقد ترغب في تجريب ألوان أخرى أو تغيير حجم عنصر ما، إذ توفّر أدوات مطوري ويب وقتك في تحرير قواعد CSS وإعادة تحميل الصفحة مع القيم الجديدة. اختر المحدد (box1 مثلًا)، ثم انقر على الدائرة الملونة الصغيرة التي تظهر اللون المطبق على الحواف ليظهر لك مربع اختيار اللون. انقر على اللون الذي تريده وسترى كيف سيُطبق اللون الجديد مباشرةً على صفحتك. وبنفس الأسلوب ستكون قادر على تغيير قيم أية خاصية مثل حيّز الحواف أو تنسيقها. إضافة خاصية جديدة تستطيع أيضًا إضافة خاصيات جديدة من خلال أدوات مطوري ويب، فقد لا ترغب مثلًا أن يرث الصندوق حجم الخط من العنصر الأب <body> بل تريد ضبط حجم الخط بنفسك. تساعدك أدوات مطوري ويب في تجربة هذا الأمر قبل تغيير القواعد في ملف CSS. انقر على القوس المعقوص في القاعدة كي تدخل تصريحًا جديدًا ضمنها، ثم ابدأ بكتابة اسم الخاصية وستعرض لك أدوات مطوري ويب قائمة إكمال تلقائية للقواعد التي تطابق الحرف الذي تكتبه، وبعد أن تختار الخاصية font-size، ادخل القيمة التي تراها مناسبة. يمكنك أيضًا النقر على الزر "+" لإضافة تصريح جديد إلى نفس القاعدة، أو إضافة قواعد جديدة. ملاحظة: ستجد بعض الميزات المفيدة الأخرى في "عارض القواعد" كأن تجد الخاصيات التي أسندت إليها قيم خاطئة قد شطبت. نظرة أقرب إلى نموذج الصندوق في CSS ناقشنا في مقال سابق نموذج الصندوق المتبع في تنسيق CSS، كما تعرفنا على حقيقة وجود نموذج صندوق بديل يغيّر طريقة حساب حجم العنصر بناءً على الحجم الذي تريد، إضافةً إلى قيم الحشوات padding والحواف borders. لهذا، يمكنك الاستعانة بأدوات مطوري ويب في فهم كيفية حساب أبعاد العناصر، إذ تظهر لك لوحة "عارض التخطيط Layout view" عرضًا لنموذج الصندوق وقد أحاط بالعنصر الذي اخترته إضافة إلى وصف الخاصيات وقيمها وكيفية تموضع العنصر، ويتضمن ذلك أيضًا وصفًا للخاصيات التي لم تستخدمها صراحةً على العنصر بل تلك التي تأخذ قيمًا أساسية. من الخاصيات التي تجد تفصيلها في هذه اللوحة الخاصية box-sizing التي تحدد نموذج الصندوق المستخدم مع العنصر الذي تختاره، ولكي ترى كيفية عملها تابع المثال التالي: قارن بين كلا الصندوقين الذين يمتلكان الصنفين box1 و box2 ولهما نفس الحيّز width وقيمته (400 بكسل) لكن يبدو الصندوق box1 أوسع. لاحظ من خلال لوحة التخطيط كيف يستخدم هذا الصندوق القيمة content-box التي تأخذ الحجم الذي تضعه للصندوق ثم تضيف إليه حيّز الحشوة padding width وحيّز الإطار border width لهذا سيبدو أوسع. يستخدم العنصر الذي يمتلك الصنف box2 القيمة border-box التي تطرح قيمة حيّز الحشوة والإطار من الحيّز الذي وضعته، وهذا يعني أن حيّز الصندوق سيبقى مساويًا للحيّز الذي اخترته بدايةً وهو (400 بكسل). حل المشاكل المتعلقة بتخصيص محددات CSS قد تجد صعوبةً أحيانًا في تطبيق بعض قواعد CSS أثناء تطوير صفحات ويب، وخاصةً عند العمل على تنسيقات جاهزة على موقع موجود، فلن تتمكن من تطبيق القواعد التي تريدها على العنصر مهما حاولت. ما يحدث عادةً في هذه الحالات هو وجود محدد معين يلغي التغييرات التي تحاول تطبيقها كونه أكثر تخصيصًا (أي له الأولوية)، وهنا ستساعدك أدوات مطوري ويب كثيرًا. ستجد في الملف الذي نعمل عليه كلمتان محاطتان بالعنصر <em>، أحدهما تُعرض باللون البرتقالي والأخرى بالزهري، وإليك قاعدة CSS المطبقة: em { color: hotpink; font-weight: bold; } لكن هنالك أيضًا وقبل هذه القاعدة المحدد special.: .special { color: orange; } لقد ناقشنا موضوع تخصيص المحددات في المقال الذي يتحدث عن تعاقب قواعد CSS والوراثة ورأينا أن محددات الصنف class selectors أكثر تخصيصًا من محددات العناصر element selectors وبالتالي ستطبق قواعد هذه المحددات. ستساعدك أدوات مطوري ويب في حل هذا النوع من المشاكل، خاصةً إذا كانت المعلومات مختبئة في مكان ما من ملف تنسيق ضخم. استعرض الوسم <em> ذو الصنف special.، وستدلك أدوات مطوري ويب أن اللون البرتقالي هو ما يُطبّق وستجد أن الخاصية المطبقة على الوسم <em> قد شُطبت، وهكذا ستلاحظ أنه محدد الصنف قد تجاوز محدد العنصر. تفاصيل أكثر عن أدوات مطوري ويب المدمجة مع متصفح فايرفوكس ستجد الكثير من المعلومات عن أدوات مطوري ويب من خلال شبكة مطوري موزيلا MDN، كما يمكنك إلقاء نظرة على قسم أدوات مطوري ويب لتتعمق في الأفكار التي طرحناها باختصار في هذا المقال. تنقيح مشاكل CSS تقدم لك أدوات مطوري ويب دعمًا كبيرًا لحل مشاكل تنسيق CSS، لهذا إذا واجهتك المشاكل ووجدت أن التنسيق المطبق يختلف عما تتوقع، فقد تساعدك الخطوات التالية: تراجع خطوة إلى الخلف وألق نظرة على المشكلة قد تكون الأخطاء في كتابة الشيفرة أمرًا محبطًا وخاصة عند التعامل مع لغة CSS، لأنك لن ترى غالبًا أية رسالة خطأ كي تبحث عن سببها في الإنترنت وتجد الحل. إذا أصابك الإحباط فاترك المشكلة كما هي لفترة، اخرج لتتمشى قليلًا أو تحدث مع زميلك، أو اعمل على موضوع آخر، فقد يظهر الحل فجأة إذا توقفت عن التفكير في المشكلة، فإن لم يظهر ستجد أن العمل على حلها من جديد بعد الاستراحة سيكون أسهل. هل شيفرة HTML و CSS مكتوبة جيدًا؟ تتوقع المتصفحات أن تكون شيفرات HTML و CSS مكتوبةً صحيحًا بدون أخطاء، ومع هذا تتساهل المتصفحات كثيرًا مع الأخطاء وتحاول جهدها عرض صفحاتك حتى لو احتوت اخطاءً في التوصيف أو التنسيق، إذ تحاول المتصفحات توقع ما تريده، وقد تتخذ قرارات تخالف ما نويت إنجازه. إضافةً إلى ذلك قد يتخذ متصفحان مختلفان قرارين مختلفين حيال نفس المسألة، لذلك عليك أن تنفّذ شيفراتك ضمن محللات validator خاصة لاستكشاف هذا النوع من الأخطاء وإصلاحها أولًا، مثل محلّل CSS ومحلل HTML. هل يدعم المتصفح الخاصية التي تستخدمها وقيمها؟ تتجاهل المتصفحات خاصيات CSS التي لا تفهمها، فإذا لم تكن الخاصية أو القيمة مدعومةً من قبل المتصفح فلن تلاحظ ذلك، إلا أن الخاصية أو القيمة لن تعملا. تُظلل أدوات مطوري ويب الخاصيات والقيم غير المدعومة بطريقة معينة كما تظهر لقطة الشاشة التالية، إذ لا يدعم المتصفح المستخدم القيمة subgrid للخاصية grid-template-columns: يمكنك أيضًا إلقاء نظرة على جداول دعم المتصفحات المختلفة للخاصيات والقيم، إذ تظهر هذه الجداول دعم المتصفح لخاصية أو قيمة كما يُظهر إمكانية فشل المتصفح في استخدام الخاصية أو القيم في أشكال معينة للاستخدام. هل هناك شيء آخر يتجاوز قواعد CSS التي تكتبها؟ تظهر هنا أهمية المعلومات التي تعلمتها عن تخصيص المحددات، فإذا كان هناك فعلًا ما يتجاوز القاعدة التي تريد تطبيقها ستضطر حينها إلى الدخول في متاهة البحث عن الموضوع ولن يكون الأمر سهلًا. قد تساعدك هنا أدوات مطوري ويب في تحديد الخاصية التي تُطبّق وبالتالي ستتمكن من اختيار محدد أكثر تخصيصًا لتطبيق القواعد التي تريدها. حاول بناء اختبار محدود للتحقق من مشكلتك إذا لم تُحلّ المشكلة باتباع الخطوات السابقة، لا بد حينها من التحري عن صلب المشكلة أكثر، وأفضل شيء يمكنك فعله في هذه الحالة هو ما يُدعى "الاختبار المحدود Reduced test case"؛ فالقدرة على اختزال مشكلتك مهارة مفيدة جيدًا، إذ تساعدك على إيجاد المشاكل في شيفرتك وشيفرة زملائك، وتمكنك من الإبلاغ عن الثغرات وطب المساعدة بفعالية أكبر. أما الاختبار المحدود فهو شيفرة تعرض المشكلة بأبسط شكل ممكن دون أي ارتباط بالمحتوى المجاور ودون أية تنسيقات مسبقة، ويعني ذلك اجتزاء الشيفرة التي تسبب المشكلة وصنع مثال بسيط عنها يعرض الشيفرة أو الميزة التي سببت حدوث المشكلة. ينبغي عليك اتباع الخطوات التالية لبناء الاختبار المحدود: إذا كانت شيفرة HTML مولّدة ديناميكيًا (عبر نظام إدارة محتوى مثلًا)، ابنِ نسخةً ساكنةً من الخرج الذي يسبب المشكلة. قد تساعدك في هذا الأمر بعض المواقع، مثل CodePen التي يُعد موقعًا مفيدًا لاستضافة الاختبارات المحدودة، إضافةً إلى إمكانية الوصول إليها عبر الإنترنت وبالتالي ستسهل مشاركتها مع الزملاء. يمكنك أن تبدأ العملية بعرض الشيفرة المصدرية للصفحة، ثم نسخ شيفرة HTML إلى موقع CodePen، ثم تحضر تنسيقات CSS أو شيفرة جافا سكريبت وإضافتها إلى الاختبار أيضًا. تحقق عندها إذا استمرت المشكلة في الظهور أم لا. إذا لم يحل حذف شيفرة جافا سكريبت المشكلة، لا حاجة لتضمين ملفات جافا سكريبت في الاختبار المحدود، لكن إذا حل حذفها المشكلة، حاول حذف أكبر قدر ممكن من الشيفرة لإبقاء الشيفرة التي تسبب المشكلة فقط. احذف شيفرة HTML التي لا تتعلق بالمشكلة، وحاول أن تحذف المكوّنات أو حتى العناصر الرئيسية للتخطيط، أي حاول باختصار أن تقلل حجم الشيفرة قدر الإمكان كي تبقى فقط تلك التي سببت المشكلة. احذف تنسيقات CSS التي لا تتعلق بالمشكلة. قد تكتشف خلال تنفيذك الخطوات السابقة سبب المشكلة، أو تتمكن على الأقل من تجاوزها وإعادتها عن طريق حذف بعض الأشياء أو إعادتها. قد يفيدك أيضًا إضافة بعض المكوّنات إلى شيفرتك عندما تكتشف دليلًا إلى المشكلة، كما ننصحك بعرض ما فعلته على من تطلب منه مساعدتك. ربما ستكون المعلومات التي تحصل عليها كافية للبحث عن المشاكل المحتملة والعمل على حلها. إذا استمرت المعاناة في البحث عن المشكلة، ستساعدك المعلومات التي حصلت عليها من الاختبار المحدود في طلب العون عن طريق نشرها ضمن منتديات متخصصة أو عرضها على زميل، إذ ستزداد فرصة الحصول على المساعدة إن استطعت أن تُظهر كيف اختزلت المشكلة واستطعت تحديد مكانها تمامًا، وهكذا قد يتمكن مطوّر أكثر خبرة من رصد المشكلة بسرعة ويوجهك نحو الحل الصحيح أو على الأقل تساعده في إلقاء نظرة سريعة على المشكلة على أمل تقديم بعض المساعدة؛ أما في الحالة التي تكون فيها مشكلتك ثغرة في المتصفح نفسه، فقد يساعدك الاختبار المحدود في صياغة ملف الإبلاغ عن ثغرات وتوجيهه إلى المسؤول عن الأمر. عندما تغدو أكثر خبرة في استخدام تنسيقات CSS، ستكون أسرع في فهم المشاكل، لكن مع ذلك، تواجه أكثر المطورين خبرة بعض المشاكل المحيّرة، لهذا لا بد من اتباع طريقة منهجية لحل المشكلة، وعادة ما يكون بناء اختبار محدود وشرح هذه المشكلة لزملاء آخرين مفتاحًا للحل. الخلاصة تعرفنا في هذا المقال على أساليب تنقيح شيفرة CSS، وحاولنا تزويدك ببعض المهارات المفيدة التي تعتمد عليها عندما تبدأ بتنقيح CSS وغيرها من الشيفرات التي تواجهها لاحقًا خلال مسيرتك المهنية. ترجمة -وبتصرف- لمقال Debugging CSS اقرأ أيضًا التنسيقات الأساسية للعناصر في CSS تنسيقات المتصفحات المخصصة ودعمها وأداءها في CSS كيفية فهم وإنشاء قواعد CSS وحدات القياس والقيم في CSS التحكم في تموضع العناصر في CSS

لن يكون تنسيق الجداول أمرًا مهمًا، لكن علينا فعل ذلك أحيانًا، لهذا سنوّفر لك في هذا المقال دليلًا لتعرض جداول HTML بأسلوب أنيق إضافة إلى تطبيق بعض التقنيات الخاصة في تنسيقها. ننصحك قبل المتابعة في قراءة هذه المقال أن: تطلع على أساسيات العمل مع HTML. تطلع على أساسيات العمل مع الجداول في HTML كما شرحناها في المقال أساسيات بناء الجداول فيHTML. تتفهم أساسيات CSS كما شرحناها في سلسلة المقالات خطواتك الأولى في CSS. الجدول النمطي في HTML لنبدأ العمل بإلقاء نظرة على هيكلية الجدول النمطي في HTML من خلال الجدول التالي الذي يوصّف بعض الفرق الموسيقية في المملكة المتحدة. ستبدو الشيفرة على النحو التالي: <table> <caption> A summary of the UK's most famous punk bands </caption> <thead> <tr> <th scope="col">Band</th> <th scope="col">Year formed</th> <th scope="col">No. of Albums</th> <th scope="col">Most famous song</th> </tr> </thead> <tbody> <tr> <th scope="row">Buzzcocks</th> <td>1976</td> <td>9</td> <td>Ever fallen in love (with someone you shouldn't've)</td> </tr> <tr> <th scope="row">The Clash</th> <td>1976</td> <td>6</td> <td>London Calling</td> </tr> <!-- several other great bands --> <tr> <th scope="row">The Stranglers</th> <td>1974</td> <td>17</td> <td>No More Heroes</td> </tr> </tbody> <tfoot> <tr> <th scope="row" colspan="2">Total albums</th> <td colspan="2">77</td> </tr> </tfoot> </table> توصّف الشيفرة السابقة الجدول المطلوب جيدًا بفضل بعض الميزات، مثل scope و caption وغيرها، لكن لسوء الحظ لن يكون مظهرة جيدًا عندما يُصيَّر على الشاشة. يُطبق المتصفح التنسيق الافتراضي على الجدول السابق لهذا تراه صعب القراءة وممل، وهنا يأتي دور CSS لتحسين مظهره. تنسيق الجدول السابق سنعمل في هذه الفقرة على تنسيق الجدول السابق باتباع الخطوات التالية: حضّر نسخةً من الشيفرة السابقة عن طريق تنزيلها من غيت -هب، ثم نزّل الصورتين (noise و leopardskin)، وضع الملفات الثلاثة في مجلد واحد على حاسوبك. أنشئ تاليًا الملف "style.css" واحفظه في نفس المجلد السابق. اربط ملف CSS بملف HTML بوضع سطر الشيفرة التالي ضمن الوسم <head>: <link href="style.css" rel="stylesheet" /> توسعة الجدول وتخطيطه لا بد قبل كل شيء من ضبط المساحات في الجدول وضبط تخطيطه، إذ يبدو بحال سيئة، وحتى ننجز الأمر، ضِف الشيفرة التالية إلى الملف "style.css": /* spacing */ table { table-layout: fixed; width: 100%; border-collapse: collapse; border: 3px solid purple; } thead th:nth-child(1) { width: 30%; } thead th:nth-child(2) { width: 20%; } thead th:nth-child(3) { width: 15%; } thead th:nth-child(4) { width: 35%; } th, td { padding: 20px; } إليك أهم النقاط التي يجدر ملاحظتها في الشيفرة السابقة: ضبط قيمة الخاصية table-layout على القيمة fixed أمرٌ جيدٌ عادةً، فهو يجعل سلوك الجدول متوّقع افتراضيًا، إذ تأخذ أعمدة الجدول في الحالة الطبيعية حجمها وفقًا لكمية المحتوى التي تضمه، وهذا ما قد يعطي نتائج غريبة قليلًا، لكن باستخدام القاعدة table-layout: fixed ستتمكن من ضبط حيّز الأعمدة وفقًا لحيّز ترويساتها ومن ثم التعامل مع المحتوى وفقًا لذلك. لهذا استخدمنا أربع قواعد تنسيق مختلفة (thead th:nth-child(n لنستهدف الترويسات الأربع للجدول، بحيث يختار المحدد nth-child: العنصر الابن "n" الذي يمثّل العنصر <th> ضمن السلسلة، داخل العنصر <thread>، وأعطينا كلًا من الترويسات حيّزًا بنسبة مئوية من الحيّز الكلي. سيأخذ الآن كل عمود حيّز الترويسة وهي طريقة جيدة لتحديد الحجم. استخدمنا أيضًا فكرة أن تكون قيمة الخاصية width هي %100، وبالتالي سيملأ الجدول أي حاوية تضمه، وسيتجاوب جيدًا عند تغيير شاشة العرض، على الرغم من أنه يتطلب بعض العمل الإضافي ليبدو جميلًا ضمن الشاشة الأضيق. يُعد ضبط قيمة الخاصية border-collapse على collapse أسلوبًا معياريًا في تنسيق أي جدول. فعندما تضبط حواف الخلايا ضمن الجدول، سيظهر فراغ فيما بينها افتراضيًا، وقد لا يبدو الأمر جميلًا (إلا إن أردت فعلًا أن تظهر). لاحظ الصورة التالية: لكن بتطبيق القاعدة ;border-collapse: collapse ستختفي حواف الخلايا ويبدو الجدول على النحو التالي: وضعنا حوافًا border حول كامل الجدول، لأننا سنحتاج إليه عندما نضع حوافًا حول ترويسة وتذييل الجدول لاحقًا، إذ سيبدو الجدول غريب الشكل إذا لم نضع له حوافًا من الخارج وسينتهي الأمر بوجود فراغات مزعجة. وضعنا حشوة padding حول العنصرين <th> و <td> لكي نمنح البيانات المكتوبة بعض الفسحة ليظهر الجدول أكثر قبولًا. سيبدو الجدول حتى اللحظة على النحو التالي: بعض التنسيقات الكتابية البسيطة سنحاول تاليًا ترتيب النص قليلًا، لهذا سنبحث عن خط كتابة مناسب ضمن خطوط جوجل ليلائم محتوى الجدول الذي يتحدث عن فرق موسيقية، كما يمكنك اختيار أي خط كتابة آخر يعجبك؛ فكل ما عليك فعله في هذه الحالة هو استبدال العنصر <link> في شيفرتنا وخاصية التنسيق font-family مع تصريحه بالقيم التي تحددها لك مكتبة خطوط جوجل. أضف بدايةً العنصر <link> إلى ترويسة ملف HTML قبل العنصر <link> الموجود أصلًا: <link href="https://fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet" type="text/css" /> أضف بعد ذلك تنسيقات CSS إلى الملف style.css تحت ما هو موجود أصلًا: /* typography */ html { font-family: "helvetica neue", helvetica, arial, sans-serif; } thead th, tfoot th { font-family: "Rock Salt", cursive; } th { letter-spacing: 2px; } td { letter-spacing: 1px; } tbody td { text-align: center; } tfoot th { text-align: right; } لا يوجد هنا حقيقيةً أية تنسيقات مخصصة تمامًا للجداول، وكل ما نفعله هو التلاعب بخطوط الكتابة لتسهيل قراءة المحتوى: اخترنا الخط sans-serif وهو خيار تزييني بحت، كما اخترنا خط كتابة مخصص في ترويسة الجدول داخل العناصر <thead> و <tfoot> ليناسب محتواهما. أضفنا بعض المساحات الفارغة letter-spacing ضمن ترويسة الجدول وخلاياه لأهمية ذلك في تسهيل قراءة المحتوى، وهو مجددًا خيار تزييني. وضعنا النص في منتصف كل خلية <tbody> كي تحاذي الترويسات، علمًا أنها تحاذى افتراضيًا إلى اليسار من خلال ضبط الخاصية text-align على left، بينما تُحاذى الترويسات إلى المنتصف center. سيبدو المظهر أفضل عمومًا إذا كانت محاذاة الترويسات <tfoot> ومحتوى الخلايا وفق النمط ذاته، وسنكتفي بالخط السميك bold لنص الترويسات كي تتميز عن سائر خلايا الجدول. ستبدو النتيجة أفضل الآن: الرسوميات والألوان لنتجه الآن نحو الرسوميات والألوان لإعطاء الجدول بعض الخصوصية في التنسيق ليلائم المحتوى، وسنبدأ بإضافة شيفرة CSS التالية إلى أسفل الملف style.css: /* graphics and colors */ thead, tfoot { background: url(leopardskin.jpg); color: white; text-shadow: 1px 1px 1px black; } thead th, tfoot th, tfoot td { background: linear-gradient( to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5) ); border: 3px solid purple; } تذكّر أن ما فعلناه ليس مخصصًا للجداول تحديدًا لكن من الأفضل إلقاء نظرة: أضفنا صورة خلفية للجدول باستخدام الخاصية background-image على العنصر <thead> و <tfoot> وغيرنا لون color جميع النصوص داخل الترويسات والتذييل إلى اللون الأبيض ومنحناها تأثير الظل text-shadow لتبدو مقروءةً على نحوٍ أفضل. أضفنا أيضًا تدرجًا لونيًا خطيًا Linear gradient إلى العنصرين <th> و <td> الخاصين بالترويسات والتذييل لتبدو الخلفية أجمل، كما منحناهما حوافًا بنفسجية. من المفيد أن يكون لديك مجموعةً من العناصر المتداخلة كي تطبق التنسيق على شكل طبقات متتالية، وقد كان ممكنًا تطبيق خلفيات وتدرجات لونية على عناصر الترويسات والتذييل في نفس الوقت، لكننا قررنا أن نفصل بينهما كي نحرص على دعم المتصفحات الأقدم التي لا تدعم صور الخلفيات أو التدرج اللوني. خطوط حمار الوحش Zebra قررنا تخصيص هذه الفقرة لعرض طريقة إظهار صفوف الجدول بلونين متناوبين والتي تدعى خطوط حمار الوحش zebra stripes، مما يسهّل قراءة البيانات وتحليلها. لهذا أضف الشيفرة التالية إلى ملف style.css: /* zebra striping */ tbody tr:nth-child(odd) { background-color: #ff33cc; } tbody tr:nth-child(even) { background-color: #e495e4; } tbody tr { background-image: url(noise.png); } table { background-color: #ff33cc; } رأينا سابقًا كيف يُستخدم المحدد nth-child: لاستهداف عنصر ابن محدد، كما يُمكن أن يُعطى صيغة لها معاملات وبالتالي يمكن اختيار سلسلة من العناصر لاستهدافها؛ فالصيغة 2n-1 ستختار جميع الأبناء ذوي الترتيب الفردي مثل الولد الأول والثالث والخامس وهكذا؛ كما تُستخدم الصيغة 2n لاختيار الأبناء ذوي الترتيب الزوجي. استخدمنا في الشيفرة التعليمتين odd و even اللتين تنفذان الفكرة التي تحدثنا عنها، وهكذا سنعطي الصفوف الزوجية لونًا متوهجًا مختلفًا عن الفردية. استخدمنا أيضًا خلفية متكررة لكل على جميع الصفوف وهي صورة نصف شفافة من النوع png. لتغطي الصفوف معطية انطباعًا متشابكًا texture لمظهر الجدول. منحنا كامل الجدول خلفية لونية كي تظهر الصفوف ملونة في المتصفحات التي لا تدعم المحدد nth-child:. سيبدو الجدول الآن بالشكل التالي: قد يبدو ما فعلناه بالجدول مبالغًا فيه، وقد لا يناسب ذوقك، لكنها طريقة لأن نقول أن الجداول يمكن تنسيقها لتكون أكثر حيوية. تنسيق العناوين هناك شيء أخير سنفعله وهو تنسيق عنوان الجدول. لهذا عليك إضافة الشيفرة التالية إلى أسفل الملف style.css: /* caption */ caption { font-family: "Rock Salt", cursive; padding: 20px; font-style: italic; caption-side: bottom; color: #666; text-align: right; letter-spacing: 1px; } لا شيء مميز في تلك الشيفرة باستثناء الخاصية caption-side التي أسندنا إليها القيمة bottom وهذا ما يجعل عنوان الجدول في الأسفل إضافةً إلى وضع بعض لمسات التنسيق الأخرى عليه ليكون تنسيق الجدول ككل قد اكتمل كما في الشكل التالي: تلميحات سريعة لتنسيق الجداول إليك قائمة بأفضل نقاط التنسيق التي ناقشناها في المقال: بسّط شيفرة HTMl الخاصة بالجدول قدر المستطاع، وامنح عناصر الجدول المرونة الكافية كأن تضبط القياسات بنسب مئوية وبهذا سيكون الجدول أكثر استجابة. استخدم قاعدة التنسيق table-layout: fixed كي تنشئ جدولًا بتخطيط نمطي يمكّنك من ضبط أبعاد الأعمدة بسهولة باستخدام الخاصية width على ترويساتها <th>. استخدم القاعدة border-collpse: collapseلتخفي حواف الخلايا مما يعطي الجدول مظهرًا أكثر أناقة. استخدم خطوط حمار الوحش لتمنح أسطر الجدول لونين متناوبين وبالتالي سهولة أكبر في القراءة. استخدم الخاصية text-align لمحاذاة النصوص في عنصر الترويسة <th> والتذييل <td> كي يظهر الجدول أكثر أناقة وأسهل متابعة. الخلاصة بعد أن تعرفنا في هذه المقل على طريقة تنسيق الجداول، لا بد من الانطلاق إلى أفكار جديدة، لهذا سنتابع في المقال التالي تنقيح شيفرة CSS، وكيفية حل المشاكل المتعلقة بالتخطيطات التي لا تبدو كما هو مطلوب أو الخاصيات التي لا تعطي التأثير المطلوب الذي تعتقده. سنعرّج أيضّا على طريقة استخدام أدوات مطوري ويب DevTools المدمجة مع المتصفحات لإيجاد حلول لمشاكلنا. ترجمة -وبتصرف- لمقال Styling tables. اقرأ أيضًا كيفية إنشاء جدول أنيق بـ HTML و CSS أساسيات بناء الجداول في HTML الجداول (Tables) في CSS HTML و CSS للمبتدئين: مقدمة إلى تنسيقات CSS

لم يعد يخفى على أي مهتم أو عامل في مجال تقنيات الحاسوب أهمية نظام التشغيل لينكس في شتى المجالات انطلاقًا من استثمار حواسب اللوحة الواحدة مثل حواسيب راسبيري باي مرورًا بالحواسب المكتبية والشبكات الحاسوبية وصولًا إلى خوادم ويب وتقنيات الحوسبة السحابية. لينكس موجود في كل مكان، لكن لا يزال بعض الغموض يحيط بمفاهيمه وخاصة للقادمين الجدد، لهذا سنحاول في هذا المقال شرح هذه المفاهيم بشكل مبسط والإجابة عن أكثر التساؤلات التي ترتبط بنظام لينكس. ما هو لينكس لينكس Linux ببساطة نظام تشغيل للحواسب والتجهيزات المشابهة لها كما هو حال ويندوز Windows أو ماك أو إس Mac OS أو أندرويد Android. أما نظام التشغيل Operating System واختصارًا OS فهو مجموعة متكاملة من البرمجيات الخاصة التي تتيح استثمار حاسوبك أو هاتفك. يُعد لينكس من أكثر أنظمة التشغيل انتشارًا في العالم، ولا يقتصر استعماله على الحواسب الشخصية، والهواتف الذكية بل يتعدى ذلك إلى إدارة الأغلبية الساحقة من خوادم الويب، وهو نظام التشغيل الذي تستخدمه أكثر الحواسيب الخارقة Super Computer في العالم، ويُعد أساسًا لأندرويد أكثر أنظمة تشغيل الهواتف المحمولة انتشارًا. قد يخطر في بالك الآن السؤال التالي: هل لينكس هو نفس النظام الذي يُشغّل مختلف التجهيزات السابقة أيًا كان عملها ومواصفاتها؟ في الواقع لينكس هو مجموعة أساسية من البرمجيات التي تدير التخاطب بين مكوّنات الحواسيب على أكمل وجه تُدعى النواة Kernel وتمثل المكوّن الجوهري لنظام التشغيل. يتميز لينكس بأنه مفتوح المصدر أي يمكن التعديل على شيفراته واستخدامها بحرية تامة، وهذا ما جعل الكثير من الشركات تنطلق من نواة لينكس لبناء أنظمة تشغيل جديدة وأخرى مشتقة منها (تُدعى بالتوزيعات Distros)،على عكس أنظمة التشغيل مغلقة المصدر والتي لا تفصح عن شيفراتها. لا بد وأن يثير هذا الجواب في نفسك تساؤلات أخرى مفادها أن هذا النظام أكثر تعقيدًا مما أعتقد، ولا بد أن يكون استثماره صعبًا طالما أنه في الجوهر نواة تُبنى عليها أنظمة تشغيل أخرى. نعم، قد يكون ما تفكر به صحيحًا لكن إلى حدٍ معين. لن تتعامل كمستثمر للحاسوب في واقع الأمر مع لينكس "النواة" بل مع لينكس "التوزيعة"، فقد بنيت توزيعات لينكس لتتمكن من إدارة حاسوبك بنفسك وفق أدق التفاصيل التي لا تتيحها أنظمة تشغيل أخرى، ولهذا الأمر إيجابياته وسلبياته، لكنها تؤمن لك كذلك بيئة تشغيل آمنة ومثالية إن أردت فقط أن تستثمر حاسوبك في إنجاز أعمالك اليومية أيًا كانت طبيعتها. إذًا دعونا نلخص ما تعلمناه عن لينكس حتى الآن: لينكس نظام تشغيل يمكنك من استثمار الحواسب والتجهيزات الذكية. لينكس نظام تشغيل مفتوح المصدر يمكن الاطلاع على شيفرة بنائه وتعديلها واستخدامها بحرية. يمكن أن نستخدم نواة لينكس لبناء توزيعات مختلفة (أنظمة تشغيل مبنية على النواة) وطرحها تجاريًا. لينكس نظام تشغيل شديد المرونة يتيح لك الوصول إلى خفايا حاسوبك لكنه يساعدك على إنجاز أعمالك الروتينية البسيطة أيضًا بمنتهى السهولة والأمان. نظرة إلى نظام التشغيل لينكس لا بد قبل أي شيء أن نلق نظرة على مكوّنات لينكس فقد تعترضك بعض المصطلحات الجديدة عندما تقرر استخدام هذا النظام. يتكوّن نظام لينكس من الأجزاء التالية: برمجيات الإقلاع Bootloader برمجيات إعداد النظام Init System الخدمات الخلفية Daemons سطح المكتب Desktop البرامج والتطبيقات Application. خادم الرسوميات Graphical server النواة Kernel برمجيات إقلاع نظام لينكس وهي مجموعة من البرمجيات التي تدير عملية إقلاع الحاسوب. تمتد مرحلة الإقلاع من لحظة ظهور بعض الكتابات على الشاشة حتى لحظة ظهور شعار لينكس، وهذا كل ما يهمك كمستثمر للحاسوب. فظهور شعار نظام التشغيل يدل على أن حاسوبك يعمل دون مشاكل وقد سلم الأمر إلى نظام التشغيل لينكس الذي بدأ بتحضير نفسه. "نهاية مرحلة الإقلاع وبداية مرحلة إعداد النظام" برمجيات إعداد النظام تتكون هذه المنظومة من مجموعة كبيرة من البرمجيات الصغيرة التي تعمل في الخلفية وتُعرف بالخدمات Daemons وتنحصر مهمة هذه الخدمات في تحضير نظام التشغيل ليكون جاهزًا للتخاطب مع المستخدم من جميع النواحي. إذًا تدير هذه المنظومة ببساطة الفترة التحضيرية الممتدة من نهاية مرحلة الإقلاع حتى ظهور سطح المكتب. "شاشة توضح تشغيل منظومة برمجيات الإعداد لبعض الخدمات الخلفية قبل الوصول إلى سطح المكتب" الخدمات الخلفية هي مجموعة من البرمجيات التي تساعد في إدارة المهام المتعلقة بالعتاد الصلب أو البرمجيات مثل مهام الطباعة وتهيئة الصوت وجدولة المهام وتثبيت البرمجيات وإزالتها والتعرف على التجهيزات الجديدة وتهيئتها للعمل وتحديث نظام التشغيل. لا ترى أبدًا هذه البرامج ولا تقاطع عملك إطلاقًا ما لم تكن هناك مشاكل. يستخدم نظام التشغيل هذه الخدمات في جميع مراحل عمله سواء في مرحلة الإقلاع أو الإعداد أو الاستثمار. سطح المكتب وهي واجهة المستخدم التي تتعامل من خلالها مع نظام التشغيل. يتفاعل المستخدم عمومًا مع نظام لينكس إما من خلال كتابة تعليمات يدويًا عبر برنامج خاص يُدعى الطرفية Terminal وعليه في هذه الحالة أن يتعلم كل ما يحتاجه من تعليمات وأوامر وطريقة صياغتها وهذا بالطبع أمر ليس بالهين ويتطلب ممارسة وجهدًا. أما الطريقة الأسهل والأكثر شعبية لمستثمري لينكس فهي بيئة سطح المكتب الرسومية GUI التي يتفاعل معها المستخدم بالنقر على الأيقونات وفتح النوافذ واختيار الأوامر من القوائم التي تُعرض كما هو الحال في نظامي ويندوز وماك. وعلى خلاف ويندوز وماك يمكن أن يختار مستخدمي لينكس بيئة سطح المكتب من بين بيئات مختلفة مثل (جنوم Gnome, سينامن Cinnamon، بانثيون Pantheon، كيدي KDE وغيرها..). "شاشة سطح مكتب سينامن" لا يعني هذا أنك ستعاني حتى تثبت سطح المكتب، بل تأتي كل توزيعة من توزيعات لينكس مع بيئة سطح مكتب افتراضية (توزيعة أوبنتو Ubuntu مثلًا تستخدم جينوم كبيئة سطح مكتب افتراضية) يمكنك إن أحببت تغييرها لاحقًا. البرامج والتطبيقات تساعدك بيئة سطح المكتب على إدارة الملفات والتجهيزات المختلفة، لكنها لا تضم كل البرمجيات التي قد تحتاجها، علمًا أن معظم توزيعات لينكس تأتي مع حزمة متنوعة من البرامج مفتوحة المصدر تغطي معظم احتياجات المستثمر العادي للحاسوب. ستحتاج حتمًا إلى تطبيقات وبرامج أخرى، وكما هو حال نظامي ويندوز وماك بإمكانك البحث عن البرامج التي تريدها من بين آلاف البرامج عالية الجودة ومفتوحة المصدر، والتي يكون الكثير منها مجاني تمامًا للاستخدام الشخصي. "تطبيق ليبر-أوفيس المجاني والمفتوح المصدر" يأتي مع معظم توزيعات لينكس تطبيقات مخصصة مهمتها البحث عن البرامج التي تحتاجها ضمن مخازن موثوقة خاصة بتطبيقات لينكس عبر الإنترنت ثم تثبيتها مباشرة على جهازك بنقرة زر. نذكر من هذه التطبيقات Ubuntu Software Center الذي يأتي افتراضيًا مع توزيعة أوبونتو من لينكس. وهذه ميزة رائعة لنظام لينكس وخاصة للمبتدئين، إذ تجعل تثبيت التطبيقات بسهولة تثبيت أي تطبيق من جوجل بلاي أو آب ستور. خادم الرسوميات وهي منظومة فرعية من نظام التشغيل مهمتها إدارة وعرض الرسوميات على شاشة الحاسوب ويُشار إليها عادة بالاسم "X Server" أو "X" فقط. النواة Kernel قد لا يهمك كمستثمر لنظام لينكس أمر النواة كثيرًا، لكن لا بد على الأقل أن نوضح باختصار ماهيتها. فالنواة هي التعليمات والأوامر التي تدير عمل المعالج والذواكر وجميع الأجهزة الطرفية التي ترتبط بالحاسوب كالأقراص الصلبة ووحدات الإدخال والإخراج وشاشات العرض ومحوّلات شبكات الاتصال وغيرها. إذًا النواة باختصار هي المكوّن الحقيقي من نظام التشغيل الذي يمكن أن ندعوه "لينكس". تُستخدم هذه النواة في بناء توزيعات لينكس المختلفة وتطويرها وهي بحد ذاتها عرضة للتطوير والتحديث المستمر وآخر إصداراتها ساعة كتابة هذه الكلمات كانت 6.1. توزيعات نظام لينكس حسنًا لقد وصلنا إلى مفترق طرق في رحلتنا! إنها النقطة الأهم في اتخاذ قرار التحوّل إلى نظام لينكس. يُشير مصطلح "لينكس" إلى نواة نظام التشغيل، وقد استخدمت هذه النواة من قبل الأفراد والشركات في بناء نسخ (أو توزيعات Distros) مختلفة النكهات طُوّر كل منها لأغراض محددة ولاستخدامات محددة. تأتي بعض هذه التوزيعات مجانية تمامًا وبعضها الأخر مجاني مع خدمات مأجورة والبعض الآخر مدفوعًا. تعود ملكية بعض النسخ إلى شركات والبعض الآخر إلى مجتمعات المطوّرين لكن ما يجمع بين كل التوزيعات أنها مفتوحة المصدر، فحتى لو دفعت ثمنها ستتمكن من البناء عليها لتطوير توزيعات جديدة. "شعارات بعض التوزيعات الشهيرة تحيط بشعار نواة لينكس" سنتحدث في هذه الفقرة عن أكثر توزيعات لينكس شعبية دون الخوض في التفاصيل التقنية، بل سنعتمد مقاربة تستند إلى خبرتك في العمل على الحواسب وطبيعة المهام التي تنوي القيام بها. توزيعات لينكس للمبتدئين غالبًا ما يحتاج القادمون الجدد إلى لينكس بيئة سطح مكتب تشابه ما اعتادوا عليه في ويندوز وماك أو إس، وتدعم الوظائف الأساسية مثل إدارة الملفات وتشغيلها ودعم الاتصال مع الإنترنت. فأن تكون التوزيعة مجانية أمر جيد جدًا، وأن تكون مدعومة على نطاق واسع من قبل الشركة المنتجة لها أو من قبل مجتمعات المطوّرين أمر حيوي أيضًا. فما يحتاجه المبتدئ غالبًا واجهة استخدام سهلة، وتطبيقات تدعم أعماله. هنالك الكثير من التوزيعات التي تُوصف بأنها صديقة للقادمين الجدد نذكر منها: أوبنتو Ubuntu لينكس مينت Linux Mint كروم أو إس Chrome OS زورين أو إس Zorin OS نظام التشغيل أوبنتو تطوّر هذه التوزيعة شركة كانونيكال Canonical وتُعد توزيعة سهلة الاستخدام. تأتي نسخة الحواسب المكتبية منها Desktop Computers مع واجهة رسومية تتمثل ببيئة سطح المكتب "جنوم". "سطح المكتب الافتراضي لتوزيعة أبونتو" لن تجد صعوبة في تعلم العمل مع واجهة أوبنتو، وستجد أنك قادر على إدارة حاسوبك بكل ثقة نظرًا للأسلوب السهل والمباشر في ضبط الإعدادات المختلفة. تأتي توزيعة لينكس أوبونتو مع مجموعة برمجيات ليبروفس Libreofffice المكتبية التي تضم محرر نصوص متطور يشابه مايكروسوفت وورد وبرنامج تصميم عروض تقديمية وبرنامج جداول إلكترونية وبرمجيات مكتبية أخرى. كما يأتي مع هذه التوزيعة تطبيق Ubuntu Software Center الذي يساعدك على البحث عن تطبيقات وبرامج أخرى وتثبيتها بكل سهولة. أما للاتصال بالإنترنت فيأتي متصفح موزيلا فايرفوكس افتراضيًا مع أوبنتو. يدعم أوبنتو اللغة العربية جيدًا لكن قد تظهر لك بعض القوائم التي لا يُتاح لها ترجمة باللغة العربية. كما قد تواجهك بعض المصاعب كمبتدئ في تثبيت حزم اللغة العربية لعدم وجود نسخ تعتمد العربية افتراضيًا مثل ويندوز. بُنيت هذه التوزيعة على أساس توزيعة ديبيان Debian لهذا يمكن في معظم الأحيان تثبيت البرمجيات المخصصة لديبيان على أوبونتو. تُعد النسخة المستقرة 22.04 LTD آخر إصدارات أوبنتو، أما "LTS" فهو اختصار لعبارة Long Term Support أو الدعم طويل الأمر كإشارة إلى أن تحديث هذه التوزيعة وصيانتها مستمر لفترة طويلة بعد الإصدار. أوبنتو مجاني للاستخدام الشخصي لكن هناك بعض الخدمات المدفوعة التي تقدمها شركة كانونيكال. وتتميز هذه التوزيعة بدعم كبير من قبل الشركة المطوّرة ومن قبل مجتمعات المطورين والمهتمين. نظام التشغيل لينكس مينت تُعد هذه التوزيعة الخيار الأول للقادمين الجدد إلى عالم لينكس لبساطتها، فغايتها الأساسية تزويد مستخدم لينكس بسطح مكتب كلاسيكي مزوّد بالعديد من الأدوات المخصصة لإدارة الحاسوب والاتصال بالإنترنت ودعم أنواع كثيرة من الوسائط المتعددة. تأتي هذه التوزيعة مع مجموعة البرامج المكتبية ليبرأوفيس ومتصفح فايرفوكس، كما تضم واجهة رسومية لدعم البحث عن البرمجيات وتثبيتها عبر الإنترنت ويمكنها الاتصال بنفس مخازن تطبيقات أوبنتو فهي تدعم معظم برمجياته كونها توزيعة مبنية أساسًا على توزيعة أوبنتو طويلة الدعم. يدعم النظام عدة بيئات سطح مكتب (سينامن Cinnamon، مايت MATE و Xfce) ويمكن أن تختار البيئة الافتراضية قبل تنزيل التوزيعة وتثبيتها. كما يدعم لينكس منت اللغة العربية دعمًا مقبولًا أي قد تجد بعض الصعوبات في تثبيت حزمة اللغة العربية. "سطح مكتب توزيعة مينت" نظام كروم أو إس إن كنت ممن يفضلون إنجاز كل مهامهم من خلال الإنترنت فهي توزيعة لينكس المناسبة لك! إذ بُنيت هذه النسخة خصيصًا للعمل من خلال تطبيقات الويب أو عن طريق الخدمات السحابية. طوّرت هذه التوزيعة من قبل Neverware وهي فرع من جوجل الآن، وبنيت على أساس جنتو لينكس Gentoo Linux. "سطح مكتب توزيعة كروم أو إس" قد تسمع أن حواسب كروم بوك Chromebook هي من تعمل على نظام كروم أو إس، لكن بإمكانك تحويل أي حاسب شخصي PC أو حاسب ماك ليعمل على كروم أو إس بكل بساطة حتى لو كان قديمًا (حتى للحواسب التي أنتجت من 15 عامًا). فقد طوّرت جوجل النسخة Chrome OS Flex أساسًا لتعيد الحياة إلى الحواسب القديمة التي لم يعد بإمكانها تشغيل النسخ الأحدث من ويندوز أو ماك إلى حواسب كروم بوك فعّالة. تتميز هذه التوزيعة ببساطتها وقوتها، وستعجبك بالتأكيد إن كنت من معجبي "أندرويد"، فلهما نفس النكهة. عند تسجيل حسابك على جوجل يأخذ كروم أو إس تلقائيًا إعداداته من إعدادات حسابك، فإن كنت تستخدم العربية فستكون واجهة النظام عربية، فلا تقلق من هذه الناحية. تضم التوزيعة متصفح جوجل كروم افتراضيًا ويمكنك استخدام جوجل دوكس لتحرير ملفاتك المكتبية أو الوصول إلى أية برمجيات مكتبية أخرى من جوجل من خلال الإنترنت أو العمل دون اتصال، كما تتاح الكثير من البرمجيات المشابهة عبر الإنترنت مثل "أوفيس 365". نظام زورين أو إس وهي توزيعة بسيطة وخفيفة الحجم من لينكس بنيت على أساس أوبونتو، وتعد الخيار المفضل للمنتقلين من ويندوز ولا يرغبون في تعلم أي شيء عن سطح مكتب جنوم والبيئات التي تشبهه. "سطح مكتب توزيعة زورين" إذ يمكنك أن تخصص المظهر العام لهذه التوزيعة من خلال تطبيق Zorin Appearance ليبدو كسطح مكتب ويندوز كي يسهل عليك الانتقال إلى بيئة لينكس. تأتي هذه التوزيعة بعدة خيارات أحدها مجاني، ويقدم دعمًا مقبولًا للغة العربية. أحدث إصدارات هذه التوزيعة هي 16.2 وتأتي مع مجموعة ليبر-أوفيس المكتبية ومتصفح فايرفوكس. التوزيعة مستوى المستخدم الأساس الواجهة حزم البرمجيات المدعومة بالعربية آخر إصدار أوبنتو مبتدئ-متقدم ديبيان رسومية DEB, Flatpak, Snap نعم 22.04 مينت مبتدئ أوبونتو رسومية DEB نعم 21.1 كروم أو إس مبتدئ جينتو رسومية SRC نعم 108.0 زورين أو إس مبتدئ أوبنتو رسومية DEB, Flatpak, Snap نعم 16.2 توزيعات لينكس للمستخدمين المتقدمين نقصد بالمستخدمين المتقدين هؤلاء القادرين على إيجاد الحلول للمشاكل التي تصادفهم بأنفسهم من خلال المعارف المتراكمة لديهم أو من خلال البحث عن هذه الحلول وفهمها وتطبيقها. عادة ما يكون هؤلاء المستخدمين من التقنيين أو المهتمين بتقنيات الحوسبة أو المشرفين عليها، لهذا سيرغبون في العمل على توزيعات تساعدهم في إنجاز مهام إدارية وتقنية أوسع. ننصح هؤلاء المستخدمين بتجريب إحدى التوزيعات التالية: ديبيان Debian Linux فيدورا Fedora Linux ريد هات انتربرايز لينكس Read Hat Enterprise Linux سوسي لينكس Suse Linux توزيعة ديبيان وهي توزيعة مستقرة وآمنة ومجانية مبنية على أساس نواة لينكس مباشرة وبالتالي ستمنح المستخدم المتقدم إمكانيات إدارية أفضل وتحكمًا أفضل عند العمل مع العتاد الصلب. كما يُستخدم أيضًا مع الأنظمة المدمجة وإنترنت الأشياء وللعمل مع التقنيات السحابية. تمتاز هذه التوزيعة بوجود كم هائل من البرمجيات المتوافقة معها (حزم من النوع deb.)، وتمتلك مجتمعًا ضخمًا من المناصرين والمهتمين. توزيعة فيدورا وهي توزيعة قوية موجّه للمستخدمين المتقدمين والمطوّرين كونها في طليعة التوزيعات التي تواكب آخر التقنيات. بنيت هذه التوزيعة على أساس نواة لينكس وتأتي وفق توزيعات مختلفة منها "Workstation" للحواسب المكتبية والمحمولة وتضم أدوات متكاملة لتطوير البرمجيات وتحزيمها إضافة إلى تقديمها بيئة سطح مكتب ممتازة (سطح مكتب جنوم افتراضيًا). أما بقية النسخ فهي مخصصة لأغراض أكثر تقدمًا كنسخة الحوسبة السحابية fedora cloud ونسخة إنترنت الأشياء fedora IoT وغيرها. توزيعة ريد هات إنتربرايز لينكس RHEL توزيعة شهيرة وموثوقة من لينكس ترعاها شركة (ريد هات Red Hat) وهي مبنية أساسًا على نواة لينكس لكن ما يجري حاليًا أنها تعتمد على توزيعة فيدورا لتطوير نفسها بتقنيات جديدة موثوقة. فتوزيعة فيدورا هي توزيعة مجانية ترعاها شركة "ريد هات" لكن من يطوّرها هو مجتمعات المطورين والمهتمين، فما يجري من تحديثات على فيدورا تنتقل بعد المراجعة والاختبار لتكون جزءًا من ريد هات إنتربرايز لينكس. لتوزيعة RHEL عدة إصدارات، كما بُنيت عليها توزيعات أخرى، فهي مفتوحة المصدر لكنها غير مجانية. توزيعة سوسي لينكس توزيعة مبنية على نواة لينكس وتأتي وفق عدة إصدارات منها لإدارة الحواسب المكتبية والمحمولة SUSE Linux Enterprise Server وأخرى لإدارة الخوادم SUSE Linux Enterprise Desktop ونسخ أخرى للحوسبة السحابية والحوسبة الحدية مثل SUSE Linux Enterprise Micro. هذه النسخ غير مجانية لكنها في المقابل أرخص بكثير من إصدارات ويندوز أو ماك أو إس. ستجد أيضًا النسخة openSuse المجانية والمفتوحة المصدر، وتأتي لحواسب سطح المكتب وفق أحد إصدارين هما Leap والآخر Tumbleweed. لماذا لينكس؟ عمدت قاصدًا أن أتأخر في الحديث عن فوائد استخدام لينكس حتى هذه اللحظة، حتى يتسنى لك الاطلاع على ماهية نظام لينكس وما هي قصة التوزيعات المختلفة الكثيرة جدًا وفلسفة تطوير كل منها ومن يطوّرها ولمن تُوجّه. دعنا نناقش الأمر بكل بساطة وعملانية، ما الذي يدفعني كمستثمر عادي للانتقال إلى لينكس؟ نظام تشغيل مجاني: هنالك الكثير من التوزيعات الشهيرة مجانية تمامًا لأن من يطوّرها ويطوّر برمجياتها مجتمع من المهتمين من ذوي الخبرة والممارسة. فلماذا على أن أدفع ثمن نظام تشغيل إن كانت هناك أنظمة أخرى عملية ومجانية؟ آمن نسبيًا: لن يكون جهازك عرضة للبرمجيات الضارة والفيروسات دائمًا كما هو الحال في أنظمة ويندوز وماك وبالتالي لن تحتاج بالضرورة إلى برامج حماية. لا يعني هذا أنك محصّن تمامًا لكن احتمال أن تتعرض إلى برمجيات ضارة ضعيف. واجهة مستخدم رسومية: رأينا أن معظم التوزيعات التي تكلمنا عنها سابقًا تأتي مع بيئة سطح مكتب رسومية لتسهل عليك التعامل مع حاسوبك وهذه البيئات لا تقل فعالية وجمالًا وأناقة عن مثيلاتها في ويندوز وماك. برامج وتطبيقات مجانية: تستطيع أن تجد كمًا كبيرًا من البرمجيات المجانية تغطي كل احتياجاتك من البرمجيات المكتبية إلى مشغلات الوسائط المتعددة إلى برامج الرسوميات دون أن تدفع أي مقابل. توزيعات خفيفة: توقفت مايكروسوفت وماك عن دعم الأنظمة القديمة، ولن تستطيع الأجهزة القديمة التي لا تزال صالحة للعمل تشغيل النسخ الأحدث من أنظمة التشغيل تلك لأنها تتطلب مواصفات أعلى بكثير. يقدّم لينكس هنا حلًا رائعًا بتوفيره توزيعات عصرية لكنها خفيفة تستطيع أن تعمل على الأجهزة القديمة دون مشاكل تذكر. لم أذكر بالطبع فوائد العمل على لينكس للتقنيين والمطورين والمبرمجين لأنهم يدركون جيّدًا فائدة ذلك، ويعلمون أن التقنيات مفتوحة المصدر أثبتت فعاليتها في تطوّر صناعة البرمجيات لهذا تجد أن شركات مثل مايكروسوفت وجوجل بدأت بدعم هذه التقنية ودعم البرمجيات متعددة المنصات (التي تعمل على عدة أنظمة تشغيل) لأسباب عديدة تخرج عن إطار هذا المقال. أسئلة شائعة عن لينكس سنحاول تاليًا أن نكمل بعض الأفكار ونلخص بعضها وفق أسلوب الأسئلة والأجوبة كي لا نتعمق في التفاصيل. هل لينكس مجاني؟ ليست كل التوزيعات، لكنك تستطيع الحصول على الكثير من التوزيعات القوية والمستقرة مجانًا. هل هناك نظام تشغيل يُدعى لينكس يمكنني تثبيته على حاسوبي؟ عمومًا لا. لينكس هو نواة تُبنى على أساسها توزيعات (أنظمة تشغيل) يمكنك تثبيت أي منها واستثمارها. هل لينكس هو نفسه يونكس؟ لا، لكن نظام التشغيل لينكس هو نظام مشابه لنظام يونكس UNIX-like ومشتق منه. هل يمكن لأي شخص استخدام لينكس؟ بالتأكيد، أيًا تكن خبرته في العمل على الحاسوب. هل تعلّم لينكس صعب؟ لا بكل تأكيد وخاصة عند تثبيت توزيعات صديقة للمبتدئين. هل تعمل تطبيقات لينكس على جميع التوزيعات؟ ليس بالضرورة. تأتي التطبيقات ضمن حزم برمجية مختلفة. فإن دعمت توزيعتان نفس الحزمة سيعمل التطبيق على كل منهما. وعادة ما يمكن للتوزيعة تشغيل التطبيقات التي تشغّلها التوزيعة التي اشتُقت منها. هل يمكنني إيجاد معظم البرامج التي أحتاجها إن استخدمت لينكس؟ بكل تأكيد، والكثير منها مجاني. هل يمكنني تشغيل تطبيقات ويندوز على لينكس والعكس؟ نعم لكن من خلال برمجيات مخصصة تثبتها على نظام التشغيل المضيف لتشغّل برامج النظام الضيف. هل تثبيت البرامج صعب على لينكس؟ نوعًا ما، فعلى الرغم من توفّر برمجيات تأتي افتراضيًا مع توزيعات لينكس لتساعدك في البحث عن البرامج التي تحتاجها وتثبيتها، إلا أن المشاكل قد تحدث. هل تثبيت لينكس صعب؟ غالبًا ما تكون العملية أسهل من تثبيت البرمجيات عليه وخاصة في التوزيعات المهيأة للإقلاع من بطاقة ذاكرة أو قرص USB. تثبت هذه الإصدارات النظام دون أي تدخل منك إلا ما ندر. هل يمكنني تثبيت لينكس مع ويندوز؟ نعم تتيح لك عدة توزيعات هذا الأمر مثل أوبونتو، ويمكنك عند إقلاع الحاسب اختيار نظام التشغيل الذي تريد العمل عليه. هل يتعرف لينكس على أي جهاز يتصل به تلقائيًا دون تعريفات drivers؟ تدعم التوزيعات الشهيرة معظم أنواع العتاد الصلب ولن تحتاج عادة إلى أي برمجيات إضافية أو تعريفات. لكن لا بأس أن تطلع على كُتيّب المستخدم أو على صفحة المُنتَج على الإنترنت لتفاصيل أكثر. هل علي كتابة أوامر دائمًا عند العمل على لينكس؟ ليس بالضرورة، فالكثير من التوزيعات تأتي مع واجهة رسومية تتيح لك التعامل مع نوافذ وقوائم وأزرار. لكنك سترى أن تعلم الأوامر أمر مهم جدًا في مرحلة ما من رحلتك. ما هي توزيعة لينكس المناسبة لمبتدئ؟ أنصح بتوزيعة لينكس مينت أو زورين أو أبونتو. خاتمة يزداد عدد مستخدمي توزيعات لينكس المختلفة كثيرًا على تنوع خبراتهم وغاياتهم، وتثبت هذه التوزيعات قوتها وفعاليتها العالية في شتى مجالات الحوسبة من الحواسب الشخصية إلى الخوادم إلى التقنيات السحابية إلى الأنظمة المدمجة وإنترنت الأشياء. ومع تطوّر بيئات سطح المكتب التي تأتي مع مختلف التوزيعات ازدادت شعبية توزيعات لينكس بين المستخدمين العاديين وخاصة أن الكثير منها مجاني، ولم تُعد هناك فروق تلحظ مع الأنظمة الشهيرة المدفوعة مثل ويندوز وماك. لهذا حاولنا في هذا المقال الإحاطة بالأفكار الأساسية التي ينبغي لأي قادم جديد إلى عالم لينكس معرفتها وأجبنا عن الكثير من الأسئلة التي تقلقهم حتى يكون انتقالهم بسيطًا وسهلًا ودون مشاكل تذكر. اقرأ أيضًا ما هو نظام لينكس ولماذا توجد 100 توزيعة منه؟ تثبيت البرمجيات في أبونتو عبر الواجهة الرسومية. تعرف على سطح مكتب أوبونتو 20.04. التعامل مع المجلدات والملفات في أوبونتو 20.04 النسخة الكاملة لكتاب أنظمة التشغيل للمبرمجين

نلقي نظرةً في هذا المقال على الطريقة التي تُنسّق فيها بعض العناصر الخاصة باستخدام لغة CSS، إذ تُعد الصور والوسائط المتعددة والنماذج من العناصر التي تسلك سلوكًا مختلف قليلًا عن الفكرة النمطية للصناديق من ناحية القدرة على تنسيقها باستخدام CSS. لهذا من المهم أن تعرف ما هو ممكن وما هو غير ممكن عند تنسيق هذه العناصر، فلا يصيبك الإحباط وأنت تحاول، وهذا ما سنتعرف عليه في مقالنا. ننصحك قبل المتابعة في قراءة هذه المقال أن: تطلع على أساسيات استخدام الحاسوب وتصفح الويب. تحضّر بيئة عمل بسيطة كما تحدثنا مسبقًا في المقال تثبيت البرمجيات الأساسية، وتتفهم طريقة إنشاء وإدارة الملفات كما شرحناها في مقال التعامل مع الملفات. تطلع على أساسيات HTML كما شرحناها في سلسلة المقالات مدخل إلى HTML. تتفهم أساسيات CSS كما شرحناها في سلسلة المقالات خطواتك الأولى في CSS. العناصر المستبدلة Replaced Elements توصف الصور ومقاطع الصور بأنها عناصر مُستبدلة، ويعني هذا عدم قدرة CSS على التأثير بالتخطيط الداخلي لهذه العناصر، بل في موقعها في الصفحة بالنسبة لبقية العناصر. مع ذلك سنرى بعض الأشياء التي يمكن للغة CSS أن تفعلها فيما يخص الصور. تمتلك بعض العناصر المُستبدلة مثل الصور ومقاطع الفيديو خاصية تصف نسبة بعدي العنصر Aspect ratio، أي أن لها حجمًا وفق البعد الأفقي "x" والبعد العمودي "y"، وستُعرض هذه العناصر على الشاشة وفقًا للأحجام الفعلية intrinsic التي يصفها ملف الصورة أو الفيديو. تحجيم الصور لقد رأينا في مقالات سابقة أن كل عنصر يوّلد صندوقًا افتراضيًا حوله لتسهيل تنسيقه من خلال CSS، فلو وضعت صورةً ضمن صندوق أصغر أو أكبر من الأحجام الفعلية للصورة كما يحددها ملف الصورة، سيؤدي إلى عرض الصورة ضمن صندوق أكبر منها أو أن تطفح الصورة خارج حدود الصندوق، وعليك أن تتصرف مباشرةً في حالة الطفحان. لدينا في المثال التالي صندوقان لهما نفس الحجم (200 بكسل): يضم الأول صورةً أصغر من 200 بكسل أي أنها أصغر من حجم الصندوق ولا تتمدد لتملأه. يضم الثاني صورةً أكبر من 200 بكسل وتطفح خارج الصندوق. ما الذي يمكن أن نفعله هنا بخصوص الطفحان؟ كما تعلمنا في المقال السابق، سيكون الحل الأكثر شيوعًا استخدام الخاصية max-width وإسناد القيمة %100 لها، وهذا ما سيجعل الصورة أصغر من الصندوق وليس أكبر منه، وتعمل هذه الطريقة أيضًا مع بقية العناصر المُستبدلة مثل <video> و <iframe>. حاول أن تضيف الخاصية max-width: 100% إلى المحدد img في المثال السابق وسترى أن الصورة الكبيرة ستصغر بينما تبقى الصورة الصغيرة كما هي. يمكنك أيضًا العمل مع خيارات أخرى بخصوص الصور وحاوياتها، فقد ترغب في تحجيم الصورة كي يتسع لها الصندوق تمامًا. قد تساعدك الخاصية object-fit، فعندما تستخدمها ستحجّم الصورة لتتلائم مع الصندوق بطرق شتى. وضعنا في المثال التالي القيمة cover للخاصية object-fit والتي تصغّر الصورة دون المساس بنسبة البُعدين وتملأ الصندوق، لكن سيجري اقتصاص أطراف الصورة. بينما لو استخدمنا القيمة contain ستتغير أبعاد الصورة حتى تتلائم مع حجم الصندوق وبالتالي ستتعرض إلى ما يُسمى "التقييس Letterboxing" أي قد لا يكون لها نفس نسبة بُعدي الصندوق، أما القيمة fill فستملأ الصندوق دون أن تحافظ على نسبة البُعدين. العناصر المستبدلة ضمن تخطيط الصفحة عندما نطبق قواعد CSS الخاصة بتخطيط الصفحة على العناصر المُستبدلة، فقد تجد أنها تعمل بطريقة مختلفة قليلًا عن عملها مع بقية العناصر، إذ تتمدد العناصر في تخطيطي الشبكة grid والصندوق المرن flex تلقائيًا لتملأ كامل المساحة المخصصة، بينما لا تتمدد الصور وتجري محاذاتها إلى بداية منطقة التخطيط. لدينا في مثالنا التالي عمودين وحاوية على شكل شبكة من سطرين وبالتالي لدينا أربعة عناصر. تمتلك في مثالنا العناصر <div> خلفية لونية وتمتد حتى تملأ الحيز المخصص في الشبكة، لكن الصورة لا تسلك هذا السلوك. ربما لم تتطلع على مفهوم تخطيطات صفحات ويب حتى الآن، لكن تذكر أن العناصر المُستبدلة عندما تصبح جزءًا من تخطيط الشبكة أو تخيط الصندوق المرن، ستسلك افتراضيًا سلوكًا مختلفًا عن غيرها من العناصر كي تتفادى تمددها بطريقة غير صحيحة داخل التخطيط. يمكن أيضًا إجبار الصورة على التمدد لتملأ الخلية التي تضمها ضمن الشبكة باستخدام الشيفرة التالية: img { width: 100%; height: 100%; } ستتمدد الصورة عن تطبيق هذه الخاصيات لكن بطريقة قد لا ترغب بها. عناصر النماذج ستجد بعض الصعوبة في التعامل مع عناصر النموذج باستخدام CSS، لكن هناك بعض المبادئ الأساسية التي ينبغي الإضاءة عليها. تُضاف العديد من عناصر التحكم إلى النماذج باستخدام العناصر الإدخال <input> التي قد تُعرّف حقلًا بسيطًا من حقول النموذج مثل عناصر الإدخال النصية، وقد تعرّف عناصر أكثر تعقيدًا مثل عناصر اختيار اللون والتاريخ، كما ستجد عناصرًا أخرى، مثل <textarea> لإدخال نص متعدد الأسطر، وعناصر لعرض العناوين الفرعية في النموذج، مثل <fieldset> و <legend>. تضم HTML أيضًا سماتٍ تمكّن مطوري الويب لتحديد الحقول التي ينبغي ملؤها من حقول النموذج ونوع المحتوى الذي ينبغي أن يضمه كل حقل، فإذا أدخل المستخدم قيمًا تخالف ما هو متوقع أو ترك حقلًا مطلوبًا دون أن يملأه، يمكن أن يعرض المتصفح رسالة خطأ. تختلف المتصفحات فيما بينها بمقدار التنسيق والتخصيص الذي يمكن تطبيقه على كل عنصر. تنسيق عناصر الإدخال النصي من السهل تنسيق عناصر الإدخال النصي، مثل <input type="text">، أو <input type="email">، أو <textarea>، وتميل إلى سلوك قريب من سلوك بقية العناصر الصندوقية في الصفحة، لكن قد يختلف السلوك الافتراضي لها تبعًا لنظام التشغيل والمتصفح الذي تستخدمه لزيارة الصفحة. طبقنا في المثال التالي تنسيق CSS على عنصر الإدخال، ويمكنك أن ترى أن تنسيق الحواف والهوامش والحشوات سيعمل بالطريقة المتوقعة. استخدمنا في التنسيق محددات السمات attribute selectors لاستهداف عناصر الإدخال النصي، ويمكنك أن تجرب تغيير مظهر النموذج بتنسيق الحواف وإضافة خلفيات لونية إلى الحقول وتغيير خط الكتابة والحشوات. تنبيه: لا بد من أخذ الحيطة عند تغيير تنسيق عناصر نموذج كي تبقى واضحة للمستخدم على أنها عناصر نموذج، فإذا جعلتها دون حواف وبخلفية تماثل خلفية المحتوى الذي يحيط بها، لن يتمكن عندها المستخدم من تمييزها، مما يجعل ملأ الحقول أمرًا صعبًا. تُصيّر عناصر الإدخال الأكثر تعقيدًا من قبل نظام التشغيل ولا يمكن تنسيقها، لهذا تذكر أن النماذج قد تُعرض على نحوٍ مختلف للزوار المختلفين، وعليك أن تختبر هذه العناصر على عدة متصفحات. الوراثة وعناصر النماذج لا ترث بعض العناصر تنسيقات الخطوط افتراضيًا في بعض المتصفحات، لهذا لا بد من إضافة القواعد التي تريدها إلى قواعد تنسيق CSS بنفسك إذا أردت التأكد من أن الخط المستخدم في عناصر النموذج هو نفسه الخط المعرّف في متن الصفحة، أو في العنصر الأب. button, input, select, textarea { font-family: inherit; font-size: 100%; } عناصر النموذج وتحجيم الصندوق تختلف قواعد تحجيم صناديق عناصر النماذج من متصفح إلى آخر، ويمكنك الاطلاع على مقال نموذج الصندوق box model في تنسيقات CSS الذي تحدثنا فيه عن استخدام الخاصية والاستفادة من المعلومات التي أوردناها فيه في تنسيق النماذج للتأكد من التناسق عند ضبط حيّز وارتفاع عناصر النموذج. ولأغراض التناسق، من الجيد ضبط الحشوة على القيمة 0 لكل العناصر، ثم إضافة قواعد التنسيق التالية: button, input, select, textarea { box-sizing: border-box; padding: 0; margin: 0; } بعض الإعدادات المفيدة إضافةً إلى القواعد التي ذكرناها سابقًا، لا بد أن تستخدم الخاصية overflow: auto على العنصر <textarea> لتمنع متصفح "إنترنت إكسبلورر" من إظهار أشرطة التمرير عندما لا تقتضي الحاجة ذلك: textarea { overflow: auto; } ضبط جميع القواعد السابقة دفعة واحدة سنعمل في الخطوة الأخيرة على وضع جميع الخاصيات السابقة المستخدمة في تنسيق عناصر النموذج ضمن مكان واحد على النحو التالي: button, input, select, textarea { font-family: inherit; font-size: 100%; box-sizing: border-box; padding: 0; margin: 0; } textarea { overflow: auto; } ملاحظة: توحيد Normalizing صفحات التنسيق هي طريقة يستخدمها الكثير من المطورين لإنشاء مجموعة من قواعد التنسيق التي تُستخدم بمثابة أساس للتنسيق في جميع المشاريع، وما يفعلونه مشابهٌ تقريبًا لما فعلناه في الأعلى للتأكد من أن أية فروقات قد تنتج عن المتصفحات المختلفة قد ضُبطت على قيم افتراضية متناسقة قبل أن تطبق أية قواعد خاصة. حاليًا لا تمتلك عملية توحيد التنسيق الأهمية التي كانت عليها سابقًا نظرًا لتناسق المتصفحات بطريقة أفضل بكثير ما كانت. إذا أردت أن تلقي نظرةً على الأمر، عُد إلى الملف Normalize.css الأكثر شعبية الذي يُستخدم بمثابة أساس للكثير من المشاريع. الخلاصة قدمنا في هذا المقال إضاءات على بعض الاختلافات التي ستواجهها عند العمل مع الصور والوسائط المتعددة وغيرها من العناصر الخاصة في CSS. ترجمة -وبتصرف- للمقال Images, Media and form elements اقرأ أيضًا المقال السابق:تحجيم الأشياء في CSS كيفية تنسيق الصور باستخدام CSS الصور في تصميم صفحات الويب المتجاوب التنسيقات الأساسية للعناصر في CSS

تحدثنا في مقالات سابقة عن طرق عديدة لتحجيم الأشياء ضمن صفحة الويب باستخدام CSS، فمعرفة التأثيرات التي ستُحدثها الميزات المختلفة على تصميمك أمرٌ مهمٌ جدًا، لهذا نلخص في هذا المقال الطرق المختلفة التي يمكن تحديد حجم الأشياء في CSS ونعرّف بعض المصطلحات التي ستساعدك مستقبلًا عن التحجيم sizing. ننصحك قبل المتابعة في قراءة هذه المقال أن: تطلع على أساسيات استخدام الحاسوب وتصفح الويب. تحضّر بيئة عمل بسيطة كما تحدثنا مسبقًا في المقال تثبيت البرمجيات الأساسية، وتتفهم طريقة إنشاء وإدارة الملفات كما شرحناها في مقال التعامل مع الملفات. تطلع على أساسيات HTML كما شرحناها في سلسلة المقالات مدخل إلى HTML. تتفهم أساسيات CSS كما شرحناها في سلسلة المقالات خطواتك الأولى في CSS. الأحجام الطبيعية أو الفعلية للأشياء تمتلك عناصر HTML أحجام طبيعية تأخذها قبل أن تؤثر فيها تنسيقات CSS، وكمثال مباشر على ذلك هو عنصر الصورة، إذ يحتوي ملف الصورة بطبيعته على معلومات عن حجم الصورة، والتي تُدعى باسم الحجم الفعلي intrinsic size، وتتحدد من قبل الصورة نفسها وليس من قبل أي تنسيق يُطبق لاحقًا عليها. عندما نضع هذه الصورة ضمن صفحة دون أن نغير بارتفاعها أو حيّزها width من خلال استخدام سمات العنصر <img> أو باستخدام خاصيات CSS، ستُعرض الصورة باستخدام حجمها الفعلي. وضعنا حول الصورة في المثال التالي إطارًا كي تقدّر حجم الصورة كما يعرّفها ملف الصورة: من ناحية أخرى، لا يمتلك العنصر <div> الفارغ بنفسه أية أحجام، فلو أضفنا هذا العنصر إلى صفحة HTML دون أي محتوى ضمنه ثم وضعنا حوله إطارًا كما فعلنا مع الصورة، فما ستلاحظه هو مجرد خط ضمن الصفحة. هذا الخط هو الإطار المنكمش للعنصر، فلا يوجد محتوى لتتميز حواف الإطار، أما لماذا امتد إطار العنصر على كامل عرض الصفحة، فالسبب أنه عنصر كتلي أي أنه يقع على سطر مستقل ويحتل كامل مساحة هذا السطر. ليس لهذا العنصر في مثالنا ارتفاع (أو بعد وفق اتجاه الكتلة) لعدم وجود أي محتوى ضمنه. حاول أن تضيف بعض العبارات ضمن العنصر الفارغ في المثال السابق وسترى كيف يظهر الإطار بوضوح لأن ما يحدد ارتفاع هذا العنصر هو المحتوى الذي يضمه. إذًا، يأتي حجم العنصر <div> وفق اتجاه الكتلة من حجم المحتوى وبالتالي يأتي الحجم الفعلي لهذا العنصر من حجم المحتوى. باختصار: الحجم الفعلي للعنصر هو حجمه المعرّف من قبل المحتوى الخاص به. ضبط حجم عنصر على قيمة محددة يمكن طبعًا إعطاء أي عنصر ضمن تصميمنا أحجامًا محددةً، وعندها يُشار إلى هذه الحجام أنها أحجام خارجية extrinsic size (عندها لا بد أن يتلائم المحتوى مع حجم العنصر). لو أخذنا العنصر <div> في مثالنا السابق وضبطنا ارتفاعه height وحيّزه width، سيأخذ تمامًا هذه الأحجام أيًا يكن حجم المحتوى الذي سيوضع ضمنه. وقد أشرنا في مقال "التعامل مع طفحان المحتوى خارج صندوق العنصر" أن ضبط ارتفاع العنصر سيسبب طفحان المحتوى إن لم تكن أحجام صندوق العنصر قادرة على استيعاب كامل المحتوى. إذًا، لا بد من الانتباه جيدًا عند ضبط قيمة ارتفاع العنصر على قيمة عددية محددة أو نسبة مئوية حتى لا يحدث طفحان للمحتوى. استخدام النسب المئوية تعمل النسب المئوية في كثيرٍ من الأحيان كما تعمل وحدات الطول، ورأينا في مقال "وحدات القياس والقيم في CSS" أنه بالإمكان استبدال أحدهما بالآخر. عليك عند استخدام النسب المئوية أن تعرف أنها نسبة من شيء ما، ففي حالة صندوق ضمن آخر مثلًا وعندما تحدد حيّز الصندوق الداخلي (الصندوق الابن) كنسبة مئوية فهي نسبة مئوية من حيّز الصندوق الأب. والسبب في ذلك أن النسب المئوية مأخوذةً نسبةً إلى أبعاد الكتلة الحاوية للعنصر؛ فإذا لم نستخدم النسبة المئوية لضبط حيّز العنصر <div> في المثال السابق، فسيشغل 100% من المساحة المتاحة له كونه عنصر كتلي؛ بينما سيشغل مقدارًا محددًا من تلك المساحة إذا حددنا حيّزه بنسبة مئوية منها. تحديد الهوامش والحشوة بنسب مئوية قد تلاحظ سلوكًا غريبًا عند تحديد قيم الهوامش والحشوات بنسب مئوية. نعرض في المثال التالي صندوقًا يضم محتوًى وقد حددنا هامش margin هذا المحتوى ومقدار الحشوة padding بالقيمة 10%. لاحظ أن مقدار الحشوة والهامش في الأعلى والأسفل سيعادل مقدار الهامش على اليمين واليسار. قد تعتقد أن النسبة المئوية للهامش العلوي والسفلي هي نسبة مئوية من ارتفاع العنصر وأن النسبة المؤية للهامش اليميني واليساري هي نسب مئوية من حيّز العنصر، وهذا الأمر ليس صحيحًا. عندما تُستخدم الحشوات والهوامش بقيم مئوية فإنها تُنسب إلى الحجم السطري inline size للكتلة الحاوية، وهو حيّز الكتلة الحاوية عندما تكون لغة الكتابة أفقية الانسياب. لهذا السبب ظهرت قيم الهوامش والحشوات جميعها متساوية في مثالنا السابق وهو 10% من حيّز الصندوق. لا بد من تذكر هذا الأمر جيدًا عندما تخطط لاستخدام النسب المئوية بهذه الطريقة. الأحجام باستخدام البادئتان max و min يمكنك أيضًا أن تجعل أحجام العنصر أكبر ما يمكن أو أصغر ما يمكن في CSS بدلًا من إعطاءه حجمًا ثابتًا، فإذا كان لديك مثلًا صندوق يضم كميةً متغيرةً من المحتوى وأردت أن يكون أقل ارتفاع له مقدارًا محددًا، يمكنك استخدام الخاصية min-height، وعندها سيكون ارتفاع الصندوق على الأقل مساويًا لقيمة هذه الخاصية، لكنه سيزداد تلقائيًا إذا زادت كمية المحتوى واحتاج إلى التوسع عموديًا. يعرض المثال التالي صندوقين ضُبطت قيمة الخاصية min-height لكل منهما على 150 بكسل. الصندوق اليساري فارغ أما اليميني فيضم محتوى يحتاج إلى مساحة أكبر، لهذا فقد توسع عموديًا ليتسع للمحتوى. هذا الأسلوب مفيد جدًا عند التعامل مع كميات متغيرة من المحتوى دون حدوث طفحان. أحد استخدامات الخاصية max-width هو تصغير أبعاد الصورة إن لم يكن هناك متسع من المساحة لعرضها بحيّزها الفعلي ودون أن تشغل حيزًا أكبر من المساحة المخصصة لها. إذا أردت ضبط حيّز الصورة ليكون width: 100%، وكان حيّزها الفعلي أقل من حيّز الحاوية التي تضمها، فسيجبر المتصفح الصورة على الامتداد لتصبح أوسع، وقد يؤدي ذلك إلى تشوه مظهرها، لكن لو استخدمت max-width: 100% وكان حيّز الصورة الفعلي أقل من حيّز الحاوية، فلن تتمدد الصورة لتشغل مساحة أكبر ولن تتعرض للتشوه. استخدمنا في مثالنا التالي الصورة نفسها ثلاث مرات؛ إذ ضُبط حيّز الأولى على width: 100% ووضعت ضمن حاوية أكبر حيّزًا منها وبالتالي تتمدد لتغطي مساحة الحاوية تمامًا؛ وضبط حيّز الثانية ليكون max-width: 100% في نفس الحاوية لكن الصورة لم تتمدد هذه المرة لتشغل مساحة الحاوية؛ أما في الصورة الثالثة فقد ضُبط حيّزها على max-width: 100% ووضعت في حاوية أقل حيّزًا منها فانكمشت الصورة لتتناسب مع حيّز الحاوية. تُستخدم هذه التقنية لجعل الصور متجاوبة عند عرضها على شاشات أصغر، إذ تنكمش لتتلائم مع أحجام شاشة العرض. لكن عليك ألا تستخدم هذه التقنية لتحميل الصورة الكبيرة الحجم ثم تصغيرها ضمن المتصفح، فلا بد من اختيار الصورة بحجم مناسب كي لا تكون أكبر من الحجم المطلوب لأكبر حجم قد تُعرض بها الصورة، إذ سيسبب تحميل الصورة الضخمة بطء المتصفح وسيكلّف الزوار أكثر إذا كانت تكلفة الاتصال وفقًا لحجم البيانات التي تتبادلها. وحدات قياس نافذة العرض تُعرّف نافذة العرض viewport بأنها المساحة المرئية من الصفحة ضمن متصفحك الذي تستخدمه لعرض الصفحة. لنافذة العرض أيضًا حجم، ويوجد في CSS وحدات متعلقة بنافذة العرض، مثل vw وهي وحدة لحيّز نافذة العرض و vh من أجل ارتفاع نافذة العرض. تعادل القيمة 1vh مقدار %1 من ارتفاع نافذة العرض ويعادل 1vw مقدار %1 من حيّز نافذة العرض، ويمكنك استخدام هذه الوحدات لضبط أحجام الصناديق والنصوص. يعرض المثال التالي صندوقًا أبعاده 20vh و 20vw. يضم الصندوق الحرف A وقد ضُبط حجم الخط font-size داخل الصندوق على 10vh. إذا غيّرت قيم vh و vw سيغيّر ذلك حجم الصندوق أو حجم الخط، وسيؤدي تغيير حجم نافذة العرض إلى تغيير حجم الصندوق وحجم خط الكتابة أيضًا، لأن حجمه مقاسٌ بالنسبة إلى نافذة العرض. حتى ترى التغييرات التي ذكرناها لا بد من عرض الشيفرة السابقة ضمن نافذة جديدة لمتصفحك كي تتمكن من إعادة تحجيم المتصفح. يمكنك أيضًا استعراض المثال التجريبي الموجود على غيت-هب من خلال متصفحك ثم غيّر حجم نافذة المتصفح لترى ما الذي سيحدث. من المفيد تحجيم الأشياء بالنسبة إلى نافذة العرض في تصميمك، فإذا أردت مثلًا عرض صورة على كامل شاشة الجهاز ثم يأتي بعدها بقية المحتوى عند التمرير إلى الأسفل، اضبط ارتفاع ذلك الجزء من الصفحة ليكون 100vh، وسيدفع ذلك بقية المحتوى إلى الأسفل ولن يظهر ضمن نافذة العرض حتى تنتقل بالتمرير إلى الأسفل. الخلاصة تعرفنا في هذا المقال على بعض الأفكار المهمة التي يمكن أن تستخدمها عند تحجيم العناصر في صفحات الويب. سيغدو موضوع التحجيم مهمًا أكثر عندما تنتقل للعمل مع تخطيطات CSS كي تتقن الاختلافات بين التخطيطات المختلفة، لهذا من الجيد أن تستوعب هذه الأفكار قبل دراسة التخطيطات. ترجمة -وبتصرف- للمقال Sizing items in CSS. اقرأ أيضًا وحدات القياس والقيم في CSS كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS التنسيقات الأساسية للعناصر في CSS

نعرض في هذا المقال لمحة موجزة عن واجهة محرك الألعاب جودو Godot، ونلقي نظرة على شاشاتها المختلفة وقوائمها كي تعرف كيف ترتب الواجهة بما يلائمك. مدير المشروع وهي أول نافذة تظهر عندما تُشغّل جودو Godot، وتضم نافذتين فرعيتين أولهما "المشاريع الخاصة Local projects" التي تتيح لك إدارة المشاريع الموجودة على حاسوبك وإدراج أو إنشاء مشاريع جديدة وغيرها. أما النافذة الأخرى فهي "مشاريع مكتبة الملحقات Asset Library Projects" التي تساعدك على البحث عن مشاريع تجريبية في مكتبة الموجودات مفتوحة المصدر وتضم الكثير من المشاريع التي يطوّرها مجتمع جودو. تستطيع أيضًا تغيير لغة المحرر الافتراضية (اﻹنكليزية) من خلال النقر على زر القائمة المنسدلة أعلى ويمين نافذة المحرك. نظرة أولى إلى محرر جودو عندما تفتح مشروعًا موجودًا أو تنشئ مشروعًا جديدًا، سيعرض لك المحرّك نافذة المحرر كما في لقطة الشاشة التالية: تتكون النافذة من قوائم وشاشات رئيسية وأزرار للتحكم أعلى النافذة: ستجد في منتصف الشاشة نافذة العرض مع شريط أدواتها في الأعلى، وستجد ضمن الشريط أدوات لتحريك أو تحجيم أو قفل عقد المشهد. وستجد على طرفي نافذة العرض حاويات docks وفي أسفلها لوحة أدوات سفلية. يتغيّر شريط اﻷدوات وفقًا لسياق العمل والعقدة المختارة. إليك لقطة شاشة شريط أدوات مشهد ثنائي البعد: وشريط أدوات مشهد ثلاثي اﻷبعاد: لنلق نظرة اﻵن إلى الحاويات وأولها الحاوية "نظام الملفات FileSystem" التي تعرض قائمة بملفات المشروع بما في ذلك السكربتات والصورة ومقاطع الصوت وغيرها: أما الحاوية الثانية فهي "المشهد Scene" التي تعرض قائمة بالعقد الفعّالة: وتتيح لك حاوبة "الفاحص Inspector" تعديل خصائص العقدة المختارة: تظهر لوحة اﻷدوات السفلية تحت نافذة العرض وتضم طرفية التنقيح debug console ومحرر الرسوم المتحركة والمازج الصوتي وغيرهم من اﻷدوات. تشغل اللوحة مساحة لا بأس بها لهذا تكون مخفية افتراضيًا. عندما تنقر على أي عنصر من اللوحة تتمدد شاقوليًا. إليك لقطة شاشة للوحة وهي تعرض المحرر الرسومي: الشاشات الرئيسية اﻷربعة هناك أربعة أزرار للشاشات الرئيسية أعلى المحرر وهي "الثنائي 2D" و "الثلاثي 3D" و "Script" و "AssetLib". الشاشة 2D ستستخدم الشاشة ثنائية البعد 2D لمختلف أنواع الألعاب، فإضافة إلى اﻷلعاب ثنائية اﻷبعاد ستستخدم هذه الشاشة لبناء الواجهات. الشاشة 3D تتعامل في النافذة ثلاثية اﻷبعاد مع الشبكات واﻷضواء ومراحل تصميم اﻷلعاب ثلاثية الأبعاد: ملاحظة: بالنقر على الزر "perspective" تحت شريط اﻷدوات سيفتح لك قائمة بخيارات تتعلق بالمشهد ثلاثي اﻷبعاد. الشاشة Script تعرض هذه الشاشة محرر الشيفرة المتكامل والمزود بمنقح وآلية ﻹكمال الشيفرة ومراجع مدمجة إلى الشيفرة: الشاشة AssetLib تضم الشاشة مكتبة من الإضافات مفتوحة المصدر والسكربتات وغيرها من الموجودات التي تساعد في مشروعك: مراجع مدمجة إلى اﻷصناف يزوّدك جودو بمراجع مدمجة إلى اﻷصناف وتوابعها وخاصياتها وثوابتها وإشاراتها ويساعدك في البحث عنها بسهولة بإحدى الطرق التالية: الضغط على زر F1 (أو Alt+Space في ماك أو fn+F1 في الحواسب المحمولة التي تحتوي الزر fn). النقر على الزر "البحث في المساعدة Search help" في أعلى ويمين شاشة السكربت الرئيسية. النقر على قائمة "مساعدة Help" ثم "البحث في المساعدة Search Help". النقر على اسم الصنف أو الدالة او المتغير المدمج مع الضغط على الزر Ctrl. عند استخدام أية طريقة من الطرق السابقة تنبثق نافذة اكتب فيها ما تريد البحث عنه، كما يمكنك استخدامها لتصفح الكائنات والتوابع المتاحة. انقر نقرة مضاعفة على العنصر لفتح الصفحة المتعلقة به ضمن نافذة السكربت. ترجمة -وبتصرف-للمقال First look at Godot's editor. اقرأ أيضًا مدخل إلى محرك الألعاب جودو Godot مدخل إلى صناعة ألعاب المتصفح برمجة لعبة متاهة باستخدام محرك يونيتي Unity

يُدرك المبرمج أيًا كانت خبرته أن أي مساعدة مهما كانت صغيرة في تحسين تجربته أثناء كتابة الشيفرات أمر على قدر كبير من الأهمية لما فيه من اختصار لوقت كتابة الشيفرة وزيادة في الإنتاجية وتقليل الأخطاء التي قد يقع فيها. لهذا يميل المبرمجون المحترفون إلى العمل ضمن بيئات عمل متكاملة تضم محرر شيفرة متطور، وأدوات لتصريف أو تفسير الشيفرة، وأدوات لتنفيذها ومراقبتها وإجراء الاختبارات المختلفة عليها. نستعرض في مقالنا دور محررات الشيفرات البرمجية الاحترافية في تأمين بيئة برمجية مريحة والميزات التي تقدمها لتوفير وقت وجهد المبرمجين وزيادة إنتاجيتهم، كما سنلقي نظرة على أكثر محررات الشيفرة البرمجية انتشارًا. ما هي محررات الشيفرات البرمجية تُعرَّف محررات الشيفرة بأنها برمجيات تُستخدم لكتابة شيفرة خاصة بلغة برمجة محددة أو شيفرات عدة لغات برمجية مقدمة دعمًا للمبرمج وفق سويات مختلفة تتعلق بسهولة متابعة الشيفرة والإكمال التلقائي للتعابير البرمجية والتنبيه إلى أخطاء الصياغة ما قبل التصريف أو التفسير. تُعد الأكثرية الساحقة من لغات البرمجة لغات مكتوبة؛ أي ينبغي على المبرمج كتابة جميع التعليمات على شكل عبارات نصية متلاحقة وفق صياغة صحيحة. وبالطبع فإن الشيفرات المكتوبة هي نصوص تمامًا كأي نص آخر، ويجري تحريرها كتحرير أي نص آخر، ففي النهاية قد تخطأ في كتابة بعض التعليمات وتريد التراجع أو تريد نسخ جزء من الشيفرة إلى مكان آخر وهكذا. وطالما أن الشيفرات هي في الأصل تعابير نصية مكتوبة فلماذا لا أستطيع استخدام محررات النصوص التقليدية مثل المفكرة أو مايكروسوفت وورد أو مستندات جوجل؟ في الواقع تستطيع ذلك بكل سهولة، لكن لنتخيل الحالة التي تكتب فيها برنامجًا مكوُنًا من 20 سطرًا برمجيًا على سبيل المثال،ولاحظ أن عليك تذكر كل تعليمات الشيفرة التي عليك وضعها في سياقها الصحيح. بعد أن تنهي كتابة برنامجك عليك نقله إلى المفسر الذي سيحلل الشيفرة ويفسرها ثم يضعها موضع التنفيذ، وقد تتفاجأ بكم من الأخطاء يشير إليها المفسر وتبدأ رحلة التقصي عنها لمعالجتها بالعودة إلى محررك النصي وتفقد مواطن الخطأ. لنفترض الآن أن أخطاءك كتابية كأن تكون قد بدلت حرفًا بآخر في التعليمات أو أغفلت حرفًا أو نقطة أو فاصلة (لم أقل أنك ارتكبت أخطاءً قواعدية Syntax errors أو في الدلالة Semantic errors فهذه قصة أخرى)، عليك هنا البحث عن هذه الأخطاء ضمن 20 سطرًا سيستغرق الأمر بعض الوقت، لكن تخيّل أن تبحث عن الأخطاء ضمن 1000 سطر أو أكثر! كارثة، أليس كذلك؟ لهذا السبب ظهرت فكرة وجود محررات مخصصة للشيفرة تتميز بقدر كافٍ من الذكاء لتمييز أخطاءٍ كالتي أسلفنا ذكرها مباشرة أثناء كتابة الشيفرة وبالتالي سيكون المبرمج قادرًا على تصحيحها في موضوعها بأقل جهد. إضافة إلى تلك الأخطاء تساعدك محررات الشيفرة العصرية في الإشارة إلى خرقك لقواعد اللغة التي تبرمج فيها وحتى الإشارة إلى الأخطاء الدلالية وهي أخطاء منطقية قد لا ينتبه إليها المبرمجون المتقدمون إلا عند تنفيذ الشيفرة وغيرها الكثير من النقاط التي تجعل محررات الشيفرة أداة لا غنى عنها. وأيًا كان مستواك في تعلم البرمجة، ستلمس فرقًا واضحًا عند استخدامك محررات الشيفرة سواء أكنت تتعلم البرمجة حديثًا أم كنت على قدر جيد من الكفاءة، إذ ستحصل على شيفرة صحيحة بأقل جهد ممكن وأقل وقت. ميزات محررات الشيفرات البرمجية تقدم محررات الشيفرات البرمجية مجموعة من المزايا التي قد تجدها جميعًا وقد تجد بعضها، وسنتحدث عن الأكثر عمومًا ثم تليها الميزات الأقل شيوعًا. 1. تمييز التعليمات أثناء كتابتها تُعد هذه الميزة أساسيةً لأي محرر شيفرة، إذ يتعرف المحرر على هذه الكلمة هي كلمة أو تعليمة خاصة بلغة البرمجة المستخدمة ويعرضها بشكل مختلف كأن تظهر بخط سميك أو مائل أو أن تُعرض بلون مختلف. كما تميّز المحررات أنواع البيانات المختلفة وتعرضها بألوان مختلفة. فقد تعرض الأعداد بلون معين والقيم النصية (التي توضع عادة بين إشارة أو إشارتي تنصيص) بلون آخر وهكذا… تعرض لقطة الشاشة السابقة أحد محررات الشيفرة الذي يمّيز الكلمات المفتاحية والأنواع والتعليمات بألوان وتنسيقات كتابية مختلفة. وهكذا يمكن للمبرمج أن يعلم مثلًا أنه ارتكب خطأً في كتابة تعليمة ما إذا ظهرت بخط عادي. 2. ترقيم الأسطر تُرقّم معظم المحررات البرمجية أسطر الشيفرة بما في ذلك الأسطر الفارغة وأسطر التعليقات وهذا أمر ضروري كي تعرف مكان الخطأ وتنتقل إليه مباشرة. كما يمكن أن تشير بعض المحررات إلى موقع الخطأ ضمن السطر الواحد من خلال رقم العمود، وهو رقم يطابق ترتيب الحروف انطلاقًا من بداية السطر. 3. تجميع الشيفرة وترتيبها تستطيع بعض محررات الشيفرة فهم هيكلية الشيفرة التي تكتبها من خلال تمييز بداية الدالة أو الإجرائية ونهايتها أو بداية الكتل الشرطية ونهايتها أو بداية ونهاية الأصناف وهكذا. وبالتالي يمكن لهذه المحررات تصنيف هذه الأقسام المختلفة من الشيفرة ضمن قوائم خاصة كأن تكون هناك قوائم خاصة بأسماء الدوال التي تشير إليها الشيفرة وقوائم تضم الأصناف التي كتبت شيفرتها وقوائم بالمصفوفات إلى ما هنالك. إضافة إلى ذلك تعرض بعض المحررات إشارة - أو إشارة < عند بداية كل قسم تميّزه، وبالنقر على هذه الإشارة (تحول شكل الأيقونة إلى + أو >) يعرض المحرر شيفرة هذا القسم أو يخفيها للتقليل من حجم الشيفرة المعروض ضمن الصفحة وبالتالي التركيز فقط على القسم الذي يعمل عليه المبرمج. 4. التحقق من أخطاء الصياغة (قواعد اللغة) تتعرف بعض محررات الشيفرة إلى الأخطاء في الصياغة أو الأخطاء التي تخالف قواعد اللغة وتشير إليها من خلال وضع خط تحتها أو إحاطتها بمربع أو وضع إشارة ملونة ضمن هامش الصفحة إلى جوار السطر الذي ارتُكب فيه الخطأ القواعدي. لهذه الميزة فائدة عظيمة للمبرمجين لإن الإشارة إلى هذا النوع من الأخطاء سيريح المستخدم من التحقق دائمًا أن صياغته للتعليمات صحيحة دون نسيان أية أقواس أو إشارات أو رموز نهاية السطر. إضافة إلى ذلك تشير بعض المحررات إلى استخدام قيم خاطئة لنوع محدد من البيانات كإسناد قيمة نصية إلى متغير من النوع الصحيح مثلًا أو التحويل الخاطئ أو غير المسموح لنوع إلى نوع آخر وغيرها من الأخطاء التي تنتج عن الأنواع. 5. الإكمال التلقائي للشيفرة لبعض المحررات القدرة على توقع التعليمات التي تريد كتابتها بمجرد كتابة بعض الأحرف؛ فتراها تعرض قائمة من التعليمات أو الأصناف أو الأعضاء أو البنى أو العمليات التي تبدأ بنفس الأحرف وقد تكون إحداها غايتك مما يسرع في كتابة الشيفرة ويساعدك في نفس الوقت على اختيار التعليمة مكتوبةً بطريقة صحيحة، وكذلك في معرفة الخيارات المتاحة لإكمال هذه التعليمة في حال لم تتذكرها كلها. لبعض محررات الشيفرة أيضًا أسلوب ترميزي لتمييز الأنواع والدوال والأغراض عند إظهار قوائم الإكمال التلقائي، إذ يسبق كل خيار أيقونة صغيرة تشير إلى نوعه وطبيعته متغيرًا كان أم دالة أم عضوًا في كائن وهكذا يمكنك اختيار ما هو مطلوب إن تشابهت التسميات. 6. إظهار معلومات عن استخدام الشيفرة ونصائح لحل الأخطاء تعرض بعض المحررات معلومات عن التعليمات التي تكتبها سواء كانت متغيرات أم أصناف أو دوال بمجرد تمرير مؤشر الفأرة فوقها أو حتى أثناء ظهور هذه التعليمات ضمن قوائم الإكمال التلقائي. تتعلق هذه المعلومات بنوع الصنف والأعضاء التي يأخذها ونوع الدالة والمعاملات والقيم التي تعيدها وعدد معاملاتها ونوع كل معامل. وبهذه الطريقة قد تجد دالة أو تعليمة أنسب من التي تفكّر في استخدامها لربما لم تتعرف عليها مسبقًا. كما تشير بعض المحررات إلى ضرورة تغيير صياغة بعض التعليمات لتتوافق مع معايير أحدث للغة، وقد تكون صياغتك صحيحة لا لبس بها. كما قد تنصحك باستخدام دوال بدلًا من دوال لأنها ستسبدل قريبًا ولن تكون متاحة لاحقًا. وتقدم بعض المحررات مبدأ الإصلاح السريع للشيفرة "Quick Fix"، إذ تقدم لك مجموعة من الحلول الجاهزة للخطأ الذي ارتكبته كي تسهّل عليك التصحيح، وتظهر عادة إشارة مصباح في الأماكن التي تُقترح فيها إصلاحات سريعة. 7. تخصيص الإكمال التلقائي تقدم بعض المحررات إمكانية تخصيص الإكمال التلقائي من خلال ملفات إعداد خاصة وهذا أمر متقدم نوعًا ما. تتيح لك هذه الميزة مثلًا ظهور خيارات إكمال تلقائي محددة ضمن صنف معين أو ضمن كتلة معينة من الشيفرة. فلو فرضنا أنك ضمن حلقة for وكان عداد الحلقة بالاسم index فسيظهر لك الخيار index كأول خيار ضمن قوائم الإكمال التلقائي عندما تكتب الشيفرة داخل هذه الكتلة. كما يمكنك تخصيص مفاتيح محددة من لوحة المفاتيح لإدراج أفضل تكملة ممكنة لما تكتبه وفقًا للسياق مثل المفتاح Tab. محررات الشيفرات البرمجية وتنفيذ الشيفرة هل يستطيع محرر الشيفرة البرمجية تنفيذ هذه الشيفرة؟ لا يمكن لمحررات الشيفرة من ناحية المبدأ أن تنفذ الشيفرات المكتوبة فهي محررات وفقًا لتسميتها وليست مصرّفات Compilers أو مفسّرات interpreters. وكما أشرنا سابقًا، تقتصر وظيفة المحررات على تسهيل كتابة الشيفرة وتسريعها ومراقبة أخطاء الصياغة. لكن كتابة الشيفرة على محرر ثم نقله إلى مصرّف ومن ثم إعداد النسخ التنفيذية للبرنامج على مجمّع مدير الحزم package manager أمر مربك لا يعطي راحة في العمل، لهذا يفضل معظم المبرمجين المحترفين الذي يعملون على مشاريع برمجية كاملة استخدام بيئات العمل المتكاملة Integrated Development Environment واختصارًا IDE التي تضم جميع أدوات العمل من المحررات إلى المصرّفات إلى آلات تحزيم ونشر البرمجيات. إذًا ما الحاجة لمحررات الشيفرة إن كانت بيئات العمل المتكاملة حلًا مثاليًا؟ في الواقع لا تُعد بيئات العمل المتكاملة الحل المثالي دائمًا لأسباب عدة أهمها: لا تحتاج الكثير من اللغات المحمولة الرائجة إلى مصرّفات خاصة مثل HTML وجافاسكربت. الحجم الكبير لبيئات العمل المتكاملة ووجود ميزات كثيرة لا حاجة لها في العديد من الحالات. تسبب البطء في الأجهزة وخاصة ذات المواصفات المنخفضة وحتى المتوسطة. قد تكون مهمة المبرمج كتابة أجزاء محددة أو وظائف محددة فلا حاجة لبيئة عمل في هذه الحالة. ظهر الحل في وجود محررات شيفرة برمجية قابلة للتوسع أي أنها تدعم تحرير عدد كبير من لغات البرمجة من ناحية تمييزها لكنها تقبل في نفس الوقت موسّعات خاصة Extensions خاصة بلغة محددة تدعم هذه المحررات بميزات إضافية من ناحية التعرف على الشيفرة والإكمال التلقائي كما تؤمن آلية لتصريف وتنفيذ الشيفرة. وهكذا تختار موسّعًا ذو حجم وإمكانات معينة تناسب أعمالك ثم تثبيته على محرر الشيفرة. نذكر من هذه المحررات فيجوال ستديو كود Visual studio code من مايكروسوفت الشهير وهو محرر مجاني ومفتوح المصدر وقابل للتوسع. أشهر محررات الشيفرة المجانية نستعرض تاليًا مجموعة من أكثر محررات الشيفرة شعبية المحرر فيجوال ستديو كود VS Code اللغات المدعومة أصلًا: جافاسكربت و JSON و HTML و Node.js و TypeScript. المنصات المدعومة: ويندوز، لينكس، ماك. اللغات المدعومة عن طريق الموّسعات: معظم اللغات البرمجية مثل ++C و بايثون وجافا و #C و GO. يعمل كمحرر نصي: نعم. السعر: مجاني وتوجد نسخة بيئة تطوير متكاملة IDE مدفوعة. مفتوح المصدر: نعم يُعد فيجوال ستديو كود محرر شيفرة ومحرر نصي متقدم ومجاني ومفتوح المصدر ويحتل حتى الآن المرتبة الأولى كأكثر المحررات شعبية. ويتميز بأنه محرر خفيف وقوي ويدعم الكثير من اللغات وإطارات العمل من خلال تثبيت الموّسعات المختلفة التي تستطيع إيجادها على المتجر الخاص على الإنترنت. يتمتع فيجوال استوديو بجميع ميزات محررات الشيفرة العصرية التي فصّلناها سابقًا من خلال تقنية IntelliSense التي تزود المستخدم بإمكانات التعرف على صياغة اللغة والإشارة إلى أخطائها والإكمال التلقائي للشيفرة. يقدم لك فيجوال ستوديو معلومات مرجعية وتعريفات بالأصناف والدوال والمتغيرات بمجرد أن تظلل العبارة البرمجية ومن ثم النقر بالزر اليميني عليها ثم اختيار المعلومة المطلوبة. يؤخذ على هذا المحرر النقاط التالية: قد تُضطر إلى تثبيت بعض الموّسعات بنفسك وليس من خلال المحرر نفسه، ومن ثم ضبط إعداداتها وهذا أمر مربك في أحيان كثيرة. توافق ضعيف مع ماك أو إس وقد يكون بطيئًا أحيانًا على لينكس. طريقة تعامله مع الأخطاء الناتجة عن ضبط الإعدادات والتي قد تدفعك إلى التخلي عن المحرر ككل. المحرر Sublime Text يُعد هذه المحرر من المحررات القوية ومتعددة المنصات ويدعم عددًا كبيرًا من الإضافات Plugins التي تزيد من إمكاناته وتدعم تفاعله مع لغات برمجة جديدة. يحقق هذه المحرر معايير محررات الشيفرة العصرية ويمتاز بقدرته على فتح ملفات شيفرة تصل إلى أكثر من 200000 سطر برمجي بكل سهولة. اللغات المدعومة: ++C وبايثون و PHP و Rails وغيرها الكثير من خلال حزم الإضافات. المنصات المدعومة: ويندوز، لينكس، ماك. يعمل كمحرر نصي: نعم. السعر: مدفوع مع وجود نسخة مجانية محدودة. مفتوح المصدر: لا. ومن الميزات الخاصة التي يتمتع بها Sublime text نجد: كم واسع من تعليمات التحرير كالإزاحة وتنسيق الفقرات والحفظ التلقائي والبحث بمجرد الكتابة. تعيين اختصارات للأوامر المختلفة. التدقيق الإملائي. ميزة "الانتقال إلى أي شيء Goto Anything" للانتقال السريع إلى أي ملف أو رمز أو سطر أو كائن. التحرير المتزامن: وهي تقنية تسمح بالكتابة في عدة ملفات أو أقسام في نفس الوقت. يتكامل مع برنامج Sublime Merge الذي يُستخدم كعميل للاتصال مع Git. لهذا المحرر سلبيات عدة نذكر منها: النسخة المجانية محدودة وتعرض دائمًا نافذة تحثك على شراء النسخة المدفوعة. صعوبة في تثبيت الكثير من الإضافات وخاصة للمبتدئين. تختفي بعض الاقتراحات وخيارات الإكمال التلقائي أثناء كتابة الشيفرة ولا يمكن رؤيتها. المحرر ++Notepad يتميز هذا المحرر بسرعته الكبيرة فهو محرر خفيف ولا يعتمد على الكثير من الموارد وبالتالي سيكون المحرر المثالي للمستخدمين الذين يمتلكون حواسيب ضعيفة. اللغات المدعومة: أكثر من 70 لغة بما فيها ++C وبايثون و PHP وHTML و CSS و swift المنصات المدعومة: ويندوز، لينكس. يعمل كمحرر نصي: نعم. السعر: مجاني. مفتوح المصدر: فقط لنسخة لينكس. يمتاز ++Nodepad المحرر بأنه: فعّال وبسيط ويؤمن ميزات مثل تمييز الصياغة اللغوية وتمييز النصوص والدوال والأقواس. يؤمن ميزة الإكمال التلقائي. قادر على تنظيم الشيفرة وتجميعها ضمن كتل يمكن عرضها وإخفاؤها. يزوّد هذا المحرر المستخدمين بخارطة للمستند للوصول إلى أية نقطة من الشيفرة في حال كان الملف ضخمًا. وهكذا تستطيع الانتقال بسرعة بين أي منطقتين من الملف دون الحاجة إلى التمرير إلى الأعلى والأسفل مرارًا. مجاني ومترجم إلى أكثر من 80 لغة منها العربية. يؤخذ على البرنامج مايلي: واجهة المستخدم غير عصرية وتوحي بأنه برنامج قديم. لا يضم متصفح ملفات. صعوبة عرض عدة ملفات بطريقة مريحة مما ينعكس سلبًا عند العمل على عدة مشاريع. محدودية الميزات التي يقدمها موازنة بغيره. لا يوجد دعم رسمي لنسخة نظام لينكس، علمًا أنه بالإمكان تحميلها من متجر أوبونتو Ubuntu software center. المحرر Bluefish بلوفيش محرر شيفرة قوي ومخصص للمستخدمين المتمرسين من مبرمجين ومطورين ومصممين لمواقع الويب. وهو برنامج مفتوح المصدر متعدد المنصات يتميز بخفة وزنه وواجهته الرسومية السريعة. اللغات المدعومة: ++C وبايثون و بيرل وPHP وHTML و CSS و Ruby وجافاسكربت و SQL وغيرها الكثير. المنصات المدعومة: ويندوز، لينكس، ماك، FreeBSD، Solaris. يعمل كمحرر نصي: نعم. السعر: مجاني. مفتوح المصدر: نعم. لمحرر بلوفيش ميزات عديدة أهمها: يضم شريط اختصارات سريعة يمكن أن يضع فيه المستخدم اختصارات للأداوات الأكثر استخدامًا. يمكن تخصيص واجهة المستخدم من ناحية اللون والشكل بما يناسب لغة البرمجة. يستطيع تمييز الصياغة اللغوية للغات البرمجة المدعومة ويدعم الإكمال التلقائي وإغلاق وسوم اللغات التوصيفية والتنسيقية مثل وسوم HTML و CSS. يمكن فتح عدد كبير من الملفات ضمن واجهة المستخدم والتعامل معها. معلومات مرجعية عن الشيفرات المكتوبة. الاستعادة التلقائية للملفات عند حدوث خطأ. قابل للتوسع عن طريق الإضافات والسكربتات. لا يؤخذ على هذا المحرر الكثير لكن يواجه بعض الانتقادات مثل: صعوبة فتح ملفات شيفرة ضخمة الحجم فقد يتوقف أو لا يحفظ التغييرات. لا يدعم الاختيارات المتعددة أو البحث ضمنها أي لا يمكن اختيار أجزاء منفصلة من الشيفرة والتعامل معها. المحرر Emacs يُعد من أفضل محررات الشيفرات البرمجية إن كنت تبحث عن بيئة عمل قابلة للتخصيص بشكل كبير. إذ يأتي مع شريط قوائم وشريط أدوات وقوائم منسدلة يمكن أن تظهر أو تخفي أيًا منها، كما يمكنك إضافة نوافذ فرعية لعرض ملفات وفضاءات عمل خاصة والتحكم بالألوان ومظهر واجهة المستخدم. اللغات المدعومة: ++C وبايثون و Lisp وغيرها الكثير. المنصات المدعومة: ويندوز، لينكس، ماك، FreeBSD. يعمل كمحرر نصي: نعم. السعر: مجاني. مفتوح المصدر: نعم. للمحرر Emacs الميزات التالية: يتميز هذا المحرر بقدرته على تصريف وتنفيذ الشيفرة واختبار البرامج وتنفيذ الأوامر التنفيذية shell commands. خيارات متقدمة للبحث والاستبدال. يعمل من خلال واجهة رسومية أو من خلال الطرفية. يميز الصياغة اللغوية ويدعم الإكمال التلقائي من خلال نمط الإكمال التلقائي إذ يدعم المحرر عدة أنماط للعمل. يضم مستكشف ملفات. يؤخذ على هذا المحرر: صعوبة التعامل معه وخاصة للمبتدئين. لا بد من العودة دائمًا إلى التوثيق الخاص به لتذكر تعليمات الضبط والإعداد. صعوبة التعامل مع نمط الإكمال التلقائي. ملاحظة: يمكنك أيضًا استخدام محرات شيفرة تعمل من خلال الإنترنت نذكر منها Codepen و CodeSandbox و Glitch و Repl.it. خاتمة لمحررات الشيفرات البرمجية دور كبير في تحسين بيئة عمل المبرمجين أثناء كتابة الشيفرة وزيادة إنتاجيتهم؛ كتمييز صياغة لغة البرمجة التي يكتب شيفرتها والتنبيه إلى وجود أخطاء فيها والإكمال التلقائي للشيفرة وعرض اقتراحات لحلها وتسهيل عمليات التحرير الأساسية من نسخ ولصق وعمليات البحث والاستبدال هي مفاتيح رئيسية لتسهيل عمل المبرمج وتوفير وقته وجهده. لهذا إن كنت مقبلًا على تعلم البرمجة وأردت محرر شيفرات يناسب احتياجاتك، سيساعدك هذا المقال على توضيح النقاط الأساسية التي ينبغي أن تبحث عنها في محرر الشيفرات البرمجية ويعرض لك عددًا من المحررات الممتازة التي تتمتع بمعظم ميزات محررات الشيفرة العصرية إضافة إلى كونها مجانية وتعمل على أكثر المنصات شيوعًا. اقرأ أيضًا محررات الشيفرة البرمجية ما هو أفضل محرر أكواد بايثون أسلوب كتابة الشيفرات البرمجية وتحقيق سهولة قراءتها

تُسند إلى كل خاصية من خواص CSS قيمةٌ من نوع محدد تُعرّف مجموعة القيم التي يمكن أن تأخذها هذه الخاصية. لهذا سنتطرق في هذا المقال إلى أنواع القيم الأكثر استخدمًا إضافة إلى هذه القيم ووحدات قياسها. ننصحك قبل المتابعة في قراءة هذه المقال أن: تطلع على أساسيات استخدام الحاسوب وتصفح الويب. تحضّر بيئة عمل بسيطة كما تحدثنا مسبقًا في المقال تثبيت البرمجيات الأساسية، وتتفهم طريقة إنشاء وإدارة الملفات كما شرحناها في مقال التعامل مع الملفات. تطلع على أساسيات HTML كما شرحناها في سلسلة المقالات مدخل إلى HTML. تتفهم أساسيات CSS كما شرحناها في سلسلة المقالات خطواتك الأولى في CSS. ما هي قيم CSS يمكنك الاطلاع على أنواع القيم التي تأخذها الخصائص ضمن توصيفات CSS، أو ضمن قسم CSS في موسوعة حسوب، إذ تبدو أنواع القيم محاطةً بأقواس زاوية مثل النوع <length>، أو <color> الذي يشير إلى إمكانية استخدام قيمة لونية صحيحة على أنها قيمةٌ لهذه الخاصية. ملاحظة: يُشار في بعض المراجع إلى أنواع القيم في CSS على أنها أنواع بيانات data types، وهذا الأمر ليس ثابتًا. لذلك، عندما تصادف عبارة أنواع البيانات في CSS فهي طريقة منمقة للقول " أنواع القيم value types"، كما تشير كلمة "قيمة" إلى أي تعبير مدعومًا بنوع القيمة الذي تختار استخدامه. ملاحظة: تُستخدم الأقواس الزاوية لتمييز أنواع القيم في CSS عن الخاصيات (تمييز الخاصية color عن نوع القيمة <color>). لهذا، قد تختلط عليك هذه الأنواع مع عناصر HTML أيضًا، فكلاهما يستخدم الأقواس الزاوية، لكن هذا الأمر مستبعد الحدوث لأنهما تستخدمان في سياقيين مختلفين. ضبطنا في المثال التالي لون العنوان باستخدام كلمة مفتاحية وضبطنا لون الخلفية باستخدام الدالة ()rgb: h1 { color: black; background-color: rgb(197, 93, 161); } نوع قيمة في CSS هو بمثابة طريقة لتحديد القيم التي يُسمح للخاصية بأخذها، فإذا رأيت مثلًا خاصيةً تأخذ قيمًا من النوع <color>، فلا حاجة لأن تتسائل ما هي الأنواع المختلفة للألوان التي يمكنني استخدامها، هل هي كلمات مفتاحية أو قيم ست عشرية أو دوال ()rgb، إذ يمكنك اختيار أي قيمة لونية تراها مناسبة شرط أن يدعمها المتصفح (ستجد في صفحة كل خاصية في موسوعة حسوب معلومات عن دعم المتصفح لهذه الخاصية وللقيم التي تأخذها). لنلق نظرةً على بعض أنواع القيم ووحدات قياسها للخاصيات التي تصادفها باستمرار مع بعض الأمثلة لتتمكن من تجريب القيم المختلفة الممكنة. الأرقام والأعداد والنسب المئوية هنالك العديد من القيم العددية التي قد تستخدمها في CSS، وإليك أنواع هذه القيم العددية: نوع القيمة الوصف <integer> وهو عدد كامل مثل 1024 أو 55-. <number> ويمثل عددًا عشريًا مع أو بدون مكوّن عشري مثل 0.255 أو 128 أو 1.2-. <dimension> وهو عدد عشري <number> ترتبط به وحدة قياس مثل 45deg أو 5s أو 10px. يُعد هذا النوع مظلة تضم الأنواع التالية: <length> و <angle> و <time> و <resolution>. <percentage> يمثّل هذا النوع جزءًا من قيمة أخرى، فالقيمة %50 مثلًا تمثل نصف قيمة أخرى. تتعلق القيم المئوية دائمًا بكميات أخرى كأن تكون قيمة ارتفاع عنصر نسبة مئوية من ارتفاع العنصر الأب. الأطوال أكثر أنواع القيم العددية التي قد تصادفك هي الأطوال <length> مثل 10px أو 30em، وهنالك نوعان من الأطوال في CSS، نسبية ومطلقة، لهذا من المهم أن تعرف الفرق بينها لكي تتفهم أحجام الأشياء. وحدات القياس المطلقة للأطوال إليك جدول بوحدات القياس المطلقة، وهي وحدات قياس غير نسبية ولا ترتبط بأي قيمة أخرى وتُعد عمومًا ثابتة القياس. وحدة القياس الاسم مقابله في وحدات قياس أخرى cm سنتيمتر 1cm = 37.8px = 25.2/64in mm ميليمتر 1mm = 1/10th of 1cm Q ربع ميليمتر 1Q = 1/40th of 1cm in إنش 1in = 2.54cm = 96px pc بيكا 1pc = 1/6th of 1in pt نقطة 1pt = 1/72nd of 1in px بكسل 1px = 1/96th of 1in لبعض هذه القيم فائدة أكبر عندما تُستخدم مع الطابعة بدلًا من شاشة العرض؛ فلا نستخدم عادةً وحدة القياس "سنتيمتر" على الشاشة مثلًا، وإنما يُفضّل استخدام وحدة "بكسل". وحدات الطول النسبية وهي وحدات قياس الأطوال نسبةً لشيء آخر، مثل ارتفاع العنصر الأب، أو حجم الخط فيه، أو أبعاد شاشة العرض. تكمن فائدة هذه القياسات بأنها تساعد على تحديد أبعاد العناصر، أو أحجام خطوط الكتابة بالنسبة إلى كل مكوّنات الصفحة عندما تخطط لاستعمالها بالشكل الصحيح. إليك جدولًا بأكثر الوحدات النسبية استخدامًا في تطوير صفحات الويب: وحدة القياس بالنسبة إلى: em حجم خط الكتابة للعنصر الأب في حال كانت الخاصية تتعلق بخطوط الكتابة مثل font-size، أو أبعاد العنصر الأب في بقية الخاصيات، مثل width. ex ارتفاع المحرف "x" في الخط الذي يستخدمه العنصر. ch حيّز width المحرف "0" في خط الكتابة المستخدم. rem حجم خط الكتابة في العنصر الجذري. lh ارتفاع السطر في العنصر. rlh ارتفاع السطر في العنصر الجذري، وعندما يُستخدم لضبط الخاصيتين font-size أو line-height، سيشير إلى القيمة الأساسية للخاصية. vw 1% من حيّز شاشة العرض (نسبة مئوية). vh 1% من ارتفاع شاشة العرض (نسبة مئوية). vmin 1% من أصغر أبعاد شاشة العرض (نسبة مئوية). vmax 1% من أكبر أبعاد شاشة العرض (نسبة مئوية). vb 1% من قياس الكتلة التي تحتوي العنصر وفق اتجاه الكتلة للعنصر الجذري (نسبة مئوية). vi 1% من قياس الكتلة التي تحتوي العنصر وفق اتجاه السطر للعنصر الجذري (نسبة مئوية). svw, svh 1% من حيّز وارتفاع أصغر شاشة عرض (نسبة مئوية). lvw, lvh 1% من حيّز وارتفاع أكبر شاشة عرض (نسبة مئوية). dvw, dvh 1% من حيّز وارتفاع شاشة عرض ديناميكية (نسبة مئوية). مثال تطبيقي يساعدك المثال التالي في معرفة طريقة عمل الوحدات النسبية والمطلقة، إذ يعرض المثال صندوقًا ضبُط حيّزه بواحدة البكسل، وسيبقى حيّز هذه الصندوق كما هو مهما حدث لأن البكسل وحدة قياس مطلقة. ضُبط حيّز الصندوق الثاني بوحدة القياس vm (حيّز شاشة العرض)؛ إذ تقيس هذه الوحدة حيّز العنصر بالنسبة إلى حيّز شاشة العرض، فعندما نقول 10vw، فهذا يعني أن حيّز الصندوق هو 10 بالمئة من حيّز شاشة العرض (الشاشة التي تعرض عليها الصفحة أو نافذة المتصفح)، وإذا غيّرت حيّز نافذة المتصفح سيتغير حيّز الصندوق. قد لا تتمكن من رؤية ما يحدث هنا لأن الشيفرة مدرجة ضمن هذه الصفحة باستخدام "إطار HTML" استخدمنا في الصندوق الثالث وحدة القياس em؛ إذ تقيس هذه الوحدة الأطوال بالنسبة إلى حجم خط الكتابة، لهذا ضبطنا بداية حجم خط الكتابة على 1em من خلال المحدد wrapper.. غيّر حجم خط الكتابة إلى 1.5em وسترى كيف يزداد حجم الخط في كل الصناديق، وسيزداد حيّز الصندوق الأخير أيضًا لأنه مُقدّر بواحدة em، وهي وحدة قياس نسبية تتعلق بحجم خط الكتابة. حاول أن تستخدم المحرر التفاعلي التالي لتغيير القيم بشتى الطرق وملاحظة الفرق: وحدة القياس rem ووحدة القياس em أكثر ما قد تصادفه من وحدات الأطوال النسبية هما الوحدتان em و rem عند تحديد أبعاد أي عنصر من الصناديق إلى النصوص. لهذا، من المهم أن نعرف تمامًا كيف تعمل هاتان الوحدتان وما هو الفرق بينهما خاصةً عندما تبدأ العمل مع مواضيع أكثر تعقيدًا، مثل تنسيق النصوص وتخطيطات CSS. تمثّل شيفرة HTML التي ستراها تاليًا مجموعةً من القوائم المتداخلة (ثلاث قوائم) وستتكرر هذه القوائم في شيفرة كلا المثالين، والفرق الوحيد بين المثالين أن الأول يستخدم وحدة em والآخر وحدة rem. نبدأ تحليل المثالين باستخدام خط حجمه 16px للعنصر <html> ودعونا نتذكر أن: em: هي وحدة قياس مأخوذة على أنها نسبةٌ من حجم خط العنصر الأب، وُتطبق مع الخاصيات التي تضبط خط الكتابة، مثل حجم خط الكتابة. في مثالنا: تأخذ العناصر <li> التي تمتلك الصنف ems قيمًا أبعادها بالنسبة إلى حجم خط الكتابة للعنصر الأب وبالتالي سيزداد حجم العناصر في القوائم المتداخلة تدريجيًا لأن كل منها يأخذ الحجم 1.3em، أي سيكون حجم كل قائمة أكبر من حجم القائمة الأعلى (القائمة الأب) بمقدار 1.3مرة. rem: هي وحدة قياس مأخوذة على أنها نسبة من حجم خط العنصر الجذري (مأخوذة من root em)، وهكذا ستأخذ عناصر القائمة <li> التي تمتلك الصنف rems قيمًا أبعادها بالنسبة إلى حجم خط الكتابة للعنصر الجذري وهو <html>، وبالتالي لن تتغير أحجام عناصر القوائم المتتالية لأن أبعاد عناصرها ستبقى كما هي، لكن إذا غيّرت حجم خط الكتابة font-size للعنصر الجذري <html> ستتغير أبعاد جميع عناصر القوائم التي تأخذ الصنفين ems و rems في المثال وفقًا لتغير حجم خط كتابة العنصر الجذري. النسبة المئوية تٌعامل النسب المئوية في كثيرٍ من الأحيان بنفس الطريقة التي تُعامل بها الأطوال، لكن تبقى النسبة المئوية جزءًا من قيمة أخرى دائمًا. فلو ضبطنا مثلًا قيمة الخاصية font-size على أنها نسبة مئوية فستكون هذه النسبة نسبة مئوية من حجم الخط للعنصر الأب font-size، ولو استخدمتها مع الخاصية width فستكون نسبةً مئوية من حيّز width العنصر الأب. يعرض المثال التالي أربعة صناديق ضُبط حيّز الأول بالبكسل 200px وحيّز الثاني على أنه نسبة مئوية 40%، وتتكرر العملية بالنسبة للصندوقين التاليين. يمتلك الصندوقان اللذان قُدر حيّزهما بنسبة مئوية الصنف percent، ويمتلك الصندوقان المقدران بالبكسل الصنف px، ويتواجد الصندوقان الأخيران ضمن ضمن حاوية حيّزها 400px. عند عرض الصناديق السابقة سيبدو الصندوق الرابع المقدّر بالنسبة المئوية 40% أقل اتساعاً من الصندوق الثاني المقدر بالنسبة المئوية 40% أيضًا، والسبب أن حيّز الصندوق الرابع هو 40% من حيّز الحاوية 400px التي تضمّه، أما الثاني فهو خارج هذه الحاوية ويأخذ حيّزه 40% من حجم المستند ككل. حاول أن تغيّر اتساع الحاوية أو النسب المئوية وراقب ما سيحدث. في مثالنا التالي ضُبط حجم خط الكتابة بالنسبة المئوية، إذ يصبح حجم كل عنصر قائمة 80% وبالتالي سيكون حجم عناصر القوائم المتتالية أصغر كل مرة لأن حجم كل منها هو 80% من حجم عناصر القائمة الأعلى (العنصر الأب): على الرغم من وجود خاصيات تقبل الأطوال وتقبل النسب المئوية، لكن هنالك بعض الخاصيات التي لا تأخذ سوى الأطوال، لهذا عليك التأكد من كون الخاصية تأخذ قيمًا من النوع <length> أو <percentage> أو كلاهما، فالخاصية التي لا تقبل سوى <length>لا يمكن أن تقبل <percentage>. الأعداد تقبل بعض الخاصيات قيمًا عددية دون أية وحدات قياس تُضاف إليها، ونذكر من هذه الخاصيات على سبيل المثال الخاصية opacity التي تتحكم بقتامة العنصر (مدى شفافيته). تقبل هذه الخاصية قيمة بين 0 (شفاف تمامًا) و 1 (قاتم تمامًا). حاول أن تغير قيمة الخاصية opacity في محرر الشيفرة التالي وأعطها قيمًا عشرية بين 0 و 1، ولاحظ كيف تتغير شفافية الصندوق والمحتوى الذي يضمه. ملاحظة: عندما تستخدم قيمًا عدديةً في CSS، لا ينبغي أن تُحاط القيمة بإشارتي تنصيص. الألوان هناك طرق عديدة لتحديد الألوان في CSS، ويُستخدم بعضها أكثر من غيره حاليًا، ويمكن استخدام نفس القيمة اللونية في أي مكان سواءً كنت تحدد لون نص، أو لون خلفية، أو لون أي شيء آخر. يدعم نظام اللون المعياري المتاح في الحواسيب الحديثة ألوان بدقة 24-بت والتي تسمح بعرض حوالي 16.7 مليون لون مختلف من خلال تشكيل أي لون انطلاقًا من 256 قيمة مختلفة للون الأحمر مع 256 قيمة مختلفة للون الأزرق و 256 قيمة مختلفة للون الأزرق (256x256x256 =16,777,216).لنلق نظرةً الآن على بعض الطرق المستخدمة في تحديد الألوان في CSS. ملاحظة: سنناقش في هذا المقال الطرق الأكثر شيوعًا في تحديد الألوان والمدعومة من قبل المتصفحات المختلفة. هناك طبعًا طرق أخرى، لكنها أقل دعمًا واستخدامها أقل شيوعًا. الكلمات المفتاحية للألوان تُستخدم الكلمات المفتاحية اللونية كثيرًا لكونها طريقة بسيطة وسهلة الفهم مثل red و blue و yellow. هناك عدد محدد من هذا الكلمات المفتاحية ولبعضها أسماء طريفة أيضًا. يمكنك الاطلاع على القائمة الكاملة لهذه الكلمات من خلال صفحة الخاصية color في موسوعة حسوب. حاول أن تغير ألوان الصناديق والخطوط في محرر الشيفرة التفاعلي التالي باستخدام الكلمات المفتاحية: قيم الألوان RGB الست عشرية سترى أيضًا طريقة اختيار الألوان باستخدام الشيفرة الست عشرية، إذ تتضمن كل قيمة ست عشرية الرمز # متبوعًا بستة أرقام ست عشرية، ويمكن لكل رقم منها أن يأخذ قيمة من إحدى القيم الخمس عشرة التالية "0123456789abcdef". يمثّل كل رقمين متتاليين قناةً لونية، الأولى للون الأحمر ثم الأخضر ثم الأزرق، ويساعدك هذين الرقمين على تمثيل أي قيمة لونية من أصل 256 قيمة لونية لكل قناة. هذه القيم معقدة قليلًا وصعبة الفهم، لكنها عملية أكثر لأنها تساعدك على اختيار أي لون ترغب في عرضه. حاول تغيير قيم الأرقام في كل شيفرة لونية ست عشرية ولاحظ تغير الألوان. قيم RGB و RGBA من الطرق الأخرى في انتقاء الألوان هو أسلوب RGB وهو اختصار مكون من أوائل حروف الكلمات (RedGreenBlue). تُستخدم في هذه الطريقة الدالة ()rgb التي تقبل ثلاثة معاملات تمثل أقنية اللون الأحمر والأخضر والأزرق بصورةٍ مشابهة لطريقة القيم الست عشرية، ويتمثل الفرق بين هذه الطريقة وطريقة القيم الست عشرية بعدم الحاجة إلى رقمين ست عشريين لتمثيل القناة بل نضع رقمًا بين 0 و255، وهذه طريقة أسهل نوعًا ما. استخدمنا في المثال التالي طريقة RGB لتمثيل الألوان التي عرضناها في المثال السابق: يمكن أيضًا استخدام نظام RGBA الذي يعمل تمامًا مثل RGB لكنه يضم معاملًا رابعًا يُمثّل ما يُعرف بالقناة ألفا التي تتحكم بقتامة اللون. يأخذ المعامل ألفا أي قيمة عشرية بين 0 (شفافية كاملة) و 1 (قتامة كاملة). ملاحظة: ضبط القتامة باستخدام دالة RGBA له ميزةٌ فريدةٌ مقارنةً بضبط القتامة من خلال الخاصية opacity؛ إذ يجعل استخدام الخاصية opacity لضبط قتامة عنصر كل ما بداخله بنفس درجة القتامة؛ بينما تحدد الدالة RGBA مع المعامل ألفا قتامة اللون الذي اخترته فقط. أضفنا في المثال التالي صورة خلفية للصندوق الذي يحتوي الصناديق الملونة، ثم ضبطنا قتامة كل صندوق على قيمة معينة. لاحظ كيف تظهر الخلفية أكثر كلما صغرت قيمة القناة ألفا: حاول أن تغير قيمة القناة ألفا في المثال السابق لتفحص طريقة تأثيرها. ملاحظة: لم تدعم الدالة ()rgb في الإصدارات القديمة من CSS معامل ألفا، لذلك ينبغي عليك استخدام دالة أخرى هي ()rgba. يمكنك حاليًا تمرير معامل ألفا إلى الدالة ()rgb، ولكن لا تزال صيغة ()rgba مدعومةً للتوافق مع مواقع الويب القديمة، ولها نفس سلوك الدالة ()rgb تمامًا. قيم HSL و HSLA يُعد نظام الألوان HSL أقل دعمًا بقليل من RGB (غير مدعوم من قبل إصدارات متصفح إنترنت إكسبلورر القديمة)، وقد جرى تضمين هذا النظام بعد أن أبدى المصممون اهتمامًا كبيرًا به؛ فبدلًا من الأحمر والأخضر والأزرق، تقبل الدالة السطوع hue والإشباع saturation والإضاءة lightness للتمييز بين 16.7 لونًا متاحًا. السطوع: يمثل المساحة اللونية الأساسية ويأخذ قيمةً بين 0 و 360 وهي قيمة الزاوية المقاسة على قرص اللون color wheel. الإشباع: يمثل إشباع اللون ويأخذ قيمةً بين 0 (لا لون، يظهر مثل مساحة رمادية) و 100% (لون كامل). الإضاءة: يمثل إضاءة اللون ويأخذ قيمةً بين 0 (لا إضاءة ويظهر بلون أسود) و 100% (مضاء كاملًا ويظهر باللون الأبيض). لاحظ المثال السابق باستخدام نظام HSL: وكما يوجد RGBA مقابل RGB، يوجد HSLA مقابل HSL ليضبط قناة ألفا وبالتالي ضبط القتامة. لاحظ كيف يبدو الأمر في المثال التالي بعد استبدال RGBA بنظام HSLA: ملاحظة: لم تدعم الدالة ()hsl في الإصدارات القديمة من CSS معامل ألفا، لذلك ينبغي عليك استخدام دالة أخرى هي ()hsla. يمكنك حاليًا تمرير معامل ألفا إلى الدالة ()hsl، ولكن لا تزال صيغة ()hsla مدعومةً للتوافق مع مواقع الويب القديمة، ولها نفس سلوك الدالة ()hsl تمامًا. يمكنك استخدام أي نظام لوني تشاء لاختيار ألوانك، وعادةً ما تقرر مجموعة الألوان التي ستستخدمها في مشروعك ثم طريقة إظهارها. يمكنك المزج بين طرق تمثيل الألوان في المشروع نفسه، لكن يُفضّل استخدام نظامٍ واحدٍ للألوان في كامل مشروعك للمحافظة على التناسق في الشيفرة. الصور تُستخدم الصيغة <image> للإشارة إلى أن الخاصية تقبل صورة قيمةً لها، سواءً كانت الصورة فعلية مصدرها ملف يُشار إليه من خلال عنوان url أو كانت دالة أو خلفية لونية متدرجة. يعرض المثال التالي استخدام صورة فعلية وخلفية لونية متدرجة من خلال ضبط قيم الخاصية background-image: ملاحظة: هناك قيم أخرى للنوع <image> لكنها حديثة العهد وضعيفة الدعم من قبل المتصفحات. الموضع تمثل القيم من النوع <position-value> مجموعةً من الإحداثيات الثنائية التي تُستخدم لتحديد موضع مثل موضع خلفية عنصر عندما تُستخدم مع الخاصية background-position. يمكن أن تأتي هذه القيم على شكل كلمات مفتاحية، مثل top أو right أو left أو bottom أو center وذلك لمحاذاة المحتوى إلى حدود الصندوق، يليها طول يمثل إزاحة الغرض المطلوب عن الحافة العلوية أو اليسارية للصندوق أو كلاهما. حال ضبط موضع صورة النجمة في المثال التالي، بحيث يكون موضع صورة الخلفية 40 بكسل من الأعلى وإلى يمين الصندوق باستخدام كلمة مفتاحية: جرّب تغيير هذه القيم وشاهد كيف يمكنك التعديل على موضع الصورة. النصوص والمحددات رأينا في الأمثلة السابقة استخدام كلمات مفتاحية بمثابة قيم لبعض الخاصيات، مثل الخاصيات التي تقبل النوع <color>، إذ أمكننا استخدام قيم لونية، مثل red و black وغيرها. توصف هذه الكلمات المفتاحية بطريقة أكثر دقة على أنها معرّفات Identifier وهي قيمة خاصة تفهمها لغة CSS، لهذا لا توضع هذه الكلمات ضمن إشارتي تنصيص، ولا تُعامل على أنها قيم نصية. هناك طبعًا أماكن تُستخدم فيها القيم النصية في CSS، مثل الحالة التي توّلد فيها محتوى تلقائيًا، إذ لا بد في هذه الحالة إحاطة النص بإشارتي تنصيص لتظهر أنه نص. استخدمنا في المثال التالي كلمات مفتاحية (معرّفات) لم نضعها ضمن إشارتي تنصيص وأخرى نصوص مولّدة تلقائيًا وضعناها ضمن إشارتي التنصيص: الدوال آخر أنواع القيم التي سنتحدث عنها في مقالنا هي الدوال functions، إذ تُعرف الدوال برمجيًا على أنها جزء من الشيفرة يمكن تنفيذه عدّة مرات لإنجاز وظيفة أو مهمة معينة بأقل جهد ممكن لكل من المبرمج والحاسوب. ترتبط الدوال عادة بلغات برمجة مثل جافا سكربت وبايثون لكنها موجودةٌ أيضًا في CSS مثل قيم للخاصيات. لقد رأينا فعلًا عمل هذه الدوال عندما تحدثنا عن القيم ()rgb و ()hsl وكذلك القيمة التي تعيدها الدالة ()url. القيمة التي تشبه تمامًا عمل الدوال في لغات البرمجة هي الدالة ()calc في CSS؛ إذ تساعد هذه الدالة على إجراء حسابات بسيطة ضمن شيفرة CSS، وتكمن فائدتها في إيجاد قيمة خاصية لا يمكن تحديدها إلا أثناء تنفيذ المتصفح لشيفرة CSS. نستخدم في مثالنا التالي الدالة ()calc لجعل حيّز الصندوق ‎20% + 100px. تُحسب %20 من حيّز حاوية العنصر الأب التي بضبطها المحدد wrapper.، وستتغير بتغير هذا الحيّز. لا يمكن تحديد هذه القيمة سلفًا لأننا لا نعلم كم هو تحديدًا %20 من حيّز العنصر الأب، لهذا نستخدم الدالة ()calc: الخلاصة مررنا في هذا المقال سريعًا على على أكثر أنواع القيم شيوعًا ووحدات القياس التي قد تصادفها. يمكنك الاطلاع على جميع الخاصيات والقيم التي تأخذها من خلال صفحة CSS في أكاديمية حسوب لأنك ستواجه الكثير منها عندما تتقدم في مسيرتك التعليمية. المفتاح الرئيسي لتذكر كل هذه الأشياء هو معرفة أن كل خاصية تقبل أنواعًا محددة من القيم، وأن لكل نوع من أنواع القيم تعريفًا يصف ماهيته وكيفية استخدام قيمه. استفد من موقع أكاديمية حسوب أو صفحة مطوري موزيللا (بالإنكليزية) لتبحث عما تريد، فعليك مثلًا تذكر أن القيم من النوع <imag> تقبل صورًا من ملف، كما تساعدك على إنشاء خلفية لونية متدرجة وهذا ما قد لا تعرفه، أو قد لا يكون أمرًا بديهيًا. ترجمة -وبتصرف- لمقال CSS values and unites. اقرأ أيضًا المقال السابق: التعامل مع طفحان المحتوى خارج صندوق العنصر باستخدام CSS أنواع محددات التنسيق في CSS خفايا CSS المُملّة التي يجب عليك الإلمام بها رصف العناصر (Layout) في CSS

يحدث طفحان المحتوى overflow عندما يكون حجم المحتوى أكبر من أن يتسع له العنصر، لهذا سنتعلم في هذا المقال عن ماهية الطفحان وكيفية إدارته. ننصحك قبل المتابعة في قراءة هذه المقال أن: تطلع على أساسيات استخدام الحاسوب وتصفح الويب. تحضّر بيئة عمل بسيطة كما تحدثنا مسبقًا في المقال تثبيت البرمجيات الأساسية، وتتفهم طريقة إنشاء وإدارة الملفات كما شرحناها في مقال التعامل مع الملفات. تطلع على أساسيات HTML كما شرحناها في سلسلة المقالات مدخل إلى HTML. تتفهم أساسيات CSS كما شرحناها في سلسلة المقالات خطواتك الأولى في CSS. ما هو الطفحان؟ يُعد كل عنصر من وجهة نظر CSS بمثابة صندوق، ويمكن تحديد أبعاد هذا الصندوق باستخدام الخاصيتين width و height، أو الخاصيات المنطقية المرتبطة بها inline-size و block-size. يحدث الطفحان عندما يضم صندوق العنصر كميةً كبيرةً من المحتوى لا يمكن استيعابها، لهذا السبب تؤمن CSS أدوات مختلفة لإدارة طفحان المحتوى. ستصادف خلال مسيرة تعلمك لهذه اللغة وخاصة فيما يتعلق بالتخطيطات الكثير من حالات الطفحان. تفادي CSS لخسارة البيانات لنلق نظرةً على المثالين التاليين اللذين يعرضان السلوك الافتراضي للغة CSS في حالة الطفحان؛ إذ يعرض المثال الأول صندوقًا له ارتفاع محدد بالخاصية height، ونضيف إلى هذا الصندوق محتوًى يتجاوز المساحة المتاحة ضمنه. سيطفح المحتوى خارج الصندوق ويقع على الفقرة النصية التي تليه. نضع في المثال التالي كلمةً واحدةً في الصندوق، وقد جُعل الصندوق صغيرًا جدًا لهذا ستخرج بعض حروفها خارج الصندوق: قد تتساءل عن سبب هذا السلوك الفوضوي الذي تتبعه لغة CSS وهو عرض المحتوى خارج المساحة التي يُفترض أن تُعرض فيها. لماذا لا تُخفي ببساطة هذا المحتوى الفائض؟ لماذا لا تغير أبعاد الصندوق ليتسع للمحتوى؟ لا تخفي CSS المحتوى طالما أن هناك إمكانية لذلك، لأن ذلك سيسبب فقدان البيانات، وقد لا تعرف أن هناك بيانات مفقودة، فإذا اختفى زر "إرسال" في نموذج ويب، لن يتمكن أحد من إكماله وقد يسبب ذلك مشكلة كبيرة، لهذا تطفح البيانات في CSS كي تُرى، وهكذا قد يلاحظ الزائر غالبًا وجود مشكلة ما، وفي أسوأ الحالات سيخبرك بأن المحتوى متداخل في صفحتك. إذا حددت حيّز width أو ارتفاع صندوق عنصر ما من خلال الخاصيتين width أو height، ستثق CSS بأنك تعرف ما تفعله، إذ تفترض أنك تدبرت مسبقًا أمر أي طفحان قد يحدث. يسبب غالبًا تحديد أبعاد الصندوق مشاكل عندما يحتوي العنصر نصًا، فقد يكون النص أكبر مما قدّرت عندما صممت الصفحة أو قد يكون حجم خط الكتابة أكبر (في الحالة التي يزيد فيها المستخدم حجم الخط). إذا أردت عمومًا حجمًا بأبعاد محددة لصندوق العنصر، لا بد أن تتعلم كيفية إدارة الطفحان بنفسك وهذا ما سنراه تاليًا. الخاصية overflow تساعدك الخاصية overflow في التحكم بطريقة طفحان محتوى العناصر، إذ تملي هذه الخاصية على المتصفح كيفية التصرف عند حدوث الطفحان. القيمة الافتراضية لهذا الخاصية هي visible أي سيُعرض المحتوى حتى لو طفح خارج الصندوق. إذا أردت اقتصاص المحتوى الذي يطفح يمكنك ضبط قيمة هذه الخاصية على overflow: hidden، فهي تخفي كما يوحي اسمها النص الذي سيطفح، لكن انتبه إلى اختفاء بعض البيانات في هذه الحالة، فلا تستخدم هذه القيمة إلا إذا كنت متأكدًا أن إخفاء هذه البيانات لن يسبب مشكلة. قد تجد -بدلًا من ذلك- أن إضافة شريط تمرير إلى المحتوى عند الطفحان سيفى بالغرض، لهذا يمكنك استخدام القيمة overflow:scroll، وعندها سيعرض المتصفح دائمًا أشرطة تمرير حتى لولم يكن حجم النص كبيرًا ويسبب طفحان. تتيح هذه الطريقة ميزة المحافظة على تخطيط الصفحة بدلًا من إخفاء أو إظهار أشرطة التمرير وفقًا لحجم المحتوى. جرّب أن تحذف بعض المحتوى في محرر الشيفرة التفاعلي التالي ولاحظ كيف يبقى شريطي التمرير حتى لو لم يكن هناك حاجة لوجودهما. احتجنا في المثال السابق إلى شريط التمرير العمودي y فقط لكن كانت النتيجة ظهور شريطي التمرير، لهذا يمكنك استخدام الخاصية overflow-y بدلًا من overflow وإسناد القيمة scroll لها لتحصل على المطلوب: يمكنك أيضًا تمرير المحتوى وفق المحور الأفقي x عبر استخدام الخاصية overflow-x على الرغم من أنها طريقة غير محبّذة لعرض أسطر طويلة، فلو كان لديك سطر طويل ضمن صندوق صغير، فكرّر باستخدام خاصيات أخرى، مثل word-break أو overflow-wrap. إضافةً إلى ذلك، ستجد في أساليب CSS المتبعة لتحديد أبعاد العناصر الكثير من الأفكار المناسبة لإنشاء صناديق تستوعب حجم المحتوى المتغير بطريقة أفضل، وهذا ما سنراه في مقالات تالية. يسبب إذًا استخدام القيمة scroll عرض شريط تمرير بالاتجاه الذي تختاره أو بالاتجاهين سواءٌ طفح المحتوى وفق هذا الاتجاه أم لم يطفح. ملاحظة: يمكنك أن تحدد باستخدام الخاصية overflow عرض كلا شريطي التمرير بتمرير القيمة scroll فقط، أو عرض أحدهما بتمرير قيمتين، فتُطبّق الأولى على شريط التمرير الأفقي أي تسند هذه القيمة إلى لخاصية overflow-x، أما الثانية فتُطبق على شريط التمرير العمودي. عندما تُضبط الخاصية على سبيل المثال على النحو التالي: overflow: scroll hidden; يعني هذا عرض شريط التمرير الأفقي وإخفاء العمودي. وفي حال أخذت الخاصية overflow القيمة auto، عندها يُترك الأمر للمتصفح الأمر بعرض شريط التمرير المناسب في حالة طفحان المحتوى. حاول من خلال المحرر التفاعلي إزالة بعض المحتوى حتى يتناسب مع حجم الصندوق وستلاحظ اختفاء شريط التمرير. الطفحان والمحتوى المنسق كتليا عندما تستخدم قيمًا لخاصية <overflow> مثل scroll و auto لتدبر أمر طفحان المحتوى فأنت تُنشئ في الواقع ما يُدعى بالمحتوى المنسّق كتليًا Block Formatting Context -أو اختصارًا BFC، وهو المحتوى الذي غيّرت قيمة الخاصية overflow له كي يحتويه التخطيط تلقائيًا، فلا يمكن للمحتوى الموجود خارج الحاوية أن يدخل إلى الحاوية، ولا يمكن لأي شيء أن يخرج من تلك الحاوية إلى التخطيط المحيط، وهذا ما يؤدي إلى ظهور سلوك التمرير كي يبقى المحتوى ضمن المكان المخصص له ولا يتداخل مع محتوى بقية العناصر وبالتالي الحصول على تجربة تمرير مستقرة. الطفحان غير المرغوب في تصميمات الويب تتدبر أساليب تخطيط صفحات الويب الحديثة أمر الطفحان، فهي تعمل دون أن تضع افتراضات مسبقة أو تكترث بحجم المحتوى الذي تضمه الصفحة.لكن لم يكن الوضع دائمًا هكذا. بُنيت بعض المواقع سابقًا باستخدام حاويات ثابتة الارتفاع ليبقى أسفل الصناديق على نفس المستوى علمًا أن هذه الصناديق لا تربطها أية علاقة بالضرورة، وكان هذا الأسلوب ضعيفًا، فقد لوحظت في تطبيقات الويب القديمة تداخلات بين محتوى العناصر المختلفة، وهذا ناتج عن ظاهرة طفحان المحتوى كما تعلمنا. لهذا، يُفترض في هذه الحالة أن تعيد تخطيط الصفحة بطريقة مناسبة دون الاعتماد على فكرة الارتفاع المحدد أو الثابت. ضع حالة الطفحان في حساباتك دائمًا عندما تطور موقع ويب، واختبر التصميم من خلال محتوى متغير الكمية وزد حجم خط الكتابة وتأكد عمومًا أن CSS تعمل على نحوٍ متين. حاول ألا تغيّر قيم الخاصية overflow لإخفاء المحتوى أو لإضافة أشرطة التمرير إلا في بعض الحالات الخاصة كأن تكون لديك نية في عرض أشرطة التمرير مثلًا. الخلاصة قدمنا في هذا المقال مفهوم طفحان المستوى وأشرنا إلى أن CSS تتحاشى أن تخفي المحتوى الذي يطفح خارج الحاوية، وتعلمنا كيفية إدارة حالات طفحان المحتوى التي قد تحدث، وأن عليك اختبار تصميمك لتتأكد من عدم حدوث طفحان خارج نطاق السيطرة. ترجمة -وبتصرف- للمقال overflowing content. اقرأ أيضًا المقال السابق: التحكم باتجاه انسياب النصوص باستخدام CSS تحريك واجهات العرض أثناء التنقل في موقع الويب العناصر العائمة Floats في CSS

تصادف المهتمين بتعلم قواعد البيانات العديد من المصطلحات التي تسبب ارباكًا للقادمين الجدد سواء كانت غايته تعلم استثمارها أو تصميميها أو برمجة تطبيقات ومواقع ويب ترتبط بها. ومن أكثر هذه المصطلحات إشكالًا هو مصطلح "محركات قواعد البيانات Database Engines" الذي يجري الخلط بينه وبين قواعد البيانات بحد ذاتها وقد يعدّهما الكثيرون الشيء ذاته. سنشرح في هذا المقال ماهية قواعد البيانات ونتعرف على محركات قواعد البيانات ووظائفها ودورها في تزويد المستخدم النهائي بالبيانات المطلوبة. ما هي قواعد البيانات تُعرّف قاعدة البيانات Database ببساطة على أنها مجموعة من البيانات المخزّنة بشكل منظم يتيح استرجاعها وتعديلها وحذفها. وانطلاقًا من هذا التعريف يمكن أن نفكّر بعدد من النقاط: تضم قواعد البيانات كمًا كبيرًا من البيانات المعالجة أو البيانات الخام. ترتبط قواعد البيانات بوسائط تخزين، أي أن جميع البيانات موجودة ضمن ملفات أو بنى ومخزّنة رقميًا. توجد طريقة محددة نخبر بها قاعدة البيانات بطبيعة العمل الذي نرغبه بتنفيذه على البيانات. توجد طريقة محددة تفهم فيها قاعدة البيانات ما نطلبه منها. توجد طريقة محددة تنفذ من خلالها قاعدة البيانات التعليمات المطلوبة منها. توجد طريقة محددة لإيصال نتيجة التعليمات إلينا. بناء على النقاط السابقة، تتكوّن قاعدة البيانات من المكوّنات التالية: البيانات وحدات التخزين نظام إدارة قواعد البيانات البيانات تُعرّف البيانات بكل بساطة على أنها كل ما يُخزّن لاستراجعه والعمل عليه وتعديله وتحليله للوصول إلى المعلومات المطلوبة. وحدات التخزين وتعد البنية التحتية لقواعد البيانات، إذ تتوضع فيها البيانات بشكل محددٍ ومنظم يُسهّل الوصول إليها. ولهذا المكون بالطبع شقان رئيسيان: أولهما شق برمجي وهي ما يُعرف بالمعمارية Architcture ويحدد طريقة تمثيل البيانات وتخزينها والآخر يتعلق بوسائط تخزين البيانات وهي المكوّن المادي الذي تُخزَّن فيه البيانات وتقرأ وتعدل. لماذا أشرنا إلى وسائط التخزين كمكوّن من مكونات قاعدة البيانات؟ حتى نوّسع مفهوم قواعد البيانات التقليدي. فلا وجود لقاعدة البيانات دون وسائط تخزين من ناحية أولى، ولأن قواعد البيانات قابلة للتوزيع من ناحية أخرى. فقد تجدها على وسيط تخزين واحد أو على عدة وسائط تخزين في نفس الموقع أو في أصقاع مختلفة من العالم (خوادم قواعد بيانات)، ناهيك عن دور وسائط التخزين في سرعة الوصول إلى قواعد البيانات وقدرتها على تخديم كم كبير من الطلبات. إذا لنفكرّ دائمًا بوحدات التخزين على أنها تجهيزات التخزين مع معمارية تخزين البيانات عليها. نظام إدارة قواعد البيانات يضم نظام إدارة البيانات Database management system واختصارًا DBMS الأقسام التالية: برمجيات التحكم والإشراف محركات قواعد البيانات واجهات تخاطب برمجية API برمجيات التحكم والإشراف تدير هذه البرمجيات عددًا من الوظائف التي تختلف من قاعدة بيانات إلى أخرى، نذكر منها: التحكم بمنح أذونات الدخول والعمل. التأكد من صحة وسلامة البيانات. التأكد من خضوع العمليات إلى قواعد محددة. تسهيل استعادة البيانات في حال حدوث خلل. محركات قواعد البيانات وهي برمجيات تدير جميع المهام الوظيفية التي صممت قاعدة البيانات لتنفيذها، وتُعد نواة قواعد البيانات. سنتكلم عنها بالتفصيل لاحقًا. واجهات تخاطب برمجية API واجهات تخاطب برمجية هي مجموعة من البرمجيات التي تدير التخاطب بين محرّكات قواعد البيانات والعميل وبين محرّكات قواعد البيانات ووسائط التخزين. إن أردت الاستزادة، فيمكنك الرجوع إلى مقال دليلك الشامل إلى قواعد البيانات. ماهية محركات قواعد البيانات يُقصد بكلمة "محرك engine" في تكنولوجيا المعلومات عمومًا بأنها وحدة برمجية تضم الشيفرة الأساسية (أو النواة) التي تقود أي تكنولوجيا وظيفيًا، وقواعد البيانات ليست استثناءً. وعادة ما يكون لمصطلح "محرّك" دلالة من ناحية الملكية، إذ يشير هذا المصطلح بأن هذه الوحدة البرمجية مملوكة من قبل شركة معينة تعمل على تطويرها وحمايتها. ووفقًا لهذا التعريف إضافة إلى مفهوم نظام إدارة قواعد البيانات يمكننا أن نرى سبب وجود الكثير من مزودي قواعد البيانات والكثير من أنظمة قواعد البيانات التي تختلف أو تتشابه بطريقة عملها مثل Oracle DB و MS SQL Server و MySQL و PostgreSQL و Apache Cassandra و Google Bigtable. الهيكليات التي تبنى عليها محركات قواعد البيانات تُبنى قواعد البيانات عادة وفق إحدى هيكليتي (أو خوارزميتي) الفهرسة التاليتين: هيكلية "شجرة بي B-tree" أو إحدى نسخها: وهي -باختصار شديد- هيكلية مخصصة لتحسين فعالية المحرّك في قراءة البيانات. تعتمد على هذه الهيكلية قواعد بيانات شهيرة مثل Oracle DB و MS SQL Server وIBM DB2 وPostgreSQL و MySQL ذات المحرّك InnoDB. هيكلية "شجرة LSM": وهي هيكلية مصممة لتحسين فعالية المحرّك عندما تكون عمليات كتابة البيانات هي السائدة. تعتمد على هذه الهيكلية قواعد بيانات شهيرة مثل Apache Cassandra و Google Bigtable و LevelDB و RocksDB وقد ظهرت نسخة لقاعدة البيانات MySQL أخرى تعتمد على توزيعة من RocksDB تعرف بالاسم MyRocks بدلًا من المحرك InnoDB. حاولت بعض قواعد البيانات استخدام كلا الهيكليتين مثل MongoDB من خلال محركها WiredTiger الذي يأتي بإعدادين مختلفين لدعم B-tree و LSM Tree لكن الأمور لم تسر على ما يرام واختارت الشركة توزيع النسخة التي تعتمد على B-tree. ما هو دور محركات قواعد البيانات؟ تؤدي محرّكات قواعد البيانات عمومًا معظم وظائف قواعد البيانات وأهمها: إنشاء وقراءة وتحديث وحذف البيانات من قواعد البيانات واختصارًا CRUD. التخزين المؤقت للبيانات ضمن ذواكر مؤقتة caches أو مخازن مؤقتة buffers. ضمان تحقق ميزات ACID لقاعدة البيانات (الكلّية atomicity، التناسق consistency، العزل isolation، الاستمرارية durability). التأكد من إنجاز العمليات المتزامنة بالشكل المطلوب Multiversion Concurrency Control (القراءة والكتابة إلى العنوان ذاته في نفس الوقت). تنفيذ أية عملية ضرورية قبل العمل على البيانات (تحديد موقع التخزين، تهيئة بنية مناسبة، معالجة ما قبل التخزين،..). هل محركات قواعد البيانات مستقلة عن قواعد البيانات؟ قد تتساءل، هل يتمتع محرك قاعدة البيانات باستقلالية عن منظومة إدارة قواعد البيانات؟ ليس بالضرورة في واقع الأمر. لا يمكن التمييز في كثير من الحالات بين محرّك قاعدة البيانات ومنظومة إدارة قواعد البيانات لعدم وجود فصل رسمي من قبل الشركة المطوّرة وخاصة في قواعد البيانات المدفوعة مثل أوراكل Oracle-DB أو Microsoft SQL Server. إن الغاية الأساسية من وجود محرّك قواعد بيانات مستقل أو قائم بذاته هو إمكانية نقله واستخدامه وتعديله ليناسب قاعدة بيانات أخرى، لذلك نجد توجهًا كهذا في قواعد البيانات مفتوحة المصدر مثل MySQL (انظر مقال مقارنة بين MySQL و MongoDB). لهذا السبب لا تميز الكثير من الأدبيات المتعلقة بقواعد البيانات بين منظومة إدارة قواعد البيانات ومحرّكات قواعد البيانات، حتى أن بعضها يعد محركات قواعد البيانات هي نفسها قواعد البيانات. العلاقة بين محركات قواعد البيانات والواجهات البرمجية قلنا أن الواجهة البرمجية هي وسيلة للتخاطب بين المحرّكات وبين المستخدم أو بين المحرّكات ووسائط التخزين. تُستخدم عادة منهجيتين في تخاطب المستخدم مع محركات قواعد البيانات: استخدام لغة استعلام بنيوية SQL وهي لغة خاصة تُستخدم في تعريف وإنشاء الجداول والسجلات والعمل عليها، وهذا النوع هو الأكثر شيوعًا وخاصة في قواعد البيانات المجدولة أو قواعد البيانات العلائقية Relational database مثل أوراكل و PostgreSQL. استخدام أساليب لا تعتمد كليًا على SQL وتعرف بالاختصار NoSQL وقد ازدادت شعبية هذا النوع من الاستعلامات مع ظهور التخزين البعيد والسحابي والاتجاه نحو تحسين السرعة والتوفر الدائم للبيانات. تعتمد على هذه الواجهات قواعد بيانات عديدة نذكر منها قواعد بيانات الملفات مثل XML و MongoDB، وقواعد بيانات (مفتاح- قيمة) مثل MongoDB، وقواعد البيانات الرسومية مثل Azure Cosmos DB. استخدام واجهات مخصصة للغات البرمجة، وهي مفيدة جدًا للمبرمجين الذين يرغبون بربط تطبيقاتهم مع قواعد بيانات محلية أو بعيدة على خوادم خاصة. صممت الكثير من المكتبات لربط البرمجيات المكتوبة بلغات برمجة مختلفة مع قواعد بيانات مختلفة نذكر منها Mongoose التي تربط تطبيقات React مع قاعدة البيانات MongoDB و ++SQLAPI لربط تطبيقات مكتوبة بلغة ++C مع قاعدة البيانات SQL Server. وبالتالي لا علاقة لمحركات قواعد البيانات بلغات الاستعلام أو واجهات البرمجة المستخدمة فالغاية في النهاية هي التخاطب مع هذه المحرّكات لتنفيذ المطلوب. العلاقة بين محركات قواعد البيانات ونوع قاعدة البيانات تُصمم قواعد البيانات لتتعامل بالطريقة الأمثل مع هيكلية تخزين البيانات في قواعد البيانات، نذكر من هذه الهيكليات: قواعد البيانات العلائقيّة ويُشار إلى منظومتها بالاختصار RDBMS: وتخزن فيها البيانات على شكل جداول مترابطة من صفوف (سجلات) وأعمدة (قيم). قواعد بيانات ملفات Document Database: وتخزّن فيها البيانات ضمن ملفات بأسلوب محدد يسهّل استخلاص البيانات والتعامل معها مثل أسلوب الوسوم tags في ملفات XML. قواعد بيانات قاموسية Dictionary Database: وتخزّن فيها البيانات على شكل مفتاح-قيمة، أي يمكن الوصول إلى أي قيمة بمجرد معرفة مفتاحها والعكس بالعكس. قواعد بيانات كائنية التوجّه Object-oriented Databases: ويجري فيها تخزين البيانات على شكل كائنات مختلفة وتستخدم لتخزين الملفات ومقاطع الصوت والفيديو وهي حديثة العهد نسبيًا. يفرض أسلوب التخزين المختلف محركات قواعد بيانات مختلفة وبالتالي طريقة عمل مختلفة وواجهات برمجية مختلفة بين محرّك قواعد البيانات من جهة ووسائط التخزين من جهة أخرى. ولا بد من الإشارة إلى وجود قواعد بيانات تدعم أكثر من أسلوب لتخزين البيانات وبالتالي ستكون محرّكاتها مهيأة لهذا الأمر مع وجود تبعات لا مفر منها تتعلق بسرعة الأداء وموثوقيته. لهذا السبب قد تجد عدة إصدارات مخصصة من قاعدة بيانات لدعم الأنواع المختلفة لهيكلية التخزين. قواعد البيانات الأكثر شعبية وميزات محركاتها نورد تاليًا لمحة عن أكثر قواعد البيانات استخدامًا في مختلف المجالات وبعض الميزات الخاصة بمحركاتها: قاعدة البيانات Oracle-DB قاعدة البيانات MySQL قاعدة البيانات Microsoft SQL Server قاعدة البيانات PostgreSQL قاعدة البيانات MongoDB قاعدة البيانات Oracle-DB تُعد هذه القاعدة من أكثر قواعد البيانات شهرة واستخدامًا في شتى المجالات وإليك بعضًا من ميزاتها: هيكلية التخزين الأساسية: علائقية RDBMS. هيكلية التخزين الثانوية: قواعد بيانات ملفات وقواعد بيانات رسومية وقواعد علائقية فراغية spatial RDBMS. مفتوحة المصدر: لا. الشركة المصممة: Oracle. الأنظمة التي تتعامل معها (بما فيها الخوادم): AIX و HP-UX و Linux و OS X و Solaris و Windows. لغات البرمجة التي تدعمها: معظم اللغات الشعبية ++C و بايثون و جافا و PHP وغيرها الكثير. الواجهات البرمجية وغيرها من طرق الوصول: JDBC و ODBC و ODP.NET و Oracle Call Interface ‏(OCI). لغات الاستعلام: PL/SQL ميزات المحرّك: دعم عمليات CRUD دعم ميزات ACID دعم إقامة البيانات في الذاكرة دعم الحفاظ على البيانات واستعادتها دعم التعديل المتزامن للبيانات الدعم المباشر للتناسق Immediate Consistency قاعدة البيانات MySQL لا تقل هذه القاعدة شهرة من ناحية الميزات والاستخدامات وعدد المستخدمين عن Oracle وتستخدم في شتى المجالات وإليك بعضًا من ميزاتها: هيكلية التخزين الأساسية: علائقية RDBMS. هيكلية التخزين الثانوية: قواعد بيانات ملفات وقواعد علائقية فراغية spatial RDBMS. مفتوحة المصدر: نعم. الشركة المصممة: Oracle. الأنظمة التي تتعامل معها (بما فيها الخوادم): FreeBSD و Linux و OS X و Solaris و Windows لغات البرمجة التي تدعمها: معظم اللغات الشعبية ++C و بايثون و جافا و PHP وغيرها الكثير. الواجهات البرمجية وغيرها من طرق الوصول: JDBC و ODBC و Proprietary native API و ADO.NET. لغات الاستعلام: SQL. ميزات المحرّك: دعم عمليات CRUD دعم ميزات ACID دعم إقامة البيانات في الذاكرة دعم الحفاظ على البيانات واستعادتها دعم التعديل المتزامن للبيانات الدعم المباشر للتناسق Immediate Consistency قاعدة البيانات Microsoft SQL Server وهي قاعدة البيانات الشهيرة من مايكروسوفت وتُعد من أكثر قواعد البيانات شعبية وإليك بعضًا من ميزاتها: هيكلية التخزين الأساسية: علائقية RDBMS. هيكلية التخزين الثانوية: قواعد بيانات ملفات وقواعد بيانات رسومية و قواعد علائقية فراغية spatial RDBMS. مفتوحة المصدر: لا. الشركة المصممة: مايكروسوفت. الأنظمة التي تتعامل معها (بما فيها الخوادم): Linux و Windows. لغات البرمجة التي تدعمها: معظم اللغات الشعبية ++C و بايثون و جافا و PHP ودعمًا خاصًا للغات (NET.) مثل #C وفيجوال بيسك. الواجهات البرمجية وغيرها من طرق الوصول: JDBC و ODBC و ADO.NET و OLE DB و Tabular Data Stream ‏(TDS) لغات الاستعلام ولغات سكربت الخادم: لغات NET. و بايثون و R و Transact SQLو جافا (في الإصدار 2019 وما بعد). ميزات المحرّك: دعم عمليات CRUD دعم ميزات ACID دعم إقامة البيانات في الذاكرة دعم الحفاظ على البيانات واستعادتها دعم التعديل المتزامن للبيانات الدعم المباشر للتناسق Immediate Consistency قاعدة البيانات PostgreSQL إليك بعضًا من ميزات هذه القاعدة الشهيرة: هيكلية التخزين الأساسية: علائقية RDBMS. هيكلية التخزين الثانوية: قواعد بيانات ملفات وقواعد علائقية فراغية spatial RDBMS. مفتوحة المصدر: نعم. الشركة المصممة: PostgreSQL Global Development Group . الأنظمة التي تتعامل معها (بما فيها الخوادم): FreeBSD و Linux و OS X و Solaris و Windows و NetBSD و Unix و Hp-UX. لغات البرمجة التي تدعمها: معظم اللغات الشعبية ++C و بايثون و جافا و PHP ولغات (NET.). الواجهات البرمجية وغيرها من طرق الوصول: native C library و streaming API for large objects و JDBC و ODBC ADO.NET. لغات الاستعلام: SQL. ميزات المحرّك: دعم عمليات CRUD دعم ميزات ACID دعم الحفاظ على البيانات واستعادتها دعم التعديل المتزامن للبيانات الدعم المباشر للتناسق Immediate Consistency قاعدة البيانات MongoDB إليك بعضًا من ميزات هذه القاعدة الشهيرة: هيكلية التخزين الأساسية: قواعد بيانات ملفات. هيكلية التخزين الثانوية: قواعد علائقية فراغية spatial RDBMS وقواعد علائقية مرتبطة بالسلاسل الزمنية Time Serieses RDBMS. مفتوحة المصدر: نعم. الشركة المصممة: MongoDB, Inc. الأنظمة التي تتعامل معها (بما فيها الخوادم): Linux و OS X و Solaris و Windows لغات البرمجة التي تدعمها: معظم اللغات الشعبية. الواجهات البرمجية وغيرها من طرق الوصول: بروتوكول خاص باستخدام JSON لغات الاستعلام: Read-only SQL وجافاسكربت. ميزات المحرّك: دعم عمليات CRUD دعم محدود لميزات ACID دعم إقامة البيانات في الذاكرة دعم الحفاظ على البيانات واستعادتها دعم التعديل المتزامن للبيانات الدعم المباشر للتناسق Immediate Consistency والتنسيق العرضي Eventual Consistency خاتمة حاولنا في هذا المقال التمييز ما بين محركات قواعد البيانات وقواعد البيانات من الناحية الوظيفية ورأينا أن المحركات هي الشيفرة البنيوية التي تمكّن قاعدة البيانات من تنفيذ عملياتها، ولهذا الأمر أهميته الخاصة لأن محاولات بناء وتطوير قواعد بيانات جديدة مفتوحة المصدر بالاستفادة من شيفرات محركات قواعد بيانات أخرى قد بدأت بالنضوج وبالتالي لا بد من توضيح هذا المفهوم لاختيار قاعدة البيانات الأنسب للتطبيقات حاليًا ومستقبلًا. اقرأ أيضًا تعرف على مكونات قاعدة البيانات أنواع قواعد البيانات وأهم مميزاتها واستخداماتها مدخل إلى تصميم قواعد البيانات

سكراتش Scratch هي لغة برمجة مرئية صممت أساسًا لأغراض تعليميّة كان هدفها تقديم مفهوم البرمجة للطلاب في أعمار مبكرة ومساعدتهم في إنشاء قصص ورسوم متحركة ومواضيع تفاعلية تعليمية بطريقة مبتكرة. ونظرًا لسهولة المبادئ التي تعمل وفقها سكراتش، بدأ استخدامها لأغراض برمجية وتقنية أخرى مثل كتابة بعض برمجيات الأنظمة المدمجة. نتحدث في هذا المقال عن ماهية لغة سكراتش وكيفية البرمجة باستخدامها وأهم المجالات التي نستفيد فيها من إمكانات هذه اللغة. نظرة أقرب إلى لغة سكراتش صُممت لغة سكراتش في مخابر معهد ماساتشوستس للتكنولوجيا (MIT Media Lab) لتكون لغة برمجة عالية المستوى ومرئية. ويُقصد بلغة البرمجة المرئية -ببساطة- أنها لغة تقدم التعليمات البرمجية على شكل كتل يجري سحبها أو نقلها إلى نافذة البرمجة دون أن تكتب أية شيفرة، ثم ترتب هذه الكتل بالشكل الصحيح لبناء البرنامج. تُعد هذه الطريقة ملائمة للأطفال دون الخوض بتفاصيل الصياغة القواعدية والدلالية للغة البرمجة. فإن أردت أن تعرض عبارة ما على الشاشة يمكنك سحب كتلة "قل" ثم تضعها في نافذة بناء البرنامج وتكتب العبارة التي تريدها أن تظهر ضمن هذه الكتلة وسيُنفّذ الأمر. لقد لاحظ العديد من المطورين هذه الميزة البديهية -إن جاز لنا التعبير- واستعملوها في بناء مكتبات تساعد في موضوع الحوسبة الفيزيائية أو في برمجة الأنظمة المدمجة والروبوتات وقد حققت بالفعل هذه المكتبات نجاحات مهمة. يمكن استخدام بيئة عمل سكراتش من خلال تحميل البرنامج مباشرة عبر الإنترنت وتثبيته على حاسوبك، إذ تتوفر لسكراتش إصدارات مختلفة لدعم أنظمة تشغيل ويندوز و ماك أو إس و أندرويد و كروم أو إس (انظر صفحة التنزيل، كما يمكن العمل على نظام لينكس (بنسخ غير مدعومة مباشرة من المصنِّع الأساسي) وكذلك عبر موقع الإنترنت كتطبيق ويب مباشرة. تعتمد فكرة سكراتش على تحريك شخصيات رسومية تُدعى sprite تظهر ضمن نافذة تُدعى المسرح stage، ثم تُبنى برامج للتحكم بهذه الشخصيات. وبإمكان المبرمج النقر على كل شخصية وبرمجتها بشكل منفصل عن الأخرى ثم تشغيل هذه الشخصيات معًا أو وفق تسلسل محدد لبناء القصة أو الاستعراض أو اللعبة المطلوبة. يمكنك اختيار هذه الشخصيات من المكتبة الافتراضية التي تٌثبّت مع البرنامج أو من خلال تصميمها بنفسك. بيئة عمل سكراتش تتكون واجهة عمل سكراتش من الأقسام التالية: فئات الكتل البرمجية code: تضم هذه الشيفرة أنواعًا مختلفة من الكتل البرمجية التي تؤدي وظائف محددة. صمم شكل هذه الكتل بطريقة هندسية يمكنك خلالها أن تقدر إن كانت الكتلة البرمجية ملائمة لأن توضع ضمن كتلة أخرى أو تحتها أم لا. وتصنف الكتل البرمجية إلى عدة أقسام: كتل الحركة motion: لوّنت هذه الكتل باللون الأزرق وتضم مجموعة تعليمات برمجية لتحريك الشخصية أو تدويرها. كتل الأحداث Events: لوّنت هذه الكتل بالبني الفاتح وتضم تعليمات برمجية للتفاعل مع الأحداث كأن تنفّذ شيئًا ما عند النقر على الشخصية أو الخلفية بزر الفأرة. كتل الهيئة Looks: لوّنت هذه الكتل بالبنفسجي وتضم كتل برمجية تتحكم بمظهر الشخصية من ناحية الشكل والحجم، كما تساعد على التحكم بمظهر خلفية المسرح إضافة إلى تعليمات أخرى كعرض كلمات تقولها الشخصية وهكذا. كتل الأصوات Sound: لوّنت هذه الكتل باللون النهدي (موف) وتضم تعليمات تشغيل سلسلة من الأصوات الجاهزة أو المسجّلة. كتل التحكم Control: لوّنت هذه الكتل باللون البرتقالي الغامق وتضم تعليماتٍ تتحكم بتدفق بمسار التعليمات كالحلقات والتكرار والعبارات الشرطية. كتل الاستشعار Sensing: لوّنت هذه الكتل باللون السماوي وتضم تعليمات التحكم بطريقة تفاعل الشخصية كأن تنفّذ عملًا ما عند ضغط زر معين من أزرار لوحة المفاتيح.أو استخدام مؤقتات زمنية. كتل المتغيرات Variables: لوّنت باللون البني وتضم التعليمات التي تعرّف المتغيرات وتعليمات استخدامها. كتل العمليات Operators: لوّنت بالأخضر وتضم تعليمات إجراء العمليات الرياضية الأساسية وعمليات الموازنة بين الكميات العددية (أكبر وأصغر ويساوي). لبناتي Myblocks: لوّنت بالزهري وهي سلسلة من الكتل التي ترتبها بنفسك لأداء وظيفة معينة متكررة ضمن مشروعك بدلًا من إعادة كتابة هذه السلسلة كل مرة تحتاجها. نافذة الكتل البرمجية: عند النقر على أي فئة من فئات الكتل البرمجية مثل "المظهر" تُعرض في هذه النافذة جميع الكتل التي تضمها هذه المجموعة. نافذة بناء البرنامج: تُسحب الكتل المطلوبة لبناء البرنامج إليها انطلاقًا من نافذة الكتل البرمجية، وتساعدك هذه النافذة على ضبط محاذاة الكتل وتلميحات إلى الأماكن التي تصلح أن توضع فيها عن طريق تظليل هذه الأماكن. المسرح: وهي النافذة التي يُنفَّذ البرنامج ضمنها وفي أعلاها أيقونة "علم أخضر" لبدء التنفيذ وأيقونة "دائرة حمراء" لإيقافه. نافذة الشخصيات: يمكنك ضمن هذه النافذة اختيار شخصيات البرنامج من خلال عدد من الشخصيات المتاحة، كما يمكنك اختيار عدة أوضاع مختلفة للشخصية إن أردت أن تحرّكها. ولاختيار شخصية انقر على الأيقونة الزرقاء أسفل ويمين النافذة. نافذة خلفيات المسرح: وتضم قائمة بجميع الخلفيات التي ستستخدمها في برنامجك. يمكنك اختيار خلفية بالنقر على الأيقونة الزرقاء أسفل النافذة. البرمجة باستخدام سكراتش سنوضح الأمر من خلال مثال غاية في البساطة، لكن إن أردت أن تتعمق أكثر ننصحك بالاطلاع على مقال البرمجة باستخدام سكراتش في أكاديمية حسوب الذي سيساعدك على فهم الترابط بين الكتل البرمجية المختلفة واستخدامها في بناء البرامج. برنامج "مرحبا أيها العالم!" تقول الأسطورة أن كل مبرمج ينفّذ برنامج "مرحبًا أيها العالم!" عندما يبدأ تعلم لغة برمجة جديدة سيكون محظوظًا! لهذا سيكون أول برنامج نبنيه في سكراتش هو هذا البرنامج. المبدأ بسيط: سنكتب برنامجًا يطبع عبارة "مرحبًا أيها العالم!" على مسرح سكراتش، لكننا سنجعل شخصية القط تقول هذه الجملة وهي تتحرك من طرف إلى طرف. انقر بداية على أيقونة الفئة "أحداث Events" ثم انتقل إلى نافذة الكتل البرمجية وانقر على الكتلة ثم اسحبها وافلتها في نافذة بناء البرنامج. انقر بعد ذلك على أيقونة الفئة "حركة Motion" ثم اختر الكتلة وضعها أسفل الكتلة السابقة وستلاحظ أنها ستأخذ مكانها. عدّل الرقم الموجود قبل كلمة "خطوة" إلى 200 لتظهر الحركة على الشاشة بوضوح. انقر بعد ذلك على أيقونة الفئة "هيئة Looks" ثم اختر الكتلة وضعها تاليًا. اكتب عبارة "مرحبًا أيها العالم!" ضمن الكتلة في المكان المخصص واضبط زمن عرض العبارة على "3 ثوان" كي تبقى العبارة فترة أطول من الزمن قبل أن تختفي. عد بعد ذلك إلى الفئة "حركة Motion" ثم اختر الكتلة وضعها في الأسفل لتتابع الشخصية المشي بعد الترحيب بك، وعدّل الرقم الموجود قبل كلمة "خطوة" إلى 200 أيضًا. هذا هو البرنامج! ماعليك الآن سوى النقر على أيقونة "الراية الخضراء" أعلى نافذة المسرح لترى نتيجة عملك. ينبغي عليك طبعًا قبل البدء بتثبيت سكراتش على حاسوبك، لهذا عليك زيارة موقع البرنامج واختيار النسخة التي تناسب نظام التشغيل لديك. إن لم تكن على دراية كافية بالعمل على الحاسوب وأنظمة تشغيله المختلفة ننصحك بالاطلاع على دورة علوم الحاسوب التي تقدمها أكاديمية حسوب، فهي دورة باللغة العربية أعدها مختصون محترفون تأخذ بيدك من الصفر وحتى إتقان أفكار التقنيات المتعلقة بالحواسيب وأنظمة تشغيلها وغيرها الكثير من مواضيع تكنولوجيا المعلومات. مجالات استخدام لغة سكراتش يعتقد الكثير من المبرمجين المبتدئين أو الراغبين بتعلم البرمجة أن سكراتش موجّهة للأطفال واليافعين فقط وبالتالي فهي محدودة الإمكانات. لا يخلو هذا الكلام من الصحة فلن تتمكن من استخدام سكراتش لبناء برمجيات وتطبيقات كلاسيكية لكنها مناسبة جدًا في المجالات التالية: تعليم اليافعين مبادئ الخوارزميات وأساسيات البرمجة. تصميم رسوم متحركة وعروض تفاعلية. تصميم الألعاب ثنائية البعد. البرمجة الفيزيائية لمكوّنات بعض الأنظمة المدمجة. برمجة بعض أنواع الروبوتات. تعليم اليافعين مبادئ الخوارزميات وأساسيات البرمجة عندما تريد حل أي مشكلة أو تنفيذ أي عملية، لا بد من تقسيمها إلى خطوات متسلسلة تسلسلًا منطيًا يفضي إلى النتيجة المطلوبة، تُدعى هذه المنهجية بالخوارزمية وهي أساس بناء البرمجيات. تعزز الطبيعة المرئية للغة سكراتش مفهوم التسلسل المنطقي للتعليمات من خلال ربط الكتل البرمجية المتناسبة مع بعضها البعض لتنفييذ البرنامج المطلوب. يُحفّز عرض الشيفرة على شكل كتل مترابطة ومتسلسلة (بشكل يماثل ألعاب الأحجيات Puzzle) المتعلّم على التفكير والتجريب والاستكشاف دون مواجهة أخطاء الشيفرة المكتوبة التي قد تكون مرهقة ومملة. فإن أخذت كتلة برمجية مكانها الصحيح فتسلسل برنامجك صحيح سواء أعمل كما تتوقع أم لا! للاطلاع على مزيد من الأفكار واستكشاف إمكانيات سكراتش في تعليم البرمجة للمبتدئين ننصحك بقراة مقال برمج خوارزميتك الأولى عبر سكراتشScratch، فستجد فيه الأساسيات التي يحتاجها المبتدئ. تصميم رسوم متحركة وعروض تفاعلية يعتمد سكراتش أساسًا على تحريك شخصيات باستخدام كتل برمجية مختلفة وبالتالي يمكن بقليل من الجهد وكثير من الخيال أن تؤلف قصة كرتونية انطلاقًا من تحريك هذه الشخصيات وجعلها تنطق أو تفكر واستخدام خلفيات مبتكرة لكل مشهد فالأمر تمامًا كما لو كنت تؤدي عملًا مسرحيًا! تصميم الألعاب ثنائية البعد الألعاب ثنائية البعد هي قصص كرتونية بالفعل لكنها تتيح للمتابع أن يكون جزءًا منها. تتيح الكتل البرمجية في فئتي الحركة والاستشعار أن يتفاعل مع البرنامج بنقر زر الفأرة أو الضغط على أحد أزرار لوحة المفاتيح وهذا بالضبط ما يجعل استخدام سكراتش في بناء الألعاب أمرًا ممتعًا! إن وجدت أن الأمر يستحق التجربة فعليك الاطلاع على مقال برمجة لعبة تفاعلية باستخدام سكراتش ومقال برمجة لعبة إلكترونية من منظور اللاعب باستخدام سكراتش اللذان يقدمان لك أساسيات استخدام سكراتش في تصميم الألعاب ويعرض خطوات بناء عدد منها. كما يمكنك الاطلاع على مقالات أخرى بهذا الخصوص ضمن قسم سكراتش في موقع أكاديمية حسوب. البرمجة الفيزيائية لمكونات بعض الأنظمة المدمجة يُقصد بالبرمجة الفيزيائية التحكم ببعض التجهيزات الإلكترونية المرتبطة بالحاسوب وخاصة حواسيب اللوحة الواحدة مثل راسبيري باي وأوردوينو. إن الطبيعة المرئية للغة سكراتش جعلت من الممتع والسهل في آن معًا التحكم بتشغيل الأضواء أو الأصوات أو استشعار البيئة المحيطة من خلال تجهيزات خاصة مرتبطة بهذه الحواسيب. يقدّم لك مقال ربط راسبيري باي بعناصر إلكترونية وبرمجتها باستخدام سكراتش وبايثون أساسيات استخدام سكراتش في كتابة برامج تتحكم بالعناصر الإلكترونية المرتبطة بحاسوب راسبيري باي، كما يساعدك مقال الحوسبة الفيزيائية: برمجة راسبيري باي مع لوحة سنس هات Sense HAT على فهم طريقة ربط الحساسات التي تستشعر البيئة المحيطة مع حاسوب راسبيري باي وطريقة برمجتها والاستفادة من قراءاتها. ستجد أيضًا في أكاديمية حسوب مجموعة من المقالات التي تساعدك على بناء ألعاب إلكترونية باستخدام سكراتش وراسبيري باي مثل مقال تصميم لعبة السلك والحلقة باستخدام برنامج سكراتش وحاسوب راسبيري باي. برمجة الروبوتات تقدّم سكراتش مجموعة من البرمجيات الإضافية التي تُدعى "موسّعات Extensions" وتهدف إلى زيادة وظائفية اللغة في مجال برمجة التطبيقات والتحكم بالعتاد الصلب. تُعد هذه الموسّعات مفيدة جدًا في التحكم ببعض الألعاب الروبوتية والروبوتات التعليمية مثل Lego Education WeDo لتلقي إشارات الحساسات في روبوت Lego WeDo و Text To Speech لجعل الشخصية تتكلم. خاتمة استفاد مصممو لغة سكراتش من أسلوب البرمجة المرئية في تطوير لغة تفاعلية سهلة التعلم وواضحة الأغراض في نفس الوقت، كما تؤمن معظم التقنيات البرمجية التي تتمتع بها أي لغة عالية المستوى. وقد وجدت هذه اللغة استخدامات كثيرة في نطاق برمجة النظم المدمجة بعيدًا عن الغاية الأساسية من تصميمها وهي تعليم اليافعين أصول البرمجة. يدل هذا الأمر على الإمكانات التي تتمتع بها هذه اللغة على الرغم من محدوديتها، ولا أحد يدري ما ستؤول إليه الأحداث في المستقبل، لهذا من الجيد أن يطلع عليها من يرغب في تعلم البرمجة، وسيجد أنها تعزز الكثير من المفاهيم البرمجية التي يصادفها لاحقًا إن قرر تعلم أي لغة برمجة نصية. اقرأ أيضًا برمجة خوارزميتك الأولى عبر سكراتش تنفيذ مشروع حافلة مدرسة متحركة باستخدام برنامج سكراتش تعلم أساسيات البرمجة

لقد تعاملنا حتى اللحظة مع خصائص CSS المتعلقة بالأبعاد الفيزيائية لشاشة العرض، مثل الحواف التي أنشأناها على جوانب صندوق العنصر، وقد تلاحظ أن هذه الأبعاد الفيزيائية مرتبطة أو مخصصة للتعامل مع المحتوى الذي يُعرض أفقيًا فقط، كما أن الويب يميل إلى دعم اللغات التي تكتب من اليسار إلى اليمين مثل الإنجليزية أكثر من اللغات المكتوبة من اليمين إلى اليسار مثل العربية. لكن شهدت لغة CSS تطورًا في السنوات الأخيرة لدعم الاتجاهات المختلفة للكتابة على نحو أفضل بما في ذلك المحتوى المكتوب من اليمين إلى اليسار، أو من الأعلى إلى الأسفل كما في اللغة اليابانية. تُدعى اتجاهات كتابة المحتوى "أوضاع الكتابة writing modes"، وسيكون تعلمها مفيدًا لك عندما تتقدم في عملك وتبدأ التعامل مع تخطيطات الصفحات، لهذا سنتعرف عليها في هذا المقال. ننصحك قبل المتابعة في قراءة هذه المقال أن: تطلع على أساسيات استخدام الحاسوب وتصفح الويب. تحضر بيئة عمل بسيطة كما تحدثنا مسبقًا في المقال تثبيت البرمجيات الأساسية، وتتفهم طريقة إنشاء وإدارة الملفات كما شرحناها في مقال التعامل مع الملفات. تطلع على أساسيات HTML كما شرحناها في سلسلة المقالات مدخل إلى HTML. تتفهم أساسيات CSS كما شرحناها في سلسلة المقالات خطواتك الأولى في CSS. ما هي أوضاع الكتابة؟ يشير مصطلح "أوضاع الكتابة" في CSS إلى اتجاه انسياب النص أفقيًا أو عموديًا، وتُستخدم الخاصية writing-mode في الانتقال بين هذين الوضعين، وليس ضروريًا استخدام لغة تكتب عموديًا مثلًا حتى تجعل انسياب النص عموديًا، فقد تغيّر وضع الكتابة لأجزاء من التخطيط الخاص بك لأغراض إبداعية. لاحظ كيف جعلنا العنوان في المثال التالي ينساب عموديًا من خلال استخدام القيمة vertical-rl للخاصية writing-mode. يُشاهد هذا الأسلوب من الكتابة في التصميمات الجغرافية خاصةً، كما أنها طريقة جيدة لإضافة مظهر جميل للصفحة التي تصممها. تأخذ الخاصية writing-mode إحدى القيم الثلاث التالية: horizontal-tb: تنساب كتلة العنصر من الأعلى للأسفل وينساب النص أفقيًا. vertical-rl: تنساب كتلة العنصر من اليمين إلى اليسار وينساب النص عموديًا. vertical-lr: تنساب كتلة العنصر من اليسار إلى اليمين وينساب النص عموديًا. لهذا لا بد أن تلاحظ أن خاصية وضع الكتابة writing-mode تحدد في الواقع اتجاه العنصر على مستوى كتلة العنصر من الأعلى للأسفل أو من اليمين إلى اليسار والعكس ومن ثم تملي عليه اتجاه انسياب النص. أوضاع الكتابة والعناصر السطرية والكتلية ناقشنا في مقال "نموذج الصندوق في تنسيقات CSS" مفهوم العناصر السطرية والعناصر الكتلية، إذ تُعرض بعض العناصر على شكل كتلة تحتل كامل السطر وأخرى سطرية يمكن أن تقع مع عناصر سطرية أخرى على السطر ذاته. ترتبط فكرة الكتلية والسطرية ارتباطًا وثيقًا بأوضاع الكتابة في المستند وليس بشاشة العرض الفيزيائية؛ فلا تنساب العناصر الكتلية إلا من الأعلى إلى الأسفل إذا كنت تستخدم وضع كتابة أفقي كما في اللغة الإنجليزية. يوضح المثال التالي الفكرة السابقة. لدينا في هذا المثال صندوقين يحتوي كل منهما على عنوان وفقرة؛ يستخدم الأول النمط writing-mode: horizontal-tb الذي يجعل انسياب العنصر من الأعلى للأسفل واتجاه الكتابة أفقي، أما الآخر فيستخدم النمط writing-mode: vertical-rl الذي يجعل العنصر ينساب من اليمين إلى اليسار واتجاه الكتابة عمودي: عندما نبدّل وضع الكتابة سنغيّر أي اتجاه سيكون سطريًا وأي اتجاه سيكون كتليًا، إذ سيكون اتجاه الكتلة من الأعلى للأسفل عندما نختار الوضع horizontal-tb بينما سيكون اتجاه الكتلة من اليمين إلى اليسار إذا اخترنا الوضع vertical-rl، لهذا يكون اتجاه الكتلة block dimension دائمًا كما يحدده وضع الكتابة المستخدم، ويكون اتجاه السطر inline dimension هو اتجاه انسياب الكتابة. يوضح الشكل التالي بُعدي الكتلة والسطر في وضع الكتابة الأفقي: يوضح الشكل التالي بُعدي الكتلة والسطر في وضع الكتابة العمودي: بمجرد أن تبدأ العمل مع تخطيطات CSS وخاصة الطرق الجديدة في التخطيط ستلاحظ أهمية فكرة اتجاه الكتلة واتجاه السطر. اتجاه النص ينبغي الانتباه إلى اتجاه النص إضافةً إلى وضع الكتابة؛ فكما أشرنا في الفقرات السابقة، تُكتب بعض اللغات مثل العربية أفقيًا من اليمين إلى اليسار ولن يكون أمرًا جيدًا من الناحية الجمالية أن تكتب النص من الأعلى إلى الأسفل بهذا الأسلوب فهنالك طرق أخرى، لكن من المهم أن تدرك أن هذا جزء من طبيعة عمل CSS، وأن الويب مخصص لعرض جميع اللغات أيًا كان اتجاه كتابتها. نظرًا لحقيقة أن وضع الكتابة واتجاه النص قد يتغيران، لا تشير تخطيطات CSS الحديثة إلى اليمين أو اليسار أو الأعلى أو الأسفل، بل تشير إلى بداية start ونهاية end على قدم المساواة مع فكرة السطر والكتلة. لا تشغل نفسك بهذا الموضوع حاليًا، لكن تذكر هذه الفكرة جيدًا عندما تبدأ العمل مع التخطيطات فستجدها مفيدة جدًا في فهمك لعمل CSS. الخاصيات المنطقية وقيمها الغاية من الحديث عن أوضاع الكتابة واتجاهاتها في هذه المرحلة من تعلم CSS هي أننا تعرفنا على الكثير من الخاصيات المرتبطة بالأبعاد الفيزيائية للشاشة والتي يبدو استخدامها أكثر منطقية عند العمل مع نمط الكتابة الأفقي. لنلق نظرةً على مثال الصندوقين السابق الذي يأخذ أحدهما الخاصية horizontal-tb ويأخذ الآخر الخاصية vertical-rl. سنحاول إعطاء كلا الصندوقين حيّزًا من خلال الخاصية width. لاحظ كيف يتغير حيّز الصندوق الذي يضم كتابة بالاتجاه العمودي مما يؤدي إلى خروج الكتابة خارج الصندوق إذا كان الحيّز أقل مما يجب. ما نريد أن نصل إليه حقيقةً في هذا المثال هو تبديل الارتفاع بالحيّز وفقًا لوضع الكتابة، إذ نريد أن يتوسع الصندوق في نمط الكتابة العمودي وفقط اتجاه الكتلة كما هو الحال في وضع الكتابة الأفقي. لتسهيل الأمر، طوّرت CSS مؤخرًا مجموعة من الخاصيات المترابطة تستبدل بصورةٍ أساسية الخاصيات الفيزيائية، مثل width و height بأخرى منطقية logical أو متعلقة بالانسياب flow relative. ترتبط الخاصية inline-size بالخاصية الفيزيائية width في وضع الكتابة الأفقي (تشير إلى القياس وفق اتجاه السطر)، كما ترتبط الخاصية block-size بالخاصية height وتشير إلى القياس وفق اتجاه الكتلة. يعرض المثال التالي كيف استبدلنا الخاصية width بالخاصية inline-size وكيفية تأثيرها: الخاصيات المنطقية المرتبطة بالهوامش والحواف والحشوات تعرفنا في المقال السابق عن نموذج الصندوق في تنسيقات CSS وعلى تنسيق الحواف، وقد رأينا الكثير من الأمثلة عن الخاصيات الفيزيائية للهوامش والحواف، مثل margin-top و padding-left و border-bottom. كما تُربط الخاصيتان اللتان تحددان الحيّز والارتفاع بخواص منطقية، تُربط الخاصيات السابقة بخاصيات منطقية أيضًا. ترتبط الخاصية margin-top بالخاصية margin-block-start التي تشير دائمًا إلى الهامش عند بداية الكتلة، كما ترتبط الخاصية padding-left بالخاصية padding-inline-start التي تشير إلى بداية الاتجاه السطري، أي أن كلاهما يشيران إلى بداية النص في وضع الكتابة. ترتبط الخاصية border-bottom أيضًا بالخاصية border-block-end التي تدل على الحافة التي تقع في نهاية اتجاه الكتلة. يقارن المثال التالي بين الخاصيات الفيزيائية والمنطقية، فلو غيرت وضع الكتابة للصندوقين في الأسفل بتغيير الخاصية writing-mode ضمن المحدد box. إلى القيمة vertical-rl، فستلاحظ كيف تبقى الخاصيات الفيزيائية مرتبطةً بالاتجاه الفيزيائي، بينما تتغير الخاصيات المنطقية مع تغير وضع الكتابة. هل تستطيع أن تجعل الحافة السفلية تحت المحتوى المكتوب في كلا وضعي الكتابة؟ ستجد عددًا كبيرًا من الخاصيات المنطقية التي تستهدف الخاصيات المفردة للحواف، ويمكنك الاطلاع عليها عبر صفحة شبكة مطوري موزيللا الخاصة بالخاصيات والقيم المنطقية. القيم المنطقية تعرّفنا حتى الآن على أسماء الخاصيات المنطقية، لكن وكما تأخذ الخاصيات الفيزيائية قيمًا فيزيائية، مثل top و right و bottom و left، ترتبط هذه القيم بقيم منطقية، مثل block-start و inline-end و block-end و inline-start. حاول أن تغير وضع الكتابة في المثال التالي إلى vertical-rl لترى ما سيحدث للصورة. غيّر أيضًا inline-start إلى inline-end لكي تغيّر انسياب المحتوى. استخدمنا أيضًا في المثال السابق القيم المنطقية للهوامش للتأكد من بقائها صحيحة مهما تغير وضع الكتابة. ملاحظة: يدعم حاليًا متصفح فايرفوكس فقط القيم النسبية للخاصية float، فإذا كنت تستخدم متصفح كروم أو مايكروسوفت إيدج فقد لا تلحظ أية تغييرات. هل ينبغي استخدام الخاصيات الفيزيائية أم المنطقية؟ ظهرت الخاصيات والقيم المنطقية بعد الخاصيات الفيزيائية وبالتالي لم تدعمها المتصفحات إلّا مؤخرًا، ويمكن دائمًا البحث عبر الإنترنت عن دعم المتصفح الذي تعمل عليه لقيمة أو خاصية ما قبل أن تستخدمها، وإن لم تكن تستخدم أوضاع كتابة مختلفة، فقد تفضّل استخدام الخاصيات الفيزيائية. على أية حال سيتحول الكثيرون بلا شك إلى الخاصيات المنطقية كونها ستبدو أكثر وضوحًا عندما يبدأون التعامل مع أساليب تخطيط الصفحات، مثل flexbox و grid. خلاصة تغدو الأفكار التي ناقشناها في هذا المقال غايةً في الأهمية عند استخدام CSS، ففهم الاتجاه السطري والاتجاه الكتلي وكيفية انسياب النصوص مع تغير أوضاع الكتابة أمر أساسي ومفيدٌ جدًا مع تقدمك في رحلة التعلم هذه، إذ ستساعدك تلك الأفكار في فهم CSS حتى لو لم تستخدم سوى الوضع الأفقي للكتابة. ترجمة -وبتصرف- للمقال handling different text directions. اقرأ أيضًا المقال السابق: تنسيق الخلفيات وحواف الصفحات باستخدام CSS العناصر العائمة Floats في CSS تنسيق نصوص صفحات الويب باستخدام CSS main p iframe { max-width: 700px !important; }

يساعدك هذا المقال على تقدير إذا ما كان محرّك الألعاب جودو Godot ملائمًا لاحتياجاتك، إذ سنقدم لك بعض الميزات العامة للمحرك كي نعرض ما يمكنك إنجازه، واﻹجابة عن أسئلة مثل " مالذي عليّ معرفته كي أبدأ العمل؟". لن تكون هذه المقدمة شاملة، لكننا سنقدّم الكثير من المفاهيم العامة في سلسلة المقالات المتتالية. ما هو محرك الألعاب جودو Godot جودو Godot هو محرك ألعاب ثنائية وثلاثية أبعاد عام اﻷغراض يدعم مختلف أنواع المشاريع، يساعدك في بناء اﻷلعاب والتطبيقات التي يمكن نشرها على الحواسب أو أجهزة الهاتف المحمول وعلى الويب أيضًا. يمكنك أيضًا بناء ألعاب مخصصة لمنصات الألعاب console games لكن ذلك يتطلب مهارات برمجية عالية أو الاستعانة بمطوّر ليساعدك على ذلك. ملاحظة: لا يمكن أن يقدّم لك مطورو جودو وسيلة مفتوحة المصدر لنقل اللعبة إلى منصات اﻷلعاب نظرًا لشروط الترخيص التي يضعها صانعو تلك المنصات. وبصرف النظر عن المحرّك الذي تستخدمه، سيكون إصدار نسخة من اللعبة على منصة أمرًا مجهدًا. ما الذي يمكن لمحرك جودو فعله؟ طوّر محرّك جودو أصلًا في المنزل من قبل استدوديو ألعاب أرجنتيني، وقد بدأ العمل عليه عام 2001 ثم حُسِّن كثيرًا منذ ذلك الحين وحتى إطلاق النسخة مفتوحة المصدر منه عام 2014. من اﻷلعاب التي طوّرت باستخدام جودو نذكر "Ex-Zodiac" و "Helms of Fury": ومن التطبيقات التي تعتمد عليه نجد برنامج الرسم النقطي مفتوح المصدر "Pixelorama" وكذلك "voxel RPG creator": كيف يعمل محرك جودو وكيف يبدو؟ يأتي المحرّك مع محرر ألعاب كامل الميزات وأدوات أصلية مدمجة معه لتقدم حلولًا لمعظم المهام الشائعة.من هذه اﻷدوات محرر شيفرة ومحرر رسوم متحركة ومحرر خرائط tilemap editor ومحرر المعالج اللوني shader ومنقح debugger ومحلل أداء Profiler وغيرها. يجاهد الفريق لتقديم محرر ألعاب غني بالميزات مع تجربة مستخدم تتطور باستمرار، وطالما أن هناك دائمًا ما يمكن تحسينه، سيستمر تطوير واجهة المحرّك. بإمكانك أيضًا العمل على برمجيات خارجية أخرى إن أردت، إذ يقدّم المحرك دعمًا رسميًا للمشاهد ثلاثية اﻷبعاد المصممة على بلندر Blender والإضافات الخاصة ببرنامج فيجوال ستديو كود و إيماكس Emacs لدعم البرمجة باستخدام GDScript و #C. كما يدعم المحرّك أيضًا فيجيوال ستوديو ولغة #C على ويندوز. لغات البرمجة في جودو بإمكانك استخدام لغة GDScript وهي لغة برمجة عالية التكامل خاصة بمحرك جودو وتتمتع بصياغة سهلة، أو يمكن استخدام لغة #C الشائعة الاستخدام في عالم الألعاب. هاتان اللغتان هما اللغتان الرئيسيتان المدعومتان من قبل محرك جودو. لكن باستخدام اﻹضافات عبر تقنية GDExtension، ستتمكن من كتابة ألعاب أو خوارزميات باستخدام لغة C أو لغة ++C دون إعادة تصريف المحرّك. وتستطيع استخدام هذه التقنية أيضًا في دمج مكتبات يؤمنها طرف آخر وغيرها من أدوات تطوير البرمجيات SDK مع المحرّك. كما يمكنك إضافة وحدات برمجية جاهزة وميزات إلى المحرّك وهي مجانية ومفتوحة المصدر. ما الذي علي معرفته لاستخدام محرك جودو؟ يُعد محرّك جودو محركًا مبنيًا على الكثير من الميزات، ومع وجود اﻵلاف منها ستجد أن هنالك الكثير لتتعلمه. وللاستفادة من كامل إمكانياته، لا بد أن تمتلك خلفية جيدة في البرمجة. ومع أننا نحاول جعل المحرّك سهل الاستخدام، سيفيدك تعلّم التفكير مثل المبرمجين. ويعتمد المحرّك على البرمجة كائنية التوجه، لهذا ستساعدك معرفة بعض المفاهيم مثل الأصناف والكائنات في كتابة شيفرة أكثر فعالية. إما إذا كنت جديدًا في عالم البرمجة، ننصحك بالاطلاع على دورات تعلم البرمجة التي تقدمها أكاديمية حسوب والتي تأخذك خطوة بخطوة إلى طريق احتراف البرمجة. المفاهيم الرئيسية لمحرك اﻷلعاب جودو يتمحور عمل أي محرك ألعاب حول مجموعة من المفاهيم اﻷساسية التي تٌستخدم لبناء التطبيقات. وفي جودو، تُمثّل اللعبة على شكل شجرة tree مكوّنة من عقد nodes تتجمع مع بعضها لتشكل مشهدًا scene، وترتبط هذه العقد ببعضها كي تكون قادر على التخاطب فيما بينها باستخدام إشارات signals. سنلقي نظرة سريعة في هذا المقال على المفاهيم اﻷربعة السابقة ونتعلم طبيعة عمل المحرك. المَشاهد scenes تُجزّأ اللعبة في جودو إلى مشاهد يمكن استخدامها بشكل متكرر، وقد يكون المشهد شخصية أو سلاحًا أو قائمة ضمن واجهة المستخدم أو بيت أو مستوى كامل للعبة وعمومًا أي شيء قد تفكّر به. تتمتع مشاهد جودو بالمرونة، إذ تؤدي دور الكائنات الجاهزة prefab والمشاهد في محركات ألعاب أخرى. بإمكانك أيضًا إنشاء مشاهد متداخلة، كأن تضع شخصية ضمن مرحلة عن طريق سحب وافلات مشهد ضمن آخر ليكون ابنًا له. العقد nodes يتكون المشهد من عقدة أو أكثر وتمثّل هذه العقد أصغر الكتل البنائية التي ترتبها في الشجرة. إليك مثالًا عن عقدة لشخصية في لعبة: تتكون الشخصية من عقدة نوعها CharacterBody2D وتُدعى "Player" وضمنها ثلاث عقد أبناء هي Camera2D و Sprite2D و CollisionShape2D. ملاحظة: تنتهي أسماء العقد السابقة باللاحقة "2D" لأن المشهد ثنائي البعد. وتنتهي أسماء العقد في المشاهد ثلاثة اﻷلعاب باللاحقة "3D". وانتبه إلى أن العقد من النوع "الفراغي Spatial" لم تُعد تُسمّى "Node3D" ابتداءًا من الإصدار 4 لجودو. لاحظ كيف تبدو العقد والمشاهد متطابقة في المحرر، فعندما تُخزّن شجرة عقد على أنها مشهد، سيعرض المحرر عقدة واحدة ويخفي بنيتها الداخلية ضمنه. يقدّم جودو مكتبة قابلة للتوسّعة تضم أنواعًا مختلفة من العقد التي يمكن دمجها أو توسعتها لبناء عقد أقوى. فكل ما ستبنيه وتتعامل معه سواء في التصاميم ثنائية أو ثلاثية اﻷبعاد هي العقد. شجرة المشهد scene tree تتجمع كل مشاهد اللعبة في شجرة من المشاهد أو (شجرة مشهد scene tree)، وشجرة المشاهد هي شجرة من العقد لكن من اﻷسهل تخيّل اللعبة كمشاهد لأنها تمثّل الشخصيات واﻷسلحة واﻷبواب والواجهات بطريقة أوضح. اﻹشارات signals ترسل العقد إشارات عندما تقع بعض الأحداث، وتساعدك هذه الميزة في تأسيس اتصالات بين العقد دون أن تفعل ذلك يدويًا ضمن الشيفرة، مما يمنحك مرونة في هيكلة المشاهد. ملاحظة: تُعد اﻹشارات نسخة جودو من من نمط "المراقب observer" في محركات أخرى. تُرسل اﻷزرار إشارات عند النقر عليها مثلًا، وبالتالي يمكنك الاتصال بهذه اﻹشارة لتشغيل شيفرة محددة كاستجابة لحدث معين، كبدء اللعبة أو عرض قائمة. وقد تخبرك إشارات أخرى مدمجة عن تصادم كائنين أو عند دخول شخصية منطقة محددة وغيرها الكثير. وبإمكانك تعريف إشارات جديدة مخصصة للعبتك. خلاصة تعرفنا في هذا المقال على المفاهيم البنيوية اﻷريعة لمحرك اﻷلعاب جودو والعقد والمشاهد وشجرة المشاهد واﻹشارات وهي ما ستتعامل معه دائمًا. فالعقد هي الكتل البنائية اﻷصغر في اللعبة والتي تجمع بينها لتشكل مشهدًا ثم تجمع المشاهد لتشكل شجرة مشاهد. ثم تستخدم بعد ذلك اﻹشارات كي تتفاعل العقد مع اﻷحداث التي تقع في عقد أخرى أو فروع أخرى من شجرة المشاهد. قد تخطر في بالك اﻵن الكثير من اﻷسئلة، لهذا نطلب منك التروي ومتابعة ما ستعرضه في مقالات أخرى لتحصل على الكثير من اﻷجوبة. ترجمة -وبتصرف- للمقال Introduction to Godot والمقال Overview of Godot's key concepts. اقرأ أيضًا أشهر أنواع الألعاب الإلكترونية مطور الألعاب: من هو وما هي مهامه أشهر لغات برمجة الألعاب