الاثنين، يوليو 13، 2009

مقدمة الى الجزء الاول من دورة xhtml

. الاثنين، يوليو 13، 2009

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

بالاضافة الى السطور السابقة، فان الجزء الاول للدورة هو جزء هام للغاية لانه سيجعلك تنظر الى الصورة الكاملة او الكبيرة للغات التصميم عموما، ولهذا فان درسنا الاول سوف يتناول الاجابة عن الاسئلة التالية على الترتيب:-

  • ماهى لغة الترميز التشعبية hypertext markup language ؟
  • ماهى لغة الانماط الانسيابية cascading style sheets ؟
  • ماهى لغة الترميز الموسعة extensible markup language ؟


ماهى لغة html

انها اللغة الام لجميع صفحات الويب، فبواسطة هذه اللغة يستطيع مصمم صفحات الويب ان يتحدث الى المستعرض و يصف له ماهية العناصر المطلوب عرضها على شاشته مثل الصور و النصوص و النماذج...........الخ.

اى ان لغة html هى لغة وصفية و ليست لغة تنفيذية كلغات البرمجة، لانها لاتحتوى على جمل للدوران مثل for او التحكم مثل if كذلك فهى لاتحتاج الى مترجم compiler لانها لا ترتبط بنظام تشغيل معين حيث يتم ترجمتها بواسطة مستعرض الانترنت بغض النظر عن نظام التشغيل الذى يعمل وفقا له.

و رغم اهمية تلك اللغة القصوى و رغم انها قد خدمت الويب كثيرا الا انها ليست مثالية لذا فان جميع المصممين يستخدمون بجانبها تقنيات اخرى مثل css و xml لكى تصبح اكثر فاعلية و سوف يتم الاسهاب عنهما لاحقا.

من المفيد معرفة اصدارات لغة html لمعرفة مراحل تطورها و كيف وصلت الى الصورة الحالية xhtml كالتالى :-

الاصدار الاول html 1

كان يمثل هذا الاصدار بداية للغة html و كان يدعم عناصر محدودة جدا فى صفحة الويب، فعلى سبيل المثال لم يكن بامكانك ان تقوم بعمل خلفية لصفحتك سواء كانت تلك الخلفية بلون معين او بصورة ما، كذلك لم يكن هناك جداول tables او اطارات frames، وجميع الارتباطات التشعبية لونها ازرق و هكذا، لذا فقد كانت جميع الصفحات المكتوبة بهذا الاصدار متشابهة لان عناصر التنسيق كانت محدودة، و بما انه لم يكن هناك فى ذلك الوقت اجهزة مسح ضوئى scanner او برامج لمعالجة الصور فانه لم يكن هناك اى مشاكل تذكر بالنسبة لصفحة الويب فى الجزء المتعلق بالصور، كذلك فان جميع الصفحات المكتوبة بذلك الاصدار كان يتم استعراضها بواسطة المستعرضات النصية text-only browsers و التى كانت تعمل تحت نظام التشغيل unix .

الاصدار html2

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

الاصدار html3.2

فى هذا الاصدار توسعت لغة html بالعديد من الخصائص attributes التى تمكن المصممين من تنسيق صفحات الويب بصورة كبيرة و اضافة لمسات جمالية عليها، وايضا فى هذا الاصدار اصبحت لغة html تدعم الاصدار الاول من لغة css الا انه وبالرغم من ذلك فقد اتجه المصممين الى استخدام خصائص html بديلا عن لغة css وذلك لان معظم مستعرضات الانترنت لم تكن تدعم لغة css ، و فى الحقيقة ان ذلك قد ادى الى صعوبة صيانة العديد من المواقع فيما بعد.

الاصدار html4

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


لغة css

اوراق الانماط الانسيابية cascading style sheets هى الوسيلة المثلى لتنسيق صفحات الويب، فمعها لا يوجد استخدام للجداول بغرض التنسيق، كذلك لا يوجد استخدام لاى خصائص html attributes وهذا ما شدد عليه الاتحاد الدولى للشبكة العنكبوتية w3c

لكن هنا يبرز تساؤل بديهى، لماذا يتعين علينا استخدام لغة css كبديلا عن html فى التنسيق؟ او بمعنى اخر ماهى المميزات التى ساحصل عليها كمصمم من استخدام لغة css لتنسيق صفحاتى؟

لكى نستطيع الاجابة على هذه الاسئلة سوف يستلزم منا ان ننظر الى الكود التالى لكى نفهم مشكلة استخدام لغة html فى التنسيق :


