عبدالباسط ابراهيم

وظيفة ال Front end : عبارة عن بناء الواجهة الأمامية للموقع بناءَ علي التصميم المتوفر من قبل صاحب العمل عن طريق اللغات والتقنيات المختلفة مثل HTML والتي تعتبر لغة ترميز وهي الهيكل الاساسي للموقع. CSS تمكنك من إضافة الألوان والتحكم في المساحات وما إلى ذلك JavaScript وهي اللتي تضيف التفاعل إلى الموقع وهي لغة برمجة وليست ك html أو css بالنسبة لك كل ماعليك معرفته هو كيفية تحويل التصميم سواء psd أو figma أو أى صيغة أخرى إلى صفحة ويب حية. من الممكن أن يوفر العميل مخطط للصفحة فقط (wireframe) ويطلب منك تصميم صفحة حسب رغبتك، . لكن إن كنت جيد في ال ui/ux يمكنك العمل عليه بدلاً من رفض العمل ويمكن أن يحدث لك لعدم إهتمام العميل بالتصميم أو لقلة علمه بالمجال

لإضافة بيانات إلى component يتم عن طريق 1. إضافة البيانات إلى ال data function 2. استقبال البيانات من ال component الأب متى تستخدم الطريقة الأولى؟ عند استخدام ال component لمرة واحدة أو عدة مرات بنفس البيانات دون تغيير متى تستخم الطريقة الثانية ؟ عند استخدام ال component لعدة مرات باستخدام بيانات مختلفة

