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 Patterns, jQuery Patterns, jQuery Plugin Patterns, Literals and Constructor Patterns, Function Patterns, Object Creation Patterns, Code Reuse Patterns, Design Patterns
Легко написанный материал для тех кто уже начал натыкаться на грабли this и прототипного наследования в JavaScript. Ребята правильно пишут: JavaScript Гарден не имеет цели научить вас языку JavaScript. Вам понадобится реальный опыт работы с языком чтобы понимать темы, рассматриваемые в этом руководстве.
http://css-tricks.com/snippets/
Коллеция базовых сниппетов на JS и jQuery на все случаи жизни от крутого парня Криса Коера (Chris Coyier).
У него кстати есть и неплохие видео-туториалы по всяким практическим моментам работы веб-мастера: от внедрения Google Fonts до установки и настройки MAMP на Mac
Огромная коллекция паттернов и готовых реализаций часто встречающихся при написании приложений. В частности есть такие разделы как: General Patterns, jQuery Patterns, jQuery Plugin Patterns, Literals and Constructor Patterns, Function Patterns, Object Creation Patterns, Code Reuse Patterns, Design 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>
В серьезных системах типо 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-пользователей
Легкость, модульность, опять же иновацинность в юзабельности для нубов
Subscribe to:
Posts (Atom)