![[برمجة] تعرف على التطوير المتقدم التفاعل - Progressive Enhancement](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbXAhWqQpyREuq3UasDDQqey2mD15OCqhKamdXdPlrnmGQBn25C7Ruj9Z_Z4rrXXSXqSIZpAgOmrGUkUn9bnXaZOhRuOTwBOLCXiAmVfCmELIaGKCHOhTgqPn4zExLWRdhWunPiw64GPU/s1600/dsaaaaaaaaaaaaaaaaaaaaaaaaaa.png "[برمجة] تعرف على التطوير المتقدم التفاعل - Progressive Enhancement")
التطور الذي يحصل في هذه الفترة في عالم البرمجة وعالم التصميم ليس مخفياً على احد فالجميع يمكنة ان يشاهد هذه التطور بنفسة , الافكار والتقنيات الجديدة نظهر من اماكن مختلفة في العالم , ظهر ما يسمى التطوير المتقدم في مراحل ليست بالمتأخرة بل متقدمة من ثورة الويب الحالية ويعزى الية الفضل في كثير من التحسينات في مجال تجربة الاستخدام UX .
ما هو التطوير المتقدم؟
التطوير المتقدم او ما يعرف باللغة الانجليزية Progressive Enhancement هو استراتيجية ظهرت في التصميم كالواجهات بشكل يظمن عملها بشكل جيد وبفاعلية اكثر على اكبر طيف من الاجهزة بمراعاة قابلية الوصول (Accessibility) والترميز الدلالي او مايعرف (Semantic Markup) وعملية فصل ملفات التنسيف (CSS) والاضافة البرمجية (JavaScript) عن الترميز الاساسي (HTML) , بعد ذلك نقوم بادخال كل مايحسن العمل
![[برمجة] تعرف على التطوير المتقدم التفاعل - Progressive Enhancement](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvLqplhHY9SHYJoCOHmFU-RgQ3ZjfQCROiVUrLQucUeHQmyCQaRUE-3n7_Xk6WUDvXzyznd935RFUEGOEBM4XMeCAtOFfM7xV0fXVPddpANFWhe6_dZ5s0IL3y_D1Q36aIgeoXUey7CGg/s1600/dsaaaaaaaaaaaaaaaaaaaaaaaaaa.png "[برمجة] تعرف على التطوير المتقدم التفاعل - Progressive Enhancement")
طبقات التطوير المتقدم
اليكم بشرح بسيط طبقات التطوير المتقدم لنتعمق اكثر في التطوير المتقدم فهو يتكون من 3 طبقات :
الطبقة الأولى: الترميز (HTML)
تعتبر لغة html القاعدة الاساسية لاي عمل ويب , عليك بكتابة جميع ترميزات HTML بشكل جيد وصحيح وعليك الابتعاد عن الاخطاء مع مراعاة قابلية الوصول (Accessibility) . حيث يمكن ان يحصل التطوير المتقدم عبر هذه الطبقةمثال على ذلك ، بنستخدم عناصر الإدخال التي تعتبر اساسية من نوع Text ضمن المستعرضات القديمة، والتحسين باستخدام العناصر التي تعتبر جديدة مثل Date و Range ضمن المستعرضات التي تدعمها.
![[برمجة] تعرف على التطوير المتقدم - Progressive Enhancement](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwZA3lffdejqdM421_cTeNa7JP6jFPIGtIJiFy3FK4dLgNZhpjViR69Ine5wmMgkCdRaX0GXVsQWd0CofbsRgVfmNsAnYf5FibNdX1rYmtqjwaBmw2Y-A5j_2PuwqZViC6tIIaEozE6eg/s1600/html1-2bk3qb4.jpg "[برمجة] تعرف على التطوير المتقدم - Progressive Enhancement")
الطبقة الثانية: التنسيق (CSS)
تقوم CSS بدور كبير في عملية التنسيق عبر تنسيق الواجهة وتنظيم الصفحة وعليك بدمجها مع html فلها دور كبير في التطوير المتقدم ثم نقوم بالتحسين فنعتمد على مزايا المستعرضات الجديدة وتجاهل المستعرضات القديمة لتلك المزايا
![[برمجة] تعرف على التطوير المتقدم - Progressive Enhancement](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwxEGJ4pc4xSNgGU_o5zVdUyH7z37cq4PQaUoHDriazfjaWlyeW_wwkKtly4hJ1OFgCW3rI6RC1VtGzGbxWeY5mgadnO2cqr6F3Ig_XjCEX11LUHEoAJ7LPysVj3QCpJV3khtSI9E7edw/s1600/css2.png "[برمجة] تعرف على التطوير المتقدم - Progressive Enhancement")
الطبقة الثالثة: التفاعل (JavaScript)
بعد ان نظمن عمل الواجهة بشكل جيد وبعد اضافة الترميز HTML وبعد ان نظيف التنسيق (CSS) نقوم باضافة التفاعل (JavaScript) لزيداة تفاعل عملك في عالم الويب فال جافا سكريبت اصبحت مهمة لزيادة تفاعل عملك
![[برمجة] تعرف على التطوير المتقدم - Progressive Enhancement](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVoF11XzYyw4OAmHpXiOtK50PHWK19ZOxiX9hIWL8zWE0QS9T93hzTO8EEC_Zrmp4JcG9dYf8GxzXophGuEivJdaJKAL7fZdo2Idjsf3FAURCJaxBKYH-vMAAhr4UojZjl3JD8XbJMskI/s1600/Javascript.png "[برمجة] تعرف على التطوير المتقدم - Progressive Enhancement")
مراجع مفيدة
للتعرف اكثر على التطوير المتقدم (Semantic Markup) اليكم مجموعة من المراجع :
- صفحة التطوير المتقدم على موقع ويكيبيديا عربي / إنكليزي.
- Progressive Enhancement 101: Overview and Best Practices
