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

سنعمل في هذا المشروع على:

• التحكم بوقت انتهاء حدث ما باستخدام كتلة كرّر حتى.
• استخدام عدة كتل ربط لإظهار خرج المتغيرات على الشاشة.
• استخدام عدة معاملات منطقية أو، وَ، ليسمع كتل الربط.

لنحصل على النتيجة التالية:

انقر على العلم الأخضر وساعد رائد الفضاء في إنقاذ المركبة الفضائية بإتباع التعليمات الظاهرة على المنصة!

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

اقتباس

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

إعداد غرفة اللغز

سنختار في هذه الخطوة خلفيةً مناسبةً لتكون غرفة اللغز، وسنضيف الشخصية والأدوات اللازمة للتحكم بها.

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

عند فتح النسخة الأولية، ستظهر لك حجرة قيادة المركبة الفضائية وبعض الكائنات. لاحظ أن الكائنات قد ثُبّتَ موضعها باستخدام كتلة اذهب إلى الموقع.

اختر الشخصية التي تراها مناسبةً لقيادة المركبة، هل تريد إضافة رائد فضاء بشري، أم تفضل مخلوقًا فضائيًا؟ أو حتى قطة! الخيار متروك لك!

ثانيًا، أضف شخصيتك الرئيسية من مكتبة الكائنات. اخترنا في مثالنا الكائن "Monet".

يمكنك تغيير حجم الكائن وموضعه باستخدام الكتل البرمجية، أو باستخدام نافذة الكائنات:

ثالثًا، أضف كائن السهم، بكتابة "arrow" في مربع البحث في مكتبة الكائنات. ثم أضف كتلة بث ليرسل الكائن، عند نقره، رسالة تخبر عن الاتجاه الذي يجب أن تتحرك به الشخصية الرئيسية:

انقر على النافذة المنزلقة لكتلة البث ثم انقر على خيار رسالة جديدة، واكتب الاتجاه:

رابعًا، ضاعف السهم بالنقر عليه بالزر الأيمن للفأرة، ثم اعكس اتجاهه من خيار الاتجاه في نافذة الكائنات، وسمّه باسم موافق لاتجاهه:

ثم أضف رسالة بث جديدة باسم اتجاه السهم:

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

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

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

التحدي الأول

سنضيف في هذه الخطوة التحدي الأول الذي يتوجب على اللاعب اجتيازه، وهو ضغط زر الإنذار عدة مرات.

أولًا، أضف الكتل التالية لكائن زر الإنذار الأحمر بحيث يبقى ظاهرًا على المنصة وفي موضع ثابت:

ثانيًا، أنشئ متغيرًا جديدًا، بالنقر على كتل المتغيرات، ثم على خيار إنشاء متغير، وسمّه "مرات ضغط الزر" إذ سنخزن في هذا المتغير عدد مرات الضغط على الزر، لاستخدامها فيما بعد في برنامجنا:

ثالثًا، أضف الكتل التالية لتعيين العدد 0 كقيمة ابتدائية للمتغير :

رابعًا، أضف كتلة كرّر حتى ثم أضف معامل المساواة = من كتل العمليات داخل شرط كتلة التكرار، واسحب متغير عدد مرات ضغط الزر إلى داخله، كما يلي، وحدد عدد مرات الضغط التي تريدها:

خامسًا، أضف الكتل التالية للسماح للاعب بالضغط على الزر فقط عندما يكون كائن رائد الفضاء قريبًا من الزر:

علينا أن نجعل البرنامج ينفذ ما يلي:

• يزيد قيمة متغير مرات الضغط على الزر عندما تضغط الشخصية الرئيسية الزر وهي قريبة منه.
• يصفر قيمة المتغير عندما تضغط الشخصية الزر وهي بعيدة عنه.

وذلك بإضافة الكتل التالية:

اقتباس

معلومة: تحسب المسافة في برنامج سكراتش من منتصف الكائن، فإذا كان الكائن الذي اخترته ذو حجم كبير يجب أن يلامس مركزه مركز الزر.

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

سادسًا، أضف كتلة قُل واسحب داخلها كتلتي اربط واسحب داخلها متغير مرات ضغط الزر، كما يلي:

لا تنسى إضافة مسافة بعد النص في كتلة اربط حتى لا تتداخل النصوص مع بعضها.

سابعًا، أضف كتلة قُل لإعلام اللاعب أن المهمة أنجزت بنجاح بعد الضغط على الزر 5 مرات:

أخيرًا، انقر على العلم الأخضر وأنجز المهمة الأولى لاختبار مشروعك.

التحدي الثاني

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

ننصحك بنسخ الكتل التي استخدمناها في الفقرة السابقة والتعديل عليها لأنها تشبه الكتل التي سنستخدمها في هذه الفقرة.

أولًا، انسخ الكتل التي نفذناها في الفقرة السابقة إلى كائن المقبض، وذلك عن طريق سحب الكتل وإفلاتها فوق الكائن.

ثانيًا، أنشئ متغيرًا جديدًا وسمّه "عدد مرات تدوير المقبض"، ثم انقر على النافذة المنزلقة لكتلة اجعل واختر المتغير الجديد، كما يلي، وغيّره في باقي الكتل أيضًا:

ثم حدد عدد مرات التدوير التي ترغب بها، وغيّر النص في كتلة قُل:

ثالثًا، أنشئ متغيرًا جديدًا وسمّه "مقدار الاستدارة"، إذ يُعّبر هذا المتغير عن الزاوية التي سيستدير بمقدارها المقبض كما لو كان حقيقيًا، ثم أضف الكتل التالية لتصفير قيمته:

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

عندما يدور الكائن بمقدار360 درجة يكون قد دار دورةً كاملةً، إذًا سنضيف الكتل التالية لزيادة قيمة متغيرعدد مرات تدوير المقبض بمقدار 1 عندما تصبح قيمة متغير مقدار الاستدارة 360 درجة، ثم سنصفر قيمته ليبدأ العد من جديد:

خامسًا، انقر على العلم الأخضر واختبر المشروع، حرّك الكائن وانقر على مقبض الباب لإحكام إغلاقه.

لا تنسى أنه يمكنك تعديل بُعد الكائن عن المقبض وزيادته لتوفير الوقت،أو يمكنك تقريب الكائن من المقبض باستخدام الفأرة!

التحدي الثالث

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

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

لتحصل على الشكل التالي:

كما يمكنك استخدام الشكل X للمؤشر، بكتابة Button في مربع البحث في مكتبة الكائنات.

ثانيًا، أضف الكتل التالية كي يتبع المؤشر الذي أنشأناه حركة مؤشر الفأرة:

انقر على العلم الأخضر واختبر حركة المؤشر. لاحظ أن المؤشر يتبع حركة الفأرة في جميع أرجاء المركبة! لا تقلق، سنصلح ذلك.

ثالثًا، أضف الكتل التالية بحيث يختفي المؤشر إذًا لم يكن ملامسًا لنافذة غرفة القيادة أو حوافها الخضراء:

شغل المشروع واختبر حركة المؤشر، جرب ما الذي سيحدث إذا أزلت شرط ملامسة اللون الأخضر؟

رابعًا، أضف بعض الصخور من مكتبة الكائنات لتكون بمثابة الكويكبات التي على اللاعب تدميرها، للسرعة ابحث عن "Rocks" في مكتبة الكائنات، ثم عدّل حجمها.

سنستعمل الآن كتل لبناتي الخاصة التي استعملناها في مشروع سابق، والتي تساعدنا على تنظيم الكتل البرمجية، وإعادة استخدام نفس الكتل مرارًا دون الحاجة إلى إعادة "كتابتها".

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

سادسًا، علينا أن نجعل الكويكبات تتحرك عشوائيًا فقط ضمن نافذة حجرة القيادة، أن أنها يجب أن تلامس كائن النافذة "port" بدون أن تلامس الحواف الخضراء للنافذة، سنستخدم لذلك المعامل المنطقي و لضمان تحقق الشرطين:

شغّل المشروع، أو انقر على لبنة التعريف، ولاحظ كيف أن الكويكبات تتحرك داخل المركبة! علينا إصلاح ذلك.

سابعًا، أضف تأثير الشبح لإخفاء الكويكبات أثناء تحركها، ثم أضف كتلة إزالة المؤثرات الرسومية، كما يلي:

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

ثامنًا، أضف الكتل التالية للتحقق من موضع رائد الفضاء:

تاسعًا، أضف الكتل التالية إلى كائن الكويكبات لتحديد متى يجب أن تنتهي المهمة:

الآن أضف كتلة إذا واسحب داخل شرطها المعامل المنطقي و للتحقق من أن الرائد يجلس على كرسي القيادة، و أن المؤشر يلامس الكويكبات، فإذا تحقق الشرط يجب زيادة قيمة متغير الكويكبات بمقدار 1 واستدعاء لبنة اذهب إلى الموضع كي يظهر الكويكب في موضع جديد:

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

أخيرًا، شغّل المشروع وصوّب على الكويكبات لتدميرها، وتلذذ بطعم النجاح في إنقاذ المركبة!

ترقية المشروع

إليك بعض الإقتراحات لتطوير مشروعك حين يتسنى لك ذلك:

• إضافة المزيد من الكائنات.
• إضافة تحدٍ يقتضي إكمال جميع التحديات بوقت محدد.
• التعديل على الأجزاء الثابتة في الخلفيات وجعلها كائنات، كما في المثال التالي المشابه لمشروعنا ، إذ أُزيلَت المقابض من خلفية السفينة الفضائية، وأُضفَيت ككائنات منفصلة (الصور مرفقة في ملف تحدي إنقاذ السفينة الفضائية)، ثم أُضيفَ تحدٍ جديد لتحريكها:

ختامًا

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

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

ترجمة -وبتصرف- للمقالPuzzle Room من الموقع الرسمي لراسبيري باي.

اقرأ أيضًا

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

يسأل العديد من الذين قد تعلمو أساسيات لغة PHP و MySQL عن كيفية الاستفادة من هذه الخبرات وما هي المجالات التي يمكنهم توظيف خبراتهم في لغة PHP و MySQL بها.

في الفيديو سنطرح لك عددًا من الأفكار والمشاريع والتي ستشكل اختبارًا حقيقي لك وستساعدك على تطوير خبرتك في لغة PHP وقواعد بيانات MySQL

إذا أردت التعرف أكثر علي لغة PHP وقواعد بيانات MySQL، فننصحك بالانضمام إلى دورة تطوير تطبيقات الويب باستخدام لغة PHP، ولا تنسَ الاستعانة خلال رحلة تعلمك وعملك بتوثيقات موسوعة حسوب المجانية. وإذا أردت متابعة المعلومات البرمجية العلمية مكتوبة فيمكنك الاطلاع على قسم البرمجة في أكاديمية حسوب، كما يمكنك متابعة جديد الفيديوهات التقنية المتاحة على يوتيوب أكاديمية حسوب مجانًا.

يغطي هذا المقال الخطوة الأولى والأهم للانطلاق في أيّ مشروع، وهي تحديد ما نريده من مشروعنا وخصوصًا مواقع الويب، إذ يركِّز الكثيرون في هذا المضمار على الجانب التقني من المشروع، لكن ما يهم فعلًا -وعلى الرغم من أهمية التقنية التي يستخدِمها المرء في حرفته- هي الغاية التي ينشد الوصول إليها، فالكثير من المشاريع التي أخفقت لم يكن سبب إخفاقها هو الناحية التقنية أو المعرفية، وإنما ضبابية أهدافها ورؤيتها، لهذا السبب، عندما تخطر في بالك فكرةً وتريد نقلها لتصبح موقع ويب، لا بد لك من الإجابة على بعض الأسئلة قبل أيّ شيء آخر:

• ما الذي أريد إنجازه بدقة؟
• كيف سيساعدني موقع الويب في الوصول إلى أهدافي؟
• ما الذي يتوجب علي فعله وبأي ترتيب للوصول إلى أهدافي؟

تُدعى هذه الخطوات فكرة المشروع أو التصور الأولي للمشروع project ideation، وهي ضرورية للوصول إلى هدفك سواءً كنت مبتدئًا أم مطوّرًا محترفًا.

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

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

اقتباس

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

ما الذي أريد إنجازه بالتحديد؟

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

افترض أنك موسيقي وقد ترغب بأن:

• يستمع الناس إلى موسيقاك.
• تبيع بعض المنتجات.
• تتعرف على موسيقيين آخرين.
• تناقش الآخرين بموسيقاك.
• تعلم الموسيقى من خلال الفيديوهات.
• تنشر صورًا لقططك.
• تتعرف على أصدقاء جدد.

عندما تنتهي من وضع قائمة الأهداف، فلا بدّ من ترتيبها حسب الأولوية التي تراها من الأكثر إلى الأقل أهمية والتي قد تكون بالصورة التالية:

1. التعرف على أصدقاء جدد.
2. استماع الناس إلى موسيقاك.
3. مناقشة الآخرين بموسيقاك.
4. التعرف على موسيقيين جدد.
5. بيع بعض المنتجات.
6. تعليم الموسيقى من خلال الفيديوهات.
7. نشر صور لقططك.

سيساعدك التمرّن على كتابة أهدافك بهذه الصورة على اتخاذ القرارات (هل عليّ تنفيذ هذه الميزات أو استخدام هذه الخدمات أو اعتماد تصاميم معينة)، وبعد ترتيبنا لقائمة الأهداف، فلننتقل إلى السؤال الثاني.

كيف سيقربني موقع الويب من أهدافي؟

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

طالما أنّ أهم ما في الأمر هو الوصول إلى أهدافنا، فمن الأفضل استغلال إمكانياتنا في تجريب الأدوات الموجودة بدلًا من البدء من الصفر، وكذلك الأمر بالنسبة إلى نشر الصور، إذ توجد فعلًا خدمات كثيرة لهذه الغاية، ولا مبرر أبدًا لإهدار الوقت في بناء موقع ويب لنشر صور القطط، كما ترتبط الأهداف الخمسة الأخرى بالموسيقى، وستجد الكثير من خدمات الويب التي تغطي هذه الأهداف، لكن من المنطقي في هذه الحالة التفكير في بناء موقع ويب خاص بك لهذه الغايات، فقد يساعدك موقع الويب في تجميع كل الأشياء التي تحتاجها في مكان واحد (وهذا أمر مفيد في تحقيق الأهداف 3 و5 و6) ويعزز العلاقات بينك وبين العامة (تكمن فائدته في تحقيق الهدفين 2 و4).

باختصار، وطالما أن الأهداف تحوم حول الموضوع نفسه، فقد يساعدنا تجميع كل شيء في المكان نفسه على تحقيق أهدافنا، كما يساعد متابعينا في التواصل معنا، وبالتالي ستجد الطريق الأفضل لبلوغ أهدافك دون أن تبدد جهودك سدًى عند الإجابة على السؤال "كيف يساعدني موقع الويب في الوصول إلى أهدافي؟".

ما الذي يتوجب علي فعله وبأي ترتيب للوصول إلى أهدافي؟

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

لنعد إلى مثالنا السابق بدلًا من الإسهاب في التفسيرات ولنوضح الأمر:

• ليستمع الناس إلى موسيقاك عليك ما يلي:

1. تسجيل بعض الألحان.
2. تحضير بعض الملفات الصوتية التي يمكن استخدامها على الويب (هل يمكن الاستفادة من خدمة موجودة؟).
3. امنح الآخرين إمكانية الوصول إلى موسيقاك في بعض أقسام موقعك.

• لمناقشة الآخرين بموسيقاك عليك ما يلي:

1. كتابة بعض المقالات لبدء الحوار.
2. حدِّد الطريقة التي ستظهر عليها مقالاتك.
3. انشر هذه المقالات على الويب.

• للتعرف على موسيقيين جدد عليك ما يلي:

1. زوّد متابعيك بقنوات للتواصل معك (بريد إلكتروني، فيس بوك، هاتف، بريد).
2. حدد الطريقة التي سيصل فيها الآخرون إلى قنوات الاتصال التي توفرها عبر موقعك.

• لبيع بعض المنتجات عليك ما يلي:

1. حضِّر منتجاتك وخزّنها.
2. جِد طريقةً مناسبةً لشحنها.
3. جِد طريقةً مناسبةً للدفع.
4. جِد آليةً مناسبةً على موقعك تسهِّل على الناس طلب منتجاتك.

• لتعليم الموسيقى من خلال الفيديوهات عليك ما يلي:

1. سجِّل مقاطع فيديو لدروسك.
2. اجعل فيديوهاتك مناسبةً للاستعراض عبر الويب (مجددًا، هل يمكن الاستفادة من خدمة موجودة؟).
3. امنح الآخرين إمكانية الوصول إلى فيديوهاتك في بعض أقسام موقعك.

تجدر الإشارة هنا إلى نقطتين:

• الأولى: وهي أنّ بعض الأعمال لا تتعلق بالويب مثل تسجيل الموسيقى وكتابة المقالات، ولهذه النشاطات التي تجري دون اتصال بالإنترنت أهمية كبيرة قد تفوق الجانب المرتبط بالويب في مشروعك، فعندما تهتم ببيع منتجات على سبيل المثال، فمن الأجدى والأوفر من ناحية الوقت إيجاد حلول لتأمين المنتجات وطريقة للدفع والشحن قبل الشروع في بناء الموقع الذي سيستخدِمه الآخرون في طلب تلك المنتجات.
• الثانية: تحضير خطوات قابلة للتنفيذ سيقودك غالبًا إلى أسئلة جديدة عليك البحث عن إجابة لها. إذ ستجد عادةً مزيدًا من الأسئلة أكثر مما قد تتوقع مثل هل عليَّ تعلّم كل هذه الأمور بنفسي؟ هل أطلب من شخص آخر ذلك؟ هل استخدم خدمات تؤمنها أطراف أخرى؟

الخلاصة

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

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

ترجمة -وبتصرف- للمقال ?How do I start to design my website.

اقرأ أيضًا

• الفرق بين مصمم الويب ومطور الويب وكيفية معرفة الأنسب بينهما
• أدوات ضرورية لتصميم مواقع الويب
• HTML و CSS للمبتدئين: كيف تصمم أول صفحة ويب لك
• 50 تصميمًا مميزًا لمواقع إلكترونية نموذجية يحتذى بها

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

سنعمل في هذا المشروع على:

• تحريك الكائنات مع مراعاة تغيير حجمها وفقًا لقربها أو بعدها عن الشاشة.
• استخدام كتل لبناتي لتنظيم الكتل البرمجية.
• إنشاء مشاهد واقعية عن طريق تحريك الخلفيات Scrolling.

لنحصل على نتيجة مشابهة لما يلي:

شغّل المشروع وانقر على الأزرار لتحريك الرجل الآلي، ولاحظ كيف تتحرك الخلفية.

اجعل الرجل الآلي يجمع عينات من التربة أو الفاكهة بالنقر عليه عند ملامستها.

اقتباس

معلومة:

• تستخدم الآليّات الجوّالة، أو Rovers باللغة الإنجليزية، لغرض استكشاف المناطق النائية والكواكب، ككوكب المريخ، إذ تُبرمَج لفحص البيئة المحيطة بها وأخذ عينات منها لتحليلها فيما بعد. وتُصمم غالبًا بحيث يمكنها شحن بطارياتها باستخدام الطاقة الشمسية.
• يُحرِك المصممون المشاهد في الألعاب الإلكترونية باستخدام تأثير التحريك المستمر أو التمرير Scrolling لجعل المشهد يبدو أكثر واقعية.

التحكم بالرجل الآلي

سنتعلم في هذه الخطوة كيف ننشئ أزرارًا للتحكم بحركة الرجل الآلي للأعلى وللأسفل.

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

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

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

ثالثًا، سنجعل الرجل الآلي يتحكم ببدء الرحلة، فعند نقر العلم الأخضر سيرسل رسالة بث لجميع الكائنات إيعازًا منه بالبدء، بإضافة الكتل التالية:

وللسهولة، يمكنك تحريك الرجل الآلي باستخدام مفاتيح لوحة التحكم، بإضافة الكتل التالية:

إذا لم ترد استخدام أزرار التحكم فيمكنك اخفائها بالنقر على الزر ثم النقر على كتلة اخف من كتل الهيئة.

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

اقتباس

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

خامسًا، سنراعي منظور البعد في مشروعنا بتصغير حجم الرجل الآلي عندما يتحرك لأعلى، وتكبيره عندما يتحرك لأسفل، ليبدو وكأنه يقترب ويبتعد عن شاشة المستخدم وذلك بإضافة الكتل التالية:

سادسًا، أضف الكتل التالية لإعادة تعيين حجم الآلي الجوّال عند بداية الرحلة:

شغّل المشروع واختبر حركة الجوّال بالنقر على الأزرار أو المفاتيح.

سابعًا، أضف كتلة اذهب إلى الموضع التالية لتثبيت موضع الآلي عند بدء اللعبة:

