محمد_عاطف

وعليكم السلام ورحمة الله وبركاته. الفرق الأساسي بين تصميم الواجهات بدون برمجة والتصميم بالبرمجة هو مثل المهندس المعماري الذي يقوم بتصميم شكل المبنى وأبعاده وكل شئ يخصه وبين المهندس الإنشائي الذي يأخذ هذا التصميم ثم يقوم بتنفيذه وبناء هذا البناء . حيث تصميم الواجهات بدون برمجة يركز على التصور والشكل وتجربة المستخدم بينما يركز التصميم بالبرمجة على تحويل هذا التصور إلى موقع حقيقي يعمل. فمصمم الواجهات (UI/UX Designer بدون كود): هو المسؤول عن كيف سيبدو التطبيق وكيف سيشعر المستخدم عند استخدامه وأفضل تصميم يناسب المستخدم ويقوم بعمل أبحاث المستخدم ويرسم تدفق الاستخدام (User Flow) ويصمم كل شاشة وكل زر بالأبعاد وكل شئ. ويقوم بإنتاج ملفات تصميم على Figma أو Adobe XD يتم تسليمها للمطورين وبالنسبة لسوق العمل فإن الطلب عليه مرتفع جدا حيث لا يمكن لأي شركة اليوم بناء منتج جيد بدون مصمم UI/UX محترف. أما مطور الواجهات الأمامية (Front-End Developer بالكود): هو الشخص الذي يأخذ تصميم ال UI/UX ويحوله إلى كود حقيقي يتفاعل معه المستخدم ويقوم بإنتاج كود برمجي لموقع أو تطبيق ويب وبالنسبة لسوق العمل فأيضا الطلب عليه مرتفع جدا فهو الوسيلة لتحويل التصميم إلى موقع حقيقي يمكن إستخدامه. وفي الشركات يعمل الاثنان معا المصمم يسلم تصميمه إلى المطور والذي يحول هذا التصميم إلى كود.

كما من إسم الخاصيتين فإن position هي الموضع أى تستطيع التحكم في تموضع العنصر ضمن تدفق المستند أى يمكنك تحريك العنصر بناء على صفحة العرض بأكملها وبناء على القيمة نفسها. أما translate فهي تحريك . أى تقوم بتحريك العنصر من مكانه الحالي أى يتم التحريك بالنسبة لموضعه الأساسي وليس من الصفحة بأكلمها وهي تشبه وضع قيمة relative للخاصية position. إذا قم باستخدام position عندما تريد تغيير تخطيط الصفحة وقم باستخدام translate لتحريك العنصر من مكانه الأساسي.

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

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

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

إن خاصية display في CSS هي واحدة من أهم الخصائص التي تتحكم في كيفية عرض العناصر في صفحة الويب لديك وفهمها جيدا سيساعدك كثيرا في تنسيق وتصميم صفحاتك. ففي كل عنصر HTML له قيمة display افتراضية block أو inline وخاصية display تسمح لك بتغيير هذا السلوك الافتراضي. وإليك القيم لتلك الخاصية : display: block; حيث العناصر التي تأخذ هذه الخاصية تسمى عناصر كتلية و خصائصها: تبدأ دائما على سطر جديد. وهي تشغل كامل عرض الحاوية المتاحة لها دونالنظر إلى محتواها حتى لو كان النص قصيرا. يمكن تحديد width و height و margin و padding لها من جميع الاتجاهات. ونستخدمها للعناصر الرئيسية في هيكل الصفحة التي نريد أن تأخذ مساحة كاملة وتكون منفصلة عن غيرها. فلو وضعت عنصرين <div> تحت بعضهم كل منهم سيكون في سطر منفصل. display: inline; والعناصر التي تأخذ هذه الخاصية تسمى عناصر مضمنة وخصائصها: لا تبدأ على سطر جديد بل تظهر بجانب العناصر الأخرى في نفس السطر. تشغل فقط العرض والمساحة الخاصة بالمحتوى. لا يمكن تحديد width و height لها. ونستخدمها لتنسيق جزء من النص داخل عنصر آخر دون أن يأخذ سطر منفصل. display: inline-block; وهذه القيمة تجمع بين مميزات الخاصية block و inline وخصائصها: مثل inline: لا تبدأ على سطر جديد وتصطف بجانب العناصر الأخرى. مثل block: يمكنك تحديد width و height و margin و padding لها من جميع الاتجاهات. ونستخدمها عندما نريد عدة عناصر بجانب بعضها في سطر واحد ولكن نحتاجها في نفس الوقت للتحكم في أبعادها ومساحاتها الفارغة. display: none; هذه القيمة تقوم بإخفاء العنصر تمامًا من الصفحة وخصائصها: العنصر يختفي وكأنه لم يكن موجودا في الأساس. المساحة التي كان يشغلها العنصر تحذف، وتتحرك العناصر الأخرى لتملأ هذا الفراغ. display: flex; عندما نضع display: flex على عنصر حاوية (parent) فإن العناصر التي بداخله (children) تصبح مرنة (flex items) وهذا يمنحك تحكم كامل و قوي في محاذاتها وترتيبها وتوزيع المسافات بينها. display: grid; عندما نضع display: grid على عنصر حاوية يمكنك تقسيم هذه الحاوية إلى شبكة من الصفوف والأعمدة ثم وضع العناصر بداخل خلايا هذه الشبكة بدقة.

الأفضل بالطبع أن تتمكن منها قبل الإنتقال للمشاريع العملية حيث لن يتم شرح الأساسيات فيها بل يتم التطبيق مباشرة على ما تم تعلمه. إن ال position هي خاصية مهمة جدا حيث لا غنى عنها أبدا في أى مشروع فهي المسؤولة عن تموضع العناصر في الصفحة . والأمر بسيط وليس معقد إذا فهمته بشكل جيد ستجد أن الأمور بسيطة جدا. لهذا الأفضل إعادة الدرس لحين فهمها بشكل كامل وأنصحك بالتطبيق مع نفسك والتلاعب بالقيم لفهم الأمر بشكل أفضل. وإليك شرح أكثر حول الأمر : https://wiki.hsoub.com/CSS/position https://wiki.hsoub.com/CSS/transform

ال DOM في جافاسكريبت فقط وظيفتها الأساسية هي الحصول على العناصر والتلاعب بها فالأمر بسيط وليس بالأمر المعقد. وإليك الدروس والمقالات التالية لمزيد من التفاصيل والشروحات حول ال DOM :

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

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

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

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

هل هذا السؤال خاص بإحدى دروس الدورات أم ماذا ؟ هذه المشكلة تعني أن الأمر ollama غير موجود في مسار متغيرات البيئة . لهذا تأكد من ثبيت ollama بشكل صحيح وإغلاق أى سطر أوامر مفتوح وإعادة فتحه @حذيفة مؤذن.

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

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

يرجى الإنتظار قليلا لحين الرد عليكم حيث حاليا يوجد ضغط على مركز المساعدة وسيتم الرد في اقرب وقت.

وعليكم السلام ورحمة الله وبركاته. إن وحدة argparse في بايثون هي مكتبة قياسية نستخدمها لإنشاء واجهات سطر أوامر تستقبل خيارات ومعاملات المستخدم مباشرة عند تشغيل البرنامج مما يسمح لك بإنشاء برامج يتفاعل معها المستخدم من خلال سطر الأوامر. وتقوم argparse بإنشاء كائن ArgumentParser يستخدم لتعريف الوسائط (arguments) التي يستقبلها البرنامج من سطر الأوامر. ويمكنك إضافة وسائط اختيارية أو إإجبارية مع إمكانية تحديد نوع البيانات ووصف للأمر والقيم المسموح بها لكل وسيط. ويمكنك البحث في جوجل عن "الدليل الشامل لوحدة argparse في بايثون" وستجد أول رابط يقدم شرح تفصيلي لتلك الوحدة مع أمثلة لها. أو في اليوتيوب يمكنك البحث عن "argparse python شرح" وستجد أول فيديو يظهر لك جيد وهناك بعض الفيديوهات الأخرى يمكنك مشاهدتها لفهم الأمر بشكل أفضل.

يمكنك وضع حاشية للعنصر p في ملف index.html سطر 33 هكذا : <p class="px-sm-0 px-4">

يرجى التوضيح بصورة ما تقصده مع الاشارة الى المكان الموجود به مشكلتك

المشكلة لديك في أنك تضع حاشية padding بقيمة كبيرة وهي 50px لذلك لا يوجد مساحة للنص ليكون في سطر واحد . لهذا يجب عليك تقليل الحاشية في الشاشات الصغيرة من خلال وضع الكود التالي في نهاية ملف style.css : @media (max-width: 390px) { #header { padding: 0 20px; } } أما بخصوص الأحرف هل يمكنك توضيح ما تقصده أى أحرف التي لا تظهر ؟

الدورة المناسبة هي "دورة تطوير التطبيقات باستخدام لغة Python" حيث ستتعلم بايثون والذي يتم إستخدامها في الذكاء الإصطناعي وهي دورة تعتبر back-end ويوجد بها مسار لكيفية دمج تقنيات الذكاء الإصطناعي مع تطبيقات ومواقع بايثون . وستتعلم كيفية إنشاء Chat bot وغيرها. أما إذا لم يكن لديك خبرة مسبقة أو معرفة بخصوص مجال الحاسوب فدورة علوم الحاسوب هنا في الأكاديمية هى الدورة المناسبة كبداية ، فهي ليست خاصة بمجال معين بل للتأهيل للدخول إلى مجال البرمجة عموما. ويمكنك قراءة التالي لمزيد من التفاصيل :

المشكلة لديك في ملف src\Components\Hero.tsx في سطر 8 . حيث لاحظ أنك إستخدمت الكلاس الذي يسمى w-[700px] وهذا الأمر يقوم بجعل العنصر له عرض 700px وبما أن عرض الشاشة أقل من 640 ويصبح عرض هذا العنصر 700 تحدث تلك المشكلة. لهذا يجب تحديد طول هذا العنصر في الشاشات الصغيرة ويجب ألا يتخطي حجم الشاشة . او يمكنك إستخدام الكلاس .overflow-hidden على العنصر الأب له وهو في سطر 7 : <div className="overflow-hidden hero max-w-[1200px] px-[2rem] mx-auto flex items-center justify-between">

يمكنك إضافة الكلاس الذي يسمى pt-2 لإضافة مسافة في الأعلى ويمكنك تغير الرقم بناء على حجم المسافة التي تريدها : <section id="header" class="pt-2">

لا أرى أى إختلاف في الصورة المرفقة فهي نفس الموقع الحالي . ولا يمكنت تكبير النص وتكبير الخلفية معها فإذا كبر النص صغرت المسافة بين الإسم وال nav مما يوحي بصغر حجم الخلفية . أما لو تم تصغير النص فستزيد المساحة فسيظهر أن الخلفية كبيرة.

هي بالفعل كبيرة وتأخذ مساحة الشاشة بأكملها : إذا أردت تكبيرها أكثر من ذلك فكل ما عليك فعله هو تصغير حجم النص أى إعطاءه fon-size صغير . أو أن تضع الكلاس الذي يسمى small لكل عنصر في ال nav