البيانات & خدمة الأرصاد الجوية

Météo Climat France

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

السنة
2026
مدة التصميم
6 أسابيع
التقنيات
JavaScript · MapLibre · HTML/CSS · Vercel
  • هندسة المعلومات
  • تصميم الواجهة
  • التطوير
  • رسم الخرائط
  • SEO البرمجي
  • التحرير العلمي
زيارة الموقع(علامة تبويب جديدة)ناقش معنا مشروعًا مماثلًا

منتج من تطوير KAYZEN، متاح على عنوان معاينة Vercel في انتظار نطاقه النهائي.

https://meteo-climat-france.vercel.app/
الصفحة الرئيسية لموقع Météo Climat France — البيانات & خدمة الأرصاد الجوية، من إنجاز KAYZEN
صفحة قابلة للفهرسة180 بلدية · 141 بطاقة مناخية · 16 شرحًا · 12 خريطة
358
نقطة شبكة مُستوفاة
247
موعدًا تنبؤيًا بالساعة متحركًا
72
مفتاح API لرسم الخرائطMapLibre وخريطة IGN الأساسية مستضافان ذاتيًا
0
نقطة الانطلاق

ما كان يجب حلّه.

السياق

Météo Climat France خدمة أرصاد جوية وطنية مجانية تصدرها KAYZEN. وهي تغطي ثلاثة استخدامات مختلفة بقاعدة البيانات نفسها: طقس الحياة اليومية (ساعة بساعة على مدى 48 ساعة، واتجاه عام لعشرة أيام)، وعلم المناخ (المعدلات الطبيعية والأرقام القياسية لكل محطة)، والأرصاد الزراعية (درجات حرارة التربة ورطوبتها، وET0، والميزان المائي، ودرجات النمو اليومية، وظروف الرش).

القيد

كانت ثلاثة قيود تتعارض. كان على الخدمة أن تعرض خريطة متحركة لفرنسا على 72 موعدًا تنبؤيًا بالساعة — أي حسابات ثقيلة في المتصفح. وكان عليها أن تبقى قابلة للتصفح على هاتف عند حافة حقل، غالبًا عبر شبكة 3G. وكان عليها أن تحضر في Google على استعلامات محلية جدًا من قبيل «météo Vénissieux 69200»، وهي ساحة يحتلها لاعبون راسخون منذ عشرين عامًا.

الحل

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

التصميم والإدارة الفنية

كل خيار، وسببه.

  1. الخريطة بوصفها الصفحة الرئيسية

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

  2. سلّم ألوان لكل مقدار

    لكلٍّ من الحرارة والتهطال والرياح والغيوم والضغط والرطوبة والعواصف الرعدية والأشعة فوق البنفسجية تدرّجه الخاص، محدود القيم ومزوَّد بمفتاح. ولا يعتمد أيٌّ منها على تدرّج الأحمر-الأخضر وحده: فعمى الألوان من نوع العمى الأخضر (deutéranopie) يصيب 6% من الرجال، وخريطة طقس سيئة الاختيار تصبح غير مقروءة لديهم.

  3. مؤشر زمني يُدار بلوحة المفاتيح

    السهمان الأيسر والأيمن لتغيير الساعة، وShift مع الأسهم لتغيير اليوم، ومفتاح المسافة لتشغيل الحركة، وHome للعودة إلى الآن. الاختصارات مكتوبة تحت المؤشر، لا مخبّأة في صفحة مساعدة.

  4. وصف بالكلمات الكاملة

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

  5. خط واحد، مستضاف ذاتيًا

    Nunito بصيغة الخط المتغيّر (variable font) مُقدَّم من نطاق الموقع. لا طلب واحد إلى Google Fonts: خط خارجي في خدمة تُستشار يوميًا يعني اعتمادية شبكية ونقلًا للبيانات إلى الخارج بلا أساس قانوني.

لوحة ألوان المشروع

  • أزرق سماوي

    #2E7BB6

    البنية، والروابط، والترويسات

  • أردوازي

    #1F2933

    النص الرئيسي

  • قمحي

    #C9A227

    القسم الزراعي

  • إنذار

    #C6413B

    تجاوز العتبات، واليقظة

النظام الطباعي

العناوين

Nunito 700

النص الأساسي

Nunito 400

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

الهندسة

ما يوجد تحت الغطاء.

  • JavaScript
  • MapLibre
  • HTML/CSS
  • Vercel

  1. JavaScript أصلية، إحدى عشرة وحدة

    menu وlogique وcouches وmeteo-api وagro وapp وclimat وcomprendre وglossaire وbandeau، ومكتبة MapLibre الخارجية. كل صفحة لا تحمّل إلا ما تحتاجه: فبطاقة المناخ الخاصة بمحطة لا تتضمن المحرّك الزراعي ولا قارئ الرادار.

  2. MapLibre مستضاف ذاتيًا بدل Mapbox

    لا مفتاح API، ولا فوترة بحسب المشاهدة، ولا استدعاء لطرف خارجي عند كل تحميل. تأتي الخريطة الأساسية من IGN (المعهد الوطني الفرنسي للمعلومات الجغرافية) — بيانات عامة فرنسية، منسجمة مع خدمة تتحدث عن البلديات.

  3. استيفاء على شبكة من 247 نقطة

    توفّر النماذج العامة شبكة نقاط؛ والواجهة تحتاج إلى حقل متصل. يجري الاستيفاء والتصيير في المتصفح، بتمريرة واحدة لكل موعد تنبؤي، مع تخزين المواعيد الـ72 مؤقتًا: تبقى الحركة سلسة من دون استدعاء الـ API مجددًا.

  4. مسارات /api/ محظورة على الروبوتات

    يستثني ملف robots.txt المسار /api/. ولولا ذلك لاستهلك كل زحف تقوم به برامج الزحف حصة Open-Meteo بلا فائدة — والحصة المستنفدة تعني خدمة غير متاحة للزوار الحقيقيين.

  5. دوال بيانات من جهة الخادم

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

تحسين محركات البحث

كيف يصبح الموقع قابلًا للعثور عليه.

  1. 358 عنوان URL، وأربعة قوالب

    180 بطاقة بلدية (/meteo/lyon-69001)، و141 بطاقة مناخية (/climat/…)، و16 صفحة شرح (/comprendre/…)، و12 صفحة خرائط موضوعية (/cartes/radar…). كل قالب يستجيب لنية مختلفة؛ ولا صفحة هي نسخة شكلية من أخرى.

  2. محتوى خاص بكل بلدية

    يفشل SEO البرمجي حين يكرّر المحتوى. تحمل كل بطاقة بلدية إحداثياتها وارتفاعها والمعدلات الطبيعية لمحطتها المرجعية وأرقامها القياسية — قيم تختلف فعلًا من مدينة إلى أخرى.

  3. ثلاث كتل من البيانات المنظَّمة

    WebApplication (فئة الأرصاد الجوية، مع التصريح بالمجانية)، وWebSite مع SearchAction يشير إلى البحث الداخلي الحقيقي، وFAQPage تغذّيها الأسئلة التي تعالجها الصفحة فعلًا.

  4. ربط داخلي له معنى

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

  5. خريطة موقع وروابط أساسية (canonical) متسقة

    رابط أساسي واحد لكل صفحة، وخريطة موقع تسرد بالضبط عناوين URL الـ358 المُقدَّمة. عنوان URL غائب عن خريطة الموقع لا يُستكشف؛ وعنوان URL في خريطة الموقع بلا صفحة هو soft-404 يُضعف النطاق بأكمله.

إمكانية الوصول

قابل للاستخدام من الجميع.

منذ يونيو 2025، يفرض القانون الأوروبي لإمكانية الوصول (European Accessibility Act) إتاحة الوصول الرقمي على شريحة واسعة من الخدمات الإلكترونية. نتعامل معها منذ مرحلة التصميم، لا كتدارك لاحق.

  1. خريطة موجودة من دون البصر

    الوصف النصي للخريطة ليس سمة alt: بل محتوى مُولَّد، محدَّث بحسب الموعد التنبؤي المعروض، يمكن بلوغه بلوحة المفاتيح وقراءته بالتوليف الصوتي.

  2. كل شيء بلوحة المفاتيح

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

  3. تدرّجات لونية مختبَرة في حالات عمى الألوان

    جرت محاكاة كل تدرّج في حالات العمى الأحمر (protanopie) والعمى الأخضر (deutéranopie) والعمى الأزرق (tritanopie). تبقى القيم قابلة للتمييز، ويحمل المفتاح دائمًا الحدود بالأرقام.

هيكل الموقع

ما تم تسليمه.

  • الرئيسية — خريطة متحركة وبحث
  • /meteo/<commune>-<code postal> — 180 بطاقة بلدية
  • /climat/<station> — 141 بطاقة للمعدلات الطبيعية والأرقام القياسية
  • /cartes/<couche> — الرادار، والأقمار الصناعية بالأشعة تحت الحمراء والمرئية، والصواعق، والأشعة فوق البنفسجية…
  • /meteo-agricole — التربة، وET0، والميزان المائي، والرش
  • /comprendre — 16 بطاقة تعليمية ومسرد
  • /lune، /contact، الإشعار القانوني، والخصوصية، وشروط الاستخدام والبيع، وإتاحة الوصول
المنهجية

مراحل سير المشروع.

  1. نموذج البيانات

    اختيار المصادر العامة (Open-Meteo، IGN)، وتوحيد المقادير، والحصص.

  2. رسم الخرائط

    الشبكة، والاستيفاء، والتدرّجات اللونية، والمؤشر الزمني.

  3. القسم الزراعي

    ET0 وفق FAO-56، والميزان P − ET0، ودرجات النمو اليومية، وDelta T، وعتبة بوفورت 3.

  4. SEO البرمجي

    أربعة قوالب، وتوليد الصفحات الـ358، وخريطة الموقع، والربط الداخلي.

  5. الامتثال

    الإشعار القانوني، والتحفّظ التنظيمي المتعلق بمنتجات الصحة النباتية، وإتاحة الوصول، واللائحة العامة لحماية البيانات (GDPR).

أسئلة

ما يُطرح علينا كثيرًا.

لأن أثقل صفحة في الموقع خريطة canvas: الكلفة الغالبة هي التصيير الرسومي، لا تحديث شجرة المكوّنات. كان إطار العمل سيضيف JavaScript يجب تنزيلها وتنفيذها على هواتف غالبًا ما تعمل بشبكة 3G، من دون أن يحلّ شيئًا. الخيار ليس عقائديًا — ففي المشاريع التي تكون فيها حالة الواجهة معقّدة فعلًا، ننطلق بـ React.

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

من النماذج العامة التي يجمعها Open-Meteo للتنبؤ، ومن IGN للخريطة الأساسية. المصدران مذكوران ومرتبطان في التذييل: خدمة بيانات لا تقول من أين تستقي أرقامها لا يمكن التحقق منها.

أعمال أخرى

العودة إلى أعمالنا

مستوى الإتقان نفسه، لموقعك.

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

حجز موعدعرض الأسعار
مشاركة