ثامنًا، أضف كتلة انتقل إلى الطبقة الأولى ليظهر الآلي الكشّاف أمام الكائنات:

أخيرًا، انقر على العلم الأخضر واختبر المشروع.

تحريك الخلفية

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

أولًا، أضف الكتل التالية على الخلفية Hills لتحديد موضعها وتثبيته في الطبقة الخلفية:

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

ثانيًا، أنشئ نسخةً clone عن الخلفية باستخدام كتلة أنشئ نسخةً من نفسي من كتل التحكم، ثم انقل الخلفية الأصلية إلى أقصى يمين الشاشة، باستخدام الكتل التالية:

ثالثًا، لخلق تأثير التمرير أو الحركة المستمرة، يجب أن نحرّك الخلفية باتجاه معاكس لاتجاه حركة الرجل الآلي، أي يجب أن يكون اتجاه الحركة في الكتل معاكسًا للاتجاه في رسالة البث.

فإذا كان محتوى رسالة البث "تحرك نحو اليسار" علينا زيادة إحداثيات الموضع على المحور س، أما إذا كان المحتوى "تحرك نحو اليمين " فعلينا انقاصها. أضف الكتل التالية لتحقيق ذلك:

إليك المخطط التالي للتوضيح:

شغّل المشروع واختبر أزرار الحركة، يجب أن يبدو الرجل الآلي وكأنه يتحرك يمنةً ويسرة؛ وحرّك الخلفية ولاحظ أن الشاشة تبدو بيضاء عند نهاية كل من الخلفيتين (الأصلية والنسخة)، سنعمل على إصلاح ذلك.

رابعًا، أنشئ رسالة بث وسمّها "تحريك" وأضفها على كتل البدء:

خامسًا، أضف الكتل التالية للتحقق من موضع الخلفيتين، فإذا تجاوزتا أقصى اليمين (أو الشمال) يُعاد تعيين موضعهما إلى الجانب المعاكس:

أخيرًا، شغّل المشروع واختبر أزرار الحركة، يجب أن يستمر الرجل الآلي بالحركة ويُكرَر المشهد باستمرار.

إضافة المزيد من الكائنات على المشهد وتحريكها

سنضيف في هذه الخطوة المزيد من الكائنات على المشهد ونحركها بطريقة مماثلة لتحريك الخلفية.

أولًا، أضف كائنًا من اختيارك من مكتبة الكائنات على مشروعك، ثم أضف الكتل التالية لتثبيت موضع الكائن، أضفنا في مثالنا كائن الشجرة:

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

ثانيُا، أضف الكتل التالية لتحريك الشجرة باتجاه معاكس لاتجاه رسالة البث، وذلك بتغيير قيمة الموضع على المحور س بقيمة أكبر من القيمة المستخدمة لتحريك الهضاب:

شغّل المشروع واختبر حركة الشجرة عند النقر على الأزرار، ما الذي يحدث عندما تبتعد عن الشجرة كثيرًا؟

لاحظ أن الشجرة تتوقف عن الحركة عندما تصل إلى حافة المنصة، سنصلح ذلك بنقل الشجرة إلى الجهة الأخرى للشاشة عندما تصبح إحداثياتها على المحور س كبيرةً أو صغيرةً جدًا؛ أي عندما تكون في أقصى اليمين أو أقصى اليسار.

ثالثًا، استخدم حلقة تكرار مستمرةً وكتلة إذا للتحقق من إحداثيات الشجرة على المحور س، ونقلها للاتجاه المعاكس إذا كانت قيمتها أكبر من 290 أي أن الشجرة في أقصى اليمين، أو أصغر من 290- أي أن الشجرة في أقصى اليسار:

شغّل المشروع وحرّك الرجل الآلي، لاحظ أن الشجرة تنتقل إلى الجهة المعاكسة عند وصولها إلى حافة المنصة.

رابعًا، أضف الكتل التالية لجعل الرجل الآلي يستدير بالاتجاه الذي يتحرك به:

شغّل المشروع واختبر حركة الرجل الآلي، هل يستدير باتجاه حركته؟

جمع العينات

سنعمل في هذه الخطوة على جعل الآلي الكشّاف يجمع عينات من البيئة المحيطة به، وذلك بتغيير مظهره ومظهر الكائنات عند جمعه العينات.

أولًا، اطّلع على المظاهر المتاحة للرجل الآلي بالنقر على علامة تبويب المظاهر. إليك العمليات التي يمكن له تنفيذها:

• مَدّ ذراعه
• حفر الأرض
• امتصاص عينات من الهواء
• إخراج ألواح الطاقة الشمسية لإعادة شحن بطاريته
• إلتقاط الصور
• جمع العينات

سنستعين بكتل لبناتي لتنفيذ المهام السابقة، حيث أنها تُتيح تنظيم الكتل البرمجية، وخاصةً عندما يكون لديك العديد من الكتل المستخدمة، أو عدة تغييرات للمظاهر، كما في مشروعنا، إذ سنستخدم لبنةً جديدةً لكل مهمة.

ثانيًا، انقر على كتل لبناتي من قائمة الكتل، ثم انقر على خيار **إنشاء لبنة وسمّها " عينة فاكهة". ستظهر لك الكتلة الجديدة التالية:

إذا لم تجد اللبنة الجديدة فاسحب مؤشر الشاشة لليمين أو اليسار.

ثالثًا، أضف كتلة تغيير المظهر، وكتلة انتظر، وضاعفهما عدة مرات، وغيّر المظهر من النافذة المنسدلة للكتلة لتحصل على الكتل التالية:

رابعًا، أضف الصوت "collect'' من مكتبة الأصوات ثم أضف الكتلة التالية لتشغيله عندما يجمع الآلي العينة:

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

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

شغّل المشروع وانقر على الآلي ولاحظ كيف يتغير مظهره.

الآن، بعد أن غيّرنا مظهر الآلي ليبدو وكأنه يجمع العينات، علينا جعله يجمع العينات فعلًا! سنجعل الآلي يقطف فاكهةً ما من الشجرة في مثالنا.

سادسًا، انتقل إلى علامة تبويب المظاهر ثم انقر باليمين على الشجرة لمضاعفة المظهر، ثم انقر على أيقونة إضافة مظهر، اختر فاكهةً ما من مكتبة الكائنات وانسخها ثم الصقها على الشجرة، سمّي المظهر الجديد "مع ثمار"، وسمّي القديم "بدون ثمار"، أو أي اسم آخر معبر.

سابعًا، أضف كتلةً لتغيير مظهر الشجرة عند البدء لتحتوي على الفاكهة، كما يلي:

ثامنًا، أنشئ رسالة بث جديدة، كما تعلمنا سابقًا، وسمّها "جمع عينةً من الفاكهة"، ثم أضف الكتل التالية إلى كائن الشجرة، لتبدو وكأن الفاكهة قد قُطفَت منها:

تاسعًا، انقر على الآلي الكشّاف وأضف رسالة البث "جمع عينةً من الفاكهة" على كتل تعريف لبنة الفاكهة:

شغّل المشروع في وضع ملء الشاشة لاختباره، انقر على الآلي وشاهد كيف يمد ذراعه لالتقاط عينة الفاكهة، لاحظ كيف يتغير مظهر الشجرة.

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

أخيرًا، تحقق من أن المظهر الأول للشجرة هو المظهر الذي يحتوي على الفاكهة، وأضف الكتل التالية للتبديل إلى هذا المظهر عندما تختفي الشجرة من الشاشة وتظهر من جديد:

شغّل المشروع واجعل الكشّاف يجمع عينةً من الفاكهة.

تحدي إضافة المزيد من العينات

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

أولًا، أضف كائنًا جديدًا، ليكون بمثابة عينة جديدة ليجمعها الآلي الجوّال، إما من مكتبة الكائنات أو ارسمه في محرر الرسوم.

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

ثالثًا، استخدم كتل لبناتي لتغيير مظهر الآلي عند جمع العينات بما يناسب العينة الجديدة. استخدم لبنة جمع العينات التي أنشأناها سابقًا، أو أنشئ لبنةً جديدةً مناسبة.

إليك مثالًا عن المظاهر التي يمكن استخدامها لجمع عينات من الطاقة الشمسية لإعادة شحن الآلي:

عليك استخدام الكتل التالية لجعل الآلي يشحن بطاريته باستخدام الطاقة الشمسية:

رابعًا، أضف رسالة بث إلى لبنة جمع العينات لتغيير مظهر العينة أو إضافة تأثير عليها، كتأثير "الشبح" لاخفاء العينة.

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

سادسًا، غيّر مظهر الكائن عند أخذ عينة منه، إن أحببت، كأن يتغير لونه أو ينقص حجمه.

وأخيرًا، أطلق العنان لخيالك وأضف مزيدًا من العينات والكائنات على رحلتك الاستكشافية!

ترقية المشروع

بإمكانك ترقية المشروع حين يتسنى لك ذلك وإضافة المزيد من الكائنات وجعل الرجل الآلي يتفاعل معها، إليك بعض الاقتراحات:

• جمع مزيد من العينات باستخدام المظاهر الملحقة بالرجل الآلي.
• استخدام المتغيرات لحساب عدد العينات التي جمعها الآلي.
• استخدام متغير لمراقبة تغيرات الطاقة، واستخدام الخلايا الشمسية لإعادة شحن الطاقة من الشمس.
• تغيير مظهر الرجل الآلي عند جمعه عددًا معينًا من العينات: كأن يرقص رقصة احتفال، أو يطير فرحًا!

وظّف الكتل التي تعلمتها في هذا المقال، والتي تعلمناها في مشاريع سابقة لترقية هذا المشروع.

إليك النسخة الكاملة من المشروع أو نزله من ملف رحلة استكشافية في الطبيعة- ترقية، واطلع على المشروع التالي لتستلهم منه الأفكار، انقر لمشاهدة الكتل المستخدمة في نسخة المتصفح:

ختامًا

بهذا تكون قد أتممت مشروع تصميم وتنفيذ رحلة استكشافية في الطبيعة باستخدام سكراتش.

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

ترجمة -وبتصرف- للمقال Nature rover من الموقع الرسمي لراسبيري باي.

اقرأ أيضًا

• البرمجة باستخدام سكراتش Scratch
• إنشاء كتاب إلكتروني تفاعلي باستخدام سكراتش
• تنفيذ مشروع حافلة مدرسة متحركة باستخدام برنامج سكراتش
• تنفيذ مشروع حافلة مدرسة متحركة باستخدام برنامج سكراتش

يُعد إنترنت الأشياء Internet of things صورة مصغرة عن المستقبل الذي سنعيشه خلال السنوات القادمة لما يحمله من حالات استخدام تدخل في جميع تفاصيل حياتنا اليومية. في هذا الفيديو سنشرح لكم ماهو إنترنت الأشياء Internet of things وكيف يعمل ومجالات استخدامه، وكيف يمكنك أن تبدأ العمل في هذ المجال.

يمكنك تعلم المزيد حول انترنت الأشياء وتعلم الآلة عبر متابعة المقالات المجانية المتوفرة على أكاديمية حسوب في قسم البرمجة، كما يمكنك الانضمام إلى دورة علوم الحاسوب لتعلم أساسيات علوم الحاسوب والانطلاق في البرمجة باحترافية

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

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

• تطوير واجهات المستخدم
• تطوير التطبيقات باستخدام لغة Python
• تطوير التطبيقات باستخدام لغة JavaScript
• تطوير تطبيقات الويب باستخدام لغة PHP
• تطوير تطبيقات الويب باستخدام لغة Ruby

ولا تنسَ تدعيم رحلة تعلمك وعملك بالاطلاع على توثيقات أبرز اللغات البرمجية الحالية المتاحة مجانًا على موسوعة حسوب.

تُعد سرعة الأرشفة مقياسًا مهمًا عند تقييم سرعة صفحات الموقع، فهي تُشير لأداء الصفحة لكنها تختلف عن بقية المؤشرات التي تتمحور حول تجربة المستخدم مثل مؤشر أول محتوى مرئي FCP ومؤشر أضخم محتوى مرئي LCP.

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

ما هي سرعة الأرشفة؟

يجمع Lighthouse -وهو العمود الفقري ضمن PageSpeed Insights - معلومات لتقييم موقعك من خلال النظر لمجموعة مؤشرات أداء، وسرعة الأرشفة هي أحد هذه المؤشرات حيث يذكر التقرير الذي توفره هذه الأداة زمن كل مؤشر بالثوان أو بالميلي ثانية، كما أن جوجل يُعرِّف مؤشر سرعة الأرشفة Speed Index -تختصر إلى SI- على أنه سرعة ظهور محتوى الصفحة للمستخدم.

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

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

كيفية قياس سرعة الأرشفة؟

أحد أهم الأدوات المُستخدمة لقياس سرعة أرشفة الموقع إضافةً لمعظم مؤشرات الأداء الأخرى هي PageSpeed Insights التابعة لجوجل، حيث توفر لك نتائج دقيقة لموقعك في الغالب نتيجة تجميع بيانات لمدة 28 يومًا، وفي حال كان لديك عدد جيد من الزوار الذين يستخدمون متصفح جوجل كروم تستطيع الحصول على بيانات حقيقية ضمن تقرير الأداة لكن هذا غير متوفر لجميع المواقع.

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

ما هي النتائج التي تُعد جيدة بالنسبة لمؤشر سرعة الأرشفة؟

يستخدم PageSpeed النتائج التالية لمؤشر سرعة الأرشفة لموقعك مع ترميز لوني لها.

• أخضر (جيد) 0 ثانية حتى 3.4 ثانية
• برتقالي (متوسط) 3.4 ثانية حتى 5.8 ثانية
• أحمر (بطيء) أعلى من 5.8 ثانية

إن أداة PageSpeed Insights حازمة جدًا في قياساتها لذا إن حصلت على مؤشرات حمراء أو برتقالية، ربما ترغب في استخدام أدوات أخرى مثل GTmetrix أو اختبار السرعة Pingdom لمعرفة بيانات الزمن الحقيقي التي تعرضها هذه الأدوات، وحقيقةً من الجيد اختبار الموقع باستخدام عدة أدوات في أوقات مختلفة لتحصل على أفضل تصور ممكن للأداء.

كيفية تحسين نتيجة مؤشر سرعة الأرشفة

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

تخفيض الموارد التي تؤخر الإخراج

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

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

تستطيع في ووردبريس استخدام إضافات التخزين المؤقت (أو إضافات تحسين الموقع) مثل W3 Total Cache أو WP Rocket لتحقيق ذلك حيث تتمتع هذه الإضافات عادةً بخيار بسيط لتأجيل تحميل الموارد التي تُؤخر عمليات الإخراج.

تخفيض عبء العمل الأساسي لموقعك

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

لا تنسى أيضًا تصغير حجم ملفات CSS وHTML، فهذا سوف يُقلل الأعباء التي على خادمك التعامل معها، تستطيع أن تجد ضمن إضافات التخزين المؤقت وتحسين الموقع خيارات تُساعدك على تنفيذ ما ذكرته آنفًأ.

الأسئلة المتكررة عن مؤشر سرعة الأرشفة

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

كيف يؤثر مؤشر سرعة الأرشفة على أداء موقعي بشكل عام؟

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

هل يجب عليّ التركيز فقط على نتيجة سرعة الأرشفة؟

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

الخلاصة

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

ترجمة -وبتصرّف- للمقال Speed Index: What it is & How to Optimize your Website for it لصاحبه B.J. Keeton.

اقرأ أيضًا

• مقدمة في مؤشر انزياح الهيكل التراكمي CLS وكيفية تحسينه في موقعك
• مدخل إلى مؤشر تأخر الاستجابة الأولى FID وكيفية تحسينه في موقعك

ترخيص البرنامج software license هو اتفاقيةٌ قانونيةٌ تحدِّد كيفية استخدام جزءٍ محددٍ من البرنامج، إذ يُعَد اختيار ترخيص البرنامج قرارًا مهمًا بالنسبة لمطوري البرامج الذين قد يرغبون في تطبيق حقوق وتصريحات permissions معينة على عملهم والتحكم في كيفية استخدام الآخرين له وتعديله ومشاركته؛ فقد يرغب بعض المطورين في فرض قيودٍ صارمة على كيفية استخدام برامجهم، على حين قد يختار آخرون ترخيص برامجهم بفرض قيودٍ قليلة أو دون فرض أية قيود، وقد ينبع هذا من رغبتهم في انتشار استخدام برامجهم على أوسع نطاقٍ ممكن، أو ربما لأنهم يعارضون مفهوم تراخيص البرامج المقيدة لأسباب فلسفية.

يستطيع المطورون بغض النظر عن أسبابهم تحقيق ذلك من خلال تطبيق ترخيص برنامج مفتوح المصدر open-source، إذ تتيح تراخيص البرامج مفتوحة المصدر عمومًا الشيفرة البرمجية المصدرية source code للاستخدام والتعديل والنشر بناءً على شروطٍ وأحكامٍ مُتفَّقٍ عليها. يوجد العديد من تراخيص البرامج مفتوحة المصدر المختلفة، وهي تختلف بناءً على القيود التي يرغب مبتكر البرنامج أن يمتثل المستخدمون المستقبليون لها.

عند وضع خططٍ طويلة الأمد لمشروعك، سيكون من المجدي فهم تراخيص البرامج مفتوحة المصدر المتاحة حتى تختار بحكمة الترخيص الذي يلائم متطلباته. سنستعرض في هذه المقالة معلوماتٍ حول حقوقك عند إنشاء عملك (مثل حقوق النشر)، وكيف يساعد الترخيص في إنشاء الاتفاقية القانونية التي تريد أن يمتثل المستخدمون لها عند استخدام برنامجك، كما سنناقش الفروقات بين البرمجيات الاحتكارية proprietary والمجانية ومفتوحة المصدر، وبين التراخيص المتساهلة permissive وتراخيص الحقوق المتروكة copyleft، ومعلوماتٍ عن خيارات ترخيص البرامج مفتوحة المصدر المقترحة عند إنشاء مشروع على موقع غيت هَب GitHub.

اقتباس

ملاحظة: لا تهدف هذه المقالة إلى تقديم أي نوعٍ من أنواع المشورة القانونية، بل هي مصدر معلومات عن موضوع ترخيص البرامج مفتوحة المصدر فقط.

إذا كنت ترغب في معرفة مزيدٍ حول براءات الاختراع والعلامات التجارية والملكية الفكرية، يمكنك زيارة موقع مكتب براءات الاختراع والعلامات التجارية في الولايات المتحدة.

تعريف حق النشر والترخيص

تمنَح الولايات المتحدة والعديد من البلدان الأخرى تلقائيًا نوعًا من الحماية القانونية لأي عملٍ مُبتَكرٍ تنتجه، ويسمى أحد أنواع هذه الحماية حقوق النشر copyright؛ إذ يُعرِّف مكتب حقوق النشر في الولايات المتحدة حقوق النشر بأنها "أحد أنواع الملكية الفكرية التي تحمي الأعمال الأصلية المؤلَّفة"، تحديدًا عندما "ينظِّم المؤلف العمل بصيغة تعبير ملموسة"؛ أي أن منحك حقوق النشر لا يعني أنك صاحب الفكرة، بل أنك صاحب التعبير المادي عن الفكرة. إذا رغب مالك حقوق النشر بتطبيق حمايةٍ قانونيةٍ لعمله أكثر صرامة، يمكنه التوجُّه إلى براءات الاختراع والعلامات التجارية وقوانين الملكية الفكرية، إذ لا يتطلب حصولك على حقوق النشر لعملك إجراءً رسميًا لضمان منحها لك.

تمنح حقوق النشر للمالك حقوقًا متنوعةً، مثل إعادة إنتاج نسخٍ من العمل ونشرها. إذا أراد المالك التحكم في كيفية استخدام الآخرين لعمله، يجب عليه تطبيق ترخيص يحدد القواعد التي يجب أن يمتثل لها المستخدمون، أما إذا صرَّح مالك حقوق النشر أن في عمله "جميع الحقوق محفوظة All Rights Reserved"، فهذا يعني أنه لا يحق لأي شخص سوى مالك حقوق النشر استخدام عمله أو تعديله.

تتمثل إحدى تشعبات هذا الموضوع في العمل المبتكر الذي تقدمه لصاحب العمل؛ فإذا كنت منخرطًا في ما يُعرف باسم العمل مقابل الأجر work for hire، فهذا يعني أن أيّ عملٍ تبتكره لصالح الشركة أو المؤسَّسة التي تعمل بها تعود ملكيته إلى هذا الكيان، بما أنه يعطيك أجرًا مقابل هذا العمل. نتيجةً لذلك، تترتب عواقبٌ قانونية على مشاركتك هذا العمل دون إذن لعدم امتلاكك حقوق الملكية لحقوق النشر أو الترخيص.

