محمد Fahmy

بالنسبة لسؤالك الخاص بما إذا كان الذكاء الاصطناعي سوف يأخذ مكان المبرمجين في المستقبل فالإجابة هي لا. إجابة تفصيلة أكثر : متي يقضي الذكاء الاصطناعي علي مبرمجين تطوير الويب؟ هذا سؤال لا يمكن الإجابة عليه بسهولة، فالذكاء الاصطناعي هو مجال واسع ومتنامي يشمل العديد من التطبيقات والتقنيات المختلفة. لكن بشكل عام، يمكن أن نقول أن الذكاء الاصطناعي لا يهدف إلى استبدال مبرمجين تطوير الويب، بل إلى مساعدتهم وتعزيز قدراتهم وإبداعهم. فمثلاً، يمكن للذكاء الاصطناعي أن يساعد في توليد تصاميم وشعارات وأسماء للمواقع الإلكترونية بشكل آلي وسريع، باستخدام أدوات الذكاء الاصطناعي. كما يمكن للذكاء الاصطناعي أن يساعد في كتابة أكواد المواقع الإلكترونية بشكل أذكى وأفضل، باستخدام تقنيات مثل التعلم الآلي وفهم اللغة الطبيعية والشبكات العصبية. كما يمكن للذكاء الاصطناعي أن يساهم في تحسين تجربة المستخدم وزيادة التفاعل مع الموقع، باستخدام روبوتات الدردشة والمساعدين الرقميين والتحليلات المتقدمة. ولكن كل هذه التطبيقات لا تغني عن دور مبرمجين تطوير الويب، بل تحتاج إلى مهاراتهم وخبراتهم ورؤيتهم لإدارتها وتطويرها وتخصيصها وحل المشاكل التي قد تواجهها. فالذكاء الاصطناعي لا يزال في مرحلة نمو وتجربة، ولا يستطيع فهم كافة احتياجات وتوقعات المستخدمين أو التأقلم مع كافة التغيرات والابتكارات في عالم الويب. لذلك، فإن مبرمجين تطوير الويب هم من يحددون استراتيجية وأهداف الموقع، ويلائمون التصميم والترميز مع رسالة الموقع، ويراقبون أداء الموقع وأثره على المستخدم. إذًا، فإن الذكاء الاصطناعي لا يقضي على مبرمجين تطوير الويب، بل يشكل شريكًا قويًا لهم، يسهل عليهم بعض المهام وأنصحك بتصفح هذه النقاشات فهي تتحدث حول موضوع الذكاء الأصطناعي. وبالنسبة لسؤالك حول كيفية تطوير مهارات في مجال Frontend بالنسبة لي التطور يعني التطبيق. التطبيق علي مشاريع كبيرة ومعقدة مثل المتاجر الألكترونية. مثلاً يمكنك الدخول علي موقع CodePen وتطبيق الأفكار الموجودة فيه. وهذه بعض الخطوات التي تساعدك على تحسين أدائك وإبداعك في تصميم واجهات الويب. هذه بعض النصائح التي يمكنك تطبيقها: - تعلم لغات تصميم الويب الأساسية، وهي HTML و CSS و JavaScript، وتأكد من إتقانها ومعرفة أحدث المعايير والخواص التي تضيف قيمة لتصاميمك، مثل HTML5 و CSS3 و ES6. - استخدم أطر العمل الخاصة بالتصميم، وهي مجموعة من الأكواد الجاهزة التي تسهل عليك عملية التصميم وتوفر لك الوقت والجهد، مثل Bootstrap و Tailwind و Materialize. - احرص على جعل تصاميمك متجاوبة مع جميع أحجام الشاشات، وذلك باستخدام Media Queries و Flex Box و Grid، وتجنب استخدام الأبعاد الثابتة أو النسبية. - ابتكر تأثيرات حركية جذابة لتصاميمك، باستخدام Animation و Transition و Transform، وتعلم كيفية استخدام JavaScript لإضافة حيوية وتفاعلية للعناصر. - اطّلع على أفضل الممارسات في مجال Frontend، وذلك بقراءة المقالات والدروس والكورسات المتخصصة في هذا المجال، والتي تساعدك على تحسين جودة كودك وأدائك, ويمكنك الأطلاع علي مقالات أكاديمية حسوب بهذا الخصوص. - اشترك في دورات تدريبية متقدمة في مجال Frontend، والتي تعرفك على أحدث التقنيات والأدوات التي تستخدم في هذا المجال، مثل React و Angular و Vue و SASS و Webpack و Vite. - مارس مهاراتك بشكل مستمر، وذلك بعمل مشاريع شخصية أو مشاركة في مشاريع جماعية أو التقدم لوظائف في هذا المجال، ولا تتوقف عن التعلم.

تطوير الموقع باستخدام الأدوات والتقنيات المذكورة يمكن أن يساعدك وهذه هي: بالنسبة للبث المباشر ، يمكن استخدام أدوات مثل WebRTC وOpenTok لتحقيق ذلك. بالنسبة للاستايلات وخلفيات الغرف والأعضاء ، يمكن استخدام CSS و HTML و JavaScript لتخصيص الموقع وجعله جذابًا. ويمكن استخدام Firebase لإضافة المزيد من الميزات مثل الرسائل الفورية والتفاعلات على المنشورات. بالنسبة للاتصال الصوتي ، يمكن استخدام تقنيات مثل WebRTC ومكتبات مثل Twilio لإضافة هذه الميزة. ومن أجل الإستوري ، يمكن استخدام أدوات مثل Instagram API وFirebase لإضافة هذه الميزة. ويمكن استخدام مكتبات مثل React وAngularJS لزيادة التفاعلية في الموقع. أخيرًا ، يجب أولًا فهم هذه التقنيات جيدًا قبل الشروع في تطوير الموقع. كذلك، يجب التأكد من أن هذه التغييرات ستتوافق مع هيكل الموقع وستحسِّن من تجربة المستخدم. أو يمكنك أن تطلب من مبرمج العمل علي هذا المشروع من خلال موافع العمل الحر مثل مستقل.

