الدرس التطبيقي حول الترميز الخاص بأفضل الممارسات في نموذج الاشتراك

سام دوتون

يوضّح لك هذا الدرس التطبيقي حول الترميز كيفية إنشاء نموذج اشتراك آمن وسهل الوصول إليه وسهل الاستخدام.

الخطوة 1: استخدام ترميز HTML مفيد

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

  • انقر على إنشاء ريمكس لتعديله ليصبح المشروع قابلاً للتعديل.

يُرجى الاطّلاع على ترميز HTML للنموذج في index.html. ستظهر لك إدخالات للاسم والبريد الإلكتروني وكلمة المرور. يوجد كل منها في قسم، ولكل منها تسمية. زر الاشتراك هو... <button>! ولاحقًا في هذا الدرس التطبيقي حول الترميز، ستتعلم القوى الخاصة لكل هذه العناصر.

<form action="#" method="post">
        
  <h1>Sign up</h1>
  
  <section>
    <label>Full name</label>
    <input>
  </section>
  
  <section>
    <label>Email</label>
    <input>
  </section>
  
  <section>
    <label>Password</label>
    <input>
  </section>
  
  <button id="sign-up">Sign up</button>
  
</form>

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

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

اختبار النموذج

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

انقر على عرض التطبيق لمعاينة نموذج الاشتراك.

  • يمكنك تجربة النموذج على أجهزة مختلفة باستخدام "وضع الجهاز" ضمن "أدوات مطوري البرامج في Chrome".
  • افتح النموذج الآن على هاتف أو أجهزة حقيقية أخرى. ما هي الاختلافات التي تراها؟

الخطوة 2: إضافة CSS لتحسين عمل النموذج

انقر على عرض المصدر للعودة إلى رمز المصدر.

ليس هناك أي مشكلة في HTML حتى الآن، ولكن عليك التأكّد من أنّ النموذج يعمل بشكل جيد لمجموعة من المستخدمين على الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي.

في هذه الخطوة، يجب إضافة لغة CSS لتسهيل استخدام النموذج.

انسخ جميع ملفات CSS التالية والصقها في ملف css/main.css:

انقر على عرض التطبيق للاطّلاع على نموذج الاشتراك بنمط معيّن. ثم انقر على عرض المصدر للعودة إلى css/main.css.

  • هل تتوافق خدمة CSS هذه مع مجموعة متنوعة من المتصفحات وأحجام الشاشات؟

  • جرِّب تعديل padding وmargin وfont-size ليناسب أجهزة الاختبار.

  • تُعطى "خدمة مقارنة الأسعار" (CSS) الأولوية للأجهزة الجوّالة. يتم استخدام طلبات البحث عن الوسائط لتطبيق قواعد CSS على إطارات العرض التي يبلغ عرضها 400px على الأقل، ثم مرة أخرى لإطارات العرض التي لا يقل عرضها عن 500px. هل نقاط الإيقاف هذه كافية؟ كيف يجب اختيار نقاط التوقف للنماذج؟

الخطوة 3: إضافة سمات لمساعدة المستخدمين في إدخال البيانات

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

يُرجى تعديل ملف index.html حتى يظهر رمز النموذج على النحو التالي:

<form action="#" method="post">
        
  <h1>Sign up</h1>
  
  <section>        
    <label for="name">Full name</label>
    <input id="name" name="name" autocomplete="name" 
           pattern="[\p{L}\.\- ]+" required>
  </section>

  <section>        
    <label for="email">Email</label>
    <input id="email" name="email" autocomplete="username"
           type="email" required>
  </section>
  
  <section>
    <label for="password">Password</label>
    <input id="password" name="password" autocomplete="new-password" 
           type="password" minlength="8" required>
  </section>
  
  <button id="sign-up">Sign up</button>
  
</form>

توفّر قِيم type الكثير: * يحجب type="password" النص عند إدخاله ويمكّن مدير كلمات المرور في المتصفح من اقتراح كلمة مرور قوية. * توفّر type="email" ميزة التحقُّق الأساسية وتضمن أن يحصل مستخدمو الأجهزة الجوّالة على لوحة مفاتيح مناسبة. ننصحك بتجربتها.

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

