الأحد. يوليو 21st, 2019

واحة المطورين

أهم المواضيع التي تخص المطورين والمبرمجين العرب

7 أدوات أساسية يحتاجها كل مصمم مواقع انترنت

1 min read
free-website-design-tools

free-website-design-tools

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

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

Sublime Text
sublime

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

يكمن سر نجاح Sublime المدار من قبل فريق تطوير من شخص واحد في المجموعة الواسعة من اختصارات لوحة المفاتيح للبرنامج – مثل القدرة على إجراء التحرير المتزامن (إجراء نفس التغييرات التفاعلية على مناطق متعددة محددة) وكذلك التنقل السريع إلى الملفات والرموز والخطوط. وعندما تقضي 8 ساعات في استخدام محررك كل يوم ، فإن تلك الثواني القليلة الثمينة المحفوظة لكل عملية تضيف سرعة خيالية في إنجاز المهام البرمجية والتصميمية الموكلة لك.

Chrome Developer Tools
Chrome Developer Tools

ألن يكون رائعًا إذا أمكنك تحرير HTML و CSS في الوقت الفعلي ، أو تصحيح JavaScript ، كل ذلك أثناء عرض شامل لموقع الويب الخاص بك؟

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

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

jQuery
jQuery

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

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

وقد نجحت بشكل واضح في السيطرة على مكتبات الجافا سكربت الاخرى – كانت jQuery مكتبة جافا سكريبت الأكثر شعبية في عام 2015 ، مع التثبيت على 65 ٪ من أفضل 10 ملايين من المواقع الأكثر شهرة على الويب.

GitHub
GitHub

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

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

Twitter Bootstrap
Twitter Bootstrap

تُعد أطر عمل واجهة المستخدم محاولة لتوفير الوقت من خلال تامين عدد كبير من الاكواد التي صممت سابقا لتطفي تاثير css معين وذلك من خلال استخلاص العناصر المشتركة في وحدات قابلة لإعادة الاستخدام – مما يعني أن المطورين يمكنهم انتقاء واستخدام عناصر التطبيقات الجديدة بسرعة وسهولة.

تُعد أطر عمل واجهة المستخدم محاولة لتوفير الوقت من خلال تامين عدد كبير من الاكواد التي صممت سابقا لتطفي تاثير css معين وذلك من خلال استخلاص العناصر المشتركة في وحدات قابلة لإعادة الاستخدام – مما يعني أن المطورين يمكنهم انتقاء واستخدام عناصر التطبيقات الجديدة بسرعة وسهولة.

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

Angular.js
Angular.js

HTML عادة ما يكون حجر الزاوية في صندوق أدوات أي مطور ويب، ولكن لديه ما يراه الكثيرون أنه خلل خطير: لم يكن مصممًا لإدارة طرق العرض الديناميكية.

هذا هو المكان الذي يأتي فيه AngularJS ، وهو إطار تطبيق ويب مفتوح المصدر. يتيح لك AngularJS ، الذي طورته Google ، تمديد بناء جملة HTML للتطبيق الخاص بك ، مما ينتج عنه بيئة أكثر تعبيرًا وقراءةً وسرعة في تطوير ما كان من الممكن بناءه باستخدام HTML وحده.

لا يخلو المشروع من منتقديه: يشعر البعض أن هذا النوع من ربط البيانات ينتج عن رمز فوضوي غير مفصول ، لكن ما زلنا نعتقد أنه مهارة لا تقدر بثمن في مجموعة أدوات تصميم صفحات الانترنت الخاصة بك.

Sass

أدوات تطوير الويب التي توفر الوقت هي أفضل صديق لك ومن أول الأشياء التي ستتعلمها عن الكود هو أنه يجب أن يكون جافًا (“لا تكرر نفسك”). الشيء الثاني الذي ربما تتعلمه هو أن CSS عادةً ليست جافة جدًا.

أدخل عالم المعالج المسبق لـ CSS ، وهي أداة ستساعدك في كتابة رمز يمكن الحفاظ عليه في المستقبل ، مع تقليل مقدار CSS الذي يجب عليك كتابته (الاحتفاظ به جافًا).

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

بالختام ياعزيز المصمم

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

More Stories

1 thought on “7 أدوات أساسية يحتاجها كل مصمم مواقع انترنت

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

IT Department