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

نلقي نظرةً في هذا المقال على الطريقة التي تُنسّق فيها بعض العناصر الخاصة باستخدام لغة 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

سكراتش 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 لجعل الشخصية تتكلم. خاتمة استفاد مصممو لغة سكراتش من أسلوب البرمجة المرئية في تطوير لغة تفاعلية سهلة التعلم وواضحة الأغراض في نفس الوقت، كما تؤمن معظم التقنيات البرمجية التي تتمتع بها أي لغة عالية المستوى. وقد وجدت هذه اللغة استخدامات كثيرة في نطاق برمجة النظم المدمجة بعيدًا عن الغاية الأساسية من تصميمها وهي تعليم اليافعين أصول البرمجة. يدل هذا الأمر على الإمكانات التي تتمتع بها هذه اللغة على الرغم من محدوديتها، ولا أحد يدري ما ستؤول إليه الأحداث في المستقبل، لهذا من الجيد أن يطلع عليها من يرغب في تعلم البرمجة، وسيجد أنها تعزز الكثير من المفاهيم البرمجية التي يصادفها لاحقًا إن قرر تعلم أي لغة برمجة نصية. اقرأ أيضًا برمجة خوارزميتك الأولى عبر سكراتش تنفيذ مشروع حافلة مدرسة متحركة باستخدام برنامج سكراتش تعلم أساسيات البرمجة

تصادف المهتمين بتعلم قواعد البيانات العديد من المصطلحات التي تسبب ارباكًا للقادمين الجدد سواء كانت غايته تعلم استثمارها أو تصميميها أو برمجة تطبيقات ومواقع ويب ترتبط بها. ومن أكثر هذه المصطلحات إشكالًا هو مصطلح "محركات قواعد البيانات 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 خاتمة حاولنا في هذا المقال التمييز ما بين محركات قواعد البيانات وقواعد البيانات من الناحية الوظيفية ورأينا أن المحركات هي الشيفرة البنيوية التي تمكّن قاعدة البيانات من تنفيذ عملياتها، ولهذا الأمر أهميته الخاصة لأن محاولات بناء وتطوير قواعد بيانات جديدة مفتوحة المصدر بالاستفادة من شيفرات محركات قواعد بيانات أخرى قد بدأت بالنضوج وبالتالي لا بد من توضيح هذا المفهوم لاختيار قاعدة البيانات الأنسب للتطبيقات حاليًا ومستقبلًا. اقرأ أيضًا تعرف على مكونات قاعدة البيانات أنواع قواعد البيانات وأهم مميزاتها واستخداماتها مدخل إلى تصميم قواعد البيانات

لقد تعاملنا حتى اللحظة مع خصائص 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 من توثيق جودو الرسمي. اقرأ أيضًا أشهر أنواع الألعاب الإلكترونية مطور الألعاب: من هو وما هي مهامه أشهر لغات برمجة الألعاب

سنلقي نظرةً في هذا المقال على بعض الحيل الذكية التي يمكنك اتباعها لتنسيق خلفية صفحة ويب وحوافها، مثل إضافة ألوان متدرجة إلى الخلفية أو إضافة الصور إليها وإظهار زوايا دائرية وغيرها من الأفكار التي يتساءل عن طريقة تنفيذها الكثيرون. ننصحك قبل المتابعة في قراءة هذه المقال أن: تطلع على أساسيات استخدام الحاسوب وتصفح الويب. تحضّر بيئة عمل بسيطة كما تحدثنا مسبقًا في المقال تثبيت البرمجيات الأساسية، وتتفهم طريقة إنشاء وإدارة الملفات كما شرحناها في مقال التعامل مع الملفات. تطلع على أساسيات HTML كما شرحناها في سلسلة المقالات مدخل إلى HTML. تتفهم أساسيات CSS كما شرحناها في سلسلة المقالات خطواتك الأولى في CSS. تنسيق الخلفيات باستخدام CSS تُعد الخاصية background خاصيةً مختصرة تضبط عدة خاصيات تتعلق بتنسيق الخلفية سنراها تباعًا. قد تبدو هذه الخاصية معقدةً وصعبة الفهم عندما تصادفها في بعض ملفات التنسيق، وذلك لكثرة القيم التي تضبطها في الوقت ذاته. إليك مثالًا: .box { background: linear-gradient( 105deg, rgba(255, 255, 255, 0.2) 39%, rgba(51, 56, 57, 1) 96% ) center center / 400px 200px no-repeat, url(big-star.png) center no-repeat, rebeccapurple; } سنشرح لاحقًا كيف تعمل هذه الخاصية المختصرة، لكن دعونا نلق نظرةً على ما يمكن أن نفعله بخلفيات الصفحات باستخدام CSS من خلال الاطلاع على الخاصيات المفردة للخلفيات كلًا على حدى. تنسيق ألوان الخلفية تُحدد الخاصية background-color لون خلفية الصفحة أو خلفية أي عنصر من عناصرها وتقبل أي قيمة لونية ممكنة، وتظهر الخلفية الملونة تحت محتوى العنصر وتمتد تحت المحتوى وحشوة صندوق العنصر. نستخدم في المثال التالي مجموعةً من القيم اللونية المختلفة لإضافة خلفية ملونة إلى صندوق (عنصر <div>) وعنصر ترويسة <h2> وعنصر <span>: p iframe { max-width: 700px !important; } اختيار صورة للخلفية تُستخدم الخاصية background-image في عرض صورة على خلفية العنصر. يعرض المثال التالي صندوقين: يضم الأول صورةً أكبر من أبعاد الصندوق وهي (balloons.jpg) أما الثاني فيعرض صورة أصغر من أبعاد الصندوق (star.png). ما تفعله الخاصية background-image هنا أمر مهم جدًا، فلا تعرض في الصندوق الأول إلا قسمًا من الصورة أي لا تُصغّر الصورة تلقائيًا لتناسب أبعاد الصندوق، بينما تكرر الصورة ذات الأبعاد الأصغر تلقائيًا لتملأ مساحة الصندوق. ملاحظة: إذا خصصت لونًا لخلفية العنصر إضافة إلى تخصيص صورة فستُعرض الصورة فوق اللون. جرّب ذلك بإضافة الخاصية ;background-color: black إلى المحدد b. في المثال السابق ولاحظ ما سيحدث. التحكم بطريقة تكرار الخلفية تُستخدم الخاصية background-repeat للتحكم بطريقة تكرار الصور في الخلفية وتأخذ إحدى القيم التالية: no-repeat: تمنع تكرار الصورة في الخلفية حتى لو كانت أبعادها أصغر من أبعاد العنصر. repeat-x: تكرار الصورة أفقيًا. repeat-y: تكرار الصورة عموديًا. repeat: وهي القيمة الافتراضية التي تكرر الصورة على كامل الخلفية. جرّب تعديل الشيفرة التفاعلية التالية باستبدال القيمة no-repeat بالقيمة repeat-x ثم repeat-y وراقب ماذا يحدث. ضبط أبعاد صورة الخلفية لقد استخدمنا سابقًا الصورة "balloons.jpg" خلفيةً للصندوق ولها أبعاد أكبر من أبعاده، لهذا اقتُصّت الصورة وظهر جزءٌ منها فقط بما يلائم أبعاد الصندوق. يمكننا حل هذه المشكلة باستخدام الخاصية background-size التي تقبل قيمًا بنسبة مئوية من أبعاد الصورة الأصلية أو أبعادًا جديدة (طول وعرض) لتغيير أبعاد الصورة بما يلائم أبعاد الصندوق، كما يمكنك استخدام القيم التالية: cover: سيعمل المتصفح على جعل الصورة كبيرة بما يكفي لتغطي كامل صندوق العنصر دون الإخلال بنسبة الطول إلى العرض، لكن قد تخرج بعض أجزاء الصورة خارج الصندوق. contain: سيعمل المتصفح على تغيير أبعاد الصورة لتلائم أبعاد الصندوق تمامًا، لكن قد تظهر بعض الفراغات على أطراف الصندوق إذا كانت نسبة الطول إلى العرض في الصورة مختلفةً عن هذه النسبة في الصندوق. غيّرنا في المثال التالي أبعاد الصورة حتى تظهر كاملةً ضمن الصندوق background-size: 100px 10em، لكن لاحظ التشوه الذي حصل. حاول أن تستخدم المحرر التفاعلي لتغيير قيمة الخاصية background-size إلى cover ثم contain ولاحظ ما يحدث. حاول أيضًا تغيير قيمة الخاصية background-repeat ماذا ستجد؟ ضبط موضع صورة الخلفية ضمن صندوق العنصر تُستخدم الخاصية background-position لضبط موقع ظهور الصورة على خلفية الصندوق من خلال تحديد نظام إحداثيات تأخذ فيه زاوية الصندوق العليا اليسارية القيمة (0,0) ويمثل الإحداثي الأول x الإحداثي الأفقي والثاني y الإحداثي العمودي. تأخذ الخاصية background-position القيمة الافتراضية (0,0)، وقد تأخذ أية قيمة عددية لتدل على الموقع الأفقي والعمودي لزاوية الصورة بالنسبة لزاوية الصندوق مثل ;20px 10px. يمكن أيضًا استخدام قيم مثل top و right لضبط حد الصورة اليساري أو اليميني على الحد اليساري أو اليميني للصندوق وهنالك أيضًا center و bottom و left. إليك مثالًا عن استخدام القيم المفتاحية: .box { background-image: url(star.png); background-repeat: no-repeat; background-position: top center; } وهذا مثال آخر عن استخدام القيم العددية والنسب المئوية للإحداثيات: .box { background-image: url(star.png); background-repeat: no-repeat; background-position: 20px 10%; } كما يمكنك الخلط بين القيم المفتاحية مع الإحداثيات أو النسب المئوية على أن تدل القيمة الأولى على الإزاحة الأفقية والثانية على الإزاحة العمودية: .box { background-image: url(star.png); background-repeat: no-repeat; background-position: 20px top; } يمكنك أيضًا استخدام صياغة أخرى لخاصية الموضع تضم أربع قيم كي تشير إلى مقدار البعد عن جوانب محددة من الصندوق. حددنا موقع الصورة في المثال التالي لتبتعد مقدار 20px عن أعلى الصندوق ومقدار 10px عن يمينه: .box { background-image: url(star.png); background-repeat: no-repeat; background-position: top 20px right 10px; } جرِّب تغيير موقع النجمة في محرر الشيفرة التفاعلي التالي: ملاحظة: تُعد الخاصية background-position خاصيةً مختصرةً للخاصيتين background-position-x و background-position-y اللتين تتيحان ضبط الموقعان الأفقي والعمودي لصورة الخلفية كلًا على حدى. خلفيات ذات ألوان متدرجة تُعامل الخلفيات اللونية المتدرجة Gradient backgrounds مثل صور وتُضبط باستخدام الخاصية background-image، ويمكنك الاطلاع على الأنواع المختلفة والخلفيات المتدرجة الألوان من خلال موسوعة حسوب. ستجد على شبكة الويب الكثير من الأدوات التي توّلد خلفيات متدرجة الألوان باستخدام CSS وعندها يمكنك نسخ شيفرة هذه الخلفيات واستخدامها. جرّب بعض الخلفيات المتدرجة الألوان عبر محرر الشيفرة التفاعلي التالي، ولاحظ كيف استخدمنا التدرج الخطي linear gradient في الصندوق الأول والتدرج الشعاعي (أو القطري) radial gradient في الثاني مع خلفية مكررة: خلفيات ذات صور متعددة يمكنك وضع عدة صور في خلفية العنصر وذلك بتحديد عناوين الصور المطلوبة يتخللها فواصل ,، لكن قد ينتهي بك المطاف في هذه الحالة بصور تتراكب فوق بعضها، إذ ستوضع آخر صورة وردت في تسلل الصورة في الأسفل وأول الصور التي ذُكرت في الأعلى، كما يمكن الخلط بين الصور والخلفيات ذات الألوان المتدرجة بكل سهولة. تستطيع أيضًا ضبط بقية خاصيات الخلفية *-background لكل صورة بوضع فواصل بين القيمة المناسبة لكل صورة. إليك مثالًا: background-image: url(image1.png), url(image2.png), url(image3.png), url(image4.png); background-repeat: no-repeat, repeat-x, repeat; background-position: 10px 20px, top right; تتوافق كل قيمة للخاصيات المختلفة مع القيمة المقابلة في الخاصيات الأخرى، إذ ستأخذ الصورة "image1" قيمة خاصية التكرار background-repeat المقابلة لها وهي no-repeat. ما الذي سيحدث إذا أخذت الخاصيات المختلفة عددًا مختلفًا من القيم؟ ما يحدث في الواقع هو تكرار القيم الأقل عددًا في أي خاصية. لو نظرنا إلى المثال السابق لوجدنا أربعة صور للخلفية لكن فقط قيمتين لخاصية الموقع background-position. تُكرر في هذه الحالة قيم خاصيات الموضع أي ستأخذ الصورتين الأولى والثانية الموضعين الأول والثاني، ثم سيتكرر الأمر لتأخذ الصورتين الثالثة والرابعة الموضعين الأول والثاني من جديد. جرّب استخدام عدة صور للخلفية من خلال المحرر التفاعلي التالي، وحاول أن تغير بقية الخاصيات لتتعرف جيدًا على طريقة عملها: الترابط بين محتوى العنصر وخلفيته تُستخدم خاصية الترابط background-attachment لتحديد سلوك الخلفية عند تمرير scroll محتوى العنصر للأعلى أو الأسفل. تأخذ هذه الخاصية القيم التالية: scroll: يفرض هذا الخيار على خلفية العنصر أن تتحرك عند تحريك الصفحة فقط وليس مع تحرك أو تمرير محتوى العنصر؛ أي أن للخلفية موقعًا ثابتًا بالنسبة للصفحة ككل وتتحرك فقط عند تغيّر هذا الموقع. fixed: يفرض هذا الخيار على خلفية العنصر أن تبقى في نفس مكانها على شاشة العرض سواء تحرك محتوى الصفحة أو تحرّك محتوى العنصر. local: تتحرك خلفية العنصر في هذه الحالة مع حركة العنصر أثناء تحريك محتوى الصفحة ككل. تؤثر هذه الخاصية على العنصر أو الصفحة عندما يكون هناك محتوًى قابلًا للتمرير. يمكنك الاطلاع على عمل هذه الخاصية والفرق بين القيم الثلاث التي تأخذها من خلال المثال التجريبي background-attachment.html الموجود على غيت هب GitHub. استخدام الخاصية المختصرة background أشرنا في بداية هذا المقال أن الخلفيات قد تُضبط باستخدام الخاصية المختصرة background التي تتيح لك ضبط جميع الخاصيات المتعلقة بخلفية العنصر دفعةً واحدة، لكن إذا قررت أن تستخدم عدة صور للخلفية فعليك تحديد جميع قيم الخصائص المتعلقة بالصورة الأولى ومن ثم وضع فاصلة , تليها الصورة الثانية وجميع قيم الخاصيات اللازمة وهكذا. لدينا في المثال التالي خلفية متدرجة الألوان ضُبط حجمها وموضعها، ثم صورة غير مكررة وقد َضُبط موضعها، ثم حُدد لون للخلفية. من أجل هكذا حالات، لا بد من اتباع بعض القواعد عند استخدام الخاصية المختصرة للخلفية: لا يمكن تحديد الخاصية إلا في نهاية القيم (بعد آخر فاصلة). لا بد من وضع قيمة الخاصية background-size بعد قيمة الخاصية background-position على أن يفصل بينهما المحرف / مثل center/80%. يمكنك الاطلاع على تفاصيل أكثر حول البنية العامة لهذه الخاصية المختصرة من خلال صفحة background ضمن موسوعة حسوب. اعتبارات شمولية الوصول عند ضبط خلفيات العناصر عندما تضع نصًا فوق صورة الخلفية أو فوق خلفية لونية، لا بد من الانتباه إلى التباين اللوني بين الخلفية والنص حتى يتمكن جميع الزائرين من قراءة النص، وإذا وضعت صورة في الخلفية ونصًا فوقها، فعليك ضبط الخاصية background-color على لون يجعل قراءة النص سهلًا في حال لم تُحمّل الصورة. لا يمكن لقارئ الصفحة الآلي تحليل صور الخلفية، لهذا لا بُد أن تكون هذه الصور للديكور فقط وألا تحتوي على معلومات مهمة، إذ لا بُد أن يكون المحتوى المهم جزءًا من صفحة HTML وليس في صور الخلفيات. حواف العناصر والصفحة عندما تحدثنا في مقال "نموذج الصندوق في تنسيقات CSS" عن نموذج الصندوق رأينا كيف تؤثر الحواف على أبعاد صندوق العنصر، وسنتابع في هذا المقال حديثنا عن كيفية استخدام الحواف بذكاء. نستخدم عندما نضيف حوافًا أو حدودًا إلى عنصر من خلال تنسيقات CSS خاصيةً مختصرة تضبط لون وسماكة ونمط الحواف في سطر واحد. يمكنك أيضًا ضبط خاصيات الحواف الأربعة للصندوق باستخدام الخاصية border: .box { border: 1px solid black; } كما يمكنك ضبط إحدى هذه الحواف على النحو التالي: .box { border-top: 1px solid black; } أما الخاصيات المفردة لضبط سماكة الحافة والنمط واللون فهي: .box { border-width: 1px; border-style: solid; border-color: black; } وإليك الخاصيات المفردة لضبط كل حافة على حدى: .box { border-top-width: 1px; border-top-style: solid; border-top-color: black; } ملاحظة: ترتبط الخواص top و right و bottom و left المتعلقة بالحواف منطقيًا بنمط الكتابة في المستند (يمين إلى يسار أو العكس) وهذا ما سنناقشه في موضع آخر. هنالك أنواع مختلفة من الأنماط التي يمكن أن يأخذها شكل الحافة، وهذا ما نعرضه في مثالنا المكتوب ضمن محرر الشيفرة التالي: الحواف الدائرية تُنسّق حواف الصندوق لتكون دائرية الشكل عن طريق الخاصية border-radius أو الخاصيات المطوّلة المتعلقة بها لضبط كل حافة على حدى. يمكن استخدام قيمتين عدديتين أو نسبتين مئويتين، الأولى تحدد نصف القطر الأفقي والثانية نصف القطر العمودي لاستدارة الحافة، لكن عادةً ما تمرر قيمة واحدة وتستخدم لنصفي القطرين. فلو أردنا مثلًا جعل استدارة جميع الحواف بنصف قطر 10px ستكون الشيفرة كما يلي: .box { border-radius: 10px; } وإذا أردنا جعل الزاوية العليا اليمينية تبدو مستديرة وفق نصف قطر أفقي قيمته 1em وآخر عمودي نصف قطره 10% نكتب: .box { border-top-right-radius: 1em 10%; } ضبطنا في مثالنا التالي جميع الحواف على نفس الاستدارة بدايةً، ثم غيرنا قيمة الاستدارة للحافة العليا اليمينية كي تبدو مميزة. حاول أن تستخدم محرر الشيفرة التفاعلي التالي في تعديل استدارة حواف الصندوق. ألقِ نظرةً على الخاصية border-radius للاطلاع على خيارات الصيغ المتاحة. الخلاصة تحدثنا في هذا المقال عن الكثير من الأفكار حول إضافة خلفية أو حواف لصندوق العنصر. حاول أن تطلع على الصفحات التي تشرح الخاصيات المختلفة لتجد معلومات أكثر عن الميزات التي ناقشناها. تساعدك صفحات الخاصيات ضمن قسم CSS في موسوعة حسوب على استكشاف أمثلة متنوعة عن استخدام الخاصيات وقيمها لتزيد من معلوماتك. ترجمة -وبتصرف- لمقال backgrounds and borders. اقرأ أيضًا المقال السابق: دليل مختصر إلى نموذج الصندوق Box Model في تنسيقات CSS التنسيقات الأساسية للعناصر في CSS كيفية تنسيق الصور باستخدام CSS