البرمجيات الاحتكارية والحرة ومفتوحة المصدر

البرمجيات الاحتكارية Proprietary software هي أيُّ برنامجٍ له ترخيصٌ يقيد كيفية استخدامه أو تعديله أو مشاركته، وتُعد ألعاب الفيديو من الأمثلة الشائعة عن البرمجيات الاحتكارية. فإذا اشتريت لعبة فيديو -سواءٌ كانت على هيئة خرطوشة cartridge (بطاقات الألعاب التي نضعها بأجهزة الألعاب مثل نينتيندو Nintendo)، أو قرص، أو عن طريق تنزيلها رقميًا-، فلا يحق لك إنشاء نسخةٍ من تلك اللعبة لمشاركتها مع أصدقائك أو بيعها بغرض الربح، كما يُحتمَل ألا يُسمح لك بتعديل الشيفرة البرمجية للعبة لتشغيلها على نظامٍ مختلفٍ عن النظام الأصلي الذي صُمّمت لتعمل عليه عندما اشتريتها.

يخضع عادةً مستخدمو البرامج لقيودٍ معينة بموجب اتفاقية ترخيص المستخدم النهائي end-user license agreement -أو اختصارًا EULA-؛ فإذا كنت قد اشتريت برنامجًا من قبل، لربما افترضت أنك تمتلك هذا البرنامج؛ ولكن إذا اشتريت برنامجًا احتكاريًا، فمن المرجّح أن يكون مرفقًا باتفاقية ترخيص المستخدم النهائي، التي تحدد أنك لا تملك البرنامج، وإنما تمتلك ترخيص البرنامج الذي يسمح لك باستخدامه. قد تحدد اتفاقيات ترخيص المستخدم النهائي أيضًا كيفية استخدام الترخيص نفسه، والتي تمنعك عادةً من مشاركته مع الآخرين دون الحصول على إذنٍ من مالك البرنامج (مطوِّر البرنامج أو ناشره).

اتفاقية شروط الخدمة Terms of Service agreement -أو اختصارًا ToS-، هي صكٌ قانوني آخر مشابهٌ لاتفاقية ترخيص المستخدم النهائي EULA، وتُعرف أحيانًا باسم شروط الاستخدام Terms of Use أو الشروط والأحكام Terms and Conditions، ويُحدَّد ضمنها القواعد الواجب على المستخدم اتباعها من أجل السماح له باستخدام برنامج أو خدمة.

من الشائع أن تتضمن البرامج التي تتطلب الشراء لمرةٍ واحدة اتفاقية ترخيص المستخدم النهائي، على حين تكون اتفاقيات شروط الخدمة أكثر شيوعًا في خدمات الاشتراك subscription والمواقع الإلكترونية؛ ففي المرة الأولى التي تبدأ فيها العمل على برنامج احتكاري معين، سيظهر مربع حوار في معظم الأحيان يشرح اتفاقية ترخيص المستخدم النهائي، أو اتفاقية شروط الخدمة ويحتوي على زر أوافق I Agree (أو عبارة مشابهة)، والذي يجب أن تنقر عليه قبل أن تتمكن من استخدام البرنامج.

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

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

يُعد البرنامج الحر عمومًا مفتوح المصدر، لكن لا يُعد البرنامج مفتوح المصدر مجانيًا دائمًا، لذلك سنعود في تتمة هذا الدليل إلى استخدام المصطلحات الأشمل "البرنامج مفتوح المصدر" و"ترخيص البرنامج مفتوح المصدر". ومع ذلك، يرجى أخذ العلم أنه لا يحل أحد المصطلحين محل الآخر دائمًا.

اقتباس

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

لا يزال مناصرو البرمجيات مفتوحة المصدر يشجعون المطورين على نشر برامجهم بموجب ترخيص، لكن بدلًا من ترخيص البرنامج الاحتكاري الذي يحدد ما لا يجوز للمستخدمين فعله، يوصون باستخدام ترخيص برنامج مفتوح المصدر يحدِّد الحريات المتاحة لمستخدمي جزءٍ معينٍ من البرنامج. توزَّع هذه التراخيص غالبًا على هيئة ملفٍ واحدٍ ضمن البرنامج، يُسمى عادةً "LICENSE.txt" أو اصطلاح تسميةٍ مشابه.

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

تراخيص البرامج مفتوحة المصدر المتساهلة والحقوق المتروكة

الترخيص المتساهل permissive license والذي يُشار إليه أحيانًا بترخيص الحقوق غير المتروكة non-copyleft، هو ترخيصٌ يمنح المستخدمين تصريحًا باستخدام الشيفرة البرمجية المصدرية وتعديلها ومشاركتها، ويتيح للمستخدمين أيضًا خيار تعديل بعض شروط وأحكام إعادة النشر، بما في ذلك الأعمال المشتقة derivative work؛ إذ يُعرف العمل المشتق في مجال البرامج بأنه جزءٌ من البرنامج ومبنيٌ على برنامجٍ موجود. فإذا أُصدر البرنامج الأصلي بموجب ترخيصٍ متساهل، يحق لمبتكر البرنامج اختيار مشاركة عمله المشتق بموجب شروطٍ مختلفةٍ عن شروط ترخيص العمل الأصلي.

يمنح ترخيص الحقوق المتروكة copyleft license للمستخدمين أيضًا تصريحًا باستخدام الشيفرة البرمجية المصدرية وتعديلها ومشاركتها، لكنه يوفر الحماية ضد إعادة الترخيص relicensing من خلال فرض قيودٍ وشروطٍ وأحكامٍ محددة؛ وهذا يعني أن مستخدمي البرامج الذين ينشئون أعمالًا مشتقةً ملزمون بإصدارها بموجب نفس شروط وأحكام ترخيص الحقوق المتروكة الخاص بالعمل الأصلي. تُعد هذه التبادلية reciprocity السمة المميِّزة لتراخيص الحقوق المتروكة، وتهدف إلى حماية نوايا المبتكرين من خلال ضمان حصول المستخدمين على نفس الحقوق والتصريحات عند استخدام الأعمال المُشتقة من البرنامج الأصلي.

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

على الرغم من وجود بعض التداخل في الفلسفات الكامنة وراء تراخيص برامج الملكية العامة والحرة ومفتوحة المصدر، فقد دار خلافٌ على مر السنين حول ما إذا كان الترخيص المكافئ للملكية العامة يُصنَّف حقًا على أنه ترخيصٌ مفتوح المصدر. قدِّمت هيئة المشاع الإبداعي CC0 في عام 2012 ترخيصًا، ولكن رفضت مؤسسة مبادرة المصدر المفتوح Open Source Initiative -أو اختصارًا OSI- اعتماده؛ وهي مؤسسة غير ربحية تحدِّد معايير البرامج مفتوحة المصدر وتحتفظ بقائمة التراخيص مفتوحة المصدر المعتمدة. ومع ذلك، وافقت المؤسسة على ترخيصٍ مكافئ للملكية العامة يُدعى غير مرخص Unlicense في عام 2020.

ما فائدة إضافة ترخيص برنامج مفتوح المصدر؟

بصفتك مطورًا يبدأ مشروعًا من نقطة الصفر، فمن الضروري أن تكون مُلمًا بعض الشيء بتراخيص البرامج مفتوحة المصدر المتاحة لتختار طريقة استخدام الآخرين لعملك؛ كما يُعد التعرف على هذه التراخيص أمرًا مهمًا أيضًا بالنسبة للمستخدمين حتى يتمكنوا من فهم التصريحات أو القيود التي حددتها الاتفاقية المُبرمة عند استخدام عمل المبتكِر.

نكرر ثانيةً، سيكون لأي عمل أصلي حقوق نشر عند إنهائه، لكن لن يكون له ترخيص، فلا يتضح لمن يرغبون في استخدامه ما الأمور المُصرَّح بها وغير المصرح بها. ألقِ نظرةً على الأسباب التالية التي تدفعك إلى إضافة ترخيص برنامج مفتوح المصدر:

• التطوير: يفخَر مجتمع المصدر المفتوح بنفسه لغرس ثقافةٍ تشجع على التعاون والابتكار، كما يدعو استخدام ترخيص برنامج مفتوح المصدر المستخدمين إلى الانخراط في تنمية المجتمع، وهذا يولد إحساسًا مشتركًا بالمسؤولية لتطوير الشيفرة البرمجية المصدرية باستمرار أو توسيع البرنامج لصالح الجميع.

• الملكية: إذا كنت ترغب في أن يكون لديك سلطةٌ أكبر على عملك، فسيساعدك اختيار ترخيصٍ يمكنه فرض تلك القيود على تحقيق ذلك. فإذا أردت مثلًا منح أية أعمالٍ مشتقةٍ التصريحات ذاتها التي اخترتها في الأصل، فقد ترغب في اختيار ترخيص الحقوق المتروكة. لحسن الحظ، يوفِّر ترخيص البرنامج مفتوح المصدر الشفافية للمستخدمين المستقبليين حول مقدار تحكُّمك في العمل، سواءٌ كان كبيرًا أو قليلًا، فالأمر يعود إليك.

• المنافسة: يوجد عددٌ هائلٌ من البرامج، وإذا كنت ترغب في اقتحام هذا السوق، يمكن أن يساعدك استخدام ترخيص مفتوح المصدر على البروز فيه. يُعد نظام التشغيل لينوكس Linux ونظام أندرويد Android الذي أنتجته شركة جوجل Google ومتصفح فايرفوكس Firefox من بين الأمثلة الشائعة للبرامج مفتوحة المصدر التي طوِّرَت لتنافس البدائل الاحتكارية الراسخة.

تذكر أنك تستطيع تحقيق أرباحٍ من مشروعٍ برمجي مفتوح المصدر، لكن العرف التجاري لتحقيق أرباحٍ من البرامج هو استخدام ترخيصٍ احتكاري لحماية البرنامج من المشاركة أو السرقة.

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

كما سبق وذكرنا، تتناول هذه المقالة تراخيص البرامج مفتوحة المصدر المُدرجة عند إنشاء مستودعٍ جديد لمشروعك على موقع غيت هَب. ستلاحظ في نهاية الصفحة وجود خيارٍ لاختيار ترخيص، وبمجرد النقر على المربع ستظهر قائمةٌ منسدلةٌ تحتوي التراخيص لتختار واحدًا منها، كما هو موضحٌ في الصورة التالية:

(التراخيص على موقع غيت هَب)

سنقدِّم في الفقرات اللاحقة توصيفًا موجزًا لأنواع تراخيص البرامج مفتوحة المصدر، والتي يمكنك اختيار أحدها لإضافته إلى مشروعك القادم، بدءًا من التراخيص المتساهلة التي يوصي بها موقع غيت هَب.

تراخيص البرامج مفتوحة المصدر المتساهلة

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

يرجى أخذ العلم أن القائمة التالية لا تمثِّل جميع تراخيص البرامج مفتوحة المصدر المتساهلة المتاحة، بل هي مأخوذةٌ من خيارات الترخيص التي يقدمها موقع غيت هَب عند إنشاء مشروعٍ جديد، كما أن هذه التوصيفات الموجزة ليست شاملة. ننصحك أن تقرأ بتمعنٍ توثيق أيِّ ترخيصٍ ترغب في استخدامه، أو تتحدث مع مختصٍ قانوني للحصول على مزيدٍ من المعلومات.

ترخيص أباتشي Apache

أُصدِر ترخيص أباتشي من قِبل مؤسَّسة برمجيات أباتشي، وهو ينص على عدم إلزام المستخدم مشاركة نسخته المُعدّلة من الشيفرة البرمجية المصدرية بموجب نفس الترخيص، بحيث يمكنه اختيار استخدام ترخيصٍ مختلف، وهذا ما يُعرف باسم الترخيص الفرعي sublicensing.

ترخيص معهد ماساتشوستس للتكنولوجيا MIT

أصدر معهد ماساتشوستس للتكنولوجيا Massachusetts Institute of Technology -أو اختصارًا MIT- ترخيص معهد ماساتشوستس للتكنولوجيا MIT، وهو أحد أقصر التراخيص في القراءة ويتضمن قيودًا قليلةً؛ وعلى غرار ترخيص أباتشي، فإنه يمنح المستخدمين أيضًا خيار ترخيص البرنامج ترخيصًا فرعيًا.

تراخيص بي إس دي BSD

يتيح لك موقع غيت هَب الاختيار بين نوعين من تراخيص BSD، هما ترخيصترخيص BSD 2-Clause "المُبسَّط"، والذي يُشار إليه أحيانًا باسم ترخيص بي إس دي الحر "FreeBSD"، و ترخيص BSD 3-Clause "الجديد" أو "المعدَّل"؛ إذ يكمن الفرق الرئيسي بينهما في البند الثالث، الذي يقيِّد مستخدمي البرامج من استخدام اسم المؤلف، أو المؤلفين، أو المساهمين في مصادقة المنتجات أو الخدمات.

ترخيص برنامج بوست Boost

يمكننا الحصول على ترخيص برنامج بوست من مكاتب بوست في اللغة البرمجية ++C، وقد أقرَّته مؤسسة مبادرة المصدر المفتوح في عام 2008. يُعد هذا الترخيص مشابهٌ لتراخيص MIT و BSD، إلا أنه لا يتطلب إسنادًا عند إعادة نشر البرنامج في الصيغة الثنائية binary.

تراخيص الحقوق المتروكة للبرامج مفتوحة المصدر

تمنح تراخيص الحقوق المتروكة لمستخدمي البرنامج تصريحًا باستخدام الشيفرة البرمجية المصدرية وتعديلها ومشاركتها، لكنها توفِّر أيضًا الحماية من إعادة الترخيص من خلال فرض قيودٍ وشروطٍ وأحكامٍ محدّدة؛ وهذا ما يُمثِّل الخاصية التبادلية لهذا الترخيص التي تتطلب امتثال عمل المستخدم للحقوق الأصلية الموضحة في الترخيص.

وكما ذكرنا، لا تمثل القائمة التالية جميع تراخيص الحقوق المتروكة للبرامج مفتوحة المصدر المتاحة، بل هي مأخوذةٌ من خيارات الترخيص التي يقدمها موقع غيت هَب عند إنشاء مشروعٍ جديد، كما أن هذه التوصيفات الموجزة ليست شاملة. ننصحك أن تقرأ بتمعنٍ توثيق أيّ ترخيصٍ ترغب في استخدامه، أو تتحدث مع مختصٍ قانوني للحصول على مزيدٍ من المعلومات.

تراخيص جنو GNU

أصدرت مؤسسة البرمجيات الحرة عدة إصدارات من ترخيص جنو العلني General Public License - أو اختصارًا GPL-، إذ يتيح موقع غيت هَب للمستخدم الاختيار بين أربعٍ منها. يُلزِم الإصدار 3.0 من GPL أو GPL v3.0 المستخدمين بذكر أية تعديلات على الشيفرة البرمجية الأساسية، وإتاحتها عند نشر أية ملفاتٍ ثنائيةٍ مُستخدمة على عملهم بموجب هذا البرنامج المرخص؛ كما يسهِّل هذا الترخيص العمل مع التراخيص الأخرى، مثل ترخيص أباتشي، الذي لم يكن الإصدار السابق منه v2.0 متوافقًا معه.

أُنشأ ترخيص جنو العلني الإصدار الثاني أو GPL v2.0 قبل الإصدار الحالي GPL v3.0، ويشترك في الشروط والأحكام مع الإصدار الثالث، لكنه يُعد ترخيصًا قويًا للحقوق المتروكة، إذ يتطلب ترخيص الحقوق المتروكة القوي إصدار أية تعديلات على الشيفرة المصدرية بموجب نفس الترخيص.

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

كانت إحدى الإصدارات الأخرى للترخيص رخصة جنو ليسر Lesser العلنية، والمُشار إليها باسم LGPL، أو بالإصدار 2.1 من إصدار GPL v2.0، ويهدف هذا الترخيص إلى أن يكون في الوسط بين تراخيص الحقوق المتروكة القوية والضعيفة. يتمثّل الاختلاف الرئيسي في هذا الترخيص في أنه يتيح لمستخدمي البرامج دمج عنصرٍ من برنامجٍ مرخص بموجب ترخيص LGPL مع عناصر برنامجهم، وليسوا مطالبين بمشاركة الشيفرة البرمجية المصدرية لعناصر برنامجهم؛ كما يحق للمستخدمين أيضًا نشر مكتبةٍ هجينة، وهي مجموعةٌ من الدالات من مكتبة مرخصة بموجب ترخيص LGPL ودالاتٍ من مكتبةٍ مرخصة بموجب ترخيص آخر، لكن يجب أن يوفِّروا نسخةً من تلك المكتبة المرخصة بترخيصٍ غير LGPL ومعلوماتٍ عن مكانها.

تُعد رخصة جنو أفيرو Affero العلنية الإصدار v3.0 إصدارًا آخرًا من تراخيص جنو، ويُشار إليها باسم AGPL. يتمثل الاختلاف الرئيسي في هذا الترخيص في أنه مخصصٌ للبرامج المستخدمة على الخوادم، ويلزِم هذا الترخيص المستخدمين الذين يشغلون برنامجًا مُعدَّلًا على خادمٍ ما بمشاركة هذه المعلومات وإتاحة الشيفرة البرمجية المصدرية المعدلة للتنزيل إلى الإصدار المُعدَّل الملائم المُشغّّل حاليًا على الخادم.

ترخيص إكليبس العلني Eclipse Public

أصدرت مؤسَّسة إكليبس Eclipse ترخيص إكليبس العلني، الذي يُعد ترخيص حقوق متروكة ضعيف يُلزِم مستخدمي البرامج بمشاركة أية تغييرات يجرونها على الشيفرة البرمجية. اختار هذا الترخيص تطبيق ترخيص حقوق متروكة أضعف لتخفيف تشدُّد شروط تراخيص جنو العلنية على المستخدمين.

ترخيص موزيلا العلني Mozilla Public

أصدرت مؤسَّسة موزيلا ترخيص موزيلا العلني Mozilla Public License -أو اختصارًا MPL-، ويُعد أيضًا ترخيص حقوق متروكة ضعيف. يتمثل الاختلاف في هذا الترخيص موازنةً مع ترخيص إكليبس العلني، في أنه ترخيص حقوقٍ متروكة مبنيٌ على الملفات، ما يعني أنه يمكن دمج الشيفرة البرمجية مع شيفرة برمجية مفتوحة المصدر أو احتكارية.

التراخيص المكافئة للملكية العامة

تمنح التراخيص المكافئة للملكية العامة المستخدمين تصريحًا باستخدام الأعمال المحمية بحقوق النشر دون إسنادها، أو إلزامهم بالتوافق مع الترخيص المطلوب. وكما ذكرنا، لا تكون هذه التراخيص مُعتمدةً دائمًا من قِبل مؤسَّسة مبادرة المصدر المفتوح OSI.

ترخيص المشاع الإبداعي العالمي الصفري

أصدرت منظمة المشاع الإبداعي ترخيص المشاع الإبداعي العالمي الصفري، الذي يُعد ترخيص حقوق نشر علنية، أي يمكن نشر العمل المحمي بحقوق النشر بحرية. يرجى أخذ العلم أن هذا الترخيص غير مُعتمَدٍ من مؤسسة مبادرة المصدر المفتوح OSI. تتمثل النقطة الأساسية في هذا الترخيص في امكانية المستخدمين من استخدام الشيفرة البرمجية المصدرية وتوزيعها وتعديلها، لكن عليهم أن يوافقوا على التنازل عن أي حقوق نشر لضمان إمكانية الوصول إلى هذا العمل في النطاق العلني. إضافةً إلى ذلك، لا يُلزَم المستخدمون بتقديم أي إسنادٍ للعمل ويمكنهم استخدامه تجاريًا.

الترخيص غير المرخص Unlicense

أُصدِر الترخيص غير المرخص Unlicense في عام 2012، ويُعد ترخيصًا مكافئًا للملكية العامة ومُعتمَدًا من مؤسَّسة مبادرة المصدر المفتوح. بموجب هذا الترخيص، يحق لمستخدمي البرامج استخدام الشيفرة البرمجية المصدرية والملفات الثنائية المُجمَّعة وتعديلها ونشرها لأغراضٍ تجارية وغير تجارية، كما ينصح هذا الترخيص المستخدمين الذين يرغبون في ضمان توفِّر مساهماتٍ في الشيفرة البرمجية أو البرنامج للعامة بتضمين تصريحٍ حول التزامهم بمشاركة الشيفرة الرئيسية مع العامة.

الخاتمة

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

تذكر أن هذه المقالة قدَّمت معلوماتٍ حول بعض تراخيص البرامج مفتوحة المصدر الشائعة فقط، وتحديدًا التراخيص التي اقترحها موقع غيت هَب. نحثُّك على استكشاف جميع خيارات الترخيص المتاحة، أو استشارة مختصٍ قانوني حتى تختار بحكمة الترخيص الذي يلائم متطلبات مشروعك.

