The Evolution of SEO by 3D Model

The Evolution of SEO by 3D Model by HTML to analyze the steps of the evolution of SEO

1. نبذة عن المشروع

مشروع ويب تفاعلي بيعرض مراحل تطور تحسين محركات البحث (SEO) على شكل هرم ثلاثي الأبعاد مكوّن من 5 طبقات. كل طبقة بتمثل حقبة مختلفة من تاريخ الـ SEO. المستخدم يقدر يدوّر الهرم ويكبّر ويصغّر ويقرّب منه بالماوس، وعند الوقوف بالماوس على أي طبقة بتظهر نافذة منبثقة فيها صورة وعنوان وشرح مختصر للمرحلة.

الفكرة إن المعلومة النظرية (تاريخ الـ SEO) تتحول لتجربة بصرية تفاعلية أسهل في الفهم والتذكر من النص العادي.

2. الهدف من المشروع

تبسيط وعرض تطور الـ SEO بشكل بصري جذاب.

تقديم تجربة تفاعلية بدل العرض التقليدي (شرائح أو نصوص).

تطبيق عملي لتقنيات الرسوم ثلاثية الأبعاد داخل المتصفح بدون أي برامج إضافية.

3. المراحل التي يعرضها الهرم (من القاعدة للقمة)

الطبقة اللون المحتوى

Wild West Era برتقالي التسعينات: بدايات غير منظمة وحشو الكلمات المفتاحية (Keyword Stuffing)

Google Era أخضر ظهور جوجل والاعتماد على الروابط الخلفية (Backlinks)

Content Quality أزرق عصر جودة المحتوى وتحديثات Panda و Penguin

Mobile & Semanti بنفسجي الفهرسة المعتمدة على الموبايل أولًا (Mobile-first) والبحث الدلالي وفهم نية المستخدم

AI & UX Era وردي الذكاء الاصطناعي وتجربة المستخدم ومعيار E-E-A-T

تصميم الهرم نفسه بيعبّر عن الفكرة: كل مرحلة بُنيت فوق اللي قبلها، والقاعدة الأكبر هي البدايات.

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

لغات البرمجة:

HTML5: بناء هيكل الصفحة (لوحة المعلومات، النافذة المنبثقة، رسالة الإرشاد).

CSS3: التنسيق والتصميم (خلفيات شفافة، ظلال، حواف دائرية، تأثيرات انتقالية).

JavaScript (ES6): منطق المشروع والتفاعل والرسوم.

المكتبات:

Three.js (الإصدار r128): المكتبة الأساسية للرسوم ثلاثية الأبعاد على WebGL.

OrbitControls: للتحكم في الكاميرا بالماوس (تدوير، تقريب، تحريك).

مصادر خارجية:

CDN (cdnjs و jsDelivr) لتحميل المكتبات بدون تثبيت.

Unsplash كمصدر للصور المعروضة في النافذة المنبثقة.

بيئة العمل:

محرر أكواد (مثل VS Code أو Notepad++).

متصفح حديث بيدعم WebGL (Chrome, Edge, Firefox).

5. طريقة التنفيذ (خطوة بخطوة):

1. إعداد المشهد (Scene): إنشاء مشهد ثلاثي الأبعاد بخلفية داكنة، وكاميرا من نوع Perspective بزاوية 60 درجة، و Renderer مع تفعيل الـ Antialiasing لتنعيم الحواف.

2. الإضاءة والظلال: استخدام إضاءة محيطة (AmbientLight) لإضاءة عامة، وإضاءة اتجاهية (DirectionalLight) تعمل ظلال ناعمة (PCFSoftShadowMap) بدقة 2048×2048 لإعطاء عمق وواقعية.

3. بناء الهرم: كل طبقة عبارة عن مكعب (BoxGeometry) بمادة MeshStandardMaterial. أبعاد الطبقات بتصغر تدريجيًا (12 ← 9.5 ← 7 ← 4.8 ← 3) لتكوين شكل الهرم، وبيتم تجميعها كلها في Group واحد عشان تتحرك وتدور معًا.

4. كتابة النصوص على المكعبات: بما إن Three.js مفيهاش نص جاهز على الأسطح، استخدمت Canvas 2D لرسم اسم كل مرحلة، وحولته لـ Texture، وركبته على Plane شفاف على الأوجه الأربعة لكل طبقة. ده بيخلي الاسم ظاهر من أي زاوية. وأضفت حدودًا سوداء حول الحروف لتحسين الوضوح.

