الطريق إلى معايير الويب

بادئ ذي بدء، لا تتعجل للبدء! قم بإجراء تحضيرين ذهنيين قبل القيام بأي شيء، وهذا هو أهم شيء في عملية التعلم الخاصة بك:

يستغرق التعلم وقتًا ويجب أن يتم خطوة بخطوة؛

ستكون هناك انتكاسات على طول الطريق.

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

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

حسنًا ، يبدو أنني خارج الموضوع قليلاً.

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

الآن، أول شيء هو إنشاء مفهوم نظام أيديولوجي لـ XHTML، سواء اخترت HTML4.01 أو عمل روتيني يخدر العقل)، تبدأ جميع المستندات باختيار DOCTYPE. إن إخبار المتصفح باللغة الترميزية التي يستخدمها مستندك سيمنع أخطاء الأداء غير الضرورية التي قد تدفعك إلى الجنون بنتائج عرض سيئة للصفحة. على سبيل المثال: إذا كنت أرغب في السفر إلى شيكاغو، فيجب أن أخبر وكالة السفر بالمكان الذي أريد الذهاب إليه، وإلا فقد أسافر إلى فيينا بلا هدف. لعرض HTML أو XHTML، يجب عليك أولاً إخبار المتصفح أن تعيين DOCTYPE يضمن وصولي إلى "الوجهة".

الهدف التالي: شعارات منسقة بدقة. هذا من السهل جدا إتقانه. اقتبس جميع السمات (على سبيل المثال: <a href="link">)؛ وأغلق جميع العلامات المفتوحة (على سبيل المثال: <input type="text" />). يجب إغلاق كل شعار أو عنصر.

ملاحظة سريعة: لا أعرف متى أصبحت العلامات عناصر لها نفس المعنى ولكن بطرق مختلفة لقولها. مهما كنت تسميهم، يبدو أن الاسم الصحيح هو "العناصر" الآن، ربما كان الأمر كذلك في البداية، لا أعرف ولم يخبرني أحد.

وبغض النظر عن ذلك، يجب إغلاق كل عنصر بشكل صحيح. إذا كنت تستخدم HTML4.01، فيمكنك تجاهل العناصر الفردية مثل <br> و<hr> و<input> إذا كنت تستخدم XHTML، فيجب أيضًا إغلاق العناصر الفردية، وذلك عن طريق إضافة شرطة مائلة في النهاية، على سبيل المثال: <br. > يصبح في <br />.

بعد ذلك، هناك قاعدة مربكة إلى حد ما حول سمات XHTML: يجب أن تحتوي جميع السمات على قيمة، وإذا لم تكن هناك قيمة، يتم استخدام القيمة نفسها. على سبيل المثال <input type = "radio" checked = "checked" />. في HTML4.01، القيمة المحددة غير مطلوبة، ولكنها مطلوبة في XHTML.

أخيرًا، يتطلب XHTML منك كتابة كافة التعليمات البرمجية بأحرف صغيرة. HTML ليس حساسًا لحالة الأحرف، ولكن XHTML كذلك، ويتبع قواعد بناء جملة XML.

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

القسم 2
الآن، نبدأ في تعلم كتابة HTML/XHTMLL الصحيح والتحقق من صحتها في أداة التحقق (المدقق) الخاصة بمؤسسة W3. إذا قمت بكتابتها بشكل صحيح، فسترى رسالة نجاح بنص أصفر على خلفية زرقاء. حاول أن تعجبك مجموعة الألوان/الخط هذه، ستكون أفضل صديق لك.

لماذا يعد التحقق مهمًا جدًا؟ هل يهم؟ لأن الشعارات المكتوبة بشكل سيئ (عشوائية وغير دقيقة) ستؤدي إلى عدم القدرة على التنبؤ تمامًا. تعتمد "الحياة والموت" للصفحة تمامًا على طريقة معالجة الأخطاء في المتصفح. على الرغم من أن معظم المتصفحات يمكنها أيضًا دعم الشعار المكتوب بشكل سيئ، إلا أن هذه عادة غير صحيحة. مرحباً، ما الذي يجعلنا معتادين على عدم المعايير؟ السبب الأول هو حرب المتصفحات: في عام 1995، تمكنت Microsoft من المنافسة والحصول على حصة سوقية من Netscape لأن شركة IE تعاملت مع أخطاء صفحات الويب تمامًا مثل Netscape.

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

حسنًا، عندما تقوم بإثبات ملكية موقعك الأول لأول مرة، فمن المحتمل أن تتحمل سبعين أو ثمانين رسالة خطأ مذهلة يتم إرجاعها. لسوء الحظ، على الرغم من أن المجموع الاختباري مفيد، إلا أنه ليس مثاليًا ولا يتم صيانته إلا بواسطة عدد قليل من المتطوعين. والخبر السار هو أن هذه الأخطاء مرتبطة ببعضها البعض. إذا وجدت أن العلامة </p> مفقودة وقمت بإصلاحها، فمن المحتمل أن تختفي الأخطاء الـ 24 التالية. باختصار، قد تبدو نتيجة التحقق سيئة، لكنها في كثير من الأحيان ليست كذلك.

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

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

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

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