ترجمة -وبتصرف- للمقال ‎Understanding Open-Source Software Licenses لصاحبته Jeanelle Horcasitas.

اقرأ أيضًا

• تعرف على أنواع التراخيص الحرة التي تسمح لك ببيع المواد بشكل تجاري
• طرق التعريف بمشروعك مفتوح المصدر
• صيانة المشاريع مفتوحة المصدر
• ثلاث خطوات لتأمين DevOps مفتوح المصدر

توفير تجربة سريعة لزوار موقعك أمر مهم جدًا لنجاحه، ويوجد عدة طرق لقياس مستوى أداء الموقع من ناحية السرعة، أحدها مؤشر تأخر الاستجابة الأولى FID -اختصارًا للعبارة First Input Delay- الذي يقيس الزمن بالميلي ثانية الذي يفصل بين أول تفاعل للمستخدم مع موقعك واستجابة الموقع لهذا التفاعل.

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

ما هو تأخر الاستجابة الأولى FID

كما ذكرت سابقًا فإن مؤشر تأخر الاستجابة الأولى (يُشار له أحيانًا بفترة استجابة الدخل) هو قياس للزمن بالميلي ثانية الذي يفصل بين تفاعل المستخدم مع الموقع واستجابة المتصفح له، وهو مؤشر أساسي تجده في تقارير كروم لتجربة المستخدم، وإضافةً لما سبق فهو أحد مؤشرات الويب المهمة وهي مقاييس يعتمدها جوجل لتحديد مستوى تجربة المستخدم ضمن موقعك ومنه ترتيب موقعك ضمن نتائج البحث.

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

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

يُحتمل أن تكون قيمة مؤشر تأخر الاستجابة الأولى مرتفعةً وتُسبب ارتداد الزوار عن موقعك حتى لو كانت قيمتا مؤشري FCP وLCP ممتازتين، لأنهم سوف يشعرون وكأن الموقع لا يستجيب أو بطيء.

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

كيفية قياس مؤشر تأخر الاستجابة الأولى FID

يجب عليك أولًا أن تعلم ما هي القيم الجيدة لهذا المؤشر، وبالنسبة لموقعك سوف ترغب أن يكون مؤشر FID أقل من 100 ميلي ثانية لتكون قيمة جيدة أما القيم بين 100 و300 ميلي ثانية تحتاج لتحسين، وأي قيمة أعلى من 300 ميلي ثانية تُعد سيئة، ولقياس قيمة هذا المؤشر ضمن موقعك تستطيع استخدام أداة PageSpeed Insights من جوجل.

إن قياس مؤشر تأخر الاستجابة الأولى ليس أمرًا سهلًا كونه يتطلب فعلًا ما من طرف المستخدم لكن طالما حظي موقعك بزوار تتفاعل معه يجب أن تجد هذا المؤشر ضمن تقرير الأداء PageSpeed Insights. كل ما عليك هو لصق رابط موقعك ضمن الحقل والضغط على Analyze وسوف تعرض لك هذه الأداة تقريرًا مفصلًا عن النتائج التي حققها موقعك.

سوف تجد مؤشر FID ضمن قسم Field Data مع اقتراحات لتحسين نتائج الصفحة، وتذكر أن هذه البيانات مبنية على تفاعل مستخدمين حقيقين خلال آخر 28 يوم وليست نتائج محاكاة (التي تُدعى Lab Data). ترتبط قيمة مؤشر تأخر الاستجابة الأولى بقوة مع تفاعل المستخدم لذا فإن بيانات قسم Field مهمة جدًا مقارنةً مع بيانات المحاكاة.

كيفية تحسين قيمة مؤشر FID

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

تحسين وتصغير شيفرة CSS وجافا سكريبت

إن ضغط وتحسين شيفرة CSS وجافا سكريبت من أفضل الطرق لتحسين مؤشر تأخر الاستجابة الأولى وتقليل قيمته كون هذا يُقلل من حجم الملفات وبالتالي يزيد من سرعة الاستجابة. تستطيع ضغط وتحسين ملفات CSS وجافا سكريبت من خلال إزالة المحارف غير الضرورية والفراغات وفواصل الأسطر لتزيد بذلك سرعة تحميل الصفحة إضافةً إلى تقليل عدد العمليات التي يجب على المتصفح إنجازها، وهكذا تحصل على FID أصغر.

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

تستطيع أيضًا ضغط وتصغير الشيفرة يدويًا باستخدام محرر الشيفرة لكن هذه الطريقة أكثر تعقيدًا، وتستطيع استخدامها إن كنت خبيرًا باستخدام الشيفرة ومحرراتها حيث توفر لك تحكمًا أكبر بالنتائج أو بإمكانك استخدام إضافات مثل Autoptimizer أو W3 Total Cache والتي توفر العديد من الخدمات الأخرى مثل التخزين المؤقت وضغط الصور وغيرها.

تقسيم وظائف جافا سكريبت الطويلة إلى وظائف قصيرة

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

أحد الطرق الفعّالة لتحقيق هذا الأمر هي تقسيم الشيفرة Code Splitting فهي تقنية مستخدمة لتقسيم الشيفرة وتحميل أجزاء صغيرة وضرورية منها بدلًأ من تحميل الملفات الكبيرة دفعة واحدة، وتستطيع استخدام هذه التقنية بمساعدة أدوات مثل Webpack.

تقليل تأثير الشيفرة الخارجية أو الشيفرة غير الضرورية

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

اسأل نفسك مثلًا، هل يحتاج مستخدموك لرؤية دعوة التسجيل في البريد الإلكتروني أولًا أو تستطيع تأخير عرضها إلى حين تفاعل المستخدم مع الموقع؟

تستطيع أيضًا إلقاء نظرة على قسم Opportunities ضمن تقرير PageSpeed Insights لمزيد من المعلومات حول تخفيض حجم شيفرة جافا سكريبت أو شيفرة CSS الغير مستخدمة.

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

الأسئلة المتكررة حول مؤشر تأخر الاستجابة الأولى FID

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

ما مدى تأثير مؤشر FID على موقعي؟

يقيس مؤشر FID التفاعل الأول للزوار مع موقعك وهو مؤشر كمي ومحسوس كونه مرتبط بانطباع المستخدم الأول عن الموقع، حيث تستطيع معرفة استجابة الموقع لتفاعل المستخدم عند تجريبه بنفسك لكن بالاعتماد على هذا المؤشر تستطيع معرفة ما يُشعر به غالبية زوار موقعك أيضًا.

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

كيف أستطيع قياس مؤشر FID الخاص بي؟

يوجد طرق عدة مختلفة تستطيع باستخدامها قياس قيمة مؤشر تأخر الاستجابة الأولى FID لكن الطريقة الأسهل والأسرع هي تحليل موقعك باستخدام الأداة PageSpeed Insights حيث يوفر تقرير هذه الأداة مجموعة من المؤشرات المهمة من ضمنها مؤشر FID كما يتضمن التقرير بعض الاقتراحات لتحسين قيم المؤشرات. إضافةً لما سبق تستطيع استخدام أدوات أخرى للحصول على قيمة FID مثل تقرير تجربة مستخدم كروم وتقرير مؤشرات الويب المهمة في منصة بحث جوجل ومكتبة جافا سكريبت لمؤشرات الويب المهمة. تستطيع أيضًا استخدام أدوات مثل GTMetrix و Pingdom's Speed Test.

كيفية تحسين قيمة مؤشر FID؟

يفيد تحسين قيمة FID في رفع سوية تجربة المستخدم وترتيب موقعك ضمن نتائج بحث جوجل، وعادةً تحصل على قيمة ضعيفة لمؤشر FID بسبب عدة عوامل تتضمن:

• شيفرة جافا سكريبت معقدة
• شيفرة غير مستخدمة
• مهام جافا سكريبت طويلة
• ملفات شيفرة ضخمة

يوجد عدة خطوات تستطيع اتباعها لتحسين قيمة FID والتي تتضمن تصغير حجم شيفرة الموقع وإزالة أو تأجيل الشيفرة الخارجية غير المستخدمة وتقسيم مهمات جافا سكريبت (وملفات CSS) لأجزاء أصغر.

الخلاصة

تملك فرصة واحدة لترك انطباع أولي إيجابي لدى زوار موقعك، لذا يجب عليك استغلال كل فرصة ممكنة لتحسين قيمة FID. تذكر أن القيمة المثالية لمؤشر FID هي 100 ميلي ثانية أو أقل وعليك اتباع الاستراتيجيات التي ناقشتها سابقًا لتخفيض هذه القيمة مثل تأجيل تنفيذ شيفرة جافا سكريبت غير المستخدمة وتحسين شيفرة جافا سكريبت وشيفرة CSS وإزالة الموارد التي تحجب عمليات الإخراج وغيرها.

ترجمة -وبتصرّف- للمقال First Input Delay (FID): What It Is & How to Optimize Your Website for It لصاحبه Will Morris.

اقرأ أيضًا

• مقدمة في مؤشر انزياح الهيكل التراكمي CLS وكيفية تحسينه في موقعك
• مدخل إلى مؤشر زمن وصول أول بايت TTFB في موقع الويب وكيفية تحسينه

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

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

• دورة علوم الحاسوب
• تطوير واجهات المستخدم
• تطوير التطبيقات باستخدام لغة Python
• تطوير التطبيقات باستخدام لغة JavaScript
• تطوير تطبيقات الويب باستخدام لغة PHP
• تطوير تطبيقات الويب باستخدام لغة Ruby

علم البيانات data science هو فرع من علم الحاسوب computer science مسؤول عن تجميع ومعالجة وتحليل البيانات وصولًا إلى مخرجات جديدة ومفهومة عن الأنظمة المدروسة، إذ يتعامل علماء البيانات مع كميات كبيرة من المعلومات الواردة من مصادر متعدّدة بطرقٍ مختلفة؛ بمعنى أنّ طريقة تحليلهم للبيانات ستكون مختلفة باختلاف الحالة المدروسة، لذلك يستخدمون خوارزميات مخصصة وتقنيات الذكاء الاصطناعي AI والتعلّم الآلي ML إضافةً لوجهة نظرهم الخاصة في تحليل هذه البيانات. إذًا، علم البيانات مجالٌ واسعٌ سريع التطور في عدّة مجالات واتجاهات عملية، مثل المجال الطبي وعلم الفلك والأرصاد الجوية، والتسويق وعلم الاجتماع والمؤثرات البصرية وغيرها.

ستجد في هذا المقال مقدمةً مختصرةً حول علم البيانات، هذا المجال الواسع سريع التطور في العديد من الاتجاهات العملية.

أهمية علم البيانات

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

ويُجمع في عالمنا الحديث الكثير من البيانات متعددة المصادر لحظيًا، مثل البيانات حول العادات اليومية والعادات الغذائية، الخيارات الموسيقية، العادات الاستهلاكية، مقدار استهلاك الطاقة، معلومات الأرصاد الجوية، أنماط هجرة الكائنات، النشاط الزلزالي، مواعيد رحلات الطيران وغيرها الكثير.

مع وجود الحواسيب في كل مكان فيوجد فعليًا كميةً مستمرةً من المُدخلات المضافة إلى مجموعة البيانات الضخمة. إذًا، تتوفّر لدينا في وقتنا الحاضر كمياتٌ من المعلومات عن العالم المحيط بنا ومن عينات مختلفة أكثر بكثير من أي وقتٍ مضى، وقد يقودنا تحليل مجموعات البيانات الضخمة هذه إلى استنتاجات مذهلة؛ فقد نجد أنماطًا أو ارتباطات في أماكن لم نتوقعها أو ندرسها يومًا.

في الواقع، تُعد مراقبة المتغيرات البيئية وتحليلها أمرًا بالغ الأهمية في مسيرة تعلّم الإنسان وتطوره، ومع ذلك تُطبَّق كثيرٌ من تقنيات علم البيانات على مجالاتٍ سطحية أو غير أخلاقية ولكن بالمقابل يجري قدرٌ كبيرٌ من تحليل البيانات حول المواضيع المفيدة والسليمة والجديرة بالاهتمام والتي يجب أن تفخر برمجيات المصادر المفتوحة بدعمها. ومن هنا نجد أنّ البرمجيات مفتوحة المصدر أمرٌ مهمٌ للغاية في نمو وتطور علم البيانات.

دورة الذكاء الاصطناعي

احترف برمجة الذكاء الاصطناعي AI وتحليل البيانات وتعلم كافة المعلومات التي تحتاجها لبناء نماذج ذكاء اصطناعي متخصصة.

اشترك الآن

البنية الأساسية

يتطلب علم البيانات بنيةً تحتيةً حاسوبيةً قوية وذلك نظرًا للكمية الهائلة من البيانات التي يحللها، فغالبًا ما تكون مجموعات البيانات أضخم من أن تُعالج على جهازٍ واحد أو حتى على مجموعةٍ صغيرة من الأجهزة، لذلك تُستخدم السحب الهجينة hybrid clouds وهي مزيجٌ من السحب العامّة والخاصة وتستفيد من مميزات كلا النوعين، لتخزين ومعالجة المعلومات وإنشاء الارتباطات بين هذه المعلومات المُحلَّلة.

ولذلك تتضمّن الأدوات اللازمة لعمل عالم البيانات ما يلي: منصةً لتشغيل الخدمات المُعالجة، مثل OpenShift، وبرمجية حوسبة موزعة، مثل Hadoop، أو Spark، ونظام ملفات موزعة، مثل Ceph، أو Gluster لتوفير تخزين موثوق، وغيرها من الأدوات. وبالتالي، فإن طبيعة عمل عالم البيانات إحصائيةٌ رياضية أكثر من كونها برمجية متعلقة بهندسة الحاسوب.

مهام عالم البيانات

يجمِّع عالم البيانات ويُعيد توزيع البيانات ويوّحدها normalize (وهي عملية هيكلة قاعدة البيانات بهدف تقليل تكرار البيانات وتحسين تكاملها)، ومن ثم ينشئ الإجراءات اللازمة ليبدأ الحاسوب بالبحث في البيانات عن نمطٍ أو اتجاهٍ أو مجرد إنشاء تصورٍ مفيدٍ عنها؛ فمثلًا بمجرد إنشائك مخططًا بيانيًا دائريًا أو شريطيًا معبّرًا عن حقول جدول بياناتٍ ما، فستكون قد أنجزت مهمةً بسيطةً تشبه بعض مهام عالم البيانات من خلال تفسيرك لهذه البيانات وإنشاء تصوّرٍ لها يساعد الآخرين على فهمها.

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

• تصميم إجرائيات مخصّصة باستخدام لغات برمجة، مثل بايثون Python وR و Scala و Julia.
• التعامل مع المكتبات المهمّة، مثل Beautiful Soup (وهي حزمة بايثون لتحليل مستندات HTML و XML)؛ و NumPy (وهي إضافةٌ على لغة بايثون للتعامل مع المصفوفات الكبيرة والحقول متعددة المستوى)؛ و Pandas (وهي مكتبةٌ برمجيةٌ مطوّرة بلغة بايثون لمعالجة البيانات وتحليلها)، بحيث يتمكن من استخلاص البيانات Data scraping، أي استخراج البيانات التي يستطيع البشر فهمها من برنامجٍ ما مثل حالة استخراج بيانات معينة من موقع إلكتروني وحفظها بصيغةٍ أُخرى، وتنظيفها Data sanitization، أي تحقيق محوٍ آمن ودائم للبيانات الحساسة أو عالية الخصوصية لضمان عدم إمكانية استردادها من الغير، وتنظيمها Data organization، أي تصنيف البيانات وتوزيعها في فئات ليسهل استخدامها والبحث عنها.
• التحكم في الإصدار version-control (وهي عملية تتبع وإدارة التغييرات في الترميز البرمجي)، وضبط التكرارات في الترميز البرمجي الخاص به، ليصل بالنتيجة إلى نظرةٍ شاملة وناضجة للبيانات والعلاقات بينها.

كيفية البدء بتعلم علم البيانات

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

ولحسن الحظ أن البرمجيات مفتوحة المصدر هي من تدير علم البيانات بصورةٍ رئيسية كما أنها برمجياتٌ متاحةٌ مجانًا للجميع، ويمكنك البدء بالخطوة الأولى في تجربة إحدى توزيعات لينوكس Linux، والتي ستمثّل منصةً جيدةً لعملك، إذ أن نظام تشغيل لينوكس مفتوح المصدر وهو مجاني ومرن جدًا مما يجعله مثاليًا للتعامل مع علم البيانات سريع التغيّر والمعروف بحاجته المستمرة للتكيُّف، كما أنّه يتوافق مع لغة بايثون الرائدة في علم البيانات، وقد صُمّمت المكتبات NumPy و Pandas خصيصًا لتحليل البيانات وتوثيقها مستنديًا بدقة عالية وتنظيم البيانات العددية number crunching، وهي عملية معالجة لكميات كبيرة من البيانات العددية وتنظيمها وإخراجها على هيئة مخططات ومبيانات graphs.

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

وبفضل البرمجيات مفتوحة المصدر، أصبح من السهل إيجاد مجموعات بيانات مفتوحة ومتاحةٍ للجميع، مثل مجموعات البيانات التي توفرها Data.gov، والبنك الدولي World Bank والبيانات العامّة التي توفرها شركة غوغل Google والمتضمّنة لبياناتٍ من وكالة ناسا NASA ومن شركة GitHub وبيانات إحصاء سكان الولايات المتحدة وغيرها، والتي تمثّل مصادرًا ممتازةً يمكن استخدامها لتعلُّم كيفية استخلاص البيانات من الويب وتفريغها في صيغٍ أسهل لعمليات المعالجة وتحليلها باستخدام مكتباتٍ متخصّصة.

لماذا نستخدم لغة بايثون في علم البيانات؟

من الممكن استخدام لغات برمجة مختلفة للتعامل مع علم البيانات، إلّا أنّ بايثون Python هي الأكثر شيوعًا، وعند الحديث عن تحليل البيانات فقط ستفي أي لغة برمجة بالغرض، ولكن من الممكن استثمار إمكانات بعض اللغات والمكتبات البرمجية في مجالات محدّدة صُمّمت لتنفيذها؛ إذ توفِّر المكتبة NumPy مثلًا أدواتٍ للتعامل مع المصفوفات ومعالجتها بحيث أنّك لن تضطر إلى برمجة مكتبةٍ خاصةٍ للتعامل مع المصفوفات بنفسك.

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

إضافةً إلى ما سبق، تتمتع بايثون بمزايا أخرى، مثل نظام إدارة الحزم pip المُستخدم في تثبيت حزم البرامج وتحديثها وإدارتها، وواجهة البيئة الوهمية القوية venv؛ وهي أداةٌ لإنشاء بيئات بايثون مستقلة، والصدفة التفاعلية Interactive shell التي توفر طريقةً سريعةً لتنفيذ الأوامر وتجربة واختبار الترميز البرمجي، وغيرها من الأدوات التي جعلت بايثون رائدةً بين لغات البرمجة في مجال علم البيانات.

لغة جوليا Julia وبيئة Jupyter التفاعلية

لا تمثل بايثون اللغة الوحيدة القادرة على تحليل البيانات، إذ يوجد العديد من اللغات الأخرى التي قد تتفوق عليها من حيث الشعبية بين علماء البيانات مثل لغة Julia، التي تركز على الأداء وطريقة رسم تصوِّر للبيانات من خلال تمثيلها بالرسوم والمخططات التوضيحية، وقد لاحظ مطوري بيئة التطوير التفاعلية iPython شعبية لغة Julia، فارتأوا تغيير اسم هذه البيئة إلى Jupyter (جوبيتر) وهي نتيجة دمج متعمَّد لكلٍ من اللغات Julia و Python و R .

ويُستخدم في هذه الأيام تطبيق الويب Jupyter notebooks للحوسبة التفاعلية، الذي يسمح لعلماء البيانات بإنشاء ومشاركة المستندات التي تدمج التعليمات البرمجية الحية والمعادلات والمخرجات الحسابية والتصورات وموارد الوسائط المتعددة الأخرى في مكانٍ واحد، ورغم كونها أداةً قويةً إلّا أنّها سهلةٌ بما يكفي لتبدأ التعلّم بها حتى لو كنت ما تزال تتعلم كتابة الترميزات البرمجية.

مستقبل علم البيانات

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

ترجمة -وبتصرف- للمقال What is data science?‎ من موقع opensource.com.

اقرأ أيضًا

• مدخل إلى البيانات وأنواعها: أنواع البيانات الأساسية
• المفاهيم الأساسية في قواعد البيانات وتصميمها
• دليلك الشامل إلى أنواع البيانات
• دليلك الشامل إلى قواعد البيانات DataBase

يُعد مؤشر أول محتوى مرئي FCP -اختصارًا للعبارة First Contentful Paint- ضمن موقعك واحدًا من أهم المؤشرات ضمن مؤشرات جوجل المهمة، وعلى عكس بقية المؤشرات فإن FCP مؤشر تقني بحت يُعنى بزمن الاستجابة وتجربة المستخدم وما يشعر به أولًا ضمن الموقع وليس ما يُحمّل ضمن الخلفية. عند تحسين قيمة مؤشر أول محتوى مرئي ضمن موقعك سوف يشعر الزوار أن طلباتهم تُعالج بسرعة وتحميل الصفحة لا يتأخر.

سوف أشرح في هذا المقال معنى مؤشر أول محتوى مرئي FCP وكيفية قياسه وتحسين قيمته مع الإجابة على بعض الأسئلة المتكررة حوله والتي تضمن فهمك لأهمية هذا المؤشر وتأثيره على موقعك.

ما هو مؤشر أول محتوى مرئي FCP؟

يظهر أول محتوى مرئي ضمن موقعك عندما يعمل متصفحك على إخراج أول عنصر DOM ضمن صفحتك وهذا يتضمن الصور أو النص أو عنصر canvas غير أبيض، بكلمات أخرى مؤشر FCP هو عندما يتمكن المستخدم من رؤية جزء ما من صفحتك يتغير وغالبًا يرتبط هذا بشريط الترويسة أو صورة الخلفية. يُمكن أن يكون هذا العنصر أول شيء أخرجه المتصفح أو حُمل من الخادم لكنه أول عنصر يراه المستخدم مما يربطه بمجال تجربة المستخدم.

لا يُحتسب أي عنصر موجود ضمن عنصر iframe في مؤشر FCP كما لا يُحتسب -ضمن هذا المؤشر- أي تغير في المظهر والتنسيق الغير مرتبط بتغير المحتوى مثل لون الخلفية.

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

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

كيفية قياس مؤشر أول محتوى مرئي FCP

تستطيع استخدام أدوات لقياس مؤشر أول محتوى مرئي للتعرف إن كان يؤثر على تجربة المستخدم ومن هذه الأدوات GTMetrix و PageSpeed Insights.

ما هي القيمة الجيدة لمؤشر FCP؟

يجب أن تعلم ما هي القيم التي تُعد جيدة لمؤشر FCP قبل اختبار موقعك بأدوات متنوعة بحثًا عن هذه القيمة وحسب جوجل فإن القيم بين 0 و 1.8 ثانية تُعد جيدة والقيم بين 1.8 و 3 ثانية تحتاج للتحسين أما القيم فوق 3 ثانية فهي ضعيفة، وفيما سوف تجد الأدوات التي تستطيع استخدامها لمعرفة النتيجة التي يحققها موقعك.

أدوات الحقل

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

يُظهر توثيق جوجل حول FCP أن الأدوات التالية هي أدوات الحقل الأفضل لتحديد قيمة FCP:

• PageSpeed Insights
• تقرير تجربة المستخدم في كروم
• منصة البحث Search Console (تقرير السرعة)
• مكتبة جافا سكريبت لمؤشرات الويب المهمة

تستطيع تتبع أزمنة التحميل باستخدام الأدوات السابقة ثم تستطيع الحصول على مقدار سرعة الموقع التي شعروا بها من خلال FCP وسرعة تحميل الصفحة.

أدوات المختبر

تعمل أدوات المختبر على محاكاة النتائج لقيم مؤشر FCP كما يُحتمل أن تكون ضمن ظروف واقعية. توفر الأدوات التي ينصح بها جوجل (أداة Lighthouse وأدوات المطورين في متصفح جوجل كروم وأداة PageSpeed Insights) معلومات عن موقعك لو أنه يعمل في ظروف مثالية، كما أنك لا تستطيع عند تطوير موقع لا يملك زوارًا بعد اختياره ضمن ظروف حقيقية لذا فاستخدام أدوات المختبر يمكن أن يساعدك على تكوين فكرة عما سيكون عليه أداء موقعك عند استقبال زوار مختلفين.

كيفية تحسين قيمة مؤشر FCP

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

أزل الموارد التي تحجب عمليات الإخراج

إن هذا العامل هو الأهم لتقليل زمن مؤشر FCP حيث أن الموارد التي تحجب عمليات الإخراج هي ملفات ضمن موقعك يجب على صفحتك إخراجها وتتضمن ملفات HTML و CSS وجافاسكريبت، وما يجعلها تحجب عمليات الإخراج أن لها أولوية موازنة بأي ملفات أخرى ضمن الصفحة مما يؤخر عملية تحميل الملفات الأخرى إلى حين الانتهاء من معالجة هذه الملفات حيث تُعلق أي صورة أو نص أو أي محتوى آخر إلى حين الانتهاء من تحميل هذه الموارد وتجهيزها.

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

إزالة هذه الموارد من مسار عمليات الإخراج يوفر مساحة لمعالجة المحتوى المرئي لذا تستطيع تأجيل معالجة هذه الموارد فمثلًا تجنب استخدام ‎@import ضمن ملفات CSS (استخدم بدلًا منها ‎@media) وتأكد من تصغير ودمج ملفات HTML و CSS وجافاسكربت (سوف أتكلم عن هذا في القسم التالي من المقال).

اعرض النص قبل وأثناء تحميل الخط

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

تستطيع استخدام متغيرات متنوعة لعرض النص حيث تستطيع إخبار المتصفح تحميل نص الموقع باستخدام نظام خط متوفر ثم استبداله بخط آخر بعد تحميله. لا يتجاوز حجم النص ضمن المحتوى العدة بايتات لذا يؤثر الطلب من المتصفح عرضه دون تأخير تأثيرًا إيجابيًا على مؤشر FCP، فقط عليك إضافة font-display:swap لأي شيفرة CSS تتضمن ‎@font-face، فهذا لوحده يمكن أن يُقصر زمن FCP لحد كبير.

تصغير حجم شيفرات الموقع

عملية تصغير الحجم هي بالتخلص من المحارف الإضافية مثل الفراغات من ملفات شيفرات الموقع مثل شيفرات جافا سكريبت و HTML و CSS، فالبرغم من أن الفراغات تُسهل علينا قراءة وتفسير شيفرة الملفات إلا أن المتصفح والخادم لا يحتاجها، وبما أن هذه الفراغات هي عبارة عن محارف تستهلك بايتات فإن التخلص منها وتقليل حجم الملفات المذكورة سوف يُقلص حجم الصفحة مما يؤدي لزيادة سرعة تحميلها وتحسين قيمة مؤشر FCP، ويمكن استعمال أدوات مساعدة لذلك مثل Gulp أو Webpack.

تخلص من شيفرة CSS غير المستخدمة

إن وجدت شيفرة ضمن ملفات التنسيق CSS فلم الاحتفاظ بها؟ يجب إزالة أي شيفرة قديمة أو غير مستخدمة كي لا تُحمّل في كل مرة يطلب فيها الموقع. تستطيع باستخدام أدوات المطورين في متصفح كروم البحث عن أجزاء من شيفرة CSS التي تُحمّل دون معالجة ضمن قسم Coverage.

تقليص الزمن لأول بايت TTFB

TTFB هو الزمن لوصول أول بايت بيانات للمتصفح ويرتبط مؤشر FCP بهذا المقياس لذا كلما كان زمن TTFB أقل حصلت على قيمة أفضل في FCP ويمكنك تحقيق ذلك باستخدام استضافة أقوى واستخدام شبكة تسليم محتوى وتفعيل التخزين المؤقت للموقع ضمن المتصفحات.

أبق على حجم شجرة DOM صغيرًا

إن الحجم الكبير لشجرة DOM هو أحد أكثر العوامل المؤثرة والتي تحد من حصول موقعك على قيمة FCP سريعة وبالنسبة لجوجل فإن العدد المثالي لعمق الشجرة هو أقل 32 عنصر وأقل من 60 عنصر بين أب وابن. يميل العديد من المصممين لتعقيد الصفحة الرئيسية وصفحات الهبوط في محاولة لإبهار الزوار لكن هذا يُضيف الكثير من العناصر لشجرة DOM ويسبب بدوه قيمة أعلى لمؤشر FCP. تستطيع التقليل من وطأة هذا الأمر بتقليل استخدام محددات CSS والاعتماد على أصناف CSS أكثر من المعرفات أو استلامات الوسائط المحدة.

إضافةً لما سبق، تستطيع تقليل عدد العناصر التي يُطبق عليها محدد ما حيث يستغرق المتصفح وقتًا أقل عند تحميل وتنفيذ التصميم على 5 عناصر موازنةً مع 10، وهذا أمر مهم في المتصفحات القديمة التي ما زال بعض المستخدمين يستعملونها.

استخدام صيغة SVG أو WebP للصور

هذه الخطوة ربما لا تؤثر على غالبية المواقع لذلك ذكرتها في نهاية القائمة، فالصور ليست أول ما يُرسم ضمن الصفحة خصوصًا عند موازنتها مع النص لكن تخفيض حجم الصور التي تستخدمها مثل شعار الموقع يُمكن أن يُساهم في تخفيض قيمة مؤشر FCP.

بالرغم من أن ملفات الصور gif و jpg و png هي الأكثر استخدامًا إلا أن الانتقال لاستخدام webp أو svg سوف يوفر عليك الكثير من الوقت حيث يُصبح حجم الصور بالبايتات بدلًا من الكيلو بايت وتستغرق زمنًا أقصر للتحميل، وبالنسبة لمستخدمي ووردبريس أصبح إصدار ووردبريس 5.8 يدعم صور webp. سوف تؤثر هذه الخطوة على مؤشر LCP أكثر من تأثيرها على مؤشر FCP لكن شعار svg صغير الحجم سوف يكون أول ما يراه زوار موقعك.

الأسئلة المتكررة حول أول محتوى مرئي FCP

أصبح لديك معلومات كافية عن مؤشر أول محتوى مرئي والأسئلة القادمة سوف تزيل ما تبقى من غموض في حال بقي شيء غامض لديك.

ما مدى تأثير مؤشر FCP على أداء موقعي؟

إن مؤشر FCP هو مقياس يُركز على المستخدم ومدى إدراكه لسرعة الموقع لكنه ليس بالضرورة مؤشرًا يدل على أداء الموقع فكما ذكرت سابقًا يمكن لموقعين أن يمتلكا نفس زمن التحميل لكن أحدهما يحقق قيمة FCP أقل ويُمكن أن يشعر المستخدم أنه أسرع، وبالتالي فإن ما يدركه المستخدم يؤثر على تجربة المستخدم.

ما هو الفرق أول رسم وأول محتوى مرئي؟

يختلف المؤشر أول رسم First Paint ومؤشر أول محتوى مرئي First Contentful Paint عن بعضهما تقنيًا حيث أن أول محتوى مرئي هو الزمن الذي يحتاجه المتصفح لإخراج أول عنصر ضمن DOM ضمن الصفحة والذي يمكن أن يكون خلفية صورة أو نص أو وسم div ضمن قائمة الترويسة أما مؤشر أول رسم هو عندما يُخرج المتصفح البايتات الأولى من المعلومات سواء كانت محتوى مرئي أم لا، فمثلًا تغيير في لون الخلفية ليس محتوى يمكن للمستخدم استقاء معلومات منه لذلك لا يمكن استخدامه كمثال لأول محتوى مرئي. ويمكن لمؤشر أول رسم أن يكون مشابهًا تمامًا لمؤشر FCP لكن FCP ربما تختلف عن الرسم الأول.

الخلاصة

إن مؤشر FCP هو مؤشر مهم جدًا لموقعك، وتُعد قيم جوجل لسرعات الصفحات واحدة من أكثر الجوانب أهمية لترتيب صفحتك، كما أن سرعة تحميل الموقع هي عامل أساسي لبقاء المستخدمين ضمن الموقع أو الخروج منه. تقليل زمن FCP سوف يؤدي لتحسن في تجربة المستخدم.

ترجمة -وبتصرّف- للمقال First Contentful Paint (FCP): What it is & How to Optimize your Website for it لصاحبه B.J. Keeton.

اقرأ أيضًا

• مدخل إلى مؤشر أضخم محتوى مرئي LCP في موقع الويب وكيفية تحسينه
• مدخل إلى مؤشر زمن وصول أول بايت TTFB في موقع الويب وكيفية تحسينه
• مقدمة في مؤشر انزياح الهيكل التراكمي CLS وكيفية تحسينه في موقعك

تطوير الويب Web Development هو أحد أشهر مجالات العمل الحر حاليًا، فهو واحدٌ من بين أكثر المجالات طلبًا في السوق التقنية، نظرًا لكونه يتعلّق بإنشاء وصناعة المواقع الإلكترونية وتطبيقات الويب بصورةٍ أساسيةٍ، حيث تحتاج إليه جميع المؤسسات والشركات والأفراد العاملون في هذا المجال.

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

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

جدول المحتويات

سنذكر هنا جدول المحتويات حرصًا على تنظيم المقالة ولتسهيل الوصول إلى القسم الذي تريده بسهولة:

• ما هي علوم تطوير الويب؟
• مجالات تطوير الويب
  • الواجهات الأمامية Front-End
    • لغات تطوير الواجهات الأمامية
    • المكتبات وأطر العمل المتوفرة للواجهات الأمامية
    • مصادر تعلم تطوير الواجهات الأمامية Front-End
  • الواجهات الخلفية Back-End
    • ما هي اللغات المتوفرة لبرمجة الواجهات الخلفية لمواقع الويب؟
    • أطر العمل المتوفرة لبرمجة الواجهات الخلفية للويب
    • ماذا سيمكنك أن تفعل بعد تعلم إحدى اللغات البرمجية؟
    • مصادر لتعلم تطوير الواجهات الخلفية Back-End
  • المطور الشامل Full-Stack
• ما هي فرص العمل بعد تعلم تطوير الويب؟
• كيف أختار مجال تطوير الويب المناسب لي؟
• خاتمة

ما هي علوم تطوير الويب؟

تطوير الويب Web Development هو المجال المختص بإنشاء وتطوير المواقع الإلكترونية وتطبيقات الويب التي تهدف إلى توفير ميزة أو خدمة معينة عبر الإنترنت.

توجد عدة مجالات فرعية لمجال تطوير الويب من أبرزها تطوير الواجهات الأمامية front-end web development وتطوير الواجهات الخلفية back-end web development، كما توجد هناك بعض المجالات الأخرى المرتبطة بتطوير الويب إلا أنها لا تتصل به بصورةٍ مباشرةٍ، مثل إدارة العمليات DevOps، وعملية إنشاء وإدارة وتأمين الخوادم Servers وكل ما يرتبط بها، فهي لا تندرج تحت علوم تطوير الويب بصورةٍ مباشرةٍ، إلا أن أي موقع إلكتروني يحتاج إليها لكي يعمل ويُواصل العمل بصورة جيدة. ومطور الويب قد لا يهتم بهذه التخصصات، وغير مطلوب منه دراستها، فهي تَتبَع تخصصات إدارة النظام System Administration وإدارة العمليات DevOps Engineering وما يَتفرّع منهما ولكن من الجيد لمطور الويب أن يتعلم بعض أساسيات هذين الفرعين وهذا ما سنعرضه في المقال.

بخصوص مجال الواجهات الأمامية Front-End ومجال الواجهات الخلفية Back-End فالأمر أشبه بالتسوّق في متجرٍ، فعندما يدخل الزبائن إلى متجر أو مطعم يتعاملون مع موظف الاستقبال مثلًا، دون أن يروا أو يعرفوا ما الذي يجري في الخلفية من أعمال تصنيع أو طهو أو تحضير أو غير ذلك، فهم يجلسون في غرفة الاستقبال وينتظرون الحصول على مشترياتهم أو طعامهم ثم يخرجون دون أن يتعاملوا مباشرةً مع جهة أخرى غير موظف الاستقبال أو المحاسب (واجهة المتجر).

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

ويتخصص بعض الناس في تطوير الواجهات الأمامية لمواقع الويب، بينما يتخصص آخرون في تطوير الواجهات الخلفية، إلا أن هناك بعض المطورين قادرين على تطوير كلا الواجهتين معًا، ونُطلِق عليهم المطورين الشاملين Full-Stack Developers.

مجالات تطوير الويب

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

الواجهات الأمامية Front-End

ذكرنا سابقًا أن مجال الواجهات الأمامية Front-End في تطوير الويب يختص بالمظهر الجمالي والهيكلة الأمامية للمواقع والتطبيقات الإلكترونية، واللغات المطلوبة لتطوير الواجهات الأمامية هي HTML و CSS و JavaScript.

لغات تطوير الواجهات الأمامية

يجري تطوير الواجهات الأمامية باستعمال لغة HTML ولغة CSS التوصيفية ولغة JavaScript البرمجية، وإليك شرح كلّ واحدةٍ على حِدة:

• HTML: هي لغة هيكلة أو توصيف بِنية صفحات الإنترنت، إذ تفهمها جميع متصفحات الويب؛ ويُحدِّد المطورين في هذه الهيكلة الأجزاء المختلفة من الصفحات الإلكترونية عبْر كتابة رموز بطريقة معينة لكي تفهمها المتصفحات، وبالتالي فهي تَعرِض في نهاية الأمر النصوص والعناصر بهيكلية وطريقة ظاهرة في الواجهة الأمامية يراها المستخدم وتشبه هذه اللغة هيكل السيارة وعناصرها الداخلية.
• CSS: هي لغة تنسيق تُستعمَل لتنسيق هيكلة وعناصر HTML لتسمح للمطورين بتغيير تنسيق العناصر التي تُعَرض للمستخدمين مثل الألوان والحدود والأشكال والخلفيات والرسوميات والصور، بمعنى أنه من دون CSS ستحصل على صفحاتٍ عديمة التنسيق والألوان، قد تبدو مثل صفحة ويب في عام 1991م، أي أن CSS تتحكم في كلّ شيءٍ مرئيٍ، وتشبه هذه اللغة عملية الطلاء والألوان التي تُضاف على هيكل السيارة.
• جافاسكربت: وهي لغة برمجة أصيلة، وعلى عكس اللغتين السابقتين فهي تحتوي على المنطق البرمجي المُتضِّمن للخوارزميات والمتغيرات وهياكل البيانات وإجراء الاتصالات وقواعد البيانات …إلخ، وتدعمها جميع متصفحات الويب، ويمكن تطوير مواقع إنترنت لا تستعمل جافاسكربت، إلا أن هذا سيُصِّعب العمل، كما سيحد من مميزات وخصائص الموقع بصورةٍ كبيرةٍ.

لاحظ كذلك نظرًا لقدرة جافاسكربت ودعمها القوي، قد تُستعمل مثل لغة برمجية للواجهة الخلفية Back-End فلا يقتصر استخدامها في برمجة الواجهة الأمامية فقط.

دورة تطوير واجهات المستخدم

ابدأ عملك الحر بتطوير واجهات المواقع والمتاجر الإلكترونية فور انتهائك من الدورة

اشترك الآن

وتُعَد اللغات الثلاثة السابقة بمثابة الثلاثي الذهبي لتطوير الواجهات الأمامية لمواقع الويب، وهناك إضافاتٌ لكلّ منها بالطبع، وكذلك أُطر عمل Frameworks ومكتباتٍ توفّر مزايًا إضافية لهذه اللغات، مما يُسهّل أو يُسِرع من عمل المطورين ولكن هذه مرحلةٌ لاحقةٌ لتعلّمها، فمطور الويب يجب أن يبدأ أولًا بتَعلّم أساسيات هذه اللغات الثلاثة وطريقة تفاعلها مع بعضها بعضًا، ثم يَنتقل بعد ذلك إلى المكتبات والإضافات وأُطر العمل وما شابه.

تجد توثيق كل هذه اللغات في موسوعة حسوب لمزيد من التفصيل والتوسع.

المكتبات وأطر العمل المتوفرة للواجهات الأمامية

سنذكر الآن سريعًا بعض أشهر المكتبات واُطر العمل الشهيرة المتوفرة لتلك اللغات، وبينما تُعَد أُطر العمل Frameworks برمجياتٌ ومكوَّناتٌ جاهزةٌ بالفعل تسهّل من عمل المطورين، بحيث أنهم لن يعودوا بحاجةٍ إلى برمجتها من الصفر في كل مرةٍ،تُعرّف المكتبات Libraries بأنها إضافاتٌ برمجيةٌ على اللغات نفسها، وذلك لإكسابها مميزاتٍ أكثر أو أفضل من السابق.

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

مصادر تعلم تطوير الواجهات الأمامية Front-End

تُعَد دورة تطوير واجهات المستخدم من أكاديمية حسوب أشمل مصدر عربي متوفر حاليًا لتعلم مجال تطوير الواجهات الأمامية؛ حيث تُشرح فيها جميع هذه التقنيات بالإضافة إلى المكتبات وأُطر العمل الشهيرة في السوق، فهي دورةٌ شاملةٌ تزيد مدتها عن خمسين ساعةً، وهي مشروحةٌ بالكامل باللغة العربية الفصحى، وستحصل على ضمان استرداد ما أنفقته من نقودٍ خلال 6 أشهرٍ، هذا بالإضافة إلى أمرٍ مهمٍ جدًا، وهو المتابعة المستمرة أثناء تعلّمك من مدربين متخصصين مع تسليمك مشاريع عملية لتنفيذها ومراجعتها لك.

كما يمكنك الاطلاع على المصادر التالية:

• HTML: كتاب نحو فهم أعمق لتقنيات HTML5، حيث سيعلّمك كل ما تحتاجه عن HTML، كما يشمل الإصدار الأخير منه تقنية HTML5، وستتعمق في أساسيات لغة HTML، وكيف نشأت وما هي معاييرها كما ستطّلع على أهم المعلومات التي يجب عليك معرفتها لإنشاء الصفحات بها، وذلك في أكثر من 350 صفحة.
• CSS: مقال تعرف على أساسيات CSS، وهو مدخلٌ جيدٌ للغة التنسيق الشهيرة CSS، وبعدها يمكنك قراءة ما تشاء من المقالات الأخرى المتقدِّمة على قسم CSS من أكاديمية حسوب، كما يمكنك تحميل كتاب التحريك في CSS لرؤية بعض أهم مميزات هذه اللغة وهي التأثيرات الحركية.
• جافاسكربت: دليل تعلم جافاسكربت، وهي سلسلةٌ شاملةٌ وكاملةٌ لتعلم جافاسكربت من الألف إلى الياء، ويمكنك تصفّحِ كلّ المقالات المنشورة حاليًا على الأكاديمية والاستفادة منها (ارجع إلى أول مقال منشور في السلسلة وابدأ القراءة من هناك).

هنالك أيضًا موسوعة حسوب، وهي موسوعة عربية شهيرة تخصص في ترجمة توثيقات لغات البرمجة وتقنيات تطوير الويب ومكتباتها، فهي تحتوي على توثيقات كاملة لهذه اللغات البرمجية بالإضافة إلى مكتباتها وإضافاتها الشهيرة، ويمكنك الاطلاع عليها متى ما احتجت إلى فهم شيء، ومن بين توثيقاتها: توثيق HTML وتوثيق CSS وتوثيق جافاسكربت، وننصح كذلك بقراءة مقال أساسيات بناء تطبيقات الويب لفهم طريقة تفاعل وعمل HTML و CSS و JavaScript مع بعضهم البعض.

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

الواجهات الخلفية Back-End

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

ما هي اللغات المتوفرة لبرمجة الواجهات الخلفية لمواقع الويب؟

تُعَد لغة PHP أشهر لغة برمجية لتطوير الواجهات الخلفية لمواقع الويب وتطبيقات الويب إذ لا يوازيها في ذلك أي لغة أخرى، وذلك لأنها واحدةٌ من أقدم اللغات البرمجية المستخدمة في تطوير الويب، وزادت شهرتها بعد انتشار أنظمة إدارة المحتوى CMS مثل ووردبريس WordPress وجوملا Joomla ودروبال Drupal، فجميعها تعمل بلغة PHP، مما أجبر أغلب شركات الاستضافة آنذاك (في العقد الأول من القرن الحالي) على دعمها افتراضيًا عِوضًا عن اللغات الأخرى.

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

وتُعَد أنظمة إدارة المحتوى سوقًا بذاتها؛ فتطوير قوالب ووردبريس WordPress بمثابة سوق عملاق عالميًا عليه الكثير من العرض والطلب، وبينما تُستعمَل لغة PHP في تطوير الواجهة الخلفية (حيث أن سكربت ووردبريس يعمل بها)، تُستعمل لغات HTML و CSS وجافاسكربت لإنشاء الواجهات الأمامية كما ذكرنا آنفًا.

بعد لغة PHP، تأتي مجموعةٌ أخرى من اللغات البرمجية التي يمكن من خلالها برمجة مواقع وتطبيقات الإنترنت مثل بايثون وذلك عن طريق إطاريْ العمل فلاسك وجانغو، وروبي مع إطار العمل ريلز Ruby on Rails، وجافا، كما يمكنك أن تستخدم جافاسكربت للواجهة الخلفية، فهي لغةٌ تدعم كلا الواجهتين الأمامية والخلفية، وذلك عن طريق إطار Node.js.

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

أطر العمل المتوفرة لبرمجة الواجهات الخلفية للويب

إليك قائمةٌ بأشهر أطر العمل المتوفرة التي يمكنك تعلمها بعد تعلم لغة البرمجة:

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

ماذا سيمكنك أن تفعل بعد تعلم إحدى اللغات البرمجية؟

سيُمكّنك تعلم البرمجة بإحدى لغات برمجة الواجهة الخلفية في مجال تطوير الويب التي أشرنا إليها آنفًا مما يلي:

• تطوير موقعٍ إلكترونيٍ بالكامل من الصفر؛ بحيث يتواصل مع نظام قاعدة بيانات معين ثم يَعرِض كلّ ما يحتاجه الزائر من خدمات أو معلومات.
• تطوير تطبيقات ويب توفر خدمات للمستخدمين مثل مواقع الشبكات الاجتماعية ومواقع ضغط المستندات ومواقع تشفير الملفات ومواقع تجميع الصور… إلخ.
• بناء قوالب جاهزة لأنظمة إدارة المحتوى الشهيرة مثل ووردبريس WordPress أو روبي Ruby أو دروبال Drupal، بحيث تُبرمج بنفس اللغة.
• بيع أنظمةٍ جاهزةٍ (سكربتات برمجية) تؤدي خدمات معينة على مواقع مثل بيكاليكا، حيث يشتريها المستخدمين منك ويُثبّتوها على خواديمهم، وبذلك يحصلوا على تطبيقات الويب الخاصة بهم.

مصادر لتعلم تطوير الواجهات الخلفية Back-End

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

ونرشّح دورة علوم الحاسوب من أكاديمية حسوب لأجل ذلك، فهي دورةٌ شاملةٌ تزيد مدتها عن 35 ساعة، وستُعلّمك كل ما ستحتاج إليه للبدء، وإذا كانت لديك المعرفة الأساسية حول البرمجة أو علوم الحاسوب عمومًا وأردت الدخول مباشرةً في تطوير الويب بإحدى هذه اللغات البرمجية، فيمكنك الاطلاع على دورة تطوير الويب بلغة PHP أو دورة تطوير الويب بلغة Ruby، وكلاهما من أكاديمية حسوب أيضًا.

ولمزيدٍ من الاطلاع، لديك هذه المصادر الإثرائية:

• توثيقات موسوعة حسوب العربية التالية: PHP - Python - Ruby - Node.js.
• كتاب البرمجة بلغة بايثون، وهو كتاب مهم، يشرح معظم أجزاء اللغة باللغة العربية.
• ملاحظات للعاملين بلغة PHP، وهو كتاب قيد الإنشاء من الأكاديمية، ولكن يمكنك الاطلاع على الدروس المنشورة، حيث تُمثّل أغلب محتوى الكتاب إلى اللحظة.
• كما ستحتاج لفهم بعض أنظمة قواعد البيانات بالطب، ولهذا يمكنك الاطلاع على كتاب الدليل العملي إلى قواعد بيانات PostgreSQL وكتاب ملاحظات للعاملين بلغة SQL وكتاب تصميم قواعد البيانات. وقواعد MySQL، و MariaDB المشتقة عنها، فهي أشهر مشتقاتها، ويمكنك البحث عن أي فيديوهاتٍ عنها على يوتيوب.

المطور الشامل Full-Stack

يشمل تطوير الواجهتين الأمامية والخلفية معًا Full-Stack Developer، وهو تَخصُّصٌ آخر من تخصصات تطوير الويب، يجمع بين تطوير الواجهتين الأمامية والخلفية، إلا أنه يزيد عليهما بإمتلاك الشخص لبعض الخبرة في إدارة العمليات DevOps، حيث سيُطلب منه استلام كامل المشروع من الألف إلى الياء بما في ذلك النشر Deployment.

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

ولكن بعض الناس يتخصص في مجالٍ واحدٍ بدلًا من المجالين معًا فتجد من يستطيع تصميم واجهة موقع ووردبريس، ولكنه لا يجيد لغة PHP، وبالتالي سيأخذ مبلغًا معينًا فقط لبرمجة ملفات HTML و CSS وجافاسكربت، وآخرون لا يجيدون تصميم الواجهات الأمامية بصورةٍ جيدةٍ، ولكنهم يجيدون لغة PHP مثلًا أو روبي باحترافيةٍ شديدةٍ، وهؤلاء قادرون على أخذ ملفات الواجهة الأمامية وبناء واجهة خلفية لتكتمل بها أو مثلًا بناء قالب WordPress متكامل يمكن استعماله وغيرها من الحالات.

ولكي تكون مطور ويب شامل أي مطور واجهات أمامية وخلفية، فيجب عليك دراسة كلِا المجالين السابقين معًا (بدءًا من الواجهة الأمامية وانتهاءًا بالواجهة الخلفية)، كما ستحتاج إلى بعض الخبرة في إدارة العمليات، ويمكنك الاطلاع عليها من دروس DevOps بالعربية على أكاديمية حسوب. ويمكنك كذلك الاطلاع على دورة تطوير التطبيقات بجافاسكربت، فهي دورةٌ شاملةٌ تشرح لك كيفية استخدام جافاسكربت، سواءًا للواجهة الأمامية أو الخلفية، وكذلك كيفية تطوير تطبيقات الهواتف.

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

ما هي فرص العمل بعد تعلم تطوير الويب؟

بعد أن تنتهي من تَعلّم تطوير الويب والتخصص بالواجهات الأمامية مثلًا، فسيصبح اسمك مطور واجهات أمامية front end developer، وسيكون بمقدورك:

• تطوير الواجهات الأمامية لأي موقع ويب مثل المتاجر الإلكترونية ومواقع المحتوى والمدونات ومواقع الخدمات ولوحات التحكم وتطبيقات الويب …إلخ.
• إنشاء مواقع ويب ثابتة Static Websites تسمح لك بعرض محتوى ثابت لا يتغير للزوار، مثل مواقع المحتوى والمدونات التي يزورها القُرّاء للاستفادة والقراءة.
• إنشاء صفحات هبوط Landing Pages أو مواقع إنترنت بسيطة للشركات والمؤسسات التي تريد عرض صفحات تحتوي على معلومات موجزة مثل معلومات التواصل وصور للمنتجات بحيث يمكن للزوار قراءتها بصورة سريعة.
• تحويل أي قالب واجهة أمامية مُصوّر مثل القوالب المُصوّرة على فوتوشوب Adobe Photoshop أو التصميمات المنفذة على برامج مثل adobe XD أو فيجما figma أو أي تطبيق يصمم الواجهات الأمامية إلى شيفرات ويب حقيقية (تدعى الوظيفة تحويل قالب PSD إلى HTML عادة).

ومجال تصميم الواجهات الأمامية في عملية تطوير الويب مرتبط بمجال واجهات المستخدم وتجربة المستخدم UI / UX ويكون لمطور الواجهات الأمامية عادةً تواصل مباشر أو عبر قائد الفريق مع مصمم الواجهة وفريق تجربة المستخدم أثناء العمل على المشروع لأي استفسار أو تعديلات مطلوبة.

تجد أحيانًا مشاريع عمل متعلقة فقط بتحول تصميم جاهز إلى شيفرة (تدعى عملية تكويد أحيانًا)، وأقتبس صورة عن مشروع من منصة مستقل على سبيل المثال لا الحصر:

أما إن تخصصت في مجال تطوير الواجهات الخلفية، فسيصبح مسماك الوظيفي مطور واجهات خلفية back end developer وسيكون بمقدورك:

• التعامل مع قواعد البيانات من إنشاء وتعديل وإدارة (عبر أنظمة إدارة قواعد البيانات DBMS) لإنشاء قاعدة بيانات الموقع وإدارتها.
• بناء الواجهة الخلفية لموقع ويب التي تكون من طرف الخادم عبر إحدى أطر العمل المتوفرة التي ذكرناها في الأعلى.
• بناء واجهات برمجية API بما يتناسب مع متطلبات الموقع أو التطبيق، ومن الممكن العمل على موقع موجود مسبقًا لتطويره والإضافة عليه.
• صيانة الواجهات الخلفية وقواعد البيانات وتأمين الأنظمة وحمايتها وتوليد التقارير اللازمة.
• التطرق أحيانًا لعمليات النشر وإداة العمليات DevOps البسيطة وأنظمة التشغيل وأنظمة الحوسبة السحابية وخدماتها.

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

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

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

كيف أختار مجال تطوير الويب المناسب لي؟

حسنًا، وصلنا الآن إلى أهم قسم من هذا المقال، والسؤال المطروح هو: كيف أختار المسار واللغات وأطر العمل المناسبة لي من بين كل هذه الخيارات المحيّرة؟

والجواب بسيطٌ: جرّبها، ثم انظر في نفسك هل تستمع بالعمل معها أم لا.

وبلا شكّ إن كنت ستدخل مجال تطوير الويب من كلا بابيه، فستحتاج أولًا إلى تعلم لغة HTML ثم تعلم لغة CSS وبعدها تعلم لغة جافاسكربت، فهذه اللغات أساسيةٌ لأي مطور ويب مهما كان تخصصه، ولكن التعمّق فيها خاصٌ بتطوير الواجهات الأمامية كما رأينا ويأخذ مطور الواجهات الخلفية بعدها مسارًا آخر كما وضحنا في خارطة الطريق لمطور الواجهات الأمامية ومطور الواجهات الخلفية لذلك فهما تخصصان مختلفان كما شرحنا.

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

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

خاتمة

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

سعداء لاستقبال أي تعليق أو استفسار في مربع التعليقات أدناه، ونرجو أخيرًا لك كل التوفيق والسداد!

اقرأ أيضًا

• ما هي فوائد تعلم البرمجة؟

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

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

تصور أنك تُحمّل موقعًا ويظهر كأنه جاهز للتصفح، فتضغط على الصور المميزة لمدونة لقراءتها وفجأةً تنزاح الصفحة بكاملها بسبب تحميل عنصر جديد، وتضغط على عنصر مختلف كليًا عن المدونة التي أردت قراءتها ولتُحمّل صفحةً لم تكن تنوي تصفحها. إن عانيت من هذا الأمر من قبل فأنت تعلم ما هو انزياح الهيكل التراكمي CLS -اختصارًا للعبارة Cumulative Layout Shift- وكم يؤثر سلبًا على تجربة المستخدم ضمن موقعك.

يُعبر انزياح الهيكل التراكمي CLS عن كمية الانزياح الحاصل ضمن صفحة أثناء تحميلها وسوف أشرح ضمن هذا المقال معناه بصورة أعمق وكيفية قياسه وما النتائج التي تعتبر جيدةً له وكيفية تحسينها.

ما هو انزياح الهيكل التراكمي CLS

لا يوجد طريقة لتوضيح ما تعنيه قيمة مرتفعة لمؤشر CLS أفضل من مثال مرئي (أي قيمة أعلى من 0.10 ضمن أداة جوجل PageSpeed Insights)، لذا إليك موقعًا ذو مُخطط ينزاح أثناء تحميل الصفحة، ولاحظ أنني لا أحرك الصفحة نهائيًا حيث أن مجال رؤية المستخدم ثابت لكن الصفحة تنزاح تدريجيًا لوحدها.

عند زيارة مستخدم لهذا الموقع فإنه لا يعلم متى ينتهي الموقع من التحميل وبالتالي سوف يحاول الضغط على عنصر ما لكن الهيكل سوف ينزاح مما يؤدي إلى ضغطه على عنصر آخر وبالتالي سوف يصل لعنوان صفحة مختلفة ويُضظر لإضاعة الوقت بالعودة للصفحة السابقة وهكذا. في حال تكرار هذه العملية عدة مرات فعلى الغالب لن يعود هذا المستخدم لزيارة الموقع مستقبلًا.

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

لا يمكن تطبيق مبدأ التصميم المعقد كقاعدة عامة، فبالنظر لموقع أمازون على سبيل المثال فإن تصميمه ليس بسيطًا لكن مع ذلك لا يمتلك أي انزياح في هيكله (لا قيمة تُذكَر للمؤشر CLS) عند تصفحه.

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

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

يُعد مؤشر انزياح الهيكل التراكمي CLS واحدًا من ثلاث مؤشرات أساسية في الويب يقيسها جوجل لمساعدته على تقييم الموقع إن كان يوفر تجربة مستخدم جيدةً، والمؤشرين الآخرين هما تأخر الاستجابة الأولى FID وأضخم محتوى مرئي LCP والتي تستحق منك كل مجهود تبذله لتحسينها.

كيفية قياس مؤشر انزياح الهيكل التراكمي CLS

تستطيع معرفة إن كان موقعك يُظهر أي علامات انزياح للهيكل وذلك من خلال زيارته باستخدام أجهزة مختلفة من وقت لآخر، وعند عمل ذلك تستطيع مراقبة ما إذا كانت الصفحة تُظهر أي عمليات انزياح أثناء التحميل. تختلف تجربة انزياح الهيكل التراكمي حسب الجهاز المستخدم وحسب جودة الموقع، لذا فإن أفضل أداة لقياس هذا المؤشر في موقعك هي PageSpeed Insights وبما أن هذا المؤشر من المؤشرات المهمة لتقييم جوجل لموقعك تستطيع معرفة قيمته مباشرةً من جوجل.

تسمح لك هذه الخدمة بإدخال رابط موقعك ثم تعرض لك نتيجةً عامةً لأداء الموقع تعتمد على آخر 28 يومًا من البيانات التي جمعها جوجل عن موقعك. ترتبط النتيجة التي حصلت عليها مع عدة مؤشرات منها CLS وFCP وLCP.

اخترت لهذا الاختبار موقعًا يمتلك انزياح هيكل تراكمي غير ملحوظ، وأكد على هذا الأمر النتائج الإيجابية التي عرضتها أداة PageSpeed Insights حيث تجد نتيجةً إيجابيةً لمؤشر CLS. لاحظ أن أداة PageSpeed Insights توفر نسبةً مئويةً لكل نتيجة وفي المثال السابق فإن 91% من المستخدمين لم يختبروا أي انزياح عند تحميل الموقع لكن البقية وهم نسبة قليلة لاحظوا انزياحًا أثناء تحميل الموقع.

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

توفر أداة PageSpeed Insights ما يُدعى ببيانات المختبر Lab Data وهي نتائج مؤشرات الأداء بناءً على اختبار واحد للموقع بدلًا من البيانات المُجمّعة لفترة طويلة من الزمن والتي تُسمى بيانات الحقل أو الميدان Field Data.

في الاختبار السابق لأحد المواقع حصلت على مؤشر CLS مساو للصفر لذا سوف أقارن النتائج السابقة مع موقع آخر لا يمتلك نتائج جيدة مماثلة لمؤشر انزياح الهيكل التراكمي.

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

كيفية التعرف على مسببات انزياح الهيكل التراكمي

تستطيع من خلال أدوات المطور في جوجل كروم التعرف على العناصر المُسببة لانزياح الهيكل التراكمي، اضغط على CTRL+SHIFT+I ثم توجه لقسم Performance حيث تستطيع تسجيل اختبارات أداء الصفحة أثناء تصفحها.

بعد إيقاف التسجيل سوف تُظهر أدوات المطور في جوجل كروم سجلًا زمنيًا يعرض أزمنة التحميل والطلبات الفردية والمؤشرات المهمة للويب، ومن هذا السجل الزمني تستطيع اختيار أحداث انزياح الهيكل التي توجد ضمن قائمة التجربة Experience لتتمكن من رؤية العناصر المسؤولة عن هذه الانزياحات.

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

كيفية تحسين الموقع للحصول على قيمة أفضل لمؤشر CLS

يوجد متهمان اثنان عندما يتعلق الأمر بالقيمة المرتفعة لمؤشر انزياح الهيكل التراكمي هما ملفات الوسائط والإعلانات، فعلى سبيل المثال إن رفعت صورة بدقة مرتفعة بدون تعيين الارتفاع والعرض فعلى الغالب سوف تُؤثر على ترتيب العناصر ضمن هيكل الصفحة. يُفضل استخدام صور بنفس الأبعاد التي تريد عرضها بها لأن هذا أفضل من ناحية الأداء فلا يُضيع المتصفح وقتًا (قدرة معالجة) على تعيين الحجم الصحيح للصورة، إلا أن هذا غير ممكن في جميع الأحيان، وهنا يجب عليك ضبط سمات العرض والارتفاع لكل صورة تريد عرضها ليعلم المتصفح المكان الصحيح لعرضها دون الحاجة لإزاحة هيكل الصفحة في آخر لحظة.

