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

Mustafa Suleiman

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

  • المساهمات

    19761

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

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

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

    472

 نوع المحتوى 

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

البرمجة

التصميم

DevOps

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

العمل الحر

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

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

قصص نجاح

أسئلة وأجوبة

كتب

دورات

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

  1. Mustafa Suleiman
    ستشعر بذلك في حال كان الموقع بسيط، أي أنّ الأداة معقدة بالنسبة لمشروع بسيط لا يتطلبها، لذا لن تجد لها فائدة وستضيف تعقيد غير ضروري. بينما لو المشروع مُعقد وتريد إدارة حالة به للبيانات وأيضًا تحديث البيانات بشكل ديناميكي في الواجهة وكذلك توفير تجربة مستخدم جيدة بتحديث البيانات دونّ إعادة تحديث الصفحة والتنقل بين صفحات التطبيق بكل سهولة وسرعة، فستجد أنّ تنفيذ ذلك من خلال HTML و جافاسكريبت يستغرق الكثير من الوقت ولن يكون بنفس جودة React وستحدث الكثير من المشاكل التي أنت في غنى عنها. في البداية ستجد أنّ React صعبة الاستخدام قليلاً لأنّ مفهوم التطوير من خلالها لم تستوعبه بشكل كامل، ومع الوقت والممارسة ستتضح لك الكثير من الأمور.
  2. Mustafa Suleiman
    لا حاجة لكل ذلك، المشكلة أنك تستخدم بيئات تطوير قديمة وتحدث بها الكثير من المشاكل، الأفضل استخدام بيئات تطوير حديثة مثل Laragon والأحدث منها هي FlyEnv.
  3. Mustafa Suleiman
    لا يتوفر captions للدروس أو مُلخصات، لكن تستطيع تشغيلها والاستماع إليها في الخلفية بالنسبة للدروس النظرية. لكن تستطيع الإعتماد على المقالات المتاحة في أكاديمية حسوب وأيضًا المراجع الموجودة في موسوعة حسوب لمختلف اللغات. إذا أردت ملخص للغة أو إطار معين أو مكتبة تستطيع البحث عن cheat sheet ثم اسم اللغة مثلاُ وليكن js إذا ستبحث عن cheat sheet for js.
  4. Mustafa Suleiman
    Node.js خاصة بالواجهة الخلفية وهي بيئة تشغيل لجافاسكريب خارج المتصفح، لذا هي تعتمد على جافاسكريبت بالفعل وبدونها لن تتمكن من تطوير واجهة خلفية من خلال جافاسكريبت. أظن أنك تقصد تطوير الواجهة الأمامية فقط من خلال جافاسكريبت وتستطيع بالطبع لا مشكلة، ستحتاج إلى React لتسهيل العملية، لكن لكي يتمكن المستخدمين من مراسلة بعضهم يجب وجود واجهة خلفية
  5. Mustafa Suleiman
    ذلك تم شرحه في دورة جافاسكريبت بالفعل، ستجده في مسار تطبيق دردشة يشبه WhatsApp، حيث سيتم التطوير من خلال React و Node.js لذا يجب إتمام المسارات التي قبله لتتمكن من دراسة ذلك المسار، وتستطيع تخطي مسار تطوير تطبيق جوال باستخدام React Native لكونه خاص بالهواتف وحاليًا أنت تريد تطوير تطبيق ويب للمتصفح.
  6. Mustafa Suleiman
    تقصد تطبيق تواصل إجتماعي مثل فيسبوك؟ أم إضافة ميزة الدردشة بين مستخدمي الموقع من خلال غرف؟
  7. Mustafa Suleiman
    ستجد أسفل فيديو الدرس في نهاية الصفحة صندوق تعليقات كما هنا، أرجو طرح الأسئلة أسفل الدرس وليس هنا في قسم أسئلة البرمجة حيث نطرح الأسئلة العامة الغير متعلقة بمحتوى الدورة أو الدرس، وذلك لمساعدتك بشكل أفضل.
  8. Mustafa Suleiman
    ما تريده يُسمى animation on scroll أو Scroll-triggered Animations الأسهل لك استخدام مكتبة GSAP، تستطيع البحث على اليوتيوب عن GSAP ScrollTrigger، وعامًة إليك مثال، ستحتاج أولاً إلى تضمين المكتبة عبر روابط CDN: <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script> ولنقم بالتطبيق على مثال بسيط: <!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>GSAP Scroll Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <div class="logo">Charlotte <span>Smith</span></div> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Skills</a></li> <li><a href="#">Service</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <section class="hero"> <div class="hero-text"> <p class="intro-line">Hey I'm</p> <h1 class="name-line">Charlotte Smith</h1> <p class="tagline">A Creative Web Developer & Designer.</p> </div> <div class="hero-image-container"> <div class="halo halo1"></div> <div class="halo halo2"></div> <div class="halo halo3"></div> <img src="https://avatar.iran.liara.run/public/73" alt="Charlotte Smith" class="profile-image"> </div> </section> <section class="spacer" style="height: 100vh; background: #1a1a1a; display: flex; align-items: center; justify-content: center; color: white; font-size: 2em;"> Scroll down to see effects </section> <section class="spacer" style="height: 100vh; background: #2a2a2a; display: flex; align-items: center; justify-content: center; color: white; font-size: 2em;"> More Content Here </section> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script> <script src="script.js"></script> </body> </html> وكود CSS: body { margin: 0; font-family: sans-serif; background-color: #0a0a0a; color: #f0f0f0; overflow-x: hidden; /* لمنع التمرير الأفقي غير المرغوب فيه */ } header { position: fixed; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px 50px; box-sizing: border-box; z-index: 100; background: rgba(10, 10, 10, 0.5); backdrop-filter: blur(5px); } .logo { font-size: 1.8em; font-weight: bold; } .logo span { color: #e60000; } nav ul { list-style: none; padding: 0; margin: 0; display: flex; } nav ul li { margin-left: 30px; } nav ul li a { text-decoration: none; color: #f0f0f0; font-size: 1em; transition: color 0.3s ease; } nav ul li a:hover { color: #e60000; } .hero { min-height: 100vh; display: flex; align-items: center; justify-content: space-around; padding: 100px 50px 50px; box-sizing: border-box; position: relative; overflow: hidden; } .hero-text { flex-basis: 50%; padding-right: 50px; } .hero-text .intro-line { font-size: 2em; color: #aaa; margin-bottom: 0; /* سيتم تحريكه بواسطة GSAP */ opacity: 0; transform: translateY(30px); } .hero-text .name-line { font-size: 4em; font-weight: bold; color: #fff; margin-top: 0; margin-bottom: 10px; /* سيتم تحريكه بواسطة GSAP */ opacity: 0; transform: translateY(30px); } .hero-text .tagline { font-size: 1.5em; color: #ccc; /* سيتم تحريكه بواسطة GSAP */ opacity: 0; transform: translateY(30px); } .hero-image-container { flex-basis: 40%; position: relative; display: flex; justify-content: center; align-items: center; } .profile-image { max-width: 70%; height: auto; border-radius: 50%; z-index: 5; position: relative; /* سيتم تحريكه بواسطة GSAP */ opacity: 0; transform: scale(0.8) translateX(50px); } .halo { position: absolute; border-radius: 50%; background-color: rgba(220, 0, 0, 0.2); opacity: 0; transform: scale(0.5); z-index: 1; } .halo1 { width: 100%; padding-bottom: 100%; max-width: 400px; max-height: 400px; z-index: 3; background-color: rgba(220, 0, 0, 0.15); } .halo2 { width: 120%; padding-bottom: 120%; max-width: 480px; max-height: 480px; z-index: 2; background-color: rgba(220, 0, 0, 0.1); } .halo3 { width: 140%; padding-bottom: 140%; max-width: 560px; max-height: 560px; z-index: 1; background-color: rgba(220, 0, 0, 0.05); } /* إخفاء العناصر قبل تحميل GSAP للتحكم بظهورها */ .logo, nav ul li { opacity: 0; } ثم كتابة كود جافاسكريبت باستخدام GSAP وقمت بإضافة تعليقات لشرح ما يحدث: // تسجيل إضافة ScrollTrigger gsap.registerPlugin(ScrollTrigger); // 1. تحريكات عند تحميل الصفحة (بدون ScrollTrigger مبدئياً) // ----------------------------------------------------- const tlOnLoad = gsap.timeline({ defaults: { ease: "power2.out" } }); tlOnLoad .from(".logo", { opacity: 0, x: -30, duration: 0.8, delay: 0.2 }) .from("nav ul li", { opacity: 0, y: -20, stagger: 0.1, duration: 0.5 }, "-=0.5") // يبدأ مع اللوجو تقريباً .to(".hero-text .intro-line", { opacity: 1, y: 0, duration: 0.8, delay: 0.3 }) .to(".hero-text .name-line", { opacity: 1, y: 0, duration: 0.8 }, "-=0.5") // يبدأ بعد النص التمهيدي بقليل .to(".hero-text .tagline", { opacity: 1, y: 0, duration: 0.8 }, "-=0.6") .to(".profile-image", { opacity: 1, scale: 1, x: 0, duration: 1 }, "-=0.8") // الصورة تظهر .to(".halo", { // الهالات تظهر بشكل متتالي opacity: 1, scale: 1, duration: 1.2, stagger: 0.2, // تأخير بين كل هالة ease: "elastic.out(1, 0.5)" }, "-=0.7"); // 2. تحريكات عند التمرير (ScrollTrigger) // -------------------------------------- // مثال: تأثير parallax على الصورة عند التمرير gsap.to(".profile-image", { yPercent: -30, // تحريك الصورة لأعلى بنسبة 30% من ارتفاعها ease: "none", scrollTrigger: { trigger: ".hero", // العنصر الذي يبدأ عنده التأثير start: "top top", // متى يبدأ (عندما يصل أعلى الـ .hero إلى أعلى الـ viewport) end: "bottom top", // متى ينتهي (عندما يصل أسفل الـ .hero إلى أعلى الـ viewport) scrub: true, // يجعل الحركة متزامنة مع التمرير (true أو رقم لـ "تنعيم" الحركة) // markers: true // لإظهار علامات تساعد في تحديد نقاط البدء والنهاية (للتطوير فقط) } }); // مثال: تأثير parallax على الهالات (بسرعات مختلفة) gsap.utils.toArray(".halo").forEach((halo, i) => { gsap.to(halo, { yPercent: -20 * (i + 1), // كل هالة تتحرك أسرع قليلاً scale: 1.1 + (i * 0.1), // تكبير قليل مع التمرير opacity: 0.5 - (i * 0.1), // تتلاشى قليلاً مع التمرير ease: "none", scrollTrigger: { trigger: ".hero", start: "top top", end: "bottom top", scrub: 1.5, // تنعيم أكثر // markers: {startColor: "blue", endColor: "blue", indent: 40 * i} } }); }); // مثال: تلاشي نصوص الـ hero عند التمرير لأسفل gsap.to(".hero-text", { opacity: 0, yPercent: -50, // تحريك النص لأعلى ease: "power1.in", scrollTrigger: { trigger: ".hero", start: "center center", // عندما يصل منتصف الـ .hero إلى منتصف الـ viewport end: "bottom center", // عندما يصل أسفل الـ .hero إلى منتصف الـ viewport scrub: 1, // markers: {startColor: "green", endColor: "green"} } }); // مثال: تغيير خلفية الهيدر عند التمرير (إذا لم يكن fixed بالفعل) // أو تثبيت الهيدر بعد تجاوز قسم معين ScrollTrigger.create({ trigger: ".hero", // يمكن أن يكون body أو أي عنصر آخر start: "bottom top", // عندما يتجاوز أسفل قسم الـ hero أعلى النافذة toggleClass: { targets: "header", className: "scrolled" }, // أضف كلاس CSS // markers: true, onEnter: () => console.log("Header scrolled class added"), onLeaveBack: () => console.log("Header scrolled class removed") });
  9. Mustafa Suleiman
    هل تقصد فعليًا؟ أم كود HTML كشكل فقط؟ سأفترض HTML لأنّ بوابة الدفع أمر متقدم ويحتاج إلى استخدام أحد مزودي الخدمة مثل stripe وغيره. سيكون الكود كالتالي: <!DOCTYPE html> <html lang="ar" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>نموذج بطاقة ائتمان</title> <style> body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f4f4f4; margin: 0; } .credit-card-form { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); width: 350px; } .credit-card-form h2 { text-align: center; color: #333; margin-bottom: 20px; } .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; } .form-group input[type="text"], .form-group input[type="number"], /* أو tel للوحة مفاتيح رقمية أفضل على الجوال */ .form-group select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; /* لتضمين padding و border ضمن العرض الكلي */ } .expiry-group { display: flex; gap: 10px; } .expiry-group .form-group { flex: 1; } .submit-btn { width: 100%; padding: 12px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } .submit-btn:hover { background-color: #0056b3; } </style> </head> <body> <div class="credit-card-form"> <h2>نموذج إدخال بيانات بطاقة ائتمان</h2> <form action="#" method="POST" onsubmit="alert('تم إرسال النموذج (للعرض فقط، لم يتم إرسال أي بيانات فعلية أو معالجتها)!'); return false;"> <div class="form-group"> <label for="card-number">رقم البطاقة:</label> <input type="text" id="card-number" name="cardNumber" placeholder="xxxx xxxx xxxx xxxx" pattern="\d{4} ?\d{4} ?\d{4} ?\d{4}" maxlength="19" required> </div> <div class="form-group"> <label for="card-holder">اسم صاحب البطاقة:</label> <input type="text" id="card-holder" name="cardHolder" placeholder="الاسم كما يظهر على البطاقة" required> </div> <div class="expiry-group"> <div class="form-group"> <label for="expiry-month">شهر انتهاء الصلاحية:</label> <select id="expiry-month" name="expiryMonth" required> <option value="">اختر الشهر</option> <option value="01">01 - يناير</option> <option value="02">02 - فبراير</option> <option value="03">03 - مارس</option> <option value="04">04 - أبريل</option> <option value="05">05 - مايو</option> <option value="06">06 - يونيو</option> <option value="07">07 - يوليو</option> <option value="08">08 - أغسطس</option> <option value="09">09 - سبتمبر</option> <option value="10">10 - أكتوبر</option> <option value="11">11 - نوفمبر</option> <option value="12">12 - ديسمبر</option> </select> </div> <div class="form-group"> <label for="expiry-year">سنة انتهاء الصلاحية:</label> <select id="expiry-year" name="expiryYear" required> <option value="">اختر السنة</option> <!-- تستطيع إضافة المزيد من السنوات هنا باستخدام JavaScript إذا أردت --> <option value="2024">2024</option> <option value="2025">2025</option> <option value="2026">2026</option> <option value="2027">2027</option> <option value="2028">2028</option> <option value="2029">2029</option> <option value="2030">2030</option> </select> </div> </div> <div class="form-group"> <label for="cvv">CVV/CVC:</label> <input type="text" id="cvv" name="cvv" placeholder="123" pattern="\d{3,4}" maxlength="4" required> </div> <button type="submit" class="submit-btn">إرسال (تجريبي)</button> </form> </div> </body> </html>
  10. Mustafa Suleiman
    Linear أو Polynomial Regression مع الوقت كمتغير وحيد ليس خطأ بالمعنى الرياضي، لكنه ضعيف علميًا كأداة تنبؤ في السلاسل الزمنية لأنك تفترض ضمنيًا أنّ ما كان يحدث سيستمر بلا تغيير. فنماذج السلاسل الزمنية ARIMA, ETS, Prophet, AutoTS وغيرهم مبنية خصيصًا للتعامل مع الخصائص التي تُميز البيانات الزمنية، أي الاعتماد الذاتي Autocorrelation، الموسمية Seasonality، عدم الثبات Non-stationarity، والصدمات البنيوية Structural breaks. بالتالي بإمكانك إعتبار ARIMA وغيره على أنه انحدار أيضًا ولكن على متغيرات مشتقة وهي الفروق، القيم المتأخرة وخلافه، وبآلية تحقق من صلاحية الفرضيات الإحصائية stationarity, white noise إلخ.
  11. Mustafa Suleiman
    ملف index.php الخاص بـ WampServer الموجود في C:\wamp64\www يقوم بتحميل ملف آخر اسمه apacheloadedmodules.php من المسار ../files/ أي المسار التالي: C:\wamp64\files\apacheloadedmodules.php ولكن لا يجده، هل تم التثبيت بشكل صحيح؟ حاول تثبيت Microsoft Visual C++ Redistributable اللازمة لتثبيت WampServer https://aka.ms/vs/17/release/vc_redist.x64.exe ثم أعد تثبيت WampServer.
  12. Mustafa Suleiman
    خاصية content داخل @keyframes تعمل بشكل أساسي مع العناصر الزائفة pseudo-elements مثل ::before و ::after بالتالي عند تطبيقها مباشرة على عنصر label، فلن تغير محتواه النصي الفعلي. ستحتاج إلى استخدام عنصر زائف ::after مع العنصر label، وتطبيق الأنيميشن عليه. .typewriter-text { color: #6d8a6d; font-weight: bold; margin-left: 5px; } .typewriter label::after { content: ""; animation: read 4s infinite; } @keyframes read { 0%, 20% { content: "Web Developer"; } 25%, 45% { content: "Youtuber"; } 50%, 70% { content: "Developer"; } 75%, 95% { content: "Script writer"; } 100% { content: "Script writer"; } } لو استمرت المشكلة أرفق المشروع لديك لتفقده
  13. Mustafa Suleiman
    بل تعديلات متفرقة في كامل الملف، ذلك تعليق فقط للتوضيح للفصل بين التنسيقات للتسهيل وذلك ما يجب فعله عند التطوير، حيث كل قسم تضع تعليق لتوضيح التعليقات الخاصة به، الـ Main Section هو القسم الذي يلي الـ navbar أي الذي به الصورة والنص
  14. Mustafa Suleiman
    صحيح لازمة لعرض الموقع بشكل جيد، تستطيع إزالتها ثم تفقد الموقع لتفقد ما تُضيفه للتنسيق، ثم إعادتها بالضغط على CTRL + Z للتراجع
  15. Mustafa Suleiman
    أرجو توضيح ذلك في وصف المشكلة، لديك مشكلة في المُحددات الخاصة بـ CSS بمعنى عند كتابة تنسيق يجب إختيار العنصر الصحيح لتنسيقه، فبدلاً من كتابة .navbar-container.links الصحيح هو كتابة التالي حيث أن links تقع خارج عنصر div الذي به كلاس navbar-container، للتوضيح .navbar-container.links تعني حدد لي جميع العناصر ذات كلاس links والتي تقع داخل عنصر أب يحمل كلاس باسم navbar-container. .links نفس الأمر بالنسبة لباقي التنسيقات، يجب أن تتوافق مع هيكل HTML لديك، قمت بتصحيحها لك أرجو تففقدها ومقارنتها بما لديك لتكتشف الأخطاء. index.css
  16. Mustafa Suleiman
    هل الخلفية كما بالصورة تظهر لديك؟ وهل عند تغيير لون خلفية عنصر body لا يتم التغيير؟ عليك إعادة التحديث للصفحة لرؤية التغييرات.
  17. Mustafa Suleiman
    التنسيقات يتم تنفيذها بشكل سليم، حاول إعادة تحديث الصفحة ثم التجربة:
  18. Mustafa Suleiman
    هل عند الضغط على CTRL + 0 يتم ضبط التقريب Zoom للمستوى الطبيعي أم لا؟
  19. Mustafa Suleiman
    ما تقصده هو Favicon أو أيقونة المُفضلة، الصيغة الأفضل للصورة هي ICO، ولكن لا مشكلة في استخدام PNG أو JPG أيضًا. والحجم المناسب هو 16x16 أو 32x32 بكسل، ولكن لدعم الأجهزة التي بها شاشة عالية الدقة مثل Retina نستخدم أحجام أكبر مثل 64x64 أو 180x180 بكسل. استخدم الموقع التالي للحصول على صورة، تستطيع من خلاله تحويل png إلى ico أو الحصول على صورة icon من خلال كتابة اسم الموقع فقط أو تستطيع استخدام emoji وسيتم تحويله إلى ico https://favicon.io ثم تضمين الصورة من خلال عنصر link بداخل عنصر head كالتالي: <head> <link rel="icon" type="image/x-icon" href="/favicon.ico"> </head> بالطبع عليك تعديل اسم ومسار الصورة في وسم href لما لديك أنت.
  20. Mustafa Suleiman
    الأفضل حذف كل مجلدات المشاريع التي لا تستخدمها، ثم إعادة إنشاء مشروع wordpress فهناك تضارب غالبًا.
  21. Mustafa Suleiman
    هل توجهت لدومين الموقع وليس الـ IP الخاص بـ cyber panel؟ أيضًا ملف .htaccess الموجود في public_html هل يوجد به التالي في أوله؟ RewriteEngine On RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
  22. Mustafa Suleiman
    من القائمة الجانبية ستجد Websites اضغط عليها ثم اختر list websites من المفترض أن تجد الموقع الذي قمت بإنشائه هناك، في حال لم تجد موقع قم بإنشائه من خلال create website أسفل تبويب Websites أيضًا. بعد ذلك في list websites ستجد الموقع الخاص بك اضغط بجانبه على manage ثم انزل للأسفل وستجد rewrite rules قم بالضط عليها ثم اختر من القائمة المنسدلة التي ستظهر Force HTTP to HTTPS ثم انزل للأسفل واختر save. توجه للموقع وأعد تحديث الصفحة ومن المفترض أن يتم التوجيه الآن إلى HTTPS
  23. Mustafa Suleiman
    الاختراق ببساطة استغلال نقاط ضعف في نظام سواء جهاز، تطبيق أو شبكة إنترنت وذلك للوصول إليه أو التحكم به أو سرقة بيانات منه دون إذن، أي يشبه الأمر محاولة فتح قفل باب بطريقة غير قانونية من خلال إيجاد مفتاح مخفي، أو تستغلين ثغرة في تصميم القفل، أو تخدعين صاحب البيت ليفتح لكِ. وأغلب عمليات الاختراق العادية تعتمد على خداع المستخدم من خلال النقر على رابط خبيث، لأن البشر في حقيقة الأمر هم الحلقة الأضعف في نظام الأمان. لكن بالطبع هناك عمليات إختراق لا ذنب لأحد بها، وتحدث بسبب استغلال لثغرات غير معروفة بالنظام، لكن المشكلة هي أنه ليصل المُخترق للنظام، فيجب أن تسمحين له بذلك، سواء بتحميل أداة بها كود خبيث أيًا كانت تلك الأداة برنامج، تطبيق، صورة، ملف، فيديو وخلافه. في بعض الأحيان يتم الإختراق من برامج أو أدوات رسمية، بمعنى على مواقع ووردبريس مثلاً ستجدي أنه يتم تحميل إضافات للموقع من المتجر الرسمي لووردبريس لإضافة مزايا له، وفي وقت ما يتم إختراق الموقع لديكِ بسبب تلك الإضافة سواء لأن بها كود خبيث تم حقنه بها أو لأنّ بها ثغرة تؤدي إلى إختراق موقعك، حيث تلك الإضافة تُضيف كود للموقع لكي تعمل. وتلك هي الطريقة الإحترافية والتي تتم بها أغلب الإختراقات الكبيرة، أي من خلال استغلال الثغرات دونّ خداع أحد بتحميل ملف أو الضغط على رابط. ولو بحثتي عن أداة (Pegasus (spyware التي طورتها شركة NSO Group الإسرائيلية ستجدي أنها تُعتبر واحدة من أكثر أدوات التجسس السيبراني تقدمًا، وهدفها الإختراق والتجسس على أشخاص ذو قيمة مرتفعة وهم رؤساء دول وغيرهم كسياسيين، صحفيين، ونشطاء. وتعتمد على اختراق الأجهزة دون الحاجة إلى تفاعل المستخدم وذلك ما يُعرف بـ zero-click exploits فبمجرد اختراق الجهاز، يمكنها جمع البيانات مثل الرسائل، المكالمات، الصور، وتفعيل الميكروفون أو الكاميرا عن بُعد.
  24. Mustafa Suleiman
    كان مُستخدم بكثرة منذ سنوات لكونه يدعم لغة جافا بشكل قوي، وأيضًا من الممكن تطوير تطبيقات أندرويد بشكل أسهل باستخدام NetBeans عبر إضافة خاصة وهي NBAndroid، وذلك قبل أن تصبح بيئة Android Studio هي بيئة التطوير الرسمية لمشاريع الأندرويد. حاليًا إضافة NBAndroid لم يتم تحديثها منذ سنوات، ولا تدعم أحدث إصدارات Android SDK أو أدوات التطوير الحديثة، ومحرر NetBeans نفسه أصبح غير مُستخدم بنفس النسبة كما كان من قبل. و Android Studio الأفضل لأنها بيئة التطوير الرسمية لتطبيقات الأندرويد من جوجل وتدعم Java وKotlin بشكل كامل، مع أدوات متقدمة لتصميم الواجهات، محاكاة الأجهزة Emulator، وإدارة المشاريع عبر Gradle، كذلك يحتوي على ميزات مثل Live Layout Preview، ودعم Jetpack Compose لتصميم الواجهات الحديثة، وتحديثات مستمرة لمواكبة أحدث تقنيات الأندرويد. بالإضافة إلى أدوات تحليل الأداء والـ Debugging بشكل سهل، ومناسب للمبتدئين والمحترفين، مع واجهة مستخدم حديثة مقارنًة بـ NetBeans. أما IntelliJ فهي مشابهة لـ Android Studio، لكن تتطلب إعدادات إضافية لدعم الأندرويد وليست مخصصة له مثل Android Studio.
  25. Mustafa Suleiman
    محتوى الدورة تم إعداده ليبدأ معك من نقطة البداية في مجال البرمجة، وذلك بدراسة أساسيات البرمجة من خلال لغة بايثون وهي اللغة المُستخدمة في مجال الذكاء الاصطناعي وتحليل البيانات، ثم خلال الدورة ستتعلم ما يلي: التعامل مع البيانات بمختلف الصيغ التعامل مع قواعد البيانات SQL و NoSQL التعامل مع نماذج الذكاء الاصطناعي LLMs مثل GPT من OpenAI و LLaMA من Meta تحليل البيانات واستخلاص المعلومات والتمثيل البياني لها التعامل مع مكتبات شهيرة مثل Pandas و Numpy و Matpoltlib و Seaborn تعلم الآلة Machine Learning الخورازميات الشهيرة في تعلم الآلة مثل الانحدار Regressions والتصنيف Classification والتجميع Clustering خوارزميات التعلم الخاضعة للإشراف Supervised learning وخوارزميات التعلم الغير خاضعة للإشراف Unsupervised learning وخوارزميات التعلم المعزز Reinforced learning دمج تقنيات الذكاء الاصطناعي مع متجر إلكتروني لو أردت تعلم الأساسيات في مجال البرمجة بشكل أفضل، فعليك دراسة دورة علوم الحاسوب قبل دورة الذكاء الاصطناعي، لكن الأمر ليس ضروري أو إلزامي، لكن في رأي ذلك أفضل لك.
×
×
  • أضف...