أسئلة تقنية إنترنت الويب برمجة وتصميم المواقع تقنيات منوعة تقنية منوعات تقنية

30 من أدوات تصميم الويب لتسريع سير العمل في 2018

  • بواسطة
  • 28 يوليو، 2018
30 من أدوات تصميم الويب لتسريع سير العمل في 2018

30 من أدوات تصميم الويب لتسريع سير العمل في 2018

توفير الوقت والطاقة والميزانية بمساعدة أدوات تصميم الويب هذه.

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

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

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

Sketch

01. Sketch

يستبدل Sketch Photoshop بشكل سريع كأداة تصميم واجهة المستخدم المفضلة
يستبدل Sketch Photoshop بشكل سريع كأداة تصميم واجهة المستخدم المفضلة

يستبدل Sketch Photoshop بشكل سريع كأداة تصميم واجهة المستخدم المفضلة

سنبدأ بأكثرها وضوحا. نعم ، نحن نعلم أن الجميع قد سمعوا عن أداة تصميم واجهة المستخدم Sketch Bohemian Coding ، ولكن يبدو أنه لا يزال هناك الكثير من مصممي الويب الذين يعتمدون على تصميم Photoshop لتصميم واجهة المستخدم (وهذا على الرغم من إصدار Adobe XD ، والنماذج الأولية الجديدة اللامعة ل Adobe و wireframing أداة واحدة من أحدث الإضافات إلى Creative Cloud والتي تأتي في المرتبة الثانية في هذه القائمة).

يعتقد روري بيري ، المدير الإبداعي في Superrb ، أن استخدام Photoshop لتصميم الويب هو خطأ. قام بالتبديل إلى Sketch في عام 2017 ، ويوصي به بشدة. بعد أن كان مستخدمًا لـ Photoshop لأكثر من 10 سنوات ، كان من الصعب تغيير شيء جديد وتعلمه ، كما يقول. ولكن بعد أول يوم من استخدام Sketch ، لم يكن هناك أي مظهر للخلف. أنا إجمالي تحويل.

يقدم عددا من الأسباب. ويضيف: مقارنةً بـ Photoshop ، فإن فرز جميع المستندات التي تملكها وجعل التنقيات على Sketch أسهل بكثير“. يحتوي Sketch على مستندات صغيرة بينما يحتوي Photoshop على مستندات كبيرة. نظرًا لكونه تطبيقًا معتمدًا على المتجهات ، فإن أحجام الملفات أصغر بشكل كبير مقارنة ببرنامج Photoshop.

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

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

02. Adobe XD

يوجد لدى Adobe XD منافسة تصميمية خفيفة تسمح لك بالمفهوم والنموذج بسهولة
يوجد لدى Adobe XD منافسة تصميمية خفيفة تسمح لك بالمفهوم والنموذج بسهولة

يوجد لدى Adobe XD منافسة تصميمية خفيفة تسمح لك بالمفهوم والنموذج بسهولة

لدى Adobe الآن تصميم ناقل خاص بها وأداة wireframing ، Adobe XD. قمنا بمراجعة النسخة التجريبية في شهر مايو ، وتم إصدارها رسميًا في أكتوبر.

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

أندريه روبو ، مدير التصميم في Robu Studio في برشلونة ، هو من بين المعجبين به. يقول: لا تحل محل XD Sketch بعد ، ولكن بالنسبة إلى نماذج وهمية سريعة ، فإنها رائعة“. إنها واجهة بسيطة جدًا ، مع الكثير من الصور المحملة ، وممتازة بالنسبة ل moodboards. يُعدّ إنشاء النماذج أمرًا مفيدًا جدًا لعرض العملاء كيفية عمل الأشياء ، خاصةً لأنك تستطيع دفع المحتوى عبر الإنترنت مباشرة. كما أنني أحب أيضًا إمكانية نسخ ولصق أشياء من تطبيقات Adobe الأخرى.

