أساسيات تطوير الويب على الأجهزة الجوّالة

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

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

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

التعلُّم

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

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

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

زيادة التشويق

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

• عملية إنشاء قوية
• 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 هو "دليل النمط".

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

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

التكرار

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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