YomnaRaouf

28 17.1 ألف مشاهدات المحتوى عضو منذ
YomnaRaouf تطوير الويب

يمكنك استخدام الحدث window.onbeforeunload حيث يتم عمل trigger لهذا الحدث عندما تكون الصفحة أو المتصفح على وشك الإغلاق. يمكنك عندها أن تقوم بحذف العناصر التي تريدها من ال sessionStorage أو حذف جميع محتوياتها

$(window).on("beforeunload", function() {
  sessionStorage.removeItem('item'); 
  // sessionStorage أو لحذف جميع محتويات 
  sessionStorage.clear()
});
يمكنك استخدام الحدث window.onbeforeunload حيث يتم عمل trigger لهذا الحدث عندما تكون الصفحة أو المتصفح على وشك الإغلاق. يمكنك عندها أن تقوم بحذف العناصر التي تريدها من ال sessionStorage أو حذف جميع محتوياتها $(window).on("beforeunload", function() { sessionStorage.removeItem('item'); // sessionStorage أو لحذف جميع محتويات sessionStorage.clear() });
YomnaRaouf برمجة

يوجد العديد من أُطُر العمل التي تمكنك من بناء تطبيقاتسطح المكتب منها ما هو مختص ببناء تطبيقات لنظام تشغيل معين، و منها ما يمكنك استخدامه لبناء تطبيقات تعمل على جميع أنظمة التشغيل "cross platform"، أشهر أُطُر العمل المستخدمة:

  • Windows Presentation Foundation (WPF): و هو إطار عمل في إطار العمل Net. و هو يستخدم لبناء تطبيقات لنظام ال windows
  • Universal Windows Platform (UWP): و هو إطار عمل في إطار العمل Net. و لكنه يستخدم لبناء تطبيقات تعمل على جميع أنظمة التشغيل "نقوم بكتابة شيفرة مرة واحدة فقط، و تعمل على جميع الأنظمة"، و يعتبر أفضل من إطار العمل السابق من جهة الأداء
  • Cocoa : إطار عمل يستخدم لبناء تطبيقات تعمل على نظام MacOs
  • Electron Js: إطار عمل يستخدم لغة JavaScript لبناء تطبيقات سطح المكتب و هو يستخدم لبناء تطبيقات تعمل على جميع أنظمة التشغيل أيضًا و هو إطار العمل المستخدم لبناء محرر الأكواد الشهير Visual Studio Code
  • Swing : طار عمل يستخدم لغة Java لبناء تطبيقات سطح المكتب و هو يستخدم لبناء تطبيقات تعمل على جميع أنظمة التشغيل

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

يوجد العديد من أُطُر العمل التي تمكنك من بناء تطبيقاتسطح المكتب منها ما هو مختص ببناء تطبيقات لنظام تشغيل معين، و منها ما يمكنك استخدامه لبناء تطبيقات تعمل على جميع أنظمة التشغيل "cross platform"، أشهر أُطُر العمل المستخدمة: Windows Presentation Foundation (WPF): و هو إطار عمل في إطار العمل Net. و هو يستخدم لبناء تطبيقات لنظام ال windows Universal Windows Platform (UWP): و هو إطار عمل في إطار العمل Net. و لكنه يستخدم لبناء تطبيقات تعمل على جميع أنظمة التشغيل
YomnaRaouf برمجة

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

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

ما تريد القيام به يسمى web scraping و هو بالطبع أمر غير ممنوع من قِبَل youtube و يمكنك القيام بذلك باستخدام لغة python مثلًا مع بعض المكتبات مثل beautifulSoup و selenium.

هذا مثال ل scraping لعدد المشاهدات لفيديو من اليوتيوب:

import requests
from bs4 import BeautifulSoup

url = 'https://www.youtube.com/watch?v=ywZevdHW5bQ'

soup = BeautifulSoup(requests.get(url).text, 'lxml')

print(soup.select_one('meta[itemprop="interactionCount"][content]')['content'])

و سيكون الناتج منه رقم كهذا

5186856
ما تريد القيام به يسمى web scraping و هو بالطبع أمر غير ممنوع من قِبَل youtube و يمكنك القيام بذلك باستخدام لغة python مثلًا مع بعض المكتبات مثل beautifulSoup و selenium. هذا مثال ل scraping لعدد المشاهدات لفيديو من اليوتيوب: import requests from bs4 import BeautifulSoup url = 'https://www.youtube.com/watch?v=ywZevdHW5bQ' soup = BeautifulSoup(requests.get(url).text, 'lxml') print(soup.select_one('meta[itemprop="interactionCount"][content]')['content']) و سيكون الناتج منه رقم كهذا 5186856
YomnaRaouf برمجة

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

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

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

مرحبًا حازم

حتى تصبح مطور مواقع يمكنك أن تبدأ بتعلم أساسيات البرمجة و مفاهيمها الأساسية و بعدها يمكنك أن تنتقل لتعلم لغات مثل html و css و javaScript و الذين يتم استخدامهم لبناء واجهات المستخدم "واجهة الصفحات التي يتعامل معها المستخدم" و بعدها تتعلم مكتبة لبناء واجهات المستخدم مثل React.js مثلًا بعدها يمكنك الانتقال إلى تعلم كيفية بناء ال backend باستخدام node js و express "يستخدمان لغة جافاسكريبت" أو laravel "تستخدم لغة php" "" و قواعد البيانات مثل mongodb و postgresql.

و هذه مقالة شاملة ستتعرف من خلالها على الطرق التي تستطيع سلكها لتعلم البرمجة:

بالتوفيق

مرحبًا حازم حتى تصبح مطور مواقع يمكنك أن تبدأ بتعلم أساسيات البرمجة و مفاهيمها الأساسية و بعدها يمكنك أن تنتقل لتعلم لغات مثل html و css و javaScript و الذين يتم استخدامهم لبناء واجهات المستخدم "واجهة الصفحات التي يتعامل معها المستخدم" و بعدها تتعلم مكتبة لبناء واجهات المستخدم مثل React.js مثلًا بعدها يمكنك الانتقال إلى تعلم كيفية بناء ال backend باستخدام node js و express "يستخدمان لغة جافاسكريبت" أو laravel "تستخدم لغة php" "" و قواعد البيانات مثل mongodb و
YomnaRaouf برمجة

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

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

• ملحق WordPress SEO من Yoast:

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

• Quick Cache:

يستخدم  لتسريع عملية التحميل، لأنه إذا كان تحميل الموقع سريعا، سيحصل على تقييم أعلى من حيث SEO

• SEO Friendly Images: يقوم هذا الملحق بملء حقول "Title" (العنوان) و "Alt Text" (النص البديل) للصور الموجودة في مدونتك، و هذا من الأمور المهمة التي يجب القيام بها

• YARPP:

يقوم هذا الملحق باقتراح مقالات ذات صلة بالمقال الذي أنهى القارئ قراءته للتو. وبالتالي يتم استدراج القارئ لقراءة المزيد على المدونة، مما يعني أن معدل الارتداد bounce rate سيقل. ومعدل الارتداد المنخفض يعنيSEO أفضل.

أعتقد أن أفضل حل هو توظيف خبير SEO من منصة مستقل أو أي منصة عمل حر و تجعله يتولى هذا الأمر إن لم تكن لديك خبرة في هذا المجال. أيضًا يوجد بعض الملحقات التي يمكنك استخدامها لتهيئة المدونة الخاصة بك لمحركات البحث، منها: • ملحق WordPress SEO من Yoast: يساعدك هذا الملحق على تحسين كل مقال تكتبه لتهيئته لمحركات البحث. وعندنا تنتهي من الكتابة، سيقوم بتقييم المقال بثلاثة تقييمات: الأحمر، الأصفر، أو الأخضر، اعتمادا على جودة ما أنجزته. بعد ذلك
YomnaRaouf برمجة

أوافقك الرأي في جزئية الخادم المشترك، أمّا عن بناء التطبيق باستخدام إطار العمل Flutter فلا بأس أبدًا به، فهو إطار عمل تم تطويره من قِبَل google لبناء تطبيقات الهواتف الهجينة أي تعمل على android و ios و هي تقنية ممتازة و أدائها ممتاز، لا يوجد أي مشكلة في استخدامها.

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

يمكنك التحدث معهم و سؤالهم عن معدل النمو المتوقع للمستخدمين و الاستخدام في المستقبل؟ و هل ستتحمل المواصفات التي أشارو إليها معدل النمو هذا أم لا أو ماهي المواصفات التي يمكنها تحمل ذلك.

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

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

أوافقك الرأي في جزئية الخادم المشترك، أمّا عن بناء التطبيق باستخدام إطار العمل Flutter فلا بأس أبدًا به، فهو إطار عمل تم تطويره من قِبَل google لبناء تطبيقات الهواتف الهجينة أي تعمل على android و ios و هي تقنية ممتازة و أدائها ممتاز، لا يوجد أي مشكلة في استخدامها. أما عن مواصفات الخادم فالشخص الوحيد الذي يمكنه إجابتك على هذا السؤال هو صاحب المشروع/الشركة التي قامت ببرمجة التطبيق الخاص بك. فلا يوجد طريقة واحدة صحيحة لتحديد هذه المواصفات فالأمر يتوقف
YomnaRaouf برمجة

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

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

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

لذا أحد حلول هذه المشكلة هو استخدام الدالة sleep حتى نتأكد من أن الصفحة قد انتهت من التحميل بشكل كامل.

في بعض الأحيان يكون سبب هذا الخطأ هو أن تحميل الصفحة accounts.google.com يكون غير مكتمل، فالأكواد لن تنتظر حتى يتم تحميل الصفحة بشكل كامل حتى تقوم تقوم بتنفيذ الأوامر الأخرى. لذا أحد حلول هذه المشكلة هو استخدام الدالة sleep حتى نتأكد من أن الصفحة قد انتهت من التحميل بشكل كامل. https://suar.me/mJK6w
YomnaRaouf برمجة

HTML5 هي نسخة مُحدثّة من HTML و في التحديثات يتم إضافة وسوم جديدة و حذف وسوم قديمة أو تعديل في طريقة كتابتها، إليك بعض الفروقات بين النسختين.

HTML5

  • تدعم الوسائط المتعددة"الفيديو و المقاطع الصوتية"

  • تدعم تتبع الموقع الجغرافي لزوار المواقع باستخدام واجهة برمجية بسيطة

*تدعم عدة طرق للتخزين

*تدعم ال web sockets

  • عدد قليل من المتصفحات يدعم الوسوم الجديدة

  • ال Vector Graphics مدعومة بصورة افتراضية، فهي تحتوي على وسوم canvas و SVG

HTML

*لا تدعم الوسائط المتعددة"الفيديو و المقاطع الصوتية"

  • تدعم تتبع الموقع الجغرافي لزوار المواقع و لكن الأمر صعب خصوصًا إذا كان المستخدم يسخدم متصفح الهاتف

*تستخدم ال browser cache memory كذاكرة مؤقتة

*لا تدعم ال web sockets

*متوافقة مع جميع المتصفحات

  • ال Vector Graphics غير مدعومة بصورة افتراضية و يجب استخدام أدوات مثل Adobe flash حتى تعمل

و غيرها من الفرقات و لكن المستخدم الآن هو بالتأكيد HTML 5 و ليس HTML.

HTML5 هي نسخة مُحدثّة من HTML و في التحديثات يتم إضافة وسوم جديدة و حذف وسوم قديمة أو تعديل في طريقة كتابتها، إليك بعض الفروقات بين النسختين. HTML5 * تدعم الوسائط المتعددة"الفيديو و المقاطع الصوتية" * تدعم تتبع الموقع الجغرافي لزوار المواقع باستخدام واجهة برمجية بسيطة *تدعم عدة طرق للتخزين *تدعم ال web sockets * عدد قليل من المتصفحات يدعم الوسوم الجديدة * ال Vector Graphics مدعومة بصورة افتراضية، فهي تحتوي على وسوم canvas و SVG HTML *لا تدعم الوسائط
YomnaRaouf تطوير الويب

تطبيق الويب بأكمله بالتأكيد

تطبيق الويب بأكمله بالتأكيد
YomnaRaouf تطوير الويب

في البداية دعني أوضح لك أمرًا ال closures في JavaScript يُطلق عليها أيضًا lexical scoping. أعتقد أن المصطلح الثاني سيجعل الأمور أبسط قليلًا في الفهم. فكلمة lexical تعني أين تمت كتابة متغير ما "موقع كتابة المتغير في الأكواد" و scoping تعني ما هي المتغيرات المتاح لنا الوصول إليها.

دعنا نأخذ المثال التالي. في هذا المثال لدينا دالة لها الاسم a في هذه الدالة قمنا بتعريف المتغر grandpa و هو يحمل السلسلة النصية 'grandpa' و هذه الدالة تقوم بإعادة return دالة أخرى تسمى b و في هذه الدالة قمنا بتعريف متغير يسمى father و له القيمة 'father' و الدالة b تقوم بإعادة دالة تسمى c و في هذه الدالة قمنا بتعريف متغير يسمى son و له القيمة 'son' هذه الدالة تقوم بإرجاع سلسلة نصية تحتوي القيم الخاصة بالثلاث متغيرات grandpa و father و son.

لاحظ النتيجة التي سنحصل عليها من تنفيذ هذا المثال، طبعًا إذا كنت قد عملت ب JS من قبل فبالطبع هذه النتيجة ستكون متوقعة بالنسبة لك. و لكن دعني أسأل سؤالًا، كيف تذكرت الدالة c قيمة المتغير grandpa ؟؟ فكما تعلم في JS عندما ينتهي تنفيذ دالة ما "a مثلًا" يتم حذف هذه الدالة من ال call stack و بالتالي قيمة المتغير الموجود داخلها تمحى من الذاكرة، إذًا كيف علمت الدالة c بقيم المتغيرات grandpa و father؟؟

هنا يأتي دور ال closure حيث أن ال engine الخاص ب JS يقوم بعمل مسح للأكواد قبل تنفيذها و في حال وجد أنه هناك دالة ما تشير إلى متغير موجود خارجها"في دالة سيتم تنفيذها أولًا مثلًا" سيقوم بالاحتفاظ بهذه المتغيرات في ال memory heap حتى تتمكن دالة ما من الوصول إلى المتغيرات الموجودة خارجها و لن يتم حذفها كالمعتاد.

حسنًا و لكن ما فوائد هذا الأمر "ال closure"؟؟ في الحقيقة ال closure له أهمية كبيرة و له العديد من الاستخدامات و لكن أهمها ما يلي:

• الفائدة الأولى لها هي أنها memory efficient لنأخذ المثال التالي:

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

• الفائدة الثانية هي Data Encapsulating ، و هي مشابهة تمامًا لل Immediately invoked function expresssions المعروفة حيث أن المتغيرات أو الدوال لا تكون جميعها معرضة للعامة

في البداية دعني أوضح لك أمرًا ال closures في JavaScript يُطلق عليها أيضًا lexical scoping. أعتقد أن المصطلح الثاني سيجعل الأمور أبسط قليلًا في الفهم. فكلمة lexical تعني أين تمت كتابة متغير ما "موقع كتابة المتغير في الأكواد" و scoping تعني ما هي المتغيرات المتاح لنا الوصول إليها. دعنا نأخذ المثال التالي. في هذا المثال لدينا دالة لها الاسم a في هذه الدالة قمنا بتعريف المتغر grandpa و هو يحمل السلسلة النصية 'grandpa' و هذه الدالة تقوم بإعادة return دالة
YomnaRaouf تطوير الويب

مرحبًا أحمد.

اللغات التي اعتدنا استخدامها سابقًا "منذ نشأة الويب" في بناء المواقع كانت HTML و CSS و JavaScript و لكن بالاعتماد على هذه اللغات الثلاث فقط ظهرت لنا بعض المشاكل منها أنه كل متصفح كان له طريقة و معايير في ترجمة أكواد JavaScript مما شكَّل عبئًا كبيرًا على المُطورين لاضطرارهم لكتابة أكواد مُختلفة لكل متصفح.

لذلك ظهرت مكتبة مثل JQuery حيث أنه وفرت طريقة موحدة لكتابة الأكواد لتتناسب مع جميع المتصفحات.و لكن مع التطبيقات الكبيرة مثل facebook مثلًا ظهرت مشاكل كبيرة مُتعلقة ب JQuery فيما يخص الأداء أيضًا التعامل مع ال DOM و مستمعات الأحداث تعتبر واحدة من أكبر الأمور التي تسبب مشاكل في أداء المواقع performance bottle neck.

مما دفع المُطورين لبناء مكتبات مثل Angular و React و Vue لبناء المواقع لحل المشاكل التي واجهت المطورين مع JQuery حيث أنه كل ما عليك هو وصف الموقع الخاص بك و كيف تريد أن يكون شكل صفحة ما و هكذا و ستتولى المكتبة أمر التعامل مع ال DOM بما ترى أنه مناسب و لا يؤثر على أداء الموقع.

و بالتالي أصبح تعلُم أحد هذه المكتبات أمرًا مهمًا جدًا هذه الأيام و لا يمكن الاكتفاء ب HTML و CSS و JavaScript فقط.

يمكنك تعلُم أي مكتبة منهم و لكن أنصح ب React فهي الأكثر شُهرة و طلبًا في سوق العمل هذه الأيام "على كلٍ إذا تعلمت أحد هذه المكتبات و تقدمت إلى وظيفة تطلب مكتبة أخرى سيقومون بتعليمك إيّاها إذا وجدوا أن أعمالك و مهاراتك ممتازة و مناسبة للوظيفة "

و لكن هذا لا يعني أننا قُمنا بالاستغناء تمامًا عن التقنيات السابقة.

و لكن فيما يخص JQuery بدأ المُجتمع البرمجي بالاستغناء عنها الآن "نسخة bootstrap 5 النسخة الأخيرة استغنت كُليًا الآن عن JQuerry و أصبحت تستخدم DOM ب Vanilla JavaScript " بسبب المشاكل التي تحدث بسببها خاصةً أنه يمكن القيام بنفس الوظائف التي تقوم بها JQuery ب DOM ب Vanilla JavaScript الآن أي جافاسكريبت بدون أي مكتبات. لذلك أنصحك بتعلُم DOM بدلًا من JQuery.

بالتوفيق.

مرحبًا أحمد. اللغات التي اعتدنا استخدامها سابقًا "منذ نشأة الويب" في بناء المواقع كانت HTML و CSS و JavaScript و لكن بالاعتماد على هذه اللغات الثلاث فقط ظهرت لنا بعض المشاكل منها أنه كل متصفح كان له طريقة و معايير في ترجمة أكواد JavaScript مما شكَّل عبئًا كبيرًا على المُطورين لاضطرارهم لكتابة أكواد مُختلفة لكل متصفح. لذلك ظهرت مكتبة مثل JQuery حيث أنه وفرت طريقة موحدة لكتابة الأكواد لتتناسب مع جميع المتصفحات.و لكن مع التطبيقات الكبيرة مثل facebook مثلًا ظهرت
YomnaRaouf تطوير الويب

مرحبًا ياسين.

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

بالتحاقك بهذه الدورة ستحصل على:

• 43 ساعة فيديو تدريبي

• شهادة معتمدة من أكاديمية حسوب

• متابعة أثناء الدورة من قبل فريق مختص يقوم بالإجابة على جميع استفساراتك و أسئلتك.

• ضمان استعادة استثمارك خلال ستة أشهر

• وصول مدى الحياة لمحتوى الدورة

• تحديث الدورات بشكل دوري حتى تواكب آخر التحديثات و التقنيات في عالم تطوير واجهات المستخدم

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

في هذه الدورة ستتعلم التالي:

• مفهوم الواجهة الأماميّة للموقع front-end وكيفية عملها.

• أساسيات لغات تطوير واجهات المستخدم: HTML, CSS, JavaScript .

• استخدام أحدث أدوات التطوير: Bootstrap, jQuery, Sass, webPack.

• التعامل مع خدمة استضافة المشاريع GitHub.

• إعداد هيكل الموقع ووضع خطة العمل.

• بناء العديد من المشاريع للتطبيق على ما تعلمته

هذه الدورة مكونة من ست مسارات:

• المسار الأول: ستتعلم فيه أساسيات تطوير الويب مثل HTML و CSS و JAVASCRIPT و مكتبة JQUERY مع أمثلة عملية للتطبيق على هذه الأساسيات، في نهاية هذا المسار سنقوم ببناء مشروع و هو موقع شخصي للتطبيق على كل ما تعلمته خلال هذا المسار و تثبيت معلوماتك بشكل أفضل.

• المسار الثاني: في هذا المسار ستقوم ببناء واجهة مستخدم تشبه موقع YouTube و من خلال هذا المشروع ستتعلم أساسيات Bootstrap 4 و كيفية تخطيط الصفحات باستخدام Bootstrap و ستتعرف على مكونات Bootstrap و أيضًا ستتعلم التصميم المتجاوب بحيث تظهر صفحات المواقع الخاصة بك بشكل جميل و مرتب في جميع الأجهزة "حواسيب و أجهزة لوحية tablets و الجوالات"

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

• المسار الثالث: في هذا المسار ستقوم ببناء خمس صفحات هبوط: صفحة قريبا الانطلاق و صفحة منتج و صفحة شركة و صفحة تطبيق جوال و صفحة شخصية. سيم بناء هذه الصفحات باستخدام html و css و js و jquery و bootstrap و أيضًا ستقوم بالتطبيق على التصميم المتجاوب و أيضًا ستتعلم كيفية تحويل تصميمات psd إلى صفحات ويب متكاملة.

• المسار الرابع: في هذا المسار سوف تقوم بتطوير متجر الكتروني "واجهات أمامية" بجميع صفحاته مثل: الصفحة الرئيسية و صفحة المنتج و صفحة الشراء و صفحة الدفع و صفحة البحث و صفحة التواصل. أيضًا هذه الصفحات سيتم بناءها ب html و css و js و jquery و bootstrap و أيضًا ستقوم بالتطبيق على التصميم المتجاوب. بالإضافة إلى ذلك ستتعلم الأداة webpack و هي أداة تستخدم لتسهيل سير العمل و أتمتة المهام و اختصار الوقت لنا كمطورين و إعداد المشروع و بناءه حتى يُصبح جاهزًا للنشر على الانترنت و أيضًا ستتعلم Sass و Sass هي preprocessor scripting language يتم ترجمتها ل css هذه التقنية تستخدم أيضًا لتسهيل العمل لنا كمطورين و أيضًا هي أكثر فاعلية غي المشاريع الكبيرة من css و هذه التقنيات webpack و Sass مستخدمة بكثرة هذه الأيام و مطلوبة في وظائف مطوري الواجهات الأمامية و من الضروري معرفتها .

• المسار الخامس: في هذا المسار ستقوم بتطوير موقع شركةو هو مكون من الصفحات التالية: الصفحة الرئيسية، صفحة عن الشركة، صفحة مشاريعنا، المدونة ،تفاصيل التدوينة، و صفحة تواصل معنا.

•المسار السادس: في هذا المسار ستقوم ببناء لوحة تحكم كاملة للمتجر الإلكتروني الذي تم تطويره في مسار سابق.

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

بالتوفيق.

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

من خلال تجربتي أنصحك بالمواصفات التالية.

•معالج intel core i7 أو Amd Ryzen 7 من الجيل الثامن أو أعلى إن كانت ميزانيتك تسمح بذلك و لكن الجيل الثامن ممتاز.

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

•شاشة بحجم "15 أو "15.6 وبدقة FHD لا أصح بشاشة أصغر من ذلك لأننا نحتاج لفتح أكثر من تطبيق في نفس الوقت أثناء عملنا في كثير من الأوقات .

•هارد HDD يفى بالغرض لكن هارد SSD أفضل وأسرع "أنصحك بشراء هارد SSD خارجية 500GB و ترقية جهازك بعد شراءه ثمنها مرتفع بعض الشئ و لكن تُحدث فرق كبير في الأداء و على كلٍ سيكون ثمنها أقل من جهاز يأتي بهارد SSD بشكل افتراضي".

•كارت الشاشة 4GB جيد و لكن ليس لل gaming و ال video editing و هكذا فإذا كنت تحتاج هذه الأمور أنصحك بالاهتمام بنوع كارت الشاشة و إمكانياته. فمثلًا كروت الشاشة من النوع Nvidia ممتازة

من خلال تجربتي أنصحك بالمواصفات التالية. •معالج intel core i7 أو Amd Ryzen 7 من الجيل الثامن أو أعلى إن كانت ميزانيتك تسمح بذلك و لكن الجيل الثامن ممتاز. •رام 8 جيجا رام أو 16 جيجا و لكن أنصحك ب 16GB فستكون مريحة و سلسة أكثر في الأداء من 8GB "حاسوبي 8GB و اضطررت لتقريته إلى 16GB بسسب ثقل الأداء بعض الشئ فإذا إذا كان أداء الحاسوب الخاص بك سلسًا سيساعدك هذا على زيادة إنتاجيتك". •شاشة بحجم "15 أو "15.6
YomnaRaouf تطوير الويب

هذه الرسومات graphs تُعرف ب data visualizations و هي عبارة عن تمثيل الجداول التي تحتوي بيانات رقمية و إحصائيات عن شئ ما "حالات الإصابة بفيروس ما مثلًا" على صورة رسومات بيانية لتسهيل فهم و قراءة هذه البيانات بالنسبة لنا كبشر، لأننا visual creatures و بطبيعتنا و الرسومات تكون أفضل في توضيح المعلومات لنا.

و يوجد العديد من البيانات التي تمكننا من تمثيل البيانات بهذه الطريقة، فمثلًا:

-إذا كنت تستخدم python يمكنك استخدام أيًا من المكتبات التالية:

  • Matplotlib

  • Seaborn

  • ggplot

  • Bokeh

  • pygal

  • Plotly

  • geoplotlib

  • Gleam

  • missingno

  • Leather

-إذا كنت تستخدم JavaScript يمكنك استخدام أًا من المكتبات التالية:

  • D3.js

  • Recharts تستخدم مع مكتبة react

  • Victory

  • React-vis تستخدم مع مكتبة react

  • V Charts

  • Chartkick

  • ApexCharts

  • Echarts

  • chart.js

و غيرها الكثير.

هذه الرسومات graphs تُعرف ب data visualizations و هي عبارة عن تمثيل الجداول التي تحتوي بيانات رقمية و إحصائيات عن شئ ما "حالات الإصابة بفيروس ما مثلًا" على صورة رسومات بيانية لتسهيل فهم و قراءة هذه البيانات بالنسبة لنا كبشر، لأننا visual creatures و بطبيعتنا و الرسومات تكون أفضل في توضيح المعلومات لنا. و يوجد العديد من البيانات التي تمكننا من تمثيل البيانات بهذه الطريقة، فمثلًا: -إذا كنت تستخدم python يمكنك استخدام أيًا من المكتبات التالية: * Matplotlib * Seaborn
YomnaRaouf انصحني

أنصحك بالاطلاع على هذا السؤال أيضًا،

أنصحك بالاطلاع على هذا السؤال أيضًا، https://io.hsoub.com/Advice/109025-%D8%B5%D9%81%D8%AD%D8%A9-%D8%A7%D9%85-%D8%AA%D8%B7%D8%A8%D9%8A%D9%82-%D8%A7%D9%85-%D9%85%D9%88%D9%82%D8%B9-%D8%A7%D9%86%D8%A7-%D9%85%D8%AD%D8%AA%D8%A7%D8%B1
YomnaRaouf انصحني

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

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

إذا كنت تريد أن تتجه للبرمجة الخاصة يمكنك بناءه باستخدام تقنيات مثل:

  • php و إطار العمل laravel

أو

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

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

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

عادةً ما أسمع هذه النصيحة تُعطى للمبتدئين في المجال بأنه يجب عليهم تعلم لغة برمجية معينة في بداية طريقهم و اللغة التي دائمًا ما يُبصح بها هي ++c.و لكن من وجهة نظري هذه النصيحة لا تأتي بأي نفع بل بالعكس تقوم بإضاعة الوقت و تأخير تقدمك.

ففي الحقيقة مهارة التفكير المنطقي و أساسيات البرمجة يمكنك تعلمها عن طريق أي لغة برمجة سواءً كانت ++c أو python أو JavaScript أي لغة أخرى.

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

*تطوير المواقع و تطبيقات الويب

*تطوير تطبيقات الجوال سواءً كانت أصيلة أم هجينة، تطبيقات android أو ios

*تطوير الألعاب

*الذكاء الاصطناعي و علوم الآلة

*برمجة المتحكمات الدقيقة و embedded systems

و غيرها الكثير.

فبعد أن تحدد المجال الذي تريده و تتجه إليك ميوله يمكنك أن تبدأ بتحديد اللغات التي يجب أن تتعلمها.

فمثلًا إذا كنت تريد أن تصبح مطور ويب يمكنك أن مباشرة بتعلم لغة JavaScript أو python أو PHP. و إذا كنت تريد أن تصبح مطور ألعاب أو مطور embedded systems يمكنك أن تتعلم #c أو ++c.

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

عادةً ما أسمع هذه النصيحة تُعطى للمبتدئين في المجال بأنه يجب عليهم تعلم لغة برمجية معينة في بداية طريقهم و اللغة التي دائمًا ما يُبصح بها هي ++c.و لكن من وجهة نظري هذه النصيحة لا تأتي بأي نفع بل بالعكس تقوم بإضاعة الوقت و تأخير تقدمك. ففي الحقيقة مهارة التفكير المنطقي و أساسيات البرمجة يمكنك تعلمها عن طريق أي لغة برمجة سواءً كانت ++c أو python أو JavaScript أي لغة أخرى. في الحقيقة اختيار اللغة البرمجية ليس من المفترض أن
YomnaRaouf تطوير الويب

هل يمكنك تجربة التالي و إخباري بالنتائج:

*نغلق المخدم الخاص ب exit Xampp server - Xampp

*نتوجه إلى المسار C:\xampp\mysql و نبحث عن المجلد data و نقوم بإعادة تسميته إلى data_old مثلًا أو أي اسم تريده

*بعد ذلك نقوم بإنشاء مجلد جديد نسميه data في نفس المسار C:\xampp\mysql

*بعدها نتوجه إلى المجلد mysql/backup وننسخ محتوياته و نلصقها في المجلد data الجديد

*نقوم بنسج جميع مجلدات قواعد البيانات الموجودة في mysql/data_old إلى mysql/data "مع عمل skip/تخطي للملفات mysql و performance_schema و phpmyadmin folders من المجلد data_old "

*بعده نقوم بقوم بنسخ الملف ibdata1 من mysql/data_old و نقوم بتبديله مع الملف الموجود في mysql/data

*نقوم بإعادة تشغيل المخدم Xampp من لوحة التحطم الخاصة به

هل يمكنك تجربة التالي و إخباري بالنتائج: *نغلق المخدم الخاص ب exit Xampp server - Xampp *نتوجه إلى المسار C:\xampp\mysql و نبحث عن المجلد data و نقوم بإعادة تسميته إلى data_old مثلًا أو أي اسم تريده *بعد ذلك نقوم بإنشاء مجلد جديد نسميه data في نفس المسار C:\xampp\mysql *بعدها نتوجه إلى المجلد mysql/backup وننسخ محتوياته و نلصقها في المجلد data الجديد *نقوم بنسج جميع مجلدات قواعد البيانات الموجودة في mysql/data_old إلى mysql/data "مع عمل skip/تخطي للملفات mysql و performance_schema و
YomnaRaouf تطوير الويب

يمكنك القيام بذلك بالتوجه إلى

Tools ثم Editor Options ثم نضغط على ال Class Browsing tag و نضع علامة صح على المربع الخاص ب Enable.

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

لل code completion ستحتاج للقيام بالتالي:

نذهب إلى Tools ثم Editor Options ثم Completion ثم نضغط على code completion ثم نضغط على المرع الخاص ب "Enable code completion" يمكنك أن أيضًا أن تختار الوقت الذي تريد أن تظهر الاقتراحات بعده.

يمكنك القيام بذلك بالتوجه إلى Tools ثم Editor Options ثم نضغط على ال Class Browsing tag و نضع علامة صح على المربع الخاص ب Enable. سيأخذ الأمر بعض الدقائق حتى يتم و من المفترض أن تظهر الاقتراحات بعدها. لل code completion ستحتاج للقيام بالتالي: نذهب إلى Tools ثم Editor Options ثم Completion ثم نضغط على code completion ثم نضغط على المرع الخاص ب "Enable code completion" يمكنك أن أيضًا أن تختار الوقت الذي تريد أن تظهر الاقتراحات بعده.
YomnaRaouf برمجة

فيما يخص pug و ejs، فكلًا منهما متكافئ لدرجة كبيرة فيما يخص ال functionality. إذًا اختيار أحدهم دون الآخر يعود لتفضيلاتك الشخصية و ما ال syntax الذي تفضله. و لكن ejs تعتبر أفضل هنا " بالرغم من أنها تضيف بعض الضوضاء للملفات بسبب الرموز الخاصة بها و تحتاج لوقت أكثر لقراءة الملفات و إصلاح الأخطاء" و هذا بسبب أنها امتداد للغة html و الجميع يعرفها و لكن ال syntax الخاص ب pug مختلف تمامًا و لا يعرفه الكثير. لذلك ejs أكثر انتشارًا و استخدامًا من pug.

لاحظ المخطط الزمني التالي من npm trends، يوضح أن ejs الأكثر استخدامًا من pug و twig

مميزات ejs:

  • تستخدم complete javascript logic مما يعني أنه يمكنك أن تبدأ باستخدامها مباشرةً إذَا كنت تعرف javascript جيدًا

*أسرع بكثير من pug

  • error handling قوي جدًا

  • سريعة في التعلم.

عيوبها:

  • أكواد صعبة القراءة بعض الشئ خاصةً للمصممين الذين لا يعرفون javascript

  • لا تدعم ال block functionality بصورة افتراضية "إعادة استخدم جزء من القالب في أكثر من ملف" و لكن يمكنك القيام بذلك عن طريق third-part libraries

أما pug فعيوبها أكثر من ذلك بكثير و من أهمها هو الأداء السئ جدًا مما جعل استخدامها قليل للغاية.

للمزيد

فيما يخص pug و ejs، فكلًا منهما متكافئ لدرجة كبيرة فيما يخص ال functionality. إذًا اختيار أحدهم دون الآخر يعود لتفضيلاتك الشخصية و ما ال syntax الذي تفضله. و لكن ejs تعتبر أفضل هنا " بالرغم من أنها تضيف بعض الضوضاء للملفات بسبب الرموز الخاصة بها و تحتاج لوقت أكثر لقراءة الملفات و إصلاح الأخطاء" و هذا بسبب أنها امتداد للغة html و الجميع يعرفها و لكن ال syntax الخاص ب pug مختلف تمامًا و لا يعرفه الكثير. لذلك ejs
YomnaRaouf تطوير الويب

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

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

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

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

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

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

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

يمكنك استخدام الطريقة التالية، ب css حيث ستجعل الصورة التي يلتقطها المستخدم تظهر بيضاء "لا تعمل مع جميع المتصفحات".

إذا كنت تريد حماية الصور الخاصة بموقعك يمكنك إضافة water mark باستخدام بعض الأدوات مثل :

*watermark-software.com

*visualwatermark.com

*watermarquee.com

لا أعلم لماذا تريد إضافة خاصية كهذه و تمنع المستخدمين من التقاط الشاشة في موقعك، إذا كنت تريد أن تمنع المستخدمين من أخذ تصميماتك أو الصور التي استخدمتها في الموقع فهذا الأمر لم يمنعهم من ذلك فمازال بإمكانهم تصوير الموقع بكاميرا خارجية أو بأي طريقة أخرى، إذا كنت تريد حماية الصور يمكنك وضع water mark لها. يمكنك استخدام الطريقة التالية، ب css حيث ستجعل الصورة التي يلتقطها المستخدم تظهر بيضاء "لا تعمل مع جميع المتصفحات". https://suar.me/M7WyJ إذا كنت تريد حماية