موقعنا الخاص
Maksutovdesign.ru ليس عرضًا تجريبيًا ولا قالبًا جاهزًا، بل أداة عمل حقيقية للاستوديو: 251 صفحة ثابتة بأربع لغات، مبنية يدويًا بدون أي نظام إدارة محتوى أو إطار عمل. هنا أنا العميل والمصمم والمطوّر في آن واحد — هذه الصفحة تشرح الألوان والخطوط والمكوّنات وتقنيات SEO والبنية متعددة اللغات.
01 / حجم المشروع
251 صفحة بأربع لغات بدون أي إطار عمل
كل صفحة هي ملف HTML مستقل بوسم <style> خاص به: بدون أداة بناء، بدون معالج CSS
مسبق، وبدون حزمة CSS مشتركة. الشيء الوحيد الذي يربط الصفحات ببعضها هو عدد قليل من ملفات
<script> من assets/js/ — البحث، نموذج التواصل، حركة الظهور عند
التمرير، وحركات التفاعل الدقيقة عند التحويم.
02 / الألوان
ورق دافئ، حبر شبه أسود، ولون أحمر واحد كتمييز
تقوم لوحة الألوان على التباين بين خلفية فاتحة دافئة ونص «حبري» كثيف، بدلاً من الأبيض والأسود الصرفين — هذا يجعل القراءة أهدأ في صفحات دراسات الحالة الطويلة. الأحمر هو اللون التمييزي الوحيد في الموقع: يُستخدم لتمييز لغة الواجهة النشطة، الروابط عند التحويم، أزرار CTA، وحالات تحويم البطاقات. الأخضر والأزرق يظهران بشكل محدود فقط، لحالات ثانوية وروابط وأرقام في تصور البيانات.
--paper/--paper-2)، ثلاث درجات نص (--ink/--ink-2/--ink-soft)، ثلاثة ألوان تمييزية (--red/--green/--blue) وحدّان (--line/--line-strong).03 / الخطوط
خطان لكل الموقع: Onest للواجهة وJetBrains Mono للتسميات
خط Onest — خط إنساني بلا زوائد — يحمل العناوين ونص الفقرات والتسميات في معظم أنحاء الموقع.
أما JetBrains Mono فيُستخدم حصريًا للعناصر «التقنية»: تسميات eyebrow للأقسام، الوسوم، أرقام
بطاقات الإحصاء، ومبدّل اللغة — بحيث تُقرأ هذه العناصر كمعلومات نظامية لا كنص عادي. مقياس الخطوط
بالكامل مبني على clamp() ويتمدد بسلاسة بين الجوال وسطح المكتب دون قفزات عند كل نقطة كسر.
clamp(48px, 9vw, 142px)، H2/Section title بحجم clamp(34px, 5.8vw, 82px)، النص بخط Onest، والتسميات والأرقام بخط JetBrains Mono.04 / المكوّنات ونظام التصميم
مجموعة مكوّنات واحدة لـ251 صفحة
الأزرار والوسوم ومبدّل اللغة وقائمة الهامبرغر لا يُعاد تصميمها لكل صفحة، بل تُجمَّع من نفس مجموعة
الأصناف: زر CTA مصمت، زرّان بحدود مع سهم، وسوم مدمجة على شكل حبوب، ومبدّل لغة من أربعة عناصر
(RU/EN/中/ع) بحالة نشطة باللون الأحمر. كل حالات التحويم والتركيز — بما فيها السهم في روابط
card-action — تُضاف عبر سكربت مشترك واحد هو
assets/js/micro-motion.js، المُحمَّل في كل صفحة من الـ251 صفحة. هذه الصفحة نفسها
جزء من نظام التصميم ذاته: على سبيل المثال، عنوان كل قسم هنا مبني من نفس الصنف
.section-head (وسم + عنوان) المستخدم في أي صفحة أخرى من الموقع.
الأزرار — يتحول للأحمر عند التحويم
الوسوم
مبدّل اللغة — RU / EN / ZH / AR
قائمة الهامبرغر — الرابط يتحول للأحمر عند التحويم
البحث في الموقع — اللوحة مفتوحة مع نتائج توضيحية
شريط التنقل (breadcrumbs) — في كل صفحة داخلية
assets/js/search.js) يبني فهرسًا عبر كل الصفحات الـ251 ويفتح لوحة النتائج مباشرة في الترويسة؛ نفس شريط التنقل (.breadcrumbs) يظهر في كل صفحة داخلية من صفحات الموقع.نمط البطاقة — التحويم يملأ البطاقة باللون الداكن ويحوّل الزر للأحمر
05 / SEO والبنية متعددة اللغات
canonical وhreflang وJSON-LD في كل صفحة من الـ251
كل صفحة في اللغات الأربع تحمل رابط canonical ومجموعة كاملة من بدائل hreflang
(ru/en/zh/ar + x-default)،
ووصف meta فريد، وصورة معاينة OG/Twitter خاصة بها — وليس صورة واحدة مشتركة للموقع كله. هيكل
العناوين أحادي المستوى بدقة: <h1> واحد فقط في كل صفحة، مما يحافظ على دلالة
نظيفة لمحركات البحث وقارئات الشاشة على حدّ سواء.
البيانات المنظَّمة تعتمد على JSON-LD: رسم بياني واحد مشترك من Organization +
Person لكل الموقع، مع كتلة BreadcrumbList/Service فريدة
لكل صفحة. سكربت seopack.py المتماثل الفعل (idempotent) يعيد بناء هذه الكتلة كاملةً
عبر أكثر من 186 صفحة عند تغيّر القالب المشترك.
- canonical + hreflang ru/en/zh/ar/x-default في كل صفحة
- JSON-LD: Organization وPerson وBreadcrumbList/Service في رسم بياني واحد
- صورة معاينة OG/Twitter فريدة لكل صفحة بدلاً من صورة عامة واحدة
- sitemap.xml وrobots.txt مُحدَّثان باستمرار، وصفحة 404 وfavicon منفصلان
- عنوان <h1> واحد لكل صفحة وتسلسل عناوين نظيف
06 / إحصائيات الموقع
إحصاءات مفتوحة بدلاً من Google Analytics
تحليلات الزيارات تعمل عبر أداة تتبّع خفيفة مبنية داخليًا وليست خدمة خارجية: سكربت صغير في
assets/js/search.js يرسل «إشارة» مجهولة إلى admin/track.php — بدون
كوكيز من طرف ثالث وبدون Google Analytics أو Yandex.Metrica. الأرقام المتراكمة — الجلسات والزوّار
الفريدون ونسبة سطح المكتب/الجوّال ومعدّل تحويل الطلبات ومصادر الزيارات والجغرافيا وأكثر الصفحات
مشاهدة — تُعرض على صفحة /stats/ المفتوحة والمتاحة للجميع، والتي تسحب هذه البيانات
مباشرةً من admin/stats-api.php.
نموذج بطاقات KPI — توضيحية وليست أرقامًا حقيقية (الأرقام الفعلية على صفحة الإحصاءات)
07 / لوحة إدارة CRM
CRM مبنية ذاتيًا بلغة PHP — بدون قاعدة بيانات وبدون كشف رابط الدخول
نشر المشاريع ودراسات الحالة والمدونة وأقسام أخرى يتم عبر لوحة خاصة /admin/ —
وحدة PHP صغيرة مبنية ذاتيًا، لا يمكن الوصول إليها إلا باسم مستخدم وكلمة مرور (صفحة الدخول غير
مفهرَسة ولا يوجد أي رابط إليها من الجزء العام للموقع). البيانات مخزَّنة في ملفات JSON مسطّحة —
بدون MySQL وبدون أي وصول شبكي لقاعدة بيانات.
الدخول محمي كما في أي CRM عادية: تُتحقّق كلمة المرور عبر bcrypt
(password_verify())، وتُعاد تهيئة الجلسة بعد دخول ناجح
(session_regenerate_id())، ومحاولات الدخول الفاشلة تُحسب حسب عنوان IP — وبعد
عدد منها يُفعَّل حظر مؤقت. كل نموذج يحمل رمز CSRF يُتحقَّق منه على الخادم مع كل طلب POST.
- التخزين — ملفات JSON مسطّحة، بدون قاعدة بيانات
- كلمة المرور — تجزئة bcrypt فقط، وإعادة تهيئة الجلسة عند الدخول
- حدّ لمحاولات الدخول حسب IP مع حظر مؤقت
- رمز CSRF يُتحقَّق منه مع كل طلب POST في اللوحة
- رفع الصور — تحقّق عبر
getimagesize()وقائمة MIME مسموحة (JPG/PNG/WEBP)، واسم الملف يولّده الخادم دائمًا - كل المخرجات تُفلتَر عبر دالة واحدة مشتركة
h()
اسم الدخول وكلمة المرور غير منشورين في أي مكان؛ للاطّلاع على البيانات التي تعرضها هذه CRM فعليًا، انظر صفحة إحصاءات الموقع المفتوحة — فهي تستخدم نفس مصدر البيانات.
08 / نموذج الطلب
زر «اطلب تصميمًا» يفتح نموذجًا، لا برنامج بريد
كل أزرار «اطلب تصميمًا» في الموقع تشير إلى نفس عنوان mailto: — وهذا هو الخيار
الاحتياطي فقط إن كان JavaScript معطّلًا في المتصفح. مع تفعيل JS، يعترض
assets/js/contact-form.js النقرة ويفتح نافذة منبثقة بنموذج حقيقي بدلاً من برنامج
البريد: الاسم، وسيلة التواصل (هاتف/بريد إلكتروني/تيليجرام)، قائمة منسدلة للخدمة، وتفاصيل المهمة.
الإرسال يتم عبر طلب fetch() إلى خدمة خارجية لمعالجة النماذج هي FormSubmit، والتي
تُعيد توجيه الطلب إلى بريد المصمم — دون وجود خادم خاص لمعالجة البريد.
09 / الأمان
الصفحات الثابتة تقلّص سطح الهجوم، ولوحة الإدارة محمية بشكل منفصل
الجزء العام من الموقع عبارة عن ملفات HTML ثابتة بدون قاعدة بيانات وبدون معالجة طلبات من جانب الخادم، لذا لا توجد أصلًا فرصة لحقن SQL — ببساطة لا يوجد SQL لحقنه. كل ما يحتاج إلى خادم خلفي — لوحة إدارة CRM الخاصة لإدارة المشاريع والمدونة والطلبات — منفصل في وحدة PHP لها محيط حماية خاص بها.
- ترويسات أمان: X-Content-Type-Options وX-Frame-Options وReferrer-Policy وStrict-Transport-Security
- لوحة إدارة CRM محمية برمز CSRF في كل نموذج
- كلمات مرور المدير تُخزَّن فقط كتجزئة bcrypt
- بيانات CRM مخزَّنة كملفات JSON مسطّحة بدون واجهة SQL متاحة عبر الشبكة
ناقش المشروع
هل تحتاج إلى تصميم موقع أو تطبيق؟
حدّثني عن المشروع والجمهور — سأقترح الهيكل وحجم العمل والمدة والسعر.
اطلب تصميم موقع10 / مشاريع أخرى في هذه الخدمة