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

يساعدك هذا المقال على تقدير إذا ما كان محرّك الألعاب جودو 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 طرق مضمونة لتحويل العملاء المحتملين إلى عملاء رائعين كيف تجذب عملاء جدد دون الحاجة للترويج لنفسك اكتساب العملاء: كيف تجذب مزيدا من العملاء عشر طرق بسيطة لإبهار العملاء كل يوم أبهر عملائك وعزز مبيعاتك عبر حيل نفسية

سنعمل في هذا المقال على تنسيق ملف HTML بسيط كي نطبق عمليًا بعض ميزات اللغة. لا بد أن تمتلك دراية بأساسيات عمل الحاسوب وقد ثبت البرمجيات الأساسية لتطوير الويب قبل متابعة القراءة، كما يُفضل أن تطلع على أساسيات HTML وأيضًا أساسيات التعامل مع الملفات. تحضير ملف HTML سنبدأ العمل انطلاقًا من ملف HTML، لذلك انسخ الشيفرة التالية واحفظها في حاسوبك في ملف جديد باسم index.html: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Getting started with CSS</title> </head> <body> <h1>I am a level one heading</h1> <p>This is a paragraph of text. In the text is a <span>span element</span> and also a <a href="https://example.com">link</a>.</p> <p>This is the second paragraph. It contains an <em>emphasized</em> element.</p> <ul> <li>Item <span>one</span></li> <li>Item two</li> <li>Item <em>three</em></li> </ul> </body> </html> إضافة تنسيقات CSS إلى الملف ينبغي علينا بدايةً إخبار ملف HTML بوجود بعض قواعد التنسيق التي نريد تطبيقها، وهنالك ثلاث طرق مختلفة لإنجاز الأمر لكننا سنستخدم الآن الطريقة الأكثر تداولًا وفائدةً وهي ربط ملف CSS بملف HTML عبر ترويسته أي ضمن العنصر <head>. انشئ ملفًا في نفس المجلد الذي يضم ملف HTML واحفظه باسم styles.css، إذ يدل الامتداد css. على أنّ الملف هو ملف تنسيق CSS. ضع الشيفرة التالية داخل العنصر <head> في ملف HTML لكي تربط به ملف التنسيق styles.css: <link rel="stylesheet" href="styles.css"> يخبر العنصر <link> المتصفح عن وجود ملف منفصل يضم قواعد تنسيق من خلال استخدام السمة rel ويدله على مكان وجوده من خلال السمة href. يمكنك اختبار نجاح عملية الربط بإضافة القاعدة التالية إلى ملف التنسيق ثم تجريب الشيفرة عبر المحرر. h1 { color: red; } تحفظ التغييرات التي أجريتها على ملفي CSS و HTML ثم حمّل الصفحة من جديد ضمن المتصفح. سيتحوّل لون عنوان المستوى الأول في أعلى الصفحة إلى الأحمر. فإن حدث ذلك يكون عملك صحيحًا، وإن لم يحدث ذلك تحقق من كتابة التعليمات بدقة. بإمكانك متابعة العمل على ملف styles.css على حاسوبك أو استخدام محرر الشيفرة الذي ستراه تاليًا. سيتعامل محرر الشيفرة مع تنسيقات CSS التي نكتبها في اللوحة الأولى كما لو أنها ارتبطت بملف HTML بالطريقة التي شرحناها سابقًا. دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن تنسيق ملف HTML لقد أظهرنا إمكانية استهداف أي عنصر من عناصر HTML وتنسيقه عندما حوّلنا لون العنوان إلى الأحمر. ننجز الأمر باستخدام "محدد عناصر element selector" وهو محدد يستهدف عنصر HTML وفقًا لاسمه. فلكي نستهدف مثلًا عنصر الفقرة النصية، عليك استخدام المحدد p. لاحظ كيف ستحول القاعدة التالية جميع الفقرات النصية إلى اللون الأخضر: p { color: green; } بإمكانك أيضًا استهداف عدة عناصر في الوقت ذاته باستخدام فاصلة "," بين أسمائها. ستحوّل القاعدة التالية عنصر الفقرة النصية وجميع عناصر القائمة إلى اللون الأخضر: p, li { color: green; } حاول أن تطبق ما تعلمته في محرر الشيفرة التالي: تغيير السلوك الافتراضي للعناصر عندما نلقي نظرة على ملف HTML محكم التوصيف حتى لو كان بسيطًا كما في مثالنا، نلاحظ كيف يضيف المتصفح بعض التنسيقات الافتراضية لتسهُل قراءة الصفحة. فالعناوين كبيرة وسميكة والقوائم منسقة على شكل نقاط، ويعود السبب في ذلك إلى التنسيقات الافتراضية التي بُنيت ضمن المتصفح والتي يطبقها على جميع الصفحات. إنّ غياب هذه التنسيقات الأساسية سيجعل الصفحة في حالة فوضى كبيرة ويتوجب علينا حينها تنسيق كل شيء من الصفر. تجدر الإشارة هنا إلى أن جميع المتصفحات الحديثة ستعرض الصفحات وفق نفس التنسيق الافتراضي تقريبًا. لكننا نفضل في بعض الأحيان اختيار تنسيقات مختلفة عن الطريقة التي يتبعها المتصفح، عندها نختار العنصر الذي نريد أن نغيّر تنسيقه ونستخدم قواعد CSS لتغيير مظهره. فإن أردت مثلًا تغيير عرض عناصر القائمة غير المرتبة <ul> كي لا تظهر على شكل نقاط، يمكنك إضافة القاعدة التالية: li { list-style-type: none; } يمكنك الاطلاع على تفاصيل أكثر عن الخاصية list-style-type ضمن موسوعة حسوب وستجد الكثير من الأمثلة التي تعرض جميع القيم الممكنة التي تأخذها هذه الخاصية بدلًا من إزالة قائمة النقاط فقط. إضافة أصناف لقد رأينا حتى اللحظة إمكانية استهداف العنصر باسمه ثم تنسيقه، وتتيح لك هذه الطريقة تنسيق جميع العناصر من النوع ذاته كي تُعرض بالمظهر ذاته. لكنك لن تفعل ذلك في أغلب الأوقات بل تحتاج إلى طريقة لتطبيق بعض القواعد على مجموعة محددة من العناصر دون غيرها. وأكثر الطرق شيوعًا لإنجاز الأمر هي إضافة صنف class إلى عنصر HTML ثم استهداف جميع العناصر التي تضم هذا الصنف. لتجرب الأمر، أضف السمة class إلى العنصر الثاني من القائمة غير المرتبة <ul> لتصبح كالتالي: <ul> <li>Item one</li> <li class="special">Item two</li> <li>Item <em>three</em></li> </ul> يمكنك استهداف جميع العناصر التي تنتمي إلى الصنف special بإنشاء "محدد صنف class selector" يبدأ بنقطة يليه اسم الصنف كالتالي: .special { color: orange; font-weight: bold; } احفظ التعديلات ثم حمل الصفحة من جديد ضمن المتصفح. يمكنك تطبيق الصنف على أية عناصر في الصفحة إن أردتها أن تبدو برتقالية وبخط سميك. حاول أن تضيف الصنف special إلى العنصر <span> داخل الفقرة النصية، ثم حمّل الصفحة من جديد وراقب ما سيحدث. قد تجد أحيانًا قاعدة CSS تضم اسم العنصر يليها اسم الصنف كالتالي: li.special { color: orange; font-weight: bold; } تعني الصياغة السابقة أنّ القاعدة ستستهدف جميع عناصر <li> التي تمتلك الصنف special فقط. وهكذا لن تكون قادرًا على تطبيق هذا التنسيق على العنصر <span> السابق أو أية عناصر أخرى تمتلك الصنف special، وعليك حينها تحديد العناصر التي ستطبق عليها التنسيق على شكل قائمة كالتالي: li.special, span.special { color: orange; font-weight: bold; } وكما قد تتصور، بإمكانك تطبيق بعض القواعد على عناصر مختلفة ولا حاجة لكتابة القواعد مجددًا في كل مرة تحتاجها فيها. لهذا من الأفضل أحيانًا تجاوز العنصر والإشارة إلى صنفه إلا إن أردت تطبيق قواعد خاصة على عنصر بمفرده أو أردت التأكد من أنها لن تُطبق على عناصر أخرى. تنسيق أشياء بناءً على موقعها في الملف قد ترغب أحيانًا بعرض بعض الأجزاء بشكل مختلف وفقًا لموقعها ضمن الصفحة، وستجد عددًا من المحددات التي تساعدك على إنجاز الأمر، لكننا سنلقي نظرة الآن على اثنين من هذه العناصر. لاحظ وجود عنصري <em> في ملف HTML أحدهما داخل فقرة نصية والآخر ضمن عنصر قائمة. ولاختيار عنصر <em> الذي يقع داخل عنصر القائمة <li> يمكنك استخدام محدد يُدعى "محددات العناصر السلسلة descendant combinator" والذي يتكوّن من اسم العنصر الأب يليه فراغ ثم العنصر الابن. أضف القاعدة التالية إلى ملف التنسيق: li em { color: rebeccapurple; } سيختار هذا المحدد أي عنصر <em> داخل العنصر <li>. وهكذا من المفترض أن تجد محتوى <em> الموجود ضمن عنصر القائمة الثالث باللون البنفسجي بينما يبقى العنصر الآخر كما هو. كما قد ترغب أحيانًا بتنسيق فقرة نصية عندما تأتي مباشرة بعد عنوان ويكون لهما نفس المستوى في شجرة HTML. لإنجاز الأمر، ضع الإشارة + (محدد العناصر الأخوة sibling combinator) بين محددي العنصرين: h1 + p { font-size: 200%; } يضم المثال الموجود في محرر الشيفرة التالي القاعدتين السابقتين، حاول أن تضيف قاعدة لتجعل العنصر <span> أحمر اللون إن كان داخل فقرة نصية. ستعرف إن نجحت في الأمر عندما ترى هذا العنصر أحمر اللون في الفقرة النصية ولم يتغير لون نفس العنصر داخل عنصر القائمة الأول. ملاحظة: تمنحك CSS طرق عدة لاستهداف عناصر HTML ولا يمثل ما عرضناه سوى البداية! سنتعرف لاحقًا على تفاصيل هذه المحددات والكثير غيرها في مقالات لاحقة. تنسيق أشياء بناءً على حالتها سنلق نظرة الآن على طريقة تنسيق العناصر وفقًا لحالتها، ومن أوضح الأمثلة على هذه الفكرة تنسيق الروابط التشعبية. لتنسيق الروابط التشعبية نستهدف العنصر <a> الذي يأخذ حالات مختلفة كأن يكون الرابط قد نقُر أو لم يُنقر بعد أو أن يكون مؤشر الفأرة فوقه أو لا، أو تلقى تركيز الدخل عبر لوحة المفاتيح أو أنه نُقر وتجري عملية الانتقال إلى الهدف. بإمكانك أن تغير تنسيق الرابط التشعبي باستخدام CSS لتميز الحالات السابقة. لاحظ كيف تنسق الشيفرة التالية الرابط باللون الزهري إن لم يُنقر بعد وبالأخضر عند زيارة الرابط: a:link { color: pink; } a:visited { color: green; } كما يمكنك تغيير مظهر الرابط عند تمرير مؤشر الفأرة فوقه كان تزيل الخط الذي يظهر تحته افتراضيًا: a:hover { text-decoration: none; } حاول أن تجرب قواعد CSS المختلفة للتحكم بحالة الرابط في محرر الشيفرة التالي: لقد أزلنا في الشيفرة السابقة الخط أسفل الرابط التشعبي عند تمرير مؤشر الفأرة فوقه، كما يمكن إزالته أيضًا في جميع حالات الرابط. لكن ينبغي أن تدرك أنّ الرابط لا بدّ وأن يبدو رابطًا في المواقع الحقيقية، وبالتالي إبقاء الخط تحته أمر مهم جدًا كي يدرك المستخدم وجود جزء يمكن نقره من النص، فهذا هو السلوك المتوقع للرابط. إذًا فقد تجعل بعض تنسيقات CSS صفحتك صعبة القراءة وأقل شمولية (لا يمكن لجميع الزوار الوصول إليها). ملاحظة: سنشير أحيانًا إلى مصطلح سهولة الوصول accessibility أو الشمولية في سلسلة المقالات هذه ويقصد بها ما يجعل الصفحة مفهومة وسهلة الاستخدام لأي كان. فقد يستخدم زائري الصفحة حاسوبًا مع فأرة أو هاتف مزود بشاشة لمس أو قارئ شاشة ينطق محتوى الصفحة أو قد يحتاج إلى حجم أكبر للنص أو قد يتنقل في الموقع باستخدام لوحة مفاتيح فقط. عادة ما يكون التنسيق الافتراضي لملف HTML مناسبًا للجميع، فلا تعقد استخدامه عندما تبدأ تطبيق تنسيقات CSS. الجمع بين المحددات والمجمّعات يمكنك الجمع بين عدة محددات selectors أو مجمّعات combinator معًا. إليك مثالًا: /*<article> الموجود ضمن <p> داخل <span> اختر أي عنصر */ article p span { ... } /*<h1>الذي يأتي بعد <ul> الذي يأتي مباشرة بعد العنصر <p> اختر العنصر */ h1 + ul + p { ... } يمكن الجمع بين عدة أنواع أيضًا: body h1 + p .special { color: yellow; background-color: black; padding: 5px; } تنسق الشيفرة السابقة أي عنصر من الصنف special موجودة ضمن فقرة <p> تأتي مباشرة بعد عنصر <h1> موجود داخل عنصر <body>. لا تقلق إن بدت القاعدة السابقة معقدة، ستعتاد على ذلك حالما تبدأ بكتابة المزيد من قواعد CSS. خلاصة ألقينا نظرة في هذا المقال على عدد من الطرق المستخدمة في تنسيق ملف HTMl مستخدمين CSS. سنطور معارفنا مع تقدمنا في سلسلة المقالات هذه، لكنك تمتلك الآن ما يكفي لتنسيق النصوص وتطبيق قواعد CSS بطرق مختلفة لاستهداف أية عناصر في ملف HTML. سنتابع في مقالنا التالي مع هيكلية CSS. ترجمة -وبتصرف- للمقال Getting started with CSS. اقرأ أيضًا المقال السابق: تعرف على CSS الدليل السريع إلى لغة التنسيق CSS كيفية تنسيق عنصر div في HTML باستخدام CSS

تتيح لك اللغة التوصيفية CSS -اختصارًا للتنسيقات الانسيابية Cascading style sheets- إضفاء مظهر رائع على صفحات الويب، فكيف تفعل ذلك خلف الستار؟ إذ يشرح لك هذا المقال ماهية اللغة من خلال أمثلة بسيطة عن صياغتها، كما يعرّف بعض المصطلحات المتعلقة بهذه اللغة. ننصحك قبل المتابعة في قراءة هذا المقال أن: تطلع على أساسيات استخدام الحاسوب وتصفح الويب. تطلع على المقال تثبيت البرمجيات الأساسية للانطلاق في تطوير الويب وتتفهم طريقة إنشاء وإدارة الملفات كما شرحناها في مقال التعامل مع الملفات. تطلع على أساسيات HTML كما شرحناها ضمن سلسلة المقالات مدخل إلى HTML. ستظهر العناوين بحجم أكبر من النص العادي وتنفصل الفقرات وتباعد بينها فراغات عندما توصَّف نصًا أو محتوًى عمومًا باستخدام لغة HTML، كما ستلوَّن الروابط أيضًا ويظهر خط أسفلها لتمييزها عن النص المحيط، وإنّ ما تراه في الواقع هو التنسيق الافتراضي الذي يطبقه المتصفح، وهو تنسيق بسيط يُطبّق على ملفات HTML لتسهيل قراءتها حتى إذا لم يخصص مؤلف الصفحة أية تنسيقات صراحةً. لن تنبض صفحات ويب بالحيوية إذا اكتفينا بهذه التنسيقات البسيطة، لذلك وجدت CSS لتساعد في التحكم بمظهر عناصر HTML عندما تُعرض على المتصفح، وبالتالي ستقدِّم المحتوى الذي تريد بالمظهر الذي تريد. دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن استخدامات CSS أشرنا سابقًا إلى أنّ CSS هي لغة توصيف للطريقة التي تظهر بها المستندات للمستخدِم، ونقصد بالمستند عادةً أنه ملف نصي جرت هيكلته باستخدام إحدى لغات التوصيف وأكثرها شيوعًا لغة HTML، فقد تصادف لغات توصيف أخرى مثل XML أو SVG. تُعرض هذه المستندات للمستخدِم بتحويلها إلى شكل سهل القراءة بواسطة المتصفحات مثل Firefox أو Chrome أو Edge التي صُممت خصيصًا لهذه الغاية سواء على شاشات الحواسيب أو أجهزة الإسقاط أو الأجهزة الذكية. ملاحظة: يُدعى المتصفح أحيانًا باسم "عميل المستخدِم" ويعني ببساطة أنه برنامج يمثل المستخدِم داخل نظام التشغيل، ولهذا فالمتصفحات هي النوع الرئيسي من العملاء الذي نقصده عندما نتكلم عن CSS، وطبعًا ليس النوع الوحيد، إذ ستجد مثلًا برامج عميلة أخرى مثل تحول ملفات HTML و CSS إلى ملفات PDF لتسهيل طباعتها. يمكنك استخدام CSS لتنسيق أبسط مظاهر النص مثل اللون وحجم خط الكتابة، كما تستخدَم لإنشاء تخطيط مثل تحويل أحد أعمدة النص إلى تخطيط مكوّن من منطقة للمحتوى الرئيسي ومنطقة جانبية تضم معلومات تتعلق بهذا المحتوى، ويمكنك أيضًا استخدام اللغة لإضافة تأثيرات مثل تحريك المحتوى (الرسوم المتحركة). صيغة CSS تُبنى لغة CSS على قواعد تعرّف مجموعة من التنسيقات التي يمكن تطبيقها على عنصر أو مجموعة عناصر محددة موجودة في صفحة HTML، فقد ترغب مثلًا بعرض العنوان الرئيسي للصفحة على أساس نص أحمر كبير، ولتنجز الأمر لاحظ شيفرة CSS البسيطة التالية: h1 { color: red; font-size: 5em; } تبدأ القاعدة بتسمية "مُحدِّد Selector" مهمته تحديد عنصر HTML الذي سيخضع للتنسيق، وهذا العنصر هو <h1> في مثالنا السابق، ويلي اسم المحدد قوسين معقوصين { } نضع ضمنهما مجموعة من التصريحات Declarations التي تأخذ صورة زوج (خاصية: قيمة)، إذ يعرِّف كل زوج خاصيةً لتنسيق العنصر أو العناصر المحددة ثم يسند إليها القيمة المطلوبة، وتأتي دائمًا نقطتين متعامدين بعد الخاصية تليها القيمة، وقد تأخذ الخاصية قيمًا مختلفةً وفقًا لطبيعتها، فقد تأخذ الخاصية color في مثالنا مجموعةً متنوعةً من القيم، كما تأخذ الخاصية font-size أيضًا قيمًا لها وحدات قياس مختلفة. تضم صفحة تنسيقات CSS قواعد كثيرة تأتي واحدة تلو الأخرى مثل: h1 { color: red; font-size: 5em; } p { color: black; } ستتذكر بسرعة بعض القيم وتستخدمها بينما ستضطر إلى البحث عن أخرى. قد تساعدك العديد من المواقع على الإنترنت في إيجاد هذه القيم سريعًا مثل موسوعة حسوب أو شبكة مطورِي موزيللا. ملاحظة: يمكنك العثور على كل خاصيات CSS في توثيق CSS العربي في موسوعة حسوب فاجعله تحت يدك لأنك سترجع له مرارًا وتكرارًا. وحدات CSS قُسّمت اللغة إلى عدة وحدات لتنظيم العدد الكبير من الخصائص التي يمكن استخدامها في تنسيق العناصر، فقد تجد مثلًا أنّ الخصائص المتعلقة بالخلفيات في موسوعة حسوب في وحدة مستقلة وكذلك الإطارات وهكذا. لا تكترث كثيرًا في هذه المرحلة لفهم هيكلية CSS، لكن من السهل إيجاد المعلومات إذا اتبعت مثلًا فكرة إمكانية وجود ما تبحث عنه ضمن الأشياء المشابهة له، وبالتالي في المواصفة نفسها CSS specification، فقد تتوقع على سبيل المثال، وجود الخاصية background-color في وحدة "الخلفيات" والخاصية border-color في وحدة "الإطارات". مواصفات CSS تُعرَّف جميع تقانات الويب مثل جافاسكربت، HTML، CSS، وغيرها ضمن مجلدات ضخمة تدعى بالمواصفات Spesification أو "specs" اختصارًا، والتي تنشرها منظمات تحديد المعايير مثل W3C أو WHATWG أو ECMA أو Khronos. تحدد هذه المواصفات الطريقة الدقيقة التي تُستخدَم فيها هذه التقانات، ولا تختلف CSS عن غيرها في هذا الصدد، فقد طورتها مجموعة من W3C تُدعى "مجموعة عمل CSS" تضم ممثلين عن مصنِّعي المتصفحات وغيرها من الشركات التي تهتم بهذه التقانة بالإضافة إلى خبراء حياديين لا ينتمون إلى أيّ منظمة أو شركة. تطوّر المجموعة خصائص CSS الجديدة أو تحدد مواصفاتها، وقد يكون السبب هو رغبة متصفح محدد بامتلاك إمكانات معينة أو لحاجة المطورين والمصممين إلى توصيف لبعض الميزات أو أن تجد المجموعة نفسها ضرورةً لتحديد متطلبات معينة، كما تطوَّر اللغة باستمرار وتضاف إليها ميزات جديدة، لكن الأمر الأساسي هو عدم تغيير الأمور بطريقة تؤثر على مواقع ويب القديمة، فالمواقع التي بُنيت عام 2000 بتقنيات CSS محدودة لا بدّ أن تبقى قابلةً للاستخدام في متصفحات اليوم. من الطبيعي بوصفك مبتدئًا أن تجد مواصفات CSS مرهقة، فهي مخصصة للمهندسين كي يستخدمونها في دعم ميزات في البرمجيات العميلة للمستخدِم وليس لتُقرأ من قبل مطورِي ويب لفهم CSS، إذ يفضِّل الكثير من المطورِين المحترفين قراءة توثيقات أكثر وضوحًا مثل توثيقات "شبكة مطوري موزيللا" أو توثيقات "موسوعة حسوب" الموجهة للقارئ العربي، لكن لا بدّ أن تعرف أنها موجودة وأن تفهم العلاقة بين خصائص CSS التي تستخدمها وبين دعم المتصفح لها والمواصفات. معلومات عن دعم المتصفحات لميزات CSS عندما تعتمد مجموعة CSS ميزةً جديدةً ستتمكن من استخدامها في صفحاتك حالما يدعمها متصفح، أي حالما تُكتب الشيفرة اللازمة للمتصفح لتحويل التعليمات المتعلقة بهذه الميزة إلى شيء ملموس على الشاشة، وسنطلع أكثر على ذلك في مقال "آلية عمل CSS". لا تدعم معظم المتصفحات الميزات الجديدة في الوقت نفسه عادةً، لهذا ستجد فجوةً في استخدام هذه الميزات بين متصفح وآخر، ولهذا من المهم جدًا أن تتحقق من دعم المتصفحات لميزة قبل استخدامها. نعرض مثلًا في الشكل التالي دعم بعض المتصفحات للخاصيتين font-family و system-ui. الخاتمة كونت الآن فكرة عن ماهية لغة CSS واستخداماتها وأهم خصائصها ومواصفاتها، وأصبحت جاهزًا للانطلاق مع هذه اللغة وتعلمها، لذا انتقل الآن إلى المقال التالي أساسيات استخدام CSS. ترجمة -وبتصرُّف- للمقال What is CSS اقرأ أيضا فهم وإنشاء قواعد CSS الدليل السريع إلى لغة التنسيق CSS معالجة المشاكل الشائعة للتوافق مع المتصفحات في HTML و CSS

