أفكار حول بناء موقع الويب القياسي

لقد بدأت تعلم معايير الويب في بداية العام الماضي، واكتسبت بعض الخبرة خلال العامين الماضيين. لقد قمت مؤخرًا بتغيير وظيفتي وأنا متفرغ في المنزل، لذلك كتبت شيئًا لمشاركته مع الجميع.

1. فهم معايير الويب ومواصفات W3C XHTML

ووفقا للفهم المتعارف عليه، يبدو أن هذين المفهومين يشيران إلى نفس الشيء (هذه "النظريات المتقدمة" التي نناقشها في هذه الطبعة^_^). لكنني أعتقد، في الواقع، من وجهة نظر فنية، أن هذين الأمرين لا يوجد بينهما أي علاقة على الإطلاق. باختصار، تهدف معايير الويب إلى تنفيذ هيكل الصفحة وأدائها وسلوكها بشكل مستقل. والأكثر شيوعًا، هي اللغة الشائعة "div+css" في التوظيف اليوم. ومع ذلك، لا يوجد إصدار من W3C XHTML يضع قيودًا على مفهوم معايير الويب. من الواضح أنه يمكننا استخدام xhtml 1.1 لكتابة صفحة ويب موضوعة في الجدول. في هذه المرحلة، قد تعتقد أنني أتحدث كثيرًا من الهراء. ولكن مع أي تقنية، لا يمكنك استخدامها بشكل صحيح إلا عندما يكون لديك فهم واضح بما فيه الكفاية للمفاهيم الأساسية. اسمحوا لي أن أتحدث عن المسارين المضللين في التطبيق الحالي لمعايير الويب من الجانبين التاليين:

الحالة الأولى بسيطة. أعتقد أنه طالما تم استخدام XHTML+CSS، فهو معيار ويب. الصفحة مليئة بالفصول والمعرفات. لا تتردد في تحديد فئات منفصلة لكل التفاصيل. الفرق بين هذه الصفحة وHTML التقليدي هو وجود "/" إضافي في علامة img. في الواقع، من الأفضل العودة إلى لغة HTML التقليدية. على الأقل يمكنني استخدام الخط بسهولة دون الحاجة إلى البحث في ورقة الأنماط مثل القاموس. استخدام آخر أكثر دقة وغير رسمي لـ CSS سأتحدث عنه لاحقًا.

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

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

مثال آخر قد يكون أكثر دقة. لقد رأيت مقالة على alistapart.com من قبل حول كيفية تنفيذ أعمدة ثلاثية على صفحة ويب. ربما يكون المبدأ هو استخدام ثلاثة أو أربعة عناصر div لتداخل بعضها البعض. أعتقد أن هذا يعد أيضًا انتهاكًا لمعايير الويب. لأن الترتيب الذي يتم به وضع علامات div هذه في التعليمات البرمجية ليس فقط للاحتياجات الهيكلية، ولكن لأداء صفحة الويب.

بالطبع، أعترف بأن وجهة النظر المذكورة أعلاه مبالغ فيها إلى حد ما (ولكن من ناحية أخرى، إذا كان عليك تنفيذ زوايا مستديرة غير مصورة، أليس كذلك مبالغة، هاها). في بعض الأحيان، لا يتم الفصل بين البنية والأداء بسهولة، ومن أجل تحقيق بعض الأداء الغني، علينا أن نسمح للبنية بالتكيف (فكر في استخدام <div style="clear:both" />). ولكن من المهم معرفة ما هو الصواب وما هو الخطأ. حتى لو كان علينا أن نفعل شيئًا خاطئًا في بعض الأحيان.

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

2. دلالات علامات HTML

تسمى معايير الويب اليوم بالعامية "div+css" أو "تخطيط الطبقة". أنا لا أعترض على هذه النفعية. ولكن هذا سيؤدي إلى سوء فهم: استخدام عدد كبير من علامات div كعناصر هيكلية. في الواقع، هذا شكل أكثر تقدمًا من أشكال إساءة استخدام div (ذكره جيفري زيلدمان في كتابه "إعادة هيكلة موقع الويب").

