تاريخ نشر : 12‏/05‏/2012

3 أدوات رائعة وجديدة لمصممي الويب


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

Colllor

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

كيف يعمل

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

أفكاري على Colllor

ولفت أنا مصاصة للتطبيقات لون واحد لي في هذا على الفور. انه جيد حقا تصميمه وتفاعلية بما يكفي لجعل العثور على الألوان تجربة ممتعة حقا. كنت مرتبكة قليلا في البداية لماذا لم تدرج الخيارات القياسية مثل توليد الحوامل التكميلية، ولكن هناك الكثير من تطبيقات وهناك مع ذلك وظائف وأود أن Colllor تسعى إلى أن تكون فريدة في نهجها.
عموما، للعثور على ظلال مختلفة من لون واحد، وأنا استخدم 0to255 ، مع ذلك، أن موقع يميل إلى أن يكون بطيئا جدا. Colllor على حد سواء بشكل أسرع وأكثر تنوعا. خاصة فريدة من نوعها هي "ميكس" الخيار، والذي يسمح لك لاختيار اثنين من الألوان لمعرفة التدرج من الألوان الفردية بين البلدين.
وشيء آخر أن يعمل بشكل جيد هو "نسخة إلى الحافظة" ميزة. المرافق لون العديد من يشعرون بالحاجة لتشمل "#" عندما يتم نسخ اللون، وهو أمر مفيد للالمغلق، ولكن سيئة للفوتوشوب (CS6 يتناول هذا). الآن، وأنا أفضل أن تظل رمزا خارج، وهو الطريق الذي سلكه Colllor.
أنا حقا لا الشكاوى هنا. Colllor هو أداة لون رائع والحرة التي يجب أن تضاف على الاطلاق إلى قائمة المواقع المفضلة.

CSS الاعوجاج

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

كيف يعمل

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

أفكاري على الاعوجاج CSS

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

Bear CSS

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

كيف يعمل

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


 } 

 هيئة { 


 } 


 / ************************************************* ****************** 
  LAYOUT 
  ************************************************** ***************** /

 DIV { 


 } 

 # رأس { 


 } 

 # mainsection { 


 } 

 تذييل # { 


 } 


 / ************************************************* ****************** 
  أسلوب الطباعة 
  ************************************************** ***************** /

 H1 { 


 } 

 ف { 


 } 


 / ************************************************* ****************** 
  الصور والفيديو والصوت 
  ************************************************** ***************** /

 IMG { 


 } 

أفكاري على CSS الدب

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

اختتام

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

هل يعجبك هذا؟

إتصل بنا

الاسم

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

رسالة *

إشترك في النشرة البريدية للحصول على آخر المواضيع


تابعنا في اليوتيوب

تابعنا على الفيس بوك