تكنولوجيا المعلومات والاتصالات (بالعربية) الصف الثاني الإعدادي، الأسبوع 15: مراجعة: التصميم وHTML وCSS

مراجعة الفصل الأول ومشروع

الأسبوع 15 · مراجعة الوحدتين ١ و٢ ومشروع الفصل (من إعداد Darslab) · 3 دروس

مراجعة: التصميم وHTML وCSS

ICT Prep 2 Term 1, Units 1–2: Review

الهدفأراجع UX وUI وHTML وCSS والأوامر الآمنة بمهام جديدة متنوعة.

كلمات جديدة

UX أم UI · الاستخدام والسهولة، أو المظهر والأسلوبقاعدة CSS · محدّد ثم خاصية وقيمة بين قوسين معقوفينالوسم الختامي · الوسم الذي ينهي العنصرأمر محدد · أمر يقول ماذا ولمن وماذا يعرض وكيف يبدو

الشرح

للوحدة الثانية نصفان. التصميم: UX هي سهولة الاستخدام ومتعته (التنقل والوضوح والاتساق)؛ وUI هي مظهر المنتج (الألوان والخطوط والتخطيط وحجم الأزرار)؛ وتذكر أسبابًا مثل التباين والهدوء. وصفحات الويب: HTML هو المحتوى في صناديق (حاوية وترويسة وقسم وتذييل)؛ وCSS هو المظهر في قواعد selector { property: value; } تُحفظ في ملف خارجي واحد ترتبط به صفحات كثيرة؛ والحشو داخل الصندوق والهامش خارجه. ومواقع الذكاء الاصطناعي: اكتب أوامر واضحة محددة على الورق، وتحقق من حقائق الذكاء الاصطناعي، واستخدم نماذج الاتصال ولا بيانات شخصية، واسأل معلّمًا ووالدين قبل النشر. جرّب المهام: صنّف الملاحظات، واقرأ الشيفرة، وجد الخطأ، وحسّن أمرًا، وصنّف الخيارات الآمنة وغير الآمنة.

ملاحظة أو خيار	UX أم UI / آمن أم لا
«لا أجد الجدول»	UX
«الحروف صغيرة جدًّا»	UI
نموذج اتصال في الصفحة	آمن
رقم هاتف حقيقي في صفحة عامة	غير آمن

أمثلة محلولة

Css

1header {
2  background-color: darkgreen;
3  color: white;
4}
5.container {
6  width: 80%;
7  margin: auto;
8}
9h2 {
10  border-bottom: 2px solid darkgreen;
11}

اقرأ القواعد والصفحة المخترَعة. الترويسة خضراء داكنة بحروف بيضاء. والحاوية بعرض 80% وفي الوسط. ولكل h2 خط رفيع أخضر داكن تحته. وتعرض الصفحة اسم النادي في h1 وقسمًا واحدًا فيه h2 وفقرة.

Css

1section {
2  padding: 10px
3  color: dark green;
4}

جد الخطأين في الشيفرة: تنقص فاصلة منقوطة بعد 10px وفي اسم اللون dark green مسافة. صحّحهما ثم حسّن أمرًا: الأمر الغامض «موقع جميل» يصبح «موقع بسيط لنادي حديقة مدرسي (مثال) فيه ثلاث صفحات ونموذج اتصال بالأخضر الداكن والأبيض».

نشاط الفصل

اصنع ورقة متنوعة ثانية: اكتب ملاحظة UX وملاحظة UI، وقاعدة CSS فيها خطأ ليجده صديق، وأمرًا غامضًا ليحسّنه صديق. وأضف خيارًا آمنًا وخيارًا غير آمن لصفحة نادٍ. بدّل وافحص.

تدرّب

صنّف: «الألوان متنافرة» و«يحتاج إلى نقرات كثيرة».

في القواعد، ماذا يفعل margin: auto للحاوية؟

هل الحشو داخل الصندوق أم خارجه؟

أيهما آمن في صفحة نادٍ: نموذج اتصال أم عنوان منزل؟