تزودنا لغة HTML بكمية كبيرة من العلامات، ولكل منها معنى خاص بها. أعتقد أنه عند التصميم، بالإضافة إلى اتباع بناء جملة HTML، يجب علينا الاستفادة الكاملة من "دلالات" كل علامة والامتثال لها. على سبيل المثال، يجب تضمين نص العنوان في h1-h6، ويجب تقسيم الفقرات الكبيرة من محتوى النص بواسطة <p> بدلاً من <br />، ويجب وضع عناصر القائمة في ul أو ol أو dl، ويجب وضع البيانات في شكل جدولي ينبغي أن يظل تخطيط الجدول.

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

اسمحوا لي أن أسرد بالتفصيل فهمي لدلالات بعض العلامات:

ص ر

دعونا نتحدث عن أبسط واحد أولا. استخدم علامات p بدلاً من br (حتى علامتين متتاليتين <br />) للفقرات. يبدو أن هذا يذهب دون أن يقول الكثير. لكن في بعض الأحيان يتعين علينا التخلي عن هذا المبدأ. من الأمثلة الشائعة منشورات المنتدى، إذا أردت تقسيمها، اضغط على زر الإدخال. من الواضح أن ما يتم إرساله إلى الخلفية وعرضه بهذه الطريقة يتم تقسيمه باستخدام <br />.

الجدول ال

نظرًا للترويج القوي لـ div+css، يبدو أن من يستخدم تخطيط الجدول هو مواطن غير متحضر. لكن أعتقد أن هذا الرأي غير صحيح. معنى الجدول هو جدول، لذا فإن أي بيانات يجب أن تظهر في شكل جدول يجب أن تظل موضوعة في جدول. مثال بسيط هو قائمة زملاء الدراسة، بما في ذلك الأسماء ومعرفات الطلاب والجنس وما إلى ذلك. ومن الواضح أن هذه بيانات في شكل جدول، لذا يجب استخدام تخطيط الجدول. مثال آخر يستحق الاستكشاف هو التنقل في التقويم في المدونة. لقد رأيت ذات مرة برنامج مدونة. جميع التواريخ الموجودة في التنقل في التقويم ملفوفة في divs من الأول إلى الثلاثين، ثم يتم استخدام النمط float:left لترتيب تقويم الشهر الحالي في صف من 7. عندما أقوم بإلغاء عرض CSS للمتصفح، يتم ترتيب جزء التقويم عموديًا من رقم 1 إلى رقم 30. أعتقد أن هذا خطأ. نظرًا لأن التقويم يجب أن يكون بيانات في شكل جدول، فيجب الاستمرار في استخدام تخطيط الجدول. بعد إلغاء CSS، لا يزال يتعين تجميعها في جدول مكون من 7 أرقام متتالية.

هذه علامة أخرى سيتم تجاهلها. نظرًا لقدرة CSS المطلقة، يمكن إنشاء جميع خلايا الجدول باستخدام سمة td والفئة. ولكن من الناحية الدلالية، يجب تسمية بعض خلايا الجدول بـ th. على سبيل المثال، في جدول التقويم المذكور أعلاه، يجب أن تستخدم وحدات "MON TUE WED... SUN" التي تحدد الأسبوع th بدلاً من td.

h1-h6

بالنسبة لعلامات h1-h6، يجب أن تعمل مع كل نص العنوان من الناحية الدلالية. لذلك، بعض أساليب الكتابة مثل <div class="diary-title> زائدة عن الحاجة. اكتبها مباشرة كـ <h1>، ثم قم بتعريف CSS لـ h1 مباشرة بدلاً من .diary-title. ألن يكون لها نفس التأثير؟ ​​بالطبع هذه القاعدة لا يمكن أن تكون صارمة للغاية، لأنه في بعض الأحيان لا يمكن حل العناصر الهيكلية لجزء العنوان ببساطة باستخدام h1، ولكن على الأكثر أستخدم طريقة مثل <h1><span></ Span></h1> لتغيير العنوان، حيث يتم تداخل البنية بشكل أكثر تعقيدًا لتلبية احتياجات الأداء.

