نبذة عن إطار عمل المصمم في تصميم وإنتاج الويب

"الإطار" هي كلمة طنانة جدًا في تطوير الويب هذه الأيام. على سبيل المثال، جذبت أطر عمل JavaScript YUI وJQuery وPrototype اهتمامًا واسع النطاق، كما اجتذبت أطر عمل تطبيقات الويب Rails وDojo المزيد من الاهتمام. ويبدو أن الجميع يستخدم نوعًا ما من الإطارات لتطوير مواقع الويب الخاصة بهم. ولكن ما هو إطار العمل بالضبط؟ هل يمكن للمصممين الاستفادة منه فقط؟

ما هو الإطار؟

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

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

إطار CSS

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

في Lawrence Journal-World، حيث أعمل، قمنا مؤخرًا ببناء إطار عمل CSS ووجدنا أنه مُضاعِف ضخم للكفاءة. بالتأكيد، استغرق الأمر منا أيامًا لإنشاء إطار عمل CSS بأنفسنا، ولكن بمجرد اكتمال الإطار، أصبح تطوير صفحات الويب عالية الجودة سريعًا للغاية. علاوة على ذلك، نظرًا لأن كل مصمم في الفريق يستخدم الآن هذا الإطار، فعندما يقوم المصمم بتعديل صفحة الويب الخاصة بعضو آخر في الفريق، فإنه لم يعد بحاجة إلى قضاء 20 دقيقة في فهم أفكار البناء الخاصة بأشخاص آخرين ويمكنه البدء على الفور.

هل هناك ما يمكن تجاهله؟

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

في كل مشروع أعمل عليه تقريبًا، هناك بعض مشكلات CSS التي يجب أن أعلن عنها:

"إعادة ضبط شاملة" للنمط الافتراضي للمتصفح، على سبيل المثال، تعيين الهامش والحشو لجميع العناصر على 0، وإزالة حدود مجموعات الإطارات والصور، وما إلى ذلك.

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

إنشاء النمط الأساسي للنموذج.

قم بإنشاء العديد من فئات CSS شائعة الاستخدام، على سبيل المثال، .hide (اضبط العرض على لا شيء، أي إخفاء العنصر)، و.mute (اضبطه على خط أصغر ولون أكثر سطوعًا).

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

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

ما هي الفوائد الحقيقية؟

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

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

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

كيفية بناء إطار عمل CSS؟

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

إعادة تعيين.css - يعالج إعادة التعيين

type.css — يعالج الطباعة

Grid.css - يتعامل مع التخطيط

widgets.css — يتعامل مع الأدوات مثل قوائم علامات التبويب، والقوائم المنسدلة، وأزرار "المزيد"

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

نصيحة

هذه الطريقة جيدة، ولكنها تجلب أيضًا مشاكل جديدة: فهي تزيد من عدد روابط http لكل صفحة. بالنسبة لمواقع الويب ذات حركة المرور الكبيرة والمتوسطة، إذا تمت إضافة أكثر من 5 اتصالات HTTP إلى كل صفحة، فقد يكون مسؤول النظام في مشكلة كبيرة. حلان ممكنان:

ضع جميع الأنماط في ملف واحد بدلاً من تقسيمها إلى وحدات متعددة. تكمن المشكلة هنا في فقدان مرونة إطار العمل ليشمل ملفات محددة فقط وتصبح الصيانة مرهقة.
يوجد برنامج من جانب الخادم يقوم ديناميكيًا بمعالجة ملفات فردية متعددة في استجابة. لم أر هذا يتم تنفيذه بعد، ولكن يجب أن يكون فعالاً للغاية إذا تم تنفيذه بشكل جيد. بأخذ الإطار المذكور أعلاه كمثال، يتم تشغيل عملية المعالجة الديناميكية هذه عند طلب base.css، وليس عند طلب type.css وgrids.css وما إلى ذلك. بهذه الطريقة، تظل الملفات الفردية متاحة ويكون الإطار بأكمله صالحًا على إصدار النظام الأساسي.
باختصار، من المهم أن نلاحظ أن هدفنا ليس أن نكون مجردين قدر الإمكان. بدلاً من ذلك، الهدف هو توفير بداية سريعة وعملية تصميم أكثر كفاءة وهو أمر ممكن بالتأكيد على الإطلاق. إذا لجأت إلى التجريد أكثر من اللازم، فقد تصبح الأمور مربكة وقد يؤثر عدد كبير جدًا من روابط HTTP على أداء موقعك. تذكر: الإطار الجيد لا يعني جعل الأمور أكثر صعوبة وتعقيدًا، بل يعني البدء من الصفر.

تلخيص

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