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

لوحة المتصدرين

  1. Wael Aljamal

    Wael Aljamal

    الأعضاء


    • نقاط

      4

    • المساهمات

      6975


  2. Mohamed Lamin Mahmoudi

    Mohamed Lamin Mahmoudi

    الأعضاء


    • نقاط

      2

    • المساهمات

      394


  3. شرف الدين حفني

    • نقاط

      2

    • المساهمات

      1690


  4. سامح أشرف

    سامح أشرف

    الأعضاء


    • نقاط

      2

    • المساهمات

      2934


المحتوى الأكثر حصولًا على سمعة جيدة

المحتوى الأعلى تقييمًا في 06/03/22 في كل الموقع

  1. تطوير الويب Web Development هو أحد أشهر مجالات العمل الحر حاليًا، فهو واحدٌ من بين أكثر المجالات طلبًا في السوق التقنية، نظرًا لكونه يتعلّق بإنشاء وصناعة المواقع الإلكترونية وتطبيقات الويب بصورةٍ أساسيةٍ، حيث تحتاج إليه جميع المؤسسات والشركات والأفراد العاملون في هذا المجال. ونظرًا لزيادة اعتماد العالم على الإنترنت لإدارة وإتمام الأعمال قد يحتاج الجميع إلى مواقع وتطبيقات وخدمات إلكترونية، هذا بالإضافة إلى التحول الرقمي للمؤسسات والحكومات الذي يزداد يومًا بعد يومٍ منذ اختراع الإنترنت وظهور الويب، حيث زاد بصورةٍ ملحوظةٍ في الآونة الأخيرة بما تحْمله من أحداث ومُستجدات. سيساعدك تعلم تطوير الويب على إنشاء المواقع الإلكترونية وتطبيقات الويب سواءً لك أو لعملائك المحتملين، وهو ما سيُحسّن من خبرتك أو سيجلب لك مصدر دخلٍ إضافيٍ، وقد يصبح مصدر دخلك الأساسي. جدول المحتويات سنذكر هنا جدول المحتويات حرصًا على تنظيم المقالة ولتسهيل الوصول إلى القسم الذي تريده بسهولة: ما هي علوم تطوير الويب؟ مجالات تطوير الويب الواجهات الأمامية Front-End لغات تطوير الواجهات الأمامية المكتبات وأطر العمل المتوفرة للواجهات الأمامية مصادر تعلم تطوير الواجهات الأمامية Front-End الواجهات الخلفية Back-End ما هي اللغات المتوفرة لبرمجة الواجهات الخلفية لمواقع الويب؟ أطر العمل المتوفرة لبرمجة الواجهات الخلفية للويب ماذا سيمكنك أن تفعل بعد تعلم إحدى اللغات البرمجية؟ مصادر لتعلم تطوير الواجهات الخلفية Back-End المطور الشامل Full-Stack ما هي فرص العمل بعد تعلم تطوير الويب؟ كيف أختار مجال تطوير الويب المناسب لي؟ خاتمة ما هي علوم تطوير الويب؟ تطوير الويب Web Development هو المجال المختص بإنشاء وتطوير المواقع الإلكترونية وتطبيقات الويب التي تهدف إلى توفير ميزة أو خدمة معينة عبر الإنترنت. توجد عدة مجالات فرعية لمجال تطوير الويب من أبرزها تطوير الواجهات الأمامية front-end web development وتطوير الواجهات الخلفية back-end web development، كما توجد هناك بعض المجالات الأخرى المرتبطة بتطوير الويب إلا أنها لا تتصل به بصورةٍ مباشرةٍ، مثل إدارة العمليات DevOps، وعملية إنشاء وإدارة وتأمين الخوادم Servers وكل ما يرتبط بها، فهي لا تندرج تحت علوم تطوير الويب بصورةٍ مباشرةٍ، إلا أن أي موقع إلكتروني يحتاج إليها لكي يعمل ويُواصل العمل بصورة جيدة. ومطور الويب قد لا يهتم بهذه التخصصات، وغير مطلوب منه دراستها، فهي تَتبَع تخصصات إدارة النظام System Administration وإدارة العمليات DevOps Engineering وما يَتفرّع منهما ولكن من الجيد لمطور الويب أن يتعلم بعض أساسيات هذين الفرعين وهذا ما سنعرضه في المقال. بخصوص مجال الواجهات الأمامية Front-End ومجال الواجهات الخلفية Back-End فالأمر أشبه بالتسوّق في متجرٍ، فعندما يدخل الزبائن إلى متجر أو مطعم يتعاملون مع موظف الاستقبال مثلًا، دون أن يروا أو يعرفوا ما الذي يجري في الخلفية من أعمال تصنيع أو طهو أو تحضير أو غير ذلك، فهم يجلسون في غرفة الاستقبال وينتظرون الحصول على مشترياتهم أو طعامهم ثم يخرجون دون أن يتعاملوا مباشرةً مع جهة أخرى غير موظف الاستقبال أو المحاسب (واجهة المتجر). ويتشابه الأمر ذاك في تطوير الويب فمواقع الويب لها واجهات أمامية تشمل كل ما يراه المستخدم أمامه على موقع الويب ويتفاعل معه أيضًا من رسوميات وأزرار وألوان وعناصر المرئية وشعارات …إلخ، وهذه هي التي يتعامل معها الزائر، بينما تعالج الواجهة الخلفية Backend الطلبات وتدير العمليات بصورة حقيقية، إذ تتصل بقاعدة البيانات عند كل طلب Request لجلب وإحضار المعلومات التي يطلبها الزائر مع معالجتها. ويتخصص بعض الناس في تطوير الواجهات الأمامية لمواقع الويب، بينما يتخصص آخرون في تطوير الواجهات الخلفية، إلا أن هناك بعض المطورين قادرين على تطوير كلا الواجهتين معًا، ونُطلِق عليهم المطورين الشاملين Full-Stack Developers. مجالات تطوير الويب سنتحدث الآن عن مجالات تطوير الويب التي يمكنك التخصص بها، سواءٌ بأحدها أو بها جميعًا، كما سنذكر أبرز المصادر المتوفرة لتَعلّم هذه التخصصات، كلّ على حدة. الواجهات الأمامية Front-End ذكرنا سابقًا أن مجال الواجهات الأمامية Front-End في تطوير الويب يختص بالمظهر الجمالي والهيكلة الأمامية للمواقع والتطبيقات الإلكترونية، واللغات المطلوبة لتطوير الواجهات الأمامية هي HTML و CSS و JavaScript. لغات تطوير الواجهات الأمامية يجري تطوير الواجهات الأمامية باستعمال لغة HTML ولغة CSS التوصيفية ولغة JavaScript البرمجية، وإليك شرح كلّ واحدةٍ على حِدة: HTML: هي لغة هيكلة أو توصيف بِنية صفحات الإنترنت، إذ تفهمها جميع متصفحات الويب؛ ويُحدِّد المطورين في هذه الهيكلة الأجزاء المختلفة من الصفحات الإلكترونية عبْر كتابة رموز بطريقة معينة لكي تفهمها المتصفحات، وبالتالي فهي تَعرِض في نهاية الأمر النصوص والعناصر بهيكلية وطريقة ظاهرة في الواجهة الأمامية يراها المستخدم وتشبه هذه اللغة هيكل السيارة وعناصرها الداخلية. CSS: هي لغة تنسيق تُستعمَل لتنسيق هيكلة وعناصر HTML لتسمح للمطورين بتغيير تنسيق العناصر التي تُعَرض للمستخدمين مثل الألوان والحدود والأشكال والخلفيات والرسوميات والصور، بمعنى أنه من دون CSS ستحصل على صفحاتٍ عديمة التنسيق والألوان، قد تبدو مثل صفحة ويب في عام 1991م، أي أن CSS تتحكم في كلّ شيءٍ مرئيٍ، وتشبه هذه اللغة عملية الطلاء والألوان التي تُضاف على هيكل السيارة. جافاسكربت: وهي لغة برمجة أصيلة، وعلى عكس اللغتين السابقتين فهي تحتوي على المنطق البرمجي المُتضِّمن للخوارزميات والمتغيرات وهياكل البيانات وإجراء الاتصالات وقواعد البيانات …إلخ، وتدعمها جميع متصفحات الويب، ويمكن تطوير مواقع إنترنت لا تستعمل جافاسكربت، إلا أن هذا سيُصِّعب العمل، كما سيحد من مميزات وخصائص الموقع بصورةٍ كبيرةٍ. لاحظ كذلك نظرًا لقدرة جافاسكربت ودعمها القوي، قد تُستعمل مثل لغة برمجية للواجهة الخلفية Back-End فلا يقتصر استخدامها في برمجة الواجهة الأمامية فقط. دورة تطوير واجهات المستخدم ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة اشترك الآن وتُعَد اللغات الثلاثة السابقة بمثابة الثلاثي الذهبي لتطوير الواجهات الأمامية لمواقع الويب، وهناك إضافاتٌ لكلّ منها بالطبع، وكذلك أُطر عمل Frameworks ومكتباتٍ توفّر مزايًا إضافية لهذه اللغات، مما يُسهّل أو يُسِرع من عمل المطورين ولكن هذه مرحلةٌ لاحقةٌ لتعلّمها، فمطور الويب يجب أن يبدأ أولًا بتَعلّم أساسيات هذه اللغات الثلاثة وطريقة تفاعلها مع بعضها بعضًا، ثم يَنتقل بعد ذلك إلى المكتبات والإضافات وأُطر العمل وما شابه. تجد توثيق كل هذه اللغات في موسوعة حسوب لمزيد من التفصيل والتوسع. المكتبات وأطر العمل المتوفرة للواجهات الأمامية سنذكر الآن سريعًا بعض أشهر المكتبات واُطر العمل الشهيرة المتوفرة لتلك اللغات، وبينما تُعَد أُطر العمل Frameworks برمجياتٌ ومكوَّناتٌ جاهزةٌ بالفعل تسهّل من عمل المطورين، بحيث أنهم لن يعودوا بحاجةٍ إلى برمجتها من الصفر في كل مرةٍ،تُعرّف المكتبات Libraries بأنها إضافاتٌ برمجيةٌ على اللغات نفسها، وذلك لإكسابها مميزاتٍ أكثر أو أفضل من السابق. اسم اللغة المكتبات والإضافات وأُطر العمل المتوفرة مصادر التَعلّم HTML لا يوجد إطار عمل مخصوصٍ للغة HTML، وذلك لأنها لغةٌ معياريةٌ لهيكلة صفحات الويب والمحتوى، فلا يمكن الزيادة عليها هي نفسها لأنها ليست لغةً برمجيةً، ورغم ذلك ستجد أن أُطر عمل CSS، وجافاسكربت قد تضيف مميزاتٍ أو طرق تلاعبٍ مختلفةٍ بلغة HTML. توثيق HTML العربي. CSS هناك العديد من أُطر العمل والمكتبات الشهيرة للغة CSS، ويجب علينا التفريق بينهما في هذا السياق؛ فمكتبات CSS هي نوعٌ إضافيٌ من لغات التنسيق التي تَستعمل أغلب خصائص CSS، ولكن تضيف عليها مميزات أخرى أو تكتبها بطريقة مختلفة، ثم تترجم وتصرَّف Compiled تلك الملفات المختلفة إلى ملفات CSS عاديةٍ، بحيث يمكن لمتصفّحات الويب فهمها، بينما أُطر العمل للغة CSS هي مجرد عناصر وتنسيقات جاهزة يمكن استخدامها لبناء وتنسيق المواقع الإلكترونية بسرعة بدلًا من البدء من الصفر، وأبرز مكتبات لغة CSS هي LESS و SASS، بينما أبرز أطر عملها هو Bootstrap و Compass و Foundation و Pure.CSS، كما يوجد العشرات من أُطر العمل المختلفة غيرهم. توثيق SASS وتوثيق Bootstrap مصدران جيّدان لتعلمهما باللغة العربية، أما البقية فلا توثيق عربيٍ لهم على الشبكة حتى الآن، إلا أنك قد تجد بعض الفيديوهات على يوتيوب عند البحث عنهم. JavaScript تُعَد أُطر العمل المتوفرة للواجهة الأمامية بجافاسكربت كثيرةٌ جدًا، وضخمةٌ كذلك، إذ تدعم وتقف خلف كل واحدٍ منها شركةٌ من الشركات التقنية العملاقة مثل جوجل وفيسبوك وتويتر ومايكروسوفت، ومن أبرز هذه الإطارات React و Angular و Vue.js و jQuery، وكما ذكرنا في حالة CSS، فهناك أيضًا مكتباتٌ أخرى تستعمل تنسيق جافاسكربت ولكن بمميزاتٍ وطريقة كتابةٍ مختلفةٍ مثل TypeScript. توفر موسوعة حسوب توثيقاتٍ لكلّ من: TypeScript و React و jQuery، وهناك دروسٌ ومقالاتٌ لكثيرٍ منها على الأكاديمية على قسم جافاسكربت. كتاب أساسيات إطار العمل Vue.js ونُشر قبل فترةٍ من طَرَف الأكاديمية. 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; } وليس مطلوبًا منك تَعلّم كلّ هذه المكتبات وأُطر العمل، ولا حتى نصفها بالطبع، ولكن بمجرد أن تنتهي من أساسيات لغات الويب السابقة، يمكنك الانتقال بعد ذلك إلى تَعلّم إطار عملٍ أو مكتبةٍ شهيرةٍ لواحدةٍ من بين كلٍ هذه اللغات لتُصقل خبرتك فيها وتصبح أكثر طلبًا في سوق العمل. مصادر تعلم تطوير الواجهات الأمامية Front-End تُعَد دورة تطوير واجهات المستخدم من أكاديمية حسوب أشمل مصدر عربي متوفر حاليًا لتعلم مجال تطوير الواجهات الأمامية؛ حيث تُشرح فيها جميع هذه التقنيات بالإضافة إلى المكتبات وأُطر العمل الشهيرة في السوق، فهي دورةٌ شاملةٌ تزيد مدتها عن خمسين ساعةً، وهي مشروحةٌ بالكامل باللغة العربية الفصحى، وستحصل على ضمان استرداد ما أنفقته من نقودٍ خلال 6 أشهرٍ، هذا بالإضافة إلى أمرٍ مهمٍ جدًا، وهو المتابعة المستمرة أثناء تعلّمك من مدربين متخصصين مع تسليمك مشاريع عملية لتنفيذها ومراجعتها لك. كما يمكنك الاطلاع على المصادر التالية: HTML: كتاب نحو فهم أعمق لتقنيات HTML5، حيث سيعلّمك كل ما تحتاجه عن HTML، كما يشمل الإصدار الأخير منه تقنية HTML5، وستتعمق في أساسيات لغة HTML، وكيف نشأت وما هي معاييرها كما ستطّلع على أهم المعلومات التي يجب عليك معرفتها لإنشاء الصفحات بها، وذلك في أكثر من 350 صفحة. CSS: مقال تعرف على أساسيات CSS، وهو مدخلٌ جيدٌ للغة التنسيق الشهيرة CSS، وبعدها يمكنك قراءة ما تشاء من المقالات الأخرى المتقدِّمة على قسم CSS من أكاديمية حسوب، كما يمكنك تحميل كتاب التحريك في CSS لرؤية بعض أهم مميزات هذه اللغة وهي التأثيرات الحركية. جافاسكربت: دليل تعلم جافاسكربت، وهي سلسلةٌ شاملةٌ وكاملةٌ لتعلم جافاسكربت من الألف إلى الياء، ويمكنك تصفّحِ كلّ المقالات المنشورة حاليًا على الأكاديمية والاستفادة منها (ارجع إلى أول مقال منشور في السلسلة وابدأ القراءة من هناك). هنالك أيضًا موسوعة حسوب، وهي موسوعة عربية شهيرة تخصص في ترجمة توثيقات لغات البرمجة وتقنيات تطوير الويب ومكتباتها، فهي تحتوي على توثيقات كاملة لهذه اللغات البرمجية بالإضافة إلى مكتباتها وإضافاتها الشهيرة، ويمكنك الاطلاع عليها متى ما احتجت إلى فهم شيء، ومن بين توثيقاتها: توثيق HTML وتوثيق CSS وتوثيق جافاسكربت، وننصح كذلك بقراءة مقال أساسيات بناء تطبيقات الويب لفهم طريقة تفاعل وعمل HTML و CSS و JavaScript مع بعضهم البعض. محتوى أكاديمية حسوب وموسوعة ضخم لا ينضب لذا أترك لك تصفح بقية المقالات والمصادر فيها ومتابعة كل المنشورات الجديدة التي تنشر فيهما. الواجهات الخلفية Back-End ذكرنا سابقًا أن الواجهة الخلفية في مجال تطوير الويب هي التي تعالج البيانات وتخزنها في قواعد البيانات وتستخرجها منها ثم ترسلها إلى الواجهة الأمامية لكي تعرضها للمستخدم كما أنها تُعالج طلبات المستخدمين والصفحات التي يتصفحونها وعمليات تسجيل الدخول والخروج …إلخ، لذلك فهي بمثابة الهيكل العظمي لمواقع الإنترنت. ما هي اللغات المتوفرة لبرمجة الواجهات الخلفية لمواقع الويب؟ تُعَد لغة PHP أشهر لغة برمجية لتطوير الواجهات الخلفية لمواقع الويب وتطبيقات الويب إذ لا يوازيها في ذلك أي لغة أخرى، وذلك لأنها واحدةٌ من أقدم اللغات البرمجية المستخدمة في تطوير الويب، وزادت شهرتها بعد انتشار أنظمة إدارة المحتوى CMS مثل ووردبريس WordPress وجوملا Joomla ودروبال Drupal، فجميعها تعمل بلغة PHP، مما أجبر أغلب شركات الاستضافة آنذاك (في العقد الأول من القرن الحالي) على دعمها افتراضيًا عِوضًا عن اللغات الأخرى. وأنظمة إدارة المحتوى هي أنظمة جاهزة لإنشاء المواقع الإلكترونية بسهولة وسرعة من قوالب ونماذج موجودة يمكنك أن تعدل عليها أو حتى تبنيها أنت بما يناسب متطلباتك، وتُثبّت على الخوادم وتُستعمَل لإنشاء أي نوع من المواقع الإلكترونية وتطبيقات الويب، وظهرت أدوات البناء هذه لتسهّل الأمر على من يريد امتلاك موقع إلكتروني، فلا يريد الجميع بناء موقعه من الصفر وتحمّل التكاليف والوقت والجهد. وتُعَد أنظمة إدارة المحتوى سوقًا بذاتها؛ فتطوير قوالب ووردبريس WordPress بمثابة سوق عملاق عالميًا عليه الكثير من العرض والطلب، وبينما تُستعمَل لغة PHP في تطوير الواجهة الخلفية (حيث أن سكربت ووردبريس يعمل بها)، تُستعمل لغات HTML و CSS وجافاسكربت لإنشاء الواجهات الأمامية كما ذكرنا آنفًا. بعد لغة PHP، تأتي مجموعةٌ أخرى من اللغات البرمجية التي يمكن من خلالها برمجة مواقع وتطبيقات الإنترنت مثل بايثون وذلك عن طريق إطاريْ العمل فلاسك وجانغو، وروبي مع إطار العمل ريلز Ruby on Rails، وجافا، كما يمكنك أن تستخدم جافاسكربت للواجهة الخلفية، فهي لغةٌ تدعم كلا الواجهتين الأمامية والخلفية، وذلك عن طريق إطار Node.js. وفي الحقيقة هنالك لغات أخرى يمكن استخدامها في تطوير الواجهات الخلفية ولكن اقتصرنا على أشهرها وسيأتي لاحقًا مخطط يوضح جميع اللغات التي يمكن تعلمها أطر العمل المتوفرة لبرمجة الواجهات الخلفية للويب إليك قائمةٌ بأشهر أطر العمل المتوفرة التي يمكنك تعلمها بعد تعلم لغة البرمجة: 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; } اللغة أُطر العمل المتوفرة مصادر الَتعلّم PHP إطار العمل Laravel وهو واحدٌ من أشهر أطر العمل المتوفرة للغة PHP، وهناك أيضًا Symfony. توثيق موسوعة حسوب متوفر لإطار لارافيل، وهناك مجموعةٌ من الدروس المنشورة له على أكاديمية حسوب. Python إطار العمل جانغو وهو مشهورٌ بإنشاء المواقع العملاقة والضخمة، بينما يُعَد فلاسك إطار عملٍ مصغّرٍ وقويٍ، كما يسْهُل استخدامه لمعظم المواقع. دروس أكاديمية حسوب عن فلاسك وجانغو كافيةٌ لتمضي قُدمًا فيهما. Ruby إطار العمل الأشهر بها هو Ruby on Rails، وهو من أوائل أُطر العمل على الإطلاق. هناك توثيقٌ كاملٌ بالعربية عن إطار العمل Ruby on Rails على الموسوعة، بالإضافة لدروس ومقالات على الأكاديمية. جافاسكربت يَكثُر استخدام إطار Node.js لتشغيل جافاسكربت خارج المتصفح، وذلك لتعمل مثل واجهةٍ خلفيةٍ على خوادم الويب. دروس node.js بالعربية على أكاديمية حسوب. وليس مطلوبًا منك تعلّمها جميعًا كما ذكرنا، بل عليك اختيار مسار واحد والتركيز فيه كبداية، أي متى ما تعلمت لغة برمجة فستتعلم أطر العمل والمكتبات المرتبطة بها والمتعلقة بتطوير الواجهات الخلفية. ماذا سيمكنك أن تفعل بعد تعلم إحدى اللغات البرمجية؟ سيُمكّنك تعلم البرمجة بإحدى لغات برمجة الواجهة الخلفية في مجال تطوير الويب التي أشرنا إليها آنفًا مما يلي: تطوير موقعٍ إلكترونيٍ بالكامل من الصفر؛ بحيث يتواصل مع نظام قاعدة بيانات معين ثم يَعرِض كلّ ما يحتاجه الزائر من خدمات أو معلومات. تطوير تطبيقات ويب توفر خدمات للمستخدمين مثل مواقع الشبكات الاجتماعية ومواقع ضغط المستندات ومواقع تشفير الملفات ومواقع تجميع الصور… إلخ. بناء قوالب جاهزة لأنظمة إدارة المحتوى الشهيرة مثل ووردبريس WordPress أو روبي Ruby أو دروبال Drupal، بحيث تُبرمج بنفس اللغة. بيع أنظمةٍ جاهزةٍ (سكربتات برمجية) تؤدي خدمات معينة على مواقع مثل بيكاليكا، حيث يشتريها المستخدمين منك ويُثبّتوها على خواديمهم، وبذلك يحصلوا على تطبيقات الويب الخاصة بهم. مصادر لتعلم تطوير الواجهات الخلفية Back-End تَعلّم أحد اللغات البرمجية التي أشرنا إليها للتو لا يعني أنك تتعلم شيئًا منفصلًا عن المنطق البرمجي العام؛ وبالتالي أنت تحتاج لفهم بعض المبادئ مثل الخوارزميات وهياكل البيانات والمنطق الرقمي وقواعد البيانات …إلخ، لذلك ستحتاج إلى بعض أساسيات علوم الحاسوب قبل الشروع بتعلم البرمجة ودخول مجال تطوير الويب. ونرشّح دورة علوم الحاسوب من أكاديمية حسوب لأجل ذلك، فهي دورةٌ شاملةٌ تزيد مدتها عن 35 ساعة، وستُعلّمك كل ما ستحتاج إليه للبدء، وإذا كانت لديك المعرفة الأساسية حول البرمجة أو علوم الحاسوب عمومًا وأردت الدخول مباشرةً في تطوير الويب بإحدى هذه اللغات البرمجية، فيمكنك الاطلاع على دورة تطوير الويب بلغة PHP أو دورة تطوير الويب بلغة Ruby، وكلاهما من أكاديمية حسوب أيضًا. ولمزيدٍ من الاطلاع، لديك هذه المصادر الإثرائية: توثيقات موسوعة حسوب العربية التالية: PHP - Python - Ruby - Node.js. كتاب البرمجة بلغة بايثون، وهو كتاب مهم، يشرح معظم أجزاء اللغة باللغة العربية. ملاحظات للعاملين بلغة PHP، وهو كتاب قيد الإنشاء من الأكاديمية، ولكن يمكنك الاطلاع على الدروس المنشورة، حيث تُمثّل أغلب محتوى الكتاب إلى اللحظة. كما ستحتاج لفهم بعض أنظمة قواعد البيانات بالطب، ولهذا يمكنك الاطلاع على كتاب الدليل العملي إلى قواعد بيانات PostgreSQL وكتاب ملاحظات للعاملين بلغة SQL وكتاب تصميم قواعد البيانات. وقواعد MySQL، و MariaDB المشتقة عنها، فهي أشهر مشتقاتها، ويمكنك البحث عن أي فيديوهاتٍ عنها على يوتيوب. المطور الشامل Full-Stack يشمل تطوير الواجهتين الأمامية والخلفية معًا Full-Stack Developer، وهو تَخصُّصٌ آخر من تخصصات تطوير الويب، يجمع بين تطوير الواجهتين الأمامية والخلفية، إلا أنه يزيد عليهما بإمتلاك الشخص لبعض الخبرة في إدارة العمليات DevOps، حيث سيُطلب منه استلام كامل المشروع من الألف إلى الياء بما في ذلك النشر Deployment. وعادةً ما تكون رواتب وأجور المطورين الشاملين العاملين في سوق العمل الحر أعلى من غيرهم، وذلك لأنهم يتقنون العمل على كِلا الجانبين، حيث خبرتهم الكبيرة وقدرتهم على تنفيذ المشاريع بصورةٍ أفضل، ويُطلب كثيرًا على مواقع العمل الحر مثل مستقل تنفيذ مشاريع تطبيقات ويبٍ من الألف إلى الياء، ويُسند إلى مستقلٍ واحدٍ فقط؛ وهو ما يعني أنه عليه أن يكون مطورًا شاملًا، يجيد برمجة كِلا الواجهتين الأمامية والخلفية. ولكن بعض الناس يتخصص في مجالٍ واحدٍ بدلًا من المجالين معًا فتجد من يستطيع تصميم واجهة موقع ووردبريس، ولكنه لا يجيد لغة PHP، وبالتالي سيأخذ مبلغًا معينًا فقط لبرمجة ملفات HTML و CSS وجافاسكربت، وآخرون لا يجيدون تصميم الواجهات الأمامية بصورةٍ جيدةٍ، ولكنهم يجيدون لغة PHP مثلًا أو روبي باحترافيةٍ شديدةٍ، وهؤلاء قادرون على أخذ ملفات الواجهة الأمامية وبناء واجهة خلفية لتكتمل بها أو مثلًا بناء قالب WordPress متكامل يمكن استعماله وغيرها من الحالات. ولكي تكون مطور ويب شامل أي مطور واجهات أمامية وخلفية، فيجب عليك دراسة كلِا المجالين السابقين معًا (بدءًا من الواجهة الأمامية وانتهاءًا بالواجهة الخلفية)، كما ستحتاج إلى بعض الخبرة في إدارة العمليات، ويمكنك الاطلاع عليها من دروس DevOps بالعربية على أكاديمية حسوب. ويمكنك كذلك الاطلاع على دورة تطوير التطبيقات بجافاسكربت، فهي دورةٌ شاملةٌ تشرح لك كيفية استخدام جافاسكربت، سواءًا للواجهة الأمامية أو الخلفية، وكذلك كيفية تطوير تطبيقات الهواتف. وهناك أيضًا دروس متوفرة حول تعلم برمجة قوالب ووردبريس على الأكاديمية، يمكنك الاطلاع عليها. ما هي فرص العمل بعد تعلم تطوير الويب؟ بعد أن تنتهي من تَعلّم تطوير الويب والتخصص بالواجهات الأمامية مثلًا، فسيصبح اسمك مطور واجهات أمامية front end developer، وسيكون بمقدورك: تطوير الواجهات الأمامية لأي موقع ويب مثل المتاجر الإلكترونية ومواقع المحتوى والمدونات ومواقع الخدمات ولوحات التحكم وتطبيقات الويب …إلخ. إنشاء مواقع ويب ثابتة Static Websites تسمح لك بعرض محتوى ثابت لا يتغير للزوار، مثل مواقع المحتوى والمدونات التي يزورها القُرّاء للاستفادة والقراءة. إنشاء صفحات هبوط Landing Pages أو مواقع إنترنت بسيطة للشركات والمؤسسات التي تريد عرض صفحات تحتوي على معلومات موجزة مثل معلومات التواصل وصور للمنتجات بحيث يمكن للزوار قراءتها بصورة سريعة. تحويل أي قالب واجهة أمامية مُصوّر مثل القوالب المُصوّرة على فوتوشوب Adobe Photoshop أو التصميمات المنفذة على برامج مثل adobe XD أو فيجما figma أو أي تطبيق يصمم الواجهات الأمامية إلى شيفرات ويب حقيقية (تدعى الوظيفة تحويل قالب PSD إلى HTML عادة). ومجال تصميم الواجهات الأمامية في عملية تطوير الويب مرتبط بمجال واجهات المستخدم وتجربة المستخدم UI / UX ويكون لمطور الواجهات الأمامية عادةً تواصل مباشر أو عبر قائد الفريق مع مصمم الواجهة وفريق تجربة المستخدم أثناء العمل على المشروع لأي استفسار أو تعديلات مطلوبة. تجد أحيانًا مشاريع عمل متعلقة فقط بتحول تصميم جاهز إلى شيفرة (تدعى عملية تكويد أحيانًا)، وأقتبس صورة عن مشروع من منصة مستقل على سبيل المثال لا الحصر: أما إن تخصصت في مجال تطوير الواجهات الخلفية، فسيصبح مسماك الوظيفي مطور واجهات خلفية back end developer وسيكون بمقدورك: التعامل مع قواعد البيانات من إنشاء وتعديل وإدارة (عبر أنظمة إدارة قواعد البيانات DBMS) لإنشاء قاعدة بيانات الموقع وإدارتها. بناء الواجهة الخلفية لموقع ويب التي تكون من طرف الخادم عبر إحدى أطر العمل المتوفرة التي ذكرناها في الأعلى. بناء واجهات برمجية API بما يتناسب مع متطلبات الموقع أو التطبيق، ومن الممكن العمل على موقع موجود مسبقًا لتطويره والإضافة عليه. صيانة الواجهات الخلفية وقواعد البيانات وتأمين الأنظمة وحمايتها وتوليد التقارير اللازمة. التطرق أحيانًا لعمليات النشر وإداة العمليات DevOps البسيطة وأنظمة التشغيل وأنظمة الحوسبة السحابية وخدماتها. وأما بخصوص المطور الشامل، فيمكنك أداء مهام مطور الواجهات الأمامية ومطور الواجهات الخلفية مجتمعين، ويمكنك العمل على بناء مواقع وتطبيقات ويب بالكامل بمفردك وذلك للمشاريع الصغيرة وبعض المشاريع المتوسطة أما المشاريع المعقدة والكبيرة فتتطلب فريق عمل برمجي لتنفيذها. إن كنت تنوي العمل بمفردك على منصات العمل الحر، فتصفح قسم البرمجة وتطوير المواقع والتطبيقات على منصة مستقل للاطلاع على فرص عمل في مجال تطوير الويب وتصميم الواجهات الأمامية والخلفية، ويمكنك حتى فتح خدمة في أي مواقع خدمات مثل منصة خمسات لبناء الواجهات الأمامية أو الخلفية أو كلاهما وتنفيذ المهام المتعلقة بمجال تطوير الويب عمومًا من مواقع وتطبيقات وغيرها من المهام، فانظر مثلًا قسم البرمجة والتطوير وأيضًا قسم برمجة HTML و CSS لتصفح خدمات مشابهة. إن أحببت العمل في وظيفة مع شركة، فيمكنك البحث عن فرص العمل كمطور واجهات أمامية أو خلفية، وميزة العمل كمطور ويب بهذا المجال أنه لا يتطلب العمل في شركة تقليدية ولا يتطلب شهادات جامعية متخصصة بل يمكنك تجهيز معرض أعمال مع عرض خبراتك السابقة والعمل من منزلك عن بعد، انظر مثلًا فرص العمل المتاحة على موقع مثل منصة بعيد تحديدًا في قسم وظائف برمجة وتطوير عن بعد. كيف أختار مجال تطوير الويب المناسب لي؟ حسنًا، وصلنا الآن إلى أهم قسم من هذا المقال، والسؤال المطروح هو: كيف أختار المسار واللغات وأطر العمل المناسبة لي من بين كل هذه الخيارات المحيّرة؟ والجواب بسيطٌ: جرّبها، ثم انظر في نفسك هل تستمع بالعمل معها أم لا. وبلا شكّ إن كنت ستدخل مجال تطوير الويب من كلا بابيه، فستحتاج أولًا إلى تعلم لغة HTML ثم تعلم لغة CSS وبعدها تعلم لغة جافاسكربت، فهذه اللغات أساسيةٌ لأي مطور ويب مهما كان تخصصه، ولكن التعمّق فيها خاصٌ بتطوير الواجهات الأمامية كما رأينا ويأخذ مطور الواجهات الخلفية بعدها مسارًا آخر كما وضحنا في خارطة الطريق لمطور الواجهات الأمامية ومطور الواجهات الخلفية لذلك فهما تخصصان مختلفان كما شرحنا. بناءً على ما سبق، تكون البداية بتَعلّم أساسيات لغات الويب HTML و CSS وجافاسكربت، ثم تجرب هذه اللغات والمسارات لفترةٍ قصيرةٍ مدة شهر أو شهرين مثلًا، وبعدها ترى إذا ما كنت ستحب العمل في هذا المجال وصَرفِ معظم وقتك فيه أم لا. ومع الوقت، وستجد المجال المناسب الذي قد ترتاح فيه وستقترب منه شيئًا فشيئًا، وعمومًا، مجال تطوير الواجهات الأمامية مرتبط بالفن والتصميم بعض الشيء إذ يتعلق من قريب أو بعيد بتصميم الواجهات وما يظهر على الشاشة، أما مجال تطوير الواجهات الخلفية فمرتبط أكبر بالمنطق البرمجي والخوارزميات ويبتعد عن كل ما يتعلق بالتصميم. كما يمكنك التسجيل في إحدى دورات أكاديمية حسوب وبذلك ستفتح لك المسارات الأولى من جميع الدورات المتوفرة على الأكاديمية ويمكنك بحضور المسارات الأولى التأكد من اختيارك الصحيح، كما توفر الدورات بطبيعة الحال مدربين يرشدونك إلى الطريق لتوجيهك إلى أفضل مسار يناسبك، كما أنها تضمن لك بعد تخرجك الحصول على فرصة عمل خلال فترة قصيرة، ويمكنك تقديم طلب انسحاب إذا لم تناسبك الدورة. خاتمة غصنا في هذا المقال في أعماق مجال تطوير الويب وشرحنا المجالين الرئيسين فيه حتى تصبح مطور الويب من واجهة أمامية وواجهة خلفية هذا بالإضافة للتطوير الشامل، كما عرضنا أهم المصادر العربية المتوفرة لتَعلّم كل هذه التقنيات كلّ على حدة، ونأمل أن يكون هذا المقال عونًا ومرشدًا لك إن كنت داخلًا جديدًا على مجال تطوير الويب ومساعدًا لك في تكملة ما ينقصك من مهارات خلال رحلتك في تطوير الويب بما عرضناه من خارطة طريق لكلا مجالي تطوير الويب، مجال تطوير الواجهات الأمامية ومجال تطوير الواجهات الخلفية. سعداء لاستقبال أي تعليق أو استفسار في مربع التعليقات أدناه، ونرجو أخيرًا لك كل التوفيق والسداد! اقرأ أيضًا ما هي فوائد تعلم البرمجة؟
    1 نقطة
  2. أريد أن أربط بين النموذجين Room و User بعلاقة many to many كيف يتم ذلك ؟ room.js const room =(sequelize,DataTypes)=>{ const Room =sequelize.define('room',{ Numberofroom:{ type:DataTypes.STRING, }, NameOfroom:{ type:DataTypes.STRING, }, QrCodevalue:{ type:DataTypes.STRING, unique:true, }, date:{ type:DataTypes.DATE, } }); return Room; } export default room; user.js import Sequelize from 'sequelize'; const user =(sequelize,DataTypes)=>{ const User =sequelize.define('user',{ name:{ type:DataTypes.STRING, } , email:{ type:DataTypes.STRING, unique:true, }, password:{ type:DataTypes.STRING, }, userType:{ type:DataTypes.ENUM('teacher','student') } }); //نربط هذا النموذج بالنموذج بروفايل User.associate=models=>{ User.hasOne(models.Profile); } return User ; } export default user; index.js import Sequelize from 'sequelize'; const sequelize = new Sequelize( process.env.DB, process.env.DB_User, process.env.DB_pass, { dialect:'postgres' } ); const models={ User:sequelize.import('./user'), Profile:sequelize.import('./profile'), Room:sequelize.import('./room') } Object.keys(models).forEach(key=>{ if('associate'in models[key]){ models[key].associate(models); } }); sequelize.authenticate() .then(()=>{ console.log('connection has been estbileshed succsefully'); }) .catch(err=>{ console.log('Unabel to connect to the data base'); }); export {sequelize}; export default models;
    1 نقطة
  3. كيف اكتب واقرا واحذف في ملف من نوع char وماهي الدوال المستخدمه في ذلك
    1 نقطة
  4. السلام عليكم هل تصميم قالب من لغةhtml و css يضبط على الووردبريس لو يضبط كيف؟
    1 نقطة
  5. السلام عليكم , أرجوا من أحد الإخوة الفضلاء أن يستمع إليّ بشكل جيد ويجيبني إجابة كافية وله جزيل الشكر , أنا منذ مدة وانا أتخبط محاولًا تعلم البرمجة , كان ذلك منذ مرحلة التعليم المتوسط ثم أوقفت عنها رغما عني لأتفرغ للدراسة , الآن ومنذ سنتين إشتغلت بمنصب عمل مريح نوعا ما يتيح التحكم في وقتي بالقدر الكافي , بعد ذلك إستأنفت نيتي في تعلّم البرمجة , حاولت من اليوتيوب أخدت الأساسيات وعلقت فيها , سجلت في أكادمية حسوب بادئ الأمر في دورة تطوير التطبيقات بإستخدام js , إستفدت منها صراحة لكنني لم أكملها رأيتها متنوعة كثيرا وفيها العديد من التقنيات إحتفظت بها لأعود لها مستقبلا بما أن دورات الأكادمية متجددة بإستمرار و أخدت دورة أخرى لتطوير المواقع بإستخدام php , أكملت أول مسار وهو الأساسيات وقواعد البيانات بشكل جيد وإستفدت منه كثيرا إنتقلت للمسار الثاني عن أساسيات إطار العمل وكان أيضا جيد , في المسارات المتقدمة لم أواجه صعوبة من حيث back-end وإنما من جانب front-end , حاولت أن أتجاهل إلحاحي في الفهم العميق لكل ما له علاقة بال front-end واكتفي بالنقل الحرفي لكل مايكتبه المدرب لكنني لم أتعود على ذلك و إن فعلت لا أستطيع إكمال الدورة بمعنويات عالية , اليوم قررت أن اوقف مؤقتا متابعة دروس الأكادمية وأتوجه إلى اليوتيوب لآخد دورة في css و اتمرن عليها جيدا و كذلك tailwind ثم أعود للأكادمية واكمل الدروس ... شكرا لجميع المدربين هنا الذين لم يقصروا معي يوما ولكن تحية جد خاصة للمدرب @Adnane Kadri الذي أحس أن إجاباته لي عميقة بما يكفي لتجعلني أفهم .
    1 نقطة
  6. وعليكم السلام ورحمة الله وبركاته من الجيد جدًا أنك لا تريد تخطي أي نقاط بدون فهما بشكل كامل، وتريد تعلم كل ما تحتويه الدروس بشكل جيد، وهذا الأمر من صفات المبرمج البارع. أعتقد أن المشكلة لديك في عدم تحديد هدف واضح وصريح، فالبرمجة متشعبة للغاية وتحتوي على العديد من الفروع والأقسام ومن الصعب للغاية أن يتعلم شخص واحد كل الفروع، في الواقع من الصعب حتى تجربة كل فروع البرمجة بشكل متأنٍ تجربة شاملة، لذلك يجب في البداية تحديد هدف واضح، هل تريد أن تكون مطور واجهات أمامية Frontend Developer؟ أم تريد أن تكون مبرمج واجهات خلفية Backend Developer؟ أم تريد أن تجمع بينه المجالين معًا لتصبح مطور شامل Full-stack Developer؟ بناءً على إجابة هذا السؤال ستحدد ما الذي عليك تعلمه بشكل متعمق وما الذي تحتاج إلى الإطلاع عليه فقط ولا تحتاج إلى دراستها بشكل مفصل. بما أنك إشترك في دورة PHP الخاصة بالأكاديمية فأتوقع أنك تريد أن تصبح أما مبرمج واجهات خلفية Backend Developer أو مبرمج شامل Full-stack Developer، في الحالة الأولى ليس عليك الإهتمام بأمور التنسيق مثل CSS و SCSS و Tailwind وغيرها من الأمور، يكفي فقط أن الإطلاع على هذه التقنيات إطلاعًا بسيطًا يساعدك على تخيل كيف يتم إنشاء باقي الموقع في جزء الوجهة الأمامية Frontend، وأنا لا أقصد أن تعلم هذه التقنيات ليس مفيدًا بل أقصد أن التركيز على تقنيات الوجهات الخلفية Backend والخوادم Server وقواعد البيانات Databases له الأولوية ومن الأفضل تعلم تقنيات مجالك على التنقل بين تنقيات مجال مختلف بدون فائدة مرجوة وواضحة منها. أما إن كان هدفك هو أن تصبح مبرمج شامل Full-stack Developer فحينها سيختلف الأمر كثيرًا لأنك يجب أن تتعلم التقنيات الموجودة في المجالين (Frontend + Backend)، وفي هذه الحالة يجب أن تدرس CSS و SCSS و Tailwind CSS و Bootstrap وغيرها من التقنيات لأنها جزء لا يتجزء من عملك كمطور شامل، بالطبع مع تعلم تقنيات الواجهات الخلفية Backend كذلك. في العادة يتعلم الشخص الذي يهدف إلى أن يصبح مطور شامل تقنيات الواجهات الأمامية Frontend، لأنها أسهل وترى نتيجة الكود الخاص بك بشكل مباشر في المتصفح، مما يعغطية دفعة معنوية ويساعدة على إكمال رحلته في تعلم البرمجة، على عكس تقنيات الواجهات الخلفية التي لا تحتوي على أي تأثيرات أو ألوان وفي الغالب تكون تعامل مع الكود المنطقي وقواعد البيانات فقط، ولكن بما أنك تعلمت أساسيات PHP وقواعد البيانات وكذلك إطار عمل مثل Laravel بالإضافة إلى إدراكك كيفية إستخدام HTML و CSS ولو بشكل بسيط، فمتاح لك الآن أما أن تكمل بتعلم تقنيات الواجهات الأمامية Frontend أو تقنيات الواجهات الخلفية Backend ولن تواجهة مشكلة في فهم أي منهما لأن لديك بالفعل فكرة واضحة عن التقنيات المستخدم في كلا المجالين. لاحظ أيضًا أن لغات مثل CSS و JavaScript هي لغات ضخمة وتحتوي على العشرات والمئات من الخصائص والكائنات والكثير من الأمور التي يجب تعلمها، وهذا الأمر سيستغرق منك الكثير من الوقت، ولهذا السبب أنصحك أن تتعلم CSS بجانب دراسة دورة PHP التي إشتركت بها، ويمكنك خلال تطبيق الدروس أن تستخدم CSS للتدريب عليها، وبهذا تستفيد من كلا الجانبين. بما أنك مشترك في دورات حسوب فستجد أن المسار الأول من كل دورة متاح لك ويمكنك الإطلاع عليه، وأنصحك أن تستغل هذه الفرصة وتقوم بالإطلاع على المسار الأول من دورة تطوير واجهات المستخدم Frontend لتدرس CSS و Bootstrap و jQuery بشكل جيد وتقوم بعمل موقع شخصي بسيط من الصفر بإستخدام هذه التقنيات. بعد إتمام هذا المسار تستطيع الإطلاع على Tailwind CSS من خلال التوثيق الرسمي له، ولن تواجهة مشاكل في فهم كيفية إستخدامه في مشاريعك، كما ستفهم أكثر ما هي أصناف Tailwind التي يضيفها المدرب ضمن مشاريع Laravel في دورة PHP. ليكون الأمر أكثر وضوحًا، ستجد هنا مجموعة من الخطوات المتسلسلة التي يمكنك إتباعها لتعلم ما ينقصك لتصبح مبرمج شامل Full-stack Developer: تابع المسار الأول ضمن دورة تطوير واجهات المستخدم Frontend، ستتعلم في هذا المسار أساسيات CSS و Bootstrap و jQuery بشكل جيد وتقوم بعمل موقع شخصي بسيط من الصفر بإستخدام هذه التقنيات. أقرأ توثيق Tailwind CSS بعناية وحاول أن تستخدمه ضمن المشاريع التي قمت بها سابقًا، وسيتجد ضمن توثيق Tailwind شرح كيفية إستخدامه من الصفر أو ضمن مشاريع Laravel أيضًا. تابع إكمال دورة تطوير الواجهات الخلفية بإستخدام PHP، وحاول أن تقوم بعمل جزء الواجهة الأمامية بنفسك دون الإطلاع على شرح المدرب، لتتدرب على CSS و Tailwind معًا. بعد إكمال دورة تطوير الواجهات الخلفية بإستخدام PHP، حاول أن تقوم بالإطلاع على دورة تطوير التطبيقات بإستخدام JavaScript لأنها تحتوي على الكثير من الأمور المفيدة لك مثل Node.js و React.js و MongoDB .. إلخ. الآن ستكون قد أتمت رحلة التعلم، ولكن البرمجة لا تتوقف وستجد في كل يوم تحديثات كثيرة لكل التقنيات التي تستخدمها، حاول أن تبقى على إطلاع بالمواقع التقنية وتحديثات حسوب وكذلك المقالات التي يتم نشرها ضمن الأكاديمية. الخطوات السابقة ليست إجبارية ويمكنك أن تقوم بتعديلها لتتوافق مع أهدافك وظروفك الشخصية كما تشاء.
    1 نقطة
  7. لدي صنفين، وأحدهما يرث من الآخر على النحو التالي: class User { showAll() { // ... } } class Admin extends User { showAll() { // كيفية إستدعاء التابع showAll الموجود في الصنف User } } كما هو واضح في الكود السابق، يوجد صنف User ويحتوي على التابع الساكن showAll ، ولدي أيضًا الصنف Admin والذي يرث من الصنف User ويقوم بعمل override للتابع showAll. الآن أريد أن يتم إستدعاء التابع showAll الموجود في الصنف User من داخل التابع showAll الموجود في الصنف Admin، كيف أقوم بذلك؟
    1 نقطة
  8. كود html <!DOCTYPE html> <html lang="en" dir="rtl"> <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"> <meta name="description" content="in this site we will do the best to help you!!!"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="fontAwsome/all.css"> <link rel="stylesheet" href="fontAwsome/fontawesome.min.css"> <link rel="shortcut icon" href="images/dev.png" type="image/x-icon"> <title>DEVs</title> </head> <!-- (index) - navBar - home-section - lastestProjects-section - aboutUs-section - footer-section --> <body> <!-- navBar --> <header> <!-- site logo --> <nav class="nav-bar-container"> <div class="logo"><i class="fa-solid fa-plug"></i></div> <ul class="lnav-bar-inks"> <li><a href="#userss">آراء المستخدمين</a></li> <li><a href="#lastest-p">آخر مشاريعنا</a></li> </ul> <button class="sign-in" onclick="sign_f()">تسجيل الدخول</button> </nav> </header> <div class="container"> <!-- home-section --> <div class="home"> <div class="aboutus"> <h1>تطوير </h1> <p> نحن شركة <span>تطوير</span> نقوم بتطوير و برمجة المواقع</p> </div> <i class="fa-solid fa-code"></i> </div> <!-- - lastestProjects-section --> <div class="lastestProjects" id="lastest-p"> <h1 class="our-projects">آخر مشاريعنا</h1> <div class="project"> <div class="about-project"> <i class="fa-solid fa-fire fire"></i> <h3>مشروع 1</h3> <p>هذا المشروع هو عباره عن موقع بالأخضر و الأبيض و هذا مجرد مثال مثال مثال مثال مثال</p> </div> <img src="images/one.jpg" alt="No-img" width="400px" style="border-radius: 20px ;" draggable="false"> </div> <div class="project"> <div class="about-project"> <i class="fa-solid fa-fire fire"></i> <h3>مشروع 2</h3> <p>هذا مشروع ابيض و ازرق و هذا مجرد مثال مثال و هذا مجرد كتابه فقط هي مجرد مثال مثال</p> </div> <img src="images/one.jpg" alt="No-img" width="400px" style="border-radius: 20px ;" draggable="false"> </div> <div class="project"> <div class="about-project"> <i class="fa-solid fa-fire fire"></i> <h3>مشروع 3</h3> <p>هذا مشروع ابيض و ازرق و هذا مجرد مثال مثال و هذا مجرد كتابه فقط هي مجرد مثال مثال</p> </div> <img src="images/one.jpg" alt="No-img" width="400px" style="border-radius: 20px ;" draggable="false"> </div> </div> <!-- aboutUs-section --> <div class="about-us-section" id="userss"> <h1 class="about-us-section-title our-projects"> آراء المستخدمين </h1> <div class="grid-users-container"> <div class="user1 user"> <i class="fa-solid fa-user"></i> <h5 class="user-name">محمد</h5> <p class="user-desc">هذا الموقع جدا ممتاز لقد ساعدني بشكل كبير من الصفر حتى نهاية الموقع شكرا لكم هذا نص مجرد مثال مثال</p> </div> <div class="user2 user"> <i class="fa-solid fa-user"></i> <h5 class="user-name">عمر</h5> <p class="user-desc">هذا الموقع جدا ممتاز لقد ساعدني بشكل كبير من الصفر حتى نهاية الموقع شكرا لكم هذا نص مجرد مثال مثال</p> </div> <div class="user3 user"> <i class="fa-solid fa-user"></i> <h5 class="user-name">فيصل</h5> <p class="user-desc">هذا الموقع جدا ممتاز لقد ساعدني بشكل كبير من الصفر حتى نهاية الموقع شكرا لكم هذا نص مجرد مثال مثال</p> </div> <div class="user4 user"> <i class="fa-solid fa-user"></i> <h5 class="user-name">يوسف</h5> <p class="user-desc">هذا الموقع جدا ممتاز لقد ساعدني بشكل كبير من الصفر حتى نهاية الموقع شكرا لكم هذا نص مجرد مثال مثال</p> </div> <div class="user5 user"> <i class="fa-solid fa-user"></i> <h5 class="user-name">زياد</h5> <p class="user-desc">هذا الموقع جدا ممتاز لقد ساعدني بشكل كبير من الصفر حتى نهاية الموقع شكرا لكم هذا نص مجرد مثال مثال</p> </div> <div class="user6 user"> <i class="fa-solid fa-user"></i> <h5 class="user-name">أحمد</h5> <p class="user-desc">هذا الموقع جدا ممتاز لقد ساعدني بشكل كبير من الصفر حتى نهاية الموقع شكرا لكم هذا نص مجرد مثال مثال</p> </div> </div> </div> </div> <!--المشكله هنا هنا هنا--> <!--المشكله هنا هنا هنا--> <!--المشكله هنا هنا هنا--> <!--المشكله هنا هنا هنا--> <!-- footer section --> <footer> <h1>تطوير.كوم</h1> <p>تم تطوير هذا الموقع من قبل محمد محمود حيمور</p> <div class="icons"> <a href="https://www.facebook.com/profile.php?id=100056578988785" target="_blank"><i class="fa-brands fa-facebook icon" style="margin:0 10px ;"></i></a> <a href="https://github.com/mohammed710" target="_blank"><i class="fa-brands fa-github icon" style="margin:0 10px ;"></i></a> <a href="https://twitter.com/dVv0h9EgfoEOK62" target="_blank"><i class="fa-brands fa-twitter icon" style="margin:0 10px ;"></i></a> </div> </footer> <!--المشكله هنا هنا هنا--> <!--المشكله هنا هنا هنا--> <!-- java script file --> <script src="main.js"></script> </body> </html> كود css /* font-family: 'Tajawal', sans-serif; */ * { padding: 0; margin: 0; box-sizing: border-box; } :root { --back-gound-color: #292F36; --dark-perpule: rgb(84, 92, 153); --text-color: white; } body { font-family: 'Tajawal', sans-serif; background-color: var(--back-gound-color); } html { scroll-behavior: smooth; } /* <!-- (index) - navBar - home-section - lastestProjects-section - aboutUs-section - footer-section --> */ /* navBar */ .nav-bar-container { display: flex; justify-content: space-around; align-items: center; margin-top: 5px; } /* logo */ .nav-bar-container .logo { font-size: 5vh; color: var(--dark-perpule); transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; -o-transition: 0.5s all; } .nav-bar-container .logo:hover { color: #292f36ba; } /* --- */ .nav-bar-container .lnav-bar-inks li { padding: 0 10px; display: inline-block; list-style: none; font-weight: 700; } .nav-bar-container .lnav-bar-inks li a { text-decoration: none; color: var(--text-color); transition: 0.5s all; -webkit-transition: 0.5s all; -moz-transition: 0.5s all; -ms-transition: 0.5s all; -o-transition: 0.5s all; } .nav-bar-container .lnav-bar-inks li a:hover { color: rgb(160, 160, 160); } .nav-bar-container .sign-in { background-color: var(--dark-perpule); width: 100px; height: 40px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; color: var(--text-color); font-family: 'Tajawal', sans-serif; padding: 5px; border: none; transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; } .nav-bar-container .sign-in:hover { background-color: #212b36; } /* container */ .container { max-width: 100%; } /* home-section */ .home { display: flex; justify-content: space-evenly; align-items: center; color: var(--text-color); height: 90vh; margin-bottom: 110px; } .home .aboutus h1 { text-shadow: 5px 3px var(--dark-perpule); font-size: 5rem; } .home .aboutus p { font-size: 1rem; } .home .aboutus p span { text-shadow: 0 0 5px var(--dark-perpule); } .home i { font-size: 5rem; text-shadow: 5px 3px var(--dark-perpule); } .lastestProjects { height: 140vh; display: flex; justify-content: space-around; align-items: center; flex-direction: column; } .our-projects { font-size: 50px; margin-bottom: 20px; text-shadow: 5px 3px var(--dark-perpule); color: white; } .project { display: flex; justify-content: space-between; align-items: center; margin: 10px 50px; background-color: #1a222a; border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; -ms-border-radius: 10px 10px 10px 10px; -o-border-radius: 10px 10px 10px 10px; color: white; } .project .about-project { padding: 40px; } .project .fire { color: rgb(188, 88, 0); text-shadow: 0 0 5px red; font-size: 1.5rem; } .about-project h3 { margin-bottom: 10px; } .project img { border-radius: 10px 0 0 10px; } /* - aboutUs-section */ .about-us-section { height: 120vh; } .about-us-section .about-us-section-title { text-align: center; margin-top: 100px; margin-bottom: 100px; } .about-us-section .grid-users-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 50px; color: var(--text-color); padding: 50px; } .about-us-section .grid-users-container .user { background-color: #1a222a; padding: 50px 20px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } .user-name { font-size: 1.3rem; padding: 5px 0 5px 0; } /* - footer-section */ /*المشكله هنا هنا هنا *//*المشكله هنا هنا هنا */ /*المشكله هنا هنا هنا */ /*المشكله هنا هنا هنا */ footer { background-color: #1a222a; color: white; text-align: center; display: block; } @keyframes footer_h1_animation { 0% { text-shadow: 2px 1px var(--dark-perpule); } 20% { text-shadow: 2px 1px rgb(65, 65, 65); } 40% { text-shadow: 5px 3px black; } 80% { text-shadow: 5px 3px rgb(61, 8, 110); } 100% { text-shadow: 2px 1px var(--dark-perpule); } } footer h1 { text-shadow: 2px 1px var(--dark-perpule); padding: 20px; animation: footer_h1_animation infinite ease 2s; -webkit-animation: footer_h1_animation infinite ease 2s; } .icons { padding: 20px 0 5px 0; font-size: 20px; } .icon { transition: all 0.5s; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; } .icon:hover { color: #212b36; } a { color: var(--text-color); } @media screen and (max-width: 800px) { .project { flex-direction: column; } .lastestProjects { height: 200vh; justify-content: space-around; } .lastestProjects img { display: block; width: 300px; padding: 10px; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; } .about-us-section .grid-users-container { grid-template-columns: repeat(2, 1fr); } .home { height: 80vh; margin: 0; } html { font-size: 13px; } .about-us-section { height: 150vh; } } /*المشكله هنا هنا هنا */ /*المشكله هنا هنا هنا */ /* media rules */ /*المشكله هنا هنا هنا*//*المشكله هنا هنا هنا*/ /*المشكله هنا هنا هنا*/ /*المشكله هنا هنا هنا*/ /*المشكله هنا هنا هنا*/ @media screen and (max-width: 500px) { footer { position: absolute; bottom: 0; top: 540vh; background-color: #1a222a; color: white; text-align: center; display: block; } .home { height: 110vh; text-align: center; } .home i { display: none; } .project { flex-direction: column; padding: 5px; } .lastestProjects { height: 200vh; justify-content: space-around; } .lastestProjects img { width: 200px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } .about-us-section .grid-users-container { grid-template-columns: 1fr; } .about-us-section { height: 120vh; } .about-us-section .about-us-section-title { font-size: 2rem; margin: 10px 0 0 0; } } @media screen and (max-width: 300px) { img{ border-radius: 20px ; -webkit-border-radius: 20px ; -moz-border-radius: 20px ; -ms-border-radius: 20px ; -o-border-radius: 20px ; } html { font-size: 8px; } footer{ background-color: #1a222a; color: white; text-align: center; display: block; } } @media screen and (max-width: 150px) { html { font-size: 5px; } } @media screen and (max-width: 150px){ html::before{ content: " you cant opne this site from this site "; } body{ display: none; } } /*المشكله هنا هنا هنا*/ /*المشكله هنا هنا هنا*/ /*المشكله هنا هنا هنا*/ /*المشكله هنا هنا هنا*/ و شكرا لك
    1 نقطة
  9. أجل ويمكنك تحديد إسم الجدول الثالث عبر الخاصية through كما يظهر من الشفرة التالية User.associate=models=>{ User.hasOne(models.Profile); User.belongsToMany(models.Room,{through:"name of third table"}) } Room.associate = models=>{ Room.belongsToMany(models.User,{through:'name of third table'}) }
    1 نقطة
  10. أنا أريد من خلال هاته العلاقة أن يتم إنشاء جدول ثالث أدخل فيه إسم ورقم المستخدم من نموذج المستخدمين وإسم الحصة من نموذد الحصص كما في الصورة هل هاته الطريقة تفي بالغرض؟
    1 نقطة
  11. في sequelize يمكننا عمل علاقة من نوع many-to-many عبر إستخدام الدالة belongsToMany لدى كلا الطرفين, كما يتضح من الشفرة التالية في دالة associate User.associate=models=>{ User.hasOne(models.Profile); User.belongsToMany(models.Room) } Room.associate = models=>{ Room.belongsToMany(models.User) }
    1 نقطة
  12. نعم صحيح، يمكنك اعتبار تطبيق Electron واجهة أمامية يعمل استعلامات من خادم ويب ويمكن أن يتصل عليه من خلال API
    1 نقطة
  13. السلام عليكم. في المثال التالي، عندما أقوم بhover للعنصر أريد أن يكون إتجاه التحريك من الأسفل إلى الأعلى. ملاحظة: التحريك في هذه الحالة من الأعلى للأسفل شيفرة css: div{ margin: 30px auto; background-color: #5FD068; width: 40%; height: 30px; border-radius: 10px; font-size: 40px; /* height: 0; */ transition: height 2s; } div:hover{ height: 300px; } شكرا لكم.
    1 نقطة
  14. للتحريك من الاسفل للأعلى يجب استخدام ال transform : div { margin: 30px auto; background-color: #5fd068; width: 40%; height: 30px; border-radius: 10px; font-size: 40px; /* height: 0; */ transition: transform 2s; transform-origin: bottom center; } div:hover { transform: scaleY(2); } حيث لا تستطيع التحكم باتجاه الحركة عند استخدام ال height لذلك نذهب لـ transform: scaleY(2) بدلاً عنها لأنها تمكننا من التحكم بال transform-origin، وبالتالي التحكم باتجاه الحركة. إن كنت مهتم بالتحريك يمكنك قراءة هذا المقال عن ال animations :
    1 نقطة
  15. أفهم من كلامك الأستاذ وائل لابد من استخدام الواجهة الخلفيه قبل الاهتمام بالربط وماربط
    1 نقطة
  16. إن المنطق وراء ربط عدة مستخدمين مع بعضهم يكمن في أن لهم جميعاً قاعدة بيانات واحدة، ويوجد بيانات فيها مشتركة (على الأقل قابلة للقراءة منهم جميعاً). أي حتى يصبح تطبيقك قابل لتبادل البيانات مع غير مستخدمين، سيتوجب عليك الحصول على قاعدة بيانات على الانترنت ومخدم لها عنوان انترنت مشترك يتصل به جميع المستخدمين. يوجد الكثير من قواعد البيانات، ولنفرض أن لديك قاعدة من نوع MySQL لتطبيقك على استضافة. ما تحتاج عمله في تطبيقك هو تنصيب الوحدة الموافقة لقاعدة البيانات تلك، ثم إجراء العمليات: تهيئة الاتصال مع قاعدة البيانات تنفيذ الاستعلامات من قبل المستخدمين تنصيب الحزمة الخاصة ب mysql npm install mysql ثم تضمين الوحدة، و تهيئة الاتصال و عمل استعلام var mysql = require('mysql'); // إضافة معلومات المستخدم للاتصال على قاعدة البيانات var connection = mysql.createConnection({ host : 'localhost', user : 'root', password : null, // password database : 'my-database-name' }); // الاتصال connection.connect(function(err) { // حدوث خطأ if(err){ console.log(err.code); console.log(err.fatal); } }); // تعريف الالة التي تجلب الاستعلام function get_10_Rows(callback){ // استعلام افتراضي $query = 'SELECT * FROM `Tasks` LIMIT 10'; connection.query($query, function(err, rows, fields) { if(err){ console.log("An error ocurred performing the query."); // حصول خطأ console.log(err); return; } console.log("Query succesfully executed", rows); // نجاح الاستعلام }); // اغلاق الاتصال connection.end(function(){ }); } ناتج الاستعلام يعود من خلال المتغير rows. <script> // عند النقر على زر معين document.getElementById('action-btn').addEventListener('click', function(){ // استدعاء دالة جلب أول 10 مهام // rows فيها النتيجة get_10_Rows(function(rows){ var html = ''; rows.forEach(function(row){ html += '<tr>'; html += '<td>'; html += row.id; html += '</td>'; html += '<td>'; html += row.name; html += '</td>'; html += '</tr>'; console.log(row); }); // حقن النتيجة في الجدول document.querySelector('#table > tbody').innerHTML = html; }); },false); </script> كانت هذه طريقة التواصل مع قاعدة بيانات مباشرة، يمكنك عمل خادم ويب مثل EXPRESS والاتصال معه عبر API ليعمل عبر الشبكة المحلية، يتوجب الاتصال على IP الحاسوب المحلي الذي فيه مخدم قواعد البيانات mysql , وضعه مكان host في جزء تهيئة الاتصال مع تحديد منفذ 3306. var connection = mysql.createConnection({ host : ' 192.168.1.2', IP port : '3306', MySQL port
    1 نقطة
  17. سبب المشكلة هو أن محدد الوصول الذي تستخدمه في جيكويري سيجلب أول عنصر له id أو class معين. الحل، وطالما أنك تحدد النقر على الأيقونة، سوف نجلب العنصر الذي يليها var Favourite=$(this).next('#favouriteInput').attr('value'); var Item=$(this).next('.item').attr('value'); var User=$(this).next('.user').attr('value'); استخدمت next لأن ترتيب شيفرة HTML هي كذلك. نريد العنصر التالي الذي له الصنف كذا .. this سوف تدل على العنصر الخاص بالأيقونة الذي تم النقر عليه.
    1 نقطة
  18. دورة جافاسكريبت كانت 47 ساعة والان اصبحت 55 ساعة ما هو الجديد في هذة الدورة
    1 نقطة
  19. كما نشر الاستاذ عبد اللطيف ايمش: يمكنك أن تجد معلومات تحديث باقي الدورات من الرباط: تحديثات دورات أكاديمية حسوب
    1 نقطة
  20. لو سمحت انا معاية البطاقة الائتمانية بتاعت اخويا ينفع استخدمها و ينفع ادفع تمن الدورة بالجنية المصري و بعد لمة اخلاص دورة علوم حاسب هلاقي شغل علي مواقع العمل الحر ولا هيبقي لسة محتاج اخود دورات كمان
    1 نقطة
  21. يمكنك إستعمال أي بطاقة ائتمانية بدون مشكلة، وتستطيع الحصول على مساعدة أكبر في هذا الأمر من خلال مركز المساعدة الخاص بالأكاديمة من هنا بالنسبة لدورة علوم الحاسوب، فهي دورة عامة تؤهلك لتعلم تقنيات أخرى، أي أنها مدخل لعلوم الحاسوب بشكل عام وبجميع تخصصاته، لكنك ستحتاج إلى التخصص في مجال معين مثل تطوير واجهات المواقع Frontend، تطوير تطبيقات الجوال، تطوير الواجهات الخلفية Backend وذلك من خلال باقي دورات أكاديمية حسوب. على سبيل المثال إن أردت أن تتخصص في تطوير واجهات المواقع Frontend ولم يكن لديك أي معرفة تقنية أو برمجية سابقة، فعليك أن تشترك في دورة علوم الحاسوب أولًا وبعد ذلك يمكنك إتمام دورة تطوير واجهات المواقع Frontend، أما إن كنت على دراية بالمجال التقني أو كان لديك خبرة برمجية سابقة، فيمكنك الإلتحاق مباشرة بدورة تطوير واجهات المواقع Frontend. سؤال مشابهة:
    1 نقطة
  22. هل دورة علوم الحاسب هذه كافية لدخولي سوق العمل؟
    1 نقطة
  23. لا غير كافية لسوق العمل و لكن هذه الدورة تعتبر مهمة جدا لانك سوف تتعلم اساسيات كثيرة و التي سوف تساعدك علي فهم باقي الدورات و يجب بعد الانتهاء من هذه الدورة ان تختار مجال واحدا من هذه المجالات تطوير مواقع الويب تطوير الالعاب تطوير تطبيقات الموبايل الزكاء الصناعي الامن السيبراني ولكل مجال لغات برمجة يجب ان تتعلمها فمثلا مجال تطوير مواقع الويب ينقسم الي frontend development: ,وهنا سوف تتعلم تصميم المواقع backend development : وهنا سوف تتعلم التعامل مع قواعد البيانات و في frontend development سوف تحتاج ان تتعلم هذه اللغات html css javascript وفي backend development :سوف تختار لغة واحدة مع قاعدة البيانات التي تريد ان تتعامل معها فمثلا لغة php مع قاعدة بيانات mysql لغة javascript مع قاعدة بيانات mongo
    1 نقطة
  24. لا غير مؤهلة لسوق العمل,ولكنها لا تقل أهمية عن باقي الدورات, تعبتر حجر الأساس لعالم البرمجة بشكل خاص والحاسوب بشكل عام, لذلك اذا كانت مهارتك ضعيفة في التعامل مع الحاسوب وأنظمته ولا تمتلك أي أفكار عن البرمجة فيجب أن تكون أول دورة تشترك فيها, لأنها كما قلت حجر الأساس لباقي الدورات وسوف تجعل الامر أسهل وأبسط بكثير
    1 نقطة
  25. السلام عليكم ورحمة الله لقد انتهيت من دورة تطوير واجهات المستخدم فما الدي يجب علي فعله بعد كل هادا جزاكم الله خيرا
    1 نقطة
×
×
  • أضف...