لكن الخلاف الدلالي ينشأ هنا. هل يجب فهم h1 كعنوان من المستوى الأول أم كعنوان بحجم خط 1؟ عادةً ما أفهمه كعنوان من المستوى الأول، وإذا كانت هناك ترجمات تحت عنوان المستوى الأول، فاستخدم h2. ولكن في الواقع، إذا نظرنا إلى بداية تصميم HTML، فإن الأرقام بعد h1-h6 تُفهم أكثر على أنها تتحكم في حجم نص العنوان. يمكن استخدام h3 فقط لاستخدام خط بحجم ثلاثة، وليس لأنه عنوان من المستوى الثالث. بخلاف ذلك، تستخدم جميع عناوين المستوى الأول h1، وجميعها خطوط كبيرة جدًا، ويجب عليك استخدام CSS للتحكم في حجم الخط، وهو ما يبدو مرهقًا للغاية. إذن هذا سؤال للنقاش.

أول رأ

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

يجب أن نضيف أنه لا تنس أنه يمكن استخدام ul أو ol في li لتشكيل قائمة المستوى الثاني.

دل د د د

هذه مجموعة من العلامات تقريبًا منسية، لكن جيفري زيلدمان يشجع بقوة على استخدامها في "إعادة هيكلة موقع الويب". dl يجب أن يكون الاسم الكامل لـ "قائمة التعريف (أو قائمة التعريفات؟ إذا كان أي شخص يعرف، من فضلك أخبرني)". الاستخدام النموذجي هو إدخال القاموس. يتم وضع اسم الكلمة في dt، ويتم وضع شرح الكلمة في dd. يعد موقع alistapart.com أكثر ذكاءً، حيث يحدد العمود الأيمن بأكمله بـ dl، ويستخدم dt لعنوان كل وحدة، وdd لمحتوى الوحدة.

img

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

فترة

أصبح النطاق الآن شائعًا مثل div. لكن في الحقيقة أعتقد أننا يجب أن نتمسك باستخدامه الأصلي. ما أفهمه شخصيًا هو أن الامتداد كان يستخدم في الأصل لتحمل سمات الطبقة أو النمط. وهو في حد ذاته ليس له دلالات واضحة. ولذلك، في تدفق النص، إذا كنا بحاجة إلى إجراء تغييرات على النمط لبعض النص، فإننا نستخدم الامتداد لتضمينه. على سبيل المثال، إذا كانت هناك حاجة إلى إضافة بعض الكلمات باللون الأحمر، فإنني أستخدم <span class="red">.

ومع ذلك، تجدر الإشارة إلى أن هذا قد يسبب المشاكل المذكورة في h1 من قبل. نظرًا لأن بعض أنماط النص تحتوي بالفعل على علامات جاهزة، مثل <strong> و<sub> وما إلى ذلك، فيجب علينا أيضًا منحها بعض الفرص بشكل مناسب.

أ

a هي التسمية التي تتحكم في الاتصال الفائق. ولكن هناك بعض الحالات الخاصة التي قد لا نرغب في استخدامها. على سبيل المثال، يجب أن تظهر نافذة صغيرة. لم أهتم كثيرًا، ولكن أعتقد أن بعض المصممين سيحددون onclick مباشرة في علامة <img> الخاصة بأيقونة "play". أنا شخصياً أعتقد أنه يجب علينا إضافة a خارج الصورة، ثم تحديد onclick داخل a، وتذكر كتابة return false في نهاية وظيفة js. إذا كان ذلك ممكنًا، يجب أيضًا كتابة سمة href الخاصة بالعلامة مع عنوان URL للنافذة المنبثقة للتأكد من أنه لا يزال بإمكان المستخدمين فتح الصفحة بشكل فعال حتى إذا تم تعطيل JS.

هذا كل ما سأذكره الآن.

أخيرًا، دعونا نلخص أهمية اتباع دلالات علامات HTML. أحد متطلبات معايير الويب هو التوافق البسيط: عندما يقوم المستخدم بتعطيل الصور، أو تعطيل CSS، أو تعطيل JS، فلا يزال بإمكاننا السماح له بتصفح محتوى الويب بشكل فعال. كما نعلم جميعًا، فإن السمة البديلة الإلزامية هي مراعاة التوافق عند تعطيل الصور. إن اتباع دلالات علامات HTML بشكل صحيح يضمن التوافق عند تعطيل CSS. فقط عندما يتم استخدام علامات HTML بشكل صحيح وتكون صفحة الويب الخاصة بنا عبارة عن "خطوط CSS"، فسيظل الأشخاص قادرين على رؤية مكان قائمة التنقل، ومكان عنوان المقالة، ولن ينهار جدول التقويم.