تصميم مواقع الويب أو ال front end هو بناء مواقع على شبكة الإنترنت بإستخدام تقنيات ال front end. يمكن أن يكون موقع ويب ثابت يحتوي على نص عادي وصور وروابط بدون تغيير dynamic في محتويات الموقع أو أن تكون تطبيقات ويب معقدة وأنظمة إدارة المحتوى وواجهات برمجة التطبيقات (API) وخدمات الشبكات الاجتماعية. يقوم مصممو الويب ببناء أجزاء الموقع التي تراها وتتفاعل معها، وعادةً ما تسمى الواجهة الأمامية أو ال front end . فهم يتحملون المسؤولية عن المظهر والتصميم مثل الألوان والخطوط والصور والتنقل والنسخ كلها جزء من عمل مصمم الويب. تعلم المهارات الأساسية: عندما تبدأ للتو، حاول تعلم بعض المهارات الأساسية لتطوير الويب مثل المفهوم العام لل front end و back end و البروتوكولات الإستضافة . إن الفهم الأساسي لمهارات تطوير المواقع الأساسية سوف يخدمك جيداً في حياتك المهنية في تصميم المواقع ويجعلك أكثر جاذبية للعملاء وأصحاب العمل. دعنا نلقي نظرة على المهارات الأساسية التي ستحتاج إلى إتقانها لتصبح مصمم ويب. الأساسيات: HTML ،CSS ،JavaScript أول شيء يجب أن تتعلمه هو كيفية ترميز وتصميم موقع ويب أساسي – ولهذا، ستحتاج إلى معرفة كل من HTML و CSS. HTML و CSS هما لغات ترميزية يستخدمها المصممون لإنشاء أجزاء من صفحة الويب وأنماطهم البصرية. إنها الأساسيات وراء كل موقع ويب – تستخدم متصفحات الويب كود HTML و CSS لتحديد ما يراه المستخدمون عند تصفحهم لموقع الويب. HTML هي لغة الترميز المستخدمة لوصف المحتوى على صفحة الويب وكيفية هيكلته — فكر في العناوين والنقاط واالروابط. CSS هو الكود الذي يمثل كيفية تصميم محتويات صفحة الويب وتوضيحها. من خلال تغيير كود CSS لصفحة الويب، يمكنك التحكم في الخطوط المستخدمة وتغيير الألوان والصور ووضع محتوى الصفحة لتحقيق أقصى تأثير. أخيراً، لدينا JavaScript – لغة برمجة تستخدم للتحكم ديناميكياً في المحتوى على صفحة الويب. يتيح لك JavaScript جعل المواقع تفاعلية – يتم تشغيل جميع تطبيقات الويب والخرائط التفاعلية وصور التمرير والفيديو الديناميكياً بواسطة JavaScript. جافا سكريبت هي لغة برمجة ضخمة مع إمكانيات شبه محدودة، ولكن يجب على المطورين المبتدئين التركيز على تعلم الأساسيات – أشياء مثل بناء الكود، وكيفية عمل المتغيرات، والبيانات الشرطية، والوظائف. وأخيراً وليس آخراً، يجب أن يتعرف مصممي الواجهة الأمامية على أنظمة التحكم في النسخ (version control systems). تتيح لك أنظمة التحكم في النسخ تتبع التغييرات في الكود، وتمكين عدة أشخاص من العمل على الكود في نفس الوقت دون خوف من إحداث تغييرات في عمل أي شخص آخر. أكثر أنظمة التحكم في النسخ شيوعاً هذه الأيام هو Git – الغالبية العظمى من المعسكرات التمهيدية للترميز والدورات التدريبية عبر الإنترنت تستخدم Git، لذلك فهو أفضل مكان لبدء المطورين الجدد. مهارات تصميم واجهات المواقع: تصميم متجاوب، أطر العمل، مكتبات إن امتلاك القدرة على فهم HTML و CSS و JavaScript كافية للبدء في مجال تصميم الويب. أحد المفاهيم التي ستعرفها جيدًا هو التصميم المتجاوب، أي التخطيطات الديناميكية التي تتكيف لتبدو رائعة على أي حجم شاشة، من أجهزة التلفزيون ذات الشاشة الكبيرة إلى الهواتف الذكية. تستخدم المواقع استعلامات الوسائط media queries للتحكم في “نقاط التوقف” “breakpoints” – دقة الشاشة المختلفة التي يجب أن يتحول فيها متصفح المستخدم إلى تصميم مختلف ومجموعة من الأنماط. نظراً لأن الأجهزة المحمولة تمثل ما يقرب من نصف عدد زيارات الويب في عام 2019، يعد التصميم المتجاوب مهارة أساسية لأي مصمم ويب. هناك مشكلة أخرى ستواجهها قريباً وهي مقدار الوقت الذي يستغرقه كتابة الكود لكل هذه الأنماط يدوياً. غالباً ما تتجاوز أوراق الأنماط الخاصة بأي موقع ويب طول رمز موقع الويب نفسه. لتسريع الأمور، يستخدم مصممو الواجهة الأمامية طريقتين: يستخدمون أطر عمل سابقة التجهيز للحصول على انطلاقة مباشرة ومعالجات CSS الأولية لتقليل الكود الذي يحتاجون إلى كتابته. تأتي الأُطُر الأمامية الأمامية مثل Bootstrap معبأة مسبقاً بأنماط وأمثلة من الرموز لعناصر التصميم شائعة الاستخدام مثل أشرطة التنقل وجداول التسعير. نظراً لأن الكود تم اختباره جيداً وتوثيقه، يمكن أن تجعل الأطر إنشاء تصاميم جديدة أسرع بكثير. تجعل المعالجات المسبقة لـ CSS مثل Sass أوراق أنماط الكتابة أسرع وأكثر سهولة. بدلاً من نسخ ولصق إدخالات التعليمات البرمجية المشابهة عدة مرات، يتيح لك Sass كتابة مجموعة واحدة من الأنماط بلغة ترميز مشابهة لـ CSS تسمى SCSS. يمكن إعادة استخدام هذه الأنماط عدة مرات حسب حاجتك. يمكنك أيضاً تداخل الأنماط داخل بعضها البعض، مما يحتمل أن يلغي مئات الأسطر المكررة من التعليمات البرمجية. نظراً لأن متصفحات الويب لا تفهم شفرة SCSS مباشرةً، مع ذلك، تحتاج إلى تحليلها إلى vanilla CSS باستخدام أداة إنشاء مثل Grunt أو webpack. إن أدوات الإنشاء سهلة الاستخدام أيضاَ لدمج عدة ملفات CSS في ملف واحد (مما يساعد في الحفاظ على تنظيم الكود الخاص بك)، وضغط (أو تصغير) الكود لتحسين سرعات التنزيل، وحتى نشر الكود تلقائيًا على خادم ويب بعيد. أخيراً، ستتعلم أطر عمل JavaScript ومكتباتك. أطر عمل JavaScript هي هياكل عمل لرمز JavaScript يمكنك تضمينها في موقعك لتسريع عملية التطوير. تشمل أطر عمل JavaScript الشائعة في 2020: Vue.js ،React، و Angular.