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

Adnane Kadri

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

  • المساهمات

    5196

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

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

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

    52

 نوع المحتوى 

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

البرمجة

التصميم

DevOps

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

العمل الحر

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

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

قصص نجاح

أسئلة وأجوبة

كتب

دورات

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

  1. Adnane Kadri
    من غير المنطقي أن يتم إخفاء العناصر على المحور X في حاوية مرنة (display:flex) مرفقة بالقيمة wrap في الخاصية flex-wrap، فأي عنصر يحمل عرضا لا يكفي سيتم إنزاله للسطر الثاني وهكذا. أظن أن المشكلة بالضبط هي في تهيئة المتصفح لتفسير الصفحة على عرض معين. إذ تحدث المشكلة أحيانا عند الانتقال من عرض 1 الى عرض 2 مباشرة في المتصفح دون انتقالة بين العرضين. فعندما نقوم مثلا باستعراض عنصر ما عن طريق Inspect ثم نقوم بتغيير العرض الى عرض معين (وليكن 307px) ثم نغلق شاشة الاستعراض. ونقوم مباشرة باستعراض العنصر مرة ثانية فسيحافظ المتصفح على العرض الذي استعرضت به العنصر سابقا ويظهر لك مباشرة 307 في شاشة الاستعراض. وبسبب الانتقالة من عرض الشاشة كاملة الى العرض 307 دون تدرج يحدث أن لا يستجيب المتصفح لهاته الانتقالة وتظهر وكأنها غير متجاوبة. وقد تأخذ من البعض ساعات وساعات وهو يحاول ضبط التجاوبية ولكن دون فعالية. وهذا ما حدث معك ببساطة. وكدليل عن ذلك، لاحظ أن حتى شريط التنقل الخاص بموقع CodePen لا يظهر بشكل متجاوب أثناء عمل هاته الانتقالة مباشرة. في حين أن نفس المشكلة لا تظهر وبنفس الموقع عند مجرد إعادة تهيئة المتصفح ليلتقط هذا العرض المستهدف. يمكنك ذلك عن طريق الضغط على أيقونة الشاشات مرتين لتهيئة العرض مجددا. النتيجة:
  2. Adnane Kadri
    مزيد من المعلومات حول "تثبيت متجر بريستاشوب"
    سنبدأ ببداية بهذه المقالة سلسلة مقالات تعليمية تقوم بشرح كل ما يتعلق بمنصة PrestaShop -وتُلفظ بريستاشوب- تستهدف ذوي الخلفية التقنية وغيرهم و تهدف إلى تعليمك كيفية إنشاء متجرك الإلكتروني عن طريق واحدة من أكثر منصات التجارة الإلكترونية المجانية شعبية، ستتعلم أيضا كيفية إعداده وتهيئته، تخصيصه وإدارته، وسنتطرق فيما يأتي من هذا المقال لكيفية تثبيته وتفاصيل ذلك. بريستاشوب هو أحد أنظمة إدارة المحتوى الفرنسية، ومثله مثل باقي نظم إدارة المحتوى يتيح إمكانية إنشاء موقعك الإلكتروني وتخصيصه بسهولة واحترافية عاليتين دون الحاجة لأي خلفية تقنية. توفر المنصة طرقا مختلفة للتثبيت، تتحكم في الاختيار بينها الحاجة وراء كل طريقة والهدف منها، وسنتعرف عليها فيما سيأتي: كيفية إعداد خادم محلي لتثبيت بريستاشوب عليه بغرض التطوير محليًا على الحاسوب، أو يمكن رفع متجر بريستاشوب مباشرة على الخادم وتثبيته وبدء استعمال المتجر. هذه المقالة جزء من سلسلة مقالات حول إعداد متجر بريستاشوب، وإليك فهرس مقالات السلسلة كاملة: تثبيت متجر بريستاشوب التهيئة الأولية لمتجر بريستاشوب جديد جولة في لوحة تحكم بريستاشوب واستكشافها تخصيص متجر بريستاشوب إدارة المنتجات في متجر بريستاشوب التعامل مع العملاء وطلباتهم في متجر بريستاشوب ضبط طرق الدفع وعملية الشحن لمتجر بريستاشوب إدارة متاجر متعددة عبر بريستاشوب خطوات إعداد خادم محلي تدعوا الحاجة إلى تثبيت خادم محلي في حالة الرغبة في تثبيت بريستاشوب محليا على الحاسوب إما بغرض اختباره وتجربته أو بغرض التطوير فيه. تثبيت xampp في ويندوز windows نزل حزمة التثبيت الموافقة لنظام التشغيل Windows الذي لديك من الموقع الرسمي لـ xampp. افتح الملف المنزل لتشغيل أداة تثبيت الخادم، ثم اضغط على "التالي" في نافذة الإعداد التي تظهر. تأكد من تحديد كامل المكونات المراد تثبيتها واضغط على "التالي Next". اختر مجلدًا لتثبيت XAMPP واضغط على "التالي Next" ثم ألغ تحديد الخيار "معرفة المزيد حول Bitnami for XAMPP" واضغط على "التالي Next". ستظهر نافذة "جاهز للتثبيت" على الشاشة، واضغط على "التالي Next"، ثم اضغط على "إنهاء Finish" بعد انتهاء التثبيت. ابدأ تشغيل لوحة تحكم XAMPP من خلال خيار "تشغيل كمسؤول Run as Admin". ستظهر "لوحة تحكم XAMPP" على الشاشة، ثم انقر فوق "بدء" الإجراء لبدء كل من وحدات "Apache" و "MySQL". تثبيت xampp في لينكس linux نزّل حزمة التثبيت الموافقة لنظام التشغيل لينكس Linux الذي لديك من الموقع الرسمي لـ xampp ثم انتقل إلى حاو ملف الحزمة. cd /home/[username]/Downloads بدل username إلى اسم المستخدم لنظامك. اجعل حزمة التثبيت قابلة للتنفيذ عن طريق إعطائها مجموعة الصلاحيات المناسبة. sudo chmod 755 [package_name] شغّل ملف التثبيت. sudo./xampp-linux-x64-7.3.5.1-installer.run شغل XAMPP بالأمر التالي. sudo opt/lampp/lampp start واتبع نفس خطوات التثبيت الموضحة في القسم السابق: تثبيت وإعداد خادم xampp > في ويندوز windows. للاستزادة يفضل الإطلاع على دليل اعداد خادم ويب محلي خطوة بخطوة. متطلبات متجر بريستاشوب قبل التثبيت تحتاج المنصة توفر المتطلبات التالية في الخادم الذي تشتغل عليه (سواء في خادمك المحلي أو على الاستضافة المشتركة): table { width: 100%; } thead { vertical-align: middle; text-align: center; } td, th { border: 1px solid #dddddd; text-align: right; padding: 8px; text-align: inherit; } tr:nth-child(even) { background-color: #dddddd; } نظام التشغيل لينكس linux، ويندوز windows أو أي نظام قائم على نظام تشغيل يونكس unix-based خادم الويب Apache 2.2 فما أكثر نسخة PHP يقترح نسخة 7.1 فأكثر، نسخة 7.4 مناسبة، على أن نسخة 8 غير مدعومة بعد في المنصة نسخة MySql يشترط نسخة 5.6 على الأقل، كما يفضل نسخ أحدث ذاكرة الخادم الحية RAM يشترط على الأقل 265M كما يمكن لبريستاشوب أن تعمل مع خادم Nginx النسخة 1.1. يجدر الذكر أن هذه المتطلبات صالحة حتى وقت كتابة المقال، ولذلك يفضل دوما الإطلاع على متطلبات النسخة التي تحاول تثبيتها من على توثيق المنصة. هذه المتطلبات في العادة متوفرة على خوادم الاستضافة المشتركة أو على الخوادم المحلية، ولكن يمكنك بكل حال من الأحوال استعمال أداة التحقق من متطلبات الخادم من PrestaShop (كخطوة إضافية) لتفحص ذلك بالتفصيل عن طريق اتباع الخطوات التالية: أولًا، نزّل النسخة الأخيرة من ملف php-ps-info من رابط المستودع على GitHub ثانيًا، ارفع هذا الملف إلى خادمك إلى المسار العام بداخل publlic_html. أما في حالة عملك على تثبيت المنصة على الخادم المحلي فتأكد من رفع الملف إلى مجلد htdocs الخاص بخادم xampp أو lampp على لينكس. يتوفر المجلد في المسار التالي في ويندوز windows: c:/xampp/htdocs وعلى المسار التالي في لينكس Linux: /opt/lampp ويكون كل هذا بشكل افتراضي كون عملية تحديد المسار مُتحكّمٌ فيها عن طريق عملية تثبيت الخادم أول الأمر. ثالثًا، افتح المتصفح واذهب إلى الرابط التالي http://your-domain.com/phppsinfo.php أو http://localhost/phppsinfo.php في حالة استعمال خادم محلي. رابعًا، تأكد أن تستعمل prestashop لكل من كلمة المرور واسم المستخدم ثم اضغط على زر sign in. أخيرًا، ستحصل على صفحة كالتالي: تخبرك هذه الصفحة عن كامل ما تتطلبه المنصة، من نسخة PHP إلى إضافاتها وإعداداتها ومتطلبات الخادم بشكل عام الحالية، المقترحة والمطلوبة، حيث يعبر اللون الأحمر عن عدم توافق إعداد أو إضافة ما مع المطلوب في حين أن اللون الأخضر والبرتقالي يمثلان المتوافق المقترح والمتوافق فقط على الترتيب. تثبيت متجر بريستاشوب هنالك عدة طريق لتثبيت متجر بريستاشوب تختلف باختلاف الهدف من عملية التثبيت، فيمكن تثبيت متجر بريستاشوب على خادم محلي على حاسوبك بغرض تطوير المتجر ثم رفعه لاحقًا على الخادم أو يمكن مباشرة رفع المتجر على الخادم مباشرة وتثبيت وتطويره كما توفر بريستاشوب طريقة سريعة لتثبيت متجر بريستاشوب عبر سطر الأوامر، سنناقشها كل الطرق بالتفصيل. تثبيت متجر بريستاشوب محليا شائع استعمال حزمة xampp لذلك شرحناه في القسم السابق "خطوات إعداد خادم محلي"، وفي حالة عدم امتلاكك لخادم محلي أو تريد إنشاء متجر مباشرة على خادم واستضافة مباشرةً، فتخطى هذا القسم وانتقل إلى القسم اللاحق "رفع متجر بريستاشوب على الخادم". أولًا، تأكد أن تفك ضغط الملف المحمل من موقع بريستاشوب داخل مجلد htdocs الكائن داخل مجلد xampp في ويندوز windows أو lampp في لينكس linux. ثانيًا، شغّل الخادم المحلي xampp، يمكن ذلك في ويندوز Windows عن طريق فتح لوحة تحكم xampp من المسار c:\xampp\xampp-control.exe ثم الضغط على زري البدء start لكل من خادم Apache وقواعد بيانات MySql. أو عن طريق تشغيل الأمر التالي في لينكس: sudo /opt/lampp/lampp start ثالثًا، انتقل إلى الرابط التالي: http://127.0.0.1/prestashop_folder/ وذلك لتشغيل أداة تثبيت prestashop، ثم تابع نفس خطوات استعمال مساعد التثبيت الموضحة سابقا في القسم التالي "خطوات تثبيت متجر بريستاشوب". رفع متجر بريستاشوب على الخادم لتثبيته أولًا، نزل الملف المضغوط لحزمة PrestaShop، وفك ضغطه على الجهاز الشخصي. يمكنك تنزيل النسخة الأخيرة من PrestaShop مباشرة من الموقع الرسمي للمنصة وذلك بعد ملئ النموذج الذي يظهر والموافقة على سياسات الاستخدام. ثانيًا، ستحصل على مجلد باسم prestashop مرفقا بنسخة الحزمة المرافقة، يحتوي هذا المجلد الملفات التالية: ملف Install_PrestaShop.html: يحوي توثيقا لطريقة التثبيت. ملفات الموقع متمثلة في ملف index.php وملف مضغوط باسم prestashop (تأكد أن لا تقوم بفك ضغطه). ثالثًا، أنشئ قاعدة بيانات على الخادم الخاص للمتجر، ومستخدما لهذه القاعدة بكامل صلاحيات الإنشاء، التعديل والحذف، ويفضل استعمال phpMyadmin باتباع الخطوات التالية: توجه إلى phpMyadmin ووثق دخولك دخولك وتوجه إلى حقلي الادخال التاليين: أدخل اسم قاعدة البيانات في الحقل الأول ومن القائمة المنسدلة بجانب الحقل وابحث عن الترميز بالاسم utf8generalci، ثم اضغط على زر الإنشاء create ليتم إنشاء قاعدة البيانات الخاصة بنا. نحتاج تاليا إنشاء مستخدم كامل الصلاحيات باسم مستخدم وكلمة مرور نحتاج الاحتفاظ بها لإستعمالها لاحقا. ولذلك نحتاج التوجه إلى privileges من قائمة التصفح العلوية التي تظهر أثناء الضغط على اسم قاعدة البيانات الخاصة بك المنشأة حديثا. اضغط على add user account واملأ خانتي اسم المستخدم وكلمة المرور وتأكد أن تقوم بالاحتفاظ بهذه البيانات، ومن قائمة الصلاحيات وحدد كامل الصلاحيات عن طريق الضغط على check all. اضغط على Go من أسفل مربعات الحوار. ستظهر رسالة يتم فيها اخبارك أن المستخدم تمت إضافته. رابعًا، ارفع محتويات المجلد مفكوك الضغط prestashop إلى وجهة الملفات المختارة، ويمكن ذلك عن طريق استعمال بروتوكول نقل ملفات مثل FileZilla، أو عن طريق استعمال مدير الملفات الخاص بإستضافتك. يمكنك تثبيت وإعداد FileZilla في ويندوز Windows باتباع الخطوات التالية: نزل ملف تثبيت FileZilla الموافق لنظام التشغيل Windows الخاص بك من الموقع الرسمي للبرنامج. شغل ملف الإعداد. اقرأ ووافق على اتفاقية الترخيص. اضغط على " التالي " لحد إظهار زر التثبيت install ثم اضغطه. بعد اكتمال التثبيت سيمكن ضغط إنهاء أو Finish. أما في لينكس، فيمكنك ببساطة تثبيت FileZilla عن طريق مدير الحزم في التوزيعة التي تستعملها، مثلًا في أوبنتو، يمكن استعمال مدير الحزم apt بتنفيذ الأمرين التاليين: sudo apt update sudo apt install filezilla يمكنك الإطلاع على دليل استخدام FileZilla وphpMyAdmin لإدارة ملفات وقواعد بيانات.. بعد استكمال تثبيت وإعداد FileZilla سيمكن استئناف عملية نقل الملفات إلى خادمنا عن طريق الخطوات التالية: من القائمة العلوية في النافذة التي تظهر بعد فتح البرنامج املأ بيانات مستخدم ftp الخاص باستضافتك ثم اضغط على connect. ستلاحظ ظهور الملفات المرفوعة على خادمك في القسم الأيمن تحت عنوان remote site في مقابل كل الملفات على حاسبك في الجانب الأيسر للشاشة. انتقل إلى مجلد prestashop وارفع محتوياته إلى مجلد public_html في خادمك عن طريق اختيار upload من القائمة التي تظهر عند الضغط على الزر الأيمن للفأرة بعد تحديد المحتويات (يمكنك استثناء ملف install_Prestashop.html والاكتفاء برفع ملف index.php والملف المضغوط prestaShop.zip عن طريق تحديد كليهما ثم اختيار upload أو رفع من القائمة المنسدلة). يمكنك متابعة الحالة في مربع الحوار أسفل الشاشة. خطوات تثبيت متجر بريستاشوب ويتم ذلك عن طريق تصفح للمسار العام لموقعك مرفقا بكلمة install فاستعمل رابط localhost المحلي إن كنت تعمل محليًا على حاسوبك: http://127.0.0.1/prestashop_folder/install أو استعمل النطاق الخاص بالاستضافة إن رفعت موقعك على خادم استضافة مباشرةً: http://www.example.com/prestashop_folder/install حيث ضع مكان prestashop_folder اسم مجلد بريستاشوب الذي وضعته في الخادم. املأ بعد ذلك النماذج بالبيانات المناسبة في كل من النماذج التي تظهر: الخطوة 1: الترحيب وإعداد اللغة. الخطوة 2: الموافقة على اتفاقية الترخيص. الخطوة 3: تأكد الأداة من توافقية النظام وفحصها. الخطوة 4: ملئ استمارة معلومات المتجر. الخطوة 5: ملئ استمارة معلومات البيئة وقواعد البيانات. يمكنك ترك خانة بادئة الجداول فارغة. الخطوة الأخيرة: استكمال التثبيت. بعد اكتمال التثبيت ونجاحه يفضل حفظ معلومات الدخول في مكان آمن، كما يرجى التأكد، لأسباب أمنية، من حذف الملفات والمجلدات التالية من على خادمك: مجلد ‎/install. مجلد ‎/docs. ملف README.md. قد يتطلب عليك أحيانا البحث عن المجلد بالسابقة admin وتغيير اسمه إلى admin فقط. تثبيت متجر بريستاشوب باستعمال سطر الأوامر توفر المنصة كخطوة متقدمة طريقة تثبيت عن طريق سطر الأوامر، موجهة للمستخدمين المتقدمين، الذين يفضلون واجهات الأوامر كونها توفر وسائل أكثر إيجازًا وقوة للتحكم في البرامج أو نظم التشغيل. يتم استعمال هذه الطريقة كالتالي: أولًا، فك ضغط الملف المضغوط pestashop.zip بداخل مجلد public_html في خادمك المستضيف أو htdocs في خادمك المحلي. ثانيًا، الدخول إلى مجلد install. cd install ثالثًا، تشغيل ملف php بعنوان index_cli.php. php index_cli.php ستظهر شاشة كالتالي: قائمة الخيارات التي تظهر هي ما يخص خيارات التثبيت، من لغة ومنطقة زمنية وغيرها. يمكنك تخصيص أي منها عن طريق طباعة ذات الأمر السابق، مع إضافة لاحقة باسم الخيار مرفقة بقيمة لها، مثل: php index_cli.php --option=value في العادة يتم تخصيص مجموعة الخواص التالية: php index_cli.php --domain=example.com --db_server=sql.example.com --db_name=prestashop --db_user=root --db_password=123456789 تتضمن قائمة الخيارات كل من التالي: الخاصية وصف الخاصية معين افتراضيا كـ timezone يعبر عن المنطقة الزمنية المرافقة. localhost step معين افتراضيا كـ process. send_email إرسال رسالة بريد إلكتروني يتم فيها إخبار المسؤول عن تمام التثبيت. true prefix سابقة الجداول بقواعد البيانات. ps_‎ password كلمة مرور المشرف. 0123456789 newsletter اشتراك المشرف في صندوق البريد الإلكتروني لـ prestaShop. true name اسم المتجر. PrestaShop lastname الاسم الأخير للمشرف. Doe language كود الـ iso الخاص بلغة المتجر fr firstname الاسم الأول للمشرف. Jhon engine محرك قواعد البيانات. InnoDB email البريد الإلكتروني الخاص بالمشرف. pub@prestashop.com domain اسم نطاق الموقع. localhost db_user اسم مستخدم قواعد البيانات. localhost db_server خادم قواعد البيانات. localhost db_password كلمة مرور مستخدم قواعد البيانات. db_name اسم قواعد البيانات. prestashop db_create إنشاء قواعد البيانات في حالة عدم وجودها. false db_clear تفريغ ومسح جداول قواعد البيانات في حالة وجودها. true country البلد المرافق. fr إزالة تثبيت متجر بريستاشوب يمكن إزالة متجر بريستاشوب والتخلص من جميع المعلومات المسجلة في المتجر: العملاء، الطلبات، الفواتير، المنتجات …إلخ. بسهولة عن طريق حذف مجلد الملفات prestashop، ويمكن ذلك عن طريق FileZella أو مدير الملفات الخاص باستضافتك. ستحتاج أيضا، إلى حذف كل ما يتعلق بها من جداول وبيانات في قواعد البيانات عن طريق حذف قاعدة بيانات متجرك مباشرة. لحذف قواعد بيانات عن طريق phpmyadmin اتبع التالي: اضغط على قواعد بيانات متجرك من لوحة تحكم phpmyadmin. اضغط على عمليات operations من قائمة التصفح العلوية. اضغط على Drop the database (DROP)‎ من قسم حذف قواعد البيانات remove database. قد لا يتم إعطاء مثل هكذا صلاحيات في بعض الاستضافات المشتركة في phpMyadmin، إذ يتم إنشاء وحذف قواعد البيانات عن طريق وسائل أخرى مثل توفير صفحة منفصلة لإضافة، حذف وإعادة تسمية قواعد البيانات. الخاتمة تعرفنا في هذا المقال على بريستاشوب ومتطلبات تثبيتها وتفاصيل طرق ذلك المختلفة على استضافتنا المشتركة، محليا على الحاسوب وباستعمال سطر الأوامر مرورا بكيفية الإزالة وغيرها - يعتبر انطلاقة لنا في هذا العالم، وحجرَ أساسٍ في إدارة متجرنا الخاص على الإنترنت عن طريق واحدة من أكثر المنصات تمييزًا وشيوعًا. اقرأ أيضًا المقال التالي: تهيئة متجر بريستاشوب جديد الخطوات الأولى في بريستاشوب إدارة متاجر متعددة عبر بريستاشوب
  3. Adnane Kadri
    الاستعلام export وحده في جافاسكربت يستعمل لتصدير روابط للوظائف والدوال أو الكائنات من ملفات تدعى بالوحدات النمطية modules. فجافاسكربت الحديثة لم تعد تضطرك الى كتابة كامل الشيفراتت البرمجية من دوال وكائنات في ملف واحد، بل أصبح يمكنك إنشاء ملفات خاصة بكل دالة وبكل كائن وتصديرها لإستعمالها في ملفات أو سياقات أخرى. هناك نوعان من التصديرات عن طريق export: التصديرات المسماة export function functionName(){...} التصديرات الافتراضية export default expression; أما بخصوص module.export فهي طريقة تخص NodeJs للتصدير، ومثلما واضح أنها تقوم بالوصول الى التابع export للكائن module. الكائن module في NodeJS هو عبارة عن كائن JavaScript عادي يمثل الوحدة النمطية الحالية (التي يتم كتابة الشيفرة فيها). و module هنا هو بشكل بسيط تابع لهذا الكائن يقوم بنفس وظيفة التصدير بمميزات أكثر من حيث أن كل ما ستقوم بتعيينه لـ module.exports سيتم عرضه كوحدة نمطية مستقلة. بشكل بسيط يختلفان من حيث: export تخص جافاسكربت في حين أن module.exports تخص NodeJs. يمكن لـ export ان تقوم بتصدير العديد من الدوال والمتغيرات على عكس module.exports التي تقوم بتصدير أي ما يسند اليها كوحدة نمطية واحدة. وبمعنى آخر لا يمكن أن يحوي ملف جافاسكربت واحد العديد من module.exports في NodeJs في حين أنه يمكن ان يحوي ملف جافاسكربت واحد على العديد من تصديرات export في جافاسكربت. من ناحية الاستعمال: تستعمل module.exports لتصدير كائنات ملفات الاعداد وملفات الخدمات مثل ملفات اعداد ويب باك webpack.config.js و axios.config.js و غيرها. أين يجب أن تحوي خدمة أو كائنا أو وظيفة واحدة مستقلة. تعتبر هنا module.exports طريقة جيدة وشائعة لتصديرها. تستعمل export لتصدير متغيرات، دوال من ملفات. مثل تصدير دالة للترجمة ودالة لتغيير اللغة وكائن الترجمات من ملف لغات language.js مثلا. يتوفر في NodeJs مكافئ لـ export أيضا، هو exports.
  4. Adnane Kadri
    بشكل عام، تتباين طرق تخزين رموز المصادقة بين: التخزين المحلي LocalStorage، تخزين الجلسة SessionStorage أو التخزين عن طريق ملف تعريف الارتباط Cookies. يتم عادة وضع رموز التوثيق في تخزين الويب Web Storage للمتصفحات، والذي يعمل بشكل ممتاز في أغلب حالات الاستعمال. وبشكله المجمل. ويحوي هو ذاته طريقتين تشتركان في حيث أنهما يستعملان مساحة تخزين المتصفح: التخزين المحلي localStorage: حيث أن البيانات تبقى مخزنة حتى يتم حذفها اما يدويا أو عن طريق جافاسكربت التطبيق. تخزين الجلسة sessionStorage: أين يتم حفظ التغييرات التي تم إجراؤها وإتاحتها للصفحة الحالية فقط، وبمجرد إغلاق النافذة، يتم حذف التخزين. من بين عيوب هاته الطريقة: على عكس ملفات تعريف الارتباط، يتم تضييق نطاق الوصول للبيانات المخزنة محليا في نطاق معين ولا يمكن الوصول إلى هاته البيانات من قبل أي نطاق آخر بما في ذلك النطاقات الفرعية، ولذلك فإن تخزين الويب ليس خيارا جيدا ان كنت تستعمل نطاقات فرعية. يمكن الوصول إلى مساحة تخزين الويب من خلال JavaScript في نفس المجال، لذا فإن أي سكربت JavaScript يعمل على موقعك سيكون له حق الوصول إلى مساحة تخزين الويب، قد يسبب هذا هجمات البرمجة النصية عبر المواقع (XSS أو Cross Site Scripting). الطريقة الأخرى للتخزين هي في استخدام ملفات تعريف الارتباط. وتتميز بأن لها عمر يمكن التحكم فيه عن طريق التالي: يمكن تدمير ملفات تعريف الارتباط بعد إغلاق المتصفح (ملفات تعريف ارتباط الجلسة session cookies). كما يمكن أن تكون ملفات تعريف الارتباط دائمة (لا يتم إتلافها بعد إغلاق المتصفح) مع انتهاء الصلاحية. يمكن قراءة ملفات تعريف الارتباط بواسطة كل من JavaScript وجانب الخادم (في حالة Node مثلا). من بين عيوب هاته الطريقة: لملفات تعريف الارتباط حجم أقصى لا يمكن تجاوز (4 كب)، ولذلك فإن هاته الطريقة قد تسبب بعض المشاكل أحيانا. يمكن أن تكون ملفات تعريف الارتباط عرضة لهجمات طلب التزوير عبر المواقع (CSRF أو XSRF). إذا كنت تستخدم ملفات تعريف الارتباط، سيقوم المتصفح تلقائيًا بإرسال معلومات المصادقة مع كل طلب إلى الخادم. أما إذا كنت تستخدم تخزين ويب فيجب عليك كتابة الأمر الذي يدير بالضبط معلومات المصادقة التي يتم إرسالها إليه. كأن ترسلها في الـHeaders أو كمعامل في طلبات GET أو POST. في الأخير، يجب معرفة أن ما يجب الاهتمام به بأكبر قدر هو كيفية تخزين رمز التوثيق على الخادم وكيفية التعامل مع الطلبات التي يستقبلها الخادم من العميل لأن الخادم هو ما يتحكم في كيفية تسيير هذا الأمر، وان قام الخادم بتغطية كامل هاته الاعتبارات فلن تختلف الطريقة والأخرى كثيرا. على أن الشائع والمفضل لدى أغلب المطورين التخزين المحلي في تخزين الويب localStorage لما له من أفضلية من ناحية سهولة التعامل معه. اقرأ أيضا: التخزين المحلي (Local Storage) في HTML5 ملفات تعريف الارتباط وضبطها في جافاسكربت
  5. Adnane Kadri
    يجب أولا فهم كل منهما على حدة قبل محاولة إدراك الفروق الجوهرية التي تميز كلا منهما عن الآخر: عندما تقوم الدالة بإعادة استدعاء نفسها يدعى هذا بالتعاود recursion، أي أنها تعاود استدعاء نفسها من جديد. مثال: function factorial(n) { console.log(n); if(n==0){ // ان كان المعامل الممرر يساوي واحد return 1; // نعيد 1 ونكسر التعاود }else{ return factorial(n -1); // وإلا فإننا سنحتاج تقليل قيمة المعامل ب1 وإعادة استدعاء الدالة } } factorial(1); عندما نقوم بإستدعاء الدالة factorial وتمرير المعامل 1 ستقوم الدالة بالتحقق من ما ان كان 1 يساوي 0 أو لا، فإن كان ستقوم بإعادة عدد عادي. وإلا فإنها ستقوم بإنقاص 1 من 1 وإعادة استدعاء الدالة عن طريق ناتج الطرح أي 0. هذا ببساطة ما يدعى بالتعاود. الحلقة التكرارية loop هي بشكل بسيط تكرار شيفرة معينة كذا مرة. مثال: ان كنا نريد طباعة العدد 5 ثلاث مرات في شاشة الكونسول فإن يخدم فكرتنا هنا هي الحلقات التكرارية. for(var i=1 ;i<3 ; i++){ console.log(5) } في هذا المثال، نحن نقوم بالاعتماد على الحلقة التكرارية for لإعادة طباعة 5 3 مرات. وفيما يلي أهم الفروق بينهما: التعريف، بشكل واضح فإنهما يختلفان من حيث المفهوم والفكرة التي يخدمها كل منهما. السرعة، إذ أن تنفيذ التعاود أقل وأبطئ نسبيا من التكرارات التي هي أسرع منه من ناحية التنفيذ. السياق، إذ يمكن للتكرارت إستعمال أية متغيرات معرفة بشكل عام في حين أن التعاود لا يمكنه إلا إستعمال سياق خاص به، إذ لا يمكن الوصول إلى متغير خارج الدالة التي تقوم بالتعاود. التعقيد، يعتبر التعاود أعقد نسبيا من ناحية فهم وتجريده. قابلية القراءة، إذ يعتبر التعاود أفضل وأنظف من ناحية قابلية القراءة. ويشتركان في حيث أنهما: الشرط، من الواضح أن كل منهما يمتلك شرطا خاصا لكسر التكرار أو التعاود. يمكنك الاستزادة بالاطلاع على التعاود حسب ويكي حسوب، الحلقات التكرارية في البرمجة.
  6. Adnane Kadri
    في الحقيقة، لا مشكلة بإستعمال أي سياق مادام يؤدي الغرض ويعطي التنسيق أو التموضع المطلوب، ولكن الذي يتحكم ويؤول خاصية عن أخرى هو بالدرجة الأولى تجاوب كل خاصية مع مختلف حالات الاستعمال التي يمكن لها أن تحدث. على سبيل المثال: ان كنا نريد مثلا أن يظهر زر التسجيل في القائمة البريدية في منتصف الترويسة الأساسية للموقع، سيمكننا أن نعطي هذا الزر وضعية ثابتة position:fixed ونقوم بضبط المسافة من اليمين واليسار إلى حد أن تتموضع في المنتصف تماما. لحد ما تفي هاته الفكرة بالغرض، ولكن بعض حالات الاستعمال الأخرى قد تسقط هذا المنطق وتفضل طريقة أخرى عن هاته الطريقة. مثل: ان قام المستخدم بالانزلاق الى الاسفل لتفحص باقي العناصر فإن العنوان سيبقى ثابتا في منتصف الصفحة بشكل مزعج يغطي باقي الأقسام. ولو حدث وقلنا أن موقعنا ككل يمتلك قسما واحدا. فإن مشكلة أخرى ستظهر في حالة تصفح العميل للموقع عن طريق الهاتف أو التابلت مثلا، فالنسب من اليمين واليسار في شاشة الكمبيوتر 24" ليست هي نفسها في شاشة الهاتف أو التابلت، ولذلك فإن تموضع العنصر سيتغير في كل من الشاشات. هاته المشاكل تجعل من الأفضل استعمال هامش تلقائي على المحور x بدل الوضعية الثابتة. فإن حدث وقام المستخدم بتصفح الموقع من الهاتف فسيحافظ الموقع على شكله هنا أيضا، لأن الهامش التلقائي من اليمين واليسار لن يتغير من الهاتف الى الكمبيوتر. كما أن العنصر لن يبقى في المنتصف في حالة انزلاق المستخدم لتصفح أقسام اخرى. هاته الاحتمالات والاعتبارات التي يجب أن يأخذها المصمم أثناء عمله لتصميم موقع هي ما يعتبر جزءا هاما من ادارة أولويات التصميم، وهي ما يسقط خاصية على أخرى. وعموما، لا يكتسب ذلك إلا بالاختبار والتجريب والتكرار والخبرة. والتفاعل مع العناصر بشتى الاحتمالات. واستخراج مختلف حالات الاستعمال سيجعلنا نقرر بالضبط أي خاصية نستخدمها وأي خاصية لا، مثل: ما الذي يحدث عندما يضغط المستخدم الزر؟ ما الذي يحدث عندما ينزلق المستخدم الى القسم التالي؟ ماذا سيحدث ان حاول مستخدمنا سحب العنصر؟ ماذا سيحدث ان قام المستخدم بإعادة تحجيم نافذة الموقع؟ الى أي حد تلائم هاته الخاصية التصميم الحالي؟ إلى أي مدى تتجاوب هاته الخاصية أو الخواص مع مختلف الشاشات ولا تتطلبنا أن نخصص كل مجموعة من الخواص لكل شاشة بمفردها؟ هل تعتبر هاته الخواص هي أقل وأنظف شيفرة تحقق الغرض؟ وما الى ذلك من احتمالات واعتبارات..
  7. Adnane Kadri
    الأمر بسيط وليس بذلك التعقيد الذي يظهر عليه، فالتواصل بين الخادم والعميل يتم عن طريق آلية سهلة وبسيطة. لنقل أن التطبيق ككل يتكون من قسمين أساسين: قسم يراه المتصفح ويقرأه ويظهره للعميل الذي يتصفح هذا الموقع. قسم لا يراه المتصفح، ولا يصل إليه مباشرة وتتم فيه أغلب العمليات الحساسة التي من غير الآمن أن يراها من هو المتصفح. القسم الأول يدعى بقسم العميل، في حين أن القسم الثاني يدعى بقسم الخادم. والتواصل بينهما يتم غالبا بالشكل الآتي: عندما نستعرض موقعا ما، فإن تطبيقنا يسمح بتسليم الجزء المسموح إظهاره للمتصفح. يستقبل جزء "العميل" مجموع الشيفرات والملفات المسموح عرضها، ويترجمها المتصفح إلى هياكل HTML و تنسيقات CSS و تفاعلات جافاسكربت مع الموقع. وبناءا على حدث ما (وليكن ضغطة زر) يقوم العميل بالتواصل مع الجزء الخفي للتطبيق، ويكون ذلك عن طريق طلبيات الـ HTTP أين يتم ارسال أو طلب بيانات واستقبال رد. عندما يستقبل العميل هذا الرد يقوم بالتصرف بناءا عليه. لنقم بفهم هذا التكامل جيدا عن طريق مثال شائع عن عمليات تسجيل الدخول: يقوم الطالب "أحمد" بالتصفح عن طريق المتصفح الى رابط تسجيل الدخول في أحد المنصات التي يسجل بها https://app.co/login . يستقبل الجزء الخفي من هذا التطبيق طلب أحمد، ويقوم بإرسال الملف الموافق لصفحة تسجيل الدخول في الرد. يستقبل المتصفح هذا الملف، ويقوم بترجمة HTML و CSS و جافاسكربت ليظهر الموقع بشكله وتنسيقاته وتفاعليته المطلوبة. يقوم "أحمد" بعد أن يعرض له المتصفح تفاصيل الموقع بملئ حقل البريد الالكتروني ببريده الذي سجل به، وحقل كلمة المرور بكلمة المرور الخاصة به. عندما يظغط "أحمد" زر "تسجيل الدخول" يقوم العميل بالتحسس الى هذا الحدث ومعرفة أن أحمد يريد ان نتحقق من بياناته ونسجل دخوله. وبالتالي يقوم بإرسال طلبية HTTP إلى الخادم مرفقة ببريده الالكتروني وكلمة مروره. لأن من غير الآمن أن نتحقق من صدق كلمة المرور ومطابقتها البريد الالكتروني في الجزء الذي يظهر لأحمد، وإلا فإنه سيمكنه تزييف دخوله ومعرفة كلمة المرور الحقيقية لأننا نقارن التي يرسلها مع الحقيقية. يستقبل الخادم هذا الطلب ويقوم بمعالجة هاته البيانات ويتحقق منها، فإن كانت مطابقة قام بإرسال رد بالنجاح، وإلا فإنه سيرسل ردا بالفشل لأحمد. يستقبل أحمد هذا الرد من الخادم، ويقوم بالتصرف بناءا على هذا الرد، فإن كانت بياناته صحيحة طبقا للخادم فسيتم توجيهه مثلا إلى لوحة تحكمه، وإلا فإنه سيتم إظهار رسالة الخطأ الموافقة لذلك. مبدئيا، هاته هي الخطوط العريضة في التواصل بين الخادم والعميل عن طريق طلبيات الـ HTTP. إذ يمكن تكييف أي مثال وفق طريقة الاستماع إلى حدث يعطي إشارة بإرسال الطلب وإستقبال الرد والتصرف بناءا عليه.
  8. Adnane Kadri
    يحاول الخطأ اخبارك أن الأمر git غير معروف في ويندوز، وهذا طبيعي لأن git غير مثبت افتراضا في ويندوز مثل لينكس مثلا ولكنه يحتاج تثبيتا بشكل منفصل قبل محاولة استعمال أي امر git. ولتثبيته نحتاج اتباع الخطوات: تحميل برنامج التثبيت الموافق لنظام التشغيل الذي لديك من الموقع الرسمي https://git-scm.com/download/win تشغيل برنامج التثبيت بعد تمام تنزيله. أثناء تشغيل برنامج التثبيت سيظهر مربع حوار يتم من عليه تحديد المكونات التي سيتم تثبيتها. بعد الانتهاء سيمكن استعمال أوامر git السابقة بشكل عادي، ان واجهت مشكلة بهذا يفضل اعادة تشغيل النظام قبل استعمال git.
  9. Adnane Kadri
    في الحقيقة، غيتهب ليست استضافة وانما نظام git يمكن من عليها متابعة النسخ المختلفة أو تطورات مشروع ما، بشكل يجعل من الممكن التراجع عن تعديل أو نسخة ما. وبجانب هذا يوفر طريقة لاستضافة المواقع الثابتة تدعى github-pages. سؤالك يتضمن أو يقصد به أحد الطريقتين: مشاركة ملفات المشروع وشيفرته لتفحصها من قبل العميل. مشاركة النتيجة النهائية للموقع لكي يستعرضه العميل. أظنك تقصدين الحالة الأولى، وفي ذلك نحتاج اتباع الخطوات التالية: إنشاء مستودع git في github، ويمكن ذلك عن طريق التوجه الى نافذة المستودعات repositories والضغط على زر new. ستظهر استمارة يمكن من عليها تخصيص اسم المستودع، وصفه وحالته: عام أو خاص. حيث ان المستودعات العامة تظهر لأي مستخدم يتصفح حسابك في github في حين أن المستودعات الخاصة لن تظهر. اغلب العملاء يشترطون أن تكون المستودعات التي يشاركها معهم المطورون خاصة. بعد تأكيد انشاء المستودع سيتم التوجيه االى صفحة المستودع، أين تظهر فارغة وموضح عليها بعض الأوامر في كيفية التعامل مع هذا المستودع. بعد انشاء المستودع والتأكد من ذلك نحتاج الآن دفع ملفات المشروع التي على حاسوبك الى هذا المستودع الموجود في github لمشاركتها مع العميل. لدفع الملفات نحتاج تنفيذ هاته الاوامر: نحتاج الدخول الى مجلد ملفات المشروع لتنفيذ الأوامر عليه cd path/to/yourProjectFolder تهيئة مستودع غيت محلي على ملفات المشروع git init اضافة كامل ملفات المشروع الى المستودع git add . تنفيذ أول ايداع للمشروع بتخصيص عنوان له git commit -m "my first commit" انشاء فرع للمشروع للدفع اليه git branch -M main اضافة رابط مستودع غيت ، يرجى التأكد من استبدال رابط مستودع غيت بالرابط المثال في هذا الامر git remote add origin https://github.com/example-user/example-repo.git الآن وقد قمت بهذا يتبقى أمر واحد أخير يحتاج عملا أكثر. الآن وقبل تنفيذ أمر الدفع الذي ينقل الملفات فعليا من مستودعك المحلي الى مستودع غيت نحتاج بالطبع توثيق هذا الطلب فغيتهب لا تقبل أي ملفات من اي شخص يدفع اليها وفقط، بل تحتاج ان تتأكد في هذا أن الشخص الذي يقوم بالدفع هو صاحب المستودع نفسه او يملك صلاحية ذلك. وتستعمل في ذلك طريقة التوثيق عن طريق رمز التوثيق. وفيما يلي كيفية استخراجه. التوجه الى الاعدادات عن طريق الضغط على settings من القائمة المنسدلة. في صفحة الاعدادات التوجه الى اعدادات المطور Developer settings اسفل القائمة الجانبية. الضغط على generate new token من نافذة Personal access tokens لتوليد مفتاح توثيق جديد. تأكدي من تحديد تاريخ انتهاء صلاحيته، ومن تحديد كامل مربعات التحقق التي تخص الصلاحيات أسفله. ثم سيمكن تقديم طلب الانشاء. سيتم بعد هذا اعطاءك مفتاح التوثيق، يرجى التأكد من حفظه بمكان آمن لأنه لن يمكن استخراجه لاحقا عن طريق github. الآن وأخيرا سنعود الى تنفيذ أمر الدفع الأخير على مستودع المشروع في حاسوبك الشخصي: git push -u origin main سيطلب منك بعد تنفيذ هذا الأمر ادخال اسم مستخدم github ثم سيطلب منك ادخال كلمة المرور. كلمة المرور هاهنا هي هذا الرمز الذي قمنا للتو بإنشاءه. الآن وقد قمت بهذا سنحتاج بالطبع مشاركة المشروع مع العميل. ولفعل هذا نحتاج: التأكد من ان العميل يمتلك حساب غيتهب أيضا. عن طريق صفحة المستودع، التوجه الى نافذة اعدادات المستودع settings. من القائمة الجانبية، الضغط على مشاركين collaborators للتحكم فيمن يمكنهم الوصول الى هذا المستودع. الضغط على زر اضافة اشخاص add people. اضافة البريد الالكتروني الذي يستخدمه العميل في غيتهب أو اسم مستخدمه على غيتهب. تأكيد الاضافة. يمكنك الاستفاذة من سلسلة المقالات المنشورة حول git هنا.
  10. Adnane Kadri
    لما قد تتجه للجافاسكربت في حين أنه يمكنك عمل الفكرة مباشرة عن طريق قاعدة css بسيطة؟ أضف هذا التعريف الى ملف التنسيقات styles.css لديك: html{ scroll-behavior: smooth; } يعطي هذا التعريف انتقالا سلسا بين عناصر الوثيقة. يمكنك التماس ذلك عن طريق استعمال قائمة التنقل. تعرف أكثر عن تأثيرات التمرير في صفحات الويب باستخدام Javascript و CSS في هاته السلسلة: تأثيرات التمرير في صفحات الويب باستخدام Javascript وCSS– الجزء الأول. تأثيرات التمرير في صفحات الويب باستخدام Javascript وCSS– الجزء الثاني. تأثيرات التمرير في صفحات الويب باستخدام Javascript وCSS– الجزء الثالث.
  11. Adnane Kadri
    أظن أن دورة واجهات المستخدم تجمع بين أمرين أساسين يدور حولهما سؤالك، هما: التطبيق العملي المفصل. مراجعات الأساسيات والمبادئ. ولذلك فإن الأفضل متابعة الدورة أو استذكار ومراجعة HTML و CSS بما يذكر أو يشرح حولهما في هاته الدورة. أما عن التطبيق العملي، ورغم أنه بغرض الاستزادة والاطلاع أكثر إلا أني أظن أنه من المبكر جدا الاعتماد عليه. فهو وجهة الذي يريد تطبيق مفهوم أو عدة مفاهيم ما على أرض الواقع، ولن يكون فكرة جيدة للاستذكار والمراجعة. هذا وستخصص أغلب المسارات التالية لمسار أساسيات الويب من دورة تطوير واجهات المستخدم للتطبيق العملي، والذي من شأنه سيوجهك حتى لكيفية التطبيق العملي بنفسك في المستقبل. سواءا من ناحية مشاريعك الخاصة أو مشاريع عملائك.
  12. Adnane Kadri
    سبب الخطأ الذي يظهر لديك هو أنك تقوم مباشرة بتنفيذ المتغير h1 دون تعريفه أولا: h1.style.color = "white"; // +++++++ فجافاسكربت تفترض أن تقوم بتعريفه ثم سيمكنك الوصول اليه، أفهم من ذلك أنك تريد الوصول إلى الترويسة بالمعرف title، يمكنك القيام بذلك عن طريق: var opened = document.getElementById("open"), closed = document.getElementById("close"), body = document.getElementById("body"), title = document.getElementById("title"), // ++++++++++++++++ title.style.color = "white"; // ++++++++++++++ سيختفي بعد هذا نص الخطأ ولكن لن تعمل الفكرة بشكلها المتوقع. سنحتاج بعد هذا تغيير المحتوى النصي للعنوان عند كل ضغطة، أو بعبارة أخرى عند كل استدعاء للدالة open1. لفعل ذلك سنحتاج تزويد 1 للمحتوى العددي للعنوان. وبنفس المنطق: title.innerHTML = clicks; ستلاحظ بعض التحسن ولكن ستحتاج هاته الفكرة تعديلا أكثر يتلخص في: function open1() { var opened = document.getElementById("open"), closed = document.getElementById("close"), body = document.getElementById("body"), // لا حاجة لتعريف هذا المتغير فنحن لا نحتاجه أصلا في هاته الدالة title = document.getElementById("title"), clicks = document.getElementById("title").innerHTML || 0, // نقوم باسناد قيمة صفرية كافتراض ان لم يحمل العنوان أي عدد clicks = 0; // لا حاجة لإعادة ضبط عددد النقرات للصفر كوننا نريد تتبع عدد النقرات clicks = parseInt(clicks) + 1; // لتجنب اعتبار الاعداد كسلاسل نصية نقوم بجمع المكافئ للقيمة العددية التي يخزنها العنوان opened.style.display = "block"; closed.style.display = "none"; title.style.color = "black"; // من الطبيعي أن لا يكون لون النص في حالته النشطة ابيضا title.innerHTML = clicks; } النتيجة: function open1() { var opened = document.getElementById("open"), closed = document.getElementById("close"), title = document.getElementById("title"), clicks = document.getElementById("title").innerHTML || 0; clicks = parseInt(clicks) + 1; opened.style.display = "block"; closed.style.display = "none"; title.style.color = "black"; title.innerHTML = clicks; }
  13. Adnane Kadri
    قبل محاولة فهم الأطقم والخرائط ضعيفة الإشارة weakSet و weakMap يجب أولا فهم ما هي الخرائط Maps والأطقم Sets من الأساس. لنقم بتناول كل منهما كالتالي: يمكن فهم الأطقم Sets على أنها تجميعات من القيم الفريدة من أي نوع بيانات (سلسلة نصية، مصفوفة .. الخ). بمعنى أن كل عنصر في هاته التجميعة لا يمكن أن يتكرر ضمن نفس المجموعة. إستعمالات شائعة: // إنشاء طقم const letters = new Set(["أ","ب","ت"]); // إضافة قيمة جديدة للطقم letters.add("ج"); // حذف قيمة من الطقم letters.delete("ج"); // التحقق ما كان الطقم يمتلك قيمة ما letters.has("ج"); // حذف كامل القيم من الطقم letters.clear(); يمكن فهم الخرائط Maps على أنها تجميعات من القيم معرفة في أزواج مفتاح-قيمة / key-value حيث يمكن أن تكون هاته المفاتيح أي نوع بيانات. // إنشاء خريطة const platforms = new Map([ ["Mostaql", 500], ["Hsoub.io", 300], ["Orange", 200] ]); // إضافة قيمة جديدة للخريطة platforms.set("Khamsat", 300); // جلب قيمة من الخريطة عن طريق مفتاحها platforms.get("Khamsat"); و الأطقم والخرائط ضعيفة الإشارة تختلف عنها من حيث أنها: تقبل تخزين كائنات فقط، لا يمكن تخزين أنواع أولية فيها. let visitedSet = new WeakSet(); let john = { name: "John" }; visitedSet.add(john); // مسموح visitedSet.add('5'); // غير مسموح تمتلك الأطقم والخرائط ضعيفة الإشارة توابع محدودة وأقل من الأطقم والخرائط العادية. توابع مثل keys أو values لن تكون متوفرة. ما الغرض وراء استعمالها؟ تستعمل أساسا لتخزين البيانات الإضافية المتعلقة بكائن ما. حيث يتم تعيين هذا الكائن كفمتاح لمجموعة البيانات الإضافية الخاصة به. وبالتالي، لو قمنا بمسح هذا الكائن من الذاكرة فستختفي هاته البيانات أيضا. ولنقل كمثال، يريد الطالب Jhon تخزين ملف سري يخصه، بشرط أن خروج هذا الطالب سيعني مسح هذا الملف السري. نقوم بذلك كالتالي: weakMap.set(john, "secret documents"); أي فقدان للكائن john في التطبيق، سيؤدي إلى مسح القيمة المسندة إليه كمفتاح في الخارطة ضعيفة الإشارة. يمكنك الإستزادة بالتعرف عليهما في النوع WeakMap والنوع WeakSet: الخرائط والأطقم ضعيفة الإشارة في جافاسكربت.
  14. Adnane Kadri
    أظن أنه لا مشكلة بتموضع الصورة فهي تأخذ حجمها الكامل دون أن تمتلك أية فراغات أو مساحات بيضاء تجعلها تحجز حجما أكثر من الذي تحتاجه. يمكنك جعل القسم المجاور ينزل قليلا ليتساويا على حامل المحور الأفقي، يمكنك ذلك عن طريق إعطاءه هامشا أكثر كالتالي: .main div:first-child{ padding: 40px; } ولكن يبقى هذا الحل حلا مؤقتا إذ قد يتدخل إعطاء هامش بحجم كبير في تنسيق القسم وكسر النصوص، ولذلك فإنه يقترح الإستفادة من خواص الصندوق المرن flexbox لعمل هاته الفكرة. تأكد من إعطاء الخاصيتين التاليتين للحاوي الأب: .main { width: 100%; min-height: 50vh; display: flex; background-color: #ECECEC; align-items: center; /* ++++++++++++++++++ */ justify-content: center; /* ++++++++++++++++++ */ } ثم من إعطاء الخاصية التالية لعناصر الأبناء: .main div{ align-items: center; } تعرف على CSS Flexbox وأساسيات استعماله لهيكلة صفحات الويب.
  15. Adnane Kadri
    في الغالب، تكون هاته المشكلة بسبب اتجاه النصوص والمحاذاة داخل عناصر span التي تكون مضبوطة تلقائيا، يمكنك ضبط تموضع النص بداخلها عن طريق وضعها داخل عنصر div أولا ثم إعطاء هذا العنصر محاذاة واتجاه من اليمين لليسار ليوافق الترميز العربي. يكون ذلك كالتالي: <div> <span> 10 جانفي 2022 </span> </div> الافتراضي: بعد تطبيق تنسيقات المحاذاة والاتجاه عليه: div { text-align:right; direction:rtl; }
  16. Adnane Kadri
    يمكنك الإستعانة بالمحددات الزائفة لتحقيق نفس الغرض. أظن أنه يوجد بمكان ما بملفات التنسيقات شيفرة كالتالي: p::after{ content:''; width:1px; height:100%; background:orange; position:absolute; left:0; top:0; } بمعنى: أنه يوجد عنصر زائف يتم إضافته بعد الفقرة المحددة ويتم إعطاء هذا العنصر عرض 1 بكسل و إرتفاع 100 بالمئة من عرض الفقرة حيث يتموضع بشكل مطلق بمسافة 0 من اليسار و0 من الأعلى. وبالتالي، وللتحكم في موضعه لنتأكد فقط من جعله يتموضع بمسافة 0 من اليمين لا من اليسار و0 من الأعلى: p::after{ content:''; width:1px; height:100%; background:orange; position:absolute; right:0; top:0; } تعرف أكثر عن محددات الأصناف الزائفة (pseudo-classes) في المحددات (Selectors) في CSS.
  17. Adnane Kadri
    أولا يمكنك جعل كامل الصور على سطر واحد عن طريق إرفاق الحاوي blocks بالقيمة nowrap في الخاصية flex-wrap للتأكد من أن الصندوق المرن لن ينزل سطرا في حالة تجاوز عرض أحد الصناديق للمسافة المقصودة. #blocks { margin-top: 20px; padding: 60px 120px; display: flex; flex-flow: row wrap; justify-content: center; align-content: center; align-items: flex-start; flex-wrap: nowrap; /*++++++++++++++++++++*/ } بعد هذا سنحتاج إعطاء الصور عرضا وإرتفاعا متساويا وليكن على الخيار: #blocks .conten img { height: 500px; width: 500px; } لا أفضل هذا الخيار لأنه قد يؤدي إلى تبدد الصورة وعدم ظهورها بحجمها الفعلي، عوضا عن ذلك أفضل إعطاء الصور ارتفاعا متساويا وعرضا تلقائيا، وتقطيع أو إخفاء الأجزاء المتجاوزة من الصورة لعرض الحاوي. لنقم بإعطاء الحاوي conten القيمة hidden في الخاصية overflow: #blocks .conten { text-align: center; margin-left: 15px; position: relative; overflow: hidden; } ثم ارتفاعا متساويا وعرضا تلقائيا للصورة داخله: #blocks .conten img { height: 500px; width:auto; } ولفهم دور overflow:hidden في هذا قم بتعليق سطرها ولاحظ التأثير. توثيق الخاصية overflow .
  18. Adnane Kadri
    ما الأقسام التي تقصدها؟ كما أنه يرجى إرفاق كامل الشيفرة مع الإشارة إلى أية تنسيقات تطبق على هاته العناصر
  19. Adnane Kadri
    يمكنك عمل ذلك عن طريق إظهار نافذة نموذج بشكل نافذة منبثقة بعد إعطاءها الإشارة عن طريق الحدث window.onload. كما يمكن الإستعانة ببوتسراب لتحقيق هذا الغرض عن طريق مكون النوافذ Modal. نقوم بتضمين الملفات اللازمة لعمل بوتستراب بصفحة الـ HTML لدينا: <!-- bootstrap تضمين ملف --> <link rel="stylesheet" href="[BOOTSTRAP_CSS_HERE]"> <!-- تضمين ملف جيكويري --> <script src="[JQUERY_CDN_LINK_HERE]"></script> <!-- popper تضمين ملف --> <script src="[POPPERJS_CDN_LINK_HERE]"></script> <!-- bootstrap تضمين ملف --> <script src="[BOOTSTRAP_JS_HERE]"></script> إضافة عنصر النموذج modal إلى صفحة الـ HTML لدينا: <div class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">عنوان النافذة</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>قم بإضافة نموذجك هنا</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary">حفظ التغييرات</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">إغلاق</button> </div> </div> </div> </div> إظهار النموذج بمجرد تمام تحميل موارد الصفحة: $(window).load(function(){ $('#myModal').modal('show') }) تعرف على بوتستراب أكثر هنا.
  20. Adnane Kadri
    بالطبع يمكنك ذلك، ويتم تثبيته وإعداده بخطوات بسيطة. في الحقيقة، يوجد ثلاث طرق لعمل ذلك نلخصها في التالي: التثبيت والإستعمال عن طريق CDN خارجي. تضمين بوتستراب عن طريق تثبيته كإعتمادية عن طريق مدير الحزم npm. إستعمال واحدة من حزم React Bootstrap. الطريقة الأولى: التثبيت والإستعمال عن طريق CDN خارجي ولعلها أسهل طريقة، أين يمكن مباشرة تضمين ملفات التنسيقات والجافاسكربت وإرفاقها بروابط صالحة، فملفات التنسيقات تضمن في وسم head كالتالي: <link rel="stylesheet" href="[BOOTSTRAP_CSS_HERE]"> ويتم تضمين ملفات الجافاسكربت لها كالتالي: <!-- تضمين ملف جيكويري --> <script src="[JQUERY_CDN_LINK_HERE]"></script> <!-- popper تضمين ملف --> <script src="[POPPERJS_CDN_LINK_HERE]"></script> <!-- bootstrap تضمين ملف --> <script src="[BOOTSTRAP_JS_HERE]"></script> الطريقة الثانية: تضمين بوتستراب عن طريق تثبيته كإعتمادية عن طريق مدير الحزم npm أين ستحتاج في هذا تثبيت حزمة bootstrap عن طريق مدير الحزم npm كالتالي: npm install bootstrap ثم تضمين ملفات تنسيقات بوتستراب وأيضا jQuery و popper في ملف index.js كالتالي: import 'bootstrap/dist/css/bootstrap.min.css'; import $ from 'jquery'; import Popper from 'popper.js'; import 'bootstrap/dist/js/bootstrap.bundle.min'; import React from 'react'; ان لم تكن قد قمت بتثبيت jquery و popper فتأكد من ذلك أولا عن طريق طباعة الأمر: npm install jquery popper.js لأن بوتستراب يستعمل كلا منهما. الطريقة الثالثة: إستعمال واحدة من حزم React Bootstrap لعل الأكثر شيوعا من بين هاته الحزم هي حزمة react-bootstrap، يتم تثبيتها عن طريق طباعة الأمر: npm install react-bootstrap bootstrap@5.1.3 ثم بتضمين المكون المستهدف لإستعماله: import { Button } from 'react-bootstrap'; الإستعمال: <Button variant="primary">زر بوتستراب</Button>
  21. Adnane Kadri
    يمكنك البدء مباشرة بالمسارات الأخرى التي تحوي معلومات أحدث، ولا حاجة لك في أرشيف المسارات الأقدم. يمكنك التخلي عن مشاهدته. السبب الأرجح في عدم التخلي عن أرشيف المسارات الأقدم بعد تحديث الكورسات هو في كون امتلاك المشترك في دورات الأكاديمية وصولا مدى الحياة، فالأكاديمية لا تلزم الطلاب بمشاهدة الفيديوهات في أوقات محددة، ولذلك نجد بعض الطلبة الذين لا يزالون يحتاجونه كونهم قد تأخروا عن إنهاء الكورس أو مشاهدته.
  22. Adnane Kadri
    صحيح، ان تصنيفات أرشيفات المسار الأقدم من دورات الأكاديمية هو القسم الذي يحوي أرشيف المسارات التي تم تحديثها وإستبدالها بمسارات أحدث. وفي الغالب، لن يكون عليك مشاهدتها ان لم تكن قد بدأت بها بالفعل.
  23. Adnane Kadri
    ليس تماما، يصطلح بـ "مجموعة بدء" أو "Starter Kit" أو "Starter Pack" على أي مجموعة من الأدوات، أطر العمل والحزم التي تقدم لشخص يقوم بنشاط معين أو يبدأ عملية ما لأول مرة، قد يكون بناء مشروع جديد أو غيرها من العمليات. تقترح لارافيل بدورها مجموعة أدوات ترى أنها تسهل تطبيق لارافيل لأول مرة، هاته الأدوات هي: Laravel Breeze: والذي هو تطبيق لارافيل بسيط يتضمن كامل ميزات مصادقة Laravel، بما في ذلك تسجيل الدخول والتسجيل وإعادة تعيين كلمة المرور والتحقق من البريد الإلكتروني وتأكيد كلمة المرور بسطر أوامر واحد. يمكن تخصيصه للعمل مع Vue أو React. Laravel Jetstream : وهو تطبيق مصمم بشكل جميل يوفر ميزات متعددة يوفرها لارافيل مثل تسجيل الدخول والتسجيل والتحقق من البريد الإلكتروني والتوثيق الثنائي وإدارة الجلسة وواجهة برمجة التطبيقات عبر Laravel Sanctum وميزات إدارة الفريق الاختيارية وغيرها الكثير. وبالطبع فإن إستعمال مجموعات البدء ليس اجباريا، فلارافيل تترك لك حرية استخدامها أو الاستفادة منها وضمها إلى تطبيقك وتنزيلها بشكل منفصل، فهي لا تأتي معه.
  24. Adnane Kadri
    هل يمكنك إرفاق كامل شيفرة المكون الأب؟
  25. Adnane Kadri
    بالشكل الأبسط، ليس تعريب قوالب ووردبريس إلا مثل جعل ملفات HTML و CSS عادية مترجمة إلى العربية مع ملائمة تنسيقاتها للغة العربية، مثل محاذاة النصوص وتعويم العناصر وغيرها. توفر بعض القوالب ملفات لغات معينة، في حين أن البعض الآخر يقوم مباشرة بطباعة الكلمات والجمل باللغة الافتراضية في ملفات المكونات ذات اللواحق php. مثل: template-parts/header/header.php template-parts/footer/footer.php تكون ملف اللغات لقوالب ووردبريس في المسار التالي عادة: theme/inc/translations.php تقوم مثل هاته الملفات بإعادة مصفوفة ترابطية بمفتاح كل كلمة أو جملة تقابلها ترجمتها معبرة بقيمة هذا المفتاح. نقوم بتعديل قيم كل مفتاح وترجمته إلى العربية. في تعديل تنسيقات الـ css سيمكن ذلك عن طريق تعديل ملفات التنسيقات الكائنة عادة بـ : css/
×
×
  • أضف...