برمجة

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

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

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

 

احمد ناصر

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

اترك تعليقاً

زر الذهاب إلى الأعلى
رجوع
00970599042502
WhatsApp
Telegram
Messenger
Live Chat شات
البريد الإلكتروني
الاستشارات المباشرة
جميع الدورات
خدمات شركتنا
الدعم الفني
تحتاج مساعدة تواصل معي واتساب