اذهب إلى المحتوى
تعلم مهارات المستقبل: احصل على دورتين بسعر دورة واحدة ×

Adnane Kadri

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

  • المساهمات

    5242

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

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

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

    52

 نوع المحتوى 

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

البرمجة

التصميم

DevOps

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

العمل الحر

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

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

قصص نجاح

أسئلة وأجوبة

كتب

دورات

كل منشورات العضو Adnane Kadri

  1. Adnane Kadri
    مبدئيا، لا فرق بينهما غير أن كلاهما طريقتان لهيكلة المشروع والتطبيق. على أن الطريقة الأولى أفضل (وضع المكونات في App.js)، وذلك لأن App هاهنا يعتبر مكونا جذرا تتفرع عنه باقي المكونات والصفحات بما في ذلك مكونات القالب العام مثل Header و Footer. ثم سيكون من السهل حقن هذا المكون داخل العنصر الجذر Root Element الذي يقوم تطبيق رياكت باستهدافه وانشاء التطبيق عليه. ميزة أخرى يمكن الاستفادة منها، وهي قابلية التطبيق للتوسع. ولنقل مثلا أننا قمنا بإطلاق إصدار ثان من التطبيق. آنذاك سوف لن يكون علينا إلا استبدال المكون الجذر App في صفحة index.js بالمكون الجذر الجديد الذي يحوي التطبيق الجديد دون استبدال أي مكونات فرعية أخرى. ملف index.js أيضا يعتبر ملفا رئيسيا يقوم باحتواء كامل عناصر التطبيق وملفاته ولواحقه ومكتباته، ويقوم بتهيئتها وتجهيزها للإستعمال المباشر. في حين أن App لا يعدو أن يكون مجرد مكون لا يفترض أن يتم فيه تهيئة أو تضمين أي ملفات خارجية، إلا في سياق يخصه.
  2. Adnane Kadri
    الشيفرة عبارة عن هيكلة HTML باستخدام وسوم HTML العادية وقواعد CSS العادية. بالنسبة للجزء الذي يخص عرض حاوية المحتوى، فهو مجرد تنسيق لها في حالتين: لما تكون القائمة الجانبية مفتوحة، يعطى لها هامش جانبي بقيمة 250 بكسل لأن القائمة تكون مفتوحة في هذا المكان. لما تكون القائمة معلقة، يعطى لها هامش جانبي بقيمة 0 بكسل لأن القائمة مغلقة ولا داعي لسحب المحتوى بـ 250 بكسل.
  3. Adnane Kadri
    أي جزء لم تفهمه بالضبط؟
  4. Adnane Kadri
    لبناء قائمة جانبية قم أولا بتوصيف الهيكلة اللازمة: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <title>Sidebar Example</title> </head> <body class="side-opened"> <div class="sidebar"> <div class="logo"> // </div> <ul class="nav-list"> <li><a href="#">رابط</a></li> <li><a href="#">رابط</a></li> <li><a href="#">رابط</a></li> <li><a href="#">رابط</a></li> </ul> </div> <div class="content"> <!-- المحتوى الرئيسي هنا --> </div> </body> </html> ثم أعط العناصر الموصوفة التنسيقات اللازمة: body { margin: 0; } .sidebar { height: 100vh; width: 250px; background-color: #333; position: fixed; left: 0; top: 0; overflow-x: hidden; padding-top: 20px; } .nav-list { list-style-type: none; padding: 0; } .nav-list li { padding: 10px; text-align: center; } .nav-list a { text-decoration: none; color: white; font-size: 18px; display: block; } .content { padding: 16px; } body.side-opened .content{ margin-left: 250px; } انتبه إلى أن العنصر content. يتم سحبه بـ 250 بكسل لما يكون الكلاس side-opened مسندا إلى عنصر body، ولذلك سيمكنك القيام بتبديل هذا الكلاس على عنصر body لفتح وإغلاق القائمة الجانبية. يمكن أن تسند هاته الوظيفة لزر معين.
  5. Adnane Kadri
    كلتا الطريقتان تمتلكان غرضا معينا، ولا يمكن الاستغناء بواحدة عن الأخرى ولكن في أغلب الحالات يتم التعامل مع تنسيقات css كملف خارجي بدل وضعها ضمن وسمي style في ملف html. ، وهذا لأن ذلك قد يحجز الكثير من حجم الملف إلى أن يكون التوسع في الملف والكتابة فيه متعذرا أو صعبا. ولذلك عموما، قم بفصل الملفين، إلا في حالات نادرة منها مثلا: أن تكون التنسيقات المضافة قليلة ولا تحجز حجما كبيرا من مساحة الملف أو طوله. أن تكون التنسيقات المضافة ديناميكية، كأن يتم توليدها من قبل لغة واجهة خلفية أو إطار عمل ما.
  6. Adnane Kadri
    لا يتم امتحان الطلبة في كل درس، ولكن في نهاية الدورة فقط .. ولاجتياز امتحان الدورة شروط، هي: أن يكون الطالب قد أتم على الأقل أربعة مسارات تعليمية. أن يكون قد التزم بالتطبيق العملي مع المدرب واحتفظ بمشاريعه. أن يقوم برفع مشاريعه على غيتهب لمشاركتها مع فريق الاختبار. ويتم ذلك وفق مراحل: يقوم الطالب بالتواصل مع الادارة ليخبرهم برغبته في اجتياز الامتحان، أين يتم التحقق من شروطه أيضا. يتم إجراء مكالمة صوتية لمدة 30 دقيقة مع الطالب يتم فيها سؤاله بعض الاسئلة الشفهية عن ما تعلمه في الدورة. يتم تحديد مشروع تخرج للطالب يقوم بتنفيذه في مدة يحددها له فريق الامتحان. تتم مراجعة المشروع من قبل الفريق، ويتم تسليم الطالب الشهادة أو توجيهه لتدارك النقص. يمكنك القراءة أكثر عن الامتحان هنا.
  7. Adnane Kadri
    مرحبا شهد، نعم، يوجد ذلك في موسوعة ويكي حسوب التابعة لحسوب في قسم بايثون > الدوال، والذي يمكنك الوصول إليه من خلال الرابط: هنا. أيضا، يمكنك الاستفادة من المحتوى النصي المكتوب على الأكاديمية في قسم بايثون : هنا. كما يمكنك تصفح أسئلة وأجوبة البرمجة المتعلقة بلغة بايثون في قسم الاسئلة والأجوبة من هنا.
  8. Adnane Kadri
    لا للأسف، لا يمكن استعادة ملفات Local Storage بعد حذفها. فهو مكان تخزين محلي في المتصفح الذي يستخدم لتخزين البيانات بشكل دائم على جهاز المستخدم. تعتمد إمكانية استعادة الملفات على وجود نسخ احتياطية أو إجراءات أمان خاصة، والتي في العادة لا تكون متاحة للمستخدمين على مستوى المتصفح. أما وبشكل مباشر، فلا يمكن ذلك للأسف.
  9. Adnane Kadri
    يمكنك استعمال واحدة من مكتبات الأيقونات على سبيل Font Awesome، وطريقة استعمالها هي كالتالي: قم بتضمين الملفات المصدرية للمكتبة قبل إغلاق وسم head: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> . قم بإستعمال الأيقونات مباشرة، يرفق كل عنصر i بكلاس معين: <i class="fa fa-home" /> . يمكنك الاستزادة بالإطلاع على توثيق المكتبة للتوصل إلى المزيد من الأيقونات.
  10. Adnane Kadri
    تأكدي من حفظ الملف وتحديث الصفحة.
  11. Adnane Kadri
    انتبه إلى أن هنالك خطأ في قراءة الخاصية value من على عنصر الإدخال في: var first = document.getElementById("name").Value إذ أنك تكتبها بحرف V كبيرة، أصلح السياق ليكون: var first = document.getElementById("name").value وأعد المحاولة.
  12. Adnane Kadri
    استعمل خواص CSS العادية لذلك،
  13. Adnane Kadri
    قم بعكس العناصر داخل الحاوية A: <div class="container"> <div> <i>&#9760;</i> </div> <div class="text-container"> <h1>255$</h1> <span>الحساب</span> </div> </div>
  14. Adnane Kadri
    لتصميم بطاقات لوحات التحكم الإحصائية قم بالتالي: هيكلة حاوية A تحتوي حاويتين فرعيتين: الأولى بها الرقم والنص أو العنوان والثانية بها الأيقونة. قم بإعطاء الحاوية A تنسيق display flex لجعلها حاوية مرنة. قم بإضفاء بعض التنسيقات الأخرى مثل الهوامش والحواشي والألوان لضبط تنسيق البطاقة أكثر. مثال: <div class="container"> <div class="text-container"> <h1>14</h1> <span>عنوان فرعي</span> </div> <div> <i>&#9827;</i> </div> </div> ملف التنسيقات: .container{ display: flex; justify-content: center; justify-content: space-between; padding: 0px; border-radius: 25px 5px; width: 25%; overflow: hidden; } .container i{ font-size: 100px; background: rgba(0,0,0,.1); border-radius: 5px; padding: 0px 15px; } .text-container{ padding:5px 20px; } .container{ background-color: #38bdf8; } .text-container{ color: #ecfeff; } .container i{ color: #075985; } الناتج: مثال أكثر تفصيلا: <div class="cards-container"> <div class="container"> <div class="text-container"> <h1>255$</h1> <span>الحساب</span> </div> <div> <i>&#9760;</i> </div> </div> <div class="container"> <div class="text-container"> <h1>358</h1> <span>البطاقات</span> </div> <div> <i>&#10031;</i> </div> </div> <div class="container"> <div class="text-container"> <h1>14</h1> <span>الكوبونات</span> </div> <div> <i>&#9993;</i> </div> </div> <div class="container"> <div class="text-container"> <h1>140</h1> <span>المستخدمين</span> </div> <div> <i>&#9992;</i> </div> </div> </div> .cards-container{ display: flex; gap: 5px; } .container{ display: flex; justify-content: center; justify-content: space-between; padding: 0px; border-radius: 25px 5px; width: 25%; overflow: hidden; } .container div:nth-child(2){ background: rgba(0,0,0,.1); border-radius: 5px; padding: 0px 15px; } .container i{ font-size: 75px; } .text-container{ padding:5px 20px; } .container:nth-child(1){ background-color: #38bdf8;} .text-container:nth-child(1){ color: #ecfeff;} .container:nth-child(1) i{ color: #075985;} .container:nth-child(2){ background-color: #84cc16;} .text-container:nth-child(2){ color: #ecfccb;} .container:nth-child(2) i{ color: #3f6212;} .container:nth-child(3){ background-color: #f43f5e;} .text-container:nth-child(3){ color: #ffe4e6;} .container:nth-child(3) i{ color: #9f1239;} .container:nth-child(4){ background-color: #8b5cf6;} .text-container:nth-child(4){ color: #ede9fe;} .container:nth-child(4) i{ color: #5b21b6;} الناتج:
  15. Adnane Kadri
    قد يأخذ ذلك بعض الوقت، انتظرهم قليلا وسيتم الرد عليك.
  16. Adnane Kadri
    مرحبا بيان، يمكنك مراسلة الدعم بخصوص المشكلة.
  17. Adnane Kadri
    مرحبا أسامة وعليكم السلام، من ميزات دورات الأكاديمية أنها لا تتطلب أي خبرة سابقة، ولذلك سيمكنك مباشرة الاشتراك والبدء في الدورة دون أي خبرة سابقة مطلوبة. وسوف لن يشكل لك ذلك مشكلة، إذ يتم اعتبار كل ما يتطلب ليتم شرحه والاشارة إليه. كما أن الاشتراك في أي دورة من دورات الأكاديمية يتيح لك وصولا لأول مسار من كل دورة، بما في ذلك جميع المسارات التأسيسية لكل دورة ومنها مسار "مدخل إلى علوم الحاسب" ضمن دورة علوم الحاسب، والذي يعتبر توطئة لأي دورة أخرى. كما أنه يتم توفير اشتراك مدى الحياة، مما يعني أنك سوف تبقى على اطلاع على الدورة وسيمكنك مشاهدتها في أي وقت تريده. ولذلك سيمكنك دوما استدراك ما تظن أنه يحتاج استدراكا ثم تعود لمشاهدة محتوى الدورة بشكل عادي.
  18. Adnane Kadri
    الأمر بسيط، قم باستعمال محدد الوسم button وقم بتجاوز بعض التنسيقات الافتراضية: button{ background-color: rgba(122,122,254,1); color: white; padding:5px 10px; border-radius: 2px; border: 2px rgba(122,124,254,1) solid; cursor: pointer; } button:hover{ background-color: rgba(122,122,254,.5); } هيكلة HTML: <button> OK </button> الناتج: توثيق العنصر button في HTML بحسب ويكي حسوب.
  19. Adnane Kadri
    أظن أن المشكلة هي بسبب السطر العاشر، إذ أنك تقوم باستخدام السياق التالي: import {response} from 'express'; في حين أن هذا لا يتوفر إلا في سياق Node. أزله وستحل مشكلتك.
  20. Adnane Kadri
    المطلوب غير واضح، يرجى إعادة صياغة السؤال وتحديد المطلوب بشكل أكثر وضوحا.
  21. Adnane Kadri
    قد لا يمكن تحديد "الأفضل" بشكل مطلق بينهما، ولكن سيمكنك التفضيل بين أحدهما والآخر في بعض الجزئيات وبعض النقاط، ولذلك فإن تحديد الأفضل يرجع لك بشكل أساسي ولا يوجد واحدة فيهما يمكن الاستغناء عنها بالأخرى. إليك بعض استعمالات جافاسكربت: تطوير الواجهات الأمامية لمواقع الويب بشكل أساسي Frontend web development تطبيقات الهاتف المحمول Mobile applications تطوير الواجهات الخلفية لمواقع الويب Backend web development تطبيقات سطح المكتب Desktop application تطوير الألعاب Game development مجال الذكاء الاصطناعي Artificial intelligence التمثيل المرئي للبيانات Data visualization إنترنت الأشياء والأنظمة المدمجة IOT & Embedded systems وإليك بعض استعمالات بايثون: ‏برمجة المواقع الإلكترونية Web Development ‏برمجة تطبيقات ديسكتوب Desktop Applications ‏برمجة أنظمة الرد الآلي Bot Systems ‏تحليل البيانات Data Analysis ‏الذكاء الإصطناعي Artificial Intelligence ‏تعلم الآلة Machine Learning ‏التعلم العميق Deep Learning برمجة الألعاب Game Development نتائج: إذا كنت تستهدف تطوير الويب الرئيسي، فإن جافاسكربت سوف يكون اختيارا جيدا، خصوصا وأنه خيار لا بد منه لتطوير الواجهات الأمامية. أما إذا كنت تستهدف مجالات مثل الذكاء الاصطناعي، علوم البيانات، أو تطوير تطبيقات السطح والأتمتة، فإن Python يمكن أن يكون خيارًا أفضل، خصوصا وأنها تتفوق في هاته الجزئيات على جافاسكربت. قد تكون مهتما بالقراءة أكثر هنا:
  22. Adnane Kadri
    يبدوا أن هنالك مشكلة في تشغيل الملف التنفيذي، جرب تشغيل الأمر: python -m venv venv لإنشاء بيئة افتراضية. ثم: venv\Scripts\activate لتفعيلها. ثم: pip install django لتثبيت جانقو. وأخيرا: django-admin startproject mysite لإنشاء المشروع.
  23. Adnane Kadri
    مرحبا محمود، ان كنت تقصد بخصوص الدورة فيتوفر هنالك قسم كامل لإنشغالات وأسئلة الطلبة ويكون أسفل كل درس وفيديو في قسم بعنوان "تعليقات الطلبة". أما ان كنت تقصد أي أسئلة عامة لا تتعلق بمحتوى الدورة أو درس فيها فيمكنك طرحه في قسم بايثون من قسم أسئلة وأجوبة في الأكاديمية هنا.
  24. Adnane Kadri
    الخطوات الأساسية اللازمة لدخول المجال هي غالبا ما تتعلق بتعلم الأساسيات والإلمام بها قبل التفرع أو التخصص في مجال معين، وهذا لأهميتها الكبيرة في ذلك. فهي ما تساعدك على فهم الكثير من جزئيات البرمجة وعلى بناء برمجيات ذات جودة عالية وتعينك في حل المشكلات المعقدة. بعض هاته الأشياء التي عليك تعلمها هي: التفكير المنطقي الخوارزميات بعض أساسيات الرياضيات أساسيات البرمجيات هياكل البيانات قد تتفاوت أهمية بعض النقاط عن أخرى، ولكنها تبقى مهمة. ونفس الشيء بالنسبة للخوارزميات، فهي مثل مجموعة الخطوط العريضة التي توضح لك كيف يمكنك التعامل مع المشكلات البرمجية وكيف يمكنك تصميم حلول فعالة لها وكيف يمكنك تحليل مختلف مراحل العمل. يمكنك الاستزادة بقراءة المقالة التالية:
  25. Adnane Kadri
    Nano هو محرر نصوص يأتي مع Linux ويعمل في بيئة سطر الأوامر. ولا يتوفر في ويندوز للأسف. ولكن يمكنك تحميل محرر نصوص مماثل لـ Nano في نظام Windows 10 والعمل عليه. ونذكر مثلا Notepad++. فيما يلي الخطوات لتحميل وتثبيت محرر النصوص Notepad++ وإنشاء ملف Python عليه: تحميل Notepad++ تشغيل ملف التثبيت فتح Notepad++ انشاء ملف بايثون والتحرير عليه
×
×
  • أضف...