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

Adnane Kadri

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

  • المساهمات

    5196

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

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

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

    52

 نوع المحتوى 

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

البرمجة

التصميم

DevOps

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

العمل الحر

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

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

قصص نجاح

أسئلة وأجوبة

كتب

دورات

كل منشورات العضو Adnane Kadri

  1. Adnane Kadri
    بجانب ما اقترح مصطفى، يمكنك القيام بذلك عن طريق التحرير على نسق القوالب وفق المراحل التالية: ارفع الأيقونة التي قمت بتصميمها إلى أي خدمة الاستضافة الخاصة بك. احفظ رابط الصورة المرفوعة للأيقونة. في لوحة التحكم في بلوجر، اختر "تخطيط المدونة" ثم انقر على "تحرير HTML". استخدم الأمر <link> لربط الصفحة بالأيقونة، ويجب أن يتم وضع هذا الأمر داخل عنصر <head> في صفحة HTML. استخدم الكود التالي: <link rel="shortcut icon" href="رابط الصورة"> قم بتغيير "رابط الصورة" في الأمر <link> برابط الصورة التي قمت بتحميلها في الخطوة الثانية. احفظ التغييرات وشاهد النتيجة بالذهاب إلى مدونتك وتحديث الصفحة. ستظهر الأيقونة بجانب عنوان الموقع في علامة التبويب.
  2. Adnane Kadri
    لفعل ذلك، اتبع الخطوات التالية: اختر النص الذي تريد تحويله من الجهة اليمنى إلى اليسرى باستخدام أداة النص. اذهب إلى القائمة الرئيسية "عناصر" Elements وحدد "عنصر النص" Text Frame. اذهب إلى قائمة الخيارات "نص الإطار" Text Frame Options وانقر فوق علامة التبويب "المحتوى" Content. حدد "يمين لليسار" Right-to-Left في الخيار "توجيه النص" Text Direction.
  3. Adnane Kadri
    هذه الرسالة تعني أنه تم رفض عملية الدفع (push) لأن هناك تعارض بين المشروع الحالي الذي تحاول دفعه وبين النسخة الحالية للمشروع في مستودع GitHub. هذا قد يحدث إذا قام شخص آخر بدفع تعديلات على المشروع من مستودع GitHub. لحل هذه المشكلة، يجب عليك إما استخدام الأمر git pull لجلب التحديثات الأخيرة من المستودع البعيد (remote repository) ودمجها مع ملفات المشروع الخاص بك ومن ثم القيام بعملية الدفع مرة أخرى. أو يمكنك استخدام الأمر git push --force لجبر الدفع وإلغاء أي تعديلات تم القيام بها في المستودع البعيد. ومع ذلك، يجب عليك أن تكون حذرًا عند استخدام هذا الأمر لأنه يمكن أن يؤدي إلى فقدان التعديلات التي تم إدخالها في المستودع البعيد من قبل أي شخص آخر.
  4. Adnane Kadri
    قد يكون هنالك بعض الجدل الخفيف بخصوص ما يقصد بالأساسيات ما بين مطوري جافاسكربت فتجد البعض يعتبر ما هو نحو التعامل مع مختلف أنواع البيانات والمتغيرات والعمليات الحسابية البسيطة والشروط والعبارات الشرطية والحلقات والتكرارات والدوال كافيا كأساسيات اللغة. ولكن البعض الآخر يذهب إلى أكثر من ذلك فيعتبر أنه بجانب ذلك ينبغي التعرض لمفاهيم اكثر تقدما من مثل مثل الدوال العالية الأمان، والوعود، والبرمجة الشيئية وما الى ذلك. ولكن عموما، سيكفيك ما تعلمته حتى الآن كأساسيات، اذ سيعينك هذا على فهم واستيعاب مفاهيم اكثر تقدما في اللغة.
  5. Adnane Kadri
    زيادة على ما اشار اليه المدربون، فإنه يجب أولا ادراك الفرق بين typescript و javascript لكي يتبين ما يمكن القيام به، فـ TypeScript هي لغة برمجة تعتمد على JavaScript ولكنها تضيف عليها بعض الميزات الإضافية. وتعد TypeScript أحد أدوات التطوير التي توفر ميزات البرمجة الشاملة بما في ذلك إمكانية التعلم العميق، إضافة أنواع البيانات والتأكد من صحتها، والوصول إلى ميزات جديدة مثل العمليات الجبارة والجداول الزمنية الأحادية وما الى ذلك. بالمقارنة مع JavaScript، يوفر TypeScript ميزات إضافية مثل: التحقق من الأنواع: يساعد في الحد من الأخطاء التي يمكن أن تحدث في تطبيقات JavaScript التقليدية. تعزيز الإنتاجية: يوفر الإكمال التلقائي والتصحيح النحوي ومراقبة الرموز. التعلم العميق: يساعد في تحسين أداء تطبيقات الذكاء الاصطناعي وتعلم الآلة والتصنيف والتنبؤ وغير ذلك. على الرغم من ذلك، فإن TypeScript أكثر تعقيدًا من JavaScript، وقد يستغرق الأمر بعض الوقت لتعلمها واستخدامها بكفاءة. وتحتاج TypeScript إلى مترجم خاص بها يقوم بترجمة الشفرة البرمجية المكتوبة بلغة TypeScript إلى الشفرة البرمجية المكتوبة بلغة JavaScript ليتم تشغيلها على المتصفحات أو الخوادم. وعليه، فإنه بالتأكيد يمكن إنشاء تطبيق ويب مثال للسوبر ماركت باستخدام كلا من JavaScript و TypeScript. فكلا اللغتين يتمتعان بقدرات قوية لتطوير تطبيقات الويب. بالإضافة إلى ذلك، هناك العديد من اللغات الأخرى التي يمكن استخدامها في تطوير تطبيقات الويب، مثل Python و Ruby وPHP وغيرها. وكل من هاته اللغات يفي بالغرض ويقوم بنفس الشيء، ويمكنك في كل حال من القيام بتطوير تطبيق ويب لسوبر ماركت.
  6. Adnane Kadri
    زيادة على ما اشار اليه المدربون في التعليقات السابقة، بالنسبة لعلوم البيانات، يمكن البدء بتعلم الأساسيات في الإحصاء والرياضيات والبرمجة، ومن ثم التركيز على تعلم لغات البرمجة المشهورة في هذا المجال مثل Python و R. يمكن الحصول على العديد من الدورات المجانية والمدفوعة على الإنترنت لتعلم هذه المهارات، كما يمكن الحصول على شهادات معتمدة في هذا المجال مثل شهادة Certified Data Scientist من معهد SAS. بالنسبة للذكاء الاصطناعي، يمكن البدء بتعلم الرياضيات المتقدمة والبرمجة، ومن ثم التركيز على تعلم تقنيات الذكاء الاصطناعي مثل التعلم العميق والتعلم الآلي ومعالجة اللغات الطبيعية والتعلم التعاوني والشبكات العصبية الاصطناعية والتعلم المعزز وما الى ذلك. يمكن الحصول على العديد من الدورات المجانية والمدفوعة على الإنترنت لتعلم هذه المهارات، كما يمكن الحصول على شهادات معتمدة في هذا المجال مثل شهادة TensorFlow Developer من شركة Google او غيرها.
  7. Adnane Kadri
    تقييم الألعاب والعناصر بشكل عام جيد الى ممتاز، وأهنئك على قيامك بمثل هاته الخطوات فهي ما ستعزز فهمك لجافاسكربت على نحو أدق .. هذا بجانب ان طريقتك في كتابة الاكواد واعتمادك البرمجة كائنية التوجه في التعامل مع الاجسام والكائنات تشير الى اهتمامك بتنظيم الشيفرة وتنظيفها وهو الأمر الآخر الذي يحسب لك، فالشيفرة تستوفي الكثير من معايير الشيفرة النظيفة والكثير من معايير جودة البرمجيات مثل قابلية التوسع والصيانة وما الى ذلك. سيجعل هذا من الممكن التوسع في الألعاب اكثر عن طريق استحداث ميزات أخرى دون الاخلال بتلك الموجودة، مثل اضافة مؤثرات صوتية كاصوات الثعابين او الرصاص والتحذيرات المختلفة، بجانب التحكم في جزئيات من اللعبة مثل مستوى اللعبة وما الى ذلك (في لعبة الثعبان مثلا يترجم ذلك الى سرعة الثعبان). بعض الملاحظات البسيطة: بخصوص shooting stars، لما يظهر الجزء الأسفل اليمين فارغا. عند اعادة تحجيم الشاشة وعمل resize في لعبة الثعبان، يختفي الثعبان، تأكد من اعادة تحجيم canvas اعتبارا لهذا التحجيم.
  8. Adnane Kadri
    زيادة على ما أشار اليه المدربون، ففي React لا يمكن تغيير قيمة state مباشرةً بدون استخدام دالة setState. في الكود الذي قمت بمشاركته، تم استخدام الدالة useState لإنشاء حالة todos والتي يتم تعيينها مرة واحدة فقط عند تحميل الصفحة. ثم تم استخدام if و else if لتصفية todos باستخدام دالة filter، ولكن هذا لن يغير قيمة todos في state. كفكرة، يمكنك إنشاء حالة جديدة مثل filteredTodos باستخدام useState وتخزين القيم المصفاة فيها، ومن ثم تحديث filteredTodos باستخدام setFilteredTodos عند تغيير قيمة showTodo. يمكنك تمرير filteredTodos كـ props إلى مكونات أخرى للعرض. سيحل هذا المشكلة لديك، هذا بجانب ان مثل هذا السياق: todos = todos.filter(todo => !todo.status) console.log(todos); قد يؤدي الى بعض المشاكل الغير متوقعة، قم بتصريح متغير آخر وليكن filteredTodos ليكون: let filteredTodos = todos.filter(todo => !todo.status) console.log(filteredTodos); ثم ان شئت حقن هاته القيمة كقيمة todos يمكنك استعمال setTodos لذلك، setTodos(filteredTodos) فتكون القيم المصفاة هي القيم المعروضة،
  9. Adnane Kadri
    تشير رسالة الخطأ إلى أنك تستخدم إصدار Babel 6.26.3 ، ولكن حزمة "@babel/preset-env" تتطلب إصدار Babel "^ 7.0.0-0". لحل هذه المشكلة ، تحتاج إلى ترقية إصدار Babel الخاص بك إلى الإصدار 7 أو أعلى. لترقية إلى أحدث إصدار من Babel ، يمكنك استخدام الخطوات التالية: إزالة الإصدار الحالي من Babel: npm uninstall babel-cli babel-core babel-preset-env --save-dev تثبيت أحدث إصدار من Babel: npm install @babel/cli @babel/core @babel/preset-env --save-dev تعديل ملف package.json الخاص بك لتحديث أمر Babel CLI: "scripts": { "start": "nodemon -w src --exec "babel src"" } إنشاء ملف .babelrc في جذر مشروعك بالمحتوى التالي: { "presets": [ "@babel/preset-env" ] } ان كان السؤال الخاص بك يتعلق بدورة ما، فيفضل طرح هذا السؤال ضمن قسم تعليقات الطلبة اسفل الدرس. وسيتابع معك المدربون.
  10. Adnane Kadri
    بجانب المقترح، يمكنك الاعتماد على جافاسكربت لإضافة الامتداد .html بعد تصيير الصفحة من طرف الخادم. var currentUrl = window.location.href; var newUrl = currentUrl + '.html'; window.location.replace(newUrl); يرجى الانتباه ان مثل هاته الطريقة قد تؤدي الى تعطيل بعض عمليات التوجيه التي تعتمد على مسارات نسبية realtive paths.
  11. Adnane Kadri
    بجانب ما أشار اليه المدرب مصطفى، فإذا كنت لا ترغب في تسجيل الفيديو من خلال البرنامج وتخزينه في قاعدة البيانات، فيمكنك استخدام خدمات تسجيل الفيديو عبر الإنترنت وتضمين رابط للفيديو المسجل في نموذج الشكوى. يمكنك استخدام خدمات مثل Vimeo أو YouTube لتسجيل وتحميل الفيديو والحصول على رابط مضمن في صفحة نموذج الشكوى. بمجرد تلقي الشكوى، يمكنك الاستفادة من API لهذه الخدمات لاسترداد الفيديو المسجل وعرضه في صفحة الشكوى. يمكنك استخدام Laravel لتنفيذ هذه المهمة باستخدام مكتبات مثل Guzzle لإجراء طلبات API. أو مكتبة JavaScript مثل Axios لإجراء الطلبات من الواجهة الأمامية إذا كان ذلك ملائمًا لتطبيقك. وفي كلتا الحالتين، منطق العملية واحد.
  12. Adnane Kadri
    HTTP 400 Bad Request هي رسالة خطأ تشير إلى أن الخادم لم يتمكن من فهم الطلب الذي تم إرساله بسبب تنسيق غير صالح أو عدم استكمال البيانات اللازمة لتنفيذ الطلب. يمكن أن يحدث هذا عندما يقوم المستخدم بإرسال طلب غير صالح أو عندما يكون هناك خطأ في تنسيق البيانات التي يتم إرسالها. بمعنى أنه لم يتم تفسير الطلب بشكل صحيح. قد يكون هناك خطأ في بنية الطلب أو قد يكون هنالك إرسال بيانات غير صالحة .. للتحقق من سبب الخطأ بشكل أكثر تفصيلاً ، يجب فحص محتوى الطلب وفحص الصفحة الخاصة بالخطأ المرتبط بهذا الطلب. والتأكد من اعتماد بنية بيانات صحيحة وارسالها في الطلبية.
  13. Adnane Kadri
    مرحبا عبد اللطيف، ان كنت تواجه مشكلة بخصوص دورة ما، فإنا ندعوك الى الانتظار قليلا فالمشاكل التي يطرحها الطلبة متفاوتة التعقيد، وبعض هاته المشاكل قد يأخذ وقتا أطول من المدربين في العمل عليها مما هو عليه في مشاكل أخرى، كما ان العمل بين المدربين يتم بتنسيق عال. ولذلك لا تقلق، سيتم الاجابة على سؤالك في اقرب وقت. اما ان كنت تواجه مشكلة بخصوص فريق الدعم، فهو الآخر يحتاج بعض الوقت للانتباه الى رسالتك والاجابة عليها. اما بخصوص التوقيت، فالمدربون متواجدون بشكل دائم في الاكاديمية للاجابة على استفسارات واستشكالات الطلبة.
  14. Adnane Kadri
    اضافة لما أشار اليه المدربان فإن ادارة حياة المكون في كل منهما تختلف عن الأخرى ايضا، ففي function components، يتم استخدام الدالة function لتعريف الـ component واستخدام الـخطافات hooks مثل useState و useEffect لإدارة الحالة state وحياة الـ component. بينما في class components، يتم استخدام الكلاس class لتعريف الـمكون component وتعريف الـجالو state في داخل الـتابع الباني constructor . بجانب استخدام توابع دورة حياة المكون lifecycle methods مثل componentDidMount و componentWillUnmount لإدارة حياة الـ component. بشكل عام، يمكن استخدام أيٍ منهما وفقًا للاحتياجات الخاصة بالمشروع. ولكن يتميز الـ function components بكونها أكثر بساطة وسهولة في الكتابة والصيانة وأقل في استهلاك الذاكرة، بينما يمكن استخدام الـ class components للمزيد من القدرة على التحكم بالحياة الداخلية للـ component ولبعض الميزات المتقدمة مثل تعريف الـ refs والـ Error boundaries.
  15. Adnane Kadri
    يحتمل أن المشكلة أساسا هي طريقة عمل المكون لديك، فعند الضغط على زر تقديم النموذج يقوم بتغيير حالة المتغير clicked، بينما يتم تنفيذ دالة handleLogin والتي تقوم بإرسال البيانات المدخلة إلى المتجر بواسطة خطاف dispatch والتحقق من صحة البيانات وتخزينها باستخدام useState، ولكنها لا تنفذ الدالة handlevalid المسؤولة عن التحقق من صحة الرمز المميز token الذي يرجعه المتجر. لذلك، يجب نقل دالة handlevalid من ال useEffect إلى داخل دالة handleLogin، بعد استدعاء خطاف dispatch، وذلك للتحقق من صحة الرمز المميز الذي يرجعه المتجر في الوقت الحالي. لتكون على نحو: const {email, password} = userData; const handleChange = (e) => { const {name, value} = e.target; setUserData({...userData, [name]:value }) } const handlevalid = async () => { if (!auth.token) {setIsCorrect(false)} }; const handleLogin = async (e) => { e.preventDefault(); handlevalid() setUserData({email, password }) dispatch(login(userData)) }
  16. Adnane Kadri
    لا يوجد في الأمر خدعة سحرية أو دليل واضح، ولكن مثل هاته المهارة سيتم تطويرها من خلال العمل على المسائل البرمجية المختلفة، ومن تحليل متطلبات مشاريع مختلفة وعديدة. انطلاقا من فهم حالة الاستخدام نحو تحليلها وتحويلها كشيفرة. وبشكل عام، يمكن لكل النقاط التالية ان تعينك على ذلك: دراسة مفاهيم البرمجة الشيئية OOP وتطبيقها في جافا سكربت، وذلك يتطلب الاطلاع على مفاهيم مثل الكائنات والدوال والمتغيرات والتحكم في التدفق، والتمرن على كتابة الأكواد المرتبطة بهذه المفاهيم. حل المشاكل والألغاز البرمجية، وذلك يمكن البدء به من خلال حل تحديات برمجية مثل تلك الموجودة على مواقع مثل codewars.com أو hackerrank.com، حيث تساعد في تحسين التفكير المنطقي وتطوير المهارات البرمجية. المشاركة في مشاريع مفتوحة المصدر (open source projects)، حيث يمكن المشاركة في تطوير تطبيقات وأدوات برمجية وتطبيق المفاهيم المتعلمة في تطويرها. متابعة المجتمعات البرمجية على منصات التواصل الاجتماعي مثل تويتر وريديت، حيث يمكن الاطلاع على آخر التطورات والمستجدات في عالم جافا سكربت، والتواصل مع المطورين والخبراء في هذا المجال للاستفادة من خبراتهم وتبادل الأفكار والمعلومات.
  17. Adnane Kadri
    حاولي إعطاء العرض 100 بالمئة للصور داخل الحاويات content. فيكون: .content img{ width: 100%; } سيكون هذا كفيلا بتحجيم الصور على نحو كامل. أما بخصوص أحجام دوائر التنقل، فهذا بسبب أن هنالك خطأ بتوصيف محدد الدوائر، انتبهي: #navLins ul li ^^^^^^^^^^^^^^ اذ يفترض ان يكون: #navLinks ul li ان كان السؤال يخص دورة من دورات الأكاديمية فيستحسن أن يوضع السؤال أسفل الفيديو في قسم تعليقات الطلبة.
  18. Adnane Kadri
    الشيفرة التي تحاول وصفها او تحويلها تفتقر الى المزيد من التفاصيل الأخرى، فهي لا تعبر إلا عن حقل نصي، ولكن أظنك تستخدم مكتبة simpleCart لمثل هذا الغرض. لتحقيق ذلك، يجب أن تقوم بتغيير كود الزر وربطه بصفحة الدفع التي تريد. يمكنك استخدام خيارات الدفع التي تريدها بالتوافق مع مكتبة SimpleCartJS، وهي المكتبة المستخدمة في الكود الحالي. فيما يلي مثال على كيفية تعديل الزر ليتضمن خيارات دفع مختلفة: <a href="javascript:;" class="simpleCart_checkout" data-paypal-checkout-button="true" data-payment-methods="['paypal', 'creditcard', 'bitcoin']" data-billing-address="true" data-shipping-address="true" data-shipping-methods="['pickup', 'first-class', 'priority']"> <input class="submit_billing_templateism" id="ContactForm1_contact-form-submit" type="button" value="Proceed To Payment"> </a> في هذا المثال، تم إضافة عدة خيارات دفع، بما في ذلك PayPal والدفع بالبطاقة الائتمانية وBitcoin. يتم استخدام الخيار data-payment-methods لتحديد قائمة الخيارات المتاحة، و data-billing-address و data-shipping-address لجعل الزبون يدخل عنوان الفاتورة وعنوان الشحن عند الحاجة. يتم استخدام الخيار data-shipping-methods لتحديد قائمة الخيارات المتاحة للشحن. بالطبع فإنك لك كامل الحرية في تخصيص الشيفرة وفق ما يليق بك. قد يمكنك الاستزادة بالاطلاع على توثيق المكتبة.
  19. Adnane Kadri
    يعد هذا السؤال من اكثر الأسئلة تكررا في الوسط البرمجي، ولذلك دعني الخص لك الاجابة: كل ما سيتم التعرض اليه سيكون جديدا بالكلية، سواءا لمتقن اللغة الانجليزية او لغير متقنها، فكلاهما سيتعرض لمفاهيم مثل الدوال functions و المتغيرات variables والحلقات loops و ما إلى ذلك، لذلك فإن المعرفة بهاته المفاهيم سيتم تطويره هو الآخر ولا يشترط أن يكون معرفة قبلية. فلن تحتاج أن تعرف معنى closures أو scopes أو callbacks قبل انطلاقك أصلا. وإنما سيتم التقاط مثل هاته التعريفات والمصطلحات في مسارك التعليمي. وصحيح أن اكتسابها سيكون نقطة اضافية، ولكن ليس شرطا ولا مكتسبا يبنى عليه المجال ككل، أما من ناحية التعلم ومواصلة المسير فستحتاج للغة الانجليزية بالقدر الذي تكون فيه قادرا على قراءة رسائل الأخطاء وتشخيصها والبحث عن حلول لها وما الى ذلك. هذا بجانب أنك ستحتاج بعض التصويب لإعتماد شيفرات نظيفة واستعمال اسماء دلالية للمتغيرات والدوال والكائنات وغيرها .. وحتى بلوغ ذاك الحد، فإنك ستطور من قدراتك في اللغة الانجليزية أثناء التعلم والممارسة والتطبيق العملي. باختصار: تعلمها نقطة اضافية وليس شرطا، وستتعلم القدر الذي تحتاجه اثناء مشاهدتك محتوى تعليمي يخص البرمجة. والباقي سيتم تطويره خلال كل ذلك.
  20. Adnane Kadri
    يمكنك الوصول الى اعداد كبيرة من الموارد المجانية على نطاق واسع، كما يمكنك الاستعانة بمجموعة من المواقع المجانية التي تقوم بتوفيرها بشكل غزير .. نذكر من بين الخيارات المجانية،: Material Design Google's Material Components Android Design Kit uxcrush طبعا فإنه يجب الالتفات الى حقوق الاستخدام التي تفرضها عليك مثل هاته المواقع ولذلك فإنه لا يجب عليك تعديها او الاخلال بها من خلال استخدام بشكل غير مشروط.
  21. Adnane Kadri
    تأكد من تصفح المسار باستخدام المنفذ الصحيح 5500 وليس باستخدام المنفذ 8080، أي عن طريق المسار: http://localhost:5500 وليس: http://localhost:8080 عل كل حال، ان كنت تنوي تغيير المنفذ الافتراضي لـ live server في vs code اتبع الخطوات التالية: قم بفتح ملف الإعدادات (Settings) في VS Code، ويمكن الوصول إليه بالنقر على الزر (Ctrl + ,) أو من خلال قائمة File > Preferences > Settings. بعد ذلك، ابحث عن خيار liveServer.settings.port في صندوق البحث في الجزء العلوي من الصفحة. انقر على الزر Edit in settings.json، وسيقوم ذلك بفتح ملف JSON. ثم قم بإضافة السطر التالي داخل العلامات التالية {}: "liveServer.settings.port": 8080\ احفظ الملف وتصفح المشروع من خلال المنفذ الذي اعددته.
  22. Adnane Kadri
    لا أعلم ان كنت قد فهمت مقصودك على نحو دقيق، ولكن لا أظن أنك تحتاج الاستعانة بحزمة خارجية لتطبيق مثل هكذا تأثير. فسيمكنك الاعتماد على CSS بشكل كلي للقيام بذلك ببعض التحايل. يمكنك المحايلة باستخدام خاصية clip-path الي تساعدك في تقطيع الخلفية. واليك منطق العملية كاملة: قم بإنشاء حاوية تمتلك الوضعية relative قم بإنشاء عنصري img لنفس الصورة داخل هاته الحاوية واحدة من هاته الصورتين يجب أن تمتلك الوضعية المطلقة position absolute لتوضع فوق الصورة الأولى مباشرة. الآن ستمتلك صورتين متطابقتين فوق بعضهما البعض. ولذلك ستسهل المهمة الآن، اقتطاع جزء دائري من الصورة الثانية واعادة تحجيمها عن طريق عمل زوم او scale الى ضعف حجمها او حجمها مرة ونصف سيعطي نفس التأثير تماما. مثال: فيما يلي الشيفرة المسؤولة: <div class="image-container"> <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="Example Image"> <img class="clipped-image" src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="Example Image"> </div> *** .clipped-image { display: block; position: absolute; top: 0; left: 10; width: 100%; height: 100%; border-radius: 50%; /* جعل الصورة بشكل دائري */ clip-path: circle(50px at 32rem 16rem); /* تحديد منطقة المكبّر */ transform: scale(1.5); } يذكر أن الخاصية circle تقبل معاملين: المعامل الأول هو قطر الدائرة المراد اقتطاعها. المعامل الثاني بعد at هو وضعية الدائرة واحداثياتها. يمكنك التوسع في الفكرة أكثر، عن طريق تنسيق حدود الصورة الثانية لتظهر بشكل أزرق مثل الفقاعات التي لديك. او عن طريق تطبيق حركية animation تتحكم في وضعية الدائرة واحداثياتها. أو عن طريق اضافة صور اخرى بتحويلات scale مختلفة لتظهر مثل الفقاعات. سأترك ذلك لك لتجتهد في التوسع في الفكرة.
  23. Adnane Kadri
    دورة تطوير تطبيقات الويب تقتصر على تعليمك لغة PHP وأشهر أطر عملها ونظم ادارة المحتوى فيها. وقد تحتاج في بعض الجزئيات تعلم اساسيات لغة HTML و CSS للعمل على تطبيقات ويب شاملة. أكاديمية حسوب تلتفت لهذا الاحتمال وتمنحك وصولا لأول مسار من كل دورة، بما فيها دورة تطوير واجهات المستخدم، التي يتم فيها التعرض لشرح HTML و CSS و أساسيات تطوير الويب، سيمكنك الوصول اليها بشكل طبيعي. بعد التأسيس فيها على نحو جيد، سيمكنك العودة الى استئناف دروسك في دورة تطوير التطبيقات باستخدام لغة PHP. يمكنك الوصول الى مسار اساسيات تطوير الويب من هنا.
  24. Adnane Kadri
    مرحبا مأمون، هل يمكنك الإشارة أي دورة تشترك بها؟
  25. Adnane Kadri
    هل تقصد أنك تريد تطبيق زوم على جزء معين من الصورة بحيث يكون بشكل دائري ؟
×
×
  • أضف...