استهلال

في العام 2006 كتبت مقال باسم: الصفحة البيضاء المخيفة، أتحدث فيها عن تلك المساحة البيضاء الشاسعة التي تظهر أمامنا عند البدء في أي تصميم، سواء كان مطبوعا أو للويب. والآن وبعد 11 عاماً، لا زالت تلك الصفحة تخيفني، أقف أمامها أحيانا ساعات طوال، محاولاً ايجاد نقطة البداية التي سأنطلق منها.
وبنفس الاسلوب، أعلم الآن أننا جميعا عندما نريد أن نبدأ بتعلّم أمر ما، فاننا نقف عاجزين أمام المساحة البيضاء في دماغنا، صحراء الضياع التي ليس لها بداية ولا نهاية، وكذلك الأمر عندما تريد البدء بتعلم تصميم المواقع، وخاصة وأننا في العام 2017، حيث وصل هذا الاختصاص الى مراحل متطورة جدا، مبتعداً سنوات ضوئية عن الأساليب القديمة البسيطة لتصميم الموقع، ولهذا سنبدأ معاً في هذه الصفحة، خطوة بخطوة، من لحظة الصفحة البيضاء لغاية أن تشعر بالثقة التي تجعلك مؤهلا لكتابة سطر “مصمم ويب” في سيرتك الذاتية.




الأيام الخوالي

في أوائل العام 2000، وحتى العام تقريبا 2008، خلال ثمانية سنوات سيطرت لغة HTML على صيغة كتابة الويب، بالطبع كلنا نعلم ما الفرق بين الويب و الانترنت، ولكن قبل هذا العام، كانت كتابة الويب نوعا ما أبسط وأقل تعقيدا. كانت كتابة صفحات الويب لا تتعدى عدة جداول HTML بالتاغ الشهير <table> و الوسوم المرافقة له <tr> <td>، و أذكر تماما عندما بدأت العمل لأول مرة في صفحات الويب، كانت على برنامج Frontpage من مايكروسوف. حيث كانت البرامج الأخرى حينها أقل شهرة، أو على الأقل كانت الشركات الأخرى منافسا ضعيفا لهيمنة مايكروسوفت على سوق التكنولوجيا. و اعتمد برنامج فرونت بيج على تصميم صفحات الويب من خلال الجداول، فضلا عن أن ستايلات الموقع „التنسيق“ كان متضمنا داخل الملف نفسه في البداية، و تخيلوا معي مدى التعقيد الكبير الذي كانت عليه صفحات الويب من داخلها، أقصد الكود. ولكن في بدايات العام 2000 بدأ ادراج لغة CSS ضمن صفحات الويب، بالطبع يجب أن نعلم أن اللغة تمت كتابتها للمرة الأولى في العام 1994، ولكن كعادة عالم التكنولوجيا، والويب تحديدا، تستغرق التقنيات الكثير من الوقت حتى يتم اعتمادها رسميا وبشكل عالمي على أوسع نطاق.
حاليا، نحن في العام 2017، حيث استخدام لغة CSS هو أمر بديهي بالنسبة لمصممي الويب، حتى أن مصطلحي HTML & CSS أصبحا مصطلحين مترافقين، ولكن الوضع لم يكن كذلك في كل الأوقات.. أذكر تماما عندما كنت أعمل على موقع انترنت في برنامج فرونت بيج، حينها نظر الي صديقي المبرمج، وقال بكل دهشة: كيف تستطيع أن تصمم الويب بهذه الطريقة البدائية؟ .. كان هذا في العام 2005، ولم أفهم حينها ماذا يقصد ببدائية، بالنسبة لي كان هذا هو تصميم الويب، ولكن ما يقصده كان، أنني اقوم بالتصميم ضمن البرنامج من دون فصل ستايل الموقع عن تركيبه، أي أنني لا استخدم ملفات CSS منفصلة.
بالفعل كنت قد تأخرت حتى أدخلت CSS في حياتي التصميمية، وكان هذا بعد جهد ودراسة طويلة، بالأخص بسبب عدم توفر مصادر التعليم بشكل واسع كما هو الحال اليوم .. و فهمت حينها تماما، لماذا غضب صديقي المبرمج.

الرقم الذهبي للويب

طبعا، لم يطل الأمر، حتى ظهر الرقم 960px ، وأصبح من أشهر الارقام في عالم الويب، حيث تم اعتماده والاتفاق عليه ضمن مختصي الويب على أنه العرض المثالي لجميع صفحات الويب التي سيتم عرضها على أجهزة الكمبيوتر ذوي قياسات الشاشات المختلفة… و حيث أن InternetExplorer كان هو المسيطر الأكبر على سوق الويب بنسبة تتجاوز 85 بالمئة، تاركا أقل من 15 بالمئة للمتصفحات الأخرى، مثل فايرفوس وأوبرا وطبعا سفاري، ولا داعي لأن أذكر أن متصفح كروم لم يكن موجودا في ذاك الوقت، و اقتصر استخدام هذه المتصفحات على المبرمجين والمختصين، أما أغلبية المستخدمين لجأت لانترنت اكسبلورر بسبب توفره المجاني على جميع الأجهزة التي تعمل بنظام ويندوز.
كانت أغلب الشاشات تمتلك عرض 1024 بكسل، وتم احتساب العرض المثالي على أساس اتاحة مساحة scroll bar „الشريط المنزلق“ وبالتأكيد عرض حواف المتصفح، مع حساب مسافة جانبية جمالية، لينتهي الرقم 960 بكسل رقما منتصرا لجميع الشاشات، ولكن هذا الأمر لم يرق لعدد ليس بالقليل من المبرمجين والمصممين، فاعتمد أخرون على نظام 1000 بكسل، وأخرون على مساحات اصغر ولكن هذا لم ينفي كون الرقم 960 هو المسيطر الأكبر. نتيجة لهذا الاعتماد، ظهرت أنظمة كثيرة أو ما يسمى Frameworks اعتمدت جميعها على هذا الرقم. ولكن نحن نعيش في عصر التكنولوجيا، عصر المعلومات، في سوق واسع مخيف من الشركات العملاقة التي تتصارع يوميا لانتاج ما هو جديد، وبناء عليه كانت القوانين والقواعد تتغير بسرعة بين ليل وضحى.. وبالفعل، هذا ما حدث تاليا.




ثورة الأجهزة الرقمية

في العام 2007 تم اصدار أول هاتف iPhone، هاتف من دون كيبورد، فقط شاشة بقياس 3.5 بوصة، مع زر واحد في الأسفل، والأهم أن هذا الموبايل تضمن متصفح Safari الذي أتاح للمستخدمين تصفح الانترنت على الهاتف، بذات الطريقة كما لو على الكمبيوتر. في ذاك الوقت، لم تكن فكرة الانترنت على الموبايل فكرة مهمة جدا، لأن ميزة الاتصال الهاتفي كانت ما تزال الميزة الأهم، أما الانترنت فكانت موضوعا ثانويا، بمجرد أن يضغط المستخدم على أيقونة سفاري، ويكتب اسم موقع انترنت، بامكانه بكل بساطة بمجرد تحريك اصبعين أن يقوم بتصغير وتكبير الموقع…. بالطبع لم تكن هذه الطريقة المثالية لعرض المواقع، ولكن لم تكن أيضا سيئة، على الاقل أنا قادر على تصفح الانترنت على موبايلي.
ومرة اخرى، توجه شركات التكنولوجيا ضربة جديدة لمصممي الويب، فعالم التكنولوجيا لا يرحم ولا يهدأ، وأشخاص مثل Steve Jobs يمتلكون من الجنون لدرجة المخاطرة بكل القواعد في سبيل تنفيذ أفكارهم، وبالفعل هذا ما حدث في العام 2010، عندما أطلقت شركة Apple جهازا جديدا، هو مرحلة متوسطة بين الكمبيوتر المحمول، بدون كيبورد، و الموبايل ولكن بدون اتصال، وأطلقت عليه اسم iPad.
في الوقت الحالي قد يعتبر هذا الكلام تاريخا، ولكن في الأعوام التي أتحدث عنها، تحديدا بين الأعوام 2007 حتى 2012 كان هذه سنوات الجنون في عالم الأجهزة الرقمية، تحديدا عندما أدركت الشركات العملاقة، أن من يسيطر على عالم الموبايل فهو بالتأكيد الأقوى في السوق، وبدأ السباق بسرعة جنونية لانتاج الهواتف المحمولة والتابلتس، وبناء عليه كانت تظهر الأجهزة المختلفة بشكل دوري ويتم اصدار أنواع جديدة من الأجهزة الرقمية خلال فترات جدا متقاربة، بالطبع ما يهمنا في هذا المقال، هو العبئ الكبير الذي كان لابد أن يتحمله مصممي الويب….. تابعوا معي:

عالم غير متوقع

