برترین افزونه های جی کوئری
در این مقاله قصد داریم شما را با بهترین افزونه های جی کوئری آشنا کنیم. این افزونه ها به شما در صرفه جویی در زمان و تلاش کمک خواهند کرد.این افزونه ها عبارتند از:
- پشتیبانی از چت اجتماعی CZM
- پخش کننده ویدئو RTO+P
- Muuri
- Timeline
- Titled page scroll
- Focuspoint
- SVGMagic
- Face Detection
- Round Slider
- jInvertScroll
- Slinky
- TwentyTwenty
- Material design hierarchical display
- Tabslet
- nanogallery2
- Tooltipster
- Magnific
- jQuery Knob
- Type Ahead
- Lettering.js
ده ها هزار پلاگین jQuery برای کتابخانه jQuery نوشته شده است که می توانند در زمان و تلاش شما برای افزودن قابلیت به وب سایت ها صرفه جویی کنند. کتابخانه jQuery که در سال 2006 توسط John Resig ایجاد شد، یکی از محبوب ترین کتابخانه های جاوا اسکریپت و منبعی فوق العاده برای توسعه سریع تعاملات کاربر است.
از گالری های تصویر و فرم‌ها گرفته تا انیمیشن‌های CSS . این کتابخانه بلوک‌های اصلی را فراهم میکند تا بتوانید به سرعت یک رابط کاربری منحصربه فرد را با حداقل کد و تلاش، نمونه‌سازی و ارائه دهید.
افزونه های برتر jQuery
پشتیبانی از چت اجتماعی CZM
با استفاده از این افزونه jQuery پشتیبانی چت اجتماعی، میتوانید به سرعت از حساب‌های اجتماعی نامحدود، از جمله واتساپ، مسنجر، اسکایپ، توییتر، تلگرام و اینستاگرام پشتیبانی کنید. تنظیم آن آسان است و می توانید دکمه ها را به دلخواه شخصی سازی کنید. برخلاف بسیاری از افزونه های این لیست، این افزونه رایگان نیست. دانلود آن 14 دلار هزینه دارد.
پخش کننده ویدیو RTO+P
این پلاگین جی کوئری ساختن و سفارشی کردن پخش کننده ویدیوی خود را آسان می کند و ویدیوها را از سرور یا CDN خود یا از یک جریان عمومی Vimeo می گیرد. از تگ ویدیوی HTML5 برای آسان کردن زندگی استفاده کنید یا برای عملکرد بهتر می توانید از گزینه Lazy load استفاده کنید.
Muuri
پلاگین منبع باز jQuery Niklas Rämö Muuri یکی از بهترین ها برای ایجاد طرح بندی های انعطاف پذیر است. سیستم چیدمان آن شما را قادر می‌سازد تا اقلام شبکه‌ای با اندازه‌های مختلف را به هر شکلی که قابل تصور باشد در یک ظرف قرار دهید.
Timeline
Timeline.js همه چیزهایی را که برای ایجاد یک جدول زمانی نیاز دارید در اختیار شما قرار می دهد یعنی یک نوار زمانی که بر اساس نقاط زمانی پیشرفت می کند. این پلاگین تعداد زیادی گزینه های شخصی سازی بصری و کاربردی دارد که به لطف دستورالعمل های دقیق استفاده از آن بسیار ساده است.
Tilted page scroll
این افزونه از یک افزونه های عالی جی کوئری برای جلب توجه و افزودن عمق بیشتر به سایت شما است. آیتم‌ها در حین پیمایش به سمت بالا کج میشوند. و وقتی در بالای صفحه به سمت بیرون حرکت میکنند، دوباره کج میشوند. این یک جلوه ی عالی است!
Focuspoint
طراحی وب ریسپانسیو به این معنی است که می توانیم یک صفحه واحد ایجاد کنیم تا در هر دستگاهی زیبا به نظر برسد. با این حال، اگر سایت شما به طور خودکار تصاویر را متناسب با دستگاه ها برش میدهد، ممکن است نقطه کانونی را از دست بدهد. با Focuspoint
می توانید مطمئن شوید که تصویر شما در هر ظرفی عالی به نظر می رسد و به شما امکان می دهد یک نقطه کانونی برای هر تصویر مشخص کنید. این افزونه اطمینان حاصل می کند که هنگام برش تصویر، بیت های مهم حفظ می شوند.
SVGMagic
استفاده از فایل های SVG تضمین می کند که تصاویر در هر اندازه ای واضح به نظر می رسند. این افزونه به شما کمک می کند تا بدون نگرانی در مورد مرورگرهایی که از این فرمت پشتیبانی نمی کنند، این کار را انجام دهید. تصاویر SVG را جستجو می کند و اگر SVG پشتیبانی نمی شود آنها را با نسخه های PNG جایگزین می کند.
Face Detection
این پلاگین جی کوئری با شناسایی و ارائه مختصات چهره انسان در تصاویرو فیلم ها استفاده از برخی فناوری های قدرتمند را آسان می کند. این افزونه که توسط Jay Salvat نوشته شده است از الگوریتم تشخیص چهره لیو لیو استفاده می کند.
- Round Slider
این پلاگین دایره ای به شما امکان می دهد با حرکت مکان نما روی دایره، محدوده ای از مقادیر را انتخاب کنید. نوار لغزنده کامل پیش‌فرض است، اما میتوانید از آن برای دریافت شکل‌های ربع دایره و نیم‌دایره نیز استفاده کنید. سبک‌های CSS وجود دارد که میتوانید آنها را برای ایجاد تم های مختلف تنظیم کنید .
jInvertScroll
با استفاده از پلاگین سبک وزن جی کوئری jInvertscroll به اسکرول افقی همراه افکت پارالکس در کمترین زمان ممکن دست پیدا کنید. این افزونه آسان نیاز به پیکربندی ندارد و می تواند توهم خوبی از عمق در سایت شما ایجاد کند.
Slinky
طراحی های منو می توانند از مد بیفتند و از بین بروند. اما Slinky یک طراحی زیبا و جاودانه منو ارائه میکند که برای هر موقعیتی که زیر منوهای زیادی دارید مفید است.
TwentyTwenty
به جای قرار دادن دو تصویر در کنار هم برای نشان دادن تفاوت بین عکس های قبل و بعد، می توانید از پلاگین TwentyTwenty ZURB برای قرار دادن یکی روی دیگری استفاده کنید. کاربر اسکرول را می کشد تا تصویر پایین از طریق تصویر بالا نشان داده شود و به او امکان می دهد که ببیند چه چیزی تغییر کرده است.
Material design hierarchical display
Material design hierarchical display می تواند به هدایت توجه کاربر و هدایت آن ها از یک نقطه به نقطه دیگر در یک فرآیند کمک کند. این افزونه به شما این امکان را می دهد که انیمیشن را متناسب با طراحی خود شخصی سازی کنید.
Tabslet
همانطور که از نام آن پیداست، Tabslet یک افزونه سبک وزن برای ساخت تب است. از کنترل های بعدی/قبلی، چرخش، رویدادهای سفارشی، پیوند عمیق و بسیاری از قابلیت های مفید دیگر پشتیبانی می کند.
nanogallery2
nanogallery2 که برای ساده سازی گالری‌های تصاویر شما طراحی شده است، پیمایش چند سطحی را در آلبوم‌ها، لایت‌باکس‌ها، جلوه‌های شناور ترکیبی روی تصاویر کوچک، نمایش‌های اسلاید، صفحه‌بندی و بارگذاری تصویر ارائه میدهد. این قابلیت پاسخگو و سریع است و از فضای ذخیره سازی ابری پشتیبانی می کند. نسخه 2 تجربه کاربری بهتر و ویژگی‌های جدیدی مانند فیلتر بر اساس کلمات کلیدی، سبد خرید، اشتراک گذاری اجتماعی، جلوه های شناور پیشرفته، انتقال تصویر کوچک و صفحه اطلاعات با موقعیت مکانی Google Maps را ارائه میدهد.
Tooltipster
این پلاگین jQuery برداشتی مدرن از راهنمای کلاسیک است که به شما امکان می دهد ابزار فعال شده با HTML را در نشانه گذاری معنایی با CSS برای کنترل نمایشگر ارائه دهید. Tooltipster طیف گسترده ای از گزینه های پیکربندی را ارائه می دهد، بنابراین می توانید آن را برای هر نیازی سفارشی سازی کنید.
Magnific Popup
این پلاگین لایت باکس برای jQuery بر سبک بودن و سازگاری تا حد امکان تمرکز دارد. توسعه دهنده روی عملکرد و تجربه کاربر تمرکز کرده است، بنابراین تمام ویژگی‌های برخی از پلاگین‌های لایت باکس را ندارد. اما فوق‌العاده سریع است و در طیف وسیعی از دستگاه‌ها، از جمله دستگاه‌های با DPI بالا مانند مک بوک، بدون نقص کار میکند.
jQuery Knob
jQuery Knob عناصر ورودی را به شماره گیری های لمسی تبدیل می کند که روی دسکتاپ نیز کار می کنند.
Type Ahead
Type Ahead که توسط تیم توسعه توییتر تولید شده است، ابزاری انعطاف پذیر و آسان برای پیاده سازی است که هنگام تایپ کاربر از یک منبع داده محلی یا خارجی به داخل جعبه ورودی می‌کشد تا پیشنهادات تکمیل خودکار را ارائه دهد.
Lettering.js
Lettering.js به شما این امکان را می دهد که کنترل دانه ای بر روی کاراکترهای فردی در نوع خود به دست آورید، به شما این امکان را می دهد که هسته گذاری را اعمال کنید، حروف جداگانه را رنگ کنید و شنوندگان رویداد را اعمال کنید. همچنین با FitText (در زیر) به خوبی بازی میکند، و به شما امکان میدهد تا به سبک دسکتاپ کنترل تایپوگرافی خود را داشته باشید و در عین حال پاسخگو باشید.
21.FitText
این یکی از افزونه های مفید جی کوئری است که برای تسهیل سرفصل های پاسخگو طراحی شده است. این به شما امکان می دهد تایپ را برای پر کردن عرض ظرف تنظیم کنید، و به‌طور خودکار اندازه متن را متناسب با آن بزرگ یا کوچک کنید. این افزونه همچنین با Lettering.js ادغام می شود تا یک ظاهر طراحی دانه ای را برای هر کاراکتر فعال کند.
سخن پایانی
در این مقاله تعدادی از افزونه های جی کوئری را برای شما توضیح دادیم. برای اطلاعات بیشتر در رابطه با کتابخانه ی جی کوئری و انواع متد های آن مانند متد Before , متد data , متد offset و … به بخش بلاگ سایت وب یار مراجعه نمایید.
برای آگاهی از آخرین اخبار و تخفیف های مجموعه در شبکه مجازی اینستاگرام ما را همراهی کنید.
امنیت وردپرس در لوگین » هسته وردپرس , با توجه به متن باز بودن آن , یکی از ایمن ترین هسته های سایت ساز است .(امنیت وردپرس در لوگین) اما این در حالتی است که کاربران وردپرس , هیچ لوازم یدکی را ( مانند قالب یا افزونه یا هک و کد ) بر روی آن سوار نکنند . این البته غیر ممکن است , چرا که بخشی از کاربرد و قدرت وردپرس , وابسته به این یدک هاست . یک نفوذگر نیز این را به خوبی میداند و بسیار کم هستند نفوذگرانی که برای نفوذ به یک وبسایت وردپرسی , وقت خود را صرف اسکن هسته سایت نمایند ( مخصوصا اگر هسته مرتبا به روز شده و از نسخه های روز استفاده کند ) . امنیت وردپرس در لوگین نفوذگران معمولا برای نفوذ به یک وردپرس , در ابتدا اقدام به اسکن بخش لاگین و سپس افزونه ها و در نهایت قالب وبسایت میکنند . اینها تماما بخش هایی هستند که افزونه ها بر آن سوار میشوند . ممکن است مدیر وب سایت , با هدف دیزاین بخش لاگین , از افزونه استفاده کرده باشد , افزونه ای که در اسکنهای Acunetix مشخص میشود که بیشتر از امنیت , فقط بر زیبایی تکیه کرده است و موجودیت وبسایت را به خطر انداخته است . مدیر دیگر , بدون توجه به امنیت […]
هنگامی با CSS و HTML کد نویسی میکنید، وقتی تعداد کدها زیاد میشود. بررسی خطایابی و اصلاح کدها کاری مشکل میباشد. مخصوصا اگر بعد از مدتی به کدها مراجعه کنید و بخواهید کدها را اصلاح کنید. یا اینکه بخواهید کدهایی که فرد دیگری نوشته را تغییر دهید یا اصلاح کنید. در صورتی که از قواعد مشخصی استفاده نکرده باشد کاری زمانبر است. این موضوع برای پروژه های بزرگتر به مراتب بحرانی تر است. برای رفع این مشکلات استاندارد هایی برای کد نویسی تعریف شده که به کمک این استانداردها کد نویسی و توسعه برنامه ها ساده تر شده است. در این مقاله سه تا از قوانین استاندارد نویسی را با هم بررسی میکنیم. و استاندارد معروف BEM را مفصل تر توضیح میدهیم. OOCSS BEM SMACSS استاندارد نویسی با OOCSS – ( Object-Oriented CSS) این استاندارد اولین متدولوژی نامگذاری در Css میباشد. که قوانین استاندارد نویسی در آن تعریف شده است. همانطور که از نامش مشخص است شی گرایی در Css است. شی گرایی در Css به کمک کلاس ها صورت میگیرد. هدف آن ایجاد اشیاء با قابلیت استفاده مجدد است. شی گرایی در برنامه نویسی به معنای شکستن کارهای بزرگ به کارهای کوچک میباشد. در این تکنیک اسکلت اصلی نوشته میشود و استایل های بصری در قالب کلاسهای جداگانه روی ساختار اصلی اعمال میشود. این امر توسعه پروژه ها را […]
هوش مصنوعی (AI) انقلابی در فناوری اطلاعات ایجاد کرده است. AI زیر شاخه ای از علوم رایانه است. که شامل ایجاد ماشین ها و نرم افزارهای هوشمند است که مانند انسان ها کار می کنند و واکنش نشان می دهند. هوش مصنوعی و برنامه های کاربردی آن در زمینه های مختلف زندگی انسان ها به عنوان سیستم خبره حل کننده مشکلات پیچیده در زمینه های مختلف مانند علم، مهندسی، تجارت، پزشکی، بازی های ویدیویی و تبلیغات استفاده میشود. هوش مصنوعی (AI) که توسط برخی به عنوان انقلاب صنعتی شناخته می شود، نه تنها نحوه انجام کارها، نحوه ارتباط ما با دیگران، بلکه آنچه را که در مورد خود می دانیم نیز تغییر خواهد داد. IR1.0، IR قرن 18، بدون اینکه مستقیماً روابط انسانی را پیچیده کند، باعث ایجاد یک تغییر اجتماعی عظیم شد. با این حال، هوش مصنوعی مدرن تأثیر فوق‌العاده‌ای بر نحوه انجام کارها و همچنین نحوه ارتباط ما با یکدیگر دارد. در مواجهه با این چالش، اصول جدیدی از اخلاق زیستی هوش مصنوعی باید در نظر گرفته‌شود. و برای ارائه دستورالعمل هایی برای رعایت فناوری هوش مصنوعی توسعه یابد. تا جهان از پیشرفت این هوش جدید بهره مند شود. هوش مصنوعی چیست؟ هوش مصنوعی (AI) تعاریف مختلفی دارد. برخی آن را فناوری ایجاد‌شده می‌دانند که به رایانه ها و ماشین ها اجازه‌می‌دهد هوشمندانه کارکنند. برخی آن را […]
با گسترش صفحات وب و پویایی و تعامل آنها بیشتر شده در نتیجه پیچیدگی بیشتری دارند. اینجاست که معماری 3 لایه جوابگوی نیازطراحان سایت نیست و مبحثی به نام معماری MVC پیش می آید. مسئله کجاست؟ فرض کنید یک نرم افزار تحت وب جهت ارائه سود و زیان شرکت ارائه کردید که سود و زیان شرکت را به کمک عدد و رقم نمایش میدهد. بعد از مدتی صاحب نرم افزار از شما میخواد اعداد را به صورت نمودار نمایش دهید. یا حتی بخواهید داده ها را با فرمت خاصی روی یک فایل ذخیره کنید. اگر شما از استانداردهای کد نویسی استفاده نکرده باشید و در کد نویسی مستقیما از پایگاه داده استفاده کرده باشید، جدای از آنکه مشکل امنیتی دارد که موضوع بحث ما در این مقاله نیست اعمال تغییرات بر روی برنامه را با مشکل جدی روبرو میکند. اما اگر از معماری MVC استفاده کرده باشید به دلیل تفکیک تمام بخش ها (بخش سرور سایت و بخش کلایت سایت) اعمال تغییرات بر روی این سیستم سریع تر و راحت تر خواهد بود و دست برنامه نویس بازتر است. همینطور استفاده از معماری MVC به ما کمک میکند تا بتوانیم قسمت های مختلف پروژه را در یک تیم طراحی نرم افزار همزمان پیش بریم بدون اینکه هریک از گروه های طراحی نرم افزار از نحوه عملکرد قسمت های دیگر آگاهی […]
Firefox یک مرورگر اینترنتی است. که توسعه دهندگان این مرورگر همواره سعی دارند. تا آن را بیشتر توسعه دهند. Firefox developer edition برای توسعه دهندگان و طراحان وب طراحی شد. این نسخه توسط فایرفاکس رونمایی شده است. شکل ظاهری آن از رنگ های تیره و مشکی طراحی شده است. آخرین نسخه firefox developer edition که فایرفاکس 94 می باشد. در اواخر سال 2019 به تدریج شتاب بیشتری گرفت. به طوری که نسخه جدید آن از سال 2020 شروع به طراحی شد. و در دوم نوامبر سال 2021 آخرین نسخه یعنی فایرفاکس 94 منتشر شد. ابزارهای کاربردیMozilla firefox developer edition: 1. Animation inspector tool این ابزار برای ساخت انیمیشن است. که به زبان سی اس اس می باشد. استفاده از این ابزار کار آسانی است. توسط این ابزار می توانید. انیمشین را در هر مرحله می توان مشاهده کرد. برای کار کردن با آن کافی است. بر روی انیمیشن کلیک راست کرده. و inspect element را انتخاب نمایید. و در پنجره dev tool روی animations کلیک کنید. 2. Color picker for css این ابزار که در ورژن توسعه دهنده محصول فایرفاکس وجود دارد، ایجاد، تنظیم و آزمایش رنگ های سفارشی را برای وب آسان می کند. همچنین تبدیل بین فرمت‌های رنگی مختلف که توسط CSS پشتیبانی میشوند. را آسان میکند، از جمله: رنگ‌های HEXA، RGB (قرمز/سبز/آبی) و HSL (رنگ/اشباع/روشنایی). […]
آیا امکان ایجاد چت روم در وردپرس وجود دارد؟ بله! شما با استفاده از وردپرس می توانید یک چت روم در سایت خود ایجاد کنید. این کار باعث می شود که کاربران شما بدون نیاز به برنامه هایی مانند Discord به راحتی با یکدیگر چت کنند. در این مقاله میخواهیم نحوه ی ایجاد چت روم با استفاده از وردپرس را به شما عزیزان آموزش دهیم. با ما همراه باشید. دلایل ایجاد چت روم در سایت ممکن است شما صاحب یک وب سایت انجمن باشید. در این صورت احتمالا به دنبال راهی هستید تا یک چت روم را اضافه کنید. برخی از سایت ها برای این کار از whatsapp و یا slack استفاده می کنند. اما ایرادی که استفاده از چت روم های خارجی دارد این است تمامی ارتباطات در خارج از وب سایتتان اتفاق می افتد. از مهم ترین مزیت های ایجاد چت روم داخلی ، ترک نکردن سایت توسط کاربران در هنگام چت است. این برای سئوی سایت شما هم بهتر است. بیایید با هم نگاهی به نحوه ی ساخت چت روم در وردپرس بیندازیم: در قدم اول افزونه ی Simple Ajax Chat را دانلود و نصب کنید. بعد از فعالسازی افزونه به بخش تنظیمات Simple Ajax Chat بروید. در این بخش باید نام چت خود را در قسمت General Settings تغییر دهید. در general […]