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

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

 

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

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

القسم الموجود على السيرفر ممكن أي يكون مكتوباً بأية لغة برمجة من حيث المبدأ، ولكن عادة ما يكون مكتوباً بإحدى لغات البرمجة أو التقنيات التي تهتم بمواقع الوب، والخيارات الشائعة هي: 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.

حالة قرف، أفكار متطرفة، وميزان تفكير مختلف

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

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

Blog review for 2013

الحمد لله، تضاعف عدد المشاهدات 4 مرات عن العام الماضي، أرجو أن يكون ذلك نابعاً عن فائدة!

The WordPress.com stats helper monkeys prepared a 2013 annual report for this blog.

Here’s an excerpt:

A New York City subway train holds 1,200 people. This blog was viewed about 5,600 times in 2013. If it were a NYC subway train, it would take about 5 trips to carry that many people.

Click here to see the complete report اضغط هنا لمشاهدة الإحصاءات الكاملة.

كيف تحقق النسبة لنفسك أينما ظهرت تدويناتك!

أود أن أبدأ هذه التدوينة بشكر خاص لـ Jetpack لأنهم أضافوا في الإصدار 2.5 الميزة التي كنت أنتظرها وهي دعم Google Authorship، والتي سأتحدث عن كيفية تفعيلها في هذه التدوينة.

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

يتيح ووردبرس، حتى وقت كتابة هذه التدوينة، إرفاق معلومات عن المؤلف عند: 1) مشاركة التدوينة عبر Twitter و 2) ظهور التدوينة في نتائج البحث في غوغل!

كل ما سيتم شرحه سينطلق من صفحة إعدادات المشاركة التي تستطيع الوصول إليها بالشكل التالي:: لوحة التحكم -> القائمة الجانبية -> الإعدادات -> Sharing.

على تويتر

يمكنك إضافة نسبة لنفسك، بواسطة حسابك على تويتر، في كل مشاركة عبر زر المشاركة الخاص بتويتر (كالموجود في أسفل تدوينتي) حيث ستظهر على شكل: via @You

twitter-username-fieldللقيام بذلك، اذهب إلى صفحة المشاركة وستجد في أسفل الصحفة مكاناً مكتوباً فيه: “Twitter username to include in tweets when people share using the Twitter button.” هنا قم بإضافة اسم المستخدم username الخاص بك على تويتر. فمثلاً Jeff Atwood اسم المستخدم الخاص به على تويتر هو codinghorror.

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

sharing-to-twitter-with-attribution

في نتائج بحث Google

تتيح هذه الميزة أن تظهر صورتك على Google+ ورابط لحسابك عليها، تحت كل تدوينة من تدويناتك عند ظهورها في نتائج البحث في غوغل، كما هو موضح في الصورة هنا على اليسار.

google-plus-connect-buttonلتفعيل هذه الميزة، اذهب إلى صفحة إعدادات المشاركة وستجد فيها القسم الثاني يسمى بـ Google+ Profile وفيه زر Google+ كبير ووحيد باللون الأحمر، اضغط عليه وسيطلب منك السماح للتطبيق المسمى WordPress بالحصول على بعض الصلاحيات من حساب Google الخاص بك، وعند الموافقة على ذلك سيتم ربط حسابك على Google مع مدونتك، وبالتالي سيتم فعل شيئين:

  • إضافة شريط صغير يحوي رابط حسابك على Google+ في نهاية كل تدوينة خاصة بك. ويكون هناك خيار أثناء تحرير التدوينة لعرض أو إخفاء هذا الشريط.
  • إضافة رابط لمدونتك على حسابك الشخصي في Google+

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

أرجو أن تكون هذه التدوينة مفيدة، إن كان لديك أسئلة اترك تعليقاً هنا أو اطرحها في مجموعة دعم المدونين على فيسبوك.

كيف تضع تبويبات لمدونتك باستخدام القوائم والتصنيفات