<font size="+2" face="Helvetica" color="red">
hello world
</font>


الكود السابق هو مثال بسيط للغاية عن اسلوب التنسيق باستخدام html ولكن هناك بعض الملاحظات التى تستحق الوقوف عندها وهى:-

  • ان الكود السابق هو جزء صغير جدا من صفحة الويب، لذا لو فرضنا ان صفحة الموقع الواحدة تتكون من 20 كود بنفس الشكل السابق، و ان عدد صفحات الموقع 50 صفحة كمتوسط سنجد هنا انه عند الرغبة فى تعديل حجم الخط لجميع صفحات الموقع فان ذلك يستلزم منا اجراء التعديل على 1000 كود ، اضف الى ذلك ان صفحة الويب لاتتكون طبعا من اوسمة font فقط، بل بالتاكيد ايضا اوسمة الجداول والنماذج والصور وهكذا، ممايزيد من صعوبة صيانة الموقع.

    وايضا الامر لايتوقف عند هذا الحد، بل ان تلك الاوسمة عادة ما تكون متداخلة خاصة فى الجداول nested tables مما يتطلب معه زيادة الحرص عند تعديلها حتى لاتحدث اخطاء عند عرضها فى المتصفحات فيما بعد، ولاشك ان جميع ما سبق يتطلب مجهود كبير ووقت اكبر.
  • بالنظر الى المثال السابق سوف تلاحظ ان عدد اكواد html يفوق عدد الكلمات المفيدة التى ستظهر فى الصفحة "hello world "، وهذا الامر ينطبق على الكثير من صفحات المواقع ويمكنك رؤية كود المصدر source code لاى صفحة و ستجد ذلك الشكل فى الغالبية العظمى منها، و كنتيجة منطقية لذلك، فان مدة تحميل الصفحة تصبح كبيرة، ومع الاتصالات البطيئة مثل dial up يصبح الامر كارثة.
  • نظرا لتداخل الاوسمة فى الصفحات المنسقة بلغة html فانه عادة ما تفتقر كنتيجة لذلك الى هيكل واضح، وهذا ما يجعلها تخسر كثيرا فيما يتعلق بمحركات البحث.

    ولكى اوضح ذلك، فان نظرة محركات البحث مثل جوجل او ياهوو تتركز فى اعتبار اى عبارات فى عنوان الصفحة <title>او اوسمة العنوان <h1>على سبيل المثال انها اهم من غيرها من المعلومات الموجودة على نفس الصفحة، و بالتالى تقوم بارشفتها، لكن رغم ذلك اذا كانت الصفحة مرتبة و لها هيكل واضح clear structure فان محرك البحث يعطى اهمية للصفحة ككل و يقوم بعمل مسح على باقى محتويات الصفحة بسهولة و بالتالى ارشفة معظم اجزائها.
جميع الملاحظات السابقة هى جزء من مشاكل html فى التنسيق، و هنا يظهر فى المقابل مميزات لغة css كما يلى:-

  • مظهر صفحات الويب المصممة باستخدام css افضل كثيرا من تلك المصممة بلغة html وذلك لان مفردات وخصائص css فى التنسيق اغنى و اكثر مرونة.

  • توفير الوقت عند الرغبة فى تعديل او صيانة الموقع، لانه ببساطة يمكنك انشاء صفحة css واحدة فقط تكون مسئولة عن تحديد مظهر صفحات الموقع بأكمله، و لعل سكربت الوورد برس افضل مثال لذلك حيث يمكنك بواسطة ملف style.css التحكم بمظهر المدونة ككل، وهذا هو الاستخدام الامثل للغة css .
  • كنتيجة لما سبق نجد ان زمن تحميل صفحات الموقع قد قل كثيرا و اصبح مناسبا للاتصالات البطيئة.
  • هناك الكثير من المميزات الاخرى والتى سوف نذكرها فى دورة css اللاحقة لتلك الدورة.
اتمنى ان يكون الموضوع مفيدا للجميع، و نظرا لطول الدرس الحالى فسوف اقوم باستكمال الجزء المتبقى منه وهو الجزء المتعلق بلغة xml فى الموضوع القادم من الدورة، تمنياتى بالتوفيق لكم جميعا.

2 تعليق:

غير معرف يقول...

الحمدلله واخيرا فهمت ال css html

وهذا بفضل الله ثم بفضل شرحكم

temo يقول...

شكرا اخى الكريم

 
room darkening shades