إليك مثالًا يوضح استخدام سمات الارتفاع والعرض للصورة ضمن شيفرة HTML.

<img src="http://imageurl.com" width="120" height="90" alt="Image Alt Text">

تستطيع بعض إضافات تحسين الصورة في ووردبريس تعيين حجم الصورة أثناء رفعها بحيث تضبط سمات العرض والارتفاع كما يجب، وعندما تحتاج لصور ذات أبعاد متكيفة تستطيع الاعتماد على CSS بدلًا من الإعلان الصريح عن الارتفاع والعرض حيث يوفر لك CSS خاصية max-width التي تُخبر المتصفح بالنسبة المئوية التي سوف تحجزها الصورة من المساحة المرئية للمستخدم.

img {
max-width: 90vw;
height: auto;
}

في المثال السابق أطلب من المتصفح تعيين حجم الصورة لتأخذ 90% من المساحة المعروضة للمستخدم، وبنفس الوقت ضبط الارتفاع للقيمة auto ليحسب المتصفح الارتفاع المثالي بناءً على العرض الجديد ونسبة العرض.

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

الأسئلة المتكررة حول مؤشر انزياح الهيكل التراكمي CLS

ربما تجد أن انزياح الهيكل التراكمي أكثر تعقيدًا من مؤشري LCP و FCP لذا من المفيد الاطلاع على أكثر الأسئلة المتكررة حول هذا المؤشر والإجابات عن هذه الأسئلة.

ما مدى تأثير مؤشر CLS على موقعي؟

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

هل قيمة أقل لمؤشر CLS أفضل من نتائج جيدة في مؤشر FCP ومؤشر LCP؟

يهتم العديد من المستخدمين بنتائج مؤشر FCP ومؤشر LCP أكثر من CLS كون هذين المؤشرين يرتبطان بسهولة أكبر بالأداء العام للموقع، وبالرغم من أن FCP مؤشر مرتكز على المستخدم بقوة إلا أن قياس CLS أصعب لمجموعة كبيرة من المستخدمين.

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

فكر دومًا، ما الفائدة من التحميل السريع لأضخم محتوى مرئي إن كان سوف ينزاح لأسفل الشاشة حالما يظهر للمستخدم؟

ما النتيجة التي تعد جيدة لمؤشر CLS؟

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

الخلاصة

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

إن مؤشر انزياح الهيكل التراكمي أحد مؤشرات الويب المهمة التي يستخدمها جوجل لقياس تجربة المستخدم عمومًا ضمن الموقع، حيث أن الزوار هم الهدف الرئيسي لوجود أي موقع لذا فإن تجربتهم ضمن موقعك هي النقطة الأهم، وقيمة منخفضة لمؤشر CLS (أقل من 0.1) تعني أن موقعك يُحمّل من قبل معظم الزوار دون أي انزياحات ملحوظة ضمن هيكل الصفحة.

ترجمة -وبتصرّف- للمقال Cumulative Layout Shift (CLS): What It Is & How to Optimize Your Website for It لصاحبه Will Morris.

اقرأ أيضًا

• مدخل إلى مؤشر أضخم محتوى مرئي LCP في موقع الويب وكيفية تحسينه
• مدخل إلى مؤشر زمن وصول أول بايت TTFB في موقع الويب وكيفية تحسينه

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

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

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

أصبحت البيانات الضخمة Big Data حديث الناس في الآونة الأخيرة، ولكن ما هي البيانات الضخمة حقيقةً؟ كيف بإمكانها تغيير طريقة فهم الباحثين للعالم سواءً كانوا يعملون في الشركات، أو الهيئات غير الربحية، أو الجهات الحكومية، أو المؤسسات وغيرها من المنظمات؟ ما هي مصادر البيانات، كيف تُعالج، وكيف تُستخدم مخرجات عملية المعالجة؟ ولماذا يُعَد مفهوم المصادر المفتوحة أساسيًا في الإجابة عن التساؤلات السابقة؟

سنتعرّف في هذا المقال على كل ما يتعلّق بمفهوم البيانات الضخمة وأهميته في عالمنا المتغير.

ما هي البيانات الضخمة؟

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

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

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

ما هي أنواع مجموعات البيانات التي تعد بيانات ضخمة؟

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

استخدامات البيانات الضخمة أعم من ذلك بكثير، وأحد أكبر مصادر البيانات بكميات هائلة هي البيانات المالية، متضمِّنًا أسعار الأسهم والبيانات المصرفية وسجلات دفعات التجار، والمصدر الثاني هو بيانات أجهزة الاستشعار، إذ تأتي معظم هذه البيانات من ما يعرف باسم إنترنت الأشياء Internet of Things -أو اختصارًا IoT-، والتي قد تمثّل بيانات القياسات المأخوذة من قبل الروبوتات العاملة على خط إنتاج آلي في أحد مصانع السيارات، أو بيانات تحديد المواقع في شبكة اتصالات خلوي ما، أو بيانات كميات استهلاك الكهرباء اللحظية في المنازل والشركات، وصولًا إلى معلومات حركة الركاب الواردة من شركات النقل.

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

كيفية تحليل البيانات الضخمة

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

تتألف منهجية MapReduce بصورةٍ رئيسية من جزأين، إذ يتمثَّل الأول في دالة التعيين Map function، والتي تفرز وترشِّح البيانات عبر توزيعها ضمن فئات مما يسهّل عملية تحليلها؛ أمّا الجزء الثاني فهو دالة التقليص Reduce function، التي تختصر البيانات عبر تجميعها معًا. وقد أصبح MapReduce مصطلحًا شاملًا يشير إلى نموذجٍ عام تستخدمه العديد من التقنيات، ويعود الفضل في ذلك إلى حدٍ كبير للبحث الذي أجرته جوجل Google حول هذا النموذج.

ما هي الأدوات المستخدمة لتحليل البيانات الضخمة؟

تُعدّ Apache Hadoop الأداة الأكثر تأثيرًا وثباتًا في تحليل البيانات الضخمة؛ فهي إطار عملٍ واسع النطاق مفتوح المصدر يصنِّف ويعالج البيانات؛ كما يمكن لهذه الأداة أن تعمل على عتاد عادي استهلاكي commodity hardware (أو ما يُعرف باسم off-the-shelf hardware، وهي حواسيب أو أيٌ من تجهيزات تقانة المعلومات غير المكلفة وشعبية التوفّر، وتكون عادةً جدوى استبدالها بالكامل في حال حدوث أعطال أكبر من جدوى إصلاحها)، مما يجعلها فعّالة في الاستخدام مع مراكز البيانات الحالية، أو حتى لإجراء تحليل بيانات سحابي. وتُقسم Hadoop إجمالًا إلى أربعة أجزاء رئيسية:

• HDFS وهو مخزن بيانات يعتمد على نظام الملفات الموزعة، ومصمّمٌ للعمل مع حيز نطاق تراسلي عالٍ جدًا.
• منصة YARN المسؤولة عن إدارة موارد الأداة Hadoop وجدولة البرامج التي ستعمل على التجهيزات التي تستخدم هذه الأداة.
• نموذج إنجاز معالجة البيانات الضخمة وهو MapReduce المشروح أعلاه.
• مجموعة من المكتبات الشائعة الحاوية على نماذج معالجة بيانات أخرى قابلة للاستخدام.

كما يوجد أدوات أخرى للتعامل مع البيانات الضخمة، إذ تُعد Apache Spark إحدى هذه الأدوات التي تحظى باهتمام بالغ؛ فهي متميزة بقدرتها على تخزين كمية كبيرة من البيانات في الذاكرة لمعالجتها. وبذلك، وعلى عكس آلية التخزين على الأقراص، تُعد Apache Spark أسرع بكثير لا سيما لبعض أنواع تحليل البيانات، ففي بعض التطبيقات سيحصل المحللون باستخدام هذه الأداة على نتائج أسرع بمئات المرات أو أكثر. ويمكن للأداة Spark استخدام نظام الملفات الموزعة HDFS أو غيره من مخازن البيانات، مثل Apache Cassandra، أو OpenStack Swift؛ كما من الممكن تشغيل Spark على جهاز محلي، مما يسهّل عمليات الاختبار والتطوير.

بعض الأدوات الأخرى للتعامل مع البيانات الضخمة

يوجد إجمالًا عددٌ غير محدود من الحلول مفتوحة المصدر للتعامل مع البيانات الضخمة، وقد خُصِّصت عدّة حلول منها لتوفير ميزات وأداء أمثل لمجال معين أو حتى لتجهيزات معينة ذات إعدادات خاصّة، وما سنعرضه فيما يلي لا يمثّل سوى جزءٍ من الأدوات التي تتعامل مع البيانات الضخمة.

تدعم مؤسسة أباتشي Apache للبرمجيات Apache Software Foundation -أو اختصارًا ASF- عدّة مشاريع للبيانات الضخمة، ونذكر من هذه المشاريع المفيدة ما يلي:

• Apache Beam وهو نموذجٌ موّحدٌ لتعريف مجاري pipelines كلٍ من الدفعات batches وتدفقات البيانات المتوازية parallel، كما يسمح هذا النموذج للمطورين بكتابة الترميزات البرمجية التي تعمل على عدّة محركات معالجة.
• Apache Hive وهو مخزن بيانات مبني على Hadoop، ويُعد أحد مشاريع Apache عالية المستوى، إذ يسهّل قراءة وكتابة وإدارة مجموعات البيانات الكبيرة باستخدام SQL.
• Apache Impala وهو محرّك استعلامات في SQL يعمل مع الأداة Hadoop، وقد ضمِّن إلى حزمة Apache واشتُهر بقدرته على تحسين أداء استعلامات SQL باستخدام واجهة بسيطة مألوفة.
• Apache Kafka توفّر آلية تسمح للمستخدمين بالاتصال المستمر مع مصادر البيانات للحصول على البيانات باستقبال البيانات وتحديثاتها لحظيًا، وتهدف إلى تحقيق موثوقية عالية لدى استخدام أنظمة التخاطب المختلفة في نقل البيانات.
• Apache Lucene وهي مكتبة برمجية مختصّة بعمليات البحث وفهرسة البيانات؛ وتوفّر استعلامًا نصيًا لغويًا متقدّمًا لقواعد البيانات أو المستندات النصية full-text indexing؛ كما تستخدم أداة تصفية بيانات بالاعتماد على خوارزميات التعلم الآلي للتوصية بالعناصر الأكثر صلة لمستخدم معين recommendation engines، وتشكّل هذه المكتبة أساسًا للعديد من مشاريع البحث الأخرى مثل محركات البحث Solr وElasticsearch.
• Apache Pig وهي منصة لتحليل مجموعات البيانات الضخمة التي تعمل على الأداة Hadoop، وقد طورتها شركة ياهو Yahoo لإنجاز مهام MapReduce على مجموعات البيانات الضخمة، وكانت قد ساهمت ياهو في عام 2007 بها ضمن مشروع ASF.
• Apache Solr وهي منصة بحث متخصّصة للشركات، بُنيت اعتمادًا على مكتبة Lucene.
• Apache Zeppelin وهو مشروع احتضان (والاحتضان هو مرحلة وليس مكان، إذ تُحتضن المشاريع الجديدة لمدة عام أو عامين بهدف التطوير قبل الطرح). يتيح Apache Zeppelin إمكانية تحليل البيانات التفاعلية باستخدام لغة الاستعلامات SQL ولغات البرمجة الأخرى.

تتضمّن الأدوات المفتوحة المصدر للتعامل مع البيانات الضخمة والتي قد ترغب بالتعرف عليها ما يلي:

• Elasticsearch وهو محرّك بحث آخر للمؤسسات يعتمد على مكتبة Lucene، ويمثّل جزءًا من محرك البحث المُسمى المكدس المرن Elastic stack والمعروف باسم مكدّس ELK كونه مؤلفًا من ثلاث مكونات، هي: Elasticsearch و Kibana و Logstash (محرك بحث للاستعلام النصي المتقدّم للمستندات النصية، ذو واجهة ويب HTTP يعتمد أيضًا على مكتبة Lucene). يستطيع المحرك Elasticsearch توليد نتائجٍ من البيانات سواءً كانت هذه البيانات مهيكلة أم لا.
• Cruise Control والتي طوِّرتها شركة لينكد إن LinkedIn لتشغيل مجموعات Apache Kafka على نطاقٍ أوسع.
• TensorFlow وهي مكتبة برمجية للتعلّم الآلي، تطورت هذه المكتبة سريعًا عندما جعلتها شركة غوغل Google مفتوحة المصدر في أواخر عام 2015، ولطالما أُشيد بها لسهولة استخدامها وتوفُّرها للجميع.

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

ترجمة -وبتصرف- للمقال An introduction to big data من موقع opensource.com.

اقرأ أيضًا

• المفاهيم الأساسية لتعلم الآلة
• نظرة سريعة على لغة الاستعلامات الهيكلية SQL

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

لنحصل على نتيجة مشابهة لما يلي:

مهامك في هذا المشروع هي:

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

الدليل الموجز لإنشاء كتاب الكتروني

أنت بصدد إنشاء كتابٍ الكتروني، قد يكون عن قصةٍ ما، أو دليلًا تعليميًا، أو كتاب معلومات، أو كتابًا إلكترونيًا … جميع الخيارات متاحةٌ لك. يسمى الكتاب الإلكتروني بذلك لأنه يُنشئ ويقرأ على الحاسوب، أو على الهاتف المحمول، أو الأجهزة اللوحية أو الإلكترونية.

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

يجب على كتابك أن يحقق ما يلي:

• أن يحتوي على عدة صفحات يمكن الانتقال بينها.
• أن يحتوي على كائن واحد على الأقل.
• أن يحتوي أحداث مختلفة في كل صفحة.

يمكن لكتابك أن يحقق مايلي:

• أن يحتوي خطابًا أو مؤثراتٍ صوتية.
• أن يحتوي على نصوص أو رسومات من برنامج الرسام.
• أن يحتوي مؤثرات تفاعلية في كل صفحة

استلهم أفكارك

اطلع على المشاريع التالية لتستلهم الأفكار لكتابك:

• مشروع وحش الدغدغة:

• مشروع مغامرات القطة:

• مشروع المبرمج الصغير: انقر لاختيار الشخصية والعنصر الذي تريده في القصة، وانقر على المنصة لقلب الصفحة.

اختيار الفكرة

يجب عليك وضع خطة لكتابك وذلك إما بمجرد التفكير، أو عن طريق الرسم وتدوين أفكارك في مفكرة ما، أو بإضافة خلفيات وكائنات في برنامج سكراتش، اتبع الطريقة التي تفضلها!

فكر مليًا في الغرض من هذا الكتاب، واسأل نفسك لماذا تؤلفه؟ قد يكون هدف الكتاب واحدًا مما يلي:

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

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

حان الآن وقت تصميم خلفيات صفحات الكتاب والشخصيات والتي ستكون عبارةً عن كائنات سكراتش.

أنشئ مشروعًا جديدًا في برنامج سكراتش، وأبقِ قلمًا و ورقةً بالقرب منك، وفكر فيما يلي:

• ما هي الخلفيات والألوان التي تود استخدامها في كتابك؟
• كيف سينتقل القارئ بين الصفحات؟
• ما هي الشخصيات التي ستظهر في كتابك؟
• كيف ستتحرك الكائنات وتتفاعل في كل صفحة؟

صنع صفحات الكتاب

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

الكتل البرمجية

استخدام الخلفيات لإنشاء صفحاتٍ جديدة

تستخدم الخلفيات في سكراتش إما لإنشاء صفحاتٍ أو مراحل جديدة كما في المشروع التالي:

اضغط على المنصة ثم اضغط على علامة تبويب الخلفيات لاختيار الخلفيات التي تريدها، يمكنك تغيير ترتيب الخلفيات وذلك عبر سحبها ووضعها وفق الترتيب الذي تفضله.

توجد عدة طرق للانتقال بين الخلفيات وذلك باستخدام كتلة الخلفية التالية وإحدى الخيارات التالية:

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

العمل على تغيير مظهر الكائن

يمكنك استخدام كتلة غيّر المظهر مع كتلتي قُل أو فكر لإيضاح ما يفكر أو يشعر به الكائن، كما في المشروع التالي:

وذلك باستخدام الكتل التالية:

احرص على استخدام الكتل ذات القيم الزمنية كي تستطيع ملاحظة التغير في المظهر؛ وسيتم تحريك الكائن باستخدام المظاهر. 

شاهد حركة القنفذ في المشروع التالي:

يمكنك تحريك الكائن باستخدام كتلتي تغيير المظهر والتحرك داخل حلقة تكرار. كما يمكنك تغيير سرعة الكائن عبر تغيير الوقت في كتلة الانتظار:

يمكنك استخدام كتلة المظهر التالي مع كتلة تكرار لعرض جميع المظاهر التي يملكها الكائن. زِد عدد الخطوات في كتلة الحركة لجعل لزيادة سرعة الكائن، وغيّر العدد في كتلة التكرار إذا أردت تعديل المسافة. أما إذا أردت أن يتحرك الكائن للخلف، فاستخدم أرقامًا سالبة، أو كتلة اتجه نحو الاتجاه، وتحديد القيمة 90- لتغيير اتجاه الكائن قبل أن يتحرك.

انقر على زر العلم الأخضر لتفحص عمل مشروعك وكيفية تفاعل الكائنات. ثم انقر على العلم الأخر مرةً ثانيةً لتتأكد أن الكائنات عادت إلى موضعها الأصلي وإلى مظهرها الابتدائي.

استخدام مؤثرات بصرية

يمكن تطبيق عدة مؤثرات بصرية على الكائنات في سكراتش، كما في المثال التالي:

تحتوي كل من الكتلتين اجعل مؤثر اللون و "وغيّر مؤثر اللون" على نافذة منزلقة يمكن اختيار عدة تأثيرات منها لتغيير مظهر الكائنات وهي:

• اللون: يمكن اختيار القيم من القيمة 0 إلى القيمة 199 (تُدَور الأرقام الكبيرة، فيُعتَبر الرقم 200 كالرقم 0).
• عين السمكة: لا تعطي القيمة 0 أي تأثير، وكلما كبرت القيمة إزداد تأثير "عين السمكة" fisheye، أما القيم السالبة فتعطي تأثيرًا عكسيًا.
• الدوامة: لا تعطي القيمة 0 أي تأثير، وتعطي القيم الكبيرة الموجبة تأثيرًا أفعوانيًا نحو اليسار، أما القيم السالبة الكبيرة فتعطي تأثيرًا أفعوانيًا نحو اليمين.
• البكسلة: لا تعطي القيمة 0 أي تأثير، بينما تزيد القيم الكبيرة عدد البكسلات في الكائن.
• الموزاييك: لا تعطي القيمة 0 أي تأثير، بينما تغير القيم الكبيرة الموجبة والسالبة عدد النسخ.
• شدة الإضاءة: لا تعطي القيمة 0 أي تأثير، بينما تزيد القيم من 1 إلى 100 من سطوع الكائن، وتجعل القيم السالبة من القيمة 1- حتى القيمة 100- الكائن أكثر عتمةً.
• الشبح: لا تعطي القيمة 0 أي تأثير، بينما تزيد القيم من 1 إلى 100 من شفافية الكائن.

أسند قيمًا مختلفة للتأثيرات واكتشف كيف سيتغير مظهر الكائن باختلاف القيم.

ولاحظ أن القيمة 225 تعطي نفس تأثير القيمة 25 عند إسنادها لتأثير تغيير اللون، ولا يحدث أي تغيير على الكائن في باقي التأثيرات عند تجاوز القيمة العليا والدنيا للتأثير.

يمكنك إما استخدام كتلة أزل التأثيرات الرسومية أو الضغط على زر العلم لمسح التأثيرات.

أما إذا أردت تطبيق تأثير معين على الكائن أثناء تشغيل المشروع فضع كتلة تغيير المؤثر الرسومي تحت كتلة عند النقر على العلم الأخضر:

لا تنسى أنه يمكنك تطبيق هذه التأثيرات الرسومية واللونية على المنصة أيضًا.

إظهار الكائنات وإخفاؤها

قد ترغب في إظهار الكائنات في صفحاتٍ معينةٍ من الكتاب وإخفائها في أخرى، ولتحقيق ذلك اتبع ما يلي:

انتقل إلى الخلفية التالية وذلك بالنقر على المنصة، أو بالضغط على مفتاح المسافة Space في لوحة المفاتيح، كما يلي:

استخدم كتلتي الإظهار والإخفاء مع كتلة عندما تتغير الخلفية لإظهار الكائنات، أو إخفاءها، في الخلفيات المحددة.

استخدم كتلة عند النقر على العلم الأخضر كما يلي، لإظهار الكائنات، أو إخفاءها، في أول خلفية.

