إتقان البحث عن نماذج ويب أكثر ذكاءً: دليلك النهائي لعام 2023

تعد النماذج عبر الإنترنت واحدة من أكثر المجالات صعوبة في تطوير موقع الويب ، خاصةً مع وجود العديد من الأشياء التي قد تسوء. كان للطبيعة المتغيرة لكيفية وصول الأشخاص إلى المحتوى عبر الإنترنت تأثير على تقنية تم تطويرها قبل سنوات من توقع أن يتمكن الأشخاص من استخدام هاتف ما يفعلونه عادة فقط مع جهاز كمبيوتر. إنها تقنية شهدت تطوراً ضئيلاً للغاية.

يجب أن يكون تصميم نماذج الويب مهنة قائمة بذاتها. يجب على مصممي الموقع الانخراط في خدمات مصممي نماذج الويب المحترفين بدوام كامل لمساعدتهم في مهمتهم. ولكن لا يُنظر إلى ذلك على أنه اقتصادي بما فيه الكفاية ، ولذا فإن مصمم الموقع مسؤول في معظم الأحيان عن تصميم أي أشكال مستخدمة على الموقع.

لكن تصميم النماذج هو مهارة عالية التخصص. يتطلب فهم كيفية تفاعل الناس معهمformatأيون وفهم أفضل طرق التجميع والتقديم فيformatأيون. حيث يتمحور تصميم الويب العام بشكل أساسي حول التقديم بتنسيقformatالأيونات والصور بطرق جذابة ولكن عملية ، يتطلب تصميم النموذج أن نركز اهتمامنا على طبيعة information ثم قرر أفضل طريقة لهيكله على الصفحة بحيث يعمل على النحو المنشود. تعتبر الجماليات من الاعتبارات الأقل أهمية في هذه الحالة ، ولكن لا ينبغي أن تكون كذلكgotten.

في هذه المقالة ، سوف نلقي نظرة على فن تصميم نماذج الويب ، ونرى ما إذا كنا نستطيع إيجاد طريقة لجعل نماذج الويب لدينا أكثر ذكاءً من حيث كيفية مظهرها وكيفية عملها.

أدوات بناء نموذج الويب

الأدوات القياسية التي قدمناها مطورو المتصفح و W3C لوضع نماذج الويب الخاصة بنا معًا ليست مثالية تمامًا ، وقبل تطبيق CSS عليها ، فإنها في الواقع سيئة للغاية. هكذا يبدون هم:

هناك أيضًا عنصر تحكم إدخال قياسي آخر يسمى حدد، لكن يجب تجنب استخدام هذا ما لم يكن توفير مساحة مصدر قلق كبير. هناك طرق أفضل للتعامل مع المهمة التي يؤديها عنصر التحكم المحدد ، حيث سنناقش لاحقًا. يجب أيضًا تجنب عناصر التحكم في Textarea متى كان ذلك ممكنًا لأنها إشكالية وعتيقة الأثر.

بالإضافة إلى عناصر الإدخال القياسية هذه ، هناك أيضًا عناصر جديدة خاصة تم إنشاؤها لـ HTML5. باستثناء ما إذا كان يتم إعداد مستند بدقة للاستخدام الداخلي وعندما تكون بيئة المتصفح معروفة ، يجب استخدام المكونات التي تعمل في كل من Firefox و Chrome فقط. من الجيد أن يعمل أحد المكونات أيضًا في المتصفحات الأخرى ، لكن لا ينبغي أن يعمل فقط العمل في المتصفحات الأخرى. فيما يلي مكونات HTML5 كما تظهر في Firefox:

ومظهرها مختلف قليلاً في Chrome:

من الواضح الآن أنه من المهم حقًا أن تدرك أن مدخلات HTML5 ستظهر وتعمل بشكل مختلف بين Chrome و Firefox ، لكنها ستظل تعمل. تبدو عناصر التحكم في الإدخال القياسية أيضًا أقل جمالًا في Chrome عنها في Firefox. لاحظ أن Chrome يفرض معيار تاريخ أمريكا الشمالية ، والذي قد لا يقدره المستخدمون. كما أن إصدار Chrome لعنصر التحكم في التاريخ يجعله غير مناسب للعرض ، ويجب استخدامه فقط للإدخال. تعد إضافة منتقي التواريخ هي التحسين الرئيسي في Chrome ، ولكن من المحتمل أن نتوقع أن نرى ذلك في الإصدارات المستقبلية من Firefox.

