تطوير الويب

مقدمة

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

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

أهداف التعلم

بعد إكمال الدورة ستكون قادراً على:

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

كيف تعمل صفحة الويب

عندما يفتح المتصفح صفحة، يقرأ HTML ليبني تمثيلاً منظماً للمحتوى يسمى نموذج كائن المستند أو DOM. بعد ذلك يطبّق قواعد CSS لتحديد الألوان والمسافات والخطوط والتخطيط، ثم يستطيع JavaScript قراءة عناصر DOM وتغييرها والاستجابة لأفعال المستخدم. هذه التقنيات منفصلة في المسؤولية لكنها مترابطة في النتيجة.

في مشروع مهني بسيط يمكنك التفكير بهذه الطريقة: HTML يصف أن الصفحة تحتوي على عنوان وقائمة خدمات ونموذج، CSS يقرر كيف تُرتب البطاقات وكيف تظهر على الهاتف، وJavaScript يحدّث رسالة الحالة عندما يضغط المستخدم زرّاً. فصل المسؤوليات يجعل المشروع أسهل في القراءة والاختبار والصيانة.

JavaScript تضيف السلوك والتفاعل إلى الصفحة

= سير عمل عملي

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

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

بناء هيكل الصفحة باستخدام HTML

HTML لغة ترميز وليست لغة تنسيق بصري. دورها الأساسي وصف بنية المحتوى وعلاقاته. استخدم عناصر دلالية مثل header وnav وmain وsection وarticle وfooter عندما تناسب المعنى. هذا يحسن القراءة والصيانة ويساعد التقنيات المساعدة ومحركات البحث على فهم الصفحة.

مثال لصفحة ورشة تدريبية:

<!doctype html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ورشة صيانة الحاسوب</title>
</head>
<body>
  <header>
    <p>مركز التدريب التقني</p>
    <nav aria-label="التنقل الرئيسي">
      <a href="#services">الخدمات</a>
      <a href="#request">طلب صيانة</a>
    </nav>
  </header>

  <main>
    <section id="services">
      <h1>خدمات الورشة</h1>
      <article>
        <h2>فحص الجهاز</h2>
        <p>نفحص المكونات ونوثق الأعطال قبل بدء الإصلاح.</p>
      </article>
    </section>

    <section id="request">
      <h2>طلب صيانة</h2>
      <form>
        <label for="customer-name">الاسم</label>
        <input id="customer-name" name="customer-name" type="text">
        <button type="submit">إرسال الطلب</button>
      </form>
    </section>
  </main>

  <footer>
    <p>مشروع تدريبي لتعلم تطوير الويب.</p>
  </footer>
</body>
</html>

لاحظ وجود lang="ar" لتحديد لغة الصفحة وdir="rtl" لاتجاه الكتابة، ووسم viewport لدعم العرض الصحيح على الأجهزة المحمولة. كما يرتبط label بحقل الإدخال عبر تطابق for مع id، وهذا يحسن فهم النموذج واستخدامه.

= الصور والروابط والنماذج

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

مثال لصورة معلوماتية:

<img src="workshop.jpg" alt="فني يفحص مكونات حاسوب مكتبي داخل ورشة تدريبية">

وفي النماذج، اجعل لكل حقل تسمية واضحة ودائمة. النص المؤقت داخل الحقل ليس بديلاً جيداً عن التسمية لأنه قد يختفي عند الكتابة.

تنسيق الصفحة باستخدام CSS

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

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.7;
  background: #f7f7f7;
  color: #1f2933;
}

main {
  width: min(92%, 70rem);
  margin-inline: auto;
  padding: 1rem;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

.card {
  background: white;
  border: 1px solid #c9d2dc;
  border-radius: 0.75rem;
  padding: 1rem;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid #0b63ce;
  outline-offset: 3px;
}

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

التصميم المتجاوب

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

.page-layout {
  display: grid;
  gap: 1rem;
}

img {
  max-width: 100%;
  height: auto;
}

@media (min-width: 48rem) {
  .page-layout {
    grid-template-columns: 2fr 1fr;
  }
}

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

= الاستجابة لتفضيلات المستخدم

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

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto;
    animation: none;
    transition: none;
  }
}

