كل الأنشطة

السلام عليكم لدي سؤال في الفترة الاخيرة لاحظت دورات تصميم او تعليم (تصميم واجهات المستخدم بدون برمجة) مالفرق بينها وبين التصميم ببرامج تحتاج اكواد وبرمجة ؟ "هل الاثنين متساويان في سوق العمل؟ الرجاء توضيح الفرق بينهما، وشكرًا لكم."

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

اذا اردت ان أقوم بأنشاء كائن يحتوي على قيم خاصة ولكن بشكل حرفي بدون انشاء دالة للبناء فكيف يمكنني ذالك //تعريف الكائن مع القيم الخاصة عن طريق دالة بناء function Person (name , age , gender){ //هنا قمنا باستخدام let بدل this لنبين انة قيمة خاص let id = Math.fllor(Math.random()*10) this.name = name, this.age = age, this.gender = gender //هنا قمنا ببناء دوال للقراءة او التعديل على القيمة id المعرف سابقا على انة خاص Object.defineProperty(this,"id",{ get:function(){return id}, set:function(value){id = value} }) } const person = new Person("feras",26 , "male") //تعريف الكائن مع قيم خاصة بدون دالة بناء //؟؟؟؟؟؟؟؟؟؟؟؟؟؟

يجب استيعاب آلية عمل كل منهما أولاً، فباستخدام خاصية position مثل relative, absolute, fixed مع خصائص الإزاحة top, left, right, bottom، فأنت تقوم بتغيير مكان العنصر ضمن تخطيط الصفحة. حيث position: relative تعمل على تحريك العنصر بصريًا من مكانه الأصلي، لكن المتصفح لا يزال يحجز مساحته الأصلية في تدفق الصفحة، والعناصر الأخرى لا تتأثر ولا تملأ الفراغ الذي تركه. بينما position: absolute أو position: fixed يتم إخراج العنصر بالكامل من تدفق الصفحة، والعناصر الأخرى تتصرف وكأنه غير موجود وتملأ مكانه، ويصبح العنصر وكأنه يطفو فوق الصفحة. ونستخدم position: relative تمهيدًا لاستخدام position: absolute حيث يتم تحريك العنصر تبعًا لأقرب عنصر أب له به يمتلك خاصية position: relative. ستحتاج إلى تجربة تلك الخواص عمليًا لتفهم آلية عملهم بشكل واضح، قم بتجربة التالي، اختر اضغط على كل خاصية لترى تأثيرها، وقم بعمل سكرول في الصندوق لتفقد هل تؤثر أي منها عند التحرك صعودًا وهبوطًأ في الصفحة؟ https://developer.mozilla.org/en-US/docs/Web/CSS/position ونستخدم خاصية position من أجل تصميم هيكل الصفحة أي تحديد مكان العناصر في الصفحة، بينما خاصية transform: translate() نستخدمها من أجل تأثيرات الحركة أو أي تغيير بصري لا نريده أي يؤثر على بقية عناصر الصفحة، حيث تلك الخاصية هي جزء من مجموعة التحويلات transform، وهي تعمل في مرحلة لاحقة من عرض الصفحة، لأنّ transform: translate(x, y) تقوم بتحريك العنصر بصريًا فقط دون أن تغير مكانه أو حجمه المحجوز في تخطيط الصفحة، أي بالنسبة للمتصفح، لا يزال العنصر في مكانه الأصلي ضمن تدفق المستند، وكل ما يحدث هو أن المتصفح يقوم برسم العنصر في مكان جديد، ولذلك لا تؤثر إطلاقًا على أماكن العناصر الأخرى المحيطة. قم بتجربة تأثيرها هنا: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate

السلام عليكم ورحمه الله وبركاته هل في مراجعة ل مسار الذكاء الاصطناعي ؟ مع العلم انو انا عملت مراجعة بأهم مواضيع الدورة بس بدي للإستزادة لو في

‏السلام عليكم ورحمة الله وبركاته كيف أستطيع متابعة هذه الدورة كشخص كفيف يعني ببساطة كيف أعرف الأكواد المكتوبة طبعا أنا تعلمت بايثون ولكن اشتركت بهذه الدورة حتى أقوى من مهاراتي فكيف أتابع هذه الدورة وكيف أعرف الأكواد المكتوبة أنا نشرت مقترح في مركز المساعدة لكن إلى حد الآن لم يرد علي

لم افهم بضبط متى استعملهما

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

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

قلت لي انه يوجد postion فقط لنقل المحتوى ولكن حتا translate تنقل محتوى

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

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