تغيير تموضع الكائنات باستخدام الطبقات

توجد طريقتان لوضع الكائنات في طبقات، الأولى: هي بسحب الكائن على المنصة لنقله إلى الطبقة الأمامية، كما يلي:

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

استخدم حلقة تكرار مستمرة لإبقاء الكائن في المقدمة أو في الخلف دائمًا، أو لإعادته إلى طبقته الصحيحة بعد تحريكه:

إضافة تأثير الاهتزاز

أضف الكتل التالية ليبدو الكائن وكأنه يهتز وذلك بتدوير الكائن بضع درجات باتجاه اليمين واليسار وتكرار ذلك عدة مرات، كما يلي:

محرر الرسوم Paint Editor

يتيح لنا برنامج الرسام العديد من الخيارات، سنستعرض منها مايلي:

إنشاء خلفية جديدة باستخدام محرر الرسوم: اختر رمز الرسام أو محرر الرسوم Paint من قائمة اختيار خلفية Choose a Backdrop:

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

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

كما يمكنك استخدام الأداة المستطيلة Rectangle tool، أو الأداة الدائرية Circle tool، أو الفرشاة Brush tool، أو استخدام الأدوات الثلاث جميعها لإضافة تفاصيل إلى الخلفية.

يُنصح بأن تسمي الخلفية باسمٍ يعبر عن محتواها عند انتهائك من التعديل عليها، ففي مثالنا رسمنا هضبة وسماء وسمينا الخلفية "هضبة":

ستظهر الخلفية على المنصة وستجدها أيضًا في كتل المظاهر :

إنشاء الخلفيات والكائنات باستخدام الأشكال: يمكنك إنشاء خلفيات ومظاهر للكائنات في الرسام باستخدام أشكال بسيطة.

أولًا، انقر على خيارالرسام من أيقونة اختيار خلفية أو من أيقونة اختيار كائن:

ثم اختر أداةً مما يلي لإنشاء الأشكال التي ترغب بها:

• الأداة الدائرية: اضغط على رمز الأداة لرسم دائرة، اضغط باستمرار على مفتاح Shift لمساعدتك بالرسم.

• الأداة المستطيلة: استخدم هذه الأداة لرسم مستطيل، واضغط باستمرار على مفتاح Shift لرسم مربع.

• الأداة المثلثة: يمكنك استخدام هذه الأداة لرسم مستطيلاتٍ أو مربعاتٍ أولًا، ثم الضغط على أداة تغيير الشكل لاختيار جزءٍ من الشكل وحذفه باستخدام أداة الحذف والحصول على شكل المثلث!

استخدم أداة ملء اللون لتغيير لون الشكل:

قد تحتاج لاستخدام أداتي طبقة إلى الأمام و طبقة إلى الخلف لتغيير موضع الشكل في الخلفية:

كما يمكنك تحديد عدة أشكال ومعاملتها كشكل واحد باستخدام أداة التجميع Group وبذلك يسهل عليك تحريك الأشكال وتعديلها:

إليك مثالًا عن كائنٍ أنشأناه باستخدام الأداة الدائرية والمستطيلة، كما يمكنك الانتقال إلى محرر سكراتش للتعديل عليه:

لا تنسى تسمية الأشكال والخلفيات التي أنشأتها في الرسام بأسماء مناسبة.

استخدام أداة النصوص: يمكنك اختيار لون النص بالنقر على أداة ملء اللون :

ثم اختر أداة النص.

اضغط على شاشة الرسام ثم اكتب النص الذي تريده، ثم اختر نوع الخط الذي تريده من قائمة الخطوط المنسدلة :

اضغط على أداة السهم أو التحديد لتغيير حجم النص، ثم اسحب أحد الحواف لتغيير الحجم:

استخدم أداة ملء اللون (وشكلها الدلو) لتغيير لون النص؛ اختر اللون أولًا، ثم اسحب مؤشر الفأرة فوق النص ليتغير لونه (أو اضغط على النص إذا كنت تستخدم جهازًا لوحيًا):

استخدم الخطوات السابقة للحصول على كلمات ذات ألوان وحجوم مختلفة في النص. غير مكان النص باستخدام مؤشر التقاطع:

استخدم أداتي طبقة إلى الأمام و طبقة إلى الخلف لتغيير موضع الشكل في الخلفية:

تعديل مظهر الكائنات: اضغط على علامة تبويب المظاهر وأنشئ نسخة من المظهر الذي تود تعديله، ليتسنى لك استخدامه فيما بعد، وذلك بالضغط بالزر اليميني للفأرة على المظهر واختيار مضاعفة:

ثم احذف الأجزاء التي لا ترغب بها، وذلك عن طريق تحديدها بأداة السهم ثم الضغط على أداة الحذف:

سيبدو المظهر بعد الحذف كما يلي:

تذكر أنه يمكنك التراجع عن أي خطوة بالضغط على رمز التراجع التالي:

حدد الآن الجزء الذي تود نسخه من المظهر ثم اضغط على خيار النسخ:

إذا أردت إضافة جزء من مظهر غير موجود في علامة تبويب المظاهر، فيجب عليك إضافة المظهر إلى الكائن أولًا، وذلك بالنقر فوق أيقونة اختيار مظهر، ثم البحث عنه والنقر فوقه لإضافته إلى كائنك:

اضغط على خيار اللصق لإضافة الجزء الذي نسخناه سابقًا، سيبدو المظهر كما يلي:

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

إضافة مظهر جديد للكائن

انقر على علامة تبويب المظاهر ثم انقر على أيقونة اختيار مظهر لإضافة مظهر من المكتبة:

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

الأصوات

إضافة صوت للكائنات على المنصة: حدد الكائن الذي تريد إضافة صوتٍ له، ثم اضغط على علامة تبويب الأصوات، ولاحظ أن لكل كائن صوت افتراضي خاص به:

يحتوي برنامج سكراتش على مكتبة أصوات يمكنك الاختيار منها وإضافتها إلى الكائنات، وذلك عبر الضغط على رمز إضافة صوت للوصول إلى مكتبة الأصوات:

ضع مؤشر الفأرة (أو إصبعك، إذا كنت تستخدم جهازًا لوحيًا) فوق رمز التشغيل، لتشغيل الصوت:

ثم اضغط على الصوت الذي ترغب به لإضافته إلى الكائن، ستنتقل بعدها إلى علامة تبويب الأصوات وسيظهر الصوت الذي اخترته:

ستجد الصوت الجديد الذي أضفته ضمن قائمة كتل الصوت في علامة تبويب الأصوات:

كما يمكنك إضافة أصوات للمنصة.

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

اضغط على رمز إضافة صوت ثم اضغط على رمز التسجيل:

ثم اضغط على زر التسجيل البرتقالي عندما تكون جاهزًا للتسجيل:

واضغط على زر إيقاف التسجيل عند الانتهاء:

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

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

ستجد الصوت الجديد الذي سجلته ضمن كتل الصوت في علامة تبويب الأصوات:

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

انقر على زر إدراج إضافة:

واختر إضافة نص إلى كلام:

ستلاحظ إضافة كتل النص إلى كلام إلى قائمة كتل سكراتش:

يمكنك جعل الكائنات تنطق عند النقر عليها، كما يمكنك اختيار اللغة التي ستتحدث بها، باستخدام الكتل التالية:

كما يمكنك أيضًا اختيار صوت المتحدث، سواء أردت صوت امرأة، أم رجل، أو حتى صوت هرة!

محرر سكراتش

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

أما إذا أردت نقل الكتل من كائن إلى آخر، فيمكنك حذف الكتل من الكائن الأول بعد نسخها إلى الآخر.

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

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

نسخ الكائنات: انقر بزر الفأرة الأيمن (أو انقر مع الاستمرار إذا كنت تستخدم جهازًا لوحيًا) على أول كائن في قائمة الكائنات أسفل المنصة:

ثم اختر مضاعفة، ستحصل على نسخة ثانية من الكائن مضافًا إليها الرقم 2 على الاسم:

أعد تسمية الكائن من المستطيل أعلى الشاشة:

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

تصحيح الأخطاء

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

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

• مشكلة قفز الكائن أو اهتزازه عند تغيير مظهره: احرص على وضع المظهر في منتصف محرر الرسام لحل هذه المشكلة، وذلك بوضع رمز المؤشر في منتصف الرسام.
• مشكلة عدم تشغيل الصوت: قد تكون أضفت كتلة تشغيل الصوت عند الضغط على الكائن، تأكد من ذلك. وفي حال نسخ الكتل البرمجية من كائن لآخر، عندها يجب عليك إضافة الصوت إلى الكائن من علامة تبويب الأصوات تبويب الأصوات. تأكد أيضًا من مستوى الصوت في جهازك، ومن أنك لم تخفضه برمجيًا في أحد الكتل، استخدم الكتلة اجعل شدة الصوت مساويًا.
• مشكلة ظهور كائنات أمام كائنات أخرى وحجبها: أضف كتلة انتقل للطبقة الأولى إلى الكائن الذي تود ظهوره في المقدمة.
• مشكلة تحرك الكائن أو تغيير مظهره مرة واحدة فقط: أضف كتلة كرر باستمرار قبل الكتل التي أضفتها للكائن للحصول على تأثير مستمر.
• مشكلة عدم ظهور الصفحات بالترتيب الصحيح: تأكد من ترتيب الخلفيات بالنقر على نافذة المنصة ثم على علامة تبويب الخلفيات لحل هذه المشكلة.

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

ترقية المشروع

يمكنك ترقية مشروعك، حين يتسنى لك ذلك، عن طريق إضافة بعض التفاصيل والتعديلات عليه. إليك بعض المقترحات لتحسين كتابك:

• إضافة المزيد من الكتل البرمجية للكائنات.
• إضافة المزيد من الكائنات.
• تسجيل صوتك أو تسجيل تأثيرات صوتية مختلفة وإضافتها إلى المشروع.
• تعديل مظاهر الكائنات باستخدام محرر الرسام.

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

اخترنا لك منها المشروع التالي، انتقل إلى محرر سكراتش للتعديل عليه:

وألق نظرةً أيضًا على معرض أعمال مشاريع الكتاب التفاعلي لمشاهدة المشاريع التي أنشأها أعضاء مجتمع سكراتش. ولا تنسى مشاركتنا مشروعك على مجتمع سكراتش في منصة حسوب IO.

خاتمة

بهذا تكون قد قد أتممت مشروع إنشاء كتاب إلكتروني تفاعلي باستخدام برنامج سكراتش.

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

ترجمة -وبتصرف- للمقال I made you a book من الموقع الرسمي لراسبيري باي.

اقرأ أيضًا

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

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

في هذا الفيديو سنجيب على جميع هذه التساؤلات حتى تتمكن من متابعة تعلم البرمجة وتبقى على المسار الصحيح

بعد اطلاعك على الفيديو وتعرفك على الخطوة الموالية لتعلم أساسيات البرمجة، يمكنك الآن الانطلاق في رحلتك التعليمية لتخصيص مهاراتك في مجال البرمجة وتطوير مهاراتك فيها. يمكنك الاستعانة بالدورات التعليمية التي تقدمها أكاديمية حسوب، واختيار الجورة المناسبة لأهدافك وميولاتك، وستجد مرافقةً جيدةً من مجموعة مدربين محترفين للإجابة على كافة تساؤلاتك.

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

إن أردت تحسين سرعة وأداء موقعك، فمن المهم التعرف على مؤشرات القياس الرئيسية التي عليك الانتباه لها، فعلى سبيل المثال مؤشر زمن وصول أول بايت TTFB -اختصارًا إلى Time to First Byte- يقيس الزمن اللازم لمتصفح المستخدم لاستقبال أول بايت من البيانات المُرسلة من خادم الموقع، وهنا لا يُقاس زمن الإخراج أو العرض على شاشة المتصفح بل فقط الزمن اللازم لوصول هذا البايت إلى المتصفح.

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

ما هو زمن وصول أول بايت TTFB

يقيس مؤشر TTFB زمن استجابة خادمك لطلب متصفح المستخدم، فهو يعبر عن مقدار الزمن الفاصل بين وصول المستخدم لصفحة الويب واستجابة الخادم لهذا الحدث.

مؤشر TTFB مهم جدًا فكلما تأخر المتصفح في استقبال أول بايت من البيانات من الخادم طال زمن تحميل الصفحة، وبما أن مؤشر زمن وصول أول بايت هو التفاعل الأول بين المتصفح والخادم فهذا يعني أن بقية أجزاء الصفحة لن تتحمل كون الخادم لم يستجب بعد لطلب المستخدم.

يلعب مؤشر TTFB دورًا رئيسيًا في تجربة المستخدم UX وفي تحسين محركات البحث SEO كما أنه أحد المؤشرات الرئيسية (مع مؤشرات FCP و LCP و CLS) التي يعتمد عليها جوجل لتقييم تجربة تحميل صفحات موقعك واستخدامها في تعيين ترتيب الموقع ضمن نتائج البحث.

يُشبه مؤشر زمن وصول أول بايت مؤشر أول محتوى مرئي FCP الذي يقيس أيضًا تجربة تحميل الصفحة وزمن انتظار المستخدم لكن FCP يقيس الزمن اللازم للمستخدم لرؤية أول عنصر ضمن الصفحة بينما يُعبر TTFB عن الزمن اللازم لوصول أول بايت من البيانات سواء كان مرئي أم لا.

يتشكل مقياس زمن وصول أول بايت TTFB من ثلاث عمليات رئيسية هي:

1. يُرسل طلب HTTP من متصفح الزائر إلى الخادم
2. يُعالح الخادم طلب الزائر ويُحضّر الرد
3. يُرسل الخادم الرد إلى المتصفح

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

كيفية قياس زمن الوصول لأول بايت TTFB

يوجد عدة طرق تستطيع استخدامها لقياس زمن وصول أول بايت TTFB بما في ذلك من أدوات المختبر وأدوات الحقل أي نتائج محاكاة ونتائج اختبار مستخدم حقيقي، لكن قبل ذلك يجب عليك الاطلاع على النتيجة الجيدة لهذا المؤشر. يُفضل أن يُسجل مؤشر TTFB قيمةً بين 200 ميلي ثانية و 500 ميلي ثانية، وطبعًا كلما كانت هذه القيمة أقل، كان أفضل، وأي قيمة أعلى من 600 ميلي ثانية تُعد نتيجةً ضعيفةً، وبما أن جوجل يعتمد على سرعة تحميل الصفحة في تقييم ترتيب الموقع ضمن نتائج البحث تهدف العديد من المواقع للوصول للقيمة 100 ميلي ثانية، ومع ذلك فإن أي قيمة أقل من 200 ميلي ثانية تُعد جيدةً جدًا. يوجد أدوات متنوعة تستطيع استخدامها لقياس TTFB سأتحدث عنها في القسم التالي.

WebPageTest

إن WebPageTest عبارة عن أداة تسمح لك باختبار سرعة صفحات موقعك بسهولة كما أنك تستطيع استخدامها للحصول على تقرير مُفصل يتضمن مؤشرات القياس الرئيسية بما فيها TTFB. لاستخدام هذه الأداة عليك إدخال رابط ضمن حقل النص ثم الضغط على زر Start Test.

سوف تجد ضمن صفحة النتائج العديد من المعلومات المفيدة عن موقعك، وفي الأعلى يوجد نتيجة عامة لمؤشر زمن وصول أول بايت، وفي القسم التالي سوف تجد قيمة الزمن بالميلي ثانية تحت عمود First Byte.

حسب WebPageTest فإن الهدف هو الزمن المطلوب لخادم اسم النطاق DNS والمقبس Socket وشهادة SSL إضافة إلى 100 ميلي ثانية، ولكل 100 ميلي ثانية إضافية لTTFB سوف تعمل هذه الأداة على إنقاص نتيجة موقعك بمقدار حرف.

GTmetrix

GTmetrix أداة مجانية أخرى تستطيع استخدامها لقياس TTFB وما عليك سوى إدخال رابط الموقع ضمن حقل النص ثم الضغط على زر Test your site.

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

سوف تجد للأسفل قليلًا تفاصيل أكثر حيث تستطيع الضغط على قسم الأداء Performance.

تجد مؤشر زمن وصول أول بايت ضمن قسم Browser timing.

يوجد خيارات أخرى تستطيع استخدامها إضافة للمثالين السابقين مثل Bytecheck و Pingdom و KeyCDN والتي تعمل بنفس الطريقة، عليك لصق رابط الصفحة ثم تشغيل الاختبار في الزمن الحقيقي والاطلاع على التقرير الناتج.

أدوات المطور في متصفح جوجل كروم

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

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

اختر ضمن القائمة العنصر الذي تريد معرفة معلومات عنه لتجد ضمن اللوحة التي تظهر Waiting (TTFB)‎.

كيفية تقليل زمن وصول أول بايت TTFB في موقع ووردبريس (4 نصائح رئيسية)

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

ترقية استضافة ووردبريس التي تستخدمها

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

لذا إن كنت تعاني من أزمنة تحميل طويلة وترغب في تقليص زمن وصول أول بايت TTFB عليك التفكير في ترقية الاستضافة أو الانتقال لمزود يوفر خيارات استضافة أقوى، وإضافةً لما سبق فإن الإضافات المُدارة لمواقع ووردبريس تملك تأثيرًا جيدًا على مؤشر TTFB فهذه الخدمات مُصممة خصيصًا لمواقع ووردبريس، وهذا يؤدي لأزمة استجابة أقل في واجهة المستخدم وواجهة المدير.

أنصح أيضًا بالبحث عن استضافات توفر خدمات DNS مميزة حيث تُساهم أزمنة البحث عن DNS في زمن وصول لأول بايت مرتفع وبالتالي فإن أدوات DNS مميزة يُمكن أن تُساعد في تقليل تأخير الشبكة وبالتالي تحسين زمن تحميل الصفحة.

استخدم شبكة تسليم محتوى CDN

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

يوجد خدمات مختلفة من شبكات تسليم المحتوى لووردبريس تستطيع الاختيار منها حيث تتضمن الخيارات الأكثر شعبيةً شبكة Google Cloud CDN و KeyCDN و Cloudflare، وبعض الاستضافات توفر نسخة مجانية من Cloudflare CDN في كثير من باقاتها.

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

أزل أي إضافات أو قوالب غير ضرورية (وأبق على الموجودين بأحدث إصدار)

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

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

تستطيع العثور على التحديثات المتوفرة للإضافات من خلال لوحة تحكم ووردبريس ضمن تبويب الإضافات المُنصبة في قسم الإضافات.

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

تفعيل التخزين المؤقت ضمن موقعك

أحد الطرق الفعّالة لتقليل زمن تحميل الخادم هي استخدام التخزين المؤقت، وهي تقنية مُستخدمة للمساعدة على تخفيف زمن معالجة الخادم وتسليم المحتوى بسرعة أكبر، لذا فإن التخزين المؤقت استراتيجية جيدة لتقليل زمن وصول أول بايت TTFB.

يوجد مجموعة متنوعة من إضافات التخزين المؤقت في ووردبريس التي تستطيع تثبيتها ضمن موقعك مثل WP Rocket و W3 Total Cache.

الأسئلة المتكررة حول زمن وصول أول بايت TTFB

أصبحت تملك الآن معرفة جيدة بأهمية مؤشر TTFB وكيفية قياسه وكيفية تقليل هذا الزمن، لذا ألق نظرة على الأسئلة المتكررة التالية حول هذا المؤشر.

كيف يؤثر مؤشر TTFB على أداء موقعي بشكل عام؟

يُشير TTFB إلى الزمن الفاصل بين وصول المستخدم لموقعك واستقبال المتصفح أول بايت بيانات من خادم الموقع أي يقيس استجابة خادمك للمستخدم، وهذا يعني بدون مؤشر TTFB مقبول فإن بقية موقعك سوف يُحمّل ببطء. حتى لو حُمّل محتوى موقعك في أقل من ثانية وكان مؤشر زمن وصول أول بايت 4 ثانية عندها سوف يكون زمن تحميل موقعك الكلي هو 5 ثانية، لذا يلعب مؤشر TTFB دورًا رئيسيًا بتجربة المستخدم وتحسين محركات البحث. ينظر جوجل لمؤشر TTFB كمؤشر رئيسي عند تعيين ترتيب موقعك، وسوف تؤثر أي تحسينات على TTFB على بقية مؤشرات سرعة تحميل الصفحة مثل مؤشر FCP ومؤشر LCP.

ما هي أفضل طريقة لتقليص زمن TTFB؟

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

الخلاصة

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

ترجمة -وبتصرّف- للمقال Time to First Byte (TTFB): What It Is & How to Optimize Your Website for It لصاحبه Will Morris.

اقرأ أيضًا

• مدخل إلى مؤشر أضخم محتوى مرئي LCP في موقع الويب وكيفية تحسينه