Уеб фонтовес Google Font API

Google обявиха вчера поредното си API. С него уеб програмистите ще имат достъп до директория с безплатни фонтове, които да използват в разработката на сайтове. Засега списъкът с фонтове е малък, но това е само началото и съм убеден, че бързо ще започне да нараства. За съжаление засега няма поддръжка на кирилица. Фонтовете сработват добре и при прилагане на модерните CSS3 и HTML5 възможности като сянка, ротация и т.н.

API-то е много лесто и просто за използване и се базира на пареметризирано изпозлване на хостван от Google CSS.

За повече гъвкавост е създадена и JavaScript библиотека наречена Web Font Loader, с която могат да се използват фонтове и от други провайдъри като TypeKit. Тази библиотека всъюност  е съвместна разработка на Goggle и TypeKit.

Създаване на слайд навигация със SliderNav

SliderNav е jQuery плъгин, с който лесно можете да създадете вертикален слайд навигатор. Може да се използва за бърза и лесна навигация на списъци подредени по азбучен ред, групиране на списъци по категории, като например tag could, и за каквото друго си пожелаете. Работи на всички модерни уеб браузъри: Chrome, Safari, Firefox, Opera и IE 7+.

Използването му е много лесно. Използва вложени несортирани списъци. По подразбиране създава   навигация с всичките 26 букви от латинската азбука, но има и опция за определяне на елементите за навигация. Всъщност нямаше да е зле да може автоматично да си създава елементите от първото ниво на вложените списъци, но предполагам автора ще се досети, че няма да е зле да го направи впоследствие.

Изисквания: jQuery
Демо: http://devgrow.com/slidernav-jquery-plugin/
Лиценз: BSD/MIT/GPL License

Онлайн анализ на скоростта на уеб сайт: GTmetrix

Както добре знаем скоростта на зареждане е много важен фактор за успеха на един сайт. Особено след като Google оповестиха, че това ще е един от показателите в техния search ranking.

GTmetrix е безплатно онлайн приложение за анализирате скоростта на уеб сайтове, което използва Google Page Speed и Yahoo YSlow, за да показва техните резултати и препоръки.

Можете също да сравнявате няколко URL адреса. Ако се регистрирате в сайта можете също да:

• Разглеждате стари тестове и да ги сравнявате с последните резултати;
• Да задавате период за автоматични тестове (дневни/седмични/месечни);
• Да съхранявате отчети;
• Да определяте дали даден отчет да бъде публичен или личен.

GTmetrix има също и боокмарклет, с който лесно може да тествате всеки сайт.

Ефектно "bubble" меню с jQuery

От Codrop ни показват как да направим ефектнa bubble нaвигация с jQuery. Когато IE влезе в час с останалите браузъри, ми се струва, че няма да има много нужда от flash. И този пример е доказателство за това. За сега обаче не може да се пренебрегне огромния все още дял на IE.

Изисквания: jQuery
Демо: http://tympanus.net/Tutorials/BubbleNavigation/
Лизенз: Free License

Оживете линковете в своя сайт с HoverAttribute

Ако искате да накарате посетителите на вашия сайт да обръщат повече внимание на линковете в него, а и да им бъде по-забавно, то определено може да го направите с HoverAttribute. Това е jQuery  плъгин, който ви дава възможност да направите линк лементите по-динамични, като показват определен атрибут при hover.
Преназначен е предимно за <а> тагове, които се съдържат в headings или списъци. Може да се показва всеки атрибут на елемента, като подразбиращият се е href, като за него има и няколко опции как да се форматира.

Изисквания: jQuery
Лиценз: MIT
Демо: http://www.afekenholm.se/hoverattribute-jquery-plugin/

Преобръщане на HTML елемент с jQuery Flip!

Flip! e jQuery плъгин, с който лесно можете да постигнете ефект на преобръщане на HTML елемент, произволен текст или jQuery селектор

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

Други възможни опции са скорост на анимацията и колбек функциите: onBefore, onAnimation и onEnd.

Изисквания: jQuery
Съвместимост: Всички популерни браузъри
Лиценз: MIT/GPL
Даунлоуд: http://github.com/roncioso/Flip-jQuery

HTML5 презентация

Наскоро попаднах на една презентация за новите възможности на HTML5, която е open-source.

Някои от слайдовете са интерактивни и така могат да се видят новите възможности в действие. Цялата презентация е едно web приложение, което е доста добре направено, но има още какво да се желае относно навигацията, чиято единствена възможност е да се движиш напред/назад със стрелките на клавиатурата.

Лиценз: Apache License 2.0