لنعد بالتاريخ قليلا، تذكرون عندما قلنا في أول المقال، أن العرض المثالي لموقع الويب هو 960 بكسل، كان هذا العصر الذهبي لمصممي الويب، فعلى الأقل عندما أفتح برنامج التصميم أيّاً كان هذا البرنامج، سواء فوتوشوب أو اللستريتور أو حتى فرونت بيج نفسه، كنت أعرف القياس المثالي الذي يجب أن أبدأ العمل به، و حتى بعد ظهور „أيفون و أيباد“ كان لابد من بذل قليل من الجهد لانشاء ثلاثة نسخ من الموقع تتناسب مع الأحجام المختلفة، لم يكن الأمر مثاليا، ولكنه كان ناجحا…
ولكن الجنة لم تدم لأبينا آدم، فكيف لنا؟.. بعد ثورة الأجهزة الرقمية، أصبح عالم الويب غير متوقعا، لم نعلم ما هو الجهاز الذي سيتم عرض الموقع عليه، فالعميل من الممكن أن يستقبل الموقع على كمبيوتره الشخصي في العمل ذي الشاشة الكبيرة، أو من الممكن على اللابتوب، أو في المنزل على شاشة التلفزيون.. و ربما يكون على الطريق فيضطر لفتح الموقع على الموبايل، لم نعلم ما هو المتصفح الذي سيستعمله المستخدم لتصفح الموقع، وما هو نظام التشغيل المستخدم على الكمبيوتر .. وهذه كانت المصيبة الكبرى لمصممي الويب، وكان التعامل معها بالفعل من الأمور المربكة جدا. وهنا، كان لابد من التغيير، من ظهور تقنيات جديدة للويب، تتماشى مع النظام الجديد للتكنولوجيا، و تحديدا تقنيات تصميم المواقع الحديث … و على هذا الأساس، ظهرت لغة HTML5




حصان وصحراء

ما يهمّنا أولا هو امتلاك الحصان HTML، ومن ثم سنضع السرج عليه CSS، سنتعلم كيف نمتطي هذا الحصان ونقوده بكل حريّة، فطريق الصحراء website ليس سهلا، ستواجهنا عدّة مخاطر وعثرات على الطريق bugs، يجب أن نمتلك القدرة على تسيير الحصان بأي اتجاه بأسرع ما يمكن debugging، حتى نستطيع الوصول للهدف بكل أمان Client. وبعد كل ذلك، سنأخذ نظرة الى الأفق، لنحدد نقطة الانطلاق Rules، ونعرف تماما أين سنتوقف لنتزود بالطعام والشراب Code، كل ذلك يجب أن يتم بسهولة، وهذه السهولة لا تتم الا بعد بذلك جهد كبير في البداية لاستجماع أكبر قدر من المعلومات عن أدواتنا وعن طريقنا.. وحينها فقط نستطيع القول: “أنا راكب خيل في الصحراء، أعرف كل الخيول، وأقودها في جميع الصحاري”

من هنا البداية

اذا، ونحن في منتصف العام 2017، هل يجب أن نتعلم جميع هذه المراحل التي مرّ بها الويب؟ مع العلم بوجود برامج كثيرة توفّر علينا الجهد والعناء لانهاء موقع انترنت كامل؟
الجواب: نعم، لا بدّ من تعلّم أساسيات لغتي HTML و CSS، فليس بإمكانك كتابة قصيدة شعريّة بلغة ما، ما لم تتعلم أساسيات وقواعد هذه اللغة، وهذا ما سنتابعه خطوة بخطوة في هذه الدورة المتكاملة… فلنبدأ:

أسلوب دراسة السلسلة

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


في البدء كانت النظرية

دروس نظرية في تصميم المواقع

محتويات المرحلة النظرية:

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





 

المرحلة الأولى

حصان وسرج

محتويات المرحلة الأولى:

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





 

المرحلة الثانية

حصان مجهز للسباق

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

محتويات المرحلة الثانية:
• في هذه المرحلة، سنتابع سبعة دروس فقط، بمجموع كامل ساعتين فقط.
• سنبدأ بالتعريف باللغة الجديدة HTML5 ولماذا كان لابد من تحديث اللغة، ما علاقتها بموبايل آيفون وثورة الويب الحديثة، تاريخ اللغة وكيف تم تطويرها.
• ثم سننتقل بالتأكيد لبناء موقع ويب متكامل باستخدام HTML ، حيث تعلمنا أن هذه اللغة هي لغة توصيف الويب، لذلك سيتضمن هذا الدرس بناء الموقع كاملا بهيكله الأساسي
• و كما تعلمنا أن CSS هي لغة تنسيق موقع ويب، سنقوم في الدرس الثالث باعطاء جماليات الموقع وتنسيقه باستخدام التعليمات الجديدة في النسخة المطورة CSS3
• في الدرس الرابع سنتعرف على التعليمات الجديدة في لغة HTML5 وكيفية استخدامها في التصميم
• ولابد لموقع الانترنت الحديث أن يتلائم مع جميع أجهزة العرض المختلفة، حيث أن هذا هو الهدف الأساسي من ظهور التحديث للغة، لذلك سنقوم بتعديل الموقع ليكون متجاوبا Responsive مع نسخة الموبايل
• في الدرس السادس، سنتعلم الميزة الثورية الجديدة للغة HTML5 والتي تسمح لنا بإدراج صور SVG فيكتور داخل التصميم.
• و مع خاتمة صغيرة تنتهي مرحلتنا الثانية من دورة تصميم المواقع




 

