يوتيو المبتكر َوَدِّع الـ Bootstrap ... إليك إطارات العمـل هذه أفضـل بكثيـر من " البـوتستـراب " بتجـربـة شخصيـة - يوتيو المبتكر

أحدث المشاركات

Post Top Ad

Post Top Ad

الأحد، 18 نوفمبر 2018

يوتيو المبتكر َوَدِّع الـ Bootstrap ... إليك إطارات العمـل هذه أفضـل بكثيـر من " البـوتستـراب " بتجـربـة شخصيـة

هـل لـديك فكـرة عن حجم المعاناة و كثـرة الأسطـر في الكـود البـرمجي الخاص بتطـويـر واجهات الـويب من أجـل جعـل تطـويـر ستايـل صـورة و ربما بعض الأزرار و Form في السابق ؟ لقـد كان الأمـر مزعجا حقا و مملا كذلك، خصـوصا بضعف الإبـداع و عجز الكثيـرين في كتابـة كـود بـرمجي بإستخـدام الـ CSS يفي بالغـرض، و نحمـد الله على نعمـة التطـور في هذه المجالات، فالـ CSS3 الآن أصبح يـوفـر لنا إستخـداما أيسـر و أسهـل لتصميم الـواجهات و القيام ببعض الـ Animations و التأثيـرات الجذابـة، رغم ذلك، لازال مطـوري واجهات المـواقع يجـدون صعـوبـة في الحصـول على " المثاليـة " في التصميم او التطـويـر، فقـررت بعض الشـركات إنتاج ما يسمى بـ " إطار العمـل " او Framework، و هـو ببساطـة مخطط أزرق يمكنك الإعتماد عليه من أجـل تطـويـر واجهات بشكـل أفضـل و أسهل. 
لكن مشكلـة إستخـدام إطارات العمـل هـو التشابه، فإستخـدام إطار عمـل الـ Bootstrap على سبيـل المثال الذي يـوفـر لك أزرارا بشكـل واحـد مع تغييـر لخلفيـة الزر، سيجعـل من كـل المـواقع التي تستخـدم هذا الإطار تستخـدم نفس ستايـل الزر، و سنجـد أنفسنا في تقليـد لمـواقع اخـرى ... الأمـر أشبه بمحاولـة الهـرب من صعـوبـة التصميم لنسقط في حفـرة الإبتذال و التقليـد. 
لذلك من الجيـد أن نغيـر قليلا و أحيانا و من مشـروع لآخـر إطارات العمـل المستخـدمـة من أجـل تحصيـل نتائج مختلفـة من حيث الـواجهـة، و لكن مبـدأ إطار العمـل ضـروري من أجـل الحصـول على تصميم أسـرع و أسهل، إلا انه يمكن تجنب التشابه بين المشاريع بإستخـدام إطارات أخـرى ربما أفضـل من البـوتستـراب الشهيـر من ناحيـة الـواجهـة، و أفضله منه كذلك من ناحيـة الـ UI/UX.
لقـد إستخـدمت شخصيا مجمـوعـة من إطارات العمـل سـواء من أجـل تجـربتهـا و صناعـة واجهات بسيطـة، او من أجـل العمـل بهـا في مشاريع حقيقيـة، و قـد إنـدهشت بقـدراتهـا و أفضليتهـا عن البـوتستـراب، فلعـل أفضـل ما في البـوتستـراب هـو شهـرته لا أكثـر، و اليـوم أشارك معك هذه الإطارات و خـواصهـا و كـل متعلقاتهـا و لما يجب عليك إستخـدامهـا بناءََ عن تجـربـة شخصيـة.

- إطار UIKIT : 



