اذهب إلى المحتوى

Mustafa Suleiman

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

  • المساهمات

    13209

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

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

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

    365

 نوع المحتوى 

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

البرمجة

التصميم

DevOps

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

العمل الحر

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

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

قصص نجاح

أسئلة وأجوبة

كتب

دورات

كل منشورات العضو Mustafa Suleiman

  1. Mustafa Suleiman
    عنصر <code> في HTML يُستخدم لتحديد قسم من النص كشيفرة برمجية أو شيفرة مرجعية. وفيما يلي بعض النقاط المهمة حول عنصر <code>: يعتبر عنصرًا فارغًا، ويجب استخدامه مع بداية ونهاية تاجات الافتتاح والإغلاق <code></code>. يجب استخدام عنصر <code> فقط لعرض النصوص البرمجية أو الشيفرات المرجعية، وأيضًا لعرض تعليمات المستخدم أو الأكواد القابلة للنسخ. لا يقوم عنصر <code> بتنفيذ أي تنسيق خاص على النص. يتم عادة استخدام CSS لتخصيص تنسيق الشيفرة البرمجية داخل عنصر <code>،مثلاً، تعيين أنواع الخط والألوان والتظليل لتحسين قراءة الشيفرة. وهو يستخدم على نطاق واسع في صفحات الويب لعرض الشيفرة المصدرية أو البرمجية بشكل منسق وواضح، وبإمكانك استخدامه أيضًا في الوثائق التقنية والمدونات التي تتضمن شروحات برمجية لتوضيح الأكواد والأمثلة. مثال: <html> <head> </head> <body> <pre> <code> // يبدأ الكود من هنا #include< iostream> #include< stack> using namespace std; int main() { stack<int> stack1; stack1.push(0); stack1.push(2); stack1.push(5); stack1.push(3); stack1.push(1); } // ينتهي الكود هنا </code> </pre> </body> </html> ولاحظ أنني قمت باستخدام عنصر pre للإحتفاظ بتنسيق النص كما قمت بكتابته وبدون الحاجة إلى كتابة أكواد CSS، وإليك النتيجة: وقد يبدوا الأمر محير بعض الشيء لك فما الفائدة إذا كان عنصر فقط ولا يقوم بأي تسنيق؟ ولكن يُعتبر عنصر <code> جزءًا من HTML الدلالي (Semantic HTML)، وهو مفهوم يهدف إلى استخدام العناصر والوسوم في HTML بطريقة توفر معنى وهيكلية أكثر دقة للمستند. وتستطيع تنسيق الكود من خلال استهداف العنصر.
  2. Mustafa Suleiman
    الوسم (label) في HTML، الوسم (label) يستخدم لإنشاء تسمية لعنصر إدخال (input) معين على الصفحة، ويعمل الوسم (label) على تحسين تجربة المستخدم ويساعد في جعل النماذج (forms) أكثر وضوحًا واستخدامًا. واستخدامه الشائع هو مع عناصر إدخال مثل الخيارات (checkboxes) وأزرار الاختيار (radio buttons) وحقول النص (text fields) وما إلى ذلك. ويعمل الوسم (label) على توفير وصف مقروء بواضح للعنصر المقابل، مما يجعله أكثر فهمًا للمستخدمين. لربط الوسم (label) بعنصر الإدخال (input)، تستخدم الخاصية "for" في الوسم (label) وتحديد قيمتها بنفس قيمة خاصية "id" لعنصر الإدخال المطابق. أي إذا كان لديك عنصر إدخال نصي (text field) مع خاصية "id" تحمل قيمة معينة، فيمكنك ربط الوسم (label) بهذا العنصر عن طريق تحديد قيمة "for" بنفس هذه القيمة ، مما يعني أنه عند النقر فوق الوسم (label)، سيتم تحديد عنصر الإدخال المرتبط به. مثال: <label for="username">اسم المستخدم:</label> <input type="text" id="username" name="username"> قمت بربط الوسم (label) بعنصر الإدخال (input) المطابق باستخدام قيمة "for" التي تكون مطابقة لقيمة خاصية "id" لعنصر الإدخال، وتظهر التسمية "اسم المستخدم:" بجانب عنصر الإدخال، وعند النقر فوقها، يتم تحديد عنصر الإدخال لإدخال اسم المستخدم. الخاصيتين name و id بالنسبة للخاصيتين "name" و "id"، فغالبًا ما يكون لهما قيم متشابهة لأنهما يعملان في سياقات مختلفة: فالخاصية "id" تستخدم لتعريف هوية فريدة لعنصر HTML، وتستطيع استخدام هذا الهوية في الأنماط (CSS) والسكريبتات (JavaScript) للاستهداف العنصر وتنفيذ الإجراءات المطلوبة عليه. أما الخاصية "name" تستخدم بشكل شائع في إرسال البيانات من نموذج HTML إلى الخادم عند تقديم النموذج، حيث يعتبر "name" جزءًا من زوج "اسم/قيمة" (name/value) الذي يتم إرساله إلى الخادم. مثال: لنفترض أن لدينا نموذج HTML بسيط يحتوي على حقل إدخال نصي وزر إرسال، ونريد جمع البيانات المدخلة من المستخدم وإرسالها إلى الخادم، وهنا يمكننا استخدام الخاصية "name" والخاصية "id" بالشكل التالي: <label for="name">الاسم:</label> <input type="text" id="name" name="name"> <button type="submit" name="submit" id="submit">إرسال</button> يوجد حقل إدخال نصي يحمل الخاصية "id" والخاصية "name" بقيمة "name"، بمعنى أنه عندما يتم إرسال النموذج، ستتم إرسال القيمة المدخلة في هذا الحقل تحت اسم "name". بالإضافة إلى ذلك، يوجد زر إرسال يحمل الخاصية "id" والخاصية "name" بقيمة "submit"، وفي حالة النقر على هذا الزر، يمكن استهدافه باستخدام الخاصية "id" في الأنماط (CSS) أو السكريبتات (JavaScript) لتنفيذ إجراءات معينة. وتستطيع قراءة المزيد في موسوعة حسوب، حيث يوجد شرح لجميع عناصر وخواص HTML و CSS: https://wiki.hsoub.com/HTML https://wiki.hsoub.com/CSS وأيضًا يوجد قسم خاص بدروس HTML و CSS في قسم المقالات في أكاديمية حسوب: https://academy.hsoub.com/programming/html/ https://academy.hsoub.com/programming/css/
  3. Mustafa Suleiman
    سأشرح لك بواسطة الكود ليتضح لك الأمر: فالـ Sidebar هو قائمة عمودية توضع على جانب الصفحة، وتستخدم لعرض الروابط أو الأيقونات التي توفر وصولًا سريعًا إلى أجزاء محددة من الموقع، ويتم تصميمها بشكل بسيط وتكون ثابتة أو ثابتة مع خيار لتوسيعها أو طيها عند الحاجة. مثال بسيط باستخدام HTML و CSS لإنشاء Sidebar: <!DOCTYPE html> <html> <head> <style> /* ستايل للسايدبار */ .sidebar { width: 200px; background-color: #f1f1f1; padding: 10px; } /* ستايل لروابط السايدبار */ .sidebar a { display: block; margin-bottom: 10px; text-decoration: none; color: #333; } </style> </head> <body> <div class="sidebar"> <a href="#">الصفحة الرئيسية</a> <a href="#">الملف الشخصي</a> <a href="#">الإعدادات</a> <a href="#">تسجيل الخروج</a> </div> </body> </html> في الكود لدينا عنصر <div> يحمل الصنف (class) "sidebar" يمثل الـ Sidebar. نستخدم CSS لتعيين العرض ولون الخلفية والتباعد الداخلي (padding) للسايدبار، وكذلك لتنسيق روابطه. أما الـ Navbar هو القائمة العلوية للموقع، وفي العادة ما يتم وضعها في أعلى الصفحة وتحتوي على روابط وأزرار للانتقال بين الصفحات الرئيسية للموقع أو الأقسام المختلفة، وقد يتم تصميم الـ Navbar ليكون ثابتًا في الأعلى عند التمرير (sticky) أو ليظهر/يختفي عند الحاجة. مثال: <!DOCTYPE html> <html> <head> <style> /* ستايل للنافبار */ .navbar { background-color: #f1f1f1; overflow: hidden; } /* ستايل لروابط النافبار */ .navbar a { float: left; display: block; color: #333; text-align: center; padding: 14px 16px; text-decoration: none; } </style> </head> <body> <div class="navbar"> <a href="#">الصفحة الرئيسية</a> <a href="#">المقالات</a> <a href="#">المنتدى</a> <a href="#">الاتصال</a> </div> </body> </html> عنصر <div> يحمل الصنف (class) "navbar" يمثل الـ Navbar، ونستخدم CSS لتعيين لون الخلفية وخاصية الـ overflow للنافبار. كما نستخدم CSS أيضًا لتنسيق روابط النافبار وتحديد توضعها بواسطة خاصية الـ float وتحديد التباعد الداخلي (padding) وغيرها من الخصائص. وسأقوم بدمج الكود وإضافة وظيفة لجعل الـ Sidebar قابلة للغلق والفتح، حيث استخدمت لغة الـ JavaScript لتحقيق هذه الوظيفة، وتستطيع يمكنك نسخ كود HTML التالي واختباره في متصفحك: <!DOCTYPE html> <html> <head> <style> /* ستايل النافبار */ .navbar { background-color: #333; overflow: hidden; } /* ستايل روابط النافبار */ .navbar a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; transition: background-color 0.3s ease; } /* ستايل روابط النافبار عند التحويم عليها */ .navbar a:hover { background-color: #ddd; color: #333; } /* ستايل السايدبار */ .sidebar { width: 200px; background-color: #f1f1f1; padding: 10px; transition: width 0.3s ease; position: fixed; height: 100%; overflow-y: auto; z-index: 1; } /* ستايل روابط السايدبار */ .sidebar a { display: block; padding: 12px; text-decoration: none; color: #333; transition: background-color 0.3s ease; } /* ستايل روابط السايدبار عند التحويم عليها */ .sidebar a:hover { background-color: #ddd; color: #333; } /* ستايل زر الفتح/الغلق */ .toggle-btn { display: inline-block; text-align: center; cursor: pointer; margin-bottom: 10px; color: #333; background-color: #eee; padding: 5px; } /* ستايل الصفحة */ .content { margin-left: 250px; padding: 16px; transition: margin-left 0.3s ease; } /* إخفاء القائمة الجانبية */ .sidebar-closed{ display: none } </style> <script> // تعريف وظيفة toggleSidebar() باستخدام ES6 const toggleSidebar = () => { const sidebar = document.getElementById("sidebar"); sidebar.classList.toggle("sidebar-closed"); } </script> </head> <body> <div class="navbar"> <a href="#">الصفحة الرئيسية</a> <a href="#">المقالات</a> <a href="#">المنتدى</a> <a href="#">الاتصال</a> </div> <div id="sidebar" class="sidebar"> <a href="#">الصفحة الرئيسية</a> <a href="#">الملف الشخصي</a> <a href="#">الإعدادات</a> <a href="#">تسجيل الخروج</a> </div> <div id="content" class="content"> <h2>محتوى الصفحة</h2> <p>هذا محتوى الصفحة الرئيسية.</p> <div class="toggle-btn" onclick="toggleSidebar()">زر فتح وإغلاق القائمة الجانبية</div> </div> </body> </html> والنتيجة هي:
  4. Mustafa Suleiman
    1- أولاً عليك بإضافة متغير للتتبع وعرض تقدم التحميل في النافذة الحالية، ولنفترض أن المتغير يسمى progressBar. 2- بعد ذلك في الدالة uploadvideo(), بعد السطر: iStream = getContentResolver().openInputStream(pdffile);، قم بإضافة الكود التالي: int fileLength = iStream.available(); وهذا سيحسب حجم الملف المراد تحميله. 3- في داخل الحلقة while في دالة getBytes(), بعد السطر byteBuffer.write(buffer, 0, len);، قم بإضافة الكود التالي: uploadedBytes += len; int progress = (int) ((uploadedBytes * 100) / fileLength); updateProgressBar(progress); وهو يحسب حجم البيانات المحملة حتى الآن ويحسب التقدم بنسبة مئوية، وتستدعى الدالة updateProgressBar() لتحديث قيمة progress bar بناءً على التقدم. 4- إضافة الدالة updateProgressBar() في النشاط الحالي (activity) لتحديث قيمة progress bar: private void updateProgressBar(int progress) { progressBar.setProgress(progress); } 5- تعديل المكان المناسب في الكود لإنشاء وعرض progress bar، وتستطيع إضافته في أي مكان ترغب فيه. مثلاً ، إضافة الكود التالي في بداية uploadvideo(): progressBar = new ProgressBar(this, null, android.R.attr.progressBarStyleHorizontal); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, 20); progressBar.setLayoutParams(params); progressBar.setProgress(0); progressBar.setMax(100); layout.addView(progressBar); حيث layout هو عنصر من واجهة المستخدم يحتوي على العناصر التي تظهر فيها progress bar، وبإمكانك استبدال layout بعنصر آخر في واجهة المستخدم الخاصة بك. وعليك استيراد المكتبات اللازمة وتعديل الأسماء المطلوبة وفقًا لما تريده في الكود.
  5. Mustafa Suleiman
    الدراسة الصحيحة للدورة، هي كالآتي: 1- دراسة أساسيات HTML وCSS من خلال المسار الأول من دورة تطوير واجهات المستخدم، حيث أن المسار الأول من جميع الدورات متاح لك بشكل مجاني: https://academy.hsoub.com/courses/front-end-web-development/web-development-intro/ وستجد به أيضًا أساسيات JavaScript وأساسيات أساسيات jQuery وبعدها سيتم التطبيق على بناء موقع شخصي بالتقنيات السابقة، وأنصحك بدراسة الأساسيات السابقة قبل تعلم PHP. 2- في دورة PHP عليك بدراسة أساسيات لغة PHP وذلك أمر لا جدال فيه، حيث أن باقي الدورة معتمد بشكل كلي على فهم لكود PHP. 3- تستطيع الإختيار بعد ذلك ما بين تعلم لارافيل ثم متابعة الدورة بالترتيب، أو الإنتقال مباشرًة إلى تعلم وورد بريس ثم العودة لاحقًا لاستكمال باقي الدورة. وتستطيع دراسة الدورة بالشكل المناسب لك ولكن تلك هي الطريقة الصحيحة. وإليك نقاشات حول الدورة ستفيدك بلا شك:
  6. Mustafa Suleiman
    قبل أن أشرح لك أي شيء إذا كان لديك حاسوب بمواصفات منخفضة فلا تفكر في استخدام Visual Studio حيث أنه يستخدم موارد أكبر ولن يعمل بسلاسة لديك. وسأوضح لك الفارق بشكل بسيط. VScode VScode هو محرر نصوص متعدد المنصات يركز على تحرير النصوص وتطوير الويب، ويأتي بواجهة بسيطة ونظيفة ويمكن تخصيصه من خلال تثبيت الامتدادات المختلفة، أي يتطلب تخصيص وتكوين إضافي ليتناسب مع المشروع الذي تعمل عليه. مميزات: خفيف الوزن وسريع في التشغيل. يدعم العديد من لغات البرمجة المستخدمة في تطوير الويب مثل JavaScript وTypeScript وHTML وCSS وغيرها. يوفر مجموعة كبيرة من الامتدادات التي تساعد في تعزيز الإنتاجية وتوفير الوقت. دعم قوي لأدوات التصحيح والتصفيح (debugging) مع إمكانية تكوينها لمختلف البيئات. يوفر إمكانية التعديل على إعدادات المحرر وتخصيصها وفقًا لاحتياجاتك. اللغات المدعومة: JavaScript، TypeScript، HTML، CSS، Python، Java، Ruby، PHP والعديد من لغات البرمجة الأخرى. Visual Studio IDE Visual Studio IDE هو بيئة تطوير متكاملة توفر أدوات تحرير النصوص وتصميم الواجهة والتصحيح وإدارة المشروع، ويدعم العديد من لغات البرمجة وأطر العمل ويوفر وظائف متقدمة مثل الإنشاء التلقائي للكود وإدارة الإصدارات. أي يُعتبر خيارًا مناسبًا للمشاريع الكبيرة والمعقدة التي تتطلب ميزات متقدمة وتكاملًا عميقًا مع الأدوات الخارجية وخدمات السحابة. مميزات: بيئة تطوير متكاملة توفر ميزات متقدمة لإدارة المشروعات وتطوير التطبيقات. يدعم مجموعة واسعة من لغات البرمجة بما في ذلك C#، C++، JavaScript، TypeScript، HTML، CSS والمزيد. يوفر أدوات قوية للتصحيح والتصميم والتجريب. دعم متقدم لتطوير تطبيقات الويب وتطبيقات سطح المكتب وتطبيقات الهاتف المحمول. قدرة على إضافة الامتدادات وتخصيص البيئة حسب الاحتياجات. اللغات المدعومة: C#، C++، JavaScript، TypeScript، HTML، CSS، Python وغيرها. وتستطيع استخدام أي منهما وفقًا لما تفضل، حيث تستطيع توسيع إمكانيات VScode من خلال الامتدادات وتكوينها بشكل مخصص، في حين يوفر Visual Studio IDE بيئة تطوير متكاملة وشاملة لمشاريع البرمجة الكبيرة والمعقدة. ما زلت لم تقرر بعد؟ لماذا يجب أن يكون VS Code هو اختيارك؟ سرعة أداء عالية حيث يعتبر VS Code أسرع بكثير من Visual Studio. يمكن أن يبدأ التشغيل بشكل أسرع مقارنة بالبيئة المتكاملة للتطوير. يمكن لـ VS Code أن يفعل ما يقرب من أي شيء ترغب فيه، على الرغم من أنه تم تصميمه ليكون محرر نصوص، تستطيع تقريبًا استنساخ ما تقوم به بيئة التطوير المتكاملة. يتميز VS Code بتجربة تطوير بسيطة وسلسة، ويتمتع بواجهة بسيطة ويتجنب التعقيدات الزائدة. VS Code هو الخيار الأمثل لتطوير الويب، حيث يوفر دعمًا مع الآلاف من الأدوات والامتدادات المتاحة. لماذا يجب أن يكون Visual Studio هو اختيارك؟ يتمتع Visual Studio بميزات غنية ووظائف واسعة، في معظم الحالات، يلبي Visual Studio متطلبات معظم المطورين بشكل مثالي دون الحاجة إلى الاعتماد على مزيد من الامتدادات أو المكونات الإضافية. يسهل التعاون بين فريق العمل بسهولة باستخدام Visual Studio في عملية التطوير وتصحيح الأخطاء، حيث يمتاز ببسير عمل سلس ومحمل بجميع أنواع الميزات التي قد تحتاجها على المدى الطويل. عندما يتعلق الأمر بتحليل الأكواد الضخمة وتصحيح الأخطاء وتحسين الأداء، فإن Visual Studio هو خيار أفضل بلا شك. يتم استخدام Visual Studio بشكل شائع في صناعة تطوير الألعاب لكونه يتناسب مع المشاريع الضخمة وأيضًا مشاريع .NET و C و C# لكونه يدعمهمها بشكل إفتراضي. لكن عند العمل على مشاريع تستخدم فيها React أو Angular أو غيرهما من إطارات الواجهة الأمامية، فسيصبح VS code هو الخيار الأفضل لكونه يوفر دعم أفضل.
  7. Mustafa Suleiman
    ربما السبب هو العشوائية الموجودة في عملية تدريب النموذج، بمعنى أنه عند تدريب نموذج ذكاء اصطناعي، فغالبًا يتم تطبيق عملية تحسين (optimization) على البيانات المستخدمة للتدريب، مثل تعديل الوزن والمعاملات في النموذج، وبما أن هذه العملية تتضمن عناصر عشوائية، فمن المتوقع أن يكون لها تأثير على النتائج النهائية. وبالتالي حتى عند تدريب نموذج معين على نفس مجموعة البيانات، فمن الوارد الحصول على نتائج مختلفة في كل مرة تقوم فيها بتشغيل الكود بسبب العشوائية الموجودة في عملية التدريب. فإذا كنت ترغب في توحيد النتائج، تستطيع إعطاء البرنامج بذور عشوائية (random seeds) محددة قبل بدء عملية التدريب، مما سيضمن أنه سيتم تطبيق نفس الترتيب العشوائي في كل مرة تقوم فيها بتشغيل الكود، وذلك يضمن استقرار النتائج وتكرارها بشكل متسق.
  8. Mustafa Suleiman
    تلك المسابقات ليست خاصة بمجال الويب أو تطبيقات الهاتف بشكل خاص، بل تكون لحل مشاكل برمجية محددة أو تصميم موقع أو تطبيق لحل مشكلة مجتمعية مثلاً في بعض الأحيان، أو تقديم حلاً مبتكرًا في مجال معين. مثلاً، في Google Code Jam يتم توفير مجموعة من المشاكل البرمجية التي يجب على المشاركين حلها باستخدام البرمجة الفعالة والإبداعية. وفي Microsoft Imagine Cup، يتم تشجيع الطلاب على تطوير تطبيقات مبتكرة لحل المشاكل الاجتماعية والبيئية والتقنية. وإليك بعض الأمثلة على هذه المسابقات بجانب ما تم ذكره: 1- Kaggle Competitions وKaggle هي منصة شهيرة للتنافس والتعلم العميق، وتنظم مسابقات بيانات تتضمن مجموعة متنوعة من التحديات في مجالات مثل الذكاء الاصطناعي وتحليل البيانات. 2- Hash Code مسابقة ينظمها فريق Google للمطورين في أوروبا، وتعتبر تحديًا سنويًا يتم فيه حل مشاكل تقنية معينة. 3- Topcoder تقدم Topcoder منصة لمسابقات البرمجة والتصميم، وتعتبر منصة شهيرة للمنافسة وتحسين المهارات البرمجية. وستجد في بلدك أيضًا مسابقات برمجة محلية تقام تحت إشراف جامعة معينة أو ما شابه. وأيضًا هناك العديد من مسابقات الهاكاثون (Hackathons) المنظمة حول العالم بواسطة مختلف المجتمعات التقنية والشركات، وتستطيع البحث عن حدث Hackathon قريب من منطقتك أو عبر الإنترنت للمشاركة فيه.
  9. Mustafa Suleiman
    الأمر بسيط، لا تستخدم صور مثلاً غير مصرح باستخدامها تجاريًا إلا برخصة وتستطيع تفقد ذلك من مصدر الصورة الأصلي، فإذا كانت مجانية لكن للاستخدام الغير تجاري فذلك يعني أنه يجب شراء رخصة لاستخدامها بشكل تجاري.
  10. Mustafa Suleiman
    هل قمت بتثبيت Android SDK Platform-Tools فأنا لا أراها في الصورة؟
  11. Mustafa Suleiman
    بناءًا على كلامك فسبب التعليق هو أنه هناك ادعاء بأنك قد قمت ببيع سلع أو تصاميم تنتهك حقوق الملكية الفكرية لشخص آخر، وإذا تلقيت رسالة تفيد بتعليق حسابك بسبب انتهاك حقوق النشر، يجب عليك التواصل مع فريق دعم عملاء Etsy لمعرفة التفاصيل الكاملة وما يجب عليك فعله لاستعادة حسابك. وعملية استعادة حسابك تشمل تقديم أدلة تثبت أن منتجاتك لا تنتهك حقوق النشر أو قد تتطلب الاتصال المباشر مع الشخص الذي قدم الشكوى لحل النزاع، وإذا كانت الرسالة مرتبطة بأي انتهاكات أخرى، فقد يكون هناك إجراءات أخرى تحتاج إلى اتخاذها لحل المشكلة. وتستطيع مراسلتهم مرة أخرى من أجل رفع الشكوى الخاص بك لكن لا تكرر الطلب، وانتظر ردهم واسألهم عن الخطوات المطلوبة. وأيضًا تأكد من تفقد البريد في مجلد Spam أو البريد المزعج في إيميلك فقد يكون تم مراستلك ولكن البريد تم إعتباره مزعج. وأيضًا عليك بإزالة المنتجات التي تسببت في المشكلة قبل مراسلتهم، ويجب توفير معلومات كافية عن المشكلة ومعلومات عن حسابك.
  12. Mustafa Suleiman
    متوسط عدد النقرات إلى الظهور لديك منخفض جدًا، عليك بالتدرب على كتابة العنواين بشكل مناسب للمحتوى ومختصر وأيضًا جاذب لزوار الموقع. وكتابة وصف Meta للمقالات لا يقل أهمية عن العنوان حيث يجب كتابة وصف يجذب إنتباه القارئ وأيضًا بدون حشو للكلمات المفتاحية. وأيضًا يجب الإهتمام بسرعة الموقع ومحاولة توفير تجربة مستخدم جيدة وبالمقابل سيقوم جوجل بتحسين ترتيبك على المدى الطويل، وأيضًا حاول توفير معلومات مهمة في بداية المقال لكي تجذب إنتباه القارئ ويبقى في الموقع لفترة، واهتم بكتابة مقالات تريد قرائتها أنت لو وجدتها عند البحث عن أمر ًا ما أي ضع نفسك مكان الزائر وقدم له فائدة. والأمر كله يعتمد على هدفك من الموقع، فإذا كنت مثلاً تريد أن يشتري منك الزائر خدمة فيجب أن يشعر بالثقة تجاهك وأنك توفر خدمة إحترافية. وبخصوص التسويق وتحسين الـ SEO لموقعك فقد تم شرح ذلك بشكل وافي في النقاشات التالية:
  13. Mustafa Suleiman
    المطلوب منك هو إيجاد الفرق بين إجمالي عدد مداخل المدن في الجدول وعدد المدن المميزة (غير المتكررة) في الجدول. حيث LAT_N هو خط العرض الشمالي و LONG_W هو خط الطول الغربي للمحطة الجوية. أي إذا كان هناك ثلاثة سجلات في الجدول بقيم مدن 'New York'، 'New York'، 'Bengalaru'، فإن هناك مدينتين مختلفتين: "New York" و "Bengalaru". ويجب أن يعود الاستعلام بالقيمة 1، لأن العدد الإجمالي للسجلات - عدد الأسماء المدينة المميزة = 3 - 2 = 1. وأنت بحاجة إلى كتابة استعلام SQL يسترد هذا الفرق بين العدد الإجمالي لمداخل المدن وعدد المدن المميزة في الجدول.
  14. Mustafa Suleiman
    أنت الوحيد القادر على تحديد ما تريده، وذلك بالنظر إلى الوظائف المتاحة في سوق العمل لديك، كيف تفعل ذلك؟ تم شرح الأمر في النقاشات التالية بشكل وافر عليك بقرائتها وستتمكن من تحديد المجال الخاص بك، وأنصحك بقرائتها جميعًا ولا تتكاسل وستجيب على الكثير من الأسئلة لديك.
  15. Mustafa Suleiman
    بإمكانك استخدام مكتبة JavaFX في تطبيقات Android، ولكن يجب أن تكون على علم ببعض الأمور المهمة قبل البدء في ذلك. حيث تعتبر JavaFX مكتبة تهدف إلى تطوير واجهات المستخدم (UI) لتطبيقات سطح المكتب، وعلى الرغم من أنها ليست مخصصة بشكل أساسي لتطبيقات Android، إلا أنها ما زالت مفيدة. وللبرمجة في تطبيقات Android، فيستخدم Android Studio وهو الأداة الرسمية، حيث Android Studio هو بيئة تطوير متكاملة (IDE) مخصصة لتطوير تطبيقات Android وتحتوي على الأدوات والتعليمات اللازمة للبدء وتطوير تطبيقات Android بفعالية. وبعد تعلم لغة Java ومفاهيمها الأساسية، تستطيع البدء في تطوير تطبيقات Android باستخدام Android Studio، ويوفر Android Studio الكثير من الأدوات والمكتبات المدمجة التي تجعل تطوير تطبيقات Android أكثر سهولة. وبالنسبة للوقت فأقل وقت في رأي لتعلم أي مهارة جديدة صعبة مثل مهارة البرمجة، فأنت بحاجة إلى 6 أشهر على الأقل، حيث سيحتاج منك الأمر إلى دراسة بشكل يومي والتطبيق على ما تعلمته وإنشاء المشاريع والعودة إلى مراجعة الأساسيات وتكرار التطبيق لتثبيت المعلومات. ومن الأفضل زيادة عدد الساعات إذا كان ذلك متاح لك، فلا تبخل على نفسك بوقت فراغك. وأيضًا هناك أمر آخر عليك الإنتباه إليه وهو الإختيار ما بين Java و kotlink وستجد النقاشات التالية مفيدة في الإجابة على تلك النقطة: ماذا اتعلم java vs Kotlin كوتلن Or جافا؟ البرمجة الهواتف باستخدام كوتلن ام دارت|flutter with Dart VS kotlin قسم مقالات JAVA
  16. Mustafa Suleiman
    لا مشكلة، حاول تجربة تعديل الكود كالتالي في index.js: for (const data of updatedData) { const user = { userName: data[0], }; await User.findOneAndUpdate( { userName: user.userName }, user, { upsert: true } ); } ثم تأكد من أن السمة userName في مخطط user معرفة كفهرس فريد في مجموعة البيانات الخاصة بك في MongoDB، من خلال إضافة الخاصية index: { unique: true } إلى تعريف السمة userName في ملف user.js كما يلي: const userSchema = new mongoose.Schema({ userName: { type: String, unique: true, required: true, index: { unique: true }, // تعريف الفهرس الفريد }, }); وعليك بإعادة تشغيل الخادم لتطبيق التغييرات. وإذا استمرت المشكلة، أنصحك بقراءة المستند الرسمي، وهو يوفر مثال عن كيفية فعل ذلك من خلال الرابط التالي: https://developers.google.com/sheets/api/guides/values وهناك أيضًا Batch update: https://developers.google.com/sheets/api/guides/batchupdate وبناءًا على المستند الرسمي لتحديث القيم في ورقة جوجل بناءً على الوثائق الرسمية لواجهة برمجة التطبيقات Google Sheets API، يجب تعديل الكود في ملف index.js كما يلي: // ... async function googleSheets() { const auth = new google.auth.GoogleAuth({ keyFile: "credentials.json", scopes: "https://www.googleapis.com/auth/spreadsheets" }); // إنشاء العميل const client = await auth.getClient(); const googleSheets = google.sheets({ version: "v4", auth: client }); const spreadsheetId = process.env.SPREADSHEETS_ID; const range = "Sheet1!A2:B"; // تحديد النطاق الذي ترغب في تحديثه // جلب البيانات الحالية const getRows = await googleSheets.spreadsheets.values.get({ spreadsheetId, range, }); const currentData = getRows.data.values; // تعديل البيانات const updatedData = currentData.map((row) => { // قم بتطبيق المنطق الخاص بك هنا لتحديث البيانات const updatedValue = "New Value"; // القيمة المحدثة return [row[0], updatedValue]; // قم بتعديل العمود الثاني فقط، يمكنك تعديله وفقًا لاحتياجاتك }); // تحديث القيم في الورقة await googleSheets.spreadsheets.values.update({ spreadsheetId, range, valueInputOption: "USER_ENTERED", resource: { values: updatedData, }, }); } // ... googleSheets(); // تعليق السطر السابق: //setInterval( googleSheets, intervalTime); // ... وبإمكانك تعديل الجزء updatedData.map() في الكود وتطبيق المنطق الخاص بك لتحديث البيانات وفقًا لاحتياجات، وتستخدم القيمة المحدثة في السطر const updatedValue = "New Value"; كقيمة جديدة للعمود الثاني، وتستطيع تغيير هذه القيمة وفقًا لما تريده. وستقوم الوظيفة googleSheets() بجلب البيانات الحالية من ورقة جوجل، ثم تقوم بتطبيق المنطق الخاص بك لتحديث القيم، وأخيرًا تقوم بتحديث البيانات في ورقة جوجل.
  17. Mustafa Suleiman
    تفقدت الكود وأنت تستخدم دالة findOneAndUpdate من Mongoose لتحديث البيانات في MongoDB، ولكن السمة userName في مخطط user لديك هي المفتاح الرئيسي والفريد، وهذا هو السبب في أنه عند تحديث قيمة userName لمستند موجود بالفعل، يتم إنشاء وثيقة جديدة بدلاً من تحديث الوثيقة الحالية. عليك باستخدام الدالة findOneAndUpdate بطريقة معينة ملف index.js على النحو التالي: // ... for (const data of updatedData) { const user = { userName: data[0], }; await User.findOneAndUpdate( { userName: user.userName }, { $set: user }, { upsert: true } ); } // ... من خلال إضافة $set في الكائن الثاني لدالة findOneAndUpdate، ستقوم بتحديث الوثيقة الموجودة بدلاً من إنشاء وثيقة جديدة.
  18. Mustafa Suleiman
    الطريقة الأولى: استخدام API في حالة استخدام API في Django، تستطيع استخدام وحدة التحكم في الاستعلامات QuerySet لإجراء عمليات المقارنة والعمليات المنطقية، والوحدة الأساسية هي filter() التي تسمح لك بتطبيق عمليات المقارنة والعمليات المنطقية. إليك مثال يوضح ذلك: from django.shortcuts import render from django.http import JsonResponse from .models import MyModel def api_view(request): # عملية مقارنة بين حقلين queryset = MyModel.objects.filter(field1__gt=10, field2__lt=20) # عملية منطقية queryset = queryset.filter(field3=True) | queryset.filter(field4=False) # إرجاع النتائج كـ JSON data = list(queryset.values()) return JsonResponse(data, safe=False) تستدعى filter() مرتين لتطبيق عمليتي المقارنة على حقلين مختلفين (field1 و field2)، ثم دمجهما باستخدام المشغل | لتطبيق عملية المنطقية (OR) بينهما، ويتم استرداد النتائج كـ JSON باستخدام JsonResponse(). الطريقة الثانية: استخدام موقع ويب عادي في حالة استخدام موقع ويب عادي في Django، بإمكانك استخدام عمليات المقارنة والعمليات المنطقية في عمليات البحث والتصفية في العرض (view) الخاص بك. مثال: from django.shortcuts import render from .models import MyModel def web_view(request): # عملية مقارنة بين حقلين queryset = MyModel.objects.filter(field1__gt=10, field2__lt=20) # عملية منطقية queryset = queryset.filter(field3=True) | queryset.filter(field4=False) # إرسال النتائج إلى القالب للعرض context = {'data': queryset} return render(request, 'template.html', context) استدعيت filter() بنفس الطريقة لتطبيق عمليات المقارنة والعمليات المنطقية على الحقول، ومن ثم تمرير النتائج إلى القالب template.html للعرض. ولاحظ أنك تستطيع استخدام المشغلات المناسبة مثل gt (أكبر من)، lt (أقل من)، gte (أكبر من أو يساوي)، lte (أقل من أو يساوي)، exact (مطابقة تمامًا)، contains (يحتوي)، startswith (يبدأ بـ)، endswith (ينتهي بـ)، والعديد من المشغلات الأخرى حسب احتياجاتك.
  19. Mustafa Suleiman
    عليك أولاً إنشاء ملف PHP جديد بالامتداد .php، مثلاً patients.php، وتضمين ملف الاتصال بقاعدة البيانات الخاصة بك في بداية الملف، بعد ذلك تغيير معلومات الاتصال بالمستضيف وقاعدة البيانات واسم المستخدم وكلمة المرور بمعلومات الاتصال الصحيحة: <?php $host = 'localhost'; $db = 'database_name'; $user = 'username'; $password = 'password'; $connection = new mysqli($host, $user, $password, $db); if ($connection->connect_error) { die('Connection failed: ' . $connection->connect_error); } ?> الآن نأتي لخطوة كتابة استعلام SQL لاسترداد أسماء المرضى المسجلين عند الطبيب المعين، ويجب عليك استبدال doctor_id بالمعرف الخاص بالطبيب في جدول المرضى: <?php $doctor_id = 1; // قم بتغييره بمعرف الطبيب المعين $query = "SELECT name FROM patients WHERE doctor_id = $doctor_id"; $result = $connection->query($query); ?> أخيرً تضمين ملف HTML الذي يحتوي على الهيكل الأساسي لصفحتك، ووضع الكود التالي بعد تضمين ملف الاتصال بقاعدة البيانات: <?php // الاستعلام واسترداد النتائج // يتم وضعها هنا ?> <!DOCTYPE html> <html> <head> <title>قائمة المرضى</title> </head> <body> <h1>قائمة المرضى</h1> <table> <thead> <tr> <th>الاسم</th> </tr> </thead> <tbody> <?php while ($row = $result->fetch_assoc()) { ?> <tr> <td><?php echo $row['name']; ?></td> </tr> <?php } ?> </tbody> </table> </body> </html> <?php $connection->close(); ?> استخدمت العلامة <?php ... ?> لتضمين الكود الخاص بلغة PHP داخل صفحة HTML، والاستعلام SQL يتم تنفيذه واسترداد النتائج في الجزء المشار إليه في التعليق "الاستعلام واسترداد النتائج". وعليك بتغيير قيمة doctor_id إلى المعرف الصحيح للطبيب المعين.
  20. Mustafa Suleiman
    للتوضيح، المشكلة لديك هي رسالة الخطأ Android SDK file not found: adb وتظهر لديك بالشكل التالي: Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 2.5.3, on Microsoft Windows [Version 10.0.22000.318], locale en-US) [!] Android toolchain - develop for Android devices (Android SDK version 31.0.0) ✗ Android SDK file not found: adb. [✓] Chrome - develop for the web [✓] Visual Studio - develop for Windows (Visual Studio Community 2019 16.11.0) [✓] Android Studio (version 2020.3) [✓] VS Code (version 1.62.3) [✓] Connected device (3 available) ولحل تلك المشكلة عليك بالخطوات التالية: 1- توجه إلى SDK manage في Android Studio، كما بالصورة: أو من الزر التالي: وعليك بالتأكد من أنك قمت بتثبيت Android SDK Platform-Tools وستجدها أسفل تبويب SDK Tools كما بالصورة: أي عليك تفعيل ذلك الخيار، وأيضًا تفعيل خيار Android SDK Command-line Tools كما بالصورة التالية: وفي النهاية اضغط على Ok ثم قم بتشغيل flutter doctor مرة أخرى.
  21. Mustafa Suleiman
    ما المشكلة بالكود أو المطلوب تنفيذه أرجو توضيح السؤال؟
  22. Mustafa Suleiman
    بالإضافة إلى ما تم ذكره، عليك أن تتعلم المفاهيم الأساسية لتعلم الآلة. يشمل ذلك فهم ماهية النماذج والخوارزميات والتقنيات المستخدمة في المعالجة الإحصائية والتعلم العميق. وتستطيع البدء بقراءة الكتب المتخصصة في هذا المجال مثل "Hands-On Machine Learning with Scikit-Learn and TensorFlow" و "Pattern Recognition and Machine Learning" و "Deep Learning" لاكتساب الفهم العميق لهذه المفاهيم. والمجال يحتاج منك إلى تعلم الإنجليزية بشكل جيد حيث أن جميع المصادر والشروحات هي بالإنجليزية. بعد ذلك عليك بتعلم استخدام الأدوات والمكتبات المستخدمة في تعلم الآلة مثل TensorFlow وKeras وScikit-learn، وتلك المكتبات توفر واجهات برمجة التطبيقات (APIs) التي تسهل تنفيذ الخوارزميات وتجربتها، وبإمكانك البدء بتطبيق أمثلة الشفرة الموجودة في وثائق هذه المكتبات لفهم كيفية استخدامها. وإليك بعض المصادر التي ستفيدك: Coursera: يقدم دورات مجانية ومدفوعة في مجال الذكاء الاصطناعي وتعلم الآلة بواسطة جامعات عالمية مرموقة. edX: منصة أخرى للتعلم عبر الإنترنت توفر مجموعة واسعة من الدورات في الذكاء الاصطناعي وتعلم الآلة. Stanford University's CS229: هذه الدورة المسجلة بجامعة ستانفورد تغطي مفاهيم تعلم الآلة بشكل عميق ومفصل. TensorFlow: TensorFlow هي إطار عمل مشهور لتعلم الآلة والذكاء الاصطناعي، ويتوفر لديهم موقع وثائق شاملة ومنتدى مجتمع نشط للمساعدة وتوجيه المطورين. Kaggle: منصة تنافسية ومجتمع لعلم البيانات وتعلم الآلة، وتوفر مسابقات ومجموعات بيانات ونقاشات تقنية. Medium وTowards Data Science: يحتوي موقع Medium على العديد من المقالات والمدونات المتخصصة في تعلم الآلة والذكاء الاصطناعي، ويمكنك استعراض هذه المواقع للحصول على محتوى قيم. بودكاست وقنوات YouTube: هناك العديد من البودكاست والقنوات على YouTube التي تغطي مواضيع تعلم الآلة والذكاء الاصطناعي، بعض الأمثلة هي "Lex Fridman Podcast" و "Two Minute Papers" و "Sentdex" و "3Blue1Brown". Fast.ai : هي منصة تعليمية تقدم دورات عبر الإنترنت في مجال التعلم العميق وتطبيقاتها، وتتميز بتوفير مسارات تعلم سريعة ومناسبة للمبتدئين وتشجيع التعلم العملي والتطبيقات العملية. PyTorch: هو إطار عمل شهير لتعلم الآلة والذكاء الاصطناعي. يتميز بقوة ومرونة في تصميم النماذج وتطويرها، ويوفر واجهة سهلة الاستخدام لتنفيذ الخوارزميات والتعامل مع البيانات. AI for Everyone : دورة تدريبية تقدمها شركة Coursera ويُقدمها Andrew Ng، الذي يعتبر من أبرز الشخصيات في مجال التعلم الآلي، وتستهدف هذه الدورة الجمهور غير المتخصص في مجال البرمجة أو التقنية، وتهدف إلى تعريفهم بمفاهيم الذكاء الاصطناعي وتطبيقاتها في العالم الحقيقي.
  23. Mustafa Suleiman
    الكود الذي كتبته لا يعمل بسبب بعض الأخطاء النحوية والترتيبية: في السطر الأول، يجب أن تنتهي الجملة بعلامة النقطة المنقوطة (:) بدلاً من الفاصلة (،). في السطر الثاني، لا توجد أي تعليمة طباعة محددة. في السطر الثالث، يجب أن تضيف الفراغات اللازمة قبل كلمة for وفي بداية السطر، وأيضًا استخدام علامة الترتيب العكسي (<) في نطاق range() لأن الحلقة تحتاج إلى القيم من 1 إلى 5 فقط (للطباعة من 1 إلى 5 نجوم). في السطر الرابع، يجب أن تزود الجملة المطبوعة (print()) بالجملة الذاتية (i) بدلاً من الفاصلة. في السطر الخامس، عليك أن تضيف الفراغات اللازمة قبل كلمة print(). وهنا الكود الصحيح لطباعة الشكل المطلوب في لغة Python: for i in range(1, 6): for j in range(i): print("*", end=" ") print() عليك بتعديل الكود كما هو موضح، وهو يقوم بتكرار الطباعة لمجموعة من النجوم بناءً على قيمة المتغير i. في الدورة الأولى ستطبع نجمة واحدة، الدورة الثانية ستطبع نجمتين، وهكذا حتى الدورة الخامسة التي ستطبع خمس نجوم. وإذا قمت بتشغيل الكود، ستحصل على النتيجة التالية: * * * * * * * * * * * * * * *
  24. Mustafa Suleiman
    في البداية ذلك أمر طبيعي جدًا، لكن عليك بمعرفة الطريقة الصحيحة، وهي مشاهدة 4 فيديوهات مثلاً لو كانت صغيرة ثم التطبيق عليها، أم لو كان الفيديو كبير فعليك بمشاهدة نصفه ثم التطبيق بمفردك ثم إكمال الفيديو، ثم إعادة التطبيق مرة أخرى من البداية بمفردك. والأمر يبدوا ممل ولديك إحساس يدفعك لضرورة الإنتهاء من الدورة، لكن لا تستمع له فأنت من ستعاني، والوقت الذي تظن أنك تهدره هو من سيجنبك العودة بشكل متكرر للدراسة من جديد. أنت بحاجة إلى التكرار والتكرار هنا لا أقصد مشاهدة الفيديو أكثر من مرة، بل مرتين كافية جدًا ثم التطبيق أكثر من مرة لو احتجت إلى ذلك حتى تفهم الكود الذي تكتبه وعليك بالتغيير قليلاً أو إنشاء مشروع مختلف بنفس الفكرة مثلاً وهكذا لتجبر نفسك على التعلم وعلى تجربة أشياء جديدة ولا تخف من ذلك الجميع مر بنفس التجربة، الفارق هو من يجتهد ويصبر بشكل أكبر ولمدة أطول، لذلك تجد القليل يتحمل تجربة تعلم البرمجة. ولا مشكلة بالعودة كل فترة للمراجعة وتثبيت ما قمت بدراسته سواء بمشاهدة الفيديو أو كتابة الكود، فالتعلم عملية تكرارية على فترات متباعدة، وأنت لسة آلة بل بحاجة إلى المراجعة على فترات متباعدة والأهم هو كتابة الكود. وأنصحك بقراءة النقاشات التالية:
  25. Mustafa Suleiman
    هذا الكلام غير صحيح بالمرة، عليك أولاً بتحديد المجال الذي تريد العمل به بناءًا على المطلوب في سوق العمل لديك أي تستطيع العمل به بخبرة سنة أو مستوى Fresh، ولديك مثلاً مجال تطوير الويب أو تطبيقات الهاتف أو .NET فإذا اخترت مجال الويب فدائمًا ما أن تصبح Full-stack في البداية وذلك سيتيح لك الكثير من الفرص ثم التخصص في الواجهة الخلفية أو الأمامية بعد سنتين إلى ثلاث من الخبرة العملية. وإذا كان لديك الوقت، فأنصحك بتعلم أساسيات البرمجة عن طريق C++ ثم تعلم أساسيات بايثون بشكل سريع، ثم دراسة المسار الخاص بالمجال الذي اخترته. وإذا كان مستواك في علوم الحاسب ضعيف نسبيًا، فأنصحك بتعلم الأساسيات من خلال بايثون. وقد تم النقاش بالتفصيل عن سؤالك في النقاشات التالية:
×
×
  • أضف...