نظرًا لأن Firefox مفتوح المصدر ، يمكنك في الواقع إصدار نسختك الشخصية من Firefox لتقديم المدخلات بنفس الطريقة التي يعمل بها Chrome من خلال تنزيل شفرة مصدر متصفح Chromium مفتوحة المصدر التي يستند إليها Chrome ، ونقل قسم التعليمات البرمجية ذي الصلة إلى مصدر Firefox رمز (ولكن بعد ذلك سيتعين عليك القيام بذلك في كل مرة تقوم فيها بترقية Firefox إلى إصدار جديد).

ومع ذلك ، فإن النقطة الأساسية هي أنه حتى مع تحسينات Chrome ، فإن المظهر الافتراضي لعناصر التحكم في الإدخال صغير وغير جذاب. هناك بعض عناصر التحكم الأخرى المتاحة ، ولكن نظرًا لأنها لا تعمل في كل من Chrome و Firefox ، فلا ينبغي استخدامها في المواقع المخصصة للجمهور.

إجابة Bootstrap (كافية تقريبًا)

يطبق Bootstrap التصميم على عناصر التحكم القياسية التي تعزز مظهرها إلى حد ما. ولكن نظرًا لفلسفة تصميم Bootstrap المتمركزة على الأجهزة المحمولة ، فإنها تسبب بعض التأثيرات غير المرغوب فيها على النماذج التي لا يُراد عرضها كعمود واحد ، وتجعل حقول الإدخال القصيرة تبدو مضحكة عندما تمتد إلى عمود بأكمله افتراضيًا. ربما يكون العالم قد انتقل إلى الجوّال ، لكن النماذج لم تُخترع مع أخذ مستخدمي الجوّال في الاعتبار.

يقوم Bootstrap بتوسيع عناصر التحكم لملء العرض الأفقي للحاوية الخاصة به ، مما يعني أن جميع عناصر التحكم سيكون لها نفس العرض سواء أعجبك ذلك أم لا (ما لم تقم بإفراط في تجاوز هذا السلوك يدويًا) ، وتتيح لك ارتداء بعض أنواع التحكم باستخدام bling إضافية. يعد حل Bootstrap أنيقًا ويتغلب على بعض مشكلات عناصر التحكم التي لها مظاهر مختلفة في متصفحات مختلفة ، لكنه يعمل فقط مع عناصر التحكم القياسية. لا يتم تطبيق عناصر تحكم HTML5 في الإصدارات الحالية من Bootstrap ، لذلك سيتعين عليك تصميم عناصر التحكم بنفسك.

يتيح لك Bootstrap أيضًا دمج عناصر التحكم معًا. في بعض الأحيان يكون هذا جيدًا وأحيانًا لا يكون جيدًا. قد يبدو الجمع بين إدخال النص مع زر وخانة اختيار جيدًا ، ولكنه قد يربك المستخدم بشأن كيفية تفاعله مع عنصر التحكم غير المألوف هذا.

ما يوفره Bootstrap هو أحد أجهزتي المفضلة لبناء النماذج ، وهما لوحة و حسنا. هذه مفيدة للغاية لتجميع بيانات النموذج لإعطاء مؤشر مرئي للبيانات المرتبطة بالبيانات الأخرى وأيضًا لفصل البيانات.

بناء النموذج الذكي 101

نحن الآن على استعداد للتفكير في كيفية بناء النماذج بطرق أكثر ذكاءً. للقيام بذلك ، نحتاج إلى التفكير جيدًا في تجاوز الإعدادات الافتراضية. نحن بحاجة إلى أن نكون على دراية بـ desktop- الجذور المرتبطة بعناصر تحكم النموذج ، وكذلك الحاجة إلى التوافق مع الأجهزة المحمولة. ونحتاج إلى الاهتمام بأشياء مثل قابلية الاستخدام والتحقق (إذا كان النموذج سيُستخدم لجمع البيانات).

هذه النقطة الأخيرة جيدة ، لأنه بينما تُستخدم عناصر التحكم في النموذج لتجميع المدخلات ، فإنها تُستخدم أيضًا لعرض البيانات المخزنة. يكون مستخدم الويب العادي (ويجب أن يكون) أكثر اهتمامًا بالدخولformatأيون منك من الاستسلامformatايون لك.

جمع البيانات سهل. سوف يملأ الناس أي شيء تلتصق به أمامهم ، حتى لو كانت الفوضى. ولكن عندما يتعلق الأمر بعرض البيانات ، فإنهم أكثر صعوبة. وبالتالي ، سنركز هنا أكثر على استخدام النماذج لعرض البيانات بدلاً من جمعها ، نظرًا لأن العرض يتطلب مزيدًا من العناية والمزيد من "الذكاء".

1. هل نحن بحاجة إلى نموذج؟

قبل أن نبني نموذجًا ، يجب أن نتحقق من أننا نحتاج بالفعل إلى نموذج. إذا كان يمكن تمثيل البيانات بشكل كافٍ وغير مربك كجدول ، فسيكون الجدول عادةً أكثر كفاءة وعملية.

النموذج ضروري إذا:

• نحن نجمع المدخلات من المستخدم
• لدينا الكثير من البيانات لعرضها
• يجب أن تكون البيانات مجزأة بشكل واضح
• من المحتمل أن يصل المستخدم إلى البيانات من جهاز محمول

إذا لم يكن أي من العناصر المذكورة أعلاه صحيحًا ، فليس من الضروري استخدام نموذج ، ويكفي وجود جدول. يتمثل التحدي الذي نواجهه في توافق الأجهزة المحمولة في أنه لا توجد طاولات أو نماذج مناسبة حقًا لعرض أجهزة الجوّال. حقيقة أن مصممي الهواتف الذكية قد أعطوا مستخدميهم خيار استخدام متصفح في اتجاه عمودي وأن معظم المستخدمين يفضلون الاحتفاظ بهواتفهم بهذه الطريقة التي تسبب معظم مشكلات توافق الأجهزة المحمولة التي يتعين على مصممي المواقع التعامل معها.

بغض النظر ، النماذج أكثر قابلية للتكيف مع شاشة عرض متحركة من الجداول. لذا ، إذا كان عليك حقًا التأكد من إمكانية عرض جميع البيانات بسهولة على شاشة الهاتف المحمول ، فإن النماذج تعد خيارًا أفضل من الجداول ... في بعض الأحيان!

2. تصميم desktop نسق

صحيح أنه من المفترض بشكل عام تصميم تخطيط للجوال أولاً ، ولكن عندما يتعلق الأمر بالنماذج ، ليست هذه هي أفضل طريقة ، لأننا نحتاج إلى معرفة كيفية تجميع البيانات ، ويمكننا القيام بذلك فقط إذا كنا يمكن رؤية جميع الحقول في وقت واحد ، وهو شيء لا يمكن القيام به على الهاتف المحمول إلا إذا كنت تعرض بيانات قليلة جدًا لا نحتاج إليها عناء تصميم النموذج.

إن أسرع طريقة لتصميم نموذج هو استخدام InkScape. في هذا المثال ، سننشئ نظامًا لإدارة سجلات الموارد البشرية. هنا هو نموذج بالحجم الطبيعي لـ desktop النموذج المبدئي:

يمثل المستطيل الخارجي المساحة الكاملة لشاشة تبلغ 1024 × 768 بكسل. على أي desktop المتصفح ، لا يمكننا الوصول إلى هذا العدد الكبير من وحدات البكسل ما لم يكن المستخدم في وضع ملء الشاشة (وهو ما نادرًا ما يحدث). لذلك لدينا

التصميم 900 × 600 بكسل ، والذي يجب أن يتناسب مع المساحة المتاحة في معظم الأحيان desktop شاشات.

عندما تكون المساحة المتاحة أقل من 900px ، ستنكسر أعمدة 2 x 450px وتظهر كعمود 450px واحد مستمر. يحل هذا مشكلة توافق الأجهزة المحمولة ، على الأقل حتى تطالب Google بأن نجعل جميع مواقعنا قادرة على احتوائها على شاشة ساعة اليد.

ستلاحظ أن معظم الشاشة تتكون فقط من صناديق الإدخال العادية ، والتي قد تبدو مملة ، ولكن في الواقع هي دائمًا أفضل طريقة للقيام بذلك. لاحظ أيضًا استخدام خط عرض ثابت. هذا يساعد على الحفاظ على التوحيد في تصميم النموذج.

ستكون أعمدةنا في الواقع أكثر قليلاً من 450px ، مثل 600px لكل منها ، ولكن إذا أردنا فرض أن يكون عرض العمود حوالي 450px ، فنحن فقط نخفض حجم العمود من 6 إلى 5. ولكن يجب أن يوضع عمود 600px على شاشة الهاتف المحمول في وضع عمودي بدون التفاف ، على أي حال.

سنختبر تخطيطنا باستخدام هذا الرمز:

ويمكننا أن نرى أن كل شيء يبدو جيدًا (لأننا أضفنا مؤقتًا حدودًا لإظهارنا).

من الواضح أن أداة مسطرة شاشة Linux ليست جزءًا من صفحة الويب ، ولكن هناك لتوضيح لنا أن أعمدةنا لن تنكسر بشكل سيء على شاشة أصغر. دعنا نحدث ما يحدث في مختلف شاشات العرض الشائعة:

3. خلق أحجام المدخلات المخصصة وموقف التسمية

إذا تركنا كل شيء افتراضيًا ، دون إضافة أي CSS مخصص ، فهذا هو ما سيحدث عند إضافة أول صف من عناصر التحكم في الإدخال:

يحدث هذا لأن التسمية لكل إدخال تخلف عن يسار الإدخال ، ولأننا لم نقم بتعيين عرض مخصص لعناصر التحكم في الإدخال. يمكننا حل كل المشاكل مع CSS.

الآن قمنا بتعيين خاصية عرض عناصر الملصق على "block" ، وقمنا بتعيين حقلي First and Last to class "in40w" ، وحقل MI إلى الفئة "in10w" ، ويجب أن يبدو كل شيء أجمل بكثير.

كما ترى ، يبدو أفضل ، لكن التخطيط لم يعد صحيحًا. الآن مربعات مكدسة. لذا كيف نصلح ذلك عن طريق التخلص من فكرة استخدام عنصر التصنيف على الإطلاق ، لأننا لا نحتاج إلى ذلك حقًا. سوف نطبق فقط لدينا in40w و in10w الطبقات ، بالإضافة إلى جعل فئة جديدة تسمى inLeftOf.

والتي ، بمجرد تطبيقها ، تعمل على حل المشكلة التي رأيناها سابقًا ، مثل هذا:

ولكن هذا لا يترك مساحة كافية لحقل SSN. ذلك لأن العمود الأيسر أكبر من المتوقع ، لذلك 40٪ هي في الواقع مساحة أكبر مما نحتاج لهذه الحقول ، حتى نتمكن من خفضها إلى in30w، والحقل الأوسط أكبر مما يجب أن يكون ، حتى نتمكن من القيام بذلك in5w. إليك ما يحدث:

إذن ، هناك الآن مساحة كافية لإضافة حقل SSN ، الذي يكمل السطر الأول من نموذج الإدخال. بعد تجانس كل هذه التفاصيل ، يجب أن يكون بناء بقية العمود الأيسر أمرًا سهلاً للغاية. يمكننا التخلص من الحدود المؤقتة الآن ، وكذلك تطبيق الخلفية الصحيحة على العمود. إليك النصف العلوي من اللوحة ، قبل أن نصل إلى مناطق خاصة من النموذج:

حدثت بعض الأشياء في هذه المرحلة. الأول كان الجزء السهل من تعيين لون الخلفية للعمود (rgb (235,235,246)) ، وعلى الرغم من أنه لا يمكنك رؤيته هنا ، فقد تم تعيين لون النص لجميع المدخلات على #427DB4 ، ووزن الخط تم تعيينه على جريئة وذلك للحد من إجهاد العين. تم ضبط النص على التحويل تلقائيًا إلى أحرف كبيرة باستخدام خاصية تحويل النص في CSS ، وذلك لتسريع إدخال البيانات وتقليل الأخطاء.

