موقع ويب تفاعلي للسياحة الفضائية

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

يتكون الموقع من عدة أقسام رئيسية:

الصفحة الرئيسية (Home): صفحة هبوط جذابة تحفز الزائر على استكشاف المزيد.

قسم الوجهات (Destination): يعرض معلومات تفصيلية عن الوجهات الفضائية الممكن زيارتها مثل القمر، المريخ، أوروبا، وتيتان. يمكن للمستخدم التنقل بينها لمعرفة تفاصيل كل وجهة مثل متوسط المسافة والوقت المقدر للرحلة.

قسم الطاقم (Crew): يقدم تعريفًا بأعضاء الطاقم المختلفين (القائد، أخصائي المهمة، الطيار، ومهندس الرحلة)، مع نبذة عن كل شخص.

قسم التكنولوجيا (Technology): يشرح التقنيات المستخدمة في الرحلات الفضائية مثل مركبة الإطلاق والميناء الفضائي.

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

الأدوات والتقنيات المستخدمة

تم بناء هذا الموقع باستخدام تقنيات الويب الأساسية لـ تطوير الواجهات الأمامية (Frontend Development).

HTML5 (لغة ترميز النص التشعبي):

الوصف: تُستخدم لبناء الهيكل الأساسي لصفحات الويب وتنظيم المحتوى.

الاستخدام في المشروع: تم استخدام HTML لإنشاء جميع الصفحات (index.html, destination-moon.html, crew-commander.html, إلخ)، وتحديد العناصر المختلفة مثل العناوين، الفقرات، الصور، والقوائم. تم الاهتمام بالوصولية (Accessibility) باستخدام عناصر مثل <main>, <nav>, وسمات aria لمساعدة قارئات الشاشة.

CSS3 (أوراق الأنماط المتتالية):

الوصف: تُستخدم لتصميم وتنسيق شكل الموقع، بما في ذلك الألوان، الخطوط، والتخطيط.

الاستخدام في المشروع: من خلال ملف styles.css (غير مرفق ولكن تمت الإشارة إليه)، تم تطبيق تصميم مخصص للصفحات. يتضح من أسماء الكلاسات (grid-container, flex, uppercase) أنه تم استخدام CSS Grid و Flexbox لتنظيم التخطيط، مما يجعله تصميمًا عصريًا ومتجاوبًا مع مختلف أحجام الشاشات.

JavaScript (جافاسكريبت):

الوصف: لغة برمجة تُستخدم لإضافة التفاعلية والحيوية إلى صفحات الويب.

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

قائمة التنقل المخصصة للأجهزة المحمولة (Mobile Navigation Toggle).

نظام التبويبات (Tabs) في صفحتي الوجهات والطاقم، والذي يسمح للمستخدم بالتنقل بين المحتويات المختلفة بسلاسة.

JSON (صيغة الكائنات في جافاسكريبت):

الوصف: صيغة خفيفة لتبادل وتخزين البيانات.

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