لا بد من وضع استراتيجية تسويق واضحة لمختلف الأعمال التجارية التي تنشط على شبكة الإنترنت. إذ تساعدك استراتيجية التسويق الفعالة في الترويج لعلامتك التجارية في هذا المضمار الذي يشهد تنافسيةً عالية. وإن لم تكن تهتم للأمر لكنك مستعد للخوض فيه، فقد وصلت إلى المكان المناسب. قد لا يكون موضوع استراتيجيات الترويج واضحًا بالنسبة إليك بداية، لكنك ستتعلم كل ما يلزم مع تقدمك في قراءة هذا المقال. تستخدم العديد من الشركات المرموقة والعلامات التجارية التي تنشط على الإنترنت استراتيجيات تسويق متعددة، فقد خبرت تلك الشركات فكرة استراتيجيات التسويق، وهي قادرة على إنتاجها. لا تقلق إن كنت مبتدئًا في هذا المجال، لأننا سنبدأ شرحنا بالأساسيات الأكثر أهمية. دعونا إذًا ننطلق بدايةً من وضع التعريفات الأساسية وطريقة استخدام استراتيجية الترويج لعلامة تجارية. ما هي استراتيجية الترويج لعلامة تجارية؟ تُعد استراتيجية الترويج للعلامة التجارية طريقة عمل لإيصال علامتك التجارية إلى جمهورك ببساطة، وستجد الكثير من الأنواع المختلفة للاستراتيجيات التي يتبعها أصحاب تلك العلامات التجارية. تحاول الشركات جهدها في استخدام استراتيجيات فعالة انطلاقًا من تلك التقليدية إلى العصرية منها. وبغض النظر عن مدى جودة منتجات أو خدمات علامة تجارية، لن تحصل على الفائدة المرجوة منها ما لم تدعمها باستراتيجية الترويج الفعّالة والصحيحة. يرغب المستهلكون في شراء حاجاتهم في أيامنا هذه من علامات تجارية موثوقة، لهذا من الضروري جدًا للمنتجين الترويج عن أنفسهم كعلامات تجارية. الأسباب التي تدفعك إلى وضع استراتيجية ترويج للعلامة التجارية لنقل مبدئيًا أن زيادة النمو في العائدات هو الهدف الشامل لاستراتيجيات ترويج العلامات التجارية. لكن هنالك أسباب أخرى تساعدك في تحقيق تلك الغاية، وتشجعك على استخدام استراتيجية في الترويج. فإن كنت لا تزال في شك من أمر استراتيجية الترويج، فعليك الاطلاع على بعض الأسباب التي نطرحها تاليًا عن الحاجة إلى مثل هذه الاستراتيجية. إدراك وجود علامتك التجارية أولى الثمار التي تجنيها من اعتمادك استراتيجية ترويج، هو إدراك السوق لوجود هذه العلامة التجارية. إذ لا تحاول العلامات التجارية في أيامنا هذه تعزيز مواقعها كعلامة تجارية أو تطوير منتجاتها أو خدماتها وحسب، بل تحاول أن تعزز إدراك السوق لوجود منتجاتها وخدماتها، وذلك من خلال استراتيجيات التسويق. وعليه، فإدراك وجود منتجات أو خدمات لعلامة تجارية يُعَد عنصرًا هامًا من عناصر ما يُعرف بمخروط أو قمع المبيعات؛ لهذا لا بد من اعتماد استراتيجية ترويج لعلامتك التجارية إن كنت تريد مزيدًا من الوعي لما تقدمه. اكتساب الموثوقية إن لم تكن هوية علامتك التجارية موثوقةً أو لا توحي بأنها محط للثقة، فلن تستقطب مزيدًا من الزائرين على موقعك، وبالتالي لا مزيد من المبيعات. على هذا الأساس، تُعَد موثوقية ما تعرضه علامتك التجارية مهمةً جدًا، وستعزز هذه الموثوقية بكل تأكيد من خلال استراتيجية تسويق صحيحة لعلامتك التجارية. قاعدة أكبر من العملاء الموالين لعلامتك التجارية يٍعَد هذا سببًا وجيهًا لتطوير استراتيجية تسويق علامتك التجارية، فالعملاء الذين يجدون أن علامتك مصدر للثقة سيتحولون إلى عملاء مناصرين لها، وسترتفع نسبة العملاء الذين يعودون إليك ويصبحون أيضًا ناصحين مخلصين لك. سهولة تحقيق الأهداف أيًا تكن الأهداف الكلية لعلامتك التجارية، قد تتمكن من إنجازها بمساعدة استراتيجية تسويق لها. وبدون استراتيجية واضحة، ستغدو مهمةً طويلةً ومعقدة. خطوات تطوير استراتيجية تسويق لعلامة تجارية بعد أن ألفت مفهوم استراتيجية التسويق لعلامة تجارية وأهميتها، حان الوقت لتبني استراتيجية خاصة بك. لا تقلق إن لم تعرف كيف تبدأ، فما عليك سوى اتباع الخطوات التي سنذكرها تاليًا. ستساعدك هذه الخطوات الخمس في بناء استراتيجية بسيطة لكن فعّالة لتسويق علامتك التجارية. الخطوة الأولى: كوّن هوية لعلامتك التجارية عليك في البداية تكوين هوية لعلامتك التجارية بالطريقة الصحيحة. ابدأ باختيار اسم فريد لها وشعار وغيرها من المتطلبات الإبداعية، كما سيزيد وجود مقولة سهلة التذكر ترتبط بعلامتك إدراك السوق لوجود هذه العلامة. اعصف دماغك حتى تجد اسمًا سهل التذكر يمثّل فعلًا منتجاتك أو خدماتك. الخطوة الثانية: ابحث عن الفئة المستهدفة من العملاء ابحث تاليًا عن الجمهور الذي ترغب في توجيه منتجاتك إليه. إذا لم تكن تعرف تمامًا الفئة التي تستهدفها، فسيكون مصير علامتك الإخفاق. لا بد من معرفة حاجات عملائك واهتماماتهم وأشياء كثيرة أخرى عنهم. الخطوة الثالثة: حسّن منتجك أو خدمتك على ضوء الخطوتين السابقتين بعد تكوين الهوية وتحديد الفئة المستهدفة من العملاء، لا بد من إحداث بعض التغييرات في منتجك أو خدمتك، ولهذا عليك تحسين أو تعديل منتجك وفقًا لرأي جمهورك، فما تفضلّه أنت قد لا يفضلّه جمهورك. كذلك، ينبغي أن تضع دائمًا شعارك وما يبرز علامتك التجارية على منتجاتك. الخطوة الرابعة: اختر قنوات التسويق بعناية تتلخص الخطوة الرابعة قبل الأخيرة في اختيار قنوات التسويق التي تحتاجها لتروّج لعلامتك التجارية. وتضم استراتيجية التسويق الخاصة بعلامتك التجارية العديد من الفئات الفرعية المخصصة لقنوات تسويق مختلفة، لذا قرر إذا ما كنت تريد منصات التواصل الاجتماعي، أو كنت تحتاج إلى موقع ويب خاص بك. هنالك الكثير من الطرق المختلفة التي يمكنك اعتمادها لتسويق علامتك التجارية ويمكنك اعتماد منصات مختلفة للفئات الفرعية المختلفة التي تضمها استراتيجيتك. الخطوة الخامسة: ترسيخ علامتك التجارية يُعَد ترسيخ العلامة التجارية أمرًا آخر شديد الأهمية عندما تعمل على استراتيجية تسويق علامتك التجارية. لا بد من الترويج لمنتجك على أنه منتج فريد، على الرغم من احتمال وجود آلاف المنافسين في مجال تخصصك. لا بد من الترويج له بطريقة تثبّت مكانته وتبرزها للجمهور، كأن تروي قصص نجاح علامتك وتعرض بعض الحالات التي تميّز بها هذا المنتج وغيرها، فهي تقنيات مفيدة في ترسيخ مكانة هذه المنتج. ستزيد استراتيجية تسويق العلامة التجارية عدد العملاء المناصرين لهذه العلامة، وتزيد من إدراك السوق لوجود منتج مميز تقدمه هذه العلامة. وكما أشرنا سابقًا، هناك الكثير من الطرق التي يمكن بواسطتها التسويق لعلامة تجارية، لكن لا بد أن تضم استراتيجية تسويق علامة تجارية هويةً لهذه العلامة وأسلوبًا لتمييز منتجاتها عن المنافسين وقنوات صحيحةً للتسويق ومعلومات دقيقةً عن الجمهور المستهدف. ترجمة -وبتصرف- للمقال Steps To Develop Your Brand Marketing Strategy لصاحبته Mansi Rana. اقرأ أيضًا 10 نصائح للترويج لعلامتك التجارية بشكل فعّال باستخدام محتوى الفيديو كيف تستغل التسويق عبر البريد الإلكتروني لبناء علامة تجارية شخصية استراتيجية الترويج والتأثير الهائل للاعلانات

