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

احمد ناصر يوليو 10, 2016 برمجة اضف تعليق 22 زيارة

اذا كنت عزيزي القارئ ممن سبق لهم تصميم المواقع أو البرمجة بشكل عام، فلا بد أن مصطلح (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) فهي سهلة وسريعة وتستطيع أن تجد الملايين حول العالم يستخدمونها.

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

عن احمد ناصر

أخوكم احمد حماد المعروف ب (أحمد ناصر) حاصل على شهادة البكالوريوس في علم الحاسوب (البرمجة وهندسة البرمجيات) من جامعة بيرزيت ومبرمج ومطور انظمة مرخص من شركة سيلز فورس كلاود العالمية، يعمل في مجال برمجة وتسويق التطبيقات والالعاب منذ اكثر من 5 سنوات وقام بنشر وتصميم وبرمجة العديد من الالعاب لمنصات الاندرويد والايفون والفيس بوك واليونتي ولديه اكثر من 20 لعبة مرفوعة على المتاجر المذكورة. يعمل حاليا كمستشار تقني في عدة شركات كشركة انترجوي، وريتش وشركتنا الخاصة أحمد ناصر للحلول الشاملة ويقوم بتقديم خدماته التدريبية في عدد من المعاهد في الشرق الاوسط ويختص في تطوير الكادر التقني العربي في مجالات الويب والموبايل والالعاب والتسويق الالكتروني، سجل معه في دوراته باللغة الانجليزية والعربية اكثر من 10000 طالب وحصل على تقييم من 4.8 الى 5 نجوم في مختلف الدورات في تصميم وبرمجة الالعاب التي يمكنك مشاهدتها على موقعنا، يسرنا ان ننقل خبرة السنوات اليكم في ساعات قليلة وفي غضون بضعة اسابيع ستملك جميع الخبرة اللازمة لتكون مطور العاب و تطبيقات محترف ومستقل وأكثر. قبل 12 سنة تقريبا بدأت باستخدام برنامج الفوتوشوب وأحسست ان لي ميولا كبيرا نحو عالم التصميم فتعلمت الفلاش وبرامج الملتميديا وكان لي برامج تعليمية ومسابقات قمت بتصميمها لمختلف النوادي والجمعيات وبعض المؤسسات حيث انني عملت في مجال التصميم والطباعة لفترة جيدة في حياتي كمصمم، بعدها انتقلت الى تعلم البرمجة بداية من لغة السي والفيجوال بيسك مرورا بتعلم اكثر من 18 لغة برمجة مختلفة شكلت لي كمهووس بالبرمجة قدرة كبيرة على الربط بين جميع هذه اللغات لعمل بعض البرامج المختلفة البنية. عملت لعدة سنوات مصمم ومبرمج لبرامج وتطبيقات الويب لعدد من وكالات الاخبار والمواقع التجارية الالكترونية في الشرق الاوسط وأمريكا، بعدها قررت الانتقال الى برمجة تطبيقات الاندرويد والايفون وعملت عدة تطبيقات كبيرة لزبائن في الامارات والمملكة المتحدة وأمريكا. قررت بعدها الانتقال الى مجال برمجة الالعاب وخصوصا اليونتي لانه كان لي ميول كبير في ربط كل الخبرات السابقة الى مجال اكثر من رائع وهو مجال الالعاب الالكترونية لاجهزة الموبايل والذي حقق مبيعات اكثر من 13 مليار دولار في 2014 وحدها، قمت خلال اكثر من ثلاث سنوات من العمل على منصة اليونتي بتطوير اكثر من 20 لعبة لمختلف الزبائن حول العالم وقمت بتصميم العاب والعمل على تسويقها بنفس الوقت الامر الذي اكسبني خبرة كبيرة في مجال بيع الالعاب وتسويقها بالاضافة الى برمجتها وتصميمها. وجدت ان هناك صعوبة لدى فئة كبيرة في تعلم البرمجة لذلك قررت البدء بتعليم وتدريس البرمجة عن طريق الالعاب لعدد كبير من الطلاب ليستفيدوا ويحققوا نجاحهم واستقلاليتهم ولنقل تجربتي الشخصية لهم فقررت البدء بتدريس البرمجة واضعا هدفا واضحا نصب عيني وهو: تعلم البرمجة والتصميم لا ينبغي ان يكون صعبا، مقلقا او معقدا لسوء الحظ، العديد من الكورسات التعليمية تمشي مع الطالب بسرعة كبيرة، يفترضون ان الطالب يكون لديه الخبرة التقنية المتقدمة او لا يقدمون اية مهارات عملية.