ظƒظ„ظ…ط© ط§ظ„ظپط±ظٹظ‚

ظپظٹ ط¹طµط±ظ†ط§ ظٹظˆط¬ط¯ ظ…ط¦ط§طھ ط§ظ„ط¢ظ„ط§ظپ ظ…ظ† ط§ظ„ظ…ط¯ظˆظ†ظٹظ† ظˆط§ظ„ظ…ط¯ظˆظ†ط§طھ ، ط§ظ„ط¨ط¹ط¶ ظٹط¹ظ…ظ„ ط¨ط´ط؛ظپ ظˆط­ط¨ ظˆط§ظ„ط¢ط®ط± ظٹط¹ظ…ظ„ ط¨ط´ظƒظ„ ط¥ظ†طھط§ط¬ظٹ ظ„ظ„ظƒط³ط¨ ظپظ‚ط· ! ط£ظ…ط§ ظ†ط­ظ† .. ظ†ط­ط¨ ظˆظ†ط¹ط´ظ‚ ظˆظ†ط¯ظˆظˆظˆط¨ ظپظٹ ط¯ط¨ط§ط¯ظٹط¨ ط§ظ„طھط¯ظˆظٹظ† ظˆظ†ط¤ظ…ظ† ط£ظ†ظ†ط§ ط³ظ†ظ‚ظˆظ… ط¨ط¥ط¶ط§ظپط© ظƒط¨ظٹط±ط© ظ„ظ„ظ…ط­طھظˆظ‰ ط§ظ„ط¹ط±ط¨ظٹ ظˆظ„ظˆ ط¨ط´ظٹط¦ ط¨ط³ظٹط· ، ظ†طھط¹ظ„ظ… ط¨ط´ظƒظ„ ظ…ط³طھظ…ط± ظ†ط´ط§ط±ظƒظƒظ… ط¨ظƒظ„ ط¬ط¯ظٹط¯ ، ظ†ط­ط§ظˆظ„ ط§ظ„ظ…ط³ط§ط¹ط¯ط© ظ†ط­ط¨ ط£طµط¯ظ‚ط§ط،ظ†ط§ ، ظ†ظ‡طھظ… ط¨ط¥ط³طھظپط³ط§ط±ط§طھظ‡ظ… ظƒظ…ط§ ظ„ظˆ ظƒط§ظ†طھ ظ…ظ„ظƒظ†ط§، ظپط±ظٹظ‚ظ†ط§ ظپط±ظٹظ‚ ظˆط§ط­ط¯ ط±ط؛ظ… ط£ظ†ظ‡ ظ…طھظƒظˆظ† ظ…ظ† ط´ط®طµ ظˆط§ط­ط¯ :) ظ„ظƒظ†ظ‡ ظٹط¹ظ…ظ„ ط¨ط¬ظ†ظˆظ†

✖
»[برمجة] تعرف على التطوير المتقدم - Progressive Enhancement

[برمجة] تعرف على التطوير المتقدم - Progressive Enhancement


[برمجة] تعرف على التطوير المتقدم التفاعل - Progressive Enhancement

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

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


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

[برمجة] تعرف على التطوير المتقدم التفاعل - Progressive Enhancement

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


اليكم بشرح بسيط طبقات التطوير المتقدم لنتعمق اكثر في التطوير المتقدم فهو يتكون من 3 طبقات : 

 

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

 تعتبر لغة html القاعدة الاساسية لاي عمل ويب , عليك بكتابة جميع ترميزات HTML بشكل جيد وصحيح وعليك الابتعاد عن الاخطاء مع مراعاة قابلية الوصول (Accessibility) . حيث يمكن ان يحصل التطوير المتقدم عبر هذه الطبقةمثال على ذلك ، بنستخدم عناصر الإدخال التي تعتبر اساسية من نوع Text ضمن المستعرضات القديمة، والتحسين باستخدام العناصر التي تعتبر جديدة  مثل Date و Range ضمن المستعرضات التي تدعمها.


[برمجة] تعرف على التطوير المتقدم - Progressive Enhancement

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

 تقوم CSS بدور كبير في عملية التنسيق عبر تنسيق الواجهة وتنظيم الصفحة وعليك بدمجها مع html فلها دور كبير في التطوير المتقدم ثم نقوم  بالتحسين فنعتمد على مزايا المستعرضات الجديدة وتجاهل المستعرضات القديمة لتلك المزايا
[برمجة] تعرف على التطوير المتقدم - Progressive Enhancement

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

بعد ان نظمن عمل الواجهة بشكل جيد وبعد اضافة الترميز HTML وبعد ان نظيف التنسيق (CSS) نقوم باضافة التفاعل (JavaScript)  لزيداة تفاعل عملك في عالم الويب فال جافا سكريبت اصبحت مهمة لزيادة تفاعل عملك
[برمجة] تعرف على التطوير المتقدم - Progressive Enhancement

 مراجع مفيدة

للتعرف اكثر على التطوير المتقدم (Semantic Markup)  اليكم مجموعة من المراجع : 


ط¹ظ†ظˆط§ظ† ط§ظ„طھط¯ظˆظٹظ†ط©: [برمجة] تعرف على التطوير المتقدم - Progressive Enhancement
طھظ‚ظٹظٹظ… : 10 ظ…ظ† 10 ظ…ط±طھظƒط² ط¹ظ„ظ‰ 24 طھظ‚ظٹظٹظ….
ط§ظ„ظƒط§طھط¨ : ط£ط­ظ…ط¯ ط£ط¨ظˆط¹ط¨ظٹظ„ط© ظ…ط¯ظٹط± ظ…ظˆظ‚ط¹ ط§ظ„ظ…ط·ظˆط± .ظ†طھ
ط¹ط¯ط¯ ط§ظ„ظ…ط´ط§ظ‡ط¯ط§طھ :

طµظ†ط¯ظˆظ‚ ط§ظ„طھط¯ظˆظٹظ†ط©

ط±ط§ط¨ط· ظ…ط¨ط§ط´ط± :
ظƒظˆط¯ ظ„ظ„ظ…ظ†طھط¯ظٹط§طھ :
HTML ظƒظˆط¯ :

* ط¨ط¥ظ…ظƒط§ظ†ظƒ ط¥ط¯ط±ط§ط¬ ط§ظ„ط£ظƒظˆط§ط¯ ط§ظ„ط؛ظٹط± ظ‚ط§ط¨ظ„ط© ظ„ظ†ط´ط± ط¨طھط­ظˆظٹظ„ظ‡ ط¹ط¨ط± ظ…ط­ظˆظ„ ط§ظ„ط£ظƒظˆط§ط¯

طھط­ظˆظٹظ„ ط§ظ„ط£ظƒظˆط§ط¯ط¥ط؛ظ„ط§ظ‚ ط§ظ„طھط¹ط¨ظٹط±ط§طھط¥ط®ظپط§ط،

ط´ظƒط±ط§ ظ„طھط¹ظ„ظٹظ‚ظƒ
ظ‚ط§ظ„ط¨ ط¨ط¯ط§ظٹط© .. ظ†ظ‚ط·ط© .

ط§ظ„ظ…ط·ظˆط± .ظ†طھ © 2014, ط¬ظ…ظٹط¹ ط§ظ„ط­ظ‚ظˆظ‚ ظ…ط­ظپظˆط¸ط©