Развитието на уеб технологиите в днешни дни е силно повлияно от постоянно растящите изисквания и очаквания на потребителите. Притежаването на интерактивен, въздействащ и модерен сайт вече се приема като задължително условие за успешно онлайн присъствие.

В първите години на Интернет информацията е представяна предимно като текст. Днес обаче потребителите искат повече – изображения, анимации, аудио, видео клипове, онлайн чатове, инфографики, слайдове и други.

Една от уеб технологиите, с които можете да направите вашия сайт модерен и да създадете изключително потребителско изживяване, е jQuery.

Смисълът на jQuery е да се пише по-малко JavaScript код, но и да се постигат по-добри резултати. jQuery добавя нови възможности към JavaScript. С jQuery се създават лесно ефектни навигационни менюта, слайдери, галерии и други.

Ако приемем, че представянето на онлайн информацията е танцьор, то в първите му години е било достатъчно да може право хоро, за да впечатли публиката. Днес от него се изисква да може еленино хоро с елементи на шопска ръченица под съпровода на гъдулка и тъпан. 🙂

Преди да покажем силата на jQuery, първо ще хвърлим поглед над основата му – JavaScript.

 
JavaScript е скриптов език за програмиране, чрез който статичната уеб страница може да се “раздвижи”.

JavaScript се използва, освен за създаване на интерактивни уеб страници, но и за разработка на игри и създаване на скриптове, които се изпълняват от страна на сървъра. Една от технологиите е Node.js.

Вижте новата блог платформа Ghost работеща с Node.js.

Динамичният елемент в даден сайт може да бъде в промяна на съдържанието, което се визуализира на уеб страницата при действие от страна на потребителя.

Създателят на JavaScript е Брендан Ейч. Той е съосновател и на проекта Mozilla като до скоро е негов главен изпълнителен директор.

През 1995 година JavaScript уеб технологията се появява за първи път в уеб браузъра Netscape Navigator 2.0.

С добавянето на JavaScript в уеб браузъра, вече е възможно да се показва и управлява динамично съдържание от потребителя.

Стандартно JavaScript се изпълнява в уеб браузъра с помощта на файлове съдържащи JavaScript код.

Съществуват и други уеб технологии като Flash, Silverlight и други, които се ползват за добавяне на динамичност в сайта, но JavaScript изпъква и продължава да бъде предпочитана от разработчиците.

Около 87% от най-популярните 10 милиона уебсайта в Интернет ползват JavaScript.

 
JavaScript библиотеката представлява предварително написан JavaScript код. Библиотеката може да се ползва, когато е необходимо да се включи някаква функционалност в уебсайта. Вместо да се изгражда от нулата, се ползва вече създадена библиотека, която предлага точно тази функционалност.

Библиотеките подобряват и намаляват времето за разработка на уеб проекта.

 
jQuery е една от най-известните и най-използваните библиотеки на JavaScript. Нейният създател е Джон Резиг, а през 2006 година е пусната официално в Интернет.

Библиотеката е проектирана да улесни и опрости писането на JavaScript код, като едновременно с това е гъвкава и може да се надгражда с допълнителни плъгини.

Библиотеката се поддържа от всички съвременни версии на уеб браузърите.

За разработването на приложения и уеб сайтове, които ще се ползват през мобилни устройства, може да се ползва jQuery Mobile . Мобилната версия на jQuery се поддържа от множество мобилни платформи.

За мобилната версия на уебмейл клиента Horde също е ползван jQuery Mobile.

Някои от плюсовете на специално създадената мобилна версия на jQuery:

• Широка поддръжка от мобилни устройства и уеб браузъри. С jQuery Mobile е почти сигурно, че всеки ще може да достъпи сайта ви през мобилно устройство. Благодарение на някои от подобренията в jQuery Mobile, вече може да се предостави уеб документ с най-основни HTML елементи, на мобилно устройство, което не може да обработи CSS и Ajax.
• Елементите от уеб страницата като форми за попълване, радио бутони, слайдери и други, са по-достъпни за устройствата с тъч скрийн. С jQuery Mobile е възможно съвсем лесно да маркирате един единствен чекбокс, без да е необходимо да увеличавате страницата и да се прицелвате прецизно. 🙂
• Responsive (адаптивен) дизайн. Всички елементи на уеб сайта като таблици, текст и други, са проектирани с гъвкав дизайн, така че да се визуализират перфектно при различните резолюции на мобилните устройства.

Примери за елементи на jQuery Moblie:

Преминаване от един елемент към друг, с ефекти
http://view.jquerymobile.com/master/demos/transitions

Форми: полета, менюта, радио бутони и други
http://view.jquerymobile.com/master/demos/forms-gallery

Теми за мобилния дизайн
http://view.jquerymobile.com/master/demos/theme-classic

 
Освен jQuery съществуват и много други библиотеки като MooTools, Prototype, Ext Core, jsPHP, WinJS.

Сравнена с други уеб технологии и множеството други библиотеки на JavaScript, jQuery се отличава с голям интерес при разработката на уеб сайтове. Голям е и процента на сайтовете в Интернет, които ползват точно тази библиотека.

Според статистиките jQuery е предпочитаната библиотека спрямо други при голям брой уеб сайтове.

Големи сайтове използващи jQuery: Microsoft.com, Amazon.com, Mail.ru, Tumblr.com, Yandex.ru, MediaWiki.org.

Някои от предимствата на jQuery пред останалите JavaScript библиотеки: лесна за използване, постигане на повече функционалност с писане на по-малко код, голяма библиотека и изпълняване на голям брой функции, хиляди готови плъгини, богата помощна информация, поддръжка на Ajax и други.

 
Библиотеката представлява един .js файл, който може да се свали от сайта на jQuery http://jquery.com и да се запише в папката на уеб проекта. След това е необходимо да се вмъкне в кода на сайта:

 
Може да се включи към уебсайта директно чрез линк към .js файла. Какъв е линка можете да видите на следния адрес: https://developers.google.com/speed/libraries/devguide#jquery

 
Как работи jQuery: http://learn.jquery.com/about-jquery/how-jquery-works

За всички, които стартират с jQuery, не пропускайте интерактивно обучение-игра http://try.jquery.com

 
С плъгините се разширяват възможностите на jQuery библиотеката. Съществуват плъгини написани от екипа на jQuery или от независими разработчици.

С плъгините на jQuery можете да добавите различни функционалности и екстри към сайта и елементите в него. Някои от най-търсените функционалности са: форми, анимация, картинни слайдери, адаптивен дизайн и други.

Официалната колекция от плъгини: http://plugins.jquery.com

При избора на подходящ плъгин обърнете внимание на това, дали има богата помощна информация и дали се предлага поддръжка или контакт с разработчика.

Плъгините се включват в сайта както библиотеката jQuery. Първо се сваля файла, записва се в папка и след това се включва в сайта. Например:

Няколко ефектни плъгина

Екипът ни прекара най-много време в подреждане на елементите 😉

Slick – слайдер
http://plugins.jquery.com/slick (http://kenwheeler.github.io/slick)

Избор на цвят от цветова палитра
http://www.virtuosoft.eu/code/jquery-colorpickersliders

Подреждане, филтриране, категоризиране на елементи и др.
http://vestride.github.io/Shuffle

Анимирано филтриране и подреждане на елементи
https://mixitup.kunkalabs.com

Слайдери за изображения
http://wowslider.com/demo.html

Функционални подсказки
http://amsul.ca/shadow-ui/demos/tooltip