ماذا ستتعلّم
- كيف تصف مهمة مستخدم واحد بدل «اصنع موقعًا»
- كيف تبني الصفحة على أجزاء: بنية وأنماط وسلوك
- كيف تفحص الصفحة على الهاتف وبلوحة المفاتيح
- ما الذي لا يجوز وضعه في كود الصفحة
مفاهيم أساسية
- HTML
- بنية الصفحة: العناوين والنص والأزرار والنماذج.
- CSS
- التنسيق: الألوان والخطوط والمسافات والتكيّف مع الشاشة.
- JavaScript
- السلوك: ماذا يحدث عند الضغط، وإرسال النماذج، والحركة.
- التجاوب
- تكون الصفحة مريحة بالقدر نفسه على الهاتف واللوحي والحاسوب.
01صِف سيناريو واحدًا
اختر مستخدمًا وإجراءً واحدًا: العثور على مادة، أو ترك طلب، أو فتح كتالوج. اكتب ما يراه الشخص قبل الإجراء وما يحصل عليه بعده. هذه هي مهمة النسخة الأولى.
مثال. «يدخل المذيع الصفحة، ويفهم في 10 ثوانٍ أن التبرعات تصل فورًا إلى محفظته، ويضغط „إنشاء رابط“».
02ابنِ على أجزاء
اطلب من الذكاء الاصطناعي أولًا بنية HTML فقط: عنوانًا ووصفًا وثلاث ميزات وزرًّا واحدًا. ثم الأنماط، ثم السلوك. افحص كل جزء في المتصفح قبل الانتقال إلى التالي: هكذا يسهل العثور على الخطأ.
نصيحة. اطلب تعليقات قصيرة في الكود: هكذا يسهل صيانته.
03افحص على الهاتف وبلوحة المفاتيح
افتح الصفحة على شاشة ضيقة: يجب ألّا يخرج شيء عن الحافة، وأن تُضغط الأزرار بالإصبع. تجوّل في الصفحة بمفتاح Tab: يجب أن يحصل كل رابط وزر على تركيز واضح.
- عرض 360 بكسل بلا تمرير أفقي
- الخط الأساسي لا يقل عن 16 بكسل
- لحقول النموذج تسميات
- كل الروابط تعمل
04الأمان
كل ما في كود الصفحة يراه أي زائر. مفاتيح API وكلمات المرور والرموز لا توضع في كود الصفحة أبدًا: تُحفظ على الخادم.
- لا تضع المفاتيح وكلمات المرور في HTML وJavaScript
- لا تربط نصوصًا برمجية من مواقع مجهولة
05جهّز للنشر
أضف عنوانًا واضحًا للصفحة (title) ووصفًا (description): تعرضهما محركات البحث. تحقّق من أن للصور أوصافًا (alt) وأن الصفحة تُفتح بسرعة على إنترنت الجوال.
قبل النشر
- الصفحة تحلّ سيناريو واحدًا واضحًا
- لا تمرير أفقي على الهاتف
- كل الأزرار والروابط تعمل ويمكن الوصول إليها بلوحة المفاتيح
- لا مفاتيح ولا كلمات مرور ولا رموز في الكود
- فيها title وdescription وأوصاف للصور
أخطاء شائعة والصواب
طلب «صنع الموقع كله» من الذكاء الاصطناعي دفعة واحدة
ابدأ بسيناريو واحد وابنِ على أجزاء.
الفحص على الحاسوب فقط
معظم الزوار يأتون من الهاتف.
مفتاح API في كود الصفحة مباشرة
تُحفظ الأسرار على الخادم فقط.
النشر بلا title وdescription
بدونهما يصعب العثور على الصفحة في البحث.
جرّب بنفسك
ابنِ صفحة لمشروعك: عنوان ووصف وثلاث ميزات وإجراء واحد يعمل.
- صِف سيناريو المستخدم في جملة واحدة
- احصل من الذكاء الاصطناعي على بنية HTML وافحصها في المتصفح
- أضف الأنماط وافحصها على عرض 360 بكسل
- تجوّل في الصفحة بمفتاح Tab ودوّن ما وجدته
النتيجة. صفحة تعمل وقائمة بالفحوص التي اجتازتها.
اختبر نفسك
أجب في ذهنك أولًا، ثم افتح الجواب.
1لماذا يُفضَّل بناء الصفحة على أجزاء؟الجواب
يُفحص كل جزء فورًا ويسهل العثور على الخطأ. أما الكود الكبير كاملًا فيصعب تصحيحه.
2هل يمكن حفظ مفتاح API في JavaScript الصفحة؟الجواب
لا. يرى أي زائر كود الصفحة، والمفاتيح تُحفظ على الخادم.
3كيف تفحص إتاحة الصفحة بسرعة؟الجواب
بالتجوّل فيها بمفتاح Tab: يجب أن يحصل كل زر ورابط على تركيز مرئي.
باختصار
سيناريو واحد، وبناء على أجزاء مع فحص في المتصفح، والهاتف ولوحة المفاتيح، وبلا أسرار في الكود، وtitle وdescription واضحان. هكذا تخرج الصفحة الأولى عاملةً لا جميلة فقط.