بشكل حاسم ، يتكامل Adobe XD مع بقية Creative Cloud. كما يوصي إيليس روجرز ، مصمم الرسوم البيانية في Receptional Ltd https://www.receptional.com ، بذلك. إن Sketch رائع لتصميم مطور ويب ، لأنك تعمل بقيم في برنامج مصمم خصيصًا لتصميم مواقع الويب والتطبيقات ، كما يقول. لكن أكبر القيود بالنسبة لي هي أنها كانت متاحة فقط على نظام التشغيل Mac ، مما جعل من الصعب مشاركة ملفات Sketch لمطوري / مصممي الويب الذين لا يستخدمون OS X. تعني مشاركة ملفات Sketch للتطوير برامج / تحويلات إضافية ، أو العمل من ملفات JPG المنبثقة التي تسببت في الكثير من الحدود.

نظرًا لأن المستخدم واجهة المستخدم لبرنامج Adobe Photoshop و Illustrator ، فإن واجهة مستخدم Adobe XD شعرت بأنها مألوفة ، لذا لم يكن هناك منحنى تعلم حقيقي لاستخدامه. والآن بعد بضعة أسابيع من التجارب ، هذه هي الأداة الوحيدة التي أستخدمها الآن لكل تصميم الويب ، وتصميم التطبيقات ، والنماذج الأولية أو wireframes”.

كما يثني روجرز على قدرة XD على استخدام مكتبات Adobe لاستيراد أي أصول من Photoshop أو Illustrator بسرعة ، لأن هذا يجعل مشاريع التعاون تعمل بسرعة أكبر.

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

03. Figma

Figma هي أداة تصميم واجهة تتيح لمصممين متعددين التعاون في الوقت الفعلي
Figma هي أداة تصميم واجهة تتيح لمصممين متعددين التعاون في الوقت الفعلي

Figma هي أداة تصميم واجهة تتيح لمصممين متعددين التعاون في الوقت الفعلي. وهي متاحة في المتصفح أو على نظام التشغيل Windows أو Mac أو Linux ، وتتوفر إصدارات مجانية ومدفوعة على حدٍ سواء بناءً على ما تستخدمه من أجله.

فيما يلي بعض الميزات البارزة:

يوضح المصمم Benjamin Read لدى شركة Figma جهاز USP مماثل للرسم البياني باستثناء النظام الأساسي المتقاطع“. لقد استخدمتها مؤخرًا لإنشاء رمزين لمقال ننشره على موقعنا على الويب ووجدنا سير العمل سلسًا بشكل لا يصدق. لم يكن لديّ وقت للتعلم ولدي ميزة إضافية تتمثل في التعاون: يمكنك مشاركة الرسومات مع الآخرين داخل التطبيق.

لقد كنت أحاول الانتقال إلى Linux لعملي وأحيانًا نستخدم Windows ، لذا ، فإن Figma منطقي بالنسبة لي من وجهة نظر عملية ، يضيف. على سبيل المقارنة لقد وجدت العديد من الأدوات لمنصات أخرى قصيرة“.

الكاتب والمصور الفني ديفيد إيستوود ، الذي يعمل في Co-o Electrical ، لديه أيضاً أشياء جيدة ليقولها حول Figma. أوصينا Figma من قبل وكالة التنمية على شبكة الإنترنت لدينا واستخدامها للاسلكية إطار الصفحة المقصودة ، يشرح. شملت هذه التغييرات المقترحة على الصفحة الرئيسية وصفحة مبيعات محددة ، لا سيما حول الجمعة السوداء. لقد كانت أيضًا أداة مفيدة حقًا عندما احتجنا إلى الإسراع من MVTs ؛ في بعض الأحيان إضافات صغيرة إلى تخطيط موجود. نحن نحب أنه يمكنك إنشاء تصميمات لسطح المكتب والكمبيوتر اللوحي والجوال بسرعة

04. Affinity Designer

أصبح برنامج Serif’s Affinity بديلاً عن Creative Suite بسرعة

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

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

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

عندما يتعلق الأمر بالتصميم ، تبدو واجهة المستخدم مألوفة. عند الانتقال من Photoshop ، يبدو أن كل شخص يريد البدء من جديد ، مما قد يشكل تحديًا حقيقيًا. ما فعله Affinity هو الحفاظ على التصميم مألوفًا ، مع تشديد كل شيء وإخفاء الانحرافات كنت قادرا على القفز مباشرة في والحصول على تصميم “.

