الرئيسية / برمجة / كيف تبني واجهة موقعك بطريقة صحيحة؟

كيف تبني واجهة موقعك بطريقة صحيحة؟

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

اليوم سأتحدث بشكل مختصر عن اثنتين من أشهر الهياكل (Frameworks) الخاصة ببناء واجهة المستخدم أو كما تعرف تقنياً (Front End). وقبل أن أطرح تفاصيل كل منها لا بد أن أشير إلى أن (Front End Framework) هي مجموعة من أوامر CSS و JavaScript التي تساعدك في انشاء واجهة مستخدم تفيدك في:

  • تكون صالحة لإنشاء واجهة مستخدم تجاوبية (Responsive) والتي تعني أن التصميم سيتغير مع تغير حجم شاشة جهازك حسب رغبتك.
  • تكون متوافقة مع كل المتصفحات على اختلاف أنواعها. مثلا أمر (-WEBKIT-TEXT-FILL-COLOR) يعمل مع متصفحات مثل Google Chrome و Apple Safari ولا يعمل مع متصفح Firefox أو Internet Explorer
  • تكون مختصرة وسريعة التحميل

والآن لنبدأ مع أشهر هيكلين حتى تاريخ كتابة المقال:

  • Bootstrap Framework (آخر اصدار 4.0.0 alpha)

مكتبة من الستايلات والجافا سيكريبت الجاهزة من انشاء شركة Twitter وتعتبر الأضخم في هذا المجال

  • Foundation Framework (آخر إصدار 6.2)

مكتبة أخرى من الستايلات والجافا سيكريبت الجاهزة من انشاء شركة Zurb وتعتبر المنافس الأكثر جودة للBootstrap

 

اذا كنت من أصحاب الاختصاص فإليك هذه الفروق السريعة بينهما:

Bootstrap Foundation
CSS Preprocessorالمعالجة المسبقة للستايل كلاهما مبني على لغة السيكريبت SASS
JavaScriptجافا سيكريبت تعتمد تحديث ES6 منذ مدة وقد وصلت إلى حالة من رضى المستخدمين اعتمدت تحديث ES6 مؤخراً ولم تخضع لفترة تجربة طويلة
Grid Systemنظام الشبكة لا تستطيع عمل grid للموقع الا باستخدام  divيعتبر كحاوية (container) ليحتوي كود ال(grid) داخله أي أنها بحاجة إلى القليل من الأكواد الإضافية يمكنك عمل grid في أي لحظة تريدها دون الحاجة لكتابة كود ليحتوي هذه الشبكة
Formsالنماذج قطعت Bootstarp شوطاً مميزاً في استخدام النماذج والتي تحتوي على العديد من classes الخاصة بتزيينها يعد استخدام النماذج في Foundation أمراً أقل تميزاً لأنها لا زالت تعتمد النظام grid في رسم النماذج
Menusالقوائم تعتمد على هيكل قوائم بسيط لا يحتوي على الكثير من التفاصيل يمكنك عمل قوائم بأشكال وأنواع لا حصر لها، مثل off-canvas navigationdrilldown menusvertical dropdownsresponsive menus

 

خلاصة القول أن كلا الهيكلين (Frameworks) يعتبران رائعين، من تجربتي الشخصية أذا كنت بصدد انشاء موقع يحتوي على قوائم بشكل غير اعتيادي (Mega Menus) مثلاً، فأنصحك باستخدام (Foundation Framework). لأنك مع ال (Bootstrap) ستحتاج إلى استخدام مكتبة إضافية اسمها (Yamm). وغير ذلك (إذا كان موقعك لا يعتمد على قوائم مزخرفة) أنصحك باستخدام ال(Bootstrap Framework) فهي سهلة وسريعة وتستطيع أن تجد الملايين حول العالم يستخدمونها.

ملاحظة: لا تحاول استخدامهما معاً ابداُ

 

عن عبد الله صبري

Author Image

شاهد أيضاً

AVG

احصل على عملاق الحماية وتسريع الجهاز AVG خصم 25 بالمئة

جميعنا نواجه مشاكل في الاداء والحماية خصوصا أثناء استخدام ويندوز او ماك وحتى الاصدار الجديد …

Hello. Add your message here.
خصم ٩٠٪ على جميع الدورات - مرور عام على الانطلاق احصل على العرض