انا الان فاهم جميع الخصائص في css لكن عند انشاء مشروع بتتخلبط لأنها كثيرة ومعرفش ايش استعمل هل هذا سببه عدم رؤيتي للمشاريع واذا كانت هذه مشكلتي مالحل قلت لي انه يوجد postion فقط لنقل المحتوى ولكن حتا 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

انا لم اتمكن جيدا من position بصفة عامة ولا اعرف متى استخدمها وايضا transform لأنني لا اعرف متى استخدم هذا او هذا ويوجد العديد من الاشياء وهذا كله وانا انتهيت من اساسيات تطوير الويب فقلت هل يجب ان اقوي نفسي هذه الاشياء ام انتقل للقسم الذي بعده واقويها مع الاستاذ من خلال المشاريع

الف شكراا جدا لحضرتك جزاك الله كل خير

الف شكراا جدا لحضرتك جزاك الله كل خير

https://t.me/+PeWaMSzJGpk1ZGI0 هذا رابط مجتمع على تلجرام تقدري تدخلي عليه https://t.me/+PeWaMSzJGpk1ZGI0 https://t.me/+PeWaMSzJGpk1ZGI0 https://t.me/+PeWaMSzJGpk1ZGI0 اتمنى الناس تدخل وتضيف اي شخص مشترك في هذه الدورات ونتشجع سويا نكمل المحتوى ونتعلم واذا شخص فقد الشغف نساعد بعض

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

انا اشتركت في واجهة المستخدم وتطوير تطبيقات باستخدام جافا سكربت وبدأت بواجهة المستخدم ودرست اساسيات html and css and js واقترح علي احد الاساتذة بما انني مشترك في دورة تطوير تطبيقات باستخدام جافا سكربت ان ادرس اساسيات لغة javascript هنالك ولكن عند تصفح لم اجد درس عن شجرة dom كيف ادرسها كاملتا لأن في دورة واجهة المستخدم موجودة في فديو فيه ربع ساعة وغير شاملة لكل شيء وشكرا

المشاريع الخاصة بجانغو نستخدم بها API بالفعل، فلا يوجد مشروع واجهة خلفية بدون API، الفكرة أننا قمنا بتطوير الواجهة الأمامية أيضًا من خلال جانغو عن طريق محرك القوالب الخاص به، ولو تجاهلت ذلك الجزء، ستجد أننا قمنا بإنشاء API أي مسارات ومتحكمات لمعالجة الطلبات الواردة. أي لو أردت تطوير واجهة خلفية لمشروع آخر من خلال جانغو، تستطيع ذلك لا مشكلة، ستقوم بتطوير المشروع كما فعلنا في الدورة ولكن بدون الجزء الخاص بالواجهة الأمامية. نفس الحال بالنسبة لمشاريع Flask. وفي حال تقصد Django REST Framework فلم يتم التطرق إليه في الدورة، لكنه يعتمد على جانغو لذا بتعلم جانغو فقد تعلمت نسبية كبيرة من ذلك الإطار. ستجد تفصيل هنا:

هل فيما بعد عند تنفيذ مشروع لعميل أو من أجل بناء معرض أعمالك ستقوم بنسخ هيكل مشروع ما؟ بالطبع لا، يجب أن تتعلم طريقة تهيئة المشروع وتهيئة بيئة العمل. لكن يجب التفرقة بين الـ Boilerplate وبين تهيئة المشروع، حيث الـ Boilerplate هو هيكل المشروع والأكواد الأساسية اللازمة لإنشاء مشروع react مثلاً، ولا حاجة لفعل ذلك بنفسك، حيث ستقوم بتنفيذ أمر بسيط يقوم بذلك بشكل تلقائي: npm create vite@latest my-react-app -- --template react ما يجب عليك استيعاب هيكل المشروع الذي تم إنشائه وليس تجاهله، بمعنى تستوعب لماذا تم إنشائه بهذا الشكل، لكي تتمكن من التعديل عليه وتطوير المشروع، وتتجنب وضع ملفات في المكان الغير صحيح. بينما مشاريع الويب من خلال HTML, CSS و webpack مثلاً، فتحتاج إلى تعلم كيفية تهيئة المشروع من الصفر، حيث لا يوجد هيكل أساسي لتلك المشاريع، وهي الأساس الذي يُبنى عليه، لذا تعلم الطريقة الصحيحة لهيكلة المشروع والأسلوب المُتعارف عليه وتستطيع التعديل عليه كيفما تريد لكن ليس بالشكل الذي يجعله صعب الفهم من قبل الآخرين.