تجربة الضيف داخل الموقع
انطباع أول بسيط وواضح، يوجّه الضيف مباشرة نحو المحتوى الذي يبحث عنه مع أقل احتكاك ممكن.
المنفذ البصري وتعريف الموقع: ظهور ParentsPrize في العنوان مع تصميم بسيط
شريط البحث: في أعلى الصفحة مع دعوة واضحة للاستخدام
روابط أساسية: المقالات، عن الموقع، اتصل بنا
ألوان فاتحة: راحة بصرية مع تباين واضح للعناصر التفاعلية
نقاط قوة التجربة
- الوصول المباشر: الضيف يصل إلى البحث والمحتوى فورًا بدون تعقيد.
- إبراز الكلمات: يظهر المصطلح المبحوث عنه داخل التناج بشكل واضح.
- مقتطف سياقي: يعرض النص حول الكلمة لقياس الصلة بسرعة.
- عداد التناج والترقيم: رؤية عدد التناج والتنقل بين الصفحات بسهولة.
مخطط الرحلة البصرية للضيف
Journey map
1) دخول الموقع
واجهة بسيطة وهوية واضحة وشريط بحث بارز.
واجهة بسيطة وهوية واضحة وشريط بحث بارز.
2) استخدام محرك البحث
إدخال الكلمة المفتاحية والضغط على بسة بحث.
إدخال الكلمة المفتاحية والضغط على بسة بحث.
3) عرض التناج
إبراز الكلمة داخل العنوان والمقتطف + عداد التناج + ترقيم.
إبراز الكلمة داخل العنوان والمقتطف + عداد التناج + ترقيم.
4) فتح المقالة
رابط مباشر إلى المحتوى مع عنوان دقيق ورابط قصير واضح.
رابط مباشر إلى المحتوى مع عنوان دقيق ورابط قصير واضح.
5) التواصل عبر الـ Popup
نموذج اتصال يظهر داخل نافذة منبثقة، أخطاء تحت كل حقل، وToast للتأكيد.
نموذج اتصال يظهر داخل نافذة منبثقة، أخطاء تحت كل حقل، وToast للتأكيد.
البحث والمحتوى — ما يراه الضيف
بحث سريع، مقتطفات سياقية، وعدّاد تناج يدعم اتخاذ القرار.
مكوّنات المجاميع الواحدة
- العنوان كرابط: يتجه مباشرة للمقال.
- الرابط المختصر: يظهر بشكل أنيق وقابل للقراءة.
- مقتطف سياقي: يعرض جزءًا من النص حول الكلمة المبحوث عنها.
- تاريخ النشر: يعزز الثقة وحداثة المحتوى.
مثال تقني مختصر
preg_replace("/(" . preg_quote($word, '/') . ")/iu", "<mark>$1</mark>", $text);
تجربة الاتصال بنا — داخل الحقل
تحقق على الخادم ورسائل أخطاء تحت الحقول، مع إشعار Toast واضح بعد الإرسال.
مزايا التنفيذ
- بدون required: الاعتماد على تحقق PHP لضمان الدقة والسيطرة.
- رسائل أخطاء تحت الحقول: إرشاد فوري قابل للفهم.
- حفظ في قاعدة البيانات: أرشفة كل رسالة داخل 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);