بشكل عام ، يبدو أن Affinity قد يكون منافسًا حقيقيًا لـ Photoshop و Illustrator و Sketch. وبمقابل 48.99 جنيهًا إسترلينيًا فقط ، إنها صفقة حقيقية!”

05. Anime

استمتع بتطبيقاتك باستخدام محرك الرسوم المتحركة هذا
استمتع بتطبيقاتك باستخدام محرك الرسوم المتحركة هذا

استمتع بتطبيقاتك باستخدام محرك الرسوم المتحركة هذا

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

في ما يلي مثال لشرح واجهة برمجة التطبيقات البسيطة للغاية:

var myAnimation = anime({
targets: ['.box1', '.box2'],
translateX: '5rem',
rotate: 180,
duration: 3000,
loop: true
});

يحدد رمزه الأشياء التي تريد تحريكها ، بالإضافة إلى تفاصيل الرسوم المتحركة. تتيح لك واجهة برمجة التطبيقات (API) استهداف العناصر باستخدام محددات CSS وعناصر DOM أو حتى كائنات JavaScript.

قام الكاتب ، جوليان غارنييه ، بتقديم مجموعة CodePen التي توضح ما يمكن أن تقوم به المكتبة ، بالإضافة إلى توثيق شامل على GitHub.

06. Avocode

يساعدك كود Avocode في برمجة مواقع الويب أو التطبيقات من تصميمات Photoshop أو Sketch
يساعدك كود Avocode في برمجة مواقع الويب أو التطبيقات من تصميمات Photoshop أو Sketch

يساعدك كود Avocode في برمجة مواقع الويب أو التطبيقات من تصميمات Photoshop أو Sketch

vocode يجعل من السهل للغاية لمطوري الواجهة الأمامية أن يقوموا برمز مواقع الويب أو التطبيقات من تصاميم Photoshop أو Sketch. لقد تم بناؤه من قبل نفس الفريق الذي جلب لنا CSS Hat و PNG Hat ، لذلك ليس من المفاجئ أن يكونوا قد قاموا بعملية التصدير خطوة إضافية هنا. على الرغم من أن التطبيقات السابقة سمحت لك بتصدير الأصول ، إلا أن ما يجعل Avocode خاصا حقا هو أنه يمكنك استخدام البرنامج المساعد Photoshop لمزامنة PSD الخاص بك في Avocode بنقرة واحدة فقط.

يقوم Avocode بسرعة بتحليل ملف PSD أو Sketch الخاص بك ويقوم بتحويل كل شيء إلى واجهة مستخدم مصممة بشكل جميل. يمكنك حينئذٍ التحكم الكامل في كيفية تصدير الأصول ، بما في ذلك تصدير SVG كمعيار قياسي.

يمكنك أيضًا النقر على عناصر في التصميم ونسخ الشفرة ولصقها في محرر نصوص من اختيارك. إنه يمنح المستخدمين كل ما يحتاجونه للتشفير معاينة للتصميم ، والوصول إلى جميع الطبقات وأصول التصدير ، كما يقول المؤسس المشارك في Avocode Vu Hoang Anh. أفضل شيء هو أن المطورين لن يحتاجوا إلى Photoshop أو Sketch على الإطلاق. سير العمل الحالي تمتص بالفعل ولهذا السبب أنشأنا Avocode.”

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

07. Zeplin

يقوم برنامج Zeplin بترجمة ملفات Photoshop أو Sketch إلى تطبيق Mac أو Windows أو تطبيق يستند إلى الويب
يقوم برنامج Zeplin بترجمة ملفات Photoshop أو Sketch إلى تطبيق Mac أو Windows أو تطبيق يستند إلى الويب

يقوم برنامج Zeplin بترجمة ملفات Photoshop أو Sketch إلى تطبيق Mac أو Windows أو تطبيق يستند إلى الويب

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

تخفف شركة Zeplin من هذه التجربة المؤلمة من خلال ترجمة ملفات Photoshop أو Sketch إلى تطبيق Mac مجاني أو Windows أو تطبيق يستند إلى الويب. يقول ستيف: إن أفضل ما في الأمر هو أن زيبلين توفر مرجعًا سريعًا للألوان والأبعاد والخطوط من التصميمات الخاصة بك“. حتى أنه يولد CSS وأسلوب الأدلاء. لقد وجدت Zeplin أن يكون توفيرًا كبيرًا في الوقت ، ويبدو أن أصدقائي من مطوري البرامج يحبون ذلك أيضًا.

