🔴مهم
هناك فخ برمجي شائع في الأسئلة، يتعلق بكتابة التعليمة:
i = i++;
يعتقد كثير من الطلاب أن هذه التعليمة ستزيد قيمة المتغير i، فلو كانت قيمة i تساوي 5 قبل التنفيذ، سيتوقع البعض أن تصبح 6 بعد التنفيذ.
لكن الحقيقة أن i ستظل 5!
والسبب في ذلك يعود إلى طبيعة الزيادة بعدية التنفيذ (post-increment)، حيث أن i++ تقوم بالخطوات التالية:
1. تحفظ القيمة القديمة للمتغير في مؤقت: temp = 5.
2. تزيد قيمة المتغير داخليًا: i = 6.
3. تُرجع القيمة القديمة (5) كنتيجة للتعبير.
وبما أن التعليمة كاملة هي i = i++;، فإنه يتم تخزين القيمة القديمة مرة أخرى في i، فتظل القيمة النهائية: i = 5.
يمكن تشبيه الأمر كالتالي: "كأنك أودعت دينارًا في حسابك، ثم ألقيت بطاقة الحساب في سلة المهملات قبل أن تُسجَّل العملية." 😂
الزيادة تمت بالفعل، لكنها لم تُسجَّل لأن نتيجة التعبير أعادت القيمة القديمة للمتغير.
هناك فخ برمجي شائع في الأسئلة، يتعلق بكتابة التعليمة:
i = i++;
يعتقد كثير من الطلاب أن هذه التعليمة ستزيد قيمة المتغير i، فلو كانت قيمة i تساوي 5 قبل التنفيذ، سيتوقع البعض أن تصبح 6 بعد التنفيذ.
لكن الحقيقة أن i ستظل 5!
والسبب في ذلك يعود إلى طبيعة الزيادة بعدية التنفيذ (post-increment)، حيث أن i++ تقوم بالخطوات التالية:
1. تحفظ القيمة القديمة للمتغير في مؤقت: temp = 5.
2. تزيد قيمة المتغير داخليًا: i = 6.
3. تُرجع القيمة القديمة (5) كنتيجة للتعبير.
وبما أن التعليمة كاملة هي i = i++;، فإنه يتم تخزين القيمة القديمة مرة أخرى في i، فتظل القيمة النهائية: i = 5.
يمكن تشبيه الأمر كالتالي: "كأنك أودعت دينارًا في حسابك، ثم ألقيت بطاقة الحساب في سلة المهملات قبل أن تُسجَّل العملية." 😂
الزيادة تمت بالفعل، لكنها لم تُسجَّل لأن نتيجة التعبير أعادت القيمة القديمة للمتغير.
هذا المثال يُصنَّف تحت ما يُعرف بـ السلوك غير المحدد (Undefined Behavior) في لغة C++، أي أن اللغة نفسها لا تضمن النتيجة النهائية، وقد تختلف النتيجة من كومبايلر إلى آخر، أو حسب إعدادات التحسين (Optimization).
السبب في حدوث ذلك هو أنك تقوم بتعديل المتغير واستخدامه في نفس الجملة أكثر من مرة، دون وجود نقطة تسلسل (Sequence Point) واضحة تحدد ترتيب التنفيذ.
بعبارة أخرى، التعليمة مثل:
x = x++ + x++;
تحتوي على تعديل المتغير x واستخدامه أكثر من مرة في نفس التعبير، والكومبايلر ليس ملزمًا بأن يحدد أي عملية ++x تنفذ أولًا، أو متى يتم حساب قيمة x في كل خطوة.
لذلك، عند تنفيذ الكود، قد ترى نتائج مختلفة مثل:
10
11
12
وكلها صحيحة من وجهة نظر الكومبايلر، لأن السلوك غير معرّف أصلاً.
---
كيف تجعل السلوك محددًا وواضحًا؟
افصل عمليات الزيادة في جمل مستقلة، بحيث يكون كل تعديل واضحًا:
int x = 4;
++x;
++x;
cout << x + x;
أو:
int x = 4;
int a = ++x;
int b = ++x;
cout << a + b;
بهذه الطريقة، يكون السلوك محددًا، ولا يحدث أي لخبطة أو نتائج غير متوقعة.
السبب في حدوث ذلك هو أنك تقوم بتعديل المتغير واستخدامه في نفس الجملة أكثر من مرة، دون وجود نقطة تسلسل (Sequence Point) واضحة تحدد ترتيب التنفيذ.
بعبارة أخرى، التعليمة مثل:
x = x++ + x++;
تحتوي على تعديل المتغير x واستخدامه أكثر من مرة في نفس التعبير، والكومبايلر ليس ملزمًا بأن يحدد أي عملية ++x تنفذ أولًا، أو متى يتم حساب قيمة x في كل خطوة.
لذلك، عند تنفيذ الكود، قد ترى نتائج مختلفة مثل:
10
11
12
وكلها صحيحة من وجهة نظر الكومبايلر، لأن السلوك غير معرّف أصلاً.
---
كيف تجعل السلوك محددًا وواضحًا؟
افصل عمليات الزيادة في جمل مستقلة، بحيث يكون كل تعديل واضحًا:
int x = 4;
++x;
++x;
cout << x + x;
أو:
int x = 4;
int a = ++x;
int b = ++x;
cout << a + b;
بهذه الطريقة، يكون السلوك محددًا، ولا يحدث أي لخبطة أو نتائج غير متوقعة.
❤1
🔴 هام جدًا
تم التنسيق مع الدكتور عبدالله الوصابي والدكتور صهيب البريهي، وتم تحديد الأسبوع الثامن لاختبار مادة التكامل.
وكما هو موضّح في الجدول، سيكون الاختبار في أسبوع واحد لأن المادة مشتركة، وتكون المذاكرة مرة واحدة للمادتين لأنهما نفس المنهج.
#اختبار_نصفي
#الدكتور_عبدالله_الوصابي
#الدكتور_صهيب_البريهي
#تكامل
تم التنسيق مع الدكتور عبدالله الوصابي والدكتور صهيب البريهي، وتم تحديد الأسبوع الثامن لاختبار مادة التكامل.
وكما هو موضّح في الجدول، سيكون الاختبار في أسبوع واحد لأن المادة مشتركة، وتكون المذاكرة مرة واحدة للمادتين لأنهما نفس المنهج.
#اختبار_نصفي
#الدكتور_عبدالله_الوصابي
#الدكتور_صهيب_البريهي
#تكامل
❤2
🔴 هااام جدا
اختبار اللغة الانجليزية الاسبوع القادم ان شاء الله
#اختبار_نصفي
#الدكتور_احمد_الاصبحي
#لغة_انجليزية_102
اختبار اللغة الانجليزية الاسبوع القادم ان شاء الله
#اختبار_نصفي
#الدكتور_احمد_الاصبحي
#لغة_انجليزية_102
🤷♂2👍1🤣1
🔴 هااام غدا بإذن الله سيتم ارسال درجات الاحصاء في مجموعات الوتس
عن طريق المناديب
للاختبار النصفي الدكتور علي اليساني
عن طريق المناديب
للاختبار النصفي الدكتور علي اليساني
🔥2⚡1👍1
🚨هااااااااااااااااااااااااااااااااااام🚨
🔻بحسب إفادة وحدة النظم
تم إصلاح الخلل في النظام
والموقع جاهز لاستقبال التظلمات ويبدأ من اليوم ولمدة اسبوعين فقط.
#ملتقى_الطالب_الجامعي_كلية_الحاسوب.
#نحن_في_خدمتكم 🌹
🔻بحسب إفادة وحدة النظم
تم إصلاح الخلل في النظام
والموقع جاهز لاستقبال التظلمات ويبدأ من اليوم ولمدة اسبوعين فقط.
#ملتقى_الطالب_الجامعي_كلية_الحاسوب.
#نحن_في_خدمتكم 🌹
👍1
السلام عليكم ورحمة اللّه وبركاته.
المقرر لمادة اللغة الإنجليزية/ الوحدة
1,2,3,4,11,12
الوحدة 11و 12 نركز على القرامر والكلمة ومعناها (يعني الاختيارات التي تأتي بعد كل درس)
الوحدات ۱ و ۲ و ۳ و ٤ ركزوا ع كل شيء.
صيغة اختبار اللغة الانجليزية نفس هذه الصيغة ،
يعني يجيب لنا فراغات و يجيب لنا paragraph بيجيب ٣ مواضيع واحنا نختار اي موضوع ونكتب عليه ،المواضيع بتكون من الوحدات ۱ او ۲ او ۳ او ٤.
#اللغة_الإنجليزية
#أحمد_الأصبحي
المقرر لمادة اللغة الإنجليزية/ الوحدة
1,2,3,4,11,12
الوحدة 11و 12 نركز على القرامر والكلمة ومعناها (يعني الاختيارات التي تأتي بعد كل درس)
الوحدات ۱ و ۲ و ۳ و ٤ ركزوا ع كل شيء.
صيغة اختبار اللغة الانجليزية نفس هذه الصيغة ،
يعني يجيب لنا فراغات و يجيب لنا paragraph بيجيب ٣ مواضيع واحنا نختار اي موضوع ونكتب عليه ،المواضيع بتكون من الوحدات ۱ او ۲ او ۳ او ٤.
#اللغة_الإنجليزية
#أحمد_الأصبحي
🔵 تعميم هام لطلاب علوم الحاسوب – الدفعة 26
يسعدنا إبلاغكم بجدول اختبارات النصفي للفصل الحالي، إضافةً إلى توضيح التعديلات الخاصة بمحاضرات القروبات أثناء فترات الاختبارات، وذلك حرصًا على الانضباط وتوفير بيئة مناسبة للجميع دون أي تعارض أو ظلم لأي مجموعة.
---
📌 الأسبوع الأول
🔸 السبت – اختبار تكامل
الدكتور عبدالله الوصابي
من 2 – 4 ظهرًا
تعديلات المحاضرات:
CS1-G1
محاضرة الدكتورة اختيار نعمان ستكون 8 – 10 صباحًا بدل محاضرة الدكتور عبدالله الوصابي.
CS1-G2 & G4
سيتم تنسيق محاضرة تعويضية مع الدكتورة ابتهاج.
CS1-G3
تعويضي مع الدكتور أكرم الصلوي يوم الأربعاء 8 – 10 صباحًا.
---
🔸 الثلاثاء – اختبار تكامل
الدكتور صهيب البريهي
من 2 – 4 ظهرًا
---
📌 الأسبوع الثاني
🔸 الثلاثاء – اختبار اللغة الإنجليزية 102
الدكتور أحمد الأصبحي
من 2 – 4 ظهرًا
---
📌 الأسبوع الثالث
🔸 الخميس – اختبار تصميم ويب
الدكتور أحمد الشلبي
من 2 – 4 ظهرًا
تعديلات المحاضرات:
CS1-G1
تعويضي مع الدكتور أكرم الصلوي يوم الأربعاء 10 – 12.
CS1-G2
تعويضي مع الدكتورة اختيار يوم الأحد 8 – 10 صباحًا.
🔸 مادة اللغة العربية 102 – الدكتور عبدالحكيم
سيتم – بإذن الله – مناقشة إمكانية تحويل الاختبار إلى تكليف كما حدث في الترم الأول مع البروفيسور عبدالله الكوري.
---
📌 الأسبوع الرابع
🔸 الأحد – اختبار برمجة 2
الدكتورة وفاء الغالبي
من 8 – 10 صباحًا
تعديلات المحاضرات:
CS1-G1
تعويضي للدكتور أحمد الشلبي يوم الأربعاء 8 – 12.
---
🔵 ملاحظة هامة
تم إعداد الجدول ومواعيد التعويض بعناية شديدة، لضمان عدم وقوع أي ظلم أو تداخل بين القروبات، ولتسهيل حضور الاختبارات والمحاضرات التعويضية بكل سلاسة.
يسعدنا إبلاغكم بجدول اختبارات النصفي للفصل الحالي، إضافةً إلى توضيح التعديلات الخاصة بمحاضرات القروبات أثناء فترات الاختبارات، وذلك حرصًا على الانضباط وتوفير بيئة مناسبة للجميع دون أي تعارض أو ظلم لأي مجموعة.
---
📌 الأسبوع الأول
🔸 السبت – اختبار تكامل
الدكتور عبدالله الوصابي
من 2 – 4 ظهرًا
تعديلات المحاضرات:
CS1-G1
محاضرة الدكتورة اختيار نعمان ستكون 8 – 10 صباحًا بدل محاضرة الدكتور عبدالله الوصابي.
CS1-G2 & G4
سيتم تنسيق محاضرة تعويضية مع الدكتورة ابتهاج.
CS1-G3
تعويضي مع الدكتور أكرم الصلوي يوم الأربعاء 8 – 10 صباحًا.
---
🔸 الثلاثاء – اختبار تكامل
الدكتور صهيب البريهي
من 2 – 4 ظهرًا
---
📌 الأسبوع الثاني
🔸 الثلاثاء – اختبار اللغة الإنجليزية 102
الدكتور أحمد الأصبحي
من 2 – 4 ظهرًا
---
📌 الأسبوع الثالث
🔸 الخميس – اختبار تصميم ويب
الدكتور أحمد الشلبي
من 2 – 4 ظهرًا
تعديلات المحاضرات:
CS1-G1
تعويضي مع الدكتور أكرم الصلوي يوم الأربعاء 10 – 12.
CS1-G2
تعويضي مع الدكتورة اختيار يوم الأحد 8 – 10 صباحًا.
🔸 مادة اللغة العربية 102 – الدكتور عبدالحكيم
سيتم – بإذن الله – مناقشة إمكانية تحويل الاختبار إلى تكليف كما حدث في الترم الأول مع البروفيسور عبدالله الكوري.
---
📌 الأسبوع الرابع
🔸 الأحد – اختبار برمجة 2
الدكتورة وفاء الغالبي
من 8 – 10 صباحًا
تعديلات المحاضرات:
CS1-G1
تعويضي للدكتور أحمد الشلبي يوم الأربعاء 8 – 12.
---
🔵 ملاحظة هامة
تم إعداد الجدول ومواعيد التعويض بعناية شديدة، لضمان عدم وقوع أي ظلم أو تداخل بين القروبات، ولتسهيل حضور الاختبارات والمحاضرات التعويضية بكل سلاسة.
🔰اللجنة العلمية CS مستوى اول 🔰 pinned «🔵 تعميم هام لطلاب علوم الحاسوب – الدفعة 26 يسعدنا إبلاغكم بجدول اختبارات النصفي للفصل الحالي، إضافةً إلى توضيح التعديلات الخاصة بمحاضرات القروبات أثناء فترات الاختبارات، وذلك حرصًا على الانضباط وتوفير بيئة مناسبة للجميع دون أي تعارض أو ظلم لأي مجموعة. …»
🔰اللجنة العلمية CS مستوى اول 🔰
🔵 تعميم هام لطلاب علوم الحاسوب – الدفعة 26 يسعدنا إبلاغكم بجدول اختبارات النصفي للفصل الحالي، إضافةً إلى توضيح التعديلات الخاصة بمحاضرات القروبات أثناء فترات الاختبارات، وذلك حرصًا على الانضباط وتوفير بيئة مناسبة للجميع دون أي تعارض أو ظلم لأي مجموعة. …
ومتى سيكون اختبار مادتي الرياضيات المتقطعة والتصميم المنطقي الرقمي؟
🔰اللجنة العلمية CS مستوى اول 🔰
🔵 تعميم هام لطلاب علوم الحاسوب – الدفعة 26 يسعدنا إبلاغكم بجدول اختبارات النصفي للفصل الحالي، إضافةً إلى توضيح التعديلات الخاصة بمحاضرات القروبات أثناء فترات الاختبارات، وذلك حرصًا على الانضباط وتوفير بيئة مناسبة للجميع دون أي تعارض أو ظلم لأي مجموعة. …
🔴 هاااام جدا
تم التنسيق مع الدكتوره وفاء الغالبي
مادة برمجة 2
وتم تحديد الاختبار في الاسبوع التاسع
بعد اسبوع اختبار الاحصاء
و اغلبية الاختبار من شرح الدكتوره في المحاضرة
#اختبار_نصفي
#الدكتوره_وفاء_الغالبي
#برمجة2
تم التنسيق مع الدكتوره وفاء الغالبي
مادة برمجة 2
وتم تحديد الاختبار في الاسبوع التاسع
بعد اسبوع اختبار الاحصاء
و اغلبية الاختبار من شرح الدكتوره في المحاضرة
#اختبار_نصفي
#الدكتوره_وفاء_الغالبي
#برمجة2
🔰اللجنة العلمية CS مستوى اول 🔰
🔵 تعميم هام لطلاب علوم الحاسوب – الدفعة 26 يسعدنا إبلاغكم بجدول اختبارات النصفي للفصل الحالي، إضافةً إلى توضيح التعديلات الخاصة بمحاضرات القروبات أثناء فترات الاختبارات، وذلك حرصًا على الانضباط وتوفير بيئة مناسبة للجميع دون أي تعارض أو ظلم لأي مجموعة. …
لا يحق لاي شخص حذف الجدول
واذا هناك لتعديل يناسب الجميع
سيتم العمل به في الحال
نحن دوما في خدمتكم
واذا هناك لتعديل يناسب الجميع
سيتم العمل به في الحال
نحن دوما في خدمتكم
🤣3
🔰اللجنة العلمية CS مستوى اول 🔰
السلام عليكم ورحمة اللّه وبركاته. المقرر لمادة اللغة الإنجليزية/ الوحدة 1,2,3,4,11,12 الوحدة 11و 12 نركز على القرامر والكلمة ومعناها (يعني الاختيارات التي تأتي بعد كل درس) الوحدات ۱ و ۲ و ۳ و ٤ ركزوا ع كل شيء. صيغة اختبار اللغة الانجليزية نفس هذه الصيغة…
احفظوا اختصار FCIT واختصار CS يمكن يدخلين الاختبار .
إليكم الاختصارين ومعناهما:
FCIT = Faculty of Computing and Information Technology
كلية الحاسبات وتقنية المعلومات.
CS = Computer Science
علوم الحاسوب.
إليكم الاختصارين ومعناهما:
FCIT = Faculty of Computing and Information Technology
كلية الحاسبات وتقنية المعلومات.
CS = Computer Science
علوم الحاسوب.
🔰اللجنة العلمية CS مستوى اول 🔰
ومتى سيكون اختبار مادتي الرياضيات المتقطعة والتصميم المنطقي الرقمي؟
الرياضيات المتقطعة النظري الدكتورة اختيار نعمان سيكون مشروع
والعملي لم يتم تحديده
واختبار مادة التصميم المنطقي
للدكتور ماجد احتمال لن يكون موحد
سيكون مباشر على السبورة حل مسائل لكل ثلاثة طلاب فكل مندوب ينسق للاختبار لقروبه
والعملي لم يتم تحديده
واختبار مادة التصميم المنطقي
للدكتور ماجد احتمال لن يكون موحد
سيكون مباشر على السبورة حل مسائل لكل ثلاثة طلاب فكل مندوب ينسق للاختبار لقروبه
👍1
🔵 تعميم هام لطلاب علوم الحاسوب – الدفعة 26
حرصًا على توضيح مواعيد الاختبارات النصفية لهذا الفصل، ومراعاةً للتنسيق بين القروبات، نود إبلاغكم بالمواعيد النهائية للمواد التالية: اللغة الإنجليزية – التكامل – برمجة 2، إضافة إلى المحاضرات التعويضية المعتمدة لكل قروب.
---
🔸 أولًا: اختبار اللغة الإنجليزية 102
بالتنسيق مع الدكتور أحمد الأصبحي تقرر أن يكون اختبار مادة اللغة الإنجليزية الأسبوع القادم، من الساعة 2 إلى 4 ظهرًا.
---
🔸 ثانيًا: اختبار مادة التكامل (الأسبوع الثامن)
بعد التنسيق مع الدكتور عبدالله الوصابي و الدكتور صهيب البريهي، تم اعتماد الأسبوع الثامن ليكون موعدًا رسميًا لاختبار التكامل للمادتين، علمًا بأن المنهج موحّد والمذاكرة تكون مرة واحدة فقط.
اختبار الدكتور عبدالله الوصابي: السبت، من 2 إلى 4 ظهرًا.
اختبار الدكتور صهيب البريهي: الثلاثاء، من 2 إلى 4 ظهرًا.
التعويضات الخاصة بالقروبات:
CS1-G1:
محاضرة الدكتورة اختيار نعمان ستكون 8 – 10 صباحًا بدل محاضرة الدكتور الوصابي.
CS1-G2 & CS1-G4:
سيتم تنسيق محاضرة تعويضية مع الدكتورة ابتهاج.
CS1-G3:
تعويض مع الدكتور أكرم الصلوي يوم الأربعاء 8 – 10 صباحًا.
---
🔸 ثالثًا: اختبار برمجة 2 (الأسبوع التاسع)
تم اعتماد الأسبوع التاسع كموعد لاختبار مادة برمجة 2 بعد التنسيق مع الدكتورة وفاء الغالبي، وذلك بعد أسبوع اختبار التكامل
موعد الاختبار: الأحد، من 8 إلى 10 صباحًا.
أغلب الأسئلة ستكون من شرح الدكتورة داخل المحاضرة.
التعويضات:
CS1-G1:
تعويض لمحاضرة الدكتور أحمد الشلبي يوم الأربعاء من 8 إلى 12 ظهرًا.
---
🔵 تنويه
تم إعداد هذا التنظيم لتجنب أي تعارض بين القروبات وضمان سير العملية الأكاديمية بسلاسة، وأي تعديل سيُعلن فور صدوره.
حرصًا على توضيح مواعيد الاختبارات النصفية لهذا الفصل، ومراعاةً للتنسيق بين القروبات، نود إبلاغكم بالمواعيد النهائية للمواد التالية: اللغة الإنجليزية – التكامل – برمجة 2، إضافة إلى المحاضرات التعويضية المعتمدة لكل قروب.
---
🔸 أولًا: اختبار اللغة الإنجليزية 102
بالتنسيق مع الدكتور أحمد الأصبحي تقرر أن يكون اختبار مادة اللغة الإنجليزية الأسبوع القادم، من الساعة 2 إلى 4 ظهرًا.
---
🔸 ثانيًا: اختبار مادة التكامل (الأسبوع الثامن)
بعد التنسيق مع الدكتور عبدالله الوصابي و الدكتور صهيب البريهي، تم اعتماد الأسبوع الثامن ليكون موعدًا رسميًا لاختبار التكامل للمادتين، علمًا بأن المنهج موحّد والمذاكرة تكون مرة واحدة فقط.
اختبار الدكتور عبدالله الوصابي: السبت، من 2 إلى 4 ظهرًا.
اختبار الدكتور صهيب البريهي: الثلاثاء، من 2 إلى 4 ظهرًا.
التعويضات الخاصة بالقروبات:
CS1-G1:
محاضرة الدكتورة اختيار نعمان ستكون 8 – 10 صباحًا بدل محاضرة الدكتور الوصابي.
CS1-G2 & CS1-G4:
سيتم تنسيق محاضرة تعويضية مع الدكتورة ابتهاج.
CS1-G3:
تعويض مع الدكتور أكرم الصلوي يوم الأربعاء 8 – 10 صباحًا.
---
🔸 ثالثًا: اختبار برمجة 2 (الأسبوع التاسع)
تم اعتماد الأسبوع التاسع كموعد لاختبار مادة برمجة 2 بعد التنسيق مع الدكتورة وفاء الغالبي، وذلك بعد أسبوع اختبار التكامل
موعد الاختبار: الأحد، من 8 إلى 10 صباحًا.
أغلب الأسئلة ستكون من شرح الدكتورة داخل المحاضرة.
التعويضات:
CS1-G1:
تعويض لمحاضرة الدكتور أحمد الشلبي يوم الأربعاء من 8 إلى 12 ظهرًا.
---
🔵 تنويه
تم إعداد هذا التنظيم لتجنب أي تعارض بين القروبات وضمان سير العملية الأكاديمية بسلاسة، وأي تعديل سيُعلن فور صدوره.
🤷♂3👏1
شرح مفصّل لـ SVG داخل HTML (بالعربي)
نفصّلها خطوة بخطوة. شرح ما هو SVG، كيف تشتغل الفكرة الأساسية، عناصره المهمة، خصائص الرسم، التحويلات، طرق الإدراج في HTML، أمثلة عملية، ونصائح عملية. أكتب بلغة بسيطة لكن مفصّلة.
1) ما هو SVG؟
SVG = Scalable Vector Graphics، صيغة رسومية قائمة على النص (XML) تُستخدم لرسوم متجهية قابلة للتكبير بدون فقدان الجودة. بدلاً من بكسلات (مثل PNG أو JPG)، SVG يصف الأشكال رياضيًا — خطوط، منحنيات، أشكال هندسية، نصوص، تدرجات، فلترات، الخ.
نقاط مهمة:
قابل للتكبير بلا فقدان دقة.
قابل للتعديل عبر CSS و JavaScript.
قابل للوصول (قابلية القراءة بواسطة المساعدات، إمكانية إضافة وصف).
يمكن تضمينه مباشرة داخل صفحة HTML أو تحميله كملف خارجي.
2) الشكل الأساسي للإدراج داخل HTML
width و height: حجم العنصر في صفحة الويب (CSS يمكنه تغييره).
viewBox="minX minY width height": يحدد مساحة الإحداثيات الداخلية — مهم للتحجيم السليم.
xmlns: فضلاً ضعها للـ SVG inline.
3) نظام الإحداثيات و viewBox
الإحداثيات تبدأ من أعلى-يسار (0,0) بشكل افتراضي.
viewBox="0 0 100 100" يعني أن الإحداثيات الداخلية تتراوح من 0 إلى 100 في العرض والارتفاع. عند تغيير حجم العنصر، يتم مقياس الرسم بناءً على هذا الصندوق.
preserveAspectRatio يحدد كيف يتصرّف الرسم عند تغيير نسبة العرض/الطول (meet, slice, none، ومع خيارات المحاذاة مثل xMidYMid).
4) أشكال أساسية (عناصر شائعة)
<rect x="..." y="..." width="..." height="..." rx="..." ry="..."/> — مستطيل (rx/ry للزوايا المستديرة).
<circle cx="..." cy="..." r="..."/> — دائرة.
<ellipse cx="..." cy="..." rx="..." ry="..."/> — قطع ناقص.
<line x1="..." y1="..." x2="..." y2="..."/> — خط مستقيم.
<polyline points="x1,y1 x2,y2 ..."/> — سلسلة خطوط متصلة.
<polygon points="..."/> — مضلع مغلق.
<path d="M... L... C... Q... Z"/> — الشكل العام والقوي جداً (انظر أدناه).
مثال سريع:
5) مسارات Path — أهمها
<path> يسمح برسم أي شكل بإرشادات قصيرة:
M x y — MoveTo (نقطة بداية)
L x y — LineTo
H x / V y — Horizontal / Vertical line
C x1 y1 x2 y2 x y — Cubic Bézier curve
S x2 y2 x y — Smooth cubic Bézier
Q x1 y1 x y — Quadratic Bézier
T x y — Smooth quadratic Bézier
A rx ry x-axis-rotation large-arc-flag sweep-flag x y — قوس (arc)
Z أو z — close path (يغلق الشكل)
أحرف كبيرة = إحداثيات مطلقة، صغيرة = نسبية.
مثال:
6) التعبئة والحدود (fill & stroke) والخصائص المهمة
fill: لون داخل الشكل (none تعني لا تعبئة).
stroke: لون الحدود.
stroke-width: سماكة الخط.
stroke-linecap: butt | round | square — نهاية الخط.
stroke-linejoin: miter | round | bevel — تقاطع الخطوط.
fill-rule: nonzero | evenodd — للتحكم بكيفية تعبئة الأشكال المتداخلة.
opacity أو fill-opacity / stroke-opacity.
مثال:
7) التجميع والتحكم (groups & transforms)
<g>: لتجميع عناصر وتطبيق خواص مشتركة.
transform: تحركات/تدوير/تبديل/مقياس مثل:
translate(x,y)
rotate(angle[, cx, cy])
scale(sx[, sy])
skewX(angle) / skewY(angle)
أو سلسلة transforms transform="translate(10,20) rotate(30)"
مثال:
8) الرموز وإعادة الاستخدام (defs, symbol, use)
<defs>: تعريف عناصر لا تظهر مباشرة.
<symbol>: تعريف رسومات قابلة لإعادة الاستخدام.
<use href="#id" x="..." y="..."/> أو xlink:href قديماً.
مثال:
إعداد /أسرار علي الحِنَاكي.
نفصّلها خطوة بخطوة. شرح ما هو SVG، كيف تشتغل الفكرة الأساسية، عناصره المهمة، خصائص الرسم، التحويلات، طرق الإدراج في HTML، أمثلة عملية، ونصائح عملية. أكتب بلغة بسيطة لكن مفصّلة.
1) ما هو SVG؟
SVG = Scalable Vector Graphics، صيغة رسومية قائمة على النص (XML) تُستخدم لرسوم متجهية قابلة للتكبير بدون فقدان الجودة. بدلاً من بكسلات (مثل PNG أو JPG)، SVG يصف الأشكال رياضيًا — خطوط، منحنيات، أشكال هندسية، نصوص، تدرجات، فلترات، الخ.
نقاط مهمة:
قابل للتكبير بلا فقدان دقة.
قابل للتعديل عبر CSS و JavaScript.
قابل للوصول (قابلية القراءة بواسطة المساعدات، إمكانية إضافة وصف).
يمكن تضمينه مباشرة داخل صفحة HTML أو تحميله كملف خارجي.
2) الشكل الأساسي للإدراج داخل HTML
<noscript width="200" height="100" viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/noscript">
<rect x="10" y="10" width="180" height="80" fill="lightblue" stroke="navy" stroke-width="2"/>
</noscript>
width و height: حجم العنصر في صفحة الويب (CSS يمكنه تغييره).
viewBox="minX minY width height": يحدد مساحة الإحداثيات الداخلية — مهم للتحجيم السليم.
xmlns: فضلاً ضعها للـ SVG inline.
3) نظام الإحداثيات و viewBox
الإحداثيات تبدأ من أعلى-يسار (0,0) بشكل افتراضي.
viewBox="0 0 100 100" يعني أن الإحداثيات الداخلية تتراوح من 0 إلى 100 في العرض والارتفاع. عند تغيير حجم العنصر، يتم مقياس الرسم بناءً على هذا الصندوق.
preserveAspectRatio يحدد كيف يتصرّف الرسم عند تغيير نسبة العرض/الطول (meet, slice, none، ومع خيارات المحاذاة مثل xMidYMid).
4) أشكال أساسية (عناصر شائعة)
<rect x="..." y="..." width="..." height="..." rx="..." ry="..."/> — مستطيل (rx/ry للزوايا المستديرة).
<circle cx="..." cy="..." r="..."/> — دائرة.
<ellipse cx="..." cy="..." rx="..." ry="..."/> — قطع ناقص.
<line x1="..." y1="..." x2="..." y2="..."/> — خط مستقيم.
<polyline points="x1,y1 x2,y2 ..."/> — سلسلة خطوط متصلة.
<polygon points="..."/> — مضلع مغلق.
<path d="M... L... C... Q... Z"/> — الشكل العام والقوي جداً (انظر أدناه).
مثال سريع:
<noscript viewBox="0 0 200 80">
<circle cx="40" cy="40" r="30" fill="orange" />
<rect x="80" y="10" width="100" height="60" fill="teal" />
</noscript>
5) مسارات Path — أهمها
<path> يسمح برسم أي شكل بإرشادات قصيرة:
M x y — MoveTo (نقطة بداية)
L x y — LineTo
H x / V y — Horizontal / Vertical line
C x1 y1 x2 y2 x y — Cubic Bézier curve
S x2 y2 x y — Smooth cubic Bézier
Q x1 y1 x y — Quadratic Bézier
T x y — Smooth quadratic Bézier
A rx ry x-axis-rotation large-arc-flag sweep-flag x y — قوس (arc)
Z أو z — close path (يغلق الشكل)
أحرف كبيرة = إحداثيات مطلقة، صغيرة = نسبية.
مثال:
<path d="M10 10 L90 10 L50 70 Z" fill="purple"/>
6) التعبئة والحدود (fill & stroke) والخصائص المهمة
fill: لون داخل الشكل (none تعني لا تعبئة).
stroke: لون الحدود.
stroke-width: سماكة الخط.
stroke-linecap: butt | round | square — نهاية الخط.
stroke-linejoin: miter | round | bevel — تقاطع الخطوط.
fill-rule: nonzero | evenodd — للتحكم بكيفية تعبئة الأشكال المتداخلة.
opacity أو fill-opacity / stroke-opacity.
مثال:
<rect x="10" y="10" width="80" height="40" fill="none" stroke="red" stroke-width="4" stroke-linejoin="round"/>
7) التجميع والتحكم (groups & transforms)
<g>: لتجميع عناصر وتطبيق خواص مشتركة.
transform: تحركات/تدوير/تبديل/مقياس مثل:
translate(x,y)
rotate(angle[, cx, cy])
scale(sx[, sy])
skewX(angle) / skewY(angle)
أو سلسلة transforms transform="translate(10,20) rotate(30)"
مثال:
<g transform="translate(50,20) rotate(15)">
<rect width="100" height="50" fill="gold"/>
</g>
8) الرموز وإعادة الاستخدام (defs, symbol, use)
<defs>: تعريف عناصر لا تظهر مباشرة.
<symbol>: تعريف رسومات قابلة لإعادة الاستخدام.
<use href="#id" x="..." y="..."/> أو xlink:href قديماً.
مثال:
<defs>
<circle id="dot" cx="0" cy="0" r="5"/>
</defs>
<use href="#dot" x="20" y="20" fill="red"/>
<use href="#dot" x="40" y="40" fill="blue"/>
إعداد /أسرار علي الحِنَاكي.