تُعَد الإضافات Add-On في مستندات جوجل بمثابة التطبيقات الصغيرة التي تتعلق بالمستند وتوسّع قدراته وإمكانياته من أتمتة للمهام المتكررة أو مراقبة الأعمال أو التعامل مع منصة جوجل درايف أو إضافة وظيفة جديدة تخدم التطبيق الكلي. سنحاول في هذا المقال شرح آلية تثبيت واستخدام هذه الإضافات، ثم سنشرح أهم الإضافات التي تسهّل عمل المحررين سواءً في المجال الأكاديمي، أو الصحفي، أو مجال الترجمة. الإضافة Writing Habit لكتّاب المقالات والمترجمين تعمل هذه الإضافة على مراقبة ما تكتبه في مستندك لغايات إحصائية تساعدك في تحسين أسلوب عملك وفهم طريقة عملك وحماستك لنمط معين من الأعمال وتحفّزك على المضي في تحقيق كمية الأعمال التي يجب إنجازها. ويمكنك أن تستشف من المعلومات التي تقدمها هذه الإضافة الكثير، لكن دعونا أولًا نستعرض طريقة تثبيتها. تثبيت Writing Habit انقر على قائمة "الإضافات"، ثم اختر "الإضافات"، وبعدها "الحصول على إضافات" لتستعرض نافذة البحث عن إضافات. عند إكتمال تحميل النافذة، اكتب في صندوق البحث أعلاها اسم الإضافة "Writing Habit" ثم اضغط Enter. انقر على لوحة هذه الإضافة التي تظهر في نافذة البحث لتنتقل إلى نافذة التثبيت ثم انقر الزر "تثبيت". سيطلب بعد ذلك التطبيق إذنك لتثبيت الإضافة، اُنقر على الزر "متابعة" إن أردت إكمال العملية. يفتح المتصفح عند ذلك صفحة التحقق من حسابك على جوجل لإتمام عملية الحصول على موافقتك. بعد منحك الإذن لتطبيق مستندات جوجل لتثبيت الإضافة، ستجري عملية التثبيت وسيبلغك التطبيق بنجاح عملية التثبيت من خلال النافذة التالية: لتشغيل الإضافة، انتقل إلى قائمة "الإضافات" ثم "Writing Habit"، ثم انقر على " ابدأ التتبع strat tracking". تظهر الإضافة على شكل نافذة جانبية على يسار المستند ويكون كل شيء جاهزًا للعمل. العمل مع Writing Habit ضبط الإعدادات: إنّ العمل مع هذه الإضافة بسيط جدًا وسنبدأ بضبط بعض الإعدادات الخاصة بها، لذلك اُنقر على زر "إعدادات Settings" في أعلى نافذة الإضافة لتظهر النافذة التالية: حدد العدد الكلي لكلمات المقال الذي تريد كتابته أو ترجمته في المربع "الإجمالي Total"، وعدد الكلمات التي تريد كتابتها يوميًا في المربع "يوميًا Daily". اختر الزمن المتوقع لإنهاء العمل من خلال مربع التقويم " تاريخ الانتهاء Finish By". اختر طريقة عرض الساعات، فإما أن تكون "كائنًا ليليًا Night OWL" يبدأ يومك الساعة الرابعة صباحًا وينتهي الرابعة صباحًا في اليوم التالي، أو أن تكون إنسانًا طبيعيًا باختيارك الوضع "طبيعي Standard". انقر على مربع التحقق "الوضع الليلي Enable Dark Mode" إن أردت عرض خلفية نافذة الإضافة باللون الأسود. حدّد الفاصل الزمني (بالثانية) لحفظ التغييرات التي أجريتها من خلال الخيار "تكرار الحفظ Save frequency". احفظ الإعدادات من خلال النقر على زر "حفظ Save"، أو عد إلى الإعدادات الافتراضية بالنقر على الزر "مسح البيانات Clear Data". استعراض تقدم العمل: انقر على الزر "قائمة Menu" في أعلى نافذة الإضافة وانتقل إلى الخيار "قليل minimal"، وهو ما يعرض افتراضيًا في نافذة الإضافة. ستجد عدد الكلمات التي أنجزتها في هذا اليوم والنسبة المئوية من حجم العمل الكلي وسرعة ما أنجزته اليوم، إذ يظهر تحت العنوان "إنجاز streak" مستوى الإنجاز اليوم، فلو أنجزت 1500 كلمة وكان هدفك اليومي 1000، فستقدر سرعة إنجازك على الشكل "1.5x"؛ أما بقية الخيارات فهي: متابعة تحقيق الهدف Goal tracking: تضم هذه النافذة المؤشرات التالية: نسبة ما أنجزته حتى اللحظة إلى العمل الكلي Overall، وعدد الكلمات التي ينبغي كتابتها يوميًا حتى تنتهي من عملك في اليوم المقرر. العمل المنجز اليوم "Today". مخطط بياني على شكل أعمدة يوضح مقدار العمل الذي أنجزته موزعًا على ساعات اليوم. مخطط بياني لما أنجزته خلال أسبوع والأيام التي شهدت أفضل إنجاز إضافة إلى الأيام التي عملت خلالها. مخطط بياني لما أنجزته خلال شهر والأيام التي شهدت أفضل إنجاز إضافة إلى الأيام التي عملت خلالها. حالة العمل اليوم Today Status: تضم هذه النافذة المؤشرات التالية: عدد الدقائق الفعلية التي كتبت خلالها "Active" وعدد الكلمات الكلية "words" هذا اليوم وعدد الكلمات في الدقيقة "WPM". مخطط أعمدة يدل على عدد الكلمات التي كتبتها في كل ساعة. جدول يضم جلسات الكتابة Sessions هذا اليوم ويضم ساعة بداية الكتابة وساعة توقفها وعدد الكلمات في هذه الجلسة والوقت المستغرق في كتابتها. سرعة الكتابة الوسطية هذا اليوم Projected writing speed مقدرًا بآلاف الكلمات في الدقيقة. تاريخ العمل History: تضم هذه النافذة المؤشرات التالية: الإنجاز الحالي Current streak وأطول إنجاز Longest streak. العمل الشهري من خلال زر يعطي تفاصيل العمل (كتابة ونسخ ولصق وغيرهم) كل يوم. زر تصدير Export يولّد ملف مايكروسوفت إكسل يضم تفاصيل ما عملته خلال آخر 180 يومًا مقسمًا إلى أشهر وأيام وساعات. جدول بالمستندات التي تتابعها الإضافة. الفائدة من هذه الإضافة من الواضح أنّ هذه الإضافة فعّالة جدًا في تتبع مسار عمل المحرر على مشروع معين وتعطيه صورةً شديدة التفصيل عن أسلوب عمله وفترات نشاطه وكسله، وتعكس رغبته في العمل على هذا المشروع، كما تعكس حالته النفسية أثناء تقدم العمل، وهذا ما يدفعه إلى توزيع الأعمال اللاحقة على ضوء ما أنجزه في المشروع الحالي. الإضافة BibCitaion لمؤلفي ومحرري المقالات الموثّقة تساعد هذه الإضافة الباحثين والأكاديميين وحتى كتاب المقالات الاحترافية في توثيق المصادر التي تشير المقالة أو البحث العلمي إليها. وعلى الرغم من تقديم تطبيق مستندات جوجل الوظيفة نفسها من خلال أداة الاقتباسات الموثّقة، إلا أنّ Bibcitaion أوسع وأشمل بكثير. تثبيت Bibcitaion اتبع نفس الخطوات التي فعلناها سابقًا عند تثبيت Writing Habit وسترى كيف تنضم هذه الإضافة إلى قائمة "الإضافات" بكل بساطة. العمل مع Bibcitaion من قائمة "الإضافات" في مستندات جوجل، انتقل إلى "Bibcitaion Bibliograph & Citation Generator"، ومن ثم إلى "Manage citation" إذا نقرت على زر "اعرض أكثر Show More" سترى الكم الكبير من المصادر التي تساعدك هذه الإضافة المميزة على توثيقها، مثل الكتب Book والمقالات الصحفية Journal Article ومراجعات الكتب Book Review وبراءات الاختراع Patent وغيرها الكثير. تسمح لك هذه الأداة بتوثيق هذه المصادر وفق العديد من التنسيقات العالمية المشهورة مثل MLA و APA، بالإضافة إلى العديد من التنسيقات الخاصة بمجلات محكّمة ودوريات، سواءً باختيارها من القائمة مباشرةً، أو بإدراج معلومات التوثيق من الملفات الخاصة بها (ملفات بلاحقة bib. عادةً). سنجرّب هذه الأداة في توثيق كتاب ومقال صحفي Journal Article، وبمجرد أن تفهم سياق العمل لن يصعب عليك توثيق أي مصدر آخر. توثيق كتاب: انقر على الزر "كتاب Book" لتظهر لك نافذة تسألك إن كنت ترغب بالبحث عنه من خلال عنوانه او اسم المؤلف أو رقم ISBN الخاص به، أو أن تملأ جميع المعلومات بنفسك. بالنسبة لي شخصيًا أفضل البحث من خلال رقم ISBN وهذا ما فعلته وإليك النتيجة: لقد عُثِر على الكتاب المطلوب! وإضافةً إلى ذلك، يمكنك معرفة تفاصيل كثيرةً عن الكتاب بالنقر على زر "أظهر أكثر Show more" أسفل لوحة الكتاب، إذ سيفتح النقر عليها صفحة جوجل بوك google book الخاصة بالكتاب. اُنقر على لوحة الكتاب وستجد أن التوثيق جاهز تمامًا وفق التنسيق المطلوب. بإمكانك تغيير التنسيق بالنقر على القائمة المنسدلة التي تعلو التوثيق واختيار ما تشاء من التنسيقات المتوفرة، أو النقر على أيقونة السهم المجاور لهذه القائمة لرفع ملف التنسيق الخاص بك إن كنت ملزمًا بتنسيق معيّن ومعرّف مسبقًا بأحد اللاحقتين (ris. أو bib.). مرر مؤشر الفأرة على التوثيق لترى خيارات استخدام التوثيق من "النسخ Copy" أو "الإدراج في النص In-text" أو "التحرير Edit" إن أردت تصويب بعض المعلومات المستخلصة تلقائيًا من رقم الكتاب أو إضافة معلومات جديدة إليها. انقر أخيرًا على زر "إضافة التوثيق إلى المستند Add bibiliography to the doc" لإدراجه في مستندك تحت قائمة المراجع. توثيق مقال صحفي: اُنقر على الزر "مقال صحفي Journal Article" لتظهر لك نافذة تسألك عما إذا كنت ترغب بالبحث عنه من خلال عنوانه أو اسم المؤلف أو رقم DOI الخاص به، أو أن تملأ جميع المعلومات بنفسك. سننقر على زر "ملء يدوي Fill manually" هذه المرة. اختر إن كان المقال "فرديًا Individual" أو "عائد لمؤسسة Organization". اكتب اسم المؤلف الأول ثم الأخير، ثم اختصار لقبه مثل ("phD" لحامل شهادة الدكتوراه) أو ("MD" للطبيب). يمكنك إضافة مؤلفين آخرين بالنقر على الزر "إضافة مؤلف للمقال Add article author"، أو إضافة محرر للمقال بالنقر على زر "Add editor". أضف تباعًا تاريخ النشر باليوم والشهر والسنة، ثم عنوان المقال واسم المجلة ثم "رقم المجلد Volume number" و"رقم العدد Issue number". أضف بعد ذلك أرقام الصفحات التي تريد توثيقها (من - إلى)، واسم قاعدة البيانات إن كانت متاحة. تجاوز تاريخ الولوج إلى المقال "Data accessed/viewed" وانتقل لتكتب رقم DOI لها. يمكنك إغفال أية معلومة لا تعرفها طالما أن مربعها لا يحتوي الكلمة "مطلوب Riquired". انقر الزر "تحديث Update" لإتمام العملية. إليك النتيجة: لإدراج التوثيق تابع خطوات الإدراج التي شرحناها سابقًا. الإضافة Highlight Tool للمراجعين والمدققين تقدم هذه الأداة ميزةً رائعةً لتوحيد التخاطب بالطريقة اللونية بين مؤلفي ومدققي ومحرري كتاب بما يخدم العمل التعاوني وينظمه بصورة بسيطة وواضحة. قد يرى البعض أن فكرة التعليقات والاقتراحات المبنية أساسًا في مستندات جوجل تعزز العمل المشترك على مستند وهذا أمر لا شك فيه، لكن تخيل الحالة التي يشترك فيها أربعة أو خمسة كتاب ومحررين على مشروع معين، ثم يبدأ كل مساهم في كتابة تعليق هنا وإسناد مهمة هناك، ثم الرد على تعليق وإسناد العمل أو الرد إلى آخر. هنا ستظهر إشكالية الموضوع وصعوبة المتابعة. الفائدة من هذه الإضافة ما تقدمه أداة Highlight Tool هي فكرة بسيطة مفادها تحديد النقاط الأساسية التي ينبغي مراجعتها في النص، ثم وضع رمز لوني ووصف كتابي لكل نقطة من هذه النقاط بالاتفاق بين جميع المحررين، ثم إنشاء مكتبة تضم تلك النقاط ومشاركتها بين الجميع. فإن رأى مثلًا أحد المراجعين معلومةً خاطئةً في النص وقد اتُفق على تلوين هذا النوع من المشاكل باللون الأحمر، فسيلوّن هذا المراجع المعلومة الخاطئة باللون الأحمر ويتابع العمل. وهكذا تشكل هذه الأداة طريقةً لتوحيد وتنظيم مراجعة مستند. تثبيت الأداة Highlight Tool اتبع نفس الخطوات التي فعلناها سابقًا عند تثبيت Writing Habit وسترى كيف تنضم هذه الإضافة إلى قائمة "الإضافات" بكل بساطة. العمل مع Highlight Tool من قائمة "الإضافات" في مستندات جوجل، انتقل إلى "Highlight Tool" ثم "ابدأ Start" وستظهر النافذة الجانبية للإضافة على الشكل التالي: إنشاء مكتبة جديدة للرموز اللونية: انقر على الزر الأخضر "مكتبة التلوين Highlighter Library" في أعلى نافذة الإضافة لتظهر النافذة التالية: انقر على الزر "مجموعة جديدة New Set" أسفل النافذة لتظهر لوحة أدوات جديدة أعلى النافذة تتيح لك بناء المجموعة المطلوبة. اكتب اسم هذه المجموعة في مربع النص "اسم المجموعة Set name" ضمن لوحة أدوات المجموعة وابدأ العمل على أول عنوان بكتابة وصف للرمز اللوني، ثم اختيار اللون الخاص بهذا الوصف من مربع الألوان إلى جوار العنوان. سأختار هنا اللون الأحمر للدلالة على العبارة "المعلومة المدرجة خاطئة"، لهذا سأكتب هذه العبارة في مربع النص "عنوان Label" واختار اللون الأحمر. بإمكانك أيضًا إزالة هذا العنوان بالنقر على الزر (-) إلى جواره، وستبدو نافذة إنشاء مكتبة كالتالي: انقر على الزر (+) إلى جوار مربع النص الذي يحمل اسم مجموعتك لإضافة عنوان جديد يصف رمزًا لونيًا جديدًا. كرّر هذه العملية لتحدد جميع الرموز اللونية التي قد تحتاجها في تدقيق مستند. انقر على زر "حفظ Save" أسفل النافذة لحفظ المكتبة الجديدة للرموز اللونية. لإنشاء مكتبة جديدة كرر الخطوات السابقة جميعها. ولأجل توضيح الأمر في مقالنا، بنيت المكتبة اللونية التالية: عليك الآن تصدير هذه المكتبة حتى يستخدمها بقية المحررين، لذلك نفِّذ الخطوات التالية: انقر على قائمة "الإضافات" ثم "Highlight Tool"، ثم اختر "تصدير مكتبة Export library". ستظهر لك نافذة لعرض المكتبات المتوفرة للتصدير، وهنا اختر المكتبة المطلوبة أو جميعها إن أردت وانقر الزر "تصدير Export" أسفل النافذة. تخبرك الإضافة عند إنجاز العمل بأن التصدير قد نجح إلى مستند جوجل جديد ويزوّدك بالرابط "document" للوصول إليه. بالنقر على هذا الرابط، يمكنك الاطلاع على ملف المكتبة وتغيير اسمه وحفظه ومشاركته كما تشاء، لكن لا تعدل فيه شيئًا. لاستخدام المكتبة، حدّد النص الذي تريد الإشارة إلى وضعه، ثم انقر على الرمز اللوني الذي تريد. بإمكانك نقل الجمل التي لونتها إلى مستند جديد كي تعالج الإشكال فيها بمعزل عن المستند الأصلي. ولتنفيذ ذلك اتبع الخطوات التالية: في قسم "نقل الجمل الملونة Extract Highlights"، انقر زر "وفق الترتيب اللوني By color" أو "وفق التسلسل By sequence". ستظهر الآن نافذة تطلب إليك تحديد المكان الذي ستنسخ إليه الجمل الملونة، فإما إلى "مستند جديد New Document" أو إلى "المستند الحالي Current Document" أو إلى "عنوان مستند معين Document URL". اختر الوجهة المطلوبة وانقر على "نقل Extract". وسترى نتيجةً رائعةً جدًا! الخلاصة رأينا في هذا المقال كيف توسّع الإضافات عمل تطبيق مستند جوجل وتمنحه وظائفيةً متقدمةً بما يتناسب مع حاجة مستخدميه. وقد حاولنا أن نختار لكم مجموعةً من الإضافات التي تلائم عمل المحررين والمؤلفين أيًا كانت غاياتهم من استخدام مستندات جوجل. وسنوجز عمل هذه الإضافات كالتالي: الإضافة Writing Habit: تقدم إحصائيات واسعةً ودقيقةً عن تقدم العمل في مشروع التأليف أو التحرير الحالي. الإضافة Bibcitaion: تقدم طريقةً متقدمةً وأنيقةً وعصريةً لتوثيق المصادر التي ترد في المقال أو الكتاب. الإضافة Highlight Tool: تقدّم طريقةً لتوصيف أنواع الأخطاء أو الملاحظات التي يجدها المراجع في المستند بطريقة لونية قابلة للنقل إلى بقية المحررين أو المراجعين. وعلى الرغم من وجود إضافات متنوعة ومفيدة أخرى، إلا أن دعمها للغة العربية محدود، وهو ما دفعني للابتعاد عنها، فإن كانت لغتك الإنكليزية جيدة أو تحتاج إلى دعم في كتابة المقالات أو أوراق العمل بالإنجليزية، فستجد الكثير الكثير من الإضافات الرائعة. اقرأ أيضًا إعداد الصفحة وتنسيق الفقرات في مستندات جوجل قائمة الأدوات في مستندات جوجل تنسيق وتوثيق الأوراق الأكاديمية باستخدام مستندات جوجل كيفية المشاركة في كتابة وتعديل مستند باستعمال مستندات جوجل تاريخ النُسخ واستعمال الإضافات في مستندات جوجل