08. Pattern Lab

عد Pattern Lab Lab أداة تصميم جميلة تعتمد على الأنماط التي ابتكرها
عد Pattern Lab Lab أداة تصميم جميلة تعتمد على الأنماط التي ابتكرها

يُعد Pattern Lab Lab أداة تصميم جميلة تعتمد على الأنماط التي ابتكرها Dave OIsen و Brad Frost. إنها مبنية على مفهوم التصميم الذري ، والذي يقول أنه يجب عليك كسر التصميم الخاص بك إلى أصغر أجزاءه الذرات ودمجها لتشكيل مكونات أكبر قابلة لإعادة الاستخدام الجزيئات والكائنات الحية والتي يمكن بعد ذلك تحويلها إلى قوالب قابلة للاستخدام.

على الرغم من أنها في صميمها مولد موقع ثابت يعمل على تجميع مكونات واجهة المستخدم معًا ، فهناك ما هو أكثر بكثير من مختبر الأنماط. إنها لغة وأداة لا معنى لها ؛ تمكنك من وضع أنماط واجهة المستخدم داخل بعضها البعض وتصميمها باستخدام بيانات ديناميكية ؛ فهو يتميز بأدوات تغيير حجم إطار العرض الخاص بـ device-agnostic لمساعدتك على ضمان استجابة نظام التصميم الخاص بك بشكل كامل؛ وهي قابلة للتوسعة تمامًا بحيث يمكنك التأكد من أنها ستوسع لتلبي احتياجاتك.

09. Vivaldi

في بعض الأحيان ، يمكن أن تكون أفضل أداة شيئًا بسيطًا مثل المتصفح الجديد. Vivaldi هو متصفح ويب سريع وقابل للتخصيص لمستخدمي الطاقة الذين تم بنائهم من قبل بعض الأشخاص الذين بدأوا الأوبرا. تم تصميم Vivaldi مستعرضًا لأصدقائنا باستخدام تقنيات الويب: تم استخدام جافا سكريبت و React لجعل واجهة المستخدم ، جنبًا إلى جنب مع Node.js والكثير من وحدات NPM.

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

10. Canva

Canva هو أداة شعبية لخلق صور وسائل الاعلام الاجتماعية والرسوم البيانية بسرعة
Canva هو أداة شعبية لخلق صور وسائل الاعلام الاجتماعية والرسوم البيانية بسرعة

Canva هو أداة شعبية لخلق صور وسائل الاعلام الاجتماعية والرسوم البيانية بسرعة

هل تريد Mocup مثل رسم بياني للمعلومات بسرعة وسهولة؟ ثم يوصي لورنس هارمر ، مؤسس شركة Solve Web Media ، Canva. وهي عبارة عن أدوات مجانية تستند إلى المتصفح وتستخدمها كل من المصممين وغير المصممين ، لإنشاء رسومات لكل من الطباعة والويب.

يقول هارمر: إن كانفا جيد جدًا لصنع صور جميلة“. الصور هي النافذة في روح موقع الويب الخاص بك ووسائل الإعلام الاجتماعية ، لذا فإن أداة كهذه يمكن أن تكون مفتاح النجاح”.

11. Web design proposal tool

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

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

Beewits لديها خط لطيف في الأدوات لجعل الجانب التجاري من تصميم الويب أسهل ، وهو مولد تصميم تسعير الويب وحساب سعر الساعة. الآن في عام 2018 ، أحضروا تطبيقًا مجانيًا رائعًا آخر: أداة تصميم تصميم الويب الموضحة ذاتيًا.

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

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

12. Site Stacks 

تحقق من أي موقع مع هذة الحزم التكنولوجيا بسرعة وسهولة
تحقق من أي موقع مع هذة الحزم التكنولوجيا بسرعة وسهولة

تحقق من أي موقع مع هذة الحزم التكنولوجيا بسرعة وسهولة

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

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

 13. CodePen Projects 

تتيح لك أداة جديدة إنشاء مواقع ويب داخل CodePen مباشرةً
تتيح لك أداة جديدة إنشاء مواقع ويب داخل CodePen مباشرةً