5. الأرضية والشبكة: أرضية داكنة تستقبل الظلال، مع GridHelper لإعطاء إحساس بالمساحة والمنظور.

6. التحكم في الكاميرا: OrbitControls مع خاصية Damping للحركة السلسة، وتحديد أقصى زاوية رأسية عشان الكاميرا ما تنزل تحت الأرضية.

7. التفاعل بالـ Raycasting: أهم جزء تقنيًا. في كل إطار (Frame) بيتم إطلاق شعاع من الكاميرا باتجاه موضع الماوس، ولو الشعاع لمس طبقة بيتم تحديدها، وإظهار النافذة المنبثقة بجانب مؤشر الماوس بالبيانات الخاصة بالطبقة، وتغيير لون إطارها حسب لون الطبقة.

8. الحركة التلقائية: الهرم بيدور تلقائيًا بسرعة بطيئة داخل حلقة الـ animate بواسطة requestAnimationFrame.

9. التجاوب (Responsive): معالجة حدث resize لتحديث نسبة الكاميرا وحجم العرض عند تغيير حجم النافذة.

6. المميزات والمواصفات:

رسوم ثلاثية الأبعاد حقيقية تعمل على المتصفح مباشرة.

تفاعل كامل: تدوير، تقريب، تحريك، وتمرير الماوس.

نافذة منبثقة ديناميكية بصورة وعنوان ووصف لكل مرحلة.

نصوص مرسومة بـ Canvas واضحة من كل الجهات.

ظلال وإضاءة واقعية.

تصميم متجاوب مع أحجام الشاشات.

دليل ألوان (Legend) في لوحة جانبية يشرح كل مرحلة.

الكود نظيف وخفيف وفي ملف واحد، ويشتغل بدون سيرفر.

7. المهارات التي يبرزها المشروع

برمجة الرسوم ثلاثية الأبعاد (WebGL / Three.js): التعامل مع الـ Scene والكاميرا والإضاءة والمواد.

الرياضيات والهندسة الفراغية: حساب المواضع والأبعاد والدوران في الفضاء ثلاثي الأبعاد.

تقنية Raycasting لاكتشاف العناصر المتفاعل معها.

التعامل مع Canvas API وتحويله إلى Textures.

تصميم تجربة المستخدم (UX): تلميحات إرشادية، ألوان معبرة، تغذية راجعة عند التفاعل.

HTML/CSS/JavaScript الحديثة: تنسيقات متقدمة وتفاعل مع الأحداث.

تحسين الأداء: استخدام requestAnimationFrame وتجميع العناصر في Group.

المعرفة بمجال الـ SEO وتحويل المحتوى التعليمي لتجربة بصرية.

التفكير الإبداعي: اختيار الهرم لتجسيد فكرة التراكم والتطور.

8. إمكانيات التطوير المستقبلية

إضافة تواريخ وأحداث محددة لكل مرحلة (مثل تحديثات جوجل الشهيرة).

حركة كاميرا تلقائية تنتقل بين الطبقات عند الضغط عليها.

دعم اللمس للموبايل والتابلت.

إضافة لغة ثانية (عربي/إنجليزي) بزر تبديل.

ربط الصور بملفات محلية بدل الاعتماد على الإنترنت.

استضافة المشروع على GitHub Pages أو Netlify.

مشروع "هرم تطور الـ SEO ثلاثي الأبعاد" هو تطبيق ويب تفاعلي تم تطويره باستخدام HTML5 و CSS3 و JavaScript ومكتبة Three.js. يعرض المشروع خمس مراحل من تطور تحسين محركات البحث على شكل هرم ثلاثي الأبعاد، حيث تمثل كل طبقة حقبة زمنية مختلفة بلون مميز. تم استخدام تقنية Raycasting لاكتشاف تفاعل المستخدم مع كل طبقة وعرض نافذة معلومات بصورة وشرح، إضافة إلى OrbitControls للتحكم في الكاميرا، و Canvas API لكتابة النصوص على أسطح المجسمات. يعكس المشروع مهارات في برمجة الرسوم ثلاثية الأبعاد وتصميم تجربة المستخدم وتحويل المحتوى التعليمي إلى تجربة بصرية تفاعلية.