إتاحة الويب

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

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

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

= اختبار الإتاحة عملياً

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

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

إضافة التفاعل باستخدام JavaScript

JavaScript تسمح للصفحة بالاستجابة للأحداث وتعديل المحتوى. ابدأ بتفاعل بسيط يمكن فهمه واختباره. لا تجعل وظيفة أساسية متوقفة على حركة زخرفية أو إدخال غير ضروري. استخدم addEventListener لربط الأحداث بالسلوك بدلاً من وضع معالجات الأحداث داخل عناصر HTML.

افترض أن الصفحة تحتوي على زر معرفه status-button وفقرة معرفها status. يمكن لملف JavaScript قراءة العنصرين وتحديث الرسالة:

const statusButton = document.querySelector("#status-button");
const statusText = document.querySelector("#status");

statusButton.addEventListener("click", () => {
  statusText.textContent = "تم تسجيل الفحص الأولي للجهاز.";
});

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

JavaScript تتعامل مع DOM والأحداث لإضافة التفاعل

= التحقق من المدخلات دون إرباك المستخدم

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

const hoursField = document.querySelector("#training-hours");
const hours = Number(hoursField.value);

if (Number.isNaN(hours) || hours < 0) {
  console.error("قيمة ساعات التدريب غير صالحة");
}

التصحيح وأدوات المطوّر

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

أدوات المطوّر في المتصفح تساعدك في أربع مناطق مهمة: تبويب العناصر لفحص HTML والأنماط المحسوبة، وحدة التحكم لرسائل JavaScript وتنفيذ أوامر تجريبية، تبويب الشبكة لمراقبة الطلبات والملفات والاستجابات، وأدوات الاستجابة لمحاكاة أحجام شاشة مختلفة. تختلف أسماء التبويبات قليلاً بين المتصفحات لكن الفكرة واحدة.

= طريقة تصحيح قابلة للتكرار

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

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

مشروع تطبيقي مهني مصغر

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

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

مهام تفاعلية

اختبار: اختبر معرفتك

ما الوظيفة الأساسية لـ HTML في صفحة الويب؟ (وصف بنية المحتوى ومعناه) (!إدارة قواعد البيانات) (!ضغط الصور تلقائيا) (!تشفير الاتصال بالشبكة)

لماذا يفضّل استخدام عناصر HTML الدلالية؟ (لأنها تصف وظيفة المحتوى بوضوح) (!لأنها تلغي الحاجة إلى CSS) (!لأنها تجعل كل الصفحات متشابهة) (!لأنها تمنع جميع أخطاء JavaScript)

ما الدور الأساسي لـ CSS؟ (التحكم في المظهر والتخطيط) (!إنشاء قاعدة بيانات) (!إرسال البريد الإلكتروني) (!تسجيل أسماء النطاقات)

ما المقصود بالبدء من الهاتف في التصميم المتجاوب؟ (بناء تخطيط بسيط للشاشة الصغيرة ثم تحسينه للمساحات الأكبر) (!تصميم نسخة منفصلة لكل هاتف) (!إخفاء المحتوى الطويل على الحاسوب) (!استخدام صور ثابتة لكل القياسات)

متى تكون نقطة التحول في التصميم المتجاوب مفيدة؟ (عندما يحتاج المحتوى إلى تغيير التخطيط بسبب المساحة) (!عند تغيير اسم الملف) (!عند إضافة تعليق برمجي) (!عند فتح محرر النصوص)

ما الهدف من النص البديل للصورة المعلوماتية؟ (نقل الغرض أو المعلومة المهمة نصيا) (!زيادة حجم الصورة) (!تغيير لون الخلفية) (!تشغيل الفيديو تلقائيا)

ما الممارسة الأفضل لحقل نموذج نصي؟ (ربطه بتسمية واضحة ودائمة) (!استخدام لون وحده لشرح المطلوب) (!إزالة أي وصف للحقل) (!منع استخدام لوحة المفاتيح)

ما وظيفة مستمع الحدث في JavaScript؟ (تشغيل سلوك عند وقوع حدث محدد) (!تغيير عنوان النطاق) (!إنشاء ملف صورة) (!ضغط شبكة الإنترنت)

ما فائدة وحدة التحكم في أدوات المطوّر؟ (قراءة الرسائل والأخطاء وفحص قيم JavaScript) (!تصميم شعار الموقع) (!شراء خدمة استضافة) (!تحرير ملفات الصوت)

ما أول خطوة جيدة عند تصحيح خطأ؟ (إعادة إنتاج المشكلة وتحديد السلوك المتوقع) (!تغيير عدة ملفات عشوائيا) (!حذف جميع الأنماط) (!إعادة كتابة المشروع كاملا)

لعبة الذاكرة

HTML	لغة ترميز تصف بنية المحتوى
CSS	لغة أنماط تتحكم بالمظهر والتخطيط
JavaScript	لغة برمجة تضيف السلوك والتفاعل
DOM	تمثيل برمجي منظم لعناصر الوثيقة
نقطة التحول	موضع يتغير عنده التخطيط استجابة للمساحة
النص البديل	وصف نصي للغرض أو المعلومة التي تحملها الصورة
وحدة التحكم	أداة لقراءة الرسائل والأخطاء وفحص القيم

السحب والإفلات

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

كلمات متقاطعة

هيكلة	ما الوظيفة التي تقدمها HTML للمحتوى؟
تنسيق	ما العمل الأساسي الذي تؤديه CSS للمظهر؟
استجابة	ما صفة التصميم الذي يتكيف مع مساحة العرض؟
إتاحة	ما المجال الذي يهتم بقدرة أشخاص ذوي احتياجات مختلفة على استخدام الموقع؟
تفاعل	ما النتيجة التي تضيفها JavaScript عند الاستجابة لأفعال المستخدم؟
تصحيح	ما العملية المنظمة للعثور على سبب الخطأ وإصلاحه؟

مهام مفتوحة

سهل

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

متوسط

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

متقدم

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

مجالات تعلم مرتبطة

تطوير الويب

مسرد

HTML: لغة ترميز تصف بنية محتوى صفحة الويب ومعناه الدلالي.
CSS: لغة أنماط تتحكم في العرض المرئي والتخطيط والاستجابة.
JavaScript: لغة برمجة تستخدم في المتصفح لإضافة السلوك والتفاعل.
DOM: تمثيل برمجي لعناصر الوثيقة يسمح لـ JavaScript بقراءتها وتعديلها.
HTML الدلالي: استخدام العنصر المناسب وفق معنى المحتوى ووظيفته بدلاً من الاعتماد على عناصر عامة فقط.
التصميم المتجاوب: أسلوب يجعل التخطيط والمحتوى يتكيفان مع المساحة وخصائص بيئة الاستخدام.
نقطة التحول: قيمة أو حالة يتغير عندها التخطيط لأن المحتوى يحتاج إلى ترتيب مختلف.
إتاحة الويب: ممارسات تجعل المحتوى والوظائف قابلة للاستخدام من أشخاص ذوي قدرات وتقنيات مساعدة متنوعة.
النص البديل: وصف نصي يعبّر عن وظيفة الصورة أو المعلومة الأساسية التي تنقلها.
التركيز المرئي: مؤشر واضح يبين العنصر النشط أثناء التنقل بلوحة المفاتيح.
وحدة التحكم: جزء من أدوات المطوّر يعرض رسائل JavaScript والأخطاء ويتيح فحص القيم.
التصحيح: عملية منهجية لإعادة إنتاج الخطأ وعزل سببه واختبار إصلاح مناسب.

مشروعات aiMOOC

Diesen aiMOOC als Battle spielen: Weitere, Klasse 5-6, G-Niveau

Inhalte werden geladen ...

Mediathek wird aus dem Wiki geladen ...

Frag mich zum aktuellen Lerninhalt oder wähle eine kurze Hilfe.

Textmodus bereit

Sprache

Arabic:تطوير الويب