تبلیغات
مقالات آموزشی برنامه نویسی و شبکه - مطالب آموزش پلاگین های جی کوئری

بالا بردن سرعت سایت با کمک lazy loading (لیزی لودینگ)

شاید تابحال کلمه lazy loading را به کررات شنیده باشید، اما آیا معنی دقیق آنرا می دانید ؟
lazy loading ای که امروز می خواهیم درباره مزایای آن بحث نماییم ، به معنی لود نمودن تصاویر سایت در زمان مناسب و یا به عبارت دیگر لود دیر هنگام تصاویر سایت می باشد!
چیه ؟ بدتر گیجتون کردم ؟ هر چی هم که بلد بودین پرید ؟!!!
خوب اشکال نداره ، الان بهتر توضیح میدم :)

Lazy Loading پروژه ای است که توسط یاهو توسعه داده شده است و همانطور که اشاره شد ، برای افزایش سرعت لود صفحات وب بکار می رود و دلیل این افزایش سرعت در عدم لود تصاویری است که خارج از محدوده دید کاربر هستند و با اسکرول کردن به سمت پایین و در صورتی که تصویر در محدوده دید کاربر قرار گیرد  اقدام به لود تصاویر می کند و از این طریق سرعت لود اولیه صفحه وب را افرایش می دهد.
بطور مثال فرض کنید شما درون یک صفحه 5 عدد تصویر بزرگ قرار داده اید که موجب اسکرول خودرن صفحه در مرورگر کاربر شده است ، بطوری که وقتی کاربر صفحه شما را می بینید ، فقط 2 تصویر اول را می تواند مشاهده نماید و برای دیدن بقیه تصاویر می بایست در صفحه اسکرول نماید.
در چنین حالتی اگر شما از Lazy Loading استفاده نمایید ، در ابتدا فقط 2 تصویر اول برای کاربر لود می شود و وقت کاربر برای لود شدن بقیه تصاویر تلف نمی شود!
حال اگر کاربر صفحه را به سمت پایین اسکرول نماید ، تصاویری که در محدوده دیدش قرار می گیرد تازه شروع به لود شد نمی نمایند.
و این است معجزه lazy loading
در ادامه مطلب طرز استفاده از lazy loading در صفحات وب را آموزش می دهم.

نوشته شده در تاریخ یکشنبه 15 دی 1392    | توسط: ح.م    | طبقه بندی: آموزش پلاگین های جی کوئری،     | نظرات()


آموزش پلاگین جی کوئری ایجاد افکت بر روی tooltip

با سلام
یکی از خصوصیات مهم تگ های a در html خصوصیت title آنهاست ، این خصوصیت یکی از موارد بسیار مهم در امر سئو می باشد و همچنین یکی از خصوصیات کاربردی جهت نمایش توضیحات برای لینک های داخل سایت است.



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

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

آموزش پلاگین جی کوئری ایجاد افکت بر روی tooltip

نوشته شده در تاریخ شنبه 20 آبان 1391    | توسط: ح.م    | طبقه بندی: آموزش پلاگین های جی کوئری،     | نظرات()


پلاگین جی کوئری ایجاد افکت تایپ متن خبر همراه با لینک

سلام
حتما در اکثر سایت های خبری دیدین که در بالای سایت ، تیتر آخرین یا مهمترین اخبار بصورت یک به یک با افکت تایپ نمایش داده میشه ، اما تاحالا شده فکر کنین که چطوری این افکت پدیدار میشه ؟

امروز می خوام یک پلاگین دیگه از پلاگین های جی کوئری رو معرفی کنم ، پلاگینی که بوسیله اون و فقط با یک خط کد ! می تونین هر نوع نوشته ای رو با افکت تایپ در سایتتون نمایش بدین.
پلاگین جی کوئری ایجاد افکت تایپ متن خبر همراه با لینک  - netnic.ir

در مقاله قبلی ، آموزش ساخت افکت تایپ متن (Text Writer) با جاوا اسکریپت رو آموزش دادم ، مشکلی که این روش داشت ، این بود که اگر قرار باشه خبر ها بصورت لینکی باشن و لینک هر خبر با خبر بعدی متفاوت باشه ، کد نویسیش خیلی زیاد میشه و آخرش هم به باحالی این پلاگینی که امروز می خوام معرفی کنم ، نمیشه.

بنابراین وقتی پلاگین به این باحالی وجود داره ، چه کاریه که بیایم خودمون کد بزنیم ؟!

ابتدا فایل های پلاگین رو از آدرس زیر دانلود کنید :

دانلود پلاگین تایپ متن (خبر) با امکان لینک هر خبر


رمز فایل :  NetNic.ir

در ادامه مطلب ، نحوه استفاده از این پلاگین رو یاد خواهیم گرفت

نوشته شده در تاریخ سه شنبه 16 آبان 1391    | توسط: ح.م    | طبقه بندی: آموزش پلاگین های جی کوئری،     | نظرات()


آموزش اسلاید شوی حرفه ای Rhinoslider

با سلام ، بالاخره فرصتی پیش اومد تا  اسلاید شوی حرفه ای Rhinoslider رو آموزش بدم.

در سری آموزش های پلاگین های جی کوئری ، چندین اسلاید شوی مختلف رو آموزش دادم.

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

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


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

آموزش اسلاید شوی حرفه ای Rhinoslider - netnic.ir

نوشته شده در تاریخ پنجشنبه 27 مهر 1391    | توسط: ح.م    | طبقه بندی: آموزش پلاگین های جی کوئری،     | نظرات()


ساخت اسلاید شو بوسیله پلاگین جی کوئری cycle

