البحث عن أشكال ويب أكثر ذكاءً

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

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

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

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

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

الأدوات القياسية التي قدمناها مطورو المتصفح و 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

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

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

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

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

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

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

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

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

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

2. تصميم تخطيط سطح المكتب

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

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

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

التصميم هو 900 x 600px ، والذي يجب أن يتلاءم مع المساحة المتاحة لمعظم شاشات سطح المكتب.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

رأس الصورة مجاملة من

بوجدان رانسيا

بوجدان هو أحد الأعضاء المؤسسين لشركة Inspired Mag ، حيث اكتسب خبرة تقرب من سنوات 6 خلال هذه الفترة. يحب في وقت فراغه دراسة الموسيقى الكلاسيكية واستكشاف الفنون البصرية. انه مهووس جدا مع إصلاحات كذلك. يمتلك 5 بالفعل.