تصميم المواقع
تصميم المواقع عملان مختلفان يحملان اسماً واحداً: بناء شيء يعمل، وبناء شيء يبدو جميلاً. يبدأ هذا المسار بالجزء الذي يعمل، لأن مظهراً يجلس فوق بنية خاطئة لا يمكن إنقاذه لاحقاً.
- 12 دروس
- مجاني، دون تسجيل
من الصفر إلى موقع حقيقي، درجة درجة
-
1
فهم كيف يعمل الموقع
النطاق والخادم والمتصفح والرحلة التي تجري بينها.
-
2
بناء صفحة بـ HTML
الهيكل الدلالي، وما يقوله كل وسم للمتصفح ولقارئ الشاشة.
-
3
المظهر والسلوك: CSS وجافاسكريبت
التخطيط والاستجابة، والقدر الذي تحتاجه فعلاً من جافاسكريبت.
-
4
قرارات التصميم: الواجهة والتجربة وإتاحة الوصول
حيث ينتهي الذوق وتبدأ القواعد.
-
5
موقع حقيقي منشور
وردبريس أو منصة بناء، مع قائمة التحقق قبل النشر.
لا درجة تستغرق أسبوعاً ثابتاً. وسرعة الصعود تعتمد على عدد المرات التي تبني فيها شيئاً وتكسره، لا على عدد الفيديوهات التي تشاهدها.
المسار خطوة بخطوة
الدروس مرتبة بحيث يقوم كل درس على سابقه. ويمكنك الدخول من اي نقطة ايضا.
- 1كيف يعمل الموقعحين تكتب عنوان موقع، يترجم متصفحك أولاً اسم النطاق إلى عنوان رقمي، ثم يتصل بالحاسوب الجالس خلفه، فيستلم نص HTML ويبني الصفحة منه. الموقع هو هذه الرحلة القصيرة ذهاباً وإياباً، وكل مشكلة تراها وقعت في حلقة من حلقات هذه السلسلة.مبتدئ
- 2تعلم HTML من الصفرHTML لغة بنية الصفحة لا لغة برمجة: بها تقول هذا عنوان، وهذه فقرة، وهذه قائمة، وهذا رابط. وللبدء تحتاج فقط إلى ملف نصي بامتداد html ومتصفح، وتُبنى صفحتك الأولى في العشر دقائق الأولى.مبتدئ
- 3تعلم CSS من الصفرCSS يقرر كيف يبدو ما بناه HTML: اللون والتباعد والحجم وموضع كل عنصر. ولكل قاعدة فيه ثلاثة أجزاء: محدد يقول أي عنصر، وخاصية تقول ماذا، وقيمة.مبتدئ
- 4تعلم جافاسكريبت للمبتدئينجافاسكريبت تمنح الصفحة سلوكا: الاستجابة لما يفعله الزائر، وتغيير المحتوى دون إعادة تحميل، وجلب بيانات من الخادم. هيكل الصفحة عمل HTML ومظهرها عمل CSS؛ وجافاسكريبت لا تلزم إلا حيث يجب أن تفعل الصفحة شيئا.مبتدئ
- 5ما هو التصميم المتجاوبالتصميم المتجاوب يعني صفحة واحدة برابط واحد ومحتوى واحد يتغير تخطيطه مع عرض الشاشة، لا نسخاً منفصلة للهاتف والحاسوب. والعروض التي يتغير عندها التخطيط لا تأتي من قائمة أجهزة؛ بل من المواضع التي ينكسر فيها تخطيطك أنت.مبتدئ
- 6مبادئ تصميم واجهة المستخدمالواجهة الجيدة هي التي يفهم فيها المستخدم الخطوة التالية دون تفكير، وأربعة أشياء تبنيها: التسلسل والتباين والتباعد والثبات. والثلاثة الأولى قابلة للقياس، والرابع هو ما ينفع في صفحة البيع أكثر من الإبداع.مبتدئ
- 7ما هي تجربة المستخدمتجربة المستخدم هي المسار كله الذي يقطعه الشخص للوصول إلى هدفه، من لحظة سماعه اسمك إلى لحظة إنهائه أو انسحابه. وواجهة المستخدم ليست سوى سطح ذلك المسار؛ أما التجربة فهي المسار نفسه، بكل خطوة فيه زائدة أو غامضة أو مُتعِبة.مبتدئ
- 8تعلم ووردبريس للمبتدئينووردبريس نظام لإدارة المحتوى: بدل أن تبرمج كل صفحة، تكتب المحتوى في لوحة تحكم فيحوّله ووردبريس إلى صفحة. وللبدء تحتاج ثلاثة أشياء، نطاقاً واستضافة ونحو نصف ساعة؛ وبقية الطريق قرارات يرتبها هذا الدرس.مبتدئ
- 9منصة بناء المواقع أم تصميم مخصصمنصة بناء المواقع والتصميم المخصص جوابان صحيحان لسؤالين مختلفين: أحدهما يشتري سرعة الوصول إلى نسخة أولى، والآخر يشتري التحكم والملكية. فإن لم تكن متأكداً بعد مما ينبغي أن يفعله الموقع بالضبط، فالمنصة خيار أفضل؛ وإن كانت حاجتك واضحة وتقع خارج قائمة الميزات الجاهزة، فاذهب إلى المخصص.مبتدئ
- 10ما إتاحة الوصول إلى الويبإتاحة الوصول إلى الويب تعني بناء صفحة تعمل أيضا بلوحة المفاتيح وبقارئ الشاشة ولعين ترى الألوان على نحو مختلف. ومعظمها ليس صعبا: HTML صحيح، وتباين كاف، وحالة تركيز تُرى، وصور تحمل نصا بديلا.متوسط
- 11قائمة التحقق قبل إطلاق الموقعقائمة الإطلاق ليست قائمة ممارسات حسنة؛ بل قائمة ما يصير أغلى بعد الإطلاق أو لا يعود أبدا. لها أربعة أعمدة: التقني والمحتوى والقانوني والقياس، وأهم بند فيها وسم من سبعة أحرف يبقى من نسخة التجربة.متوسط
- 12الذكاء الاصطناعي في تصميم المواقعيصوغ الذكاء الاصطناعي اليوم مسودة صفحة في دقائق ثم يقف: فما يعطيك يشبه ألف صفحة أخرى، لأنه تعلم منها. وموقفنا بسيط: المسودة بالنموذج والنشر بحكم الإنسان، والجزء الصعب من العمل هو ذلك الحكم بالضبط.متوسط
ترتيب هذه الدروس يأتي من ملاحظة بسيطة: من يتعلم HTML أولاً ثم يذهب إلى منصة بناء المواقع يفهم ما يفعله، ومن يبدأ بالعكس لا يملك أي أداة لفهم أول مشكلة حقيقية تواجهه. لذلك نبدأ بما يحدث حين يُفتح موقع، ثم لغة بنية الصفحة، ثم المظهر والسلوك، وأخيراً وردبريس والنشر.
هذا المسار لن يجعلك مبرمجاً، وليس هذا هدفه. هدفه أن تستطيع بناء صفحة حقيقية واحدة، وقراءة شفرة غيرك وفهمها، ومعرفة أين تنظر حين يتعطل شيء. وهذه الثلاثة تكفي أغلب من يريد موقعه الخاص.
أمر نادراً ما يُقال بصراحة: عند كثير من الأعمال تكون منصة بناء المواقع هي الجواب الصحيح ولا يحتاج أحد إلى بناء مخصص. والدرس المخصص لهذا السؤال يقول أين يكون الاختيار صحيحاً وأين لا يكون، بدل أن يعرف الجواب مسبقاً.
اسئلة متابعة حقيقية
هل يجب أن أعرف البرمجة لأصمم موقعاً؟
لبناء موقع، لا. ولفهمه، نعم. فوردبريس أو منصة بناء تُشغّل موقعاً دون سطر كود واحد. لكن الفرق بين من قرأ HTML وCSS ومن لم يقرأهما يظهر يوم يتعطل قالب أو تبطؤ الصفحة.
أبدأ بمنصة بناء المواقع أم أكتب الشفرة من الصفر؟
إن كان هدفك تشغيل موقعك الخاص، فابدأ بمنصة بناء أو وردبريس واقرأ HTML بالتوازي؛ سترى شيئاً يعمل أسرع. وإن كان هدفك العمل مصمماً، فابدأ من الشفرة، لأن العميل يحتاجك تحديداً حيث تعجز منصة البناء.
كم يستغرق تعلم تصميم المواقع؟
أول صفحة تبنيها بنفسك تُبنى في اليوم الأول. وما يملأ المسافة بين تلك الصفحة وموقع يعمل فعلاً لعميل يدفع هو عدد المشاريع التي أفسدتها، لا ساعات الفيديو التي شاهدتها. ومن يعطيك رقماً قاطعاً فهو يبيع دورة.
كُتب هذا المسار لمن يريد أن يبني بنفسه أو أن يفهم. وإن لم يكن لديك الوقت وفضّلت تسليم العمل، انظر صفحة خدمة تصميم المواقع