تتيح لك أداة جديدة إنشاء مواقع ويب داخل CodePen مباشرةً

تأسست شركة CodePen في عام 2012 من قِبل Alex Vazquez و Tim Sabat و Chris Coyier ، وأصبحت أكبر مجتمعات الويب وأكثرها حيوية في اختبار وعرض مقتطفات شفرة HTML و CSS وجافا سكريبت. على مدار السنوات الخمس الماضية ، كان يعمل كمحرر شفرات عبر الإنترنت وبيئة تعلم مفتوحة المصدر ، حيث يمكن للمطورين إنشاء مقتطفات شفرات (“الأقلام“) واختبارها والحصول على التعليقات.

في الآونة الأخيرة ، اتخذت CodePen قفزة كبيرة أخرى إلى الأمام من خلال إطلاق IDE الخاصة (بيئة التطوير المتكاملة) ، CodePen Projects ، والتي تتيح لك إنشاء مواقع الويب في متصفحك.

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

لاحظ أنه على الرغم من أنه يعمل بطريقة مشابهة لمحرر القلم ، فإن CodePen Projects لا تحل محل المقسم ولكنها تجلس إلى جانبه. يمكنك معرفة المزيد عن مشاريع CodePen في هذه التدوينة.

14. Bootstrap

القديم والمفضل لدية بعض التحديثات القوية Bootstrap
القديم والمفضل لدية بعض التحديثات القوية Bootstrap

القديم والمفضل لدية بعض التحديثات القوية Bootstrap

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

أحدث ثورة التشغيل ثورة في التطور ، ولا شك أن إطار العمل في كل مكان سيستمر في تشكيل كيفية بناء الأشياء على الويب.

انخفض الدعم ل IE8 و iOS6

تنتقل ملفات مصدر CSS من Less إلى Sass (“.scss”)

تم التبديل من px إلى rem لوحدات CSS الأساسية

زيادة حجم الخط العام إلى 16 بكسل من 14 بكسل

واضاف لدعم Flexbox في الشبكة

مكون بطاقات شامل شامل لاستبدال المكونات الأقدم

تقريبا جميع المكونات refactored لاستخدام الطبقات دون محدد الأطفال

أحدث ثورة التشغيل ثورة في التطور ، ولا شك أن إطار العمل في كل مكان سيستمر في تشكيل كيفية بناء الأشياء على الويب.

15. ally.js

لا تتغاضى عن إمكانية الوصول - استخدم ally.js
لا تتغاضى عن إمكانية الوصول – استخدم ally.js

لا تتغاضى عن إمكانية الوصول استخدم ally.js

لن تكتمل أية قائمة بأدوات تطوير الويب بدون أداة واحدة على الأقل لإمكانية الوصول. تعد إمكانية الوصول واحدة من تلك الجوانب التي غالباً ما يتم تجاهلها في التصميم والتطوير ، ويمكن لـ ally.js تبسيطها من أجلك.

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

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

16. Type Nugget

تمنحك المزيد من السيطرة علي أنواع النصوص Nugget
تمنحك المزيد من السيطرة علي أنواع النصوص Nugget

تمنحك المزيد من السيطرة علي أنواع النصوص Nugget

التعامل مع طباعة CSS. لا تزال في مرحلة تجريبية مع المزيد من الميزات في الأعمال ، إنها أداة تنضيد عبر الإنترنت تمنحك التحكم الدقيق في أنماط الكتابة.

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

من المفيد أن تسمح لك هذه الأداة بالتسجيل للحصول على حساب وتسجيل الدخول وحفظ تقدمك. بعد تحديد جميع إعداداتك ، يمكنك الضغط على الزر “Generate Code” وسيقوم Type Nugget بإنتاج رابط إلى ورقة أنماط مستضافة على CDN الخاص بها. إذا وجدت طباعة CSS مملة ومتكررة ، فستستفيد كثيرًا من إضافة هذه الأداة إلى سير عملك.

17. ARKit 

يمكنك إنشاء تجارب واقعية معدة لأجهزة iOS 11 باستخدام ARKit من Apple
يمكنك إنشاء تجارب واقعية معدة لأجهزة iOS 11 باستخدام ARKit من Apple

