→ كل الأعمال
عمل لعميل / ويب وطباعة

Residence 724

صفحة واحدة لاستوديو مفروش في Midtown Miami، بالإنجليزية والإسبانية، مع بطاقات عمل في مكتب الاستقبال يفتح كل رمز QR فيها الصفحة بلغته.

زُر miamistandard724.com ←
المنصة
Static HTML/CSS/JS، بُنيت بـ Claude Code
التقنيات
HTML, CSS, vanilla JS, Cloudflare Pages, Cloudflare Registrar, GitHub, ffmpeg, Python (Pillow, segno)
Residence 724 screenshot

ما هو

صفحة واحدة لاستوديو مفروش في Midtown Miami، ومعها بطاقات العمل التي تشير إليها. لم يستطع المالك بيع الوحدة في سوق لا يشتري، فقرّر أن يؤجّرها مفروشة لإقامات من ثلاثين ليلة وأكثر، وطلب مجموعة بطاقات على مكتب الاستقبال في المبنى يحمل كل منها رمز QR.

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

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

ثلاث شاشات هاتف من موقع Residence 724: صورة الواجهة بملء الشاشة مع زرّي الاتصال والرسائل، وقائمة التنقّل الحمراء مفتوحة فوق الصفحة، ومعرض الصور مع تعليق تحت كل صورة
الواجهة والقائمة والمعرض، بعرض الهاتف. الأسماء والأرقام محجوبة في كل الصور، والموقع المباشر يعرض أرقام المالك.

لماذا بنيته بهذه الطريقة

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

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

الجزء الذي تطلّب تفكيرًا حقيقيًا

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

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

ولإعطاء كل رمز مسارًا خاصًا به أثر ثانٍ لم أخطّط له وأنا مسرورة به. إذ تحسب Cloudflare Web Analytics المسارين منفصلين، فيستطيع المالك أن يرى أيّ وجه من البطاقة يأخذه الناس.

شاشة الواجهة نفسها جنبًا إلى جنب بالإنجليزية والإسبانية، والنسخة الإسبانية جاءت من عنوان البطاقة ‎/tarjeta، وفيها زرّا Llamar وEscribir ومفتاح اللغة على ES
عنوان البطاقة الإنجليزي والإسباني. المفتاح في الزاوية يبدّل اللغة يدويًا، أما البطاقة فهي التي تقرّر اللغة التي تهبط فيها.

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

الصور والبطاقة

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

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

البطاقة بعرض 3.5 بوصة وارتفاع 2 بوصة، مع هامش زائد للقطع (bleed)، وقد بنيتها صفحة HTML تُخرَج إلى ملف PDF جاهز للطباعة بعلامات القطع (crop marks)، حتى أستطيع تغيير التوزيع والنظر إليه في الحال. وقد احتاجت ذلك. كانت النسخة الأولى نصًا على لون مسطّح وكانت باهتة، ثم اكتسبت نافذة صورة على شكل قوس، ونسيجًا قماشيًا بدرجة قريبة من لونها، ثم لوحًا أبيض خلف النص بعد أن وجدت أنني لا أقرأ الخط الصغير على الوجه الأحمر بارتياح. والكتابة على منطق «المسح أولاً»: مهمة البطاقة كلها أن يُمسح الرمز، فهي تترك الباقي للصفحة.

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

النشر

مستودع GitHub خاص موصول بـ Cloudflare Pages، فالدفع إلى الفرع الرئيسي هو النشر، ومعه إعادة توجيه إلى HTTPS، وDNSSEC، وسجلّا SPF وDMARC، وترويسات التخزين المؤقت (cache headers). والنطاق مسجّل في حساب Cloudflare الخاص بالمالك نفسه وأنا مضافة فيه عضوًا، لا في حسابي أنا، وهذا إعداد أطول قليلاً ويعني أن النطاق ملكه كاملاً ولا يوجد شيء يُسلَّم إن توقّف عن العمل معي.

الموقع منشور ويعمل، والبطاقات عند المطبعة، والتحليلات تسجّل عمليات المسح.

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

ما اكتشفته

اختبرت البطاقات الجاهزة بمسحها بهاتفي، فانفتحت البطاقة الإسبانية بالإنجليزية.

ولم يكن في الكود خطأ. كان Safari على iPhone محتفظًا بنسخة من JavaScript الخاصة بالموقع، من قبل أن توجد عناوين البطاقات، فكان /tarjeta يُعالَج بملف لم يسمع بـ /tarjeta أصلاً فيرتدّ إلى التفضيل المحفوظ. والحل كان عناوين ملفات موسومة برقم إصدار (versioned)، main.js?v=2026-09-16a لا main.js، مع ترويسات التخزين المؤقت (cache headers) تعيد التحقق من صلاحية HTML في كل زيارة وتبقي الملفات الموسومة مخزّنة.

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

ما الذي سأضيفه لاحقًا

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

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

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