تنظيم XHTML الأول: استخدام XHTML لإعادة هيكلة الموقع

لقد كنا نكتب عنوان هذا القسم: “XHTML: القواعد البسيطة، السياسات السهلة.” السبب الأول هو أن القواعد والسياسات التي يتم مناقشتها في هذا القسم بسيطة وسهلة. السبب الثاني هو أن كتاب تصميم الويب البسيط والسهل، مثل المنتجات المجانية الجديدة في السوبرماركت، حتى وإن كانت شائعة إلا أنهم يمكن أن يلفتوا الانتباه بشكل فعال، ويشجعوا الناس على المحاولة.

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

من ناحية أخرى، إعادة الهيكلية هي معنى XHTML الحقيقي.

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

ملخص قواعد XHTML

تحويل HTML التقليدي إلى XHTML 1.0 هو بسيط وغير مؤلم، طالما أنك تتبع بعض القواعد البسيطة والسياسات السهلة. لا يهم ما إذا كنت قد استخدمت HTML أم لا، فإن ذلك لن يعيق استخدامك لـ XHTML.

  • استخدم تصريح نوع الوثيقة المناسب واسم المساحة.
  • استخدم عنصر meta لتعريف نوع محتواك.
  • استخدم الحروف الصغيرة في كتابة جميع العناصر والخصائص.
  • أضف علامة الترقيم لأي قيمة خاصية.
  • تخصيص قيمة لجميع الخصائص.
  • غلق جميع العلامات.
  • استخدم الفراغ والشقطة لغلق العلامات المفرغة.
  • لا تكتب علامة الترقيم المزدوج في التعليقات.
  • تأكد من أن العلامة العكسية للناقص والعلامة العكسية للنقطة والشرطة هي < و &

Unicode ومجموعات الحروف الأخرى

مجموعة الحروف الافتراضية للمستندات XML وXHTML وHTML 4.0 هي Unicode، وهي معيار معين من قبل اتحاد Unicode. Unicode هو مجموعة شاملة من الحروف، حيث يقدم كل حرف معرفًا به بشكل فريد من خلال رقم. Unicode هو أقرب ما يمكن أن نكون منه من الأبجدية العامة، على الرغم من أنه ليس أبجدية، بل هو مجموعة من خريطة الأرقام.

على الرغم من أن Unicode هو مجموعة الحروف الافتراضية للمستندات على الويب، يمكن للمطورين اختيار مجموعة حروف أخرى تتناسب مع احتياجاتهم. على سبيل المثال، تستخدم مواقع الويب الأمريكية وأوروبا ISO-8859-1 (Latin-1) بشكل شائع، بينما هو المعيار القومي في الجمهورية الشعبية الصينية هو gb2312.

تمييز المستند من أجل المعاني، وليس للنمط

تذكر: استخدم CSS بقدر الإمكان للتصميم. في عالم المعايير على الويب، لا يرتبط علامة XHTML بالشكل، بل بالبنية فقط.

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

ليس كل موقع يمكنه التخلص من تصميم جدول HTML على الفور. حتى مخترع CSS، W3C، لم يتحول إلى تصميم CSS للصفحة الرسمية حتى نوفمبر 2002. ومع ذلك، حتى الأشخاص المتعصبين للمعايير لم يكونوا دائمًا يفصلون بين الشكل والبنية تمامًا، على الأقل لم يكن ذلك ممكنًا في XHTML 1. ولكن الآن، يمكننا اتخاذ خطوة كبيرة نحو هذا الهدف، من خلال فصل الشكل عن البنية (أو بمعنى آخر، الفضاء من التصميم)، حتى يمكن أن يستفيد من ذلك تصميم تقليدي مزيج.

إليك بعض النصائح التي تساعدك في التفكير بطريقة أكثر بنية:

اللون داخل الخطوط

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

في الواقع، يجب أن ننظم محتوى بنية منظمة مستواة وفقاً لـ HTML. لم نتمكن من تقديم تصميمات قابلة للتسويق بينما كان المتصفح لا يدعم CSS. ولكن اليوم، وبينما نحقق تصميمنا بلا أي شك، لدينا القدرة على تقديم مستندات بنية جيدة.

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

<h1>موضوعي</h1>
<p>نص مقدم</p>
<h2>رأي إضافي</h2>
<p>نص مرتبط</p>

في نفس الوقت، تجنب استخدام عناصر HTML المنسوخة مثل <font> أو العناصر غير المفهومة مثل <br /> لتقليد الهياكل غير الموجودة.

مثلاً، لا تفعل هذا:

موضوعي<br /><br />
نص مقدم<br /><br />
رأي إضافي<br /><br />
نص مرتبط<br />

استخدم العناصر بناءً على معناها وليس بناءً على مظهرها

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

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

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

علينا وضع ألعابنا جانباً وبدء استخدامها بناءً على معنى العناصر وليس بناءً على مظهرها. في الواقع، يمكن أن يكون h1 شكلاً أي شكل ترغبون فيه. من خلال CSS، يمكن أن يكون h1 نصًا رومانيًا صغيرًا غير سميك، بينما يمكن أن يكون نص p نصًا سميكًا كبيرًا، وli يمكن أن لا يحتوي على نقاط (يمكنك أيضًا استخدام صورة PNG أو GIF أو JPEG لصنع صورة قطط أو كلاب أو شعار الشركة) وما إلى ذلك.

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

h1, h2, h3, h4, h5, h6 {
	font-family: georgia, palatino, "New Century Schoolbook",
	times, serif;
	font-weight: normal;
	font-size: 2em;
	margin-top: 1em;
	margin-bottom: 0;
	{}

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

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

استخدم العناصر الهيكلية بدلاً من النص غير المفيد

بسبب نسياننا أو عدم معرفتنا بالاستخدامات الهيكلية لـ HTML و XHTML، يستخدم العديد من محاربي HTML هذه العلامات لإنشاء قوائم:

المشروع الأول<br />
المشروع الثاني<br />
المشروع الثالث<br />

فكر في استخدام قائمة مرتبة أو غير مرتبة بدلاً من ذلك:

<ul>
<li>المشروع الأول</li>
<li>المشروع الثاني</li>
<li>المشروع الثالث</li>
</ul>

"لكن li يعطيني نقطة دائرية، وأنا لا أحتاج إلى نقطة دائرية!" قد تقول. بناءً على الفصل السابق، لا يقوم CSS بأي افتراض حول المظهر المتوقع للعناصر. إنه ينتظر منك أن تخبره بما توقعت من مظهر العناصر. إغلاق النقطة الدائرية هي واحدة من أكثر قدرات CSS الأساسية. لديها القدرة على جعل القوائم تبدو مثل النص العادي، أو مثل قائمة تحكم رسومية، مع تأثيرات انعكاس كاملة.

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

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

strong {
	font-weight: bold;
	font-style: normal;
	{}

عناصر المرئية والهيكلية

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