• 7Learn Discount
  • illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید تا کنون 6271 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

واکنشگرا کردن تصاویر (جلسه آخر) : تعاریف - نتیجه گیری و جمع بندی

0 236 ۳۱ اردیبهشت ۹۵

در این مطلب با ادامه آموزش واکنشگرا کردن تصاویر در خدمتتون هستم.Responsive-Design

در این قسمت با آخرین جلسه از واکنشگرا کردن تصاویر در خدمتتون هستم.

در این جلسه میخایم تعدادی راه و روش و منبع و نکات پایانی رو خدمتتون عرض کنیم.

بازرسی تصاویر واکنشگرا

اولین قدمی که میخایم یک سایت رو ببینیم و تصاویر اون رو واکنشگرا کنیم اینه که اون رو بررسی کرده و مورد آنالیز قرار بدیم. برای اینکار میتونین این آموزش رو مطالعه کنید و دید بهتری نسبت به بازرسی سایت داشته باشید.

Compatibility یا سازگاری

پشتیبانی مرورگرها برای واکنشگرا کردن تصاویر بسرعت در حال رشد و نمو هست. از آگوست 2015 مروگرهای کروم، فایرفاکس و اپرا تمام موارد picture و srcset و sizes و type رو پشتیبانی میکنن.

Microsoft Edge و Safari از srcset با توصیف گر x پشتیبانی میکنن، ولی از توصیف گر width پشتیبانی نمیکنن. مایکروسافت برای پشتیبانی کامل از واکنشگرا کردن تصاویر گام برداشته.

زمانی که ویژگی image-set رو بررسی میکنیم، میبینیم که کارهای زیادی برای انجام وجود دارن.

PictureFill

اما حتی اگر همه مرورگرهای جدید و مدرن از استانداردهای موجود برای واکنشگرا کردن تصاویر پشتیبانی میکردن، همچنان باید راهی رو پیدا میکردیم که این Syntax رو به مرورگرهای قدیمی نیز بفهمونیم. اینجا هست که PictureFill polyfill خودشو نشون میده.

با استفاده از این ابزار میتونین با استفاده از روشهای مرورگرهای مدرن کد بزنید و این ابزار اونو برای مرورگرهای قدیمی بصورت اتوماتیک بهینه میکنه و میفهمونه.

اتوماتیک کردن فرآیند تصاویر

در قسمت قبلی بیان شد که انسانها نباید خودشون بصورت دستی برای تک تک تصاویر Image Breakpoint ها رو پیدا کنن و استفاده کنن و باید نرم افزاری باشه که بصورت اتوماتیک این کار رو برای ما انجام بده.

هدف نهایی و عمده ای که بیشتر سازمان ها دارن اینه که فرآیند واکنشگرا کردن و تغییر سایز تصاویر بصورت اتوماتیک انجام بشه و خودشون خیلی در اون نقشی نداشته باشن و دخیل نباشن.

برای مواردی که Resolution Switching هستند میتونین آیتمهای زیر رو مدنظر قرار بدین:

  • تا جایی که ممکن هست از تصاویر SVG که در هر سایزی خوب نمایش داده میشن استفاده کنید
  • زمانی که قالب سایت رو میسازید و یا اون رو تغییر میدین، طراح قالب سایز تصاویر رو برای تصاویر متفاوت مشخص کنه و قرار بده
  • از srcset با توصیف گر width استفاده کنید و از قدرت سرور و این ویژگی بهره ببرید
  • نویسنده ای که داره متنی رو مینوسه، نباید در مورد تصاویر و سایز اون نگرانی داشته باشه و کاری رو اون نباید انجام بده. تنها کاری که نویسنده باید بکنه اینه که تصویر بزرگ و با کیفیت رو در اختیار سایت قرار بده و بقیه کار با استفاده از سرور و کدهای برنامه نویسی انجام بشه و سایزهای مورد نیاز تهیه بشه.

تقریبا همه سازمان ها و سایت ها از سیستمی برای تغییر سایز تصاویر خودشون بصورت اتوماتیک استفاده میکنن. اگر شما از این موارد استفاده نمیکنین میتونین لیستی از این ابزارها رو در اینجا ببینید. برای مطالعه بیشتر در این زمینه میتونین این نوشته رو ببینید.

سیستمهای مدیریت محتوا یا CMS ها، هر کدام به نوبه خود روشهایی رو برای تغییر سایز تصاویر و واکنشگرا کردن اونا در نظر گرفتن. گروه تصاویر واکنشگرا یا RICG یک پلاگین رو برای وردپرس تهیه کرده و هم اکنون دارن بر روی اینکه این قابلیت ها رو به هسته اصلی وردپرس اضافه کنن، تلاش میکنن. همچنین Drupal 8 از ماژول تصاویر واکنشگرا استفاده میکنه. (جزئیات بیشتر)

امیدوارم که این سری آموزشی تونسته باشه شما رو بیشتر با استانداردها و روشهای واکنشگرا کردن تصاویر آشنا بکنه.

موفق و سربلند باشید.

یا علی

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram