التخصصات 01 · مواقع الويب

مواقع الويب

الويب هو حيث يلتقي التصميم والكود عندي بأكثر الأشكال مباشرةً. أستخدم مشاريع مفاهيمية كاملة لاستكشاف البنية والتايبوغرافيا والسلوك المتجاوب والإتاحة والتفاعل بوصفها نظامًا واحدًا.

الشكل: صفحة واحدة، أو خمسة إلى ثمانية أقسام. المنهج نفسه في الحالتين.
المقاربة: نطاق محدد قبل البداية، وتنقيح في أثناء العمل، وإنهاء لا هجران.
المراجعات: جولات تنقيح حقيقية، لأن المسودة الأولى نادرًا ما تكون الكلمة الأخيرة.
الإتاحة: مبني وفق ممارسة WCAG 2.1 AA منذ أول commit، لا كمرحلة أخيرة.
المصدر: كل بناء ثلاثة ملفات مقروءة — افتح أيًّا منها وشغّله وافحصه.

01 · ما هذا

موقع ويب، وما تعنيه هذه الكلمة هنا

موقع مكتمل منجز من تصميمي، مكتوب يدويًا. لا قالب مشترى من سوق قوالب، ولا أداة بناء صفحات — كل واحد من العشرة مشروع وضعته لنفسي وعملت عليه من أوله إلى آخره.

معظم البناءات العشرة على هذا الموقع بدأت من السؤال نفسه: كيف سيبدو هذا لو أُنجز كما ينبغي؟ مطعم، عيادة، منتج SaaS — كل واحد فرصة لمعالجة مشكلة حقيقية من أولها إلى آخرها، اخترتها بنفسي ولم تُسند إليّ.

البنية

HTML دلالي، يُقرأ قبل أن يُرى

تسلسل هرمي للمعلومات ومحتوى يظل مفهومًا دون مؤثرات بصرية. البنية ثم التصميم ثم السلوك، بهذا الترتيب من الأهمية.

التخطيط

تكوين يتكيف، لا يتقلص فحسب

CSS Grid وFlexbox وخط سلس الأحجام. الأعمدة تنطوي بترتيب قررته أنا، والنسخة الأضيق مصممة لا ناجية بالكاد.

الأداء

الصفحة قابلة للاستخدام قبل وصول الإضافات

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

الإتاحة

كل عنصر تحكم يمكن بلوغه دون فأرة

سلوك التركيز، والتباين، وترميز دلالي، وARIA حيث يلزم — واجهات لا تعتمد على الحركة. مفحوصة يدويًا، مفتاحًا مفتاحًا.

التفاعل

تنقّل ونماذج وحركة تبقى قابلة للاستخدام

أكورديونات ومعارض ونماذج مصممة لتظل قابلة للتشغيل بلوحة المفاتيح، مع احترام تفضيلات تقليل الحركة.

التجريب

Vanilla JS، وأدوات حديثة حيث تستحق مكانها

معظم العشرة HTML وCSS وJavaScript مكتوبة يدويًا. وفي مواضع أخرى من هذا الموقع أعمل أيضًا بـReact وNext.js وVue — الأداة تتبع السؤال، لا العكس.

02 · ممَّ يتكوّن البناء

ثلاثة ملفات. هذا هو التسليم كله.

ليست استعارة ولا تبسيطًا. كل واحد من البناءات العشرة في الملف هو هذه الملفات الثلاثة مع خطوطه المستضافة ذاتيًا — افتح أيًّا منها واقرأ المصدر، وهذا هو السبب الوحيد الذي يجعل لهذه الفقرة قيمة.

index.html البنية

script.js السلوك

index.html — المحتوى وترتيبه. عناوين تنزل مستوى واحدًا في كل مرة، ومعالم تعني ما سُميت به، وكل عنصر تحكم زر حقيقي أو رابط حقيقي. هذا هو الملف الذي يقرؤه قارئ الشاشة ويفهرسه محرك البحث، ولهذا لا يُسمح لأي شيء زخرفي بأن يسكن فيه.
styles.css — اللون والخط والمسافات ومنحنيات الحركة معلنة مرة واحدة في الأعلى كقيم مسماة، ثم تُستخدم في كل مكان. غيّر ثمانيًا منها فيتغير مزاج الموقع كله. وحيث يكون زوج تباين على الحد، تُكتب النسبة المقيسة في التعليق بجانبه.
script.js — مكتوب بحيث يكون العنصر المفقود لا-عملية بدل خطأ يُرمى، وبحيث تسأل كل حركة أولًا إن كنت قد أخبرت جهازك أنك تريد قدرًا أقل منها. الصفحة تعمل مع إزالة أي جزء من هذا الملف.

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

03 · ما أختبره

ما يدخل في البناء، وما أتركه لمشروع آخر

العمودان بالحجم نفسه عن قصد. معرفة حدود البناء قرار تصميمي بقدر أي شيء داخلها.

ضمن البناء

إخراج فني مصنوع لهذا المشروع، لا مختار من مجموعة من خمسة.
نصوص كُتبت لتلائم التصميم، لا أُسقطت لاحقًا حشوًا.
كل صفحة قابلة للتشغيل من لوحة المفاتيح وحدها، ومختبرة يدويًا على هذا النحو.
حركة تتوقف حين يقول جهاز الزائر إن عليها ذلك.
ميزانية أداء تُحدد في البداية وتُقاس مجددًا في النهاية.
نماذج بعناوين حقول حقيقية، وأخطاء يُعلن عنها لا تُلوَّن بالأحمر فحسب.
بنية جاهزة للغة ثانية، حتى حيث لا توجد واحدة بعد.
مصدر كامل، مقروء من أوله إلى آخره.
تنقيح حقيقي، لا مسودة أولى سُميت نهائية.

خارج هذا الاستكشاف

تصوير فوتوغرافي أصلي — حيث يحتاجه بناء، يُؤمَّن أو يُرخَّص على حدة.
كتابة نصوص كاملة من الصفر، في مقابل هيكلة نص موجود وملاءمته.
الترجمة إلى لغة أخرى.
تكاملات الأطراف الخارجية — نظام حجوزات، أو CRM، أو مزوّد دفع — كل منها استكشاف قائم بذاته.
تغييرات المحتوى المستمرة بعد اكتمال البناء.
تحسين محركات البحث بوصفه تخصصًا قائمًا بذاته.
تكاليف النطاق والاستضافة، وأي خط أو API مدفوع.
أي ادعاء عن ترتيب أو زيارات أو تحويل. هذه بناءات مفاهيمية، لا حملات مقيسة.

04 · الأسئلة

أجوبة لا مراوغة

هل يمكن تحرير موقع كهذا دون لمس الكود؟

ليس افتراضيًا، وأُفضّل قولها بوضوح على المراوغة. الموقع المبني يدويًا يصدر ملفات، فتغيير جملة يعني تحرير ملف.

هناك جواب حقيقي يستحق الاستكشاف: طبقة تحرير فوق البناء الساكن نفسه، بحيث تصبح أجزاء مسماة من الموقع قابلة للتحرير في المتصفح دون لمس الكود. وهي نظام صغير قائم بذاته — محرر، وتسجيل دخول، وخطوة نشر — ثلاثة أجزاء متحركة أخرى تستحق أن تُفهم بشروطها الخاصة.

لماذا تُكتب ثلاثة ملفات يدويًا بدل استخدام إطار عمل؟

لأن القيد هو الفكرة. HTML وCSS وJavaScript الخام تُجبر كل قرار على أن يكون مرئيًا — لا تجريد يخفي ما تفعله الصفحة فعلًا.

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

كيف تعرف أن البناء متاح فعلًا؟

بالفحص، وهو يستغرق نحو تسعين ثانية ولا يحتاج إلى أدوات خاصة. اترك الفأرة، واضغط Tab، وراقب أين يذهب إطار التركيز.

المعيار هنا هو مبني وفق ممارسة WCAG 2.1 AA — وصف لطريقة إنجاز العمل، لا شارة، لأن الشارة ليست تدقيقًا. ما أستطيع تقديمه بدلًا من ذلك قياس لهذا الموقع، بتاريخه ومنهجيته، بحيث يمكن التحقق منه بدل أخذه على الثقة.

قيس على هذا الموقع في 10 أغسطس 2026
axe‑core: 0 انتهاكات عبر 23 مسارًا × 2 من إطارات العرض
لوحة المفاتيح: 0 من 1,526 نقطة توقف Tab بلا مؤشر تركيز مرئي
كل نقطة توقف مشيتها بضغطات مفاتيح حقيقية، مع قراءة العنصر النشط بعد كل واحدة.

05 · الأعمال

ثلاثة من العشرة، اختيرت للتنوع

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