يمكنك إنشاء تجارب واقعية معدة لأجهزة iOS 11 باستخدام ARKit من Apple

الواقع المعزز مزج الأشياء الرقمية والمعلومات مع البيئة المحيطة بك هو الفضاء الذي يولد الكثير من الإثارة في مجتمع الويب والتطبيقات التنمية في الوقت الحالي. ليس أقلها لأنه في شهر يونيو في WWDC17 ، أصدرت شركة آبل ARKit ، وهو إطار عمل جديد يسمح لك بإنشاء تجارب AR بسهولة لأجهزة iPhone و iPad التي تعمل بنظام iOS 11. للبدء ، ما عليك سوى تنزيل iOS 11 وأحدث إصدار من Xcode 9 ، والذي يتضمن iOS 11

18. Vue.js

Vue.js لا تستخدم مكتبات جافا سكريبت؟ مثالية بالنسبة لك
Vue.js لا تستخدم مكتبات جافا سكريبت؟ مثالية بالنسبة لك

Vue.js لا تستخدم مكتبات جافا سكريبت؟ مثالية بالنسبة لك

ما هي قائمة أدوات الويب الجديدة التي ستكون بدون أحدث إطار JavaScript جديد؟ Vue.js ، مثل React ، هو إطار عمل لبناء واجهات المستخدم ، ويستخدم DOM الظاهري. كما يوحي الاسم ، تركز مكتبة Vue الأساسية على طبقة العرض.

انظر إلى مثال رمز ، مأخوذ من مستندات Vue ، والذي يستخدم مدخلات المستخدم ويوضح أناقة المكتبة. سنبدأ باستخدام HTML:

لاحظ معالج v-on المخصص الذي يستدعي أسلوب reverseMessage. ها هنا جافا سكريبت:

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

</pre>
<div id="example">
<p>{{ message }}</p>
<button
v-on:click="reverseMessage">Reverse
Message</button>
</div>
var myApp = new Vue({
el: '#example',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').
reverse().join('')}}});
<pre>

19. Hologram 

يتيح لك تطبيق Mac المبني على A-Frame إنشاء تجارب WebVR دون الحاجة إلى التعليمة البرمجية
يتيح لك تطبيق Mac المبني على A-Frame إنشاء تجارب WebVR دون الحاجة إلى التعليمة البرمجية

يتيح لك تطبيق Mac المبني على A-Frame إنشاء تجارب WebVR دون الحاجة إلى التعليمة البرمجية

هو أداة جديدة متكاملة في إنشاء Hologram

WebVR. لا يتطلب تطبيق سطح المكتب المجاني هذا معرفة سابقة بالترميز ، كما يمكّنك دمج كتل Google الأصلية من اللعب بالكثير من الكائنات ثلاثية الأبعاد المجانية مباشرة من الخفاش. تحت غطاء محرك السيارة ، تستفيد الهولوغرام استفادة كاملة من قوة وبساطة A-Frame ، إطار WebVR في Mozila.

وهذا يعني أن بإمكان المطورين تنزيل المشاريع التي تم إنشاؤها باستخدام الهولوغرام واستخدامها في عمليات سير عمل A-Frame الخاصة بهم. وهي متوفرة حاليًا على نظام التشغيل Mac وتمت الموافقة على إصدار Windows قريبًا.

20. Parallax SVG Animation Tools

تعمل مجموعة الأدوات هذه على تسهيل إنشاء تسلسلات معقدة من SVG animation
تعمل مجموعة الأدوات هذه على تسهيل إنشاء تسلسلات معقدة من SVG animation

تعمل مجموعة الأدوات هذه على تسهيل إنشاء تسلسلات معقدة من SVG animation

تم تصميم

SVG Animation Tools من قبل Gareth Battensby of Parallax ، وهي مجموعة من أدوات الرسوم المتحركة SVG على شكل نص بيثون. لقد بنيت الأدوات كاستجابة للإحباطات التي تحصل عليها عند إنشاء رسوم متحركة معقدة أو طويلة من SVG” ، كما يقول في هذه التدوينة التوضيحية.

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

21. GitHub Notifier 

