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

هو أحد أهم عناصر التصميم، حتى وإن شاهدت تصميمًا بالأبيض والأسود فهو يحتوي بذلك على لونين وهما الأبيض والأسود. إذًا لا يوجد تصميم بدون ألوان حتى وإن كانت بلون واحد. فاللون أساس أي تصميم. لهذا يجب الاهتمام بهذا العنصر وفهم كل ما يتعلق به ليكون أحد أهم أسباب نجاح أي تصميم. ما هو اللون؟ نحن ندرك اللون عبر انعكاس الضوء على الأشياء الملونة إلى داخل أعيننا لتقوم مستقبلات الضوء داخل أعيننا بإرسال إشارات عصبية إلى الدماغ فندرك اللون الذي نشاهده. إذًا اللون هو الإدراك الذي يوفر بُعدًا مهمًا في الاتصال المرئي مع ما حولنا. ويعد تأثير اللون أكبر من باقي العناصر وخاصة التأثير المزاجي على المشاهد، ويشكّل العنصر الأهم من عناصر الهوية البصرية لأي علامة تجارية. وقد أسس العديد من العلماء نظريات عدة للون كما درسوا فلسفته وكتبوا عن ذلك العديد من الكتب والمقالات. أهمية اللون تنبع أهمية اللون من كونه العنصر الأهم والأكثر تأثيرًا في التصميم، وعلى الرغم من أن اللون يثير مشاعر متباينة ومختلفة من شخص لآخر بحسب مزاجه وثقافته، إلا أن الاستخدام الصحيح والمدروس للون في التصميم يساعد على ترسيخ العلامة التجارية للشركات ويزيد الموثوقية والانتشار الواسع للمنتجات. على سبيل المثال لو أنك دخلت متجرًا استهلاكيًا ضخمًا ومشيت في ممر المشروبات الغازية باحثًا عن عبوة لمشروبات غازية من كوكاكولا فإنك لن تبحث في ملايين العبوات على الرفوف عن أسماء المشروبات أو شعاراتها، بل تبحث بالتأكيد عن العبوات الحمراء بدرجة لونها المميز، وعندما تلمحها من بعيد فإنك تتجه بسرعة نحوها ثم تحملها لتتأكد من اسم وشعار المشروب بعد أن أدركت أنه اللون المطلوب. إذًا أصبح اللون الأحمر عندما نبحث عن مشروبات غازية يدل على علامة كوكاكولا تحديدًا، وهذا هو تأثير اللون على المستهلكين ومقدرته على الانتشار بالسوق، والأمثلة على ذلك كثيرة. ومن هنا نستنتج أهمية اللون في التصميم وتأثيره على العملاء، إذ لدى اللون القدرة والقوة لضمان نجاح أو فشل أعمال الشركات والعملاء، فكما أن له دورًا في نجاح علامة تجارية ما، فإن الاستخدام الخاطئ وغير المدروس سيكون له أثر سلبي ويسبب الفشل. لنفترض أنه طلب منك كمصمم أن تصمم الهوية البصرية لعلامة تجارية تعنى بإنتاج ألعاب الأطفال بحيث سيكون السوق الرئيسية المستهدفة في الهند، فإذا قمت باعتماد اللون البني لتصميمك فسيكون الفشل الذريع مصير تلك الشركة، لأن اللون البني في الهند يشير إلى الحداد والموت والحزن، وهذا لا ينطبق مع منتجات ألعاب الأطفال التي تدعو للفرح والسعادة، فإذا ما وضعت منتجات هذه الشركة على رفوف المتاجر هناك بجانب المنتجات المنافسة الأخرى التي تزينت بالألوان الزاهية فلن يشتري أحد هذه المنتجات بسبب فشلك في اختيار الألوان الصحيحة. على المصممين جميعًا فهم ماهية اللون ونظرياته ودراسة تأثيراته على المجتمعات المستهدفة من خلال فهم ثقافاتهم وطبيعة الرسالة والهدف من التصميم. الصورة بواسطة Tom Radetzki من موقع Unsplash المصطلحات المحددة لسمات الألوان عندما تسير في سوق الألبسة سيلفت انتباهك الألوان المختلفة للألبسة، فهذا أزرق فاتح وذاك أخضر داكن ولكن الذي بجانبه داكن أكثر قليلًا وهناك ما هو أفتح درجة لونية منه، هناك العديد من الدرجات للألوان، لاستخراج تلك الدرجات المختلفة من كل لون هناك علامات ومصطلحات رئيسية محددة للحصول على التدرجات المختلفة من الألوان، وهي الصبغة Hue والسطوع Tint والتظليل Shade والدرجة اللونية Tone والتشبع Saturation والصفاء Chroma والقيمة Value. الصبغة Hue أي نموذج من نماذج الألوان يتضمن ألوانًا رئيسية نقية نستخرج منها باقي الألوان بكافة درجاتها عبر تنسيقات معينة، فعلى سبيل المثال يتألف نموذج ألوان RGB من ثلاثة ألوان رئيسية هي الأحمر والأخضر والأزرق، وتختلف هذه الألوان الرئيسية كما يختلف عددها من نموذج ألوان لآخر، وتختلف نتائج دمج هذه الألوان بحسب النظام المتبع. ولهذه الألوان مستويات كالألوان الأساسية والثانوية. ومن المهم أن نعلم بأن الصبغة Hue لا تحوي اللونين الأبيض والأسود. ويعرّف اللون النقي بأنه اللون الذي لا يحوي أي درجة من اللون الأسود أو الأبيض، أي لا يحوي أي درجة من الدرجات الداكنة أو الساطعة. السطوع Tint يعرّف السطوع (Tint) بأنه درجة اللون النقي من الصبغة Hue مضافًا إليه مقدار معين من اللون الأبيض، وهو ما يجعل درجات ذلك اللون فاتحة وساطعة. يعمل السطوع على تفتيح اللون، لكنها لا تجعله أكثر إشراقًا، حتى وإن بدى أكثر إشراقًا ولكنه ليس كذلك، فهو في الواقع نفس اللون ولكنه باهت أكثر. ولا يحتوي السطوع على اللون الرمادي ولا الأسود. التظليل Shade وهو عكس السطوع بحيث أنه درجة اللون النقي من الصبغة Hue مضافًا إليه مقدار معين من اللون الأسود. وهو لا يحتوي على أي أبيض أو رمادي على الإطلاق. يجعل اللون داكنًا أكثر، ويمكن استخدامه ببساطة في تصميم منظر طبيعي على العناصر التي لا تصلها أشعة الشمس، أي على العناصر المظللة. الدرجة اللونية Tone تعرف الدرجة اللونية Tone على أنها درجة اللون النقي من الصبغة Hue مضافًا إليه مقدار معين من اللون الرمادي فقط. وعملية دمج الألوان باللون الرمادي سيقلل من حدة اللون. القيمة Value وهي مقدار الفرق بين السطوع Tint والتظليل Shade للون. التشبع Saturation والصفاء Chroma المصطلحان متقاربان جدًا من حيث المعنى وأحيانًا يستخدمان للغرض نفسه، ويمثلان مدى نقاء وصفاء اللون، فكلما كان اللون باهتًا أو يشوبه اختلاط مع اللون الأبيض أو الأسود أو الرمادي كان أقل تشبّعًا وصفاءً وكلما قل اختلاطه بهذه الألوان المحايدة كان أكثر تشبعًا وصفاءً. معاني الألوان واستخداماتها في التصميم (نظرية الألوان) اللون هو أداة حيوية يمكنها التأثير على الحالة المزاجية للمشاهدين. ومن المهم أن نتذكر أن الطريقة التي يُدرك بها اللون تعتمد أيضًا على الثقافة التي نشأ فيها المشاهد وهي أيضًا مرتبطة ارتباطًا مباشرًا بتجربته وتفضيلاته وتنشئته. ونظرًا لأن كل شخص يرى اللون بطريقة مختلفة، فإن هذا يعني عدم وجود لوحة ألوان مثالية. فما يثير رد فعل ما في شخص ما قد يثير رد فعل مختلف تمامًا في شخص آخر، والاختلافات الثقافية تعني أن لونًا ما يدعو للسعادة والتفاؤل في بلد ما، يمكن أن يكون محبطًا في بلد آخر، فإذا كنت ترغب في إنشاء تصميم فعال للغاية، فأنت تريد أن تفهم معاني الألوان وكيف تنقل رسالتك إلى الجمهور المستهدف. وهناك أنواع للألوان وهي الألوان الدافئة والباردة والمحايدة. الألوان الدافئة وهي الأحمر والبرتقالي والأصفر ودرجاتها المختلفة. بشكل عام، هذه الألوان حيوية ونشطة، مع دلالات إيجابية نسبيًا. الأحمر الأحمر لون النار، ويرتبط بالعاطفة والحب والشهوة. يمكن أن يرتبط أيضًا بالتحذيرات والخطر، أو حتى بالغضب. يمكن أن يكون للأحمر تأثير صحي على الناس أيضًا حيث يسبب لهم التوتر الذي قد يرفع معدل التنفس وضربات القلب. تصميم Nissan GT-R Sale- Landing page Concept للمصمم DMTR STFNSHN بترخيص المشاع CC BY-NC-ND 3.0 البرتقالي لون البرتقال وهو لون حيوي وإيجابي، كما يمكن أن يؤدي ارتباطه بأوراق الخريف والتحولات الموسمية إلى جعل الناس يفكرون في التغيير عندما يرونه. يرتبط البرتقالي أيضًا بالتحذيرات، على الرغم من أنها أقل قوة من اللون الأحمر. تصميم KTM duke 200 specification page للمصمم Goprotoz Design بترخيص المشاع CC BY-NC-ND 3.0 الأصفر لون الشمس وهو لون السعادة ويرتبط ارتباطًا وثيقًا بأشعة الشمس والأمل. يمكن أيضًا ربطه بالحذر والجُبن. تصميم Geo Protocol — Visual Identity and Web Design للمصممين LEAGUE \ Design Agency و Julia Zamiatina و leksandr Gusakov بترخيص المشاع CC BY-NC-ND 3.0 الألوان الباردة الأخضر والأزرق والأرجواني ودرجاتها المختلفة. بشكل عام، هي أكثر تحفظًا واسترخاء واحترافية وهدوءًا من الألوان الدافئة. الأزرق لون البحر والسماء، يدل على الثقة والاستقرار وهو مهدئ ويمثل أيضًا الصدق والولاء. كما أنه ينطوي على الثقة والمهنية والسلام وحتى الروحانية. تصميم ProDent للمصممة lizaveta Yaryhina بترخيص المشاع CC BY-NC-ND 3.0 الأخضر لون النبات والحياة ويعني النمو والانسجام والطبيعة ويرتبط بالثراء والمال والاستقرار، خاصة في الظلال الداكنة. تصميم redesign website للمصممة Amani Abu Zanouna بترخيص المشاع CC BY-NC-ND 3.0 أرجواني لون أزهار اللافندر، لون يدل على الإبداع، الخيال، الرقي، الرومانسية، ولطالما ارتبط بالفخامة والملكية، ولكنه يرتبط أيضًا بالغموض والسحر. الأرجواني الفاتح، مثل اللافندر، أكثر رومانسية ويرتبط بالربيع. تصميم OrderMe للمصمم Stas Ilin بترخيص المشاع CC BY-NC-ND 3.0 الألوان المحايدة الألوان المحايدة مهمة جدًّا لتصميم الرسوم لأنها تعمل غالبًا كخلفية ومن المتوقع أن تنتج التأثيرات الصحيحة بالتنسيق مع ألوان مميزة أكثر إشراقًا. ومع ذلك، يمكن أن تحمل معانيها الخاصة ورسائلها المعقدة. الأبيض لون النقاء، لون الحليب، لون الغيوم ويدل على النظافة، الليونة، التطور، الأناقة، الالوهية، حفلات الزفاف، الملوك والإيجابية بشكل عام. في بعض الثقافات ترتبط مع الموت والمأساة. فالأبيض والأسود يمكن أن يكون لها معانٍ مختلفة جدًا بحسب ثقافة البلد. تصميم Glanz Project للمصممة Bilawal Shah بترخيص المشاع CC BY-NC-ND 3.0 الأسود لون الظلام والليل والفحم، وهو لون أنيق وراقٍ، ولكن يمكن أيضًا أن يكون حزينًا وممثلًا للموت والحداد. ويستخدم للتعبير عن إحساس حاد أو غامض أو أنيق. الأسود هو أيضًا اللون الافتراضي للطباعة. تصميم My personal web للمصممة Denitsa Damyanova بترخيص المشاع CC BY-NC-ND 3.0 الرمادي يمكن عد اللون الرمادي معقدًا وقويًا، ولكن يمكن أيضًا أن يظهر على أنه ممل إذا تم استخدامه بطريقة خاطئة. هو أحد أكثر الألوان المحايدة مرونة، حيث يمكن رؤيته على أنه دافئ أو بارد، تقليدي أو حديث. ويرتبط أيضًا بمشاعر المهنية، الرسمية، المتطورة، الكآبة، الملل، المزاجية. تصميم Skymob - Logo & Website للمصممة Detlef Aioanei بترخيص المشاع CC BY-NC-ND 3.0 البني والبيج لون الخشب والشوكولا، البني صلب ويمكن الاعتماد عليه، ويمكن أن يرتبط بالطبيعة اعتمادًا على السياق الذي يستخدم فيه. بينما يمكن أن يكون البيج دافئًا أو باردًا حسب الألوان المستخدمة حوله. إنه محافظ بشكل عام ويمكن أن يكتسب دفء اللون البني أو برودة اللون الأبيض. يأخذ معنى الألوان من حوله ويتلاشى غالبًا في الخلفية. تصميم Coffee Trading Landing Page للمصممة Tatiana Dudik بترخيص المشاع [CC BY-NC-ND 3.0}(http://creativecommons.org/licenses/by-nc-nd/3.0/) الاختلافات الثقافية أحد المجالات التي يحتاج فيها المصممون إلى توخي الحذر بشكل خاص في عملهم هو النظر في الاختلافات الثقافية بالنسبة لمعاني الألوان. على سبيل المثال، في معظم الثقافات الغربية يرتبط الأبيض بالبراءة ويرتبط الأسود بالموت والحداد. لكن في ثقافات أخرى، وخاصة الصين واليابان وكوريا، ودول آسيوية أخرى، يرتبط اللون الأبيض بالموت والحداد، وحتى الحظ السيئ. لذلك تختلف التأثيرات النفسية للون على سلوك الإنسان باختلاف الثقافة. من المهم التفكير في المكان الذي يأتي منه الجمهور المستهدف، فإذا كان غالبية المستخدمين لموقع معين قادمين من الهند على سبيل المثال، فسيكون استخدام اللون الأسود فكرة سيئة. ولكن إذا كانوا قادمين من البلاد العربية، فإن اللون الأخضر مرتبط بالحظ والثروة والخصوبة، والتي قد تكون بالضبط نوع الرسالة المطلوبة. يمكنك النظر لهذا التصميم من موقع جامعة ناني يانغ التكنولوجية في سنغافورة حيث يظهر لك اختلاف تأثير الألوان بحسب المناطق حول العالم. الرسم البياني يوضح رؤية القائمين على الدراسة، وقد تختلف دراسات أخرى معها حول تأثيرات الألوان تبعًا للثقافة الدائرة اللونية (عجلة الألوان) تتضمن هذه الدائرة اللونية قياسيًا الألوان الرئيسية الثلاث والألوان الثانوية والثالثية. وتقوم جميع الشروحات والتصاميم على هذه الألوان تحديدًا، وهي الألوان الأساسية في دراسات نظرية الألوان. وقد صمم إسحاق نيوتن أول رسم تخطيطي دائري للألوان في عام 1666. الألوان الرئيسية هي الأحمر والأصفر والأزرق، في نظرية الألوان التقليدية فإن الألوان الرئيسية هي الألوان الصبغية الثلاثة التي لا يمكن مزجها أو تشكيلها بأي مزيج من الألوان الأخرى. جميع الألوان الأخرى مشتقة من هذه الألوان الثلاثة. الألوان الثانوية هي الأخضر والبرتقالي والأرجواني والتي تتشكل عن طريق خلط الألوان الرئيسية. الألوان الثالثية هي أصفر برتقالي، أحمر برتقالي، أحمر بنفسجي، أزرق بنفسجي، أزرق أخضر، أصفر أخضر وتتشكل عن طريق خلط لون رئيسي وثانوي. هذا هو السبب في أن التدرج اللوني هو اسم مكون من كلمتين، مثل الأزرق الأخضر والأحمر البنفسجي والأصفر البرتقالي. القواعد الرقمية لتمثيل الألوان والفروقات فيما بينها (النماذج اللونية) الغرض من هذه القواعد هو تسهيل تحديد الألوان بطريقة قياسية ومقبولة بشكل عام. وتسمى هذه القواعد بنماذج الألوان، ويمكن تصوير نموذج الألوان كمخطط متعدد الأبعاد بالنسبة لطيف الألوان. تحتوي معظم نماذج الألوان الحديثة على ثلاثة قنوات لونية مثل RGB، وبالتالي يمكن تصويرها على أنها أشكال ثلاثية الأبعاد، في حين أن النماذج الأخرى لها أبعاد أكثر مثل CMYK. فيما يلي، سنلقي نظرة على نماذج الألوان RGB وHSV وCMYK وLAB، وهي جميعها سائدة في أدوات التصميم الرقمي والطباعي ولغات البرمجة الحالية. RGB نموذج الألوان RGB (الأحمر Red والأخضر Green والأزرق Blue) هو الأكثر شهرة والأكثر استخدامًا كل يوم. يحدد مساحة اللون من حيث ثلاثة مكونات وهي الأحمر والأخضر والأزرق وجميعها تتراوح من 0-255. ويستخدم هذا النموذج في عمل التصاميم الخاصة بالشاشات مثل تصاميم الويب وتطبيقات الهواتف المحمولة وتطبيقات سطح المكتب. نموذج ألوان RGB هو نموذج مضاف، أي أنه يتم دمج قيم الأحمر والأخضر والأزرق (المعروفة باسم الألوان الرئيسية الثلاثة) لإعادة إنتاج ألوان أخرى. على سبيل المثال، يمكن تمثيل اللون "الأحمر" بـ [R = 255 ، G = 0 ، B = 0] ، "بنفسجي" بـ [R = 238 ، G = 130 ، B = 238]. وتمثيلها الرسومي المشترك هو الصورة التالية: HSB يحدد نموذج الألوان HSB بالسمات التالية (الصبغة Hue، التشبع Saturation، السطوع Brightness). الصبغة: نوع اللون (مثل الأحمر أو الأزرق أو الأصفر). وتتراوح من 0 إلى 360 درجة في معظم التطبيقات. التشبع: شدة اللون. وتتراوح من 0٪ إلى 100٪ (0 يعني عدم وجود لون و100 يعني لون كثيف مشبع). وتسمى أحيانًا "الصفاء" كما ذكرنا سابقًا. السطوع (أو القيمة): سطوع اللون. وتتراوح قيمته من 0٪ إلى 100٪ (0 دائمًا أسود اعتمادًا على التشبع وقد يكون 100 أبيض أو لون مشبع أكثر أو أقل). ويُعرف نموذج HSB أيضًا باسم نموذج HSV (الصبغة والتشبع والقيمة). تم إنشاء نموذج HSV في عام 1978 بواسطة Alvy Ray Smith. تمثيلها الرسومي المشترك هو الصورة التالية: الصورة من Wikia CMYK النموذج اللوني CMYK، المعروف أيضًا باسم CMJN، يرمز إلى: أزرق سماوي Cyan، أرجواني Magenta، أصفر Yellow وأسود blacK وتتراوح قيم جميعها من 0٪ إلى 100٪ في معظم التطبيقات. إنه نموذج ألوان مطروح يستخدم في الطباعة الملونة. يعمل CMYK على خداع بصري يعتمد على امتصاص الضوء. المبدأ هو مزج ثلاث ألوان واحد للسماوي والآخر للأرجواني والآخر للأصفر والتي ستعيد إنتاج الألوان. تمثيلها الرسومي المشترك هو الصورة التالية: مثل نموذج ألوان RGB، يعد CMYK مزيجًا من الألوان الأساسية (السماوي والأرجواني والأصفر والأسود). ويعاني CMYK من نقص في ظلال الألوان التي تسبب ثغرات في طيف ألوان هذا النموذج. لهذا السبب غالبًا ما توجد اختلافات عندما يقوم شخص ما بتحويل الألوان بين CMYK إلى RGB. ويستخدم هذا النموذج تحديدًا في الأغراض الطباعية، ولهذا نحتاج للون الأسود، حيث يُطبع النص عادةً باللون الأسود ويتضمن تفاصيل دقيقة، فإن لم يكن لدينا عبوة حبر سوداء في الطابعة فإن الطابعة سوف تطبع الألوان الثلاثة الأخرى فوق بعضها البعض لتمتزج وتنتج اللون الأسود، وعند الطباعة بالألوان الثلاثة فوق بعضها فإن ذلك سيتطلب محاذاة دقيقة للغاية لكل صورة أو نص يستخدم اللون الأسود. كما أن مزج الأصباغ السماوي والأرجواني والأصفر لا ينتج لونًا أسودًا نقيًا. ويمكن أن يؤدي خلط الأحبار السائلة للألوان الثلاثة معًا لجعل الورق موضع اللون الأسود رطبًا، وهي مشكلة في الطباعة عالية السرعة حيث يجب أن يجف الورق بسرعة كبيرة لتجنب وضع علامة على الورقة التالية، والورق ذو الجودة الرديئة مثل ورق الصحف قد يتمزق إذا أصبح رطبًا جدًا. كما أن استخدام كمية واحدة من الحبر الأسود بدلاً من ثلاث وحدات من أحبار الألوان الأخرى لتكوين اللون الأسود يوفّر كثيرًا في التكلفة فغالبًا ما تكون عبوة الحبر الأسود أرخص من الملونة. LAB نموذج الألوان LAB والذي يعمل بمبدأ مختلف عن باقي النماذج لأنه يحدد الألوان بناءً على محاور كما في التمثيل الرسومي التالي لذلك يعد نموذج LAB اللوني أكثر دقة في تحديد الألوان من بقية النماذج اللونية، يستخدم ثلاث قيم (L و A و B) لتحديد الألوان. تحدد مساحات ألوان RGB و CMYK لونًا عن طريق إخبار الجهاز بكمية كل لون مطلوب. يعمل النموذج Lab بطريقة أشبه بالعين البشرية، حيث يحدد لونًا باستخدام نظام ثلاثي المحاور. المحور A (الأخضر إلى الأحمر) والمحور B (الأزرق إلى الأصفر) ومحور الإضاءة L. وهذا يعني أنه من الأسهل الحصول على نفس اللون تمامًا عبر وسائط مختلفة، ولذلك يستخدم بشكل أساسي في صناعة البلاستيك والسيارات والمنسوجات. مخططات ولوحات الألوان بعد أن تعرفنا على كل شيء يتعلق بالألوان وعلاقتها بتصميم الرسوميات، يجب أن نعلم كيفية استخدام الألوان في التصميم بالطريقة الصحيحة والاحترافية. يعد مخطط الألوان هو الأسلوب الذي يتم من خلاله إنشاء لوحات الألوان وأما لوحات الألوان فهي مجموعة محددة من الألوان تعد بمثابة هوية التصميم اللونية بحيث تستمد ألوان التصميم من هذه اللوحة فيكون التصميم من حيث الألوان متناسقًا ومتجانسًا. ويعتمد مخطط الألوان على أنظمة خاصة تحدد علاقة الألوان ضمن لوحة الألوان ببعضها، فإذا صممت واجهتي ويب واعتمدت في الأولى على لوحة ألوان أنشأتها بنفسك وبدون الاعتماد على أحد مخططات الألوان، والثانية اعتمدت فيها على لوحة ألوان أنشأتها بناءً على أحد مخططات الألوان، فإن الواجهة الثانية ستكون بكل تأكيد أكثر تناسقًا من الأولى. مخططات الألوان المخطط أحادي اللون Monochromatic color scheme: يستخدم درجات مختلفة من السطوع Tint والظلال Shade لنفس الصبغة اللونية Hue. وهو ما سيصبغ التصميم أو الواجهة بتدرجات لون واحد. مخطط الألوان المتماثل Analogous color scheme: يستخدم الألوان الموجودة بجانب بعضها على عجلة الألوان. ينتج عن ذلك تصميم متجانس بعيد كل البعد عن التباين. مخطط الألوان التكميلي Complementary color scheme: يستخدم الألوان المتقابلة على طرفي عجلة الألوان. وهو المخطط الخاص بتصاميم تعتمد أساسًا على التباين. وتتواجد الألوان الدافئة والباردة معًا في التصميم ذاته. مخطط الألوان التكميلية المنقسمة Split Complementary: يستخدم لونًا من جهة في عجلة الألوان ومن الجهة المقابلة تمامًا لونين منقسمين بفارق بسيط بينهما. ويعد اللون الأول مهيمنًا واللونين الآخرين ثانويين. مخطط الألوان الثلاثي التكميلي Triadic Complementary (Triad): يستخدم ألوانًا متباعدة بالتساوي على عجلة الألوان. مخطط ألوان تتراديك (التكميلي المزدوج) Tetradic (Double Complementary): يستخدم مجموعتين متقابلتين من الألوان التكميلية. لوحات الألوان بعد اختيار أحد المخططات السابقة وأخذ نظرية الألوان في الحسبان والتنبّه إلى معانيها ودراسة التصميم من حيث المتطلبات والهدف ودراسة الجمهور المستهدف، بعد كل ذلك يجب عليك إنشاء لوحة الألوان المناسبة للتصميم، أو ابحث في مواقع الإنترنت المختصة بلوحات الألوان، بعضها يساعدك على إنشاء لوحة ألوانك الخاصة وبعضها يحتوي على الآلاف من لوحات الألوان المعدة مسبقًا لتختار منها وبعضها يحوي لوحات ألوان شهيرة ذات أسماء ورموز معرفة يمكنك الاعتماد عليها واستخدامها، إليك أهم هذه المواقع. Colorlisa موقع يتضمن مجموعة من لوحات الألوان الشهيرة مع ذكر أسمائها وأسماء مؤلفيها. Color Hunt يضم مجموعة ضخمة من لوحات الألوان الجاهزة وفيه خاصية البحث فإذا بحثت عن Winter أي الشتاء فإنه يقدم لك لوحات ألوان تتعلق بالشتاء. Paletton تطبيق ويب متميز لاختيار لوحة الألوان. Coolors من أشهر المواقع المتخصصة في لوحات الألوان ويضم خاصية البحث والقوائم الأكثر رواجًا والأحدث. Adobe Color أقوى أداة لإنشاء لوحات الألوان اعتمادًا على أحد المخططات الأساسية بشكل واضح ومباشر. تجربة عملية لاختيار ألوان التصميم سنقوم الآن بتجربة عملية لاختيار الألوان لتصميم واجهة المستخدم لتطبيق هاتف محمول مخصص للتسوق عبر الإنترنت. نبدأ أولًا برسم التخطيط المبدئي لشكل الواجهة كما في الشكل التالي: ثم نضيف الشعار والعناصر النصية التجريبية للتطبيق. ثم نذهب إلى موقع Coolors لنبحث عن لوحة الألوان المناسبة. اخترت هذه اللوحة مع الأخذ بالحسبان أن التطبيق موجه للمنطقة العربية، لذلك درست نظرية التأثير النفسي للألوان على جمهور هذه المنطقة ووجدت اللون الأزرق وتدرجاته تشير إلى ألوان السماء والبحار وهي ألوان مريحة وتبعث الإحساس على الثقة والراحة للشراء، وتعمّدتُ وجود اللون الأحمر الفاتح لاستخدامه في زر الشراء حتى أحقق التباين ويكون زر الشراء عنصرًا بارزًا ويجذب الانتباه والاهتمام لناحية تنفيذ عملية الشراء وهو الهدف من تصميم هذه الواجهة. استخدمت لوحة الألوان هذه كما يلي: وبهذا نكون قد استخدمنا ما تعلمناه في هذا المقال عن الألوان في تصميمنا هذا. يعمل المصممون المحترفون على اختيار الألوان من خلال خبرتهم بعيدًا عن مواقع لوحات الألوان حيث يتمكنون من تحديد النموذج اللوني الصحيح لاختيار لوحة الألوان الصحيحة بدورها للتصميم بدون العودة لهذه الموقع من واقع خبرتهم. المصدر المجاني لصور المنتجات خاتمة لماذا يجب أن تهتم بنظرية الألوان؟ ببساطة بسبب العلامات التجارية والتسويق والمبيعات. باستخدام هذه المعرفة الأساسية حول الألوان وأنظمة الألوان، أنت على استعداد لاتخاذ قرارات فعّالة بشأن العلامة التجارية، مثل اللون الذي يجب أن يكون عليه الشعار، أو المشاعر التي تثيرها الألوان لدى المستهلكين وعلم النفس وراء اختيارات الألوان على موقع الويب. ستساعدك معرفة نظرية الألوان في التسويق وفي فهم أفضل لأسلوب المنافسة في السوق، كما ستساعدك على جعل العلامة التجارية لعملائك مميزة وجذابة وتجنبك استخدام الألوان الرديئة التي ستؤدي إلى مبيعات سيئة.

يمكن للغة جافاسكربت JavaScript إرسال طلبات شبكة إلى الخادم وتحميل معلومات جديدة عندما يتطلب الأمر ذلك، إذ يمكننا على سبيل المثال استخدام طلبات الشبكة في الحالات التالية: إرسال طلب. بتحميل معلومات مستخدم. الحصول على آخر التحديثات من الخادم. ويجري كل ذلك دون إعادة تحميل الصفحة. تنضوي طلبات الشبكة التي تنفذها لغة JavaScript تحت المظلة AJAX، وهي اختصار للعبارة Asynchronous JavaScript And XML، ورغم ذلك لا نحتاج إلى استخدام XML، فقد وضعت العبارة السابقة منذ فترة طويلة لذلك وجدت هذه الكلمة ضمنها، وقد تكون سمعت بهذه العبارة الآن أيضًا. هنالك طرق عديدة لإرسال طلبات عبر الشبكة والحصول على معلومات من الخادم، وسنبدأ بالطريقة الأحدث ()fetch، علمًا أنه لا تدعم المتصفحات القديمة هذه الدالة (ويمكن الاستعاضة عنها بشيفرة بديلة)، لكنها مدعومة جيدًا في المتصفحات الحديثة، وإليك صيغتها: let promise = fetch(url, [options]) حيث: url: عنوان المورد الذي ستصل إليه الدالة. options: المعاملات الاختيارية من توابع وترويسات وغيرها. تتحول الدالة إلى طلب GET بسيط لتنزيل محتوى العنوان url إن لم تكن هناك معاملات اختيارية options، ويبدأ المتصفح الطلب مباشرةً ويعيد وعدًا promise ستستخدمه الشيفرة التي تستدعي الطلب للحصول على النتيجة، وتكون الاستجابة عادةً عمليةً بمرحلتين: الأولى: يُحلَّل الوعد الذي تعيده fetch عبر كائن من الصنف Respo-nse حالما يستجيب الخادم بالترويسات المناسبة، ويمكن التحقق من نجاح الطلب أو عدم نجاحه، والتحقق أيضًا من الترويسات، لكن لن يصل جسم الطلب في هذه المرحلة، ويُرفَض الوعد إن لم تكن fetch قادرةً على إنجاز طلب HTTP لمشاكل في الشبكة مثلًا، أو لعدم وجود موقع على العنوان المُعطى، ولن تسبب حالات HTTP غير العادية مثل 404 أو 500 أخطاءً. يمكن معرفة حالة طلب من خصائص الاستجابة: status: رمز الحالة status code لطلب HTTP مثل الرمز 200. ok: قيمة منطقية "true" عندما يكون رمز الحالة بين 200 و299. إليك المثال التالي: let response = await fetch(url); if (response.ok) { // إن كان رمز الحالة بين 200-299 // الحصول على جسم الطلب let json = await response.json(); } else { alert("HTTP-Error: " + response.status); } الثانية: استخدام استدعاء إضافي للحصول على جسم الطلب، ويؤمن الكائن Response عدة توابع مبنية على الوعد للوصول إلى جسم الطلب وبتنسيقات مختلفة: ()response.text: لقراءة الاستجابة وإعادة نص. ()response.json: يفسِّر النص وفق تنسيق JSON. ()response.formData: يعيد الاستجابة على شكل كائن FormData سنشرحه في الفقرة التالية. ()response.blob: يعيد الاستجابة على شكل كائن البيانات الثنائية Blob. ()response.arrayBuffer: يعيد الاستجابة على شكل كائن ArrayBuffer وهو تمثيل منخفض المستوى للبيانات الثنائية. الكائن response.body وهو كائن من الصنف ReadableStream يسمح بقراءة جسم الطلب كتلةً كتلةً، وسنعرض مثالًا عن ذلك لاحقًا. لنحاول على سبيل المثال الحصول على كائن JSON من آخر نسخة معتمدة لموقع الدورة التعليمية هذه على GitHub: let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits'; let response = await fetch(url); let commits = await response.json(); // Json قراءة الاستجابة على شكل شيفرة alert(commits[0].author.login); See the Pen JS-P3-Fetch-ex02 by Hsoub (@Hsoub) on CodePen. كما يمكن فعل ذلك من خلال الوعود الصرفة دون استخدام await: fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits') .then(response => response.json()) .then(commits => alert(commits[0].author.login)); See the Pen JS-P3-Fetch-ex03 by Hsoub (@Hsoub) on CodePen. استخدم ()await response.text للحصول على نص الطلب بدلًا من ()json.: let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits'); let text = await response.text(); // قراءة جسم الاستجابة على شكل نص alert(text.slice(0, 80) + '...'); See the Pen JS-P3-Fetch-ex04 by Hsoub (@Hsoub) on CodePen. لنستعرض مثالًا عن قراءة بيانات بالصيغة الثنائية، ونحضر صورةً ما ونظهرها: let response = await fetch('https://javascript.info/article/fetch/logo-fetch.svg'); let blob = await response.blob(); // Blob تنزيل على شكل // <img> إنشاء عنصر let img = document.createElement('img'); img.style = 'position:fixed;top:10px;left:10px;width:100px'; document.body.append(img); // إظهاره img.src = URL.createObjectURL(blob); setTimeout(() => { // إخفاءه بعد ثلاث ثوان img.remove(); URL.revokeObjectURL(img.src); }, 3000); See the Pen JS-P3-Fetch-ex05 by Hsoub (@Hsoub) on CodePen. let text = await response.text(); // انتهاء معالجة جسم الطلب let parsed = await response.json(); // سيخفق، فقد جرت المعالجة وانتهت ترويسات الاستجابة يمكن الحصول على ترويسات الاستجابة على شكل كائن ترويسات شبيه بالترابط Map من خلال الأمر response.headers، ولا يُعَد الكائن ترابطًا تمامًا، لكنه يمتلك توابع مماثلةً للحصول على ترويسات من خلال اسمها أو بالمرور عليها: let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits'); // الحصول على ترويسة واحدة alert(response.headers.get('Content-Type')); // application/json; charset=utf-8 // المرور على الترويسات كلها for (let [key, value] of response.headers) { alert(`${key} = ${value}`); } See the Pen JS-P3-Fetch-ex06 by Hsoub (@Hsoub) on CodePen. ترويسات الطلب يمكن استخدام خيار الترويسات headers لإعداد ترويسة الطلب في الدالة featch، إذ تمتلك كائنًا يضم الترويسات المُرسَلة كالتالي: let response = fetch(protectedUrl, { headers: { Authentication: 'secret' } }); لكن هناك قائمة من ترويسات HTTP المنوعة التي لا يمكن ضبطها: Accept-Charset وAccept-Encoding Access-Control-Request-Headers Access-Control-Request-Method Connection Content-Length Cookie وCookie2 Date DNT Expect Host Keep-Alive Origin Referer TE Trailer Transfer-Encoding Upgrade Via Proxy-*‎ Sec-*‎ تضمن هذه الترويسات ملاءمة طلبات HTTP وأمانها، لذلك يتحكم فيها المتصفح حصرًا. طلبات الكتابة POST لإرسال طلب POST أو طلب من أي نوع لا بدّ من استخدام خيارات fetch: method: نوع طلب HTTP مثل HTTP-POST. body: ويمثل جسم الطلب وقد يكون: نصًا: بتنسيق JSON مثلًا. كائن FormData لإرسال بيانات على شكل form/multipart. كائن Blob أو BufferSourceلإرسال بيانات ثنائية. URLSearchParams لإرسال البيانات بتشفير x-www-form-urlencoded، وهو نادر الاستخدام. يُستخدم تنسيق JSON غالبًا، حيث تُرسل الشيفرة التالية الكائن user وفق تنسيق JSON مثلًا: let user = { name: 'John', surname: 'Smith' }; let response = await fetch('https://javascript.info/article/fetch/post/user', { method: 'POST', headers: { 'Content-Type': 'application/json;charset=utf-8' }, body: JSON.stringify(user) }); let result = await response.json(); alert(result.message); لاحظ ضبط الترويسة Content-Type افتراضيًا على القيمتين text/plain;charset=UTF-8 إذا كان جسم الطلب على شكل نص، لكن طالما أننا سنرسل البيانات بصيغة JSON، فسنستخدم الخيار headers لإرسال الترويسة application/json بدلًا عن text/plain كونها تمثل المحتوى الصحيح للبيانات. إرسال صورة يمكن إرسال بيانات ثنائية عبر الدالة fetch باستخدام الكائنات Blob أو BufferSource، سنجد في المثال التالي معرّف لوحة رسم <canvas> التي يمكننا الرسم ضمنها بتحريك الفأرة، ومن ثم إرسال الصورة الناتجة إلى الخادم عند النقر على الزر "submit": <body style="margin:0"> <canvas id="canvasElem" width="100" height="80" style="border:1px solid"></canvas> <input type="button" value="Submit" onclick="submit()"> <script> canvasElem.onmousemove = function(e) { let ctx = canvasElem.getContext('2d'); ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); }; async function submit() { let blob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png')); let response = await fetch('/article/fetch/post/image', { method: 'POST', body: blob }); // يستجيب الخادم بتأكيد وصول البيانات وبحجم الصورة let result = await response.json(); alert(result.message); } </script> </body> ستظهر النتيجة كالتالي: See the Pen JS-P3-Fetch-ex07 by Hsoub (@Hsoub) on CodePen. لاحظ أننا لم نضبط هنا قيمة الترويسة Content-Type يدويًا، لأنّ الكائن Blob له نوع مضمَّن (هو image/png في حالتنا، كما ولّده التابع toBlob)، وسيمثّل هذا النوع قيمة الترويسة Content-Type في كائنات Blob. يمكن كتابة الدالة ()submit دون استخدام الصيغة async/await كالتالي: function submit() { canvasElem.toBlob(function(blob) { fetch('https://javascript.info/article/fetch/post/image', { method: 'POST', body: blob }) .then(response => response.json()) .then(result => alert(JSON.stringify(result, null, 2))) }, 'image/png'); } استخدام الكائن FormData لإرسال النماذج يمكننا الاستفادة من الكائن FormData لإرسال نماذج HTML مع ملفات أو بدونها، بالإضافة إلى حقول إضافية. وكما قد تخمِّن؛ يمثل هذا الكائن بيانات نماذج HTML، وإليك صيغة الدالة البانية له: let formData = new FormData([form]); سيتحكم الكائن FormData تلقائيًا بحقول العنصر form إذا استُخدم في مستند HTML، وما يميز الكائن FormData هو أنّ توابع إرسال الطلبات واستقبالها عبر الشبكة مثل Fetch ستقبله مثل جسم للطلب، إذ يُشفَّر ويُرسَل بترويسة قيمتها Content-Type: multipart/form-data، وتبدو العملية بالنسبة إلى الخادم مثل إرسال عادي لنموذج. إرسال نموذج بسيط لنرسل أولًا نموذجًا بسيطًا، وسيظهر في مثالنا هذا في نموذج من سطر واحد: <form id="formElem"> <input type="text" name="name" value="John"> <input type="text" name="surname" value="Smith"> <input type="submit"> </form> <script> formElem.onsubmit = async (e) => { e.preventDefault(); let response = await fetch('https://javascript.info/article/formdata/post/user', { method: 'POST', body: new FormData(formElem) }); let result = await response.json(); alert(result.message); }; </script> وستكون النتيجة كالتالي: See the Pen JS-P3-FormData-ex01 by Hsoub (@Hsoub) on CodePen. لا توجد شيفرة خاصة بالخادم في هذا المثال، لأنها خارج نطاق هذه الدورة التعليمية، حيث سيقبل الخادم الطلب HTTP-POST ويستجيب بالرسالة "User saved" أي "خُزّن المستخدم". توابع الكائن نستخدم عددًا من التوابع لتعديل الحقول في الكائن FormData: (formData.append(name, value: يُضيف حقلًا بالاسم name قيمته هي value. (formData.append(name, blob, fileName: يضيف حقلًا كما لو أنه العنصر <"input type="file>، حيث يحدد الوسيط الثالث للتابع fileName اسم الملف -وليس اسم الحقل- كما لو أنه اسم لملف في منظومة ملفات الجهاز. (formData.delete(name: يزيل حقلًا محددًا بالاسم name. (formData.get(name: يعطي قيمة الحقل المحدد بالاسمname. (formData.has(name: إذا وجد حقل بالاسم name فسيعيد القيمة true وإلا false. يمكن أن يحوي النموذج العديد من الحقول التي لها نفس الاسم، لذلك سينتج عن الاستدعاءات المختلفة لضم append الحقول حقولًا لها نفس الاسم. وسنجد التابع set الذي له صيغة append نفسها، لكنه يزيل جميع الحقول التي لها اسم محدد name، ثم يضيف الحقل الجديد، وبالتالي سنضمن وجود حقل وحيد بالاسم name، تشبه باقي التفاصيل التابع append. (formData.set(name, value (formData.set(name, blob, fileName. يمكن أيضًا إجراء تعداد على عناصر الكائن FormData باستخدام الحلقة for..of: let formData = new FormData(); formData.append('key1', 'value1'); formData.append('key2', 'value2'); // قائمة من الأزواج مفتاح/قيمة for(let [name, value] of formData) { alert(`${name} = ${value}`); // key1 = value1, then key2 = value2 } See the Pen JS-P3-FormData-ex02 by Hsoub (@Hsoub) on CodePen. إرسال نموذج مع ملف يُرسَل النموذج دائمًا بحيث تكون ترويسة المحتوى مثل التالي Content-Type: multipart/form-data، وتسمح هذه الطريقة في الترميز بإرسال الملفات، أي ستُرسَل الملفات التي يحددها العنصر <"input type="file> أيضًا بشكل مشابه للإرسال الاعتيادي للنماذج، إليك مثالًا عن ذلك: <form id="formElem"> <input type="text" name="firstName" value="John"> Picture: <input type="file" name="picture" accept="image/*"> <input type="submit"> </form> <script> formElem.onsubmit = async (e) => { e.preventDefault(); let response = await fetch('https://javascript.info/article/formdata/post/user-avatar', { method: 'POST', body: new FormData(formElem) }); let result = await response.json(); alert(result.message); }; </script> ستظهر النتيجة كالتالي: See the Pen JS-P3-FormData-ex03 by Hsoub (@Hsoub) on CodePen. إرسال ملف يحتوي على كائن بيانات ثنائية يمكن أن نرسل بيانات ثنائيةً مولّدةً تلقائيًا، مثل الصور على شكل كائن بيانات Blob، وبالتالي يمكن تمريره مباشرةً مثل المعامل body للدالة Fetch كما رأينا في الفقرة السابقة، ومن الأنسب عمليًا إرسال صورة لتكون جزءًا من نموذج له حقول وبيانات وصفية Metadata وليس بشكل منفصل، إذ يُلائم الخوادم عادةً استقبال نماذج مشفرة مكونة من أجزاء متعددة أكثر من بيانات ثنائية خام. يُرسل المثال التالي صورةً مرسومةً ضمن العنصر <canvas>، بالإضافة إلى بعض الحقول على شكل نموذج باستخدام الكائن FormData: <body style="margin:0"> <canvas id="canvasElem" width="100" height="80" style="border:1px solid"></canvas> <input type="button" value="Submit" onclick="submit()"> <script> canvasElem.onmousemove = function(e) { let ctx = canvasElem.getContext('2d'); ctx.lineTo(e.clientX, e.clientY); ctx.stroke(); }; async function submit() { let imageBlob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png')); let formData = new FormData(); formData.append("firstName", "John"); formData.append("image", imageBlob, "image.png"); let response = await fetch('https://javascript.info/article/formdata/post/image-form', { method: 'POST', body: formData }); let result = await response.json(); alert(result.message); } </script> </body> وتظهر النتيجة كالتالي: See the Pen JS-P3-FormData-ex04 by Hsoub (@Hsoub) on CodePen. لاحظ كيف يُضاف الكائن Blob الذي يمثل الصورة: formData.append("image", imageBlob, "image.png"); وهذا الأسلوب مشابه لاستخدام العنصر ضمن نموذج، حيث يرسل الزائر الملف الذي يحمل الاسم "image.png" (الوسيط الثالث) والذي يحمل البيانات التي يحددها imageBlob (الوسيط الثاني) انطلاقًا من منظومة الملفات، ويقرأ الخادم بيانات النموذج وكذلك الملف كما لو أنها عملية إرسال نموذج اعتيادية. خلاصة يتكون طلب إحضار بيانات تقليدي من استدعاءين باستخدام الصيغة await: let response = await fetch(url, options); // يُنفَّذ مع ترويسة الاستجابة headers let result = await response.json(); // JSON قراءة جسم الطلب بتنسيق أو دون الصيغة await: fetch(url, options) .then(response => response.json()) .then(result => /* process result */) وتتمثل خصائص الاستجابة في الآتي: response.status: رمز حالة HTTP للاستجابة. response.ok: يأخذ القيمة "true" إذا كانت قيمة رمز الحالة بين 200-299. response.headers: تعيد كائنًا شبيهًا بالترابط Map يضم ترويسات HTTP. توابع الحصول على جسم الاستجابة: ()response.text: لقراءة الاستجابة وإعادة نص. ()response.json: يفسر النص وفق تنسيق JSON. ()response.formData: يعيد الاستجابة على شكل كائن FormData. ()response.blob: تعيد الاستجابة على شكل كائن بيانات ثنائية Blob. ()response.arrayBuffer: يعيد الاستجابة على شكل كائن ArrayBuffer وهو تمثيل منخفض المستوى للبيانات الثنائية. خيارات Fetch التي تعرفنا عليها حتى الآن: method: نوع طلب HTTP. headers: كائن يضم ترويسات الطلب، ويجب الانتباه إلى الترويسات التي يُمنع استخدامها. body: البيانات التي ستُرسل (جسم الطلب) على شكل string أو FormData أو BufferSource أو Blob أو UrlSearchParams. وسنتعرف على خيارات أخرى في الفصل التالي. تُستخدم الكائنات FormData للتحكم بنماذج وإرسالها باستخدام fetch أو أي دوال لإرسال الطلبات عبر الشبكة، ويمكن إنشاؤها بالأمر (new FormData(form انطلاقًا من نموذج HTML موجود، أو إنشاؤها دون نموذج ثم نضيف إليه الحقول باستخدام التوابع: (formData.append(name, value (formData.append(name, blob, fileName (formData.set(name, value (formData.set(name, blob, fileName لاحظ هاتين الميزتين: يزيل التابع set الحقول التي لها نفس الاسم، بينما لا يفعل ذلك التابع append، وهذا هو الاختلاف الوحيد بينهما. لا بدّ من استخدام صيغة تضم ثلاثة وسطاء لإرسال الملف، آخرها اسم الملف والذي يؤخذ عادةً من منظومة ملفات المستخدم من خلال العنصر <"input type="file>. من التوابع الأخرى: (formData.delete(name (formData.get(name (formData.has(name تمارين إحضار بيانات مستخدمين من GitHub أنشئ دالةً غير متزامنة "async" باسم (getUsers(names للحصول على مصفوفة من سجلات الدخول Logins على GitHub، وتحضر المستخدمين أيضًا، ثم تعيد مصفوفةً بأسماء المستخدمين على GitHub. سيكون العنوان الذي يحوي معلومات مستخدم معين له اسم مستخدم محدد USERNAME هو: api.github.com/users/USERNAME. ستجد مثالًا تجريبيًا وضعناه في نمط الحماية sandbox يوضح ذلك. تفاصيل مهمة: ينبغي أن يكون هناك طلب إحضار واحد لكل مستخدم. لا ينبغي أن ينتظر أي طلب انتهاء طلب آخر، لكي تصل البيانات بالسرعة الممكنة. في حال إخفاق أي طلب، أو عدم وجود مستخدم بالاسم المُعطى، فينبغي أن تعيد الدالة القيمة "null" في المصفوفة الناتجة. افتح التمرين في بيئة تجريبية الحل إليك حل التمرين: نفِّذ التعليمة التالية لإحضار مستخدم: fetch('https://api.github.com/users/USERNAME') استدع التابع ()json. لقراءة الكائن JS، إن كان رمز الحالة المرافق لاستجابة الخادم هو 200. في الحالة التي تخفق فيها تعليمة الإحضار fetch أو لم يكن رمز الحالة 200، أعد القيمة null في المصفوفة الناتجة. إليك الشيفرة: async function getUsers(names) { let jobs = []; for(let name of names) { let job = fetch(`https://api.github.com/users/${name}`).then( successResponse => { if (successResponse.status != 200) { return null; } else { return successResponse.json(); } }, failResponse => { return null; } ); jobs.push(job); } let results = await Promise.all(jobs); return results; } ملاحظة: يرتبط استدعاء التابع then. بمباشرة بالدالة fetch، وبالتالي لا تنتظر عمليات إحضار أخرى لتنتهي عندما تصلك الاستجابة على أحدها بل إبدأ بقراءة الاستجابة مستخدمًا ()json.. إن استخدمت الشيفرة التالية : await Promise.all(names.map(name => fetch(...))) ثم استدعيت ()json. لقراءة النتائج، فقد يكون عليك الانتظار لتنتهي جميع عمليات الإحضار. ستضمن قراءة نتيجة كل عملية إحضار بمفردها إن استخدمت مباشرة ()json. مع fetch. فما عرضناه كان مثالًا عن فائدة واجهة الوعود البرمجية منخفضة المستوى low-level Promise API حتى لو استخدمنا async/await. إليك الحل في بيئة تجريبية مع الاختبارات ترجمة -وبتصرف- للفصلين popups and window methods و FormData من سلسلة The Modern JavaScript Tutorial

ربما تفرح إذا رأيت إحصاءات الزيارات لموقعك الذي تعبت في تصميمه ليحوّل الزوار إلى عملاء، لكنّك تلاحظ أنّ أولئك الزوار لا يتحولون إلى عملاء لسبب ما. اكتشف الأسباب الكامنة وراء ذلك عبر هذا الدليل. تعدّ استمارة التواصل جزءًا مهمًا من رحلة الزوار داخل موقعك. حتى لو أقنعت الزوار بشراء المنتج الذي تبيعه فقد تأتي الاستمارة لتدمّر تجربتهم في الموقع إن كانت تحتوي على خطوات كثيرة ومحيّرة أو أزرار لا تعمل، أو إنْ كانت غير منظّمة، بل إن مكان تلك الاستمارة في الموقع قد يدمّر تجربة الاستخدام. سأشرح لك في هذا المقال ست قواعد لتصميم استمارة تواصل تشجع زوارك على التحوّل إلى عملاء، إذ توجد قواعد تكاد تكون ثابتة لضمان عمل الاستمارة على نحو سليم؛ فقد أظهرت دراسة لتتبع عين المستخدم من جوجل في 2014 أن اتّباع خطوط التصميم الأساسية يحسّن كثيرًا من تجربة الاستخدام، وللحديث بدقة أكبر، فإن 78% من المستخدمين أكملوا الاستمارة وأرسلوها من أول محاولة حين تلتزم تلك الاستمارة بالقواعد أدناه، بينما أكمل 42% منهم فقط الاستمارة لمّا لم تطبق بعضٌ من تلك القواعد. 1. المحاذاة يهتم الناس بطول الاستمارة التي يملؤونها، وبسبب هذا يلجأ المصممون إلى خيارات سيئة. مثلًا، قد ترى أن استمارة كالتي بالأسفل من موقع BrainTraffic طويلة نوعًا ما، وتحاول إصلاح مشكلة الطول هذه بجعل حقول الإجابة بجانب الأسئلة وليس أسفلها. إلّا أنّ خبراء تجربة المستخدم سيعترضون على هذا الحلّ، إذْ أنه يعرقل قراءة الاستمارة بسلاسة، وكذلك الأمر إنْ أردت أن تجعل الحقول بجانب بعضها أفقيا. عمومًا، ستحدث مشاكل في تجربة الاستخدام إن خالفت المنهج الرأسي في ترتيب حقول الاستمارة، فقد نُشرت سلسلة من القواعد العامة بشأن تصميم استمارات الويب سُمِّيَت "واجهات مستخدم بسيطة لكن مهمة في الويب: 20 قاعدة لتصميم استمارات ويب يمكن استخدامها"، وقد اعتمدت جوجل تلك القواعد في 2014 واختبرتها مع دراسة تتبع العين التي ذكرناها. وقد استنتجوا أن الاستمارات التي تمت محاذاتها إلى اليسار - في اللغة الإنجليزية - ووضعت حقولها فوق بعض بشكل رأسي كانت نتائجها أفضل من حيث تجربة الاستخدام. إليك الآن ما يجب أن تفعله كي تطبق قاعدة المحاذاة على استماراتك: اجعل كل الحقول وكذلك أزرار الإجراءات محاذية لليسار في حالة اللغة الإنجليزية، ولليمين في حالة العربية. لا تجعل الحقول التي تتعلق بجزء معين بجانب بعضها أفقيًا، يمكنك أن ترتّب الاستمارة على نحو منطقي من حيث ترتيب الموضوعات والأجزاء التي فيها، لكن كل سؤال أو حقل يجب أن يكون رأسيا. يجب أن تُعرَض الأسئلة متعدّدة الاختيارات (أقل من 6 خيارات) في قائمة رأسية من النقاط، وليس في قائمة منسدلة. وهو ما يحسّن تجربة الاستخدام، ويساعدك على ملء الهوة بين تجربة الاستخدام في الأجهزة المكتبية والأجهزة المحمولة، خاصة إن كنت تنوي تحديث مواقعك لتوافق دليل جوجل للتصميم من أجل الأجهزة المحمولة أولا. 2. أدرج كل الحقول التي لها علاقة قد تظن أن الاستمارة كلما كانت أقصر كانت أفضل، أليس كذلك؟ في الواقع ليس دائمًا، فالمهم أن تقدم للمستخدمين كل الحقول المطلوبة. قال مايكل أجارد، المسؤول عن تحسين معدلات التحويل في Unbounce، في كلمة له في 2015 أنه وفريقه أرادوا أن يعرفوا ما الذي سيحدث لو قصّروا استمارة التواصل التالية: فكما ترى، أزالوا ما اعتقدوا أنها حقول غير ضرورية من أجل تسريع عملية ملء الاستمارة، لكن بنهاية الاختبار اكتشفوا هبوطًا مقداره 14% في معدلات التحويل حين استخدموا القائمة القصيرة. ثم إنهم درسوا أي الحقول تفاعل معها المستخدمون في الاستمارة، عبر ترتيب الحقول في الاستمارة وإعادة صياغة النصوص الإرشادية والأسئلة في هذه الحقول لتكون أوضح، ثم أعادوا الاختبار ليجدوا 19% زيادة في التحويل. لكن هذه الطريقة قد لا تنجح دائمًا، فقد وجدت Expedia مثلًا أن حقلًا في استمارة التواصل بعنوان "الشركة" كان يحيّر المستخدمين رغم أنه لم يكن إجباريًا، إذ لم يفهم المستخدمون المراد منه ومن ثمّ كتبوا فيه معلومات خاطئة أدت إلى رفض عمليات الشراء التي قاموا بها، وقد أزالت Expedia هذا الحقل فزادت أرباحها 12 مليون دولار في العام التالي. أقترح عليك أن تبدأ بالحقول الأساسية أثناء تصميم استمارة التواصل، كما فعلت QuickBooks في الصورة التالية: وإن وجدت أن معدلات التحويل لا تتماشى مع التوقعات فارجع إلى الإحصاءات وانظر إن كانت تستطيع تحديد أي الحقول تمنع المستخدمين من إكمال الاستمارة. 3. تبسيط المُدخَلات يجب أن تكون الاستمارة جاهزة لتيسير إدخال البيانات بغض النظر إن كان مستخدموك يتفاعلون مع استمارتك باستخدام حاسوب مكتبي أو جهاز محمول، أو ما إن كانوا يحتاجون إلى تقنيات مساعِدة لملء هذه الاستمارة أم لا. إليك أمور يجب أن تعيها. الترتيب الآلي لمستخدمي الأجهزة المكتبية ومن يحتاجون أدوات مساعدة (قابلية الوصول)، تأكد من تفعيل الترتيب المنطقي للحقول، بحيث تنقل الاستمارة التركيز آليًا إلى الخطوة التالية. أقنعة الإدخال بدلًا من إجبار المستخدمين على تخمين الصيغة المناسبة لبعض الحقول، يمكنك أن تهيئها بنفسك لتحتوى على أقنعة إدخال (Input masks) تضع البيانات في صيغ جاهزة آليًا أثناء إدخال المستخدم للبيانات. وهذا النمط من التهيئة الآلية سيقود إلى نقرات أقل ومعدل إكمال أسرع للاستمارات، خاصة إن كان حقلًا مثل رقم الهاتف أو رقم بطاقة الائتمان مقسّمًا إلى حقول متعددة. أنواع الإدخال ستساعد أنواع الإدخال في html المستخدمين على أن يروا الخيارات المناسبة في لوحة المفاتيح أثناء كتابتهم على الهواتف، مما يوفر عليهم عناء كتابة كل شيء من الصفر (مثل com. للبريد). لاحظ كيف تتغير لوحة المفاتيح من استمارة التواصل في Elluminati بناءً على كل حقل. الإكمال الآلي لجوجل فعّل الإكمال الآلي من ملحق Address Autocomplete من جوجل بدلًا من كتابة شفرة مخصصة لكل حقل كي تهيئها وفق المعيار الذي تحتاجه، فهذا سيوفر عليك عناء التعامل مع الأخطاء النحوية والإملائية إضافة إلى العناوين التي لم تكتب بصورة صحيحة، كما ستريح زوارك من كتابة أغلب هذه المعلومات بأنفسهم. المنطق الظرفي (Conditional Logic) إن كنت قلقًا من طول استمارتك، خاصة إن كنت تستهدف عدة شرائح من المستخدمين، فيمكنك استخدام المنطق الظرفي لتقصيرها، فلن يظهر للمستخدم الجزء التالي في الاستمارة إلا إذا نقر على الخيار الخاص بحالته هو أو احتياجه، فتظهر له حينها الحقول المرتبطة بهذا الخيار، انظر الصورة التالية للتوضيح. توفّر أغلب ملحقات إنشاء الاستمارات، مثل Forminator، امتدادات لهذا الغرض. شريط التقدّم Progress Bar يشجّع هذا الشريط المستخدم على إتمام عملية التسجيل إذ يريه مكانه من نهاية الاستمارة بالتحديد. 4. أرشد المستخدم إلى تصحيح الخطأ بوضوح أدرك أني أبدو وكأني أجرك إلى تبني البساطة في استمارتك منذ أول المقال، وأن القاعدة التي نحن بصددها تخالف هذا الاتجاه، لكني أريدك أن تعطيها سمعك وعقلك لأهميتها الشديدة، وسأشرح لك الآن ما أقصد. لنقل إن لديك استمارة تواصل سهلة وبسيطة، وملأها المستخدم بناء على ما تقترحه عناوين الحقول ثم ضغط على زر الإرسال فخرجت له تلك الرسالة الحمراء المزعجة التي تقول له لقد أخطأت!عد مرة أخرى وأصلح المدخلات الخاطئة ثم أعد الإرسال. ولعلك قابلت مثل تلك الحالة بنفسك وتعرف كمّ الضيق الذي يصيبك حينها، خاصة حين تمحو بعض البيانات بعد رسالة الخطأ رغم أنك أدخلتها بالفعل. وهكذا، بدلًا من ترك المستخدم يخمّن ما الذي يجب إصلاحه وكيف، تقدّم أنت خطوة وفصّل كل شيء بوضوح أثناء إدخال المستخدم للبيانات كما يلي: زوّد استمارتك بخاصية التركيز الآلي للحقول (Field Focus)، خاصة على الهواتف، كي يعرف المستخدم مكانه بالتحديد أثناء ملء الاستمارة. اكتب أي شروط لصياغة النصوص داخل كل حقل إن لم تستخدم أقنعة الإدخال. بيّن بوضوح أي حقل يمكن تجاوزه (غير إلزامي)، واستخدم الكلمة في ذلك بوضوح عوضًا عن الاكتفاء بالنجمة الصغيرة. امنح المستخدم القدرة على إظهار أو إخفاء حقل كلمة السر أثناء إدخاله. أظهر رسالة خطأ بمجرد حدوثه، ولا تنتظر حتى نهاية إدخال المستخدم للبيانات وانتقاله إلى ما بعده كي تظهرها له. توضح هذه الاستمارة من Hubspot الطريقة الصحيحة لمعالجة أخطاء المستخدم في استمارة التسجيل. تابَعتْ جوجل في دراستها عن تتبع عين المستخدم مع نفس المستخدمين الذين أجروا الاختبار، ووجدوا أنهم اشتكوا من غياب الصياغة المناسبة في الحقول، فتقترح جوجل الآن أن تضع إرشادات واضحة في الاستمارة، ورسائل خطأ واضحة، ويجب أن تحدد الحقول التي بها أخطاء، وتلوّن نص الرسالة وتبرزه ولا تكتفي برسالة بخط أحمر فقط. 5. تجنب النصوص الإرشادية داخل الحقول تبدو النصوص الإرشادية التي تستخدم داخل الحقول كالتالي: لا تزال هذه الاستمارة من شركة Target تحتوي مشاكل بالنسبة لمن يحتاجون لأدوات مساعدة في القراءة (قابلية الوصول)، رغم إصلاح مشاكل متعلّقة بالنصوص الإرشادية. أرأيت كيف وضعَت شركة Target النصوص الإرشادية داخل الحقول في الصورة السابقة؟ تختفي هذه النصوص حين ينقر المستخدم داخل الحقل، وتعالج Target هذه المشكلة بأنْ تنقل النص الإرشادي إلى أعلى إطار الحقل (انظر مثلًا email address في الصورة). وبرغم هذا فإن خبراء تجربة الاستخدام، مثل مجموعة Norman، يقولون إن هذا الأسلوب سيء في تصميم تجربة استخدام للاستمارات، وإليك أسبابًا تبيّن المشاكل التي قد تطرأ من اتّباع ذلك الأسلوب: بالنسبة للمستخدمين الذين يعملون على مهام أخرى أثناء إدخال البيانات أو يفقدون تركيزهم بسهولة أو ينتقلون بسرعة إلى الحقول التالية، فإن هذا الأسلوب يمثل مشكلة لهم، إذ يضطرون إلى العودة للخطوة السابقة في كل مرة من أجل رؤية ما كان مكتوبًا في الحقل قبل أن ينتقلوا إليه. النصوص الإرشادية التي تختفي تمنع المستخدم من العودة للتأكد إن كان قد أدخل بيانات صحيحة أم لا، لأنه لن يرى ما كان مكتوبًا للإيضاح إذ اختفى بعد إدخال البيانات. النص المكتوب بلون رمادي خفيف لا يُقرأ بسهولة. قد يخطئ المستخدم ويترك الحقول التي بها نصوص إرشادية فارغة ظنًا منه أنه أدخل البيانات فيها بالفعل، فيتركها ويرسل الاستمارة فتظهر له رسائل خطأ. بعض برامج قراءة الشاشة لا تستطيع قراءة النص الإرشادي المكتوب داخل حقول الاستمارة. ينجذب المستخدم - وفقًا لمجموعة نورمان التي ذكرتها قبل قليل - إلى الحقول الفارغة أكثر من تلك التي تحتوي نصوصًا إرشادية، وقد تخشى أن تطول استمارتك بسبب وضع اللصائق والإرشادات، لكن اعلم أن تجربة الاستخدام ستتحسن كثيرا. 6. انتبه إلى تصميم الأزرار احرص دائمًا على محاذاة زر الإجراء الرئيسي مع باقي حقول الاستمارة حتى لو لم يبدُ ذلك منطقيًا، فإن كان لديك مثلًا زر "التالي" و"رجوع" فيجب أن يكون زر التالي محاذيًا لبداية حقول الاستمارة (أقصى اليمين في حالة اللغة العربية، والعكس في حالة اللغة الإنجليزية)، إذ أنه المكان الذي سينظر فيه المستخدم افتراضيًا حين يصل إلى تلك الخطوة. تجنب أيضًا استخدام أزرار مثل "إعادة تعيين – مسح – إلغاء"، ذلك أن المستخدم ينقر على أول زر يراه دون تفكير ظنًا منه أنه زر الإرسال، ولو حدث ذلك ومُحيَت جميع البيانات التي أدخلها من قبل فقد يترك موقعك كلية دون أن يسجل فيه أو يشترك. وقد وُجد في اختبار أ/ب أسفله من Unbounce، أن النسخة التي بها نص يعرض القيمة التي سيحصل عليها المستخدم من تسجيله كانت أكثر نجاحًا أكثر في معدلات التحويل من النسخة الأولى بنسبة 31%. أخيرًا، استخدم علامات التوثيق متى كان ذلك مناسبًا، ولديك مثال على ذلك في الرسالة التي تقول إنك لا تحتاج إلى التسجيل ببطاقة ائتمان في الاستمارة أدناه من CoSchdual، إذ أنها تشجع المستخدم على التسجيل. لكن احذر أن تستخدم علامات التوثيق في غير محلها حتى لا يظن المستخدم أن عليه تقديم بيانات حساسة في حين أنك قد لا تطلب ذلك منه، كما هو موضح في الاختبار التالي: بينما تظن أن شعار TRUSTe قد يزيد من معدل التسجيل والتحويل، إلا أن النسخة على اليمين حصلت على معدل يزيد ب 13% في معدل إكمال الاستمارة، إذ اعتقد المستخدمون في النسخة اليسرى أنهم قد يضطروا إلى إدخال بيانات خاصة أو دفع أموال عبر ذلك الموقع. خاتمة لا أقول في هذا المقال أن استمارات التواصل على قالب واحد يمكن استخدامه لكل الحالات في السوق، فكل موقع، وكذلك الشركة التي يتبع لها الموقع، لديه أهداف مختلفة، ومن ثم فإن استمارات التواصل فيه يجب أن تخدم تلك الأهداف خاصة. لتنفيذ الخطوات التي ذكرناها في هذا المقال تحتاج إلى أحد أمرين، إما أن تستخدم ملحقًا جاهزًا يعينك على إنشاء استمارة مخصصة، أو أن تصمم استماراتك الخاصة، و تذكّر، أياً كان ما تختاره، أنّ المستخدم لا يخشى -ضرورة - الاستمارة الطويلة، وأن الأمر يتعلق بتجربته مع الاستمارة أكثر من طولها. ترجمة - وبتصرف - للمقال 6 Unbreakable Rules for Building the Perfect Contact Form لصاحبته Suzanne Scacca.

تُستخدم النماذج لعمل الاستطلاعات، الإحصائيات، تجميع البيانات أو غيرها من الأغراض. ومن السهل إنشاء النماذج القابلة للتعبئة باستخدام الأدوات التي يوفّرها ميكروسوفت وورد، سواء كنت تريد توزيع نسخ إلكترونية منها أو طباعتها. سنستعرض في هذا الدرس كيفية إنشاء النماذج من مستند فارغ وتخصيصها، بالإضافة إلى كيفية استخدام القوالب الجاهزة. إنشاء نموذج جديد من مستند فارغ يتكون النموذج من مجموعة عناصر نائبة (أو ماسكات مكان Placeholders) لأنّواع مختلفة من المعلومات، وتسمّى في ميكروسوفت وورد "حقول التحكّم بالمحتوى" Content Control Fields والتي تتضّمن مربعات النصوص text box، مربعات الخيار checkbox، القوائم المنسدلة drop-down list، وغيرها. يمكن الوصول إلى أدوات إنشاء النموذج من تبويب المطور Developer. وبما أنّ هذا التبويب غير مفعّل بشكل افتراضي، يجب اولًا أن نقوم بتفعيله بالذهاب إلى ملف File> خيارات Options: من قسم Customize Ribbon، بالتحديد من مجموعة Customize the Ribbon، نؤشر الخيار Developer ثم ننقر على OK: ستتم إضافته مع مجموعة التبويبات القياسية، ويمكننا أن نبدأ الآن بتصميم النموذج. كمثال بسيط، سنقوم بإنشاء نموذج استطلاع لآراء العملاء حول منتج ما، والعناصر التي سيحتويها موضّحة في الصورة أدناه: سنقوم أولًا بإنشاء جدول لاحتواء عناصر النموذج بشكل منظم، ثم ندخل عناوين حقول التحكّم بالمحتوى التي نريد إضافتها (الاسم، اللقب، العمر...): لإدراج أي عنصر تحكّم بالمحتوى، نضع مؤشر الكتابة في المكان المرغوب، ثم نختار العنصر المناسب من مجموعة Controls في تبويب Developer: في هذا المثال سنقوم بإدراج مربّع نص أمام حقل الاسم، لذا سنضع المؤشر في الحقل الفارغ أمامه ثم نختار أحد خياري مربعات النصوص: Rich Text: نص قابل للتنسيق. Plain Text: نص اعتيادي غير قابل للتنسيق. سنختار Plain Text لأنّنا لا نريد من المستخدمين الذين سيملؤون النموذج بتنسيق النص. بشكل افتراضي، سيحتوي مربّع النص على نص إرشادي لكي يعرف المستخدم ما الذي يجب إدخاله في الحقل: لتحرير النص الإرشادي وتخصيصه، ننقر على زر وضع التصميم Design Mode من مجموعة Controls: بعد ذلك نحذف النص الافتراضي وندخل النص المرغوب وننسّقه من أدوات التنسيق في تبويب الصفحة الرئيسية Home: يمكننا أيضًا أن نتحكّم بخصائص مربّع النص، أو أي حقل آخر للتحكّم بالمحتوى، عن طريق مربّع الحوار Content Control Properties. للقيام بذلك، نحدد مربّع النص ثم ننقر على زر Properties من مجموعة Controls: تختلف الخصائص باختلاف الحقل الذي قمنا بتحديده، فلمربع النص مثلا، يمكننا إضافة عنوان Title يظهر عند النقر على المربع عليه من قبل المستخدم، اختيار مظهر المربع من قائمة Show As، تغيير لون حدود المربع من قائمة Color، أو تقييد تحرير/حذف مربع النص من قسم Locking. سنقوم بتغيير لون إطار المربع إلى الأزرق ونؤشر الخيار Content control cannot be deleted لمنع المستخدمين من حذف هذا الحقل: وللمحافظة على الاتساق في التنسيق والخصائص، سنقوم بنسخ مربع النص ولصقه أمام عناصر النموذج المتبقية التي تحتاج إلى مربع نص ("اللقب"، "المدينة"، "الدولة"، و"اذكر السبب")، مع مراعاة تخصيص النص الإرشادي لكل عنصر: الخطوة التالية هي إنشاء مربعات الخيار لعنصر "الجنس". نضع مؤشر الكتابة أمام حقل "الجنس" ثم ننقر على زر مربع الخيار Check Box من مجموعة Controls: بعد ذلك نكتب نص مربّع الخيار، وهنا يجب ملاحظة أنّه لا يمكن كتابة النص داخل حدود حقل التحكم بالمحتوى، بل يجب أن نضع مؤشر الكتابة خارجًا ثم ندخل النص: نحدّد مربع الخيار ثم ننقر على Properties لتعديل خصائصه. تتوفر لمربعات الخيار نفس خصائص مربعات النص آنفة الذكر، بالإضافة إلى خصائص أخرى مثل رمز المربع المؤشر Checked Symbol ورمز المربع غير المؤشر Unchecked Symbol. سننقر على زر Change لتغيير رمز المربع المؤشر إلى علامة صح بدلا من الرمز الافتراضي علامة ×، ونغيّر لون حدود مربع الخيار ثم ننقر على OK: ننسخ مربع الخيار الذي قمنا بإنشائه ونلصقه أمام حقل "هل توصي الآخرين بشرائه؟" مع مراعات تخصيص نص المربع: الخطوة التالية هي إنشاء القوائم المنسدلة لحقلي "العمر" و"تقييم المنتج". نضع مؤشر الكتابة أمام حقل "العمر" ثم ننقر على زر Drop-Down List من مجموعة Controls: بعد ذلك نحدد حقل التحكم بالمحتوى للقائمة المنسدلة وننقر على Properties لتعديل خصائصه وإضافة عناصر القائمة: سنقوم أولا بتعديل العنصر الأول الافتراضي بتحديده والنقر على زر Modify: بعد ذلك ندخل النص المرغوب في حقل Display name: ثم ننقر على زر Add لإضافة عنصر جديد للقائمة: وندخل اسم العنصر في Display name: نكرر الخطوتين السابقتين حتى ننتهي من إضافة جميع عناصر القائمة المنسدلة، ثم ننقر على OK لإنشاء القائمة المنسدلة: نكرر نفس خطوات إنشاء القائمة المنسدلة لحقل "تقييم المنتج" مع إضافة العناصر المناسبة إلى القائمة. بقي لنا حقل "تاريخ المنتج"، والخيار المناسب له هو إضافة تقويم لمساعدة مستخدم النموذج على اختيار التاريخ. نضع مؤشر الكتابة أمام حقل "تاريخ المنتج" ثم ننقر على زر Date Picker من مجموعة Controls: نفعّل وضع التصميم Design Mode لتغيير النص الإرشادي، ثم ننقر على زر Properties لتعديل خصائص التقويم: يتوفر لحقل التاريخ نفس خصائص الحقول التي ذكرناها سابقًا (العنوان، اللون، المظهر...)، بالإضافة إلى خصائص أخرى كتنسيق التاريخ، نوع التقويم، أو غيرها. نجري التعديلات المرغوبة ثم ننقر على OK لتطبيقها: أصبح نموذجنا الآن جاهزًا للحفظ والإرسال: حماية النموذج يعمل أمر الحماية على منع المستخدمين من إجراء أي تعديل على المستند الذي يحتوي النموذج، ويسمح لهم فقط بإدخال المحتويات في حقول النموذج. لحماية النموذج، ننقر على زر Restrict Editing من تبويب Developer: سيُفتح جزء Restrict Editing، ومنه نؤشر الخيارAllow only this type of editing in the document ، نختار Filling in Forms من القائمة المنسدلة، ثم ننقر على Yes, Start Enforcing Protection: وأخيرًا نقو بإدخال كلمة المرور للحماية مرتين، ثم ننقر على OK. بتطبيق هذه الخطوة ستصبح كل محتويات المستند محمية وغير قابلة للتعديل ما عدا حقول التحكم بالمحتوى للنموذج: لمعرفة المزيد حول حماية المستندات راجع هذا الدرس. استخدام قوالب النماذج الجاهزة إذا لم تكن ترغب في إنشاء النموذج من مستند فارغ، يمكنك استخدام أحد القوالب الجاهزة والتعديل عليها. لاستعراض قوالب النماذج المتوفرة، نذهب إلى File> New، ثم ندخل الكلمة المفتاحية "form" في حقل البحث ونضغط Enter: نتصفح نتائج البحث وننقر على القوالب لمعاينتها، وعند العثور على القالب المناسب ننقر على زر Create: سيتم إنشاء القالب في مستند جديد، ومنه يمكننا أن نبدأ بتعديل حقول التحكّم بالمحتوى الموجودة، أو إضافة حقول جديدة: خاتمة يوفّر وورد خيارات متنوّعة لإنشاء النماذج الإلكترونية القابلة للتعبئة، فبالإضافة إلى حقول التحكم بالمحتوى التي استخدمناها لإنشاء النموذج في المثال المذكور، تتوفر خيارات أخرى كأشرطة التمرير Scroll Bar، أزرار الخيار Option Button، عناصر نائبة للصور، وغيرها. ويمكنك أن تستكشف هذه الخيارات وخصائصها من مجموعة Controls في تبويب Developer.

يقدّم هذا الدرس كيفية إنشاء نموذج Model قاعدي في Laravel ومن ثم استخدامه. النماذج هي الجزء من بنية MVC الذي تُعالَج فيه البيانات وتُنفَّذ عليها قواعد التطبيق. يتطلّب الدرس تثبيت Laravel وإعداده مع قاعدة البيانات. نبدأ بإنشاء النموذج باستخدام أمر artisan على النحو التالي: php artisan make:model Widget -m سمّينا النموذج بـWidget وأضفنا خيار m- لإنشاء التهجير في نفس الوقت. يختزل الأمر بهذه الطريقة الكثير من الوقت ويجعلنا نركّز على الأهم: عمل النموذج. ستجد بعد اكتمال تنفيذ الأمر ملفا باسم Widget.php في مجلّد app المتفرّع عن مجلّد المشروع، وملفًّا للتهجير في المجلّد database/migrations. يظهر اسما الملفّيْن في مخرجات تنفيذ الأمر السّابق. نفتح ملفّ Widget.php للنظر في محتواه: <?php namespace App; use Illuminate\Database\Eloquent\Model; class Widget extends Model { // } هذا كلّ ما يوجد الملف! هيكل نموذج يمكننا الاستفادة منه لإنشاء ما نريد. بالانتقال إلى مجلّد database/migrations نجد ملفًّا يشبه التالي: 2016_03_19_163722_create_widgets_table.php يظهر في بداية اسم الملف ختم زمني بتاريخ إنشائه. يفترض Laravel أن اسم النموذج كلمة مفردة (Widget مثلا) تبدأ بحرف كبير Uppercase، في حين يتوقّع أن يكون اسم الجدول Table جمعًا (widgets) يبدأ بحرف صغير. يمكن تفسير الأمر بأن النموذج يُرجِع نظيرا واحدا لتسجيلات الجدول. إذا نظرنا إلى ملفّ التهجيرات فسنجد أن لدينا قاعدة يمكننا البناء عليها لأمور أكثر تقدّما: use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class CreateWidgetsTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('widgets', function (Blueprint $table) { $table->increments('id'); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::drop('widgets'); } } ينشئ Laravel تلقائيا حقل المعرّف في قاعدة البيانات id ويجعله يتقدّم تلقائيا فور إدراج تسجيلة جديدة في الجدول (autoincrement) وذلك باستخدام الدّالة increments. يضيف Laravel كذلك ختمين زمنيّين لتاريخَيْ إنشاء التسجيلة وتحديثها timestamps. سنضيف عمودا Column جديدا إلى قاعدة البيانات؛ لذا نضيف التعليمة التالية إلى دالّة up ضمن ملفّ التهجير: $table->string('widget_name')->unique(); يضيف السّطر أعلاه عمودا جديدا للجدول باسم widget_name من نوع string ويقيّده بـunique لكي لا توجد تسجيلتان في الجدول بنفس الاسم. تصبح دالّة up في ملف التهجير بعد إضافة العمود على النحو التالي: public function up() { Schema::create('widgets', function (Blueprint $table) { $table->increments('id'); $table->string('widget_name')->unique(); $table->timestamps(); }); } ثم ننفّذ التهجير: php artisan migrate ستلاحظ بعد تنفيذ الأمر إنشاءَ جدول جديد في قاعدة البيانات لديك. بما أننا نخطّط لإدراج تسجيلات إلى قاعدة البيانات بالتطبيق فيجب أن نضيف الخاصيّة التالية إلى النموذج Widget: /** * The attributes that are mass assignable. * * @var array */ protected $fillable = ['widget_name']; تخبر هذه التعليمة Laravel أن العمود widget_name يدعم الإسناد الشّامل Mass assignment (تحديد قيم معطياتٍ عدّةٍ مرة واحدة). إن لم نضف هذه التعليمة فلن يمكننا باستخدام التطبيق إدراجُ تسجيلات جديدة في الجدول. سنستخدم في الدرس التالي النموذج الذي أنشأناه أعلاه مع معمل النماذج Model factory في Laravel لملْء تسجيلات في جدول widgets. ترجمة -وبتصرّف- للمقال How to Make a Model in Laravel 5.1 لصاحبه Bill Keck.

قمنا في الدرس الأول من هذه السلسلة بإنهاء تصميم واجهة مدونة بناءً على مبادئ الخطوط والطباعة (typography) باستخدام برنامج فوتوشوب، وكنا قد استعملنا نظام شبكي (grid) صارم لتخطيط الصفحة. وفي هذا الدرس سنقوم بتحويل ذلك التصميم إلى نموذج HTML5. وفي الدرس التالي والأخير من هذه السلسلة سنقوم بتحويل هذا النموذج إلى قالب ووردبريس كامل. يمكنك الاطلاع على الدرس السابق الذي قمنا فيه بتصميم واجهة المدونة باستخدام الفوتوشوب. وقد قلنا بأن اسم القالب سيكون "Typo" وبأنه سيعتمد بشكل كلي على الـtypography من دون استعمال أي صور حتى يكون التركيز بالكامل على المحتوى. التحضير لبدء التكويدبما أنّ هذا التصميم بسيط ويرتكز بشكل كبير على مبادئ الـtypography فلن يكون هناك الكثير من الصور التي سنحتاج إلى استخراجها من الفوتوشوب، فالملفات الوحيدة التي سنحتاج إلى استخراجها هي الخلفية المزخرفة (background texture) وبعض الأيقونات. مع ذلك وحتى نجعل عملية التكويد سهلة فسوف نقوم باستخراج نُسخ من الأعمدة (columns) والخطوط الشبكية (grid lines) مما يسهل عملية موضعة ومحاذاة العناصر أثناء عملية التكويد. سنقوم بتحويل هذا التصميم باستخدام عناصر HTML5 (مثل <header> ،<nav> ،<section>)، وبذلك فإنّه من الضروري أن تعرف هذه العناصر وفيما إذا كانت مناسبة لهذا التصميم. بنية ملف HTML5<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Typo</title> <link href="style.css" rel="stylesheet" /> <link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic' rel='stylesheet' type='text/css'> <script src="js/scripts.js"></script> </head> <body> <div id="container">يبدأ الملف عادة بـDoctype لتعريف المتصفح بأننا نستخدم HTML5، وهناك أيضًا وسم <head> وبداخله وسم <title> يحتوي على عنوان المدونة ووسم <link> لربط ملف CSS الذي نريد استخدامه. لاحظ أيضًا أننا استعملنا خدمة Google We Fonts للحصول على الخط Droid Serif. من الضروري أن تنتبه أيضًا لأمر ما وهو أنه عندما تريد أن تقوم بتكويد أي صفحة باستخدام وسوم HTML5 فإنه لا يجب عليك دائمًا استخدام وسوم <section> بدلًا من <div>، ففي بعض الأحيان تكون وسوم <div> مناسبة أكثر (كأن تستخدمه كحاوي لباقي العناصر). <header> <h1><a href="#" title="Return to the homepage">Typo</a></h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Archives</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header>أحد الوسوم الجديدة في لغة HTML5 هو <header> ويعد استخدام هذا الوسم من أجل بناء وتكويد ترويسة الموقع أفضل من استخدام وسم <div> وإعطائه id بقيمة "header" كما يفعل الكثير من المطورين. ويمكنك بعد ذلك أن تضع وسم <nav> داخله ليحتوي على القائمة الرئيسية للموقع (main navigation menu). استخدمنا أيضًا وسم <h1> وبداخله وسم <a> ليحتوي على عنوان المدونة (ليعمل وكأنه شعار الموقع). إذا كنت تتذكر عندما صممنا الموقع في فوتوشوب فقد قمنا بوضع رقم بجانب كل عنصر من عناصر القائمة الرئيسية، لذلك قد تعتقد أنه من المناسب استعمال <ol> ولكن من وجهة نظر دلالية (semantically) فهذا غير صحيح لأنه لا يوجد علاقة ترابطية/تتابعية بين تلك العناصر فهي وضعت فقط من أجل تجميل تلك العناصر، وبالتالي سوف نقوم بإضافة هذه الأرقام لاحقًا باستخدام CSS. <div id="content" role="main"> <article> <h2><a href="#">Getting your stock photos seen</a></h2> <p>Lorem ipsum dolor sit amet[...]leo placerat.</p> <ul class="postinfo"> <li>17th October 2011</li> <li>Posted in <a href="#">Articles</a></li> <li><a href="#">Continue Reading &raquo;</a></li> </ul> </article>قد تعتقد أيضًا أن استعمال <section> بدلًا من <div> هو الأنسب، ولكن هذا غير صحيح من ناحية دلالية (semantic). فالطريقة المفضلة هي استخدام <div> مع إضافة ARIA role بالقيمة "main" حتى نعطي للوسم معنى أفضل. وبالنسبة لمحتوى المدونة (المقالات) يمكنك استخدام <article> لاحتوائها. <nav id="pagination"> <ul> <li class="older"><a href="#">&laquo; Older posts</a></li> <li class="newer"><a href="#">Newer posts &raquo;</a></li> </ul> </nav> </div>أسفل المقالات يوجد روابط ترقيم الصفحات (pagination)، وفي العادة فإنّ هذه الروابط ليست بتلك الأهمية التي تجعلنا نضعها داخل وسم <nav> (استخدام <nav> ليس محصورًا فقط على القائمة الرئيسية للمدونة، بل يمكن استخدامه في عدة أماكن) إلّا أنني أرى أنّ روابط ترقيم الصفحات مهمة في أي مدونة للوصول إلى محتوى إضافي. <aside id="sidebar"> <section id="about"> <h3>About me</h3> <p>Typo is a WordPress theme based entirely on a balanced typographic design. A strict grid layout keeps everything tidy, allowing the content to shine. <a href="#" class="more">Find out more &raquo;</a></p> </section> <section id="categories"> <h3>Categories</h3> <ul> <li><a href="#">Articles</a></li> <li><a href="#">Design</a></li> <li><a href="#">Graphics</a></li> <li><a href="#">Inspiration</a></li> <li><a href="#">Retro</a></li> </ul> </section>لاحظ أننا استخدمنا الوسم <aside> لاحتواء محتوى القائمة الجانبية (sidebar). لاحظ أنّ القائمة الجانبية تحتوي على عدة أقسام وبالتالي سيكون استخدام <section> لكل قسم في هذه الحالة مناسبًا أكثر من <div>. <section id="search"> <h3>Search</h3> <form method="get" action="#"> <fieldset> <input type="text" id="searchbar" placeholder="I'm looking for&hellip;" /> <input type="submit" id="searchsubmit" value="Search" /> </fieldset> </form> </section> </aside> وفي أسفل القائمة الجانبية يوجد مربع البحث، وسوف نستخدم بعض من الخصائص الجديدة في لغة HTML5. وأحد هذه الخصائص هو placeholder بحيث تمكننا هذه الخاصية من وضع نص داخل حقل الإدخال لإخبار المستخدم بما يجب عليه إدخاله في ذلك الحقل. </div> <div id="footer-container"> <footer> <ul id="credits"> <li class="wordpress"><a href="http://wordpress.org">Powered by WordPress</a></li> <li class="spoongraphics"><a href="http://www.blog.spoongraphics.co.uk">Theme by SpoonGraphics</a> </li> </ul> <p id="back-top"><a href="#">Back to top</a></p> </footer> </div>بقي علينا الآن إضافة الـfooter، ففي هذه الحالة سنحتاج إلى وضعه خارج منطقة المحتوى الرئيسي لنسمح له بالتمدد على كامل الصفحة. يمكننا استخدام الوسم <footer> لاحتواء عناصر ومحتويات تلك المنطقة. ملف الـHTML كاملا<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Typo</title> <link href="style.css" rel="stylesheet" /> <link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic' rel='stylesheet' type='text/css'> <script src="js/scripts.js"></script> </head> <body> <div id="container"> <header> <h1><a href="#" title="Return to the homepage">Typo</a></h1> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Archives</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <div id="content" role="main"> <article> <h2><a href="#">Getting your stock photos seen</a></h2> <p>Lorem ipsum dolor sit amet[...]leo placerat.</p> <ul class="postinfo"> <li>17th October 2011</li> <li>Posted in <a href="#">Articles</a></li> <li><a href="#">Continue Reading &raquo;</a></li> </ul> </article> <article> <h2><a href="#">Top 10 tips for new bloggers</a></h2> <p>Lorem ipsum dolor sit amet[...]leo placerat.</p> <ul class="postinfo"> <li>17th October 2011</li> <li>Posted in <a href="#">Articles</a></li> <li><a href="#">Continue Reading &raquo;</a></li> </ul> </article> <article> <h2><a href="#">10 fantastic photography tips</a></h2> <p>Lorem ipsum dolor sit amet[...]leo placerat.</p> <ul class="postinfo"> <li>17th October 2011</li> <li>Posted in <a href="#">Articles</a></li> <li><a href="#">Continue Reading &raquo;</a></li> </ul> </article> <nav id="pagination"> <ul> <li class="older"><a href="#">&laquo; Older posts</a></li> <li class="newer"><a href="#">Newer posts &raquo;</a></li> </ul> </nav> </div> <aside id="sidebar"> <section id="about"> <h3>About me</h3> <p>Typo is a WordPress theme based entirely on a balanced typographic design. A strict grid layout keeps everything tidy, allowing the content to shine. <a href="#" class="more">Find out more &raquo;</a></p> </section> <section id="categories"> <h3>Categories</h3> <ul> <li><a href="#">Articles</a></li> <li><a href="#">Design</a></li> <li><a href="#">Graphics</a></li> <li><a href="#">Inspiration</a></li> <li><a href="#">Retro</a></li> </ul> </section> <section id="social"> <h3>social</h3> <ul> <li><a href="#">Twitter</a></li> <li><a href="#">Facebook</a></li> <li><a href="#">Flickr</a></li> <li><a href="#">Behance</a></li> <li><a href="#">Last.FM</a></li> <li><a href="#">Youtube</a></li> </ul> </section> <section id="latest"> <h3>Latest posts</h3> <ul> <li><a href="#">Getting your stock photos seen</a></li> <li><a href="#">Top 10 tips for new bloggers</a></li> <li><a href="#">10 fantastic photography tips</a></li> </ul> </section> <section id="search"> <h3>Search</h3> <form method="get" action="#"> <fieldset> <input type="text" id="searchbar" placeholder="I'm looking for&hellip;" /> <input type="submit" id="searchsubmit" value="Search" /> </fieldset> </form> </section> </aside> </div> <div id="footer-container"> <footer> <ul id="credits"> <li class="wordpress"><a href="http://wordpress.org">Powered by WordPress</a></li> <li class="spoongraphics"><a href="http://www.blog.spoongraphics.co.uk">Theme by SpoonGraphics</a></li> </ul> <p id="back-top"><a href="#">Back to top</a></p> </footer> </div> </body> </html>إضافة تنسيقات CSSبما أننا نملك الآن مستند HTML جاهز فيمكننا إضافة تنسيقات CSS للخروج بصفحة تشبه التي قمنا بتصميمها باستخدام الفوتوشوب. body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote { margin: 0; padding: 0; border: 0; } body { background: #dedede url(images/bg.jpg); font-family: 'Droid Serif', serif; font-size: 14px; line-height: 24px; color: #666; } a { color: #4b7ea9; font-style: italic; } a:hover { color: #105896; } header a, h2 a { color: #666; font-style: normal; text-decoration: none; } #container { width: 916px; margin: 0 auto; padding: 48px 22px 0 22px; background: url(images/grid.jpg); overflow: hidden; }يُستخدم السطر الأول من أجل إزالة أي تنسيقات افتراضية للمتصفحات (يسمى هذا "CSS reset")، وبعد ذلك يوجد داخل المحدد body الخصائص العامة للخطوط (ما يهمنا هنا هو الخاصية line-height، فقد أعطيناها القيمة 24px حتى تتوافق مع شبكة الخطوط القاعدية (baseline grid) التي استخدمناها في تصميم الواجهة في برنامج الفوتوشوب (وصورة خلفية. وبما أننا أضفنا الكود الخاص بخدمة Google Web Fonts في ملف الـHTML فيمكننا استخدام الخط Droid Serif في تنسيقات CSS كما يحلو لنا. أضفنا أيضًا التنسيقات الخاصة بالروابط ولكن استثنينا الروابط الموجودة في الترويسة (header) وعناوين التدوينات (الموجودة داخل وسم <h2>) حتى يتوافق كل شيء مع التصميم. قمنا أيضًا بتوسيط الحاوي الرئيسي باستخدام margin: 0 auto ووضعنا لهذا الحاوي صورة الشبكة (grid) على شكل خلفية حتى نستطيع موضعة عناصر الصفحة بكل سهولة بناءً على التصميم الموجود لدينا. header { margin: 0 0 98px 0; } header h1 { float: left; font-size: 36px; font-weight: normal; } header nav { float: right; text-align: right; padding: 6px 0 0 0; } header nav ul { list-style: none; } header nav li { float: left; font-size: 18px; width: 136px; margin: 0 0 0 20px; } header nav li:nth-child(1):before { content: "1. "; color: #a2a2a2; } header nav li:nth-child(2):before { content: "2. "; color: #a2a2a2; } header nav li:nth-child(3):before { content: "3. "; color: #a2a2a2; } header nav li:nth-child(4):before { content: "4. "; color: #a2a2a2; } header nav li:nth-child(5):before { content: "5. "; color: #a2a2a2; }استعملنا margins وpaddings بقيم مناسبة لوضع العناصر استنادًا على خطوط الشبكة مع استخدام بعض القيم العشوائية مثل 98px حتى نضمن أن كل شيء موضوع في مكانه الصحيح. يمكنك استخدام Developer tools أو Firebug لمساعدتك في عمل التعديلات من دون أن يصيبك صداع في رأسك بسبب وجود بعض الحسابات المعقدة قليلًا. هل تذكر عندما تكلمنا عن تلك الأرقام الموجودة بجانب عناصر القائمة الرئيسية؟ فقد قلنا بأننا سوف نستخدم CSS لإضافتها لأنها ليست مهمة كثيرًا ولأننا لا نريدها أن تظهر في ملف HTML، وللقيام بذلك سوف نستخدم المحددين :nth-child و :before مع الخاصية content التي سنضع الأرقام بداخلها. #content { float: left; width: 526px; margin: 0 98px 0 0; } #content article { margin: 0 0 67px 0; } #content article h2 { font-size: 30px; margin: 0 0 29px 0; font-weight: normal; } #content p { margin: 0 0 24px 0; } #content .postinfo { list-style: none; overflow: hidden; } #content .postinfo li { float: left; width: 136px; margin: 0 20px 0 0; font-style: italic; color: #a2a2a2; } #pagination { overflow: hidden; margin: 0 0 120px 0; } #pagination ul { list-style: none; } #pagination li { font-size: 18px; } #pagination li.older { float: left; } #pagination li.newer { float: right; }قمنا أيضًا بإضافة تنسيقات CSS الخاصة بالتدوينات ابتداءً بـdiv المحتوى. بالنسبة لعرض هذا الـdiv فقد قمنا بحسابه اعتمادً على عرض الأعمدة والمسافة بينها (columns and gutters) التي عندما نقوم بجمعها مع العرض الخاص بالقائمة الجانبية وأي margins فإنها تعطينا العرض الخاص بالـdiv الحاوي (container div). قمنا أيضًا بإضافة تنسيقات الخطوط الخاصة بعناصر h2 وmargin بقيمة مناسبة حتى يبقى كل شيء متوافقًا مع شبكة الخطوط القاعدية، واستعملنا الخاصية ()background: url لوضع صورة شعار ووردبريس في أسفل يسار الصفحة ولم ننسَ أيضًا العنصر back-top# إلى يسار الصفحة بحيث يأخذنا إلى أعلى الصفحة عند الضغط عليه. #sidebar { width: 292px; float: left; padding: 4px 0 0 0; } #sidebar h3 { font-size: 18px; font-weight: normal; margin: 0 0 25px 0; } #sidebar ul { list-style: none; } #sidebar section { margin: 0 0 47px 0; } #sidebar #about a.more { display: block; text-align: right; } #sidebar #categories { width: 136px; float: left; margin: 0 20px 0 0; } #sidebar #social { width: 136px; float: left; }قمنا بإزاحة القائمة الجانبية إلى جانب المحتوى الرئيسي (عن طريق الخاصية float:left) وأضفنا التنسيقات الخاصة بالعناصر الموجودة داخلها ليصبح كل شيء كما هو موجود في تصميم الفوتوشوب. بعض عناصر القائمة الجانبية يمكن وضعها بجانب بعضها، لذلك قمنا بإضافة العرض المناسب لهذه العناصر حتى تتوافق مع التصميم. #sidebar #search #searchbar { width: 230px; height: 36px; float: left; border: 1px solid #c7c7c7; padding: 0 45px 0 15px; margin: -8px 0 0 0; background: #e2e2e2; /* Old browsers */ background: -moz-linear-gradient(top, #e2e2e2 0%, #ffffff 16%); /* FF3.6+ */ background: -webkit-linear-gradient(top, #e2e2e2 0%,#ffffff 16%); /* Chrome10+,Safari5.1+ */ font-size: 14px; font-style: italic; color: #a2a2a2; } #sidebar #search #searchsubmit { width: 17px; height: 17px; float: right; margin: -27px 15px 0 0; background: url(images/search-icon.png); text-indent: -9999px; }مربع البحث هو العنصر الوحيد في الموقع الذي يحتوي على تأثيرات بصرية، فيمكننا إضافة تأثيرات التدرج باستخدام خاصية gradient الموجودة في لغة CSS، وبالنبسة للأيقونة فيمكننا إضافتها باستخدام الخاصية ()background: url. #footer-container { background: rgba(0,0,0,0.2); overflow: hidden; } footer { width: 916px; margin: 0 auto; padding: 10px 22px 50px 22px; } footer #credits { list-style: none; float: left; } footer #credits li { float: left; margin: 0 6px 0 0; } footer #credits li.wordpress a { display: block; width: 20px; height: 20px; background: url(images/credits.png) no-repeat 0 0; text-indent: -9999px; } footer #credits li.spoongraphics a { display: block; width: 25px; height: 20px; background: url(images/credits.png) no-repeat -30px 0; text-indent: -9999px; } footer #back-top { float: right; font-size: 12px; }كا ما تبقى علينا الآن هو إضافة التنسيقات الخاصة بالـfooter. يمكننا محاكاة خلفية الـfooter عن طريق استخدام الخاصية background وإعطاؤها لونًا أسودًا بشفافية 20% (background: rgba(0,0,0,0.2. وبما أنَ الحاوي الخاص بالـfooter سيتمدد على كامل الصفحة فإننا سنضطر إلى إعطاء الـfooter قيم width وmargin مختلفة. تنسيقات CSS كاملةbody, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote { margin: 0; padding: 0; border: 0; } body { background: #dedede url(images/bg.jpg); font-family: 'Droid Serif', serif; font-size: 14px; line-height: 24px; color: #666; } a { color: #4b7ea9; font-style: italic; } a:hover { color: #105896; } header a, h2 a { color: #666; font-style: normal; text-decoration: none; } #container { width: 916px; margin: 0 auto; padding: 48px 22px 0 22px; background: url(images/grid.jpg); overflow: hidden; } header { margin: 0 0 98px 0; } header h1 { float: left; font-size: 36px; font-weight: normal; } header nav { float: right; text-align: right; padding: 6px 0 0 0; } header nav ul { list-style: none; } header nav li { float: left; font-size: 18px; width: 136px; margin: 0 0 0 20px; } header nav li:nth-child(1):before { content: "1. "; color: #a2a2a2; } header nav li:nth-child(2):before { content: "2. "; color: #a2a2a2; } header nav li:nth-child(3):before { content: "3. "; color: #a2a2a2; } header nav li:nth-child(4):before { content: "4. "; color: #a2a2a2; } header nav li:nth-child(5):before { content: "5. "; color: #a2a2a2; } #content { float: left; width: 526px; margin: 0 98px 0 0; } #content article { margin: 0 0 67px 0; } #content article h2 { font-size: 30px; margin: 0 0 29px 0; font-weight: normal; } #content p { margin: 0 0 24px 0; } #content .postinfo { list-style: none; overflow: hidden; } #content .postinfo li { float: left; width: 136px; margin: 0 20px 0 0; font-style: italic; color: #a2a2a2; } #pagination { overflow: hidden; margin: 0 0 120px 0; } #pagination ul { list-style: none; } #pagination li { font-size: 18px; } #pagination li.older { float: left; } #pagination li.newer { float: right; } #sidebar { width: 292px; float: left; padding: 4px 0 0 0; } #sidebar h3 { font-size: 18px; font-weight: normal; margin: 0 0 25px 0; } #sidebar ul { list-style: none; } #sidebar section { margin: 0 0 47px 0; } #sidebar #about a.more { display: block; text-align: right; } #sidebar #categories { width: 136px; float: left; margin: 0 20px 0 0; } #sidebar #social { width: 136px; float: left; } #sidebar #search #searchbar { width: 230px; height: 36px; float: left; border: 1px solid #c7c7c7; padding: 0 45px 0 15px; margin: -8px 0 0 0; background: #e2e2e2; /* Old browsers */ background: -moz-linear-gradient(top, #e2e2e2 0%, #ffffff 16%); /* FF3.6+ */ background: -webkit-linear-gradient(top, #e2e2e2 0%,#ffffff 16%); /* Chrome10+,Safari5.1+ */ font-size: 14px; font-style: italic; color: #a2a2a2; } #sidebar #search #searchsubmit { width: 17px; height: 17px; float: right; margin: -27px 15px 0 0; background: url(images/search-icon.png); text-indent: -9999px; } #footer-container { background: rgba(0,0,0,0.2); overflow: hidden; } footer { width: 916px; margin: 0 auto; padding: 10px 22px 50px 22px; } footer #credits { list-style: none; float: left; } footer #credits li { float: left; margin: 0 6px 0 0; } footer #credits li.wordpress a { display: block; width: 20px; height: 20px; background: url(images/credits.png) no-repeat 0 0; text-indent: -9999px; } footer #credits li.spoongraphics a { display: block; width: 25px; height: 20px; background: url(images/credits.png) no-repeat -30px 0; text-indent: -9999px; } footer #back-top { float: right; font-size: 12px;}نموذج HTML5 النهائيأصبح نموذجنا جاهزًا الآن للاختبار قبل أن نقوم بتحويله إلى قالب ووردبريس. كل شيء يبدو جيدًا في المتصفحات الحديثة (إضافة إلى متصفح IE9). إذا أردت أن تدعم الإصدارات الأقدم من متصفح Internet Explorer فسوف تحتاج إلى المزيد من المجهود. تصفح النتيجة النهائية من هنا. ترجمة -وبتصرّف- للمقال Create a Typography Based Blog Layout in HTML5 لصاحبه Iggy.

هنالك عدّة طرق لجمع عناوين البريد الإلكتروني على موقع ما، لكن ما هو أكثر الخيارات فعاليّة من بين السّلايدر Sliders، النّوافذ المنبثقة Lightboxes والتبويبات Tabs، ونماذج الاشتراك العاديّة؟ ولماذا؟ سنتعرّف على تقنيات بناء القوائم الخاصة بثلاث خدمات معروفة. رغم كلّ هذه الخيارات، هنالك خيار واحد فقط يمكن لمصمّمي المواقع ومدراء المواقع اختياره. لذا، ومن أجل فهم أفضل لكلّ نوع من النماذج، جمعنا 3 أشخاص يعملون ضمن أشهر نماذج التسجيل المُدمجة بالنسبة لنا وهم: Claudiu Murariu من خدمة PadiAct، Noah Kagan من خدمة AppSumo وMatt Farmer من خدمة Anchor Tab، لنطلب منهم شرح الخدمات الأفضل والسّبب الذي يجعلها كذلك. 3 أنواع من النماذج والهدف واحدعند تقرير نوع النموذج التي يجدر بك استخدامه على موقعك، سيوافق معظم النّاس غالبًا على أنّ الهدف واحد، وهو جمع أكبر عدد ممكن من التّسجيلات الجديدة في قوائم اشتراكك، لكن هنالك أشياء يجب أخذها بعين الاعتبار خلال هذه العملية، منها: ألّا تزعج هذه العمليّة أو تقاطع زوّار الموقع، خصوصًا الذين يزورون الموقع عبر جهاز محمول أو الذين سجّلوا بالفعل.ألّا يتمّ إرغام النّاس على التّسجيل من أجل الحصول على ما يريدونه.ألّا تؤثّر هذه العمليّة على سرعة الموقع بشكل مفرط.دعونا نستعرض كيفيّة عمل كل نموذج مع أخذ هذه المتطلّبات بعين الاعتبار. السلايدرز: Claudiu Murariu من PadiAct مبدأ العمل: كلّما ذهبت إلى متجر بيع الملابس المفضّل لديك وبدأت بالبحث عن شيء لشرائه ولا تجد ما يناسب مقاساتك بشكل مثالي، تصبح المساعدة التي سيقدّمها لك موظّف المتجر الودود –الحاضر دائمًا- محلّ ترحيب، وهو نفس الشّيء الذي تفعله السّلايدرز، فمثل موظف المتجر، إذا ظهرت نموذج في نفس الوقت الذي يدخل فيه زائر إلى موقعك، ستجد غالبًا أنك تفقد الزّوار قبل تصفّحهم لموقعك حتّى، لكن في حال ظهور السلايدر في الوقت المناسب وبالمحتوى المناسب، فلن يرى معظم الزوار السلايدر وإنما الرسالة التي يحملها لهم، في هذه الحالة، يكون تقديم عنوان البريد الإلكتروني إجراءً شكليًّا حيث يودّون البقاء على اتصال بك. ما مدى جودتها: يمكن للسّلايدرز زيادة معدل الاشتراكات بنسبة 15% فما فوق، حيث جمعنا 3.5 مليون بريد إلكتروني من خلالها بفضل ظهورها في الوقت المناسب مع رسالة مخصّصة حسب سلوك الزّوار، دون أي تأثير على أداء مقاييس مثل معدّلات التّحويل، نسبة الخروج من الموقع، الوقت الذي تمّ قضاؤه على الموقع وعدد الصّفحات التي تمّ زيارتها. تكون السّلايدرز فعّالة للغاية عندما تكون مستهدفة، لأنّها لا تضع جميع المستخدمين في نفس الكفّة، بل تتيح للمستخدمين تكوين فكرة عن الموقع قبل أن يقرروا الاشتراك، كما تقدّم السّلايدرز سهولة كبيرة للمستخدمين كونهم لا يحتاجون للبحث عن نموذج الاشتراك بأنفسهم. النوافذ المنبثقة: Noah Kagan من SumoMe مبدأ العمل:أعتقد أنّ نوافذ البريد الإلكتروني المنبثقة التي تظهر على المواقع مزعجة للغاية، لكنّها تعتبر كذلك أنجع طريقة للحصول على اشتراكات بريد إلكتروني جديدة. دعونا نسقط هذه النوافذ المنبثقة على أرض الواقع. لنقل أنّك ذهبت إلى مطعم ولم يعجبك الطعام المقدم هناك، ثم طُلب منك إدخال بريدك الإلكتروني من أجل نشرة المطعم البريدية، فأدخلت بريدك الإلكتروني وبدؤوا بمراسلتك يوميًّا لأسابيع، هل سيكون لبريدهم الإلكتروني تأثير عليك باستثناء زيادة كرهك تجاههم؟ طبعًا لا، فأنت لن تعود أبدًا إلى ذلك المكان ولن توصي غالبًا أشخاصًا آخرين بالذّهاب إليه. لنقل الآن أنّ هنالك مطعمًا يعجبك، وستعود له غالبًا، لكنك تنسى أحيانًا الذّهاب إليه، هنا سيكون تذكير ودّي بالذّهاب إلى المطعم مفيدًا لك. هذه هي فكرتي حول نوافذ البريد الإلكترونيّ المنبثقة، يكون تذكّر موقعك من طرف الزّوار أو العملاء صعبًا أحيانًا وسط كلّ الخيارات الأخرى المتوفّرة، وقد لا يرون طريقة أخرى لإعطائك عناوين بريدهم الإلكتروني، عندها تكون النّوافذ المنبثقة أكثر الطّرق فعاليّة حسب ما وجدت. أشجّع النّاس على تجربة هذا الخيار مادامت منتجاتهم رائعة ومحتوى مدوناتهم ممتاز. ما مدى جودتها: هذا هو عدد الاشتراكات التي حصل عليها موقع Okdork باستخدام النّوافذ المنبثقة لخدمة بناء القائمة على موقع SumoMe.com (موضحة في الجدول أدناه). لا أحاول تحسين الخدمة للحصول على أكبر قدر ممكن من الاشتراكات البريديّة لكنني أقترحها بودّ على الزّوار للاشتراك في نشرتي البريديّة. التاريخ المشتركون النّوافذ التي ظهرت معدّل التّحويل 04/10 26 754 3.45% 04/11 31 950 3.26% 04/12 14 568 4.46% 04/13 19 578 3.29% 04/14 24 1,005 2.39% التبويبات: Matt Farmer من AnchoTabمبدأ العمل:عندما يأتي زائر إلى موقعك، يكون هدفه غالبًا محدّدًا بالفعل، حيث يكون هدف معظم الزّوار الحصول على معلومة ما حول منتجك أو قراءة محتوى مدونتك، من جهة أخرى، فأنت كذلك كمدير موقع لديك هدف معيّن؛ تحويل الزّائر إلى قارئ منتظم أو عميل تستفيد منه مادّيًّا، وهكذا تكون في مواجهة معضلة لطالما عانى منها الباعة لعقود من الزمن، لنأخذ مثال بائع السيّارات، تجد البائع الانتهازيّ الذي يكون دائمًا على استعداد لفعل أي شيء باستطاعته من أجل تحقيق هدفه ببيع سيارة، إذ أنّه لا يأبه إن كان أسلوبه مريحًا أو غير مريح لك، وسيستمرّ باللّحاق بك والحديث وفعل أي شيء لجعلك تشتري. ويعدّ هذا شبه مثاليّ لاستراتيجيّة جلب عناوين البريد الإلكترونيّ التي تشتمل على إظهار نافذة منبثقة شكليّة تتمركز فوق محتواك وتجبر الزّائر على أن يقرّر ما إذا كان يودّ الاشتراك أم لا، لكنّ التّبويبات تحقّق توازنًا نسمّيه بالبائِع المُفيد، حيث لا تظهر التّبويبات أمامك مباشرة، أو تتحدّث إليك طوال الوقت الذي تكون فيه منكبًّا في محاولة تحقيق هدفك، لكنّها تكون متواجدة هنالك دائمًا. ما مدى جودتها: تمّ تحسين التّبويبات بشكل خاص للمدوّنات التي تحتوي على الكثير من المحتوى النّصي، فعند الصعود لأعلى الصّفحة من الأسفل، سيلاحظ القرّاء ظهور التّبويبة لكنّهم غير ملزمين بالتّوقف عن القراءة من أجل التّفاعل معها، كما أن عينهم تتحرّك طبيعيًّا نحو التبويبة التّالية عند انتهائهم من قراءة المقال. هذه الاستراتيجية تتيح لك الموازنة بين الرّغبة في ظهور النموذج بشكل بارز وإخفائها ضمنيًّا بحيث يكاد القرّاء لا يشعرون بها، وبالتّالي تكون قادرًا على تحقيق هدفك بالحصول على اشتراكات لبريدك الإلكتروني دون الاستعانة بتقنيّات تعرقل وصولك إلى هدفك. لاحظنا باستخدام هذه الطّريقة الأقلّ تطفّليّة معدّلات تحويل متواصلة بنسبة 1.25%، ما يجعلنا قريبين من الحلول الأخرى المنافِسة. مع التّحديث الكبير المنتظر لخدمة Anchor Tab، سيحصل "مساعِدنا المفيد" على أدوات أكثر لمساعدة عملائنا على رفع ذلك الرقم أكثر. أيها تستخدم؟بعد اطّلاعنا على الخيارات الأخرى المتاحة غير الخيارات المعهودة، حان وقت اختيارك للخدمة التي تناسبك، فأيّ نوع من نماذج الاشتراك ستختار أو أيّ نوع استخدمته وحقّق لك نجاحًا على موقعك؟ ترجمة -وبتصرّف- للمقال Subscribe form showdown: Do sliders, lightboxes or tabs work best? لصاحبته ROS HODGEKISS. حقوق الصورة البارزة: Designed by Freepik.

هل قمت مسبقًا بتعبئة نموذج ما على الويب وطُلب منك إدخال نفس البيانات مرّتين؟ هذا ما يسمى بالإدخال المزدوج (double entry) يدعى أيضًا "إعادة الإدخال" (re-entry) أو "التأكيد" (confirm) ، ومن المؤكَّد أنّك قد صادفت هذا الشيء في العديد من المواقع المشهورة مثل Google (يتم طلب إدخال كلمة المرور مرّتين) و Facebook (يتطلب إدخال البريد الإلكتروني مرّتين. أُنظر الشكل 1). الشّكل 1: نموذج التسجيل لموقع Facebook يتطلب إدخال البريد الإلكتروني مرَّتين. لماذا يطلب منك إدخال نفس المعلومات مرتينكل حقل إضافي في النّموذج يعني عملًا وجهدًا إضافيًا على من سيقوم بتعبئة هذا النّموذج، وهذا يعني زيادة محتملة في الأخطاء ونقصًا في معدَّل إكمال النماذج. إذاً لماذا يتم إضافة حقل إضافي يحتوي على معلومات تمت تعبئتها مسبقًا في حقل آخر؟ يهدف الإدخال المزدوج إلى منع الأخطاءالهدف الرئيسي من الإدخال المزدوج (double entry) هو منع الأخطاء. فعندما يُطلَب من المستخدم إعادة كتابة بريده الإلكتروني أو كلمة المرور فإنّ ذلك يعطينا القُدرة للتّأكد بأنّ معلومات الحقلين متطابقة. أمّا إذا لم تتطابق الحقول، فهذا يعني احتمالية وجود خطإ مطبعي/إملائي (بسبب الإستعجال في الكتابة مثلًا أو عدم الإنتباه). الشّكل 2 يحتوي على لقطة من نموذج التسجيل الخاص بشركة Google وكيف يظهر الخطأ بسبب عدم تطابق الحقلين. الشّكل 2: نموذج تسجيل Google وكيف يظهر الخطأ في حالة عدم تطابق الحقلين. (كلمة احتمالية مهمة هنا لأن الخطأ قد يكون في حقل إعادة الإدخال وليس في الحقل الأصلي. وفي هذه الحالة، سيُطلب من المستخدم إعادة إدخال الحقلين معًا). الإدخال المزدوج يمنع الأخطاء ولكنه يسبب المشاكل أيضاعند استخدام الإدخال المزدوج في أحد النماذج، فإنّنا نطلب من جميع المستخدمين القيام بجهدٍ إضافي مقابل منع ما قد يكون عددًا صغيرًا من الأخطاء. قبل الشُّروع في بناء نماذج الإدخال المزدوج، يجب عليك أن تحدّد حجم المشكلة الّتي تحاول منعها وأن تُقرِّر فيما إذا كانت تستحق التضحية المحتملة بعدد النماذج التي سيتم إكمالها. حتى وإن قمت باستخدام الإدخال المزدوج، فالبشر أذكياء وسيقومون بالبحث عن أفضل الوسائل لتقليل العمل المطلوب منهم. ومن أحد السلوكيات الشائعة نسخ البريد الإلكتروني وكلمة المرور من الحقل الرئيسي وإلصاقه في الحقل الآخر، وهذا التصرف بكل تأكيد ينافي الفائدة المرجوَّة من الإدخال المزدوج. يمكنك أن تبرمج النموذج بحيث يتم منع النسخ واللصق داخل تلك الحقول. ولكن قد يسبب هذا التصرف الإرباك والحيرة لبعض الأشخاص، فقد لا يستطيعون إدارك السبب الكامن وراء توقف اللصق عن العمل. وقد لا يمنع ذلك المستخدمين من نسخ ولصق المعلومات من مصادر أخرى (أحد برامج إدارة كلمة المرور على سبيل المثال). قد يَستخدم بعض الأشخاص أدوات مبرمجة تقوم بتعبئة النماذج بشكل آلي. وقد تكون هذه الأدوات مبنية في المتصفّح أو على شكل إضافة يتم تحميلها وإضافتها للمتصفّح. لهؤلاء المستخدمين، ستكون النماذج المزدوجة معدومة الفائدة (بالنّسبة لحقل البريد الإلكتروني على الأقل). قد يجد بعض المستخدمين في الإدخال المزدوج نوعًا من التعالي عليهم أو الإستهانة بهم. فقد يُفهَمُ من وجود الإدخال المزدوج بأنَّ صاحب النّموذج لا يثق بقدرات المستخدم على إكمال النموذج بشكل صحيح. وبالتالي، فقد يُهَدِّدُ الإدخال المزدوج الثقة المبنية بين المستخدم وصاحب النّموذج والتي تعتبر مُهِمَّة في زيادة نسبة التّحويل (conversion) ومعدلات إكمال النّماذج. لماذا يستخدم الإدخال المزدوج في أغلب الأحيان لعناوين البريد الإلكتروني وكلمات المرور فقط؟مع وجود كل هذه العيوب، فقد يتساؤل أحدكم عن سبب استخدام الإدخال المزدوج. بكل تأكيد، تعتبر هذه العيوب السبب الرئيسي في نُدرة استخدام الإدخال المزدوج وسببًا لتواجدها في حقول البريد الإلكتروني وكلمة المرور فقط. لمَ هذه الحقول فقط؟ لأنه بالنّسبة للعديد من الأنظمة والخدمات، يُعتبر البريد الإلكتروني وكلمة المرور المفاتيح الرّئيسية التي تمنح المستخدم حق الوصول واستخدام العديد من الخدمات. لذلك، فإن الأثر المترتب على وجود خطأ ما في أحد هذه الحقول سيكون أكبر من الأثر المترتب على اختيار خاطئ لعنوان (title) أو كتابة اسمك بشكل خاطئ. قد يجادل بعض الأشخاص بأنّ هناك حقولًا لا تقل أهمية عن البريد الإلكتروني وكلمة المرور كرقم البطاقة الإئتمانية مثلًا. مع ذلك، فإن عمليّة التّحقق من صحة رقم بطاقة الإئتمان تتم في أغلب الأحيان عند نقطة الإدخال. علاوة على ذلك، فإن رقم بطاقة الإئتمان لا تعدّ من معلومات الإتّصال، فإذا تمَّ إدخال الرّقم بطريقة خاطئة فيمكننا التواصل مع المستخدم وإعلامه بذلك، أمّا إذا كانت معلومات الإتصال غير صحيحة فسيكون من الصعب تدارك الموقف. سيقول أولئك الذين يفكرون بطريقة منطقية بأنَّ الإدخال المزدوج سيكون مناسبًا لأرقام الهواتف. وممّا لا شكَّ، أنّه إذا كان رقم الهاتف هو الوسيلة الوحيدة (أو الأساسية) للتواصل مع المستخدم، فسيكون استخدام الإدخال المزدوج أمرًا مناسبًا. وإن كان رقم التّواصل عبارة عن رقم هاتف محمول فيمكننا التّحقق من هويّة المستخدم عن طريق إرسال رسالة نصّيَّة قصيرة تطلب منه القيام بأمرٍ ما لإتمام العملية. طرق أخرى للتأكد بأن البريد الإلكتروني صحيحإن الطريقة المذكورة بالأعلى للتحقق من أرقام الهواتف يمكن أن تُستخدم أيضاً للتأكد من البريد الإلكتروني. فبالإضافة إلى التّحقق من صحَّة البريد الإلكتروني، فإنَّه يجب التحقق أيضاً بأنّ المستخدم يمكنه الدخول إلى ذلك البريد واستعماله. ويتم ذلك بإرسال "رابط تفعيل" إلى ذلك البريد، فإذا تم زيارة وفتح الرابط المُرسل (يكون هذا الرابط فريدًا ومتغيرًا لكل مستخدم) فسوف تتم العمليَّة بشكل جيد، وإذا لم يتمَّ زيارة الرابط فإن عملية التسجيل، البيع أو الخدمة لن تتم. إذا كان عنوان البريد هو اسم المستخدم، فإنَّ طريقة التحقق هذه تعتبر-نوعًا ما- أفضل من الإدخال المزدوج. فبينما يضمن الإدخال المزدوج تطابق البريدين المدخلين في كلا الحقلين، فإنّ عملية المصادقة تضمن بأنّ يكون البريد الإلكتروني صحيحًا ومستعمَلًا. ومما لا شك فيه، فإن طريقة المصادقة هذه تُبعِد المستخدم عن النموذج وتعتمد بشكلٍ رئيسي على وصول رسالة البريد إلى بريد المستخدم وتفاعله معها. كل هذه الأمور قد تدفع المستخدم إلى ترك الموقع أو الخدمة وبالتالي الفشل. لتقليل الأثر السَّلبي المترتب على عملية المصادقة فإنها يجب أن تكون مصمّمة ومبنيّة بعناية وحذر (يمكنك على سبيل المثال أن تُبلغ المستخدم بما يجب عليه فعله وأن تعطيه الوقت الكافي ليقوم بتفعيل الرَّابط). وإذا كان من اللازم أن يكون البريد الإلكتروني صحيحًا، فإن مزايا عملية المصادقة هذه ستتغلب على عيوبها. لقد وُجِدَ في دراسة أجراها موقع Smashing Magazine في عام 2008 على أفضل 100 موقع إلكتروني بأن 18% فقط من تلك المواقع تتطلب من المستخدمين الإدخال المزدوج لعناوين بريدهم الإلكتروني مقارنة مع 72% من المواقع تتطلب الإدخال المزدوج لكلمات المرور. لم يعتبر الإدخال المزدوج لكلمات المرور شائعا أكثر من البريد الإلكتروني؟هناك العديد من الأسباب التي تكمن وراء وجود عدد أكبر من المواقع التي تتطلب الإدخال المزدوج لكلمة المرور أكثر من المواقع التي تتطلب الإدخال المزدوج للبريد الإلكتروني. أحد أهمِّ الأسباب -وعلى عكس البريد الإلكتروني- فإنّه عند إدخال كلمات المرور في الحقول المخصَّصة لها (وعلى افتراض أنّه تمَّ تكويد هذه الحقول بشكلٍ صحيح) ، فإنّها تكون مخفيَّة أو "محجوبة" بشكلٍ افتراضي (على شكل نقاط سوداء دائريّة، كما في الشَّكل 3). وتهدف عمليَّة الحجب هذه إلى منع الأشخاص من استراق النظر ورؤية كلمة المرور التي يدخلها المستخدم. الشكل 3: حجب كلمة المرور. تمَّ كتابة كلمة "testing" في الحقل ولكنها ظهرت على شكل نقاط سوداء. ولأنّ المستخدم لن يتمكنّ من رؤية الرّموز التي يدخلها، فستكون نسبة حدوث الأخطاء أكبر، وبالتالي وجود حاجة أكبر إلى الإدخال المزدوج. علاوة على ذلك، فإنّ كلمات المرور في أغلب الأحيان تكون "عشوائية" أكثر من عناوين البريد الإلكتروني. فعناوين البريد تحتوي في الغالب على اسم الشَّخص، اسم الشَّركة، مزود خدمة البريد أو مزود خدمة الانترنت، وكلُّ هذه الأشياء يُمكن تذكُّرها بسهولة. في المقابل، قد تكون كلمات المرور مزيجًا من رموزٍ وأرقام عشوائية (ليس بالضرورة أن يكون هذا أفضل خيار من ناحية أمنيّة، ولكن بشكلٍ عام، فإن كلمات المرور الطويلة والغامضة تكون آمنة أكثر). بدائل الإدخال المزدوج لكلمات المروريُعتبر الإدخال الوحيد/الفرديّ أحد بدائل الإدخال المزدوج. وقد تعمل هذه الطريقة بشكل مناسب إذا ما افترضنا أنّه تم تزويد المستخدم بطريقة سهلة لِتَذكُّر كلمة المرور أو إعادة ضبطها إذا ما نسيها (يُفضَّل إضافة هذه الخاصيّة في جميع الأحوال، فقد ينسى أيّ شخصٍ كلمة المرور خاصته). ومن المثير للإهتمام بأنّ نماذج التسجيل الموجودة في Facebook ،LinkedIn وTwitter تتطلب إدخال كلمة المرور مرّة واحدة فقط. الشكل 4: لا يوجد إدخال مزدوج في نماذج التسجيل الخاصّة بشركة LinkedIn. و بديل آخر للإدخال المزدوج هو إعطاء المستخدم القدرة على تعطيل خاصيّة الحجب في حقل كلمة المرور. يُعطي هذا للمستخدم الحريّة الكافية لإظهار كلمة المرور إن كان يشعره ذلك بالرّاحة. هناك العديد من الطّرق لفعل هذا ولكنّ الطّريقة التي يوصى بها موضّحة بالشّكل 5. حيث يفضّل إضافة زر "Show password" على إضافة مربّع اختيار (checkbox) أو زوج من أزرار الرّاديو (radio buttons) لأنّه يُسهّل عمليَّة إظهار أو حجب كلمة المرور. الشكل 5: إظهار أو حجب كلمة المرور عند النَّقر على "Show password" قد يواجه المستخدم صعوبة في تفسير مربّع الاختيار، وقد يكون من الصَّعب مَوضَعَة أزرار الرّاديو وترتيبها بشكلٍ فعّال. فقد تأخذ أزرار الرّاديو حَيِّزًا أكبر من السؤال ذاته إذا ما وضعت فوق بعضها البعض، وإذا وُضعت بجانب بعضها قد تسبب لك المشاكل في استعمال ما يسمى بالمجاورة (proximity) لتوضيح أيّ إجابة ترتبط بأيّ زرّ. إنّه لمن الصّعب أيضًا أن تربط حقل كلمة المرور بمربّع اختيار أو زوجٍ من أزرار الرّاديو مقارنة مع ربطه برزٍّ واحد. فكر مليا قبل استخدام الإدخال المزدوجيُعتبر منع الأخطاء في أيّ نموذج من الأمور المحبَّبة، ولكن من المهمّ جدًا أن توجد حاجة ملحّة لاستخدام الإدخال المزدوج وذلك يعود إلى النقاط التالية: أنّها تزيد العبء والجهد على كل المستخدمين.يمكن تجاوزها عن طريق النّسخ واللصق أو باستخدام أدوات تعبئة النماذج بشكل آلي.تضمن فقط أنّ الحقلين متطابقين ولا تضمن احتواء هذه الحقول على معلومات صحيحة.يمكن أن تُرى كنوعٍ من الاستخفاف والإستهانة بالآخرين.إذا كان البريد الإلكتروني أو اسم المستخدم هما الطّريقة الوحيدة للتّواصل مع المستخدم، فيمكنك حينئذ استخدام الإدخال المزدوج. وبطريقة مشابهة، إذا لم تكن ترغب في تمكين المستخدم من إظهار كلمة المرور، فقد يكون الإدخال المزدوج ملائمًا في هذه الحالة. حتّى في الحالات المذكورة في الأعلى، فإنّ البحث عن بدائل للإدخال المزدوج (مثل المصادقة أو بعض الطرق البسيطة لإعادة الضبط والاسترداد) يستحقُّ النَّظر فيه بِجدِّيَّة. ترجمة -وبتصرّف- للمقال Double entry of form fields.

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