front end and back end

 ما هو تطوير الواجهة الأمامية والخلفية

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

front end and back end

لإنشاء الواجهة الأمامية ، يستخدم المهندسون مزيجًا من HTML (لبنية الصفحة الأساسية والمحتوى) و CSS (للتحرير المرئي) وجافا سكريبت (لجعل مواقع الويب تفاعلية). تُستخدم نفس مجموعة الأدوات لإنشاء تطبيقات ويب تقدمية - تطبيقات الأجهزة المحمولة التي تبدو وكأنها أحد التطبيقات الأصلية ولكن يتم إنشاؤها باستخدام تقنيات الواجهة الأمامية. هناك المزيد حول ذلك في المقالة المرتبطة.

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


تم إنشاء الواجهة الخلفية باستخدام مجموعة مختلفة من التقنيات ، بما في ذلك Java و PHP و Ruby و C # وأحيانًا JavaScript ، والتي سنشرحها في القسم المقابل.

مجموعة الأدوات الأساسية للواجهة الأمامية محددة جيدًا: HTML و CSS و JavaScript. ومع ذلك ، يمكن توسيع تقنيات تطوير الواجهة الأمامية مع مديري الحزم ومعالجات CSS الأولية وأطر العمل وغير ذلك الكثير.


HTML: تقنية الواجهة الأمامية الرئيسية

HTML (أو Hypertext Markup Language) هي لغة كمبيوتر مصممة لإنشاء مواقع ويب يمكن استكشافها لاحقًا بواسطة أي شخص يصل إلى الإنترنت. عادةً ما يتم استخدام HTML لبناء مستند ويب. يحدد عناصر مثل العناوين الرئيسية أو الفقرات ويتيح تضمين الصور والفيديو والوسائط الأخرى.


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


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

تحدد العلامات الصفات التي تطبقها علامات HTML على النص الموجود بداخلها. تقوم العلامات بتمييزها كنوع معين من النص.

كلغة ، تحمل كلمات مشفرة وبناء جملة مثل أي لغة أخرى.

يحدد النص الموجود بين <html> و </html> صفحة الويب ، بينما يحدد النص الموجود بين <body> و </ body> المحتوى المرئي.


يوجد <! DOCTYPE html> في الأعلى إعلان نوع المستند لـ HTML5. إذا لم يتم تضمينه ، فستعرضه المتصفحات المختلفة بطريقتها الخاصة.


هذه هي الطريقة التي ننتقل بها تدريجياً إلى HTML5.


HTML5

منذ إصدارها الأولي في عام 1991 ، خضعت HTML للعديد من التحديثات. تم إصدار HTML5 في عام 2014. وقد أضاف ميزات مثل دعم تخزين الوسائط غير المتصلة بالإنترنت وعناصر محتوى أكثر دقة (مثل الرأس والتذييل والتنقل) ودعم تضمين الصوت والفيديو.


CSS: تصميم واجهتك

CSS (أو Cascading Style Sheets) هي لغة ورقة أنماط. يتم تطبيقه لتحديد كيفية عرض عناصر HTML على صفحة ويب من حيث التصميم والتخطيط والتنويعات للأجهزة المتنوعة ذات أحجام الشاشة المختلفة. تتقن CSS تخطيط العديد من صفحات الويب المختلفة في وقت واحد.


كيف تعمل. يتفاعل CSS مع عناصر HTML ، ومكونات صفحة الويب.


للتواصل مع HTML ، يستخدم CSS المحددات. المحدد هو جزء من كود CSS يحدد أي قطعة HTML سيؤثر عليها تصميم CSS.

يحتوي التصريح على الخصائص والقيم التي يستخدمها المحدد.

تحدد الخصائص حجم الخط واللون والهوامش. القيم هي إعدادات هذه الخصائص.

P (للفقرة) محدد ، {font-size: 24px؛ لون أزرق؛ } هو تصريح ، حجم الخط: واللون: هي خصائص ، بينما 24 بكسل ؛ والأزرق؛ هي قيم.


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


يتم تخزين أوراق الأنماط الخارجية كملفات .css ويمكن تطبيقها لتحديد مظهر موقع الويب بالكامل عبر ملف واحد ، بدلاً من وضع مثيلات إضافية من كود CSS على كل عنصر HTML يجب تعديله. لاستخدام ورقة أنماط خارجية ، يجب أن تحتوي ملفات .html على قسم رأس يتصل بورقة الأنماط الخارجية.

أوراق الأنماط الداخلية هي اتجاهات CSS توضع مباشرة في رأس صفحة html معينة.

الأنماط المضمنة هي مقتطفات من CSS مسجلة في كود HTML نفسه.

