المظهر الامامي لتطوير الويب (Front-end web development) أو (client-side development) وهو الجزء الأمامي الذي يتم التعامل معه للمواقع والتطبيقات الخاصة بالويب بإستخدام لغات إتش تي أم إل ( HTML ) و سي أس إس ( CSS ) وجافا سكريبت ( Javascript ) وبي إتش بي ( PHP ) وأيه إس بي ( ASP.NET ) وغيرها.[1] التحديات المرتبطة بأساليب وأدوات تطوير المظهر الأمامي تتغير بإستمرار ولهذا فإن المطورين يحتاجون ويجب أن يدركوا كيفية التعامل مع هذه التغيرات .[2][3]
أدوات تستخدم لتطوير الواجهة الأمامية
هناك العديد من الأدوات المتاحة التي يمكن إستخدامها لتطوير الواجهة الأمامية للموقع على شبكة الإنترنت وفهم أي الأدوات أفضل لجعل الموقع بأفضل تصميم وإتساع .[4]
لغة ترميز النص التشعبي
لغة ترميز النص التشعبي (HTML) هي العمود الفقري لأي عملية تطوير للمواقع الإكترونية ( websites ) ، بدونها لا يمكن تواجد أي صفحة ويب ، لغة وأكواد HTML هي التي تمدنا بالإطار العام لما سيظهر عليه شكل الموقع الإلكتروني، آخر إصدار للغة الترميز هو إتش تي إم إل 5 ( HTML5 ) وبه تحسينات وطرق للتعامل مع العناصر مثل ملفات الفيديو وملفات الصوت .
ملف صفحة الشكل العام
ملف صفحة الشكل العام (CSS) تتحكم في جوانب العرض لأي موقع وتسمح بشكل فريد له عن طريق ملف بأنماط (Style Sheets ) ولها قواعد تطبق قبل أي أنماط أخرى مثل حجم شاشة الجهاز ( device screen ) ودقة الشاشة ( resolution ) .
جافا سكريبت
جافا سكريبت (JS) هي لغة برمجة أمرية وإجرائية ( imperative programming ) مبنية على الاستناد على الحدث( event-based ) على عكس لغة HTML التي تعتبر برمجة إعلانية ( Declarative programming ) ، تستخدم جافاسكريبت لتحويل صفحات HTML الثابتة ( static HTML pages ) إلى صفحات ديناميكية متغيرة متحركة ( dynamic interface ) ، أكواد الجافاسكريبت يمكن أن تستخدم نموذج المستند Document Object Model (DOM) التي تمدنا بها معايير HTML الرئيسية للتعامل أو معالجة أي صفحة ويب بناء على الأحداث ( in response to events ) مثل أي مدخل للمستخدم .
استخدام أسلوب وتقنية أجاكس ( AJAX ) بأكواد الجافا سكريبت يسترجع محتويات أي صفحة ويب ( بطريقة مستقلة عن صفحة ال HTML الأصلية ) كما يمكن ان تتفاعل مع الأحداث من جانب الخادم ( Server Side ) أيضا وتعطينا إضافة طبيعية ديناميكية لصفحة الويب .
أهداف للتطوير
المطورين للواجهة الأمامية يضعون النقاط والأدوات والأساليب التالية في الاعتبار للوصول لأهدافهم :
- إمكانية الوصول accessibility
- الأداء performance
مقالات ذات صلة
مصادر ومراجع
- front end and back end - تصفح: نسخة محفوظة 09 يوليو 2017 على موقع واي باك مشين.
- advanced front end techniques - تصفح: نسخة محفوظة 9 أغسطس 2016 على موقع واي باك مشين.
- frontend tools - تصفح: نسخة محفوظة 29 يوليو 2017 على موقع واي باك مشين.
- What is front-end development - تصفح: نسخة محفوظة 03 ديسمبر 2017 على موقع واي باك مشين.