احصل على إشعارات Github في متصفحك باستخدام إضافة Chrome هذه
احصل على إشعارات Github في متصفحك باستخدام إضافة Chrome هذه

احصل على إشعارات Github في متصفحك باستخدام إضافة Chrome هذه

تكره الخوض في رسائل البريد الإلكتروني؟ هل تفضل فكرة الحصول على إشعارات GitHub في متصفحك؟ يعمل ملحق Chrome هذا تمامًا.

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

22. Quill

Quill هو محرر نص غني مرن مع واجهة برمجة تطبيقات قوية
Quill هو محرر نص غني مرن مع واجهة برمجة تطبيقات قوية

Quill هو محرر نص غني مرن مع واجهة برمجة تطبيقات قوية

تتم فوترة Quill كمحرر نص منسق لـ WYSIWYG للويب الحديث“. هناك العديد من السياقات المختلفة في التطبيقات التي تحتاج إلى محرر نصوص منسق ، لذلك لا عجب أن Quill قد انفجرت بشعبية منذ إصدارها الإصدار 1.0 بيتا في منتصف عام 2016.

الآن منتج مستقر ، يتيح لك Quill تحويل عنصر div أساسي إلى محرر نصوص قوي مع بضعة أسطر من JavaScript:

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

23. URL to PDF 

قم بتحويل HTML إلى ملفات PDF تلقائيًا باستخدام واجهة برمجة التطبيقات هذه
قم بتحويل HTML إلى ملفات PDF تلقائيًا باستخدام واجهة برمجة التطبيقات هذه

قم بتحويل HTML إلى ملفات PDF تلقائيًا باستخدام واجهة برمجة التطبيقات هذه

تقدم لك واجهة برمجة التطبيقات ذاتية الإدارة ، التي تقدمها لك Alvar Carto ، إمكانية تحويل HTML إلى ملفات PDF ، مما يجعلها مفيدة في تقديم الإيصالات أو الفواتير أو أي محتوى HTML آخر. تتجاهل واجهة برمجة التطبيقات قواعد CSS للصفحةmedia للطباعة بشكل افتراضي ، وتعين Chrome لمحاكاة شاشةmedia ، لجعل مظهر PDF الافتراضي أشبه بالموقع الفعلي. يمكنك ضبطه ليعمل تلقائيًا على فترات منتظمة وأفضل للجميع ، إنه مجاني.

24. iotaCSS

iotaCSS هو إطار CSS مع اختلاف
iotaCSS هو إطار CSS مع اختلاف

iotaCSS هو إطار CSS مع اختلاف

تقدم لك واجهة برمجة التطبيقات ذاتية الإدارة ، التي تقدمها لك Alvar Carto ، إمكانية تحويل HTML إلى ملفات PDF ، مما يجعلها مفيدة في تقديم الإيصالات أو الفواتير أو أي محتوى HTML آخر. تتجاهل واجهة برمجة التطبيقات قواعد CSS للصفحةmedia للطباعة بشكل افتراضي ، وتعين Chrome لمحاكاة شاشةmedia ، لجعل مظهر PDF الافتراضي أشبه بالموقع الفعلي. يمكنك ضبطه ليعمل تلقائيًا على فترات منتظمة وأفضل للجميع ، إنه مجاني.

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

25. Launchpad 

Launchpad يتحول Sketch إلى منشئ موقع ويب كامل
Launchpad يتحول Sketch إلى منشئ موقع ويب كامل

Launchpad يتحول Sketch إلى منشئ موقع ويب كامل

Launchpad هي أداة من Anima تتيح لك نشر مواقع الويب مباشرة من Sketch دون الحاجة إلى ترميز.

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

يمكنك معرفة المزيد حول Launchpad في مشاركة المدونة هذه.

26. React Sketch.app

تقوم Airbnb بمشاركة أداة مخصصة مع مجتمع المصدر المفتوح
تقوم Airbnb بمشاركة أداة مخصصة مع مجتمع المصدر المفتوح

تقوم Airbnb بمشاركة أداة مخصصة مع مجتمع المصدر المفتوح

يوفر React Sketch.app طريقة فائقة سهلة لإدارة أصول Sketch في نظام تصميم كبير. أنشأه الفريق في Airbnb للمساعدة في سد الفجوة بين المصممين والمهندسين ، وهي في الأساس مكتبة مفتوحة المصدر تسمح لك بكتابة مكونات React التي تُعرض على مستندات Sketch.

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

