تواصل
انتقل إلى التقرير

مفهوم بمبادرة ذاتية · مايو 2022

Brightloop صفحة تَعُدّ نفسها تصاعديًا

دورات بالأفواج لمن يغيّرون مسارهم المهني — مدرسة وعدها تقدّم قابل للقياس، على صفحة تقيس نفسها وأنت تقرؤها. ثلاثة عشر رسم SVG مضمّنًا تحملها، وبلا صورة فوتوغرافية واحدة.

القطاع
تعليم · دورات بالأفواج
الإخراج الفني
إشراق متفائل
التسليم
3 ملفات، بلا خطوة بناء
جافاسكربت
20.3 ك.ب، 654 سطرًا، 12 وحدة
الصور
0 ملف صورة، 13 SVG مضمّنًا

ما يُظهره هذا المشروع

ثلاثة تخصّصات من الأربعة، والتقرير أدناه هو الدليل عليها كلّها.

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

01 · نظرة عامّة

زخم، لا تخمين

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

فالصفحة لا تحمل تصويرًا إطلاقًا. ثلاثة عشر رسم SVG مضمّنًا تحمل النظام البصري كلّه، والبراهين أدوات: حلقات تمتلئ، وأشرطة تنمو، وأرقام تَعُدّ. وكلّها تعمل على المراقب نفسه وعلى custom property واحدة تُكتب مرّة في الإطار، فتقيس الصفحة نفسها دون إنفاق ميزانية الإطار على ذلك.

02 · الفكرة

أدوات، لا رسوم توضيحية

في الصفحة الحيّة تمتلئ كل أداة من custom property واحدة، تُكتب مرّة في الإطار ما دام قسمها على الشاشة. ثلاث حلقات، وثلاثة أشرطة، وكتابة واحدة.

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

  • حلقة التوظيف

    نسبة توظيف مخترَعة 91%، كُتبت لهذا المفهوم لا مقيسةً من شيء، واختيرت لأنّ النسبة المئوية هي بالضبط ما بُنيت حلقة التقدّم لعرضه.

  • مؤشّر التقييم

    تقييم خرّيجين مخترَع 4.9 من 5، اختُلق لهذا المفهوم، واختير لأنّ الدرجة الكسرية تُجهد العدّ التصاعدي بما لا يُجهده رقم صحيح.

  • عدد الشركاء

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

03 · الأهداف

ما كان على الصفحة أن تفعله

  1. شرح حلقة، لا قاعة محاضرات

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

  2. ستّة برامج، نتيجة واحدة

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

  3. التسعير في العلن

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

  4. جعل الأرقام تُحسن التصرّف

    كل رقم يتحرّك مرّة واحدة، من خطّ أنابيب مشترك، ويطبع قيمته النهائية فورًا تحت تقليل الحركة.

04 · ترتيب البناء

اثنتا عشرة وحدة، وخطّ أنابيب واحد

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

  1. الرموز وسلّم الظلال

    اثنتان وعشرون custom property — كحلي، وكوبالت، ومرجاني، وكهرماني، ودرجة وخطّ شعري، مع سلّم ظلال بثلاث درجات يؤدّي عمل الارتفاع كلّه في الصفحة.

  2. خطّ أنابيب التحرّك عند الرؤية

    حجر الزاوية: مراقب واحد يغذّي الحلقات والأشرطة والعدّ التصاعدي. ثلاثة آثار، ونقطة تسجيل واحدة، وموضع واحد لإصلاح عطب حين يظهر.

  3. أدوات SVG

    الحلقات تعلن pathLength بقيمة 100، فيصير stroke-dasharray وstroke-dashoffset نسبًا مئوية حرفيًا. ولا حساب محيط في العمل كلّه، ويمكن للحلقة أن تكون بأي حجم.

  4. تبويبات المنهج

    ثلاث لوحات، وtabindex متنقّل، وaria-selected مُبقًى صحيحًا، ومحتوى اللوحات في الوسوم لا مجلوبًا عند ضغط تبويب.

  5. بارالاكس العمق

    بطاقات الواجهة تنجرف بمعاملات مُعلَنة في سمات data-depth، فيكون التأليف مؤلَّفًا في الوسوم لا مثبّتًا في السكربت.

05 · البنية

ثلاثة ملفات، بلا اعتماديات

لا مُجمِّع، ولا إطار عمل، ولا شيء مُثبَّت: ثلاثة ملفات تُقدَّم كما كُتبت تمامًا، 51.2 ك.ب وسومًا، و42.1 ك.ب من CSS، و20.3 ك.ب من جافاسكربت. والمتصفّح بيئة التشغيل الوحيدة التي احتاجها هذا العمل يومًا.

brightloop/

index.html
51.2 KB
8 أقسام، و13 SVG مضمّنًا، و0 صورة، ونموذج واحد
styles.css
42.1 KB
22 custom property، و4 media queries، وكتلة تقليل حركة واحدة
script.js
20.3 KB
654 سطرًا في 12 وحدة مرقّمة

المكوّنات التقنية

  • Inline SVG
  • pathLength
  • IntersectionObserver
  • data-depth
  • CSS Grid
  • Custom properties
  • Sora
  • Public Sans
  • Vanilla JavaScript

سطح سهولة الوصول

  • Roving tabindex
  • aria-selected
  • SVG role and label
  • aria-live
  • Announced once, not per frame
  • Reduced motion

06 · ما الذي قاوم

مشكلات، وما تغلّب عليها

  1. التحدّي

    حلقات تقدّم SVG تحتاج عادةً حساب المحيط من نصف القطر، فيوضع رقم سحري في CSS ينكسر لحظة تغيّر الهندسة.

    الحلّ

    إعلان pathLength بقيمة 100 يعيد تعريف المسار بطولٍ مقداره 100 وحدة، فيصير stroke-dasharray وstroke-dashoffset نسبًا مئوية. يمكن للحلقة أن تكون بأي حجم، والحساب لا يتغيّر أبدًا.

  2. التحدّي

    الحلقات والأشرطة والعدّ التصاعدي ثلاثة آثار تعني الشيء نفسه: ابدأ حين تُرى. وثلاثة مراقبين سيكونون ثلاثة مخابئ للعطب نفسه.

    الحلّ

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

  3. التحدّي

    الرسم البياني الزخرفي بـSVG غير مرئي لقارئ الشاشة، والرقم المتحرّك داخله أسوأ من غير المرئي.

    الحلّ

    كل أداة تحمل دور img وaria-label يذكر قيمتها النهائية بالكلمات، والرقم المتحرّك إلى جانبها يبقى خارج أي منطقة حيّة. فتُعلَن القيمة مرّة واحدة صحيحةً، أيًّا كان إعداد الحركة.

  4. التحدّي

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

    الحلّ

    كل بطاقة تعلن data-depth الخاصّ بها. والسكربت يقرأ السمة، ويبقى التأليف في الوسوم حيث يستطيع من يصمّمه تغييره.

07 · ما يستحقّ البقاء

الأجزاء التي تستحقّ البقاء

  • ثلاث خطوات من التعثّر إلى التوظيف

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

  • حلقة، لا قاعة محاضرات

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

  • يعلّمه من يوظّفون

    مرشدون يُقدَّمون بالأدوار التي يوظّفون فيها لا بألقابهم الوظيفية، وهي أكثر كتل الصفحة إقناعًا ولا تكلّف شيئًا في البناء.

  • فقط ما دمت تدرس

    تسعير شهري يتوقّف حين تتوقّف الدورة، مقولًا صراحةً في العنوان فوق الأسعار لا في حاشية تحتها.

08 · شغّله حيًّا

شغّله هنا

العمل الحقيقي، مضمّنًا ويعمل. يُحمَّل عند الطلب — فلا يُجلَب منه شيء قبل أن تطلبه.

تخطَّ المعاينة الحيّة
Brightloop كما يظهر عند التحميل: العنوان إلى جانب بطاقات الواجهة، وأول حلقة تقدّم تمتلئ أصلًا شغّله هنا

العمل الحقيقي، يعمل داخل الصفحة.

افتحه بملء الشاشة

من فضلك أدر جهازك،
هذا الموقع مبني عموديًا.