سأخبرك بسبب تواجدك
هنا بكل ثقة وعدم تردد، نعم أنا أعلم سبب تواجدك هنا... وأنت تعلم أني أعلم. كي لا
أستمر في الكلام السخيف معك أيها الطموح الرائع، فأنت هنا لتجد ضالتك... ليظهر لك
طريق تصميم الويب واضحاً ومنيراً وجميلاً... ولهذا كتب لي أن أكتب لك أنت خصيصًا
هذا المقال، لأساعدك في بداياتك في مجال تصميم الويب.
أولا سأبدأ معك
بالتعريف البسيط أو السطحي.
تصميم الويب ببساطة،
وحسب منظوري الشخصي ومنظور أغلب مصممي الويب، هو أن تقوم ببناء صفحة ويب بمساعدة
لغات سأذكرها لاحقاً في المقال... لذا أرجو التركيز وعدم تخطي الأسطر أو التهاون
في قراءة هذا المقال...
إذن قد تسأل نفسك
الآن: «ماذا تقول؟ أنا لم أفهم منك شيءً، ما هي هذه اللغات وماهي صفحة الويب التي
تتكلم عنها».
لا تقلق، سأجيبك الآن...
إذن فلنبدأ بتعريف
صفحة الويب.
صفحة الويب هي:
ببساطة مثل ورقة، أي ورقة، كيفما كانت... بمعنى أنك تستطيع الرسم عليها كيفما شئت،
كالورقة الحقيقية تماماً، لكن لا تتسرع وتمسك قلماً وترسم على شاشة الحاسوب، فهنا
الأمر مختلف قليلاً... فلن تستخدم القلم أو برنامج مثل الفوتشوب
كما يزعم البعض... بل ستستخدم لغات سهلة وبسيطة ستقوم بتوزيع العناصر على الصفحة وتزيينها
وإعطائها خصائص مميزة...
وأنا أعلم أنك تود
أن تتعرف على اللغات المستخدمة في تصميم الويب الآن... بل أنا واثق من ذلك...
وبمقدار ثقتي في ذلك، وفي طموحك أيضاً، فإنني لن أضيعك، وسيكون هذا دليلك الشامل
للبدء.
إذن ما هي هذه
اللغات التي تتحدث عنها من الصبح؟ أخبرنا بسرعة؟
حسناً حسناً، ها نحن.
لنتفق أولا أن من
أراد أن يتعلم تصميم الويب فهناك لغتان أساسيتان، وواحدة ستعطيك اللمسات
السحرية... بإمكاني أن أشبه لك هذا كالتالي: اللغة الأولى كقلم الرصاص، واللغة الثانية
كالملونات، أما الثالثة والأخيرة هي التي ستعطي لتلك الرسوم الحيوية والنشاط...
ونستطيع أن نشبهها أنها تحول الرسوم الثابتة إلى رسوم متحركة.
لقد أطلت كثيراً في
التشبيه؛ لنتعرف على هذه اللغات عن قرب.
اللغة الأولى هي: HTML وهي اختصار لعبارة Hyper Text
Markup Lanuage.
وهي اللغة المسؤولة
عن وضع العناصر في الصفحة لا غير... وهي الأساس واللغة التي لا بد منها في تصميم
الويب، ولابد لكل شخص يود الإبحار في عالم تصميم الويب أن يبدأ بتعلمها أولاً.
اللغة الثانية هي: CSS وهي اختصار
لعبارة Cascading Style Sheet.
وهي الصديق الصدوق للـ HTML، فهي تعتبر كخبير تجميل لها إن
صح القول، فهي كالملونات... تعطي للعناصر الثابتة أشكالاً مميزة... وسأتطرق إلى
الخصائص التي يمكن أن تضيفها للعناصر بواسطة هذه اللغة.
اللغة الثالثة هي: Javascript، وهي ليست اختصارًا لأية عبارة... وهذه اللغة هي اللغة التي
تتفاعل مع المستخدم للصفحة... وأيضاً سأتطرق لما تستطيع هذه اللغة القيام به.
لكن قبل ذلك يجب أن
تعلم الآتي:
- HTML هي لغة هيكلة
- CSS هي لغة تصميم
- Javascript تستطيع القول أنها لغة برمجة
لكن بالرغم من ذلك
فهناك خطأ كبير وشائع كثيراً خصوصاً في مجتمعنا، وهو أن نسمي مصمم الويب
بالمبرمج... وللتصحيح: فإن مجال تصميم الويب بعيد كثيرًا جدًا عن البرمجة، فذاك
مجال وهذا مجال... ولا يصح أن ننادي المبرمج بمصمم الويب، كما لا يصح العكس.
دعونا الآن ننتقل لفقرة أخرى وهي أقسام تصميم الويب.
ينقسم تصميم الويب
لقسمين: واجهة المستخدم وتجربة المستخدم. فلنشرح الآن كل منهما... أنت الآن في
موقعك نطاق المعلوميات تقرأ هذا المقال في قالب... فذلك
القالب هو واجهة المستخدم، أي الواجهة التي يراها المستخدم، ويجب أن تكون مريحة
وجميلة، فالعين هي التي أصبحت تحكم.
أما تجربة المستخدم
فهي شيء غير مرئي لكن أهميته كبيرة جداً، بل وتفوق أهمية واجهة المستخدم (لكن لا
يجب التفريط في واجهة المستخدم بمجرد سماع هذه المعلومة). وفعلياً، فإن تجربة الإستخدام لا تبنى بأي لغة ولا تصمم ولا أي شيء من ذاك
القبيل... بل هي في الواقع تحسَّن... يمكننا أن نشبه تجربة الإستخدام
كالتالي: هل يمكنك أن تذهب لمطعم سيئ بينما هناك مطعم رائع بالجوار؟ لا... لكن ما
الحكمة من هذا التشبيه؟ صديقي، أنا سأشرح لك كل شيء، خطوة خطوة. إن خيروك بين
المطعم الجيد والسيئ، بالطبع ستختار الجيد أليس كذلك؟ نعم بالطبع، لكن هل السبب
لأنه جيد فقط؟ لا، بالطبع لا... بل لأن تجربة الاستخدام فيه أفضل من المطعم
السيئ... فأنت عندما تجلس على الطاولة، تجدها نظيفة، مرتبة، الإضاءة ممتازة،
الاستجابة سريعة... إلخ.
كل هذا ينطبق على
صفحات الويب لكن بمعايير أخرى، فيجب أن لا تكون هناك مشاكل في الصفحة، أن يكون
الموقع سريعاً، سهلاً في التصفح، سهلاً في الإستخدام قليل
الإعلانات... وهذا موضوع طويل سأتطرق له في مقال منفصل.
أتمنى أنه قد توضح
لك كل شيء، لكن المقال لم ينته بعد.
سنوضح الآن آلية عمل
تلك اللغات وطريقة تعلمها وبعض القنوات التي ستساعدك كثيراً في ذلك.
أولا سنشرح الأساس، HTML، نظام عملها
بسيط جداً. تعتمد على الوسوم Tags، تقريباً مثل التسميات... وتكتب بين علامتي <>، وقد يكون لدى ذلك الوسم Attributes يعني مثل
الملحقات المميزة... تستطيع تعلم هذه اللغة أكثر من خلال قناة Elzero Web School.
أما اللغة الثانية
فهي CSS، وهي تعتمد نظام تحديد الوسم وفتح معقوفتين وإعطائه خواصًا.
والجافاسكريبت، ككل لغات البرمجة، تحتوي على
متغيرات ومصفوفات ودوال... وهذا شيء يعرفه السادة المبرمجون.
لقد قلت أنني سأتحدث
عما تستطيع الـ CSS التحكم به... وها أنا سأقوم بذلك.
تستطيع هذه اللغة
التحكم بالآتي:
- لون الخلفية
- التدرجات اللونية
- شفافية العنصر
- حجم الخط
- نوع الخط
- لون الخط
- طول العنصر
- عرض العنصر
- حجم الشريط الخارجي (Border)
- لون الشريط الخارجي
- شكل الشريط الخارجي
والعديد... ذكرت لك
فقط أساسيات ما يمكنك القيام به، أما في حال وصولك لمراحل متقدمة فيمكنك أن تقوم
بعمل الـ Animations بواسطة الـ CSS فقط.
أما الجافاسكريبت... فهي لغة تفاعلية رائعة. إليك ما تستطيع
القيام به هذه اللغة:
تستطيع اللغة أن
تحذر المستخدم عند وقوع خطأ. تستطيع أيضاً القيام بالـ Animations طبقاً لتصرفات المستخدم. كذلك يمكنها أن تتحقق من الـInputs أو المدخلات، وتتحقق من صحتها، ومحتوى ما
فيها... بل أن هناك ألعاب ويب، برمجت بالـ HTMLوالجافاسكريبت فقط.
أنا لم أذكر لك كل
ما يمكنك القيام به بواسطة لغة الـ CSSو JavaScript... بل هناك
الكثير من الوظائف العديدة الأخرى، بل ويمكنك أن تفكر وتبدع وتبتكر وظيفة جديدة
ورائعة.
إذن إلى هنا نكون قد
وصلنا لنهاية المقال، أشكرك لمتابعة المقال بحب واهتمام ودمت في رعاية الله وحفظه.