لقـد حظيت بتجـربـة رائعـة بإستخـدام هذا الإطار، و قـد كان له الفضـل في تطـويـر مهاراتي كذلك و وجهـة نظـري نحـو واجهات مـواقع أفضل، يأتي إطار العمـل UIKIT بالعـديـد من الخصائص او الـ Components التي يمكنك إستخـدامهـا في تطـويـر صفحـة ويب إحتـرافيـة إبتـداءََ من الـ  Headings مـرورا بالـ Buttons و الـ Forms الى الـ Cards و الـ Modals و الـ Sliders، الإطار سهـل التـركيب و يـدعم كذلك التضمين من خلال الـ Package Manager او مـدراء الحزم مثـل الـ NPM، الستايـل الذي يـوفـره لك إطار العمـل هذا قـريب قليلا للـ Material Design، كما يأتي بنظام Grid جميـل و سهـل الإستخـدام شبيه بالبـوتستـراب مع بعض التغييـرات الأخـرى، يـدعم أيضا كلا من الـ Sass و الـ Less، و هما خاصيتين لم يتم إضافتهما لإطار البـوتستـراب الى حين النسخـة الـرابعـة و الأخيـرة من هذا الإطار، يـدعم اللغـة العـربيـة كذلك و له حزمـة icons مختصـة تغنيك عن الـ Glyph icons المـوجـودة في البـوتستـراب او الـ Fontawesome الشهيـرة كذلك، إطار اقـل ما يمكنني ان اقـول عنه انه جـد إحتـرافي و سيمكنك من بناء واجهات إحتـرافيـة كذلك، يمكنك الإطلاع على الإطار أكثـر من هنا .


- إطار MDBoostrap : 


َوَدِّع الـ Bootstrap ...  إليك إطارات العمـل هذه أفضـل بكثيـر من " البـوتستـراب " بتجـربـة شخصيـة

لا تحب التغييـر كثيـرا ؟ نقتـرح عليك أيضا إطار MDBoostrap و هـو إختصار لعبارة Material Design Bootstrap، يسمح لك هذا الإطار بصناعـة واجهات المـواقع بالإعتماد بشكـل كبيـر على د و كلاسات البـوتستـراب الأساسيـة مع بعض الإضافات الجـديـدة التي إقتبسهـا الإطار من  الـ Material Design مثـل ستايـل الـ Gradient و أيضا الـ Floating Action Buttons و هي خـواص لا نـراهـا الا في الإطارات المتعلقـة بالـ Material Design ( سنـوفـر لك نمـوذجا في هذا المقال أيضا )، يـوفـر لك هذا الإطار كذلك العـديـد من الأشكال و الألـوان و الزركشات الجـديـدة التي يمكنك إستخـدامها، الإطار إحتـرافي و جيـد و إستخـدمته مـرة واحـدة و لم أجـرأ على إستخـدامه مـرة أخـرى لسبب واحـد، و هـو أن هذا الإطار ثقيـل نسبيا مقارنـة مع أقـرانه من الإطارات، لذلك أن كنت تسعى للمـوازنـة بين سـرعـة المـوقع و الستايـل الجميـل فهذا الإطار ليس المناسب، هـو إطار يـوفـر شكلا جذابا لا نقاش في هذا، لكن حجمه لا يسمح لك بصناعـة مـوقع سـريع و خفيف في التصفح. يمكنك الإطلاع على هذا الإطار من هنا .

إقـرأ أيضا : إليك قائمـة بأفضـل مكتبات و إطارات الـ Javascript و الـ Css المختارة لك لشهـر نـوفمبـر

- إطار العمـل Bulma : 


َوَدِّع الـ Bootstrap ...  إليك إطارات العمـل هذه أفضـل بكثيـر من " البـوتستـراب " بتجـربـة شخصيـة


واحـد من أخف إطارات العمـل التي ستجـربهـا يـوما، مبني كليا على الـ Flex box و مفتـوح المصـدر أيضا، يـوفـر لك إطار Bulma واحـدا من أفضـل خـواص الـ Grid على الإطلاق، سـواء الأوتـوماتيكيـة او المحـددة ( أي Grid تقـوم أنت بإختيار أبعادهـا و حـدودها، او اوتـوماتيكيـة يقـوم بتحـديـد الأبعاد تلقائيا بالإعتماد على حجم الأقسام المـوجـودة في الـ Row )، يـوفـر ستايلا لا بأس به من ناحيـة الشكل، يـوفـر لك عناصـر و Components عـديـدة أيضا و جاهزة للإستخـدام المباشـر مثـل الـ  Navbar او الـ Cards و كذا الـ Paginations و الـ Modal و العـديـد من العناصـر، يمكن إبتكار و صناعـة مـواقع ويب متجاوبـة كليا بإستخـدام إطار Bulma أيضا، يمكن التحكم في كـل عناصـر الصفحـة و تزيينهـا بكلاسات هذا الإطار، و يمكن التعـديـل على أي عنصـر و إضافـة او حذف خـواص حسب الحاجـة، يمكنك الإطلاع على الإطار أكثـر من هنا .

إقـرأ أيضا : إليك 7 إطارات عمـل (Framworks) مخصصـة لصناعـة المـواقع عليك معـرفتها

