تصاویر داینامیک در طراحی وب سایت ها (بخش سوم)

توسط: محسن درم بخت | منتشر شده در 1394/09/18 | بازدید : 14551 بار | زمان مطالعه : 12 دقیقه

در دو مقاله قبلی که اندازه و حجم تصاویر در طراحی و پیاده سازی وب سایت ها(قسمت دوم) و اندازه و حجم تصاویر در طراحی و پیاده سازی وب سایت ها(قسمت اول) بود به طور مفصل به نکاتی در رابطه با مدیریت و کارکردن با تصاویر در طراحی و پیاده سازی وب سایت ها پرداختیم.در این نوشته می خواهیم به صورت خاص به مدیریت تصاویر داینامیک بپردازیم.

اولین مرحله در تصاویر داینامیک استفاده از یک file uploader خوب و کاربرپسند می باشد.یک file uploader خوب باید دارای ویژگی هایی چون راهنمای خوب برای کاربر شامل تعداد، نوع و حجم فایل های مجاز برای بارگذاری، نمایش وضعیت فایل هایی که آپلود شده یا نشده، قسمت حذف فایل و امکان اضافه نمودن توضیح alt برای تصویر به صورت جداگانه باشد.(توضیح alt که به صورت ویژگی alt در تگ img استفاده می شود توضیحی است که توسط موتورهای جستجو برای انتخاب تصاویر استفاده می شود و در بحث SEO بسیار اهمیت دارد.)

file uploader های بسیار زیادی نوشته شده که در اینترنت در دسترس می باشند.یکی از بهترین و معروف ترین آنها blueimp می باشد که می توانید از آن استفاده نمایید.برای افرادی که با ASP.NET MVC نیز کار می کنند، می توانند از MvcFileUploader استفاده نمایند که پایه آن همان blueimp می باشد.

برای کاستن حجم تصاویر قبل از آپلود نیز می توانید از وب سایت های آنلاین مانند compressjpeg.com استفاده نمایید که حجم تصاویر را بدون از دست دادن کیفیت زیاد، کاهش می دهند.در تصویر زیر مشاهده می کنید که 4 تصویر به این وب سایت داده شده و حجم هر کدام چقدر کاهش پیدا کرده است.به طور مثال حجم تصویر اول 74 درصد کاهش پیدا کرده است.


پس از راه اندازی یک فایل آپلودر خوب در وب سایت باید به فکر مدیریت نام ها و محل های ذخیره سازی فایل ها نیز باشید.به هیچ عنوان نباید فایل ها را با نام هایی که کاربران وارد می کنند ذخیره نمایید چون مشکلاتی از قبیل ورود فایل های همنام و یا نام های غیرمتعارف می تواند شما را با مشکل مواجه کند.پس از اینکه فایل در سمت کلاینت آپلود شد و در سمت سرور آن را دریافت نمودیم باید نام فایل را به نامی با معنی و مرتبط با موضوع تغییر دهیم.سعی نماییم حداقل قسمت اول نام فایل ما مرتبط باشد.به طور مثال samsung-galaxy-56546.jpg باشد.همانطور که ملاحظه می کنید قسمت اول و دوم نام مرتبط با موضوع می باشد و قسمت پایانی که عددی تصادفی برای هم نام نبودن با تصاویر دیگر این موضوع به ادامه نام اضافه شده است.

در رابطه با ابعاد تصاویر :  به طور مثال تصویری در ابعاد 400 در 200 نیاز داریم باید چگونه عمل کنیم؟ برای ابعاد راه حل های مختلفی وجود دارد.یکی از جدیدترین آنها استفاده از امکانات Html5  یعنی Canvas می باشد که در سمت کاربر در زمان آپلود جلوی آن را بگیریم یا اینکه پس از آپلود تصویر را به اندازه دلخواه در بیاوریم.حتما در رابطه با Html Canvas مطالعه بیشتری بفرمایید.

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


به طور مثال آدرس زیر را که در همین وب سایت استفاده شده است ملاحظه بفرمایید  :

http://sepidaria.com/Uploads/BlogImages/2056/images.jpg?w=68&h=68

 بخش پایانی آدرس بعد از فرمت همان امکان ImageResizer می باشد که استفاده شده است.یعنی width را 68 پیکسل نمایش بده و height را نیز 68 نشان بده.

حالا آدرس اصلی بدون قسمت پایانی را نیز ملاحظه بفرمایید که تصویر اصلی است که در سمت سرور وجود دارد.

http://sepidaria.com/Uploads/BlogImages/2056/images.jpg

خوبی این روش در این است که تصویر در سمت سرور کوچک شده و سپس ارسال می شود.

اینها نکاتی است که رعایت کردن و استفاده از آنها در کار با تصاویر داینامیک در طراحی و پیاده سازی وب اپلیکیشن ها بسیار مفید و موثر می باشد.

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

 

دوره‌های آنلاین برنامه‌نویسی لیست دوره‌ها