قد تحتاج أحياناً لتقسيم مدونتك إلى صفحات تحوي كل منها على تدوينات مرتبطة مع بعضها بحسب الموضوع مثلاً، ثم ترغب بوضع روابط لتلك الصفحات في القائمة الأفقية التي تظهر في رأس الصفحة. هذا الأمر ممكن بشكل غير مباشر في WordPress.com، وفي هذه التدوينة سأتكلم عن طريقة فعل ذلك.
بداية يجب أن نتعرف على المكونين الأساسيين اللذين سنستخدمهما في هذه العملية وهما: التصنيفات (Categories) والقوائم (Menus).

categories-widgetالتصنيفات، من Continue reading كيف تضع تبويبات لمدونتك باستخدام القوائم والتصنيفات

جولة مع القوائم في ووردبرس

ملاحظة: آخر تحديث لهذه التدوينة بتاريخ 13-9-2013، قد تكون المعلومات التي فيها قديمة إذا كنت تقرؤها في تاريخ لاحق. كما قد تجد بعض الاختلافات تبعاً للثيم Theme المطبق في مدونتك، أثناء كتابة هذه التدوينة كنت أستخدم الثيم 2013 Twenty Thirteen.

القوائم Menus في ووردبرس هي عبارة عن مجموعات من الروابط المرتبة (ويمكن أن تكون هرمية) لصفحات مختلفة على الإنترنت، قد تكون هذه الروابط لأشياء داخل المدونة (تصنيف، وسم، صفحة محتوى… إلخ) أو روابط خارجية (روابط لمدونات أخرى مثلاً). ويمكن استخدام هذه القوائم في واجهة المدونة كشريط روابط علوي (كالموجود في أعلى مدونتي “البداية – نبذة – رخصة المحتوى”) أو في مربعات القوائم الجانبية (Widgets). Continue reading جولة مع القوائم في ووردبرس

كيف تسجل مدونة WordPress.com في أدوات مشرفي المواقع Webmaster Tools

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

تسجيل المدونة على Google Wembaster Tools

بداية يجب أن يكون عندك حساب على Google Wembaster Tools، إن لم يكن لديك فقم بإنشاء حساب، ذلك سهل والموقع نفسه يرشدك إلى الكيفية. بعد أن يصبح لديك حساب اتبع الخطوات التالية، أو الصور التي تليها: Continue reading كيف تسجل مدونة WordPress.com في أدوات مشرفي المواقع Webmaster Tools

Moving-from-WordPress.com-to-WordPress

كيف تنقل محتوى مدونتك إلى مدونة أخرى!

هذه التدوينة التقنية هي للإجابة على سؤال أحد الأصدقاء حول كيفية نقل مدونته الموجودة على WordPress.com إلى مدونته الموجودة على موقعه الخاص (الدومين domain الخاص به)، وهي عملية تحتاج لبعض الشرح رغم كونها غير معقدة. ويجدر الذكر أن الطريقة المذكورة في الأسفل تصلح لنقل محتوى مدونات WordPress بشكل عام، رغم وجود بعض التفاصيل الخاصة بـ WordPress.com

بداية يجب أن أشير إلى أنه بالإمكان فعل ذلك عن طريق إحدى الميزت الـ Premium التي يقدمها WordPress.com، يمكنك رؤية ذلك من قسم Store الموجود في القائمة الجانبية من لوحة التحكم. ولكن بما أن تلك الميزة مدفوعة فالكثيرون يفضلون أن يقوموا بعملية النقل بشكل “يدوي”، وهذا ما سأشرحه فيما يلي. Continue reading كيف تنقل محتوى مدونتك إلى مدونة أخرى!

blogging-image

مدّونون جدد :)

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

وبالمقابل، فإذا نظرت إلى المحتوى الإنكليزي على الإنترنت تجد Continue reading مدّونون جدد :)

مربى-مشمش-عصير

مربى مشمش!

مربى-مشمش-عصيرفي مثل اليومين الماضيين من العام الماضي، كنت أقص على رفاقي بين الساعة والأخرى تفاصيل صنع مربى المشمش في بيتنا، ورغم أننا نصنعه بالنوعين “عصير” و “مفلّق”، إلا أني نادراً ما كنت أذكر المفلّق لأني لا أحبه، وكان معظم حديثي عن مربى العصير.

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

وكلما حدثتهم عن تلك التفاصيل الجميلة Continue reading مربى مشمش!