أساسيات تطوير ويب الجوال

في مؤتمر Chrome Dev Summit لعام 2014، كان هناك الكثير من المواضيع والعلامات التجارية التي تتناول واجهات برمجة التطبيقات الجديدة، ولكن الأمر لم يكُن مرتبطًا بالمواضيع الجديدة والرائعة.

إذا كنت مطوّر ويب جديدًا أو مطوّرًا متمرّسًا وتوشك على بدء استكشاف واجهات برمجة تطبيقات جديدة، من المحتمل أن تتّبع الخطوات الثلاث التالية: التعلّم والإنشاء والتكرار.

يغطّي مات غاونت الجهود المتواصلة لمعالجة هذه المشاكل من فريق "منصة مطوّري Chrome".

تعلَّم.

"أساسيات الويب" على HTML5Rocks

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

إنّ أحد الأهداف الرئيسية لـ "أساسيات الويب" هو التأكّد من أنّك إذا كنت مبتدئًا في موضوع ما، ستحدّ الإرشادات من "شلل الخيارات" قدر الإمكان. تغطي قناة Addy Osmani هذا الجزء تمامًا في علبة المعجنات.

وإذا رصدت أي مشاكل في الموقع الإلكتروني أو في محتواه أو أردت أن تتناول "أساسيات الويب" موضوعًا معيّنًا، يُرجى إعلامنا بذلك من خلال إرسال ملاحظات على GitHub.

إنشاء التطبيقات

مجموعة أدوات الويب للمبتدئين على أجهزة نطاق

لمساعدتك في بدء مشروع جديد على الويب، أنشأنا مجموعة Web Starter. إنه يحتوي على كل ما تحتاجه:

  • عملية إنشاء قوية
  • HTML النموذجي
  • دليل الأسلوب

عملية الإنشاء

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

في Web Starter Kit، ننفّذ العمليات التالية:

الرسم التخطيطي لعملية إنشاء مجموعات أدوات المبتدئين على الويب

نعمل على تصغير ملفات CSS وJavaScript ودمجها معًا لكي يتمكّن المتصفّح من جلب الملف بسرعة، ويتم أيضًا تشغيل JavaScript من خلال JSHint للتحقّق من أفضل ممارسات JavaScript وأخطاء الترميز الشائعة. يتم تصغير الصور باستخدام imagemin ويمكنك استخدام هذه الطريقة لتقليل حجم الملفات بشكل كبير. لدينا أيضًا عملية لإنشاء CSS لأدلة الأنماط.

نص أساسي لـ HTML متعدد الأجهزة

المجموعة الأولى من ترميز HTML التي تكتبها لصفحة جديدة هي معيار غير صحيح، ومن المحتمل أن يكون لديك طريقة ما للحصول بسرعة على ملف HTML جاهز يعمل بشكل جيد عبر العديد من الأجهزة وأحجام الشاشات.

في Web Starter Kit، أردنا أن نوفّر دعمًا لأي ميزات طمست الخطوط الفاصلة بين النظام الأساسي وموقعك الإلكتروني، لذلك أتحنا إمكانية الإضافة إلى الشاشة الرئيسية وشاشات البداية لنظام التشغيل Android وWindows Phone وiOS وOpera Coast.

مثال على مجموعة Web Starter Kit إلى الشاشة الرئيسية

دليل الأسلوب

دليل تنسيق Web Starter Kit على جهاز Chromebook Pixel

آخر جزء من Web Starter Kit هو "دليل النمط".

وهذا يعطي أي مشروع جديد مجموعة رائعة من الأنماط والمكونات الافتراضية التي تشجع التطوير القائم على النمط. يمكنك تغيير الأنماط الحالية إلى العناصر وإضافة الأنماط الخاصة بك.

في الإصدار التالي من WSK، والذي من المقرر أن يتم إطلاقه في مطلع العام المقبل، نعمل بجد لتبسيط كيفية ملاءمة دليل الأنماط معًا والتبديل إلى شكل ومظهر Material Design. عرض "مات" نموذجًا أوّليًا من هذه الفعالية في مؤتمر Chrome Dev Summit، ويمكنك الاطّلاع على مثال أدناه.

نموذج دليل نمط التصميم المتعدد الأبعاد في "مجموعة أدوات المبتدئين" على الويب

التكرار.

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

هناك بعض الميزات الجديدة والضخمة التي تصل إلى أدوات مطوري البرامج، ويلقي "مات" نظرة على الميزات الجديدة التالية.

مجموعة محاكاة الأجهزة الجوّالة

"وضع الجهاز" هو قسم جديد في "أدوات مطوري البرامج" يسمح لك بالاطّلاع سريعًا على كيفية عمل موقعك الإلكتروني على الأجهزة الجوّالة المختلفة، أثناء عرض الاستعلامات عن الوسائط في خدمة مقارنة الأسعار (CSS).

لقطة شاشة لميزة "وضع الجهاز" في "أدوات مطوري البرامج في Chrome"

إحدى الميزات الرائعة لوضع الجهاز هي القدرة على التحكُّم في سرعات الشبكة، مما يتيح لك محاكاة تجربة المستخدم على اتصال GPRS أو EDGE أو 3G أو DSL أو Wi-Fi.

لقطة شاشة لميزة Network Throttling في Chrome DevTools

محلّل عرض محتوى الصفحة

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

لا يمنحك برنامج Paint Profiler المزيد من المعلومات حول ما يفعله المتصفح بالضبط أثناء عملية الرسم.

لقطة شاشة لأداة Paint Profiler في "أدوات مطوري البرامج في Chrome"

تتبُّع الإبطال

تقدّم أدوات مطوّري البرامج الآن سببًا لظهور الرسم أو التنسيق كلما أمكن ذلك. ويساعد ذلك أي شخص يطّلع على المخطط الزمني وسلوك المتصفّح، كما يتيح لك تحسين الرمز البرمجي لمنع حدوث مشاكل في الأداء.

لقطة شاشة تُظهر عملية تتبّع غير صالحة في "أدوات مطوري البرامج في Chrome"

عرض الرسم البياني الثابت

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

لقطة شاشة تعرض الرسم البياني الثابت في Chrome DevTools

عارض الإطارات

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

لقطة شاشة لأداة Frame Viewer في "أدوات مطوري البرامج في Chrome"

تعلَّم. إنشاء التطبيقات التكرار.

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