Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

جعبه‌ابزار قلم

603 views

Published on

فریم‌ورک qalam در حال حاضر در حال تکمیل شدن و از آدرس https://github.com/WebHistory/qalam قابل دسترس است. چند نمونه از قابلیت‌های قطعی این جعبه ابزار عبارتند از: وجود تنظیمات پیش‌فرض برای فونت‌های متن‌باز جدید (فونت‌های جناب راستی کردار و سوزنچی) ، نام‌های معنادار: به جای دیدن btn btn_lrg btn-green در کلاس‌های یک المنت، button large primary دیده خواهد شد. استفاده از فونت‌آیکن متناسب با سرعت اینترنت میانگین ایران. فرم‌های اصلاح شده (ایمیل و یوزرنیم و پسورد نباید راست به چپ باشند) ، قابلیت انتخاب تاریخ شمسی، بررسی صحت کد ملی، شماره کارت بانکی، تلفن همراه، ایمیل و... و کلی ریز ابزار مانند badge، tooltip، pagination و... در مجموع، هدف این است که یک جعبه ابزار کامل برای طراحان وب تهیه شود. فونت‌آیکن و CDN برای فونت‌های متن باز فارسی و چند کار‌ دیگر که نیاز به معرفی شدن، همفکری و همیاری جامعه وب ایران دارد.

Published in: Education
  • Be the first to comment

  • Be the first to like this

جعبه‌ابزار قلم

  1. 1. ‫مجتهدی‬ ‫حسین‬ ‫محمد‬ ‫قلم‬ ‫ابزار‬ ‫جعبه‬
  2. 2. ‫وب‬ ‫تاریخ‬ ‫درباره‬ ‫کلمه‬ ‫چند‬
  3. 3. ‫نکن‬ ‫تکرار‬ ‫را‬ ‫خودت‬! Don’t Repeat Yourself!
  4. 4. ‫آبشاری‬ ‫های‬‫نامه‬‫شیوه‬ ‫چارچوب‬ CSS Framework !!!!!
  5. 5. ‫قلم‬ ‫ابزار‬ ‫جعبه‬
  6. 6. ‫قلم‬ ‫ابزار‬ ‫جعبه‬ •‫کاغذ‬:‫مرورگرها‬ ‫در‬ ‫طراحی‬ ‫شروع‬ ‫نقطه‬ ‫کننده‬ ‫یکسان‬(‫از‬ ‫فراتر‬CSS Reset) •‫نقش‬:‫ها‬‫فرمت‬ ‫تمامی‬ ‫در‬ ‫ها‬‫آیکن‬ ‫از‬ ‫گرا‬‫واکنش‬ ‫و‬ ‫کامل‬ ‫ای‬‫مجموعه‬ •‫نگار‬:‫فونت‬ ‫گیرنده‬ ‫خروجی‬(‫آیکن‬ ،‫فارسی‬) •‫قلم‬:CSS‫ورک‬‫فریم‬ ‫ها‬‫ابزار‬ ‫لیست‬
  7. 7. ‫نسخه‬ ‫اهداف‬1.0‫قلم‬
  8. 8. ‫فارسی‬ ‫اول‬ ‫هدف‬1
  9. 9. ‫فارسی‬ ‫اول‬ •‫بیگانه‬ ‫های‬‫زبان‬ ‫با‬ ‫دشمنی‬ ‫بدون‬ ‫فارسی‬ ‫مستندات‬–‫انگلیسی‬ ‫مستندات‬ ‫با‬ ‫همراه‬ •‫خاص‬ ‫های‬‫مکان‬ ‫برای‬ ‫انگلیسی‬ ‫صحیح‬ ‫فونت‬ ‫انتخاب‬(email field،pre tag‫و‬ ،)... •‫از‬ ‫بیش‬ ‫برای‬ ‫اختصاصی‬ ‫تنظیمات‬ ‫وجود‬15‫و‬ ‫جدید‬ ‫باز‬ ‫متن‬ ‫فونت‬39‫جدید‬ ‫فونت‬ ‫چندین‬ ‫و‬ ‫معروف‬ ‫فونت‬ •‫اول‬ ‫قدم‬ ‫از‬ ‫بودن‬ ‫چپ‬ ‫به‬ ‫راست‬ •‫اعداد‬Ordered List‫فارسی‬ •‫و‬... ‫هدف‬1
  10. 10. ‫باز‬ ‫متن‬ ‫هدف‬2 ‫باز‬ ‫فکر‬ ‫و‬...
  11. 11. ‫بزرگان‬ ‫های‬‫شانه‬ ‫هدف‬3
  12. 12. ‫تایپوگرافی‬ ‫هدف‬4
  13. 13. ‫تایپوگرافی‬ •‫نیکا‬ •‫گندم‬ •‫جمهوریا‬ •‫امیری‬ •‫وزیر‬ •‫بهداد‬ •‫صمیم‬ •‫فربد‬ •‫سنس‬‫ایران‬ •‫فونت‬‫پی‬ •‫گنجنامه‬ •‫تاهوما‬ •‫تیتر‬ •‫شبنم‬ •‫پرستو‬ •‫زر‬ •‫لوتوس‬ •‫و‬... ‫هدف‬4 ‫ها‬‫فونت‬ ‫لیست‬
  14. 14. ‫پذیری‬ ‫قالب‬ ‫هدف‬5 ‫معدنی‬ ‫آب‬ ‫فروش‬ ‫به‬ ‫نشانی‬ ‫آتش‬ ‫سایت‬ ‫تبدیل‬ ‫دقیقه‬ ‫چند‬ ‫در‬
  15. 15. ‫معنادار‬ ‫های‬‫کالس‬ ‫هدف‬6 Semantic Class Naming
  16. 16. ‫معنادار‬ ‫های‬‫کالس‬‫هدف‬6 Semantic Class Naming <div class=“ btn btn--lrg btn__green “></div> <div class=“ button large primary “></div>
  17. 17. ‫گرایی‬‫واکنش‬ ‫هدف‬7
  18. 18. ‫گرایی‬‫واکنش‬ •‫عامل‬ ‫سیستم‬ •‫عامل‬‫سیستم‬ ‫نسخه‬ •‫مرورگر‬ •‫مرورگر‬ ‫نسخه‬ •‫صفحه‬ ‫ابعاد‬ •‫پیکسل‬ ‫تراکم‬ •‫اکسپلورر‬ ‫اینترنت‬... ‫هدف‬7 •‫ها‬‫ترین‬‫پرکاربرد‬ ‫از‬ ‫پشتیبانی‬ •‫قدیمی‬ ‫های‬‫نسخه‬ ‫از‬ ‫پشتیبانی‬ ‫کردن‬ ‫حذف‬ •‫موبایل‬ ‫در‬ ‫مخصوصا‬ ‫گرایی‬‫واکنش‬ ‫بر‬ ‫فراوان‬ ‫تمرکز‬ ‫حالت‬ ‫میلیون‬ ‫چند‬
  19. 19. ‫عناصر‬ ‫چیدمان‬ ‫هدف‬8
  20. 20. ‫ها‬‫سنج‬‫اعتبار‬ ‫هدف‬9
  21. 21. ‫ها‬‫سنج‬ ‫اعتبار‬ •‫کنند‬‫نمی‬ ‫پشتیبانی‬ ‫را‬ ‫مخصوصی‬ ‫های‬‫کارکتر‬ ،‫ایمیل‬ ‫دهندگان‬‫ارائه‬ ‫برخی‬. •‫موقت‬ ‫های‬‫ایمیل‬ ‫بررسی‬ •‫شرکتی‬ ‫یا‬ ‫رایگان‬ ‫های‬‫ایمیل‬ ‫تمایز‬ •‫شده‬ ‫تایپ‬ ‫اشتباه‬ ‫های‬‫ایمیل‬ ‫برای‬ ‫پیشنهاد‬ ‫ارائه‬ •‫دامنه‬ ‫پسوند‬ ‫بررسی‬(TLD) ‫هدف‬9 ‫ایمیل‬
  22. 22. ‫ها‬‫فرم‬ ‫هدف‬10
  23. 23. ‫ها‬‫فرم‬ •‫بودن‬ ‫راست‬ ‫به‬ ‫چپ‬،‫ایمیل‬ ‫های‬‫ورودی‬URL‫موارد‬ ‫دیگر‬ ‫و‬ ‫تلفن‬ ،‫مشابه‬ •‫های‬‫آیکن‬ ‫از‬ ‫استفاده‬‫نقش‬‫و‬ ‫ها‬‫دکمه‬ ‫در‬... •‫فرم‬ ‫طراحی‬ ‫در‬ ‫ها‬‫رنگ‬ ‫از‬ ‫راحت‬ ‫استفاده‬ •‫مانند‬ ‫مرورگر‬ ‫های‬‫افزونه‬ ‫تنظیمات‬ ‫ندادن‬ ‫تغییر‬pocket ‫هدف‬10
  24. 24. ‫ر‬‫ن‬‫گ‬‫ه‬‫ا‬ ‫هدف‬11
  25. 25. ‫انیمیشن‬ ‫هدف‬12
  26. 26. ‫مخلفات‬ ‫هدف‬13
  27. 27. ‫مخلفات‬ •‫آبشاری‬ ‫منو‬ •‫صفحه‬ ‫از‬ ‫خارج‬ ‫منو‬ •‫صفحه‬ ‫باالی‬ ‫منوی‬ •‫ها‬‫دکمه‬ •‫ها‬‫حباب‬ •‫جداول‬ •‫ها‬‫عکس‬ •‫ها‬‫فیلم‬ •‫صوتی‬ ‫های‬‫فایل‬ •‫ها‬‫لیست‬ •‫شو‬‫اسالید‬ •‫ها‬‫پیغام‬ •‫امتیازدهی‬ •‫صفحه‬ ‫درون‬ ‫آپ‬ ‫پاپ‬ •‫و‬... ‫هدف‬13
  28. 28. ‫بهارنارنجی‬ ‫جاوااسکریپت‬ ‫هدف‬14 ‫وانیلی‬ ‫به‬ ‫نزدیک‬!
  29. 29. ‫ها‬‫ابزار‬ ‫و‬ ‫ها‬‫کتابخانه‬ ‫دیگر‬ ‫با‬ ‫نداشتن‬ ‫تداخل‬ ‫هدف‬15
  30. 30. ‫پایانی‬ ‫سخن‬ https://github.com/webhistory/qalam #mojtahedi #qalam
  31. 31. ‫احترام‬ ‫با‬ ‫محمد‬ ‫آل‬ ‫و‬ ‫محمد‬ ‫بر‬ ‫صلواتی‬ ‫با‬ ‫و‬(‫ص‬)
  32. 32. ‫مجتهدی‬ ‫حسین‬ ‫محمد‬ ‫اینستاگرام‬:mhmojtahedi ‫بقیه‬ ‫و‬ ‫هاب‬‫گیت‬‫جاها‬:mhm5000 ‫سایت‬:mojtahedi.info

×