المشروع - كل ما يتعلق بتطوير المواقع http://www.almashroo.com/

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

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

ما هو CSS؟

هو عبارة عن لغة بسيطة وضعت للتحكم في طريقة تقديم محتوى صفحات المواقع، وذلك باستخدام XHTML Tags، واستخدام Classes يتم تعريفها من قبل المطور لتستخدم في وسط XHTML Tags.

كيف يكون الفصل بين المحتوى والتصميم؟

يكون الفصل بين المحتوى والتصميم بغياب أي عنصر متحكم في طريقة التقديم –بحد ذاته- من المحتوى. من أمثلة هذه العناصر: <font> و <span style=”color:#000000;”>.

لماذا نفصل؟

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

فمن جهة المطور

يسمح -الفصل – بالتركيز على المحتوى ثم على التصميم كلاًّ على حدة في وقت التطوير، كما يسهل الصيانة لاحقاً، فإذا أردت شيئاً في المحتوى نظرت إلى XHTML ، وإذا أردت في التصميم شيئاً نظرت إلى CSS ، وبالتالي توفر الكثير من وقتك.

ومن جهة المستخدم

يسمح -الفصل – بوصول معلومات الموقع لشريحة أكبر من المستخدمين، ويعود الفضل في ذلك لمزايا CSS في تجهيز أكثر من طريقة تقديم للموقع الواحد، وذلك حسب الوسط المستخدم مثل: التصفح العادي على الشاشة، ونسخة أخرى للطباعة، والجوال، وبرامج قراءة المواقع للمكفوفين. ومن فوائد استخدام هذه التقنية سرعة تنزيل الصفحة، وذلك لخلوها من عناصر التحكم بالتصميم المتكررة –كالـ <font> – والتي يتم استبدالها بتعريف واحد في CSS يربط به في XHTML بيسر. مثال: بدل أن أكرر <font color=”red”> لكل رسالة تحذيرية، بإمكاني تعريف Class لكل النصوص التحذيرية:.warning{color:red} وبعد ذلك ربط كل نص تحذيري بهذا التصنيف: <p class=”warning”>.

Table أم Div لهيكل الصفحة

من أفضل ما قدمته تقنية CSS هي القدرة على الاستغناء عن استخدام <table> كطريقة لتشكيل هيكل الصفحة (Layout)، وطرح البديل <div> الذي يعتبر العنصر الصحيح للاستخدام في هذا الغرض، كما هو مذكور في نصائح W3. ومن فوائد استخدام <div> بديلاً لـ <table> زيادة سرعة تصفح الصفحات، وسهولة قراءة محتوياتها من جهة محركات البحث، بالإضافة لسهولة قراءة XHTML الصفحة عند الصيانة.

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

والسـلام

المصدر

103 تصميم المواقع – الفصل بين المحتوى والتصميم