يُرجى محاولة إرسال النموذج مع ملء حقل فارغ. لن يرسل المتصفّح النموذج، ويطلب إكمال البيانات الناقصة وتحديد التركيز. هذا لأنك أضفت السمة require إلى جميع الإدخالات. الآن، حاول الإرسال باستخدام كلمة مرور تحتوي على أقل من ثمانية أحرف. يحذّر المتصفّح من أنّ كلمة المرور ليست طويلة بما يكفي ويركّز على مصدر إدخال كلمة المرور بسبب السمة minlength="8". يمكن تنفيذ الإجراء نفسه مع pattern (المستخدَم لإدخال الاسم) وغيرها من قيود التحقّق. وينفّذ المتصفّح كل ذلك تلقائيًا، بدون الحاجة إلى أي رمز إضافي.

من المنطقي استخدام القيمة autocomplete name لإدخال الاسم الكامل، ولكن ماذا عن الإدخالات الأخرى؟ * autocomplete="username" في حقل إدخال البريد الإلكتروني يعني أن مدير كلمات المرور في المتصفح سيخزن عنوان البريد الإلكتروني على أنه "الاسم" لهذا المستخدم (اسم المستخدم!) لينتقل إلى كلمة المرور. * تتيح لك دالة autocomplete="new-password" في قسم كلمة المرور إمكانية إطلاع مدير كلمات المرور على إمكانية تخزين هذه القيمة باعتبارها كلمة المرور الخاصة بالموقع الإلكتروني الحالي. يمكنك بعد ذلك استخدام autocomplete="current-password" لتفعيل الملء التلقائي في نموذج تسجيل الدخول (تذكّر أنّ هذا النموذج هو sign-up).

الخطوة 4: مساعدة المستخدمين على إدخال كلمات مرور آمنة

مع النموذج كما هو، هل لاحظت أي خطأ في إدخال كلمة المرور؟

هناك مشكلتان: * لا توجد طريقة لمعرفة ما إذا كانت هناك قيود على قيمة كلمة المرور. * لا يمكنك رؤية كلمة المرور للتحقق من صحتها.

لا تجعل المستخدمين يخمنون!

عدِّل قسم كلمات المرور في index.html باستخدام الرمز التالي:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. 
          Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="new-password" 
         minlength="8" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

يضيف ذلك ميزات جديدة لمساعدة المستخدمين في إدخال كلمات المرور:

  • زر (في الواقع مجرد نص) لتبديل عرض كلمة المرور. (ستتم إضافة وظيفة الزر باستخدام JavaScript).
  • سمة aria-label لزر تبديل كلمة المرور.
  • سمة aria-describedby لإدخال كلمة المرور تقرأ برامج قراءة الشاشة نص التصنيف ونوع الإدخال (كلمة المرور) ثم الوصف.

لتفعيل زر تبديل كلمة المرور وإظهار معلومات المستخدمين حول القيود المفروضة على كلمة المرور، انسخ محتوى JavaScript بالكامل أدناه والصقه في ملف js/main.js الخاص بك.

(قد تكون خدمة CSS مفعّلة منذ الخطوة 2. ألقِ نظرة عليه لمعرفة كيفية نمط وموضع زر تبديل كلمة المرور.)

  • هل يمكن استخدام رمز أفضل من النص لتبديل عرض كلمة المرور؟ جرِّب اختبار قابلية الاستخدام بسعر مخفَّض مع مجموعة صغيرة من الأصدقاء أو الزملاء.

  • لتجربة آلية عمل برامج قراءة الشاشة مع النماذج، عليك تثبيت إضافة ChromeVox والتنقّل في النموذج. هل يمكنك إكمال النموذج باستخدام ChromeVox فقط؟ إذا لم يكن كذلك، فما الذي تريد تغييره؟

إليك الشكل الذي يجب أن يظهر به النموذج في هذه المرحلة:

تحقيق المزيد من الإنجازات

لا يتناول هذا الدرس التطبيقي حول الترميز العديد من الميزات المهمة:

  • جارٍ التحقّق من كلمات المرور المحتمَل تعرّضها للاختراق. يجب ألا تسمح مطلقًا بكلمات المرور التي تم اختراقها. يمكنك (وينبغي) استخدام خدمة تحقّق من كلمة المرور لرصد كلمات المرور المحتمَل تعرّضها للاختراق. ويمكنك استخدام خدمة حالية أو تشغيل خدمة بنفسك على خوادمك الخاصة. ننصحك بتجربتها. أضف كلمة المرور للتحقق إلى النموذج.

  • رابط إلى بنود الخدمة ومستندات سياسة الخصوصية: وضِّح للمستخدمين الطريقة التي تحمي بها بياناتهم.

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

  • "الإحصاءات" و"المراقبة الفعلية للمستخدم": يمكنك إتاحة اختبار أداء تصميم النموذج وسهولة استخدامه ومراقبته للمستخدمين.