البحث في الموقع

لعد تعرّفنا في درس سابق على كيفية إدراج الصور في مستندات وورد، كيفية اقتطاع جزء منها، وكيفية التحكّم في أبعادها. كما تعلّما كيف نضغط الصور لتقليل أحجامها عند حفظ المستند. سنغطّي في هذا الدرس كيفية استخدام الأوامر والخيارات الأخرى في تبويب تنسيق Format السياقي لنتحكّم في أنماط الصور وتغيير موضعها ومحاذاتها مع النص ومع الورقة نفسها. تنسيق الصورة يوفّر وورد مجموعة من الأنماط الجاهزة والخيارات لتعديل مظهر الصور، وستجد نفس هذه الخيارات على برامج أوفيس الأخرى عند إدراج الصور عليها، مثل اكسل وبوربوينت. لتعديل نمط الصورة نقوم بتحديدها أولًا لإظهار تبويب تنسيق، ثم نفتح معرض الأنماط الجاهزة من مجموعة Picture Styles: بمجرّد تمرير مؤشر الفأرة فوق النمط، سيُطبّق على الصورة بشكل مباشرة كمعاينة. وكما نلاحظ توجد العديد من الأنماط المضمّنة، منها بحدود بسيطة، وأخرى ذات انعكاس، وأخرى بإطارات بيضوية أو ناعمة الحواف. ننقر على النمط لتطبيقه على الصورة. ولا ينتهي تنسيق الصورة باختيار أحد الأنماط، إذ توجد مجموعة خيارات أخرى بإمكاننا استخدامها لتخصيص كل نمط حسب الرغبة. فمن قائمة Picture Border يمكننا تغيير لون حد الصورة، سمكه، ونمطه: تختلف الألوان الافتراضية باختلاف ألوان نُسق Theme المستند، وبإمكاننا دائما الوصول إلى المزيد من الألوان بالنقر على More Outline Color. وكذلك نستطيع تطبيق تأثيرات أخرى على الصورة، كالظل Shadow، التوهّج Glow، الانعكاس Reflection، أو استدارة ثلاثية الأبعاد 3D Rotation من قائمة Picture Effect: ويمكن أن نحصل على تأثيرات رائعة عندما ندمج أكثر من تأثير معًا. على سبيل المثال عندما نطبّق التأثير Cool Slant من مجموعة Bevel والتأثير Prospective Contrasting Left من مجموعة 3D Rotation: سنحصل على تأثير جميل وكأنّ للصورة بعد ثالث: وللتحكّم أكثر في خيارات كل تأثير على حدة، نفتح جزء تنسيق الصورة ونتلاعب في القيم إلى أن نحصل على التأثير المرغوب. سنقوم هنا مثلا بزيادة الارتفاع Height من قسم 3-D Format> Top Bevel إلى 20 pt لإعطاء الصورة عمق أكبر: وهكذا يمكن استخدام الأنماط الجاهزة كنقطة بداية تنسيق الصورة ومن ثم التعديل عليها، أو استخدام الخيارات المتوفرة في قائمة Picture Effect والتلاعب بإعداداتها من جزء تنسيق الصورة لخلق التأثير المرغوب. أما قائمة تخطيط الصورة Picture Layout فيمكننا استخدامها لتحويل الصورة إلى عنصر SmartArt بشكل مباشر وتسهيل ترتيبها وإضافة التسميات التوضيحية لها: عند تطبيق أحد الخيارات المتاحة، سنُلاحظ ظهور تبويب تصميم Design السياقي الذي يحتوي على مجموعة خيارات مفيدة لتصميم SmartArt وتخصيصه: لننتقل الآن إلى مجموعة Adjust التي تحتوي على المزيد من الأوامر لتعديل مظهر الصورة. من قائمة تصحيحات Corrections وبالتحديد من مجموعة Soften/Sharpen يمكننا أن نجعل الصورة مموّهة أكثر أو ذات تفاصيل واضحة أكثر بالنقر على درجة النعومة/الحدّة المرغوبة: أما من مجموعة Brightness/Contrast فيمكننا التحكّم في إضاءة الصورة ودرجة تباين ألوانها: بالطبع يكون وقع هذه التأثيرات مختلفًا من صورة إلى أخرى. على سبيل المثال، قد تكون ألوان الصورة غامقة وتحتاج إلى إضاءة لتفتيحها، في هذه الحالة يمكننا استخدام خيار السطوع 20% أو أكثر، لكن إذا كانت ألوان الصورة فاتحة من الأصل، في هذه الحالة سيؤدي تطبيق تأثير السطوع إلى تشويه منظر الصورة. إذًا، كل ما علينا فعله هو تجربة مختلف الخيارات للحصول على المظهر المطلوب من قائمة Color يمكننا التحكّم ببعض خصائص ألوان الصورة مثل التشبّع Saturation ودرجة اللون Color Tone (أو درجة حرارة اللون). إذ يمكننا أن نجعل شدّة ألوان الصورة عالية جدًا أو منخفضة جدًا. كما يمكننا جعل الصورة ذات ألوان دافئة أو باردة: أما مجموعة خيارات إعادة التلوين فيمكننا استخدامها لجعل الصورة بلون مختلف تمامًا عن ألوانها الأصلية. ويمكننا الاستفادة من هذه الخيارات لجعل ألوان الصورة ملائمة لبقية عناصر المستند. ويظهر تأثيرها جليًا على العناصر الجرافيكية ذات الألوان المصمتة مثل القصاصات الفنية: أمّا الخيارات في قائمة Artistic Effects فيمكننا استخدامها لتطبيق تأثيرات لجعل الصورة ذات مظهر بلاستيكي، أو لجعلها وكأنّها مرسومة بألوان مائية، أو غيرها من الخيارات. وربّنا ستجد هذه الخيارات مألوفة إذا اعتدت العمل على برنامج فوتوشوب: وكما قلنا سابقًا، يمكن أن تكون هذه التأثيرات ملائمة لصورة معيّنة، وغير ملائمة لأخرى، حسب نوع الصورة ودرجة ألوانها وإضاءتها. إزالة أجزاء من الصورة من الأدوات الجيّدة التي يوفرها ميكروسوفت وورد هي Remove Background التي تُستخدم لإزالة الأجزاء غير المرغوبة من الصورة تلقائيًا. على سبيل المثال نريد إزالة خلفية الصورة أدناه ونحتفظ بالزهرة فقط: سنحدد الصورة وننقر على Remove Background من تبويب تنسيق السياقي: ستتم إحاطة الصورة بإطار ذي مقابض بالإضافة إلى تظليل بعض الأجزاء باللون البنفسجي، وهذه هي الأجزاء التي سيتم حذفها من الصورة. ويعتمد تظليل هذه الأجزاء على تباين ألوانها مع بقية أجزاء الصورة: سنستخدم المقابض لتكبير الإطار ليحتوي صورة الزهرة بأكملها. وكما نلاحظ في الصورة أدناه، ما يزال هناك جزء صغير على يمين الزهرة لا نرغب في الاحتفاظ به: في هذه الحالة ننقر على الأداة Mark Area to Remove ونستخدم القلم لتأشير الأجزاء التي نريد حذفها: وبنفس الطريقة يمكننا استخدام الأداة Mark Area to Keep لتأشير الأجزاء التي نريد الاحتفاظ بها إذا قام وورد بتظليل تلك الأجزاء باللون البنفسجي. بعد الانتهاء ننقر على زر Keep Changes: بالطبع لن تكون عملية القص مثالية جدًا، لكنّها ما تزال أداة مفيدة في حالات معيّنة وتساعد على إزالة الأجزاء غير المرغوبة بسرعة وسهولة: تعديل موضع الصورة ومحاذاتها في تبويب تنسيق نفسه، وبالتحديد في مجموعة Arrange توجد الأوامر التي تُستخدم للتحكم في موضع الصورة في الورقة ومحاذاتها بالنسبة للهامش أو الورقة، بالإضافة إلى طريقة توزيع النص أو التفافه حول الصورة. من قائمة Position يمكننا اختيار الموضع الذي نريد أن تظهر فيه الصورة على الورقة، سواء كان في الوسط، أعلى اليمين، في وسط اليسار أو غيرها من الخيارات. علمًا أنّه سيتم تغيير التفاف النص حول الصورة تلقائيًا حسب ما يتناسب وموضعها: ومن قائمة Text Wrap نختار الطريقة التي يتوزّع فيها النص حول الصورة. المثال أدناه يوضّح بعض طرق التفاف النص، ويعتمد اختيارنا لإحدى الطرق على التفضيل الشخصي وحسب ما يلائم تنسيق المستند: أمّا قائمة Align فنستخدمها لتحديد طريقة محاذاة حدود الصورة مع هوامش الورقة الجانبية أو العلوية/السفلية Align to Margin. أمّا إذا رغبنا في أن تتم المحاذاة مع حدود الصفحة، فنؤشر الخيار Align to Page ثم نختار نوع المحاذاة: الصورة أدناه توضّح الفرق بين المحاذاة إلى اليمين مع هوامش الصفحة والمحاذاة إلى اليمين مع حدود الصفحة: الخياران Distribute Horizontally وDistribute Vertically يُستخدمان لتوزيع المسافة بين الصورة بصورة متساوية أفقيًا أو عموديًا على التوالي، وهذا في حال قمنا بإدراج أكثر من صورة. نحدد جميع الصور بالضغط على مفتاح CTRL أثناء التحديد، ثم ننقر على Distribute Horizontally إذا كانت الصورة موضوعة على مسار أفقي أو Distribute Vertically إذا كانت موضوعة على مسار عمودي: تدوير الصور لتدوير الصورة 90 درجة باتجاه اليمين أو اليسار، ننقر على قائمة Rotate ونختار Rotate Right 90 أو Rotate Left 90: أمّا إذا رغبنا في تدويرها بزاوية محدّدة، ننقر على More Rotation Options ثم ندخل الزاوية المرغوبة في حقل Rotation: كما بإمكاننا قلب الصورة حول المحور الأفقي أو المحور العمودي بتحديد أحد الخيارين Flip Horizontal أو Flip Vertical: خاتمة لقد تعلّمنا في هذا الدرس مختلف الأوامر والخيارات التي يوفّرها وورد لتحسين مظهر الصور وجعلها متناسقة أكثر مع نُسق المستند. كما تعرّفنا على كيفية محاذاتها وموضعتها لتصبح ملائمة لتخطيط المستند. وبالرغم من أننا استخدمنا الخيارات الافتراضية المضمّنة في كل قائمة، إلّا أنّه يمكننا أن نذهب إلى حد أبعد ونخصّص هذه الخيارات يدويًا باستخدام جزء تنسيق الصورة (كما فعلنا مع الصورة المجسّمة) ومربع الحوار Layout (كما فعلنا عند تدوير الصورة).

