تصميم موقع الويب:

في البدء و لتعلم البرمجة ينبغي أن نعرف ما هي مكونات موقع الويب و كيف يعمل الموقع، فلو عرفنا طريقة العمل لوضحت الصورة و أصبح بإمكاننا فهم التسلسل المنطقي لما سنتعلمه.

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

السيرفر:

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

البدء في تصميم الموقع:

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

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

خطوات تصميم موقع إلكتروني متكامل

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

نأتي الآن لمهمات المصمم:

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

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

إذاً من مهام المصمم أن يتعلم:

1- تصميم الشعارات

2- تصميم القوالب

3- تقطيع القوالب

4- تحويل القوالب إلى html

5- استخدام لغة css كأفضل طريقة لتحويل القالب المصمم إلى html.

6- استخدام برنامج الفلاش الذي قد يضطر المصمم استخدامه في بعض المواقع علماً أنه من الممكن أن يكون لوحده إختصاص تصميمي و مهنة مهمة.

و يمكنكم البحث عن كل ما سبق في الغوغل لتعلمه و هذه رؤوس الأقلام المهمة التي تلخص مهنة تصميم المواقع.

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

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

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

لماذا هذا التركيز على موارد السيرفر؟

كلما ازداد استهلاك موارد السيرفر من معالج و ذواكر و حجم على القرص الصلب كلما ازداد سعر الإستضافة و بالتالي يجب أن يقوم المبرمج بتحسين برنامجه بحيث يقلل نفقات الإستضافة قدر الإمكان.

إذاً مهمات المبرمج هي التالية:

1- و أهم مهمة: تعلم لغة html

2- تعلم لغة php أو asp أو كلاهما و التان تتيحان للمبرمج القيام بالعمليات الرياضية و عملية التخزين و استحضار البيانات من قواعد البيانات.

3- تعلم لغة java script و هذا لإضافة التأثيرات و القيام بالعمليات البرمجية المهمة.

4- طريقة التعامل مع السيرفر و مع لوحات التحكم المختلفة و طريقة رفع الملفات عبر الأف تي بي ftp أو عبر لوحة التحكم و تعلم طريقة إنشاء قواعد البيانات و التعامل معها.

5- تعلم ssh أو الشيل يعتبر ميزة مهمة في حال كان المبرمج يريد إدارة سيرفر و يعمل كويب ماستر.

6- يعتبر تعلم التصميم و تعلم لغة css ميزة إضافية مهمة لأي مبرمج.

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

تلقى جميع مواضيع قسم تعليم و برمجة المواقع عبر الإيميل

إشترك في تغذية تصنيف تعليم برمجة و تعليم المواقع عبر التغذية RSS

هذا درس موجه للمبتدئين في تصميم المواقع أو من يرغب في الدخول في هذا المجال.

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

التطبيق: بناء صفحة ويب مفردة نكتب فيها نصاً أو سيرةً ذاتيةً عنا ببنية شجرية بسيطة للتعريف ببنية صفحة الويب.
الأدوات المطلوبة: محرر نص html أو محرر نص عادي مثل المفكرة (Notepad).
إستضافة مجانية أو إستضافة مدفوعة

لنبدأ:
عندما تحجز إستضافة مجانية أو مدفوعة فإنك إما تحصل على دومين فرعي أي name.domain.com أو أنك تحصل على دومين من مرتبة عالية مثل domain.com و بالتالي يعتبر هذا الدومين بمثابة المجلد الذي تضع فيه ملفاتك التي تشكل الموقع الإلكتروني و عندما يكتب المتصفح إسم الدومين فإنه سيتم توجيهه لفتح هذا المجلد بطريقة ستشرح لاحقاً، و أول ما يعرضه متصفح الإنترنت هو ملف الإندكس أي الأرشيف و على هذا فإن عدم وجود هذا الملف سيجعل المتصفح يفتح المجلد و يعرض الملفات التي تحتويه كقائمة دون تنسيق، و على هذا فإن أول ملف يجب أن نقوم بإنشائه بحيث يكون الصفحة الرئيسية للموقع إسمه index.htm أو index.html

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

<!DOCTYPE html>
  <head>
    <meta http-equiv='Content-Language' content='ar-sy'>
    <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
    <title>صفحتي الأولى</title>
</head>
<body>
<div id="header">
<h1>أقسام صفحتي الأولى</h1>
<ul>
<li>القسم الأول</li>
<li>القسم الثاني</li>
<li>القسم الثالث</li>
</ul>
<p>يسرني أن أعرض صفحتي عليكم و أن أقدم فيها نفسي بكلمات أو بأحرف معبرة، تغمرني السعادة لإنشاء صفحتي الأولى.</p>
</div>
</body></html>

ننسخ الكود السابق من الضغط على زر النسخ الذي سيظهر عند وضع مؤشر الفأرة فوق مربع الكود في الزاوية اليمنى من الأعلى و نضعه بصفحة نص كما ذكرت سابقاً و نحفظ الصفحة بإسم أو Save As و من الترميز أو Encoding نختار ترميز utf-8 و نحفظ الصفحة و نستبل الموجودة إذ طلب منا ذلك.

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

مثال:

بدأ موقعي هذا من تاريخ 2005، سيقوم هذا البرنامج بعرض التالي: © 2005-2011 بحيث تظهر سنة البدء في البداية و السنة الحالية بعدها (علماً أن هذا المثال أعلاه لا يستخدم البرمجية، فإذا تغيرت السنة إلى 2012 لن يتغير 2011 إلى 2012)

شرح مبدأ العمل:
سنقوم بإرسال متغير للوظيفة و هو تاريخ سنة بدء الموقع بالعمل، و ستقوم الوظيفة بالتحقق من السنة الحالية و إجراء مقارنة بين سنة البدء و السنة الحالية، و في حال كانت السنة الحالية أكبر من سنة البدء سيتم عرض تاريخ سنة البدء و بجانبه السنة الحالية و إلا سيتم عرض تاريخ السنة الحالية فقط.

نبدأ العمل على الوظيفة:

function yearly_update($y)
{
$this_year = date(Y);
if ($this_year > $y)
{echo "© $y - $this_year";}
else
{echo "© $this_year";}
}

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

 <?php yearly_update('2005');?>

و لمثال حي عن هذه البرمجية يمكنكم زيارة الرابط التالي
مثال عن برمجية تعديل التاريخ الأوتوماتيكي

حقائق:

1- لن أستطيع وضع منهاج تعليمي كامل و هذا لأن وقتي لا يسمح بهذا.

2- لغات البرمجة التي سأقوم بطرحها: php, mysql, css, js, html, xml و لن تكون المواضيع بالترتيب بل سأقوم بطرح ما يخطر على بالي من برمجيات و أفكار و مستوى هذه البرمجيات سيكون متغيراً من المبتدئ إلى المستوى الإحترافي.

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

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

و لهذا يرجى ممن يرغب المتابعة الضغط على الأزرار التالية أو أحدها:

تلقى جميع مواضيع قسم تعليم و برمجة المواقع عبر الإيميل

إشترك في تغذية تصنيف تعليم برمجة و تعليم المواقع عبر التغذية RSS