التطوير المتقدم (Progressive Enhancement)

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

التطوير المتقدم

ما هو التطوير المتقدم؟

التطوير المتقدم (Progressive Enhancement) هو استراتيجية في تصميم واجهات الاستخدام بشكل يضمن عملها بفاعلية على أكبر طيف ممكن من الأجهزة والمستعرضات بمراعاة قابلية الوصول (Accessibility) والترميز الدلالي (Semantic Markup) وفصل ملفات التنسيق (CSS) والإضافات البرمجية (JavaScript) عن الترميز الأساسي (HTML)، ليتم بعد ذلك إدخال تحسينات بحسب قدرة وحداثة الموارد المتوفرة.

نظرة أعمق

لتيسير فهم هذه التقنية يمكن النظر إلى أي واجهة على أنها تتكون من ثلاث طبقات:

الطبقة الأولى: الترميز (HTML)

القاعدة الأساسية لأي واجهة استخدام، يجب كتابة ترميز HTML بشكل صحيح ومراعٍ للقواعد، مع مراعاة قابلية الوصول (Accessibility) لضمان عمل الواجهة دون تنسيقات (CSS) ودون إضافات (JavaScript).

يمكن أن يحصل التطوير المتقدم ضمن هذه الطبقة، على سبيل المثال، باستخدام عناصر الإدخال الأساسية من نوع Text ضمن المستعرضات القديمة، والتحسين باستخدام العناصر الجديدة مثل Date و Range ضمن المستعرضات التي تدعمها.

الطبقة الثانية: التنسيق (CSS)

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

من الأمثلة على ذلك استخدام الألوان بالشكل القديم (بنظام العد الست عشري) لدعم كافة المستعرضات، ثم استخدام لون بترميز RGBA الجديد الذي يدعم الشفافية.

background: #FFFFFF; /* default value */
background: rgba(255,255,255,.5); /* ignored by old browsers */

وكمثال آخر، استخدام خاصية border-raduis التي تعطي استدارة للزوايا يتم تجاهلها على المستعرضات القديمة، لكنها تضفي لمسة لطيفة في المستعرضات الجديدة.

الطبقة الثالثة: التفاعل (JavaScript)

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

يجب هنا أن تراعي فصل هذه الطبقة عن الطبقات الأخرى قدر الإمكان، وعدم كتابة الشيفرة البرمجية للتعامل مع مستعرضات محددة (Browser Specific) بل توجيهها للاستفادة من وجود الميزات بغض النظر عن المستعرض (Feature Detection).

من أمثلة التطوير المتقدم في هذه الطبقة (بعد ضمان عمل التطبيق على المستعرضات القديمة) استخدام مزايا المستعرضات الجديدة مثل LocalStorage والرسم باستخدام عناصر Canvas.

مقارنة بين التطوير المتقدم والتراجع الحميد

تعتبر استراتيجة التراجع الحميد (Graceful Degradation) سلف التطوير المتقدم، مع كونها صورة مقلوبة عنها.

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

مراجع مفيدة

للتعرف أكثر على مفهوم التطوير المتقدم وتطبيقاته:

لنتابع النقاش البنّاء

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

بعد هذه المقدمة البسيطة، هل هذه أول مرة تسمع فيها بالتطوير المتقدم؟ وهل استخدمتها أو رأيت تطبيقاتها في مشاريع عملية؟ نود سماع آراءكم.

محمود الدعاس

من مواليد دمشق. ابتدأ بعد التخرج كمبرمج ويب عام 2005 مع شركة إيميا، انتقل بعدها إلى شركة تكنوليد للأتمتة المتكاملة ومنها إلى شقيقتها أتمتة للحلول المتقدمة كمصمم غرافيك ومصمم ومطور ويب. أسس مع مجموعة من زملاء الدراسة موقع HOMELESS-PRO.com لنشر قصص مصورة باللغة العربية للشباب، و Guestra كوكالة تصميم وتطوير.

مواضيع الكاتبموقع الكاتب

لمتابعة الكاتب:
TwitterFacebookPinterest

أضف تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *