PDA

View Full Version : آموزش: تکنولوژی زیبا و منحصر به فرد آیکن زنده .



CsharpNevisi
جمعه 24 مرداد 1393, 16:52 عصر
سلام .. !!!
شاید تو بعضی از سایت ها دیده باشید که آیکن های زیبا و متحرک با وضوح تصویر فوق العاده بالا استفاده شده که در عین حال حجم خیلی کمی هم دارن ... !!!!
البته خیلی کم سایتی پیدا میشه که از این تکنولوژی استفاده کرده باشه که اونم اکثرا به خاطر عدم اشنایی با اونه ... !!!
الان این امکان فراهم شده که طراحان وبسایت با کمترین زحمتی یا بهتر بگم بدونه هیچ زحمتی این ایکن ها رو تو سایت خودشون داشته باشن ... !!!
شما میتونید جلوه های بثری سایتتون رو با این ایکن ها به صورت چشمگیری بالا ببرید ... !!!
لینک آموزش استفاده و دانلود ایک های زنده : لینک (http://www.wenda.ir/LiveIcon/config.html)
از دست ندینش ... اگه راحت از کنارش بگذرین فقط و فقط خودتون ضرر میکنید ... !!!!


http://www.wenda.ir/LiveIcon/livicon.png

omidparkour
جمعه 24 مرداد 1393, 17:07 عصر
نمونه اش در سایت زیر قرار داره :
www.toolweb.ir

2undercover
جمعه 24 مرداد 1393, 18:49 عصر
الان این امکان فراهم شده که طراحان وبسایت با کمترین زحمتی یا بهتر بگم بدونه هیچ زحمتی این ایکن ها رو تو سایت خودشون داشته باشن ... !!!

فکر نمی کنم این قدر ها هم بی زحمت باشه. بالاخره قیمت این بسته Icon برابر با 16 دلار هست.

دانیال دزفولی
جمعه 24 مرداد 1393, 18:51 عصر
فکر نمی کنم این قدر ها هم بی زحمت باشه. بالاخره قیمت این بسته Icon برابر با 16 دلار هست.

رایگان برای دانلود هست

CsharpNevisi
جمعه 24 مرداد 1393, 19:04 عصر
یادم نمیاد از کدوم سایت دانلود کردم و رایگانم هست ... ولی به هر حال داخل سایت خودم قرار دادم که کسانی که نا آشنا هستند با این موضوع آشنا بشن .. و استفاده کنن ... !!!
16 دلار هم میشه حدودا 30 تومن که قیمت آنچنانی هم نداره .. .!!!!:لبخند:

mehdytux
شنبه 25 مرداد 1393, 05:07 صبح
برای استفاده از این آیکون ها باید دلیل خاصی داشت.
استفاده بیش از حد از انیمیشن ( چه css و چه کد جاوا اسکریپت ) بار پردازشی رو بر روی دستگاه کاربر بالا می بره.
باید توجه داشت که مرورگرها در رندر کردن این گونه موارد ، کارایی متفاوتی دارن و در بعضی از موارد باعث کندی صفحه و در بعضی موارد باعث اشغال بیش از حد حافظه رم دستگاه مورد استفاده میشه.
درسته که حجمشون کم هست و می دونید که برای پردازش همین آیکون های خشگل و کوچولو بارپردازشی مضاعف بر مرورگر اعمال میشه و همچنین در دستگاه های موبایل که حافظه رم محدود هست ، حافظه هرز میره.
باید توجه داشته که لذت داشتن یه سایت خوب با استفاده از تکنولوژی‌های جدید برای صاحب سایت معنا دارد و نه برای کاربر.
کاربر به این موضوع توجه می کنه که این تکنولوژی جدید چه تأثیری بر روی تجربه وبگردی اون می زاره.
ظاهر مبحث مهمی هست ولی باید کارایی ( performance ) و به درد بخور بودن رو هم در نظر گرفت. من در هیچ وب سایت معروف که به کارایی سایت خودش اهمیت بده ندیدم که از این آیکون های زنده ( انیمیشن های جی کوئری) استفاده کنن. چون به فکر بارپردازشی کاربر بی نوا هم هستن. اگر این این بار پردازشی بر روی سرور بود باز هم با این لذت ازش استفاده می کردین ؟؟؟
در ضمن این یک تکنیک هست و نه تکنولوژِی.

CsharpNevisi
شنبه 25 مرداد 1393, 11:08 صبح
در ضمن این یک تکنیک هست و نه تکنولوژِی.
عزیزم این یه تکنولوژی برای جی کوئری هستش ... یا درست ترش میشه یه پلاگین برای جی کوئری ... !!!



استفاده بیش از حد از انیمیشن ( چه css و چه کد جاوا اسکریپت ) بار پردازشی رو بر روی دستگاه کاربر بالا می بره.
ما الان وارد عرصه جدید از دنیای تکنولوژی شدیم .. شما الان میتونی روی گوشی موبایلت بازی هایی مثل پی.اس و یا حتی جی.تی.ای نصب کنی و بازی کنی چندتا انیمیشن کوچولو که در برار این بازیا چیزی نیستن ... !!!! پی.سی هم که دیگه بماند ... !!!
شما برو تو لینکی که دادم ... یا برو به این ادرس :
http://www.wenda.ir/LiveIcon/customizer.html
ببین چندتا ایکن داخل این صفحه هست و ببین چقدر تو این صفحه با کندی سرعت و مشکل مواجه میشی ... !!!

mehdytux
یک شنبه 26 مرداد 1393, 09:48 صبح
با سلام دوست عزیز
حرف شما کاملا متین و درست هست
اصل صحبت من این هست چرا باید از تصاویر متحرک بیش از اندازه نیاز استفاده بشه.

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

البته من این آیکون ها رو قبلا دیده بودم و خیلی هم دوسشون دارم و مطمئنن روزی در پروژهای خود از آنها استفاده می کنم.
منظورم این هست استفاده از این آیکون ها بیشتر حالت تجملی داره تا کاربردی. مطئنن کاربرد خودشون رو دارن وگرنه اصلا تولید نمی شدن. ولی بیشتر به نظر میاد که بازه استفاده از این آیکون ها کم باشه اون هم به این دلیل که در طراحی وب سعی بر این است تا جایی که امکان داره از تصاویر متحرک استفاده نشه مگر در مواردی که بازدهی داشته باشه. چون تجربه نشون داده و البته در بسیاری از مقالات کارشناسی نیز اشاره شده که تحرک بیش از حد عناصر بر روی صفحه نمایشگر ( مخصوصا دستگاه های همراه همچون تبلت و موبایل ) باعث خستگی چشم کاربر میشه.

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

از طرفی نیز باید توجه داشت که کاربران معمولا صفحات بسیار زیادی را همزمان در مرورگر خود باز می کنند که این به معنی پرشدن حافظه رم به میزان زیادی توسط مرورگرهاست. همانطور که می دانید مرورگرها در بین نرم افزارهایی قرار میگیرند که حافظه زیادی مصرف می کنند. و از طرفی با وجود عناصر متحرک که امروزه در تمامی صفحات حضور دارند و نمونه بارز آن وجود اسلایدر ها در بیشتر صفحات اینترنت است ، استفاده از متحرک سازی بیش از اندازه موجب میشود تا نرم افزار مرورگر حافظه رم دستگاه کاربر را همچون یک هیولا ببلعد.

همچنین متحرک سازی با css چون با استفاده از gpu صورت می گیرد و همچنین بر پایه کدهای C++‎‎‎‎‎‎ هست بیشتر توصیه میگردد تا متحرک سازی با اسکریپت که هم زمان بیشتری برای رندر نیاز دارد ( به دلیل مفسر بودن اینگونه ربان ها ) و هم نسبت به سایر تکنیک های متحرک سازی پردازشگر را بیشتر به خود مشغول می کند.

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

دوست عزیز من CsharpNevisi (http://barnamenevis.org/member.php?280820-CsharpNevisi) باید این نکته را مورد توجه قرار دارد که هنگام بازی با دستگاه همراه ، در کنار بازی کار دیگری انجام نمی دهید ولی هنگام مرور اینترنت نه تنها چند صفحه را همزمان باز نگه میدارید همچنین از سایر برنامه ها نیز استفاده می کنید. و چون مرورگر نرم افزاری است که رم زیادی مصرف می کند نحوه کدنویسی و کتابخانه های استفاده شده بسیار مهم می باشد.

در کل من بر روی حرف خود پافشاری نمی کنم چون نیاز به گرفتن یک benchmark از این کتابخانه و به دست آوردن میزان استفاده این کتابخانه از رم و سیکل های پردازشی است تا بتوان در مورد استفاده از این آیکون ها به طور صحیح اظهار نظر کرد.

CsharpNevisi (http://barnamenevis.org/member.php?280820-CsharpNevisi) عزیز از اینکه اطلاعات و دانش خود را به اشتراک می گذارید از شما تشکر می کنم.

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

CsharpNevisi
یک شنبه 26 مرداد 1393, 12:15 عصر
مرسی از این که وقت گذاشتین یه همچین متنی نوشتین ... !!!!
درسته ... منم با کندی سرعت مواجه شدم ... ولی ن از طرف این ایکون ها تو کدنویسیام یه جاهاییو زیاده روی کردم .. !!!!
ولی به هر حال ... اگه چیزی از این ایکون ها ببینم سعی میکنم استفاده ازشوننو محدود کنم ... !!!