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

Mustafa Suleiman

الأعضاء
  • المساهمات

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

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

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

    305

أجوبة بواسطة Mustafa Suleiman

  1. بالطبع ذلك مذكور في وصف الدورة، وبخصوص HTML وCSS تستطيع تعلمهم من خلال المسار الأول من دورة تطوير واجهات المستخدم وهو أساسيات تطوير الويب وستجد به التالي:

    • أساسيات HTML
    • أساسيات CSS
    • أساسيات JavaScript
    • أساسيات jQuery
    • بناء موقع شخصي

    وجميع المسارات الأولى من الدورات الأخرى متاحة لك بشكل مجاني لتعلم ما تريد والإطلاع على الدورة قبل الإشتراك بها، ويوجد أيضًا المسار الأول دورة تطوير التطبيقات باستخدام JavaScript وهو أساسيات لغة JavaScript حيث يتم شرحها بشكل معمق أكثر.

  2. في أكاديمية حسوب الهدف هو تحقيق إفادة لك وتوجيهك للطريق السليم وإخبارك بالخيارات المتاحة لك وما يجب فعله وما يمكن التخلي عنه مؤقتًا تبعًا للظروف الخاصة بك.

    وبشكل واضح، دورة علوم الحاسب غير مخصصة لتعليمك مجال محدد في البرمجة من أجل سوق العمل، بل غرضها هو تأهيلك لتعلم البرمجة بشكل سليم ودخول سوق العمل بقوة، حيث أنك ستمتلك أفضلية بالطبع بسبب تعلمك لأساسيات البرمجة من خلال بايثون وجافاسكريبت وأيضًا علوم الحاسب والتي تتضمن التالي:

    • أساسيات الحاسوب وعلومه والتفكير المنطقي وما هي الخوارزميات وكيف تفيد في البرمجة
    • تطبيقات عملية على أساسيات التفكير المنطقي باستخدام بيئة سكراتش Scratch التفاعلية
    • أساسيات أنظمة التشغيل المختلفة وكيفية تثبيت البرمجيات اللازمة للبرمجة عليها
    • أساسيات سطر الأوامر في نظام لينكس، وشرح الأسس التي بني عليها النظام مع تطبيقها عمليًا
    • أنظمة قواعد البيانات المختلفة، مع شرح تفصيلي للغة SQL للتعامل معها
    • مبادئ أساسية في أنظمة قواعد البيانات NoSQL
    • المفاهيم الأساسية التي تبنى فيها صفحات الويب
    • مفاهيم أساسية في الشبكات والخوادم، وكيف يتم استقبال الطلبيات إلى الخادم والرد عليها
    • مبادئ الحماية والأمان في الويب

    وبالتالي يصبح لديك قاعدة معرفة قوية ووعي ودراية بمجالات البرمجة، الأمر الذي يؤهلك للخطوة القادمة وهي إختيار مجال البرمجة الذي تريده، حيث سيتم توجيهك بعد إنتهاء الدورة وإجتياز الإختبار إلى كيفية تعلم المجال الذي تريده لدخول سوق العمل أو إقتراح مجالات ومنها الويب أو تطوير تطبيقات الهاتف أو مجال الواجهة الخلفية Back-End أو الجمع بين الواجهة الأمامية والخلفية لتصبح مطور Full-stack.

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

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

    وبخصوص سؤالك، الرسالة التي تظهر لك هي تحذير من PHP يفيد بأن الثابت (constant) FILTER_SANITIZE_STRING قد تم إهماله (deprecated) وفي PHP، الثوابت هي متغيرات لا يمكن تغيير قيمتها بعد تعريفها، وتستخدم لتعيين قيم ثابتة.

    والمشكلة هي أنه بدءًا من إصدار PHP 8.1، تم وضع علامة deprecated على الدالة FILTER_SANITIZE_STRING وأصبحت قديمة وغير مستخدمة، ولكن لا مشكلة، فالدالة ما زالت تعمل في النسخ الحديثة من PHP، ولكن يُنصح باستخدام وسائل أخرى لتحقيق نفس الغرض.

    وعليك استبدال دالة FILTER_SANITIZE_STRING بدالة أخرى، وهناك العديد من الدالات التي يمكنك استخدامها، وإحدى الخيارات الشائعة هي دالة htmlspecialchars().

    وإليك مثال لكيفية استخدام دالة htmlspecialchars():

    $sanitized_string = htmlspecialchars($_POST['name']);

    وتستقبل الدالة htmlspecialchars() سلسلة كإدخال وتعيد سلسلة مع جميع الأحرف الخاصة المشفرة، مما يساعد على منع هجمات حقن النص التشعبي (XSS).

    وبذلك يتم حل المشكلة وتتجنبي ظهور التحذير، وإذا أردتي الشرح بشكل مفصل، فإليك التوضيح:

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

    وكان أيضًا يُشتبه بأنه نفس فلتر النص الافتراضي (FILTER_UNSAFE_RAW) بسبب اسمه، على الرغم من أن الفلتر الافتراضي للنص الآمن هو FILTER_UNSAFE_RAW، وقرر مجتمع PHP أنه لا يجب دعم استخدام هذا الفلتر بعد الآن.

    والفلتر كان يزيل كل محتوى بين علامات <>، كما كان يزيل جميع بايتات NUL. وأخيرًا، كان يقوم بترميز ' و " إلى كيانات HTML.

    ولاستبداله لديك خياران:

    • استخدم فلتر النص الآمن الافتراضي FILTER_UNSAFE_RAW الذي لا يقوم بأي عملية تصفية، وينبغي استخدامه إذا كنتِ لا تعرفين بالضبط سلوك FILTER_SANITIZE_STRING وترغبين فقط في استخدام فلتر افتراضي يمنحك قيمة النص.
    • وفي حال كنتِ تستخدمين ذلك الفلتر للحماية ضد ثغرات XSS (Cross-Site Scripting)، فاستبدليه باستخدام htmlspecialchars().
  4. أولاً الهاكر الأخلاقي هو شخص يحاول العثور على الثغرات الأمنية في الأنظمة والشبكات من أجل تحسين أمنها، ويُعرف الهاكر الأخلاقي أيضًا باسم المخترق الأبيض أو صاحب القبعة البيضاء أو Ethical Hacking.

    وهو في الأساس هو مبرمج محترف، حيث لا يمكن أن تحترف مجال الـ Ethical Hacking بدون أن تتقن أساسيات من خلال برمجة قوية وهي C++، وفي رأي هي حجر الأساس، وبعد إتقان اللغة وتنفيذ مشروع من خلالها أو أكثر من مشروع، عليك بتعلم PHP وSQL، بعد ذلك عليك بتعلم جافاسكريبت.

    ولا مشكلة إذا قمت بتعلم بايثون في البداية بدلاً من C++ في حال كنت تواجه صعوبة، لكن ستحتاج إلى تعلم C أو C++ بعد ذلك.

    وبالطبع لن تتقن جميع اللغات السابقة بنسبة 100% أقصد أن تعلم C++ سيؤهلك لتعلم أي لغة بعد ذلك بسهولة وفي وقت قصير، وتحتاج إلى تعلم أساسيات تلك اللغات ثم تعلم ما ينقصك عندما تحتاجه.

    ثم ستحتاج إلى تعلم أساسيات الشبكات  مثل TCP / IP و DNS و DHCP و HTTP و HTTPS و SSL / TLS.

    وبعد ذلك تأتي مرحلة التعلم عن مهارات التشفير AES. AES هو اختصار لـ "Advanced Encryption Standard" وهو نظام تشفير متقدم يُستخدم لحماية البيانات وتأمينها، ومن الممكن استخدام مهارات التشفير AES بشكل أخلاقي لاختبار قوة التشفير وتحسين أمان النظام وتأمين البيانات.

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

    وستجد هنا شرح مفصل عن مصادر التعلم:

     

  5. هناك بعض الأسباب التي قد تمنع ظهور الصورة في محرر HTML وCSS، حتى لو كان الكود صحيحًا. فيما يلي بعض الأسباب الأكثر شيوعًا:

    • قد لا تكون الصورة موجودة في نفس المجلد الذي يوجد فيه ملف HTML وCSS. يجب أن تكون الصورة في نفس المجلد الذي يوجد فيه ملف HTML وCSS. إذا كانت الصورة في مجلد مختلف، فستحتاج إلى تحديد المسار الكامل للصورة في علامة img.
    •  اسم الصورة غير صحيح. تأكد من أن اسم الصورة صحيح وأنك قد كتبته بشكل صحيح في علامة img.
    •  الصورة بتنسيق غير مدعوم. تأكد من أن الصورة بتنسيق مدعوم من قبل المتصفح، وبعض التنسيقات الشائعة المدعومة هي JPG، PNG، وGIF.
    •  حجم الصورة كبيرًا جدًا. قد لا يعرض بعض المتصفحات الصور الكبيرة جدًا، وفي حال كانت الصورة كبيرة جدًا، فقد تحتاج إلى تقليل حجمها باستخدام برنامج تحرير الصور.
    •  هناك خطأ في الكود HTML وCSS. تأكد من أن الكود HTML وCSS صحيحًا، وإذا كنت غير متأكد، فيمكنك استخدام أداة تصحيح HTML وCSS لمساعدتك في العثور على الأخطاء.

    وإليك مثال على الاستخدام الصحيح للغة HTML وCSS لعرض صورة:

    <html>
    <head>
    <title>This is a title</title>
    </head>
    <body>
    <img src="image.jpg" alt="This is an image">
    </body>
    </html>

    حيث نستخدم علامة img لعرض الصورة. الوسم src هو المسار إلى الصورة، والوسم alt هو النص البديل الذي سيعرض إذا لم تتمكن المتصفحات من عرض الصورة.

    ولاحظ أن مسار الصورة في الخاصية src هو اسم الصورة فقط، وذلك يعني أن الصورة موجودة مباشرًة بجانب ملف html، أما في حال كانت الصورة بداخل مجلد imgs مثلاً، نقوم بكتابة المسار كالتالي:

    <html>
    <head>
    <title>This is a title</title>
    </head>
    <body>
    <img src="imgs/image.jpg" alt="This is an image">
    </body>
    </html>

    وتستطيع استخدام CSS لتغيير حجم الصورة وتمركزها وإضافة حدود لها والعديد من الأشياء الأخرى، كالتالي:

    img {
    width: 100px;
    height: 100px;
    }

    والكود سيجعل الصورة بعرض 100 بكسل وارتفاع 100 بكسل.

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

    وفي البداية عليك بمعرفة المجالات الملطوبة في مواقع العمل الحر والتي منها المواقع التالية:

    ومن المفترض أن تكوني متخصصة في أحد المهارات التالية للعمل على المواقع السابقة:

    • أعمال وخدمات استشارية
    • برمجة، تطوير المواقع والتطبيقات
    • هندسة، عمارة وتصميم داخلي تصميم
    • فيديو وصوتيات
    • تسويق إلكتروني ومبيعات
    • كتابة، تحرير، ترجمة ولغات
    • دعم، مساعدة وإدخال بيانات
    • تدريب وتعليم عن بعد

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

    والأمر قد يبدوا معقد من الخارج، لكن خطوة بخطوة سيسهل الأمر عليك والجميع بدأ من نقطة الصفر.

    وبالنسبة للمدة اللازمة لتعلم أي مهارة، ففي رأي من 6 شهور وحتى سنة أو سنتين، حيث أن الأمر يتوقف على مقدار إجتهادك، وأيضًا معلوماتك المتوفرة أو خبراتك التي قد تساعدك في التعلم بشكل أسرع.

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

     

  7. ما تحتاج إليه يدعى loaders  أو Spinners ويتم إنشائها من خلال CSS، وستجد العديد من النماذج الجاهزة على الإنترنت ولست بحاجة إلى إنشاء loader من البداية مثلاً لو بحثت عن css loader ستجد مواقع ومنها:

    وكل ما عليك هو نسح كود HTML وCSS للشكل الذي نال إعجابك، ثم تمضينه في مشروعك وكتابة كود جافاسكريبت لعرض الـ Loader في الوقت المناسب وإليك مثال لشكل اخترته من المواقع السابقة:

    HTML:

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="css/style.css" />
        <script defer src="js/scripts.js"></script>
        <title>Document</title>
      </head>
      <body style="background-color: black">
        <button id="loaderBtn">ابدأ التحميل</button>
        <div class="loader-container">
          <span class="loader"></span>
        </div>
      </body>
    </html>

    CSS:

    .loader {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      max-width: 6rem;
      margin-top: 3rem;
      margin-bottom: 3rem;
    }
    .loader:before,
    .loader:after {
      content: '';
      position: absolute;
      border-radius: 50%;
      animation: pulsOut 1.8s ease-in-out infinite;
      filter: drop-shadow(0 0 1rem rgba(255, 255, 255, 0.75));
    }
    .loader:before {
      width: 100%;
      padding-bottom: 100%;
      box-shadow: inset 0 0 0 1rem #fff;
      animation-name: pulsIn;
    }
    .loader:after {
      width: calc(100% - 2rem);
      padding-bottom: calc(100% - 2rem);
      box-shadow: 0 0 0 0 #fff;
    }
    
    .loader-container .loader {
      display: none;
    }
    
    @keyframes pulsIn {
      0% {
        box-shadow: inset 0 0 0 1rem #fff;
        opacity: 1;
      }
      50%,
      100% {
        box-shadow: inset 0 0 0 0 #fff;
        opacity: 0;
      }
    }
    
    @keyframes pulsOut {
      0%,
      50% {
        box-shadow: 0 0 0 0 #fff;
        opacity: 0;
      }
      100% {
        box-shadow: 0 0 0 1rem #fff;
        opacity: 1;
      }
    }

    لاحظ أنني نسخت الكود ولكن أضفت له التنسيق التالي من أجل إظهار وإخفاء العنصر من خلال جافاسكريبت:

    .loader-container .loader {
      display: none;
    }

    والآن كود JavaScript:

    وانتبه إلى ليتم عرض الـ loader حتى انتهاء المهمة، يجب أن تقوم المهمة بالتنفيذ بشكل غير متزامن (asynchronously)، حتى لا يتوقف تحميل الصفحة أثناء تنفيذ المهمة.

    أي نستخدم Promise و async/await في الدالة التي تقوم بتنفيذ المهمة، وبالتالي ستتمكن من استخدام الـ loader لحين انتهاء المهمة.

    // العناصر المستخدمة
    const loaderBtn = document.getElementById('loaderBtn');
    const loader = document.querySelector('.loader'); // استهداف العنصر الـ loader
    
    // المهمة التي تحاكي العملية التي تستغرق وقتًا
    function simulateTask() {
      return new Promise(resolve => {
        setTimeout(() => {
          // اكمل هنا ما ترغب بعمله في المهمة (مثال: تنفيذ طلب API أو عملية طويلة)
          resolve(); // اكمل هنا إذا كان هناك بيانات نريد إرجاعها بعد الانتهاء
        }, 3000); // هنا تحدد فترة التنفيذ بالميلي ثانية (3 ثواني مثال)
      });
    }
    
    // الدالة التي تنفذ عند النقر على الزر
    async function startLoading() {
      console.log('www');
      loaderBtn.disabled = true; // تعطيل الزر أثناء التحميل
      loader.style.display = 'flex'; // إظهار الـ loader
    
      try {
        // قم بتنفيذ المهمة الغير متزامنة (asynchronously)
        await simulateTask();
    
        // تنفيذ هذا الجزء فقط عندما ينتهي التنفيذ بنجاح
        loader.style.display = 'none'; // إخفاء الـ loader بعد الانتهاء من التحميل
        loaderBtn.disabled = false; // تمكين الزر بعد الانتهاء من التحميل
      } catch (error) {
        // إدارة الأخطاء إن وجدت
        console.error('حدث خطأ أثناء التحميل:', error);
        loader.style.display = 'none'; // إخفاء الـ loader في حالة حدوث خطأ
        loaderBtn.disabled = false;
      }
    }
    
    // إضافة مستمع للنقر على الزر
    loaderBtn.addEventListener('click', startLoading);

    والنتيجة هي كالتالي:

    2023-07-31_13-33-54.thumb.gif.d7827efd0757abb55ee49d8dacaaecc2.gif

  8. بالإَضافة إلى ما تم ذكره، تستطيع كتابة التعليقات بكل سهولة في برنامج vscode من خلال الضغط على CTRL + /  وعلامة السلاس تلك هي حرف ظ في لوحة المفاتيح وبالطبع يجب أن تقوم بتحويل اللغة إلى الإنجليزية قبل الضغط.

    وستجد أن تم تعليق السطر الذي قمت بالوقوف عنده بشكل تلقائي كالتالي:

    Snag_45dddd.thumb.png.f9ead05480678dd082eebc1503ab83e3.png

    ولعمل تعليق لأكثر من سطر عليك بتحديد السطور التي تريد تعليقها ثم الضغط على CTRL + /  كالتالي:

    Snag_6b96a9.thumb.png.c02e4448da8d2e66f96cd14b2e2a744e.png

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

    وإذا تعليق تلك السطور ضمن تعليق متعدد السطور أي Block Comment فعليك بالضغط على Shift + Alt + A وسيصبح الكود كالتالي:

    Snag_72e729.thumb.png.8ae18517c1cfcfc68fe4c6e7a18ed2d8.png

  9. هناك طريقتان لإدارة حملات Google Ads نيابة عن العميل:

    1- تعيينك مديرًا للحملة الإعلانية، وذلك هو الخيار الأفضل إذا كنت ستدير حملات Google Ads للعميل بشكل منتظم، وبصفتك مديرًا للحملة الإعلانية، سيكون لديك حق الوصول الكامل إلى حساب Google Ads للعميل وستتمكن من إجراء أي تغييرات مطلوبة.

    ولجعلك مديرًا للحملة الإعلانية، سيحتاج العميل إلى منح حق الوصول لك إلى حساب Google Ads الخاص به، ويمكن القيام بذلك من خلال صفحة إعداد حساب Google Ads.

    1. قم بتسجيل الدخول إلى حساب Google Ads الخاص بالعميل.
    2. انقر على رمز الإعدادات في الزاوية العلوية اليمنى من الصفحة.
    3. انقر على "المستخدمون والحسابات".
    4. انقر على "إضافة مستخدم".
    5. أدخل عنوان بريدك الإلكتروني في حقل "بريد إلكتروني".
    6. حدد دور "مدير الحملة الإعلانية".
    7. انقر على "إضافة".

    بمجرد منح حق الوصول لك، ستتمكن من تسجيل الدخول إلى حساب Google Ads للعميل وإدارة الحملة الإعلانية.

    2- استخدام حساب Google Ads الخاص بك لإنشاء الحملة الإعلانية للعميل، وهو الخيار الأفضل إذا كنت ستدير حملات Google Ads للعميل بشكل غير منتظم، وبصفتك مديرًا للحساب، ستحتاج إلى مشاركة بيانات اعتماد حساب Google Ads الخاص بك مع العميل حتى يتمكن من عرض التقارير وإجراء التغييرات على الحملة الإعلانية حسب الحاجة.

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

    1. قم بتسجيل الدخول إلى حساب Google Ads الخاص بك.
    2. انقر على رمز الإعدادات في الزاوية العلوية اليمنى من الصفحة.
    3. انقر على "المستخدمون والحسابات".
    4. انقر على "إضافة مستخدم".
    5. أدخل عنوان بريد العميل الإلكتروني في حقل "بريد إلكتروني".
    6. حدد دور "المشاهد".
    7. انقر على "إضافة".

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

    فيما يلي بعض النصائح الإضافية لمنح العميل حق الوصول إلى حسابك:

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

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

    هناك عدة أنواع من الثغرات وأسبابها، ومنها:

    ثغرات البرمجة

    تنشأ نتيجة أخطاء في كتابة الشفرة البرمجية، مثل استخدام غير صحيح للمتغيرات أو عمليات غير صحيحة تؤدي إلى سلوك غير متوقع، ومن الأمثلة الشهيرة على ذلك ثغرة "قلب الأمر" (Heartbleed) في بروتوكول OpenSSL الذي كان يسمح للمهاجمين بسرقة بيانات الذاكرة.

    ثغرات التصميم

    تحدث بسبب سوء التخطيط أو التصميم العام للبرمجيات، مما يجعلها عرضة للاختراق، مثال على ذلك ثغرة "المصعد" (Elevator) حيث يمكن للمستخدم الوصول إلى مستويات غير مخول له.

    ثغرات الأمان

    تنشأ نتيجة عدم تنفيذ ممارسات أمان قوية، مما يسمح للمهاجمين بالاختراق والوصول إلى المعلومات الحساسة، مثلاً، ثغرات في الاستجابة البينية لمواقع الويب قد تسمح للمهاجمين بتنفيذ هجمات حقن الشيفرة (Code Injection)، مثل هجمات SQL Injection.

    وهناك العديد من الطرق المختلفة لاكتشاف الثغرات الأمنية، بما في ذلك:

    • اختبار الاختراق Penetration Testing وهي عملية تقييم النظام الأمني عن طريق محاكاة هجوم من قبل المهاجم.
    • تحليل الكو وهي عملية مراجعة الكود المصدري للبرنامج بحثًا عن الأخطاء أو العيوب التي يمكن استغلالها.
    • يمكن للمستخدمين الإبلاغ عن الثغرات الأمنية التي يجدونونها إلى الشركة المصنعة أو المطور.

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

    وفي بعض الدول العربية، في حال لم يوجد برنامج مكافآت أو نظام للإبلاغ عن الثغرات، فستتعرض للمسائلة القانونية لأنك اكتشتف ثغرة وحاولت إختراق الموقع!! بدلاً من أن يتم شكرك مكافأتك.

    وهناك أشخاص وظيفتهم هي البحث عن الثغرات والتكسب منها من خلال برامج المكافآت Bug Bounty Programs التي تعلن عنها الشركات، مثلاً في فيسبوك تحسب المكافآت المالية بناءًا على خطورة الثغرة:

    • منخفضة 500 دولار
    • متوسطة 1000 دولار
    • عالية 5000 دولار
    • حرجة 10000 دولار

    وهناك شركات تقدم مكافآت أعلى.

    • أعجبني 1
  11. أولاً لا تترك بلدك أبدًا لتبحث عن عمل في دولة غريبك عنك، بل عليك باكتساب الخبرة في بلدك ثم التقدم للوظائف المعروضة في الدول العربية أو الأجنبية ثم الحصول على عقد عمل، وكلمة السر هي عقد عمل، فبدونه ستعاني وستواجه الكثير من المشاكل، ويجب أن يكون عقد العمل به المسمى الوظيفي الخاص بوظيفتك التي تريد العمل بها وليس وظيفة أخرى.

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

    وتستطيع البحث على مواقع مثل LinkedIn و Indeed و منصة بعيد، ومواقع مثل weworkremotely.

  12. كلاهما مطلوبان في سوق العمل، حيث ستجد أن يتم طلب Django تحت مسمى Full Stack Developer أي ستعمل على تطوير الواجهة الأمامية والخلفية كمطور بايثون وقد يتم طلب React أيضًا لتطوير الواجهة الأمامية، أو أحيانًأ يتم طلب Django تحت مسمى وظيفي Backend Developer وستجد أنه مطلوب مثلاً  (Django/PostgreSQL) للواجهة الخلفية.

    أما Laravel فهى بالطبع الأكثر طلبًا سواء على مواقع العمل الحر أو في الشركات، ويتم الإعتماد على إطار لارافل بشكل أكبر في إنشاء المواقع مقارنًة بـ Django.

    وأفضل طريقة لمعرفة ذلك، هي بالبحث بالكلمات المفتاحية على مواقع التوظيف مثل LinkedIn والبحث بكلمات مثل "Django, Back-End developer, python developer, Laravel developer , PHP developer".

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

    • أعجبني 1
  13. التنبيه

    "DevTools failed to load source map: Could not load content for chrome-extension://pejiikdiikindfooppgaidccahalenih/webspeed.js.map: System error: net: ERR_BLOCKED_BY_CLIENT"

    يعني خطأ في تحميل خريطة المصدر (source map) في جوجل كروم، وتعرف خريطة المصدر بأنها ملف يرتبط بملف JavaScript وتساعد في تحسين عملية تصحيح الأخطاء وتصفح الشيفرة المصدرية عند تطوير الويب، ولكن، قد يحدث خطأ في تحميل خريطة المصدر أحيانًا، مما يؤدي إلى ظهور رسالة الخطأ التي رأيتها.

    وتُبيّن الرسالة أنه لم يتمكن من تحميل محتوى خريطة المصدر من مسار الامتداد (extension) في جوجل كروم بعنوان pejiikdiikindfooppgaidccahalenih واسم الملف هو webspeed.js.map.

    أما System error: net: :ERR_BLOCKED_BY_CLIENT،تشير إلى أن الخطأ تم حظره بواسطة العميل، والعميل هنا يمثل امتداد مثبت على متصفح جوجل كروم يحميك من بعض السلوكيات غير المرغوب فيها على الإنترنت.

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

    وأنا مثلاً لدي تنبيهات مثلها تظهر بسبب إضافات المتصفح لدي:

    Snag_4146b1.thumb.png.4966b64c12d8c4236e4a30bc1aa54db4.png

    وتستطيع حذفها من خلال الضغط على الأيقونة التالية لحذف جميع الرسائل من الكونسول.

    2023-07-30_12-14-56.png.e5df6d3e676fe919ddbbd61e2a46aa04.png

  14. باستطاعتك الإعتماد على خدمة Google Cloud Storage لإنشاء رابط Blob ذي صلاحيات محدودة، وإليك الخطوات:

    • انتقل إلى لوحة القيادة في Google Cloud Platform.
    • انقر فوق "خدمات".
    • انقر فوق "تخزين Google Cloud".
    • انقر فوق "حاوية".
    • انقر فوق الحاوية التي يحتوي عليها الملف الذي تريد إنشاء رابط Blob له.
    • انقر فوق الملف الذي تريد إنشاء رابط Blob له.
    • في قسم "الروابط"، انقر فوق "إنشاء رابط".
    • في نافذة "إنشاء رابط"، حدد الخيار "رابط Blob".
    • في قسم "الصلاحيات"، حدد مستوى الوصول الذي تريد منحه للرابط.
    • انقر فوق "إنشاء".

    سيتم إنشاء رابط Blob وسيتم عرضه في قسم "الروابط"، وتستطيع نسخ ذلك الرابط واستخدامه لعرض الملف على موقعك.

    وإليك مثال على رابط Blob ذي صلاحيات محدودة:

    https://storage.googleapis.com/my-bucket/my-file.mp4?access_token=YOUR_ACCESS_TOKEN

    وفي الرابط، تم تحديد مستوى الوصول إلى "القراءة فقط"، أي أن المستخدمين لن يتمكنوا من تنزيل الملف أو نسخه أو مشاركته.

    أيضًا بإمكانك استخدام API Google Cloud Storage لإنشاء رابط Blob ذي صلاحيات محدودة، كالتالي:

    curl -X POST \
      -H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
      -H "Content-Type: application/json" \
      -d '{
        "name": "my-file.mp4",
        "generation": 1234567890,
        "contentType": "video/mp4",
        "accessControl": {
          "bucketPolicy": {
            "roles": {
              "roles/storage.objectViewer": [
                "user:YOUR_USER_EMAIL"
              ]
            }
          }
        }
      }' \
      "https://storage.googleapis.com/v1/b/my-bucket/o"

    والاستجابة من API Google Cloud Storage هي ردًا يتضمن رابط Blob ذي صلاحيات محدودة، وتستطيع نسخ الرابط واستخدامه لعرض الملف على موقعك.

    أو بإمكانك الإعتماد على موقع استضافة للفيديو مثل "فيمو" أو أي بديل آخر يناسبك، وأنت تحدد النطاق (الدومين) المسموح بأن تعمل عليه الفيديوهات، وهو نطاق موقعك الخاص،  وتتم هذه العملية عن طريق ضبط إعدادات حساب استضافة الفيديو لديك ليتم قبول النطاق الخاص بك كنطاق موثوق به (trusted domain).

    أو هناك خيار آخر وهو استخدام تقنية DRM (إدارة الحقوق الرقمية) للحماية من المحتوى الخاص بك، وDRM هي تقنية تسمح لك بتقييد الوصول إلى المحتوى الخاص بك، بحيث لا يمكن للمستخدمين مشاهدته أو تنزيله إلا إذا كانوا مصرح لهم بذلك، وهناك العديد من حلول DRM المختلفة المتاحة، ويمكنك اختيار الحل الذي يناسب احتياجاتك الخاصة.

    وأرشح لك الخدمات التالية:

    وتستطيع البحث عن Video streaming CDN يدعم خاصية DRM لكنه بالطبع مكلف أكثر، تستطيع البحث واختيار المزود المناسب للميزانية الخاصة بك.

    • أعجبني 1
  15. بتاريخ 17 ساعة قال Drive Man:
    repositories {
        maven {
            url "https://github.com/wseemann/FFmpegMediaMetadataRetriever"
        }
    }

    فى مشكلة بسبب السطر ده 

    عليك بإضافة مستودع JitPack  إلى إلى قسم repositories في ملف build.gradle:

    repositories {
    	...
    	maven { url 'https://jitpack.io' }
    }

    ثم، تحتاج إلى إضافة تبعية FFmpegMediaMetadataRetriever إلى قسم dependencies في ملف build.gradle:

    dependencies {
     implementation 'com.github.wseemann.FFmpegMediaMetadataRetriever:FFmpegMediaMetadataRetriever-core:v1.0.15'
    	}

    وفي حال أردت إضافة أي مستودع لمكتبة أخرى نتوجه إلى موقع https://jitpack.io ثم ألصق رابط المستودع الخاص بالمكتبة على GitHub وستظهر لك الإصدارات المتاحة ونضغط على get it وستجد الرابط بالأسفل:

    2023-07-30_11-35-58.thumb.png.8a772901074b036c69d7f2ef36e626fa.png

    وتستطيع قراءة المستند الرسمي الخاص بالمكتبة في حال واجهتك مشكلة معينة:

  16. عليك بالتسويق في البداية في المجموعات المهتمة بذلك النوع من المنتجات على الفيسبوك، وأيضًا الـ Market Place الخاص به، وأيضًا حاول تكوين مجموعة على التيليجرام لتكوين قاعة عملاء وإغرائهم بخصم لكل من يشترك في المجموعة.

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

    بالإضافة إلى إنشاء مدونة على المتجر وكتابة محتوى مفيد حقًا يبحث عنه من يهتم بمنتجاتك ولا يجب أن يقل المحتوى عن 1000 كلمة وتكون مفيدة وليست حشو بدون داعي.

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

  17. ما هو الخطأ الذي يظهر لك، يجب تحديد الخطأ لحل المشكلة، وربما لديك تعارض في إصدارات الحزم conflict peer dependencies ولحل المشكلة، عليك باستخدام مؤشر أو --legacy-peer-deps عند التثبيت أي كالتالي:

    npm i --legacy-peer-deps

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

    ومن الأفضل استخدام الحزم المتوافقة مع بعضها، من خلال تحديث الحزم من خلال تشغيل حزمة  npm-check-updates بالأمر التالي:

    npx npm-check-updates

    وسيتم تحديث إصدارات الحزم في ملف package.json والآن عليك بالتثبيت من خلال الأمر npm i.

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

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

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

    • أعجبني 1
  19. الخوارزمية الأساسية للعبة XO في الوقت الفعلي باستخدام React، Node.js، وSocket.IO ستكون كالتالي:

    يجب أن يتم التواصل بين العميل (Client) والخادم (Server) باستخدام تقنية الـ WebSockets التي توفر اتصالًا ثنائي الاتجاه حي بين العميل والخادم، وبالطبع تستطيع استخدام Socket.IO لتبسيط عملية التواصل عبر WebSockets.

    • اتصال العميل بالخادم:

    عند تحميل صفحة اللعبة على المتصفح، ينشئ إتصال Socket.IO بين العميل والخادم.

    • إبلاغ الخادم باللاعبين:

    عندما ينضم اللاعبين إلى اللعبة، ترسل بيانات معرف الجلسة (Session ID) إلى الخادم باستخدام Socket.IO لإعلام الخادم بوجود اللاعبين.

    • بدء اللعبة:

    يجب أن يكون لديك آلية لبدء اللعبة عند انضمام لاعبين كافيين (مثلاً  حد أدنى لعدد اللاعبين).

    • إدارة الحركات:

    عندما يقوم أحد اللاعبين بعمل حركة (وضع "X" أو "O" على اللوح)، ترسال تلك الحركة إلى الخادم باستخدام Socket.IO.

    الخادم يتحقق من صحة الحركة ويتحقق مما إذا كانت الخانة محجوزة بالفعل أم لا.

    في حال كانت الحركة صحيحة، يتم تحديث اللوح بالحركة الجديدة وإعلام العميل الآخر بالحركة الجديدة.

    • التحقق من الفوز:

    بعد كل حركة، يجب على الخادم التحقق من ما إذا كان هناك لاعب فاز باللعبة.

    في حالة الفوز، يتم إعلام اللاعبين بالنتيجة وإيقاف اللعبة.

    • إدارة نهاية اللعبة:

    إذا انتهت اللعبة بسبب الفوز أو التعادل أو أي سبب آخر، يتم إغلاق الاتصال بين العميل والخادم.

    • أعجبني 1
  20. هناك طريقتان لتحميل الصور على Google Colab، والأولى هي تحميل الصور من حاسوبك عن طريق التالي:

    1. انقر فوق رمز "ملف" في شريط الأدوات.
    2. حدد "تحميل".
    3. حدد الصور التي تريد تحميلها.
    4. انقر فوق "فتح".

    وسيقوم Google Colab بتحميل الصور إلى محرك الأقراص الخاص بك.

    والثانية هي تحميل الصور من Google Drive من خلال التالي:

    1. انقر فوق رمز "ملف" في شريط الأدوات.
    2. حدد "محرك الأقراص".
    3. حدد المجلد الذي يحتوي على الصور التي تريد تحميلها.
    4. انقر فوق "إضافة إلى colab".

    ولتثبيت مكتبة face-recognition، اتبع الخطوات التالية:

    في الخلية الأولى، اكتب الكود التالي، ولاحظ وجود علامة ! في البداية:

    !pip install face_recognition

    انقر فوق تشغيل الخلية.

    وسيعمل الكود على تثبيت مكتبة face-recognition على Google Colab، وإليك مثال على كيفية استخدام مكتبة face-recognition لتحديد الوجوه في الصور:

    import face_recognition
    
    # Load the image
    image = face_recognition.load_image_file("image.jpg")
    
    # Find all the faces in the image
    faces = face_recognition.face_locations(image)
    
    # Print the coordinates of the faces
    for face in faces:
        print(face)

     

    • أعجبني 1
  21. الأمر لا يمكن تخمينه بشكل جذافي هنا، بل عليك بتوكيل تلك المهمة إلى محاسب مختص بأمور الشركات أو محلل مالي مؤهل ومختص في التقييم المالي للشركات.

    فأنت ذكرت أن نسبتك هي 10% مما يعني أنه يوجد نسبة من الأرباح بقيمة 10% سنويًا ومن المفترض صرفها في حال مرور عام مالي.

    بعد ذلك يجب تصفية الشراكة ببيع نسبتك من الشركة وهي 10% ومن المفترض أن يتم تقييمها بناءًا على قيمة الشركة الحالية لا على القيمة التي دفعتها أنت.

    وهناك طريق آخر لكن لا أفضله، وهو الإتفاق على دفع مبلغ ترضاه أنت مقابل بيع حصتك بدون الأمور السابق ذكرها، أي مثلاً لو دفعت 100 ألف دولار، ورضيت بقيمة 300 ألف دولار مثلاً، فيتم بيع حصتك للطرف الآخر بناءًا على ذلك.

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

    ولنفترض مثلاً أنك اخترت بايثون لتصبح لغة البرمجة الأولى لك، هنا لا تتسرع وتهرع إلى تعلم مهارة الـ Problem Solving بل عليك بالصبر والتعمق في لغة البرمجة الأولى لك ولا تحيد عنها، فكل ما تعلمته هي الأساسيات فقط.

    ويمكنك الاستزادة من خلال دراسة المسار الأول من دورة بايثون، وهو أساسيات لغة بايثون Python وهو متاح لك بشكل مجاني، وبالمثل المسار الأول من دورة جافاسكريبت أو حتى PHP وستجد شرح للأساسيات بشكل مفصل أكثر.

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

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

    وبتلك الخطوات ستتجنب الشعور بالإحباط بدون داعي، وستتمكن من تطوير مهاراتك البرمجية على أساس صحيح.

    وخصص لكل مسألة برمجية نصف ساعة إلى ساعة حسب صعوبة المسألة، ثم انظر للحل وتعلم منه وحاول الحل بمفردك، ثم انتقل للمسألة التالية، ولا تستغرق يوم كامل في حل مسألة مثلاً.

    وبالطبع عليك بالتدرج في حل المسائل من الأسهل للأصعب ولا تبدأ أبدًا بالمسائل الصعبة.

  23. يعتمد الرمز المستخدم لإعادة تشغيل جهاز التوجيه على نوع وموديل الجهاز، والرمز مختلف لكل جهاز، لذلك سأقدم لك نموذجًا عامًا يمكن أن يعمل على بعض الأجهزة، ولكن يجب عليك التأكد من أن الأمر يتوافق مع جهاز التوجيه الخاص بك.

    وقبل أن نستمر، يجب التأكد من أن جهاز التوجيه لديك يدعم إعادة التشغيل البعيدة عن طريق بروتوكولات مثل SNMP أو Telnet أو SSH، وإذا كان الجهاز لا يدعم تلك الخاصية، فلن يكون من الممكن تنفيذ إعادة التشغيل برمجيًا.

    وفيما يلي نموذج يستخدم بروتوكول Telnet لإعادة تشغيل جهاز التوجيه، ولاحظ أنه يجب تعيين معلومات الاتصال الصحيحة لجهاز التوجيه، بما في ذلك عنوان IP واعتمادات الدخول (اسم المستخدم وكلمة المرور) إذا كان لازم.

    Imports System.Net.Sockets
    Imports System.Text
    
    Public Class Form1
    
        Private Sub RebootRouter()
            Dim ipAddress As String = "192.168.1.1" ' تغيير هذا إلى عنوان IP الصحيح لجهاز التوجيه الخاص بك
            Dim port As Integer = 23 ' افتراضياً يكون منفذ Telnet هو 23
            Dim username As String = "اسم_المستخدم" ' تغيير هذا إلى اسم المستخدم الصحيح إذا كان اللازم
            Dim password As String = "كلمة_المرور" ' تغيير هذا إلى كلمة المرور الصحيحة إذا كان اللازم
    
            Try
                Dim client As New TcpClient(ipAddress, port)
                Dim stream As NetworkStream = client.GetStream()
                Dim data As Byte() = New Byte(1024) {}
    
                Dim bytes As Int32 = stream.Read(data, 0, data.Length)
                Dim response As String = Encoding.ASCII.GetString(data, 0, bytes)
    
                If response.Contains("login:") Then
                    Dim login As Byte() = Encoding.ASCII.GetBytes(username + vbCr)
                    stream.Write(login, 0, login.Length)
    
                    bytes = stream.Read(data, 0, data.Length)
                    response = Encoding.ASCII.GetString(data, 0, bytes)
    
                    If response.Contains("Password:") Then
                        Dim pass As Byte() = Encoding.ASCII.GetBytes(password + vbCr)
                        stream.Write(pass, 0, pass.Length)
    
                        bytes = stream.Read(data, 0, data.Length)
                        response = Encoding.ASCII.GetString(data, 0, bytes)
    
                        If response.Contains(">") Then
                            Dim reboot As Byte() = Encoding.ASCII.GetBytes("reboot" + vbCr)
                            stream.Write(reboot, 0, reboot.Length)
                        End If
                    End If
                End If
    
                stream.Close()
                client.Close()
            Catch ex As Exception
                ' ادرج هنا رمزًا للتعامل مع أي استثناء قد يحدث أثناء تنفيذ عملية إعادة التشغيل
            End Try
        End Sub
    
        Private Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
            RebootRouter()
        End Sub
    End Class

     

  24. بالنسبة لقائمة التنقل Navbar فمن الأفضل جعل الشعار بحجم أكبر وأيضًا تجنب أن يكون الشعار عام جدًا وأعلم أنك ما زلت تتعلم لكن لمعلوماتك فقط، أي استخدم أيقونة مثلاً من موقع flaticon ولو بحثت عن travel ستجد الكثير من الأيقونات الجيدة حملها بصيغة PNG واستخدمها.

    أيضًا روابط التنقل يجب أن تكون ظاهرة للمستخدم، عليك بجعلها تظهر في المنتصف مثلاً مع تغيير اللون الخاص بالروابط، فعند تصميم واجهات المستخدم هناك نقطة هامة ألا وهي التباين Contrast فكما ترى هناك روابط تظهر بشكل غير واضح عليك بزيادة حجم الخط وإختيار اللون الأبيض لكل الروابط مثلاً، مع تغيير اللون قليلاً عند عمل Hover مثلاً.

    وتستطيع استخدام الأداة التالية من أجل قياس درجة التباين:

    حيث يجب أن تكون على الأقل 5 وبإمكانك الضغط على enhance وإختيار تغيير لون الخلفية أو الخط من أجل تحسين التباين تلقائيًا لك.

    2023-07-29_17-34-20.thumb.png.5a61c380f17a1f6f0882a2072648b37c.png

    وبالنسبة لقسم Hero وهو القسم الرئيسي الذي يأتي بعد قائمة التنقل، حاول ضبط التسلسل الهرمي في التصميم hierarchy حاول البحث على اليوتيوب عن "التسلسل او الانسيابيه ( Hierarchy ) مبادئ التصميم" وستفهم ما أقصده وإليك مثال:

    hero-image-website-visual-hierarchy.thumb.png.948dcac3aed79c29dbf1923125b8db9f.png

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

    وأيضًا من الأفضل ذكر شعور أو حالة مثلاً في نص الزر، مثل سافر معنا بدلاً من اتصل بنا.

    بالنسبة لباقي الأقسام حاول تجنب استخدام الظل بالألوان بتلك الطريقة، يكفي فقط وجود ظل باللون الأسود الخفيف وستجد هنا الكثير من الأمثلة التي يمكنك التعلم منها:

    Snag_1518af3.thumb.png.450ccd3df32ad2a51c5cfbc1d71560ee.png

    • أعجبني 1
×
×
  • أضف...