مقدمة
في المرة الأولى التي تصفحت فيها الإنترنت، استخدمت محطة غبية. ولم يمض وقت طويل حتى تمكنت شاشة أحادية اللون في ولاية مينيسوتا من تشغيل فيلم "Monty Python and the Holy Grail" من خلال خادم. لم يكن هناك ماوس، ولا واجهة مستخدم جيدة، ناهيك عن ألوان 24 بت. غوفر هي الأداة الوحيدة المتاحة. يمكن للبحث فقط استخدام Archie وVeronica. لم يسمع أحد عن W3 (شبكة الويب العالمية)، وبدت شبكة الويب مناسبة في ذلك الوقت.
ملاحظة المترجم:
1. محطة غبية. يشبه إلى حد كبير جهاز الكمبيوتر، ولكن بدون وحدة المعالجة المركزية والذاكرة والقرص الصلب الخاصة به. تتم معالجة المعاملات من خلال مضيف مشترك.
2.غوفر. تطبيق عميل/خادم يعرض جميع المعلومات للمستخدم النهائي في شكل قائمة عن طريق إجراء نقل FTP، وتسجيل الدخول عن بعد، وبحث Archie، وما إلى ذلك، مما يسمح للمستخدم بتصفح عدد كبير من المعلومات. وبهذه الطريقة، لا يحتاج المستخدمون إلى معرفة (أو إدخال) عناوينهم عند الوصول إلى موارد الإنترنت.
3.Archie هو أول برنامج يقوم تلقائيًا بفهرسة ملفات مواقع FTP المجهولة على الإنترنت، ولكنه ليس محرك بحث حقيقي حتى الآن.
4.Veronica عبارة عن مورد من نوع Gopher يمكنك استخدامه لاسترداد كافة عناصر القائمة التي تحتوي على كلمات خاصة محددة في مساحة Gopher.
وبعد فترة من الوقت، بدأت تعليمات برمجية غريبة تتدفق على نتائج البحث الخاصة بي، ولا يزال بإمكاني قراءة ما أحتاج إليه، ولكنه كان مزعجًا. أخبرني أحد زملائي أنها لغة HTML، وهي لغة رسومية للإنترنت، وقد تعلمت بعض الأساليب لمحاولة تصفية HTML. وفي وقت لاحق، ظهرت شاشات ذات 256 لونًا والإصدار الأول من متصفح Mosaic، وبدأ كل شيء يتغير.
لقد مر وقت طويل منذ ذلك الحين، وتحسنت التكنولوجيا بشكل لا يصدق، وتم إصلاح واجهات الويب وإعادة التفكير فيها وإعادة اختراعها مرات لا تحصى. منذ أن بدأت العمل كمصمم ويب، واجهت بشكل مباشر المراحل المختلفة للتصميم المبني على الجدول، ومشاكل JavaScript، وصراعات CSS، والأهم من ذلك، معايير الويب الأكثر قبولًا عالميًا.
في البداية، تم إنشاء الإنترنت فقط وفقًا لأفكار Geeks (متعصبي التكنولوجيا)، ولم يكن هناك سوى محتوى خالص على الإنترنت، ولم يأخذوا في الاعتبار ألوان الخلفية والصور الجميلة. ولكن الحقيقة هي أن الناس يحبون رؤية تعبيرات أكثر ثراءً عند ركوب الأمواج. ظهور طريقة تصميم الجدول يحل هذه المشكلة ويمكننا التحكم في التخطيط من خلال الجداول! لقد بدأنا جميعًا في "خداع" النظام، ألا يمكننا إنشاء خط رفيع يبلغ 1 بكسل؟ ما عليك سوى إدراج نقطة GIF شفافة في صف الجدول وتعيين لون الخلفية، وبذلك تكون قد انتهيت! لا يمكن التحكم في الخطوط؟ ثم استخدم علامة أخرى <font>!
قبل أن أتعرف على CSS ومعايير الويب، كنت أقوم بالتصميم باستخدام الجداول لسنوات عديدة. تختلف طريقة تصميم معايير الويب تمامًا عن ذي قبل، فهي فعالة وساحرة. لقد وقعت في حب أساليب التصميم الجديدة بشدة وشغف. يمكنه استخدام تعليمات برمجية ذات معنى لفصل المحتوى عن التخطيط، مع الحفاظ على المساحة البيضاء والتصميم الجميل على الفور "أحب الجديد وأكره القديم" ولم أعد أستخدم أساليب التصميم القديمة.
حتى اليوم.
كان هناك الكثير من النقاش حول معايير الويب وCSS، مثل كل كلمة رئيسية جيدة، ستصبح "الاسم الكبير" التالي في تاريخ تطوير تكنولوجيا الويب. بدأ الأمر مع دوغل عندما قام بومان بإعادة تصميم موقع Wired.com واستمر في التطور. في عام 2003، تم نشر كتاب "التصميم بمعايير الويب" الذي كتبه زيلدمان، مما سمح لنا جميعًا برؤية النور. وقد احتضن المصممون في جميع أنحاء العالم أسلوب التصميم الجديد وابتهجوا به. إنها منظمة، ودلالية، وسريعة وخفيفة الوزن.
ومع ذلك، لا يزال هناك بعض الأشخاص الذين ما زالوا يستخدمون طريقة تصميم الجدول التقليدية، بل ويستخدمون علامة <font>، ويقولون إن الطريقة التقليدية أسهل وأكثر ملاءمة للصيانة والتطوير السريع. من هو على حق؟
قررت أن أقوم بتجربة بنفسي لأرى كيف تغيرت الأمور وأي طريقة اخترناها كانت الأفضل.
تحدي
لقد قمت بتصميم موقع افتراضي باستخدام برامج الرسومات. ثم استخدم HTML4.01 أولاً لإنشائه، باستخدام الجداول التي لا تحتوي على أي CSS للمقارنة، ثم استخدم XHTML1.0 Transitional لإنشائه، ويتوافق الكود مع مواصفات سهولة الاستخدام وإمكانية الوصول، ويستخدم CSS لتجنب الجداول قدر الإمكان. (ما لم يتم استخدام الجدول لتمثيل البيانات الجدولية.)
تنقسم عملية الإنتاج إلى ثلاث مراحل، ويتم تسجيل العملية بالتفصيل، ومقارنة الإيجابيات والسلبيات لمعرفة ما حصلنا عليه؟ ما الذي ضاع؟ في أي جانب يجب أن نكون.
المرحلة الأولى: تصميم الموقع
لقد بدأت بتصميم موقع خيالي. أفترض أنني أقوم بإنشاء موقع ويب لمنظمة تسمى "جمعية مراقبي الفراشة". هاها، ربما يكون هذا أفضل عميل لدي والذي لن يشارك في عملية التصميم. حاولت أن أجعله واقعيًا قدر الإمكان، متخيلًا المستخدمين المستهدفين للموقع، باستخدام تخطيط تقليدي وخطوط موثوقة.
أريد أن يكون الموقع مضغوطًا وفعالًا وموجزًا. أيضًا، اعتقدت أنه يجب أن تكون هناك فراشات على الصفحة، لذلك بحثت في كل مكان عن صورة فراشة مناسبة وسرعان ما وجدت واحدة في Stock.xchng. الفراشة الزرقاء التي تستريح بين الأوراق الخضراء تناسب تمامًا صورة الموقع. بعد بعض المعالجة والتعديل، تصبح هذه الصورة هي رأس صفحتنا.
أثناء عملية التصميم، التزمت ببعض مبادئ سهولة الاستخدام. على سبيل المثال، حاول إبقاء حجم ملف الصورة صغيرًا قدر الإمكان. في البداية، خططت لاستخدام خط Garamond للتنقل لاحقًا، مع الأخذ في الاعتبار أن جهاز المستخدم قد لا يحتوي على هذا الخط، قررت استخدام خط Georgia (هذا الخط مشابه لـ Times New Roman، وفي أسوأ الحالات، ويمكن استبداله بخط Times New Roman). لكن بالنسبة لصورة الرأس، ما زلت أستخدم جورجيا لأنها صورة.
يحتوي النص على خلفية رمادية ويستخدم خط Trebuchet MS؛ ويستخدم الخبر خط Verdana، والذي يبدو جيدًا أيضًا عند تصغيره. هناك قاعدة غير مكتوبة لاستخدام 4 خطوط في التصميم، وأنا لا أتفق معها حقًا.
المرحلة الثانية: "استخدم الطريقة السابقة واستخدم صور GIF شفافة للتحكم في التباعد".
إذا كنت بالفعل مصمم ويب وشاركت في مشاريع متعددة، فإن البنية التالية مألوفة لك جدًا:
<جدول bgcolor = "#ffffff" cellpacing = "0" cellpadding = "0" border = "0" محاذاة = "center" width = "200"> <tr> <td colspan = "3" bgcolor = "#545454" ><img src="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td bgcolor="#545454"><img src=" فارغ.gif" width="1" height="1" alt=""></td> <td width="100%" align="center">يتم وضع المحتوى هنا.</td> <td bgcolor=" #545454"><img src="blank.gif" width="1" height="1" alt=""></td> </tr> <tr> <td colspan="3" bgcolor="# 545454"><img src="blank.gif" width="1" height="1" alt=""></td> </tr> </table>
لقد اعتدنا على استخدام الجداول للتحدث لأنها "لبنات البناء" الأساسية لدينا. على سبيل المثال: استخدم صور GIF شفافة للتحكم في المسافات، واستخدم سمات مختلفة للجداول للتحكم في الموضع. لقد أوضح أحدهم الأمر بهذه الطريقة: الجداول موثوقة، والصفحات الموضوعة مع الجداول يمكن أن تكون متوافقة مع الأمام! لا يجرؤ أي CSS على التنافس مع الجداول، فالجداول يمكن أن تناسب جميع المتصفحات وما إلى ذلك.
لنبدأ بإعادة إنتاج عملية التصميم بأكملها خطوة بخطوة.
ساعة 1
أوه. يبدو أنه يمكننا العودة بالزمن إلى الوراء. كيف يمكننا تحديد لون الخلفية دون استخدام CSS؟ نعم... إنه bgcolor، شكرًا على النصيحة. حسنًا، فلنبدأ في إنشاء النموذج ومعاينة التأثير. لقد قمت بتعريف "align=center" بحيث يتم توسيطه في جميع المتصفحات، رائع، كم هو سهل! الشكل لا يبدو سيئًا، وأشعر وكأنني التقيت بصديق قديم. لقد استخدمت بخبرة صور GIF شفافة للتحكم في المسافات، وتم العمل بسرعة! العطف؟ لماذا توجد مسافة فارغة بين الرأس والقائمة؟ أوه، اتضح أن هناك مساحة إضافية بعد رمز الصور، وسيقوم متصفح IE بعرضها. من السهل تغيير ذلك، فقط قم بحذف المسافات.
الساعة 2
أستخدم جافا سكريبت لإنشاء تأثير قلب لقائمة التنقل:
<td ... onMouseOver="chBg(this);" onMouseOut="chBg2(this);" >...</td>
يتم كتابة جافا سكريبت مثل هذا:
وظيفة chBg(obj) { obj.bgColor = "#E1E5DB" } وظيفة chBg2(obj) { obj.bgColor = "#CBD1C3" }؛
بخلاف حقيقة أنني نسيت قليلاً عن أساليب التصميم القديمة، كان التقدم برمته سريعًا جدًا. على الرغم من أنني حاولت تقليل تداخل الجداول قدر الإمكان، إلا أن الكود لا يزال يبدو معقدًا بعض الشيء، لذلك أضفت بعض التعليقات لتسهيل العثور على الأماكن التي نحتاج إلى تعديلها.
واجهت مشكلة صغيرة: لا أستطيع إزالة التسطير أسفل الرابط دون استخدام CSS. ربما هناك حل فلنبحث عنه في جوجل
الساعة 3
بعد البحث في جوجل، ما زلت لا أستطيع العثور على طريقة كيف يمكنني إنشاء رابط بدون تسطير؟ يجب أن يكون هناك حل!
الساعة الرابعة
دعونا نلقي نظرة على نتائج الساعات الأربع الأولى على متصفحات أخرى غير IE6. أوه! قبيح جدًا في Firefox، ويبدو جيدًا في Opera وNetscape.
الساعة 5
المضي قدما والتعليمات البرمجية ... والتصحيح والتعديل.
في العمل، أدركت القيود المفروضة على العلامة <font> للتحكم في حجم الخط، حيث لم أتمكن من تحديد أحجام متعددة. عليك اللعنة!
لقد واجهت أيضًا مشكلات في تخطيط النص في قسم الأخبار من أجل وضع مسافة بادئة، كان علي استخدام المزيد من تداخل الجدول لتحقيق التأثير. ولترتيب صور الفراشة في النص على يمين النص، كان علي أيضًا إضافة جدول لحل المشكلة. هذا النوع من التنضيد "الغش" يجعلني أشعر بالعجز.
الساعة 6
تم الانتهاء من التصميم وهو يشبه إلى حد كبير التصميم الأصلي، يمكنك النقر هنا لإلقاء نظرة.
انقر هنا لمعرفة عدد الجداول المضمنة.
المرحلة 3: لا نحتاج إلى نماذج!
أدناه سنلقي نظرة على التصميم الذي يعتمد على معايير الويب والمُصمم باستخدام CSS. سأبدأ بتحديد المحتوى. سأحاول أن أجعل الشعار دلاليًا وأتجنب العلامات الزائدة عن الحاجة.
الرأس عبارة عن صورة، ولكنه أيضًا عنوان، لذلك أكتب الكود على النحو التالي:
<h1>جمعية مراقبي الفراشات. نحن نشاهدهم.</h1>
سأفكر في كيفية عرض هذا العنوان بشكل صحيح لاحقًا (من الناحية المثالية، نحن نهتم قدر الإمكان بالمحتوى وأقل قدر ممكن بالتخطيط). سيتم تحديد العناوين الأخرى (الأخبار والمشاهدات والعضوية) على أنها <h2>.
القائمة هي في الأساس قائمة (قائمة) غير مرتبة، لذا سيتم تعريفها على أنها قائمة. لا يلزم تصنيف الفقرات (نستخدم محددات الوراثة "لتعليقها" في الطبقة التي تحتوي عليها). سأقارنه بنص المحتوى الأصلي لمعرفة عدد العلامات الإضافية التي أحتاج إلى إضافتها لتحقيق التخطيط (سأحاول تجنب إضافة العلامات قدر الإمكان).
هذا هو نص المحتوى الأصلي. ألق نظرة على الكود الأصلي، فهو يتوافق مع المواصفات الانتقالية xhtml1.0. لاحظ أن جميع العناصر موجودة بالفعل في <div> بأسماء محددة. تمت إضافة التاريخ الموجود في الأخبار أيضًا مع فئة التاريخ. يمكنك أن ترى أن الكود بسيط للغاية.
ساعة 1
حدد حدود طبقة "الحاوية" لتكون 1 بكسل. قم بتوسيط المحتوى عن طريق تحديد "محاذاة النص: المركز" في نمط النص. لكي يتم توسيطه في جميع المتصفحات، تم تعريف الهامش: 0 تلقائي (يعني أعلى = 0، يمين = تلقائي، أسفل = 0، يسار = تلقائي) أيضًا في "الحاوية". يمكن إجراء التوسيط بنفس السهولة كما هو الحال مع الجداول.
حدد قيم الحشو "العلوي" و"السفلي" لـ "الجسم" لتكون 20 بكسل (عدم تعريف الحشو بشكل مباشر في "الحاوية" يناسب جميع المتصفحات).
يجب تعريف القائمة غير المرتبة (li) على أنها "display:inline" بحيث يتم عرض القائمة في سطر واحد. أضفت أيقونات التنقل بين القوائم. يتم تعريف أيقونات التنقل هذه باستخدام طريقة الخلفية غير المتكررة، والتي يمكنها تحديد موضع (x، y) بدقة، على غرار ما يلي:
الخلفية: url(menuBullet2.gif) no-repeat 4px 9px؛ يعتمد تأثير تغيير لون النقر للقائمة على نمط التمرير للرابط، ولم يعد يتطلب JavaScript.
قمت بتعيين صورة الفراشة في رأس الصفحة كخلفية لـ <h1>، بحيث لا داعي للقلق بشأن سهولة الاستخدام، ويمكن قراءة العنوان بشكل طبيعي على الأجهزة التي لا يمكنها عرض الصور (مثل الشاشة) القراء وروبوتات البحث).
الساعة 2
يستخدم العنصر الأول من القائمة (HOME) رمزًا مختلفًا واضطررت إلى إخفاء الخلفية الأصلية وإضافة معرف إضافي (frst) إلى القائمة HOME:
#hMenu ul li #frst
رمز آخر (الاتصال):
الخلفية: عنوان URL شفاف (menuBullet3.gif) بدون تكرار 615 بكسل 9 بكسل؛ لا يمكنني استخدام CSS للتحكم في العمودين لهما نفس الارتفاع، ولحسن الحظ، يمكنني استخدام صورة خلفية للتغلب عليها. لقد حددت "حاوية" تكرر الخلفية عموديًا.
الخلفية: #fff url(bgMain.gif) كرر-y؛
الساعة 3
تعد مربعات تعريف CSS أكثر ملاءمة من الجداول، خاصة الخصائص العديدة للحدود المفيدة جدًا.
الآن أبدأ في تحديد رأس <h2>. تعريف الأيقونة هو نفسه المذكور أعلاه.
أقوم بتعويم طبقة "الأخبار" على يمين "المشاهدات" و"العضوية". حدد طبقة "حقوق الطبع والنشر" بـ "clear: كلاهما؛" بحيث تتبع الطبقة العائمة. قم بتحريك صورة الفراشة في النص الموجود على اليمين، ويمكن أن يلتف النص تلقائيًا حول الصورة. يمكن أن يؤدي تحديد حدود 1 بكسل للصورة وتعيين مسافة الحشو إلى تحقيق تأثير التداخل للجدولين الأصليين.
تم اكتشاف بعض المشكلات: تداخل طبقة حقوق النشر وطبقة المحتوى جزئيًا.
الساعة الرابعة
الخطأ الموضح مرتبط بتعريف "المشاهدات" و"العضوية". إن تحريكها إلى اليسار يحل هذه المشكلة التي تبدو غريبة. لقد استخدمت Firefox للاختبار الأول. حسنًا، لا يبدو الأمر سيئًا، إلا أنه تم تغيير أيقونات القائمة ببضعة بكسلات.
هناك بعض تقنيات CSS التي يمكنها تصحيح تأثير العرض في متصفحات غير IE، مثل إعطاء قيم خصائص مختلفة لمتصفحات مختلفة.
لقد استخدمت القيمة المهمة في تعريف نفس العنصر ويمكن تنفيذ نفس التعريف المكتوب في المقدمة أولاً. هذه القيمة غير مدعومة من قبل متصفح IE.
الخلفية: url(menuBullet2.gif) بدون تكرار 4px 6px! مهم؛
الخلفية: url(menuBullet2.gif) بدون تكرار 4px 9px;
في CSS، إذا كان هناك تعريفات متعددة لنفس العنصر، فإن التعريف الأخير يكون صالحًا. ولكن نظرًا لأن IE لا يدعم !important، فسيستخدم IE القيمة المحددة الثانية، وستستخدم المتصفحات الأخرى القيمة المحددة الأولى.
تم الانتهاء من كل شيء، انظر النتائج هنا.
ختاماً
التصميم القائم على الجدول
لقد قمت باختبار الصفحة باستخدام كل متصفح وجدته، بما في ذلك تلك الخاصة بأنظمة التشغيل Linux وWindows وMacintosh. تبدو صفحات تخطيط الجدول متشابهة في المتصفحات المختلفة. "إنها صلبة كالصخرة"، هذا هو أول تعليق يُعطى لتخطيط الجدول.
ومع ذلك، عندما يكون من الضروري تعديل جزء من محتوى الصفحة، فإن تغيير تخطيط الجدول يكون أمرًا شاقًا للغاية. هذه مشكلة إذا استخدمنا نظام إدارة المحتوى (CMS)، فسيكون من الصعب تنسيق المحتوى.
وقت التصميم بأكمله طويل بعض الشيء لأنني نسيت الطريقة القديمة إذا قمت بذلك مرة أخرى، أعتقد أنه قد يوفر 1-2 ساعة.
أصف التصميم القائم على الجدول بأنه كثير من "العمل الشاق"، على الرغم من أنني غالبًا ما أتفاجأ بتقنيات التصميم المتقدمة. مع التصميمات المستندة إلى CSS النقي، عادةً ما أكون معتادًا على تقسيم التصميم وتحليل الأخطاء خطوة بخطوة. ومع ذلك، فإن استخدام تصميم الجدول لا يتطلب هذا العمل، بل تحتاج فقط إلى الاستمرار في إضافة الجداول إلى التصميم. دعونا نلقي نظرة على عملية CSS مرة أخرى.
التصميم القائم على CSS
يبدو التصميم باستخدام CSS أفضل بكثير. تكون تغييرات التعليمات البرمجية مباشرة وشفافة، ويمكنني التحكم بوضوح في العملية بأكملها، وفي المقابل، فإن تصميم الجدول يشبه وضع الطوب. كلما زاد التغيير في الصفحة، أصبح تصميم CSS أكثر ملاءمة وكفاءة.
يعد تصميم CSS أيضًا مفيدًا جدًا لتوفير النطاق الترددي، حيث يمكن أن يؤدي استخراج جميع الأنماط إلى ملفات منفصلة واستخدام ملف ورقة أنماط واحد أو أكثر للموقع بأكمله إلى جعل الموقع بأكمله أصغر.
إن فصل معلومات التخطيط عن المحتوى له فوائد عديدة أيضًا. في المستقبل، يمكنني تجديد الموقع بالكامل في أي وقت دون تغيير أي شيء، تمامًا مثل CSS Zen Garden. كما أنه يزيد من سهولة الاستخدام، مما يسهل على روبوتات البحث اكتشاف صفحتك (تذكر: Google هو المصدر الأكثر أهمية للزوار).
على الرغم من أن كفاءة عملك عالية جدًا عندما تكون على دراية بالتصميم المعتمد على CSS، إلا أنه يجب عليك قضاء الكثير من الوقت في تعلم القواعد والاختلافات في نماذج الصناديق وتقنيات معالجة المتصفح والكثير من النظريات، ويتطلب الأمر ممارسة مستمرة لإتقانها . باختصار، CSS أبسط من الجداول، ولكن إذا كنت تريد التصميم باستخدام CSS خالصًا، فكن مستعدًا لاستثمار الكثير من الوقت في تعلمها. حتى لو كنت مطورًا ذا خبرة، فيجب أن تكون مستعدًا للتعامل مع الأخطاء المختلفة. في بعض الأحيان قد يستغرق الأمر عدة ساعات للتعامل مع الأخطاء.
الفائز
يفوز التصميم القائم على معايير CSS والويب. مجرد النظر إلى الكود الخاص بكلا الطريقتين يكفي للاختيار. يقدم CSS العديد من الفوائد (بشكل رئيسي من حيث سهولة الاستخدام). في الحقيقة السبب الأساسي هو كسلي. إذا استخدمت تصميم طاولة واتصل بي العميل بعد عام وأخبرني أنه يحتاج إلى مراجعة، فقد أخبره أنني انضممت إلى الجيش وأنا في بلد أجنبي. إذا كنت أستخدم CSS، فسوف أقوم بتغييره للعميل دون تفكير ثانٍ لأنني لن أضطر إلى إعادة اختراع العجلة.