وبالتالي ، فإن React Sketch.app يجعل من السهل جلب البيانات ودمجها في ملفات Sketch. كما يوفر طريقة سهلة لإنشاء أدوات التصميم المخصصة الخاصة بك فوق Sketch. يمكنك معرفة المزيد حول كيفية عمله في هذا المنشور.

27. SVGito

هذا التطبيق المجاني يوفر عليك تعديل ملفات SVG يدويًا
هذا التطبيق المجاني يوفر عليك تعديل ملفات SVG يدويًا

هذا التطبيق المجاني يوفر عليك تعديل ملفات SVG يدويًا

SVGito هو تطبيق ويب مجاني يقوم بتنظيف ملفات SVG الخاصة بك ، ليوفر عليك عناء تحريرها يدويًا.

يقوم هذا التطبيق الصغير الأنيق ، الذي أنشأه Peter Nowell ، بتحسين صور SVG تلقائيًا بلمسة زر واحدة ، وسيقلل عادة حجمها وتعقيدها دون تغيير ما تبدو عليه على الشاشة.

يمكنك معرفة المزيد عن SVGito في مشاركة المدونة هذه.

28. Sizzy 

Sizzy هي أداة تسمح لك بمعاينة عدة شاشات في وقت واحد أثناء اختبار تطبيقات الويب سريعة الاستجابة
Sizzy هي أداة تسمح لك بمعاينة عدة شاشات في وقت واحد أثناء اختبار تطبيقات الويب سريعة الاستجابة

Sizzy هي أداة تسمح لك بمعاينة عدة شاشات في وقت واحد أثناء اختبار تطبيقات الويب سريعة الاستجابة

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

يمكنك معرفة المزيد عن Dizzy في هذا المدونة وظيفة.

29. Foundation for Emails 2

إنشاء رسائل بريد إلكتروني HTML متجاوبة مع Foundation for Emails 2
إنشاء رسائل بريد إلكتروني HTML متجاوبة مع Foundation for Emails 2

إنشاء رسائل بريد إلكتروني HTML متجاوبة مع Foundation for Emails 2

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

بالإضافة إلى الإطار نفسه ، قام ZURB بتزويد ZURB Email Stack بسير عمل شامل يتضمن:

سيساعدك دليل الخطوات الأولى في إرشادك إلى كيفية الحصول على المجموعة وتشغيلها إذا اخترت الاستفادة من جميع الميزات.

30. Form

مع نماذج ، اتخذت نهجا جديدا RelativeWave
مع نماذج ، اتخذت نهجا جديدا RelativeWave

مع نماذج ، اتخذت نهجا جديدا RelativeWave

نموذج RelativeWave هو أداة للنماذج الأولية لا مثيل لها. انها ليست أداة تصميم نموذجية في أنه لا توجد أدوات أو طبقات لوحة. استخدام التطبيق يبدو وكأنه مزيج من التصميم والرمز.

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

النموذج هو أداة لتصميم التطبيقات والنماذج الأولية بهدف إنتاج تصاميم أقرب إلى ما تحصل عليه في الإنتاج ، يشرح المبرمج الإبداعي لـ RelativeWave Max Weisel. نريد من المصممين العمل مباشرة على جانب الإنتاج من التطبيق ، وفي الوقت نفسه تحرير المهندسين للتركيز على مشكلات أكثر تعقيدًا.”

هناك بعض البرامج التعليمية الرائعة حول كيفية استخدام النموذج ، ولكن العملية معقدة إلى حد ما إذا ، مثلنا ، اعتدت على إنشاء صور في Photoshop. يتم نقل صورة إلى مركز جهازك ، على سبيل المثال ، باستخدام متغيرات Superview و Patches Match. بمجرد استخدامك للرياضيات لتقسيم العرض والارتفاع وربطها بالموقعين X و Y في Image View. تجميع تلك معا ، وإعادة تسمية المتغيرات وضبط نقاط ربط X و Y. وجدنا هذه العملية معقدة إلى حد ما.

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

لا يوجد تعليق فى هذا الموضوع كن اول من يضع تعليق