Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UI Design
Webdesign

10 أدوات لتحاول بمشروع  الويب المقبل لديك 

by
Difficulty:BeginnerLength:MediumLanguages:

Arabic (العربية/عربي) translation by Maryam Abbas (you can also view the original English article)

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

1. ان سبيكت

ان سبيكت هو التطبيق الذي يزامن تمامًا بين ملفات التصميم والأدوات. إنه يساعدك على الحفاظ على ملفات التصميم بسهولة بين Sketch، و Inspect، و InVision مع الحفاظ عليها كلها متزامنة بنقرة واحدة.

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

للبدء، ستحتاج إلى Sketch. بمجرد تثبيت Sketch، ستحتاج أيضًا إلى Craft. Craft عبارة عن مجموعة من المكونات الإضافية التي تتيح لك التصميم  مع وضع البيانات الحقيقية في الاعتبار وتسمح بإجراء المزامنة بين InVision و Sketch. أنشئ مشروعًا جديدًا من InVision ثم عد للخلف إلى Sketch. أود أيضًا أن أقترح إلقاء نظرة على InVision Studio.

2. النموذج الأصلي

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

كل التصميم الذي تم إعداده بنموذج أصلي يولد شيفرة مناسبًة للمطورين لتسهيل عملية النقل.

تكون التغييرات والتحديثات فورية ويمكن مشاركتها بسهولة عن طريق السماح للمستخدمين بالتصدير إلى CSS أو إلى Sketch. لديك أيضا القدرة على تحميل مجموعة الخطوط التي اخترتها المستخدمة للتصميم الخاص بك. احفظ المشاريع باستخدام حساب Google الخاص بك وعد إلى عملك في أي وقت.

3. Probot

إذا كنت تستخدم التحكم في الإصدار، أو العمل في مشروعات مفتوحة المصدر، أو إجراء مراجعة التعليمات البرمجية بين أعضاء الفريق، فقد يكون Probot ملاكك المتخفي. Probot عبارة عن مجموعة تطبيقات تعتمد على المجتمع لأتمتة وتحسين سير عملك باستخدام GitHub.

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

ركز على ما ترغب في بنائه. واجهة برمجية لتطبيقات مباشرة (مبنية على أحدث ميزات جافا سكريبت ES6) تخفي التفاصيل التي لا تهتم بها باستخدام GitHub و Node.js.

4. PSD للرسم

هل سبق لك أن تلقيت PSD وتمنيت أن تتمكن من تحويله إلى ملف Sketch؟ حسناً أنت محظوظ. Avocode (أداة ممتعة أخرى لمحاولة كذلك) كانت لطيفة بما يكفي لإعطاء المجتمع أداة مجانية للقيام بهذه المهمة. استعرض للوصول إلى عنوان URL وتحميل PSD الخاص بك. في ما يلي خريطة طريق وقائمة بالميزات التي تدعمها عملية التحويل.

ضع في اعتبارك أيضًا أن Photoshop و Sketch هما أدوات مختلفة بشكل ملحوظ. يمكنها فقط تحويل عناصر التصميم التي يمكن إنشاؤها في كل من تطبيقات التصميم هذه ؛ كروكي و فوتوشوب. لا يمكن تحويل ميزات Photoshop التي لا يتم تضمينها في تطبيق Sketch أو تقليدها.

5. اختبار سرعة موقع الويب كلاودينري

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

يمكن مشاركة النتائج وبمجرد اكتمال التحليل، يمكن تنزيل كل صورة مشار إليها في نتائجك في شكل محسن أو بدائل أخرى للتنسيق مثل webp أو jpeg-xr.

لمعرفة المزيد حول هذه الخدمة، توجه إلى الصفحة الخاصة بها. هناك أيضًا خدمة CloudN CDN التي قد ترغب في التحقق منها أيضًا.

6. أنيميستا

أنيميستا هو المكان الذي يمكنك اللعب فيه باستخدام مجموعة من الرسوم  المتحركة css المعدة مسبقاً، وتعديلها والحصول فقط على تلك التي ستستخدمها بالفعل. انسخ الشفرة التي تم إنشاؤها أو نزّل ملف CSS واحدًا لاستخدامه.

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

7. أنماط البطل

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

يسمح لك التطبيق حاليًا بالاختيار بين 87 نمطًا مختلفًا ويحتوي على مجموعة متنوعة تمامًا نظرًا للكمية الصغيرة من الأنماط المتوفرة.

يمكنك أيضًا تنزيل svg غير النمطي كما يمكنك أن ترى من مقتطف الشيفرة أعلاه. هذا مثالي للأشخاص الذين لا يرغبون في استخدام خيار القاعدة 64 أو يرغبون في تخصيص النمط بشكل أكبر.

8. كوشن

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

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

  • جدولة المشروع
  • تتبع النفقات
  • تصدير جدول البيانات
  • الفواتير
  • تتبع الفاتورة
  • عرض الدخل الشهري
  • و المزيد…

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

9. لانشي

لانشي هي نافذة مشروطة يمكن الوصول إليها. إنها أيضًا jQuery مجاني و بحجم 27.7 كيلوبايت فقط.

هناك اثنتين من الميزات البارزة فيما يتعلق بهذه الأداة هي:

  1. عند التشغيل، ينتقل تركيز لوحة المفاتيح إلى حاوية الإطار المشروط
  2. يتم وصف الإطار المشروط عبر عنوان مشروط اختياري
  3. يعوض تركيز لوحة المفاتيح داخل الوسائط عندما تكون نشطة / مرئية
  4. يغلق النافذة بالضغط على مفتاح esc
  5. يغلق النافذة بنقرة  فوق الماوس
  6. يعين تركيز لوحة المفاتيح مرة أخرى على عنصر المشغل في اغلاق النافذة
  7. إضافة ضوابط التحكم المخصصة الخاصة بك!
  8. إضافة عناصر التحكم المخصصة الخاصة بك والتي ترسل التركيز إلى مكان آخر على الصفحة!
  9. حد شفاف لمواضيع Windows ذات التباين العالي

يحتوي لونشي أيضًا على العديد من فئات CSS المتوفرة على العناصر التي تم إنشاؤها للتخصيص. تحقق من ملف style.scss لأسماء الفئات ومثالًا على كيفية رغبتك في تصميم الإطارات الخاصة بك. المشروع متاح أيضًا كحزمة npm: npm i launchy-modal-window. حقا نافذة نموذج يمكن الوصول إليها.

10. فورمكور

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

هناك عدد من الميزات الأخرى المدمجة مثل تطبيع السلوك لحقول النموذج <  نمط الدخل ="رقم" >، ويعمل على فرض سمة الطول الاعظمي ، كما يعمل حول الأخطاء مع < نمط الدخل ="رقم" >  في سطح المكتب Safari 6 و Firefox على سبيل المثال لا الحصر.

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

استنتاج

الآن بعد أن وصلنا إلى نهاية قائمتنا ما هي أفكارك؟ هل أثار أحدها انتباهك وأشعل إرادتك لتجربتها؟ هل أنت غير متفائل ولديك أشياء أخرى لتقترحها؟ أخبرنا في التعليقات أدناه. بناء ويب سعيد الجميع!   

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.