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

Mustafa Suleiman

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

  • المساهمات

    9975

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

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

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

    302

 نوع المحتوى 

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

البرمجة

التصميم

DevOps

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

العمل الحر

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

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

قصص نجاح

أسئلة وأجوبة

كتب

دورات

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

  1. Mustafa Suleiman
    عند بناء صفحات الويب باستخدام HTML، يُستخدم عنصر <div> كثيرًا لتحديد وتجميع مجموعات من العناصر المرئية في الصفحة وتنظيمها في بنية منظمة، وتعتبر <div> هي واحدة من عناصر التنسيق الأساسية في HTML ولا تحمل أي معنى خاص بذاته. وتُستخدم عناصر <div> بشكل رئيسي لتقسيم الصفحة إلى أجزاء منطقية، مما يتيح تنظيم المحتوى وتطبيق تنسيقات CSS وتعيين الأنماط والخصائص عليها، وباسطتاعتك استخدام <div> لإنشاء عناصر مثل أطر الصفحة (Layouts)، ومربعات النص، وأزرار، ومجموعات الصور، والقوائم، والأقسام، والفواصل، وغيرها الكثير. حيث يسمح لك عنصر <div> بتحقيق تنظيم وتصميم أفضل للصفحة وسهولة تعديل التنسيقات والأنماط والخصائص الخاصة بالعناصر الموجودة داخله، وأيضًا استخدام CSS وJavaScript لتحقيق تفاعلات وتأثيرات مختلفة على العناصر داخل <div>. ولكن لا تستخدمه بكثرة وحاول استخدام عناصر الـ Semantic HTML بقدر استطاعتك مثل <section> أو <article> أو <header> أو <footer> والتي توفر لك هيكلية ومعنى أكثر وضوحًا للمحتوى. وإليك مثال لاستخدام div وأيضًا استخدام CSS للتنسيق: <!DOCTYPE html> <html> <head> <title>مثال باستخدام عنصر div</title> <style> .container { background-color: lightblue; padding: 20px; } .header { background-color: yellow; padding: 10px; } .content { background-color: white; padding: 10px; } .footer { background-color: lightgray; padding: 10px; } </style> </head> <body> <div class="container"> <div class="header"> <h1>عنوان الصفحة</h1> </div> <div class="content"> <p>محتوى الصفحة يتم وضعه هنا.</p> </div> <div class="footer"> <p>حقوق النشر &copy; 2023</p> </div> </div> </body> </html> فبتعريف عنصر <div> بواسطة الصنف "container" واستخدامه كعنصر يحتوي على عناصر <div> أخرى وتمميزها بكلاسات "header"، "content"، و "footer" من أجل تنسيقها بواسطة CSS. تمكنت من تسيق أجزاء مختلفة من الصفحة وتخصيص كل عنصر <div>، مما يسمح بتقسيم الصفحة إلى أجزاء منفصلة وتنظيمها بشكل مناسب. وأنصحك بقراءة التالي:
  2. Mustafa Suleiman
    تم توضيح الأمر من قبل هنا في النقاشات التالية: وبخصوص تعلم لغة بايثون أم C++ فالأمر يتوقف على مستواك البرمجي ومدى إلمامك بعلوم الحساب وخبراتك السابقة، حيث أن البعض سيجد أن C++ صعبة ومعقدة وقد يحبط في بداية رحلة تعلم البرمجة. لذلك بايثون ستجدها في أغلب الدورات الخاصة بتعلم أساسيات البرمجة، لكون C++ تتطلب شخص متخصص يدرس في كلية معلومات وحاسبات مثلاً، أو لديه خبرات سابقة تؤهله لتعلمها، أو لديه قدرة استيعابية جيدة فهناك فروق فردية بلا شك، لكن إذا أردت من شخص ليس دراية بالحاسب أو علوم الحاسب أو الويب أو حتى استخدام الويندوز مثلاً بشكل متقدم أن يتعلم C++ فكيف ذلك؟ والأمر يستحق المحاولة، أو اقتصر على نفسك الطريق وتعلم بايثون، فستحتاج بايثون في مجال الذكاء الاصطناعي أكثر من أي لغة أخرى.
  3. Mustafa Suleiman
    أنت قمت برفع ملف HTML فقط، ويجب رفع مجلد المشروع لديك بالكامل لتفقد المشكلة، اضغط المجلد من الخارج ثم ارفعه هنا. وبخصوص الـ Padding والـ Margin حاول استخدام خاصية box-sizing بقيمة border-box لجميع العناصر كالتالي: * { box-sizing: border-box; } وبخصوص توسيط النص في المنتصف بشكل عمودي وأفقي أيضًا في CSS، فهناك عدة طرق ومنها: 1- توسيط النص باستخدام Flexbox .container { display: flex; justify-content: center; /* يُوسِّط العناصر عموديًا */ align-items: center; /* يُوسِّط العناصر أفقيًا */ height: 100vh; /* يُحدد ارتفاع العنصر الأب بناءً على ارتفاع الشاشة */ } .text { text-align: center; /* يُوسِّط النص أفقيًا */ } 2- توسيط النص باستخدام Grid .container { display: grid; place-items: center; /* يُوسِّط العناصر عموديًا وأفقيًا */ height: 100vh; /* يُحدد ارتفاع العنصر الأب بناءً على ارتفاع الشاشة */ } .text { text-align: center; /* يُوسِّط النص أفقيًا */ } 3- استخدام خاصية line-height .container { display: flex; justify-content: center; align-items: center; height: 300px; /* ارتفاع العنصر الأب */ border: 1px solid black; /* توضيح الحدود للعرض */ } .text { line-height: 300px; /* ارتفاع العنصر الأب */ text-align: center; } والطريقة الثالثة بحاجة إلى بعض الشرح حيث استخدمت display: flex لعنصر الأب، وذلك لتطبيق تخطيط Flexbox. ثم استخدمت justify-content: center و align-items: center لوسط العنصر عموديًا وأفقيًا داخل العنصر الأب. ثم تحديد line-height: 300px لتعيين ارتفاع الخط بقيمة مساوية لارتفاع العنصر الأب، مما يوسط النص داخله عموديًا. وأخيرًا، تم استخدام text-align: center لوسط النص أفقيًا داخل العنصر الأب.
  4. Mustafa Suleiman
    بخصوص أكواد sass جرب تعديل الكود بالشكل التالي: .card-news-details { display: flex; justify-content: center; align-items: center; padding: 0 !important; position: relative; left: -50%; /* الوضعية الابتدائية: يتم نقلها إلى اليسار */ opacity: 1; transition: left 1s, opacity 1s; &.show { left: 0; /* الوضعية النهائية: يتم نقلها إلى الوسط */ opacity: 1; } .card-news-card { width: 80%; position: relative; .img-active_profile { width: 100%; /* العرض الابتدائي: 100٪ */ height: 600px; border-top-left-radius: $radius; border-bottom-left-radius: $radius; max-height: 600px; object-fit: cover; box-shadow: 5px 0px 5px rgba(0, 0, 0, 0.408); opacity: 1; transition: width 1s, opacity 1s; &.show_img { width: 40%; /* العرض النهائي: 40٪ */ opacity: 1; } } .title_slide-full { position: absolute; top: 15px; left: 45%; font-size: 45px; opacity: 0; /* مخفية في البداية */ transition: all 2s; &.show_title { opacity: 1; /* إظهار العنوان */ } } } } والكود يعمل على جعل الصورة الكبيرة المرغوبة تنتقل من -50٪ left إلى left: 0٪، وعندما تكون الصورة في الوضعية left: 0٪، ستصبح عرض الصورة 100٪ والعنوان مخفيًا، ثم عندما تتقلص الصورة إلى عرض 40٪، سيظهر العنوان.
  5. Mustafa Suleiman
    ليست بديهية حيث يمكن إنشاء مشاريع ويب بلغات أخرى، بل عليك ذكر كل اللغات التي استخدمتها في المشروع، وبخصوص المكتبات مثل Bootstrap وAxios فاذكرهم لا مشكلة في ذلك، وتستطيع ذكر كافة المكتبات التي استخدمتها، لكن من الأفضل ذكر الهام منها والأساسي بالنسبة للمشروع. وبالنسبة للـ API فهل من سبب يدفعك لذكر ذلك؟ تستطيع كتابة وصف للمشروع في README وسيتم فهم أن المشروع يعتمد على API في تنفيذ أمر معين، وذكر أنك تستخدم Axios يدل بالتبعية على أن المشروع يستخدم API، وإذا كنت تقصد أنه يتم الإعتماد على API خارجي لتوفير المعلومات فاذكر ذلك. ببساطة ملف README.md يوضح وصف للمشروع بشكل مختصر وواضح، بحيث يفهم القارئ وظيفة المشروع الخاص بك، ثم يعرض المميزات Features ثم صورة توضيحية لو أمكن Screenshots، ثم الجزء الخاص بشرح إعداد المشروع، ثم الجزء الخاص بشرح طريقة استخدام المشروع إن دعت الحاجة إلى ذلك، ثم الجزء الخاصة بالتقنيات المستخدمة Tech Used. وهناك العديد من المواقع التي توفر عليك كتابة ملف readme وقد تم توضيحها هنا:
  6. Mustafa Suleiman
    تم شرح الأمر في النقاشات والدروس التالية:
  7. Mustafa Suleiman
    جميع تلك المسميات تشير إلى شيء واحد وهي واجهة منفذ الأوامر أو الطرفية، وهي تلك الشاشة السوداء التي يتم فيها تنفيذ أوامر لفعل شيء ما، مثل تثبيت مكتبة أو إنشاء مجلد أو تشغيل كود وخلافه. وهي هامة جدًا، حيث سيتعين عليك التعامل معها في مجال البرمجة، وتستطيع تعلم الأساسيات الخاصة بها من هنا: وفي نظام الويندوز أنصحك باستخدام CMD فهى أسهل بالتعامل، وستجد أغلب الشروحات يتم فيها استخدام تلك الطرفية، بينما واجهة أوامر PowerShell أكثر تعقيدًا ومتقدمة بالنسبة للبعض، فبعض الأوامر مختلفة بها عن CMD أي عن المعتاد والشائع على الإنترنت، وسيتعين عليك البحث لمعرفة كيفية تنفيذ نفس الأمر الذي يعمل في CMD ولكن لا يعمل في PowerShell. وأيضًا هناك إعدادات خاصة بالأمان والموثوقية يتعين عليك ضبطها في PowerShell لتسطيع تنفيذ سكريبتات خارجية، وهو أمر بسيط لكن في البداية يبدوا معقد للمبتدأين.
  8. Mustafa Suleiman
    تم توضيح الأمر بشكل كافي، ولكن أنت بحاجة إلى رؤية الأمر بشكل عملي لتستوعبه، وإليك الشرح من خلال أمثلة. ولتوضيح فائدة الـ grid (الشبكة) والـ gap (الفراغات)، انظر إلى الكود التالي المستخدم في تصميم واجهة المستخدم. HTML <div class="container"> <div class="item">عنصر 1</div> <div class="item">عنصر 2</div> <div class="item">عنصر 3</div> <div class="item">عنصر 4</div> <div class="item">عنصر 5</div> <div class="item">عنصر 6</div> </div> CSS .container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .item { background-color: #eaeaea; padding: 20px; text-align: center; } والنتيجة هي: في كود HTML يوجد عناصر ستتم توزيعها باستخدام الشبكة (grid) مع 3 أعمدة (columns)، والفراغ بين العناصر سيكون 20 بكسل (الـ gap). والفوائد التي حققناها باستخدام الـ grid هي: توزيع العناصر بشكل متساوٍا على الأعمدة والصفوف، مع وجود فراغات بحجم 20 بكسل بينها. ستظهر العناصر في صورة شبكة منتظمة ومتساوية الأبعاد، مما يخلق تناغم بصري في التصميم. يمكنك تغيير حجم الشاشة أو تحديد حجم العناصر بناءًا على احتياجاتك، وسيتكيف التصميم تلقائيًا مع الشاشة المستخدمة. وربما يدور في بالك الآن لماذا لم نقم بتنسيق العناصر بشكل عادي بدلاً من استخدام Grid؟ أولاً يمنحك الـ grid قدرًا كبيرًا من التحكم في توزيع العناصر. يمكنك تحديد عدد الأعمدة والصفوف، وتحديد أحجام العناصر والفراغات بينها بشكل محدد، مما يعني أنه يمكنك تنفيذ تصميمات معقدة بسهولة. يسمح لك أيضًا بتعديل توزيع العناصر بناءً على حجم الشاشة وجهاز العرض، وتغيير عدد الأعمدة وأحجام العناصر بناءًا على الاحتياجات المحددة لكل حجم شاشة، مما يعني أن واجهتك ستكون متجاوبة وتعمل بشكل جيد على مختلف الأجهزة. ودعنا نقارن الكود السابق الذي يستخدم الـ grid مع كود يستخدم تنسيقات CSS العادية ولا يعتمد على flex أو Grid. الكود باستخدام تنسيقات CSS العادية لتحقيق نفس الشكل والتنسيق: <table class="container"> <tr> <td class="item">عنصر 1</td> <td class="item">عنصر 2</td> <td class="item">عنصر 3</td> </tr> <tr> <td class="item">عنصر 4</td> <td class="item">عنصر 5</td> <td class="item">عنصر 6</td> </tr> </table> <style> .container { border-collapse: separate; border-spacing: 20px; } .item { background-color: #eaeaea; padding: 20px; text-align: center; } </style> في الكود الذي يستخدم الـ grid، نستخدم العنصر <div> كعناصر واجهة المستخدم ونعمل على تحقيق توزيعها بواسطة الـ grid، أما في الكود الذي يستخدم تنسيقات الجدول، نستخدم العناصر <table>, <tr>, و <td> لتحقيق التنسيق المطلوب. لكن هناك فارق كبير جدًا بين استخدام Grid وFlex في إنشاء الواجهة وتقسميم عناصر الصفحة، وبين استخدام الجدول وخصائص CSS الأخرى. حيث أنه لديك تحكم كامل من خلال Grid وFlex بينما في الجدول مثلاً لديك إمكانيات محدودة جدًا ومعقدة في الاستخدام. وبخصوص الـ gap فالصورة بألف كلمة، وستفهم ما أقصده من خلال الصورة التالية: فكما ترى يوجد مساحة بحجم 10 بكسل، في الصفوف والأعمدة، فجيب الإنتباه إلى أن gap:10px هي إختصار للكود التالي: row-gap: 10px; column-gap: 10px; فبإمكانك تخصيص الفراغ بين الأعمدة والصفوف بشكل منفصل لكل منهما بدلاً من استخدام gap. وأيضًا يجب عليك الإنتباه إلى الفرق بين Flex وGrid حيث أن Flex يستخدم لإنشاء واجهة أحادية البعد أي على شكل رأسي أو أفقي فقط، بينما Grid نستطيع إنشاء شبكة متعددة الأبعاد بداخله كالتالي: وأنصحك باستخدام الأداة التالية أثناء تعلم Grid وFlex في البداية لكي تفهم الخواص الخاصة بهم بشكل أسهل حتى تعتاد عليها: https://flexbox.malven.co/ https://grid.malven.co/
  9. Mustafa Suleiman
    مكتبة Joi تعتبر سهلة الاستخدام وتوفر واجهة برمجة تطبيق (API) بسيطة وواضحة، وهي خيار جيد إذا كنت معتاد على استخدامها. لكن هنا مكتبة Yup أيضًا توفر واجهة برمجة سهلة الاستخدام وتحقق من البيانات بشكل مشابه لـ Joi، وإذا كنت تعمل على تطبيق React في نفس الوقت، فالأفضل استخدام Yup فهى أكثر تكاملاً مع بيئة العمل تلك. الفرق الرئيسي هو أن Joi هي مكتبة مستقلة تمامًا وتستخدم بشكل شائع في تطبيقات Node.js، في حين أن Yup هي مكتبة تستخدم على نطاق واسع في تطبيقات React وتدعم أيضًا استخدامها في Node.js. فإذا كنت تعمل على تطبيق React، فقد يكون استخدام Yup أكثر تكاملاً وسهولة مع بيئة العمل تلك، حيث أنها تتكامل بشكل أفضل مع نظام التحكم في النماذج الخاص بـ React وتوفر تعبيرًا أكثر سهولة عند تحديد قواعد التحقق. وإليك مثال: import React, { useState } from 'react'; import { useFormik } from 'formik'; import * as Yup from 'yup'; // تعريف مخطط التحقق باستخدام Yup const validationSchema = Yup.object().shape({ name: Yup.string().required('يرجى إدخال الاسم'), email: Yup.string().email('صيغة البريد الإلكتروني غير صحيحة').required('يرجى إدخال البريد الإلكتروني'), password: Yup.string().min(6, 'يجب أن تحتوي كلمة المرور على الأقل على 6 أحرف').required('يرجى إدخال كلمة المرور'), }); const MyForm = () => { const formik = useFormik({ initialValues: { name: '', email: '', password: '', }, validationSchema: validationSchema, onSubmit: (values) => { // إجراء عند تقديم النموذج بنجاح console.log(values); }, }); return ( <form onSubmit={formik.handleSubmit}> <div> <label htmlFor="name">الاسم:</label> <input type="text" id="name" name="name" onChange={formik.handleChange} onBlur={formik.handleBlur} value={formik.values.name} /> {formik.touched.name && formik.errors.name && <div>{formik.errors.name}</div>} </div> <div> <label htmlFor="email">البريد الإلكتروني:</label> <input type="email" id="email" name="email" onChange={formik.handleChange} onBlur={formik.handleBlur} value={formik.values.email} /> {formik.touched.email && formik.errors.email && <div>{formik.errors.email}</div>} </div> <div> <label htmlFor="password">كلمة المرور:</label> <input type="password" id="password" name="password" onChange={formik.handleChange} onBlur={formik.handleBlur} value={formik.values.password} /> {formik.touched.password && formik.errors.password && <div>{formik.errors.password}</div>} </div> <button type="submit">تأكيد</button> </form> ); }; export default MyForm; الكود يقوم باستخدام Yup لتعريف مخطط التحقق (validationSchema) الذي يحتوي على قواعد التحقق من صحة البيانات، ويطبق ذلك المخطط على النموذج الذي تم تعريفه باستخدام useFormik، وعرض الأخطاء في حالة عدم صحة البيانات في الوقت الفعلي، و تنفيذ الإجراء المحدد عند تقديم النموذج بنجاح. وإذا أردت الإطلاع على مكتبات أخرى يوجد Ajv وهي مكتبة تحقق من بيانات JSON تدعم معيار JSON Schema، توفر مرونة كبيرة في تحديد قواعد التحقق والتصفية وتدعم تخصيصات متقدمة.
  10. Mustafa Suleiman
    أنت تقصد الدوال صحيح؟ سأوضح لك كل تابع مع مثال بسيط لتفهم بشكل أوضح: 1- print() تستخدم لطباعة النصوص أو القيم على الشاشة. print("Hello, World!") 2- input() تستخدم للحصول على إدخال المستخدم من خلال لوحة المفاتيح. name = input("Please enter your name: ") print("Hello, " + name) 3- len() تستخدم للحصول على طول أو عدد العناصر في تسلسل ما (سلسلة نصية أو قائمة). name = "John Doe" print(len(name)) # ستطبع القيمة 8 4- range() تستخدم لإنشاء تسلسل من الأرقام بناءً على البداية والنهاية والخطوة. for i in range(1, 10, 2): print(i) 5- str(), int(), float() تستخدم لتحويل القيم من نوع إلى نوع آخر. num_str = "10" num_int = int(num_str) num_float = float(num_str) 6- list(), tuple(), dict(), set() تستخدم لإنشاء مجموعات بيانات مختلفة. my_list = list(range(1, 5)) my_tuple = tuple(('apple', 'banana', 'cherry')) my_dict = dict(name='John', age=30) my_set = set([1, 2, 3, 3, 4]) 7- max(), min() تستخدم للعثور على القيمة الأكبر والأصغر في تسلسل من الأرقام. numbers = [5, 2, 9, 1, 7] max_num = max(numbers) min_num = min(numbers) 8- abs() تستخدم للحصول على قيمة مطلقة لرقم. num = -10 abs_num = abs(num) 9- round() تستخدم لتقريب رقم عشري إلى أقرب رقم صحيح. num = 3.7 rounded_num = round(num) 10- sum() تستخدم لحساب مجموع عناصر التسلسل. numbers = [1, 2, 3, 4, 5] sum_of_numbers = sum(numbers) وهناك العديد من التوابع الأخرى المهمة في Python مثل sorted() لفرز العناصر، zip() لدمج قوائم متعددة معًا، enumerate() للحصول على فهرس وقيمة العناصر في حلقة الإعادة والمزيد. ولكن ما ذكرته لك هو الأساسي ويجب معرفته. وتستطيع رؤية كل الدوال المضمنة في بايثون من خلال موسوعة حسوب . وبخصوص الإمتحان فستجد هنا تفاصيل واضحة للمطلوب منك:
  11. Mustafa Suleiman
    الأمر لا يسير بتلك الطريقة، بل عليك بناء الروابط بشكل طبيعي والصبر وستفوز بذلك على المدى الطويل بدلاً من تحقيق نجاح قصير الأجل، حيث أن خوارزميات جوجل ذكية جدًا، لذلك يجب بناء الروابط الخلفية (الباك لينك) بشكل طبيعي. بمعنى لو أن الموقع في بداياته ولم يمر على إنشائه أكثر من 3 أشهر مثلاً، هل من الطبيعي أن يتم الإشارة إليه في روابط خلفية بعدد 10 روابط يوميًا؟ بالطبع لا، فرابطين أو 3 روابط في الأسبوع الأول أمر مقبول مثلاً، ثم في الأسبوع الثاني زد العدد قليلاً إلى 5 في الأسبوع مثلاً. لكن انتظر، هل يوجد محتوى كافي ليتم الإشارة إلى الموقع، فكما ذكرت خوارزميات جوجل ذكية، فإذا تم الإشارة بعدد روابط كبير ولا يتناسب مع عدد المحتوى وحجم الموقع فسيصبح الأمر غير طبيعي. وأيضًا لا تهتم أبدًا بعدد الروابط، بل اهتم بجودة الروابط الخلفية، حيث أن باك لينك واحد فقط ذو جودة عالية ومن موقع ذو ثقة وترتيب مرتفع ومهتم بنفس مجال موقعك أفضل بمراحل من عشرة روابط من مواقع ضعيفة وليست ضمن مجال موقعك. نصيحتي إليك هي بالصبر في الشهر الأول، والإهتمام ببناء محتوى الموقع بشكل قوي، والنشر على موقع التواصل، ومن الأفضل إنشاء محتوى مرئي حتى لو قصير والإشارة إلى المحتوى في وصف الفيديو. وبعد ذلك قم بالتدرج في الإشارة إلى موقعك وبناء الباك لينكس، وأيضًا لا تقم بالإشارة في نفس الوقت، أي قسم الروابط على أوقات مختلفة وبأشكال مختلفة. ونصيحتي إليك هي بالإهتمام أولاً بصفحة الموقع الرئيسية عن طريق الإشارة إليها بنحو 40 إلى 50 رابط بالتدرج كما أخبرتك وبجودة مرتفعة ما أمكن ذلك، وبذلك سيتم تقوية المحتوى لكامل الموقع. وأيضًا عليك بالتنصل من الروابط الضعيفة التي تشير إلى موقعك فهى تؤثر بالسلب ولا تفرح بالعدد الكبير كما أخبرتك.
  12. Mustafa Suleiman
    عليك باستخدام localStorage لحفظ القيم المدخلة في حقول الإدخال، وذلك بتعديل السكريبت لديك بالشكل التالي: let submit = document.getElementById('submit'); let text = document.getElementById('text'); let password = document.getElementById('password'); // عرض البيانات المحفوظة عند تحميل الصفحة window.onload = function() { let savedText = localStorage.getItem('text'); if (savedText) { text.value = savedText; } let savedPassword = localStorage.getItem('password'); if (savedPassword) { password.value = savedPassword; } }; submit.onclick = function () { if (text.value === 'محمد عماد احمد' && password.value === '10203') { alert('نعم'); // حفظ القيم في localStorage localStorage.setItem('text', text.value); localStorage.setItem('password', password.value); } else { alert('لا'); } let screenWidth = screen.availWidth; if (screenWidth > 1000) { alert('فقط الهواتف المحمولة، من فضلك'); } else { alert('الهاتف المحمول المناسب'); } }; يستخدم localStorage.setItem(key, value) لحفظ القيم في ذاكرة التخزين المحلية للمتصفح. وعند تحميل الصفحة، يستخدم localStorage.getItem(key) لاسترداد القيم المحفوظة وتعيينها في حقول الإدخال، وستظل القيمة محفوظة حتى بعد تحديث الصفحة.
  13. Mustafa Suleiman
    ما تريده هو تحديد قيمة محددة في عنصر select باستخدام الـ selected attribute بشكل ديناميكي في HTML و JavaScript، صحيح؟ 1- أولاً علياسترجاع البيانات المحفوظة مسبقًا من localStorage باستخدام JavaScript. 2- تعيين قيمة المحددة في عنصر select باستخدام خاصية value في JavaScript. إليك مثال: HTML <select id="mySelect"> <option value="value1">قيمة 1</option> <option value="value2">قيمة 2</option> <option value="value3">قيمة 3</option> </select> JavaScript document.addEventListener('DOMContentLoaded', function() { // استرجاع القيمة المحفوظة مسبقًا من localStorage const selectedValue = localStorage.getItem('selectedValue'); // التحقق مما إذا كان هناك قيمة محفوظة if (selectedValue) { // تعيين القيمة المحددة في عنصر select document.getElementById('mySelect').value = selectedValue; } }); ما يحدث هو عند تحميل الصفحة، تسترجع القيمة المحفوظة مسبقًا من localStorage وتعيينها كقيمة محددة في عنصر select. يجب عليك تغيير 'selectedValue' في localStorage.getItem('selectedValue') إلى المفتاح الصحيح الذي تستخدمه لحفظ القيمة في localStorage. تأكد من وضع الجزء الخاص بالتعيين في داخل الدالة التي تنفذها DOMContentLoaded حتى يتم تنفيذ العملية عند تحميل الصفحة بشكل صحيح.
  14. Mustafa Suleiman
    بالطبع، وتستطيع العودة والمراجعة في أي وقت لو احتجت إلى ذلك، وكما أخبرتك بعد أول مشروع نصيحتي إليك بالتطبيق على جافاسكريبت من خلال مشروع من على اليوتيوب، ثم المتابعة في مشروعات الدورة الأخرى، وأيضًا يا حبذا لو قمت بإنشاء موقع بسيط آخر من خلال HTML, CSS, JS وتستطيع البحث على اليوتيوب وستجد الكثير.
  15. Mustafa Suleiman
    أنت تعلمت الأساسيات فقط، وسيتم شرح الكثير من الخواص والتطبيق بشكل عملي من خلال العديد من المشاريع، فالدورة مصممة لطرح الأساسيات بشكل سريع في البداية ثم شرح المزيد والتعمق من خلال المشاريع. لكن نصيحتي إليك هي بألا تبخل على نفسك، لا تكتفي بأي دورة في أي مكان، بل عليك بالبحث وتعلم المزيد من مصادر مختلفة، فإذا رأيت مثلاً أن هناك بعض الأمور الجديدة في مشروع أو شرح على يوتيوب تعلم ذلك وابحث عنه وطبق عليه. وتستطيع الاستزادة من أساسيات جافاسكريبت من خلال المسار الأول من دورة تطوير التطبيقات باستخدام JavaScript، حيث أن المسار الأول من جميع الدورات الأخرى متاح لك بشكل مجاني. وأنصحك بقراءة التالي بتأني وستجد الكثير من الإجابات للأسئلة التي تدور في بالك: وكما أخبرتك من قبل بعد تنفيذ أول مشروع لك في الدورة، قم بالبحث عن مشاريع جافاسكريبت للمبتدأين وطبق عليها ولا تنزعج أو تقلق أبدًا إذا رأيت أشياء جديدة عليك، فذلك هو المطلوب، قم بالبحث والقراءة، أي مثلاً شرح كذا في جافاسكريبت وستجد شروحات على اليوتيوب أو على جوجل. وإذا واجهت مشكلة بعد البحث أو لم تفهم بشكل جيد، لا تتردد في السؤال هنا، ولا تتعجل بإنهاء الدورة بل خذ وقتك وقم بالتطبيق وكتابة الكود بنفسك، ولا تنزعج أيضًا إذا لم تتمكن من التطبيق في البداية حاول قدر استطاعتك ومع الوقت والتكرار ستتحسن بلا شك.
  16. Mustafa Suleiman
    المشكلة ليست في تحميل حزمة Swal أو app.js، إذ أنك تستدعي Swal بشكل صحيح في ملف app.js، والمشكلة الحالية تكمن في طريقة استخدامك لـ Swal في ملف app.blade.php. وعندما تضمن ملف app.js في ملف app.blade.php باستخدام التوجيه الخاص بـ Laravel @vite، فإن محتوى ملف app.js يتم دمجه وتجميعه في ملف واحد للمتصفح. وبالتالي أي متغيرات أو مكتبات معرفة في app.js لن تكون متاحة مباشرة في نطاق الملف app.blade.php. عليك بتعديل ملف app.js بحيث تقوم بتصدير Swal كمتغير عالمي (global variable)، بالشكل التالي: import Swal from 'sweetalert2'; window.Swal = Swal; وبذلك ستصبح مكتبة Swal متاحة في النطاق العالمي، مما يمكنك من استخدامها في ملف app.blade.php بعد تضمين ملف app.js.
  17. Mustafa Suleiman
    تطابق البيانات الذي تقصده هو عملية مقارنة البيانات المخزنة في مصدر معين مع بيانات أخرى للتحقق من مدى تطابقها أو اختلافها، ويعتبر تطابق البيانات أمرًا لا غنى عنه في العديد من المشاريع، سواء في الواجهة الأمامية (Front-end) أو في الخلفية (Back-end)، وفي أغلب الأحوال يتطلب الإعتماد على كلا الجانبين معًا لضمان الدقة والموثوقية. وعندما يتعلق الأمر بتطابق البيانات في الواجهة الأمامية، يكون الهدف الأساسي هو ضمان أن البيانات التي يقدمها المستخدم في النماذج أو الحقول المختلفة متطابقة مع البيانات المخزنة. وبالإمكان حقيق ذلك عن طريق استخدام آليات التحقق والتحقق من الصحة في الواجهة الأمامية، مثل التحقق من الصيغة الصحيحة للبريد الإلكتروني، أو التأكد من تاريخ صحيح، أو المقارنة بين قيمتين للتأكد من تطابقهما، ولكن من الضروري أيضًا تنفيذ تحققات إضافية في الخلفية للتأكد من أن البيانات المدخلة من الواجهة الأمامية تطابق البيانات المخزنة بشكل صحيح. فيما يتعلق بالجانب الخلفي، فإن تطابق البيانات جزءًا أساسيًا من عمليات معالجة البيانات والتحقق من صحتها، ويشمل ذلك التحقق من أن البيانات التي تم استلامها من مصادر خارجية مثل قواعد البيانات الخارجية أو واجهات برمجة التطبيقات (API) تتوافق مع بيانات النظام الداخلي. وإذا كانت هناك عمليات تعديل أو تحديث للبيانات في النظام الداخلي، يجب أيضًا التحقق من أن هذه التغييرات تم تنفيذها بشكل صحيح وأن البيانات المخزنة تطابق البيانات المعدّلة. بالتالي، لضمان تطابق البيانات بشكل صحيح وموثوق، يجب أن يتم الاعتماد على تطابق البيانات في الواجهة الأمامية والخلفية معًا، وتنفيذ آليات التحقق والتحقق من صحة البيانات في الواجهة الأمامية لتجنب إدخال بيانات غير صحيحة أو غير متطابقة، وفي الوقت نفسه، تنفيذ تطابق البيانات في الخلفية للتأكد من أن البيانات المدخلة تتوافق مع البيانات المخزنة وأن أي تعديلات تم إجراؤها على البيانات تم تنفيذها بشكل صحيح. ولنفترض أن لديك تطبيقًا لإدارة مخزون يتيح للمستخدمين إضافة منتجات جديدة، سنستخدم ذلك المثال لشرح أهمية تطابق البيانات في الواجهة الأمامية والخلفية. 1- تطابق البيانات في الواجهة الأمامية: المستخدم يقوم بملء استمارة إضافة منتج جديد. يجب التحقق من صحة البيانات المدخلة في الواجهة الأمامية، مثل التحقق من أن جميع الحقول الإلزامية معبأة بشكل صحيح، وأن صيغة الأرقام والأحرف صحيحة. مثال: التحقق من أن السعر المدخل بالواجهة الأمامية هو رقم صحيح وأنه أكبر من صفر. 2- تطابق البيانات في الخلفية: بعد أن يقوم المستخدم بإضافة المنتج الجديد، يتم إرسال البيانات إلى الخلفية لمعالجتها. في الخلفية، يجب التحقق من أن البيانات المدخلة في الواجهة الأمامية تتوافق مع بيانات النظام الداخلي. مثال: التحقق من أن المنتج المضاف متوفر في قاعدة البيانات الخاصة بالمخزون وأن السعر المدخل متطابق مع سعر البيانات المخزنة.
  18. Mustafa Suleiman
    سأوضح لك ببساطة، عندما يتم تشغيل رابط مثل التالي xxx.com/gets مثلاً من متصفح الويب، يتم الاتصال بالخادم الذي مرتبط بنطاق xxx.com، وإذا كانت إعدادات vue-router قد تم تعيينها على وضعية التاريخ (history mode)، فسيتم البحث عن المسار /gets داخل ملفات الخادم. وإذا لم يتواجد المسار /gets ضمن الملفات، سيتم عرض خطأ الصفحة غير موجودة (404). الحلول الأسهل هي: إنشاء ملف 404.html بنفس محتوى ملف index.html (في مجلد public)، وعندما يتم تلقي طلب لصفحة غير موجودة (404)، فقم بنسخ نفس محتوى ملف index.html داخل هذا الملف 404.html، وبتلك الطريقة، عندما يتم عرض خطأ 404، سيتم استخدام محتوى الملف 404.html بدلاً من إعادة عرض نفس صفحة الخطأ. 2- ضبط Vue Router على وضعية الهاش، حيث أن Vue Router يأتي بوضعيتين للتوجيه (Routing)، وضعية التاريخ (history mode) ووضعية الهاش (hash mode). بشكل افتراضي، وVue Router يستخدم وضعية التاريخ، ولتعيين Vue Router إلى وضعية الهاش.عليك بتعديل تكوين Vue Router في مشروعك ليكون كالتالي: const router = new VueRouter({ mode: 'hash', // ... مزيد من الإعدادات ... }) وعندما تقوم بتعيين وضعية الهاش (hash mode)، ستظهر علامة الهاش (#) في عنوان URL بعد اسم الموقع الأساسي، وهذا يساعد في تجنب خطأ 404 الناتج عن طلبات مباشرة للخادم على مسارات لا تتطابق مع الملفات الموجودة. وهناك حل آخر باستخدام Travis CI، وعليك بالتالي: 1- قم بإضافة الإعدادات التالية في ملف vue.config.js الخاص بمشروعك: module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/my-project/' : '/' } 2- إنشاء ملف deploy.sh داخل مشروعك واستخدم الكود التالي: #!/usr/bin/env sh set -e npm run build cd dist cp index.html 404.html git init git add . git commit -m "deploy to gitpage" git push -f git@github.com:your-repo.git master:gh-pages cd - 3- إنشاء ملف .travis.yml في جذر المشروع واستخدم الكود التالي: language: node_js node_js: - "node" cache: npm script: npm run deploy deploy: provider: pages skip_cleanup: true github_token: $GITHUB_TOKEN local_dir: dist on: branch: main 4- تحديث ملف package.json ليتضمن سكربت deploy: "scripts": { "build": "vue-cli-service build", "deploy": "npm run build && cd ./dist && cp index.html 404.html" // ... السكربتات الأخرى ... }, 5- ارفع مشروعك إلى GitHub لتشغيل البناء، وانتظر بضع دقائق حتى يتم البناء.
  19. Mustafa Suleiman
    المشكلة ليست في استخدام الشركات لتلك التقنيات أم لا، المشكلة في تعلم تطوير الويب بشكل صحيح، حيث ستجد أن بعض الشركات تستخدم Bootstrap وبعض الشركات الأخرى تستخدم Tailwind وبعضها يستخدم CSS فقط أو أي إطار خاص بتنسيقات CSS مناسب لطبيعة عمل الشركة والمشاريع التي تعمل عليها. والصحيح هو أن تتقن لغة CSS حيث ستتعلم الأساسيات أولاً والتطبيق على نماذج صغيرة ثم محاولة تنفيذ موقع كامل بتصميم مميز ومعقد نسبيًا وستتعلم الكثير من ذلك، وبخصوص التصميم فلا تشغل بالك به في البداية لكن تعلم أساسيات التصميم بشكل صحيح، وركز على تعلم CSS أولاً وهنا ستجد تصاميم للتطبيق عليها: ولا تقم بإنشاء موقع واحد وتكتفي بذلك، بل موقعين على الأقل ويا حبذا لو كان الموقع الثاني متعدد الصفحات وبه بعض التأثيرات الحركية Animations باستخدام CSS. وأنصحك بالبحث عن أساسيات التصميم بشكل صحيح من حيث إختيار الخطوط وتناسب المساحات وما هي الـ Negative space وإختيار الألوان المناسبة والـ Visual Hierarchy وهو يعني التسلسل الهرمي المرئي في تصميم الويب، وكنصيحة أخرى قم بدراسة كورس Ui/UX بسيط لتعليمك تلك الأساسيات. أو قم بالبحث عن أساسيات تصميم الويب على اليوتيوب وستحقق استفادة كبيرة. وسأوضح لك ما ٌأقصده من خلال صورتين فقط: الأمر أصبح أوضح قليلاً، صحيح؟ وأنصحك بقراءة التالي: وبإختصار ضع قاعدة دائمًا أُثناء تعلمك للبرمجة، ركز على تعلم اللغات الأساسيات الخاصة بمجالك، ولا تصب تركيزك أبدًا على تعلم التقنيات مثل Bootstrap وtailwind ففهمك للغة الخاصة بتلك التقنيات سيؤهلك للعمل بأي إطار أو مكتبة، وأيضًا حل المشاكل التي تواجهك بسهولة وتخصيص تصميمك كما تريد. وكل فترة ستجد تقنيات جديدة على الساحة فماذا لو تم الاستغناء عن استخدام Bootstrap مثلاً؟ التقنيات تم تطويرها لتسريع عملية تطوير المواقع، وكل مكتبة وإطار له استخدام مناسب، وبالطبع سيتعين تعلم أحد تلك الإطارات، ولتفهم ما أقصد أنصحك بمشاهدة الفيديو التالي: وأيضًا بخصوص هل الدورة كافية أم عليك بقراءة التالي:
  20. Mustafa Suleiman
    رسالة ألخطأ تعني فشل عملية التثبيت وعدم قدرة على بناء الـ wheels الخاصة بالمكتبة، حاول القيام بالتالي لحل المشكلة: أولاً حاول تنفيذ الأمر التالي: pip install setuptools wheel ثم قم بالتجربة مرة أخرى وإذا استمرت المشكلة عليك بالخطوات التالية: 1- تثبيت gcc وpython-dev وlibffi-dev وlibssl-dev وbuild-essential في نظامك قبل المحاولة مرة أخرى. 2- تحديث pip و setuptools إلى أحدث إصداراتها باستخدام الأمر التالي: pip install --upgrade pip setuptools 3- تثبيت جميع متطلبات النظام اللازمة لـ pysqlcipher3، مثل OpenSSL و SQLite، عن طريق التالي: pip install libssl-dev libsqlite3-dev 4- ربما هناك تداخلات بين المكتبات المثبتة في النظام الأساسي والمكتبات التي تحاول تثبيتها، فعليك باستخدام بيئة افتراضية مثل virtualenv لتثبيت pysqlcipher3 وتجربتها داخل بيئة معزولة.
  21. Mustafa Suleiman
    هل تقصد عند الضغط على زر Run لا يتم تشغيل الكود؟ ومن الصعب تحديد السبب بدون توضيح ما الذي يحدث بالضبط، وربما السبب هو وجود أكثر واجهة منفذ أوامر Terminal مفتوح في نفس الوقت بداخل VScode لذلك تأكد من وجود واجهة واحدة فقط وغلق بقية الواجهات بالضغط على أيقونة سلة المهملات عن الوقوف على الواجهة كالتالي: وحاول أيضًا تحديث محرر VScode من خلال الضغط على Help بالأعلى ثم اختر منها check for updates. وإذا استمرت المشكلة، قم بحذف المحرر تمامًا ثم قم بتثبيت آخر إصدار من الرابط التالي: https://code.visualstudio.com/download
  22. Mustafa Suleiman
    الأسئلة الإختبارية لا يتم الإجابة عليها ولكن سأوضح لك الخطوات العامة لتنفيذ المطلوب منك، وتستطيع توفير الكود وطرح المشكلة التي تواجهك لمساعدتك. ولكن أنت لم توضح اللغة المطلوب تنفيذ البرنامج بها، وسأشرح لك من خلال بايثون لكونها سهلة الفهم. في البداية عليك تعريف الصنف (Class) باسم "Student"، باستخدام دالة __init__ لتهيئة الكائن الطالب بالمعلومات الأساسية مثل الاسم والرقم الجامعي وقائمة الدرجات، كالتالي: class Student: def __init__(self, name, id): self.name = name self.id = id self.grades = [] بعد ذلك، ستحتاج إلى دالة تسمح لك بإضافة درجة جديدة إلى قائمة الدرجات، وستقوم بتعريف دالة بسيطة باسم add_grade تستقبل درجة وتضيفها إلى القائمة. ولحساب المعدل، تحتاج إلى دالة تقوم بجمع جميع الدرجات وتقسيمها على عددها، وذلك بتعريف دالة جديدة باسم calculate_average تقوم بهذا العمل. أخيرًا، تعريف دالة display_info التي تطبع معلومات الطالب بما في ذلك الاسم والرقم الجامعي وقائمة الدرجات والمعدل. والآن بعد تعريف الصنف، تستطيع إنشاء كائن جديد من الصنف واستخدام الدوال المعرفة فيه، مثل إنشاء طالب جديد باسم "أحمد" ورقم جامعي 12345 ونضيف بعض الدرجات له. في النهاية، استدعي دالة display_info لطباعة معلومات الطالب بما في ذلك قائمة الدرجات والمعدل.
  23. Mustafa Suleiman
    بخصوص التصميم، فعليك باستخدام البرامج الخاصة بتصميم واجهة المستخدم مثل Adobe Photoshop وAdobe XD وSketch ولكن الأفضل والأشهر حاليًا هي منصة Figma. وإذا كنت فهمت سؤالك بشكل صحيح، فأنت تريد عرض القالب ليتم بيعه، صحيح؟ هناك منصات شهيرة لبيع قوالب وورد بريس ومنها Themeforest وقد تم النقاش حول ذلك من قبل هنا: تجربتي مع Themeforest ونصائح لمن يريدون البيع فيه كيف أبيع أول Template على Themeforest وبخصوص باقي الأسئلة فعليك بتعلم لغة PHP ثم وورد بريس وستعرف الإجابة بنفسك، ويوجد في أكاديمية حسوب دورة تطوير تطبيقات الويب باستخدام لغة PHP ويتم فيها شرح PHP وإطار لارافيل ثم وورد بريس وأيضًا هناك شرح لـ woocommerce.
  24. Mustafa Suleiman
    عليك بالدخول على لوحة التحكم في حسابك على الاستضافة، من خلال التوجه إلى My products بعد تسجيل الدخول لحسابك، وستجد خيار بالأسفل باسم Web Hosting، قم بالضغط عليه وستجد خيار باسم Manage. بعد ذلك ستجد خيار باسم Cpanel admin وسيتم توجيهك إلى لوحة التحكم الخاصة بـ Cpanel. وإذا أردت تغيير الباسورد وكلمة المرور ففي لوحة التحكم الخاصة بحسابك التي تظهر لك عند الضغط على Manage ستجد قسم باسم Settings وبه تبويب Account وبه بيانات تسجيل الدخول إلىCpanel وتستطيع تغييرها أو نسخها كالتالي:
  25. Mustafa Suleiman
    شبكة توزيع المحتوى (Content Delivery Network أو CDN) هي خدمة تهدف إلى توفير نسخ من المحتوى الثابت، مثل ملفات JavaScript وCSS والصور، وتخزينها على خوادم متعددة موزعة جغرافيًا حول العالم. وذلك يساعد على تحسين سرعة تحميل المحتوى وأداء الموقع. بالنسبة للـ HTTPS، فهو بروتوكول آمن يستخدم لتشفير الاتصال بين المتصفح والخادم الذي يستضيف الموقع، ويستخدم الـ HTTPS لتأمين نقل البيانات وحماية خصوصية المستخدمين وسلامة المعلومات المرسلة والمستقبلة. بالنسبة لمزودي خدمات CDN وHTTPS، هناك العديد من الشركات المتخصصة في توفير خدمات CDN عبر HTTPS. من بين أشهرها: Cloudflare: يعتبر Cloudflare واحدًا من أبرز مزودي خدمات CDN ويدعم HTTPS بشكل مجاني وسهل الاستخدام. Akamai: يعتبر Akamai من أكبر مزودي خدمات CDN في العالم ويدعم HTTPS بشكل شامل. Amazon CloudFront: يوفر Amazon CloudFront خدمة CDN قوية ويدعم HTTPS بشكل متكامل، وهو جزء من خدمات الحوسبة السحابية في أمازون (Amazon Web Services). هناك أيضًا مزودي خدمات CDN آخرين مثل Fastly وMaxCDN وغيرهم. والمواقع التي توفر لك روابط المكتبات تعتمد على مزودي الخدمة السابق ذكرهم. وبخصوص المواقع التي توفر مكتبات عن طريق CDN فهي: 1- cdnjs يوفر مكتبة مفتوحة المصدر تضم العديد من الإصدارات والمكتبات المختلفة بما في ذلك jQuery وغيرها. 2- jsDelivr يقدم خدمة CDN سريعة وموثوقة للعديد من المكتبات بما في ذلك jQuery وBootstrap وVue.js وAngular والعديد من الإصدارات الأخرى. 3- Google Hosted Libraries يوفر خدمة CDN مدعومة من قبل جوجل تتضمن مكتبات مشهورة مثل jQuery وAngularJS وFont Awesome وغيرها. 4- Microsoft Ajax Content Delivery Network توفر مايكروسوفت خدمة CDN لمكتباتها الشهيرة مثل jQuery وBootstrap وSignalR وغيرها. 5- UNPKG يقدم خدمة CDN لمكتبات npm مثل React وVue.js وAngular والعديد من الإضافات الأخرى. 6- cdnjs.cloudflare يتيح لك الوصول إلى مجموعة واسعة من المكتبات والإطارات مثل jQuery وReact وBootstrap وVue.js وغيرها. 7- Staticfile CDN يوفر خدمة CDN للعديد من المكتبات والموارد المفتوحة المصدر مثل jQuery وBootstrap وFont Awesome وغيرها. 8- Yandex CDN يقدم خدمة CDN لمكتبات Yandex مثل Yandex Maps وYandex Metrika وغيرها. وبخصوص الأفضلية بين تحميل المكتبة أو استخدام CDN فقد تم شرح ذلك هنا:
×
×
  • أضف...