لا يمكن استخدام "let" في تعريف مدخلات الدالة، لأن مدخلات الدالة تعتبر بالفعل متغيرات محلية (local variables) داخل نطاق (scope) الدالة. عند تعريف دالة، يمكننا تحديد المدخلات التي يمكن للمستخدم إدخالها عن طريق وضعها بين القوسين (). ويمكنك تفسير هذا كأن هذه المدخلات تم تحديدها مسبقًا، وليس من الضروري تعريفها مرة أخرى باستخدام let في داخل دالة. وبمجرد تمرير القيم لهذه المدخلات، تصبح هذه المتغيرات محليةًً داخل النطاق(scope) الخاص بالدالة، ويمكن الوصول إليها داخل الدالة دون الحاجة لتحديدها مرة أخرى باستخدام let. يمكن الاستفادة من الدالة التالية كمثال يوضح ذلك: function addition(num1, num2) { let result = num1 + num2; return result; } let value = addition(5+4) console.log(value) // 9 في هذا المثال، يتم تحديد مدخلين (num1 و num2) دون استخدام let، ويتم تعريف متغير محلي (result) داخل الدالة بمجرد إنشائها. ولن يتمكن المستخدم من الوصول إلى هذه المتغيرات من خارج الدالة. يفضل أن تعرف كيفية إنشاء المتغيرات في لغة جافا سكربت (JavaScript) وما الفرق بين let و var و const في الأعلان عن المتغير. في لغة جافا سكربت (JavaScript)، هناك ثلاثة أنواع من الأوامر(الكلمات مفتاحية) التي تستخدم لإعلان المتغيرات، وهذه ننظرة علي كلٍ منها: 1. var: هي الطريقة القديمة لتعريف المتغيرات في جافا سكربت، يمكن استخدامها لتعريف متغير في أي مكان في البرنامج. قبل ES6 (ECMAScript 2015)، كان var الأمر الوحيد المستخدم لتعريف متغيرات في جافا سكربت. الكود: var a = 5; function testFunc() { var b = 10; console.log(a); // 5 console.log(b); // 10 } testFunc(); console.log(a); // 5 console.log(b); // ReferenceError: b is not defined 2. let: هي الطريقة الجديدة في ES6 لتعريف المتغيرات، يمكن استخدامها لتعريف المتغيرات داخل أي كتلة(نطاق) {...} في البرنامج (على عكس var الذي يمكن استخدامه داخل وخارج الكتلة {}). عند استخدام let، لا يمكن استخدام إعلان نفس الاسم مرتين في نفس الكتلة. الكود: let x = 10; if (x === 10) { let x = 20; console.log(x); // 20 } console.log(x); // 10 في هذا المثال، تم تعريف متغير x باستخدام let عندما تم اختبار قيمته في الشرط، تم تغير قيمة x على قيمة جديدة 20. ولكن هذا التعريف يكون فقط مع المحدد الداخلي للشرط، بمعنى آخر، متغير x الذي تم تعريفه خارج الشرط لن يتأثر بأي تغيير يتم إجراؤه داخل الشرط. وهذا يعني أن القيمة المطبوعة لـ x خارج الشروط ستكون 10، بينما القيمة المطبوعة داخل الشرط ستكون 20. هذا هو ما يعنيه let - إنه يعرف مجالًا محددًا للمتغيرات التي يمكن تغييرها فقط في المحدد المعين. 3. const: هي طريقة لتعريف المتغيرات التي لا يمكن تغيير قيمتها بعد الإعلان عنها. يجب تعيين القيمة الأولية للمتغير عند إعلانه، ولا يمكن إعادة تعيين القيمة لاحقًا. الكود: const a = 5; function testFunc() { const b = 10; console.log(a); // 5 console.log(b); // 10 } testFunc(); console.log(a); // 5 a = 6; // TypeError: Assignment to constant variable.

