تصاویر دینامیک در طراحی سایت

تصاویر دینامیک در طراحی سایت

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

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

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

 

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

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

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

 

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

تصاویر دینامیک در طراحی سایت

× هر سوالی دارید ازمون بپرسید