Adnane Kadri

إليك بعض التوجيهات العامة التي تساعدك في حل الواجب: استخدام مفهوم range: في Python، range(start, stop) قم بإنشاء تسلسل من الأعداد من start حتى stop-1. يمكنك استخدام هذه الميزة لتوليد مجموعة من الأعداد بين A و B. استخدام دورة تكرار (for): استخدم دورة for للانتقال عبر الأعداد في المجموعة التي تم إنشاؤها باستخدام range. في كل تكرار، قم بجمع العدد الحالي إلى المجموع الكلي. تحديد نقاط البداية والنهاية بشكل صحيح: تأكد من تضمين العددين A و B في الجمع. استخدام متغير لتخزين الناتج: قم بإنشاء متغير لتخزين المجموع النهائي وقم بتحديثه في كل دورة. طباعة النتيجة: بمجرد الانتهاء من حساب المجموع، قم بطباعة النتيجة.

الإجابة على مثل هكذا سؤال تعتمد على عدة عوامل بما في ذلك خلفية المطور، والمشروع الذي يعمل عليه، والأدوات التي يستخدمها وما إلى ذلك، فخبرة الشخص بمجال العمل تحدد سرعة عمله وجودته، وقد يقوم مطور ويب خبير بالعمل بإنتاجية أكبر من مطور جوال مبتدئ، بل وحتى من مطور ويب مبتدئ في نفس مجاله وعلى نفس المشروع. كما أن هذا يعتمد أيضا على نوع المشروع، فبعض المشاريع تكون أكثر تعقيدا على بعض المنصات مقارنة بأخرى، مثل التعامل مع أحداث الاستشعار واللمس والسحب في الهاتف. أو يحدث أن نجد بعض حالات الاستخدام التي يسهل تطبيقها على الويب، في حين أنها تحتاج تخصيصا أكبر لجعلها تعمل على الهاتف. هنالك أيضا بعض الأدوات واللغات الملائمة للمشروع يمكن أن يساعد على زيادة الكفاءة. من مثل Flutter وReact Native تسمح لك ببناء تطبيق واحد يعمل على نظامي التشغيل iOS و Android، مما يقلل من الوقت اللازم لتطوير التطبيق. في الملخص، لا يوجد جواب واحد يناسب الجميع. يفضل عليك تقييم متطلبات مشروعك الخاص ومهاراتك الحالية لاتخاذ القرار الأمثل.

العد يبدأ من الصفر لكل من الصفوف والأعمدة. لذا، الصف الأول يمثله الرقم 0، والعمود الأول يمثله الرقم 0 وهكذا ..

يمكنك استخدام قوس مربعي فارغ لتحديد الصفوف الكل (:) واختيار الأعمدة المطلوبة. على سبيل المثال، إذا كنت تريد اختيار العمودين 2 و 3 وتجاهل العمود 4 وتحتاج العمود 5، يمكنك القيام بذلك كما يلي: selected_columns = df.iloc[3:, [2, 3, 5]] سيشتمل هذا على الصفوف من الصف 3 وما بعدها، والأعمدة 2 و 3 و 5.

الجزء df.iloc[3:, 2:4] يستخدم لتحديد جزء معين من DataFrame باستخدام تقديم الصفوف والأعمدة المحددة. فـ: 3:: يعني ابتداءً من الصف رقم 3 وحتى نهاية الصفوف. هذا يتجاوز الصفوف الثلاثة الأولى (التي قد تحتوي على عناوين الأعمدة أو معلومات غير ضرورية). 2:4: يعني ابتداءً من العمود رقم 2 وحتى العمود رقم 3. وهكذا يتم اختيار العمودين الثاني والثالث مع تجاوز أول ثلاث صفوف في كل منها.