تتطلب المسألة الأكثر تعقيدًا المتمثلة في محاذاة عناصر التحكم والتأكد من الاحتفاظ بمحاذاة لائقة في أي نوع من أنواع العرض مزيدًا من التفكير. لقد شاهدت بالفعل التقنية المستخدمة في السطر الأول من المدخلات وعلاماتها. ستعمل هذه التقنية عندما لا يكون هناك أي مسافات إضافية بين المدخلات ، ولكن إذا كنا بحاجة إلى إضافة مساحة ، فمن الأفضل استخدام تقنية أخرى.

تتضمن هذه التقنية الأخرى إنشاء صف متداخل من الأعمدة داخل عمودنا الرئيسي ، مما سيساعد في إبقاء عناصر التحكم متباعدة بشكل صحيح. يتغير عدد الأعمدة وأحجامها وفقًا لمتطلبات كل مجموعة من عناصر التحكم. تذكر كل شيء responsive، لذلك عند تغيير حجم العمود ، سيحاول كل شيء داخل العمود تغيير حجمه لمطابقة التغيير. هذه أخبار جيدة للمستخدمين المعاقين بصريًا ، حيث يمكنهم تكبير التكبير على شاشة العرض الخاصة بهم وسيتم ترتيب كل شيء بشكل صحيح كما هو الحال مع أي مستخدم آخر.

بالانتقال إلى الجزء الأكثر تعقيدًا من العمود الأيسر ، دعا المفهوم الأصلي المبين في النموذج إلى بنية كان من الصعب تنفيذها. لحسن الحظ ، أدركت أن البيانات الموجودة على لوحة الاستحقاقات يمكن مضاعفتها إذا تم استخدام خانات اختيار قياسية ، مما أدى إلى حل مشكلة تعقيد التخطيط بشكل جيد:

الألواح الأخف حول الأقسام الخاصة هي مجرد آبار Bootstrap عادية. لإدخال بيانات الدين ، من الضروري الاختيار من قائمة مجموعة من الديانات الرسمية المحددة مسبقًا (بما في ذلك "الأخرى"). كان تطوير أعمدة الجانب الأيمن أسهل ، واستخدمت نفس الأساليب من المجموعة الأولى من عناصر التحكم في العمود الأيسر ، وتنظيم عناصر التحكم في جدول formatولكن بدون استخدام طاولة.

لكي ينجح هذا المشروع ، كان عليه أن يقدم الكمال responsiveنيس على جميع أحجام العرض الرسمية. دعونا نرى كيف تحولت النتيجة. أولاً مع إصدار الدقة الكاملة:

هذا قريب بما يكفي من النموذج الأولي الذي يمكننا أن نشعر بالرضا عنه. في الواقع ، إنه حتى تحسن. الآن دعونا نرى responsive تخطيط في كل قسم من أقسام الصفحة المختلفة:

لقد جعل Bootstrap و HTML5 تطوير النموذج أسرع وأسهل من أي وقت مضى ، ولكن العديد من المطورين يقوضون هذا التقدم من خلال جعل النماذج معقدة للغاية (باستخدام عناصر نموذج HTML5 الخاصة لمجرد أنها موجودة لاستخدامها بدلاً من كونها ضرورية للمشروع ) ، وعن طريق إنشاء نماذج أحادية البعد تمامًا لا تحاول حتى الاستفادة منها responsive التصميم. مع القليل من العناية والعمل الإضافي ، يمكن جعل أي بيانات تبدو أكثر جاذبية على أي حجم للشاشة.

قد تحصل على بعض الثغرات الطفيفة في أصغر حجم للشاشة في تخطيط عمودي على أصغر حجم للشاشة (في حالة هذا المشروع ، يكون الحقل Middle Initial في الصف الأول أصغر قليلاً مما سيكون مثاليًا) ، لكن مستخدمي الجوال بشكل عام قبول أن هذه هي المفاضلة التي يتعين عليهم إجراؤها لعدم حمل هواتفهم بشكل صحيح.

افعلها بشكل صحيح ، ويمكن أن تبدو نماذج البيانات كما يلي:

بدلاً من هذا أه:

رأس الصورة مجاملة من تيمو كويلدر