إنّ قيامك بتحريك العناصر داخل إطار العمل في برنامج فوتوشوب بشكل يدوي لن يُمَكّنَك من تحقيق المحاذاة المطابِقة تماماً للمواضع الرئيسية كالمنتصف تماماً أو أقصى يمين الإطار على سبيل المثال، فهناك طرق سهلة وطرق صعبة للقيام بذلك، وفي هذا الدرس سأعلّمكم كيفية تحقيق المحاذاة المثالية بأبسط الطرق وأسهلها. هذا الدرس الثالث من سلسلة نصائح وحيل فوتوشوب، التي سنتعلم من خلالها العديد من الحيل والأدوات عند التصميم ببرنامج فوتوشوب بالإضافة إلى مجموعة من النصائح حول الإستخدام الأمثل للبرنامج. لنبدأ أولاً بفتح صورة خلفية للعمل: ثم لنكتب بأداة النص (Text tool (T أي شيء تريده أو بإمكاننا إدراج أي صورة أو شعار صغير داخل العمل وسيكون أيٌ مما ذكرت في طبقة جديدة بطبيعة الحال: أختر أداة التحديد المستطيل (Rectangular Marquee Tool (M ثم اضغط الاختصار Ctrl+A (أو Cmd+A) لتحديد كامل مساحة العمل: ثم اختر أداة التحريك (Move Tool (V وسيظهر صندوق أدوات هذه الأداة في الأعلى: والآن بإمكانك اختيار جهة المحاذاة من هذه الخيارات المتاحة هنا فإما أن تختار المحاذاة الأفقية لليمين أو اليسار أو الوسط وكذلك الأمر ذاته بالنسبة للمحاذاة العمودية: حدد المحاذاة الوسطى للمحور الأفقي والعمودي وسيكون العنصر في وسط العمل تماماً. يمكنك تجربة بقية أنواع المحاذاة وستكون النتيجة مثالية وسهلة بدون تعقيدات.

في هذا الدّرس من سلسلة تعلّم CSS، سنشرح كيف يمكن استخدام CSS للتحكّم بالمساحة الّتي تحتلّها العناصر عندما تُعرض في الصّفحة، وسنتدرّب على ذلك بتغيير المساحة وإضافة بعض القواعد الّتي تؤثر على هيئة العناصر. فهرس السلسلة: مدخل إلى أوراق الأنماط المتتالية (CSS). آلية عمل تعليمات CSS داخل المتصفحات. المحددات (Selectors) في CSS. كيفية كتابة تعليمات CSS يسهل قراءتها. تنسيق نصوص صفحات الويب باستخدام CSS. التعامل مع الألوان في CSS. إضافة محتوى إلى صفحة ويب باستخدام CSS. تنسيق القوائم (Lists) في CSS. تعرف على الصناديق (Boxes) في CSS. (هذا الدرس) رصف العناصر (Layout) في CSS. الجداول (Tables) في CSS. التعامل مع أجهزة العرض المختلفة والمطبوعات في CSS. الصناديق (Boxes) عندما يعرض متصفّح عنصرًا، فإنّ هذا العنصر يحتلّ مساحة معيّنة من الصّفحة، وتتكوّن هذه المساحة من أربعة أجزاء. في وسط المساحة هناك جزء يحتاجه العنصر لعرض محتواه، وحوله مساحة نُسمّيها الحشوة (padding) وتحيط بها الحدود (border)، وحول هذه الأخيرة نجد الحوافّ (margin) الّتي تفصل العنصر عمّا يجاوره من العناصر. يظهر اللون الرمادي الفاتح أجزاء التّخطيط: هذا ما تراه في المتصفّح: توزع اللون تكون الحشوة دومًا من لون خلفيّة العنصر، فعندما يُطبّق لون الخلفيّة على العنصر، فإنّك ستشاهد العنصر وحشوته يكتسبان اللون نفسه، أمّا الحوافّ فهي شافّة دومًا. للعنصر خلفيّة خضراء: هذا ما تراه في المتصفّح: الحدود يمكن استخدام الحدود لتزيين العناصر بخطوط أو صناديق. لتعيين الخطوط ذاتها حول كامل العنصر، استخدم الخاصّة border. عيّن العرض (عادة بالبكسل للعرض على الشّاشات)، والتنسيق واللّون. فيما يلي التنسيقات المُتاحة: يمكن أيضًا تعيين التنسيق إلى none أو hidden للنّص صراحة على إزالته، أو تعيينه إلى transparent لجعله غير مرئيّ رغم شغله للمساحة المخصّصة له. لتعيين الحدود لكلّ جانب على حدة، استخدم الخصائص border-top و border-right و border-bottom و border-left. يمكن استخدام إحدى الخواص لتعيين الحدّ على الجانب الموافق فقط، أو استخدامها معًا لتعيين حدود مختلفة التنسيق على الجوانب المختلفة. مثال هذه القاعدة تحدّد لون خلفيّة العناوين وتنسيق حدودها العلويّة: h3 { border-top: 4px solid #7c7; /* mid green */ background-color: #efe; /* pale green */ color: #050; /* dark green */ } هكذا تبدو النّتيجة: هذه القاعدة تجعل الصّور أسهل تمييزًا بإحاطتها بحدود رماديّة: img {border: 2px solid #ccc;} النّتيجة: الحواف والحشوات استخدم الحوافّ والحشوات للتأثير على مواضع العناصر وخلق مساحة حولها. استخدم الخاصّة margin أو padding لتعيين عرض الحوافّ والحشوات (على التّرتيب). إن قمت بتعيين قيمة مفردة للخاصّة، فإنّ هذا يٌطبّق على كلّ جوانب العنصر (فوق، يمين، تحت، يسار). إن قمت بتعيين قيمتين للخاصّة، فإنّ الأولى تطبّق على الجانبين العلوي والسّفليّ، والثّانية تُطبّق على الجانبين اليمين واليسار. إن قمت بتعيين 4 قيم، فإنّها تطبّق بهذا التّرتيب: فوق، يمين، تحت، يسار. مثال القاعدة التاليّة تجعل الفقرات ذات الصّنف remark مُميّزة بإعطاءها حوافّ حمراء محيطة بها بالكامل. تفصل الحشوة الحدود عن محتوى العنصر قليلًا. تدفع الحوافّ على الجانب الأيسر الفقرة بعيدًا قليلًا عن النّص المجاور. p.remark { border: 2px solid red; padding: 4px; margin-left: 24px; } تفاصيل أكثر عند استخدام الحوافّ والحشوات للتأثير على مواضع العناصر، فإنّ ذلك قد يعقّد من طريقة تفاعل الأنماط مع الإعدادات المبدئيّة للمتصفّح، فالمتصفّحات المختلفة قد ترتّب العناصر بصورٍ مختلفة، وقد تبدو النتائج متشابهة إلى أن تغيّر شيئًا ما في ورقة الأنماط، ممّا يؤدّي إلى نتائج غير متوقّعة. للحصول على النّتيجة المرغوبة، قد تضطر إلى تغيير رماز المستند، وهذا ممّا سنناقشه في الدّرس القادم. تمرين: إضافة الحدود عدّل ملف CSS المٌسمّى style2.css، مُضيفًا هذه القاعدة لرسم خطّ في الصفحة فوق كلّ عنوان: h3 {border-top: 1px solid gray;} إن كنت قد أتممت التّمرين في الدّرس السابق، فغيّر القاعدة الّتي أنشأتها، وإلّا فأضف قاعدة جديدة تضيف مساحة تحت كلّ عنصر قائمة: li { list-style: lower-roman; margin-bottom: 8px; } حدّث المتصفّح لمشاهدة النّتيجة: تمرين أضف قاعدة واحدة إلى ورقة الأنماط تضيف حدودًا عريضة حول كامل المُحيطات بلون يذكر بالبحر، كهذا: (ليس عليك مطابقة الأبعاد والألوان بحذافيرها). شاهد الحل القاعدة التّالية تحقّق التأثير المطلوب: ul { border: 10px solid lightblue; } ما التالي؟ غيّرنا تخطيط بالمستند بتعيين الحوافّ والحشوات، سنتعلّم في الدّرس القادم كيف نغيّر تخطيط المستندات بطرق أخرى. ترجمة -وبتصرف- للمقال Boxes من سلسلة Getting started with CSS على شبكة مطوّري Mozilla.

يبدو أن الأسئلة المتعلقة بالمحاذاة تظهر بانتظام. ولكن لسوء الحظ، فحتى مع وجود أبحاث معتبرة تقدم رؤية واضحة فيما يتعلق بالمشكلة، فإن معظم نتائج النقاشات التي تدور حولها تكون مبنية على تفضيلات وتكهنات شخصية. في هذا المقال، سنقدم لكم ملخص الأبحاث لإعطائكم توصيات محددة وسهلة الاستعمال لهذا الجانب المهم من تصميم النماذج. مختلف أنواع المحاذاة (alignment)بالنسبة للمحاذاة، هناك العديد من الأبعاد المختلفة التي تؤخذ بعين الإعتبار، منها: كيفية محاذاة الأسئلة بالنسبة لبعضها البعض.كيفية محاذاة نص السؤال (أعلى أم يسار حقل الإجابة؟).في الأسئلة المغلقة مع فئات استجابة متعددة، كيف يتم محاذاة هذه الفئات.كم عدد الحواف (edges) الموجودة في النموذج لمختلف أنواع المحاذاة.قبل أن نتكلم عن هذه الأبعاد كل على حدة (مع استخدام بعض الرسومات لجعل الصورة أوضح)، ضع في الحسبان أن التوصيات المقدمة في هذا المقال: ستكون خاصة بالنماذج التي لها سياق اللغة الإنجليزية أو ما يشابهها من ناحية نمط القراءة (أي اللغات التي تقرأ من اليسار إلى اليمين). وبالتالي، فإنك قد تحتاج إلى تعديل هذه التوصيات لتتناسب مع الثقافات التي تقرأ من اليمين إلى اليسار (كاللغة العربية). تقدم نهجا افتراضيا لتصميم النماذج. وبما أنه يوجد دائما بعض الاستثناءات لأي قاعدة، فإنه من المهم جدا أن تضبط الأمور لتتناسب مع السياق الخاص بك.1. كيف تقوم بمحاذاة الأسئلة بالنسبة لبعضها البعضعلى افتراض أن البشر يقرؤون من الأعلى إلى الأسفل، فإنه يفضل وضع الأسئلة فوق بعضها (بشكل عمودي) بدلا من وضعها بجانب بعضها البعض (بشكل أفقي). يخلق هذا إيقاعا عموديا متناسقا ويساهم في إيجاد "مسار واضح للإستكمال" كما أسماه Luke Wroblewski. الشكل 1: محاذاة الأسئلة عموديا كما يوضحه السهم الأزرق. قد يكون من المغري رص سؤالين إلى بعضهما لتقليل المساحة العمودية اللازمة. قد يؤدي ذلك إلى حصول بعض الأجزاء في النموذج على سطر كامل لسؤال واحد فقط وترك بقية الأجزاء تحتوي على عدة أسئلة في سطر واحد. وقد يؤدي عدم التناسق هذا إلى: إعاقة من يريد تعبئة النموذج عن معرفة الطريقة التي سيتحرك بها خلال عملية التعبئة، وبالتالي إبطاء عمله.زيادة احتمالية عدم قدرة الشخص على رؤية وإجابة واحد أو أكثر من الأسئلة (وهو ما لا نريده بكل تأكيد).يبين الشكل 2 نموذجا يحتوي على أسئلة مرتبة/متراصة بشكل أفقي حيثما كان ذلك ممكنا. من المحتمل في مثل هذه الحالة أن يتم إهمال الحقول الموجودة في الجزء الأيمن من الصفحة خصوصا إذا لم يقم المستخدم بملئ الحقل السابق إلى نهايته (لأقصى يمين الحقل). الشكل 2: محاذاة الأسئلة أفقيا. يمكن استغلال المساحة في النموذج بشكل أفضل وذلك بفصله إلى عمودين (كما في الشكل 3). فإذا ما فصلت الصفحة إلى عمودين، فسوف تتم محاذاة الأسئلة في كلا العمودين، وهذا يعني أن الأسئلة ستبدأ من الأعلى إلى الأسفل للعمود الأول، ومن الأعلى إلى الأسفل للعمود الثاني وبعدها إلى الصفحة التالية. ولعدد من الأسباب سنذكرها في مقال آخر، فإنه من غير المحبذ استخدام أعمدة متعددة في نموذج إلكتروني (electronic form) خصوصا في النماذج الموجودة على شبكة الإنترنت. الشكل 3: صفحة تحتوي على نموذج مزدوج الأعمدة. 2. كيفية محاذاة نص السؤالافتراضيا، إن أفضل موقع لنص السؤال يكون في أعلى حقل السؤال، كما هو موضح في الشكل 4. الشكل 4: نص السؤال يظهر أعلى حقل السؤال. يوصي مصمم النماذج الاسترالي الشهير Robert Barnett بهذه الطريقة، وقد أثبتت فعالتيها -من حيث عدد مرات إنهاء النموذج- مقارنة بوضع النص إلى يسار حقل الإجابة (أنظر "موضعة التسمية (label) في النماذج" لكاتبه Matteo Penzo). هناك فائدتان أخريان من وضع نص السؤال فوق الحقل: الفائدة الأولى، هي أنها تسهل عملية ترجمة نص السؤال إلى لغات أخرى، لأنه بهذه الحالة لن يهمنا طول أو قصر النص المترجم.الفائدة الثانية، أنها تمكن من يعانون عسر القراءة أو ممن لديهم إعاقة إدراكية أو حتى مستخدمي قارئات الشاشة (screen readers) من تفادي المشاكل التي قد يواجهونها مع النص الموضوع إلى يسار الحقل (سوف نتكلم عن هذا بعد قليل).إن من أحد المساوئ الرئيسية لوضع نص السؤال أعلى حقل الإجابة هو الزيادة الملحوظة في حجم المساحة العمودية التي يحتاجها النموذج. هذا يعني زيادة عدد الصحفات في النماذج الورقية وتمرير(scrolling) أكثر في النماذج الإلكترونية. لذلك، وعلى فرض أنه تم استخدام المحاذاة المناسبة، فقد يكون من الأفضل في بعض الحالات وضع نص السؤال إلى يسار الحقل. محاذاة النصهناك أربع خيارات لمحاذاة النص وهي دفع لليسار (flush left)، دفع لليمين (flush right)، ضبط من الطرفين (justify) وتوسيط (أنظر الشكل 5). قد تجد أيضا من يستخدم كلمتي "ranged" و "ragged" بدلا من كلمة "flush". الشكل 5: أربع طرق رئيسية لمحاذاة النص. إذا وضع نص السؤال فوق حقل الإجابة، فإنه يجب دفعه إلى اليسار للأسباب التالية: تعتبر المحاذاة لليسار من أفضل الممارسات (best practice) ومناسبة لأغلب المواد المقروءة.تعتبر-بشكل عام- أسهل للقراءة مقارنة بالنصوص المدفوعة لليمين (flush right) أو المتوسطة.قابل للقراءة كالنص المضبوط من الطرفين (justified text) ولكنه وعلى عكس النص المضبوط من الطرفين (justified text) فإنه لا يتطلب تدخلا يدويا لإصلاح مشاكل تباعد الكلمات.يعزز المسار العمودي للإنهاء.عند وضع نص السؤال إلى يسار حقل الإجابة، يفضل -على عكس ما قد يتوقعه البعض- أن يكون ذلك النص مدفوعا لليمين. وقد أشار Matteo Penzo في البحث الذي ذكرناه مسبقا بأن الدفع لليمين يعمل بشكل أفضل من الدفع لليسار. (لسوء الحظ، قد لا يكون هذا صحيحا بالنسبة لمن يعانون عسر القراءة. ولهذا السبب فإن الطريقة الأفضل والتي ينصح بها هي وضع التسمية (label) فوق الحقل). الشكل 6: محاذاة نص السؤال إلى يسار حقل الإجابة ودفعه لليمين. يقول البعض بأنه يجب دفع النص إلى اليسار بدلا من اليمين لأن ذلك يسهل عملية تصفح النموذج للأسفل. قد يكون هذا صحيحا، ولكن ما نريده حقا من التصميم هو تعبئة النموذج وليس قراءة الأسئلة بشكل سريع بحثا عن كلمة أو عبارة معينة. كما أن ما نريده هو اختيار أسلوب التصميم الذي يدعم الهدف الرئيسي (أي تعبئة النموذج)، وهو ما يوفره الدفع لليمين. شيء مهم أيضا، وهو أن جعل النص مدفوعا لليسار، يجعل عملية ربطه مع حقل الإجابة الخاص به أمرا صعبا خصوصا لمن يستخدم مكبرات الشاشة (screen magnifiers) أو لمن يعاني من صعوبات في الإدراك. يعود ذلك إلى أن اختلاف أطوال نص السؤال قد يعني في بعض الحالات وجود فجوة/مساحة كبيرة بين نهاية نص السؤال وبداية حقل الإجابة. قد يكون ذلك أحد الأسباب التي دفعت المنظمة العالمية للمعايير (ISO) والمعايير الوطنيّة الأمريكية HFES200 (هندسة العومل البشريّة لواجهات استخدام البرامج) أن توصي بأن يكون نص السؤال مدفوعا لليمين إلا إذا تساوت أطوال جميع الأسطر. 3. كيفية محاذاة فئات الإستجابةإذا كان مصطلح فئات الإستجابة غير مألوف بالنسبة لك، فقد ترغب في الإطلاع على هذا المقال. لنفس الأسباب التي ذكرناها بالنسبة للأسئلة، فإنه يجب محاذاة فئات الإستجابة عموديا (أي وضع الفئة "ب" أسفل الفئة "أ"). الشكل 7: محاذاة فئات الإستجابة عموديا. كما ذكرنا سابقا، فإنه من المغري وضع الأسئلة بجانب بعضها (بشكل أفقي). ينطبق نفس الأمر على فئات الإستجابة، خصوصا إذا كانت التسميات (labels) قصيرة. غالبا ما تكون الأسئلة المتعلقة بالمسميات title (مثل "Mr" أو "Mrs") أحد العناصر الرئيسية للجوء البعض إلى استخدام المحاذاة الأفقية، لأن ذلك قد يؤدي إلى حفظ الكثير من المساحة العمودية. عندما تحدثنا عن الأسئلة، رأينا بأن وضع العناصر إلى جانب بعضها قد يؤدي إلى إبطاء من سيقوم بتعبئة النموذج وإلى ارتفاع معدل الأخطاء. وعند استخدام هذه الطريقة في فئات الإستجابة فإن مشكلة إضافية ستظهر وهي ضعف الرابطة بين مسمى فئة الإستجابة والحقل الخاص به. وكما هو موضح في الشكل 8، فإن المسافة بين المسمى والحقل هي نفسها في كلتا الحالتين. مع ذلك، ففي حالة محاذاة الفئات عموديا يكون من الواضح جدا معرفة أي مسمى يرتبط بأي حقل، على عكس المحاذاة بشكل أفقي. الشكل 8: إذا استخدمنا المحاذاة العمودية (يمين الصورة) بدلا من المحاذاة الأفقية (يسار الصورة)، فسيكون من السهل على من سيقوم بتعبئة النموذج أن يربط مسميات فئات الإستخدام بما يقابلها من حقول. في بعض الحالات، يمكن تعديل المسافة الأفقية للتخفيف من هذه المشكلة. كما يمكن أيضا تلافي هذه المشكلة نهائيا وبأقل جهد، وذلك بمحاذاة فئات الإستجابة عموديا بدل محاذاتها أفقيا. محاذاة النّص لفئات الإستجابةكما هو الحال بالنسبة لنص السؤال، يجب علينا أن نقرر فيما إذا كانت المسميات الخاصة بفئات الإستجابة المختلفة (يطلق عليها أيضا اسم "عناوين فرعية" أو "تعقيبات") مدفوعة لليمين، مدفوعة لليسار، مضبوطة من الطرفين (justified) أو متوسطة. يعتبر هذا أحد أكثر الجوانب جدالا في تصميم النماذج، ويرجع ذلك بشكل جزئي إلى اختلاف الممارسات الشائعة في نماذج شبكة الإنترنت عنها في تلك الموجودة في مجال الطباعة. عندما يتعلق الأمر بالنماذج الورقية (بما في ذلك النماذج الإلكترونية التي يمكن طباعتها وتعبئتها وملفات الـ pdf لأحد النماذج الورقية) فإنه من الواضح بأن أفضل طريقة هي وضع مسميات الفئات إلى يسار الحقول الخاصة بها ودفعها إلى اليمين. الشكل 9: وجود مسميات فئات الإستجابة إلى يسار الحقول ومدفوعة لليمين. قبل 25 سنة، أثبتت Patricia Wright بأن هذه الطريقة هي الأفضل، وقد كانت الأبحاث التي قام بها Robert Barnett على مدى عقود مضت متوافقة مع ما جاءت به Patricia Wright. عندما يتعلق الأمر بالتصميم في العالم الواقعي، فلن يكون الجواب بتلك البساطة. فبالنسبة لمسألة المحاذاة لمسميات وحقول فئات الإستجابة، فسيظهر بعض التعقيد بسبب وجود الإنترنت (the web). تاريخيا، كانت النماذج على شبكة الإنترنت تضع المسميات على يمين الحقل (كما هو الحال في الشكل 7 الموجود في الأعلى)، ويعود ذلك إلى بعض الأسباب البرمجية. على شبكة الإنترنت، يكون من الصعب محاذاة حقول الإستجابة عبر اسئلة متعددة بشكل عمودي. وعلى الرغم من صعوبة تحديد هذه الأمور، فإنه من المعقول قول بأن هذه الطريقة في وضع المسميات أصبح متعارفا عليها بشكل افتراضي (تحديدا كما أصبح نهج شركة مايكروسوفت (Microsoft) في تصميم برامج سطح المكتب أمرا متعارفا عليه افتراضيا). لهذه الأسباب، سوف تستمر مسميات فئات الإستجابة في نماذج الويب بالظهور إلى اليمين من الحقول الخاصة بها. توقع أيضا بعض الأوقات عندما تتصادم الهيمنة التاريخية للنماذج الورقية مع الشعبية المتزايدة النماذج الإلكترونية. 4. عدد الحواف (edges) في النموذجمن آخر جوانب المحاذاة التي سنتحدث عنها في هذا المقال هو عدد الحواف لمختلف طرق المحاذاة الموجودة في النموذج. إن بداية أو نهاية أي كتلة نصية (block of text) أو مساحة بيضاء/فارغة (white space) يخلق ما يسمى "الحافة". قد تكون هذه الحافة هي نهاية حقل الإجابة أو حدود أحد الأعمدة أو المسافات البادئة (indentations) لجميع نصوص الأسئلة. بمقارنة الشكلين 10 و11 في الأسفل، يظهر الشكل 10 نموذجا يحتوي على الكثير من الحواف، أما الشكل11 فيظهر نموذجا بعدد قليل من الحواف، فأيهما تفضل؟ الشكل 10: نموذج بعدد كبير من الحواف. الشكل11: نموذج بعدد قليل من الحواف. عند مقارنة التصاميم ذات الحواف الكثيرة مع التصاميم ذات الحواف القليلة، سنلاحظ بأن الأخيرة تعتبر أكثر جمالا وأسهل في الإستعمال. كما ينصح بأن يتم محاذاة العناصر المتوافقة بشكل عمودي ومتناسق. بعبارة أخرى، يجب على نص مربعات الأسئلة ذات الأطوال المتشابهة أن تبدأ وتنتهي بنفس النقطة العمودية، ويجب أيضا أن تبدأ جميع الأسئلة من نفس النقطة العمودية وهكذا دواليك. ملخص التوصياتكخلاصة لكل ما ذكرناه في هذا المقال، فإن الطرق الواجب اتباعها والتي ننصح بها هي: محاذاة الأسئلة عموديا.وضع نص السؤال فوق حقل الإجابة ودفعه لليسار.محاذاة فئات الإستجابة عموديا.للنماذج الورقية: وضع مسميات فئات الإستجابة إلى يسار الحقول الخاصة بها ودفعها لليمين.لنماذج الإنترنت: وضع مسميات فئات الإستجابة إلى يمين الحقول الخاصة بها ودفعها لليسار.تقليل عدد الحواف العمودية في النموذج على قدر المستطاع.ترجمة -وبتصرّف- للمقال Alignment.