يعرض لك هذا الدرس التطبيقي حول الترميز كيفية إنشاء نموذج اشتراك آمن وسهل الاستخدام ويمكن الوصول إليه.
الخطوة 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 أنماط المتصفِّح التلقائية.
- هل تبدو الأنماط التلقائية صحيحة؟ ما الذي تريد تغييره لتحسين شكل النموذج؟
- هل الأنماط التلقائية مناسبة؟ ما المشاكل التي يمكن أن تواجهها عند استخدام النموذج كما هو؟ المزايا عنها على الهاتف المحمول؟ ماذا عن برامج قراءة الشاشة أو التقنيات المساعدة الأخرى؟
- مَن هم مستخدمو موقعك الإلكتروني والأجهزة والمتصفحات التي تستهدفها؟
اختبار النموذج
يمكنك الحصول على الكثير من الأجهزة وإعداد device lab، ولكن هناك بطرق أقل تكلفة وأكثر بساطة لتجربة النموذج على مجموعة من المتصفحات والأنظمة الأساسية والأجهزة:
- استخدام وضع الجهاز "أدوات مطوري البرامج في Chrome" لمحاكاة الأجهزة المحمولة.
- إرسال عنوان URL من جهاز الكمبيوتر إلى هاتفك
- استخدِم خدمة مثل BrowserStack لاختبار نطاقٍ ما. من الأجهزة والمتصفحات
- جرِّب النموذج باستخدام أداة قارئ الشاشة، مثل إضافة Chrome ChromeVox.
انقر على عرض التطبيق لمعاينة نموذج الاشتراك.
- يمكنك تجربة النموذج على أجهزة مختلفة باستخدام وضع الجهاز "أدوات مطوري البرامج في 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" لإدخال البريد الإلكتروني يعني أنّ مدير كلمات المرور في المتصفّح سيخزّن
عنوان البريد الإلكتروني باسم 'name' مع هذا المستخدم (اسم المستخدم!) لإدخال كلمة المرور.
* autocomplete="new-password" في حقل كلمة المرور هو تلميح لمدير كلمات المرور بأنه يجب
عرض تخزين هذه القيمة ككلمة مرور للموقع الحالي. يمكنك بعد ذلك استخدام
autocomplete="current-password" لتفعيل الملء التلقائي في نموذج تسجيل الدخول (تذكّر، هذا
الاشتراك).
الخطوة 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 فقط؟ إذا لم يكن كذلك، فما الذي تريد تغييره؟
في ما يلي الشكل الذي ينبغي أن يظهر به النموذج في هذه المرحلة:
التقدم إلى أبعد من ذلك
لا يتناول هذا الدرس التطبيقي حول الترميز العديد من الميزات المهمة:
جارٍ التحقّق من كلمات المرور المحتمَل تعرّضها للاختراق. يجب عدم السماح مطلقًا بكلمات المرور التي تم اختراقها. يمكنك (ويجب عليك) استخدام خدمة للتحقّق من كلمات المرور لرصد كلمات المرور المحتمَل تعرّضها للاختراق. ويمكنك استخدام خدمة حالية أو تشغيل إحدى الخدمات بنفسك على خوادمك. ننصحكم بتجربتها. إضافة كلمة مرور التحقق من النموذج.
رابط إلى مستندات بنود الخدمة وسياسة الخصوصية: وضح للمستخدمين كيفية وحماية بياناتهم.
النمط والعلامة التجارية: تأكد من تطابقهما مع بقية موقعك. عند إدخال أسماء وعناوين وإجراء الدفع، يحتاج المستخدمون إلى الشعور بالراحة والثقة بأنهم ما زالوا في المكان المناسب.
"إحصاءات Google" ومراقبة المستخدمين الحقيقية: تمكين أداء تصميم النموذج وسهولة استخدامه من الاختبار ومراقبته للمستخدمين الحقيقيين.