أطر CSS. إطار عمل CSS عبارة عن مجموعة من ملفات CSS و HTML الافتراضية. إنه يوسع قدرات مطور الواجهة الأمامية لتصميم مواقع الويب. بالإضافة إلى المساعدة أثناء بناء تصميم سريع الاستجابة ، تقدم أطر CSS أيضًا تخطيطات متميزة ومتماثلة ، مما يوفر للمطورين من كتابة التعليمات البرمجية من نقطة الصفر في كل مناسبة. تُعتبر عادةً اختيارًا جيدًا لتناسب الأنظمة الأساسية المتنوعة وأحجام الشاشات. مع مكونات واجهة المستخدم الشائعة وأنظمة الشبكة والتخطيطات والعديد من الميزات الأخرى ، تعمل أطر CSS على تسريع سير عمل التطوير بشكل كبير. توجد العديد من الأطر في CSS Universe:


كامل المواصفات (Bootstrap و Foundation و Semantic UI والمزيد) ،

تهدف إلى تصميم المواد: (تجسيد وتصميم المواد لايت) ، و

خفيف الوزن (نقي).

جافا سكريبت: جعل الويب حيًا

JavaScript (JS) هي واحدة من أكثر لغات البرمجة النصية شيوعًا. تشتهر في الغالب بتوفير مجموعة كاملة من التقنيات لتطوير كل من الواجهة الأمامية والخلفية. نظرًا لأننا نتحدث عن الأول ، يتم تطبيقه لجعل صفحات الويب ديناميكية.


كيف يعمل JavaScript. تعزز JS التفاعل العام لموقع الويب. يتيح تصميم مكونات واجهة المستخدم المتحركة مثل منزلقات الصور والنوافذ المنبثقة وقوائم التنقل الشاملة في الموقع والمزيد. توفر JavaScript لموقع ويب وظائف موسعة لا يمكن تحقيقها باستخدام HTML و CSS فقط. تسمح JavaScript لصفحات الويب بالرد على إجراءات المستخدمين وتحديث نفسها ديناميكيًا. بفضل JavaScript ، لا تتطلب هذه العملية إعادة تحميل الصفحة لتعديل تمثيلها.


مكتبات وأطر عمل JavaScript ولماذا نحتاج إليها

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


الأطر هي قوالب لإنشاء موقع ويب أو تطبيق ويب. أنها توفر هيكلًا (مثل هيكل عظمي أو سقالة) لترتيب المشروع بأكمله عليه. بينما يعيّن إطار العمل قوالب الصفحة ، فإنهم يبنون الهيكل بمناطق مخصصة معينة لتضمين رمز إطار العمل فيه.


لذلك ، فإن أطر عمل JavaScript هي مجموعات كاملة من الأدوات لتشكيل وترتيب موقع ويب أو تطبيق ويب.


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


لذلك ، تعد المكتبات أدوات متخصصة لاحتياجات الترميز الخاصة ، وليست آلة لجميع الأغراض لتهيئة المشروع الحالي بأكمله.


الأطر والمكتبات الرئيسية التي يجب معرفتها

لنبدأ بالأطر:


Angular هو إطار عمل للواجهة الأمامية تدعمه Google ومتوافق مع معظم برامج تحرير التعليمات البرمجية الشائعة. يهدف Angular إلى إنشاء تطبيقات ويب ديناميكية ذات صفحة واحدة (SPA) وتطبيقات ويب تقدمية. عند إصداره الأولي ، كان الإطار موضع تقدير كبير لقدرته على تحويل المستندات المستندة إلى HTML إلى محتوى ديناميكي. Angular من بين أكثر الأطر الأمامية شيوعًا. يمكنك استكشاف هذا الموضوع في مقالتنا حول إيجابيات وسلبيات تطوير Angular.


Vue.js هو إطار عمل مفتوح المصدر آخر لـ SPAs. يستخدم نموذج تطوير قائم على المكونات ويسمح بإرفاق مكونات بالمشروع. Vue.js هو مثال لمكتبة هي أكثر من إطار عمل. لاستخدام Vue.js ، تعد معرفة HTML و CSS مطلبًا مطلقًا. يقترح مجموعة كاملة من القوالب والأنماط المطبقة في التطوير. يتم التعرف على Vue بشكل أساسي لصغر حجم المستندات وبناء الجملة المستند إلى HTML. مرة أخرى ، لتغمر نفسك في مزايا وعيوب Vue.js ، انقر فوق الرابط.


Ember.js هو إطار عمل لتطبيقات SPA والجوال وتطبيقات سطح المكتب. يستخدم نمط عرض النموذج (MVVM). تتيح أدوات Ember تصميم بيئة تطوير ، بينما توفر واجهة سطر الأوامر أدوات لأتمتة البرنامج النصي.


والآن دعنا نلخص بعض المكتبات:


React هي مكتبة مفتوحة المصدر لبناء واجهات مستخدم ديناميكية ، تم إنشاؤها وتربيتها بواسطة Facebook. يتم تطبيق إطار العمل لإنشاء تطبيقات ويب بمكونات ديناميكية متعددة. يعتمد على JavaScript و JSX ، امتداد لغة Facebook PHP. يتيح React بناء عناصر HTML قابلة لإعادة الاستخدام للواجهة الأمامية. يتضمن React أيضًا React Native ، وهو إطار عمل لتطوير الأجهزة المحمولة عبر الأنظمة الأساسية. لاكتشاف المزيد حول إيجابيات وسلبيات React و React Native ، ضع في اعتبارك استكشاف مقالتنا حول هذا الموضوع.


يهدف jQuery بدوره إلى التحكم في مستندات HTML. يحتوي على واجهة برمجة تطبيقات بسيطة للتحكم في الأحداث وتصميم الرسوم المتحركة في المتصفحات. بصرف النظر عن ذلك ، يتم تطبيق jQuery لمعالجة نموذج كائن المستند (DOM) ويعمل كأداة لتطوير البرنامج المساعد أيضًا. كما يأتي مع مكتبة مستعرضة أخف وزنا ، واجهة مستخدم jQuery لإطار عمل jQuery Mobile ولإنشاء واجهة رسومية.


D3.js هي مكتبة تعتمد على البيانات لتصور البيانات. من خلال ربط البيانات المؤقتة بـ DOM وتنفيذ التغييرات المستندة إلى البيانات على المستند ، تتيح المكتبة إدارة البيانات وعمل تصورات ديناميكية للبيانات. يمكنه دعم ومعالجة مجموعات البيانات الكبيرة والاستجابات الديناميكية للتفاعل والرسوم المتحركة. يسمح النمط الوظيفي لـ D3 بإعادة استخدام الشفرة ويعمل مع CSV و HTML.


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


إذا كنت تبدأ بالواجهة الأمامية ، فسيكون من المعقول أن تبدأ بالمكتبات نظرًا لأنها معتدلة

منحنى التعلم إيه. عند الحصول على الأساسيات من عدد قليل منهم ، يمكن للمتعلمين الانتقال إلى الأطر ، حيث يحتاجون إلى فهم أكبر لأساسيات JS.


JavaScript للنهاية الخلفية

عند الحديث عن JavaScript كبيئة تطوير شاملة ، يجب أن نذكر تنفيذها الخلفي. نظرًا لأن JavaScript شائع جدًا ، فقد قام عالم هندسة البرمجيات بتكييف JS مع المواصفات الخلفية.


للتطوير من جانب خادم الويب باستخدام JavaScript ، ربما أصبح Node.js أحد أبرز الأدوات. ومع ذلك ، فهو ليس إطار عمل ولا مكتبة. Node.js هي بيئة تشغيل تعتمد على محرك جافا سكريبت V8 من Chrome. للحصول على فهم أعمق لـ Node.js ، لا تتردد في قراءة مقالتنا حول إيجابيات وسلبيات تطوير تطبيق الويب Node.js. أو شاهد الفيديو الخاص بنا على Good and Bad of Node.js.

------------------

 الباك ايند او تطوير المواقع

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


مع الحاجتين اللي هنتعلمهم النهارده يبقا انت كدا معاك اساس كويس عشان تطور من نفس ودا هننزله السبت الجاي ان شاء الله مع تطبيق لكل اللي فات 😋💛

النهارده هنتعلم لغة برمجه ال PHP وهنحتاج نتعلم ال MySQL عشان الداتا بتاعت الموقع 😎

- ال PHP بي إتش بي (PHP: Hypertext Preprocessor، 'الصفحة الرئيسية الشخصية كانت مجموعة من التطبيقات التي كتبت باستخدام لغة بيرل أطلق راسموس اسم Personal Home Page Tools ("المعالج المسبق للنصوص الفائقة") هي لغة برمجة نصية صممت أساسا من أجل استخدامها لتطوير وبرمجة تطبيقات الويب. كما يمكن استخدامها لإنتاج برامج قائمة بذاتها وليس لها علاقة بالويب فقط.

ونقدر نتعلمها من هنا : https://bit.ly/36wGuSv

- طيب ال MySQL !! 

إذا كنت تملك معرفة ولو قليلة بقواعد البيانات العلائقية فربما تكون قد سمعت بـ MySQL ، نظام إدارة قواعد البيانات العلائقية متعدد المستخدمين و عالي الأداء ، الذي أصبح المعيار في إنشاء تطبيقات قواعد البيانات على الويب أو خارجها. لقد تم تصميم MySQL حول ثلاث مفاهيم رئيسية وهي السرعة و الثبات و سهولة الإستخدام ، و بالاضافة إلى ذلك أنها متاحة تحت ترخيص مفتوح المصدر GUN GPL ، مما قلدها وسام " أشهر قاعدة بيانات مفتوحة المصدر عالميا" من قبل شركتها الأم MySQL AB. ، لقد أصبحت أسماء مثل جوجل و ياهو و سيسكو و ناسا و HP من عملاء هذه القاعدة .

,وتقدر تتعلمها من هنا : https://bit.ly/2rA00yJ

تعليقات