اذهب إلى المحتوى

Mustafa Suleiman

الأعضاء
 عرض الملف الشخصي  تصفح المحتوى

  • المساهمات

    9913

  • تاريخ الانضمام

  • تاريخ آخر زيارة

  • عدد الأيام التي تصدر بها

    300

 نوع المحتوى 

ريادة الأعمال

البرمجة

التصميم

DevOps

التسويق والمبيعات

العمل الحر

البرامج والتطبيقات

آخر التحديثات

قصص نجاح

أسئلة وأجوبة

كتب

دورات

كل منشورات العضو Mustafa Suleiman

  1. Mustafa Suleiman
    بالطبع تستطيع إنشاء API، وقد تم الحديث بشكل مفصل في النقاش التالي: ما هو الـ API
  2. Mustafa Suleiman
    السؤال غير واضح، أرجو توضيح السؤال مع مثال بالصورة لو أمكن
  3. Mustafa Suleiman
    الكود سليم، لكن كمحاولة استخدم الكود التالي: function onEdit(e) { const url = "http://localhost:8000/edit"; // استبدله بعنوان URL الصحيح لخادمك الشخصي const options = { method: "POST", headers: { "Content-Type": "application/json", }, payload: JSON.stringify(e), // إرسال بيانات التعديل كجزء من الجسم (payload) للطلب muteHttpExceptions: true, }; try { UrlFetchApp.fetch(url, options); } catch (error) { console.error("حدث خطأ أثناء إرسال الطلب:", error); } } قمت بإضافة خاصية "headers" لتعيين نوع المحتوى إلى "application/json"، كما قمت بتحويل بيانات التعديل (e) إلى سلسلة JSON باستخدام JSON.stringify() وإرسالها كجزء من الجسم (payload) للطلب. تم أيضًا إضافة كتلة try-catch للتعامل مع الأخطاء المحتملة أثناء إرسال الطلب، وستتم طباعة أي خطأ إلى سجل الخطأ ويمكنك مراجعته لمعرفة تفاصيل الخطأ المحدث. وعليك باستبدال عنوان URL الصحيح لخادمك في السطر const url = "http://localhost:8000/edit"; بالعنوان الصحيح الذي يستخدمه السيرفر لديك. وتأكد من أن السيرفر يستجيب للطلبات POST وأن لديك الإعدادات الصحيحة للوصول المشترك (CORS) للسماح للطلبات الواردة من نطاق Google Apps Script.
  4. Mustafa Suleiman
    الكلاس في HTML هو وسيلة لتحديد اسم للعنصر من أجل تطبيق تنسيق عليه بشكل دقيق عن طريق CSS أو تنفيذ سكريبت من خلال جافاسكريبت، وذلك عن طريق البحث عن العنصر باسم الكلاس ثم تنفيذ ما تريده. فتخيل لو لديك أكثر من عنصر div مثلاً ولكن تريد تنفيذ تنسيق لـ div محدد، فمن الأسهل وضع اسم له عن طريق الكلاس بدلاً من إختياره بصعوبة بناءًا على مكانه في الكود وإن تغير مكانه سيحدث مشكلة، لذلك إختياره بناءًا على اسمه سواء عن طريق الكلاس أو الـ id هو الصحيح. وبخصوص الأيقونة، فالكود في الصورة يستخدم أسماء الكلاسات الخاصة بمكتبة font-awesome والتي تقوم بتوفير أيقونات من خلال كتابة الكلاس الخاص بالأيقونة، وقد تم شرح ذلك بشكل وافي هنا:
  5. Mustafa Suleiman
    أولاً سأشرح لك ما معنى كل من الـ pseudo-classes الآتية: وقبل ذلك لنفهم ما معنى pseudo-class في CSS، وهي تعبير يستخدم لتحديد حالة محددة أو حالة خاصة لعنصر HTML، وتسمح pseudo-classes بتطبيق أنماط وتنسيقات مختلفة للعناصر بناءً على حالتها أو عنصر معين. {}a:link هذا يحدد النمط الذي ستظهر به الروابط التي لم يتم النقر عليها بعد (روابط لم يتم زيارتها). {}a:visited يحدد النمط الذي ستظهر به الروابط التي تم النقر عليها مسبقًا (روابط تم زيارتها أي النقر عليها). {}a:focus تحدد النمط الذي ستظهر به الروابط عندما تكون محددة بواسطة المستخدم (جرب الضغط على Tab في الكيبورد وستجد أنه يتم التنقل بين عناصر الصفحة إلى أن تصل للروابط). {}a:hover يحدد النمط الذي ستظهر به الروابط عندما يتم تحريك المؤشر فوقها. {}a:active يحدد النمط الذي ستظهر به الروابط عندما يتم النقر عليها (الضغط بالفأرة دون الإفلات أي بشكل مستمر أي اللحظة التي تضغط فيها بالفأرة). والترتيب الذي يشترط في هذه القواعد هو أمر مهم لأنه يُحدد ترتيب تطبيق الأنماط وتعديلات الشكل على الروابط وفقًا لحالة الروابط وتفاعل المستخدم معها. ولكن ذلك ليس ضروري حيث أن التنسيق هنا يتم بناءًا على حالة العنصر وليس موقعه في الكود المكتوب، وفي حال قمت بكتابة مثلاً focus أو hover في البداية فلن يتغير شيء، حيث يطبق التنسيق بناءًا على حالة العنصر فقط. ولتوضيح أفضل، إليك مثالًا على كيفية استخدام هذه القواعد: a:link { color: blue; } a:visited { color: purple; } a:focus { color: DarkTurquoise; } a:hover { color: red; } a:active { color: green; } وستكون الروابط غير المزارة باللون الأزرق (a:link)، وعندما يتم النقر على الرابط ويتم تحويله إلى حالة مزارة، سيتغير لونه إلى اللون البنفسجي (a:visited). وعند التنقل بين عناصر الصفحة عند الضغط على Tab سيكون اللون هو DarkTurquoise. وعند تحريك المؤشر فوق الرابط، سيتغير لونه إلى اللون الأحمر (a:hover)، وعند النقر عليه، سيتغير لونه إلى اللون الأخضر (a:active) وجرب عدم الإفلات أي اضغط بشكل مستمر وستجد أن لونه أخضر. وإليك مثال: <!DOCTYPE html> <html> <head> <title>تنسيق الروابط</title> <style> a { color: blue; } a:visited { color: p; } a:focus { color: DarkTurquoise; } a:hover { color: red; } a:active { color: green; } </style> </head> <body> <h1>تنسيق الروابط</h1> <p> <a href="#">روابط الصفحة</a> <br> <a href="#">رابط آخر</a> <br> <a href="#">رابط إضافي</a> </p> </body> </html>
  6. Mustafa Suleiman
    خاصية margin: 0 تستخدم لتحديد هوامش (margins) لعناصر HTML، وتعمل على تحديد المسافة بين العناصر والعناصر الأخرى في الصفحة. ولكن في حالة جداول HTML، خاصية margin: 0 لا تعمل بنفس الطريقة التي تعمل بها في عناصر HTML الأخرى. بل نستخدم خاصية border-collapse في جدول HTML، والتي تعمل على دمج حدود (borders) الخلايا المجاورة معًا، مما يؤدي إلى إزالة التباعد (spacing) الافتراضي بين الخلايا، ويعمل ذلك على تجنب ظهور التباعد الزائد ويمنح الجدول مظهرًا مرتب ومتجانس. في حين، خاصية margin: 0 لا تعمل على تجاهل التباعد بين الخلايا في جدول HTML، وحين وضعها على حقول الجدول td فلن تجد لها تأثير، وعند وضعها على الجدول نفسه table ستجد أنه يبتعد عند العناصر الأخرى بمقدار الـ margin الذي قمت بوضعه وإليك مثال: <style> table { border-collapse: collapse; margin: 10px } table td { border: 1px solid black; } </style> <table> <tr> <td>خلية 1</td> <td>خلية 2</td> <td>خلية 3</td> </tr> <tr> <td>خلية 4</td> <td>خلية 5</td> <td>خلية 6</td> </tr> </table>
  7. Mustafa Suleiman
    في لغة جافا، تستطيع استخدام الأنواع البدائية (مثل char) مباشرة دون الحاجة إلى إنشاء كائنات من الكلاس المرتبط بهذه الأنواع، وأيضًا بإمكانك استخدام الكلاس Character للتعامل مع الأحرف ككائنات. ويوفر الكلاس Character في جافا العديد من الدوال والميثودز المفيدة للتعامل مع الأحرف، مثل دالة isLetter() التي تحقق ما إذا كانت الحرف متكونة من حرف فقط أو لا، أي استخدام الدالة isLetter() على كائن من الكلاس Character لفحص الحرف الموجود فيه واسترجاع نتيجة الفحص. وكمثال، عندما نقوم بتعريف متغير من النوع البدائي char ونمنحه قيمة، فتستطيع استخدام الدالة isLetter() من الكلاس Character لفحص إذا كان الحرف الذي تم تخزينه يمثل حرفًا أو لا، وفي حالتنا، فإن الكود يعمل بشكل صحيح لأننا نقوم بتمرير قيمة الحرف إلى الدالة isLetter() ونطبع النتيجة التي تم استرجاعها من الدالة. لذلك، بالرغم من أنه يمكننا استخدام الأنواع البدائية مباشرة، إلا أن الكلاسات المرتبطة بهذه الأنواع (مثل Character) توفر وظائف إضافية ودوال مفيدة للتلاعب والتعامل مع هذه الأنواع. وإليك مثال يوضح كيفية استخدام الكلاس Character لفحص إذا كان الحرف متكونًا من حرف أو لا: public class Main { public static void main(String[] args) { char c1 = 'g'; // استخدام الدالة isLetter() من الكلاس Character boolean isLetter = Character.isLetter(c1); if (isLetter) { System.out.println("الحرف " + c1 + " هو حرف"); } else { System.out.println("الحرف " + c1 + " ليس حرف"); } } } أولاً نقوم بتعريف المتغير c1 كحرف 'g'، ثم نستخدم الدالة isLetter() من الكلاس Character لفحص إذا كان الحرف c1 يمثل حرفًا أو لا، ونتمكن من استرجاع النتيجة وتخزينها في متغير من النوع boolean بواسطة الكود boolean isLetter = Character.isLetter(c1);. ثم نقوم بفحص القيمة المخزنة في المتغير isLetter، وإذا كانت true، فإن الحرف c1 هو حرف ونقوم بطباعة رسالة توضح ذلك، وإذا كانت false، فإن الحرف c1 ليس حرف ونقوم بطباعة رسالة توضح ذلك. وبناءًا على القيمة المخزنة في المتغير c1 (الحرف 'g')، سيتم طباعة النتيجة "الحرف g هو حرف"، لأن الحرف 'g' هو حرف صالح. وإليك مصادر أخرى للشرح:
  8. Mustafa Suleiman
    الخطأ يخبرك أن الدالة FlatButton غير معرفة، هل قمت بكتابتها بشكل صحيح، أي تأكد من كتابة الأحرف الصغيرة والكبيرة في اسم الدالة بشكل صحيح، وأيضًا هل هناك مكتبة تستوردها لتعريف تلك الدالة؟
  9. Mustafa Suleiman
    أشرت لك من قبل أن الصيغة غير مدعومة في HTML5 وسيتوجب عليك تحويل الصيغة إلى أحد الصيغ التالية MP4, WebM, OGV عن طريق مكتبة مخصصة لذلك أو باستخدام أحد برامج تحويل الفيديوهات مثل: Any Video Converter Freemake Video Converter Free Video Converter وغيرها من البرامج الأخرى، وكما ذكرت لك هناك مكتبات تسمح بتحويل الفيديو مثل: https://www.npmjs.com/package/video-converter https://www.npmjs.com/package/video-format-converter https://www.npmjs.com/package/html5-media-converter
  10. Mustafa Suleiman
    بخصوص شرح عن <video> فستجد شرح كامل له في موسوعة حسوب، وأيضًا هناك دروس في قسم المقالات يشرح كيفية إضافة مقاطع الفيديو في HTML: وبخصوص العنصر <source> فقد تم شرحه في موسوعة حسوب أيضًا: https://wiki.hsoub.com/HTML/source وسبب أن الفيديو لا يعمل أن الصيغة .mov غير مدعومة في html5 وتستطيع رؤية الصيغ المدعومة من هنا: https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats والأمر يتطلب تحويل صيغة الفيديو إلى صيغة أخرى قبل عرضه في المتصفح وهناك مكتبات لذلك مثل html5-media-converter، ولكن لتجنب تعقيد الأمور الآن، استخدم فيديو بصيغة mp4.
  11. Mustafa Suleiman
    أرجو منك توضيح السؤال وما هو المشروع الذي تعمل عليه وأيضًا ستجد سبب الخطأ في محرر الأكواد VScode في تبويب PROBLEMS وتستطيع الوصول إليه عن طريق الضغط على CTRL + SHIFT + M معًا.
  12. Mustafa Suleiman
    هل قصدت وضع تلك الخواص التي أسفلها خط متعرج باللون الأحمر داخل قوسين {} لأن سبب المشكلة هو ذلك، حيث أنك قمت بغلق دالة onPressed بالقوس { قبل child
  13. Mustafa Suleiman
    أولاً عليك بإختيار محرك الألعاب الذي تريد تصميم ألعابك عليه، وسأذكر لك المحركات الشائعة: Unity3d Unreal Engine Godot GameMaker Studio Construct 3 Panda3D Buildbox CryEngine وستجد الجميع ينصحك بـ Unity حيث يتيح لك إنشاء أي لعبة مجانًا وهناك دعم قوي له. حييث قامت شركة Unity Tech بإنشاء Unity وهو محرك تطوير ألعاب متعدد المنصات، ويسمح لك بإنشاء ألعاب ثلاثية الأبعاد وثنائية الأبعاد، وأيضًا إنشاء ألعاب الواقع الافتراضي والواقع المعزز. وبعد تعلم أساسيات Unity، ستحتاج إلى إتقان لغة برمجة C#، وهي تُستخدم لإنشاء السكربتات داخل Unity. وأيضًا بإمكانك استخدام لغة برمجة C# التابعة لشركة Microsoft لإنشاء تطبيقات الويب وتطبيقات الجوال والألعاب. وهي أسهل بكثير للتعلم من لغات البرمجة الأخرى مثل C++ أو C، وتُستخدم في Unity لتطوير الألعاب، ومن الضروري أن تأخذ في الاعتبار اكتساب الأساسيات الأساسية للغة، ولكن ذلك لا يعني أنك ستتقنها في 15 إلى 20 يومًا أو حتى شهر. وبخصوص التطوير ستحتاج إلى بيئة تطوير متكاملة (IDE) لتعلم وكتابة C#، وهناك بيئة تطوير متكاملة رسمية من Microsoft تُسمى Visual Studio Community، وهي مجانية للأبد وتتيح لك كتابة أكواد C# بشكل إفتراضي دون تثبيت أية إضافات. وضع في إعتبارك أن محرك مثل Unreal Engine يستخدم لغة C++، لذلك إذا كان لديك الوقت الكافي فأنصحك بتعلم C++ ثم C#.
  14. Mustafa Suleiman
    حاولي استخدام الأمر التالي: flutter config --android-sdk "path-to-your-android-sdk-path" واستبدلي "path-to-your-android-sdk-path" بالمسار إلى Android SDK في حاسوبك، أي مثلاً المسار قد يكون كالتالي لديك: flutter config --android-sdk "C:\Program Files (x86)\Android\android-sdk" ولتسهيل مهمة العثور على المسار: توجهي إلى Android Studio. توجهي إلى Tools في الإعدادات. اذهبي إلى SDK Manager. ستجدي مسار Android SDK. وإذا استمرت المشكلة تأكدي من تثبيت إًصدار Android SDK Build-Tools المطلوب وهو في الصورة مطلوب 33.2.0 وستجديه في الرابط التالي: https://androidsdkmanager.azurewebsites.net/Buildtools
  15. Mustafa Suleiman
    هناك جدول يسمى STUDENTS يحتوي على عدة أعمدة ومنها "Name" و "Marks" و "ID"، والمطلوب منك هو كتابة استعلام SQL لاسترجاع اسم أي طالب في الجدول الذي حصل على درجة أعلى من قيمة معينة (Marks). وترتيب النتائج يجب أن يكون وفقًا للثلاثة أحرف الأخيرة من كل اسم، فإذا كان هناك طلاب ينتهي اسمهم بنفس الثلاثة أحرف الأخيرة (مثل Bobby و Robby)، يتم ترتيبهم ثانويًا بناءً على قيمة ID بترتيب تصاعدي. وستحتاج إلى قراءة الجدول واستخدام استعلام SQL للقيام بالمطلوب، ومثال للجدول هو: ومثال للنتيجة: Ashley Julia Belvet وستجد جزء يوضح السبب والمنطق وراء النتائج التي تم استرجاعها من الاستعلام، لنفس الأسباب التي تم ذكرها في الشرح السابق، حيث تم تحديد أن هناك ثلاثة طلاب فقط (Ashley و Julia و Belvet) الذين حصلوا على درجات أعلى من 75، ثم تمت مقارنة الأحرف الثلاثة الأخيرة من أسمائهم و ترتيبهم وفقًا لذلك. Ashley تنتهي بـ 'ley' Julia تنتهي بـ 'lia' Belvet تنتهي بـ 'vet' وعند مقارنة هذه الثلاثة مقاطع أحرف، ستجد أنه لا يوجد تكرار للأحرف وأن 'ley' أصغر من 'lia' و'lia' أصغر من 'vet'. وبالتالي، تم ترتيب الأسماء وفقًا لذلك الترتيب.
  16. Mustafa Suleiman
    السبب هو أنك بحاجة إلى إنشاء موقع لكل شيء تقريبًا، فحتى تطبيقات الهاتف لها موقع رسمي على الإنترنت والإنترنت أساسه مواقع الويب، وأتت تطبيقات الهاتف لتسهيل مهمة استخدام الموقع عن طريق تحويله إلى هاتف أو إنشاء الموقع في هيئة تطبيق وبالطبع بتصميم مختلف لتسهيل عملية الاستخدام إلى أقصى حد ممكن. وأيضًا تطبيقات الهاتف في بعض الأحيان لا تستوعب الميزات التي قد يتحملها موقع، وأيضًا على الموقع تستطيع تصفح كم هائل من البيانات في وقت أقل وبشكل أفضل من تطبيقات الهاتف. وفيما يتعلق بالبرمجة، فدائمًا ما أنصح بتعلم مجال الويب أولاً إذا كنت لم تحدد مجالك بعد، لكونه يفتح لك الكثير من الخيارات سواء مطور واجهة أمامية أو خلفية وتتعلم منه الكثير من المهارات التي ستحتاجها عند تعلم أي مجال آخر بالتالي أنت الرابح في النهاية، وأيضًا أسهل نسبيًا من المجالات الأخرى مما يسهل عليك مهمة كسر الحاجز بينك وبين مجال البرمجة.
  17. Mustafa Suleiman
    عنصر <code> في HTML يُستخدم لتحديد قسم من النص كشيفرة برمجية أو شيفرة مرجعية. وفيما يلي بعض النقاط المهمة حول عنصر <code>: يعتبر عنصرًا فارغًا، ويجب استخدامه مع بداية ونهاية تاجات الافتتاح والإغلاق <code></code>. يجب استخدام عنصر <code> فقط لعرض النصوص البرمجية أو الشيفرات المرجعية، وأيضًا لعرض تعليمات المستخدم أو الأكواد القابلة للنسخ. لا يقوم عنصر <code> بتنفيذ أي تنسيق خاص على النص. يتم عادة استخدام CSS لتخصيص تنسيق الشيفرة البرمجية داخل عنصر <code>،مثلاً، تعيين أنواع الخط والألوان والتظليل لتحسين قراءة الشيفرة. وهو يستخدم على نطاق واسع في صفحات الويب لعرض الشيفرة المصدرية أو البرمجية بشكل منسق وواضح، وبإمكانك استخدامه أيضًا في الوثائق التقنية والمدونات التي تتضمن شروحات برمجية لتوضيح الأكواد والأمثلة. مثال: <html> <head> </head> <body> <pre> <code> // يبدأ الكود من هنا #include< iostream> #include< stack> using namespace std; int main() { stack<int> stack1; stack1.push(0); stack1.push(2); stack1.push(5); stack1.push(3); stack1.push(1); } // ينتهي الكود هنا </code> </pre> </body> </html> ولاحظ أنني قمت باستخدام عنصر pre للإحتفاظ بتنسيق النص كما قمت بكتابته وبدون الحاجة إلى كتابة أكواد CSS، وإليك النتيجة: وقد يبدوا الأمر محير بعض الشيء لك فما الفائدة إذا كان عنصر فقط ولا يقوم بأي تسنيق؟ ولكن يُعتبر عنصر <code> جزءًا من HTML الدلالي (Semantic HTML)، وهو مفهوم يهدف إلى استخدام العناصر والوسوم في HTML بطريقة توفر معنى وهيكلية أكثر دقة للمستند. وتستطيع تنسيق الكود من خلال استهداف العنصر.
  18. Mustafa Suleiman
    الوسم (label) في HTML، الوسم (label) يستخدم لإنشاء تسمية لعنصر إدخال (input) معين على الصفحة، ويعمل الوسم (label) على تحسين تجربة المستخدم ويساعد في جعل النماذج (forms) أكثر وضوحًا واستخدامًا. واستخدامه الشائع هو مع عناصر إدخال مثل الخيارات (checkboxes) وأزرار الاختيار (radio buttons) وحقول النص (text fields) وما إلى ذلك. ويعمل الوسم (label) على توفير وصف مقروء بواضح للعنصر المقابل، مما يجعله أكثر فهمًا للمستخدمين. لربط الوسم (label) بعنصر الإدخال (input)، تستخدم الخاصية "for" في الوسم (label) وتحديد قيمتها بنفس قيمة خاصية "id" لعنصر الإدخال المطابق. أي إذا كان لديك عنصر إدخال نصي (text field) مع خاصية "id" تحمل قيمة معينة، فيمكنك ربط الوسم (label) بهذا العنصر عن طريق تحديد قيمة "for" بنفس هذه القيمة ، مما يعني أنه عند النقر فوق الوسم (label)، سيتم تحديد عنصر الإدخال المرتبط به. مثال: <label for="username">اسم المستخدم:</label> <input type="text" id="username" name="username"> قمت بربط الوسم (label) بعنصر الإدخال (input) المطابق باستخدام قيمة "for" التي تكون مطابقة لقيمة خاصية "id" لعنصر الإدخال، وتظهر التسمية "اسم المستخدم:" بجانب عنصر الإدخال، وعند النقر فوقها، يتم تحديد عنصر الإدخال لإدخال اسم المستخدم. الخاصيتين name و id بالنسبة للخاصيتين "name" و "id"، فغالبًا ما يكون لهما قيم متشابهة لأنهما يعملان في سياقات مختلفة: فالخاصية "id" تستخدم لتعريف هوية فريدة لعنصر HTML، وتستطيع استخدام هذا الهوية في الأنماط (CSS) والسكريبتات (JavaScript) للاستهداف العنصر وتنفيذ الإجراءات المطلوبة عليه. أما الخاصية "name" تستخدم بشكل شائع في إرسال البيانات من نموذج HTML إلى الخادم عند تقديم النموذج، حيث يعتبر "name" جزءًا من زوج "اسم/قيمة" (name/value) الذي يتم إرساله إلى الخادم. مثال: لنفترض أن لدينا نموذج HTML بسيط يحتوي على حقل إدخال نصي وزر إرسال، ونريد جمع البيانات المدخلة من المستخدم وإرسالها إلى الخادم، وهنا يمكننا استخدام الخاصية "name" والخاصية "id" بالشكل التالي: <label for="name">الاسم:</label> <input type="text" id="name" name="name"> <button type="submit" name="submit" id="submit">إرسال</button> يوجد حقل إدخال نصي يحمل الخاصية "id" والخاصية "name" بقيمة "name"، بمعنى أنه عندما يتم إرسال النموذج، ستتم إرسال القيمة المدخلة في هذا الحقل تحت اسم "name". بالإضافة إلى ذلك، يوجد زر إرسال يحمل الخاصية "id" والخاصية "name" بقيمة "submit"، وفي حالة النقر على هذا الزر، يمكن استهدافه باستخدام الخاصية "id" في الأنماط (CSS) أو السكريبتات (JavaScript) لتنفيذ إجراءات معينة. وتستطيع قراءة المزيد في موسوعة حسوب، حيث يوجد شرح لجميع عناصر وخواص HTML و CSS: https://wiki.hsoub.com/HTML https://wiki.hsoub.com/CSS وأيضًا يوجد قسم خاص بدروس HTML و CSS في قسم المقالات في أكاديمية حسوب: https://academy.hsoub.com/programming/html/ https://academy.hsoub.com/programming/css/
  19. Mustafa Suleiman
    سأشرح لك بواسطة الكود ليتضح لك الأمر: فالـ Sidebar هو قائمة عمودية توضع على جانب الصفحة، وتستخدم لعرض الروابط أو الأيقونات التي توفر وصولًا سريعًا إلى أجزاء محددة من الموقع، ويتم تصميمها بشكل بسيط وتكون ثابتة أو ثابتة مع خيار لتوسيعها أو طيها عند الحاجة. مثال بسيط باستخدام HTML و CSS لإنشاء Sidebar: <!DOCTYPE html> <html> <head> <style> /* ستايل للسايدبار */ .sidebar { width: 200px; background-color: #f1f1f1; padding: 10px; } /* ستايل لروابط السايدبار */ .sidebar a { display: block; margin-bottom: 10px; text-decoration: none; color: #333; } </style> </head> <body> <div class="sidebar"> <a href="#">الصفحة الرئيسية</a> <a href="#">الملف الشخصي</a> <a href="#">الإعدادات</a> <a href="#">تسجيل الخروج</a> </div> </body> </html> في الكود لدينا عنصر <div> يحمل الصنف (class) "sidebar" يمثل الـ Sidebar. نستخدم CSS لتعيين العرض ولون الخلفية والتباعد الداخلي (padding) للسايدبار، وكذلك لتنسيق روابطه. أما الـ Navbar هو القائمة العلوية للموقع، وفي العادة ما يتم وضعها في أعلى الصفحة وتحتوي على روابط وأزرار للانتقال بين الصفحات الرئيسية للموقع أو الأقسام المختلفة، وقد يتم تصميم الـ Navbar ليكون ثابتًا في الأعلى عند التمرير (sticky) أو ليظهر/يختفي عند الحاجة. مثال: <!DOCTYPE html> <html> <head> <style> /* ستايل للنافبار */ .navbar { background-color: #f1f1f1; overflow: hidden; } /* ستايل لروابط النافبار */ .navbar a { float: left; display: block; color: #333; text-align: center; padding: 14px 16px; text-decoration: none; } </style> </head> <body> <div class="navbar"> <a href="#">الصفحة الرئيسية</a> <a href="#">المقالات</a> <a href="#">المنتدى</a> <a href="#">الاتصال</a> </div> </body> </html> عنصر <div> يحمل الصنف (class) "navbar" يمثل الـ Navbar، ونستخدم CSS لتعيين لون الخلفية وخاصية الـ overflow للنافبار. كما نستخدم CSS أيضًا لتنسيق روابط النافبار وتحديد توضعها بواسطة خاصية الـ float وتحديد التباعد الداخلي (padding) وغيرها من الخصائص. وسأقوم بدمج الكود وإضافة وظيفة لجعل الـ Sidebar قابلة للغلق والفتح، حيث استخدمت لغة الـ JavaScript لتحقيق هذه الوظيفة، وتستطيع يمكنك نسخ كود HTML التالي واختباره في متصفحك: <!DOCTYPE html> <html> <head> <style> /* ستايل النافبار */ .navbar { background-color: #333; overflow: hidden; } /* ستايل روابط النافبار */ .navbar a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; transition: background-color 0.3s ease; } /* ستايل روابط النافبار عند التحويم عليها */ .navbar a:hover { background-color: #ddd; color: #333; } /* ستايل السايدبار */ .sidebar { width: 200px; background-color: #f1f1f1; padding: 10px; transition: width 0.3s ease; position: fixed; height: 100%; overflow-y: auto; z-index: 1; } /* ستايل روابط السايدبار */ .sidebar a { display: block; padding: 12px; text-decoration: none; color: #333; transition: background-color 0.3s ease; } /* ستايل روابط السايدبار عند التحويم عليها */ .sidebar a:hover { background-color: #ddd; color: #333; } /* ستايل زر الفتح/الغلق */ .toggle-btn { display: inline-block; text-align: center; cursor: pointer; margin-bottom: 10px; color: #333; background-color: #eee; padding: 5px; } /* ستايل الصفحة */ .content { margin-left: 250px; padding: 16px; transition: margin-left 0.3s ease; } /* إخفاء القائمة الجانبية */ .sidebar-closed{ display: none } </style> <script> // تعريف وظيفة toggleSidebar() باستخدام ES6 const toggleSidebar = () => { const sidebar = document.getElementById("sidebar"); sidebar.classList.toggle("sidebar-closed"); } </script> </head> <body> <div class="navbar"> <a href="#">الصفحة الرئيسية</a> <a href="#">المقالات</a> <a href="#">المنتدى</a> <a href="#">الاتصال</a> </div> <div id="sidebar" class="sidebar"> <a href="#">الصفحة الرئيسية</a> <a href="#">الملف الشخصي</a> <a href="#">الإعدادات</a> <a href="#">تسجيل الخروج</a> </div> <div id="content" class="content"> <h2>محتوى الصفحة</h2> <p>هذا محتوى الصفحة الرئيسية.</p> <div class="toggle-btn" onclick="toggleSidebar()">زر فتح وإغلاق القائمة الجانبية</div> </div> </body> </html> والنتيجة هي:
  20. Mustafa Suleiman
    1- أولاً عليك بإضافة متغير للتتبع وعرض تقدم التحميل في النافذة الحالية، ولنفترض أن المتغير يسمى progressBar. 2- بعد ذلك في الدالة uploadvideo(), بعد السطر: iStream = getContentResolver().openInputStream(pdffile);، قم بإضافة الكود التالي: int fileLength = iStream.available(); وهذا سيحسب حجم الملف المراد تحميله. 3- في داخل الحلقة while في دالة getBytes(), بعد السطر byteBuffer.write(buffer, 0, len);، قم بإضافة الكود التالي: uploadedBytes += len; int progress = (int) ((uploadedBytes * 100) / fileLength); updateProgressBar(progress); وهو يحسب حجم البيانات المحملة حتى الآن ويحسب التقدم بنسبة مئوية، وتستدعى الدالة updateProgressBar() لتحديث قيمة progress bar بناءً على التقدم. 4- إضافة الدالة updateProgressBar() في النشاط الحالي (activity) لتحديث قيمة progress bar: private void updateProgressBar(int progress) { progressBar.setProgress(progress); } 5- تعديل المكان المناسب في الكود لإنشاء وعرض progress bar، وتستطيع إضافته في أي مكان ترغب فيه. مثلاً ، إضافة الكود التالي في بداية uploadvideo(): progressBar = new ProgressBar(this, null, android.R.attr.progressBarStyleHorizontal); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 20); progressBar.setLayoutParams(params); progressBar.setProgress(0); progressBar.setMax(100); layout.addView(progressBar); حيث layout هو عنصر من واجهة المستخدم يحتوي على العناصر التي تظهر فيها progress bar، وبإمكانك استبدال layout بعنصر آخر في واجهة المستخدم الخاصة بك. وعليك استيراد المكتبات اللازمة وتعديل الأسماء المطلوبة وفقًا لما تريده في الكود.
  21. Mustafa Suleiman
    الدراسة الصحيحة للدورة، هي كالآتي: 1- دراسة أساسيات HTML وCSS من خلال المسار الأول من دورة تطوير واجهات المستخدم، حيث أن المسار الأول من جميع الدورات متاح لك بشكل مجاني: https://academy.hsoub.com/courses/front-end-web-development/web-development-intro/ وستجد به أيضًا أساسيات JavaScript وأساسيات أساسيات jQuery وبعدها سيتم التطبيق على بناء موقع شخصي بالتقنيات السابقة، وأنصحك بدراسة الأساسيات السابقة قبل تعلم PHP. 2- في دورة PHP عليك بدراسة أساسيات لغة PHP وذلك أمر لا جدال فيه، حيث أن باقي الدورة معتمد بشكل كلي على فهم لكود PHP. 3- تستطيع الإختيار بعد ذلك ما بين تعلم لارافيل ثم متابعة الدورة بالترتيب، أو الإنتقال مباشرًة إلى تعلم وورد بريس ثم العودة لاحقًا لاستكمال باقي الدورة. وتستطيع دراسة الدورة بالشكل المناسب لك ولكن تلك هي الطريقة الصحيحة. وإليك نقاشات حول الدورة ستفيدك بلا شك:
  22. Mustafa Suleiman
    قبل أن أشرح لك أي شيء إذا كان لديك حاسوب بمواصفات منخفضة فلا تفكر في استخدام Visual Studio حيث أنه يستخدم موارد أكبر ولن يعمل بسلاسة لديك. وسأوضح لك الفارق بشكل بسيط. VScode VScode هو محرر نصوص متعدد المنصات يركز على تحرير النصوص وتطوير الويب، ويأتي بواجهة بسيطة ونظيفة ويمكن تخصيصه من خلال تثبيت الامتدادات المختلفة، أي يتطلب تخصيص وتكوين إضافي ليتناسب مع المشروع الذي تعمل عليه. مميزات: خفيف الوزن وسريع في التشغيل. يدعم العديد من لغات البرمجة المستخدمة في تطوير الويب مثل JavaScript وTypeScript وHTML وCSS وغيرها. يوفر مجموعة كبيرة من الامتدادات التي تساعد في تعزيز الإنتاجية وتوفير الوقت. دعم قوي لأدوات التصحيح والتصفيح (debugging) مع إمكانية تكوينها لمختلف البيئات. يوفر إمكانية التعديل على إعدادات المحرر وتخصيصها وفقًا لاحتياجاتك. اللغات المدعومة: JavaScript، TypeScript، HTML، CSS، Python، Java، Ruby، PHP والعديد من لغات البرمجة الأخرى. Visual Studio IDE Visual Studio IDE هو بيئة تطوير متكاملة توفر أدوات تحرير النصوص وتصميم الواجهة والتصحيح وإدارة المشروع، ويدعم العديد من لغات البرمجة وأطر العمل ويوفر وظائف متقدمة مثل الإنشاء التلقائي للكود وإدارة الإصدارات. أي يُعتبر خيارًا مناسبًا للمشاريع الكبيرة والمعقدة التي تتطلب ميزات متقدمة وتكاملًا عميقًا مع الأدوات الخارجية وخدمات السحابة. مميزات: بيئة تطوير متكاملة توفر ميزات متقدمة لإدارة المشروعات وتطوير التطبيقات. يدعم مجموعة واسعة من لغات البرمجة بما في ذلك C#، C++، JavaScript، TypeScript، HTML، CSS والمزيد. يوفر أدوات قوية للتصحيح والتصميم والتجريب. دعم متقدم لتطوير تطبيقات الويب وتطبيقات سطح المكتب وتطبيقات الهاتف المحمول. قدرة على إضافة الامتدادات وتخصيص البيئة حسب الاحتياجات. اللغات المدعومة: C#، C++، JavaScript، TypeScript، HTML، CSS، Python وغيرها. وتستطيع استخدام أي منهما وفقًا لما تفضل، حيث تستطيع توسيع إمكانيات VScode من خلال الامتدادات وتكوينها بشكل مخصص، في حين يوفر Visual Studio IDE بيئة تطوير متكاملة وشاملة لمشاريع البرمجة الكبيرة والمعقدة. ما زلت لم تقرر بعد؟ لماذا يجب أن يكون VS Code هو اختيارك؟ سرعة أداء عالية حيث يعتبر VS Code أسرع بكثير من Visual Studio. يمكن أن يبدأ التشغيل بشكل أسرع مقارنة بالبيئة المتكاملة للتطوير. يمكن لـ VS Code أن يفعل ما يقرب من أي شيء ترغب فيه، على الرغم من أنه تم تصميمه ليكون محرر نصوص، تستطيع تقريبًا استنساخ ما تقوم به بيئة التطوير المتكاملة. يتميز VS Code بتجربة تطوير بسيطة وسلسة، ويتمتع بواجهة بسيطة ويتجنب التعقيدات الزائدة. VS Code هو الخيار الأمثل لتطوير الويب، حيث يوفر دعمًا مع الآلاف من الأدوات والامتدادات المتاحة. لماذا يجب أن يكون Visual Studio هو اختيارك؟ يتمتع Visual Studio بميزات غنية ووظائف واسعة، في معظم الحالات، يلبي Visual Studio متطلبات معظم المطورين بشكل مثالي دون الحاجة إلى الاعتماد على مزيد من الامتدادات أو المكونات الإضافية. يسهل التعاون بين فريق العمل بسهولة باستخدام Visual Studio في عملية التطوير وتصحيح الأخطاء، حيث يمتاز ببسير عمل سلس ومحمل بجميع أنواع الميزات التي قد تحتاجها على المدى الطويل. عندما يتعلق الأمر بتحليل الأكواد الضخمة وتصحيح الأخطاء وتحسين الأداء، فإن Visual Studio هو خيار أفضل بلا شك. يتم استخدام Visual Studio بشكل شائع في صناعة تطوير الألعاب لكونه يتناسب مع المشاريع الضخمة وأيضًا مشاريع .NET و C و C# لكونه يدعمهمها بشكل إفتراضي. لكن عند العمل على مشاريع تستخدم فيها React أو Angular أو غيرهما من إطارات الواجهة الأمامية، فسيصبح VS code هو الخيار الأفضل لكونه يوفر دعم أفضل.
  23. Mustafa Suleiman
    ربما السبب هو العشوائية الموجودة في عملية تدريب النموذج، بمعنى أنه عند تدريب نموذج ذكاء اصطناعي، فغالبًا يتم تطبيق عملية تحسين (optimization) على البيانات المستخدمة للتدريب، مثل تعديل الوزن والمعاملات في النموذج، وبما أن هذه العملية تتضمن عناصر عشوائية، فمن المتوقع أن يكون لها تأثير على النتائج النهائية. وبالتالي حتى عند تدريب نموذج معين على نفس مجموعة البيانات، فمن الوارد الحصول على نتائج مختلفة في كل مرة تقوم فيها بتشغيل الكود بسبب العشوائية الموجودة في عملية التدريب. فإذا كنت ترغب في توحيد النتائج، تستطيع إعطاء البرنامج بذور عشوائية (random seeds) محددة قبل بدء عملية التدريب، مما سيضمن أنه سيتم تطبيق نفس الترتيب العشوائي في كل مرة تقوم فيها بتشغيل الكود، وذلك يضمن استقرار النتائج وتكرارها بشكل متسق.
  24. Mustafa Suleiman
    تلك المسابقات ليست خاصة بمجال الويب أو تطبيقات الهاتف بشكل خاص، بل تكون لحل مشاكل برمجية محددة أو تصميم موقع أو تطبيق لحل مشكلة مجتمعية مثلاً في بعض الأحيان، أو تقديم حلاً مبتكرًا في مجال معين. مثلاً، في Google Code Jam يتم توفير مجموعة من المشاكل البرمجية التي يجب على المشاركين حلها باستخدام البرمجة الفعالة والإبداعية. وفي Microsoft Imagine Cup، يتم تشجيع الطلاب على تطوير تطبيقات مبتكرة لحل المشاكل الاجتماعية والبيئية والتقنية. وإليك بعض الأمثلة على هذه المسابقات بجانب ما تم ذكره: 1- Kaggle Competitions وKaggle هي منصة شهيرة للتنافس والتعلم العميق، وتنظم مسابقات بيانات تتضمن مجموعة متنوعة من التحديات في مجالات مثل الذكاء الاصطناعي وتحليل البيانات. 2- Hash Code مسابقة ينظمها فريق Google للمطورين في أوروبا، وتعتبر تحديًا سنويًا يتم فيه حل مشاكل تقنية معينة. 3- Topcoder تقدم Topcoder منصة لمسابقات البرمجة والتصميم، وتعتبر منصة شهيرة للمنافسة وتحسين المهارات البرمجية. وستجد في بلدك أيضًا مسابقات برمجة محلية تقام تحت إشراف جامعة معينة أو ما شابه. وأيضًا هناك العديد من مسابقات الهاكاثون (Hackathons) المنظمة حول العالم بواسطة مختلف المجتمعات التقنية والشركات، وتستطيع البحث عن حدث Hackathon قريب من منطقتك أو عبر الإنترنت للمشاركة فيه.
  25. Mustafa Suleiman
    الأمر بسيط، لا تستخدم صور مثلاً غير مصرح باستخدامها تجاريًا إلا برخصة وتستطيع تفقد ذلك من مصدر الصورة الأصلي، فإذا كانت مجانية لكن للاستخدام الغير تجاري فذلك يعني أنه يجب شراء رخصة لاستخدامها بشكل تجاري.
×
×
  • أضف...