خلال مؤتمر Chrome Dev Summit لعام 2014، شملت مؤتمر Chrome Dev Summit مجموعة كاملة من المواضيع والعلامات التجارية التي تغطّي واجهات برمجة التطبيقات الجديدة، ولكنها ليست كل ما يخصها الجديدة والرائعة.
إذا كنت مطوّر ويب جديدًا أو حتى مطوّرًا خبيرًا على وشك الشروع في استكشاف واجهات برمجة التطبيقات الجديدة، فمن المحتمل اتباع الخطوات الثلاث التالية: التعلّم والإنشاء والتكرار.
يتناول مات غاونت الجهود المستمرة لمعالجة هذه المشاكل من فريق منصة مطوّري برامج Chrome.
التعلُّم
أساسيات الويب هي مجموعة من المستندات التي تستنِد إلى حالات الاستخدام وتغطي مجموعة من المواضيع. يكمن الهدف الأساسي في توجيه المطوّرين إلى تنفيذ أفضل الممارسات بأسرع ما يمكن إذا كانوا لا يملكون المعرفة الكافية.
أحد الأهداف الرئيسية لمبادئ "أساسيات الويب" هو ضمان الحدّ من "شلل الاختيار" قدر الإمكان في حال بدأت مبتدئًا في مجال الحديث. تتناول أدي عثمان هذا الفيديو بشكل مثالي في علبة المعجنات.
إذا اكتشفت أي مشاكل في الموقع الإلكتروني أو في محتواه، أو إذا أردت أن تتناول "أساسيات الويب" موضوعًا معيّنًا، يُرجى إعلامنا بذلك من خلال إرسال ملاحظاتك على 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 "لا" مزيدًا من المعلومات حول ما يفعله المتصفّح تحديدًا أثناء عملية الرسم هذه.
تتبُّع حالة البطلان
تعطي "أدوات مطوري البرامج" الآن سببًا لحدوث عرض محتوى أو تخطيط معيّن كلما أمكن ذلك، وهذا مفيد لأي شخص يتعرَّف على المخطط الزمني وسلوكيات المتصفّح ويسمح لك بتحسين الرمز البرمجي لمنع حدوث مشاكل في الأداء.
عرض الرسم البياني المشعّ
هذه طريقة مختلفة جدًا لعرض المعلومات المتاحة في الجدول الزمني. وهذا يجعل من السهل بكثير معرفة كيفية تداخل المهام وسلوك المتصفح الذي حدث نتيجة لمهام أخرى.
عارض الإطارات
بينما في طريقة عرض "مخطط الألوان" (Floome Chart)، يمكنك تحديد إطار معيّن وفيه، ستتمكن من معرفة العناصر التي تمت ترقيتها إلى طبقة مركبة، ومعرفة سبب الترويج لها.
التعلّم إنشاء. التكرار
في ما يلي بعض الجهود التي يبذلها فريق Chrome لمساعدة المطوّرين في إتمام عمليات تطوير الويب بسرعة، لذا احرص على الاطّلاع على أساسيات الويب ومجموعة أدوات المبتدئين على الويب والميزات الجديدة المتوفّرة في أدوات مطوري البرامج في Chrome.