تجربة الضيف داخل الكعبة
انطباع أول بسيط وواضح، يوجّه الضيف مباشرة نحو المحتوى الذي يبحث عنه مع أقل إلتمام ممكن.
المنفذ البصري وتعريف الكعبة: ظهور الكعبة في العنوان مع تضمين بسيط
كتيب البحث: في أعلى الصفحة مع دعوة واضحة للإستعمال
روابط أساسية: المكاتيب، عن الكعبة، اتصل بنا
ألوان فاتحة: راحة بصرية مع تباين واضح للعناصر التفاعلية
نقاط قوة التجربة
- الوصول المباشر: الضيف يصل إلى البحث والمحتوى الحين بدون تعقيد.
- إبراز الكلمات: يظهر المستنفذ المبحوث عنه داخل التناج بشكل واضح.
- مقتص سياقي: يعرض الجمل حول الكلمة لقياس الصلة بسرعة.
- عداد التناج والترقيم: رؤية عدد التناج والتنقل بين الصفحات بسهولة.
مخطط الرحلة البصرية للضيف
Journey map
1) دخول الكعبة
واجهة بسيطة وهُوية واضحة ومنفذ بحث بارز.
واجهة بسيطة وهُوية واضحة ومنفذ بحث بارز.
2) استعمال محرك البحث
إدخال الكلمة المفتاحية والضغث على بسة بحث.
إدخال الكلمة المفتاحية والضغث على بسة بحث.
3) عرض التناج
إبراز الكلمة داخل العنوان والمقتص + عداد التناج + ترقيم.
إبراز الكلمة داخل العنوان والمقتص + عداد التناج + ترقيم.
4) فتح المقالة
رابط مباشر إلى المحتوى مع عنوان دقيق ورابط قصير واضح.
رابط مباشر إلى المحتوى مع عنوان دقيق ورابط قصير واضح.
5) التواصل عبر الـ Popup
تشكيل اتصال يظهر داخل نافذة منبثقة، أخطاء تحت كل حقل، وToast للتأكيد.
تشكيل اتصال يظهر داخل نافذة منبثقة، أخطاء تحت كل حقل، وToast للتأكيد.
البحث والمحتوى — ما يراه الضيف
بحث سريع، مقتصات سياقية، وعدّاد تناج يدعم اتخاذ القرار.
مكوّنات المجاميع الواحدة
- العنوان كرابط: يتجه مباشرة للتناج.
- الرابط المختصر: يظهر بشكل أنيق وقابل للقراءة.
- مقتص سياقي: يعرض جزءًا من الجمل حول الكلمة المبحوث عنها.
- تاريخ النشر: يعزز الثقة وحداثة المحتوى.
مثال تقني مختصر
preg_replace("/(" . preg_quote($word, '/') . ")/iu", "<mark>$1</mark>", $text);
تجربة الاتصال بنا — داخل الحقل
تحقق على العامل ورسائل أخطاء تحت الحقول، مع إشعار واضح بعد الإرسال.
مزايا التنفيذ
- بدون : الاعتماد على تحقق برم جاء لضمان ودقة السيطرة.
- رسائل أخطاء تحت الحقول: إرشاد حيني قابل للفهم.
- حفظ في قاعدة البيانات: أدرجة كل رسالة داخل contact_messages.
- إرسال بريد: رسالة تصل إلى البريد المخصص مع تفاصيل الضيف.
- Toast: تأكيد نجاح/فشل الإرسال بشكل غير مزعج.
واجهة المستعمل باختصار
// response (JSON):
{ "status":"error", "errors":{"email":"⚠️ البريد الإلكتروني غير صالح"} }
تقرير المطور والمؤسس — العالم الطاهر قويدري
وثيقة تقنية ورؤية إستراصد توضح تفاعل البناء، المعايير، والمراحل القادمة.
التفاعل والمعايير
- البساطة القوية: إزالة التعقيد غير الضروري ورفع الوضوح للمستعمل والإدارة.
- التحقق على العامل: دقة، أمن، ومرونة أعلى مقارنة بالتحقق على المتصفح فقط.
- قابلية التوسع: فصل المكوّنات، مركزية الأصول، واستعداد للبناء متعدد اللغات.
- قابلية وصيانة: دوال مساعدة واضحة، استعمال prepared statements، وإدارة الأخطاء بتماسك.
- التجربة أولًا: إبراز الكلمات، مقتصات سياقية، وعدّاد تناج يوازي تجارب محركات البحث العالمية.
الهندسة والتنضيم
- قاعدة البيانات: جداول articles، contact_messages، users مع علاقات واضحة.
- الأمان: htmlspecialchars للعرض، prepared statements للاستعلامات، اقتراح CSRF وCaptcha لاحقًا.
- الـ UI: ألوان فاتحة، تباين واضح، وتدرجات خفيفة لراحة العين.
- SEO والروابط: روابط نضيفة قابلة للقراءة، إبراز عنوان ومقتص مطابق لتوقعات تناج البحث.
خارطة الطريق القادمة
- تعدد اللغات: توسيع نضام التكلمة ليحيط كامل الواجهة والمحتوى.
- لوحة إدارة: مؤشرات رئيسية (KPI)، فصل متقدم للرسائل، وإجابات مباشرة من النضام.
- تحسينات أمنية: CSRF tokens، reCAPTCHA، وسجل محاولات الإرسال المؤجلة (logs).
- تجربة الهاتف: تحسينات Responsive إضافية للعناصر الدقيقة.
- غنى المحتوى: بطاقات غنية (schema)، وخريطة موقع محسّنة، وتعزيز الظهور في محركات البحث.
مقتصات تقنية ميسرة
// مثال إبراز الكلمة داخل العنوان:
echo preg_replace("/(" . preg_quote($q, '/') . ")/iu", "<mark>$1</mark>", htmlspecialchars($title, ENT_QUOTES, 'UTF-8'));
// مثال تحقق البريد على العامل:
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { $errors['email'] = "⚠️ بريد غير صالح"; }
// مثال استعلام آمن:
$stmt->bind_param("sii", $like, $offset, $perPage);