إذًا، ما هي أفضل طريقة لفصل الأداء عن الهيكل؟ لنأخذ جزءًا من التعليمات البرمجية التقليدية للتوضيح، والتي تحتوي على عناصر أو سمات HTML المستخدمة لتقديم العرض التقديمي. لقد حان الوقت لحذف علامات bgcolors و<center>، فلنجري اختبارًا غير رسمي:

في الكود التجريبي التالي، ما هي سمات وعلامات العرض التقديمي التي يجب إزالتها؟

<center><h1><fontface="Verdana">هذا هو موقع الويب الأول لي.</font></h1></center> <table border="0" cellpadding="0" cellpacing="0" > <body bgcolor = "#ffffff" topmargin = "0" leftmargin = "0" هامش عرض = "0" هامش ارتفاع = "0"> <td bgcolor = "#ffffff" valign = "top" align = "center"> < p>إنهم قادمون لأخذي بعيدًا...</p></td>
هل أنت مستعد مع إجابتك؟ حسنًا، النتيجة الصحيحة مدرجة أدناه، وهي تعليمات برمجية منظمة نظيفة بدون أي أثر للأداء:

<h1>هذا هو موقع الويب الأول الخاص بي.</h1> <table> <body> <td><p>إنهم قادمون ليأخذوني بعيدًا...</p></td>
هذا كل شيء؟ هذا كل شيء.

على الرغم من أن هذا الرمز لا يتوافق بشكل صريح مع أي مواصفات واحدة، إلا أن الأهمية الأكبر لهذا الفصل تكمن في استخدام العناصر الصحيحة. يعد استخدام تخطيط الجدول مشكلة ثانوية. في المثال أعلاه، طريقة استخدام الجداول غير صحيحة، ومن منظور طويل الأمد وحكيم، يجب إزالة عنصري <table> و<td>. على الرغم من إهمال استخدامها، إلا أن الجداول لا تزال مفيدة جدًا، ويمكن استخدامها حيثما كان ذلك مناسبًا - على بيانات مرتبة جداولًا.

حسنًا، لقد قمنا بتجريد صفحاتنا من التنسيق، مرحبًا! ماذا تفعل الآن؟ وهذا يترك فقط بعض العناصر والنصوص والخطوط القبيحة بخط Times-New-Roman. ليس مضحكاً على الإطلاق، أين الصفحات المشرقة والجميلة التي وعدونا بها؟

بالنظر إلى مثال Zen Garden، هل ترى التصميم اللطيف؟ كيف تبدو مختلفة؟ النقطة المهمة هي: تحت هذا التصميم الجميل يوجد نفس XHTML الذي يبدو مملًا تمامًا مثل المستند غير المنسق الذي أنشأته للتو. أليس هذا صحيحا؟

في الواقع، الممل والقبيح له أساس جيد ربما لاحظت أن HTML غير المنسق يبدو سيئًا مثل الويب في عام 1994. مع بعض الاستثناءات، هذه العناصر قديمة قدم الويب نفسه، حيث كانت <h2> موجودة منذ أيام متصفح Mosaic.

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

يتم دعم CSS بشكل جيد من قبل جميع المتصفحات الرئيسية اليوم، وهناك موارد لا حصر لها للمساعدة في تعلم بناء جملة CSS، والتخطيط المستند إلى CSS، والتقنيات المتقدمة. أوصي ببعض الأشياء الجيدة: تقدم westCiv دورة CSS مجانية ومستمرة ستساعدك على البدء وإتقانها بسرعة. قام Andrew Fernandez ببناء قائمة ضخمة من موارد CSS التي ستكون مفيدة سواء كنت جديدًا في CSS أم لا. لقد كتب إريك ماير مجموعة من الكتب التي يمكنك الاحتفاظ بها على مكتبك والاطلاع عليها في أي وقت. تتضمن هذه الكتب كتاب Eric Meyer القائم على الحالات في CSS والمزيد من Eric Meyer في CSS. تم إصدار الكتاب المرجعي لـ CSS: "الدليل النهائي لـ CSS" الذي نشرته دار النشر O'Reilly للطبعة الثانية، ومن الأفضل أن تبقيه على مكتبك. يتوفر أيضًا كتاب "The Designer's Edge" بقلم مولي هولزشلاغ و"تصميم صفحات ويب CSS" بقلم كريس شميت.

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

ملاحظات 1. "التصميم بمعايير الويب" هو كتاب كتبه زيلدمان للترويج لمعايير الويب، وقد تم تقديم النسخة الصينية وإصدارها في مايو 2004. ويحمل الكتاب عنوان "إعادة بناء موقع الويب - التصميم باستخدام معايير الويب".