الكود الذي كتبته لإنشاء DataFrame يبدو صحيحا بشكل عام، ولكن إليك طريقة أفضل لتحديد الأعمدة وإعطائها أسماء: # اختيار الأعمدة المحددة من DataFrame الأصلي selected_columns = df.iloc[3:, 2:4] # تحديد أسماء الأعمدة column_names = ['الأول', 'الثاني'] # إنشاء DataFrame df1 = pd.DataFrame(selected_columns.values, columns=column_names) بهذه الطريقة، سيتم تحديد الأعمدة 2 و 3 من DataFrame الأصلي (iloc[3:, 2:4]) وتخزينها في المتحول selected_columns. ثم تحديد أسماء الأعمدة وأخيرًا إنشاء DataFrame جديد باستخدام هذه الأعمدة وأسمائها.

مبدئيا، لا فرق بينهما غير أن كلاهما طريقتان لهيكلة المشروع والتطبيق. على أن الطريقة الأولى أفضل (وضع المكونات في App.js)، وذلك لأن App هاهنا يعتبر مكونا جذرا تتفرع عنه باقي المكونات والصفحات بما في ذلك مكونات القالب العام مثل Header و Footer. ثم سيكون من السهل حقن هذا المكون داخل العنصر الجذر Root Element الذي يقوم تطبيق رياكت باستهدافه وانشاء التطبيق عليه. ميزة أخرى يمكن الاستفادة منها، وهي قابلية التطبيق للتوسع. ولنقل مثلا أننا قمنا بإطلاق إصدار ثان من التطبيق. آنذاك سوف لن يكون علينا إلا استبدال المكون الجذر App في صفحة index.js بالمكون الجذر الجديد الذي يحوي التطبيق الجديد دون استبدال أي مكونات فرعية أخرى. ملف index.js أيضا يعتبر ملفا رئيسيا يقوم باحتواء كامل عناصر التطبيق وملفاته ولواحقه ومكتباته، ويقوم بتهيئتها وتجهيزها للإستعمال المباشر. في حين أن App لا يعدو أن يكون مجرد مكون لا يفترض أن يتم فيه تهيئة أو تضمين أي ملفات خارجية، إلا في سياق يخصه.

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

أي جزء لم تفهمه بالضبط؟

لبناء قائمة جانبية قم أولا بتوصيف الهيكلة اللازمة: <!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 لفتح وإغلاق القائمة الجانبية. يمكن أن تسند هاته الوظيفة لزر معين.

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

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

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

لا للأسف، لا يمكن استعادة ملفات Local Storage بعد حذفها. فهو مكان تخزين محلي في المتصفح الذي يستخدم لتخزين البيانات بشكل دائم على جهاز المستخدم. تعتمد إمكانية استعادة الملفات على وجود نسخ احتياطية أو إجراءات أمان خاصة، والتي في العادة لا تكون متاحة للمستخدمين على مستوى المتصفح. أما وبشكل مباشر، فلا يمكن ذلك للأسف.

يمكنك استعمال واحدة من مكتبات الأيقونات على سبيل 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" /> . يمكنك الاستزادة بالإطلاع على توثيق المكتبة للتوصل إلى المزيد من الأيقونات.

تأكدي من حفظ الملف وتحديث الصفحة.

انتبه إلى أن هنالك خطأ في قراءة الخاصية value من على عنصر الإدخال في: var first = document.getElementById("name").Value إذ أنك تكتبها بحرف V كبيرة، أصلح السياق ليكون: var first = document.getElementById("name").value وأعد المحاولة.

استعمل خواص CSS العادية لذلك،

قم بعكس العناصر داخل الحاوية A: <div class="container"> <div> <i>&#9760;</i> </div> <div class="text-container"> <h1>255$</h1> <span>الحساب</span> </div> </div>

لتصميم بطاقات لوحات التحكم الإحصائية قم بالتالي: هيكلة حاوية 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;} الناتج:

قد يأخذ ذلك بعض الوقت، انتظرهم قليلا وسيتم الرد عليك.

مرحبا بيان، يمكنك مراسلة الدعم بخصوص المشكلة.

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

الأمر بسيط، قم باستعمال محدد الوسم 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 بحسب ويكي حسوب.

أظن أن المشكلة هي بسبب السطر العاشر، إذ أنك تقوم باستخدام السياق التالي: import {response} from 'express'; في حين أن هذا لا يتوفر إلا في سياق Node. أزله وستحل مشكلتك.