المرحلة الثالثة

فرس جميل

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

محتويات المرحلة الثالثة:
• في هذه المرحلة، سنتابع تسعة دروس، سيتم اضافة الكثير من هذه الدروس بشكل متتابع حتى تكتمل لدينا أكبر عدد من تعليمات وتقنيات لغة CSS
• سنبدأ بتعليمة Display وهي التعليمة المسؤولة عن عرض المحتويات بطرق مختلفة، وعن اخفاء العناصر أيضا
• ثم تعليمة Float التي تتحكم بتموضع العناصر يمينا ويسارا
• ويبقى من تعليمات التحكم بالظهور تعليمة z-index التي ستعطي للموقع طبقات مختلفة لتموضع العناصر فوق بعضها
• والآن نبدأ بالتعليمات الاحترافية وأولها تعليمة import  لبناء ستايلات المواقع الضخمة

 




 

المرحلة الرابعة

التطبيق العملي – كود القائمة المنسدلة

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

 




 

المرحلة الخامسة

قليل من جافا سكريبت كثير من المرح

والآن ننتقل الى مرحلة جديدة لنبدأ اولى خطواتنا في عالم جافاسكريبت، مع الأخذ بعين الاعتبار أن لغة جافا سكريب تصنف بين اللغات البسيطة والسهلة وهي اللغة التي تساعد في جمالية وتفاعلية صفحات الانترنت

 




 

المرحلة السادسة

من البداية حتى النهاية .. مجددا

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

20 thoughts on “الشامل في تعليم تصميم مواقع الانترنت

  1. Mohmad Reply

    شكرا للمجهود الرائع
    م.محمد الحاج

  2. Kamal Idris Reply

    اشكرك على جهودك ارجو منك شوح السيو كاملة بعد اذنك

  3. احمد نجم Reply

    امنور يا دكتور ومشكور جدا لمجهودك الرائع
    اتمنى لك التوفيق

  4. Omar Al-aghbari Reply

    جميــــــــــــــــــــــــــــــــــــــــل مبدع و مشكور يا استاذي على هاذا المجهود المرعب ؟

  5. TARIQ Reply

    يعطيك العافية اخوي نور , بصراحة اكثر من مرة اعيد واكرر في تعليم تصميم المواقع ..
    سلمت وربي يوفقكك ..

  6. islam Reply

    استاز نور بعتذر عالإزعاج بس الموقع يلي قلتلنا ننسخ منو كود البرمجة تبع ال بي اتش بي ما عم لاقيه , كمان السي اس اس تبع موقع الاعلانات و الدفع يلي انت عملتو ما عم تطلع عندي بقصد الخطأ من المتصفح تبعي ولّا انت نسيت ترفع ملفات ال سي اس اس 😀

  7. amir seif Reply

    بجد انا اتعلمت منك حاجات كتير في وقت قليل.دروسك بتوفر علينا الوقت والجهد
    جزاك الله خيرا استاذ: نور
    تحياتي
    (اتعلم كتير في قوت قصير)

  8. ممدوح محمود Reply

    في أنتظار المرحلة الجديدة والسنة الدراسية الثانية
    متابع دروسكم وعم بستفيد منها كتير أستاذ نور
    ربنا يوفقك

  9. abd elgadir Reply

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

  10. فؤاد Reply

    أشكركم على دروس تصميم المواقع, و انا في انتظار دروس أخرى للتعلم فانا تعلمت جوملا ووردبريس و استعمل تقنياتك لتطوير موقعي

  11. Marwan Reply

    انت انسان رائع وراقي جدا .. استفدت كثيرا من السلسلة حقا انه جهد عظيم .. شكرا لحضرتك

  12. helmi Reply

    سلام عليكم اشكرك علي مجهودك لقد استفدت كثيرا من قناتك علي يوتيوب وانتظر منك مزيد من الدورس حول تصميم المواقع

  13. Akram alabdallh Reply

    شكرا جزيلا لك على ما تقدمه ونقدر الجهد المبذول في سبيل انتاج هذه الفديوهات

  14. Khémiri Reply

    السلام عليكم ورحمة الله ألاستاذ نور
    ارجو منك درس في bootstrap w كيفية استخدمه في web
    et merci 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *