تطوير واجهة الويب الأمامية
| جزء من سلسلة عن |
| تطوير البرمجيات |
|---|
تطوير واجهة الويب الأمامية هو تطوير واجهة المستخدم الرسومية لموقع الويب من خلال استخدام HTML و CSS و JavaScript حتى يتمكن المستخدمون من عرض هذا الموقع والتفاعل معه. [1] [2] [3] [4]
الأدوات المستخدمة في تطوير الواجهة الأمامية
تتوفر العديد من الأدوات والمنصات، مثل WordPress و Joomla و Drupal ، والتي يمكن استخدامها لتطوير الواجهة الأمامية لموقع الويب. [5]
لغة ترميز النص التشعبي
لغة ترميز النص التشعبي (HTML) هي المعيار الحديث لعرض وهيكلة محتوى الويب عبر الإنترنت . [6] تحدد HTML العناصر التي سيتم عرضها على موقع الويب، وكيفية ترتيبها. تم تصميم جميع متصفحات الويب الرئيسية لتفسير HTML، ومعظم مواقع الويب الحديثة تقدم HTML للمستخدم. [7] النص التشعبي هو نص معروض على جهاز كمبيوتر مع مراجع لنص آخر، تسمى هذه المراجع (أو الروابط) " ارتباطات تشعبية ". عندما يتفاعل مستخدم الإنترنت مع عنصر مرتبط تشعبيًا، يقدم موقع الويب للمستخدم البيانات المرتبطة. يمكن أن تكون هذه البيانات صفحة ويب HTML أخرى أو JavaScript أو أي شيء آخر. أحدث إصدار رئيسي من HTML هو HTML5 ، نُشر في الأصل في 28 أكتوبر 2014 كتوصية من W3C . [8] [9]
أوراق الأنماط المتتالية
تتحكم أوراق الأنماط المتتالية (CSS) في عرض وأسلوب موقع الويب. تستخدم CSS نظامًا متتاليًا لحل تعارضات الأسلوب من خلال تطبيق قواعد الأسلوب بناءً على الخصوصية والوراثة والأهمية. تسمح استعلامات الوسائط بإجراء تعديلات على تخطيط الموقع ومظهره اعتمادًا على عوامل مثل حجم الشاشة ودقتها. يمكن تطبيق CSS بثلاث طرق: أوراق الأنماط الخارجية المرتبطة في ملف HTML، أو كتل <style> الداخلية ، أو المضمنة داخل العناصر الفردية. [10]
جافا سكريبت
JavaScript هي لغة برمجة أمرية تعتمد على الأحداث (على عكس نموذج لغة HTML التصريحي ) تُستخدم لتحويل صفحة HTML ثابتة إلى واجهة ديناميكية. يمكن لكود JavaScript استخدام نموذج كائن المستند (DOM)، الذي توفره معايير HTML، للتلاعب بصفحة الويب استجابةً للأحداث، مثل إدخال المستخدم.
باستخدام تقنية تسمى AJAX ، يمكن لكود JavaScript أيضًا استرداد المحتوى من الويب بشكل نشط (بشكل مستقل عن استرداد صفحة HTML الأصلية)، كما يمكنه أيضًا التفاعل مع الأحداث التي تحدث على جانب الخادم، مما يضيف طبيعة ديناميكية حقيقية لتجربة صفحة الويب.
ويب أسيمبلي
WebAssembly ، المدعوم من جميع المتصفحات الرئيسية (أي من البائعين الرئيسيين Google وApple وMozilla وMicrosoft)، هو البديل الوحيد لـ JavaScript لتشغيل التعليمات البرمجية في متصفحات الويب (بدون مساعدة المكونات الإضافية، مثل Flash أو Java أو Silverlight ؛ حيث تم إيقاف جميعها، حيث أسقطت المتصفحات دعم المكونات الإضافية). قبل اعتماده، كان هناك asm.js (مجموعة فرعية من JavaScript؛ وبالتالي تعمل بدقة في جميع المتصفحات)، والذي يستخدم أيضًا كهدف للمترجم مع دعم فعال في متصفحات مثل Internet Explorer 11 ؛ وبالنسبة لهذه المتصفحات التي لا تدعم WebAssembly بشكل مباشر، يمكن تجميعها إلى asm.js والمتصفحات التي تدعمها بهذه الطريقة. بشكل عام، لا يبرمج المبرمجون في WebAssembly (أو asm.js) بشكل مباشر، ولكنهم يستخدمون لغات مثل Rust أو C أو C++ أو من الناحية النظرية أي لغة، يتم تجميعها إليها.
أهداف التنمية
يضع مطور الواجهة الأمامية هذه النقاط في الاعتبار، ويستخدم الأدوات والتقنيات المتاحة للوصول إلى هذه الغاية. [5]
إمكانية الوصول
مع استمرار تطوير الأجهزة المحمولة، مثل الهواتف الذكية والأجهزة اللوحية، يحتاج المصممون إلى التأكد من ظهور موقعهم بشكل صحيح في المتصفحات على جميع الأجهزة. ويمكن القيام بذلك عن طريق إنشاء تصميم ويب سريع الاستجابة باستخدام أوراق الأنماط في CSS.
أداء
تتعلق أهداف الأداء بشكل أساسي بوقت العرض، والتلاعب بـ HTML وCSS وJavaScript لضمان فتح الموقع بسرعة.
التطور السريع
تمكن هذه التقنية من التطوير السريع وتوفر الوقت.
مراجع
- ^ MDN (2020-05-02). "مطور واجهة المستخدم الأمامية". مطور Mozilla . تم الاسترجاع في 2022-07-04 .
- ^ بيانات Refsnes (1999-07-04). "خرائط طريق تطوير الويب". w3schools . تم الاسترجاع في 2022-07-04 .
- ^ بيانات Refsnes (1999-07-04). "كيف تصبح مطور واجهة أمامية". w3schools . تم الاسترجاع في 2022-07-04 .
- ^ بيانات Refsnes (1999-07-04). "تطوير الواجهة الأمامية". w3schools . تم الاسترجاع في 2022-07-04 .
- ^ بواسطة Codesido, Ivan (28 سبتمبر 2009). "ما هو تطوير الواجهة الأمامية؟". Theguardian.com . تم الاسترجاع في 17 يناير 2019 .
- ^ "HTML Standard". html.spec.whatwg.org . تم الاسترجاع في 2024-09-30 .
- ^ "الويب ومعايير الويب - تعلم تطوير الويب | MDN". developer.mozilla.org . 2024-08-02 . تم الاسترجاع 2024-09-30 .
- ^ "HTML5". w3 . 28 أكتوبر 2014. تم الاسترجاع في 30 سبتمبر 2024 .
- ^ "معايير الويب". W3C . تم الاسترجاع في 2024-09-30 .
- ^ عابد، سوداد (2019). "إدراج CSS" (PDF) .
