أفق

تصوّر لمنتجع سكني على ساحل البحر الأحمر الجنوبي في مصر، بين القصير ومرسى علم: ١٢٠ مسكنًا في أربع مجموعات على ٣٫٢ كيلومتر من الشاطئ. بُني عرضًا لقدرات Codeino — فالهوية والنصوص ومخطط الموقع وأرقام المبيعات كلها متخيَّلة، والموقع يقول ذلك.

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

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

• موقع من صفحة واحدة بالعربية والإنجليزية، العربية أولًا، بتخطيط كامل من اليمين إلى اليسار وأعداد تتفق مع معدوداتها
• افتتاح سينمائي: الاسم يقف على أفق فيلم غروب، ثم يضيق المشهد إلى قوس ينفتح على الساحل
• أربع مجموعات سكنية على بطاقات تتراكب مع التمرير، تنفتح كل منها على صفحتها بمسقط أفقي ومواصفات ومعرض صور
• يوم في أفق — ستة أفلام من ٠٦:٠٠ إلى ٢٢:٠٠، ولون القسم وساعة وشمس على قوسها تتبع الوقت
• مخطط عام مرسوم كلوحة معماري: الأعماق وحافة الشعاب والكنتور والطرق والنخيل والمساكن الـ١٢٠ كلها، بحالة المسكن عند المرور وتفاصيله عند الضغط، وتصفية حسب المجموعة والتوافر، ومخطط أزرق في الليل
• جولة جوية ثلاثية الأبعاد اختيارية للمنتجع كله، مبنية من نموذج الموقع نفسه، بجودة تتكيف مع الجهاز
• وضعا النهار والليل، وخريطة للموقع، وحاسبة أقساط، ونموذج استفسار (تجريبي)، وصوت بحر مُركَّب

مسكنًا على المخطط

120مسكنًا على المخطط

سطر JavaScript

4,700+سطر JavaScript

مفتاح ترجمة، بلا نقص

214 × 2مفتاح ترجمة، بلا نقص

JavaScript في أول تحميل، مضغوطًا

88 kBJavaScript في أول تحميل، مضغوطًا

سرد التقنيات المستخدمة لا يقول شيئًا. المفيد في دراسة الحالة هو القرارات التي كان لها بديل حقيقي — لذلك يذكر كل قرار هنا ثمنه، لا ما تم اختياره فحسب.

1. ٠١

   نموذج موقع واحد، وثلاث رسومات

   خط الساحل والطرق والبحيرة والمساكن الـ١٢٠ كلها موجودة في ملف واحد فقط هو layout.js، ومنه يُقرأ المخطط العام والجولة ثلاثية الأبعاد ولوحة كل وحدة.

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

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

2. ٠٢

   المخطط يُمسَح قبل النشر

   سكريبت بناء يأخذ ١١٣٬٨٧٩ عينة من التضاريس على شبكة كل خمسة أمتار، ويتتبع الأعماق وحافة الشعاب وخطوط الكنتور بخوارزمية marching squares، فيصل المتصفحَ خطوطٌ جاهزة.

   كان المتصفح يستطيع حساب الخطوط نفسها، لكن بتشغيل دوال الضوضاء التي تولّد التضاريس على أكثر من مئة ألف نقطة في هاتف الزائر قبل أن يظهر المخطط. وحين يُحسب ذلك مسبقًا يصل الرسم مسارات جاهزة — ١٩٫٦ كيلوبايت مضغوطة — ولا يفعل المتصفح سوى تركيب الـ SVG ووضع المساكن عليه.

   الثمن · أي تغيير في نموذج الموقع يعني إعادة تشغيل سكريبت واحد. والملف المولَّد يقول ذلك في سطره الأول.

3. ٠٣

   المساكن تأتي من بذرة، لا من جدول

   دالة واحدة تضع المساكن الـ١٢٠ وتختار مساحة كل منها وسعره وحالته من مولّد أرقام عشوائية بذرته ٢٠٢٩ — سنة التسليم.

   قائمة من ١٢٠ وحدة تُكتب يدويًا تحتاج أن تتفق مواضعها مع التضاريس، وأعدادها مع النصوص. أما المولَّدة فكل مسكن فيها يقف على الأرض التي ترسمها الجولة، والمجاميع تصح دائمًا — ٢٤ فيلا شاطئ، و٣٠ بيت بحيرة، و٤٢ مسكن تل، و٢٤ شقة مرسى. ولأن البذرة ثابتة فللمسكن BV-01 السعر والحالة نفسهما في كل تحميل، على المخطط وفي الجولة وفي لوحته؛ وقد تُحقِّق من ذلك بتوليد القائمة مرتين ومقارنتهما.

   الثمن · التوافر توضيحي — ٧٣ متاحًا و٢٦ محجوزًا و٢١ مُباعًا، لأن هذا ما أنتجته البذرة. ومكتب مبيعات حقيقي سيغذّي الحالة من مخزونه بدلًا من ذلك: يتغير مُدخل دالة واحدة، لا العروض.

4. ٠٤

   الجولة ثلاثية الأبعاد تُطلَب ولا تُفرَض

   مكتبة three.js والمشهد — ١٧٥ كيلوبايت مضغوطة — لا يُحمَّلان إلا حين يضغط أحدهم «جولة جوية ثلاثية الأبعاد». أما الصفحة نفسها فتفتح على ٨٨ كيلوبايت.

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

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