بعد أن تعلمنا أساسيات التعامل مع الجداول في HTML في المقال السابق، نلقي الضوء في هذا المقال على بعض الميزات المتقدمة لجداول HTML مثل الشروحات captions والملخصات summaries وتجميع الصفوف لتشكيل ترويسة أو جسم أو تذييل، كما يمر المقال على مفهوم سهولة الوصول accessibility لذوي المشاكل البصرية إلى محتوى الجداول. إضافة شرح إلى الجدول يمكنك إضافة شروحات إلى الجداول باستخدام العنصر <caption> بعد وضعه تحت وَسم البداية للعنصر <table> مباشرةً: <table> <caption>Dinosaurs in the Jurassic period</caption> ... </table> يُستخدَم الشرح -كما يوحي المثال السابق- لإضافة وصف لمحتوى الجدول، إذ يساعد القراء على تقدير فائدة هذا المحتوى عندما يتصفحون الموقع وخاصة للمستخدِمين المكفوفين، فبدلًا من قراءة خلايا عديدة لمعرفة الغاية من الجدول، فسيعتمد المستخدِم على شرح الجدول ليقرر الاستمرار في القراءة أم لا. ملاحظة: يمكن استخدام السمة summary التي يملكها العنصر <table> لإضافة وصف يمكن لقارئات الشاشة الوصول إليه وقراءته، لكننا نفضِّل استخدام العنصر <caption> بدلًا منها لأنها أُلغيَت في مواصفات HTML5، ولا يمكن رؤيتها من قبل المستخدِمين صحيحِي البصر لأنها لن تعرض على الصفحة. تطبيق: إضافة شرح إلى جدول لنلق نظرةً ثانيةً إلى مثال برنامج التدريس اليومي الذي طرحناه في المقال السابق: عُد إلى البرنامج اليومي لمدرّسة اللغات الذي ستجده على جيت-هاب واحفظ نسخًا منه على حاسوبك الشخصي. أضف شرحًا مناسبًا إلى محتوى الجدول. احفظ التعديلات التي أجريتها ثم حمِّل الملف ضمن المتصفح لترى النتيجة. ملاحظة: يمكن إيجاد الملف بصورته النهائية على جيت-هاب. إضافة هيكلية للجدول باستخدام <thead> و <tfoot> و <tbody> عندما تتعقد هيكلية الجداول نوعًا ما، فلا بدّ من تحديد هذه الهيكلية بصورة أوضح، ولتنفيذ ذلك تُستخدَم العناصر <thead> و <tfoot> و <tbody> التي تسمح لك بتوصيف ترويسة وتذييل وجسم للجدول. لن تحسّن هذه العناصر إمكانية الوصول السهل لمستخدِمي قارئات الشاشة، ولن تحسّن في المظهر المرئي للجدول أيضًا، ولكنها مفيدة جدًا لتخطيط الجدول وتنسيقه، إذ تعمل هذه العناصر على أساس خطافات لإضافة تنسيقات CSS إلى الجداول، ففي حالة الجداول الطويلة التي تمتد على صفحات مثلًا يمكنك تكرار الترويسة والتذييل في كل صفحة تطبعها، كما يمكنك عرض جسم الجدول بأكمله على صفحة واحدة ومن ثم تصفح محتوياته باستخدام شريط تمرير للأعلى والأسفل، ولتفعل ذلك اتبع ما يلي: استخدِم العنصر <thead> لتغليف الجزء الذي يمثّل ترويسة الجدول، وهو عادةً الصف الأول الذي يضم ترويسات جميع الأعمدة لكن ليس دائمًا، فإذا كنت تستخدِم عنصرَي تجميع خلايا العمود <colgroup> و <col>، فضع ترويسة الجدول بعدها مباشرةً. استخدِم العنصر <tfoot> لتغليف الجزء الذي يمثل تذييل الجدول، فقد يكون هذا الجزء هو الصف الأخير من الجدول وقد جمعت فيه قيم الأسطر السابقة مثلًا، وبإمكانك وضع عنصر التذييل في آخر الجدول كما تتوقع أو تحت ترويسة الجدول مباشرةً لأن المتصفح سيصيّره في المكان الصحيح. استخدِم العنصر <tbody> لتغليف بقية الأجزاء، فقد يأتي جسم الجدول تحت الترويسة أو تحت التذييل تبعًا للطريقة التي تنويها في تنظيم الجدول. ملاحظة: إن العنصر <tbody> هو دائمًا جزء من الجدول سواءً صرَّحت عن ذلك أم لا، ولكي تتحقق من ذلك افتح أيًا من أمثلة الجداول التي لا تحتوي على <tbody> ثم تفحص شيفرة باستخدام أدوات مطوري ويب وستجد أنّ المتصفح قد أضاف هذا العنصر تلقائيًا، وقد تتساءل إذًا لِمَ عليّ إضافته أصلًا، والجواب هو أنه سيمنحك تحكمًا أكبر بهيكلية الجدول وتنسيقه. تطبيق: هيكلة جدول لنحاول تجربة العناصر التي تهيكل الجدول: ابدأ بحفظ نسخ عن الملفين spending-record.html وminimal-table.css في مجلد جديد على حاسوبك. افتح ملف HTML في المتصفح وسترى أنّ الجدول واضح مع إمكانية لتحسينه قليلًا، إذ يبدو الصف "SUM" الذي يضم مجموع النفقات في المكان الخاطئ، كما قد تلاحظ بعض التفاصيل المفقودة في الشيفرة. ضع الصف الذي يمثّل الترويسة داخل عنصر <thead> والصف "SUM" ضمن عنصر <tfoot> وبقية الجدول ضمن عنصر <tbody>. احفظ التعديلات وحمّل الملف من جديد، ثم لاحظ كيف انتقل الصف إلى أسفل الجدول. استخدِم السمة colspan لتمتد الخلية "SUM" على الأعمدة الأربعة الأولى كي يظهر المبلغ تحت العمود "Cost". أضف بعض التنسيقات البسيطة إلى الجدول لترى فائدة تطبيق تنسيق CSS، لذا ضع الشيفرة التالية داخل العنصر <style> الموجود داخل العنصر <head> في ملف HTML: tbody { font-size: 95%; font-style: italic; } tfoot { font-weight: bold; } احفظ التعديلات ثم حمّل الملف من جديد وشاهد نتيجة عملك، فإذا لم يكن العنصران <tbody> و <tfoot> في مكانهما الصحيح، لكان عليك كتابة شيفرة تنسيق أكثر تعقيدًا للحصول على النتيجة ذاتها. ستبدو نتيجة العمل كما يلي: ملاحظة: يمكنك الاطلاع على النسخة النهائية من المثال على جيت-هاب. الجداول المتداخلة يمكن وضع جدول ضمن آخر شرط أن تكون هيكلية الجدول مكتملة بما في ذلك العنصر <table>، ولا ننصح عادةً بمثل هذا التداخل لأنه سيعقد من توصيف الجداول ويصعّب وصول قارئات الشاشة إلى محتوياتها، كما يُعَدّ إدراج خلايا أو صفوف أو أعمدة جديدة إلى الجدول المطلوب هو الأجدى في كثير من الحالات، لكنك قد تضطر أحيانًا إلى إدراج جدول ضمن آخر خاصةً إذا أردت إدراج محتوى من مصدر خارجي دون تعقيدات إضافية على سبيل المثال، وتعرض الشيفرة التالية جدولين بسيطين متداخلين: <table id="table1"> <tr> <th>title1</th> <th>title2</th> <th>title3</th> </tr> <tr> <td id="nested"> <table id="table2"> <tr> <td>cell1</td> <td>cell2</td> <td>cell3</td> </tr> </table> </td> <td>cell2</td> <td>cell3</td> </tr> <tr> <td>cell4</td> <td>cell5</td> <td>cell6</td> </tr> </table> ستبدو نتيجة تنفيذ الشيفرة كما يلي: جداول خاصة بذوي المشاكل البصرية لنراجع باختصار استخدامات الجداول، إذ تُعَدّ الجداول أداةً مفيدةً تساعدنا في الوصول السريع إلى البيانات والبحث عن القيم المختلفة فيها، وبنظرة سريعة مثلًا على الجدول الذي نعرضه تاليًا ستتمكن من معرفة عدد الخواتم Rings التي بيعت في جينت Gent شهر 8 عام 2016، إذ نربط بصريًا بين المعلومات الواردة في الجدول مع ترويسة الصف والعمود لنجد المطلوب. table { width: 100%; } thead { vertical-align: middle; text-align: center; } td, th { border: 1px solid #dddddd; text-align: right; padding: 8px; text-align: inherit; } tr:nth-child(even) { background-color: #dddddd; } Clothes Accessories Trousers Skirts Dresses Bracelets Rings Belgium Antwerp 56 22 43 72 23 Gent 46 18 50 61 15 Brussels 51 27 38 69 28 The Netherlands Amsterdam 89 34 69 85 38 Utrecht 80 12 43 36 19 لكن ما الحل إذا لم تتمكن من رؤية الجدول؟ كيف ستتمكن من قراءته؟ يستخدِم أصحاب المشاكل البصرية قارئات الشاشة التي تقرأ المعلومات الواردة في صفحات الويب، إذ ستعمل هذه التقنية بسهولة عند قراءة نص صرف، لكن يُعَدّ تفسير محتوى جدول أمرًا مختلفًا ويمثِّل تحديًا للمكفوفين، ومع ذلك يمكننا الاستغناء عن الارتباطات البصرية والاستعاضة عنها بارتباطات برمجية عند استخدام العناصر الصحيحة، وسنعرض تاليًا بعض التقنيات التي تسهّل الوصول إلى الجداول قدر المستطاع. ملاحظة: يوجد حوالي 253 مليون شخص كفيف أو يعاني من مشاكل بصرية وفقًا لمنظمة الصحة العالمية WHO في عام 2017. استخدام ترويسات الأعمدة والصفوف تستخدِم قارئات الشاشة الترويسات في الارتباطات البرمجية بينها وبين الخلايا المتعلقة بها، إذ يعرِّف ويفسر ضمّ ترويسات الصفوف والأعمدة بيانات كل خلية وبذلك ستتمكن القارئات من إيصال هذا التفسير إلى المكفوف. استخدام السمة scope تُضاف هذه السمة إلى العنصر <th> -أي ترويسة جدول- لتدل قارئات الشاشة على الخلايا التي تمثلها ترويسة معينة (هل هي ترويسة صف أم عمود مثلًا؟)، وبالعودة إلى مثال التطبيق السابق الذي طرحناه سابقًا، سترى كيف تُميَّز ترويسة العمود لأنها ستبدو على الصورة التالية: <thead> <tr> <th scope="col">Purchase</th> <th scope="col">Location</th> <th scope="col">Date</th> <th scope="col">Evaluation</th> <th scope="col">Cost (€)</th> </tr> </thead> وترويسة كل صف ستبدو أيضًا كما يلي إذا أضفنا ترويسات صفوف بالإضافة إلى ترويسات الأعمدة: <tr> <th scope="row">Haircut</th> <td>Hairdresser</td> <td>12/09</td> <td>Great idea</td> <td>30</td> </tr> تستطيع قارئات الشاشة التعرُّف على هذا التوصيف، وبالتالي ستقرأ كامل الصف أو العمود مباشرةً على سبيل المثال. تأخذ السمة scope أيضًا القيمتين colgroup و rowgroup وتستخدمان لتوصيف الترويسات التي تقع فوق عدة أعمدة أو صفوف، فإذا عدت إلى الجدول السابق "حول مبيعات شهر 8 عام 2016"، فستجد أنّ الخلية "Clothes" هي ترويسة للخلايا "Trousers" و "Skirts" و "Dresses"، وينبغي الإشارة إلى جميع هذه الخلايا على أنها ترويسات (<th>)، ولهذا لا بدّ من أن نزوّد الخلية "Clothes" بالسمة "scope="colgroup، في حين ستأخذ بقية الترويسات التي تقع تحتها مباشرة السمة "scope="col. استخدام السمتين id و headers يمكننا استخدام السمتين id و headers على أساس بديل عن scope في الارتباطات بين الترويسات والخلايا، ويجري الأمر كما يلي: زوّد كل عنصر <th> (عنصر الترويسة) بسِمة id تحمل قيمة فريدة. زوّد كل عنصر <td> (عنصر الخلية) بسِمة headers تضم قائمةً بمعرِّفات جميع الترويسات التي تُعَدّ ترويسةً مباشرةً لهذه الخلية تفصل بينها مسافةً فارغةً. يعطي هذا الأسلوب جدوّل HTML تعريفًا صريحًا لموقع كل خلية بترويسة (أو ترويسات) العمود والصف الذي تشكل جزءًا منه، ولا بدّ من الإشارة إلى ضرورة استخدام ترويسات للصفوف والأعمدة معًا إذا أردت استخدام هذه الطريقة. لاحظ طريقة تطبيق هذا الأسلوب على مثال التطبيق السابق السابق: <thead> <tr> <th id="purchase">Purchase</th> <th id="location">Location</th> <th id="date">Date</th> <th id="evaluation">Evaluation</th> <th id="cost">Cost (€)</th> </tr> </thead> <tbody> <tr> <th id="haircut">Haircut</th> <td headers="location haircut">Hairdresser</td> <td headers="date haircut">12/09</td> <td headers="evaluation haircut">Great idea</td> <td headers="cost haircut">30</td> </tr> ... </tbody> ملاحظة: تُعَدّ هذه الطريقة دقيقةً جدًا في ارتباط خلايا البيانات مع الترويسات، لكنها تتطلب عملًا أكثر لا يحتمل أية أخطاء، ولهذا يُعَدّ استخدام السمة scope كافيًا لمعظم الجداول. تطبيق: استخدام السمتين scope و headers احفظ نسخةً عن الملفين items-sold.html و minimal-table.css في مجلد جديد على جهازك. حاول استخدام السمة scope لتحسين طريقة عرض هذا الجدول. حاول حفظ نسخة أخرى عن الملفين السابقين في مجلد آخر على جهازك ثم استخدم السمتين scope و headers لدعم فكرة سهولة الوصول إلى الجدول. ملاحظة: يمكنك التحقق من صحة عملك بموازنته مع النسخة النهائية باستخدام scope وباستخدام headers على جيت-هاب. خلاصة على الرغم من وجود بعض الأفكار الأخرى التي يمكنك تعلمها عن الجداول في HTML، إلا أننا زودناك بكل ما تحتاجه حاليًا، ولا بدّ الآن من التوجه نحو تعلّم طريقة تنسيق ملفات HTML باستخدام لغة التوصيف CSS. للمزيد من التفاصيل، ارجع إلى توثيق الجداول في موسوعة حسوب. ترجمة -وبتصرُّف- للمقال HTML table advanced features and accessibility. اقرأ أيضًا أساسيات بناء الجداول في HTML كيفية إنشاء جدول أنيق بـ HTML و CSS جداول html ذات رأسية وأعمدة ثابتة باستخدام jQuery الجداول (Tables) في CSS

يقدِّم هذا المقال الأساسيات اللازمة لبناء جداول HTML، إذ يغطي مفاهيم مثل الصفوف والأعمدة والخلايا والترويسات وكيفية ضبط الخلايا لتمتد على عدة أعمدة وصفوف، كما يعلمك طريقة تجميع الخلايا في العمود نفسه لتنسيقها معًا. ما هو الجدول؟ الجدول هو بنية لهيكلة البيانات على صورة صفوف rows وأعمدة column -أي بيانات مجدولة- لتسهيل عملية البحث عن القيم التي تبدي ترابطًا فيما بينها مثل ربط الأشخاص بأعمارهم أو بالأيام التي يعملون فيها أسبوعيًا أو بأيام التدريب في النادي. استُخدِمت الجداول بكثرة ومنذ زمن بعيد، وتقدِّم الصورة التالية دليلنا على ذلك، فهي مستند لعملية إحصاء في الولايات المتحدة يعود إلى عام 1800: وبالتالي ليس غريبًا أن يهتم مخترعو HTML بإيجاد وسائل لهيكلة بيانات الويب على هيئة جداول. كيف يعمل الجدول؟ الغاية من الجدول واضحة، إذ يسهِّل استخدام الجداول تفسير المعلومات بالربط البصري بين ترويسة عمود وترويسة صف، ولنلق نظرةً على الجدول التالي باحثِين عن كوكب غازي ضخم شبيه بالمشتري Jovian له 62 قمرًا، إذ يمكنك إيجاد الكوكب المطلوب بالربط بين العمود الصحيح و الصف الصحيح. عندما تُنجز الجداول في HTML بالصورة الصحيحة، سيسهل على تقنيات الوصول السهل مثل قارئات الشاشة التعامل مع المحتوى الذي تقدِّمه، أي ينبغي أن يُحسِّن استخدام الجداول تجربة الأشخاص ذوي الإعاقة البصرية وسليمي البصر على حد سواء. تنسيق الجداول ألق نظرةً على الجدول السابق نفسه لكن من خلال مثال مباشر على جيت-هاب، ولاحظ أنّ هذا الأخير أسهل قراءةً من الجدول الذي عرضناه في المقال، وذلك لأننا طبقنا أدنى درجات التنسيق عند بنائه موازنةً بنسخة جيت-هاب. لا نخفيك سرًا أنّ الجداول التي تتمتع بمستوى تنسيق CSS رفيع أنها أكثر تأثيرًا في الويب، لهذا لا بد من الاهتمام جيدًا بهيكلة البيانات في جداول HTML بالإضافة إلى التنسيق الجيد، لكننا سنركز في سلسلة المقالات هذه على الجزء المتعلق بلغة HTML فقط، إذ سنزود الجداول في هذه السلسلة بالحد الأدنى من تنسيقات CSS التي تُسهِّل قراءة محتوياتها موازنةً بالجداول غير المنسقة، كما يمكنك تنزيل ملف CSS و قالب HTML الذي يُستخدم لتطبيق التنسيقات من المستودع المخصص على جيت-هاب، إذ سيمنحك هذان الملفان نقطة انطلاق جيدة عند العمل على جداول HTML. ما الحالات التي لا ينبغي فيها استخدام جداول HTML؟ تُستخدَم الجداول لعرض البيانات القابلة للجدولة فهمي مصممة لهذا الغرض، كما يستخدِمها البعض أيضًا في تخطيط صفحات الويب مثل أن يضم أحد الصفوف الترويسة وآخر يضم أعمدة المحتوى الرئيسي وآخر للتذيل، وهذا أمر خاطئ كليًا، وقد استُخدمت هذه الطريقة في تخطيط الصفحات فيما مضى عندما كان دعم تنسيق CSS في المتصفحات المختلفة متفاوتًا وسيئًا، لكنها أقل انتشارًا في أيامنا هذه، إلا أنك قد تراها بين الفينة والأخرى. إذًا نختصر فنقول: يُعَدّ استخدام تخطيط الجداول بدلًا من تقنيات تخطيط CSS فكرةً سيئةً، وإليك الأسباب الرئيسية: يؤثر تخطيط الجدول على سهولة وصول ذوي المشاكل البصرية: تفسِّر قارئات الشاشة التي يستخدمها فاقدِي البصر وسوم العناصر الموجودة في صفحة HTML وتقرأ محتوياتها، وطالما أنّ الجدول ليس الأداة الصحيحة لتخطيط الصفحة وأنّ توصيفه أكثر تعقيدًا من تقنيات تخطيط CSS، فسيربك مستخدِميها ما تنطقه تلك القارئات. ينتج عن الجداول وسومًا مختلطةً: تضم الجداول هيكليةً أعقد من تلك المستخدَمة عادةً في تخطيط الصفحة، وقد يزيد ذلك من صعوبة كتابة الشيفرة وصيانتها وتنقيحها. الجداول غير متجاوبة تلقائيًا: إذا استخدمت العناصر المناسبة مثل <header> أو <article> أو <div> أو <section>، فسيكون عرضها 100% من عرض العنصر الأب تلقائيًا، ويقاس في المقابل عرض الجداول افتراضيًا وفقًا لحجم محتواها، لذلك يحتاج الأمر إلى قياسات أخرى ليعمل تخطيط الصفحة جيدًا على الأجهزة المختلفة. تطبيق: إنشاء جدول تحدثنا طويلًا عن المفهوم النظري وحان الوقت لنبني جدولًا بسيطًا: انسخ الملفين blank-template.html و minimal-table.css إلى حاسوبك وضعهما في مجلد جديد. يُوضع محتوى كل جدول بين وسمَي البداية والنهاية للعنصر <table>، لذلك ضع عنصرَي الجدول داخل جسم ملف HTML. تُعَدّ الخلية أصغر حاوية ضمن الجدول وننشئها باستخدام العنصر <td> اختصارًا لبيانات جدول table data، ولنضف الشيفرة التالية داخل العنصر <table>: <td>Hi, I'm your first cell.</td> انسخ الشيفرة السابقة ثلاث مرات إضافية إذا أردت تكوين صف من أربعة خلايا: <td>Hi, I'm your first cell.</td> <td>I'm your second cell.</td> <td>I'm your third cell.</td> <td>I'm your fourth cell.</td> يمثِّل كل عنصر <td> خليةً واحدةً، وتمثِّل هذه العناصر بمجموعها الصف الأول الذي يكبر بإضافة عناصر جديدة، ولإنهاء الصف الأول والانتقال إلى الصف الثاني نستخدِم العنصر <tr> اختصارًا لصف جدول table row: ضع الخلايا الأربعة التي أنشأتها سابقًا ضمن وسمَي البداية والنهاية للعنصر <tr>: <tr> <td>Hi, I'm your first cell.</td> <td>I'm your second cell.</td> <td>I'm your third cell.</td> <td>I'm your fourth cell.</td> </tr> نكون بهذا الشكل قد أنشأنا الصف الأول، ولا بدّ من تغليف خلايا جديدة <td>ضمن عنصر <tr> جديد: نتيجة العمل لا بدّ أن يظهر الجدول كما يلي: ملاحظة: يمكنك إيجاد المثال السابق بصيغته النهائية ضمن المستودع المخصص له على جيت-هاب. عناصر ترويسة جدول لنركِّز الآن على ترويسات الجدول، وهي خلايا خاصة تلاحظها في بداية الصف أو العمود وتحدد طبيعة البيانات التي يضمها كما في الخليتين Person و Age في مثالنا الأول، ولتوضيح فائدة الترويسات سنلقي نظرةً على هذا المثال: <table> <tr> <td>&nbsp;</td> <td>Knocky</td> <td>Flor</td> <td>Ella</td> <td>Juan</td> </tr> <tr> <td>Breed</td> <td>Jack Russell</td> <td>Poodle</td> <td>Streetdog</td> <td>Cocker Spaniel</td> </tr> <tr> <td>Age</td> <td>16</td> <td>9</td> <td>10</td> <td>5</td> </tr> <tr> <td>Owner</td> <td>Mother-in-law</td> <td>Me</td> <td>Me</td> <td>Sister-in-law</td> </tr> <tr> <td>Eating Habits</td> <td>Eats everyone's leftovers</td> <td>Nibbles at food</td> <td>Hearty eater</td> <td>Will eat till he explodes</td> </tr> </table> يصيّر المتصفح الشيفرة السابقة إلى الجدول التالي: إنّ المشكلة في هذا الجدول هي صعوبة الوصول إلى البيانات المطلوبة كما ينبغي، على الرغم من وضوح الغاية منه، لكن إذا برزت ترويسات الأعمدة والصفوف بصورة ما، فسيتحسن الوضع. تطبيق: ترويسات الجداول سنحاول في هذا التطبيق تحسين الجدول السابق: احفظ نسخةً عن الملفين dogs-table.html و minimal-table.css في مجلد جديد على حاسوبك، إذ يحتوي ملف HTML على المعلومات ذاتها التي يعرضها الجدول السابق. استخدم العنصر <th> -اختصارًا لترويسة جدول table header- لتمييز الخلية الأولى على أنها ترويسة دلاليًا وبصريًا، إذ يعمل هذا العنصر بالطريقة نفسها التي يعمل بها العنصر <td> إلا أنه يعرِّف ترويسةً وليس خليةً عاديةً. انتقل إذًا إلى ملف HTML واستبدل العناصر <th> بكل العناصر <td> التي تحيط بخلايا الترويسة. احفظ التغييرات التي أجريتها على ملف HTML ثم حمّله في المتصفح وستلاحظ كيف ستبدو الخلايا الأولى على أساس ترويسات. ملاحظة: يمكنك الاطلاع على الملف بشكله النهائي على جيت-هاب، كما يمكنك الاطلاع على شيفرته المصدرية. ما هي فوائد الترويسات؟ جاوبنا بالفعل على جزء من هذا السؤال، إذ يسهِّل استخدامها استخلاص المعلومات ويحسِّن مظهر الجدول عمومًا. ملاحظة: تمتلك ترويسات الجداول تنسيقًا افتراضيًا محددًا، إذ تُكتَب بخط ثخين وتتوضَّع في مركز الخلية حتى ولو لم تطبق بنفسك أية تنسيقات، وذلك لتمييزها. تمتلك الترويسات فوائدًا إضافيةً، إذ يسمح لك استخدام السمة scope -التي سنتعرف إليها لاحقًا- بدعم الوصول السهل، وذلك بربط كل ترويسة بكل البيانات التي يضمها الصف نفسه أو العمود، إذ ستتمكن عندها قارئات الشاشة من قراءة كامل الصف أو العمود، وهذا بالطبع أكثر فائدةً. تمكين الخلايا من الامتداد على عدة صفوف أو خلايا قد نرغب أحيانًا في تمديد الخلايا لتشمل عدة صفوف أو أعمدة، ولنأخذ مثلًا الجدول التالي الذي يعرض بعض أسماء الحيوانات، فقد نرغب في بعض الحالات بعرض أسماء الإناث والذكور إلى جانب النوع وقد لا نرغب بذلك، وفي كلتا الحالتين نريد أن يمتد اسم الحيوان على كامل الجدول، وإليك الشيفرة الأولية: <table> <tr> <th>Animals</th> </tr> <tr> <th>Hippopotamus</th> </tr> <tr> <th>Horse</th> <td>Mare</td> </tr> <tr> <td>Stallion</td> </tr> <tr> <th>Crocodile</th> </tr> <tr> <th>Chicken</th> <td>Hen</td> </tr> <tr> <td>Rooster</td> </tr> </table> لكن لا يعطي الخرج النتيجة التي نريدها تمامًا: نريد مثلًا أن يمتد "Hippopotamus" أو "Crocodile" مقدار عمودين، وأن يمتد Horse" و "Chicken" مقدار صفين، إذ تمتلك ترويسة الجدول لهذه الغاية السمتَين colspan و rowspan اللتين تقبلان قيمًا بلا واحدة تدل على عدد الصفوف أو الأعمدة التي نريد أن تمتد الترويسة عليهما، لذا ستسمح القيمة "2"=colspan مثلًا لترويسة عمود أن تمتد بمقدار عمودين، إذًا لنستخدِم هاتين السمتين لتحسين مظهر الجدول السابق: احفظ نسخةً عن الملفين animals-table.html و minimal-table.css في مجلد جديد على حاسوبك، إذ يحتوي ملف HTML على المعلومات ذاتها التي يعرضها الجدول السابق. استخدم السمة colspan لتجعل الخلايا "Animals" و "Hippopotamus" و "Crocodile" تمتد بمقدار عمودَين. استخدم السمة rowspan لتجعل الخلايا "Horse" و "Chicken" تمتد بمقدار صفَّين. احفظ التغيرات التي أجريتها على الملف ثم حمّله في المتصفح لترى النتيجة. ملاحظة: يمكنك إيجاد المثال السابق بصيغته النهائية ضمن المستودع المخصص له على جيت-هاب. تزويد الأعمدة ببعض التنسيقات تقدِّم HTML طريقةً لتنسيق محتوى عمود بأكمله (عناصر <col> وعناصر <colgroup>)، وقد وُجِدت هذه الطريقة لأنّ عملية تنسيق كل عنصر <td> أو <th> على حدة في عمود ستكون مزعجةً وغير فعّالة وسيكون الأمر كذلك عند استخدام محدِّد تنسيق معقَّد مثل nth -child:. ملاحظة: تنسيق العمود بهذه الطريقة مخصص لبعض السمات فقط، وهي:border و background و width و visibility، فإذا احتجت لاستخدام خصائص أخرى، فلا بدّ من تنسيق كل عنصر <td> أو <th> على حدة، أو استخدام محدد تنسيق معقّد مثل nth -child:. لنلق نظرةً على هذا المثال: <table> <tr> <th>Data 1</th> <th style="background-color: yellow">Data 2</th> </tr> <tr> <td>Calcutta</td> <td style="background-color: yellow">Orange</td> </tr> <tr> <td>Robots</td> <td style="background-color: yellow">Jazz</td> </tr> </table> ستكون النتيجة كما يلي: إنّ الطريقة المتبعة في الشيفرة السابقة ليست ملائمةً، إذ علينا كتابة التنسيق في كل خلية من خلال العمود، فمن السهل في هذه الحالة -إن كنا نعمل على مشروع واقعي- استخدام السمة class وتحديد التنسيق المطلوب مرةً واحدةً ضمن ملف تنسيق منفصل، وبدلًا من ذلك يمكننا تحديد معلومات التنسيق هذه مرةً واحدةً فقط ضمن عنصر <col> يقع داخل العنصر <colgroup> الذي يُدرج مباشرةً أسفل وسم بداية الجدول <table>، وإليك الطريقة: <table> <colgroup> <col> <col style="background-color: yellow"> </colgroup> <tr> <th>Data 1</th> <th>Data 2</th> </tr> <tr> <td>Calcutta</td> <td>Orange</td> </tr> <tr> <td>Robots</td> <td>Jazz</td> </tr> </table> عرّفنا عمودين اثنين، الأول فارغ ولا يحتوي على أي تنسيق لكنه ضروري لكي لا يتغير تنسيق العمود الثاني المطبق، وإذا أردت تنسيق كلا العمودَين، فاكتف بعنصر <col> واحد يحمل التنسيق المطلوب شرط استخدام السمة span: <colgroup> <col style="background-color: yellow" span="2"> </colgroup> تأخذ هذه السمة قيمًا على صورة أرقام بلا واحدة مثل سمة colspan وسمة rowspan التي تدل على عدد الأعمدة التي سيطبَّق عليها التنسيق. تطبيق: تنسيق أعمدة ترى في الجدول التالي برنامجًا زمنيًا لمواعيد مدرِّسة لغات، ولدى هذه المدرّسة صفًا جديدًا لتعليم الهولندية Dutch يوم الجمعة بأكمله، وتدرِّس الألمانية German على فترات يومَي الثلاثاء والخميس، وتريد المدرّسة تلوين أعمدة الأيام التي تُدرِّس فيها: أعد إنشاء الجدول السابق متبعًا الخطوات التالية: احفظ نسخةً عن الملف timetable.html في مجلد جديد على حاسوبك، إذ يحتوي ملف HTML على المعلومات ذاتها التي يعرضها الجدول السابق ما عدا معلومات تنسيق الأعمدة. أضف العنصر <colgroup> إلى العنصر <table> وتحت وَسم البداية مباشرةَ، ثم أضف إلى هذا العنصر عناصر <col> لإضافة تنسيقات إلى الأعمدة. لا تغيِّر تنسيق أول عمودين. أضف لونًا إلى خلفية العمود الثالث بضبط قيمة السمة style على ;background-color:#97DB9A. استخدم عرضًا مختلفًا للعمود الرابع بضبط قيمة السمة style على ;width: 42px. أضف لونًا إلى خلفية العمود الخامس بضبط قيمة style على ;background-color:#97DB9A. أضف لونًا مختلفًا وإطارًا إلى العمود السادس لتشير إلى أنه يوم مميز، إذ ستبدأ بتدريس لغة جديدة، ولذلك اضبط قيمة style على ;background-color:#DCC48E; border:4px solid #C1437A إذا وجدت نفسك عالقًا أمام مشكلة ما أو أردت التحقق من عملك، فيمكنك مراجعة النسخة النهائية للمثال على جيت-هاب. خلاصة عرضنا في هذا المقال أساسيات إنشاء جداول في HTML، إذ سنلقي نظرةً في المقال التالي على ميزات أكثر تقدمًا، مع الأخذ بالحسبان سهولة وصول ذوِي الإعاقة البصرية. للمزيد من التفاصيل، ارجع إلى توثيق الجداول في موسوعة حسوب. ترجمة -وبتصرَّف- للمقال HTML table basics. اقرأ أيضًا كيفية إنشاء جدول أنيق بـ HTML و CSS جداول html ذات رأسية وأعمدة ثابتة باستخدام jQuery الجداول (Tables) في CSS

يهدف هذا المقال أساسًا إلى التعريف ببرمجة الروبوتات Robots Programming، ونظرًا لاختلاف النُهج المتبعة في البرمجة وفقًا لطبيعة عمل الروبوت، ستختلف عملية برمجة الروبوت وأساليبها، لهذا سنتحدث باختصار عن الروبوتات وأنواعها ثم الاستخدامات الأكثر شيوعًا لها، ومن ثم نعرّج على أهم لغات البرمجة المستخدمة في برمجة الروبوتات وكيفية البدء بمسار تعلم برمجة الروبوت المناسب لك ونتحدث في مقالنا عن برمجة الروبوتات للأطفال وأشهر اللغات والمنصات التي تساعد على دخول عالم برمجة الروبوتات والتحكم بها. من الآلات إلى الروبوتات فرض الانتقال إلى المجتمعات الصناعية اختراع كم هائل من الآلات التي سهلت على الصناعيين أداء وظائف كثيرة وأدت إلى ظهور ما يعرف بخطوط الإنتاج التي تضم سلسلة من الآلات المتتابعة لتنفيذ بعض أو كل مراحل المنتج وفق آليات ميكانيكية بحتة. لكن في البدايات الأولى كان وجود العامل البشري أساسيًا في قيادة تلك الآلات، إذ تجد فريقًا من العمال يحيط بكل آلة لتشغيلها واقتصر دور الآلة حينها على تسريع العمل وتخفيف المجهود العضلي. مع الوقت ظهرت الحاجة إلى منح تلك الآلات نوعًا من القيادة الآلية دون تدخل البشر وخاصة في الصناعات الخطرة أو عالية الدقة، وقد استغل المهندسون حينها الثورة في عالم الإلكترونيات لإدخال الآلات عصر الإلكترونيات الصناعية. إذ زودت تلك الآلات بتقنيات تجعلها قادرة على العمل والتوقف تلقائيا وفقا لظروف التشغيل وإدخال المؤقتات الزمنية التي تتحسس لأجزاء من الثانية والمفاتيح الإلكترونية التي تعطي أوامر التشغيل والإغلاق إلكترونيًا عن بعد دون الحاجة إلى المفاتيح الميكانيكية التي لا بد من تشغيلها من قبل العامل البشري. أما المرحلة الثانية من التطور فكانت ظهور المتحكمات الصغرية أو الدقيقة Microcontroller والمعالجات الدقيقة Microprocessor ومن ثم الدارات الرقمية التي طورت على أساسها، إذ مكنت هذه الدارات المهندسين من إعداد بيئة تحكم متكاملة لخط إنتاج أو معمل بأكمله. إذ تُبرمج معطيات التحكم بكل آلة باستخدام لغات برمجة مخصصة ثم تنقل هذه البرمجيات إلى لوحات التحكم المبنية على تلك المعالجات لتقود هذه الآلات بدقة. ولم يعد أمر تغيير برنامج العمل مرهقَا ولن يتطلب تغييرات في التجهيزات وإيقاف خطوط الإنتاج طويلًا لضبط المتغيرات الجديدة، بل تُعدّل البرمجيات خارج إطار خط الإنتاج ثم تحمّل إلى لوحات التحكم ليتوقف بعدها الخط لدقائق ثم يباشر العمل وفق البرنامج الجديد، وتُعرف هذه اللوحات بالدارات المنطقية القابلة للبرمجة PLC وتُبرمح لتقوم بعمل معين عندما تتحسس لمتغير ما أو يأتيها أمر ما. عندما تقود هذه الدارات تجهيزة محددة لتقوم بمجموعة خطوات معقدة لإنجاز عمل متكامل دعونا هذه التجهيزة روبوت Robot وتعرف عملية برمجتها ببرمجة الروبوت. وسرعان ما أخذ مجال الروبوتات أو الروبوتيكس Robotics منحنى مستقلا بذاته وبدأت تكنولوجيا بناء الروبوتات بالتطور السريع مدعومة بالتطور التكنولوجي الكبير لتقنيات الحوسبة في مجالي التجهيزات والبرمجيات من جهة والحاجة الملحة لوجود تجهيزات ذكية قادرة على تحسس البيئة المحيطة واتخاذ القرار بنفسها دون الرجوع إلى الإنسان وخاصةً في المجالات العسكرية أو الصناعات الكيميائية والنووية والعمل خارج كوكب الأرض ناهيك عن الرفاهية التي يسعى البشر إلى تحقيقها. فالطائرات المسيرة ومركبات استكشاف أجرام المجموعة الشمسية والروبوتات الطبية والتجهيزات المنزلية الذكية وألعاب الأطفال التفاعلية وغيرها الكثير من الأمثلة هي روبوتات تختلف في مستوى تعقيدها وبرمجتها وذكائها. لمحة عن الروبوتات قلنا أن الروبوتات هي تجهيزات قابلة للبرمجة يمكنها استشعار البيئة المحيطة والقيام برد فعل محدد سلفًا من قبل صانعها أو قادرة على اتخاذ قرار بنفسها محاكية بذلك السلوك البشري. وهنا لا بد من الإشارة إلى أن الروبوتات القادرة على اتخاذ القرارات باستقلالية تعتمد أساسًا على تقنيات الذكاء الصنعي وتعلم الآلة وهذا بدوره مرتبط بتقنيات أكثر تعقيدًا وتطورًا في برمجة الروبوتات. الأجزاء الرئيسية للروبوت يتكون الروبوت بشكل عام من الأقسام الرئيسية التالية: هيكل فيزيائي Physical Structure مخصص يساعد الروبوت على أداء الوظيفة الخاصة به، وهنا يأتي دور التصميم الصحيح في إنجاز الروبوت المطلوب.فالروبوتات التي تستخدم في صناعة السيارات مثلًا لا بد أن تتمتع بتصميم فيزيائي يناسب عملها. منظومة تحكم Control System تضم كل المكوّنات التي تتلقى البيانات من المحيط وتعالجها. تُبرمج منظومة التحكم لتقود المكوّنات الأخرى للروبوت كي تؤدي العمل المطلوب منها، فهي تتصرف كالدماغ البشري بشكل أو بآخر. الحساسات أو المستشعرات Sensors التي تستكشف البيئة المحيطة (مثل مستشعرات الحرارة والحركة والبعد وغيرها) وتنقل المحرضات إلى منظومة التحكم على شكل إشارات إلكترونية تفهمها منظومة التحكم وتدفع الروبوت إلى الاستجابة لها وفقًا لبرمجة الروبوت المحددة. المشغّلات Actuators المسؤولة عن تحريك الروبوت وتتكون عادة من محركات تتلقى الإشارات من منظومة التحكم لتنفيذ الحركة المطلوبة. وتختلف طريقة عمل هذه المشغلات وفقا لعمل الروبوت، فقد تعمل بالكهرباء أو الهواء المضغوط (مشغلات بنيوماتية pneumatic actuators) أو هيدروليكية وغيرها. مصدر للطاقة الكهربائية لتغذية منظومة التحكم وأجهزة التحسس والمشغلات الكهربائية. الطرفيات المخصصة، وهي مكوّنات خارجية خاصة بكل روبوت لتساعده على أداء وظيفته. فقد تحتاج روبوتات المعامل إلى طرفيات قابلة للتغيير لأغراض الطلاء أو القص أو الثقب، كما يحتاج الروبوت الجراحي إلى معدات خاصة به وهكذا. الأنواع الرئيسية للروبوتات نشير عادة بالروبوتات إلى الروبوتات الفيزيائية التي تأتي بمختلف الأشكال والأحجام من 0.2 ميليمتر إلى روبوتات بطول 200 متر. لكن لا بد من الإشارة أيضًا إلى الروبوتات البرمجية التي تنفذ مهام روبوتية كاملة عبر الحاسوب في العالم الافتراضي. يمكن أن نميز بين خمسة أنواع رئيسية من الروبوتات: الروبوتات مسبقة البرمجة Pre-Programmed Robots: وهي روبوتات مصممة لأداء مهام محددة في بيئة فيزيائية محددة مثل الأذرع الروبوتية التي تعمل على خطوط التجميع والتي تنفذ مهامها بسرعة وكفاءة عالية مقارنة بالعامل البشري. وتُعد برمجة الروبوتات في هذه الحالة سهلة نسبيًا الروبوتات الشبيهة بالبشر Humanoid Robots: وهي روبوتات تبدو كالبشر وتحاكي أفعالهم عادة كالمشي والعدو والقفز وحمل الأغراض، وقد تصمم أحيانًا لتبدي تعابير تحاكي تعابير الوجه التي يبديها البشر. روبوتات ذاتية التصرف Autonomous robots: روبوتات تعمل بشكل مستقل عن المشغلين البشريين وتصمم عادة لتنفيذ مهام في بيئات مفتوحة لا تتطلب مراقبة بشرية أو لا يمكن وجود البشر فيها. وتتميز هذه الروبوتات بوجود بنية قادرة على اتخاذ القرار وهي بنية حاسوبية عادة تقدّر كل خطوة بناءً على البيانات التي ولّتها مسبقًا. تتميز برمجة الروبوتات ذاتية التصرف بالتعقيد وتعتمد على خوارزميات الذكاء الصنعي وتعلم الآلة. وكمثال عليها نجد الطائرات المسيرة ذاتية التصرف والروبوتات الطبية وروبوتات الأعمال المنزلية. الروبوتات الخاضعة للتحكم عن بعد Teleoperated robots: يتصل الإنسان بهذه الروبوتات غالبًا عبر شبكة لاسلكية ويتحكم بها عبر واجهة تحكم خاصة. تعمل هذه الروبوتات في بيئات جغرافية ومناخية قاسية جدًا كالغواصات الروبوتية والمسيرات المتعقبة للألغام. روبوتات الواقع المعزز Augmenting robots: وتستخدم لتعزيز القدرات البشرية أو تعويض القدرات التي قد يفقدها. من هذه الروبوتات الأطراف الصناعية الروبوتية والهياكل الخارجية الروبوتية التي تساعد البشر على رفع الأوزان الثقيلة. الروبوتات البرمجية الروبوتات أو البوتات البرمجية Bots هي برامج حاسوبية تنفذ مجموعة من المهام الحاسوبية ذاتيًا ومن أشهرها روبوتات المحادثة الآلية. يتطور هذه النوع من الروبوتات مدعومًا بالتطور البرمجي الحاصل في مجالات الذكاء الصناعي وعلم البيانات وخوارزميات تعلم الآلة، ويتوقع أن يصبح قادرًا على برمجة الروبوتات الفيزيائية والتحكم بها، فهذه الروبوتات هي المنتج النهائي لعلم الذكاء الصنعي. دورة الذكاء الاصطناعي احترف برمجة الذكاء الاصطناعي AI وتحليل البيانات وتعلم كافة المعلومات التي تحتاجها لبناء نماذج ذكاء اصطناعي متخصصة. اشترك الآن كيفية برمجة الروبوت تضم معظم الروبوتات الفيزيائية نوعًا من منظومات التحكم الحاسوبية القابلة للبرمجة. فقد تُبني هذه الأنظمة على أساس المتحكمات الصغرية أو المعالجات الصغرية وتكون مخصصة لنوع محدد من الروبوتات أي تُبنى وفق رؤية المصنع. تُبرمج الروبوتات المخصصة من قبل مُصنِّعها فقط ولا يمكن تعديل برمجياتها ووظائفها إلا من قبل الشركة المصنعة. كما قد تكون منظومات التحكم معممة يمكن استخدامها لتتحكم بأية روبوتات مثل حواسيب أردوينو المصغرة وحواسب راسبيري باي ووحدات الدارات المنطقية القابلة للبرمجة. يمكن لأي شخص استخدام هذه الحواسب سواءً أكان هاويًا في مجال الروبوتات أو حتى خبيرًا لبناء روبوتات بسيطة وصولًا إلى روبوتات عالية التعقيد. تُبرمج منظومات التحكم المخصصة أو المعممة باستخدام لغات برمجة مختلفة نستعرضها في فقرات قادمة. لا تُعد برمجة الروبوت أمرًا بديهيًا ومباشرًا، بل موضعًا شديد الخصوصية يتعلق أولًا وأخيرا بطبيعة الروبوت ومكوّناته والوظائف المطلوبة منه. ولا يعني ذلك أن برمجة الروبوت أمر معقد وصعب المنال، فحتى الأطفال قادرون على تعلم أساسيات برمجته والتحكم به. برمجة الروبوت فيزيائيًا تُخفي هذه الروبوتات الجزء المتعلق بكتابة برامجها عن المستخدم، فلا حاجة فيها لشاشة وواجهة خاصة ولغة برمجة روبوت بل يعتمد كليًا على أجزاء فيزيائية (أزرار، روافع، قطع) تبرمج الروبوت ليقوم بأعمال معينة وفق تتابع ضغط هذه الأزرار أو تتابع تركيب هذه الأجزاء أو القطع مثل ألعاب الروبوت Bee-Bot: مثال آخر عليها Code-a-Pillar التي تُستخدم لتعليم الأطفال من 3-8 سنوات برمجة الروبوت من منطق التتابع ومبدأ الاستجابة للأفعال. برمجة الروبوت بالمهام لا تختلف هذه الروبوتات عن سابقاتها سوى بفصل منظومة التحكم عن المكونات الفيزيائية للروبوت. تشبه هذه الروبوتات في طبيعتها الألعاب التي يجري التحكم بها عن بعد لكن المستخدم قادر على إدارتها وبرمجة سلوكها من خلال أجهزة تحكم عن بعد أو عن طريق تطبيقات للهواتف الذكية يمكن من خلالها وضع تسلسل معين لعدة مهام مبرمجة مسبقًا ومخزنة في ذاكرة الروبوت لإنجاز وظيفة محددة. تُستخدم هذه الروبوتات كروبوتات تعليمية للمبتدئين والأطفال في مراحل عمرية مبكرة (6-13 عامًا) وتعزز تعليميًا مفهومين اثنين: الفصل والتمييز بين العتاد الصلب والبرمجيات. اتقان تقسيم أي وظيفة إلى مهام منفصلة ووضعها ضمن التسلسل المنطقي الصحيح. اكتساب مهارات أساسية في برمجة الروبوت. ولا تقتصر هذه الطريقة في البرمجة على الروبوتات التعليمية بل تتعداها إلى روبوتات في الخدمة الفعلية كالطيران المسير الاستكشافي الذي يشغله أشخاص غير مختصين. إذ يمكن الوصول إلى هذه الروبوتات عن بعد ثم استخدام برنامج حاسوبي أو تطبيق هاتف محمول لوضع مجموعة من المهام المبرمجة مسبقًا وفق تسلسل محدد لإتمام برمجة الروبوت لإنجاز المطلوب. فإن أراد شخص غير مختص برمجة روبوت طائرة مسيرة تُبرمج بالمهام لرفعها مسافة 100 متر ثم فتح الكاميرا والتقاط صورة وفق اتجاه محدد ثم العودة إلى القاعدة وتكرار الأمر 10 مرات يوميًا، ما عليه مثلًا سوى سحب مهمة "التحليق إلى ارتفاع" من قائمة المهام الجاهزة في التطبيق ويضع بعدها "افتح الكاميرا" ثم تعليمة "وجه الكاميرا" ثم "التقط صورة" ثم "انخفض" ويضع كل تلك التعليمات في تعليمة "كرر الخطوات السابقة" ثم يرسل البرنامج إلى الروبوت ليُبرمج! لا داعٍ في هذه الحالة لأن يعرف أي شيء عن طريقة برمجة كل مهمة ولا عن آلية عمل المستشعرات أو المحركات أو الكاميرا أو آلية التوجيه لكنه يضع المهمات في سياقها الصحيح والنتيجة هي برمجة الروبوت بنجاح. برمجة الروبوت بالتعلم والقيادة تأتي هذه الروبوتات مصنّعة بالكامل ومخصصة، فلا يمكن تطويرها أو تعديلها سوى من قبل الشركات المصنعة وعادة ما تقوم بوظيفة أو مجموعة وظائف محددة سلفًا كالأذرع الروبوتية. وتتطلب برمجة الروبوت في هذه الحالة وحدة تحكم وبرمجة Programming pendant منفصلة عن جسم الروبوت تتيح للمشغل اختيار مكوّن محدد من مكوّنات الروبوت ثم إعطائه مهمة معينة كأن يختار محرك الجزء العلوي من الذراع ثم تدويره بزاوية محددة وتخزين الأمر. ينتقل بعدها إلى مكوّن آخر لتنفيذ حركة أو قياس معين ومن ثم تخزين الأمر لينتقل إلى الأمر التالي، وعند الإنتهاء من إملاء مجموعة الأوامر على الروبوت، يُخزّن المشغل هذه الأوامر في برنامج يعطيه اسمًا محددًا ثم يتأكد من تكرار الروبوت لهذا البرنامج بدقة قبل أن يغلق وضع التعليم Teach وينتقل إلى وضع العمل وفقا للبرنامج الجديد وهكذا تنتهي برمجة الروبوت. الروبوتات المبرمجة بلغات برمجة مع ظهور عصر الحواسيب القوية وغير المكلفة، بدأ الميل إلى برمجة الروبوتات باستخدام لغات برمجة الحواسيب أو نسخ مخصصة منها مزودة بمزايا خاصة لتسهيل برمجة الروبوت والتعامل مع مكوّناته. مع ذلك لا زالت الكثير من الشركات تقدم لغات برمجة خاصة لبرمجة روبوتاتها، معظمها لغات وظيفية أو لغات مرئية. يُصطلح عادة على برامج الروبوت المكتوبة بلغات برمجة مخصصة ببرمجة الروبوتات المطفأة Offline-programming، إذ تكتب البرمجيات على منصات غير متصلة بالروبوت الذي يتابع عمله وفقًا لبرنامجه القديم إن كان مبرمجًا مسبقًا. عند انتهاء برمجة الروبوت على تلك المنصات تجري محاكاة عمل البرنامج الجديد والتأكد من عمله. يُوقف الروبوت لدقائق ريثما يُحمّل برنامجه الجديد ثم يتابع العمل وفق هذا البرنامج. لغات برمجة الروبوت تُستخدم مجموعة متنوعة من لغات البرمجة وأطر العمل لبرمجة الروبوتات واختبار هذه البرمجيات ومن ثم نقلها إلى الروبوت. سنتحدث تاليًا عن مفهوم أنظمة تشغيل الروبوت ومن ثم سنلقي نظرة على لغات البرمجة المخصصة لكتابة برمجيات الروبوتات. مفهوم أنظمة تشغيل الروبوت يُشار عادة إلى البرمجيات وبيئات العمل والمنصات وأدوات البرمجة الوسطية التي تتكامل في سبيل برمجة الروبوتات بمنظومة تشغيل الروبوت Robot Operating System. لا ينبغي الخلط بين منظومة تشغيل الروبوت ونظام تشغيل وحدة التحكم OS وبرمجيات وحدة التحكم الثابتة (برمجيات العتاد) firmware. فإن استخدمت مثلًا حاسوب راسبيري باي للتحكم بروبوت، يكون نظام تشغيل لوحة التحكم هو راسبيان غالبا (نسخة من نظام لينكس) أما الأدوات التي تساعدك برمجة روبوتك ونقل البرنامج إليه والتي تعمل على راسبيان فهي منظومة تشغيل الروبوت. يميل أغلب مصنعي الروبوتات ذات الوظائف الثابتة كروبوتات التغليف والتعبئة أو الروبوتات المخصصة للعمل في ظروف استثنائية على كتابة برنامج واحد فعّال وتحميله على الروبوت. تُعرف هذه البرامج بالبرمجيات الثابتة. برمجة الروبوتات باستخدام لغات البرمجة عامة الأغراض تعتمد برمجة الروبوتات وفق هذه الطريقة على لغات برمجة عامة الأغراض مثل لغة بايثون أو لغة جافا ثم تبنى مكتبات خاصة أو مجموعة أدوات باستخدام هذه اللغات لتنفيذ إجرائيات برمجية تتحكم بمكونات الروبوت على صعيد الحركة أو تحسس البيئة المحيطة أو عمليات اتخاذ قرار. يعتمد الأمر في هذه الحالات على منظومة التحكم بالروبوت. فإما أن تُكتب برامج الروبوت بإحدى لغات البرمجة على حاسوب وتختبر ثم تُنقل إلى منظومة تحكم الروبوت مثل معظم الروبوتات الصناعية والروبوتات المبنية على تجهيزات PLC أو تلك المجمعة حول متحكم صغري مثل لوحات أردوينو. أو أن يُحمّل نظام تشغيل متكامل على لوحة التحكم بالروبوت (راسبيان، ويندوز، لينكس،أندرويد،…إلخ.) وكل ما عليك حينها كتابة برنامج الروبوت باستخدام اللغة التي تريد من خلال تثبيت إحدى بيئات العمل المناسبة على نظام التشغيل ومن ثم تجريب البرنامج على الروبوت مباشرة. من أمثلة لوحات التحكم هذه لوحات راسبيري باي ولوحات أدرويد ADROID وحواسب ASUS Tinker Board، وتدعم اللوحات السابقة أنظمة تشغيل مشتقة من نظام لينكس كما تدعم اللوحتين الأخيريتين نظام أندرويد. إليك قائمة بأكثر لغات البرمجة شيوعًا في برمجة الروبوتات سواء لكتابة البرامج الثابتة أو القابلة للبرمجة المباشرة: لغتي C و ++C: يعتمد الكثير من مبرمجي الروبوتات على هاتين اللغتين في كتابة برامجهم لأن الكثير من مكتبات التحكم بالتجهيزات الفيزيائية للروبوت قد طورت باستخدام هاتين اللغتين. تسمح هذه المكتبات بالتفاعل المنخفض المستوى من العتاد الصلب وتؤمن أداءً عاليًا شديد الكفاءة في زمن التنفيذ، كما تدخل في تطوير الكثير من بيئات التشغيل الأكثر شهرة مثل DART وRobotics Library (RL). وعلى الرغم من صعوبة إنجاز بعض الوظائف بهاتين اللغتين مقارنة بلغة بايثون وماتلاب، لكن أداء هاتين اللغتين في زمن التشغيل جعلهما لغتين معياريتين في برمجة الروبوتات حتى مع زيادة شعبية لغة بايثون. بايثون: ازدادت شعبية هذه اللغة لسهولة استخدامها والكم الهائل من المكتبات التي تساعد على برمجة الروبوتات، فلا حاجة لإعادة اختراع العجلة، إذ ستجد تقريبًا كل ما تبحث عنه ضمن تلك المكتبات. كما أن اعتمادها مع ++C كلغة أساسية في نظام تشغيل الروبوتات ROS وكذلك من الحواسيب المخصصة للتحكم بالروبوتات مثل راسبيري باي سيجعلها مرشحة لتكون اللغة الأكثر شعبية في عالم برمجة الروبوتات. جافا: نظرًا لشعبية هذه اللغة بين مطوري الروبوت المختصين بعلوم الحاسوب وجدت هذه اللغة طريقها إلى برمجة الروبوت. جافا أيضًا هي لغة مفسّرة ويعني ذلك أنك لن تّضطر إلى نقلها إلى لغة آلة محددة ومعالج محدد أو لوحة تحكم محددة بل تعمل آلة جافا الافتراضية على تنفيذ التعليمات أثناء التشغيل مما يعني إمكانية كتابة الشيفرة مرة واحدة وتنفيذها على آلات مختلفة. تُعد جافا لغة أساسية في تطوير روبوتات العديد من الشركات مثل IBM. اللغة #C (بيئة NET.): تأتي شعبيتها من عدة أسباب أهمها: اللغة الرئيسية التي تُستخدم في برمجة الروبوتات ضمن بيئة تطوير الروبوتات Microsoft Robotics Developer Studio من مايكروسوفت، فإن أردت العمل على هذه البيئة لا بد من تعلم هذه اللغة. تُستخدم كأساس في محركات الواقع الافتراضي مثل Unity الذي تزداد شعبيته حاليًا. لغة مفسرة وبالتالي يمكن أن يعمل البرنامج ضمن أية آلة أو روبوت. ماتلاب MATLAB: تشتهر هذه اللغة ضمن صفوف مهندسي ومصممي الروبوت وضمن النطاق الأكاديمي لتحليل البيانات وتطوير أنظمة التحكم. تشتهر هذه اللغة بوجود صندوق الأدوات Robotics Toolbox الذي يمكنه المساعدة في تطوير نظام روبوت كامل باستخدام ماتلاب فقط. لغتي LISP و PROLOG: يُتوقع ازدياد شعبية هاتين اللغتين مستقبلًا مع زيادة الاهتمام بتطبيق تقنيات الذكاء الصنعي، فهاتين اللغتين من أكثر اللغات استعمالًا في خوارزميات الذكاء الصنعي وستجدان طريقًا للدخول إلى عالم برمجة الروبوتات. إذ استخدمت بيئة تطوير الروبوتات ROS لغة LISP في كتابة بعض أجزائها، واستخدمت IBM لغة PROLOG كجزء من الأدوات البرمجية في مشروع IBM's Watson AI. لغة سكراتش Scratch: سكراتش هي لغة برمجة مرئية صُممت لتعليم البرمجة للمبتدئين وتستهدف الفئة العمرية بين 8 و 16 عامًا ويزداد الاعتماد على هذه اللغة في نوادي الروبوت والمدارس التقنية. تتكون اللغة من من مجموعة من الكتل البرمجية التي تُسحب وترتب وفق تسلسل معين لإنجاز البرنامج المطلوب. تدعم سكراتش مجموعة من المكتبات التي يمكنها التحكم بالطرفيات التي تتصل بحاسوب راسبيري باي مما زاد في شعبيتها. بإمكانك الاطلاع ضمن أكاديمية حسوب على كتابة برامج تتحسس للوسط الخارجي باستخدام راسبيري باي ولغتي بايثون وسكراتش دورة تطوير التطبيقات باستخدام لغة Python احترف تطوير التطبيقات مع أكاديمية حسوب والتحق بسوق العمل فور انتهائك من الدورة اشترك الآن برمجة الروبوتات بلغات برمجة مخصصة تظهر الحاجة إلى لغات برمجة مخصصة للروبوتات Robots Programming Languages واختصارًا RPL كنتيجة للتنوع الكبير في الآلات الروبوتية والروبوتات واختلاف وظائفها. إذ تظهر في عالم الصناعة مفاهيم لا بد من أخذها بعين الاعتبار عند برمجة الروبوت مثل التحكم بالقوى المطبقة force control وأداء المهام على التوازي Parallelism. لهذا السبب طوّرت لغات برمجة تمتلك إمكانيات لغات برمجة الحواسيب إلا أنها مخصصة للروبوتات نذكر منها: لغة VAL: طورتها شركة Unimation لبرمجة بروبوتاتها وتستخدم شركة Stäubli حاليا النسخة VAL 3 منها. لغات HELP و RAIL و Karel: وهي لغات مخصصة من الجيل الثاني لبرمجة الروبوتات، وقد أظهرت ميزات متطورة للتحكم بالحركة والتعامل مع واجهات الحساسات والمشغلات والتخاطب البيني ضمن الروبوت وأبدت بعض ملامح الذكاء الصنعي. لغة RAPID: التي تستخدمها شركة ABB لغة KRL: وهي اختصار لعبارة (Kuka Robot Language)وتستخدمها شركة Kuka لغة URScript: وتستخدمها شركة Universal Robots. مسارات تعلم برمجة الروبوتات والروبوتكس ما الغاية من مشروع الروبوت الذي أريد أن أنجزه؟ ما هي مدى معرفتي بالإلكترونيات؟ ما مدى معرفتي بالبرمجة عمومًا؟ هل أنا مهتم حقا ببناء هذا المشروع من الصفر أم أبحث عن حلول سريعة؟ إن الإجابة على الأسئلة السابقة أمر ضروري قبل العمل على أي مشروع يتعلق ببرمجة الروبوتات واستثمارها. فإن كنت هاويًا فضوليًا للمعرفة عليك أن تسلك مسارًا محددًا وإن كنت هاويًا تسعى إلى الاحتراف والعمل في مجال الروبوتات فهي حكاية أخرى وإن كنت ذو خلفية في علوم الحاسوب أو الهندسة يختلف مسار العمل وإن كنت رجل أعمال أو مستشارًا تقنيًا لمؤسسة صناعية يختلف الأمر كذلك. برمجة الروبوت للأطفال علينا أولًا أن نعزز مفاهيم هامة للطفل مثل السبب والنتيجة والتسلسل الصحيح لإنجاز المهام وذلك في سن مبكرة من 3-6 سنوات. يمكننا بداية الاستفادة من الدمى الروبوتية التي تبرمج فيزيائيا لحث الطفل على التعلم مثل الدمى التي تتحرك وتدور وتصدر أصواتًا وفق تسلسل محدد مسبقًا يتعلمه الطفل بالضغط المتتالي على مجموعة أزرار على الدمية. كما يمكن بناء مهاراته في التصميم الفيزيائي من خلال ألعاب فك وتركيب المكعبات الملونة لبناء هياكل متوازنة ومتناظرة التصميم. في سن أكبر من 6-10 سنوات يمكنه العمل على روبوتات مبرمجة بالمهام لإدراك مفهوم البرنامج بشكل منفصل عن الآلة وتنمية الرغبة في التفكير بطريقة عمل هذه المهام. كما يمكن أيضا تلقين الطفل أساسيات الدوائر الكهربائية واستخدام البطاريات وتوصيلها مع أضواء ومحركات صغيرة وحثه على بناء هياكل معدنية أو بلاستيكية عبر ألعاب الفك والتركيب المكونة من قطع متنوعة وعجلات ومحركات وبراغي ومفكات. إن أبدى الطفل بعد عمر الثامنة براعة ورغبة يمكن أن تبدأ بتعليمه البرمجة من خلال لغة سكراتش وبعد أن يتجاوز العاشرة يمكن العمل على روبوتات جاهزة تبرمج بلغة برمجة مثل سكراتش وينقل البرنامج إليها من الحاسوب لتنفيذ مهام معينة. سيبدي الطفل أو اليافع بعد ذلك رغبته في الاطلاع والتعلم أكثر وسيدرك بنفسه طريق البحث وتعلم ما يلزمه وسيخط مساره في مجال برمجة الروبوتات والروبوتيكس عمومًا بنفسه. على الرغم من ذلك يمكنك إرشاده إلى تعلم لغات برمجة جديدة مثل بايثون والعمل على أنظمة تشغيل مثل لينكس وأندرويد ليألفها ثم العمل مع لوحات تحكم حاسوبية مثل راسبيري باي ليتحكم بعناصر فيزيائية كالأضواء والمصوّتات وتحريك اللوحة على هيكل ذو عجلات وموازنتها واستشعار البيئة المحيطة. بإمكانك الاطلاع ضمن أكاديمية حسوب على كتابة برامج تتحسس للوسط الخارجي باستخدام راسبيري باي ولغتي بايثون وسكراتش. وهكذا ستضع الناشئة على الطريق الصحيح للانطلاق في عالم الروبوتات أكاديميًا وتقنيًا. برمجة الروبوت للمبرمجين والمهندسين إن كنت مبرمجًا فأنت جاهز للانطلاق. قد ترغب في تعزيز معلوماتك في مجال الإلكترونيات وخاصة الحساسات والمحركات ومصادر تغذيتها واستثمارها إن كنت ترغب في تصميم روبوت بنفسك. أما إن كنت ترغب في تشغيل روبوت موجود قابل للبرمجة فأنت في الواقع لا تحتاج شيئًا سوى اختيار لغة البرمجة والبحث عن مكتبات جاهزة لتنفيذ ما تريده. ستظهر المشكلة إن أردت أن يقوم الروبوت بوظيفة واضطررت إلى برمجة هذه الوظيفة بنفسك للمرة الأولى (احتمال ضعيف) عندها عليك العودة إلى المراجع الأكاديمية وتعزيز قدراتك في الفيزياء علم التحريك والإلكترونيات! أما إن كنت مهندسًا كهربائيًا أو مهندس إلكترونيات، عليك فقط تعزيز قدراتك البرمجية التي يُفترض أن تكون موجودة وراجع معلوماتك عن الإلكترونيات ومصادر التغذية وستكون جاهزًا لبرمجة أي روبوت واستثماره وحتى تصميم وبناء روبوت من الصفر. اختر المنصة التي تريد العمل عليها واطلع على أفكار ومشاريع الآخرين وانطلق! تبقى التوجيهات نفسها للمهندسين غير الاختصاصيين والتقنيين. تعلم لغة برمجة مستخدمة في برمجة الروبوت وافهم مكوّنات الروبوت الذي تنوي العمل عليه وبرمجته أيًا كانت الأسباب التي دفعتك لذلك. استعن بالإنترنت ومنتديات الروبوتيكس التي تهتم بنفس الروبوت الذي تستهدفه واجتهد قليلًا ولن يذهب عناؤك سدى. لكن غالب الظن أنك في مصنع ما وأوكلت إليك مهمة قيادة روبوت أو برمجته لسبب أو لآخر، اطلع على كتيب التشغيل وافهم تعليمات تشغيل الروبوت على وضع التعلم فغالبًا ما تُبرمج هذه الروبوتات بالتعلم حاول أن تبحث عن مقاطع فيديو تشرح آلية برمجته وخذ بعض الوقت في التجربة (لا تبالغ كثيرًا في التجريب فهذه الروبوتات مكلفة!) وسترى أن الأمر سينجح. برمجة الروبوت للهواة والفضوليين إن كنت طفًلا أو يافعًا أو مبرمجًا أو مهندسًا فقد أرشدناك في فقرات سابقة إلى الطريق الصحيح. أما إن كنت شغوفًا بالتعلم ورأيت أو قرأت محتوى يتحدث عن علم الروبوت ووقع الأمر في نفسك موقعًا حسنًا ورغبت في تجربة الأمر، فاسمح لي أن أهنئك وأشجعك! ابدأ مسيرتك بتعلم أساسيات التحكم الكهربائي التقليدي فهي من ناحية مهنة محترمة ومن ناحية أخرى ستكون مدخلك إلى التحكم الرقمي. ستجد الكثير من المعاهد التعليمية التقنية؛ سجل في أحدها فهذا أسرع من متابعة قناة على اليوتيوب وعملي أكثر. في الوقت ذاته إن لم تكن متقنًا للعمل على الحاسوب (أعي تماما أن الحاسوب قد أهمل من قبل الكثيرين لصالح الهواتف الذكية) فحاول أن تألف التعامل معه، تعلم على الأقل نظامي ويندوز ولينكس فهذا أساسي. عندما تنهي أساسيات التحكم التقليدي انتقل إلى التحكم الرقمي باستخدام وحدات PLC (ستجد أنها الخطوة التالية في مسار التعلم في معهدك إن سجلت في أحدها). يعتمد الكثير من الروبوتات على وحدات PLC كمنظومات تحكم، وستتعرف خلال هذه الفترة على مفهوم البرمجة والبرامج، إذ تُبرمج تلك الوحدات من خلال لغات برمجة مرئية بالمهام. لن يكون الأمر صعبًا، فقط اجتهد قليلًا ولا تستسلم. خلال هذه الفترة تعمق قليلًا في أحد توزيعات نظام التشغيل لينكس وستجني ثمار هذا الجهد بالتأكيد. حتى هذه اللحظة ستكون قد اكتسبت المهارات التالية: إدراك مفهوم التحكم الصناعي. إدراك مفهوم البرنامج وكتابة برمجيات بسيطة للتحكم بالتجهيزات الكهربائية. التعامل مع عناصر كهربائية وإلكترونية عديدة خلال مسار الدورتين السابقتين وسترى أنك تحتاجها في عالم الروبوت. العمل على الحاسوب وبأكثر من نظام تشغيل. قد يلبي طموحك هذا الحد، فقد تتمكن إن اجتهدت من تحريك مركبة وتفادي العقبات واستشعار المحيط لكن قد يكون روبوتك كبير الحجم ومحدود الإمكانات لأن أغلب التجهيزات التي تعلمتها كبيرة الحجم من الحساسات إلى المحركات إلى لوحات التحكم والتغذية، لم لا! فالروبوتات الكبيرة لها جاذبيتها! إن أردت أن تصل إلى روبوت أصغر حجمًا أو ينفذ مهام أعقد وأكثر دقة فعليك متابعة مسيرتك التعليمية. تعلم العمل على الحواسب المصغرة أو حواسب اللوحة الواحدة مثل أردوينو وراسبيري باي من خلال دورات تعليمية في معاهد أو على منصات إلكترونية، فلن يعيقك الآن أي شيء لفهم واستيعاب كل ما يقال. ابدأ بتعلم لغة برمجة وأنصحك بتعلم البرمجة بلغة بايثون على الرغم من أنّ لغة سكراتش تمثل مرحلة انتقالية بين لغات برمجة PLC ولغات برمجة الحواسيب. الخيار لك على أية حال. ستجني خلال هذه الفترة ثمار تعلمك لأنظمة تشغيل الحواسب وعندما تنهيها ستكون ملمًا ببرمجة الحواسيب وبأساسيات الإلكترونيات المتعلقة بالروبوت. انظر دورة تطوير التطبيقات بلغة بايثون التي تقدمها أكاديمية حسوب لتعليم البرمجة بلغة بايثون بلغة عربية ودون الحاجة إلى خبرة مسبقة: أنت مستعد الآن، ابنِ روبوتك الخاص باستخدام حاسوب مصغر مستفيدًا من تجارب الهواة الآخرين. حاول أن تتواصل معهم من خلال المنتديات وأن تعزز قدراتك بالاطلاع المستمر. تتوفر أيضا صناديق أدوات مخصصة لبناء روبوتات متنوعة تختلف في تعقيدها، يمكنك اقتناء واحدة فهي تزودك بالكثير من التجهيزات والقطع لبناء هيكل الروبوت وبرمجته. هؤلاء الذين يريدون تغيير العالم! لا شيء سيقف في طريقك سوى ذاتك. ثق بنفسك وبإمكاناتك ووسع مداركك في كل المجالات فعلم الروبوت لا يقتصر على علم واحد فهو مزيج من كل العلوم. لا تستسلم ولا تردد أبدًا عبارة "لا أعرف كيف أفعل ذلك". كن مبرمجًا محترفًا ومهندسًا محترفًا في عملك وتخيل واحلم كما لو كنت طفلًا. ستسمع كثيرًا عبارة "لا تعد اختراع العجلة"، قد ترى أن هذا صحيح، لكن إن كان عليك إعادة اختراع العجلة فافعل! رحلة سعيدة إن قررت الانطلاق في عالم الروبوتات! وإن احتجت إلى أي مساعدة، أضف سؤالك في قسم التعليقات أو في قسم الأسئلة والأجوبة. اقرأ أيضًا ما هو حاسوب راسبيري باي Raspberry Pi؟ ما هي لوحة أردوينو Arduino؟ تصميم لعبة السلك والحلقة باستخدام برنامج سكراتش وحاسوب راسبيري باي أسهل لغات البرمجة تعلم البرمجة فوائد البرمجة

سنتحدث في هذا المقال عن مفهوم الصور المتجاوبة responsive images التي تُعرَض عرضًا يلائم كل الأجهزة مع اختلاف قياس شاشة العرض ودقتها والميزات الأخرى المتعلقة بذلك، كما سنبحث في الأدوات التي تقدمها HTML لإنجاز العمل، ويساعدك ذلك في تحسين الأداء على مختلف الأجهزة، فهي جزء من مفهوم التصميم المتجاوب الذي يُعَدّ أحد مواضيع تنسيقات CSS الذي لا بدّ من الاطلاع عليه في مرحلة ما. لا بدّ قبل المتابعة في قراءة هذا المقال أن تكون على دراية بأساسيات HTML وطريقة إدراج الصور الساكنة في صفحات ويب. لماذا تستخدم الصور المتجاوبة؟ سنعرض حالةً نموذجيةً لإيصال الفكرة، فقد يحتوي موقع ويب نمطي على صورة تمثِّل خلفية ترويسة صفحاته، بالإضافة إلى صور في الأقسام الأخرى، ومن المحتمل امتداد صورة الترويسة لتشغل عرض الترويسة بأكمله، في حين تُدرَج بقية الصور ضمن أعمدة المحتوى، وإليك مثالًا كما يلي: سيعمل الموقع جيدًا ضمن الشاشات الواسعة كما في الحواسب المحمولة أو المكتبية، وبإمكانك متابعة هذا المثال مباشرةً ضمن مخزن جيت-هاب الخاص به، كما يمكنك الاطلاع على شيفرته المصدرية. ضُبط عرض جسم المحتوى ليكون 1200 بكسل، إذ سيبقى هذا العرض كما هو في نوافذ العرض viewports الأكبر، كما سيضبط جسم المحتوى نفسه في منتصف المساحة المخصصة له؛ أما في نوافذ العرض الأضيق، فسيشغل المحتوى 100% من العرض الذي تتيحه نافذة العرض. ضُبط موقع صورة الترويسة لينطبق مركزها على مركز الترويسة بصرف النظر عن عرض الترويسة، فإذا عُرض الموقع على شاشة ضيقة، فسيُرى من الصورة تفاصيلها المهمة -أي الأشخاص- وستختفي بقية التفاصيل من الطرفين؛ أما الارتفاع، فسيبقى 200 بكسل. ضُبطت الصورة الموجودة في عمود المحتوى بحيث يتقلص حجمها تلقائيًا لتبقى دائمًا ضمن العمود إذا قلّ عرضه بدلًا من تجاوز حدوده. مع ذلك، ستظهر المشاكل عندما تحاول عرض الموقع على الأجهزة ذات الشاشات الضيقة، إذ تظهر الترويسة في الصورة التالية جيدًا، لكنها ستمتد في أجهزة الهاتف المحمول لتشغل مقدارًا أكبر من ارتفاع الشاشة، كما ستصعب رؤية الأشخاص في أول صور المحتوى وهي بهذا الحجم. يمكن تحسين الوضع بعرض نسخة مجتزأة من الصورة تضم التفاصيل المهمة فقط عندما تُعرَض الصورة ضمن شاشة ضيقة، كما يمكن استخدام صورة مجتزأة أخرى تناسب الشاشات متوسطة العرض مثل شاشات الأجهزة اللوحية، في حين تظهر المشكلة عندما تحاول تقديم تلك الصورة المجتزأة بالطريقة التي ذكرناها في مختلف التخطيطات، وتُعرف هذه المشكلة بمشكلة الرؤية الفنية art direction problem. بالإضافة إلى ذلك، لا حاجة إلى إدراج صور بهذا الحجم في الصفحة إذا كانت ستُعرَض على شاشة هاتف محمول، كما ستبدو الصور النقطية في المقابل خشنة إذا عُرضت على شاشات أوسع، فالصور النقطية هي شبكة من البكسلات الطولانية والعرضية، وتُدعى هذه المشكلة بمشكلة تبدّل الدقة resolution switching problem. ليس ضروريًا أيضًا عرض الصور الكبيرة على شاشات أصغر حجمًا، فقد يسبب ذلك هدرًا في الحجم المتاح لتراسل البيانات وخاصةً لمستخدِمي الهواتف المحمولة الذين لا يرغبون بالطبع في تنزيل صورة كبيرة مخصصة لمستخدِمي الحواسب المكتبية مثلًا إذا وجدت صور تناسب أجهزتهم، لذا لا بدّ من استخدام صور بدقات مختلفة على أساس حل مثالي، ثم يختار المتصفح الصورة ذات الدقة الأنسب وفقًا لأبعاد الشاشة التي تعرضها، ولنزيد الطين بلِّة، سنجد أنّ بعض الأجهزة تتمتع بشاشات عالية الدقة وتحتاج إلى صور أكبر حجمًا كي تُعرض جيدًا، إذًا نحن أمام المشكلة السابقة نفسها لكنها في سياق مختلف. قد تعتقد بأن حل المشكلة سيكون استخدام الصور الشعاعية، وهي بالفعل حل إلى حد ما، فهي صغيرة الحجم و قابلة لتغيير الحجم دون تشوهات ويجدر بك استخدامها إذا أمكن ذلك، لكن هذه الصور غير مناسبة لكل الحالات، إذ يمكن استخدام هذه الصور لعرض الرسومات البسيطة والأنماط وعنصر الواجهات وغيرها، لكن من الصعب إنشاء صورة شعاعية بتفاصيل عالية الدقة مثل التي تجدها مثلًا في الصور الشخصية، إذ تبقى الصور النقطية مثل JPEG أكثر ملائمةً في حالات مثل هذه. لم تظهر هذه المشاكل في بدايات الويب، ففي بداية تسعينات القرن الماضي لم تعمل المتصفحات سوى على الحواسب المكتبية والمحمولة، ولم يكن على مطورِي المتصفحات حينها التفكير بإيجاد حلول لهذه المشاكل، فقد استخدمت تكنولوجيا الصور المتجاوبة مؤخرًا لحل المشاكل التي قدّمنا لها وذلك باستخدام عدة ملفات للصورة نفسها لكن بأحجام مختلفة على المتصفح لحل مشكلة تبدّل الدقة، أو صور مختلفة ملائمة للمساحات المختلفة لحل مشكلة الرؤية الفنية. سنناقش في هذا المقال بعض الميزات التي تدعمها معظم المتصفحات الحديثة المستخدَمة في الحواسب وأجهزة الهاتف المحمول بما في ذلك مايكروسوفت إيدج لكن دون مايكروسوفت إكسبلورر وهي <srcset> و <sizes> و <picture>. كيفية إنشاء صور متجاوبة؟ سنلقي نظرةً أقرب في هذا القسم على المشكلتين اللتين تحدثنا عنهما سابقًا وسنعرض بعض الحلول باستخدام صور HTML المتجاوبة مركِّزين على العنصر <img>، وسنستعمل صور HTML ونترك موضوع صور CSS إلى وقت لاحق على الرغم من أنّ صورة الترويسة في المثال السابق هي للديكور فقط وأنها أدرجت باستخدام خلفيات CSS، إذ يعدّ البعض CSS أكثر قدرة على إدارة الصور المتجاوبة من HTML. تبدل الدقة والأحجام المختلفة ما هي المشكلة التي تواجهنا عند تبدّل الدقة؟ نريد إظهار محتوى الصورة نفسه لكن بحجم أكبر أو أصغر وفقًا للجهاز الذي يعرضها، ونجد هذه الحالة في الصورة الموجودة في المحتوى الرئيسي للموقع النمطي الذي عرضناه سابقًا، إذ يتيح لك العنصر <img> الإشارة إلى ملف مصدري واحد: <img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"> سنستخدِم السمتَين الجديدتَين <srcset> و <sizes> في تزويد هذا العنصر بصور مصدرية إضافية مع تلميحات تساعد المتصفح في انتقاء المناسبة منها، ويمكنك الاطلاع مباشرةً على هذا الأسلوب في المثال الموجود على جيت-هاب، كما يمكنك الاطلاع على الشيفرة المصدرية. <img srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"> قد تبدو السمتان <srcset> و <sizes> معقدتين، لكن فهمهما ليس بهذه الصعوبة إذا كتبتهما وفقًا للتنسيق الذي اتبعناه في الشيفرة، وذلك بجعل كل قيمة تأخذها السمة في سطر مستقل، إذ تحتوي كل قيمة على قائمة من الخيارات تفصل بينها فاصلةً ,، ويتكون كل قسم من أقسام هذه القائمة من ثلاثة أجزاء، ولنلق نظرةً على محتوى كل قسم: السمة srcset يعرِّف مجموعةً من الصور التي نريد من المتصفح اختيار الأنسب منها وحجم كل صورة، كما يفصل بين معلومات كل مجموعة بفاصلة، وتضم كل مجموعة المعلومات التالية: اسم ملف صورة مثل elva-fairy-480w.jpg. فراغ. العرض الأصلي للصورة بالبكسل (480w، ولاحظ استخدام الواحدة w وليس البكسل px)، كما إن الحجم الأصلي للصورة هو الحجم الحقيقي الذي تجده عندما تفحص ملف الصورة على حاسوبك، إذ يمكنك مثلًا اختيار الصورة في ماك أو إس ثم الضغط على المفتاحين Cmd+I لعرض معلومات الصورة على الشاشة. السمة sizes يعرِّف مجموعةً من الشروط لعرض الوسائط مثل عرض الشاشة، ويشير إلى أفضل حجم للصورة يمكن اختياره عندما يتحقق أحد شروط العرض، ويتكون كل شرط مما يلي: طبيعة الشرط (max-width:600px): يصف بصورة مبسطة إحدى الحالات التي يمكن أن تكون عليها الشاشة، إذ نقول في هذه الحالة أنّ اتساع نافذة العرض هو 600 بكسل أو أقل. فراغ. عرض المقر slot الذي تشغله الصورة عندما يتحقق الشرط (480px). ملاحظة: بدلًا من تحديد عرض المقر التي ستشغلها الصورة بمقياس مطلق (تحديده بدقة 480px)، يمكنك تحديده بالنسبة إلى نافذة العرض viewport المستخدَمة (50vw مثلًا) لكن ليس على أساس نسبة مئوية، وربما قد لاحظت أنّ عرض المقر الأخير لا يرتبط بشرط على الوسائط لأنه سيكون الخيار الافتراضي عندما لا يتحقق أيّ من هذه الشروط. وبالتالي، ما سيفعله المتصفح عند استخدام هذه السمات هو ما يلي: النظر إلى عرض الجهاز. يتحقق من قائمة شروط الوسائط الموجودة في السمة sizes ليجد أول شرط محقق. ينظر إلى قياسات مقر العرض الذي مُرر إلى استعلام إيجاد الصورة المناسبة. يحمّل الصورة التي يُشار إليها من قائمة عناصر السمة srcset والتي تتطابق أبعادها مع أبعاد المقر الذي ستُعرَض ضمنه، وإذا لم تكن هناك صورة مطابقة، فأول صورة أكثر اتساعًا من قياس المقر المُختار. إذا حمَّل متصفح نافذة عرضه المتاحة هي 480px صفحة الويب، فسيكون الشرط (max-width: 600px) محققًا، وبالتالي سيختار المتصفح المقر الذي اتساعه 480px، وسيحمل أيضًا الصورة elva-fairy-480w.jpg لأن قياسها هو الأقرب لقياس المقر، كما إنّ حجم الصورة التي عرضها 800 بكسل هو 128 كيلو بايت، بينما حجم الصورة التي عرضها 480 بكسل هو 63 كيلو بايت ومقدار التوفير سيكون 65 كيلو بايت، وتخيل الآن وجود عدة صورة في الصفحة، كم سيوفر ذلك على مستخدِمي الهاتف المحمول من ناحية حجم بيانات التراسل. ملاحظة: إذا كنت تختبر هذا الأسلوب على متصفح حاسوب مكتبي وأخفق في تحميل الصور الأقل عرضًا عندما تضبط نافذة العرض على أقل عرض ممكن، فيمكنك حينها إلقاء نظرة على قيمة نافذة العرض باستخدام طرفية جافاسكربت بكتابة الشيفرة التالية: document.querySelector('html').clientWidth ملاحظة: تختلف المتصفحات في القيم الدنيا لاتساع نافذة العرض، فلا يمكنك تصغيرها إلى ما دونها، وقد تكون هذه القيم أكثر اتساعًا مما تتوقع، ولكي تختبر ذلك عبر متصفح هاتف محمول، فيمكنك استخدام أدوات مثل الصفحة about:debugging في متصفح فايرفوكس لتفحص الصفحة التي تُحمَّل على الهاتف المحمول باستخدام أدوات مطورِي الويب الخاصة بمتصفحات الحواسب المكتبية، ولتميز الصور التي حمّلها المتصفح عند تحميل الصفحة استخدم أدوات مطورِي ويب مثل نافذة مراقب الشبكة Network Monitor. ستتجاهل المتصفحات القديمة التي لا تدعم الميزات السابقة كل ذلك وتتوجه مباشرةً إلى السمة src لتحمل الصورة التي تشير إليها قيمة هذه السمة. ملاحظة: ستجد داخل العنصر <head> في شيفرة المثال السابق السطر التالي: <meta name="viewport" content="width=device-width"> ملاحظة: تجبر هذه الشيفرة متصفحات الهواتف المحمولة على استخدام نافذة العرض الحقيقية لها لتحميل صفحات ويب، فقد لا تطلعك بعض المتصفحات على الاتساع الحقيقي لنافذة عرضها، و ستحمِّل صفحات تحتاج إلى نافذة عرض أوسع ثم تقلصها، وهذا أمر سلبي من منظور الصور المتجاوبة أو التصميم المتجاوب. تبدل الدقة: الحجم نفسه ودقة مختلفة قد تحاول دعم قيم مختلفة للدقة لتناسب أجهزة متنوعة، لكن النتيجة على الشاشة هي الصورة نفسها بأبعادها الحقيقية، إذ يمكنك في هذه الحالة دفع المتصفح إلى اختيار الصورة ذات الدقة الأنسب باستخدام العنصر srcset مع التوجيه x- دون استخدام العنصر sizes، كما يمكنك الاطلاع مباشرةً على هذا الأسلوب في المثال الموجود على جيت-هاب، كما يمكنك الاطلاع على الشيفرة المصدرية: <img srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x" src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy"> إليك نتيجة التنفيذ: طبّقنا في هذا المثال شيفرة CSS التالية على الصورة كي يصبح اتساع الصورة 320 بكسل على الشاشة، وتُدعى بكسلات CSS أيضًا: img { width: 320px; } لا حاجة في هذه الحالة إلى استخدام السمة sizes، إذ سيحدِّد المتصفح دقة العرض ويستخدِم أفضل صورة تشير إليها السمة srcset، فإذا كان للجهاز الذي يُحمّل الصفحة حدًا معياريًا أو حدًا أدنى لدقة العرض، ومثَّل كل بكسل من بكسلات الجهاز بكسل CSS واحد، فسيحمّل المتصفح الصورة elva-fairy-320w.jpg مطبِّقًا القيمة 1x للتوجيه ولا حاجة لذكر هذه الحالة؛ أما إذا كانت دقة الجهاز أعلى بحيث يمثل كل بكسلين من الجهاز بكسل CSS واحد على سبيل المثال، فسيحمّل المتصفح الصورة elva-fairy-640w.jpg، ولاحظ أنّ حجم الصورة التي عرضها 640 بكسل هو 93 كيلو بايت، بينما حجم الصورة التي عرضها 320 بكسل هو فقط 39 كيلو بايت. مشكلة الرؤية الفنية قلنا بأن هذه المشكلة ستظهر عندما نحاول تغيير الصورة لتلائم مختلف القياسات المستخدَمة لعرضها، ولنفرض مثلًا أنّ صفحة الويب ستعرض صورةً كبيرةً لمنظر طبيعي وسطه شخص على متصفح حاسوب مكتبي، وعندما تُعرض الصورة نفسها على متصفح هاتف محمول، فستتقلص هذه الصورة لتجعل الشخص الموجود في الصورة صغيرًا جدًا ومن الصعب رؤيته، فمن الأفضل إذًا في هذه الحالة اختيار صورة أصغر تركِّز على الشخص، ويسمح لنا العنصر <picture> بإنجاز هذا النوع من الحلول. نلاحظ وجود صورة تحتاج بشدة إلى رؤية فنية مختلفة بالعودة إلى المثال الأصلي غير المتجاوب. <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"> لنصلح الأمر باستخدام العنصر <picture> الذي يمثّل غلافًا لعدة عناصر <source> تؤمِّن مصادر مختلفةً يختار المتصفح أنسبها ويليها العنصر <img>، كما ستبدو شيفرة المثال المتجاوب كما يلي: <picture> <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"> <source media="(min-width: 800px)" srcset="elva-800w.jpg"> <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"> </picture> تحتوي العناصر <source> على السمة media التي تحوي بدورها شروطًا على الوسائط، كما في المثال الأول الذي يشرح السمة srcset، إذ تُعَدّ هذه الشروط اختبارات لاختيار الصورة التي ستعرض، بحيث ستُعرض أول صورة يعيد شرطها القيمة الصحيحة True، فإذا كان اتساع نافذة العرض 799 بكسل في الشيفرة السابقة أو أقل، فسيتحقق الشرط داخل العنصر <source> الأول وستعرض الصورة التي يشير إليها، بينما إذا كان الاتساع هو 800 بكسل أو أكثر، فسيختار المتصفح العنصر الثاني. تحتوي السمة srcset على المسار الذي يقود إلى الصورة، ويمكن لأيّ عنصر <source> امتلاك هذه السمة التي تحتوي على مراجع إلى عدة صور، كما يمتلك هذا العنصر السمة sizes أيضًا، وبالتالي ستتمكن من تقديم عدة صور للمتصفح من خلال العنصر <picture> مع إمكانية تزويده بقيم مختلفة لدقة كل صورة، وفي واقع الأمر لن تضطر إلى استخدام هذا الحل إلا قليلًا. وفي شتى الحالات، لا بدّ من وجود العنصر <img> مع سمتَيه src و alt قبل وسم النهاية <picture/> مباشرةً، وإلا فلن تعرض أية صورة، كما يمثِّل هذا العنصر الحالة الافتراضية التي سيعرضها المتصفح إذا لم يتحقق أيّ شرط من شروط الوسائط إذ تستطيع حذف العنصر <source> الثاني فهو موجود على أساس خطة بديلة في حال لم يدعم المتصفح العنصر <picture>. تسمح لك هذه الشيفرة بعرض الصورة المناسبة على كلتا الشاشتين العريضة والضيقة، كما تعرض الصور التالية: ملاحظة: ينبغي عدم استخدام السمة media إلا في الحالات التي تتطلب رؤية فنية، ولا تضع شروطًا على الوسائط ضمن السمة sizes عندما تستخدِم السمة media. لماذا لا نستخدم CSS وجافاسكربت لحل المشكلة؟ سيحمِّل المتصفح الصور عندما يبدأ بتحميل الصفحة قبل أن تبدأ عملية تحميل وتفسير ملفات تنسيق CSS وملفات جافاسكربت، ولهذه الآلية فوائدها في تقليل زمن تحميل الصفحة، لكنها ستؤثر سلبًا على الصور المتجاوبة التي تستخدِم حلولًا مثل srcset التي تضم قائمةً بمجموعة من الصور، فلن تستطيع مثلًا تحميل العنصر <img> ثم التحقق من أبعاد نافذة العرض مستخدمًا جافاسكربت وتغيّر بعدها الصورة المصدرية إلى النسخة الأصغر آليًا إذا كانت هي الأنسب، وذلك لأنّ المتصفح سينهي تحميل الصورة الأصلية قبل انتهاء هذه العملية وستكون قد حملّت أيضًا الصورة الأصغر وهذا هو الأسواء من وجهة نظر الصور المتجاوبة. استخدام التنسيقات الحديثة للصور تعطي بعض التنسيقات الجديدة للصور مثل WebP و AVIF حجمًا أصغر وجودةً عاليةً في الوقت ذاته، كما زاد دعم المتصفحات لها بصورة واسعة في هذه الفترة. يمكنك توفير الدعم للمتصفحات الأقدم باستخدام العنصر <picture> عن طريق تزويد المتصفح بنوع الصورة من خلال السمة type وسيرفض مباشرةً الأنواع أو التنسيقات غير المدعومة: <picture> <source type="image/svg+xml" srcset="pyramid.svg"> <source type="image/webp" srcset="pyramid.webp"> <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"> </picture> انتبه إلى النقاط التالية: لا تستخدِم السمة media إلا في حال احتجت إلى حل مشكلة الرؤية الفنية. لا يمكنك الإشارة في العنصر <source> إلا إلى صورة من النوع نفسه الذي تحدده السمة type. استخدِم قائمةً تفصل بينها "," عند استخدام srcset و sizes. تطبيق: العمل على صور متجاوبة خاصة بك نطلب إليك في هذا التمرين استخدام رؤية فنية مناسبة لتجهِّز صورتين إحداهما عريضة والأخرى ضيقة باستخدام العنصر <picture> بالإضافة إلى إمكانية تبديل الدقة مستخدمًا السمة srcset: اكتب شيفرة HTML المناسبة للتمرين، كما يمكنك استخدام الملف not-responsive.html على أساس بداية. اعثر على صورة جميلة واسعة مع بعض التفاصيل المميزة، ثم اصنع منها نسخةً مناسبةً للويب باستخدام أيّ محرر صور تراه مناسبًا، واقتطع منها جزءًا يركِّز على تلك التفاصيل المميزة واصنع منه صورةً أخرى (اجعل عرضها 480 بكسل فهو مناسب للتمرين). استخدم العنصر <picture> لإنجاز مبدِّل الصور. أنشئ ملفات صور مختلفة الأبعاد لكنها تعرض الصورة ذاتها. استخدم السمتَين srcset و size لإنجاز مبدّل دقة إما لتقديم صور بالأبعاد نفسها لكن بدقة مختلفة أو بأبعاد مختلفة لتناسب نوافذ عرض مختلفة. خلاصة ناقشنا في هذا المقال نقطتين هامتين عن الصور المتجاوبة: الرؤية الفنية: وهي مشكلة تظهر عندما تريد استخدام صور مجتزأة تركِّز على تفاصيل محددة من صورة أصلية لتلائم التخطيطات المختلفة لصفحة مثل عرض صورة واسعة لمنظر طبيعي على متصفح حاسوب مكتبي ثم اجتزاء صورة أصغر منها تركز على تفاصيل مميزة لعرضها ضمن متصفحات الهواتف المحمولة، ورأينا كيف يُستخدَم العنصر <picture> في حل المشكلة. تبدّل الدقة: وهي مشكلة تظهر عندما تحتاج إلى صور ضيقة كي تعرضها ضمن شاشات ضيقة دون الحاجة إلى صور واسعة مثل تلك التي تعرض على الشاشات الواسعة مثل شاشات الحواسب المكتبية، كما تظهر عندما تريد استخدام صور بالأبعاد ذاتها لكن بدقة مختلفة لكي تعرض عرضًا مناسبًا على الشاشات عالية أو منخفضة الدقة، كما يمكنك استخدام الرسوم الشعاعية مثل SVG أو استخدام السمَتين srcset و size. ترجمة -وبتصرُّف- للمقال Responsive images. اقرأ أيضًا إعداد صور متجاوبة الصور في تصميم صفحات الويب المتجاوب مدخل إلى التصميم المتجاوب والتصميم المتكيف أساسيات تصميم الويب المتجاوب

أهمية البرمجة تنبثق من العصر الذي نعيش فيه حاليًا وهو عصر ما بعد الثورة الرقمية بكل تفاصيله، إذ دخلت الحواسب والأجهزة الذكية والروبوتات جميع مناحي حياتنا من التواصل إلى التسوق إلى التعلم إلى تحليل البيانات وصولًا إلى الروبوتات المقادة عن بعد مثل الروبوتات الجراحية ومسابر الفضاء، وذلك يتطلب عملًا حثيثًا يضطلع به مئات الآلاف من التقنيين والمبرمجين لتأمين الوسيلة الأفضل للتخاطب بين البشر وهذه التجهيزات حتى تؤدي وظيفتها بالطريقة الأفضل والأكثر أمانًا لتبقى التقنيات الرقمية على قدر كبير من الموثوقية. تتجلى أهمية البرمجة في بناء واجهات التخاطب والتحكم بتلك التجهيزات الرقمية وإدارة منظوماتها سواء في الموقع الفيزيائي نفسه أو عن بعد بالاستفادة من تقنيات الويب والاتصال مع قواعد البيانات وتحليلها واستخلاص الرؤى واتخاذ القرارات. ما هي البرمجة؟ البرمجة عمومًا هي تلقين المتلقي ما ينبغي فعله لأداء وظيفة ما وفق نهج يفهمه. فإن عوّدت نفسك على الاستيقاظ باكرًا في نفس التوقيت لتشرب قهوتك الصباحية سيجوز لنا القول أنك برمجت نفسك على هذا الأمر، وعندما تضبط منبهك للاستيقاظ على الساعة الخامسة فستكون قد برمجت منبهك لأداء هذه المهمة. وينسحب الأمر إلى مجال الآلات لتصبح عملية تلقينها كيفية التصرف هي المقصود غالبًا بعبارة برمجة، سواء أكانت هذه الآلات حواسيب أو الهواتف الذكية أو روبوتات. فالبرمجة وفقًا للمصطلح التقني الشائع هي كتابة مجموعة متسلسلة من التعليمات التي تفهمها الآلة لتؤدي عملًا بسيطًا أو مجموعة معقدة من الأعمال باستخدام لغة تفهمها الآلة. تُدعى تلك اللغات التي تفهمها الآلة بلغات البرمجة Programming Languages، ونظرًا لأهمية البرمجة في تشغيل واستثمار الحواسيب والتجهيزات القابلة للبرمجة، تتعدد لغات البرمجة المستخدمة وفقًا للغاية من البرامج وطبيعة الجهاز الذي يُبرمج، لهذا تجد كمًا كبيرًا من لغات البرمجة العامة والمخصصة لإنجاز البرامج المطلوبة بأفضل أداء. تُستخدم الحواسب عادة في كتابة البرمجيات ثم تُنقل إلى التجهيزات التي تحتاجها مثل الحواسب الأخرى أو الهواتف أو الروبوتات وغيرها من التجهيزات الذكية. ما هي أهمية البرمجة؟ تتجلى أهمية البرمجة في تطبيقاتها المتنوعة في شتى المجالات التقنية، إذ تشكل العمود الفقري لكل أشكال التطور المبني على تفاعل الإنسان والآلة الحالي والمستقبلي. من أهم المجالات التي تعتمد على البرمجيات نجد: توطين البيانات وإدارتها. التعليم الإلكتروني والتعلم عن بعد. التجارة الإلكترونية وريادة الأعمال. بناء الأنظمة الخبيرة وأنظمة اتخاذ القرار. التصميم الرسومي ومعالجة الصور. تحليل اللغات الطبيعية. برمجة الروبوتات. أهمية البرمجة في توطين البيانات وإدارتها يُقصد بتوطين البيانات تخزين وتأمين البيانات المحلية الوطنية أو القومية لجميع أشكال الإحصائيات الإنتاجية والديموغرافية لأغراض التوثيق والتحليل وبناء استراتيجيات الدولة المستقبلية على أساس علمي ومنهجي صحيح. تأتي أهمية البرمجة في مجال توطين البيانات في بناء برمجيات قادرة على تخزين وتصنيف وتحليل مختلف أنواع الإحصائيات الحيوية إضافة إلى تطوير برمجيات تحليل بيانات موثوقة قادرة على توفير رؤية دقيقة لما سيؤول إليه الوضع في المستقبل بناء على نتائج التحليل. صحيح أن سوق البرمجيات العالمي مكتظ بكافة أنواع البرمجيات لتنفيذ أية مهمة تقريبًا، إلا أن الاعتبارات الأمنية للحكومات تجعل من أولى الأولويات وخاصة في الدول المتقدمة تقنيًا بناء برمجيات خاصة بها لإدارة مختلف شؤونها، وهذا ما نراه في الواقع عالميًا. أهمية البرمجة في مجال التعليم الإلكتروني والتعلم عن بعد فرض الواقع التقني الجديد تغييرًا جذريًا في مختلف المفاهيم ومنها مفهوم التعلم، إذ مهد تطور الحاسوب والتقنيات المرتبطة به إلى ظهور منصات تعلم إلكترونية لا يُضطر فيها المتعلم إلى الإنتقال إلى المدرسة أو المعهد أو الجامعة لمتابعة دراسته في مواعيد محدد وضمن خطة دراسية صارمة، بل يتابع دراسته من خلال الاتصال مع منصة التعليم الإلكتروني من خلال شبكة الإنترنت أو الشبكات المحلية وفق البرنامج الزمني والأوقات التي تناسبه مما يعطي حرية كبيرة في التحصيل العلمي دون التعارض مع أي عمل آخر يمتهنه المتعلم. لقد سهّلت البرمجة وجود مثل هذه المنصات، فكتابة برمجيات متخصصة في إدارة كل متعلم لبرنامجه الزمني وإدارة المنصة لشؤون متعلميها الدراسية والمالية بفعالية وإدارة طريقة التواصل بين المتعلم والمعلّم ومصادر التعليم. إن نجاح المنصات التعليمية الأكثر شهرة على الصعيد العربي والعالمي مثل أكاديمية حسوب تأتي من التقنيات البرمجية التي تستخدمها لتسهيل التواصل مع المتعلمين وتقديم المعلومة بأفضل شكل ممكن. أهمية البرمجة في مجال التجارة الإلكترونية وريادة الأعمال لا شك بأن المتاجر الإلكترونية على الرغم من أنها في مرحلة النمو حاليًا في المنطقة العربية من أكثر مجالات العمل جذبًا للراغبين في الانطلاق في عالم التجارة الإلكترونية نظرًا لمرونتها العالية وسهولة إدارتها. وتظهر أهمية البرمجة في هذا المجال في تصميم وبناء متاجر إلكترونية جذابة يسهل للعملاء استخدامها وتستخدم في هذا الصدد تقنيات الويب المختلفة التي تعتمد أساسًا على شبكة الإنترنت. إضافة إلى المتاجر الإلكترونية، تظهر أهمية البرمجة في تصميم وبرمجة مواقع الويب أو المواقع الإلكترونية التي تقدم دفعًا كبيرًا للأعمال الناشئة وتروّج لعلاماتها التجارية. إن اختيار اللغة البرمجية المناسبة والتقنيات المناسبة لتحقيق المطلوب من الموقع أمر حيوي جدًا في نجاحه واستمراريته. أهمية البرمجيات في مجال اتخاذ القرار والأنظمة الخبيرة إن اتخاذ قرار معين يتطلب دراسة مختلف الجوانب التي تحيط بظروف اتخاذه والغاية منه. لكن عندما تكون القرارات متعلقة بعدد كبير من العوامل متفاوتة التأثير سيجعل المسألة برمتها أكثر تعقيدًا وحساسية. هنا تأتي دور البرمجة في وضع تنفيذ خوارزميات قادرة على التعامل مع مختلف العوامل المؤثرة في اتخاذ قرار معين بطريقة تشابه طريقة تفكير العقل البشري لكن بسرعة أكبر بكثير وبالاستناد إلى قواعد معرفية ضخمة جدًا قد لا تمتلكها منظومة اتخاذ القرار البشرية مهما كان كم الخبرة التي يحملها أعضاء هذه المنظومة. تُدعى هذه المنظومات البرمجية بالأنظمة الخبيرة وتظهر أهمية البرمجة في هذا المجال في تأمين القواعد المعرفية اللازمة عن طريق برمجيات تحليل البيانات وبناء محرّكات تحليل منطق اتخاذ القرار. أهمية البرمجة في التصميم الرسومي ومعالجة الصور تُعد التصميمات الفنية والصور المتحركة والتحريك السينمائي من أهم التقنيات المستخدمة في الترويج الإعلاني والتسويق وصناعة السينما. ولا يخفى على أحد الدور الكبير الذي لعبته الحواسيب في تطوير هذه الصناعة التي بلغت مستويات رائعة جدًا من الواقعية. ولم يكن لهذا الصناعة الإزدهار لولا تقنيات البرمجة الذي وظفت علوم الرياضيات والفيزياء والحركة في وضع خوارزميات غاية في الدقة للفصل بين الصور على شكل طبقات متراكمة لإنتاج صورة كلية وتحريك هذه الصور وفق أنماط مختلفة لإنتاج المشهد السينمائي المطلوب. تظهر أهمية البرمجة في وضع خوارزميات الحركة ومعالجة الصور موضع التنفيذ من قبل الحواسب وبناء برامج تعتمد على هذه الخوارزميات لإنتاج العمل الفني المطلوب. أهمية البرمجة في مجال تحليل اللغات الطبيعية يُقصد بتحليل اللغات الطبيعية العملية التي يحلل فيها الحاسوب أو الأجهزة الذكية كلام البشر ويفهم محتواه وينفذ الأوامر مباشرة. فعندما تنقر على أيقونة الأوامر الصوتية في جوجل وتقول "Hi Google" يستعد البرنامج لفهم كلامك والبحث عن مضمونه، وهذا تطور رائع جدًا في مضمار التواصل مع الآلة. ولم تكن هذه التقنية لتزدهر لولا البرمجيات وخوارزميات التعلم التي تقف خلفها والتي تسعى الشركات إلى تطويرها باستمرار لدعم تحليل وفهم مختلف اللغات المحكية وتحويلها إلى نصوص مكتوبة أو لتسهيل التعامل مع الآلات عمومًا. أهمية البرمجة في مجال الروبوتات لا يخفى على أحد الدور الكبير الذي تلعبه الروبوتات في كافة المجالات من التجهيزات المنزلية الذكية إلى المصانع المقادة بالروبوتات إلى الطيران المسير إلى التحكم بمركبات روبوتية في الفضاء الخارجي. تعتمد برمجة الروبوتات أساسًا على لغات برمجة عامة الأغراض مثل بايثون أو جافا ثم تبنى مكتبات خاصة أو مجموعة أدوات باستخدام هذه اللغات لتنفيذ إجرائيات برمجية تتحكم بمكونات الروبوت على صعيد الحركة أو تحسس البيئة المحيطة أو عمليات اتخاذ قرار. وكلما كان البرنامج أفضل من ناحية الشيفرة أي من ناحية إنجاز مهامه بأبسط وأدق شكل كلما كان تجاوب الروبوت متناسبًا مع طبيعة العمل الذي يوكل إليه. وهنا تظهر أهمية البرمجة في جعل برمجيات الروبوتات مثالية. فوائد البرمجة تتغير نظرتك إلى أهمية البرمجة وفوائدها وفقًا لموقعك منها، فلأصحاب المشاريع التي تنتج البرمجيات رؤاهم ولأصحاب المشاريع التي تستخدم البرمجيات رؤاهم وللمبرمجين أنفسهم رؤاهم الخاصة. لهذا سنحاول أن نتحدث بداية عن فوائد البرمجة عمومًا ثم تفصيل هذه الفوائد وفقًا للتوجهات المختلفة للمهتمين. من أهم فوائد البرمجة نجد: البرمجيات صناعة متقدمة ومزدهرة ويزداد سوقها اتساعًا ومنافسةً فهي مجال مناسب للاستثمار. تساعد على تطوير الأعمال على كافة الأصعدة من خلال إيجاد منظومات إدارة وتحليل قوّية وفعّالة. إيجاد الحلول التقنية للكثير من المشاكل الصناعية والاقتصادية من خلال تقنيات الذكاء الصنعي دون المخاطرة بتطبيق حلول غير مضمونة. يزداد الطلب كثيرًا على المبرمجين من مختلف الاختصاصات، مما يجعل البرمجة مهنة مميزة على صعيد تطوير المسار المهني للمهتمين كما أن مردودها المهني مرتفع نسبيًا. فائدة البرمجة لشركات إنتاج البرمجيات إن البرمجيات صناعة رائجة جدًا ومهمة جدًا لتطوير شتى المناحي التقنية، لذلك تُعنى الشركات المنتجة للبرمجيات بتطوير منتجاتها وفق منهجيات واضحة وصارمة لضمان نجاحها. لهذا فإن الفائدة الرئيسية للبرمجة وفقًا لوجهة نظر الشركات المنتجة قائم على ركيزتين اثنتين: الأولى الحصول دومًا على منتجات فريد ومطلوبة لضمان التفوق في مجالات محددة، والثاني بناء منتج قابل للاستمرار والمنافسة في حال وجود منافسين وهذه هي الحال دومًا في أية صناعة. وهكذا تجد مايكروسوفت وآبل مثلًا مهتمتين بتطوير لغات برمجية تخدم الهدفين السابقين، بينما تهتم شركات اخرى مثل أدوبي بإنتاج برمجيات التصميم بمساعدة الكمبيوتر وهكذا. فائدة البرمجة لأصحاب المشاريع يعتمد أصحاب المشاريع على البرمجة لعدة غايات أساسية: إدارة وتنظيم الأعمال الإدارية والمالية من خلال تطوير برمجيات مخصصة أو شراء حزم برمجية جاهزة. تصميم وبناء مواقع ويب مخصصة للترويج عن الشركة أو العمل، وتُعد هذه المواقع الواجهة الرئيسية للشركة في العالم الافتراضي. إنجاز منظومات دعم القرار بالاعتماد على الأنظمة الخبيرة. إيجاد الحلول للكثير من المشاكل التقنية والصناعية في المصانع والمؤسسات الإنتاجية، من خلال تطوير أو استخدام برمجيات لمحاكاة الحلول المفترضة والتأكد من صحتها وسلامتها قبل تطبيقها الفعلي وبالتالي تخفيف الأعباء المادية وتجنب توقف العمل في حال فشل الحل. فائدة البرمجة لمن يرغبون في تطوير أنفسهم البرمجة مجال عمل واسع ومتشعب ومن أكثر مجالات العمل ازدهارًا على المدى البعيد وأكثرها طلبًا وأجورها مرتفعة نسبيًا. تساعد على الفهم الأعمق للآلات وطبيعة عملها وكيفية التعامل معها. تساعد البرمجة في تطوير المسيرة المهنية للعاملين في مختلف المجالات لأننا نعيش عصر التكنولوجيا والآلات الذكية. تقوّي القدرات التحليلية وتنمي الإبداع عند المتعلم. تزيد من من مهارة المتعلم في التفكير المنطقي وإيجاد الحلول للمشاكل التي يواجهها بطريقة منهجية. أهم لغات البرمجة تتنوع لغات البرمجة وتختلف تبعًا لتطور المسارات التي تحتاج إلى البرمجة واختلافها، إذ تجد لغات مخصصة لبرمجة وتحليل البيانات ولغات مخصصة لتطوير مواقع وتطبيقات الويب وأخرى لتطوير تطبيقات الهواتف الذكية وأخرى لبرمجة الروبوتات، كما ستجد لغات برمجة عامة الأغراض تصلح تقريبًا لبرمجة أية وظائف على مختلف الأجهزة القابلة للبرمجة. نستعرض تاليًا أهم لغات البرمجة وفقًا لمجالات الاستخدام. لغة Java لغة جافا Java هي لغة عامة الأغراض تُستخدم لبرمجة مختلف أنواع التطبيقات. تُعد هذه اللغة من أكثر اللغات انتشارًا وقد بُنيت خصيصًا لتكون عالية المحمولية، أي يمكن أن تكتب شيفرة لتنفيذ مهمة ما مرة واحدة، ثم تنقل هذه الشيفرة إلى أية تجهيزات قادرة على تفسيرها وتنفيذها سواء كانت حواسب أو هواتف ذكية. لغة بايثون Python يُصنف الكثيرون لغة بايثون على أنها أكثر لغات العالم سهولة من ناحية كتابة الشيفرة والاستخدام ولا يعود سبب انتشارها الكبير إلى سهولتها وحسب، بل للكم الهائل من مكتبات الشيفرة الجاهزة التي تساعد المبرمج على إنجاز مختلف أنواع الوظائف بكل سهولة ويسر. تُعد بايثون لغة عامة الأغراض وتُستخدم في كتابة تطبيقات سطح المكتب وتطبيقات الويب وبرمجة الروبوتات والأنظمة المدمجة. دورة تطوير التطبيقات باستخدام لغة Python احترف تطوير التطبيقات مع أكاديمية حسوب والتحق بسوق العمل فور انتهائك من الدورة اشترك الآن لغة ++C لغة C++‎ هي لغة عامة الأغراض يعتمد عليها الكثير من مبرمجي التطبيقات ومطوري لغات البرمجة والأنظمة المدمجة في كتابة برامجهم، فهي لغة قوية تسمح بالتفاعل المنخفض المستوى من العتاد الصلب وتؤمن أداءً عاليًا شديد الكفاءة في زمن التنفيذ. وعلى الرغم من صعوبة إنجاز بعض الوظائف بهذه اللغة موازنة بلغة بايثون مثلًا، لكن أداءها المضمون في زمن التشغيل جعلها من أكثر اللغات استخدامًا. لغة جافاسكربت JavaScript لغة جافاسكربت هي لغة برمجة قوية وخفيفة تستخدم لبناء تطبيقات ومواقع الويب بالكامل، كما يمكن استخدامها ضمن بعض إطارات العمل لكتابة تطبيقات كاملة لسطح المكتب. دورة تطوير التطبيقات باستخدام لغة JavaScript تعلم البرمجة بلغة جافا سكريبت انطلاقًا من أبسط المفاهيم وحتى بناء تطبيقات حقيقية. اشترك الآن لغة روبي Ruby لغة روبي هي لغة عامة الأغراض حديثة الانتشار تركز على البساطة والإنتاجية، وقد اكتسبت شهرتها من أناقتها ووضوح صياغتها وقوتها. إذ يمكنك أخذ فكرة أولية عن الوظيفة التي تفعلها شيفرة روبي دون أن يكون لك خلفية مسبقة عن هذه اللغة وقد استفادت هذه اللغة من الكثير من المزايا المتقدمة للغات اخرى مثل Perl و Smaltalk. تعدُّ روبي لغةً برمجيةً عامة الغرض وتستخدم في بناء البرامج المكتبية، وتطبيقات الويب، وخوادم الويب، وأدوات النظام، وفي قواعد البيانات وغيرها. لغة PHP صُممت لغة PHP لبناء مواقع وتطبيقات ويب عالية الأداء والكفاءة. وتعتبر بلا منازع من أشهر اللغات التي تُستخدم في تطوير مواقع الويب. إذ تستخدم في بناء صفحات الويب وتوليد المحتوى الديناميكي للمواقع والوصول إلى الملفات الموجودة على الخوادم والعمل عليها والوصول إلى قواعد البيانات والتعامل معها والتحكم بسماحيات وصول المستخدم وتشفير البيانات. ومع وجود كل هذه الميزات يعدها الكثيرون لغةً سهلة التعلم. دورة تطوير تطبيقات الويب باستخدام لغة PHP احترف تطوير النظم الخلفية وتطبيقات الويب من الألف إلى الياء دون الحاجة لخبرة برمجية مسبقة اشترك الآن لغة كوتلن Kotlin لغة كوتلن هي لغة قوية حديثة العهد نسبيًا طورتها جوجل مستفيدة من لغتي جافا وجافاسكربت. صُممت اللغة أساسًا لتطوير تطبيقات ويب وتطبيقات نظام التشغيل Android الذي يُستخدم في الهواتف الذكية، كما بدأت مؤخرًا بدعم كتابة تطبيقات مخصصة لأنظمة تشغيل مدمجة أخرى مثل IOS. لغة سويفت Swift لغة سويفت هي لغة من تصميم شركة آبل استبدلت بها اللغة الرسمية لها Objective C التي تفتقد الكثير من ميزات اللغات الحديثة. ظهرت هذه اللغة عام 2014 وكانت مخصصة لكتابة برامج خاصة بأنظمة تشغيل آبل مثل نظام التشغيل IOS و macOS لكنها بدأت بعد ذلك بدعم أنظمة تشغيل أخرى مثل لينكس في أواخر 2015 ثم ويندوز مؤخرًا ابتداء من نسختها 5.3 عام 2020. خاتمة لقد ولجنا بلا شك عصر الآلات الذكية وسيبدأ قريبًا (إن لم تكن قد بدأ بالفعل) تدريس لغات البرمجة كغيرها من اللغات الطبيعية في المناهج الدراسية وفي مراحل مبكرة. لأن اعتمادنا على الآلات يزداد بشدة ومن الضروري تعلم أساسيات التخاطب معها لضمان استثمارها بالشكل الأمثل، فأهمية البرمجة حاليًا تماثل أهمية أي لغة أجنبية نتعلمها. لهذا آثرنا في هذا المقال عرض أهمية البرمجة ومجالات استخدامها وفق منحىً اطلاعي وليس تعلميًا حتى يكوّن المهتمون بالبرمجة فكرة عامة عن مفهوم البرمجة وتطبيقاتها وفوائدها سواءً كانوا من أصحاب المشاريع أو الراغبين في تعلم البرمجة لتطوير مسيرتهم المهنية. اقرأ أيضًا تعلم البرمجة دليلك الشامل إلى لغات البرمجة دليك الشامل إلى: لغات برمجة الألعاب تعلم PHP