لوحة المتصدرين
المحتوى الأكثر حصولًا على سمعة جيدة
المحتوى الأعلى تقييمًا في 02/23/23 in أجوبة
-
السلام عليكم و رحمة الله لديّ موقع انترنت عملته من خلال html , css js لشركة في دبي ، و لكن عندما رفعته أرى انه على الهواتف يكون بطيئاً نوعاً ما ، هل من ارشادات تجعل الموقع اكثر سرعة الموقع يوجد فيه العديد من الصور و ٤ فيديو و شكرا لكم2 نقاط
-
انا كنت عاوز اعمل برنامج لفكرة معينة بس قررت ان انا اللي اعمل البرنامج فا كنت عاوز اعرف اتعلم تصميم التطبيقات علي أي طريقة يعني اتعلم لغة جافا و اصمم به البرنامج ولا اتعلم لغة dart وانفذ البرنامج علي فلاتر وايه الافضل فيهم من حيث عاوز ادخل منتجات بعد تنفيذ البرنامج والتعديل عليه1 نقطة
-
السلام عليكم لديّ موقع صممته من خلال html , css , js يوجد قسم في موقعي أريد به من المستخدم وضع حسابه الemail و يضغط اشتراك حتى استطيع الحصول على العديد من الايميلات.. كما في جميع المواقع كيف استطيع من خلال javascript ان ارسل القيمة الذي ادخلها المستخدم الى ايميلي الخاص مثلا ، او حفظها بطريقةٍ ما في إحدى الأماكن1 نقطة
-
في حالة وجود margin-bottom سيوجد مسافة في النهاية خاصة بعنصر a الأخير وهو ما لا نريده، ففي الصورة المطلوبة يريد حذف المسافات بالكامل، الكود سليم ويمكن إصلاحه من خلال تعديل كود css بإضافة: .qlink:not(:last-child){ margin-bottom: 7px; } ويصبح كود CSS كالتالي: .box{ border-style:solid; display: inline-block ; } .qlink { display:block; text-align:center; color: white; width: 150px; padding:16px 0; text-decoration:none; font-size: 12px; font-weight: bold; background-color: #1F70C4; } .qlink:not(:last-child){ margin-bottom: 7px; } .qlink:hover {background: #2484E9;} .qlink:active {background: #155292;} وفي حال أراد السائل إبقاء الكود الخاص به كما هو، فيجب تعديله ليصبح بالشكل التالي: HTML <div class='container'> <a href="https://google.com/1"> <button class="qlink">Awards</button> </a> <a href="https://google.com/2"> <button class="qlink">Directory</button> </a> <a href="https://google.com/3"> <button class="qlink">Patent</button> </a> <a href="https://google.com/4"> <button class="qlink">Calendar</button> </a> <a href="https://google.com/5"> <button class="qlink">Leave Request Tool</button> </a> <a href="https://google.com/6"> <button class="qlink">Publications</button> </a> </div> CSS div { width: max-content; text-align: center; border-style:solid; margin: auto; } .qlink { border: none; background-color: #1F70C4; color: white; height: 35px; width: 150px; font-size: 12px; display: inline-block; font-weight: bold; } .qlink:hover {background: #2484E9;} .qlink:active {background: #155292;} فالمشكلة كانت في إزالة الـ margin الخاصة بالأزرار ثم ضبط عرض الـ div الأب الذي يحوي كافة العناصر ليصبح عرضه هو نفس عرض المحتوى بداخله من خلال width: max-content;
1 نقطة -
شكرا1 نقطة
-
عند رفع المشروع على github فان المشروع لا يظهر بالشكل المطلوب بل يظهر بهذا الشكل ملفات المشروع : first.rar
1 نقطة -
كيف اضيف مقطع في html ساعات محاولة وبحث وما عرفت المشكلة
1 نقطة -
الموضع سهل ولا يجب أن تيأس بسرعة هكذا. غير أن هذا الوسم مهم ويفضل أن تتعلم كيف تستخدمة. دعنا نستخدم الوسم Video ولكن هذه المرة سوف نستخدم فيديو من الأنترنت قم بتجربة هذا الكود. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <video src="http://techslides.com/demos/sample-videos/small.mp4" controls></video> </body> </html> و إذا أردت أن تضع فيديو من الجهاز الخاص بك, لتسهيل الأمر جرب أن تضع الفيديو في نفس مسار ملف ال HTML هكذا. يمكنك معرفة الكثير عن هذا الوسم من خلال موسوعة حسوب العنصر <video> - موسوعة حسوب (hsoub.com).
1 نقطة -
إذا أردت استضافة مجانية أو حتي بسعر معقول أنصحك بأستضافة Render. Render هو مزود خدمة استضافة الويب متخصص في تقديم حلول استضافة منخفضة التكلفة وسهلة الاستعمال. يوفر Render حلول استضافة مناسبة لمستخدمين المبتدئين والمتقدمين. يعرض Render أسعار مناسبة (حيث تبدأ من 19 دولار) . يوفر Render أيضا إمكانية التعامل مع التقنيات مثل البروتوكول SSL, SSH, MySQL, PostgreSQL, PHP, Python, Node.js والعديد من البرامج والتطبيقات الاخرى. ويمكنك معرفة كيفية رفع مشروع Next.js علي Render من هنا. وأسعار الاستضافة من هنا.1 نقطة
-
في البداية إذا أردت التحكم في جهازك عن بعد فقط، فيمكنك استخدام برامج مثل TeamViewer وتركها تعمل على الجهاز والدخول عليه بواسطة الـ IP وباستطاعتك تعيين كلمة سر. أما تحويل جهازك إلى سيرفر عام يمكن أن يتم باستخدام بعض البرامج المجانية التي تمكنك من إعداد خادم على جهازك الخاص وجعله متاحًا للوصول من أي جهاز آخر على شبكة الإنترنت. سأشرح لك الخطوات الأساسية اللازمة لتحقيق ذلك: 1- تثبيت برنامج خادم الويب: يمكن استخدام أي برنامج خادم ويب مثل XAMPP أو WAMP أو Apache أو laragon لإنشاء خادم ويب. يوفر هذا البرنامج خادم ويب وقاعدة بيانات و PHP. يمكنك تنزيل البرنامج من موقع الويب الرسمي وتثبيته على جهازك. 2- اختبار الويب سيرفر: يجب التأكد من أن الويب سيرفر يعمل بشكل صحيح على جهازك. يمكن القيام بذلك عن طريق فتح متصفح وزيارة localhost. 3- تعيين عنوان IP ثابت لجهازك: تعيين عنوان IP الثابت يعني تحديد عنوان الإنترنت الخاص بجهاز الكمبيوتر الخاص بك بشكل دائم، والذي يتم تعيينه يدويًا. يختلف هذا عن العنوان الديناميكي الذي يتم تعيينه تلقائيًا عند الاتصال بالإنترنت. بعد تثبيت برنامج الخادم الخاص بك، سيكون من الضروري تعيين عنوان IP الثابت لجهاز الكمبيوتر الخاص بك، حيث يمكن استخدام هذا العنوان للوصول إلى جهاز الكمبيوتر الخاص بك عبر الشبكة. ومن أجل ذلك يمكنك العثور على إعداد تعيين العنوان الثابت في قسم الشبكة في إعدادات جهاز الكمبيوتر الخاص بك. 4- إعداد المنافذ اللازمة: يجب فتح المنافذ الخاصة بالويب سيرفر على جدار الحماية الخاص بالجهاز، للسماح لأي شخص في الشبكة بالوصول إلى الويب سيرفر. يجب فتح المنافذ 80 لبرتوكول HTTP و 443 لبروتوكول HTTPS. سأشرح الخطوات اللازمة لفتح المنافذ على راوتر من نوع TP-Link Archer C7. تسجيل الدخول إلى لوحة التحكم الخاصة بالراوتر: افتح متصفح الويب الخاص بك واكتب عنوان IP الافتراضي الخاص بالراوتر في شريط العنوان (عادةً ما يكون 192.168.0.1 أو 192.168.1.1). سيطلب منك إدخال اسم مستخدم وكلمة مرور لتسجيل الدخول إلى لوحة التحكم. الوصول إلى قسم إعدادات المنافذ: بمجرد تسجيل الدخول إلى لوحة التحكم، انتقل إلى قسم "Advanced" (متقدم) ثم اختر "Port Forwarding" (توجيه المنافذ). إضافة إعدادات التوجيه: اختر "Add New" (إضافة جديدة) لإنشاء إعدادات التوجيه الجديدة. سيطلب منك تحديد اسم الجهاز (عادةً ما يكون اسم الخادم) وعنوان IP الخاص بالجهاز (عنوان IP الثابت الذي قمت بتعيينه سابقًا) ورقم المنفذ الداخلي والخارجي. حفظ الإعدادات: بعد إدخال جميع التفاصيل اللازمة، انقر على "Save" (حفظ) لحفظ الإعدادات الجديدة. ستحتاج إلى تكرار هذه الخطوات لإضافة إعدادات توجيه منفذ إضافية. التأكد من البورتات التي تم فتحها من خلال التوجه لموقع https://portchecker.co/checking وستجد أنه تعرف على الـ public IP الخاص بجهازك ما عليك سوى كتابة بورت 80 ثم اضغط على check وكرر نفس الأمر مع بورت 443 وتأكد من ظهور كلمة port x is open. من المهم ملاحظة أن إعدادات توجيه المنافذ يمكن أن تختلف قليلاً بين الراوترات المختلفة، ومن المهم أيضًا إتباع الإرشادات الخاصة بالراوتر الخاص بك للتأكد من تمكين توجيه المنافذ بطريقة صحيحة. 5- تفعيل خدمة DNS: بعد الانتهاء من إعداد إعدادات الراوتر وتحديد عنوان IP الخاص بالجهاز الخادم، يمكنك استخدام DNS لتسهيل عملية الوصول إلى الخادم. يمكنك استخدام خدمات DNS المجانية مثل No-IP أو DynDNS لتسجيل عنوان IP الخاص بالخادم الخاص بك وربطه بعنوان URL سهل الاستخدام. وسبب القيام بتلك الخطوة هو ربط الـ public IP باسم دومين أو عنوان URL يمكنك كتابته والدخول على جهازك عن بعد، فربما بعد إعادة تشغيل الراوتر قد يتغير الـ public IP، ويمكنك الحصول من مزود الخدمة على static IP. الخطوات لاستخدام DNS هي كالتالي: قم بإنشاء حساب على موقع خدمة DNS المختارة والأفضل No-IP لكونها مجانية. أدخل اسم النطاق الذي تريد استخدامه واتبع التعليمات لربط عنوان IP الخاص بالخادم بالاسم المستخدم في النطاق. تأكد من تحديث إعدادات الراوتر الخاص بك للسماح بمرور حركة المرور المرتبطة بـ DNS من الخارج إلى الجهاز الخادم. قم بتنزيل برنامج العميل الذي يقدمه موقع خدمة DNS المختارة وتثبيته على الجهاز الخادم. سيتم تشغيل هذا البرنامج في الخلفية وسيقوم بتحديث عنوان IP الخاص بالخادم بشكل دوري. يمكنك الآن الوصول إلى الخادم باستخدام عنوان URL المحدد لخدمة DNS المستخدمة.
1 نقطة -
هناك العديد من الخيارات المتاحة لاستضافة تطبيقات Next.js على الإنترنت، ويمكن الاختيار بين خيارات مثل: Vercel: هي منصة استضافة خاصة بـ Next.js وتوفر دعمًا متميزًا لهذه التقنية وتقدم خدمة الاستضافة بشكل مجاني ومدفوع، وتسمح لإضافة عدد غير محدود من النطاقات. namecheap: تدعم شركة Namecheap استضافة تطبيقات Next.js وتوفر خيارات متعددة للخوادم المشتركة والخوادم الخاصة بأسعار مناسبة. يمكنك اختيار خطة استضافة تناسب احتياجاتك وميزانيتك، مع توفير خيارات متعددة للدفع ودعم فني متاح على مدار الساعة. Heroku: هي خدمة استضافة تدعم تقنية Node.js وتتميز بأنها سهلة الاستخدام وتوفر خدمة مدفوعة ومجانية. DigitalOcean: هي خدمة استضافة توفر خيارات متعددة للاستضافة بدءًا من الخوادم الافتراضية حتى الخوادم الخاصة والاستضافة المدارة، وتوفر دعمًا لتقنية Node.js و Next.js، ويمكن إضافة عدد غير محدود من النطاقات. AWS Elastic Beanstalk: هي خدمة استضافة توفر دعمًا لتقنية Node.js و Next.js، وتسمح بإضافة عدد غير محدود من النطاقات، وتعتمد على سحابة Amazon Web Services (AWS)، وتوفر خيارات متعددة للتكوين والتوسع. Google Cloud Platform: هي خدمة استضافة توفر دعمًا لتقنية Node.js و Next.js، وتسمح بإضافة عدد غير محدود من النطاقات، وتتميز بأنها سهلة الاستخدام وتقدم خدمة مجانية ومدفوعة. Cloudflare Pages: يمكن لـ Cloudflare Pages دعم عدة نطاقات لتطبيق واحد، وتوفر خدمة CDN مدمجة لتحسين أداء التطبيقات، بالإضافة إلى أنها توفر عمليات نشر بسيطة وسهلة الاستخدام. وتوفر Cloudflare Pages خيارات دفع مختلفة مثل الاشتراك الشهري أو الدفع مقابل الاستخدام بأسعار تنافسية بالمقارنة مع خدمات الاستضافة الأخرى. Netlify: تعتبر Netlify مثالية للاستضافة السريعة والبسيطة لتطبيقات Next.js. توفر خططًا مجانية ومدفوعة ، ولكن يمكن أن تكون الخطط المدفوعة أكثر تكلفة. Linode: توفر Linode خدمة VPS مع خطط متعددة بأسعار مختلفة. تدعم Node.js ويمكن استخدامها لتشغيل تطبيقات Next.js. توجد العديد من الخيارات المتاحة لاستضافة تطبيقات Next.js، والخيار الأفضل يعتمد على ميزانيتك واحتياجاتك الفردية. من بين الخيارات التي تم ذكرها، Vercel هي الخيار الأكثر تخصصاً لاستضافة تطبيقات Next.js، وتقدم خدمة استضافة مدفوعة ومجانية مع دعم لإضافة عدد غير محدود من النطاقات.1 نقطة
-
ممتاز، تعلم HTML و CSS هو الخطوة الأولى لتصميم وتطوير صفحات الويب، ولكن هناك الكثير من التقنيات والأدوات المختلفة التي يجب أن تتعلمها لتكون مطور ويب محترف. HTML و CSS ليستا لغات برمجة، إنما هما لغتان تستخدمان لتطوير صفحات الويب. HTML هي لغة ترميز النصوص التي تستخدم لتحديد هيكل صفحات الويب، بينما تستخدم CSS لتحديد التنسيقات والأساليب الجمالية لعرض محتوى الصفحة. بينما لغة JavaScript تعتبر لغة برمجة مستخدمة بشكل شائع في تطوير صفحات الويب وتطبيقات الويب. يمكن استخدام JavaScript لتوفير العديد من المزايا لصفحات الويب، بما في ذلك تحديث المحتوى ديناميكيًا وتفعيل العناصر التفاعلية. لذلك، إذا كان الشخص يرغب في تطوير صفحات الويب التفاعلية والديناميكية، فسيحتاج بالتأكيد إلى تعلم JavaScript. ولكن إذا أردت أن تأسيس نفسك بشكل قوي في البرمجة ولديك وقتٍ كافي لذلك، فأنصحك بفعل ذلك وبشدة والإتجاه نحو تعلم لغة C++ قبل تعلم JavaScript. وإذا أردت تعلم مجال الويب، إليك مسارًا كاملاً لتصبح مطور Full-stack لتتمكن من إنشاء مشروع كاملاً بمفردك: JavaScript: هي لغة برمجة تستخدم عادة لتطوير وظائف تفاعلية في صفحات الويب، مثل التحقق من الإدخالات وإضافة تأثيرات متحركة. لتعلم JavaScript. Bootstrap: هي إطار عمل لتصميم صفحات الويب تستخدمه العديد من المواقع الكبيرة، والذي يسهل عليك عملية تصميم الصفحات وجعلها تستجيب بشكل جيد على جميع الأجهزة المختلفة. tailwindcss: يمكنك تعلم tailwindcss بدلاً من Bootstrap فهى توفر مرونة أكبر في تخصيص التصميم وإعادة استخدام الأكواد في العديد من المشاريع المختلفة، حيث يمكن للمطورين تعريف مخصصاتهم الخاصة واستخدامها في أي مكان داخل التطبيق. Sass: هي لغة تعتمد على CSS، وتستخدم لتبسيط عملية كتابة الأنماط والتنسيقات في CSS، وتحسين إمكانية إعادة استخدام الشفرة. Git: هو نظام للتحكم في الإصدارات يستخدم لتتبع التغييرات في الشفرة المصدرية وإدارة تعاون فريق العمل على المشاريع. تعلم إطارات العمل (Frameworks): تعتبر إطارات العمل مجموعة من الأدوات والمكتبات التي تساعد المطورين في إنشاء تطبيقات الويب بسهولة وسرعة. بعض الإطارات الشائعة هي React.js و Angular و Vue.js. إطارات العمل الخاصة بالـ Back-End: يمكن استخدام إطارات العمل الخاصة بالـ Back-End مثل Node.js وإطار العمل الخاص بها Express.js لبناء تطبيقات ويب ديناميكية وقابلة للتوسع. تتيح هذه الإطارات العديد من المزايا مثل: القدرة على التعامل مع البيانات وقواعد البيانات باستخدام لغة جافاسكريبت على الجانب الخادم. القدرة على بناء API للتفاعل مع التطبيقات الأخرى وتوفير خدمات ويب. 8 - قواعد البيانات: يجب تعلم قواعد البيانات الحديثة والشائعة مثل MySQL أو MongoDB أو PostgreSQL. لتعلم العمل مع إطارات العمل الخاصة بالـ Back-End، يمكن البدء بتعلم الأساسيات في لغة جافاسكريبت ومفاهيم البرمجة الأساسية. بعد ذلك يمكن التحول إلى تعلم إطار العمل Node.js و Express.js، والتعلم عن كيفية التعامل مع البيانات والاتصال بقاعدة البيانات. من المهم أيضًا التعلم عن كيفية بناء API وتصميمها بشكل صحيح لتوفير خدمات ويب عالية الجودة وآمنة. يجب أيضًا تعلم الأمان والحماية وكيفية التعامل مع الأخطاء والأخطار المحتملة في تطوير تطبيقات الويب.1 نقطة
-
كما أخبرك عمر في التعليق السابق فإنه يجب ان تقوم بالمقارنة بنفسك من خلال البحث عن الإستضافات التي تدعم nextjs ومن هذه الإستضافات AWS Amplify Digital Ocean Heroku Google Cloud Run Cloudflare Pages سيكون من الصعب ذكر حلول الاستضافة المتاحة لمشاريع Next.js دون ذكر Vercel حيث يعتبر من أفضل الحلول لإستضافة مواقع nextjs.1 نقطة
-
حتى تصبح مطور frontend محترف يجب عليك دراسة لغة javascript وليس java حيث هذه لغة تختلف عن الأخرى وعامة عند دراسة الويب يجب عليك دراسة لغة javascript حيث تعتبر اللغة الأساسية لتطوير مواقع الويب سواء ال frontend أو ال backend حيث تستعمل لإعطاء بعض عناصر الصفحة صفاتٍ تفاعلية، مثل شريط متحرك من الصور أو قوائم تظهر عند وقوع حدث معيّن ...إلخ. ويمكنك التعرف على مجال الويب والتقنيات واللغات المستخدمة من خلال المقالة التالية وقم بقراءة الإجابات على هذا السؤال للمزيد من المعلومات1 نقطة
-
من خلال تجربتي فأفضل المواقع هي namecheap.com من ناحية الفلوس، حيث تدعم الاستضافة المشتركة الارخص لديهم رفع ثلاث مواقع وتدعم node js أي وبالتالي تدعم الـ next. وفي حال لم تكن مشاريعك بتلك الضخامة والشعبية يمكنك رفعها على vercel بشكل مجاني. بعد قول ذلك فأنصحك بالبحث عن الاستضافات التي تدعم next في 2023 وان تقوم بالمقارنة بنفسك حتى يصبح لديك خبرة اكبر عن مواقع الاستضافات.1 نقطة
-
تأكدت من المسار عشرات المرات ساتوقف عن المحاولة واترك هذا الالمنت شكرا على المساعدة1 نقطة
-
هناك أكثر من طريقة أحدها أن تبني التطبيق الخاص بك بحيث تكون الstate الرئيسية موجودة على ال component الرئيسي الحاوي لجميع الcomponents الفرعية أي البناء بشكل هرمي وتعرف في component الرئيسي دالة تعديل الstate والتي تمرره بمعية الstate الى كل component فرعي. المثال التالي يوضح الفكرة بشكل أفضل ... const SubComponentOne = (props)=> { // مكون فرعي const [state, setState]= useState(props.mainState) const changeName(event)=>{ // عند تغيير النص في صندوق الإدخال سيتم التغيير على حالة التخزين الرئيسية التي ستعكس التغيير على كافة الفروع const name= event.target.value props.setState({name}) // هنا يتم التغيير على حالة المكون الرئيسي } return( <div> <span>{state.name}</span> <input onChange={changeName} defaultValue={''} /> </div> ) } const App = ()=> { // مكون رئيسي const [mainState, setState]= useState({name:"Main"}) return( <> <SubComponentOne setState={setState} mainState={mainState}/> // مكون فرعي <SubComponentTwo setState={setState} mainState={mainState}/> // مكون فرعي أخر </> ) } ...1 نقطة