5. ٠٥

   الاسم يقف على الأفق الحقيقي في الفيلم

   قيس خط الأفق في فيلم الغروب عند ٦٥٫٢٪ من ارتفاعه، وتحسب الصفحة أين يقع ذلك الخط بعد قصّ كل شاشة لتضع الشعار عليه.

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

   الثمن · الرقم يخص ذلك الفيلم وحده. استبدل الفيلم ويجب قياس الأفق من جديد.

6. ٠٦

   الأفلام تُحمَّل حين تقترب، وللهواتف نسختها

   تسعة أفلام، لكل منها نسخة بعرض ١٩٢٠ بكسل وأخرى بعرض ٩٦٠. يبدأ الفيلم في التحميل قبل وصوله بنحو شاشة، ويتوقف حين يغادرها.

   تشغيل كل شيء تلقائيًا كان سيطلب من زائر الحاسوب ٢١٫٤ ميجابايت من الفيديو قبل أول تمرير، ومن الهاتف الملفات نفسها بضعف العرض الذي تعرضه شاشته. هنا تأخذ الهواتف وشاشات اللمس نسخة ٩٦٠ بكسل — ٩٫٢ ميجابايت للأفلام التسعة كلها — ولا يُطلب مقدمًا سوى فيلم الافتتاح.

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

7. ٠٧

   العربية تُقسَّم كلمات، لا حروفًا

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

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

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

8. ٠٨

   البحر مُركَّب، لا مُسجَّل

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

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

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

9. ٠٩

   اليوم يعيد تلوين الصفحة، ويختار لون نصّه

   مع مرور أفلام اليوم الستة تُمزج الخلفية بين ستة ألوان سماء مقيسة، ويتبدّل النص بين لون الحبر ولون الزَّبَد حين تعبر إضاءة الخلفية ٠٫٤٢.

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

   الثمن · التبدّل قطع لا تلاشٍ: ثمة لحظة واحدة، بين الغروب والليل، ينقلب فيها النص.

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

الأعداد تتفق مع معدوداتها. فالعربية تغيّر الاسم بعد العدد — «غرفة نوم واحدة»، والمثنى «غرفتا نوم»، و«٣ غرف نوم» من الثلاثة إلى العشرة — وأعداد النص تأخذ التمييز المنصوب: «١٢٠ مسكناً». الإنجليزية تحتاج قاعدة واحدة، والعربية تحتاج النحو.

الأرقام تتبع القارئ. ففي العربية كل رقم يقرؤه الإنسان — الأسعار والمساحات والعدّادات ومفتاح المخطط والساعات — مكتوب بالأرقام العربية المشرقية. واحتاجت الساعات تحويلًا خاصًا بها، لأن تنسيق الأرقام العربي في المتصفح لا يمسّ نصًّا مثل 06:00. أما المعرِّفات فتبقى كما هي: المسكن BV-01 في اللغتين، والإحداثيات ⁦25°24′N⁩، لأنها رموز لا كميات.

الخطوط. يكتب خط Alexandria — وهو خط هندسي متغيّر رُسم للعربية واللاتينية معًا — العناوين الكبيرة في اللغتين، ويحمل IBM Plex Sans Arabic النص. والملفات الثمانية كلها مستضافة مع الموقع ومقسّمة حسب نظام الكتابة، فلا يجلب المتصفح ملف نظامٍ ما إلا إن كان على الصفحة حرف منه.

الشعار يحمل الفكرة. «أفـــق» مكتوب بخط عربي هندسي خفيف، والكشيدة بين الفاء والقاف ممدودة مستوية خطًّا للأفق، ونقطة الفاء مرفوعة شمسًا نحاسية. وذلك الأفق أول ما ترسمه الصفحة، وهو الخط الذي يقف عليه الاسم في الفيلم.

ضبط النطاق جزء من العمل. كل بند هنا دُرس ثم استُبعد لسبب مذكور.

التعافي من فقدان سياق الرسم ثلاثي الأبعاد

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

افتتاح أقصر

تمسك المقدمة ٢٫٨ ثانية على الأقل ريثما يُحمَّل الفيلم الأول، ولا يمكن تمرير الصفحة حتى ينفتح الأفق — بعد نحو ثماني ثوانٍ. هي لحظة الفيلم، وهي طويلة. وزر للتخطي، أو انتظار أقصر في الزيارة الثانية، هو التغيير التالي.

الأداء على الهاتف

يعطي Lighthouse الصفحة ٩٦ في الأداء على الحاسوب و٦٩ في محاكاته المقيَّدة للهاتف. والفارق عمل على الخيط الرئيسي سببه الحركة المرتبطة بالتمرير — نحو ٧٨٠ ملّي ثانية من الحجب في تلك المحاكاة — ولم يُضبط بعد.

مسار حقيقي للاستفسارات

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

تباين أصغر التسميات

يرفع Lighthouse علمًا على أرقام البطاقات الباهتة وتسميات المواصفات (إمكانية الوصول ٩٧). هي هادئة عن قصد، لكنها نص، ويجب أن تجتاز الفحص.

أفق مشروع تصوّري. المنتجع وموقعه ومساكنه وأسعاره ومبيعاته كلها متخيَّلة، والموقع يقول ذلك في تذييله. والصور والأفلام من مكتبات مرخّصة — Unsplash وPexels وMixkit — مع الإشارة إليها على الموقع. وأرقام هذه الصفحة قيست على المستودع في ٢٨ أكتوبر ٢٠٢٦، ونتائج Lighthouse على الموقع المنشور في ٢٥ أكتوبر ٢٠٢٦.