يمكن استخدام الدالة `import()` لاستدعاء الصور داخل loop في React دون استخدام require. يمكن استخدام الدالة `map` مثلاً لتطبيق عملية على كل عنصر في مصفوفة البيانات واستخدام `import()` لاستدعاء الصور عند الحاجة. هذا مثال بسيط لكيفية استخدام `import()`:``` const images = [ "image1.jpg", "image2.jpg", "image3.jpg" ]; const ImageList = () => ( <div> {images.map((image, index) => ( <div key={index}> <img src={import(`./images/${image}`).then(image => image.default)} alt="" /> </div> ))} </div> ); في هذا المثال، يتم استخدام `map` لتطبيق عملية على كل عنصر في مصفوفة الصور. يتم استخدام `import()` داخل دالة `map` لاستدعاء الصور وإظهارها في واجهة المستخدم. يتم استخدام `.then` لتمكين استدعاء الدالة بشكلٍ غير متزامن والحصول على القيمة المقدمة بعد تحميل الصورة. ومن الأفضل استخدام طريقة import() المدعومة في ES6 لاستدعاء الصور في React. يمكن استخدام هذه الطريقة في أي ملف js داخل مشروع React. على سبيل المثال، إذا كانت تريد استدعاء صورة تسمى "example.png"، يمكنك استخدام الكود التالي: import exampleImage from './example.png'; ثم يمكنك استخدام هذه الصورة في JSX عن طريق استخدام متغير الصورة: <img src={exampleImage} alt="Example Image" /> يجب التأكد من توفر المسار الصحيح للصورة ووضعها في نفس المسار الذي يحتوي فيه الملف الذي تريد استخدامها به.

بحسب ما فهمت، تريد استخدام الصور في مشروع React ولكن لديك مشكلة في استدعاء الصور. أولًا، يجب التأكد من أن المسار الذي تستخدمه صحيح لمكان الصورة، لذلك يجب عليك التأكد من المسار الذي تستخدمه في استدعاء الصورة ومكان وجود الصورة داخل مشروعك. على سبيل المثال، إذا كانت الصورة داخل مجلد "images" الموجود في مجلد "src" ، يجب استدعاء الصورة بهذا الشكل: <img src={require('../src/images/image.png')} alt="MyImage" /> و يمكنك استخدام import في أي ملف تريد استعمال الصورة فيه ، مثل هذا المثال: import myImage from '../src/images/image.png'; واستخدام الصور هكذا. <img src={myImage} alt="MyImage" /> وبذلك يمكنك استخدام الصور في أي مكان في مشروعك دون الحاجة إلى استدعائها في كل مرة باستخدام require.

دلة f-strings هي واحدة من الطرق المستخدمة في لغة البايثون (Python) لتمثيل النصوص وعرضها بطريقة مريحة للغاية. وتتميز هذه الدلة بالبساطة والإتقان، مما يجعلها من الخيارات المفضلة لدى المبرمجين. لعمل f-strings لأي نص، يتم إجراء ثلاث خطوات: وضع الحرف 'f' قبل بداية النص المراد عرضه. وضع المتغير بين علامتي صندوق {} داخل النص. الأمر السابق قد يبدو مربكًا، لكنه يصبح أكثر وضوحًا مع الأمثلة التالية: 1- عرض النص المكتوب بجانب الرقم الذي يمثله: number= 5 print(f"The number is {number}") في هذا المثال، يتم تعريف المتغير 'number' ليمثل الرقم 5. ثم يتم استخدام الدلة f-strings لعرض النص "The number is " بجانب القيمة التي تحملها المتغير 'number'. 2- عرض عدة متغيرات داخل النص: name = "Ahmed" age = 25 print(f"My name is {name} and I am {age} years old.") في هذا المثال يتم تعريف المتغير 'name' ليحمل النص "Ahmed" والمتغير 'age' ليحمل القيمة '25'. ثم يتم استخدام الدلة f-strings لعرض النص "My name is " بجانب محتوى المتغير 'name' وكذلك عرض العمر الخاص بالمتغير 'age'. 3- إجراء العمليات الحسابية داخل الدلة f-strings: average = (5 + 10 + 15) / 3 print(f"The average is: {average:.2f}") ستقوم هذه الطريقة باستخدام الدلة f-strings لعرض قيمة المتغير 'average' في النص. ولكن الأمر الجدير بالذكر هو أنه تم وضع '.2f' بجانب المتغير الذي يتم عرضه، وذلك لإظهار القيمة مع 2 أرقام تليها الفاصلة. بالتالي، فإن القيمة المراد عرضها نتيجة عملية حساب (5 + 10 + 15) / 3 هي '10.00'. الخلاصة، يمثل الاستخدام المناسب للدلة f-strings في برنامج بايثون أمرًا مهمًا. فهي تمكن المبرمجين من عرض النصوص والمغيرات بطريقة سلسة واحترافية.

يمكن أن يكون السبب في عدم عمل الكلاسات هو عدم تضمين ملفات CSS المطلوبة بشكل صحيح في صفحتك. يجب التأكد من تضمين ملفات CSS bootstrap بشكل صحيح في صفحتك. أما بالنسبة للكلاس `subtle`، فهو غير موجود في Bootstrap 4. إذا كنت تستخدم Bootstrap v4 ، فلا يوجد كلاس يسمى "bg-color-subtle" أو "subtle". ربما كان موجودًا في إصدارات سابقة من Bootstrap. لذلك، يجب التأكد من إصدار Bootstrap الذي تستخدمه ومن الكلاسات المتاحة فيه. في حين يوجد كلاس هو "bg-light" الذي يعطي خلفية فاتحة للعنصر ويمكنك تغيير لون الخلفية باستخدام كلاسات الألوان المختلفة في Bootstrap مثل "bg-primary" ، "bg-secondary" ، "bg-success" ، "bg-danger" ، "bg-warning" و "bg-info". وللحصول على النتائج التي تريدها ، يمكنك إما استخدام كلاس "bg-light" واستخدام الكلاسات المختلفة لتغيير لون الخلفية والحدود وما إلى ذلك. يمكنك معرفة جميع كلاسات الخلفيات المتاحة في إي إصدار Bootstrap من خلال هذا الرابط. وهذه بعض المصادر المفيدة في هذا الموضوع. توثيق Bootstrap كامل مترجم إلى العربية من موسوعة حسوب : Bootstrap - موسوعة حسوب (hsoub.com) مقالات عن Bootstrap من إكاديمية حسوب : إطار عمل Bootstrap - أكاديمية حسوب (hsoub.com)

الطريقة الصحيحة لطباعة أرقام تتزايد بالتسلسل من 1 إلى 28 بطريقة مرتبة. وهذ شرح لما يجب أن يحدث في الكود بالخطوات: نقوم بتعريف متغير يسمى num بقيمة 1. نستخدم حلقة تكرار for للتكرار 7 مرات، وهي من الرقم 1 إلى 7، ونختزل ذلك بـ range(1,8) أو يمكنك كتاية القائمة هكذا [1,2,3,4,5,6,7] ليس هناك فرق بينهما. نقوم بتعريف متغير جديد باسم new_number وهو يحمل قيمة i، وهذا يعني أن المتغير num_digits سيتم تعيينه بقيم من 1 إلى 7 بالتسلسل. نستخدم حلقة تكرار for جديدة للتكرار حسب قيمة المتغير num_digits، والتي تحدد عدد المرات التي يجب علينا فيها طباعة مجموعة من الأرقام. نقوم بطباعة الرقم الحالي num بالمرور على داخل الحلقة الثانية باستخدام دالة print، ونستخدم end=' ' لجعل الأرقام موجودة جنبًا إلى جنب بدون فصل بينها بمحرر النصوص. نرفع قيمة المتغير num بمقدار 1 لإعداده للطباعة القادمة. بعد الانتهاء من داخل الحلقة الثانية، نقوم بطباعة سطر فارغ باستخدام دالة print() لإنهاء التعليق الحالي والانتقال إلى السطر التالي. الكود: قم بكتبة كود أخر يقوم بنفس ما يفعله هذا الكود num = 1 for i in [1,2,3,4,5,6,7]: new_number = i for j in range(new_number): print(num, end=' ') num += 1 print() وهناك طريقة اخري أنظر إلى هذا الكود: num = 1 for i in range(1, 8): new_number = i nums = [str(num + j) for j in range(new_number)] print(' '.join(nums)) num += new_number شرح الكود تم تعريف متغير `num` بقيمة 1. تم استخدام حلقة `for` لتكرار العملية 7 مرات (range(1, 8)). تم تعريف متغير `new_number` بقيمة متغير `i` الحالي في الحلقة. تم إنشاء قائمة `nums` وتعيينها إلى تحويل المتغير `num` الحالي إلى سلسلة وإضافة أرقام متصاعدة بواسطة حلقة `for` بدءًا من 0 إلى `new_number` -1. تم استخدام الدالة `join` لدمج قائمة `nums` في سلسلة واحدة مع فراغات بين الأرقام. تم طباعة السلسلة باستخدام الدالة `print`. تم زيادة قيمة المتغير `num` بقيمة `new_number` لاستخدامه في الدورة القادمة.

يمكن حل هذه المشكلة بإضافة شرط في الدالة myFunction() يتحقق من قيمة حقل الإدخال، وإذا كان فارغاً يعرض رسالة "required" دون إظهار قيمة الصفر. يمكن استخدام الدالة trim() لحذف أي مسافات فارغة في بداية أو نهاية النص المدخل. يمكن تعديل الكود كالتالي: function myFunction() { let userInput = document.querySelector("#userInput"); let printName = document.querySelector("#printName"); if (userInput.value.trim() === "") { printName.innerHTML = "required"; } else { printName.innerHTML = userInput.value; } } وهذا حل أخر. JS function myFunction(event) { let userInput = document.querySelector("#userInput"); let printName = document.querySelector("#printName"); if(userInput.value === '') { userInput.setCustomValidity("Required"); // تعيين رسالة توضح أن الحقل المطلوب وضع قيمة له } else { userInput.setCustomValidity(""); printName.innerHTML = userInput.value; } } تم إضافة التحقق من قيمة الحقل قبل تشغيل الدالة myFunction، حيث يتم التحقق من إذا كان قيمة الحقل فارغة أو لا، في حالة كان الحقل فارغ يتم تعيين رسالة توضح أن الحقل مطلوب باستخدام الدالة setCustomValidity، وفي حالة ملأ الحقل بقيمة يتم تعيين قيمة اسم المستخدم للعنصر الذي لدية المعرف printName.

نحن لا نجواب علي الاسئة الأمتحانية, ولكن سوف أوضح لك كيفية فعل ذلك بالخطوات. لكتابة برنامج باستخدام لغة البرمجة C يسأل المستخدم عن جملة تحتوي على حد أقصى 50 حرفًا، ثم يقوم البرنامج بطباعة عدد الحروف الكبيرة في الجملة. استخدام دالة scanf() لطلب من المستخدم إدخال جملة بحد أقصى 50 حرفًا. يتحقق من أن الجملة التي تم إدخالها لا تتجاوز 50 حرفًا باستخدام دالة strlen(). استخدام دالة isupper() لفحص ما إذا كان حرف معين في الجملة هو حرف كبير أو لا. استخدام متغير عددي لتعقب عدد الأحرف الكبيرة في الجملة. استخدام دالة printf() لطباعة عدد الأحرف الكبيرة الموجودة في الجملة. يتطلب إنشاء هذا البرنامج كتابة بعض الأكواد، ويمكن تعلمها من خلال دراسة مصادر التعلم المتاحة على شبكات الإنترنت أو من خلال دراسة كتب برمجية.

في البرمجة، يوجد نوعان من الكائنات: القابلة للتكرار والغير قابلة للتكرار. ويعني الكائن القابل للتكرار كائن يمكن الوصول إليها بطريقة تسلسلية وفي نفس الترتيب الموجود داخله، بينما الكائن غير القابل للتكرار هو كائن لا يوجد فيه ترتيب معين. والفرق الرئيسي بين الكائنات القابلة للتكرار والغير قابلة للتكرار هو أن الكائن القابل للتكرار يمكن الوصول إليه بطريقة تسلسلية من خلال الحلقات، بينما الكائن غير القابل للتكرار لا يستجيب لخوارزميات التكرار. هنا بعض الأمثلة على الكائنات القابلة للتكرار والغير قابلة للتكرار في لغة بايثون: الكائنات القابلة للتكرار: - القوائم (Lists): وهي مجموعة من عناصر متسلسلة مفصولة بفاصلة ومحاطة بقوسين مربعين. يمكن الوصول إلى العناصر المختلفة داخل القائمة باستخدام الفهرسة. مثال: fruits = ["apple", "banana", "orange"] for fruit in fruits: print(fruit) - النصوص: يمكن معالجة النصوص كمجموعة من الأحرف القادمة بشكل متسلسل والوصول إليها باستخدام الفهرسة أو الشريطة. مثال: word = "Python" for letter in word: print(letter) - مدخلات المستخدم: يمكن للمستخدم إدخال العديد من القيم دفعة واحدة، وعادة ما يتم استلام القيم باستخدام دالة input() وتخزن الإدخالات المختلفة كنوع البيانات للقائمة. مثال: names = input("Enter names separated by whitespace: ").split() for name in names: print(name) الكائنات غير القابلة للتكرار: - تعتبر القواميس (Dictionaries) كائنات غير قابلة للتكرار (non-iterable)، وذلك لأنها لا تملك مفهومًا للترتيب، وبالتالي لا يمكن الوصول إليها باستخدام الفهرس التقليدي كما هو الحال في القوائم (Lists) والأُتناسقات (Tuples). بدلاً من ذلك، يتم الوصول إلى قيم القاموس باستخدام المفاتيح (Keys) الموجودة فيه. يمكن تعريف القاموس في بايثون باستخدام الأقواس{}، ويحتوي كل عنصر من عناصر القاموس على مفتاح وقيمة. فيما يلي مثال يوضح استخدام القاموس في بايثون: # تعريف القاموس my_dict = {'name': 'John', 'age': 25, 'city': 'New York'} # الوصول إلى القيم في القاموس باستخدام المفاتيح print(my_dict['name']) # سيطبع John print(my_dict['age']) # سيطبع 25 print(my_dict['city']) # سيطبع New York كما يمكن الوصول إلى جميع المفاتيح والقيم في القاموس باستخدام الدالة items()، ويمكن استخدام حلقة تكرار (loop) للوصول إلى كل مفتاح وقيمته: # الوصول إلى جميع المفاتيح والقيم في القاموس for key, value in my_dict.items(): print(key, value) # سيطبع: # name John # age 25 # city New York

يمكن كتابة الكود بلغة C كالتالي: #include <stdio.h> int main() { printf("Awesome Diagonal"); printf("s"); return 0; } يبدأ الكود بتضمين مكتبة `stdio.h` التي تحتوي على دوال الإدخال والإخراج القياسية في لغة C، ثم يعرف دالة `main` التي تعتبر نقطة البداية في تنفيذ البرنامج. يتم طباعة النص "Awesome Diagonal" باستخدام الدالة `printf`، ثم يتم طباعة الحرف "s" منفصلاً عن الجملة السابقة، ليكون الإخراج "Awesome Diagona1s". يمكن فهم معنى الجملة بأنها تطلب طباعة النص "Awesome Diagonal" مع حرف "s" لإنشاء كلمة مقترنة تعبر عن معنى ما. وتم استخدام دالة `printf` للقيام بذلك، حيث انه بإمكانها عرض البيانات المنسقة والشكل الذي يريده المستخدم بشكل مختلف، حسبما ذكرنا سابقًا.

دعنا في البداية نوضح الغاية من دورة تطوير تطبيقات الويب باستخدام لغة PHP. الغاية من دورة تطوير تطبيقات الويب باستخدام لغة PHP تعلم التقنيات الأتية: الأسس البرمجية السليمة عبر لغة PHP كيف يتم التخاطب بين المتصفح والخادم أساسيات قواعد البيانات كيفية بناء تطبيق ويب لإدارة المهام باستخدام لغة PHP أساسيات التطوير باستخدام معمارية MVC أساسيات إطار العمل Laravel بناء تطبيق إدارة المهام باستخدام إطار العمل Laravel تطوير واجهة برمجية API بالإعتماد علي نمط RESTful تطوير موقع إعلانات مبوبة شبكة اجتماعية تشبه Instagram تطوير نظام إدارة محتوى CMS كامل من الصفر باستخدام إطار العمل Laravel تطوير قوالب WordPress بهذه التقنيات يمكنك أن تصبح مطور واجهات خلفية Backend Developer. اما إذا أردت أن تصبح مطور واجهات أمامية أنصحك بدورة تطوير واجهات المستخدم. وإذا تعلمت دورة تطوير تطبيقات الويب باستخدام لغة PHP و دورة تطوير واجهات المستخدم, حينها يمكنك ان تصبح مطور شامل (Full Stack Developer). ولكن أنت أيضاً تحتاج إلي تعلم إطار عمل حتي تصبح مطور واجهات أمامية محترف, هذه هي أشهر إطر العمل: ReactJs VueJs AngularJS ويمكنك تعلم ReactJS من خلال دورة تطوير التطبيقات باستخدام لغة JavaScript. باأختصار هذه هي التقنيات التي تحتاج إلى تعلمها لكل تصبح مطور شامل Full Stack Developer. HTML CSS JavaScript Bootstrap (سوف تتعلمه في دورة تطوير واجهات المستخدم) ReactJS PHP Laravel MYSQL Database (سوف تتعلمها في دورة تطوير تطبيقات الويب باستخدام لغة PHP) أنصحك بتصفح هذه المقالة فهي تشرح الموضوع بالتفصيل.

لن تحتاج إلي إنشاء صفحة جديدة لكل منتج إذا كنت تستخدم أي إطار عمل من هذه الإطارات في تطوير الواجهة الأمامية: ReactJs VueJs AngularJs وهذا حل لهذه المشكلة باستخدم إطار العمل ReactJs. لعرض معلومات المنتج بعد النقر على الإعلان، يمكن استخدام React Router. يتم إنشاء مسار لكل صفحة منفصلة تحتوي على معلومات المنتج وتمرير المعرِّف المناسب كوسيط له. يمكن استخدام دالة جاهزة من قِبل الإطار لتحديد المسار المطلوب. فيما يلي خطوات عملية لتحقيق ذلك: 1. تثبيت المكون الإضافي React Router: يمكن القيام بذلك باستخدام npm باستخدام الأمر التالي: npm install react-router-dom 2. إضافة مكون BrowserRouter: هذا المكون يستخدم كل ما يتعلق بالتوجيه على مستوى التطبيق ويتم تضمينه في مكون App.js: import { BrowserRouter, Route, Switch } from 'react-router-dom'; function App() { return ( <BrowserRouter> <div> <Switch> <Route path="/" component={Home} exact /> <Route path="/product/:id" component={Product} exact /> </Switch> </div> </BrowserRouter> ); } في هذا المثال، يتم تسجيل صفحتين: Home وProduct. يتم توجيه المستخدم إلى Home عندما يفتح الموقع في البداية. 3. إنشاء مكون بصفحة المنتج: يمكن إنشاء مكون جديد بصفحة المنتج تدعى Product.js واعتماداً على المعرف، يمكن عرض معلومات المنتج. function Product(props) { return ( <div> <h1>Product {props.match.params.id}</h1> <p>This is product page with ID {props.match.params.id}</p> </div> ); } 4. تمرير المعرف المنتج عبر الرابط التالي: <Link to={`/product/${product.id}`}>View Product Details</Link> مع النقر على الرابط، سيتم تحميل صفحة معلومات المنتج بناءً على المعرف الذي تم تمريره في الرابط. بهذه الطريقة، يمكن عرض معلومات المنتج عند النقر على الإعلان دون الحاجة لإنشاء صفحة جديدة لكل منتج.

مرحبًا @Abdullatif Muhaisen إذا واجهتك أي مشاكل في الدورة يفضل أن تسال في قسم التعليقات الموجود اسفل الدرس الخاص بهذه المشكلة وسوف يقوم مدرب بالإجابة عليك في أسرع وقت. أنظر هذه الصورة. وسبب المشكلة وأنك لم تقم بتثبيت مفسر لغة Ruby, لذلك أنصحك بمراجعة هذا الدرس. ويمكنك تحميل مفسر Ruby من هنا.

يمكن استخدام أي لغة برمجة لشرح البرمجة الكائنية، ولكن عادةً ما يستخدم العديد من المدرسين لغة Python في التعليم، لأنها تعد من اللغات السهلة والمرنة لتعلم البرمجة الكائنية. ومع ذلك، فإن استخدام Java في شرح البرمجة الكائنية يعتبر أيضًا شائعًا لأنها من اللغات الشائعة في تطوير برامج الحوسبة والمفضلة في بعض المناطق، ولديها دعم جيد من المجتمع ووفرة من الموارد التعليمية عبر الإنترنت. ولكن في النهاية، يتوقف الأمر على ما اختاره المدرس وما هو اللغة التي يشعر بالراحة في تعليمها وشرحها. و تُعتبر البرمجة الكائنية التوجُّه من أهم الأساليب البرمجية التي تتبعها منصات البرمجة العصرية، وتتميز هذه الطريقة بالعديد من المميزات المساعدة على تحسين جودة الكود وتسهيل عملية تطويره، ولذلك، سوف نعرض فيما يلي: مميزات تعلُّم البرمجة الكائنية التوجُّه بلُغة بايثون. 1. سهولة الكتابة يعتبر البرمجة باللغة البايثون سهلًا للمبتدئين والخبراء على حدٍّ سواء، ويأتي ذلك لأنها تستخدم تنسيقًا بديهيًا يتيح للمبرمجين الانتهاء من البرمجة بشكلٍ أسرع، كما يمكن الوصول إلى الكثير من المعلومات المساعدة بسهولة، وذلك بفضل العديد من الموارد المتاحة عبر الإنترنت. 2. التحكم في الأنواع والتعقيدات تسهل البرمجة الكائنية التوجُّه تعقيد البرامج، وذلك بفضل القدرة على إنشاء أنواع متعددة من الكائنات، وهذا يتيح للمبرمجين التحكُّم بالعديد من التعقيدات في البرنامج بشكلٍ أسهل. 3. القابلية للعودة واستخدام الشفرة يتيح تعلُّم البرمجة الكائنية التوجُّه بلُغة بايثون للمبرمجين إنشاء شفرة قابلة لإعادة الاستخدام بكلٍّ سهولة، وذلك لأن الكائنات تمتلك بنية داخلية تجعل من السهل استخدام أي جزءٍ من الشفرة في العديد من المواقف. 4. المرونة تتميز البرمجة الكائنية التوجُّه بمرونتها، كما يمكن التعديل بسهولة على الكائنات الحالية إذا تمت إضافة شرح مفصل لها بشكلٍ جيد، ما يؤدي إلى تحسين جودة الكود وتبسيط عملية التطوير. 5. أدوات دعم للبرمجة توفر لغة بايثون مجموعةً من الأدوات المتاحة لمصادقة وإجراء تحليلات الشفرة والتأكد من عدم وجود أي أخطاء ضمنها، كما يوفر بايثون مجموعةً من الأدوات الإضافية للمبرمجين ومكتبات البيانات الهائلة المتاحة. بأختصار, يتم استخدام البرمجة كائنية التوجه في كل من اللغتين Python و Java. ومع ذلك، فإن هناك بعض الاختلافات في كيفية استخدام بعض المفاهيم والميزات. على سبيل المثال، في Python ، يمكننا تعريف الكائنات وتمريرها كباراميترات للدالات. وفي Java، يجب تعريف كائنات باستخدام الكلمة المفتاحية "class" وإنشاء كائنات باستخدام الكلمة المفتاحية "new". وهناك بعض الميزات الموجودة في Python والتي ليست موجودة في Java، مثل استخدام التعبيرات اللامركزية. على الجانب الآخر، فإن Java توفر بعض الميزات التي ليست موجودة في Python، مثل الواجهات والتعدادات (enum). ومع ذلك، يمكن استخدام المفاهيم الأساسية للبرمجة كائنية التوجه بشكل مشابه في كلا اللغتين، مثل التعريفات والتوريث (inheritance) والاستخدام المعلن (polymorphism) وغيرها.

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

تعتبر geniusts/hijri-dates عبارة عن مكتبة جاهزة في لغة PHP تساعد في تحويل التواريخ الميلادية إلى هجرية والعكس. لتستخدم المكتبة، يجب أولاً تنزيلها باستخدام Composer باستخدام الأمر: composer require geniusts/hijri-dates ثم يمكن استخدام هذه المكتبة في برنامج PHP باستخدام المثال التالي: <?php // تحويل التاريخ الميلادي إلى هجري $gdate = new \DateTime('2021-05-01'); $hdate = \GeniusTS\HijriDate\Date::fromDateTime($gdate); echo $hdate->format('l j F Y') . "\n"; // يطبع "السبت 19 رمضان 1442" // تحويل التاريخ الهجري إلى ميلادي $hdate = new \GeniusTS\HijriDate\Hijri('1442-09-07'); $gdate = $hdate->toCarbon(); echo $gdate->format('l jS F Y') . "\n"; // يطبع "Saturday 17th April 2021" ?> في المثال أعلاه، قمنا بتحويل التاريخ الميلادي 2021-05-01 إلى هجري وطباعة النتيجة، ومن ثم تحويل التاريخ الهجري 1442-09-07 إلى ميلادي وطباعة النتيجة. يمكن تغيير التواريخ والتنسيقات وفقاً للاحتياجات الخاصة بك. ويمكنك تصفح المكتبة لمعرفة تفاصيل أكثر من هنا.

لتحريك زر input type عند عمل hover، يمكن استخدام CSS Transitions أو CSS Animations. في هذا المثال، سنستخدم CSS Transitions. نبدأ بكتابة HTML الخاص بالزر: HTML <input class="move-left" /> ثم نستخدم CSS لتعريف نمط الزر وتحريكه. يجب استخدام position: relative للعنصر الأب و position: absolute للزر لكي يمكن تحويله نحو اليسار. CSS .move-left { background-color: #3498db; /* لون الخلفية */ color: #fff; /* لون النص */ border: none; /* حدود الزر */ padding: 10px 16px; /* الهامش داخلي */ font-size: 18px; /* حجم النص */ cursor: pointer; /* تغيير شكل المؤشر */ position: absolute; /* تحديد موقع الزر بشكل مطلق */ transition: all 0.3s ease-in-out; /* تفاصيل التحرك */ } .move-left:hover { left: -5px; /* تحريك الزر نحو اليسار عند hover */ } تم تعيين خاصية transition للتحكم في تفاصيل التحرك. هذه الخاصية تمكنك من تحديد الوقت الذي يستمر فيه التحرك ونوع التسارع. يمكن تغيير قيمة left و top لتحريك الزر على المحور المناسب، مثل left: 10px; لتحريكه نحو اليمين. وهذا مثال آخر. HTML <input class="move-left-2"/> CSS .move-left-2 { background-color: #3498db; /* لون الخلفية */ color: #fff; /* لون النص */ border: none; /* حدود الزر */ padding: 10px 16px; /* الهامش داخلي */ font-size: 18px; /* حجم النص */ cursor: pointer; /* تغيير شكل المؤشر */ position: relative; /* تحديد موقع الزر بصورة نسبية */ } .move-left-2:hover { transform: translateX(-5px); /* تحريك الزر نحو اليسار عند hover */ } في هذا المثال، تم استخدام transform مع translateX لتحريك الزر. يمكن تعديل الأرقام لتحريك الزر على المسافة التي ترغب بها. __________ بأختصار, لتحريك `input` نحو اليسار عند عمل `hover` عليه، يمكن استخدام خاصية `padding-left` في CSS مع تحويل قيمتها إلى عدد سلبي عند حدوث الحدث `hover` مع باقي الاستايلات التي تريدها. ويمكن عودة ال `input` إلى مكانه الأصلي باستخدام نفس الطريقة باستثناء إعادة تعين `padding-left` الى القيمة الأصلية. ويمكنك فعل ذلك باستخدام JavaScript أنظر هذا المثال. هذا هو الكود في : HTML <input type="text" id="myInput" value="Hello World!"> CSS #myInput { padding-left: 10px; transition: padding-left 0.5s ease; } JavaScript var myInput = document.getElementById("myInput"); myInput.addEventListener("mouseover", function( event ) { myInput.style.paddingLeft = "10px"; }, false); myInput.addEventListener("mouseout", function( event ) { myInput.style.paddingLeft = "0px"; }, false); في هذا المثال، عندما يحدث حدث `mouseover` يتم تعيين `-10px` في الخاصية`padding-left`. وعند حدوث حدث `mouseout`، يتم استعادة `padding-left` لقيمته الأصلية. يمكنك تغيير القيم المستخدمة في الأكواد `<input>` و `<style>` و `JavaScript` وفقًا لما تريد. وهذه بعض المقالات المفيدة في هذا الموضوع.

دعنا نوضح في البداية ما هو full stack developer. Full stack developer هو مطور يمتلك المهارات والخبرات اللازمة لتطوير تطبيقات الويب من الجانب الأمامي (Front-end) والجانب الخلفي (Back-end) وقواعد البيانات (Database). في الجانب الأمامي، يستخدم full stack developer لغات برمجة مثل HTML، CSS، JavaScript و React أو AngularJS لتصميم وتطوير واجهة المستخدم التفاعلية. في الجانب الخلفي، يستخدم full stack developer لغات برمجة مثل PHP، Ruby on Rails، Python أو Node.js لتصميم وتطوير خادم التطبيقات. أخيرًا، يحتاج full stack developer إلى فهم قواعد البيانات والعلاقات بينها. يستخدم SQL أو NoSQL لإنشاء قاعدة بيانات تسهل على المستخدم تحديث وإضافة المعلومات. ال Full stack developer هو شخص يمتلك المعرفة والخبرة اللازمة لتصميم وتطوير تطبيقات الويب بأكملها، من الجانب الأمامي إلى الجانب الخلفي وحتى قاعدة البيانات. وبالتالي إذا أتقنت هذه المهارات فأنت Full stack developer. تصفح هذا النقاش. وهذه المقالة.

نعم، يمكن للغة بايثون سحب البيانات من مواقع التواصل الاجتماعي مثل انستغرام وفيسبوك باستخدام بعض المكتبات المتاحة. ومن أشهر هذه المكتبات: 1. Tweepy: لسحب البيانات من تويتر. 2. Instaloader: لسحب الصور والفيديوهات من انستغرام. 3. Facebook Graph API: لسحب البيانات من فيسبوك. أما بالنسبة لإرسال رسائل جماعية تسويقية عبر تلغرام، فيمكن استخدام مكتبة python-telegram-bot التي تتيح إرسال الرسائل إلى قائمة مستخدمي تلغرام. ولإجراء عملية mention على انستغرام، يجب استخدام API خاص بانستغرام والذي يتطلب إذنًا خاصًا من انستغرام.

العلاقة بين كينونة المفضلة والعقارات هي many to many، حيث يمكن للمستخدم أن يضيف العديد من العقارات إلى قائمة المفضلة الخاصة به، وبالمثل يمكن للعقارات أن تكون مفضلة لدى العديد من المستخدمين. وبالتالي، يتم تطبيق علاقة many to many بين كلا الجانبين. وتحديدًا، يتم استخدام جدول وسيط (pivot table) لربط جدول المستخدمين بجدول العقارات. هذا الجدول يحتوي على مفتاح خارجي (foreign key) لكلا جدول المستخدمين والعقارات، ما يسهل على قاعدة البيانات إضافة أو حذف علاقات many to many بسهولة. وبشكل عام، تُستخدَم علاقة one to many في حالات ربط جانب واحد بجانب آخر، في حين تُستخْدَم علاقة many to many في حالات ربط جانب متعدِّد بجانب آخر متعدِّد.

يمكنك فعل ذلك من خلال تخزين الاسم "شيماء" في متغير بأي اسم(دعنا نجعله shima أيضأ) ثم طباعة هذا المتغير من خلال الدالة print. مثال: shimaa = "شيماء" print(shimaa) لتعلم لغة بايثون يمكنك تصفح هذه المقالات. لغة بايثون Python - موسوعة حسوب (hsoub.com)

إذا أردت ان تجعل المقطع الصوتي غير مرئي يمكنك فعل ذلك من خلال CSS هكذا. audio{ display: none; } ولكن لجعل المقطع الصوتي يعمل في تلقائياً فلقد قامت جوجل بمنع هذه الخاصية في جميع المتصفحات التي تعمل علي نواة Chromium مثل Microsoft Edge و Google Chrome. ويمكنك تصفح هذه الصفحة لمعرفة تفاصيل أكثر من هنا.

يعتبر تعلم البرمجة من المهارات الأساسية التي يجب تعلّمها في هذا العصر الرقمي. ولكي تبدأ بتعلم البرمجة ، يجب أن تعرف من أين تبدأ وكيفية الاستفادة منها لتحقيق أهدافك. سأشرح لك خطوات بسيطة يمكن اتباعها لتدخل عالم البرمجة بسهولة وتحقق أفضل النتائج. 1. اختر لغة البرمجة المناسبة : قد يكون صعباً جداً الاختيار من بين اللغات المتعددة المتاحة في عالم البرمجة ، ولكن عند اختيار لغة البرمجة المثالية التي تتناسب مع طموحاتك واهتماماتك سوف تحصل على تحفيز أكبر للاستمرار في تعلم البرمجة. على سبيل المثال ، إذا كنت تريد العمل في مجال تطوير الويب ، PHP و JavaScript هما اللغتين الأكثر استخدامًا والأكثر شيوعًا في هذا الصدد. بدلاً من ذلك، إذا كنت تريد بناء تطبيقات الجوال، يمكنك بدء التعلم باستخدام الـ Java أو Swift لتطوير تطبيقات iPhone ، والـ Kotlin for Android أو إطار العمل Flutter. 2. الدروس التعليمية المجانية المتوفرة على الإنترنت : هناك العديد من الموارد عبر الإنترنت تمكنك من تعلم البرمجة بسهولة ، منها مواقع مثل Udemy، Khan Academy و Coursera و إكاديمية حسوب. تنتج هذه المواقع العديد من دروس البرمجة والإنجازات والمعلومات المجانية التي تساعدك على البدء في تعلم البرمجة بكل سهولة. 3. مواقع تساعدك في رحلة تعلم البرمجة: عند ممارسة البرمجة ، يمكن أن تواجه بعض العقبات ، أحيانًا سيتم تشغيل إعدادات برامجك بشكل خاطئ ، أو يمكن أن يكون لديك استفسارات تتطلب المساعدة من أحد المطورين. لهذا ، ويمكنك ان تجد الكثير من المساعدة علي مواقع مثل StackOverflow و GitHub و Codeacademy. 4. الممارسة و تطبيق الممارسة والتطبيق هما عنصران مهمان جدا عند تعلم البرمجة. في البداية، يكون الأمر صعبا قليلا لأنه يحتاج إلى فهم النظرية والمفاهيم الأساسية التي تشكل أساس البرمجة. ومع ذلك، فإن الممارسة والتطبيق تساعد على توضيح هذه المفاهيم وتحويلها إلى مهارات عملية. من الأسباب الرئيسية للممارسة والتطبيق هي تعزيز فهم المفاهيم الأساسية. عندما يقوم الشخص بتطبيق ما تعلمه، يستطيع فهم كيف يعمل الكود وما هي الطريقة التي يتفاعل بها التطبيق مع البيانات والمستخدمين. هذا يمكن أن يساعد المبرمجين على تطوير مهاراتهم وفهم أفضل لطرق الحل الأمثل. بالإضافة إلى ذلك، يساعد التطبيق والممارسة في تحسين مستوى الثقة الذاتية للمبرمجين. عندما يقوم المبرمج بكتابة الشفرة ورؤية النتائج الفعلية لعمله، يكتسب مزيدا من الثقة في مهاراته ويستطيع معالجة بطريقة أفضل للمشكلات التي قد تواجهه في المستقبل. أخيرا، التطبيق والممارسة يساعدان على ضمان عدم النسيان. عندما يكرر المبرمج كتابة الشفرة مرارا وتكرارا، فإنه يتأكد من عدم نسيان الأساسيات والاستمرار في تطبيق المهارات على مدار الوقت. بشكل مجمل، الممارسة والتطبيق هما العنصران الرئيسيان في تعلم البرمجة وتحديد الأساليب الفعالة لتطبيق المفاهيم الأساسية وتحسين مستوى المهارات والثقة الذاتية ومنع النسيان والحفاظ على التحديث. وهذه بعض المصادر التي سوف تفيدك في رحلتك.