با سلام
ساخت اسلاید شو بوسیله پلاگین جی کوئری cycle fader - netnic.ir

برای این ساعت از سایت "نت نیک" ، ساخت اسلاید شو بوسیله پلاگین جی کوئری cycle fader رو می خوام آموزش بدم.

(افکت fade بدین صورت است که عکس اول کمرنگ و کمرنگ میشه  تا جایی که کاملا محو میشه و بعد عکس عوض میشه و عکس بعدی کم کم پر رنگ و پر رنگ میشه تا کاملا مرئی میشه و ....)

خوب ، برای ساخت یک اسلاید شو با افکت زیبای fade ابتدا باید یک سری کتابخونه های جاوا اسکریپت رو به پروژتون اضافه کنین:


فایل اول کتابخونه جی کوئری است (نسخه کم حجمش)
فایل دوم کتابخونه خود cycle  است (آخرین نسخه)
فایل سوم ، دستورات فعال کردن اسلاید شو است ، من برای قشنگی کار ، دستورات رو توی یک فایل جدا نوشتم ....
شما می تونین توی صفحتون یک تگ Script باز کنین و کدها رو توش بریزید ...

(متونی که بین تگ های اسکریپت نوشتم همشون کامنت هستند و می تونین اصلا ننویسینشون)

خوب ابتدا فایل این 3 کتابخونه رو از اینجا دانلود کنین:

دانلود کتابخانه های مورد نیاز جهت ساخت اسلاید شو با افکت fade


، خوب فایل بالا رو بعد از دانلود unzip کنین و درون فایلای سایتتون قرار بدین و بعد کد های بالا رو به پروژتون اضافه کنین ، فقط دقت کنین که مسیر فایلا رو درست بدین (در اینجا من فایلامو درون یک پوشه با نام js قرار دادم.)

خوب در ادامه باید یک کد بصورت زیر در بخش html صفحهتون اضافه کنین :




کدهای بالا همشون ثابت هستند و جزء استاندارد خود اساید شوی cycle هستند ، فقط شما هر چند تا دوست داشتین تگ img  اضافه کنین و اندازه همه رو هم یکجور ست کنین ، این تصاویر در اسلاید شوی شما نمایش داده می شوند .

در قسمت پایین دو تا دکمه برای عقب و جلو کردن تصاویر بصورت دستی وجود دارد که می تونین اونها رو مخفی کنین (با یک دستور css می تونین این کار رو انجام بدین)

کار تمام شد ، اسلاید شوی شما آمادست

صفحه رو ذخیره کنین و اون رو با مرورگر باز کنین و از اسلاید شوتون لذت ببرید

نکته : اگر قراره که یک اسلاید شو درون بخش بالایی ساییتون داشته باشید ، کافی است یک div رو با کد های css در جایی از صفحه که دوست دارین اسلاید شو در اونجا نمایش داده بشه ، قرار بدین و بعد کل کد های html بالا رو درون این تگ div قرار بدین.

به همین راحتی

آسون بود ؟
مزیت استفاده از کتابخونه همینه دیگه


این پلاگین کلی تنظیمات داره که باهاشون می تونین افکت و .... اسلایدشو رو عوض کنین ؛ می تونید همه تنظیمات رو اینجا ببینید

تا آموزشی دگر ، بدرود

نوشته شده در تاریخ سه شنبه 24 مرداد 1391    | توسط: ح.م    | طبقه بندی: آموزش پلاگین های جی کوئری،     | نظرات()


آموزش اعتبار سنجی فرم ها با جی کوئری بخش دوم (شخصی سازی پیغام ها)

با سلام ،
در مقاله قبلی اعتبار سنجی فرم ها با جی کوئری رو آموزش دادم.
آموزش اعتبار سنجی فرم ها با جی کوئری - netnic.ir

در این مقاله به شما یاد میدم که چطوری پیام های خطا رو عوض کنین و پیام مورد نظر خودتون رو نمایش بدین.

به کد زیر توجه کنید :


(کد رو قفل نکردم تا بتونین کپی کنین تو یک نرم افزار متن تا بهتر بتونین بررسیشون کنین)
(کد های بخش script دقیقا مانند قبل است)
همانطور که ملاحظه می کنید ، از طریق بخش class هر یک از تگ های input می توانید ، متن پیام مورد نظر خود را نمایش دهید.

امیدوارم که از این آموزشش هم لذت برده باشید.

در آموزش بعدی ساخت اسلاید شو بوسیله پلاگین jquery.cycle_fader  رو آموزش خواهم داد.

این پلاگین یکی از بهترین و ساده ترین و حرفه ای ترین پلاگین های ساخت اسلاید شو با افکت fade می باشد.

تا درودی دگر ، بدرود
.

نوشته شده در تاریخ یکشنبه 22 مرداد 1391    | توسط: ح.م    | طبقه بندی: آموزش پلاگین های جی کوئری، پروژه های کلاینت ساید،     | نظرات()


آموزش اعتبار سنجی فرم ها با جی کوئری بخش اول

آموزش اعتبار سنجی فرم ها با جی کوئری
سلام

با اتمام آموزش های جاوا اسکریپتم ، طبق قولی که داده بودم ، دارم روی پلاگین های کاربردی جی کوئری کار می کنم.

در ادامه آموزش اعتبار سنجی فرم ها با جی کوئری یا form validation with jQuery رو آموزش می دهم.

نوشته شده در تاریخ یکشنبه 28 خرداد 1391    | توسط: ح.م    | طبقه بندی: آموزش پلاگین های جی کوئری، آموزش jQuery، پروژه های کلاینت ساید،     | نظرات()