- إطار Semantic UI : 


َوَدِّع الـ Bootstrap ...  إليك إطارات العمـل هذه أفضـل بكثيـر من " البـوتستـراب " بتجـربـة شخصيـة


نعم، لـربما حزرت ان إطار Semantic UI سيكـون ضمن هذا المقال، فهـو واحـد من أشهـر إطارات العمـل الخاصـة بتطـويـر الـواجهات، يتضمن إطار Semantic العـديـد من الخـواص، دعـونا نبـدأ بالـ Components او العناصـر، إذ يتضمن هذا الإطار تقـريبا كما هائلا منهـا أكثـر من أي إطار اخـر في هذا المقال، بـدايـة من الأزرار الى الـ Radiobuttons مـرورا بالصـور و الـ Forms و الـ Cards و أي عنصـر ستحتاجه في الصفحـة لا بـد و أن تجـد إطار Semantic قـد حضـر لك مسبقا الستايـل الخاص به، الجميـل في إطار Semantic كذلك إمكانيـة تضمينه في مشاريع جاهزة مسبقا بكـل سهـولـة عن طـريق مـديـر الحزم أيضا، فسـواء كان مشـروعك مبني على الـ Vuejs او Angular او حتى Codeigniter، فبنقـرة زر واحـدة يمكن تضمين هذا الإطار، و ليس تضمينه فقط بـل تهيئته أيضا تتماشى مع المشـروع إذ يمكن إستخـدام الـ Sass بـدل بالـ CSS في التعامـل معه، لكن كـل هذا لا يأتي بضـريبـة مجانيـة، فأيضا الإطار ليس خفيفا تلك الخفـة التي تسمح لك بصناعـة مـوقع سـريع التصفح، لكن يمكن إضافـة بعض الخـواص في المشـروع لجعله كذلك، مثـل تضمين الـ Lazy Load مثلا. للإطلاع على مكـونات هذا الإطار يمكنك النقـر هنا .

إقـرأ أيضا : تعـرف على 5 إطارات عمـل للجافاسكـريبت لصناعـة تطبيقات الأنـدرويـد و iOS بإحتـرافيـة

- إطار Materialize : 


َوَدِّع الـ Bootstrap ...  إليك إطارات العمـل هذه أفضـل بكثيـر من " البـوتستـراب " بتجـربـة شخصيـة

و نختم معك بإطار Materialize، أفضـل هذا الإطار لصناعـة صفحات الـويب الخفيفـة و الظـريفـة، إستخـدمته في أحـد الأيام لصناعـة صفحـة ويب شبيهـة بمنصـة Google Keep لحفظ المـواعيـد و جـدولتها، بالنسبـة للإستخـدام الكبيـر في المشاريع الكبـرى قـد تجـد بعض المشاكـل في إستخـدامه، أولا الـ Material Design الذي تـوفـره لك هذه المنصـة لا يلائم الـويب بشكـل كبيـر، قـد يلائم تطبيق أنـدرويـد بشكـل أفضل، كما انه لا تـوفـر لك كما كبيـرا من الـ Components و الخصائص، و لـربما إستخـدامي لهـا كان من أجـل الـ Cards فقط ، تـوفـر لك عـددا لا بأس به من العناصـر مثـل Nav و الأزرار و غيـرها، لكن لا يـوجـد الكثيـر، الإطار خفيف جـدا و يمكن ان يتماشى مع إطار عمـل آخـر و هذا هـو أفضـل إستخـدام له، بحيث يمكنك إستخـدام إطار Materialize مع إطار UIKIT مثلا لتحصـل على مشـروع ويب متكامـل من ناحيـة الـديزاين و الهيئة، غيـر ذلك فإستخـدمه فقط لصناعـة الصفحات البسيطـة، يمكنك الإطلاع على هذا الإطار من هنا .

ليست هناك تعليقات:

إرسال تعليق

Post Top Ad

تواصل معنا

أكثر من 600,000+ يتابعون موقعنا عبر وسائل التواصل الإجتماعي إنظم إلينا الآن

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *

عن الموقع

author يوتيو المبتكر <<  نقوم بتقديـم شروحـات ومقالات وبرامج للويـندوز وتطبيقـات لنظام الاندرويـد وحلقـات .…! …!

تعرف على المزيد ←

نموذج الاتصال

الاسم

بريد إلكتروني *

رسالة *