هندسة الويب، المفهوم الذي يفتقد معرفته الكثير من المبرمجين، ومصممي المواقع ممن يعتقدون حتى الآن أنهم مبرمجين بالفعل !، ليست المشكلة أن المبرمجين لا يريدون إدخال مصممى الويب إلى جماعتهم، بل المشكلة فى طريقة فهم المصممين لهندسة الويب، فلو فهموا هندسة الويب بشكل صحيح، لما أطلقوا على نفسهم مبرمجين، ليس لهذا السبب يجب أن تقرأ تلك المقالة، بل هنالك العديد والعديد من الأسباب الأخرى التى تجعل كل مهتمًا بتطوير الويب إلى فهم هذا المفهوم بشكل جيد، من ضمن تلك الأسباب عدم تمكن عدد كبير من مطوري الويب إلى لغة JavaScript بشكل صحيح.
- ما هي العناصر الأساسية التى تتكون منها صفحة الويب؟
أى صفحة ويب تتكون من ثلاثة نقاط أساسية، أو بمعنى أدق ثلاثة طبقات، وهم كما بالصورة التالية:
نلاحظ من الصورة أن أى صفحة تتكون من ثلاثة طبقات Three Layers، وهي طبقة Content، ثم طبقة Presentation، ثم طبقة Behavior، وسنأخذ نبذة عن كل واحدة منهم كالتالي:
1- Content Layer: وهي الطبقة المسئولة عن هيكلة الصفحة بشكل عام، والتي تكتب بلغة HTML، فإذا مثلنا مثلاً بناء صفحة الويب ببناء بيت، فإن كتابة الصفحة بلغة HTML مثل بناء البيت من الطوب الأحمر فقط، فأنت الآن قمت ببناء هيكل البيت فقط.
2- Presentation Layer: وهي طبقة تزيين البيت، وهي الطبقة التي تكتب بلغة CSS، فبعد أن قمت ببناء البيت من الطوب الأحمر، الآن أنت تقوم بتلوين البيت، وتزيينه.
3- Behavior Layer: وهي ببساطة طبقة الأجهزة الإلكترونية الموجودة بالبيت !، فهي تتحدث مع المستخدم، وتأخذ مدخلاته وتقوم بتطبيقها بداخل المتصفح، وهي الطبقة التى تكتب بلغة JavaScript، وتلك الطبقة لا تتعامل مع السيرفر، ولا تحتاج إلى مترجم أو مفسر سوى المتصفح فقط، فهي تتعامل فقط مع المتصفح، وسنعرف كيف تتعامل معه بعد قليل.
الآن تصميم صفحة الويب يكون على الترتيب باللغات التالية: HTML ثم CSS ثم JavaScript، لاحظ كلمة التصميم !
الآن إذا كنت أنا مثلاً مخترع لغة HTML، وقمت بجعل الرمز التالي يعبر عن شجرة:
ببساطة عن طريق المتصفحات Browsers، ولكن ما هي آلية هذا الفعل؟؟
ببساطة كل متصفح يحتوى على Render Engine، هذا الريندر عبار عن رسام، يرسم على لوحة بيضاء وهي المتصفح، أى أن المتصفح ببساطة ما هو إلا صفحات بيضاء، يقوم الريندر الخاص بكل متصفح برسم العناصر التي تأتيه من الصفحة المُراد الدخول إليها، أى إنه كلما كان الريندر إنجين الخاص بالمتصفح أفضل وأدق وأسرع، كلما كان المتصفح أفضل !
- متصفح Firefox يعمل على Render Engine يدعى Gecko.
- متصفح Internet Explorer يعمل على Render Engine يدعى Trident.
الآن لننتقل إلى موضوع جديد، وهو الـDOM، ما هو الـDOM؟
ببساطة الصورة التالية ستشرح لك مفهوم الـDom
الـParser هو عبارة عن برنامج يقوم بتحويل كود الـHTML إلى شكل شجري كما بالصورة الماضية، كمثال على كود HTML سيتم تحويله:
وظيفة الـParser تحويل كود الـHTML إلى هذا الشكل السابق، لأن المتصفح لا يفهم كود HTML، لكن الـParser هو من يفهمه، وهذا الشكل يدعى DOM إختصارًا لـ Document Object Model، وهو ما يقوم الـRender Engine برسمه على الصفحات البيضاء.
الآن سأصل معك إلى آخر نقطة: وهي الـ Refresh : وهي النقطة المهمة من وراء كل هذا الموضوع والتي من خلالها ستفهم جافاسكربت وهي عملية تحديث الصفحة والجميع يعرف انه عندما تريد تحديث الصفحة فإنك تضغط على زر تحديث او F5 ولكن ما أريده منك الآن أن تلاحظ الرسم الموجود بالأعلى عند عملية التحديث فإن العملية التي تحدث هي الرجوع إلى الشجرة و قراءتها وليس الرجوع لبداية الكود ومن ثم رسم الكود من جديد.
أما عن طريق JavaScript يمكنك تحديث عنصر معين بدلاً من إعادة تحميل الصفحة بأكملها من أجل إعادة تحديث عنصر واحد من الصفحة !
تلك هي الأساسيات المطلوبة من كل مطوّر ويب أن يفهمها بخصوص مفهوم هندسة الويب.
- ما هي هندسة الويب Web Engineering؟
هندسة الويب ببساطة هى طريقة تنظيم، أو طريقة تخطيط صفحات الويب بشكل عام، ممَ تتكون؟- ما هي العناصر الأساسية التى تتكون منها صفحة الويب؟
أى صفحة ويب تتكون من ثلاثة نقاط أساسية، أو بمعنى أدق ثلاثة طبقات، وهم كما بالصورة التالية:
1- Content Layer: وهي الطبقة المسئولة عن هيكلة الصفحة بشكل عام، والتي تكتب بلغة HTML، فإذا مثلنا مثلاً بناء صفحة الويب ببناء بيت، فإن كتابة الصفحة بلغة HTML مثل بناء البيت من الطوب الأحمر فقط، فأنت الآن قمت ببناء هيكل البيت فقط.
2- Presentation Layer: وهي طبقة تزيين البيت، وهي الطبقة التي تكتب بلغة CSS، فبعد أن قمت ببناء البيت من الطوب الأحمر، الآن أنت تقوم بتلوين البيت، وتزيينه.
3- Behavior Layer: وهي ببساطة طبقة الأجهزة الإلكترونية الموجودة بالبيت !، فهي تتحدث مع المستخدم، وتأخذ مدخلاته وتقوم بتطبيقها بداخل المتصفح، وهي الطبقة التى تكتب بلغة JavaScript، وتلك الطبقة لا تتعامل مع السيرفر، ولا تحتاج إلى مترجم أو مفسر سوى المتصفح فقط، فهي تتعامل فقط مع المتصفح، وسنعرف كيف تتعامل معه بعد قليل.
الآن تصميم صفحة الويب يكون على الترتيب باللغات التالية: HTML ثم CSS ثم JavaScript، لاحظ كلمة التصميم !
الآن إذا كنت أنا مثلاً مخترع لغة HTML، وقمت بجعل الرمز التالي يعبر عن شجرة:
T
وقمت بجعل الرمز التالي يعبر عن سيارة:
C
فإذا قمت بكتابة الكود التالي سيظهر فى المتصفح شجرة وبجانبها سيارة:
TC
ولكن كيف ستتم عملية الإظهار تلك؟ببساطة عن طريق المتصفحات Browsers، ولكن ما هي آلية هذا الفعل؟؟
- متصفح Firefox يعمل على Render Engine يدعى Gecko.
- متصفح Internet Explorer يعمل على Render Engine يدعى Trident.
الآن لننتقل إلى موضوع جديد، وهو الـDOM، ما هو الـDOM؟
ببساطة الصورة التالية ستشرح لك مفهوم الـDom
<html>
<head>
<title>Welcome</title>
</head>
<body>
<h1> Hello </h1>
<p> PHPGEEKAR.com </p>
</body>
</html>
هذا الكود سيتم تحويله إلى شكل شجرة Tree كما بالصورة التالية:<head>
<title>Welcome</title>
</head>
<body>
<h1> Hello </h1>
<p> PHPGEEKAR.com </p>
</body>
</html>
وظيفة الـParser تحويل كود الـHTML إلى هذا الشكل السابق، لأن المتصفح لا يفهم كود HTML، لكن الـParser هو من يفهمه، وهذا الشكل يدعى DOM إختصارًا لـ Document Object Model، وهو ما يقوم الـRender Engine برسمه على الصفحات البيضاء.
الآن سأصل معك إلى آخر نقطة: وهي الـ Refresh : وهي النقطة المهمة من وراء كل هذا الموضوع والتي من خلالها ستفهم جافاسكربت وهي عملية تحديث الصفحة والجميع يعرف انه عندما تريد تحديث الصفحة فإنك تضغط على زر تحديث او F5 ولكن ما أريده منك الآن أن تلاحظ الرسم الموجود بالأعلى عند عملية التحديث فإن العملية التي تحدث هي الرجوع إلى الشجرة و قراءتها وليس الرجوع لبداية الكود ومن ثم رسم الكود من جديد.
أما عن طريق JavaScript يمكنك تحديث عنصر معين بدلاً من إعادة تحميل الصفحة بأكملها من أجل إعادة تحديث عنصر واحد من الصفحة !
تلك هي الأساسيات المطلوبة من كل مطوّر ويب أن يفهمها بخصوص مفهوم هندسة الويب.
0 التعليقات:
إرسال تعليق