أرشيف الأوسمة: web learning

مم تتكون مواقع الوب؟ مقدمة إلى برمجة الوب

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

 

إن كنت ترغب في دخول عالم تطوير الوب ولكنك تشعر بأنك لا تعرف شيئاً فيه، أو كان لديك مشروع موقع وب ولكنك تفتقر إلى الأساسيات قبل البدء بتعلم كيفية بنائه، فهذه المقالة قد تفيدك. أي موقع وب هو عبارة عن قسمين:

  • قسم موجود على السيرفر (المخدم – وهو حاسب بمواصفات جيدة عادة)، هو “البرنامج” أي هو القسم المسؤول عن عمليات المعالجة والتخزين والرد على طلبات المستخدمين
  • والقسم الآخر هو واجهة موقع الوب، وهي الصفحات يلي نراها على متصفح الوب.

القسم الموجود على السيرفر ممكن أي يكون مكتوباً بأية لغة برمجة من حيث المبدأ، ولكن عادة ما يكون مكتوباً بإحدى لغات البرمجة أو التقنيات التي تهتم بمواقع الوب، والخيارات الشائعة هي: PHP, ASP.NET, Java, Ruby, Python.
أما الواجهة التي نراها على المتصفح، فهي حتماً مكتوبة بلغة وحيدة هي HTML (سنتكلم عنها بعد قليل)، وبالتالي فإن “صفحات” الوب هي في الحقيقة صفحات HTML. ولكن عادة ما يرفق معها عدة ملفات CSS وملفات JavaScript (قد تكون كثيرة أحياناً).

فعندما نكتب رابطاً لأي موقع في ونأمر المتصفح بفتحه، يقوم المتصفح بإرسال “طلب” إلى “الموقع” (وهنا بالتأكيد نقصد القسم الموجود على السيرفر). ويقوم الموقع (المكتوب بإحدى لغات برمجة الوب) ببعض العمليات ليحدد بناء عليها الرد المناسب وشكل الصفحة التي سوف تظهر للمستخدم.
أي أنه يقوم “بكتابة” الرد على شكل صفحة HTML. ولكن ما هي HTML حقاً؟

بدايةً HTML ليست لغة برمجة، وإنما هي لغة لتمثيل النصوص. لنفهم ما معنى “لغة تمثيل نصوص” دعني أضرب مثالاً:
لا بد وأنك عملت ولو لمرة في حياتك على برنامج الـ Word الشهير لتحرير النصوص (أحد برامج الـ Office). في الـ Word، هناك تنسيقات مثل “عنوان” و “عنوان فرعي” ونص عريض (Bold) ونص مائل، ومحاذاة إلى اليمين وإلى اليسار، واتجاه نص من اليمين إلى اليسار والعكس… إلخ.
في الواقع إن Word يمثل هذه التنسيقات بلغة تمثيل نصوص شبيهة إلى حد كبير بلغة HTML، ويقوم بعرضها بالشكل الذي يظهر لك في البرنامج.

وكذلك HTML، فهي عبارة عن نصوص، ونصوص فقط (يعني فقط أحرف وكلمات مثل هذه التي أكتب فيها)، ولكنها مكتوبة بطريقة “ذكية” على شكل tags (وسوم) ولكل وسم معنى خاص يفهمه المتصفح ويعرف كيف يعرضه. فمثلاً هذا النص:

<a href="https://www.facebook.com">Go to Facebook</a>

هذا النص هو في الحقيقة وسم لـ رابط، وسيظهر على شكل عبارة “Go to Facebook” إن ضغطنا عليها فسوف نذهب إلى موقع فيسبوك. خذ مثلاً هذا:

<img src="http://www.arageek.com/wp-content/uploads/programmer-500x358.jpg" />

على الرغم من أنه مجرد نص، إلا أن المتصفح سوف يعرض بدلاً منه صورة (الصورة الموجودة في الرابط الموجود داخل النص 🙂 ) وهذا يفسر كون لغة تمثيل “النصوص” هذه قادرة على تمثيل أشياء أخرى مثل الصور، أو الفيدهات والصوتيات (والتي لها وسوم أيضاً). ولكن على الرغم من قدرة HTML على تمثيل كل هذه الأمور، إلا أنها تبقى لغة تمثيل نصوص ولا تحمل أية معلومات عن، مثلاً، ألوان وأماكن هذه النصوص (أو لنسمها من الآن فصاعداً العناصر – فكل وسم يمثل عنصراً في الصفحة).

وهنا تأتي تقنية CSS، والتي هي عبارة عن تقنية “عرض” أي تقنية للإظهار، فهي تحدد بعض الخصائص التي ستظهر العناصر وفقاً لها. مثلاً لنقم بإضافة أمر بسيط إلى وسم الصورة الذي رأيناه قبل قليل:

<img src="http://www.arageek.com/wp-content/uploads/programmer-500x358.jpg" style="height:100px;"/>


هنا قمت بإضافة style=”height:100px;”، وهي عبارة عن تعليمة CSS. ومهمتها أن تجعل طول الصورة أثناء إظهارها 100 بكسل فقط، رغم أن طول الصورة الفعلي أكبر من ذلك (358 بكسل).

طبعاً صفحة الوب (والتي هي صفحة HTML) يمكن أن تحوي على مئات الوسوم، ولذلك من غير المنطقي أن نمر على كل وسم ونضيف style له بشكل مباشر. وبدلاً من ذلك يتم أخذ كل هذه الستايلات ووضعها بملف (أو ملفات) CSS، ثم يتم تضمين ملف الـ CSS في صفحة الـ HTML (طريقة التضمين سهلة جداً ولكن لن نتكلم عنها الآن).

ولكن ماذا لو أردت أن أضيف بعض الحركات لصفحة الوب، كيف يمكنني استخدام CSS في ذلك؟

كما سبق وقلنا فإن CSS هي تقنية إظهار فقط، وبالتالي فهي غير قادرة على إضافة أي حركات إلى صفحتك. ولكن إن أردت ذلك، فلديك دوماً Javascript. وهي عبارة عن لغة برمجة (نعم، لغة برمجة كاملة) تسمح المتصفحات بتضمينها مع صفحات الوب، أي أنه بإمكانك أن تكتب كود Javascript يقوم بالمهام التي تريد (سواء تحريك وتفاعلية، أو مهام أخرى أكثر تقدماً) وتضمنه في صفحة الـ HTML ليقوم المتصفح بتنفيذه.

هذه لمحة عامة عن “ممّ تتكون مواقع الوب؟”. إن كانت لديك فكرة موقع وتريد أن تتعلم التقنيات السابقة لتقوم ببنائه، فهناك العديد من الأماكن التي تساعدك في ذلك، سأذكر منها:

  • موقع Code Academy الرائع، الذي يعلمك أي من تقنيات الوب بطريقة تفاعلية.
  • موقع CodeSchool هو أيضاً موقع رائد في هذا المجال وربما أسلوبه أجمل من أسلوب Code Academy ولكنه ليس كل ما فيه مجانياً.

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