يحيط صندوق بكل شيء في تنسيقات CSS وفهم طبيعة هذه الصناديق هو المفتاح لإنشاء تخطيطات وإضافة تنسيقات باستخدام CSS، أو لمحاذاة العناصر مع بعضها. سنلقي نظرة معمقة في هذا المقال على نموذج الصندوق في CSS لكي تكون قادرًا على بناء تخطيطات أكثر تعقيدًا وفهم آلية عملها والمصطلحات المتعلقة بها. ننصحك قبل متابعة القراءة أن تكون على دراية بالمواضيع التالية: أساسيات عمل الحاسوب تثبيت البرمجيات الأساسية للانطلاق في تطوير الويب أساسيات التعامل مع الملفات فكرة عن أساسيات HTML فكرة عن أساسيات عمل لغة CSS الصناديق الكتلية والصناديق السطرية يمكن أن نقسم الصناديق في لغة CSS إلى نوعين عريضين هما الصناديق الكتلية block boxes والصناديق السطرية inline boxes. جاءت هاتين التسميتين من سلوك الصناديق مع طريقة انسياب عناصر الصفحة وعلاقتها مع بقية الصناديق. كما تتميز الصناديق بوجود نمط عرض خارجي outer display type وآخر داخلي inner display type. سنشرح بداية ما نقصده بالصناديق الكتلية والسطرية، ومن ثم سننتقل إلى مفهومي نمط العرض الداخلي والخارجي. إن كان لصندوق نمط العرض الخارجي block فسيسلك السلوك التالي: سينتهي الصندوق لتأتي العناصر التالية في سطر جديد. سيمتد الصندوق وفق الاتجاه السطري ليملأ المساحة المتاحة له في العنصر الذي يحتويه. ويعني ذلك في معظم الحالات، أنّ اتساع الصندوق سيماثل اتساع حاويته ويمتد ليملأ المساحة المخصصة له بأكلمها. تُحترم قيمتي الخاصيتين width وheight. تساهم الحاشية Padding والهامش margin والإطار border في دفع بقية العناصر بعيدًا عن الصندوق. تأخذ بعض عناصر HTML نمط العرض الخارجي block افتراضيًا مثل <h1> و<p>. بينما إن كان لصندوق نمط العرض الخارجي inline فسيسلك السلوك التالي: ستأتي العناصر التالية في السطر نفسه عندما ينتهي الصندوق. لن تُطبق الخاصيتين width وheight. تُطبق الحاشيات والهوامش والإطارات العمودية، لكنها لن تدفع غيرها من الصناديق السطرية إلى الابتعاد عن الصندوق. تُطبق الحاشيات والهوامش والإطارات الأفقية، وستدفع غيرها من الصناديق السطرية إلى الابتعاد عن الصندوق. تأخذ بعض عناصر HTML نمط العرض الخارجي inline افتراضيًا مثل <a> و<span> و<em> و<strong>. يُحدد نمط الصندوق من خلال الخاصية display التي تأخذ قيمًا مثل block وinline، وتتعلق بالقيم الخارجية. نوعا عرض الصناديق الداخلي والخارجي لا بدّ في هذه المرحلة من شرح نوعي عرض الصناديق، فلكل صندوق في CSS نوعين للعرض الأول داخلي والآخر خارجي سواء كان الصندوق كتليًا أو سطريًا. تمتلك الصناديق نمطًا للعرض الداخلي يحدد كيف ترتب العناصر داخل الصندوق. تُرتّب العناصر افتراضيًا داخل الصندوق وفقًا للانسياب الاعتيادي normal flow الذي تصرف فيه العناصر على طبيعتها سواء كانت عناصر كتلية أو سطرية (كما شرحنا في الفقرة السابقة). بالإمكان تغيير نوع العرض الداخلي للصندوق بإسناد قيم مثل flex إلى الخاصية display. وفي هذه الحالة سيكون نمط العرض الخارجي للعنصر هو block، وسيكون نمط العرض الداخلي flex، وأية عناصر أبناء لهذا الصندوق ستكون عناصر مرنة وستُرتب بناءً على القواعد التي تحددها مواصفات تخطيط الصندوق المرن Flexbox الذي سنتعرف عليه لاحقًا. ملاحظة: للاطلاع على قيم أخرى للخاصية وآلية عمل الصناديق في التخطيطات الكتلية والسطرية، ألق نظرة على مقال "التخطيطات الكتلية والسطرية". ستتعرف على القيمة flex بتفاصيل أكبر عندما تتقدم في دراسة CSS، بالإضافة إلى قيم داخلية أخرى يمكن أن تأخذها الصناديق مثل grid. التخطيطات الكتلية والسطرية هي الطرق الافتراضية التي تسلكها مكوّنات ويب، ويُشار إلى ذلك بالانسياب الاعتيادي لأن العناصر تترتب وفقها إن لم تظهر إرشادات أخرى. أمثلة عن أنماط العرض المختلفة لنلق نظرة على بعض الامثلة التي توضح أنماط العرض. لدينا في المثال التالي ثلاثة عناصر HTML مختلفة تمتلك جميعها نمط العرض الخارجي block. العنصر الأول فقرة نصية له إطار أضيف باستخدام CSS ويعرضه المتصفح كصندوق كتلي، وبالتالي ستبدأ الفقرة مع بداية سطر جديد وتمتد لتحتل المساحة المتاحة لها بأكملها. أما العنصر الثاني فهو قائمة رُتبت ضمن الصفحة باستخدام نمط العرض display: flex ويتيح ذلك تخطيطًا مرنًا للعناصر داخل حاوية العنصر لكن القائمة ككل تبقى عنصر كتلي وستمتد كالفقرة النصية لتملأ المساحة المتاحة لها وتنشئ سطرًا جديدًا بعدها. العنصر الثالث هو فقرة نصية يوجد داخلها عنصري <span> يُعرضان افتراضيًا وفق النمط السطري inline لأحدهما الصنف "block" وضبط نمط العرض الخارجي له بالشكل display: block. سنرى في المثال التالي سلوك العناصر السطرية inline. تضم الفقرة النصية الأولى عناصر <span> سطرية افتراضيًا لا تجبر التخطيط على البدء بسطر جديد بعدها. ولدينا أيضًا قائمة غير مرتبة ضُبطت خاصية العرض فيها على القيمة display: inline-flex، ويعني ذلك أنّ نمطها الخارجي هو نمط سطري ويحيط صندوقها ببعض العناصر ذات التخطيط المرن. لدينا أخيرًا فقرتين نصيتين ضُبط نمط عرضهما على القيمة display: inline. ستُرتب العناصر في الحاوية المرنة مع الفقرتين النصيّتين السابقتين في السطر ذاته، ولن تظهرا على سطرين جديدين كما لو كان نمط عرضهما كتليًا. ملاحظة: يمكنك في هذا المثال تغيير القيمة display: inline إلى display: block والقيمة display: inline-flex إلى display: flex للتغيير بين أنماط العرض. ستصادف أشياء تشبه التخطيط المرن لاحقًا، لكن ما ينبغي تذكره الآن أنّ تغيير قيمة الخاصية display ستغير نمط العرض الخارجي للصندوق بين الكتلي والسطري، وبالتالي ستغير طريقة ظهوره مع بقية عناصر الصفحة في التخطيط. سنركز فيما تبقى من المقال على نمط العرض الخارجي فقط. نموذج صندوق CSS يُطبق نموذج الصندوق Box Model بأكمله على الصناديق الكتلية، بينما تستخدم الصناديق السطرية بعضًا من الأساليب التي يعرفها نموذج الصندوق. يُعرّف النموذج كيفية عمل الأجزاء المختلفة للصندوق (الهوامش والحدود والحاشية والمحتوى) لإنشاء الصندوق الذي تراه في الصفحة. ولكي نزيد الطين بلَّة فهنالك نموذج صندوق معياري وآخر بديل. أجزاء الصندوق لبناء صندوق كتلي في CSS لا بدّ من وجود: صندوق محتوى: المنطقة التي يُعرض فيها المحتوى ويمكن تحديد أبعادها باستخدام خاصيات مثل width و height. صندوق الحاشية: وهي منطقة الحاشية التي تحيط بصندوق المحتوى كمساحة فارغة ويمكن التحكم بأبعادها من خلال الخاصية padding وما يتعلق بها. صندوق الإطار (أو الحدود): ويُغلِّف صندوقي المحتوى والحاشية، ويمكن التحكم بأبعاده من خلال الخاصية border والخصائص المتعلقة بها . صندوق الهوامش: ويمثل الطبقة الخارجية من نموذج الصندوق، ويغلف الصناديق الثلاث السابقة على شكل مساحة فارغة بينه وبين بقية العناصر، ويمكن التحكم بأبعاده من خلال الخاصية margin والخصائص المتعلقة بها. إليك مخططًا يظهر هذه الطبقات: نموذج صندوق CSS المعياري في هذا النموذج تُعرِّف قيمتي السمتين width وheight اتساع وارتفاع صندوق المحتوى، ثم تُضاف الحاشية والإطار إليهما للحصول على الأبعاد الكاملة التي يشغلها الصندوق. لنفترض وجود صندوق عُرّفت خصائصه كالتالي: .box { width: 350px; height: 150px; margin: 10px; padding: 25px; border: 5px solid black; } سيكون الحجم الكلي الذي يشغله الصندوق هو 410 بكسل (350+25+25+3+5) اتساعًا و (150+25+25+5+5) ارتفاعًا. ملاحظة: لا تُحسب الهوامش مع الأبعاد الفعلية للصندوق. صحيح أنها تؤثر على المساحة الكلية التي يشغلها الصندوق لكنها تمثل فقط المساحة الفارغة خارج الصندوق، إذ تنتهي مساحة الصندوق عند حدوده ولا تتعداها إلى الهوامش. نموذج صندوق CSS البديل قد تجد أنه من غير الملائم جمع امتداد الحاشية والإطار للحصول على الأبعاد الحقيقية للصندوق، وقد تكون محقًا! لهذا السبب قدمت CSS نموذج الصندوق البديل بعد تقديم نموذج الصندوق المعياري بفترة زمنية. إن اتساع العنصر وفق هذا النموذج هو اتساع الصندوق المرئي في الصفحة، وبالتالي هو اتساع صندوق المحتوى الذي يمثل الاتساع الكلي ناقصًا اتساع الحاشية والإطار. سيعطي تطبيق نفس الخصائص في المثال السابق صندوقًا أبعاده 350 بكسل اتساعًا و150 بكسل ارتفاعًا. تستخدم المتصفحات افتراضيًا نموذج الصندوق المعياري، لكن إن أردت الانتقال إلى النموذج البديل لأي عنصر فهذا ممكن بتطبيق الخاصية box-sizing: border-box عليه. وهكذا ستجبر المتصفح على استخدام نموذج الصندوق البديل أو الصندوق المحدود. .box { box-sizing: border-box; } وإن أردت أن تستخدم النموذج البديل لكل العناصر وهذا خيار شائع بين المطورين، عليك ضبط قيمة الخاصية box-sizing للعنصر <html> على القيمة border-box، ثم اضبط قيمة هذه الخاصية لبقية العناصر على القيمة inherit كما تلاحظ في الشيفرة البسيطة التالية: html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } ملاحظة: استخدم إنترنت إكسبلورر (كمعلومة تاريخية) نموذج الصندوق البديل افتراضيًا دون أن تتوفر أية آليات للتبديل مع النموذج المعياري. العمل مع نماذج الصندوق في المثال التالي صندوقين يملكان الصنف box. الذي يمنحهما نفس الاتساع والطول والهوامش والإطار والحاشية، أما الاختلاف هو أن الصندوق الثاني ضُبط ليستخدم نموذج الصندوق البديل. تطبيق: هل يمكنك تغيير حجم الصندوق الثاني (بإضافة تصريحات CSS إلى الصنف alternate.) ليطابق الصندوق الأول بالاتساع والإرتفاع؟ ملاحظة: يمكنك إيجاد الحل على المستودع الخاص بالمقال على غت-هب استخدام أداة مطوري ويب المدمجة مع المتصفح لعرض نموذج الصندوق تُسهِّل أدوات مطوري ويب المدمجة مع المتصفح فهم نموذج الصندوق. فعندما تتفحص عنصرًا باستخدام هذه الأدوات يمكنك أن ترى أبعاد العنصر بالإضافة إلى حشوته وهوامشه وإطاره. وهكذا يمكنك أن تعرف بسهولة إن كان حجم الصندوق كما تعتقد أو لا. الهوامش والحاشيات والإطارات لقد رأينا سابقًا عمل الخاصيات margin و padding و border من خلال الأمثلة المطروحة. وتجدر الإشارة أن تلك الخواص قد استخدمت بشكلها المختصر الذي سمح بضبط الجوانب الأربعة للصندوق معًا. لكلٍ من هذه الخاصيات خاصيات مكافئة طويلة تسمح بالتحكم بكل جانب من جوانب الصندوق على حدى. الهوامش الهوامش margins هي الفراغ المحيط بالصندوق والذي يدفع العناصر الأخرى بعيدًا عنه. يمكن لقيم الهامش أن تكون موجبة أو سالبة، إذ تجعل القيم السالبة لأحد جوانب الهامش متداخلًا مع أشياء أخرى في الصفحة. وسواء استخدمت النموذج المعياري أو البديل للصندوق، ستضاف الهوامش إليه دائمًا بعد أن تُحسب أبعاد الصندوق المرئي. تُستخدم الخاصية المختصرة margin لضبط جميع الهوامش معًا، كما يمكنك ضبط الهامش لكل جانب على حدى من خلال الخاصيات التالية: margin-top margin-right margin-bottom margin-left تطبيق: حاول في المثال التالي أن تغير قيم الهامش لترى كيف يدفع الصندوق ما يحيط به وفقًا لهذه القيم (سالبة أو موجبة). تقليص الهوامش: إن تلامس هامشا عنصرين وكان كلا الهامشين موجبًا، سيتوحد الهامشين في هامش واحد تكون أبعاده كأبعاد الهامش الأكبر من جهة التلامس، وستطرح قيمة الهامش السالب من الموجب في حال كانت إحدى القيميتن سالبةً. بينما إن كانت القيمتين سالبتين، سيتقلص الهامش ويأخذ القيمة الأصغر بينهما أي القيمة الأبعد عن الصفر. لدينا في المثال التالي فقرتين نصيتين للأولى هامش سفلي margin-bottom مقداره 50 بكسل وللثانية هامش علوي margin-top قيمته 30 بكسل. سيتقلص الهامش بينهما في هذه الحالة لتصبح قيمته 50 بكسل وليس مجموع الهامشين. تطبيق: اختبر تقليص الهوامش بجعل الهامش العلوي للفقرة الثانية 0 بكسل ولاحظ عدم تغير الهامش بين الفقرتين، وسيبقى 50 بكسل. حاول أن تضبط الهامش العلوي على -10 بكسل هذه المرة ولاحظ كيف يصبح الهامش المرئي بين الفقرتين 40 بكسل. هنالك بعض القواعد التي تقرر متى تُقلَّص الهوامش ومتى لا تُقلَّص، ويمكنك دائمًا البحث عن معلومات أوفى إن أردت على الإنترنت. أما الأمر الأساسي الذي عليك تذكره هو أن تقليص الهوامش أمر واقع ويحدث دائمًا، فإن وضعت هامشًا لعنصر ما ولم يُعرض كما هو متوقع فالمشكلة تتعلق غالبًا بتقليص الهامش. الإطارات يُرسم الإطار بين هوامش الصندوق وحشوته. فإن استخدمت نموذج الصندوق المعياري، ستُضاف أبعاد الإطار إلى اتساع width وارتفاع height الصندوق. وإن كنت تستخدم النموذج البديل، فسيجعل أبعاد صندوق المحتوى أقل لأنه سيمتد على جزءٍ منها. توجد الكثير من الخاصيات المستخدمة في تنسيق الإطارات، فهنالك أربعة جوانب للإطار ولكل منها شكل واتساع ولون قد نرغب في تعديل أي منها. ويمكن أيضًا تنسيق شكل الإطار ولونه واتساعه معًا باستخدام الخاصية المختصرة border. بينما يمكنك استخدام الخاصيات التالية لضبط كل جانب بمفرده: border-top border-right border-bottom border-left استخدم الخاصيات التالية لضبط اتساع وشكل ولون جميع الجوانب: border-width border-style border-color ولضبط اتساع وعرض وشكل كل جانب بمفرده، يمكن استخدام الخاصيات المطولة التالية: border-top-width border-top-style border-top-color border-right-width border-right-style border-right-color border-bottom-width border-bottom-style border-bottom-color border-left-width border-left-style border-left-color استخدمنا في المثال التالي خاصيات مختصرة ومطولة مختلفة لإنشاء إطارات. حاول أن تعدل في قيم بعض الخاصيات لتختبر فهمك لمجرى الأحداث. الحاشيات تقع الحاشية بين الإطار أو الحد ومنطقة المحتوى. وعلى خلاف الهوامش لا يمكن أن تأخذ الحاشية قيمًا سالبة، بل قيمًا موجبة فقط أو صفر. تُستخدم الحاشيات عادة لدفع المحتوى بعيدًا على الإطار، وستُعرض أي خلفية تطبقها على العنصر خلف الحاشية أيضًا. يمكنك التحكم بالحاشية من جميع الجوانب بتطبيق الخاصية المختصرة padding، كما يمكنك تنسيق كل جانب على حدى من خلال الخاصيات المطولة التالية: padding-top padding-right padding-bottom padding-left تطبيق: حاول أن تغيير قيم الحاشية في الصنف box. في المثال التالي، وسترى أن هذه التغييرات التي تحدد بداية النص تتعلق بالصندوق. حاول أيضًا أن تغير قيم الحاشية في الصنف container. مما سيخلق مساحة فارغة بين الحاوية والصندوق، وستلاحظ إمكانية تغيير الحاشية لأي عنصر وستخلق مساحة فارغة بين حدوده وبين أية عناصر ضمنه. نموذج الصندوق والصناديق السطرية يُطبّق كل ما شرحناه سابقًا على الصناديق الكتلية، كما تُطبق بعض تلك الخاصيات على الصناديق السطرية أيضًا كتلك التي تتشكل من عناصر <span>. لدينا في المثال التالي عنصر <span> داخل فقرة نصية وقد ضبط اتساعه وارتفاعه وهوامشه وحاشيته وإطاره باستخدام خاصيات CSS. لاحظ كيف تجاهل المتصفح الاتساع والارتفاع واحترم الهوامش والحاشيات والإطارات العمودية، لكن لم يراع الصندوق السطري لهذا العنصر العلاقة مع بقية المحتوى، وتداخلت الحاشية والإطار مع كلمات الفقرة النصية. أما الهوامش والحاشيات والإطارات الأفقية فستُحترم مسببة تباعد المحتوى عن صندوق العنصر. استخدام التصريح display: inline-block تمتلك الخاصية display قيمة خاصة تؤمن أرضية مشتركة بين الحالة الكتلية block والسطرية inline وهي inline-block. وتظهر فائدتها في الحالات التي لا ترغب فيها في الانتقال إلى سطر جديد وتريد أن يُحترم ارتفاع واتساع الصندوق دون تداخل كما رأينا في المثال السابق. عندما يُطبق التصريح على عنصر ما فسيمتلك مجموعة من الميزات الكتلية التي تعرفنا عليها وهي: احترام قيم الخاصيتين width and height. تدفع الخاصيات padding و margin و border العناصر الأخرى بعيدًا عن صندوق العنصر. لكنه لن يسبب انتقال العناصر التي تليه إلى سطر جديد، وسيبدو أكبر من المحتوى المحيط به إن ضبطت صراحة اتساعه وارتفاعه. تطبيق: حاول أن تغيّر قيمة الخاصية display في المثال التالي من inline-block إلى block، أو أن تحذف سطر هذا التصريح بالكامل ولاحظ ما سيحدث! يمكنك الاستفادة من هذا الأمر عندما تريد توسيع المنطقة التي تنقر فيها على رابط <a> بإضافة حشوة padding. فالرابط <a> هو عنصر سطري مثل العنصر <span>، ويمكنك استخدام التصريح display: inline-block لكي تُطبِّق حشوة حوله وتسهّل على المستخدم النقر عليه. يُلاحظ هذا الأسلوب مرارًا في أشرطة التنقل. إذ يُعرض شريط التنقل التالي الذي في صف باستخدام أسلوب الصندوق المرن flexbox وقد أضيفت حشوة إلى كل رابط لتوسيع المنطقة المحيطة به، ولتغيير لون الخلفية background-color عند تمرير مؤشر الفأرة فوقه. لاحظ تداخل صندوق الرابط مع إطار القائمة غير المرتبة <ul>، ذلك لأن الروابط <a> عناصر سطرية. تطبيق: أضف التصريح display: inline-block إلى المحدد links-list a.، وستلاحظ كيف تُحل مشكلة التداخل، باحترام بقية العناصر لحشوة الرابط. خلاصة هذا كل ما تحتاجه لتستوعب نموذج الصندوق، وننصحك بالعودة دائمًا إلى هذا المقال إن واجهت أية مشاكل مستقبلًا. سننتقل تاليًا إلى موضوع الخلفيات والإطارات لنرى كيف سنستخدمها لجعل الصناديق البسيطة أفضل مظهرًا. ترجمة -وبتصرف- للمقال The box model. اقرأ أيضًا المقال السابق: محددات التجميع combinators في CSS كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS التحكم في تخطيط الصفحة وضبط محاذاة العناصر في CSS

لا بد من فهم الأجزاء التي يتكون منها الحاسوب فإن كنت تنوي التعامل مع الحاسوب بأن تدرس هندسة الحاسوب أو أحد تخصصات علوم الحاسوب فليس من الجيد أن تدخل مجالًا يتعلق بالحاسوب ولا تعرف ما هي مكوناته، وإن لم تكن مهتمًا في دراسة وتعلم البرمجة وعلوم الحاسوب، فقد خصصنا هذا المقال أيضًا ليساعدك على اختيار الحاسوب الأمثل لك، فعندما تقرر شراء حاسوب جديد أو حتى صيانة حاسوبك الحالي أو حل بعض مشاكل العتاد الصلب أو ترقيته، حيث سيمنحك معرفة المكوّنات الأساسية للحاسوب وأنواعها وإصداراتها ونماذجها وكيفية التعرف عليها وكيف ترتبط هذه المكوّنات ببعضها قاعدة معرفية أساسية تساعدك على اتخاذ القرار الصحيح. ما هي مكونات الحاسب؟ يتكون الحاسوب من مكوّنات أساسية لا يعمل الجهاز بدونها ومكوّنات مساعدة وأخرى ملحقة. سنستعرض هذه المكوّنات سريعًا ثم نفصلّها تاليًا: مكونات الحاسب الأساسية: وحدة المعالجة المركزية (المعالج) ذواكر الوصول العشوائي بطاقة العرض الرسومي اللوحة الأم أجهزة التخزين الدائم للبيانات مكونات مساعدة: أجهزة الدخل والخرج محوّلات الاتصال مع الشبكات شاشات العرض مكونات ملحقة المعالج: وحدة المعالجة المركزية CPU تُعد وحدة المعالجة المركزية Central Processing Unit بمثابة دماغ الحاسوب فهي أعمدة مكونات الحاسب والمسؤول عن: القراءة والكتابة من وإلى الذواكر ووسائط التخزين. إجراء العمليات الحسابية والمنطقية. التحكم بأجهزة الدخل والخرج، أي الأجهزة التي تنقل المعلومات من المحيط الخارجي إلى الحاسوب مثل لوحة المفاتيح، أو التي تنقل المعلومات من الحاسوب إلى الوسط المحيط من شاشة العرض. كيف يعمل معالج الحاسب؟ بصرف النظر عن التكنولوجيا المستخدمة في معمارية المعالجات، تتفق جميعها بطريقة العمل التي تتلخص بخطوات ثلاث: إحضار التعليمة instructions من الذاكرة المحجوزة للبرنامج fetch. تفسير التعليمة decode. تنفيذ التعليمة execute. أما التعليمات التي نتحدث عنها فهي مجموعة الخطوات المكتوبة ضمن برنامج حاسوبي لإنجاز وظيفة معينة. تنفذ التعليمات على التسلسل وفقًا لساعة داخلية clock تنبض بوتيرة منتظمة كي تحدد الفاصل الزمني بين كل تعليمتين. كلما كان هذا الفاصل الزمني أصغر كان التنفيذ أسرع ويُسمى عدد نبضات هذه الساعة في الثانية تردد المعالج clock rate أو تُعرف أحيانًا بسرعة المعالج وتقدّر بالجيغا هرتز GHz. تصل سرعة بعض المعالجات المطروحة في الأسواق إلى 4.3 جيغا هرتز ويُتوقع أن تصل إلى الأسواق قريبًا معالجات يصل ترددها إلى 6 جيغا هرتز وقد تصل إلى سرعات أعلى مستقبلًا. تصدر المعالجات عندما تعمل كمية كبيرة من الحرارة لذلك لا بد من تبريدها باستخدام مراوح أو مبددات حرارية. مما يتكون المعالج؟ يتكون المعالج -أهم مكونات الحاسب كما ذكرنا- من كم هائل من عناصر إلكترونية (أغلبها ترانزستورات أو أنصاف نواقل) صُنعت بطريقة تجعلها غاية في الصغر من رتبة نانو متر وقد وضعت هذه العناصر لتكوين دوائر كهربائية تنفذ وظائف المعالج، وتنتظم لتشكل خمسة أقسام هي: وحدة التحكم CU وترتبط بالذاكرة لقراءة التعليمات وترتيبها كما ترتبط بأجهزة الدخل والخرج. وحدة الحساب والمنطق ALU لتنفيذ التعليمات. وحدة حساب موقع الذاكرة ACU لتحديد عنوان التعليمات التي سيقرأها المعالج أو يكتب فيها. وحدة إدارة الذاكرة MMU ومهمتها تنظيم العناوين وإدارة الوصول إليها. الذواكر الخبيئة cache: وهي ذواكر داخلية ضمن المعالج تُخزن فيها المعلومات التي يحضرها المعالج من الذاكرة الرئيسية (سنتحدث عنها لاحقًا) لاختصار وقت الوصول إليها وتوفير الطاقة وخاصة إن استُخدمت بكثرة. وهي ذواكر سريعة وعالية الكفاءة تقسم إلى ثلاث أو أربعة مستويات (من L1 إلى L4) وفقًا لمعايير محددة خارج نطاق مقالنا. [02cpuunits.png] ماذا عن النوى وخيوط المعالجة؟ النواة Core هي وحدة معالجة مركزية مستقلة مرتبطة بذاكرة خبيئة خاصة بها. إن احتوى المعالج على وحدة معالجة مركزية واحدة قلنا أنه وحيد النواة Single-core processor ومتعدد الأنوية إن احتوى على أكثر من وحدة معالجة مركزية. يمكن أن يصل عدد النوى من 4 إلى 18 حسب المعالج والشركة الصانعة. إن زيادة عدد النوى يعني تنفيذ كميات أكبر من التعليمات وبالتالي سرعة أعلى في تنفيذ البرنامج دون زيادة تردد المعالج، وهذه هي الفائدة الرئيسية للنوى المتعددة. أما خيوط المعالجة Threads فهي طريقة يقدمها المعالج لإدارة التعليمات القادمة إلى كل نواة وبالطبع لا تُعد خيوط المعالجة مكونات فيزيائية كالنوى بل برمجية. يمكن أن نقول بأن كل نواة يمكن أن تنظم التعليمات التي تصلها ضمن خيطي معالجة، وبالتالي يمكن لمعالج رباعي النوى تنظيم 8 خيوط والثماني النوى 16 خيطًا وهكذا. تُساعد خيوط المعالجة في تنظيم الحمل وتوزيعه ضمن النواة وبالتالي تساهم في تنفيذ التعليمات على التوازي مما يزيد من سرعة المعالجة. ماذا عن المعمارية x64 وx86؟ بُنيت معظم المعالجات الحديثة وفق المعماريتين x86 و x64 اللتان تختلفان أساسًا بكمية الذاكرة التي يستطيع المعالج عنونتها للوصول إلى محتوياتها إذ يستطيع المعالج ذو المعمارية x86 (أو معالجات 32 بت) بعنونة 4 جيغا بايت كحد أقصى من الذاكرة (أي لا يمكن استخدام ذاكرة أكبر من ذلك إن كان المعالج وفق معمارية 32 بت) بينما يمكن لمعالجات المعمارية x64 (أو معالجات 64 بت) عنونة ذاكرة أكبر بكثير من الناحية النظرية. معظم المعالجات الموجودة حاليًا تنتمي إلى المعمارية x64 ولم يبقى سوى عدد محدود من أنواع المعالجات x86 لتجهيزات مخصصة لا تتطلب التعامل مع كميات كبيرة من الذاكرة. ولا بد للاستفادة من المعمارية X64 وجود نظام تشغيل قادر على استثمار هذه الميزة لذلك تجد إصدارات مختلفة من أنظمة التشغيل 32 بت أو 64 بت وبالتالي إصدارات مختلفة من البرمجيات التي تعمل ضمن تلك الأنظمة. للمزيد من التفصيل، ارجع إلى مقال وحدة المعالجة المركزية. ذاكرة الوصول العشوائي RAM نقصد عادة بذاكرة الوصول العشوائي في الحواسب وحدة الذاكرة Memory module وهي من مكونات الحاسب الأساسية والتي تضم مجموعة من رقاقات تخزين البيانات ذات أحجام محددة ضمن تجهيزة فيزيائية مستقلة يكون حجم التخزين فيها جداء عدد هذه الرقاقات في حجم التخزين في كل رقاقة. تخزن هذه الذواكر البيانات طالما أن الحاسوب قيد العمل وتفقد محتواها عند إيقاف تشغيل الحاسوب ولا بد من تخزين ما تريده على وسائط تخزين دائمة. تتوافر حاليًا وحدات ذاكرة بأحجام مختلفة تبدأ بحجم 4 جيغا بايت وصولًا إلى 256 جيغا بايت. كيف تعمل الذواكر RAM وما هي الأنواع المستخدمة في الحواسب؟ تتبادل الذاكرة البيانات إلى المعالج عندما يطلبها بالتزامن مع ساعة المعالج الداخلية. يُدعى معدل تبادل البيانات مع المعالج بتردد عمل الذاكرة ويقدر بالميغا هرتز. يطلب المعالج معطيات الذاكرة بإرسال عنوانها إلى الذواكر لتستجيب الذاكرة وترسل البيانات المطلوبة عند بداية نبضة الساعة في الذواكر أحادية معدل النقل SDR وعند بداية ونهاية نبضة الساعة في الذواكر الأحدث ثنائية معدل النقل DDR. إن تردد عمل الذواكر أو سرعة الذواكر أقل بكثير من سرعة المعالج وتتعلق بجيل هذه الذواكر. لا بد أيضًا من الإشارة إلى مقياس آخر هو معدل نقل البيانات الذي يُقدر بالجيغا بت في الثانية ويتناسب طردًا مع سرعة الذاكرة. لن نتكلم عن الأنواع والمعماريات المختلفة للذواكر هنا بل سنكتفي بما يُستخدم مع الحواسب حاليًا وهي ذواكر من النوع SDRAM وهي اختصار لعبارة Synchronous Dynamic Random Access Memory أو ذواكر الوصول العشوائي الديناميكية المتزامنة. ظهرت النسخة DDR1 عام 2000 ووصلت سرعتها حتى 400 ميغا هرتز تلتها DRR2 عام 2003 ثم DDR3 عام 2007 ثم DDR4 عام 2014 وأخيرًا DDR5 عام 2020 ويتفوق كل جيل عن سابقه بسرعة الذواكر وزيادة معدل نقل البيانات وانخفاض الطاقة المستهلك نتيجة انخفاض الجهد الكهربائي للتشغيل. كيف تختار الذاكرة المناسبة لحاسوبك؟ قبل كل شيء لا بد أن تعرف كيف تقرأ ميزات وحدات الذاكرة من النوع SDRAM لهذا دعنا نلقي نظرة على الصورة التالية: ستجد على لصاقة وحدة الذاكرة سطر مشابه جدًا للتالي "8GB DDR4-2133 1.2v X8 UDI" وفيها يشير الصانع إلى أن حجم الذاكرة في هذه الوحدة هو 8 جيغا بايت وأن نوع الذاكرة هو DDR4 وسرعتها 2133 ميغا هرتز وتعمل بجهد تغذية 1.2 فولت أما المعيارين الأخيرين فلن تجدهما بالضرورة على بطاقات التعريف ويمكنك تجاهلهما بأمان. قد تجد أيضًا عبارة "PC4-17066" بدل من "DDR4-2133" ويعني أن معدل نقل البيانات هو 17066 ميغا بايت في الثانية وتقسيم هذا الرقم على 8 (كل بايت مكون من 8 بت) سنجد الرقم 2133 وهو سرعة نقل البيانات بالميغا هرتز في الثانية. كلما زاد حجم الذاكرة في حاسوبك وزادت سرعتها سيزيد من أداءه عمومًا لكن للمسألة حدود لا بد من الانتباه لها: تحقق من حجم الذاكرة التي يعنونها معالجك عمليًا وجيل الذواكر وسرعتها فلا تتشابه كل المعالجات من هذه النواحي. إذ يمكن للمعالج i7-6700k من إنتل التعامل مع 64 جيغابايت من الذاكرة ويدعم DDR3 بسرعات أقصاها إلى 1600 ميغا هرتز وDDR4 بتردد 1866 و2133 ميغا هرتز فقط. تحقق من نوع الذواكر التي تدعمها اللوحة الرئيسية للحاسوب (سنتعرف عليها لاحقًا) إذ تحتوى هذه اللوحات على شرائح تحكم بمواصفات معينة تدعم ترددات محددة للذواكر لا ينبغي تجاهلها إطلاقًا. لا تخلط أبدًا ذواكر بسرعات مختلفة حتى لو دعمها المعالج واللوحة الرئيسية إذ ستُخفض اللوحة الرئيسية تردد الذواكر الأسرع للتزامن مع الأبطأ دومًا. كقاعدة مهمة حاول زيادة حجم الذاكرة حتى لو كانت أبطأ قليلًا لتحسن أداء حاسوبك. لمزيد من التفاصيل، ارجع إلى مقال الذاكرة وأنواعها. بطاقة العرض والرسوميات Graphics Card تعد بطاقة العرض أحد مكونات الحاسب الرئيسية وهي تجهيزة إلكترونية وظيفتها الرئيسية معالجة البيانات المتعلقة بالصور والرسوميات والفيديو التي تحيلها إليها وحدة المعالجة المركزية من أجل تحليلها وتنظيمها ثم عرضها على شاشة المستخدم لتخفيف الحمل عن المعالج. قد تُصنّع هذه البطاقات على لوحة إلكترونية خاصة بها ثم تتصل مع اللوحة الرئيسية للحاسوب لتبادل البيانات مع المعالج وتستمد الطاقة الكهربائية من اللوحة وعندها تُدعى بطاقة عرض مستقلة أو خارجية وقد تُصنّع ضمن اللوحة الرئيسية وتُدعى عندها بطاقة عرض مدمجة وهذا الخيار أكثر استخدامًا في الحواسب المحمولة. ومن الجدير بالذكر أن البرمجيات التي تأتي مع بطاقة الإظهار ضمن حزم الدعم والتثبيت غاية في الأهمية لتعمل بطاقة العرض بالشكل الأمثل ولا بد من الانتباه دومًا لأية تحديثات تصدرها الشركات الصانعة بهذا الخصوص. مما تتكون بطاقة العرض؟ تتكون بطاقة العرض من الأقسام الرئيسية التالية: وحدة معالجة الرسوميات Graphics Processing Unit: واختصارًا GPU وهي شريحة رقمية تشبه المعالج المركزي CPU لكنها مصممة خصيصًا لإجراء حسابات رياضية وهندسية معقدة وضرورية لعرض الرسوميات. تصدر المعالجات الرسومية كذلك كمية كبيرة من الحرارة ولا بد من تبريدها بشكل ملائم وتتعلق كمية الحرارة بالطاقة الكهربائية التي تستهلكها والتي قد تصل إلى أكثر من 130 وات في بعض البطاقات عالية الأداء. تُقدر سرعة معالج الرسوميات بالميغا هرتز وقد وصلت حاليًا في معالج Geforce RTX3090 من إنفيديا Nvidia إلى 1219 ميغا هرتز فعليًا وهي أفضل المعالجات الرسومية الموجودة في الأسواق حاليًا. ذاكرة وصول عشوائي مخصصة للرسوميات VRAM: تُستخدم هذه الذواكر من قبل معالج الرسوميات لتخزين بيانات كل بكسل كاللون والموقع على الشاشة، كما يمكن أن يُستعمل جزء من هذه الذاكرة كمخازن مؤقتة buffers لتخزين الصور الجاهزة ريثما يحين وقت عرضها على الشاشة. تٌعد الذواكر من النوع GDDR أكثر أنواع الذواكر الرسومية انتشارًا، ويصل حجم الذاكرة الرسومية إلى 24 جيغا بايت في معالج Geforce RTX3090 من إنفيديا Nvidia. ذاكرة نظام إدارة الخرج والدخل BIOS: وهي شريحة من نمط flash عادة تُخزن فيها البرمجيات الأساسية لقيادة معالج الرسوميات والذواكر. ذاكرة التحويل الرقمي التماثلي DACRAM: لا تزال أغلب الشاشات تعمل وفق المبدأ التماثلي analog وليس الرقمي digital لهذا لا بد من وجود هذه الذاكرة لتحويل معطيات الذاكرة الرقمية VRAM إلى بيانات تستطيع الشاشات التماثلية فهمها لعرض الصورة. واجهة الاتصال مع اللوحة الرئيسية Interface: وذلك في حال كانت بطاقة العرض مستقلة وهي عادة من النوع PCI Express أو Mini PCI. عادة ما ترى على لوحة تعريف بطاقة العرض الرموز "PCI-E 4.0 X16" يدل الرقم 4 على نسخة الفتحة أو المقر على اللوحة الأم والرقم 6 على عدد حزم الاتصال مع المعالج الرئيسي لهذا يجدر الانتباه إلى مواصفات اللوحة الرئيسية قبل التفكير في شراء بطاقة عرض. لن تلاحظ وجود واجهة اتصال في بطاقات العرض المدمجة. تأخذ بطاقة العرض عادة الطاقة الكهربائية من اللوحة الأم من خلال واجهة الاتصال لكن قد تتمتع بعض البطاقات ذات الاستهلاك العالي للطاقة بتوصيلات تغذية خاصة. منافذ الخرج Outputs: وهي المنافذ التي تتصل بها الشاشات وأجهزة العرض. لهذه المخارج أنواع كثيرة منها VGA وDVI وقد غدا هذان المخرجان قديمين وكذلك مخرجي HDMI وDP الأكثر انتشارًا حاليًا. كيف تختار بطاقة العرض المناسبة؟ يعتمد الأمر كليًا على العمل الذي تنوي القيام به على حاسوبك، فأي بطاقة رسومية تجارية ستكون ملائمة للأعمال الإدارية والمكتبية والاتصال بالإنترنت، بينما إن كنت تنوي العمل على برنامج لتصميم الرسوميات وتحرير الفيديو والألعاب عالية الأداء فلا بد بالتفكير مليًا. تتطلب الألعاب معالج رسوميات سريع وحجم كبير من الذاكرة إضافة إلى دقة عرض Resolution عالية وهذا يتناسب طردًا مع ثمن بطاقة العرض. كما تتطلب برامج عرض وإخراج الرسوميات مثل برامج التصميم الثلاثي الأبعاد سرعة عالية وحجمًا لا بأس به من الذاكرة لكنها بالطبع أقل من مقابلاتها اللازمة لتشغيل الألعاب. اللوحة الرئيسية: اللوحة الأم Mainboard أحد مكونات الحاسب الرئيسية أيضًا اللوحة الأم motherboard وهي لوحة إلكترونية مطبوعة مهمتها الجمع بين مكونات الحاسب الأساسية وإدارة الاتصال ونقل البيانات بينها وتوزيع التغذية الكهربائية عليها. تتكون اللوحة الأم من الأقسام التالية: الفتحات Slots: مقر المعالج: وهو مكان تثبيت المعالج على اللوحة الأم. مقر ذواكر الوصول العشوائي RAM: وهو مكان تثبيت الذواكر على اللوحة الأم ومعظم مقرات الذواكر الموجودة حاليًا من النوع DIMM في الحواسب المكتبية والنسخة المصغرة عنها SODIMM في الحواسب المحمولة. مقرات بطاقات التوسع Expansion Cards slots: بطاقات التوسع هي تجهيزات إلكترونية تؤدي أعمال إضافية تزيد من قدرات الحاسب كبطاقات الصوت الإحترافية وبطاقات العرض وبطاقات استقبال البث الفضائي وغيرها الكثير. تؤمن اللوحة الرئيسية واجهات اتصال قياسية بين تلك التجهيزات والحاسوب. تدعم لوحات الأم واجهات اتصال من أنواع مختلفة مثل AGP (لبطاقات العرض القديمة) وPCI وPCI-E. المنافذ الطرفية Ports: منافذ USB: لوصل جميع التجهيزات التي تمتلك هذه الواجهة من لوحات مفاتيح وفأرات وأجهزة بلوتوث وأجهزة اتصال لاسلكي وتدعم اللوحات الرئيسية حاليًا منافذ USB-2 وUSB-3. منافذ PS/2: وهي منافذ كلاسيكية قد لا تراها في اللوحات الحديثة وتدعم اتصال الفأرة (لون منفذها أخضر) ولوحة المفاتيح (بنفسجي). منافذ تسلسلية COM: وهي واجهة اتصال كلاسيكية قديمة استخدمت لوصل أجهزة المودم وغيرها إلى الحاسوب. وقد لا تراها في اللوحات الرئيسية الحديثة. منافذ صوتية: متعددة الأنواع لإخراج الصوت من بطاقة الصوت المدمجة مع اللوحة الرئيسية (في الغالبية الساحقة من الحواسب) أو استقبال الصوت من تجهيزات خارجية. منفذ بطاقة الشبكة السلكية: من النوع RJ45 لوصل كابل الشبكة إلى اللوحة الأم وفي هذه الحالة تكون بطاقة الشبكة مدمجة مع اللوحة الرئيسية (في الغالبية الساحقة من الحواسب). منافذ أخرى: أشهرها حاليًا منفذ ثندربولت thunderbolt الذي يصل عدد كبير من التجهيزات مع الحاسب وبسرعة نقل بيانات عالية. المنافذ الداخلية: منافذ وصل السواقات SATA: وهي المنافذ المستعمل حاليًا لوصل أجهزة التخزين الدائم إلى الحواسب مثل الأقراص الصلبة HDD وسواقات الحالة الصلبة الأحدث والأسرع SDD وتصل سرعة نقل هذه المنافذ إلى 6 جيغا بت في الثانية في النسخة SATA 3. منفذ توصيل المؤشرات الضوئية وواجهة الإقلاع: ويضم سلسلة من الأرجل توصل بها المؤشرات الضوئية لتشغيل الحاسب ومؤشر عمل القرص الصلب وزر تشغيل الحاسب وزر إعادة التشغيل والمكبر الصوتي الداخلي للوحة الأم. منافذ أخرى: قد تضم اللوحة الرئيسية بعض المنافذ لوصل واجهات USB إضافية أو منافذ صوتية إضافية عند الحاجة. الشرائح الإلكترونية الأساسية: شريحة إدارة نظام الدخل والخرج BIOS: وهي شريحة مهمة جدًا ولن يعمل الحاسب بدونها، إذ تضم التعليمات البرمجية التي تدير شؤون العتاد الصلب وتنظم إقلاع الحاسب وصولًا إلى مرحلة الاستثمار وتراقب حالة التجهيزات الفيزيائية أثناء العمل. شريحتي البرج الشمالي والجنوبي: تُدير شريحة البرج الشمالي Northbridge اتصال المعالج مع مكوّنات الحاسب جميعها وهي الأقرب إلى المعالج بينما تدير شريحة البرج الجنوبي SouthBridge وظائف الدخل والخرج لذلك هي أقرب إلى منافذ التوسع وتتصل مع المعالج عن طريق البرج الشمالي. شريحة بطاقة الشبكة السلكية: من أجل وصل الشبكات السلكية. شريحة بطاقة الشبكة اللاسلكية: في الحواسب المحمولة عادة وقد تكون أيضًا على شكل بطاقة إلكترونية منفصلة لها منافذ خاصة للإتصال مع اللوحة الرئيسية. شريحة بطاقة الصوت: ومهمتها الرئيسية معالجة البيانات الصوتية التي يصدرها الحاسوب والتي يستقبلها. ولبعضها ميزات تقنية متقدمة لتنقية الصوت وتعديله وللتعامل مع الكثير من التجهيزات. ترتبط السماعات ومكبرات الصوت والميكروفونات (المجهار) بمنافذ الصوت المتصلة مع شريحة الصوت وأغلب هذه الشرائح حاليًا من النوع عالي الدقة High definition وعال الأمانة high fidelity. ولا بد من الإشارة إلى بطاقات الصوت الخارجية التي تضم شرائح متطورة لمعالجة الصوت وقد تمتاز بإمكانيات أكبر بكثير من الشرائح المدمجة مع اللوحة الرئيسية. منافذ التغذية الكهربائية: منفذ تغذية اللوحة الأم ومكوناتها: وتتكون من 20 إلى 24 رجل يصل إلى كل رجل جهد مستمر مختلف مصدره وحدة التغذية الكهربائية للحاسوب. منفذ تغذية المعالج: في بعض اللوحات الرئيسية. مقر البطارية: تؤمن البطارية جهدًا قدره 3.3 فولت لتغذية شريحة BIOS لحفظ الإعدادات والمساعدة في إقلاع الحاسوب. تغذية المراوح: وهي مآخذ مؤلفة من 3 أو أربعة أرجل تؤمن التغذية الكهربائية لمروحة المعالح ومروحة الحاضنة case fans. كيف تختار اللوحة الأم؟ أولًا: وفقًا لنوع المعالج والشركة الصانعة فلكل معالج معمارية مختلفة لهذا تكون اللوحة الأم المناسبة له مختلفة. ثانيًا: حجم الذواكر الذي تحتاجه وما يمكن للوحة الأم أن تدعمه. ثالثًا: نوع بطاقة العرض التي تستخدمها وإمكانية دعم اللوحة الأم لها من خلال واجهات الاتصال التي تضمها. لمزيد من التفصيل، ارجع إلى مقال اللوحة الأم: الجزء الأول ومقال اللوحة الأم: الجزء الثاني. أقراص التخزين الدائم للبيانات تُستخدم ذواكر الوصول العشوائي لتخزين البيانات التي يتعامل معها المعالج أثناء تشغيل الحاسوب فهي إن جاز التعبير بمثابة مسودات عمل لكن عندما نريد تخزينها بشكل دائم لا بد من نقلها إلى وسائط التخزين الدائمة وهي من مكونات الحاسب الرئيسية. الأقراص الصلبة HDD من أهم وسائط التخزين الدائمة وأكثرها عملية هي الأقراص الصلبة Hard disk drive واختصارًا HDD التي تصل سعات تخزينها حاليًا إلى عشرات التيرا بايت وكانت من أكثر وسائط التخزين انتشارًا لسعاتها الكبيرة وموثوقيتها العالية ورخص ثمنها إلا أن نجمها بدأ يخفت لصالح أقراص الحالة الصلبة SSD وما عقبها من تقنيات تخزين متطورة وبسرعات كبيرة مذهلة. تتكون هذه الأقراص من قرص معدني ممغنط ورؤوس دقيقة مزودة بحساسات للقراءة والكتابة على هذا القرص (من هنا جاءت تسميته بالقرص الصلب)، يرتبط هذا القرص مع اللوحة الأم للحاسوب من خلال منافذ SATA، كما يمكن أن تتصل هذه الأقراص بالحاسوب عبر منفذ USB وتُدعى عندها أقراص صلبة خارجية أي يمكن وصلها وفصلها عند الحاجة. للمزيد من التفصيل، ارجع إلى مقال القرص الصلب: آلية تخزين البيانات على الأقراص وأيضًا مقال القرص الصلب: آلية تخزين البيانات على الأقراص. قرص الحالة الصلبة SSD أما المنافس الرئيسي لأقراص HDD فهي أقراص الحالة الصلبة Solid state drive واختصارًا SSD وتعتمد على عناصر ذاكرة إلكترونية من أنصاف النواقل لتخزين المعلومات (تُدعى عناصر ذاكرة لاتطايرية) ولا تضم أية أجزاء متحركة ضمنها وتعتبر مقاومة فيزيائيًا للصدمات لكنها عرضة للتأثر بالمشاكل الكهربائية كما أن استهلاكها للطاقة الكهربائية أقل. تعمل عناصر الذاكرة الإلكترونية بشكل أسرع بكثير من القرص الصلب الدوار وبالتالي سيقل زمن الوصول إلى البيانات وبالتالي سرعة أكبر في القراءة والكتابة، إذ يصل معدّل نقل البيانات فيها إلى 1.5 جيغا بايت في الثانية عند استخدام واجهة الاتصال SAS 3.0 وحوالي 750 ميغا بايت في الثانية باستخدام واجهات SATA 3 وقد تصل إلى 4 جيغابايت عند استخدام واجهة الاتصال PCI-E 3.0 4X الذي يستخدم بروتوكول NVMe. كما يمكن وصل هذه الأقراص خارجيًا من خلال منفذ USB، وتصل سعة سواقات SSD إلى عدة تيرا بايت. بدأ منذ فترة استخدام مزيج من الأقراص الصلبة وسواقة الحالة الصلبة فالأولى لتخزين البيانات الجاهزة كالملفات والفيديوهات والصور والثانية لتثبيت البرمجيات الأكثر استخدامًا بالإضافة إلى نظام التشغيل أما حاليًا أصبح الشائع والاعتماد أكثر على أقراص SSD بأحدث تقنياتها التي تتطور بسرعة كبيرة، لذا يتوقع أن ينعدم الاعتماد على أقراص HDD وتظهر تقنيات أخرى أحد وهكذا. وحدة التغذية الكهربائية تنحصر مهمة وحدة التغذية الكهربائية في تحويل التيار المتناوب المستخدم في المنازل إلى تيار مستمر بجهود مختلفة (فولت مختلف) وشدة تيار مختلفة (أمبير مختلف) لتأمين التغذية اللازمة لكل مكوّن من مكونات الحاسب. تعمل وحدة التغذية الكهربائية ATX في الحواسب المكتبية كمحول وموزع للجهد والتيار لذلك تجد الأسلاك الخارجة على شكل توصيلات مختلفة الألوان ولكل لون دلالته، فاللون الأسود هو الأرضي والأحمر هو (5 فولت) والأصفر (12 فولت) والبرتقالي (3.3 فولت) والأخضر لإعطاء إشارة إقلاع للحاسوب وهكذا. لن تُضطر في الواقع إلى معرفة حاجة كل مكوّن إذ تأتي هذه الأسلاك على شكل توصيلات مخصصة ثم تصل كل مكوّن بوصلة التغذية التي تناسبه. لا ترى في الحواسب المحمول هذا التفصيل، بل تجد محوّلًا خارجيًا لتحويل التيار المتناوب إلى مستمر بجهد من 15 إلى 20 فولت وتيار يصل إلى 5 أمبير ثم تتكفل دارة التغذية المدمجة مع اللوحة الأم بإدارة التغذية الكهربائية للمكونات وتأمين شحن البطارية ومراقبة حالتها. بطاريات الحاسوب المحمول تستخدم عادة بطاريات الليثيوم-أيون وبطاريات بوليمير- أيون حاليًا لتخزين الطاقة الكهربائية وقد تصل قدرة بعضها على تشغيل الحاسوب للأعمال الاعتيادية حتى 10 ساعات عمل متواصل وفقًا للتكنولوجيا المستخدمة لكن أغلبها يدعم الحاسوب مدة 2-4 ساعة. تأتي البطاريات إما بشكل قطعة مستقلة خارجية قابلة للتبديل أو داخلية مدمجة مع الحاسوب، ويستخدم النوع الثاني في تصميم الحواسب المحمولة خفيفة الوزن. مكونات الحاسب المساعدة والملحقة لا تُعد مكونات الحاسب هذه أساسية لعمل الحاسب لكنها تقدم دعمًا وظيفيًا كبيرًا له. من أهم هذه المكونات نجد: محوّلات الشبكة محوّل الشبكة السلكي محوًلات الشبكة اللاسلكية أجهزة الدخل والخرج لوحة المفاتيح الفأرة شاشات العرض شاشات اللمس الأجهزة الملحقة محولات الشبكة Network Adapters وهي تجهيزات إلكترونية تؤمن تواصل الحاسوب مع التجهيزات المحيطة أو مع الشبكة المحلية وهي على نوعين سلكية ولاسلكية محول الشبكة السلكي Ethernet Adapter يستخدمه الحاسب للاتصال مع الشبكة المحلية أو مع موجّه الإنترنت ومع كل جهاز يستطيع التواصل من خلال المنفذ RJ45 بواسطة كابل خاص يدعى كابل إيثرنت. تصل سرعة نقل البيانات باستخدام هذا المحول إلى 2 جيغا بايت في الثانية. محولات الاتصال اللاسلكي محول الشبكة اللاسلكية WiFi: يستخدم الجهاز لنقل البيانات لاسلكيًا بين أي تجهيزتين تدعمان WiFi. تصل سرعة نقل البيانات إلى 9 جيغا بت في الثانية في الجيل السادس 802.11ax، ويأتي هذا المحول مدمجًا مع الحواسب المحمولة ويمكن وصله مع الحاسوب المكتبي من خلال منفذ USB. محوّل الاتصال اللاسلكي بتقنية بلوتوث BT: تُستخدم هذه التجهيزات لوصل الحاسوب مع تجهيزات قريبة في نطاق الغرفة مثل السماعات اللاسلكية ولوحة المفاتيح والفأرة. آخر إصدار لهذه التقنية هو 5.3 ويحدّث كل إصدار بروتوكولات الاتصال المستخدمة وبعض المواصفات. يأتي هذا المحوّل مدمجًا مع الحواسب المحمولة ويمكن وصلها مع الحاسوب المكتبي من خلال منفذ USB. أجهزة الدخل والخرج هنالك الكثير من أجهزة الدخل والخرج المرتبطة بالحاسوب والتي تتغير وتتنوع بتقدم الزمن وتطور التكنلوجيا فقد تطورت من عصا التحكم في غابر الزمن عند ظهور الحواسيب إلى شاشات اللمس المتطورة والأقلام الإلكترونية والمتحكمات اللاسكلية وغيرها، وسنذكر حاليًا أهم وأشهر أجهزة الدخل والخرج المرتبطة بالحاسوب. لوحة المفاتيح تعمل لوحات المفاتيح الميكانيكية Keyboard على مبدأ نقل إشارة كهربائية إلى الحاسوب عند الضغط على الزر. تضم لوحة المفاتيح بين 102 إلى 104 مفتاح وقد يقل هذا العدد في الحواسب المحمولة. تتصل لوحة المفاتيح بالحاسوب المكتبي من خلال منفذ PS/s أو منفذ USB أو لاسلكيًا، أما في الحواسب المحمولة فتتصل عبر كابلات خاصة داخلية. تتميز بعض لوحات المفاتيح بوجود إضاءة خلفية للأزرار كما يحتوي بعضها على أزرار إضافية يمكن برمجتها لأداء وظائف إضافية. الفأرة الفأرة Mouse هو جهاز تأشير وتحكم يسمح لمستخدم الحاسوب باستخدام الواجهة الرسومية لنظام التشغيل. أكثر الفأرات استخمامًا حاليًا هي الفأرة الضوئية ولوحات اللمس touchpad، وتتصل الفأرة بالحاسوب من خلال منفذ PS/2 أو USB أو لاسلكيًا أو من خلال وصلات شريطية ضمن الحواسب المحمولة. لا بد من الإشارة أخيرًا إلى مفهوم هام هو دقة الفأرة ويقدّر بالنقطة في الإنش DPI إذا تصمم الفأرة المعيارية بدقة 400 أو 800 نقطة في الإنش إلّا أن الفأرة المستخدمة في الألعاب أو برامج التصميم والرسم تتطلب دقة أعلى لهذا تجد بعضها بدقة تصل إلى 1600 نقطة في الإنش وكلما كانت الدقة أكبر أمكنك التحكم أكثر في دقة الحركة أو المنحنيات المرسومة. شاشة العرض تُستخدم حاليًا تقنيتان رئيسيتان في شاشات العرض هما LED LCD أي شاشات الكريستال السائل المضاءة بالمؤشرات الضوئية led وتقنية OLED أي الشاشات المصنعة من مؤشرات ضوئية عضوية organic led (مصنوعة من بلاستيك ناقل للتيار الكهربائي). تتنافس التقنيتان وتتطوران معًا بخصوص وضوح الألوان وحيويتها وزاوية الرؤية المتاحة وتقنيات تحسينها (مثل IPS وTN) ومعدّل تحديث الصورة (سرعة تحديث الصورة المعروضة وقد وصلت حديثًا إلى 360 هرتز) ودقتها أي عدد البيكسلات في الطول والعرض فقد وصلت دقة بعض شاشات العرض حاليًا إلى 8000 بكسل عرضًا أو ما يُعرف بدقة 8k. شاشات اللمس هي في واقع الأمر شاشة عرض مزوّدة بواجهة لمس مدمجة معها وبالتالي يمكنها تحديد المكان الحقيقي للنقر أو اللمس على الشاشة وبالتالي ستستخدم الشاشة كفأرة وكلوحة مفاتيح. تستجيب لوحات اللمس المدمجة إلى حركة الأصابع العشرة معًا وتُستخدم هذه الشاشات في الحواسب المحمولة وحواسب التحكم الآلي ونقاط البيع والخدمة الذاتية لتقليل عدد تجهيزات الدخل والخرج. تجهيزات ملحقة مثل الطابعات وأجهزة المسح بأنواعها ومكبرات الصوت وأجهزة الرسم، إذ يمكنك وصل أي تجهيزة إلكترونية قادرة على التخاطب مع الحاسوب لتنفيذ العمل الذي تريده. خاتمة لا تزال صناعة الحواسب بكافة أنواعها صناعة رائجة جدًا وهامة جدًا لا غنى عنها إطلاقًا حاليًا ولا مستقبلًا، لذلك هي عرضة للتغيير المستمر والتطوير المستمر لإدخال تقنيات جديدة وتحديث المعايير التصميمية والصناعية لتلائم التطور التقني الذي تُعد الحواسب الركيزة الأساسية والمسبب الحقيقي له. حاولنا في هذا المقال الإحاطة العامة بمكونات الحاسب الرئيسية وشرح بعض الأفكار والمصطلحات التي قد يصادفها المهتم في مجال العتاد الصلب كما تطرقنا إلى مكونات الحاسوب المساعدة والملحقة لتكوين فكرة عن دور كل مكوّن ويمتلك أرضية صلبة في اختيار مواصفات أي حاسوب عند شرائه أو عند الرغبة في تحديث مكوناته. يمكنك الاطلاع أيضًا على سلسلة CompTIA التي تشرح عناصر الحاسوب باستفاضة. اقرأ أيضًا الحاسوب المحمول العمليات وعناصرها في نظام تشغيل الحاسوب تعرف على مكونات الشبكة المدخل الشامل لتعلم علوم الحاسوب

نلقي نظرة في هذا المقال على محددات تُدعى محددات التجميع أو الضم combinators، فهي تجمع بين محددات أخرى بطريقة تُرسي نوعًا من العلاقية المفيدة فيما بينها وبين أماكن توزع المحتوى في الصفحة. ننصحك قبل متابعة القراءة أن تكون على دراية بالمواضيع التالية: أساسيات عمل الحاسوب تثبيت البرمجيات الأساسية للانطلاق في تطوير الويب أساسيات التعامل مع الملفات فكرة عن أساسيات HTML فكرة عن أساسيات عمل لغة CSS محددات العناصر السليلة تُمثَّل مجمعات العناصر السليلة descendant combinator عادة بمسافة فارغة واحدة " " وتجمع محددين وفق آلية اختيار العناصر التي يطابقها المحدد الثاني إن كان لها عناصر سَلَف (أب مباشر أو أب لأب مباشر أو أب لأب لأب مباشر وهكذا) يطابقها المحدد الأول. تُدعى المحددات التي تستخدم مجمعات العناصر السليلة بمحددات العناصر السليلة. body article p نطابق في المثال التالي فقط العناصر <p> الموجودة داخل عنصر يمتلك الصنف box.: محددات الأبناء المباشرين تُوضع إشارة مجمعات الأبناء المباشرين child combinator والتي تمثل < بين محددي CSS، وتطابق فقط العناصر التي يختارها المحدد الثاني إن كانت أبناءً مباشرين للعناصر التي يختارها المحدد الأول. لن تُختار بالطبع العناصر إن لم تكن من الأبناء المباشرين. فلو أردنا فقط اختيار عناصر <p> التي تُمثِّل أبناءً مباشرين للعناصر <article> مثلًا سيكون الضم كالتالي: article > p لدينا في المثال التالي قائمة غير مرتبة ضمنها قائمة مرتبة. سنستخدم محدد العناصر السليلة لاختيار عناصر القائمة <li> التي تمثِّل أبناء مباشرين للقائمة غير المرتبة <ul> ونحيطها بإطار يظهر منه الحد العلوي. إن أزلت الإشارة التي تدل على محدد الأبناء المباشرين، سينتهي بك المطاف إلى محدد العناصر السليلة وسيظهر الإطار السابق حول جميع عناصر القائمة <li>. محددات الأخوة المتجاورين توضع إشارة محدد الأخوة المتجاورين adjacent sibling selector والتي تمثل + بين محددي لغة CSS وتطابق فقط العناصر التي يختارها المحدد الثاني إن كان أيًا منه الأخ التالي مباشرة للعناصر التي يختارها المحدد الأول. فلو أردنا مثلًا أن نختار فقط كل الصور <img> التي يليها مباشرة العنصر <p>، نستخدم محدد الأشقاء المتجاورين التالي: p + img إنّ أكثر الاستخدامات شيوعًا لهذا المحدد هي اختيار فقرة نصية بعد عنوان كما في المثال التالي. إذ يبحث المحدد في هذا المثال عن أي فقرة نصية تشترك بعنصر أب يمثّل عنوانًا من المستوى الأول <h1> وتأتي بعده مباشرة. لو أدرجت أي عنصر آخر مثل <h2> بين <p> و<h1> فلن يُطابق المحدد أي فقرة نصية، ولن يُطبق التنسيق على لوني الخط والخلفية عندما يتجاور العنصران. محددات العناصر الأخوة يُستخدم محدد العناصر الأخوة general sibling combinator والذي يمثل ~ لاختيار أية أشقاء لعنصر حتى لو لم تجاوره. فلاختيار جميع الصور <img> التي تأتي في أي مكان بعد فقرة نصية <p> نستخدم المحدد التالي: p ~ img نختار في المثال التالي جميع الفقرات النصية <p> التي تأتي بعد العنوان <h1>. ولاحظ أنه على الرغم من وجود العنصر <div> في الشيفرة فسيختار المحدد الفقرة النصية <p> التي تأتي بعده طالما أنها بعد العنوان <h1> أيضًا. استخدام محددات التجميع يمكنك الدمج بين أيٍّ من المحددات التي تعرفنا عليها سابقًا ومحددات التجميع لانتقاء جزء من الملف. فلو أردنا مثلًا أن نختار عناصر قوائم تمتلك الصنف "a" والتي تمثل أبناءً مباشرين لقائمة غير مرتبة <ul> بإمكاننا استخدام المحدد التالي: ul > li[class="a"] { } وعليك الانتباه عندما تُنشئ قوائم طويلة من المحددات لاستهداف قسم محدد جدًا من الصفحة، فمن الصعب إعادة استخدام هذا المحدد لأنه خاص جدًا بعنصر معين ضمن شيفرة معينة. من الأفضل غالبًا إنشاء صنف محدد وتطبيقه على العنصر الذي تريد استهدافه بالتحديد. وبما أننا تطرقنا إلى هذه الفكرة، لا بدّ من الإشارة إلى أن معرفتك بمحددات التجميع ستفيدك جدًا إن احتجت الوصول إلى مكان في صفحتك ولم تكن قادرًا على الوصول إلى شيفرة HTML الخاصة بها لأسباب قد تتعلق بأنظمة إدارة المحتوى CMS مثلًا. يمكنك الرجوع إلى صفحة محددات CSS في موسوعة للاطلاع على القائمة الكاملة بالتفصيل. ترجمة -وبتصرف- للمقال Combinators. اقرأ أيضًا المقال السابق: محددات الأصناف الزائفة pseudo-classes والعناصر الزائفة pseudo-elements في CSS المحددات (Selectors) في CSS 10 محددات CSS لا تليق البرمجة بدونها

تقدم لغة CSS عددًا كبيرًا من المحددات التي تُعرف بمحددات الأصناف الزائفة pseudo-classes ومحددات العناصر الزائفة pseudo-elements التي تخدم غايات خاصة في تنسيق العناصر. عندما تستوعب طريقة عملها، ستكون قادرًا على البحث ضمن القوائم على ما يناسب المهمة التي تريد إنجازها. ننصحك قبل متابعة القراءة أن تكون على دراية بالمواضيع التالية: أساسيات عمل الحاسوب تثبيت البرمجيات الأساسية للانطلاق في تطوير الويب أساسيات التعامل مع الملفات فكرة عن أساسيات HTML فكرة عن أساسيات عمل لغة CSS محددات الأصناف الزائفة pseudo-classes وهي محددات تختار العناصر التي تتميز بوضع معين كأن تكون العناصر الأولى من نوعها أو أن يكون مؤشر الفأرة مارًا فوقها. تميل هذه المحددات لأن تشابه في عملها تطبيق صنف معين على جزء من الملف، وتساعد غالبًا في تقليل عدد الأصناف التي تستخدمها في شيفرتك، مما يجعلها أكثر مرونة وقابلية للصيانة. تبدأ الأصناف الزائفة بالنقطتين المتعامدتين(:) كما بالشكل التالي: :pseudo-class-name مثال بسيط عن محددات الأصناف الزائفة لنلق نظرة على المثال البسيط التالي الذي نحاول فيه جعل الفقرة الأولى من المقالة كبيرًا وبخط سميك. يمكننا أن نضيف صنفًا إلى الفقرة ثم نكتب قاعدة تنسيق لهذا الصنف كالتالي: لكن الأمر قد يزيد صعوبة صيانة الشيفرة، فقد تُضاف فقرة جديدة إلى أعلى الصفحة وعليك عندها نقل الصنف إلى هذه الفقرة. وبدلًا من ذلك يمكننا استخدام محدد الأصناف الزائفة first-child: الذي يستهدف دائمًا الابن الأول في المقالة، ولا حاجة عندها لتعديل شيفرة HTML (وقد يكون أمر التعديل مستحيلًا نظرًا لوجود نظام إدارة محتوى يولّد هذه الشيفرة مثلًا ? تسلك جميع محددات الأصناف الزائفة السلوك السابق، إذ تستهدف جزءًا من الملف الذي يتمتع بوضع معين وتتصرف وكأنك أضفت صنفًا إلى شيفرتك. من الأصناف الزائفة أيضًا: ‎:last-child ‎:only-child ‎:invalid ملاحظة: تُعد القاعدة التي تبدأ بصنف زائف وعنصر دون أية محددات عناصر تسبقها صحيحة. إذ يمكنك كتابة القاعدة في المثال السابق على الشكل first-child: وعندها ستُطبّق على أي عنصر يكون ابنًا للعنصر <article> وليس فقط أول عنصر ابن يكون فقرة نصية. فكتابة المحدد first-child: تكافئ المحدد first-child:*، لكن لا بدّ أن تكون أكثر تحديدًا في أغلب الأحيان. محددات أصناف زائفة مرتبطة بأفعال المستخدم تُطبق تنسيقات بعض محددات الأصناف الزائفة عندما يتفاعل المستخدم مع الصفحة بطريقة ما. تُدعى هذه المحددات أحيانًا الأصناف الزائفة الديناميكية وتُطبق كما لو أنك أضفت صنفًا إلى عنصر عندما يتفاعل معه المستخدم. إليك بعض الأمثلة: hover:: وتُطبّق عندما يمرر المستخدم مؤشر الفأرة فوق عنصر وهذا العنصر المستهدف هو الرابط عادةً. focus:: وتُطبق عندما يعطي المستخدم تركيز الدخل إلى عنصر بالنقر عليه أو من خلال لوحة المفاتيح. محددات العناصر الزائفة pseudo-elements تسلك هذه المحددات سلوك محددات الأصناف الزائفة، وتعمل وكأنك أضفت عنصر HTML جديد إلى شيفرتك بدلًا من تطبيق صنف على عنصر موجود. تبدأ محددات العناصر الزائفة بنقطتين متعامدتين مزدوجتين (::). ::pseudo-element-name ملاحظة: استخدمت بعض العناصر الزائفة في البدايات نقطتين متعامدتين فقط (:)، لذا قد ترى ذلك في شيفرة أو في مثال. تدعم المتصفحات الحديثة تلك الصياغة بالإضافة إلى الصياغة الجديدة لأغراض التوافق. لو أردت مثلًا أن تستهدف السطر الأول من فقرة ستتمكن من ذلك بتغليف هذا السطر داخل العنصر <span> ثم اختيار محدد عنصر. لكن ستفشل العملية إن كان عدد الكلمات التي تغلفها أكثر أو أقل من اتساع العنصر الأب. وطالما أننا لن نعرف بدقة عدد الكلمات التي ستقع في سطر واحد، إذ سيتغير العدد وفقًا لاتساع شاشة العرض، فمن الصعب التأكد من نجاح الأمر باستخدام شيفرة HTML فقط. سينجز محدد العناصر الزائفfirst-line:: هذه العملية بسهولة، وسيطبق التنسيق على السطر الأول إن زاد أو قل عدد الكلمات. يعمل المحدد السابق كعنصر <span> سحري يغلف السطر المطلوب وينسقه ويعدّل وضعه إن تغير طول السطر. لاحظ أيضًا كيف اختار السطر الأول من الفقرة الثانية أيضًا! الجمع بين محددات الأصناف الزائفة ومحددات العناصر الزائفة إن أردت أن تجعل خط الكتابة في أول سطر في أول فقرة نصية سميكًا يمكن ضم المحددين first-child: وfirst-line:: على التسلسل. حاول أن تعدّل الشيفرة في المثال السابق لتصبح على الشكل التالي: article p:first-child::first-line { font-size: 120%; font-weight: bold; } تعني هذه القاعدة استهداف أول سطر لأول فقرة نصية <p> داخل العنصر <article>. إنشاء محتوى باستخدام المحددين before:: و after:: يُستخدم المحددين السابقين مع الخاصية content لإدراج محتوى في ملف HTML باستخدام CSS. يعرض المثال التالي كيف تستخدم المحدد before:: والخاصية السابقة في إدراج النص الذي يمثل قيمة هذه الخاصية قبل محتوى العنصر الذي يمتلك الصنف box. كما يمكنك استخدام المحدد after:: لإدراج هذا النص في نهاية محتوى ذلك العنصر. لا نستخدم هذا الأسلوب كثيرًا في إدراج المحتوى في صفحات الويب، لأن هذا المحتوى لن يكون مقروءًا بالنسبة لقارئات الشاشة وقد تواجه صعوبة في إيجاده وتعديله إن لزم الأمر. أما الاستخدام المفيد حقًا لهذه التقنية فهو إدراج أيقونة مثلًا. لاحظ أيقونة السهم التي أدرجناها في الشيفرة التالية كمثال عن محتوىً يمكن إضافته إن لم نكن نريد لقارئات الشاشة التعرف عليه. تُستخدم محددات العناصر الزائفة مرارًا في إدراج سلسلة نصية فارغة يمكن تنسيقها لاحقًا كأي عنصر من عناصر الصفحة. أضفنا في المثال التالي سلسلة نصية فارغة باستخدام المحدد before:: ووضعنا داخله التصريح display: block لكي نتمكن من ضبط أبعاده. ثم استخدمنا بعد ذلك لغة CSS لتنسيقه كأي عنصر. حاول أن تغير في التنسيقات وتراقب ما الذي سيحدث! يُدعى أسلوب إدراج المحتوى باستخدام before:: وafter:: مع الخاصية content في CSS بأسلوب "المحتوى المولَّد"، وسترى كثرة استخدام هذا الأسلوب في إنجاز مهام مختلفة. وعندما ترى هذين المحددين، ابحث عن الخاصية content وانظر إلى محتواها لتعرف ما سيُضاف إلى محتوى الصفحة. مرجع إلى محددات الأصناف الزائفة والعناصر الزائفة نقدم لك في الجدول التالي مرجعًا إلى أكثر المحددات السابقة شيوعًا ووصفًا لعمل كلٍ منها، كما ربطنا كل محدد بشرح إضافي له موجود على موسوعة حسوب. محددات الأصناف الزائفة المحدد الوصف active: يطبق التنسيق عندما يٌفعّل المستخدم عُنصرًا (كالنقر عليه مثلًا). any-link: يُطبق التنسيق على حالتي الرابط link: و:visited: blank: يطبق التنسيق على العنصر <input> إن كان فارغًا. checked: يطبق التنسيق على أزرار الخيارات المتعددة radio buttons ومربعات التحقق التي تتمتع بحالة معينة. current: يُطبق التنسيق على العنصر الذي يُعرض حاليًا أو أحد آبائه default: يطبق التنسيق على عنصر واجهة المستخدم الافتراضي من بين مجموعة عناصر مشابهة dir: يختار العنصر وفقًا لاتجاهه (قيمة السمة dir في HTML أو قيمة الخاصية direction في CSS) disabled: يطبق التنسيق على عنصر واجهة مستخدم عندما يكون في حالة التعطيل empty: يطبق التنسيق على عنصر لا يمتلك أبناء ماعدا مسافة فارغة اختيارية. enabled: يُطبق التنسيق على عنصر واجهة مستخدم عندما يكون في حالة تمكين first: يطبق التنسيق على أول صفحة في الوسائط التي تدعم الصفحات المتعددة. ‎:first-child يطبق التنسيق على أول عنصر بين مجموعة أشقاء. ‎:first-of-type يطبق التنسيق على أول عنصر من نوع محدد من بين مجموعة أشقاء. focus: يطبق التنسيق على العنصر الذي يتلقى تركيز الدخل. ‎:focus-visible يُطبق التنسيق على عنصر تلقى التركيز وهذا التركيز مرئي بالنسبة للمستخدم. focus-within: يطبق التنسيق على عنصر يمتلك تركيز الدخل بالإضافة إلى عنصر له سليل تلقى تركيز الدخل أيضًا. future: يطبق التنسيق على العنصر التالي للعنصر الحالي. hover: يطبق التنسيق عندما يمر مؤشر الفأرة فوق العنصر. indeterminate: يطبق التنسيق على عناصر واجهة المستخدم قيمة حالتها غير محددة وعادة ما تطبق على أزرار التحقق checkbox. in-range: يطبق التنسيق على عنصر لقيمته مجال محدد وكانت هذه القيمة ضمن المجال. invalid: يطبق التنسيق على عنصر مثل <input> عندما يكون في حالة غير صحيحة. lang: يطبق التنسيق على عنصر بناءً على اللغة (قيمة السمة lang لهذا العنصر) last-child: يطبق التنسيق على آخر عنصر بين مجموعة أشقاء last-of-type: يطبق التنسيق على آخر عنصر من نوع محدد من بين مجموعة أشقاء. left: يطبق التنسيق على الصفحة اليسرى في الوسائط التي تدعم الصفحات المتعددة. link: يطبق التنسيق على الروابط التي لم تُزار بعد. local-link: يطبق التنسيق على الروابط التي تشير إلى صفحات تقع في نفس موقع الصفحة الحالية. ‎:is()‎ يطابق أي محدد من قائمة المحددات الممرة. not: يطابق الأشياء التي لا يطابقها المحد الممر كقيمة لهذا المحدد. nth-child: يطابق عناصر ضمن قائمة أشقاء وفق صيغة (آ.ن+ب). فالصيغة 2ن+1 ستطابق العناصر الفردية 1،3،5،7 وهكذا. ‎:nth-of-type: يطابق عناصر من نوع محدد (<p> مثلًا) ضمن قائمة أشقاء وفق صيغة (آ.ن+ب). فالصيغة 2ن+1 ستطابق العناصر الفردية من النوع المحدد 1،3،5،7 وهكذا ‎:nth-last-child: يطابق عناصر ضمن قائمة أشقاء وفق صيغة (آ.ن+ب) لكن من النهاية إلى البداية. فالصيغة 2ن+1 ستطابق العنصر الأخير ثم يتجاوز عنصر ويختار الذي يسبقه وهكذا أي كل النقاط الفردية لكن من النهاية. ‎:nth-last-of-type: يطابق عناصر من نوع محدد (<p> مثلًا) ضمن قائمة أشقاء وفق صيغة (آ.ن+ب) لكن من النهاية إلى البداية. فالصيغة 2ن+1 ستطابق العنصر الأخير ثم يتجاوز عنصر ويختار الذي يسبقه وهكذا أي كل النقاط الفردية لكن من النهاية. only-child: يطبق التنسيق على عنصر لا أشقاء له. ‎:only-of-type: يطابق العنصر الوحيد من نوعه ضمن قائمة أشقاء. optional: يطبق التنسيق على العناصر غير الضرورية (الاختيارية). ‎:out-of-range يطبق التنسيق على عنصر لقيمته مجال محدد وكانت هذه القيمة خارج المجال. ‎:past يطبق التنسيق على العنصر الذي يسبق العنصر الحالي. ‎:placeholder‎-shown يطبق التنسيق على عنصر إدخال يُظهر مكانًا لكتابة نص. playing: يطبق التنسيق على عنصر يمثل صوت أو فيديو أو مورد مشابه يمكن تشغيله وإيقافه وذلك في الحالة التي يُشغّل فيها. ‎:paused يطبق التنسيق على عنصر يمثل صوت أو فيديو أو مورد مشابه يمكن تشغيله وإيقافه وذلك في الحالة التي يوُقف فيها. read-only: يطبق التنسيق على العناصر التي لا يمكن للمستخدم تبديلها. read-write: يطبق التنسيق على العناصر التي يمكن للمستخدم تبديلها. required: يُطابق عناصر النموذج الضرورية right: يطبق التنسيق على الصفحة اليمنى في الوسائط التي تدعم الصفحات المتعددة. root: يُطبق التنسيق على العنصر الذي يعتبر العنصر الجذري للملف. ‎:scope يطبق التنسيق على أي عنصر يمثل عنصر مجال رؤية. valid: يطبق التنسيق على عنصر مثل <input> عندما يكون في حالة صحيحة. target: يطبق التنسيق على عنصر إن كان هدفًا لعنوان URL الحالي visited: يطبق التنسيق على الروابط المُزارة. يمكنك الرجوع إلى صفحة محددات الأصناف الزائفة في موسوعة حسوب للاطلاع على القائمة الكاملة بالتفصيل. محددات العناصر الزائفة المحدد الوصف after:: يُدرج عنصرًا قابلًا للتنسيق بعد المحتوى الأصلي لعنصر إن استُخدم مع الخاصية content التي لها قيمة لا تساوي none. before:: يُدرج عنصرًا قابلًا للتنسيق قبل المحتوى الأصلي لعنصر إن استُخدم مع الخاصية content التي لها قيمة لا تساوي none. first-letter:: Matches the first letter of the element. يُطابق الحرف الأول من العنصر first-line:: يطبق التنسيق على السطر الأول من العنصر الذي يحتوي نصًا. grammar-error:: يطابق جزءًا من محتوى الملف يحوي أخطاء قواعدية حددها المتصفح. marker:: يُطابق صندوق التحديد marker box لقائمة عناصر تستخدم النقاط أو التعداد. selection:: يطابق الجزء المُختار من ملف spelling-error:: يطابق جزءًا من محتوى الملف يحوي أخطاء إملائية يحددها المتصفح. يمكنك الرجوع إلى صفحة محددات العناصر الزائفة في موسوعة حسوب للاطلاع على القائمة الكاملة بالتفصيل. ترجمة -وبتصرف- للمقال pseudo-classes and pseudo-elements. اقرأ أيضًا المقال السابق: محددات الخاصية Attribute في CSS 5 فئات زائفة (pseudo-class) يجب عليك معرفتها في CSS استخدام النماذج في HTML5 مع الأصناف الزّائفة (pseudo-classes) في CSS3 تحريك شبه العناصر (pseudo-elements) في CSS

تمتلك عناصر HTML ما يُسمى السمات أو الخاصيات Attributes التي تعطي تفاصيل أكبر عن العنصر الذي نوصِّفه. يمكننا استخدام محددات الخاصيات هذه في CSS لاستهداف عناصر تمتلك خاصية معينة، وهذا ما سندرسه في هذا المقال. ننصحك قبل متابعة القراءة أن تكون على دراية بالمواضيع التالية: أساسيات عمل الحاسوب تثبيت البرمجيات الأساسية للانطلاق في تطوير الويب أساسيات التعامل مع الملفات فكرة عن أساسيات لغة CSS. محددات وجود الخاصية وامتلاكها لقيمة محددة تتيح هذه المحددات اختيار عناصر HTML بناءً على مجرد وجود خاصية محددة في العنصر مثلًا الخاصية href، أو وجود الخاصية مع اشتراط امتلاكها لقيمة تتطابق كليًا أو جزئيًا مع قيمة محددة سلفًا. المحدد مثال الوصف [attr] a[title] يطابق العنصر المحدد الذي يمتلك الخاصية المذكورة بين القوسين المربعين. [attr=value] a[href="https://example.com"] يطابق العناصر التي تمتلك الخاصية المذكورة عندما تتطابق قيمتها بالضبط مع القيمة المذكورة بين إشارتي التنصيص. [attr~=value] p[class~="special"] يطابق العناصر التي تمتلك الخاصية المذكورة عندما تتطابق قيمتها مع القيمة المذكورة بين إشارتي التنصيص أو التي تحوي قيمتها القيمة الموجودة بين إشارتي التنصيص. [attr|=value] div[lang|="zh"] يطابق العناصر التي تمتلك الخاصية المذكورة عندما تتطابق قيمتها مع القيمة المذكورة بين إشارتي التنصيص أو التي تبدأ قيمتها بالقيمة الموجودة بين إشارتي التنصيص تليها مباشرة شرطة (-). نستعرض في المثال التالي الموجود في المحرر التفاعلي كيفية استخدام تلك المحددات. li[class]‎: يطابق هذا المحدد جميع عناصر القائمة التي تمتلك الخاصية class. وسيطبق في المثال على جميع عناصر القائمة ما عدا الأول. li[class="a"]‎: يطابق المحدد جميع عناصر القائمة التي تمتلك الخاصية class على أن تكون قيمتها a. ونظرًا لوجود فراغ كجزء من القيمة في العنصر الثالث، سيُطبَّق المحدد على عنصر القائمة الثاني فقط. li[class~="a"]‎: يطابق المحدد جميع عناصر القائمة التي تمتلك الخاصية class على أن تكون قيمتها a أو أن تكون a جزءًا من قيمتها، لذا سيُطبّق المحدد على العنصرين الثاني والثالث في القائمة. محددات الأجزاء النصية تسمح لك هذه المحددات باستهداف الخاصيات بناء على وجود جزء من نص ضمن قيمة الخاصية. فلو كان لديك على سبيل المثال الصنفان box-warning وbox-error وأردت أن تستهدف كل شيء يبدأ بالعبارة "box-‎"، يمكنك في هذه الحالة استخدام القاعدة ["-class^="box] أو القاعدة ["class^="box] لاختيار كلا الصنفين السابقين. المحدد مثال الوصف [attr^=value] li[class^="box-"] يُطابق العناصر التي تملك خاصية تبدأ بالقيمة المذكورة بين القوسين المربعين والتي تلي المساواة. [attr$=value] li[class$="-box"] يُطابق العناصر التي تملك خاصية تنتهي بالقيمة المذكورة بين القوسين المربعين والتي تلي المساواة. [attr*=value] li[class*="box"] يُطابق العناصر التي تمتلك الخاصية المذكورة بين القوسين المربعين على أن تضم قيمتها القيمة التي تلي المساواة (=) في أي مكانٍ منها. ملاحظة: كي نتمكن من تحديد مواقع معينة في السلسلة النصية الممررة فقد استخدمنا التعابير النمطية regular expressions مع المحرفين ^ الذي يعني بداية التعبير النمطي و$ الذي يعني نهاية التعبير، وبذلك يمكننا البحث عن نصوص تبدأ بنمط معين أوتنتهي بنمط معين. نستعرض في المثال التالي الموجود في محرر الشيفرة التفاعلي تطبيق المحدد السابق: li[class^="a"]‎: يُطابق أي خاصية تبدأ بالحرف a، وبالتالي سيُطبق التنسيق على أول عنصرين من عناصر القائمة. li[class$="a"]‎: يُطابق أي خاصية تنتهي بالحرف a، وبالتالي سيُطبق التنسيق على العنصرين الأول والثالث. li[class*="a"]‎: يُطابق أي خاصية يظهر الحرف a في أي موقع من قيمتها، وبالتالي سيُطبق التنسيق على جميع العناصر في القائمة. مطابقة حالة الأحرف إن أردت أن تطابق قيمة خاصية أو سمة ما دون أخذ حالة الأحرف الكبيرة أو الصغيرة بعين الاعتبار(case-insensitively)، بإمكانك أن تضع المحرف (أو الراية) i قبل قوس النهاية. تخبر هذه الراية المتصفح أن يُطابق بشكل غير حساس لحالة الأحرف ووفقًا لمحارف آسكي، وبدون وجودها سيطابقها المتصفح وفقًا لحالة المحارف التي تحددها لغة المستند ففي المستندات المكتوبة بلغة HTML ستكون المطابقة حساسة لحالة الأحرف. لاحظ في المثال التالي كيف يُطابق المحدد الأول خاصية تبدأ قيمتها بالحرف الصغير a، وستكون النتيجة استهداف عنصر القائمة الأول فقط وجعل لون الخلفية background-color أصفر لأنّ العنصرين الآخرين يبدآن بحرف كبير A. بينما يستخدم المحدد الثاني الراية i ما يجعله غير حساس لحالة الأحرف وبالتالي سيطابق جميع عناصر القائمة ويغير لون الخط فيها للأحمر. ملاحظة: ظهرت قيمة جديدة s تجبر المطابقة مع الانتباه لحالتي الأحرف عندما يكون السياق حساسًا لحالة الأحرف. لكن هذه الراية غير مدعومة كفاية من المتصفحات حاليًا، ولن تكون مفيدة جدًا في HTML. ترجمة -وبتصرف- للمقال Attribute selectors اقرأ أيضًا المقال السابق: محددات النوع والأصناف والمعرّفات في CSS أساسيات استعمال لغة CSS HTML و CSS للمبتدئين: مقدمة إلى تنسيقات CSS المحددات (Selectors) في CSS التفريق بين السمات (attributes) في HTML والخاصيات (properties) في جافاسكربت

نستعرض في هذا المقال بعضًا من أبسط محددات CSS التي تطبق التنسيقات على ملفات HTML، والتي ستستخدمها مرارًا وتكرارًا في عملك. ننصحك قبل متابعة القراءة أن تكون على دراية بالمواضيع التالية: أساسيات عمل الحاسوب تثبيت البرمجيات الأساسية للانطلاق في تطوير الويب أساسيات التعامل مع الملفات فكرة عن أساسيات HTML محددات النوع تُعرف محددات النوع Type selector أحيانًا باسم محددات الوسم tag name selector أو محددات العناصر element selector، فهي محددات تختار وسم أو عنصر HTML من الملف. لاحظ كيف استخدمنا محددات النوع span وem و strong في المثال التالي: تطبيق: حاول أن تضيف قواعد CSS لاختيار العنصر <h1> وتغيير لونه إلى الأزرق. المحددات العامة يُستخدم رمز النجمة (*) للإشارة إلى المحدد العام universal selector الذي يختار كل شيء في الملف (أو داخل العنصر الأب إن ارتبط مع عناصر أخرى ومحدد عناصر سليلة descendant combinator). نستخدم في المثال التالي محددًا عامًا لإزالة الهوامش margin من جميع العناصر، وذلك لإلغاء التنسيق الافتراضي للمتصفح الذي يمنح العناوين والفقرات النصية هامشًا. قد تشاهد أسلوبًا كهذا في التنسيق في حالات إعادة الضبط، إذ تُجرَّد الصفحة من كل التنسيقات الافتراضية للمتصفح. وطالما أن المحدد العام يطبق تغييرات كلية، فسيستخدم إذًا في حالات محددة سنشرحها تاليًا. تسهيل قراءة بقية المحددات تُستخدم المحددات العامة في تسهيل قراءة المحددات الأخرى وتوضيح طبيعة عملها. فلو أردنا مثلًا اختيار أي عنصر من سلالة العنصر <article> يكون الابن الأول لأبيه، بما في ذلك الأبناء المباشرين، ومن ثم إظهارهم بخط سميك، نستخدم الصنف المجرد first-child: بالإضافة إلى محدد النوع <article>: article :first-child { font-weight: bold; } لكن من الممكن جدًا الخلط بين هذا المحدد والمحدد article:first-child الذي يختار أي عنصر <article> يكون ابنًا لعنصر آخر. لتفادي هذا الخلط، يُضاف محدد عام إلى محدد الصنف المجرد first-child: فيصبح الأمر أكثر وضوحًا من مبدأ اختيار أي عنصر يكون الابن الأول للعنصر <article> أو الابن الأول لأي عناصر من سلالته: article *:first-child { font-weight: bold; } وعلى الرغم من أنّ القاعدتين تحققان النتيجة نفسها، إلا أنّ الثانية أسهل قراءةً. محددات الصنف تبدأ محددات الصنف class selectors بالنقطة (.)، وتختار كل ما في الملف من عناصر تمتلك هذا الصنف. لقد أنشأنا في المثال التالي الذي يعرضه محرر الشيفرة التفاعلي صنفًا يُدعى highlight وطبّقناه في أماكن عدة من ملف HTML. أما النتيجة فكانت تظليل كل العناصر التي تمتلك هذا الصنف باللون الأصفر. استهداف الأصناف في عناصر محددة يمكنك إنشاء محدد يستهدف عناصر محددة فقط تمتلك الصنف ذاته. نعرض في المثال التالي كيف سنظلل العنصر <span> الذي يمتلك الصنف highlight بلون مختلف عن العنصر <h1> الذي يمتلك نفس الصنف. تُنجز العملية باستخدام محدد نوع للعنصر الذي نريد استهدافه مع اسم الصنف الذي نريد تطبيقه باستخدام نقطة ودون وجود فراغات بين محدد النوع ومحدد الصنف: يحصر هذا الأسلوب مجال الرؤية لتطبيق القاعدة، فلن تُطبق إلا على عناصر محددة مرتبطة بصنف معين. وبالطبع عليك إضافة قواعد أخرى إن أردت استهداف عناصر أخرى. استهداف عنصر يمتلك أكثر من صنف بإمكان أي عنصر امتلاك عدة أصناف ويمكنك استهداف هذه العناصر وفقًا لأحد هذه الأصناف أو لمجموعة معينة منها. للأمر أهميته الواضحة عند بناء المكوّنات التي يمكن ضمها معًا بطرق مختلفة في صفحة الويب. لدينا في المثال التالي عنصر <div> يضم ملاحظة. نُطبِّق الإطار الرمادي عندما يمتلك العنصر الصنف notebox، وإن امتلك أيضًا أحد الصنفين warning وdanger نُغيّر لون الإطار border-color. يمكننا أن نخبر المتصفح بأننا نريد أن نختار فقط العناصر التي تمتلك صنفين وذلك بربط محدديهما معًا دون فراغ. لاحظ عدم تطبيق أي تنسيق على العنصر <div> الأخير لأنه يمتلك فقط الصنف danger إذ سيحتاج (وفقًا لقواعد التنسيق التي وضعناها) الصنف notebox أيضًا: محددات المعرّف يبدأ محدد المعرّف بالمحرف (#) ويستخدم بالطريقة ذاتها التي يُستخدم بها محدد الصنف إلا أنه يستهدف العناصر التي تمتلك معرِّفًا ID محددًا. وبالطبع، لن يمتلك سوى عنصر واحد في الصفحة المعرِّف ذاته ولا يمكن أن يمتلك أكثر من معرّف. بإمكانك أن تبدأ القاعدة بمحدد المعرّف يليه محدد نوع لاختيار عنصر من نوع محدد إذا امتلك المعرّف المطلوب. يعرض المثال التالي حالتين شائعتين لاستخدام محدد المعرّفات: تنبيه: قد يبدو لك أن استخدام المعرّف ذاته أكثر من مرة في الملف سينفع في تطبيق التنسيقات، لكن لا تفعل ذلك. إذ ستكون النتيجة شيفرة خاطئة وسلوكًا غريبًا لها في أماكن عدة. ملاحظة: رأينا في مقال سابق أن تخصيص محددات المعرّف عالٍ، وسيلغي تأثير بقية المحددات. لهذا من الأفضل في الكثير من الحالات أن تُضيف صنفًا إلى العنصر بدلًا من المعرّف. لا يمنع هذا بالطبع استخدام محدد المعرّفات إن اضطررت إلى ذلك لأسباب قد تتعلق بأذونات الوصول إلى ملفات CSS أو غيرها. ترجمة -وبتصرف- للمقال Type, class, and ID selectors اقرأ أيضًا: المقال السابق: أنواع محددات التنسيق في CSS المحددات (Selectors) في CSS أساسيات استعمال لغة CSS HTML و CSS للمبتدئين: مقدمة إلى تنسيقات CSS

تُستخدَم المحددات في CSS لاستهداف عناصر HTML في صفحة الويب التي نريد تنسيقها، كما تتيح هذه اللغة مجموعةً متنوعةً من هذه المحددات التي تمكننا من اختيار العناصر التي ننوي تنسيقها بدقة، وسنناقش في هذا المقال والمقالات الفرعية المتعلقة به الأنواع المختلفة للمحددات بتفاصيل أكثر، لنقف على آلية عملها، كما ننصحك قبل متابعة القراءة أن تكون على دراية بالمواضيع التالية: أساسيات عمل الحاسوب. أساسيات تثبيت البرمجيات الأساسية للانطلاق في تطوير الويب. أساسيات التعامل مع الملفات. فكرة عن أساسيات HTML. فكرة عن أساسيات عمل CSS تعرف على محددات CSS المحدد selector هو القسم الأول من قاعدة CSS، وهو يمثل نمطًا من العناصر أو العبارات الأخرى التي تدل المتصفح على عناصر HTML التي يجب تطبيق قاعدة CSS عليها، كما تُعرف العناصر التي يختارها المحدد باسم أغراض المحدد. تعرَّفنا في مقالات سابقة على بعض أنواع المحددات وتعلمنا وجود محددات تستهدف ملف HTML بطرق مختلفة مثل اختيار عنصر مثل h1 أو صنف مثل special.. عُرِّفت المحددات في لغة CSS ضمن مواصفات اللغة، وتحتاج مثل غيرها من الأجزاء إلى دعم المتصفحات لها كي تعمل بالصورة الصحيحة، كما ستجد أنّ معظم المحددات التي نتعامل معها في هذه السلسلة معرّفة في توصيفات المحددات من المستوى الثالث، وهي مواصفات مطبّقة، وبالتالي ستجد دعمًا ممتازًا لها من قبل معظم المتصفحات. قوائم المحددات إذا أردت تطبيق تنسيق CSS نفسه على أكثر من غرض، فيمكن عندها ضم المحددات الخاصة بهذه الأغراض في قائمة محددات selector list لكي تُطبق القاعدة عليها جميعًا، فإذا كان لديك مثلًا التنسيق نفسه للعنصر h1 وللصنف special.، فسيمكن كتابة قاعدتين منفصلتين كما يلي: h1 { color: blue; } .special { color: blue; } كما يمكن ضم المحددين في قاعدة واحدة كما يلي: h1, .special { color: blue; } لاحظ استخدام الفاصلة (,) بين عناصر قائمة المحددات، وتُعدّ المسافة الفارغة بعد أو قبل الفاصلة أمرًا مقبولًا، وقد يجد البعض أن كتابة قائمة المحددات بالشكل التالي أسهل قراءةً: h1, .special { color: blue; } حاول ضم المحددين اللذين يمتلكان التصريحات نفسها في المثال التالي، وينبغي ألا يتغير مظهر الصفحة في محرر الشيفرة التفاعلي إذا نجحت في ضم المحددين. إذا جمّعت المحددات بهذه الطريقة وكان أحدها مكتوبًا بطريقة خاطئة، فسيتجاهل المتصفح هذه القاعدة برمتها، لاحظ كيف سيتجاهل المتصفح في المثال التالي القاعدة الثانية (محدد الصنف) لأنها خاطئة، لكنه سيطبق القاعدة الأولى h1 لأنها صحيحة: h1 { color: blue; } ..special { color: blue; } لكن عندما تحاول ضم القاعدتين في قاعدة واحدة كونهما يضمان التصريح ذاته، سيتجاهل المتصفح القاعدة بأكملها، فلن يُطبّق التنسيق على العنصر h1 ولا على العناصر التي تمتلك الصنف special.. h1, ..special { color: blue; } أنواع المحددات تقدِّم لك CSS مجموعات مختلفة من المحددات، وستساعدك معرفة الأنواع في إيجاد الطريقة الصحيحة لتطبيق التنسيق، وسنستعرض تاليًا عناوين المقالات الفرعية التي تُفصّل لاحقًا كل نوع من المحددات: محددات النوع والصنف والمعرف تضم هذه المجموعة المحددات التي تستهدف عناصر HTML وتعرف باسم محددات الأنواع type selectors مثل <h1> h1 { } وتضم أيضًا المحددات التي تستهدف الصنف class selectors: .box { } بالإضافة إلى المحددات التي تستهدف المعرّف ID selectors #unique { } محددات الخاصيات تتيح لك محددات الخاصيات طرقًا عدة لاختيار العناصر بناءً على وجود سمة أو خاصية معينة فيها: a[title] { } أو اختيار العناصر بناءً على وجود خاصية لها قيمة محددة: a[href="https://example.com"] { } العناصر المجردة والأصناف المجردة تضم هذه المجموعة الأصناف الوهمية pseudo-classes التي تنسق العناصر في حالات محددة، إذ يختار المحدد hover: مثلًا العنصر <a> عندما يمر فوقه مؤشر الفأرة فقط: a:hover { } كما تضم أيضًا محددات العناصر المجردة pseudo-elements التي تختار جزءًا محددًا من العنصر بدلًا من العنصر نفسه، إذ يختار المحدد first-line:: مثلًا السطر الأول من نص داخل فقرة نصية <p> ويعمل وكأنه عنصر <span> يُغلِّف السطر الأول ثم يختاره: p::first-line { } المجمعات Combinators تضم المجموعة الأخيرة من المحددات محددات أخرى لكي تستهدف عناصر الصفحة، على سبيل المثال نستخدم محددات العناصر الأبناء إذا أردنا تطبيق التنسيق على أبناء عنصر معين، تختار القاعدة التالية مثلًا الفقرات النصية التي تأتي كأبناء مباشرين للعنصر <article> باستخدام محدد الأبناء(‎>‎? article > p { } جدول مرجعي إلى المحددات يعرض لك الجدول التالي المحددات التي يمكنك استخدامها مع روابط إلى المقالات التي تتحدث عنها. كما ضمّنا هذا الجدول روابطًا إلى موسوعة حسوب لمزيد من المعلومات عن كل محدد. يمكنك العودة إلى هذا المرجع عندما تحتاج إلى البحث عن محددات خلال مسيرة تعلمك. المحدد مثال شرح المحدد في سلسلة المقالات محدد النوع {}h1 محددات الأنواع في CSS المحدد العام {}* محدد النوع العام في CSS محدد الصنف {}box. محددات الأصناف في CSS محدد المُعرِّف {}unique# محددات المعرّفات في CSS محدد السمة {}a[title] محددات السمات في CSS محدد الصنف المجرد {}p:first-child محددات الأصناف المجردة في CSS محدد العنصر المجرد {}p::first-line محددات العناصر المجردة في CSS محدد العناصر السليلة {}article p محددات العناصر السليلة في CSS محددات الأبناء المباشرين {}article > p محددات الأبناء الأشقاء في CSS محددات الأشقاء المتجاورين {}h1 + p محددات الأشقاء المتجاورين في CSS محددات الأشقاء {}h1 ~ p محددات الأشقاء في CSS الخلاصة تعرفت في هذه المقالة على الأنواع الأساسية لمحددات CSS التي تمكنك من استهداف عناصر HTML معينة وتطبيق قواعد تنسيق عليها، سنشرح في الدروس اللاحقة من هذه السلسلة كل نوع من هذه الأنواع بمزيد من التفصيل مع الأمثلة العملية. ترجمة -وبتصرف- للمقال CSS selectors اقرأ أيضا المقال السابق: التعاقب والتخصيص والوراثة في CSS. كيفية فهم وإنشاء قواعد CSS كيفية بناء موقع باستخدام CSS المحددات (Selectors) في CSS

نهدف في هذا المقال إلى تنمية قدرتك على استيعاب بعضٍ من أهم المفاهيم الأساسية في CSS وهي التعاقب cascade والتخصيص specificity والوراثة inheritance، فهذه المفاهيم الثلاثة تتحكم بكيفية تطبيق CSS على HTML وتمكنك من معرفة كيفية حل المشاكل الناتجة عن تطبيق قواعد تنسيق مختلفة على العنصر ذاته، أي حل حالات النزاع. قد تجد خلال قراءتك للمقال أنه بعيد بعض الشيء عن صلب الموضوع وأقرب إلى المقالات الأكاديمية مقارنة مع بقية مقالات السلسلة، لكن استيعاب هذه المفاهيم ستريحك لاحقًا، ولهذا ننصحك بقراءة هذا القسم بعناية وأن تتأكد من استيعابك للمفاهيم قبل الانتقال إلى موضوعات أخرى، كما ننصحك قبل متابعة القراءة أن تكون على دراية بالمواضيع التالية: أساسيات عمل الحاسوب. أساسيات تثبيت البرمجيات. أساسيات التعامل مع الملفات. فكرة عن أساسيات HTML. فكرة عن أساسيات عمل CSS تنازع قواعد CSS يأتي المصطلح CSS اختصارًا لعبارة Cascading Style Sheets وترجمتها أوراق الأنماط المتعاقبة أو المتسلسلة ومن المهم جدًا فهم معنى كلمة متعاقب Cascading، فطريقة تعاقب أو تسلسل القواعد هي مفتاح فهم لغة CSS. فقد تلاحظ في مرحلة ما عندما تعمل على مشروع فعلي أنّ بعض قواعد CSS التي أردت تطبيقها على عنصر ما لا تعمل كما تتوقع، ويكون السبب غالبًا وجود قاعدتين قابلتين للتطبيق على العنصر نفسه، ولهذا كان لا بدّ من استيعاب مفهومَي التعاقب cascading، والتخصيص specificity لأنهما الآليتان اللتان تحددان ما هي القاعدة التي ستفوز في النزاع وتنسق العنصر المستهدَف. ومن المهم أيضًا استيعاب مفهوم الوراثة inheritance في CSS والذي يعني أنّ بعض قيم خاصيات CSS التي يحملها العنصر الأب تُورّث للعنصر الحالي افتراضيًا وبعضها لا يُورّث، وهذا من شأنه أن يؤثر كذلك على تطبيق بعض قواعد التنسيق على العناصر وقد يتسبب عدم فهمه بشكل جيد في إرباكك وعدم فهمك لسلوك CSS. لنبدأ إذًا بإلقاء نظرةً سريعة على المفاهيم الأساسية التي نتعامل معها عند تطبيق التنسيقات، ثم ننظر إلى كل مفهوم على حدة ونفهم تأثيره على شيفرة CSS التي نكتبها، لا تقلق إن بدت لك هذه المفاهيم صعبة الفهم في البداية، فستغدو أكثر وضوحًا عندما تتدرب أكثر على كتابة شيفرات CSS وتعتاد عليها. مفهوم التعاقب Cascading يعني هذا المفهوم ببساطة شديدة أنّ ترتيب ظهور القواعد في شيفرة CSS مهم، فعندما تُطبق قاعدتان لهما مستوى التخصيص ذاته، فستُستخدَم القاعدة التي تظهر تاليًا في الشيفرة. لدينا في المثال التالي قاعدتان يمكن تطبيقهما على عنصر العنوان <h1>، لكن ستكون النتيجة هي ظهوره باللون الأزرق والسبب في ذلك أنّ القاعدتين تمتلكان محدِّد العنصر ذاته، أي أنهما متساويتان في التخصيص لذا ستكون الغلبة للقاعدة التي تظهر أخيرًا ضمن الشيفرة: التخصيص Specificity يُعَدّ التخصيص مفهومًا يشير إلى الخوارزمية التي يستخدمها المتصفح ليحدد قيمة الخاصية التي سيطبقها على العنصر، في حال وجود عدة قواعد تنسيق بمحددات مختلفة تقوم بإعداد نفس الخاصية بقيم مختلفة ففي هذه الحالة فإن التخصيص هو ما سيحدد قيمة الخاصية التي ستطبق على هذا العنصر. والمقصود بالتخصيص مقياس درجة التخصيص التي يملكها المحدد،وإليك توضيحًا لمستوى تخصيص كل محدد في CSS: محدد العنصر element selector أقل خصوصيةً لأنه سيختار كل عناصر الصفحة من النوع ذاته لذا يُعطى تقييمًا أقل فيما يتعلق بالخصوصية. كما أن محددات العناصر الزائفة Pseudo-element selectors تملك نفس درجة تخصيص محددات العناصر العادية. محدد الصنف class selector أكثر خصوصيةً لأنه سيختار فقط عناصر الصفحة التي تحمل الصنف نفسه، أي قيمة السمة class فيها متماثلة، وسيُعطى تقييمًا أعلى فيما يتعلق بالخصوصية. كما أن محددات الخاصيات attribute selectors والأصناف الزائفة pseudo-classes تملك نفس درجة خصوصية الأصناف. إليك مثالًا فيما يلي، إذ لدينا في المحرر التفاعلي التالي قاعدتان يمكن تطبيقهما على عنصر العنوان <h1>، لكن العنوان سيظهر باللون الأحمر لأن محدد الصنف main-heading يملك تخصيصًا أعلى، علمًا أنّ القاعدة الأخرى التي تضم محدد العنصر <h1> ظهرت تاليًا في الشيفرة البرمجية: سنشرح بمزيد من التفصيل طريقة تقييم التخصيص لكل محدِّد لاحقًا. الوراثة Inheritance من الضروري كذلك اعتبار مفهوم الوراثة لمعرفة التنسيقات الصحيحة التي تطبق على العناصر، حيث ترث بعض العناصر الأبناء بعض قيم التنسيق المطبقة على آبائها وبعضها الآخر لا يرث هذه القيم، فإذا ضبطت قيمتَي الخاصيتين color و font-family على عنصر ما، فسيرث كل عنصر ابن ضمنه قيم هاتين الخاصيتين إذا لم تطبق عليه تنسيقًا خاصًا به مباشرةً. لا يمكن في المقابل توريث بعض الخاصيات مثل خاصية العرض width، فإذا ضبطت قيمة هذه الخاصية لعنصر ما لتكون 50‎%‎، فلن يكون عرض العناصر الأبناء 50‎%‎ كما هو حال العنصر الأب، لأن الوضع في هذه الحالة سيكون مربكًا ومحبطًا. ملاحظة: يمكنك معرفة إن كانت الخاصية تورث أم لا من قسم التعريف الرسمي لها في المرجع MDN CSS، على سبيل المثال انظر إلى التعريف الرسمي لخاصية اللون color وستجد yes بجانب Inherited ما يعني أنها خاصية تورث من العنصر الأب لأبنائه. آلية العمل المشتركة لمفاهيم الوراثة والتخصيص والتعاقب تتحكم هذه الآليات الثلاث بطريقة تطبيق تنسيقات CSS على العناصر، لهذا سنلقي نظرةً في هذا القسم على كيفية عملها معًا، وقد يبدو الأمر معقدًا في البداية، لكن مع زيادة مهاراتك وخبرتك في CSS ستتذكر كيف تجري الأمور، وبإمكانك دائمًا مراجعة هذه التفاصيل إذا نسيتها، فحتى المطورون المحترفون قد لا يتذكرون هذه التفاصيل دائمًا. استيعاب مفهوم الوراثة لدينا في المثال التالي عنصر قائمة غير مرتبة <ul> الذي يضم مستويين متداخلين من القوائم غير المرتبة، وقد قمنا بضبط قيم الحاشية padding والإطار border ولون الخط color للعنصر الخارجي أي العنصر الأب الموجود في المستوى الأول. كما تلاحظ فقد طُبِّق اللون على الأبناء المباشرين وعلى غير المباشرين أيضًا وهم العناصر <li> داخل قائمة <ul> الأولى المتداخلة مع قائمة <ul> ذات المستوى الأول، ثم أضفنا الصنف special إلى القائمة الثانية <ul> المتداخلة مع قائمة <ul> ذات المستوى الأول وطبقنا عليها لونًا مختلفًا، وكما تلاحظ ستورَّث هذه الخاصية إلى العناصر الأبناء لهذه القائمة أيضًا: لم تورّث خاصيات مثل العرض width والهوامش margins والحاشية padding والإطارات borders كما شرحنا سابقًا، فإذا وُرِّثت خاصية الإطار في المثال السابق، لكنت سترى إطارًا حول كل قائمة وعنصر قائمة ابن، وهذا بالطبع أمر غير مرغوب على الإطلاق. ما يورّث إذًا من خاصيات افتراضيًا وما لا يورّث أمر يعتمد بشدة على المنطق العام لفكرة التنسيق. التحكم بالوراثة تتيح CSS خمس قيم عامة تأخذها الخاصيات وتتحكم بموضوع وراثة التنسيقات، إذ تقبل كل خاصية القيم التالية: inherit: تجعل قيمة الخاصية التي نطبقها على عنصر محدد نفسها القيمة المطبقة على العنصر الأب، أي أنها تُفعِّل الوراثة. initial: تجعل قيمة الخاصية التي نطبقها على العنصر نفسها القيمة الأولية للخاصية. revert: تعيد ضبط قيمة الخاصية المطبقة على العنصر لتكون نفسها القيمة الافتراضية للمتصفح بدلًا من القيمة الافتراضية التي تأخذها الخاصية، ولهذه القيمة نفس عمل القيمة unset في حالات كثيرة. revert-layer: تعيد ضبط قيمة الخاصية المطبقة على العنصر المحدد لتأخذ القيمة المحددة في طبقة تعاقب سابقة cascade layer في تسلسل التنسيقات. (شرح فكرة cascade layer خارج نطاق المقال الحالي لكنها باختصار طريقة تمكنك من تجاوز أولويات شيفرات CSS بسهولة بعض النظر عن درجة التخصيص). unset: تعيد قيمة الخاصية إلى وضعها الطبيعي، أي أنها تعمل عمل القيمة inherit إذا كانت الخاصية ترث التنسيقات افتراضيًا وإلا فستعمل عمل القيمة initial. يتيح لك المحرر التفاعلي في الأسفل العمل مع شيفرة CSS وتعديلها لترى ما يمكن أن يحدث، فالعمل مباشرةً مع الشيفرة هو السبيل الأفضل لتتمكن من فهم CSS و HTML، وإليك بعض الأمثلة: يمتلك عنصر القائمة الثاني الصنف my-class-1 والذي يجعل لون العنصر <a> الموجود داخله موروثًا، فكيف سيتغير لون الرابط إذًا إذا أزلت هذه القاعدة؟ هل فهمت السبب الذي جعل لون الرابط في عنصري القائمة الثالث والرابع كما هو عليه؟ لقد ضُبطت خاصية اللون في الثالث لتكون initial، ويعني ذلك استخدام القيمة الأولية للخاصية -وهي الأسود في هذه الحالة- وليست القيمة الافتراضية للمتصفح -وهي اللون الأزرق-، كما ضُبطت الخاصية على unset في عنصر القائمة الرابع ويعني ذلك أنّ قيمة الخاصية ستماثل قيمتها في العنصر الأب وتكون باللون الأخضر. ما الروابط التي سيتغير لونها إن عرّفت القاعدة التالية a { color: red; } مثلًا؟ بعد قراءة الفقرة التالية التي تشرح طريقة إعادة ضبط جميع الخاصيات، عد إلى الكود مجددًا وقم بتغيير قيمة الخاصية color إلى all. لاحظ كيف أن الرابط الثاني سيظهر على سطر جديد ويكون له تعداد نقطي. ما هي الخصائص التي تعتقد أنها موروثة هنا؟ إعادة ضبط قيم جميع الخاصيات تُستخدَم الخاصية المختصرة all لتطبيق إحدى القيم الخمسة العامة للوراثة على كل الخاصيات تقريبًا في اللحظة نفسها، إذ يمكن أن تأخذ إحدى القيم inherit أو initial أو revert أو revert-layerأو unset، وهي طريقة جيدة للتراجع عن التغييرات المطبقة على التنسيقات لكي تعود إلى نقطة بداية محددة قبل تطبيق تغييرات أخرى. لدينا في المثال التالي عنصرَي نص اقتباس <blockquote>، طُبِّق على العنصر تنسيق يستهدف هذا العنصر بذاته، بينما طبق على الثاني صنف باسم fix-this يضبط الخاصية unset لهذا الاقتباس بالقيمة all. حاول تغيير قيمة الخاصية all إلى قيم أخرى وراقب ما قد يحدث. استيعاب مفهوم التعاقب قد تدرك الآن السبب الذي يجعل لون فقرة نصية موجودة في مكان بعيد ضمن بنية HTML سيماثل لون العنصر <body> مثلًا، فقد رأينا سابقًا كيف نُطبِّق CSS على عنصر في أي مكان من المستند سواءً بإسناد تنسيقات إلى عنصر محدد أو بإنشاء صنف، وسنتابع الآن بشيء من التفصيل كيف يعمل مفهوم التعاقب وأي قاعدة ستُطبق عندما يمكن تطبيق أكثر من قاعدة تنسيق على نفس العنصر وكل قاعدة تتصمن نفس الخاصيات لكن بقيم مختلفة. هنالك ثلاثة عوامل يمكن أخذها بالحسبان، وقد رتبناها في هذه القائمة حسب تزايد أهميتها: ترتيب الشيفرة المصدرية Source order. درجة التخصيص Specificity. الأهمية Importance. سنستعرض هذه العوامل لنرى كيف يتصرف المتصفح تمامًا عند انتقاء القاعدة التي يطبقها: ترتيب الشيفرة المصدرية رأينا سابقًا أهمية ترتيب شيفرات CSS، فإذا ظهرت أكثر من قاعدة لها نفس مستوى التخصيص فستطبق آخر هذه القواعد ظهورًا، كما يمكن أن تفكر بالأمر كما يلي: ستُطبَّق أول قاعدة (أقربها إلى العنصر) ثم تلغيها التي تليها وهكذا حتى تربح القاعدة الأخيرة ويُطبَّق تنسيقها. التخصيص لترتيب الشيفرة أهميته كما أشرنا سابقًا، لكنك ستتعرض إلى مواقف تُطبّق فيها قواعد ظهرت قبل غيرها بصورة تعارض تمامًا قاعدة الترتيب، والسبب في ذلك هو امتلاك هذه القاعدة تخصيصًا أعلى، فعند وجود قاعدة أكثر تخصيصًا وسيختار المتصفح تطبيقها لتنسيق العنصر. لقد رأينا سابقًا كيف يمتلك محدد الصنف ثقلًا أكبر من محدد العناصر، إذ سيلغي ما يُعرّف في الأصناف التنسيقات التي تُطبق مباشرةً على العناصر عبر محددات العناصر، وتجدر الإشارة هنا إلى أنّ التنسيقات التي تُستبدل بناءً على الأهمية هي تنسيقات الخاصيات المشتركة فقط. يساعد هذا السلوك في تقليل التكرار في شيفرتك، ومن الممارسات الأكثر شيوعًا في هذا المجال هي تعريف تنسيقات معمّمة generic styles للعناصر الأساسية ثم بناء أصناف لتلك التي نريد تنسيقها بطريقة مختلفة، فقد عرفنا على سبيل المثال في الشيفرة التالية تنسيقًا معممًا لعنصر العنوان من المستوى الثاني ثم أنشأنا بعض الأصناف التي تغيّر بعض الخاصيات والقيم، وقد طُبِّقت القيم المعرفة في التنسيق المعمّم في البداية على كل عناصر العنوان من المستوى الثاني، ثم طُبِّقت القيم الأكثر تخصيصًا على العناصر التي تمتلك الأصناف الخاصة. لنلق نظرةً الآن على الطريقة التي يحسب المتصفح وفقها تخصيص قاعدة ما، إذ نعرِف تمامًا أنّ محدد العناصر أقل تخصيصًا من محدد الأصناف الذي يلغي تأثيره، لكن ما يجري هو أنّ المتصفح يعطي نقاطًا لتقييم مختلف أنواع المحددات ثم يجمع هذه النقاط ليقدِّر وزن محدد معين، وبالتالي يمكن أن يقرر المتصفح الخيار الأنسب لتطبيقه. ملاحظة: تملك التنسيقات المضمنة inline style أسبقية على جميع الأنماط العادية بغض النظر عن الخصوصية وهي لا تحتوي على محددات، ولكن يعد تخصيصها أعلى بغض النظر عن المحددات المستخدمة في التنسيقات العادية. وبالتالي يُقاس مقدار التخصيص باعتماد أربع قيم (أو مكوّنات) مختلفة هي التنسيق السطري inline style ومحدد المعرف ID ومحدد الصنف CLASS ومحدد العنصر ELEMENT ويمكن أن توازنها بفكرة منازل الآلاف والمئات والعشرات والآحاد لعدد من 4 خانات كما يلي: التنيسقات المضمنة: يضاف 1 في خانة الآلاف لكل تصريح تنسيق ضمن السمة style، أي إن كان التنسيق سطريًا فلا توجد محددات في تصريحات كهذه لذلك سيكون تقييمها 1000. Identifiers: يُضاف1 في خانة المئات لكل محدد مُعرّف ID Selector ضمن المحدد الكلي. Classes: يُضاف 1 في خانة العشرات لكل محدد صنف أو محدد سمة أو صنف مجرَّد pseudo-class موجود ضمن المحدد الكلي. Elements: يُضاف 1 في خانة الآحاد لكل محدد عنصر أو عنصر مجرَّد ضمن المحدد الكلي. ملاحظة: لا تأثير للمحددات العامة * والموازنات (+ أو > أو ~ أو ' ') ونافيات الأصناف المجردة (not:) على التخصيص. إليك جدول يوضح طريقة حساب نقاط التخصيص وكيفية حساب النقاط التي تمنح لكل حالة: المحدد نقاط التخصيص الكلية المعرِّفات Identifiers الأصناف Classes العناصر Elements h1 0-0-1 0 0 1 h1 + p::first-letter 0-0-3 0 0 3 li > a[href*="en-US"] > .inline-warning 0-2-2 0 2 2 #identifier 1-0-0 1 0 0 button:not(#mainBtn, .cta) 1-0-1 1 0 1 لنلق نظرةً قبل أن نتابع على تطبيق عملي: ما الذي يحدث في المثال السابق؟ إنّ ما يهمنا في الواقع القواعد السبعة الأولى في هذا المثال، وقد وضعنا كما قد تلاحظ نقاط التخصيص لكل قاعدة في تعليق قبلها. يتنافس أول محددين لتنسيق لون خلفية الرابط، ويربح الثاني جاعلًا لون الخلفية أزرقًا لأنه يضم محدد معرّفات إضافية في سلسلته وبالتالي حصل على 2-0-1 نقطة مقابل 1-0-0 للأول. يتنافس المحددين الثالث والرابع على تنسيق لون نص الرابط، ويربح الرابع جاعلًا لون النص أبيضًا على الرغم من امتلاكه محددات عناصر أقل بواحد من سابقه لكنه يحتوي على محدد صنف وبالتالي خسر نقطة وربح 10 وسيحصل على 1-1-3 نقطة مقابل 1-0-4 للثالث. يتنافس المحددان الخامس والسابع على تنسيق إطار الرابط عندما يمر مؤشر الفأرة فوقه ويخسر السادس مقابل الخامس بنتيجة 0-2-3 مقابل 0-2-4 لأنه يمتلك عددًا أقل بواحد من محددات العناصر، في حين يربح المحدد السابع في منافسته مع الخامس والسادس على الرغم من امتلاكه نفس العدد من المحددات الفرعية للخامس لكن وجود محدد صنف حسم النتيجة لصالحه وكانت 0-3-3 مقابل 0-2-3 و 0-2-4. ملاحظة: يُعَدّ المثال السابق مثالًا تقريبيًا لتوضيح الفكرة، لكن لكل نوع من أنواع المحددات مستوى تخصيص محدد لا يمكن إلغاءه بواسطة محدد أقل مستوى، فلا يمكن لمليون محدد صنف أن يلغي محدد معرّفات واحد. لتقييم التخصيص بدقة يمكن أن نعطي نقاطًا لمستويات التخصيص بصورة فردية بدءًا من الأعلى تخصيصًا نزولًا إلى الأدنى عند الحاجة، فعند وجود تعادل بين محددين يمتلكان مستوى التخصيص نفسه، فيمكنك الانتقال إلى المستوى الأدنى وتقييمه، وإلّا يمكنك تجاهل هذه المستويات لأنها لن تلغي أبدًا المحددات ذات المستوى الأعلى من التخصيص. التصريح important! يُستخدم التصريح important! بجانب قيمة أيّ خاصية لتنسف كل الحسابات السابقة وتجعل هذه القيمة للخاصية هي السائدة، لكن ينبغي الحذر عند استخدامه، إذ يستخدَم لجعل خاصية محددة وقيمتها الأعلى تخصيصًا وسيلغي كل قواعد التعاقب الطبيعية. ملاحظة1: لقد أشرنا إلى التصريح important! لكي تعرفه إذا رأيته في شيفرة قد كتبها مطور ما، لكننا ننصحك بشدة بعدم استخدامه إلا إذا كنت مضطرًا جدًا لذلك، إذ يغيّر هذا التصريح التعاقب التقليدي مسببًا مشاكل في تنقيح شيفرة CSS يصعب حلها وخاصةً في ملفات التنسيق الضخمة. ألق نظرةً على المثال التالي الذي يضم فقرتين نصيتين تمتلك أحدهما محدد معرّفات. لنناقش تفاصيل ما يحدث في هذا المثال، لكن ننصحك بأن تحاول إزالة بعض الخاصيات لتقف على ما سيجري إذا وجدت الأمر عصيًا على الفهم: لاحظ تطبيق قيمتي الخاصيتين color و padding في القاعدة الثالثة، بينما لم تطبق قيمة الخاصية background-color والسبب أنها تصريحات ظهرت في آخر تسلسل الشيفرة، وعادةً ما تلغي الأخيرة ما جاء في الأولى. ربحت القواعد الأعلى منها لأنّ محدد الصنف أعلى تخصيصًا من محدد العناصر. يمتلك كلا العنصرين السمة class التي تأخذ القيمة better، لكن تمتلك الفقرة النصية الثانية المعرّف id ذو القيمة winning أيضًا، وطالما أنّ محددات المعرّفات أعلى تخصيصًا من محددات الأصناف -إذ لا يوجد سوى عنصر واحد في الصفحة يمتلك هذا المعرّف بينما قد تمتلك عدة عناصر الصنف نفسه- فمن المفترض أن يُطبَّق اللون الأحمر على الخلفية ويظهر الإطار الأسود الذي سماكته 1 بكسل حول الفقرة النصية الثانية، وستبقى الفقرة الأولى باللون الرمادي وبلا إطار وفقًا للقيم في محدد الصنف. طُبّق بالفعل اللون الأحمر على خلفية الفقرة النصية الثانية ولم يُعرض الإطار الأسود، والسبب وجود التصريح important! في القاعدة الثانية بعد border: none مما يعني أنّ هذا التصريح سيكون الأعلى تخصيصًا على الإطلاق. ملاحظة: ستكون الطريقة الوحيدة للتخلص من التصريح important! هو أن يأتي تصريح آخر بمستوى التخصيص نفسه لاحقًا في الشيفرة أو أن يأتي تصريح important! آخر له تخصيص أعلى. تبقى الحالة الوحيدة التي يمكنك استخدام التصريح important! فيها هي حالة وجود نظام لإدارة المحتوى CMS لا يسمح لك بالوصول إلى وحدات CSS البنيوية وتحتاج إلى إلغاء أو تجاوز تنسيق ما لا يمكنك الوصول إليه بأية وسيلة. مع ذلك لا تستخدمه إن لم تكن مضطرًا بالفعل. تأثير موقع CSS ينبغي الإشارة أخيرًا إلى أنّ أهمية تصريحات CSS تعتمد أيضًا على تخصيص ورقة التنسيق بأكملها، فمن المحتمل أن يطبق المستخدِم ورقة تنسيق خاصةً به ليلغي بها ورقة تنسيق المطوّر، فقد يكون لدى المستخدِم ضعف في البصر مثلًا ويريد ضبط حجم خط الكتابة في جميع الصفحات التي يزورها لتكون ضعفَي الحجم الأصلي كي تسهل عليه القراءة. ترتيب الأهمية لمواقع CSS تُطبَق التصريحات التي تتنازع على تنسيق عنصر وفق الترتيب التالي الذي يلغي فيه كل بند سابقه: التصريحات الموجودة في ملف تنسيق عميل المستخدِم مثل التنسيق الافتراضي للمتصفح إذا لم توجد أية تنسيقات أخرى. التصريحات العادية في ملف تنسيق المستخدِم، أي التنسيق الذي يطبقه المستخدِم. التصريحات العادية في ملف تنسيق المطوّر، وهي التنسيقات التي يضعها مؤلفِي صفحات ويب. التصريحات المهمة في ملف تنسيق المؤلف. التصريحات المهمة في ملف تنسيق المستخدِم. التصريحات المهمة في ملف تنسيق عميل المستخدِم. من المنطقي أن تلغي تنسيقات المطوّر تنسيقات المستخدِم لكي يبقى تصميم الصفحة متماسكًا على الرغم من وجود حالات قد يكون فيها تفضيل تنسيقات المستخدِم ضروريًا مثل حالة ضعف البصر التي أشرنا إليها سابقًا، وعندها يمكن استخدام التصريح important!. الخلاصة إذا استوعبت ما جاء في المقال فهذا أمر عظيم؛ لقد بدأت تعتاد فعلًا على آلية عمل CSS، وسنتابع تاليًا موضوع المحددات بالتفصيل، لذا لا تقلق إذا لم تستوعب مفاهيم التعاقب والتخصيص والوراثة بصورة كاملة، فهي بالتأكيد أكثر ما غطيناه من أفكار حتى الآن تعقيدًا، فقد تربك هذه الأفكار محترفِي تطوير ويب أحيانًا، لهذا ننصحك بالعودة إلى هذا المقال مرات عدة والتفكير بما جاء فيه دائمًا أثناء تقدمك في تعلّم CSS. عد إلى هذا المقال عندما تواجهك مشاكل تتعلق بتطبيق تنسيق غير متوقع، فقد تكون المشكلة هي مشكلة تخصيص. ترجمة -وبتصرف- للمقال Cascade and inheritance. اقرأ أيضًا: المقال السابق: آلية عمل لغة CSS تعرف على CSS المحددات (Selectors) في CSS كيفية تحويل شيفرة CSS إلى تنسيقات مرئية

هل نقرت يومًا على زر "اشتر الآن checkout" عندما أردت شراء شيء ما ثم غادرت قبل إكمال الشراء؟ هنالك بعض الأشياء الصغيرة التي تعيق عملية الشراء الناجحة، وعادةً ما تتراكم لتصل إلى الحد الذي يصعب معها إكمال شراء المنتج، وبالتالي مغادرة الموقع. وهذا ما يحدث أيضًا مع عملائك، فهم بحاجة إلى عملية شراء خالية من المنغصات حتى يصلوا إلى خط النهاية. سنتعلم في هذا المقال أهمية تجربة الشراء السلسة وكيف نجعلها كذلك من خلال خطوات خمس. أهمية تقديم تجربة شراء مريحة وسلسة مهما كان العميل راغبًا في الحصول على المنتج الذي تقدمه، ستدمر عملية الشراء الفوضوية هذه الرغبة. وبوجود الكثير من المتاجر الإلكترونية، لا مبرر أن يبقى العملاء في الموقع ذاته؛ لكن إن كانت خطوات الشراء الفوضوية هي من توقف العميل عن الشراء، فسيكون العكس صحيحًا أيضًا، أي أن تجربة الشراء الجيدة تحسّن نسبة تحول زوار الموقع إلى عملاء، وقد تزيد هذه النسبة في الواقع بنسبة 35.26% وسطيًا. خمسة طرق لتحسين خطوات عملية الشراء ما الذي يمكنك فعله لتعزز نسبة التحوّل من خلال الانتقال السلس بين خطوات شراء منتج؟ إليك خمسة أفكار. 1. لا تخضع عملية الشراء إلى أفعال إلزامية قد يكون من المفيد طلب تسجيل حساب جديد لتستقطب العملاء، لكنه قد يسبب في نفس الوقت في عزوف بعض المتسوقين تمامًا؛ فالبنسبة لهؤلاء الأشخاص، يبدو إضافة بريد إلكتروني آخر وكلمة مرور إلى قائمة الحسابات لديهم أمرًا مزعجًا لا يستحق العناء. إن كان متجرك مزوّدًا بآلية لتسجيل حسابات، ففكر في استخدام خيار يتيح تنفيذ خطوات الشراء كضيف، وامنحه جميع ميزات خيار تسجيل الدخول، كما في المثال التالي: تلميح: إن أردت أن ينخرط عملاؤك أكثر في آلية تسجيل الدخول، ضع في صفحتك خيارت تسجيل الدخول عبر حسابات فيسبوك أو غوغل. وهكذا سيتمكن العملاء من تسجيل الدخول في عدة خطوات دون الحاجة إلى تذكر كلمة سر جديدة. 2. كن واضحا بشأن العمولة والرسوم من أكبر الأسباب وراء فشل عملية الشراء هي الرسوم المخفية التي تظهر فجأةً بعد البدء بخطوات الشراء، فقد توصلت بعض الدراسات إلى أن 49% ممن لا يكملون شراء ما وضعوه في سلة التسوق، قد فعلوا ذلك نظرًا للتكاليف الإضافية العالية جدًا مثل الضرائب والرسوم وتكاليف الشحن التي لم ينبّههم المتجر إليها مسبقًا، فتلقوا هذه الصفعة. ولهذا، إن أردت المحافظة على الناس الذين يصلون إلى مرحلة الشراء، فعليك الإشارة مسبقًا إلى الرسوم الإضافية التي ينبغي تحميلها على المنتج ضمن صفحة المنتج وضمن عربة التسوق ليدرك العميل ذلك. وقد تعتمد بعض الرسوم مثل الضرائب ورسوم الشحن على موقع المشتري. ولكي تبقى واضحًا في أمور كهذه، ذكّر المشتري فقط بأن عليه دفع رسوم إضافية كما هو الحال في لقطة الشاشة التالية: إذ لا يعلم متسوقو "الباستا" من متجر Singular Society مثلًا رسوم الشحن مباشرة، بل ينبههم الموقع بلطف إلى وجودها، وأن المبلغ الدقيق سيظهر عند البدء بعملية الشراء. والأفضل من ذلك إشارة الموقع إلى أن السعر يتضمن مسبقًا رسم الإنفاق الاستهلاكي VAT. 3. سهل العملية على المشترين كلما زادت عملية الشراء تعقيدًا، وضَعت حواجز أكثر بين عملائك وعملية الشراء، لهذا بسّط العملية قدر المستطاع إن كان ذلك سيدفع بالمشترين إلى التقدم في عملية الشراء. ستسهل الميزات التالية تجربة الشراء ويزيد عدد الأشخاص الذين يكملونها: الإدراج التلقائي للعنوان: عندما يُدخل العميل عنوانه، سيظهر أقرب عنوان صحيح يطابق الكلمات المذكورة. التحقق من البطاقة: تتيح آلية الشراء التحقق من صحة بطاقة الدفع مباشرةً كي يتأكد المشتري من أنه أدخل معلومات البطاقة الصحيحة. إظهار رسائل خطأ واضحة: تعرض رسالة الخطأ السبب الذي أدى إلى حدوثه، وبالتالي سيعرف المستخدم إن كان بإمكانه إصلاح الخطأ (كأن يكون رقم البطاقة خاطئًا) أم لا (مثل أخطاء في الخادم). 4. استخدم تصميما يتلاءم مع الهواتف المحمولة تقدّر نسبة المبيعات التي تجري باستخدام الهواتف المحمولة بحوالي 45% من جميع الصفقات التجارية. بعبارة أخرى، يستخدم قرابة نصف العملاء أجهزة الهاتف المحمولة لشراء المنتجات. إن كانت آلية الشراء مصممةً فقط لتعمل على الحواسب المكتبية، فسيعاني مستخدمو الهواتف المحمولة من التنقل وجر الشاشة من مكان لآخر حتى يكملوا عملية الشراء، ولهذا عليك أن تصمم صفحةً رئيسيةً خاصةً بأجهزة الهاتف المحمول وينبغي أن تكون هذه الصفحة متجاوبة، وإلا لن يتكلف الزوار عناء تكبير وتصغير الواجهة مرارًا وتكرارًا حتى يكملوا خطوات الشراء. إليك مثالًا عن صفحة رئيسية لإنجاز عملية شراء منتج مصممة للهواتف المحمولة: لاحظ في لقطة الشاشة السابقة كيف تأتي كل العناصر بحجم كبير بطريقة تسهّل التنقل بينها، حيث لكل عناصر مساحة كافية تحيط به، فلا يُضطر المستخدم إلى النقر في مكان لا يريده. بالإضافة إلى ذلك، للصفحة تنسيق عمود واحد، وبالتالي كل ما تحتاجه للتنقل هو التمرير للأعلى وللأسفل. 5. عزز عالمية الوصول إلى منتجاتك من أفضل الميزات التي تقدمها التجارة الإلكترونية هي إمكانية الوصول إلى أي مكان في العالم. فقد تبدأ بمتجر واحد في الولايات المتحدة ومن ثم توسّع عملك إلى اليابان، لكن إن لم تقدم آلية الشراء في موقعك دعمًا للغة اليابانية مثلًا أو العملة اليابانية، فقد يغادر المشتري موقعك دون إكمال عملية الشراء. ولهذا، بإمكانك الاستفادة من المترجمات عبر الإنترنت لوصف منتجك، لكن عليك أن تتأكد 100% مما يقرأه المشتري على صفحة الشراء. اجعل آلية الشراء في موقعك متاحةً لأوسع جمهور ممكن عن طريق دعم اللغات والعملات المختلفة. وقد خطت بعض المواقع التجارية خطوات إضافية بدعم الكثير من طرق الدفع الإلكتروني الأكثر شعبية. قارن بين النسختين الأمريكية والصينية لآلية الشراء التالية على موقع Stripe مثلًا: أما الصينية فهي: كما هو ظاهر، تركز النسخة الأمريكية على الدفع بواسطة بطاقات الدفع الإلكترونية، في حين تركز الصينية على خيار استخدام Alipay، وهي أكثر منصات الدفع الإلكتروني شعبيةً في الصين (لاحظ وجود شعار المنصة في الصندوق الذي يقع إلى يمين الصندوق الذي يضم رمز البطاقة الإلكترونية). ويفضل الصينيون استخدام لغتهم وعملتهم ومنصات الدفع الخاصة بهم ضمن آلية الشراء. لا تدع آلية شراء بخطوات سيئة تؤثر على مبيعاتك لا تدع خطوات الشراء عقبةً في طريق زيادة المبيعات، فخطوات الشراء الجيدة ليست فقط تلك التي تزيل العقبات أمام المشترين، بل هي تلك التي تقدم ما يمكن لتبسيط عملية الشراء. اسأل نفسك دائمًا: ما الذي يمكنني فعله لمساعدة الزوار لينتقلوا من سلة التسوق إلى خطوات الشراء؟ وبناءً على الجواب أو الأجوبة التي تحصل عليها اتخِذ الإجراءات الملائمة لتحسين خطوات الشراء في متجرك الإلكتروني. ترجمة -وبتصرف- للمقال Optimize Your Landing Page Checkout Process with These 5 Tips لصاحبه Josh Gallant. اقرأ أيضًا كيفية استخدام التصميم الرائع لزيادة المبيعات نصائح لتطوير صفحات المنتج في متجرك الإلكتروني أفضل أساليب زيادة متوسط قيمة الطلبيات

إن بناء علاقات مع العملاء أمر حيوي للعلامة التجارية، وكذلك تقوية هذه العلاقات من خلال استغلال نقاط الضعف النفسية للعقل البشري، فالبشر مزيج من الأفكار والعواطف، وإن استطعت أن تأسر تفكير عملائك، فستكسب لا محالة. يعمل دماغ الإنسان على التقييم الدائم لإيجابيات وسلبيات العروض المختلفة لمنتجات أو خدمات متاحة. فقد تدفعهم أبسط الأسباب إلى الالتفات نحو منتج آخر. ولكي تضمن أنك الخيار الأول لعملائك، لا تحاول الهرب عندما يواجهونك بالأسئلة التالية: ما الفائدة التي سأجنيها؟ هل يستحق الأمر استثمار المال أو الجهد؟ بطبيعة الحال، أكثر الأجوبة قيمةً هي تلك التي تقدّم نتائجًا تميِّز علامتك التجارية، وتزوّد عملاءك بمنتج أو خدمة تصنع فرقًا بالنسبة لهم. قد يكون اختيارك لطرق جذب العملاء مربكًا، لهذا نسجنا مجموعةً من الحيل التي لن تبسّط عملية إيجاد عملاء والمحافظة عليهم فحسب، بل ستسهّل عليهم أيضًا اتخاذ القرارات التي تصب في مصلحتك. الحيلة الأولى: ارفع المستوى وراع خصوصية عملائك الخصوصية هي دعوة مباشرة للعملاء لتريهم مدى اهتمامك وفهمك لاحتياجاتهم، وأن منتجاتك وخدماتك قد صممت خصيصًا لهم. استفد من البريد الإلكتروني لترحّب بالمستهلكين، وحاول أن تتواصل معهم أو تزودهم بين الفينة والأخرى ببعض المحتوى الذي يرغبون بمتابعته. وتذكر أن تعود دائمًا إلى البريد الإلكتروني والرسائل المباشرة التي تصلك منهم. عدّل الطريقة التي توضب بها منتجاتك لتضفي عليها بعض الخصوصية، كأن تكتب ملاحظةً بخط يدك أو حتى إشارة إلى أسماء عملائك. تقدم خطوةً أخرى إلى الأمام في إسعادهم بإضافة هدايا مفاجئة إلى طلباتهم الأساسية. وإن كان عملك معتمدًا على تقديم خدمات، فيمكنك دائمًا تقديم ميزات إضافة على أساس مصادر للحصول على هدايا دعائية. عليك أن تعمل جاهدًا على بناء آلية قوية تهدف إلى الوصول بعملائك إلى أعلى درجات القناعة بما تقدمه، فهكذا تحقق النجاح. عليك أن تضع نصب عينيك ضرورة بناء علامة تجارية أصيلة تمنح العملاء أوقاتًا جميلة وذكريات أجمل تدوم طويلًا. صادق عملائك وكن قريبًا منهم، واستخدم صوتًا ودودًا ومرحبًا ومسليًا كجزء من علامتك التجارية، وهكذا ستجعلهم متعلقين بها. عليك أيضًا أن تستمع إليهم وتتقبل آرائهم وانتقاداتهم وتبني عليها خطواتك التالية، فهدفك هو بناء رابطة عاطفية بين ما تعرضه ومن يستخدمه. امنح الأولوية لتحسين تجربة المستخدم وستحصد النجاح. الحيلة الثانية: امنح ماهو قيم لتحصل على عناوين البريد الإلكتروني قد تنتظر حتى يتواصل الناس معك أو قد تتصرف بذكاء! فالخيارات التي تقدّمها إلى عملائك ليست مجرد منتج أو خدمة بل هي حل لمشاكلهم أيضًا، لهذا عليك أن تفكّر بطريقة تستفيد بها من مشاعرهم، وأن تستثمر الوقت في فهم وتحديد ما يحفّزهم، وهكذا ستتمكن من قراءة ما بين السطور وتفسّر ما لم يُقال. قد لا تكون تلك الحلول في المتجر دائمًا، بل قد تظهر أحيانًا من خلال هدية ترويجية بسيطة تتسلل إلى عناوين بريدهم الإلكتروني كمقابل ثمين لحصولك على هذه العناوين. ليكن ذلك مكافأةً لتسجيلهم حسابًا لديك مثلًا، بحيث تكون تلك الهدية عبارة عن كتاب إلكتروني مجاني أو مفكّرة قابلة للطباعة أو دورة تعليمية قصيرة من خلال البريد الإلكتروني. الحيلة الثالثة: اجعلهم عملاء باستخدام تقنية فخ الأسعار ابدأ الأمر بتقديم خيارات متعددة لعملائك، ومن ثم ميّز بين المنتجات المتقاربة بإدخال فخ في السعر. إن الغاية من ذلك هي تكوين نوع من الانزياح في إدراك المستهلك، مما يعزز نيته في الشراء. عند استعراضك للحواسب المحمولة في الصورة السابقة، ستجد مثالًا واضحًا عن فخ الأسعار، إذ يبدو الحاسوب ذو السعر 1999$ مثلًا صفقةً جيدة، حيث ستحصل على ضعفي مساحة التخزين بفارق 200$ فقط. وباعتمادك هذا الأسلوب، فإنك تخلق فرقًا ضمنيًا بين الجهازين، مجبرًا المستخدم على التفكير في أن منتجًا بنصف ميزات آخر قد لا يستحق ثمنه وقد عرض ما يفوقه قيمةً بسعر معقول. قد تستخدم آليةً أخرى أيضًا تعتمد على تقديم عروض على منتجات متشابهة مع حسومات على السعر قبل أن يخرج العميل من الموقع. الحيلة الرابعة: استخدم استراتيجية في تنظيم المنتجات فكّر بصفحة التسوق على أساس أنها تحفة فنية، ولهذا عليك تنظيم قائمة بكل معالم هذه التحفة ثم تصنيفها وفقًا لمدى اهتمام الناس بكل منها. سيكون أعلى تقييمين على الشكل: القسم الأكثر جذبًا للعملاء. القسم الذي يتصدر حديث العملاء. ما يجذب الناس هو ما يلفت الأنظار وما يقع لطيفًا على الأذن. ووفقًا لذلك، عليك تنظيم هيكلية متجرك الإلكتروني بالتوازي مع تفضيلات عملائك. تُعَد المنتجات التي تحمل تقييمًا عاليًا أو التي استُعرضت كثيرًا بمثابة ضمانات لمشترين محتملين، فالعرف الاجتماعي هو أداة قوية لبناء الثقة. إذ يبدأ المستهلكون ببناء الثقة بمنتج عندما يطلعون على الكثير من الآراء الحقيقة غير المنحازة حوله، مقتنعين أن هذه الآراء الكثيرة قد لا تكون خاطئة. احرص أن تعرض منتجاتك على قدم المساواة، لكن ميّز بعضها قليلًا بالإشارة إلى تفضيل الناس لها كي تجلب آخرين أيضًا. الحيلة الخامسة: ارض غرورهم بصفقات حصرية يرتبط تحول المستهلك إلى عميل مناصر لمنتجك بمقدار سعادته. فالإكراميات الخاصة، مثل العضوية أو الدعوات الحصرية أو الحسومات الخاصة عبر البريد الإلكتروني، سترضي الأنا الداخلية لعملائك، وتجعلهم يشعرون بأنهم مميزون ومحظوظون لتقديمك هذه الصفقة السرية معهم. كافئ عملائك على مناصرتهم، فهذا يشعرهم بالتميز، وقدم لهم عروضًا في مناسبات خاصة مثل تنزيلات الأعياد أو بطاقات حسم في أعياد ميلادهم. فما يشتريه الناس من منتجات يرتبط ارتباطًا وثيقًا بتجاربهم السابقة، لهذا أسّس علامةً تجاريةً يذكرها الجميع وانتبه إلى التفاصيل. ولكي تؤسس برامج مكافآت وتستقطب الزوار مجددًا، تخلّص من العروض الترويجية التي تنقل زوارك من موقع لآخر والتزم بالصفقات الجيدة، إذ لا بد وأن يكون عرضك جيدًا ومشجعًا فعلًا ليتخذ الزوار قرار الشراء. الحيلة السادسة: حفز قلقهم مستخدما عروضا محدودة المدة يخشى الناس خسارتهم للصفقات، ويرافق ذلك أيضًا إحساسًا بالهزيمة عندما يمتلك آخرون ما قد فوّتوه، إذ لا يحب أحد أن يُترك بعيدًا؛ ولهذا توّلد العروض محدودة المدة شعورًا بالحاجة الملحة في دماغ الإنسان، وتدفعه إلى إعادة التفكير. ليس هذا فحسب، بل تضع العروض مثل الحسميات المتاحة ليومين أو ساعتين الناس في مأزق إن كان هذا العرض سيدوم أم لا، وهل عليهم المخاطرة والشراء فورًا أم لا. تستفيد العلامات التجارية من هذا القلق، وتعمل على إيجاد عروض تسخّر هذا القلق لمصلحتها، فقد تعرض بعيدًا عن الحسومات منتجات أو خدمات قيمةً جدًا بالمجان مع منتج أو خدمة بالسعر الاعتيادي ولفترة محدودة. وقد تعتمد عرضًا لمرة واحدة لن يتكرر أبدًا. أضف هذه الاستراتيجيات إلى عروضك واستغل ما يحرض الناس على الشراء. الحيلة السابعة: سوق لعروضك مجددا راجع خططك وعدّلها، إذ أنك لن تفعل ذلك مرةً واحدة بل عليك تكرار الأمر عدة مرات. على هذا الأساس، عليك أن تبني نموذجًا يدفع عملائك إلى عمليات الشراء مُخططًا لحلقة عرض وشراء مستمرة دائمًا. حاول الاستفادة من قوائم البريد الإلكتروني لديك لتطلب من عملائك المشاركة في استطلاعات رأي نزيهة دون تحيز، فلن يشعرهم ذلك بقيمة آرائهم بالنسبة إليك وحسب، بل سيبني الثقة عبر الإنترنت، ويجذب المستهلكين المحتملين الذي يتصفحون موقعك. حاول أن تُخبر عملائك عن توفّر بعض المنتجات التي يهتمون بها مجددًا في متجرك، فقد يعيدهم ذلك إلى موقعك الإلكتروني ويذكّر المستهلكين أيضًا بمنتجات يُحتمل أنهم نسوها. أرسل اقتراحات إلى متابعيك ومشتريك تضم قوائم بالمنتجات التي اشتروها سابقًا أو كانوا مهتمين بشرائها، كأن ترسل لهم اقتراحات عن منتجات عناية بالبشرة لهؤلاء الذين اشتروا غسولًا للوجه مؤخرًا. وذكّرهم أيضًا بالمنتجات التي أبدوا اهتمامًا بها أو أضافوها إلى سلة المشتريات دون أن يكملوا عملية الشراء. أيضًا، يمكنك إضافة مهلة زمنية مع خصم لشراء ما تركه المستخدمون في سلة المشتريات، إذ سيزيد ذلك من احتمال عودتهم لإكمال الشراء. أطلق حملات دعائيةً مأجورةً وفعّالةً لتسوّق من جديد للمنتجات أو الخدمات التي استعرضها الزوار سابقًا على منصات التواصل الاجتماعي مثل فيسبوك أو غوغل. تذكّر أن تنجز كل ما أشرنا إليه بعناية فائقة، فهدفك ليس التلاعب بمشاعر المستهلك، بل ردم الهوة بينهم وبين ما يحتاجونه، فليكن ذلك عرضك! ترجمة -وبتصرف- للمقال Psychological Hacks to Impress Your Customers (& Boost Sales) لصاحبه Sachin baheti. اقرأ أيضًا عشر طرق بسيطة لإبهار العملاء كل يوم الوعي بالسعر وكيفية إدراك المستهلك له

سنلقي نظرة في هذا المقال على الآلية التي يحلل فيها المتصفح شيفرات لغة CSS ولغة HTML ويحولها إلى صفحات ويب، كما نستعرض ما يحدث عندما يصادف المتصفح تصريحات CSS لا يستطيع فهمها. ننصحك قبل متابعة القراءة أن تكون على دراية بالمواضيع التالية: أساسيات عمل الحاسوب تثبيت البرمجيات الأساسية للانطلاق في تطوير الويب أساسيات التعامل مع الملفات فكرة عن أساسيات HTML كيف تعمل لغة CSS في الحقيقة؟ يدمج المتصفح بين محتوى صفحة الويب ومعلومات تنسيقها عند عرض الصفحة. إذ يعالج الملف وفق مراحل عدة سنعرضها تاليًا. لكن تذكر بأن ما ستعرضه هو نسخة مبسطة عما يجري فعلًا عند تحميل الصفحة، وأنّ المتصفحات المختلفة ستعالج هذه المراحل بطرق مختلفة. يُحمّل المتصفح ملف HTML. يحوّل الملف إلى شجرة DOM التي ستمثِّل الملف ضمن ذاكرة الحاسوب. يحضر المتصفح معظم الموارد المرتبطة بملف HTML كالصور ومقاطع الفيديو وملفات تنسيق CSS، بينما يتعامل المتصفح مع ملفات جافا سكربت بعد ذلك بقليل. يحلل المتصفح تنسيقات CSS المحضرة ويصنِّف القواعد المختلفة وفقًا لنوع المحدد ضمن رزم buckets مختلفة مثل محددات العناصر ومحددات الأصناف ومحددات المعرّفات وهكذا. وبناءً على المحددات، يقرر المتصفح أية قواعد سيطبقها على أية عقد في شجرة DOM ويربطها بالعقد حسب المطلوب (تُدعى هذه المرحلة الوسطية بشجرة التصيير render tree). تُخطط شجرة التصيير وفقًا للهيكلية التي ستكون عليها بعد تطبيق قواعد التنسيق عليها. تُعرض الصفحة كما ستبدو عليه ضمن المتصفح (تُدعى هذه المرحلة "رسم الصفحة painting"). يوضح المخطط التالي عرضًا بسيطًا للمراحل السابقة: فكرة عن شجرة DOM وهي هيكلية تشبه الشجرة تمثل ملفات اللغات التوصيفية. إذ يُصبح كل عنصر وسمة ومحتوى نصي في لغات التوصيف عقدة في شجرة DOM. تُعرَّف العقد بعلاقتها مع غيرها من العقد فبعضها آباء لعقدٍ أبناء ولبعض العقد الأبناء عقد شقيقة. يساعدك فهم هذه الشجرة في تصميم وتنقيح وصيانة تنسيقات CSS لأنها المكان الذي تُدمج فيه تنسيقات CSS مع محتوى الصفحة. وعندما تبدأ العمل مع "أدوات مطوري ويب DevTools"، ستجد أنك تنتقل ضمن DOM عند اختيارك العناصر لتفحص قواعد التنسيق التي طُبقت عليها. دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن التمثيل الحقيقي لشجرة DOM لنلق نظرةً على مثال واقعي بدلًا من الخوض في شروحات نظرية مملة. لاحظ كيف ستتحول شيفرة HTML هذه إلى شجرة DOM: <p> Let's use: <span>Cascading</span> <span>Style</span> <span>Sheets</span> </p> تُعد العقدة التي تمثل العنصر <p> عقدة أب في شجرة DOM، بينما تُعد العقد الثلاث الممثلة لعناصر <span> أبناء لها وأشقاء بالنسبة لبعضها البعض وآباء بالنسبة إلى المحتوى النصي الذي تضمه. P ├─ "Let's use:" ├─ SPAN | └─ "Cascading" ├─ SPAN | └─ "Style" └─ SPAN └─ "Sheets" بهذا الشكل يترجم المتصفح شيفرة HTML السابق ثم يصير شجرة DOM ويعرضها بعد ذلك على شاشة المتصفح كالتالي: تطبيق تنسيقات CSS على DOM لنفترض أننا أضفنا بعض تنسيقات CSS إلى شيفرة HTML التالية: <p> Let's use: <span>Cascading</span> <span>Style</span> <span>Sheets</span> </p> وقواعد التنسيق التي طبقناها هي: span { border: 1px solid black; background-color: lime; } يحلل المتصفح شيفرة HTML وينشئ منها شجرة DOM ثم يحلل قواعد التنسيق السابقة. وطالما أنّ هناك قاعدة وحيدة تضم المحدد span، سيُصنّف المتصفح شيفرة CSS بسرعة ويطبق هذه القاعدة على كل عنصر <span> في ملف HTML ثم يرسم الصفحة على شاشة المتصفح وستبدو بالشكل التالي: سنتعلم لاحقًا تنقيح تنسيقات CSS باستخدام أدوات مطوري الويب وكيف يفسّر المتصفح قواعد CSS. تصرف المتصفح عندما يواجه قاعدة CSS غير مفهومة لا تدعم كل المتصفحات جميع ميزات CSS الجديدة في الوقت ذاته، وقد لا يستخدم الجميع النسخ الأحدث من تلك المتصفحات. ونظرًا لكون CSS لغة تتطور باستمرار وبشكل أسرع مما تدعمه المتصفحات، فقد تتساءل ما الذي يحدث عندما يواجه المتصفح محددًا أو تصريحًا لا يمكن تمييزه! الجواب هو أنّ المتصفح لا يفعل شيئًا، بل ينتقل إلى القاعدة التالية. عندما يحلل المتصفح قواعد التنسيق ويواجه خاصية أو قيمة لا يفهمها يتجاهلها وينتقل إلى التصريح التالي، وهذا ما يحدث أيضًا إن ارتكبت خطأً في كتابة اسم الخاصية أو القيمة أو كانت تلك الخاصية أو القيمة حديثة لم يدعمها المتصفح بعد. كما يتجاهل المتصفح القاعدة بأكملها إن لم يفهم المحدد وينتقل إلى التالية. استخدمنا في المثال التالي التهجئة البريطانية للّون "colour" مما يجعل التصريح خاطئًا ولا يمكن للمتصفح تمييزه. وبالتالي لن يكون لون النص في الفقرة أزرق اللون. ستُطبق جميع القواعد الأخرى وسيتجاهل المتصفح السطر الخاطئ. <p> I want this text to be large, bold and blue.</p> p { font-weight: bold; colour: blue; /* incorrect spelling of the color property */ font-size: 200%; } إنّ سلوك المتصفح هذا مفيد جدًا، إذ تستطيع استخدام ميزات CSS الجديدة لتحسين التنسيق مدركًا أنك لن تواجه المشاكل إن لم يفهمها المتصفح، وسيسمح ذلك بطريقة تراجع بسيطة عن التنسيق، وستعمل جيدًا إن أردت استخدام قيمة جديدة تمامًا وغير مدعومة في جميع المتصفحات. لا تدعم مثلًا بعض المتصفحات الأقدم الدالة ()calc كقيمة للخاصية. يمكننا أن نستخدم قيمة تراجعية مقدرة بالبكسل للاتساع width تحسبًا لعدم دعم المتصفح للدالة ()calc الذي تحسب الاتساع ديناميكيًا ليكون (100% - 50 بكسل). ستفسر المتصفحات الحديثة السطر الذي ينسق الاتساع بالبكسل ثم تبطل هذا التنسيق عندما تفسر السطر التالي الذي يستخدم الدالة ()calc: .box { width: 500px; width: calc(100% - 50px); } سنرى لاحقًا طرائق أخرى لدعم المتصفحات المختلفة في مقالات قادمة. بينما ستختبر في المقال التالي مهاراتك في استخدام CSS. ترجمة -وبتصرف- للمقال How CSS works. اقرأ أيضًا المقال السابق: هيكلية لغة CSS التعامل مع أجهزة العرض المختلفة والمطبوعات في CSS التنسيقات الأساسية للعناصر في CSS التعرف على شجرة DOM لتعديلها عبر جافاسكربت

يتوجه العالم بخطى حثيثة نحو حقبة ما بعد الثورة الرقمية، فقد غيرت هذه الثورة طريقة رؤيتنا للواقع والمستقبل ودفعتنا إلى حدود جديدة في شتى المجالات العلمية والاقتصادية والاجتماعية. لهذا تسعى الفعاليات البشرية بكافة أشكالها إلى التماشي مع هذه الثورة والاستفادة مما تتيحه من تقنيات لتطوير قدراتها الذاتية ومكاسبها في نفس الوقت. لقد أضحت عملية التحول الرقمي والتطوير المستمر لوسائل العمل والاتصال ميزة هذه الحقبة وأساسها، وغدت صناعة البرمجيات وتطوير الأنظمة المعلوماتية المحرك الأساسي لهذه المرحلة جنبًا إلى جنب مع تطور البنية التحتية لتقديم الخدمات الرقمية بالشكل الأكفأ والأسرع. ولهذا السبب أخذت هذه الصناعة بالنضوج اعتمادًا على مفاهيم ومسارات واستراتيجيات مدروسة وواضحة في التخطيط لها وتحليل متطلباتها ثم تصميمها وتنفيذها ضمن حلقة متكاملة من المراحل المتلاحقة لتلبي الغرض من بنائها وإنشائها. ونظرًا لاعتماد الأعمال بكل أشكالها على صناعة البرمجيات وتطوير الأنظمة الرقمية فلن يكون أمام هذه الصناعة هامش للخطأ مهما صَغُر لأن التكلفة على الصعيدين المادي والزمني ستكون باهظة جدًا. تحدثنا في مقال "مدخل إلى تطوير البرمجيات" عن المجال وعملية تطوير البرمجيات عمومًا، وأما الهدف من هذا المقال هو الوقوف على دورة الحياة التي يجب أن تسلكها عملية تطوير البرمجيات حتى يكون المنتج النهائي فعالًا ومحققًا للغاية التي صُمم لأجلها بأدنى هامش للخطأ انطلاقًا من الفكرة وحتى التنفيذ والصيانة. كما سيبحث في أهم الاستراتيجيات المتبعة في إدارة دورة حياة تطوير البرمجيات Software Development Life Cycle واختصارًا SDLC. كما يساعدك هذا المقال في تنمية معارفك ومهاراتك في تحليل الأنظمة إن كنت تفكر فيها كمهنة مستقبلية. من أين تأتي الأفكار؟ فما يخلق البرمجيات هو الحاجة لها، وتظهر الحاجة إلى بناء نظام معلوماتي جديد لإدارة نشاط معين عندما يبدأ هذا النشاط أو العمل بالمعاناة جراء أسباب متنوعة منها: انخفاض الحصة السوقية لمنتجاته. ضعف في الخدمات التي يقدمها لعملائه. ظهور منافسين جدد يستغلون تقنيات أحدث في إدارة أعمالهم. مشاكل في المنظومة القائمة وانخفاض كفاءتها. وقد تكون الحاجة إلى المنظومة الجديدة رؤية مستقبلية لواقع العمل والرغبة في تحسين واقعه: الرغبة في الوصول إلى عملاء جدد أو أسواق جديدة. مواكبة أكثر التقنيات انتشارًا وأحدثها كالحوسبة السحابية ومنصات البيانات الضخمة أو الانتقال إلى تطبيقات الهواتف الذكية. تقديم ابتكارات واختراقات ثورية تبقي الشركات التقنية في حيز المنافسة والهيمنة على الصناعة. لا يمكن لأي كان أن يتخذ قرار تطوير برمجيات المنظومة المعلوماتية القائمة as-is system أو استبدالها بمنظومة جديدة to-be system في الجهة التي تحتاج إلى ذلك، بل يأتي هذا القرار عادة عن أشخاص تقنيين أو غير تقنيين على تماس مباشر مع المنظومة ومع أصحاب القرار. يُدعى هؤلاء بالمعنيين أو أصحاب المصلحة stakeholders في بناء أو تطوير المنظومة وقد يكون هؤلاء: مالكو أنظمة مشرفون على تشغيل أنظمة مبرمجون مصممو ومحللو أنظمة مستشارون أو مزودون للخدمات المعلوماتية يمتلك هؤلاء الخبرة والدراية التي تؤهلهم لمعرفة الإيجابيات والسلبيات في المنظومات القائمة واستشعار الفرص الجديدة التي قد يأتي بها التغيير. دورة إدارة تطوير المنتجات احترف إدارة تطوير المنتجات الرقمية بدءًا من التخطيط وتحليل السوق وحتى إطلاق منتج مميز وناجح اشترك الآن هل نبدأ بكتابة الشيفرة مباشرة؟! عندما نتحدث عن تطوير منظومة برمجية لا نتحدث عن تطبيق بسيط لعرض منتجات أو لإجراء اتصال مع قاعدة بيانات بسيطة، بل منظومة متكاملة تضم عددًا كبيرًا من الحزم البرمجية التي تنفذ مهام مختلفة وتتكامل مع بعضها لتلبي المتطلبات المتوقعة من هذه المنظومة. وفي هذا السياق، لا يمكن بأي شكل من الأشكال أن تعتبر عملية بناء المنظومات البرمجية عملية بديهية سهلة التنفيذ. يتطلب بناء المنظومات المركبة عملًا هائلًا وتخطيطًا دقيقًا للمتطلبات التي ينبغي لهذه المنظومة تنفيذها في المراحل المبكرة قبل اتخاذ القرار النهائي بالمضي في العمل. فهناك قاعدة ذهبية لا بد من إدراكها تنص على أنّ التكلفة ستزداد بشكل أسي مع كل تغيير في متطلبات منظومة برمجية أثناء التنفيذ. والأسوأ من ذلك كله تسليم منظومة غير مكتملة إلى العميل. لم تأتي هذه القاعدة من فراغ، بل من الإخفاقات التي عانتها الكثير من الشركات العالمية، وإليك بعض الأمثلة من الواقع: الشركة العام المنظومة البرمجية الخسارة بالدولار فورد موتورز الأمريكية 2004 شراء منظومة جرى التخلي عنها بعد نشرها مباشرة 400 m$ هيوليت باكارد الأمريكية 2004 منظومة برمجية لتخطيط الموارد كثُرت فيها الأخطاء m160‏$ HRM Inland البريطانية 2004 أخطاء برمجية في المنظومة قادت إلى تحميل ضرائب إضافية 3.45 m$ Sainsburys البريطانية 2004 منظومة لإدارة سلسلة المزودين فشلت بعد النشر مباشرة 527 m$ وزارة الصحة البريطانية 2006 منظومة متكاملة لإدارة الصحة الوطنية وتسجيل المرضى لم تنجح بعد 4 سنوات من التأخير ولم ينجز أكثر من 80% منها. 20 b$ وزارة العدل البريطانية 2007 التخلي عن منظومة لتسجيل ومراقبة المدانين 245 m$ وكالة الحدود البريطانية 2009 تأخير في تسليم منظومة إدارة الحدود الإلكترونية حتى 2015 1.7 b$ BBC البريطانية 2014 فشل مشروع رقمنة أرشيف الإذاعة نظرًا للتخبط وضعف التخطيط. 153 m$ فالبدء إذًا في كتابة الشيفرة بمجرد أن تستشف فكرة المشروع سيقودك إلى الفشل لا محالة. لهذا لا بدّ من أن يمر مشروعك ضمن سلسلة من المراحل التي ينضج فيها وتتخذ القرارات التحليلية والتصميمة الصحيحة. دورة حياة البرمجيات تمر البرمجيات والأنظمة المعلوماتية عمومًا أثناء تطويرها بأربعة مراحل رئيسة وفي كل مرحلة مجموعة من الخطوات. ينتج عن كل مرحلة مجموعة من المخرجات deliveries تُبنى عليها مراحل لاحقة. هذه المراحل الأربعة هي: التخطيط planning التحليل analysis التصميم design التنفيذ implementation سنتحدث باختصار عن كل مرحلة وسنتكلم بإسهاب عن كل مرحلة في مقالات لاحقة. مرحلة التخطيط لبناء منظومة برمجية لا بد في هذه المرحلة من الإجابة على الأسئلة التالية: لم علينا بناء هذه المنظومة أو هذا البرنامج؟ ما الذي ستقدمه هذه المنظومة إلى الفعالية التي طلبتها أو للجهة التي تنتجها؟ هل يمكننا بناء هذه المنظومة؟ كم يستغرق بناؤها؟ وكما أشرنا سابقًا أن لكل مرحلة مجموعة من الخطوات التي تمر بها حتى تكتمل، وعادة ما تضم مرحلة التخطيط خطوتين أساسيتين هما: تهيئة المشروع Project initiation: يٌقصد بتهيئة المشروع هو التخطيط المبدئي له، وتضم هذه الخطوة مجموعة خطوات فرعية هي: تحديد أهمية المشروع وضرورة بنائه بالنسبة للعميل أو صاحب المصلحة المعني مباشرة بتطويره. دراسة جدوى المشروع Project feasibility بالتشاور المباشر بين محلل الأنظمة والعميل وتكون الدراسة على ثلاثة أصعدة تقنية تحدد إمكانية بناء المنظومة، واقتصادية تحدد ما إن كان ضروريًا بناء المنظومة الجديدة أو تحسين القديمة، وتنظيمية تحدد ما إن كان سيلقى المنتج الجديد ترحيبًا من مستخدميه وهل يتماشى مع أسلوب العمل في الجهة التي طلبت بناءه. دراسة المخاطر، وتختلف طريقة دراسة المخاطر من شركة إلى أخرى إلا أنها تسعى عمومًا إلى تحديد مصدر الخطر واحتمالية وقوعه وأثره المتوقع على المنظومة وطريقة تفادي الخطر أو التخفيف من أثره. إدارة المشروع Project management: وهي عملية التحكم بتطوير المشروع خلال مدة محددة بأقل تكلفة للحصول على المنظومة المطلوبة صحيحة وفعالة. يراقب مديرو المشروع عادة العمل ككل ويتحكمون بكل المهمات ويحددون الأدوار الوظيفية وينسقون بينها وتضم هذه الخطوة الخطوات الفرعية التالية: تحديد عدد الموظفين سواء محللي نظم أو مصممين أو مبرمجين. البحث عن المهارات اللازمة لإنجاز كل مهمة من مهام المنظومة. تحفيز فريق العمل لتحقيق الأهداف. الحد بين النزاعات والخلافات وتقريب وجهات النظر في فريق العمل. اقتراح التقنيات اللازمة لإنجاز العمل. وضع خطة عمل تعتمد على الاستراتيجية المتبعة في إدارة دورة حياة المنظومة. أما مخرجات هذه المرحلة فتأتي في مستندين الأول يضم خطة العمل والثاني مستند دراسة الجدوى والمخاطر ويعرض على الشخص المسؤول أو على لجنة القبول acceptance committee فإما أن يُقبل أو يُرفض أو يؤجل وفقًا للفائدة المضافة موازنة بالمخاطر. مرحلة تحليل المنظومة لا بد أن تتمكن هذه المرحلة من الإجابة عن الأسئلة التالية: ماذا نتوقع من المنظومة؟ ما هو المطلوب منها؟ من سيستخدم المنظومة الجديدة أو المطوّرة؟ أين ومتى ستُستخدم المنظومة الجديدة؟ تضم هذه المرحلة خطوتين رئيسيتين: تحديد متطلبات المنظومة بناء نماذج تحليلية للمنظومة تحديد متطلبات المنظومة define requirements وهي أكثر خطوات هذه المرحلة (إن لم يكن دورة التطوير بأكملها) أهمية وحساسية. إذ يمكن أن نناقش في هذه المرحلة ماهو المطلوب من المنظومة البرمجية وفقًا لرؤية المعنيين بتطويرها على مختلف المستويات والمرجعيات. فالنقاش في هذه المرحلة ووضع التصورات والنماذج سيكون متاحًا إلى أقصى الحدود دون أي آثار سلبية موازنة بالتغييرات التي يُضطر فريق العمل إلى إجرائها في مرحلة التنفيذ، إذ سيرفع ذلك من نسبة فشل المشروع إلى أكثر من 50%. وتتميز هذه المرحلة بأنها تدريجية أي يجري تطوير نماذج عن متطلبات المنظومة تدريجيًا وليس دفعة واحدة كما تتميز بأنها تكرارية أي يكون تحسين النماذج بالتكرار. ما هو المتطلب؟ المتطلب هو تصريح عما يُراد من المنظومة فعله أو تصريح عن الخصائص التي تتمتع بها المنظومة التي نريد بناءها. هنالك نوعان من المتطلبات: متطلبات وظيفية functional ومتطلبات غير وظيفية nonfunctional. أما المتطلبات الوظيفية functional، فتضم التصريحات التي تحدد ما على المنظومة فعله أو تحدد إمكانياتها. وكمثال على المتطلب الوظيفي هو أن تسمح المنظومة للمستخدم مثلًا بتسجيل دخوله إليها فهذا المتطلب يتعلق مباشرة بطريقة عمل المنظومة وبالتالي هو متطلب وظيفي. وأما المتطلبات غير الوظيفية nonfunctional، فتضم تصريحات عن ميزات هذه المنظومة التي لا تتعلق بطريقة عملها. وكمثال عليها أن تعمل المنظومة مثلًا على الحواسب وأن تعمل أيضًا على الهواتف الذكية. كما تجد أحيانًا متطلبات إضافية مثل: متطلبات عمل: وهو تصريح عما يحتاجه العميل. متطلبات مستخدمين: وتضم تصريحات عن طريق استخدام المنظومة. متطلبات منظومة: وتضم تصريحات عن أسلوب وطريقة بناء المنظومة. ينتج عن مرحلة تحديد المتطلبات مستند يُدعى "تصريح تحديد المتطلبات requirements definition statement"ويضم المتطلبات الوظيفية وغير الوظيفية على شكل قائمة مفصّلة قد تُعطى فيها الأولوية لمتطلبات على أخرى إضافة إلى بعض المعلومات الضرورية للخطوات القادمة، كما يحدد هذا المستند ما يُدعى بنطاق عمل أو إطار عمل المنظومة system domain الذي ينبغي العمل في حدوده دون رفع أو تخفيض المتطلبات. بناء نماذج تحليلية للمنظومة يحاول فريق العمل خلال هذه المرحلة بناء نماذج models عن المتطلبات الوظيفية. وتوصِّف هذه المتطلبات مداخل ومخارج كل متطلب وطريقة تنفيذه. وغالبًا ما تُستخدم نماذج حالات الاستخدام use-case model التي توصّف كل وظيفة من وظائف المنظومة ومن سيشارك في إنجاز هذه الوظيفة سواء وظائف أخرى أو مستخدم خارجي، كما تُستخدم نماذج النشاط Activity models لتوصيف تسلسل تنفيذ العمليات التي تحقق وظيفة محددة وطريقة التفاعل المتبادل بين الوظائف المختلفة في المنظومة. فلو كان لدينا مثلًا منظومة برمجية لإدارة صراف آلي ATM ستكون إحدى حالات الاستخدام هو "سحب نقود" وسترتبط حالة الاستخدام هذه بحالة استخدام أخرى "التحقق من هوية المستخدم" ولا بد من وجود مشارك خارجي وهو "مستخدم الصراف". إن ما يمثّل هذه الترابطات هو مخطط حالات الاستخدام أما بالنسبة لمخطط النشاط فسيوُصف على الشكل التالي مثلًا: الصراف: يعرض رسالة ترحيب. المستخدم: يدخل البطاقة. الصراف: يحلل البطاقة ويعرض للمستخدم قائمة الخيارات. المستخدم: يضغط زر "سحب النقود". الصراف: يعرض قائمة بالمبالغ التي يمكن سحبها. المستخدم: يختار المبلغ المطلوب. الصراف: يعدّ النقود ويخرجها. تمثل هذه النماذج على شكل ملف يُدعى توصيف حالات الاستخدام use-case description أو عن طريق مخططات UML -لغة النمذجة الموحدة unified mark language- تُعرف بمخططات حالات الاستخدام ومخططات النشاط. تُبنى بعد تكوين النماذج الوظيفية أيضًا النماذج البنوية التي تستفيد من نماذج حالات الاستخدام وملفات توصيفها في توصيف المتطلبات على شكل أصناف لها خصائص (سمات attributes) وطرق methods وذلك إن كانت استراتيجية التحليل هي استراتيجية كائنية التوجّه object oriented strategy وهي الاستراتيجية الأكثر شيوعًا. تمثّل هذه الأصناف ضمن مخططات تُدعى مخططات الأصناف ويُستفاد منها لاحقًا في عملية برمجة المتطلب الوظيفي. وأخيرًا تُبنى النماذج السلوكية behavioral models وهي نماذج تعبّر عما يجري داخليًا خلف الستار حتى تؤدي المنظومة الوظائف المطلوبة منها ظاهريًا أي كما يراها المستخدم الخارجي. تتشكل هذه النماذج انطلاقًا من النماذج البنيوية والوظيفية لأنها تعبير عن التفاعل بين النماذج البنيوية (الكائنات التي تشكل المنظومة). وتُمثّل النماذج السلوكية باستخدام مخططات UML منها مخطط التتابع sequence diagram التي تمثل تتابع الرسائل بين الكائنات، ومخططات الاتصال communication diagram التي تمثل الطرق التي تسلكها تلك الرسائل ومخططات التوقيت timing diagrams. ينتج عن هذه المرحلة ورقة تُدعى "اقتراح المنظومة system proposal" وتضم تفاصيل عن وظائف المنظومة الجديدة وطريقة إنجازها مُدعّمًا بالنماذج والمخططات التي بنيت في هذه المرحلة وتُرفع إلى لجنة القبول لاتخاذ القرار بالمضي أو إعادة تحليل المتطلبات. مرحلة تصميم المنظومة البرمجية وتجيب هذه المرحلة عن سؤال مهم وهو كيف سنبني المنظومة؟ إذ تُقرر في هذه المرحلة نوعية العتاد الصلب التي ستُستخدم والبرمجيات اللازمة والبنية التحتية لشبكات الاتصالات وواجهات المستخدم وقواعد البيانات ونماذج إرسال البيانات والتقارير. تضم هذه المرحلة الخطوات التالية: وضع استراتيجية التصميم: وفيها يجيب فريق العمل بالتعاون مع الجهة المعنية عن الأسئلة التالية: هل ستُطوّر المنظومة محليًا في الجهة التي تحتاج المنظومة اعتمادًا على كوادرها الخاصة؟ هل ستطور المشروع شركة مختصة أخرى؟ هل ستشتري الشركة حزم برمجية جاهزة تحقق متطلبات مرحلة التحليل؟ تطوير المعمارية الأساسية للمنظومة: بما في ذلك العتاد الصلب والبرمجي وواجهة المستخدم والبنية التحتية لشبكة الاتصال وهل سيتم البناء على البنية التحتية السابقة أم تحتاج المنظومة الجديدة إلى بنية تحتية جديدة كليًا. تطوير مواصفات لقواعد البيانات والملفات: أي تحديد طبيعة البيانات التي تُخزن وحجمها وأين وكيف ستُخزن. تصميم البرمجيات التي ستُبنى: أي ما هي البرامج التي ينبغي للمبرمجين العمل عليها وما وظيفة كل برنامج وما هي علاقته بغيره. ينتج عن هذه المرحلة مجموعة المخرجات التالية: مستندات تصميم المعمارية. مستندات تصميم واجهة المستخدم. مستندات مواصفات قواعد وملفات البيانات. مستند تصميم البرامج. تستخدم هذه المستندات لاحقًا في توجيه مرحلة إنجاز المنظومة. مرحلة إنجاز المنظومة وهي المرحلة الأخيرة من دورة تطوير البرمجيات، وتحظى هذه المرحلة بكامل الانتباه لأنها تعد المرحلة الأطول والأكثر تكلفة. تضم هذه المرحلة الخطوات التالية: بناء المنظومة اختبار المنظومة توثيق المنظومة تركيب المنظومة إدارة التغيير التدريب على استخدام المنظومة الصيانة ودعم المنظومة التقييم الراجع للمشروع بناء المنظومة ويقصد فيها برمجة كل وظيفة من وظائف المنظومة والربط بين هذه البرمجيات وتعتمد بشكل كامل على مخرجات مرحلتي التحليل والتصميم. تُعد هذه المرحلة بأنها الأقل خطرًا على فشل المنظومة ولا يأتي فشل المنظومة نتيجة لضعف البرمجة بل لضعف مخرجات عمليتي التحليل والتصميم. تجري في هذه المرحلة أيضًا عملية توثيق الإجرائيات بدقة للاستفادة منها في خطوات الاختبار والصيانة. اختبار المنظومة تهدف هذه الخطوة إلى كشف أكبر قدر ممكن من العيوب التي قد تتسبب في إخفاق البرنامج، وعادة ماتكون الخطوة الأطول والأكثر تركيزًا في هذه المرحلة لأنه من الصعب إنشاء منظومة خالية تمامًا من العيوب، كما أن عملية البحث والاستقصاء عن جميع العيوب أمر مرهق زمنيًا وماديًا. لتلك الأسباب يجري اختبار المنظومة على مبدأ ما الذي تقدمه فعليًا موازنةً مع ما يتوجب عليها فعله. يختبر فريق متخصص المنظومة بواحدة أو بجميع الطرق التالية: اختبارات الوحدات unit tests: ويجري على دالة أو صنف أو جزء محدد من وحدة برمجية للتأكد من أن الدخل الصحيح يعطي الخرج المطلوب. اختبارات التكامل integration tests: يختبر التفاعل المتبادل بين مجموعة محددة من الأصناف لإنجاز وظيفة محددة. اختبارت المنظومة system tests: يختبر تفاعل جميع الأصناف مع بعضها لإعطاء وظيفة متكاملة للمنظومة دون أخطاء، وهو مشابه لاختبار التكامل لكن على صعيد أوسع. اختبارات القبول acceptance tests: وينفذها المستخدمون النهائيون للمنظومة تحت إشراف عضو أو أكثر من فريق العمل وذلك لتقييم قبول المستخدم لهذه المنظومة الجديدة. توثيق المنظومة وهي عملية ممتدة عبر جميع المراحل لكنها تُنظم في هذه الخطوة وتضم توثيق عن المنظومة بما يساعد المبرمجين والمحللين في بناء وصيانة المنظومة وتوثيق المستخدم الذي يساعده على استثمار المنظومة. وقد يكون التوثيق مرجعيًا لمساعدة المستخدم على إنجاز مهمة محددة أو إجرائيًا لوصف إنجاز خطوة ما أو مواد تعليمية. تركيب المنظومة وتتضمن هذه الخطوة تثبيت العتاد الصلب والبرمجيات اللازمة وفقًا لمعايير المعيارية المقترحة. إدارة التغيير لا يجري الانتقال إلى استخدام المنظومة الجديدة مباشرة بل على مراحل لمساعدة المستخدمين النهائيين على التأقلم معها بأقل توتر ممكن. ولأن لكل تغيير مقاومة لا بد أن يتشارك محللو المنظومة وأصحاب القرار ومديرو المشروع في إدارة مرحلة التحوّل وتوجيه المستخدمين وتحفيزهم على تبني المنظومة الجديدة. التدريب على استخدام المنظومة لا بد في هذه المرحلة من تقديم المهارات اللازمة لاستثمار النظام دون الافتراض المسبق بأن المنظومة سهلة التعلّم. كما ينبغي التركيز في هذه المرحلة على مساعدة المتدرب على تنفيذ المهام الموكلة إليه فقط دون الغوص في تفاصيل وميزات المنظومة الجديدة، فهنا تأتي أهمية وجود توثيق شامل. الصيانة ودعم المنظومة وهي عملية تحسين المنتج البرمجي كي يلبي دائمًا متطلبات العمل، وقد تكون خطوة الصيانة ذات تكلفة عالية. يُكلف بعملية الصيانة عادة محللو الأنظمة والمبرمجون المبتدئون. ويأتي دعم المنظومة عبر خيارات عدة منها: التدريب عند الطلب أو الحاجة. الدعم المباشر عبر الإنترنت: من خلال التوثيق والأسئلة أكثر شيوعًا وحتى المحادثة المباشرة. مكاتب الدعم: وذلك لاستشارة الخبراء مباشرة حول مشاكل محددة بناء على مواعيد مسبقة. التقييم الراجع للمشروع أي تقييم نجاح المشروع أو فشله والطرق الكفيلة بتحسينه وتطويره وأخذ العبر منه. وتنفذ هذه الخطوة عادة وفق مسارين: مراجعة منظومة: والهدف هو موازنة التكلفة والفائدة الحقيقية موازنة مع التكلفة والفوائد المقدرة في مرحلتي التخطيط والتحليل. مراجعة فريق العمل: إذ يقيِّم كل فرد من أفراد فريق العمل أخطاءه ونجاحاته في إنجاز المهام الموكلة إليه. يمكن بعد ذلك لمدير المشروع أن يجمع التقييمات ويضيف إليها بعض التوضيحات والشروحات ليخرج بملف يُدعى "دروس تعلمناها lesson learned" والتي تلعب دورًا مهمًا في تدريب وتعليم الأعضاء الجدد وفي تفادي أية أخطاء مماثلة في مشاريع مستقبلية. خاتمة تعرفنا في هذا المقال على الأساسيات المتبعة في التخطيط لتطوير البرمجيات أو المنظومات المعلوماتية عمومًا ورأينا أهمية التخطيط التدقيق والتحليل لمتطلبات البرمجيات للوصول إلى منتج قادر على الصمود والمنافسة. كما تعرفنا على المراحل الأساسية الأربعة لعملية تطوير المنتجات البرمجية وهي مراحل التخطيط والتحليل والتصميم والتنفيذ، وتعرفنا على مجموعة الأعمال التي ينبغي القيام بها في كل مرحلة والمخرجات التي تنتج عن كل منها وصولًا إلى المنتج النهائي وصيانته ودعمه. اقرأ أيضًا كيف تتجنب كارثة الاستعانة بفريق خارجي في تطوير البرمجيات دليل المبتدئين لمنهجية أجايل Agile الأخطاء السبع القاتلة لأيّ مشروع برمجيات

بعد أن تعرفنا في المقال السابق على أساسيات لغة CSS والغاية منها، سنتابع في هذا المقال شرح هيكلية CSS. ننصحك قبل المتابعة في القراءة أن تكون على دراية بالمواضيع التالية: أساسيات عمل الحاسوب تثبيت البرمجيات الأساسية للانطلاق في تطوير الويب أساسيات التعامل مع الملفات فكرة عن أساسيات لغة CSS. تطبيق تنسيقات CSS على HTML لنختبر بداية الأساليب الثلاثة لتطبيق CSS على مستند وهي: استخدام ملف تنسيق خارجي والتنسيقات الداخلية والتنسيقات المحلية السطرية. دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن ملفات التنسيق الخارجية تتكون ملفات التنسيق الخارجية من قواعد تنسيق CSS ضمن ملف منفصل له الامتداد css.، وهذه هي الطريقة الأكثر شيوعًا وفائدةً في تطبيق CSS. بإمكانك ربط ملف CSS واحد بأكثر من صفحة ويب وتنسيقها جميعًا باستخدام هذا الملف. تشير إلى ملف CSS خارجي ضمن ملف HTML باستخدام العنصر <link>: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My CSS experiment</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>Hello World!</h1> <p>This is my first CSS example</p> </body> </html> تبدو قواعد تنسيق CSS شبيهة بالشيفرة التالية: h1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; } ينبغي أن تدل السمة href للعنصر <link> على موقع ملف تنسيق CSS. لاحظ أنّ ملف التنسيق في المثال السابق موجود في نفس المجلد الذي يحتوي ملف HTML، وبالإمكان طبعًا وضعه في أي مكان آخر مناسب ثم تعديل المسار. إليك بعض الأمثلة: <!--HTML موجود ضمن المجلد الذي يضم ملف style ضمن مجلد يُدعى --> <link rel="stylesheet" href="styles/style.css"> <!--ضمن المجلد الحالي style موجود ضمن مجلد يُدعى general ضمن مجلد يُدعى --> <link rel="stylesheet" href="styles/general/style.css"> <!--style ارتفع مستوى واحد إلى الأعلى ثم ضمن مجلد فرعي يُدعى --> <link rel="stylesheet" href="../styles/style.css"> تنسيقات داخلية تبقى التنسيقات الداخلية ضمن ملف HTML وتُوضع ضمن العنصر <style>. تبدو شيفرة HTML التي تضم تنسيقات داخلية شبيهةً بالتالي: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My CSS experiment</title> <style> h1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; } </style> </head> <body> <h1>Hello World!</h1> <p>This is my first CSS example</p> </body> </html> للتنسيقات الداخلية فوائدها في بعض الحالات، فقد تعمل ربما ضمن منظومة إدارة محتوى تمنعك من تعديل ملفات CSS الخارجية. مع ذلك، تبقى هذه الطريقة أقل فعالية وخاصة في المواقع التي تضم صفحات متعددة. فإن أردت تطبيق تنسيق CSS موحد في جميع الصفحات من خلال التنسيقات الداخلية، عليك كتابتها في كل صفحة، كما أنها ستنعكس سلبًا على فعالية عملية الصيانة أيضًا. إذًا مشكلة هذا الأسلوب الرئيسية هي أنّ أي تغيير بسيط في التنسيق لا بدّ وأن يُنفّذ في كل الصفحات التي تستخدمها. التنسيقات السطرية وهو تنسيق يؤثر على عنصر HTML بمفرده ويُصرّح عنه داخل السمة style. تبدو التنسيقات السطرية أو المحلية شبيهة بالتالي: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My CSS experiment</title> </head> <body> <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hello World!</h1> <p style="color:red;">This is my first CSS example</p> </body> </html> تجنّب استخدام هذه الطريقة ما أمكن، فهي النقيض تمامًا لمفهوم أفضل الممارسات. فهي أولًا أقل الطرق فعالية وخاصة عند صيانة تنسيقات CSS. فقد يُضطرك تعديل واحد في التنسيق إلى تطبيقه من جديد عدة مرات في نفس الصفحة. ستمزج ثانيًا بهذا الأسلوب شيفرة CSS مع شيفرة HTML ومحتوى الصفحة مما يزيد من صعوبة قراءة وفهم الشيفرة، فالفصل بين الشيفرة والمحتوى أمر أساسي في تسهيل الصيانة على مشرفي الصفحات. مع ذلك ستصادف بعض الحالات التي تُستخدم فيها هذه الطريقة وخاصة عندما تعمل في بيئات تُقيّد الوصول والتعديل بشدة. فقد يُسمح لك مثلًا بالعمل على جسم ملف HTML فقط أو قد تضطر لاستخدامها في رسائل البريد الإلكتروني المهيكلة باستخدام HTML وذلك لتحقيق توافقية مع أكبر عدد ممكن من عملاء البريد الإلكتروني. تطبيق: تجربة تنسيقات CSS أنشئ مجلدًا جديدًا على حاسوبك وسمِّه ما شئت، ثم انسخ شيفرتي HTML و CSS التاليتين واجعلهما ضمن ملفين جديدين داخل المجلد: الملف index.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>My CSS experiments</title> <link rel="stylesheet" href="styles.css"> </head> <body> <p>Create your test HTML here</p> </body> </html> الملف styles.css: /* Create your test CSS here */ p { color: red; } عندما تقرر ما تنسيقات CSS التي تريد اختبارها، استبدل محتوى العنصر <body> في ملف HTML ببعض العناصر الجديدة لكي تطبق التنسيق عليها، ثم أضف قواعد التنسيق اللازمة ضمن ملف CSS. يمكنك أن تستخدم أيضًا محرر الشيفرة التفاعلي التالي: المحددات تستهدف المحددات عناصر HTML لتطبيق تنسيقات محددة على المحتوى، وقد رأينا في مقال أساسيات استخدام CSS مجموعة متنوعة منها. إن لم تُطبق التنسيقات المطلوبة على المحتوى المحدد، فهذا يعني أنّ المحدد الذي اخترته لا يطابق ما تريده. تبدأ أي قاعدة من قواعد CSS بمحدد أو بقائمة من المحددات لكي تدل المتصفح على العنصر أو العناصر التي يجب أن تُطبق عليها هذه القاعدة. إليك بعض الأمثلة عن محددات صحيحة: h1 a:link .manythings #onething * .box p .box p:first-child h1, h2, .intro حاول أن تُنشئ بعض القواعد مستخدمًا المحددات السابقة. أضف أولًا بعض عناصر HTML التي ترغب في تنسيقها ثم استخدام المحددات السابقة في تطبيق التنسيقات. يمكنك دومًا العودة إلى موسوعة حسوب إن وجدت أنّ بعض المحددات السابقة غير مألوفة. عمق التحديد specificity قد تتعرض لسيناريوهات يستهدف فيها محددان عنصر HTML نفسه. لنتأمل شيفرة CSS التالية مثلًا إذ يجعل المحدد p الفقرات النصية باللون الأزرق، كما يجعل محدد الصنف special. العنصر المستهدف باللون الأحمر: .special { color: red; } p { color: blue; } لنفرض الآن وجود فقرة نصية في ملف HTML تمتلك الصنف special، وكلتا القاعدتين تستهدفان الفقرة النصية! فمن منهما ستُطبق؟ <p class="special">What color am I?</p> للغة CSS قواعد لمعرفة أي المحددات هو الأقوى في حالة معينة أو خلاف. تُدعى هذه القواعد بالتسلسل cascade أو عمق التحديد specificity. ستكون نتيجة النزاع في الشيفرة التالية مثلًا بين محددي العنصر p هي نص باللون الأزرق لأن القاعدة التي تضبط لون النص على الأزرق تأتي في التسلسل بعد القاعدة التي تضبطه على اللون الأحمر، فآخر تنسيق يَستبدل دائمًا التنسيق السابق في حالات التضارب وهذه هي قاعدة التسلسل. p { color: red; } p { color: blue; } لكن بالعودة إلى الشيفرة التي تسبقها وتعرض نزاعًا بين محدد صنف ومحدد عنصر ستكون النتيجة نصًا باللون الأحمر، إذ سينتصر محدد الصنف على الرغم من أنّ محدد العنصر يأتي بعده في التسلسل! إنّ السبب في ذلك أنّ محدد الصنف يُقيَّم بأنه أكثر تخصيصًا من محدد العنصر وبالتالي سيحل محله في حالات النزاع أو التضارب. حاول أن تجرب الأمر بنفسك، أضف بعض عناصر HTML ثم أضف محددي عناصر من الشكل {...} p إلى قواعد التنسيق وراقب النتيجة، ثم حول المحدد الأول إلى محدد صنف special. وراقب النتيجة. قد تبدو قواعد التسلسل والتخصيص معقدة في البداية، لكنها ستغدو أسهل عندما تألف اللغة. أما الآن، فكل ما عليك تذكره هو وجود التخصيص، وأنّ CSS قد لا تطبقه كما تتوقع دائمًا لوجود أشياء أكثر تخصيصًا. كما عليك الانتباه إلى تطبيق أكثر من قاعدة على العنصر نفسه، فهي الخطوة الأولى لإصلاح أخطاء التنازع. الخاصيات وقيمها تعتمد اللغة في أساسها على مكوّنين: الخاصية property: وهي معرّف يمكن للإنسان فهمه ويحدد الميزة التي تريد تنسيقها أو تعديلها مثل font-size وwidth وbackground-color. القيمة value: تأخذ كل خاصية قيمة تشير إلى كيفية تنسيق الخاصية. يشير المثال في الشكل التالي إلى خاصيات تأخذ قيمة واحدة مثل الخاصية color التي تأخذ القيمة blue عندما نُسند قيمة إلى خاصية نحصل على زوج يُدعى تصريح CSS، وتوضع هذه التصريحات ضمن كتل التصريحات. يشير المثال التالي إلى كتلة تصريحات CSS. ترتبط كتل التصريحات مع المحددات لتشكل ما يُدعى مجموعة قواعد. يتضمن المثال في الشكل التالي قاعدتين: الأولى تستهدف العنصر h1 والثانية تستهدف العنصر p. إنّ تحديد قيم لخاصيات CSS هي الطريقة الرئيسية لتحديد تخطيط الصفحات وتنسيقها، إذ يُقرر محرك CSS أية تصريحات ستطبق على كل عنصر في الصفحة، وتذكر أن تصريحات وقيم CSS حساسة لحالة الأحرف، وأن النقطتين المتعامدتين (:) تفصلان بين الخاصية وقيمتها. تطبيق: ابحث عن القيم المختلفة للخاصيات التالية ثم استخدمها في كتابة قواعد لتنسيق عناصر HTML تختارها: font-size width background-color color border تنبيه: إن لم تكن الخاصية معروفة أو لم تكن القيمة مناسبة لخاصية سيتعامل المتصفح مع التصريح على أنه غير صالح، وسيتجاهله محّرك CSS. تنبيه: اتُفق في CSS وغيرها من تقانات ويب أن تكون التهجئة الإنكليزية الأمريكية هي المعيارية في كتابة التصاريح. فكتابة الخاصية "colour" يجب أن تكون على الشكل color، فلن تعمل إن كُتبت colour. الدوال تأخذ بعض القيم شكل دوال بينما تأخذ معظمها قيمًا عددية أو كلمات مفتاحية بسيطة. الدالة ()calac يمكن لهذه الدالة إنجاز بعض الحسابات الرياضية على CSS: <div class="outer"><div class="box">The inner box is 90% - 30px.</div></div> .outer { border: 5px solid black; } .box { padding: 10px; width: calc(90% - 30px); background-color: rebeccapurple; color: white; } سيعرض المتصفح النتيجة التالية: تتكون الدالة من اسم الدالة وقوسين يضمان قيم الدالة. لاحظ كيف تعرف الدالة ()calc في مثالنا السابق عرض الصندوق ليكون 90% من عرض الكتلة التي تضمه ناقصًا 30 بكسل. ولا يمكن بالطبع حساب هذه القيمة مسبقًا ثم وضع النتيجة كقيمة ثابتة مباشرة. دوال التحويل من أمثلة هذه الدوال الدالة rotate: <div class="box"></div> .box { margin: 30px; width: 100px; height: 100px; background-color: rebeccapurple; transform: rotate(0.8turn); } وستكون النتيجة كما يعرضها المتصفح كالتالي: تطبيق: ابحث عن قيم الخاصيات التالية ثم اكتب قواعد CSS باستخدام هذه الخواص وطبقها على عناصر HTML مختلفة: transform background-image، وخاصة القيم المتدرجة gradient. color، وخاصة قيم rgb وrgba وhsl وhsla. القواعد المسبوقة بالمحرف @ تزود هذه القواعد المتصفح بإرشادات حول ما ينبغي على CSS فعله وكيف ستتصرف. بعض "قواعد@" بسيطة وتتكون من تعليمة وقيمة مثل import@ التي تدرج صفحة CSS ضمن أخرى: @import 'styles2.css'; من أكثر القواعد التي قد تراها هي media@ التي تستخدم لإنشاء استعلام وسائط متعددة media query تستخدم شروطًا منطقية لتطبيق تنسيق CSS محدد. تُحدد CSS في المثال التالي لون خلفية زهري للعنصر <body> لكن استعلام الوسائط المتعددة سيجعل اللون أزرق إن كانت نافذة العرض أوسع من 30em: body { background-color: pink; } @media (min-width: 30em) { body { background-color: blue; } } تطبيق: حاول إضافة استعلام وسائط لتغيير التنسيق اعتمادًا على اتساع نافذة العرض ثم غيّر اتساع نافذة المتصفح وراقب ما يحدث! الخاصيات المختصرة تُدعى بعض الخاصيات مثل font وbackground وpadding وborder وmargin بالخاصيات المختصرة shorthand properties لأنها تضبط عدة قيم في سطر واحد. إليك مثالًا عن قيم في سطر واحد: /*تُطبق القيم وفق التسلسل: أعلى، يمين، أسفل، يسار padding في الاختصار وذلك إن كانت ذات أربع قيم بينما إن كانت ذات قيمتين فستكون القيمة الأولى أعلى/أسفا والثانية يسار/يمين */ padding: 10px 15px 15px 5px; الشيفرة السابقة مماثلة للتصريحات التالية: padding-top: 10px; padding-right: 15px; padding-bottom: 15px; padding-left: 5px; وهذا سطر واحد يختصر الخاصية background: background: red url(bg-graphic.png) 10px 10px repeat-x fixed; وهو مماثل تمامًا للتصريحات التالية: background-color: red; background-image: url(bg-graphic.png); background-position: 10px 10px; background-repeat: repeat-x; background-attachment: fixed; يمكن العودة دائمًا إلى موسوعة حسوب أو شبكة مطوري موزيللا لمعلومات أوفى عن الخاصيات المختصرة. تطبيق: حاول أن تتدرب على استخدام التصريحات السابقة لتألفها أكثر. تنبيه: لا بدّ من الإشارة إلى ناحية هامة جدًا تتعلق بالخاصيات المختصرة عندما تُحذف منها قيم. فالقيمة التي لا تُحدد في الاختصار ستأخذ قيمتها الأصلية، أي أنّ أي نقص في القيم سيعيد الخاصية إلى القيمة التي ضبطت عليها مسبقًا. التعليقات من الممارسات الجيدة عند كتابة أية شيفرة كتابة تعليقات أو ملاحظات حول ما تفعله وكذلك الأمر في CSS. يساعدك الأمر في تذكر طريقة عمل الشيفرة عندما تعود إليها لاحقًا لأغراض الصيانة أو التطوير، كما تساعد الآخرين على فهم الشيفرة. يمكن وضع التعليقات بين مجموعة البداية */و مجموعة النهاية /*. تحدد التعليقات في مثالنا التالي بداية أقسام مختلفة من الشيفرة، إذ يساعدك الأمر في التنقل بين كتل الشيفرة عندما يصبح الملف ضخمًا. وفي هذه الحالة يمكنك بكل سهول البحث عن تعليق محدد ضمن محرر الشيفرة الذي تستخدمه لتصل إلى قسم الشيفرة المطلوب: /* Handle basic element styling */ /* -------------------------------------------------------------------------------------------- */ body { font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em; } @media (min-width: 70em) { /* Increase the global font size on larger screens or windows for better readability */ body { font-size: 130%; } } h1 {font-size: 1.5em;} /* Handle specific elements nested in the DOM */ /* -------------------------------------------------------------------------------------------- */ div p, #id:first-line { background-color: red; border-radius: 3px; } div p { margin: 0; padding: 1em; } div p + p { padding-top: 0; } تفيدك التعليقات أيضًا في تعطيل جزء من الشيفرة مؤقتًا لاختبار إن كانت تعمل كما هو مطلوب أم لا. لاحظ كيف عطلنا المحدد special. في الشيفرة التالية بتحويل كتلة التصريحات المرتبطة به إلى تعليق: /*.special { color: red; }*/ p { color: blue; } الفراغات يشير هذا المصطلح إلى الفراغات ومسافات الجدول tabs والأسطر الجديدة. يتجاهل المتصفح هذه الفراغات في CSS كما يتجاهلها في HTML أما الغاية الأساسية من استخدامها فهي تسهيل قراءة الشيفرة. لاحظ كيف يُكتب كل تصريح ضمن سطر خاص به في المثال التالي، ويعدها كثيرون أمرًا جيدًا لانها تُسهِّل صيانة وفهم ملفات التنسيق. body { font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em; } @media (min-width: 70em) { body { font-size: 130%; } } h1 { font-size: 1.5em; } div p, #id:first-line { background-color: red; border-radius: 3px; } div p { margin: 0; padding: 1em; } div p + p { padding-top: 0; } يُظهر المثال التالي تصريحات CSS مطابقة للشيفرة السابقة مكتوبةً بشكل مكثّف. وعلى الرغم من أنّ النتيجة ستكون نفسها، إلا أنّ الشيفرة في المثال الثاني أصعب قراءةً: body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} @media (min-width: 70em) { body {font-size: 130%;} } h1 {font-size: 1.5em;} div p, #id:first-line {background-color: red; border-radius: 3px;} div p {margin: 0; padding: 1em;} div p + p {padding-top: 0;} اختر أسلوب كتابة CSS الذي تريده في إنجاز مشاريعك الخاصة، بينما قد تُوضع بعض القواعد عندما تعمل ضمن فريق لإنجاز مشروع جماعي. تنبيه: تُستخدم المسافات الفارغة للفصل بين القيم في تصريحات CSS، لكن يمُنع استخدامها ضمن أسماء الخاصيات. التصريح التالي مثلًا صحيح: margin: 0 auto; padding-left: 10px; لكن هذا التصريح خاطئ: margin: 0auto; padding- left: 10px; هل عرفت أين الخطأ؟ بداية لا تُعد القيمة 0auto صحيحة للخاصية margin، إذ ينبغي أن تكون هذه القيمة قيمتان 0 وauto يفصل بينهما مساحة فارغة. ولن يُميّز المتصفح ثانيًا الخاصية padding- left لأنّ الصحيحة هي دون وجود فراغ (padding-left). لا بدّ إذًا من فصل القيم المختلفة عن بعضها بمساحة فارغة واحدة على الأقل، والإبقاء على اسم الخاصية وقيمها معًا كسلسلة نصية مترابطة. تطبيق: جرب أن تضيف فراغات أو تزيلها في شيفرة CSS اختبارية وراقب ما يحدث! ترجمة -وبتصرف- للمقال How CSS is structured. اقرأ أيضًا المقال السابق: بدء استخدام لغة CSS آلية عمل تعليمات CSS داخل المتصفحات كيفية تعديل حجم عنصر HTML والمساحة المحيطة به باستخدام CSS

من المهم أن تبحث عن استراتيحية لجذب عملاء جدد إلى عملك بروية وثبات وباستمرار كي يستمر عملك، فقد تفقد أفضل الشركات في العالم عملاءها. وبلا استراتيجية واضحة لحيازة عدد أكبر من العملاء، قد تستمر بفعل ما تراه صحيحًا دون أن تتحرى الفعالية الحقيقية لمقاربتك، أو أن تستثمر من ناحية أخرى القليل من المال في قناة لديها القدرة على جذب الكثير من العملاء. لهذا، يُعَد إعداد استراتيجية لحيازة عملاء أكثر هي الطريقة الأفضل، وذلك باستراتيجية تساعدك على فهم طريقة زيادة الطلب على منتجاتك وما الذي ستنفقه في هذا المجال وكيف ستحوّل الزوار إلى مستهلكين مستعدين للشراء (قد تساعدك المحادثة المباشرة مع المستهلكين أو قسائم الشراء في الخطوة الأخيرة شديدة الأهمية). ما المقصود بحيازة العملاء؟ يُقصد بحيازة العملاء Customer acquisition مجموعة من النشاطات التي تستخدمها الشركات لجذب عملاء جدد، ويتضمن ذلك إنشاء استراتيجية حيازة قابلةً للتجدد والتطور مع الوقت. لا بد من تسخير المصادر واستهلاك وقت لحيازة العملاء، فمن الخطأ الاعتقاد بأن العملاء سيبقون إلى جانبك دائمًا. يمكن وصف الأسباب الرئيسة الثلاث التي تهز العلاقة ذات الطابع العملي المتبدل B2B مع العملاء كالتالي: الارتباط: ويحدث عندما يحوز أحد عملائك على آخر، أو يندمج عميلان في شركة واحدة. قد يعني ذلك مالًا اكثر بالنسبة لهما، أما بالنسبة إليك فهي خسارة عميل. الافتراق: ويعني أن يغادرك أحد عملائك، ربما إلى منافس قدّم عرضًا أفضل أو عاد إلى منتج اعتاد عليه. الموت: ويعني أنّ أحد عملائك لن يتمكن من الدفع لك. فربما قد أوقف العميل نشاطه التجاري أو يعاني من صعوبات مالية. ولأنّ حالات الارتباط أو الافتراق أو الموت ستقع بطريقة ما لا محالة، فلن تنفعك استراتيجية إبقاء العملاء التي تعتمدها مهما كانت جيدة، وستحتاج عندها إلى خطط جاهزة لردم الفجوة التي حدثت، والإبقاء على عملك على المدى الطويل. تبدأ حيازة العميل من المنتج الذي تعرضه ابدأ بخارطة طريق لإيصال منتجك واجعل ذلك أولى خططك، فلن تنفعك أقوى استراتيجيات التسويق إن لم يكن منتجك أو خدمتك بمتناول المستهلك. فلو أخذنا على سبيل المثال برنامج المحادثة المخصص للأعمال Intercom، فقد تعرّف إليه الكثير من العملاء عند زيارتهم لمواقع تستخدم هذا المنتج، وبما خبروا قوته وفائدته من خلال الأجوبة الفورية والمحادثة المباشرة. ولهذا السبب عملت الشركة المنتجة له على رفع معايير منتجاتها قبل كل شيء، فهذا ما يجعل المنتج قادرًا على التسويق لنفسه بنفسه. استراتيجات حيازة العملاء المدفوعة والعضوية تُقسم استراتيجيات حيازة العملاء نمطيًا إلى نوعين مدفوعة paid وعضوية organic، لنلق نظرةً عليها. الحيازة المدفوعة يُستخدم هذا النوع من الحيازة إن كنت تستثمر بفعالية لتدفع مستهلك إلى اتخاذ قرار الشراء. وقد يعني هذا أنك قد تدفع رسمًا عندما ينقر هذا المستهلك على رابط أو أن ترسل المال إلى شركة أخرى مقابل تحويل المستهلك إليك. إليك بعض طرق حيازة المستخدم المدفوعة الأكثر شيوعًا: إعلانات الدفع عند النقر PPC إعلانات الدفع عند النقر pay-per-click ads هي إعلانات نصية صغيرة على غوغل وغيره من محركات البحث، تُحرض على الحصول على استجابة مباشرة لما هو معروض، أو تزيد إدراك الزائر لوجوده. تُعَد هذه الطريقة فعّالةً من ناحية التكلفة وتعرض علامتك التجارية أعلى محتوى الصفحة إن لم يكن لمحتوى موقعك تقييمًا عاليًا في نتائج البحث. إعلانات معروضة الإعلانات المعروضة display ads هي إعلانات مشابهة لإعلانات PPC إلا أنها تعرض على مواقع الويب وليس على محركات البحث؛ كما أنها تُستخدم لزيادة الوعي بالمنتج المعروض، ويمكن اختيار طريقة الدفع عندما ينقر عليها الزائر أو عندما يستعرض الإعلان. التسويق بالعمولة التسويق بالعمولة Affiliate marketing هو ممارسة تدفع فيها لمالكي مواقع ويب (الشركات المسوّقة لك) كي يوصوا بمنتجك أو خدمتك. تحويل العملاء وهي برامج تدفع فيها لعملاء موجودين لكي يوصوا بمنتجك أو خدمتك. شبكات التواصل الاجتماعي الترويجية وهي المنشورات الدعائية على فيسبوك أو تويتر أو إنستغرام، تدفع إلى بعض مواقع التواصل الاجتماعي مبالغ مالية إن ساعدتك على حيازة عملاء جدد، بينما تدفع إلى بعضها الآخر وفقًا لعدد المشاهدات أو النقرات على الإعلان. الحيازة العضوية تكلّف استراتيجات الحيازة العضوية المال أيضًا، لكن فقط لفريق حتى يعمل، أي أنها لن تكلفك شيئًا لتسويق منتجاتك عبر الإنترنت. تُدعى هذه الاستراتيجية أيضًا "التسويق الوارد inbound" لأنها تحاول زيادة عدد الواردين إلى موقعك، وبالتالي التعرف على منتجاتك. إن موقعك الإلكتروني هو المضمار الوحيد الذي يشهد نشاطات الحيازة العضوية للعملاء، فهو مختلف عن مفهوم النطاق المستأجر rented territory كما هو مواقع التواصل الاجتماعي ومحركات البحث. وهذا ما يمنحك إمكانيةً أكبر في التحكم بمظهر وطبيعة نشاطات التسويق الواردة إليك. إليك بعض الطرق التي يمكن تجربتها في الحيازة العضوية. التسويق من خلال المحتوى يمكنك تطوير منشورات على مدونات أو أدلة استخدام أو إنفوغرافيك أو مقاطع فيديو وغير ذلك للإجابة عن الأسئلة وحل المشاكل وتعريف القراء بمجالات نشاطك التجاري. تحسين محركات البحث SEO ويقصد بها تحسين محتوى موقعك لتعزيز ترتيب ظهوره في نتائج عمليات البحث على غوغل وبقية محركات البحث. التسويق عبر البريد الإلكتروني من خلال إرسال بريد إلكتروني إلى العملاء المحتملين. التسويق من خلال منصات التواصل الاجتماعي وهو عملية كتابة منشورات والرد عليها والانخراط مع الناس على فيسبوك وتويتر ولينكد-إن وإنستغرام، وذلك للحصول على مناصرة العملاء وزيادة الوعي بمنتجاتك. المناسبات وهو التسويق وجهًا لوجه لجذب وتثقيف وإسعاد الجمهور بهدف تحويلهم أخيرًا إلى عملاء. إذًا ما هي الاستراتيجية الأفضل؟ لا يمكن الحكم مباشرةً، إذ يعتمد الأمر في كلتا الاستراتيجيتين على الكلفة ومعدلات النجاح وفقًا لطبيعة العمل الذي تنشط به وطبيعة العملاء الذي تحاول كسبهم. دراسة حالة: استراتيجية حيازة العملاء التي اتبعتها شركة Intercom إليك ما فعلته منصة Intercom للتواصل مع العملاء سابقًا ولا تزال لجذب عملاء محتملين. التسويق من خلال المحتوى قد تلاحظ أن هذه الشركة من كبار المدافعين عن المحتوى، وهكذا اكتسبت زخمًا مستمرًا في بدايتها عندما كتب مؤسسها المشارك Des مقالتين إلى ثلاث أسبوعيًا، ونفّذ جلسات حوارية عبر ويب بانتظام. لا تزال الشركة حتى الآن تستثمر بشدة في المنشورات دائمة التجدد evergreen والكتب والمدونات الصوتية والأدلة ومقاطع الفيديو لجذب الناس الذين يحتاجون خدمات تستطيع الشركة تأمينها، وتذكر أن المحتوى ليس أمرًا قليل التكلفة، إذ ستلاحظ أمرًا مشتركًا بين جميع الشركات التي تقدم محتوىً عالي التصنيف وهو استثمار الوقت والمال للحصول على جودة عالية. ستستشعر محركات البحث هذه الجودة وتمنح هذا المحتوى تصنيفًا عاليًا وهذا ما أكده موقع Backlinko حول تصنيف محركات البحث للنتائج. التسويق من خلال البريد الإلكتروني كتب المؤسس المشارك للشركة قرابة 100 بريد يوميًا في بداية مشوارها ليخبر العملاء المحتملين عن خدماتها، وكيف ستبدو هذه الشركة من منظورهم والحصول على آرائهم. تعتمد الشركة مؤخرًا على حملات واسعة النطاق للتسويق من خلال البريد الإلكتروني، بالإضافة إلى إرسال بريد إلكتروني شخصي؛ كما يرسل فريق المبيعات بريدًا إلكترونيًآ تلقائيًا للمتابعة مع العملاء المحتملين وإبقاء قناة الاتصال مع الحسابات الصغيرة أكثر فعالية. تّرسل الشركة أيضًا رسائل أسبوعيةً لمشتركيها لتطلعهم على أحدث المنشورات والندوات القادمة وغيرها من المناسبات، وبهذا يزيد انخراط العميل بنشاطات الشركة، وتُظهر للزوار من غير العملاء مقدار الفائدة التي يجنونها من خدمات الشركة. المناسبات المباشرة بدأت الشركة باستضافة المناسبات الصغيرة في عام 2015 في أسلوب معتمد لبناء علاقات شخصية مع عملائها ومستخدميها، ومع المهتمين وصناع المحتوى عمومًا؛ أما حاليًا، فتُحضَّر المناسبات من خلال الصفحة الرئيسية للشركة التي تتميز بإمكانية الاتصال بأشخاص محددين ترغب الشركة في لقائهم، مع إمكانية الحديث مباشرة معهم ولفت انتباههم لفترات طويلة ضمن جو صُمم خصيصًا لهذا الغرض. تطوّرت بعد ذلك هذه الاحتفاليات الصغيرة إلى جولات عالمية، فقد تنقلت الشركة بين مدن العالم المعروفة التي تشكل حواضن للتقنية النامية، وموطنًا لعملائها والمستخدمين الذين يتابعونها. وهكذا بدأت intercome بالنمو كمنتَج وكشركة، واستطاعت جذب اهتمام شركات أخرى (عملاء محتملون) في نفس السوية من التطور. حساب عائدات الاستثمار ROI لنهج حيازة العملاء الذي تتبعه لتحديد النهج الأكثر فعاليةً لعملك، انظر إلى تكلفة حيازة عميل customer acquisition cost واختصارًا CAC، وهي الميزانية اللازمة للحصول على عميل جديد عبر قناة تسويق محدد أو عبر كل القنوات المستخدمة. كيفية حساب تكلفة حيازة عميل CAC إما أن تحسب تكلفة حيازة عميل CAC الوسطي أو المخصص لقناة تسويق محددة. لإيجاد CAC الكلي، اختر فترةً زمنيةً معينة (شهر مثلًا)، ثم قسّم كمية المال الكلية التي أنفقتها على جهود حيازة الزبائن في تلك الفترة على عدد العملاء الذين حزتهم خلال هذه الفترة، وسيكون الناتج هو الكلفة الوسطية لحيازة عميل واحد. وإن أردت حساب CAC لقناة تسويق مثل إعلانات PPC أو التسويق من خلال المحتوى، فستبقى الخطوات نفسها ما عدا أنك ستقسم كمية المال التي أنفقتها على هذه الطريقة بالتحديد على عدد العملاء الذين حزتهم خلال هذه الفترة. وهكذا ستتمكن من معرفة تكلفة حيازة عميل في كل قناة من قنوات التسويق التي تنتهجها، ومن ثم المقارنة بينها. تحسين تكلفة حيازة عميل CAC عندما تبدأ العمل برأس مال محدود، فإن حيازة عملاء جدد دون الانتباه إلى التكلفة فقط لسد فجوة ناتجة عن إغلاق حساب، قد يكون أسوأ ما يمكنك فعله! فمعرفة تكلفة حيازة عميل ستساعدك في ضبط استثمارك ضمن قنوات الحيازة المختلفة، وسيساعدك ذلك على تحديد القناة التي تساهم أكثر في زيادة نمو استثمارك وكم عميلًا حازت كل قناة مقارنةً بالأخريات. لنفترض مثلًا أن طريقة PPC فعّالة لكنها مكلفة، يمكنك حينها تقليل حجم الإعلانات لتشمل بضعة كلمات مفتاحية تدفع إلى حيازة أكبر. وإن كانت كلفة حيازة عميل عبر التسويق من خلال المحتوى منخفضةً لكنها تقدم أعلى نسبة عائدات من بين كل أقنية التسويق التي تنهجها، فهذا دليل أكيد على ضرورة الاستثمار ضمن فريق التسويق من خلال المحتوى. سيساعدك حساب CAC قطعًا في تطوير وتوثيق استراتيجية حيازة عميل ناجحة. وستعرف مدعومًا بالبيانات أيّ القنوات عليك استخدامها وأيها أقل تكلفةً، وما هي تكلفة حيازة زبون باستخدام كل منها. تحويل الزائرين الذين حزتهم إلى عملاء إنّ جذب العملاء المحتملين إلى موقعك هو الخطوة الأولى لتحوزهم كعملاء، ولا بد من اتباع أسلوب يحوّل هؤلاء من أشخاص يمرون لإلقاء نظرة، إلى عملاء يشترون منتجك. ولهذا يمكنك استخدام نوافذ المحادثات المباشرة التي تجعل فريق تسويقك منخرطًا بفعالية مع الزوار الذين ينوون الشراء فعلًا، وبالتالي ستسرّع قدرتك على توليد محفزّاتٍ لجذب العميل. وبمجرد أن ينخرط الزائر في المحادثة المباشرة، يمكنك استخدام مجيب آلي ليحدد الزوار ذوي الاستجابة السريعة وتوجيههم إلى رجل المبيعات المناسب. لقد أثبت استخدام المحادثات المباشرة والمجيبين الآليين فعاليةً متزايدةً في تحسين معدلات حيازة العملاء كما تعرض الوقائع التالية: شهدت شركة Housecall Pro زيادةً مقدارها 35% في تحويل المتابعين إلى عملاء من خلال المحادثة المباشرة مقارنةً بقنوات أخرى. زادت نسبة المعلومات التي حصلت عليها شركة Copper من متابعيها بنسبة 13%. شهدت شركة Unity زيادةً مقدارها 45% في تحويل المتابعين إلى عملاء من خلال المجيب الآلي. الحصول على عملاء جدد باستخدام استراتيجيات فعالة من ناحية التكلفة قد تكون ممن يستقطب عملاءً جدد في هذه اللحظات وبوتيرة مستقرة، لكن تذكر أنّ هناك دائمًا متسع لتحسين استراتيجيتك. اجلس والق نظرةً جادةً إلى تكلفة حيازة عميل وقرر ما النهج الذي ينبغي التوسع فيه أو تخفيضه؛ وهذا ما سيحقق الفرق، ليس فقط في تكلفة التسويق، بل في مدى فعاليتك في استدامة عمل مزدهر. ترجمة -وبتصرف- للمقال Customer acquisition strategy how to acquire more customers in 2022 لصاحبه Davin O'dwyer. اقرأ أيضًا 5 طرق مضمونة لتحويل العملاء المحتملين إلى عملاء رائعين كيف تجذب عملاء جدد دون الحاجة للترويج لنفسك اكتساب العملاء: كيف تجذب مزيدا من العملاء عشر طرق بسيطة لإبهار العملاء كل يوم أبهر عملائك وعزز مبيعاتك عبر حيل نفسية