Friday, April 20, 2012

подсчет голосов конкурса с использованием facebook likes









Когда нужно сделать социальную голосовалку на конкурсе, с использованием кнопочек "лайк" или "мне нравится" - вот встретил простое идеальное решение.

Используется тут: http://www.ingbethechange.it/





Код каждого блока с лайками выглядит так:
<div class="like">
<fb:like href="YOUR_DOMAIN/URL_OF_POSITION" show_faces="false" width="210" class=" fb_edge_widget_with_comment fb_iframe_widget"></fb:like>
</div>

Friday, April 13, 2012

3 ресурса по Javascript и jQuery

http://shichuan.github.com/javascript-patterns/#jquery-plugin-patterns
Огромная коллекция паттернов и готовых реализаций часто встречающихся при написании приложений. В частности есть такие разделы как: General PatternsjQuery PatternsjQuery Plugin PatternsLiterals and Constructor PatternsFunction PatternsObject Creation PatternsCode Reuse PatternsDesign Patterns
Легко написанный материал для тех кто уже начал натыкаться на грабли this и прототипного наследования в JavaScript. Ребята правильно пишут: JavaScript Гарден не имеет цели научить вас языку JavaScript. Вам понадобится реальный опыт работы с языком чтобы понимать темы, рассматриваемые в этом руководстве


http://css-tricks.com/snippets/
Коллеция базовых сниппетов на JS и jQuery на все случаи жизни от крутого парня Криса Коера (Chris Coyier). 
У него кстати есть и неплохие видео-туториалы по всяким практическим моментам работы веб-мастера: от внедрения Google Fonts до установки и настройки MAMP на Mac

Thursday, April 12, 2012

расширения google chrome которые использую я

Итак, слева направо:
iReader - компонует страницу для комфортного чтения или распечатки;
Webpage screenshot - быстрые скриншоты с пометками, хотя до файрфоксовского FireShot не достягивает;
Google analytics - выводит данные о текущекй посещаемости одного сайта из вашего аккаунта, по клику показывает и позволяет просматривать все остальные, оч. удобно;
AdBlock - ну куда же в наше время без него;
Wappalyzer - анализирует открытую страницу на предмет используемых технологий и фреймворков - выводит все от возможного ЯП до CMS и используемой js-библиотеки;
Facebook share Button - позволяет шарить страницу одним нажатием, что более интересно показывает число likes уже сделанных к этой странице, что по мне гораздо полезнее;
Gmail Checker -  регулярно обновляет число писем, по клику попадаем в ящик в новой вкладке, заметьте.

банер с подменой ссылки на разных страницах

Тут на одном форуме пришлось сделать банер который бы отправлял кликнувшего на разные страницы в зависимости от того на какой странице форума на этот банер кликнули.
В серьезных системах типо AdRiver это легко настраивается в интерфейсе, но тут владельцы такую интеллектуальную систему подключать не стали - она денег стоит каждый месяц а реклама  пока что размещается нерегулярно.

Итак решено было написать простой костыль на JavaScript:

HTML
<!--код исходного банера-->
<a href="http://www.advertiser-site/kungi.php" alt="Кунги" id="ecoB"  target="_blank"><img src="http://mysite/banner.gif" border="0"></a>


JavaScript
<script type="text/javascript">
//исходная ссылка
var ecoLink = 'http://www.advertiser-site/kungi.php';

//варианты в завис. от мета-тегов страницы
//а именно ищем конкретные слова означающие марки и модификации машин
if (document.getElementsByTagName('meta')[3].content.indexOf('Mitsubishi') > -1){
ecoLink = 'http://www.advertiser-site/H-L200.php'
}
if ((document.getElementsByTagName('meta')[3].content.indexOf('TOYOTA') > -1) || 
(document.getElementsByTagName('meta')[3].content.indexOf('Tacoma') > -1) ||
(document.getElementsByTagName('meta')[3].content.indexOf('Toyota') > -1) ||
(document.getElementsByTagName('meta')[3].content.indexOf('Hilux') > -1)){
ecoLink = 'http://www.advertiser-site/H-HILUX.php';
}
if (document.getElementsByTagName('meta')[3].content.indexOf('Ford') > -1){
ecoLink = 'http://www.advertiser-site/H-80F.php';
}
if (document.getElementsByTagName('meta')[3].content.indexOf('китай') > -1){
ecoLink = 'http://www.advertiser-site/H-60A_80A.php';
}

//перезаписываем href у ссылки
document.getElementById('ecoB').href = ecoLink;
</script>

Sunday, April 8, 2012

2 готовых шаблона для верстки html5


HTML KickStart

http://www.99lime.com/

Хорошо потестил, действительно "из коробки" получается сверстать аккуратные макеты за 30 минут. Очень радуют наборы иконочек, цветных кнопов, списков и всяких готовых интерфейсных фенек: слайдер или поп-ап блоки. В общем после быстрых набросков в Photoshop можно делать прототипы сразу на этом шаблоне


Bootstrap, from Twitter

не пробовал еще в деле, пугает внедрение туда всех этих модификаторов нативного CSS

2 CMS которые я хочу потестить в ближайшее время

PHP, юзабельность для не IT-пользователей

Легкость, модульность, опять же иновацинность в юзабельности для  нубов